/* 保研时间线页专属样式。.stage-tab / .tl-* / .phase-guide 等由页面脚本生成或依赖。 */

/* ---------- 标题区 ---------- */
.timeline-hero { padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 5vw, 56px); }
.timeline-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-10); align-items: end; }
.timeline-hero__text { display: grid; gap: var(--space-4); }
.timeline-hero__text .t-lead { max-width: 36em; }
.tl-intro-note { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 34px; padding: 0 14px; border: 1px solid var(--glass-line); border-radius: var(--r-pill); background: var(--glass-bg); color: var(--text-2); font-size: var(--fs-footnote); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
.tl-intro-note svg { width: 15px; height: 15px; color: var(--accent); }
.timeline-hero__aside { display: grid; gap: var(--space-2); padding: var(--space-6); }
.timeline-hero__aside h2 { font-size: var(--fs-headline); font-weight: 600; letter-spacing: 0; }
.timeline-hero__aside p { color: var(--text-2); font-size: var(--fs-footnote); }

/* ---------- 阶段切换（吸顶毛玻璃条） ---------- */
.stage-nav { position: sticky; top: var(--header-h); z-index: 20; display: flex; justify-content: center; padding: var(--space-3) 0; margin-bottom: var(--space-8); }
.stage-nav h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stage-row { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 4px; overflow-x: auto; border: 1px solid var(--glass-line); border-radius: var(--r-pill); background: rgba(239,239,243,.82); box-shadow: var(--shadow-2); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); scrollbar-width: none; }
.stage-row::-webkit-scrollbar { display: none; }
.stage-tab { display: inline-flex; align-items: center; min-height: 38px; padding: 0 20px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2); font-size: var(--fs-callout); font-weight: 600; white-space: nowrap; transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.stage-tab:hover { color: var(--text); }
.stage-tab.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.06); }
.stage-tab .st-s { display: none; }
.stage-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line-strong); }

/* ---------- 时间线主体 ---------- */
.timeline-workspace { padding-bottom: var(--space-16); }
.tl-wrap { display: block; max-width: 920px; margin: 0 auto; }

.phase-guide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); padding: var(--space-6) var(--space-8); border-radius: var(--r-xl); background: var(--aurora), var(--bg-elevated); box-shadow: var(--shadow-1); }
.phase-guide h2 { font-size: var(--fs-title-2); line-height: var(--lh-title); letter-spacing: var(--ls-tight); }
.phase-guide p { margin-top: 6px; color: var(--text-2); font-size: var(--fs-callout); }
.phase-guide a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-footnote); font-weight: 600; white-space: nowrap; }
.phase-guide a:hover { background: var(--accent-soft-2); }

