/* ═══════════════════════════════════
   STATS VIEW — 2026 editorial data-viz redesign
   The Economist data-viz × Stripe Press editorial × Linear micro-interactions
   核心：朱印紅 vermilion accent / 思源宋大數字 / SVG sparkline + heatmap
        / IntersectionObserver count-up animation / scroll-driven bar fill
═══════════════════════════════════ */
/* 5 人 mesh 重整（2026-05）：layout 主軸切回 viewport media query；
   container query 從「主斷點」退到「卡片內部微調」場景，避免 480px 失效再被 !important 救火。
   ≤599 phone / 600-899 tablet portrait / 900-1199 tablet landscape / ≥1200 desktop dashboard */
/* 2026-05-15 v16: 統計頁套全國法規資料庫 Bootstrap 5 .container 規範
   原 max-inline-size: min(96vw, 1280px) → 大螢幕全寬, sidebar 240 reality 下卡片
   feels left. 改 BS5 斷點 max-width + margin auto, 桌機固定 cap 1170 置中對齊 q-area / law-body */
.stats-wrap {
  width: 100%;
  margin: 0 auto;
  padding: 16px 15px 80px;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: stats;
}
@media (min-width: 576px) {
  .stats-wrap {
    max-width: min(540px, calc(100% - 24px));
    padding-left: 31px; padding-right: 31px;
  }
}
@media (min-width: 768px) {
  .stats-wrap { max-width: min(750px, calc(100% - 24px)); }
}
@media (min-width: 992px) {
  .stats-wrap {
    max-width: min(970px, calc(100% - 48px));
    padding-top: 24px;
  }
}
@media (min-width: 1200px) {
  .stats-wrap {
    max-width: min(1170px, calc(100% - 64px));
    padding-top: 32px;
  }
}

/* ── HERO（editorial dateline） ───────────────────── */
.stats-hero {
  padding: 32px 0 28px;
  text-align: center;        /* user 回饋：hero 文字置中 */
  border-bottom: 1px solid var(--c-rule, var(--c-border));
  margin-bottom: 32px;
}
.stats-hero-hairline { margin-left: auto; margin-right: auto; }
.stats-hero-lead { margin-left: auto; margin-right: auto; text-align: center; }
.stats-hero-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c-muted);
  margin-bottom: 14px;
}
.stats-hero-h1 {
  font-family: var(--ff-serif-cn);
  font-size: clamp(32px, 5vw + 8px, 56px);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--c-text);
  font-weight: 700;
  margin-bottom: 14px;
}
.stats-hero-hairline {
  height: 2px;
  width: 56px;
  background: var(--c-vermilion);
  margin: 14px 0 18px;
}
.stats-hero-lead {
  font-family: var(--ff-serif-cn);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
  color: var(--c-text);
  max-width: 38em;
  text-wrap: pretty;
}
.stats-hero-lead strong {
  font-family: var(--ff-serif-cn);
  font-weight: 700;
  color: var(--c-vermilion);
  font-feature-settings: 'tnum' 1;
}

/* ── METRICS row（3 大數字） ─────────────────────── */
.stats-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 36px;
}
@media (min-width: 600px) {
  .stats-metrics { grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
}
.stats-metric {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  /* 2026-05-18 對齊玻璃卡（subj-bar-list / ach-roster / activity-grid 等）radius token */
  border-radius: clamp(16px, 1.6vw, 24px);
  padding: 24px 22px;
  position: relative;
  overflow: visible; /* a11y: 不再切數字 — 5 位數溢出時 wrap 不消失 */
  display: flex;
  flex-direction: column;
  /* 2026-05-12 v4 user：「有的在左邊、有的在右邊，亂七八糟」→ 三卡內容全置中
     主軸 center（垂直）+ 交叉軸 center（水平）+ text-align center，三卡完全對齊 */
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 132px;            /* 三卡等高 */
}
/* 2026-05-18 砍 ring 卡頂端紅 bar — user 反饋只有 1 張卡有紅線視覺不一致 */
/* 2026-05-18 砍另 2 卡 hairline — 跟 ring 紅 bar 一起拿掉，三卡完全一致 */
.metric-num {
  font-family: var(--ff-serif-cn);
  font-size: clamp(32px, 8vw, 56px);   /* a11y: 320px 也能塞 5 位數，floor 32 */
  font-weight: 700;
  color: var(--c-text);
  line-height: 1;
  letter-spacing: -.02em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  margin: 0;                            /* 排版改 label 在上、數字下 */
  overflow-wrap: anywhere;
}
.metric-label {
  font-family: var(--ff-sans-cn);       /* 中文不該用 mono fallback (Bug 4 audit) */
  font-size: 12px;                       /* a11y: 11→12 提可讀性 */
  letter-spacing: .08em;                 /* 中文 tracking 收緊 */
  font-weight: 500;
  color: var(--c-muted);
  margin: 0 0 8px;                       /* eyebrow 在數字上方 */
}
/* 2026-05-12 v5 方案 A：metric-sub 改編輯誌節奏
   ─ 上方加 hairline divider，跟大數字 + label 之間明確分段（avoid bottom-heavy float）
   ─ Card #2 sub「對 870 錯 364」（拿掉 ✓/✗ icon 改純文字，更乾淨）
   ─ Card #3 sub「最佳 21 天」單一資訊；無 longestStreak 則整段不渲染（無 divider）
   ─ 砍 .metric-sep（方案 A 後沒有多項要 · 分隔）但 class 留著供回退 */
.metric-sub {
  display: flex;
  gap: clamp(10px, 1.2vw, 14px);
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--ff-sans-cn);
  font-size: 13px;
  color: var(--c-muted);
  margin-top: 14px;
  padding-top: 10px;
  position: relative;
  /* 朱印 chop 風 hairline：48-72px 寬置中，比 border-top 全寬更編輯誌 */
}
.metric-sub::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: clamp(40px, 6vw, 64px);
  height: 1px;
  background: var(--c-border);
}
.metric-sub .metric-pos { color: var(--c-success); font-weight: 600; }
.metric-sub .metric-neg { color: var(--c-muted); }
.metric-sub .metric-sep { opacity: .4; }
/* 「最佳 N 天」strong tag：serif + ink 黑色，凸顯數字 */
.metric-sub strong {
  font-family: var(--ff-serif-cn);
  font-weight: 700;
  color: var(--c-text);
  font-feature-settings: 'tnum' 1;
  margin: 0 2px;
}

