/* ==================================================================
   pages/stats.css — 学习统计页（页面层：只写本页布局几何）
   ------------------------------------------------------------------
   依赖：static/base.css（公共层，唯一视觉来源）
         卡片家族 .s-card/.chart-card/.wrong-list-card（底/边/圆角/阴影全部由公共层给）
         .btn/.btn-primary/.btn-outline/.btn-sm · .g-empty/.g-error
         .g-skeleton/.g-skeleton-card · .g-table-wrap · .subnav/.subnav-inner
         .page-container/.page-title/.page-subtitle · .footer · .toast · :focus-visible
   纪律（见《前端优化方案_20260925.md》§3/§9）：
         强制权重 0 处；无字面色值（只用 var(--g-*)）；字号 ≥ 12.5px；
         不写 outline（焦点环交给 base.css）；不覆盖卡片家族的 border / box-shadow。
   ================================================================== */

/* ---------- 1. 视角切换（我的报告 / 全局洞察） ----------
   base 提供 .tab-btn 结构基线（并档第二批），这里只留 stats 的"胶囊描边"皮肤。 */
.tab-bar {
  display: flex; flex-wrap: wrap; gap: var(--g-sp-2);
  margin-bottom: var(--g-sp-5);
}
.tab-btn {
  min-height: 36px; padding: 8px 22px;
  border: 1px solid var(--g-line); border-radius: var(--g-r-md);
  background: var(--g-surface); color: var(--g-mute);
  font-size: var(--g-fs-base);
}
.tab-btn:hover { background: var(--g-primary-soft); color: var(--g-primary); border-color: var(--g-primary); }
.tab-btn.active {
  background: var(--g-grad); color: var(--g-surface);
  border-color: transparent; box-shadow: var(--g-sh-primary);
}

/* ---------- 2. KPI 概览（4-19：先铺 .g-skeleton-card，高度贴近真卡，首屏不跳高） ---------- */
.summary-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--g-sp-3); margin-bottom: var(--g-sp-5);
}
/* 错误 / 空态横跨整行（4-18） */
.summary-cards > .g-empty,
.global-daily > .g-empty { grid-column: 1 / -1; }

.s-card { padding: var(--g-sp-4); text-align: center; }
.s-card .value { font-size: var(--g-fs-2xl); font-weight: 800; line-height: 1.2; color: var(--g-ink); }
.s-card .label { margin-top: 2px; font-size: var(--g-fs-xs); color: var(--g-mute); }
.s-card .value.blue { color: var(--g-primary); }
.s-card .value.green { color: var(--g-ok); }

/* ---------- 3. 图表双栏 ---------- */
.charts-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--g-sp-4); margin-bottom: var(--g-sp-5);
}
.chart-card { padding: var(--g-sp-4); }
.chart-card h3 {
  margin-bottom: var(--g-sp-3);
  font-size: var(--g-fs-base); font-weight: 700; color: var(--g-ink-2);
}
.chart-card.span-all { grid-column: 1 / -1; }

/* 4-19：图表框固定高度 + 初始骨架类（.g-skeleton 由公共层给），
   数据到达后由页面脚本移除骨架并画图/替换退化态，容器高度不再变化 */
.chart-wrap { position: relative; height: 280px; overflow: hidden; }
.chart-wrap > canvas { display: block; }
.chart-wrap > .g-empty,
.chart-wrap > .bar-list,
.chart-wrap > .trend-solo { position: absolute; inset: 0; }

/* ---------- 3.1 退化态一：学科数 < 3，雷达换横向条形（4-24） ---------- */
.bar-list {
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--g-sp-3); padding: 0 var(--g-sp-1);
}
.bar-note { font-size: var(--g-fs-xs); color: var(--g-mute); text-align: center; }
.bar-row { display: flex; align-items: center; gap: var(--g-sp-2); }
.bar-label {
  flex: 0 0 96px; width: 96px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--g-fs-sm); color: var(--g-ink-2);
}
.bar-bg {
  flex: 1 1 auto; min-width: 0; height: 16px;
  border-radius: var(--g-r-pill); background: var(--g-surface-3); overflow: hidden;
}
.bar-fill { display: block; height: 100%; border-radius: var(--g-r-pill); background: var(--g-grad); }
.bar-num { flex: 0 0 48px; text-align: right; font-size: var(--g-fs-xs); font-weight: 700; color: var(--g-primary); }

/* ---------- 3.2 退化态二：趋势有效点 < 2，不画折线，给大数字 + 一句说明（4-24） ---------- */
.trend-solo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center;
}
.trend-solo-num { font-size: var(--g-fs-2xl); font-weight: 800; line-height: 1.2; color: var(--g-primary); }
.trend-solo-label { font-size: var(--g-fs-sm); color: var(--g-ink-2); }
.trend-solo-note { max-width: 34ch; font-size: var(--g-fs-xs); color: var(--g-mute); }

