/* ═══════════════════════════════════════════════════════════
 * 总览 v2 · 模板页样式
 * 依赖 ds/tokens.css 的语义 token；只作用于 #p-home，不碰其他页面。
 * 结构：一个主角（剩余失分额度）→ 三个降级入口 → 两条内容列
 * ═══════════════════════════════════════════════════════════ */

/* ── 首屏：主角 + 时间压力 ───────────────────────── */
.hv-north{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:var(--sp-3);margin-bottom:var(--sp-4)}

.hv-main{background:var(--bg-surface);border:1px solid var(--border-hair);border-left:3px solid var(--brand);border-radius:var(--radius-panel);padding:22px 24px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:240px}

.hv-eyebrow{font-size:var(--size-micro);font-weight:var(--fw-micro);letter-spacing:var(--ls-micro);color:var(--text-tertiary)}
.hv-num{font-size:46px;line-height:1;font-weight:750;letter-spacing:-.04em;font-variant-numeric:tabular-nums;margin-top:10px;color:var(--text-primary);display:flex;align-items:baseline;gap:3px}
.hv-num small{font-size:15px;font-weight:600;letter-spacing:0;color:var(--text-secondary)}
.hv-num.over{color:var(--danger)}
.hv-subline{font-size:12.5px;color:var(--text-tertiary);margin-top:9px;font-variant-numeric:tabular-nums;line-height:1.6}
.hv-subline b{color:var(--text-secondary);font-weight:650}

.hv-bottom{display:grid;gap:12px}
.hv-meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hv-delta{display:inline-flex;align-items:center;gap:5px;border-radius:var(--radius-pill);padding:3px 9px;font-size:11.5px;font-weight:650;background:var(--success-soft);color:var(--success);font-variant-numeric:tabular-nums}
.hv-delta.up{background:var(--danger-soft);color:var(--danger)}
.hv-delta.flat{background:var(--bg-inset);color:var(--text-tertiary)}
.hv-delta:empty{display:none}
.hv-quiet{font-size:11.5px;color:var(--text-tertiary)}

.hv-track{position:relative;height:3px;border-radius:2px;background:var(--bg-inset);margin:6px 0 0}
.hv-track i{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--brand);transition:width var(--dur-enter) var(--ease-out)}
.hv-track em{position:absolute;top:-5px;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:var(--bg-surface);border:2px solid var(--text-tertiary)}
.hv-ticks{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;color:var(--text-tertiary);margin-top:8px;font-variant-numeric:tabular-nums}
.hv-ticks .now{color:var(--text-secondary);font-weight:650}

.hv-actions{display:flex;gap:8px;flex-wrap:wrap}
.hv-btn{height:32px;padding:0 13px;border-radius:var(--radius-control);border:1px solid var(--border-hair);background:var(--bg-surface);color:var(--text-secondary);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background var(--dur-micro) var(--ease-out),border-color var(--dur-micro),color var(--dur-micro)}
.hv-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.hv-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.hv-btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.hv-btn.primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--on-brand)}

/* ── 三个降级入口 ─────────────────────────────────── */
.hv-side{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:10px}
.hv-si{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:1px 10px;align-items:center;text-align:left;background:var(--bg-surface);border:1px solid var(--border-hair);border-radius:var(--radius-card);padding:12px 14px;cursor:pointer;font-family:inherit;transition:background var(--dur-micro) var(--ease-out),border-color var(--dur-micro)}
.hv-si:hover{background:var(--bg-subtle);border-color:var(--border-strong)}
.hv-si:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.hv-si-label{font-size:12.5px;font-weight:650;color:var(--text-primary);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hv-si-sub{font-size:11.5px;color:var(--text-tertiary);line-height:1.45;overflow-wrap:anywhere}
.hv-si .hv-tag{grid-column:2;grid-row:1 / span 2;align-self:center}

.hv-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-pill);font-size:11px;font-weight:650;line-height:1.7;white-space:nowrap}
.hv-tag.ok{background:var(--success-soft);color:var(--success)}
.hv-tag.warn{background:var(--warning-soft);color:var(--warning)}
.hv-tag.bad{background:var(--danger-soft);color:var(--danger)}
.hv-tag.idle{background:var(--bg-inset);color:var(--text-tertiary)}