.tl-stage { margin-top: var(--space-16); }
.tl-stage-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-5); row-gap: 4px; align-items: end; margin-bottom: var(--space-6); }
.tl-stage-head h2 { grid-row: span 2; font-size: clamp(44px, 6vw, 72px); line-height: .95; letter-spacing: var(--ls-hero); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ts-tag { color: var(--accent); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em; }
.ts-goal { color: var(--text-2); font-size: var(--fs-callout); }
.ts-goal strong { color: var(--text); font-weight: 700; }

.tl-track { position: relative; display: grid; gap: var(--space-4); padding-left: 44px; }
.tl-track::before { content: ""; position: absolute; left: 14px; top: 18px; bottom: 18px; width: 2px; border-radius: 1px; background: linear-gradient(to bottom, var(--blue-200), var(--gray-200)); }
.tl-node { position: relative; }
.tl-dot { position: absolute; left: -38px; top: 22px; width: 18px; height: 18px; border: 3px solid var(--bg); border-radius: 50%; background: var(--gray-300); box-shadow: 0 0 0 1px var(--line); }
.tl-node.acc .tl-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(11,92,213,.14); }
.tl-node.soft .tl-dot { background: var(--blue-200); }
.tl-card { border-radius: var(--r-lg); background: var(--bg-elevated); box-shadow: var(--shadow-1); overflow: hidden; transition: box-shadow var(--dur-2) var(--ease); }
.tl-node:hover .tl-card, .tl-node.open .tl-card { box-shadow: var(--shadow-2); }
.tl-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) 20px; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6) 0; cursor: pointer; }
.tl-when { display: inline-flex; padding: 3px 10px; border-radius: var(--r-pill); background: var(--bg-inset); color: var(--text-2); font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }
.tl-node.acc .tl-when { background: var(--accent-soft); color: var(--accent); }
.tl-card-head h3 { font-family: var(--font-sans); font-size: var(--fs-headline); font-weight: 600; line-height: 1.45; letter-spacing: 0; }
.tl-chev { width: 20px; height: 20px; color: var(--gray-400); transition: transform var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease); }
.tl-node.open .tl-chev { transform: rotate(180deg); color: var(--accent); }
.tl-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--space-3) var(--space-6) var(--space-5); }
.tl-tag { display: inline-flex; padding: 2px 9px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--text-2); font-size: var(--fs-caption); }
/* 展开：grid 行高 0fr → 1fr，平滑且不需要写死高度 */
.tl-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
.tl-node.open .tl-detail { grid-template-rows: 1fr; }
.tl-detail-inner { min-height: 0; overflow: hidden; }
.tl-detail-inner > p { margin: 0 var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-callout); line-height: 1.75; }
.tl-todo { display: grid; gap: var(--space-3); margin: var(--space-5) var(--space-6) 0; }
.tl-todo-item { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: var(--fs-callout); line-height: 1.55; }
.tk { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.tk svg { width: 11px; height: 11px; }
.tl-hook { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); margin: var(--space-5) var(--space-6) 0; padding: var(--space-4) var(--space-5); border-radius: var(--r-md); background: var(--accent-soft); }
.th-text { font-size: var(--fs-footnote); }
.th-text strong { color: var(--accent); }
.tl-detail-inner > :last-child { margin-bottom: var(--space-6); }

/* 结尾行动卡 */
.tl-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; margin-top: var(--space-16); padding: clamp(28px, 4vw, 48px); border-radius: var(--r-2xl); background: var(--grad-dark); color: var(--text-on-dark); box-shadow: var(--shadow-3); }
.c-eye { color: var(--blue-300); font-size: var(--fs-footnote); font-weight: 600; }
.tl-cta h2 { margin-top: var(--space-2); color: #fff; font-size: var(--fs-title-1); line-height: 1.15; letter-spacing: var(--ls-title); }
.tl-cta p { margin-top: var(--space-3); max-width: 38em; color: var(--text-on-dark-2); font-size: var(--fs-callout); }

/* ---------- 响应式 ---------- */
@media (max-width: 1000px) {
  .timeline-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); align-items: start; }
}
@media (max-width: 900px) {
  .stage-nav { justify-content: flex-start; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .stage-tab { padding: 0 16px; }
  .phase-guide { padding: var(--space-5); }
  .tl-track { padding-left: 32px; }
  .tl-track::before { left: 8px; }
  .tl-dot { left: -32px; width: 16px; height: 16px; }
  .tl-card-head { grid-template-columns: minmax(0, 1fr) 20px; padding: var(--space-4) var(--space-5) 0; }
  .tl-when { grid-column: 1 / -1; justify-self: start; }
  .tl-card-head h3 { grid-row: 2; }
  .tl-chev { grid-row: 2; }
  .tl-tags, .tl-hook, .tl-todo { margin-inline: var(--space-5); }
  .tl-tags { padding-inline: var(--space-5); margin-inline: 0; }
  .tl-detail-inner > p { margin-inline: var(--space-5); }
  .tl-cta { grid-template-columns: 1fr; gap: var(--space-5); }
  .tl-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .tl-detail, .tl-chev { transition: none; } }