/* Streak metric 特殊樣式：on-fire 時朱印紅漸層底 + 大火焰 */
.stats-metric-streak.on-fire {
  background: linear-gradient(135deg, var(--c-surface) 0%, color-mix(in oklch, var(--c-vermilion, #b23a2b) 8%, var(--c-surface)) 100%);
  border-color: color-mix(in oklch, var(--c-vermilion, #b23a2b) 30%, var(--c-border));
}
.stats-metric-streak.on-fire .metric-num {
  color: var(--c-vermilion);
}
.stats-metric-streak .metric-num {
  display: flex;
  align-items: center;
  justify-content: center;  /* v4：火焰 + 數字在 metric-num 內水平置中（跟卡片其他元素對齊） */
  gap: 4px;
}
.stats-metric-streak .streak-flame {
  font-size: .55em;
  line-height: 1;
  transform: translateY(-.08em);  /* emoji 重心偏下，視覺微調 */
  filter: drop-shadow(0 1px 2px color-mix(in oklch, var(--c-vermilion, #b23a2b) 40%, transparent));
  animation: flameSwing 3s ease-in-out infinite;
}
@keyframes flameSwing {
  0%, 100% { transform: rotate(-3deg) scale(1); }
  50%      { transform: rotate(3deg) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .stats-metric-streak .streak-flame { animation: none; }
}

/* Ring metric — SVG progress ring with stroke-dashoffset animation
   2026-05-12 v4：桌機 ring 卡也走橫排（svg + 文字並列），靠 justify-content
   center 把整組置中。column 在大 min-height 下會留空白，row 更密。*/
.stats-metric-ring {
  display: flex;
  flex-direction: row;             /* 蓋掉 base column */
  align-items: center;
  justify-content: center;         /* 跟其他兩卡視覺對齊 */
  gap: 18px;
  padding: 22px;
}
.ring-svg {
  /* Phase 3a：固定 96px → fluid，桌機可放大、手機不過小；non-scaling-stroke 讓邊粗永遠 8px */
  width: clamp(84px, 8vw, 120px);
  height: clamp(84px, 8vw, 120px);
  flex-shrink: 0;
  transform: rotate(-90deg);
  --ring-pct: 0;
}
.ring-track {
  fill: none;
  stroke: var(--c-border);
  stroke-width: 8;
  vector-effect: non-scaling-stroke;
}
.ring-fill {
  fill: none;
  stroke: var(--c-vermilion);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
  transition: stroke-dasharray 1200ms cubic-bezier(.2,.9,.3,1.05);
}
/* v4：ring-center 不再 flex:1（會撐到滿撞掉 row 群體 center），讓它自然寬度
   配合 .stats-metric-ring justify-content:center 把 [svg + ring-center] 群體置中 */
.ring-center { min-width: 0; text-align: center; }
.ring-num {
  font-family: var(--ff-serif-cn);
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 700;
  color: var(--c-vermilion);
  line-height: 1;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  display: flex;
  align-items: baseline;
  justify-content: center;         /* 數字 + % 在 ring-center 內水平置中 */
  gap: 4px;
}
.ring-pct {
  font-size: .55em;          /* a11y: .42→.55 提對比 */
  color: var(--c-muted);
  font-weight: 700;
}
.ring-label {
  font-family: var(--ff-sans-cn);  /* 中文 → sans-cn (mono fallback 醜) */
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--c-muted);
  margin-top: 8px;
}

/* ── SECTION 通用 ────────────────────────────────── */
.stats-section {
  margin-bottom: 44px;
  view-transition-name: stats-section;
}
.stats-section-head {
  margin-bottom: 22px;
}
.section-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c-vermilion);
  margin-bottom: 8px;
}
.section-h2 {
  font-family: var(--ff-serif-cn);
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--c-text);
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ach-counter {
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
  letter-spacing: .04em;
}
.section-lead {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.6;
  max-width: 38em;
}

/* ═══════════════════════════════════════════════════════════════
   2026-05-12 卡片視覺統一 — 對齊首頁玻璃容器 token
   舊版各卡（.activity-grid / .stats-cta-card / .subj-bar-list /
   .wrong-2026-list / .stats-empty / Layer3 .panel）各自 border-radius
   14/12/16px + solid surface，跟首頁 .sprint-card / .subject-progress
   玻璃 + 大圓角 + 浮層陰影視覺斷層。改用同 token 對齊。
   ─ background / blur / border / radius / shadow 共用，各卡只改 layout
═══════════════════════════════════════════════════════════════ */
.stats-cta-card,
.activity-grid,
.subj-bar-list,
.stats-empty,
.ach-roster,
.stats-layer3 > .panel,
.wr-section > .wr-summary-card,
.wr-section > .wr-empty {
  background: color-mix(in oklch, var(--c-surface) 65%, transparent);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid var(--c-border);
  border-radius: clamp(16px, 1.6vw, 24px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10),
              0 24px 64px -16px rgba(0,0,0,.18);
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 28px);
}
/* .panel 已內含 .panel-hdr (border-bottom) + 自己的 padding；外層只給玻璃皮，padding 收回 0
   margin-bottom 不動（base.css 12px + AI panel inline margin-top:12px 共撐間距）*/
.stats-layer3 > .panel {
  padding: 0;
  overflow: hidden;
}
.stats-layer3 > .panel .panel-hdr {
  padding: 14px clamp(18px, 2.2vw, 24px);
}

/* ── ACTIVITY heatmap + sparkline ──────────────── */
.activity-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 600px) {
  .activity-grid { grid-template-columns: 2fr 1fr; }
}
/* ── ACTIVITY 4 週 summary stack ───────
   2026-05-12 v5：30 天 heatmap (7×5 calendar grid) 退場
   3 位 UI/UX 專家共識：
     1. n=30 × 7 cols 是 GitHub 1-year 視覺的儀式抄襲，4 週 grid 看不出 pattern
     2. 跟 14-day sparkline 重複（都答「最近有沒有在練」）
     3. WCAG: heat-2/3 contrast < 4.5:1，11px mono 對 45+ 歲老花眼太小
     4. 4-週 stack 一列一週 + 全寬 bar，編輯誌風 + 一眼看完
   結構：4 row × [label 56px / bar 1fr / total auto / tag-slot auto]
   bar 長度 = thisWeekTotal / maxWeekTotal × 100%（相對自己高峰，非絕對值）*/
.week-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 4px 4px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.week-row {
  display: grid;
  grid-template-columns: 56px 1fr auto 64px;
  align-items: center;
  column-gap: 12px;
  min-height: 28px;
}
.week-row.is-today .week-label {
  color: var(--c-vermilion);
  font-weight: 700;
}
.week-label {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--c-muted);
  white-space: nowrap;
}
.week-bar-track {
  height: 12px;
  background: color-mix(in oklch, var(--c-border) 85%, transparent);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.week-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,
    var(--c-vermilion) 0%,
    color-mix(in oklch, var(--c-vermilion) 78%, #ffb39e) 100%);
  border-radius: 6px;
  animation: week-bar-grow 900ms cubic-bezier(.2,.9,.3,1.05) 200ms forwards;
}
@keyframes week-bar-grow {
  to { width: var(--week-pct, 0%); }
}
.week-row.is-today .week-bar-fill {
  /* 本週 bar 加白線 hairline 標示焦點 */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.week-total {
  font-family: var(--ff-serif-cn);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-align: right;
}
.week-total > span { color: var(--c-text); }
.week-tag-slot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.week-tag {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.week-tag-today {
  background: var(--c-vermilion);
  color: #FFFAF2;
}
.week-tag-best {
  background: color-mix(in oklch, var(--c-vermilion) 14%, transparent);
  color: var(--c-vermilion);
}
.week-tag-low {
  background: color-mix(in oklch, var(--c-border) 70%, transparent);
  color: var(--c-muted);
}
/* a11y: 砍 bar 動畫 for reduced motion；直接呈現 final width */
@media (prefers-reduced-motion: reduce) {
  .week-bar-fill {
    animation: none;
    width: var(--week-pct, 0%);
  }
}
/* mobile：label 收緊、字級降一檔，tag-slot 保留小寬度 */
@media (max-width: 540px) {
  .week-stack {
    gap: 12px;
    padding: 4px 2px 2px;
  }
  .week-row {
    grid-template-columns: 44px 1fr auto 50px;
    column-gap: 10px;
    min-height: 24px;
  }
  .week-label { font-size: 11.5px; }
  .week-bar-track { height: 10px; }
  .week-total { font-size: 14.5px; }
  .week-tag { font-size: 9.5px; padding: 2px 6px; }
}

.activity-meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid var(--c-border);
  padding-top: 18px;
}
@media (min-width: 600px) {
  .activity-meta { border-top: none; border-left: 1px solid var(--c-border); padding-top: 0; padding-left: 22px; }
}
.activity-row {}
.activity-num {
  font-family: var(--ff-serif-cn);
  font-size: clamp(36px, 5vw, 44px);
  font-weight: 700;
  color: var(--c-vermilion);
  line-height: 1;
  font-feature-settings: 'tnum' 1;
  margin-bottom: 4px;
}
.activity-lbl {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--c-muted);
}
.activity-spark-wrap {}
.sparkline {
  width: 100%;
  height: 56px;
  display: block;
  margin-bottom: 4px;
}
.spark-area {
  fill: color-mix(in oklch, var(--c-vermilion) 18%, transparent);
  stroke: none;
}
.spark-line {
  fill: none;
  stroke: var(--c-vermilion);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.activity-spark-cap {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--c-muted);
}

/* ── CTA 卡（「下一步建議」）— 取代 strong-weak，讀弱科 derive 出行動入口 ──────── */
/* 5 人 mesh：stats 從「展示頁」變「行動頁」；首屏放最強的 actionable item
   2026-05-12：玻璃 token 由上方 shared rule 提供；這裡只保留 layout + border-left
   vermilion hairline 維持 CTA 強調感（hero 卡無此條）*/
.stats-cta-card {
  display: flex;
  align-items: center;
  gap: 18px;
  border-left: 3px solid var(--c-vermilion);
  margin-bottom: 28px;
}
.stats-cta-body { flex: 1; min-width: 0; }
.stats-cta-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--c-vermilion);
  margin-bottom: 6px;
}
.stats-cta-headline {
  font-family: var(--ff-serif-cn);
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.4;
}
.stats-cta-headline strong {
  color: var(--c-vermilion);
  font-weight: 700;
  font-feature-settings: 'tnum' 1;
}
.stats-cta-btn {
  flex-shrink: 0;
  padding: 11px 20px;
  background: var(--c-vermilion);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  transition: filter .15s, transform .15s;
  touch-action: manipulation;
  min-height: 44px;   /* 觸控目標，E1 觸控派建議 */
}
[data-theme="dark"] .stats-cta-btn { color: var(--c-primary-fg); }
.stats-cta-btn:hover { filter: brightness(1.08); }
.stats-cta-btn:active { transform: scale(.97); }
/* CTA 卡 mobile stack + 玻璃 padding 統一在下方 :540 + :541-899 media 處理，避 conflict */

/* ── 分科 horizontal bar chart ──────────────────── */
.subj-bar-list {
  /* 玻璃 token 由 .stats-cta-card,.activity-grid,... 共用 rule 提供 */
}
/* 2026-05-12 dual-bar 重寫：科目名一列 + 兩條 metric 雙 bar 堆疊
   原 4-col grid（科目 / bar / % / 已答）→ 改成 row stack 解決 mobile 擠壓 */
.subj-bar-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px dotted var(--c-border);
  font-family: var(--ff-sans-cn);
}
.subj-bar-row:last-child { border-bottom: none; }
.subj-bar-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subj-bar-metrics {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sb-metric {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
}
.sb-metric-lbl {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--c-muted);
  text-transform: uppercase;
}
.sb-metric-val {
  font-family: var(--ff-serif-cn);
  font-weight: 700;
  font-size: 15px;
  text-align: right;
  font-feature-settings: 'tnum' 1;
  white-space: nowrap;
}
.sb-metric-val-cov {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  color: var(--c-ink-2, var(--c-muted));
  font-weight: 500;
}
.sb-metric-val-cov strong {
  font-family: var(--ff-serif-en, var(--ff-mono));
  font-size: 14px;
  color: var(--c-text);
  font-weight: 700;
}
.sb-cov-sep { margin: 0 3px; opacity: .5; }
.sb-cov-pct {
  margin-left: 6px;
  color: var(--c-vermilion);
  font-weight: 700;
}
.subj-bar-row.is-low-coverage .sb-cov-pct { color: var(--c-muted); }
.subj-bar-fill-cov {
  background: linear-gradient(90deg,
    var(--c-vermilion) 0%,
    color-mix(in oklch, var(--c-vermilion) 80%, transparent) 100%) !important;
}
.subj-bar-row.is-low-coverage .subj-bar-fill-cov {
  background: color-mix(in oklch, var(--c-muted) 60%, var(--c-border)) !important;
}
.subj-bar-track {
  height: 8px;
  background: var(--c-border);
  border-radius: 4px;
  overflow: hidden;
}
.subj-bar-fill {
  height: 100%;
  width: 0;
  background: var(--bar-color, var(--c-vermilion));
  border-radius: 4px;
  animation: subj-bar-fill 1100ms cubic-bezier(.2,.9,.3,1.05) 200ms forwards;
}
@keyframes subj-bar-fill {
  to { width: var(--target-pct, 0%); }
}
/* 2026-05-12 dual-bar 後沒在用：.subj-bar-pct / .subj-bar-cnt / .subj-bar-head
   全砍。mobile 改進在 max-width:540 處理 sb-metric grid 縮放。 */
@media (max-width: 540px) {
  .subj-bar-name { font-size: 13.5px; }
  .sb-metric { grid-template-columns: 48px 1fr auto; gap: 8px; }
  .sb-metric-lbl { font-size: 10px; letter-spacing: .08em; }
  .sb-metric-val { font-size: 14px; }
  .sb-metric-val-cov { font-size: 11.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   ACHIEVEMENTS — 2026-05-12 v5 Alt C: promoted hero + compact roster
   3 位 UI/UX 專家共識：7 卡 × 120px = 840px mobile scroll 太重；
   5/7 是「累計/連勝」變體（do-more 同類項），grid 顯示資訊冗餘。
   改：單一 glass card（共用 token） + 最接近解鎖 1 個 promoted（有 bar）
        + 其餘 compact roster list（locked `·` / achieved `✓` prefix）
   高度 840px → ~280px（67% 壓縮）
═══════════════════════════════════════════════════════════════ */
/* padding 由 shared glass rule 提供 clamp(20-32) / clamp(20-28)，這裡別 override
   舊版 padding:4px 2px 把卡片內留白吃掉，eyebrow + label 貼邊溢出 */
.ach-roster {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ach-promoted {
  display: grid;
  gap: 6px;
}
.ach-promoted-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ach-promoted-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c-vermilion);
  font-weight: 700;
  text-transform: uppercase;
}
.ach-promoted-label {
  font-family: var(--ff-serif-cn);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  color: var(--c-text);
  letter-spacing: -.01em;
}
.ach-promoted-bar-track {
  height: 8px;
  background: color-mix(in oklch, var(--c-border) 85%, transparent);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 2px;
}
.ach-promoted-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,
    var(--c-vermilion) 0%,
    color-mix(in oklch, var(--c-vermilion) 78%, #ffb39e) 100%);
  border-radius: 999px;
  animation: ach-promoted-grow 900ms cubic-bezier(.2,.9,.3,1.05) 200ms forwards;
}
@keyframes ach-promoted-grow {
  to { width: var(--pct, 0%); }
}
.ach-promoted-meta {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--c-muted);
  letter-spacing: .02em;
  text-align: right;
}
.ach-promoted-meta strong {
  font-family: var(--ff-serif-cn);
  font-size: 14px;
  color: var(--c-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0 2px;
}
/* 「細目」hairline divider — 套既有 metric card hairline 風（套印 chop style）*/
.ach-divider {
  height: 1px;
  background: var(--c-border);
  width: 100%;
  margin: 6px 0 2px;
  position: relative;
}
.ach-divider::after {
  content: '細目';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: color-mix(in oklch, var(--c-surface) 92%, transparent);
  padding: 0 10px;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--c-muted);
  white-space: nowrap;
}
/* Roster list — locked + achieved 混排（locked 在前） */
.ach-roster-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ach-row {
  display: grid;
  grid-template-columns: 20px auto minmax(48px, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in oklch, var(--c-border) 55%, transparent);
}
.ach-row:last-child { border-bottom: none; }
.ach-row-prefix {
  font-family: var(--ff-mono);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
.ach-row.is-locked .ach-row-prefix { color: color-mix(in oklch, var(--c-muted) 70%, transparent); }
.ach-row.is-achieved .ach-row-prefix { color: var(--c-success); }
.ach-row-label {
  font-family: var(--ff-sans-cn);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: .01em;
  white-space: nowrap;
}
.ach-row.is-locked .ach-row-label { color: color-mix(in oklch, var(--c-text) 70%, transparent); }
/* Mini bar — locked 才畫；achieved 隱形保留 grid slot 對齊 */
.ach-row-bar {
  display: block;
  height: 4px;
  background: color-mix(in oklch, var(--c-border) 75%, transparent);
  border-radius: 999px;
  overflow: hidden;
  min-width: 48px;
}
.ach-row.is-achieved .ach-row-bar { visibility: hidden; }
.ach-row-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg,
    var(--c-vermilion) 0%,
    color-mix(in oklch, var(--c-vermilion) 78%, #ffb39e) 100%);
  border-radius: 999px;
  animation: ach-row-bar-grow 800ms cubic-bezier(.2,.9,.3,1.05) 400ms forwards;
}
@keyframes ach-row-bar-grow {
  to { width: var(--pct, 0%); }
}
.ach-row-value {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--c-muted);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.ach-row.is-achieved .ach-row-value {
  color: var(--c-success);
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  .ach-promoted-bar-fill,
  .ach-row-bar-fill {
    animation: none;
    width: var(--pct, 0%);
  }
}
@media (max-width: 540px) {
  .ach-roster { gap: 12px; }    /* padding 由共用 mobile rule 提供 18 16，這裡別蓋 */
  .ach-promoted-label { font-size: 17px; }
  .ach-row {
    grid-template-columns: 18px auto minmax(32px, 1fr) auto;
    column-gap: 8px;
    padding: 8px 0;
  }
  .ach-row-label { font-size: 13px; }
  .ach-row-value { font-size: 11.5px; }
  .ach-row-bar { height: 3px; min-width: 32px; }
  .ach-promoted-meta { font-size: 11.5px; }
  .ach-promoted-meta strong { font-size: 13.5px; }
}

/* ── 分科 rank 標（5 人 mesh：砍 strong-weak 後，最強最弱直接在分科 list 用 ★/⚠ 標）── */
.subj-bar-row {
  position: relative;
}
.subj-bar-row[data-rank="top"] .subj-bar-name::before,
.subj-bar-row[data-rank="bottom"] .subj-bar-name::before {
  display: inline-block;
  margin-right: 6px;
  font-size: 13px;
  vertical-align: middle;
  width: 18px;
  text-align: center;
  font-feature-settings: normal;
}
.subj-bar-row[data-rank="top"] .subj-bar-name::before    { content: '★'; color: var(--c-success); }
.subj-bar-row[data-rank="bottom"] .subj-bar-name::before { content: '⚠'; color: var(--c-warning); }
.subj-bar-row[data-rank="top"]    { background: color-mix(in oklch, var(--c-success) 5%, transparent); }
.subj-bar-row[data-rank="bottom"] { background: color-mix(in oklch, var(--c-warning) 5%, transparent); }

/* ── Layer 3 摺疊區（成就 + AI + 錯題） — <details> 漸進式揭露 ──────────────── */
/* 5 人 mesh E5：8 區塊權重相同 → 三層化；Layer 3 預設展開保體感，但 user 可收 */
.stats-layer3 {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px dashed var(--c-border);
}
.stats-layer3 > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c-muted);
  user-select: none;
  margin-bottom: 18px;
}
.stats-layer3 > summary::-webkit-details-marker { display: none; }
.stats-layer3 > summary::before {
  content: '▾';
  font-size: 12px;
  transition: transform .2s;
  color: var(--c-vermilion);
}
.stats-layer3:not([open]) > summary::before { transform: rotate(-90deg); }
.stats-layer3 > summary:hover { color: var(--c-text); }
@media (prefers-reduced-motion: reduce) {
  .stats-layer3 > summary::before { transition: none; }
}

