/* ═══════════════════════════════════════════════════
   研途 · 时间线模块
   进度打卡 / 下一节点倒计时 / 准备清单
   命名前缀 mt- 只作用于本模块
   ═══════════════════════════════════════════════════ */

/* ─── 顶部面板：倒计时 + 进度 ───────────────────── */
.mt-panel{
  position:relative;display:grid;grid-template-columns:1.08fr .92fr;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.062),rgba(255,255,255,.018));
  box-shadow:var(--sh-1);overflow:hidden;margin-top:4px;
  transition:border-color var(--t-2),box-shadow var(--t-3) var(--ease-out);
}
.mt-panel:hover{border-color:rgba(255,255,255,.16);box-shadow:var(--sh-2)}
.mt-panel::after{
  content:"";position:absolute;right:-90px;top:-130px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.42),transparent 68%);
  pointer-events:none;opacity:.7;
  animation:mt-fade var(--t-4) var(--ease-out) both;
}
.mt-panel-main{position:relative;z-index:2;padding:26px 28px 28px}
.mt-panel-side{
  position:relative;z-index:2;padding:26px 28px;display:flex;flex-direction:column;
  justify-content:center;gap:13px;border-left:1px solid var(--line-2);
  background:rgba(0,0,0,.16);
}

.mt-k{display:block;font-size:12.5px;letter-spacing:.04em;color:var(--ink-3)}
.mt-k b{color:var(--ink);font-weight:660}

.mt-big{
  display:flex;align-items:baseline;gap:11px;margin-top:8px;
  font-size:clamp(52px,6.6vw,76px);font-weight:780;line-height:1;
  letter-spacing:-.045em;font-variant-numeric:tabular-nums;
}
.mt-big > span{transition:color var(--t-2)}
.mt-big i{font-style:normal;font-size:15px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.mt-big.is-txt{font-size:clamp(21px,3.2vw,29px);letter-spacing:-.015em;font-weight:700;line-height:1.3}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .mt-big > span{background:linear-gradient(180deg,#fff 16%,#BCD0FF);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
}

.mt-sub{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:15px;
  font-size:12.8px;color:var(--ink-3);max-width:54ch;
}
.mt-sub-i{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.mt-sub-i .ic{font-size:13px;color:var(--ink-4)}
.mt-sub-sep{width:3px;height:3px;border-radius:50%;background:var(--ink-4);flex:none}

.mt-prog-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.mt-pct{
  font-size:34px;font-weight:760;line-height:1;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--ink);
}
.mt-pct i{font-style:normal;font-size:15px;font-weight:600;color:var(--ink-3);margin-left:2px}

.mt-track{
  position:relative;height:8px;border-radius:var(--r-full);overflow:hidden;
  background:rgba(255,255,255,.075);box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.mt-fill{
  position:relative;display:block;height:100%;width:0;border-radius:var(--r-full);
  background:linear-gradient(90deg,#2563EB,#7FAFFF);
  box-shadow:0 0 18px rgba(59,130,246,.5);
  transition:width var(--t-4) var(--ease-out);
}
.mt-fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:translateX(-100%);animation:mt-sheen 3.4s var(--ease-io) infinite;
}

.mt-prog-meta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-3);
}
.mt-prog-meta b{color:var(--ink);font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums}

/* ─── 工具栏 ───────────────────────────────────── */
.mt-tool-k{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3)}
.mt-tool-k .ic{font-size:13px;color:var(--ink-4)}

.mt-page .yt-toolbar{margin-top:18px}
.mt-reset{
  transition:color var(--t-2) var(--ease-out),background var(--t-2) var(--ease-out),
             border-color var(--t-2) var(--ease-out),transform var(--t-1) var(--ease-out);
}
.mt-reset:hover{
  color:var(--red);background:var(--red-soft);border-color:var(--red-line);transform:scale(1.02);
}
.mt-reset:active{transform:scale(.97)}
.mt-reset .ic{font-size:13px}

/* ─── 时间轴节点 ───────────────────────────────── */
.mt-tl{margin-top:20px}

.mt-node{display:block}
.mt-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.mt-head h4{flex:1 1 auto;min-width:0}

/* 标题：勾选后变暗 + 划线（划线用伪元素做过渡） */
.mt-t{position:relative;display:inline-block;max-width:100%;transition:color var(--t-2) var(--ease-out)}
.mt-t::after{
  content:"";position:absolute;left:0;top:54%;width:100%;height:1.5px;border-radius:2px;
  background:var(--ink-4);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-3) var(--ease-io);
}
.mt-checked .mt-t{color:var(--ink-3)}
.mt-checked .mt-t::after{transform:scaleX(1)}
.mt-checked .tl-dot{border-color:var(--blue)}
.mt-checked:not(.done) .tl-dot i{background:var(--blue)}