/* ---------- 4. 错题列表（含考试维度筛选） ---------- */
.wrong-list-card { padding: var(--g-sp-4); margin-bottom: var(--g-sp-5); }
.wrong-list-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--g-sp-3); margin-bottom: var(--g-sp-3);
  font-size: var(--g-fs-base); font-weight: 700; color: var(--g-ink-2);
}
.bank-filter { width: auto; max-width: 100%; min-height: 32px; padding: 4px 10px; font-size: var(--g-fs-xs); }

/* 4-19：错题区先给 3 条骨架条，避免数据到达时再跳一次 */
.wrong-list .g-skeleton { height: 18px; margin-bottom: 10px; }

.wrong-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--g-sp-3); padding: 10px 0;
  border-bottom: 1px solid var(--g-line-2);
}
.wrong-item:last-child { border-bottom: none; }
.wrong-subject {
  flex: 0 0 auto; padding: 2px 8px; border-radius: var(--g-r-sm);
  background: var(--g-danger-bg); color: var(--g-danger);
  font-size: var(--g-fs-xs); font-weight: 600; white-space: nowrap;
}
.wrong-content {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--g-fs-sm); color: var(--g-ink-2);
}
.wrong-meta { flex: 0 0 auto; font-size: var(--g-fs-xs); color: var(--g-mute); white-space: nowrap; }
.wrong-count { color: var(--g-danger); font-weight: 600; }

/* 重练 / 重新加载按钮（本页私有；触控高度 ≥32px，修 4-14） */
.btn-retry {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px;
  border: 1px solid var(--g-line); border-radius: var(--g-r-sm);
  background: var(--g-surface); color: var(--g-primary);
  font-size: var(--g-fs-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--g-dur) var(--g-ease), border-color var(--g-dur) var(--g-ease),
    color var(--g-dur) var(--g-ease);
}
.btn-retry:hover { background: var(--g-primary-soft); border-color: var(--g-primary); }

/* ---------- 5. 全局洞察 ---------- */
.global-daily {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--g-sp-3); margin-bottom: var(--g-sp-5);
}
.top10-table { width: 100%; border-collapse: collapse; font-size: var(--g-fs-sm); }
.top10-table th {
  padding: var(--g-sp-2) var(--g-sp-3); text-align: left;
  color: var(--g-mute); font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid var(--g-line-2);
}
.top10-table td { padding: 10px var(--g-sp-3); border-bottom: 1px solid var(--g-line-2); }
.top10-table .rank { font-weight: 700; color: var(--g-primary); }
.top10-table .wrong-rate { font-weight: 600; color: var(--g-danger); }
.top10-table .g-skeleton { height: 18px; min-width: 120px; }
.top10-table .g-empty { min-height: 0; padding: var(--g-sp-3) var(--g-sp-2); }

.btn-action {
  display: inline-flex; align-items: center; min-height: 32px; padding: 3px 10px;
  border: 1px solid var(--g-line); border-radius: var(--g-r-sm);
  background: var(--g-surface); color: var(--g-ink-2);
  font-size: var(--g-fs-xs); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background var(--g-dur) var(--g-ease), border-color var(--g-dur) var(--g-ease),
    color var(--g-dur) var(--g-ease);
}
.btn-action.ignore { color: var(--g-warn); border-color: var(--g-warn); }
.btn-action.ignore:hover { background: var(--g-warn-bg); }
.btn-action.mark { color: var(--g-danger); border-color: var(--g-danger); }
.btn-action.mark:hover { background: var(--g-danger-bg); }

/* ---------- 6. 未登录提示 ---------- */
.login-prompt { padding: var(--g-sp-6) var(--g-sp-4); text-align: center; color: var(--g-mute); }
.login-prompt .icon { margin-bottom: var(--g-sp-3); font-size: 3rem; line-height: 1; }

/* ---------- 7. 响应式（与公共层 860px 断点对齐） ---------- */
@media (max-width: 860px) {
  .charts-row { grid-template-columns: minmax(0, 1fr); }
  .chart-wrap { height: 260px; }
}
@media (max-width: 560px) {
  .summary-cards, .global-daily { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 4-20：窄屏错题行不再被 nowrap 挤成一条缝 */
  .wrong-item { flex-wrap: wrap; }
  .wrong-content { flex-basis: 100%; white-space: normal; }
  .bar-label { flex-basis: 76px; width: 76px; }
}