/* ── Phase 2 桌機 dashboard（≥1200）— Layer 3 兩欄.
   2026-05-15 v16: .stats-wrap max-width 改走前面 BS5 規範 (cap 1170 對齊 q-area / law-body),
   這裡只留 .stats-layer3 grid 規則. */
@media (min-width: 1200px) {
  /* Layer 3 內部兩欄：左 wrong + AI 縱堆、右 ach 獨佔 — 桌機橫向利用、不再瀑布
     wrong/AI 是條件渲染（可能不存在），用 grid auto-flow 而非 nth-of-type 避坑 */
  .stats-layer3 {
    display: grid;
    grid-template-columns: 7fr 5fr;
    grid-auto-flow: dense;
    gap: 20px 28px;
    align-items: start;
  }
  .stats-layer3 > summary { grid-column: 1 / -1; }
  /* 預設所有子元素到左欄（wrong + AI），ach 用 .ach-grid-right 強制到右欄
     class 由 stats-view.ts 指派，避免 selector 跟 DOM 順序耦合 */
  .stats-layer3 > .stats-section,
  .stats-layer3 > .panel { grid-column: 1; }
  .stats-layer3 > .ach-grid-right {
    grid-column: 2;
    grid-row: 2 / span 99;  /* 從 summary 下一行開始延伸到底，包覆所有左欄 */
  }
}
/* 舊 .ach-card / .ach-icon / .ach-body / .ach-label / .ach-desc / .ach-bar-* / .ach-meta
   2026-05-12 v5 Alt C 重設計後全砍（~80 行 dead code）；新 .ach-roster 系列在上方 */