/* 节点打卡按钮 */
.mt-node-check{
  flex:none;min-width:78px;justify-content:center;
  padding:4px 10px;border-radius:var(--r-full);border:1px solid var(--line);
  background:rgba(255,255,255,.035);color:var(--ink-3);
  transition:color var(--t-2),background var(--t-2),border-color var(--t-2),
             transform var(--t-1) var(--ease-out);
}
.mt-node-check:hover{
  color:var(--ink);background:rgba(255,255,255,.075);border-color:var(--ink-4);
  transform:scale(1.02);
}
.mt-node-check:active{transform:scale(.97)}
.mt-node-check.on{
  color:var(--blue-ink);background:var(--blue-soft);border-color:var(--blue-line);
}
.mt-check-t{font-size:12.5px;font-variant-numeric:tabular-nums}

/* 展开按钮 */
.mt-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:11px}
.mt-expand{
  display:inline-flex;align-items:center;gap:7px;height:29px;padding:0 11px;
  border-radius:var(--r-full);border:1px solid var(--line);
  background:rgba(255,255,255,.035);color:var(--ink-3);font-size:12.5px;
  transition:color var(--t-2),background var(--t-2),border-color var(--t-2),
             transform var(--t-1) var(--ease-out);
}
.mt-expand:hover{
  color:var(--ink);background:rgba(255,255,255,.075);border-color:var(--ink-4);
  transform:scale(1.02);
}
.mt-expand:active{transform:scale(.97)}
.mt-chev{font-size:13px;color:var(--ink-4);
  transition:transform var(--t-3) var(--ease-io),color var(--t-2)}
.mt-open .mt-chev{transform:rotate(180deg);color:var(--blue-ink)}
.mt-count{
  font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ink-4);
  padding:1px 7px;border-radius:var(--r-full);background:rgba(255,255,255,.055);
  transition:color var(--t-2),background var(--t-2);
}
.mt-count.is-full{color:var(--blue-ink);background:var(--blue-soft)}

/* ─── 准备清单（高度过渡展开）──────────────────── */
.mt-cl{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height var(--t-3) var(--ease-io),opacity var(--t-2) var(--ease-out);
}
.mt-open .mt-cl{opacity:1}
.mt-cl-in{padding-top:10px}
.mt-cl-box{
  max-width:760px;
  border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:rgba(255,255,255,.028);padding:12px 14px 10px;
  transition:border-color var(--t-2);
}
.mt-cl-box:hover{border-color:var(--line)}
.mt-cl-head{
  display:flex;align-items:center;gap:7px;margin-bottom:7px;
  font-size:11.5px;letter-spacing:.08em;color:var(--ink-4);
}
.mt-cl-head .ic{font-size:12px}
.mt-cl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.mt-cl-i{animation:none}
.mt-open .mt-cl-i{
  animation:mt-rise var(--t-3) var(--ease-out) both;
  animation-delay:calc(var(--i,0) * 45ms);
}

.mt-cl-b{
  display:flex;align-items:flex-start;gap:9px;width:100%;padding:5px 5px;
  border-radius:8px;text-align:left;color:var(--ink-2);
  transition:background var(--t-2),color var(--t-2),transform var(--t-1) var(--ease-out);
}
.mt-cl-b:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.mt-cl-b:active{transform:scale(.995)}
.mt-cl-b .yt-box{margin-top:1px}
.mt-cl-t{
  font-size:13px;line-height:1.55;letter-spacing:.005em;
  transition:color var(--t-2);
}
.mt-cl-b.on .mt-cl-t{color:var(--ink-4);text-decoration:line-through;
  text-decoration-color:var(--ink-4);text-decoration-thickness:1px}

/* 清单全齐的小勾 */
.mt-badge{
  display:none;align-items:center;gap:5px;padding:1px 8px 1px 6px;
  border-radius:var(--r-full);border:1px solid var(--blue-line);
  background:var(--blue-soft);color:var(--blue-ink);
  font-size:11px;font-weight:600;letter-spacing:.02em;
}
.mt-badge.on{display:inline-flex;animation:mt-pop var(--t-3) var(--spring) both}
.mt-badge .ic{font-size:11px}

/* ─── 说明卡 ───────────────────────────────────── */
.mt-note{
  margin-top:44px;border-color:var(--blue-line);background:var(--blue-soft);
}
.mt-note h3{color:var(--blue-ink)}
.mt-note p{color:var(--blue-ink);opacity:.86}

/* ─── 动效 ─────────────────────────────────────── */
@keyframes mt-rise{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
@keyframes mt-pop{
  from{opacity:0;transform:scale(.82)}
  to{opacity:1;transform:none}
}
@keyframes mt-sheen{
  0%{transform:translateX(-100%)}
  55%,100%{transform:translateX(220%)}
}
@keyframes mt-fade{from{opacity:0}to{opacity:.7}}

/* ─── 响应式 ───────────────────────────────────── */
@media (max-width:900px){
  .mt-panel{grid-template-columns:1fr}
  .mt-panel-side{border-left:0;border-top:1px solid var(--line-2);background:transparent}
}
@media (max-width:640px){
  .mt-panel-main,.mt-panel-side{padding:20px 18px}
  .mt-big{font-size:54px;gap:8px}
  .mt-pct{font-size:28px}
  .mt-head{gap:8px}
  .mt-node-check{min-width:0;padding:4px 8px}
  .mt-check-t{display:none}
  .mt-note{margin-top:32px}
}