/* ── 内容两列 ─────────────────────────────────────── */
.hv-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:var(--sp-3);align-items:start}
.hv-stack{display:grid;gap:var(--sp-3);min-width:0}
.hv-card{background:var(--bg-surface);border:1px solid var(--border-hair);border-radius:var(--radius-panel);min-width:0}
.hv-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 20px 0}
.hv-card-h h2{font-size:var(--size-h2);line-height:var(--lh-h2);font-weight:var(--fw-h2);letter-spacing:var(--ls-h2);margin:0}
.hv-muted{font-size:12px;color:var(--text-tertiary);margin-top:4px;line-height:1.5}
.hv-count{flex:0 0 auto;font-size:12.5px;font-weight:650;color:var(--text-secondary);font-variant-numeric:tabular-nums}

/* 里程碑清单 */
.hv-nowlist{display:grid;padding:10px 10px 12px}
.hv-nowitem{display:grid;grid-template-columns:3px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;background:transparent;border:0;border-bottom:1px solid var(--border-hair);border-radius:6px;padding:10px 10px;font-family:inherit;cursor:pointer;transition:background var(--dur-micro) var(--ease-out)}
.hv-nowitem:last-child{border-bottom:0}
.hv-nowitem:hover{background:var(--bg-hover)}
.hv-nowitem:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.hv-nowitem .hv-mk{width:3px;height:18px;border-radius:2px}
.hv-nm{font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em;min-width:0;line-height:1.45}
.hv-nm small{display:block;font-weight:400;color:var(--text-tertiary);font-size:11.5px;margin-top:2px}
.hv-nowitem .hv-tag{grid-column:3}

/* 五条线（首屏只留三条进攻线） */
.hv-lanes{display:grid;gap:14px;padding:16px 20px 16px}
.hv-lane{display:grid;gap:7px}
.hv-lane-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.hv-lane-name{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;color:var(--text-primary);letter-spacing:-.01em}
.hv-lane-name i{width:3px;height:13px;border-radius:2px;flex:0 0 3px}
.hv-lane-name em{font-style:normal;font-size:10.5px;font-weight:500;color:var(--text-tertiary)}
.hv-lane-count{font-size:11.5px;color:var(--text-tertiary);font-variant-numeric:tabular-nums;font-weight:600}
.hv-segs{display:flex;gap:3px}
.hv-segs i{flex:1;height:5px;border-radius:2px;background:var(--bg-inset)}
.hv-lane-foot{padding:0 20px 16px;font-size:11.5px;color:var(--text-tertiary);line-height:1.6}

/* 现在的位置 */
.hv-rows{display:grid;margin:0;padding:6px 20px 16px}
.hv-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--border-hair);font-size:12.5px;line-height:1.55}
.hv-row:last-child{border-bottom:0}
.hv-row dt{margin:0;color:var(--text-tertiary);font-weight:550}
.hv-row dd{margin:0;color:var(--text-secondary);font-variant-numeric:tabular-nums}

.hv-link{padding:0;border:0;background:none;font-family:inherit;font-size:12px;font-weight:600;color:var(--text-brand);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.hv-link:hover{color:var(--brand-hover)}
.hv-link:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:3px}

/* ── 响应式 ───────────────────────────────────────── */
@media (max-width:1080px){
  .hv-north,.hv-cols{grid-template-columns:minmax(0,1fr)}
  .hv-side{grid-template-rows:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .hv-si-label{white-space:normal}
}
@media (max-width:860px){
  .hv-main{padding:18px;min-height:0;gap:18px}
  .hv-num{font-size:40px}
}
@media (max-width:720px){
  .hv-side{grid-template-columns:minmax(0,1fr)}
  .hv-btn{height:var(--control-h-lg)}
  .hv-actions .hv-btn{flex:1 1 auto;justify-content:center}
  .hv-ticks span:nth-child(2){display:none}
}