/* ── EMPTY state ───────────────────────────────── */
/* 玻璃 token 由共用 rule 提供（含 padding clamp 20-32）；這裡只調 text-align + 上下加大 padding */
.stats-empty {
  text-align: center;
  padding-block: clamp(36px, 6vw, 56px);
}
.stats-empty-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--c-muted);
  margin-bottom: 12px;
}
.stats-empty-h2 {
  font-family: var(--ff-serif-cn);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 12px;
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}
.stats-empty-lead {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.7;
  max-width: 32em;
  margin: 0 auto 24px;
}
.stats-empty-cta {
  padding: 14px 30px;
  background: var(--c-vermilion);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, transform .15s;
  touch-action: manipulation;
}
[data-theme="dark"] .stats-empty-cta { color: var(--c-primary-fg); }
.stats-empty-cta:hover { filter: brightness(1.08); }

/* ── footer 清除連結 ───────────────────────────── */
.stats-foot {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--c-border);
  text-align: center;
}
.stats-clear-link {
  background: transparent;
  border: none;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--c-muted);
  text-decoration: underline;
  cursor: pointer;
  padding: 8px 16px;
}
.stats-clear-link:hover { color: var(--c-danger); }

/* ── Reduced motion fallback ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ring-fill, .subj-bar-fill, .ach-bar-fill {
    animation: none !important;
    transition: none !important;
  }
  .subj-bar-fill { width: var(--target-pct, 0%); }
}

/* ── Phase 3a/3b 高對比模式 — E4 a11y 派：圖表線寬加粗、邊框加深、heat cell 邊框梯度 ── */
@media (prefers-contrast: more) {
  .ring-track { stroke-width: 10; }
  .ring-fill { stroke-width: 10; }
  .sparkline .spark-line { stroke-width: 2.5; }
  .subj-bar-track { height: 10px; border: 1px solid var(--c-text); }
  .subj-bar-fill  { outline: 1px solid var(--c-text); }
  .ach-bar-track  { border: 1px solid var(--c-text); }
  /* week-stack bar 高對比：bar fill 加 outline，色弱也能看出長度 */
  .week-bar-track { border: 1px solid var(--c-text); }
  .week-bar-fill  { outline: 1px solid var(--c-text); outline-offset: -1px; }
}

/* === LEGACY stats CSS（舊版 .stats-kpi-row 等）保留供回退 === */
.stats-kpi-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.kpi-card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: 18px 14px;
  text-align: center; box-shadow: var(--shadow-sm);
}
.kpi-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.kpi-icon svg { width: 22px; height: 22px; }
.kpi-val   { font-size: 1.5rem; font-weight: 700; line-height: 1.1; margin-bottom: 4px; }
.kpi-label { font-size: .72rem; color: var(--c-muted); }
.ring-wrap  { text-align: center; }
.progress-ring-track { fill: none; stroke: var(--c-surface2); stroke-width: 9; }
.progress-ring-fill  { fill: none; stroke: var(--c-primary); stroke-width: 9; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .7s; }
.ring-val   { font-size: 1.4rem; font-weight: 700; color: var(--c-primary); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ring-outer { position: relative; display: inline-block; margin-bottom: 8px; }

.streak-card {
  background: linear-gradient(135deg, var(--c-primary-10), var(--c-primary-20));
  border: 1px solid var(--c-primary-20); border-radius: var(--r-lg);
  padding: 16px; display: flex; align-items: center; gap: 16px;
  margin-bottom: 12px;
}
.streak-num  { font-size: 2.8rem; font-weight: 800; color: var(--c-primary); line-height: 1; }
.streak-info strong { font-size: .95rem; display: block; }
.streak-info p { font-size: .82rem; color: var(--c-muted); margin-top: 2px; }

.subj-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--c-border); font-size: .85rem;
}
.subj-row:last-child { border-bottom: none; }
.subj-row .sn  { flex: 1; }
.subj-row .sp  { font-weight: 700; color: var(--c-primary); min-width: 44px; text-align: right; }
.subj-row .sc  { font-size: .75rem; color: var(--c-muted); min-width: 60px; text-align: right; }


.achievements { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.ach {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 20px; border: 1.5px solid var(--c-border);
  background: var(--c-surface2); font-size: .8rem; color: var(--c-muted);
  opacity: .5;
}
.ach.earned { opacity: 1; border-color: var(--c-primary); background: var(--c-primary-10); color: var(--c-text); }
.ach-icon { font-size: .9rem; }

/* Weak subjects tags in stats */
.weak-subjs { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.weak-subj-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 20px;
  background: rgba(220,38,38,.08); border: 1.5px solid rgba(220,38,38,.25);
  font-size: .8rem;
}
.weak-subj-name { font-weight: 600; color: var(--c-text); }
.weak-subj-pct { color: var(--c-danger); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   手機 stats 補強（≤540）— 之前 7% mobile coverage、@container 多在 480/540/640
   不發動，重點救：metric ring 縱向、subj-bar 1-col、ach-gallery 2-col、
   wrap padding、heatmap overflow-x、整體留白比例
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
  .stats-wrap {
    padding: 14px 12px 80px;
  }
  .stats-hero {
    padding: 24px 0 22px;
    margin-bottom: 24px;
  }
  /* 2026-05-12 v3：user 反映「三張卡一個一排很佔空間、內容又空」
     → 改 2-col grid：環圖（focal）跨 full 一行、兩個數字卡並排在下一行
     高度從 3×108=324px 縮到 ~84+108=192px，省約 40% vertical space
     ─ ring 卡保留橫排（svg + 文字並列）但縮 svg 72→64 + padding 18→14
     ─ 兩個數字卡保留 vertical stack（label / 大數字 / sub），padding 縮、字級微調
     ─ horizontal stack 在 320-375px 寬度下 label+sub 排不下，仍走 vertical */
  .stats-metrics {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
  }
  .stats-metric-ring { grid-column: 1 / -1; }
  .stats-metric {
    padding: 14px 14px;
    min-height: 108px;
    border-radius: 16px;
  }
  /* 兩個數字卡（非 ring）：保留 vertical stack，只縮 padding + 字級 */
  .stats-metric:not(.stats-metric-ring) .metric-num {
    font-size: clamp(28px, 8vw, 36px);
    margin: 0;
  }
  .stats-metric:not(.stats-metric-ring) .metric-label {
    font-size: 11px;
    margin: 0 0 6px;
  }
  .stats-metric:not(.stats-metric-ring) .metric-sub {
    font-size: 11.5px;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    /* v5 方案 A：sub 只剩 1-2 個短 item（對 X 錯 Y / 最佳 N 天），
       不需要 flex-direction column 強制換行；保留 row + flex-wrap 處理極端窄屏 */
  }
  .stats-metric:not(.stats-metric-ring) .metric-sub::before {
    width: clamp(36px, 10vw, 48px);
  }
  /* ring 卡：橫排（環 + 文字並列）— svg 從 72 縮 64 留更多文字空間 */
  .stats-metric-ring {
    padding: 14px 14px;
    min-height: 88px;
    gap: 14px;
    flex-direction: row;
    align-items: center;
  }
  .stats-metric-ring .ring-svg {
    width: 64px;
    height: 64px;
    align-self: auto;
    flex-shrink: 0;
  }
  .ring-num { font-size: 34px; }
  .ring-label { margin-top: 2px; font-size: 11px; }
  /* 2026-05-12 dual-bar 後 row 本來就是 1-col stack，這裡只縮 padding */
  .subj-bar-row {
    padding: 12px 4px;
  }
  .subj-bar-row .subj-bar-name {
    font-size: 13px; font-weight: 600;
  }
  /* 活動格子：gap 22px 在小螢幕浪費空間 */
  .activity-grid {
    gap: 14px;
  }
  /* activity meta 在 320 屏縱向才不擠 */
  .activity-meta {
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
  }
  /* activity number 主視覺保留 hierarchy */
  .activity-num {
    font-size: clamp(34px, 8vw, 48px);
  }
  /* 2026-05-12 卡片視覺統一後手機 RWD 補強：
     ─ 共用玻璃 token padding clamp 下限 20px → 收 16px 18px，給內容多 4-8px 空間
     ─ 各 section margin-bottom 從 44 縮 28，整體頁長度減 ~15%
     ─ 玻璃 box-shadow 在手機減弱（24px → 12px）省 paint 成本 */
  .stats-cta-card,
  .activity-grid,
  .subj-bar-list,
  .stats-empty,
  .ach-roster,
  .wr-section > .wr-summary-card,
  .wr-section > .wr-empty {
    padding: 18px 16px;
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10),
                0 12px 32px -10px rgba(0,0,0,.14);
  }
  .stats-layer3 > .panel {
    padding: 0;
    border-radius: 16px;
  }
  .stats-layer3 > .panel .panel-hdr {
    padding: 12px 16px;
  }
  .stats-section {
    margin-bottom: 28px;
  }
  /* CTA 行動卡：手機 layout 已是 stacked，這裡只調 padding（不再被 :595 規則蓋過）*/
  .stats-cta-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .stats-cta-btn { width: 100%; }
  /* subj-bar-row 在 .subj-bar-list 內 padding 16 後，自身 padding 太大；改一致 12 0 */
  .subj-bar-row {
    padding: 12px 0;
  }
  /* AI panel sub-cards 手機 RWD */
  .ai-stats-row { grid-template-columns: 1fr 1fr; gap: 6px; }
}
/* tablet 541-899：subj-bar-list / activity-grid 等內部 padding 微縮，避免 desktop clamp 撐太大 */
@media (min-width: 541px) and (max-width: 899.98px) {
  .stats-cta-card,
  .activity-grid,
  .subj-bar-list,
  .stats-empty,
  .ach-roster,
  .wr-section > .wr-summary-card,
  .wr-section > .wr-empty {
    padding: 22px 22px;
  }
}
@media (max-width: 379.98px) {
  /* SE / 舊機 (320px) — heatmap cell clamp 11vw 已自動縮；
     metric 2-col 並排寬度 ~140px → 數字字級再降一檔、padding 收 12px */
  .stats-wrap { padding: 12px 10px 80px; }
  .stats-metric { padding: 12px 12px; min-height: 96px; }
  .stats-metric:not(.stats-metric-ring) .metric-num { font-size: 26px; }
  .stats-metric-ring { padding: 12px 12px; min-height: 76px; gap: 10px; }
  .stats-metric-ring .ring-svg { width: 56px; height: 56px; }
  .ring-num { font-size: 28px; }
}

/* ═══════════════════════════════════