/* ═══════════════════════════════════════════════════════════════════
   雅思教练 · 布局系统 v2
   ───────────────────────────────────────────────────────────────────
   为什么要有这一层
   ───────────────────────────────────────────────────────────────────
   原布局的问题（2026-10-28 全量审计实测）：
     · 所有视图共用 1138px 单一宽度 —— 短内容被拉散、长内容堆成塔
     · 错误谱系 14276px / 素材库 23588px 竖向单列，一条路走到黑
     · 中文正文行长 60+ 字，阅读时眼睛要横跨太远
     · 视图之间组件语言不统一：有的用 g-card，有的用 g-item，
       有的用 cb-*，有的用 ex-* —— 看起来像四个产品拼起来的

   这一层确立三条规则：
   ───────────────────────────────────────────────────────────────────
   ① 布局由**内容类型**决定，不由页面决定
      每个视图声明自己的 content type，布局系统据此给列数与行长。

   ② 阅读宽度是**受控变量**
      正文行长锁在 34–40 个汉字（可读性最优区间），
      而不是跟着容器宽度漂。

   ③ 视图骨架**三段式**
      页头（标题 + 导语 + 元信息）→ 工具条（sticky 筛选）→ 主体
      工具条 sticky，长页面滚动时筛选器始终可见。
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════ 1. 布局令牌 ═══════════ */
:root {
  /* 内容列宽档位 —— 按「一屏放几列 + 单列该多宽」定 */
  --col-narrow: calc(360 * var(--u));   /* 单列：需要专注的阅读（如精讲单元） */
  --col-mid:    calc(440 * var(--u));   /* 双列：卡片列表 */
  --col-wide:   calc(560 * var(--u));   /* 宽列：需要放表格/对照 */
  --col-full:   calc(1240 * var(--u));  /* 通栏：仪表盘 */

  /* 中文正文行长（字数）—— 换算成 px 便于 max-width */
  --measure:    calc(38em);             /* 正文最优行长 */
  --measure-sm: calc(30em);             /* 侧栏内正文 */

  /* 垂直节奏（8pt 基准） */
  --sp-1: calc(4 * var(--u));
  --sp-2: calc(8 * var(--u));
  --sp-3: calc(12 * var(--u));
  --sp-4: calc(16 * var(--u));
  --sp-5: calc(24 * var(--u));
  --sp-6: calc(32 * var(--u));
  --sp-7: calc(48 * var(--u));
  --sp-8: calc(64 * var(--u));

  /* 层级语义色 —— 用于区块左边框与标签 */
  --lv-1: var(--c-sky);     /* 认知层：知识本体 */
  --lv-2: var(--c-violet);  /* 教研层 */
  --lv-3: var(--c-teal);    /* 产出层：闭环动作 */
  --lv-4: var(--c-amber);   /* 素材层 */
}

/* ═══════════ 2. 视图骨架 ═══════════ */

/* 页头 —— 所有视图统一
   2026-10-28：全局已有大标题，这里降级为「导语 + 元信息」条，
   不再重复标题，避免一屏两个重心。 */
.vh {
  display: grid;
  /* 第二列要给量化指标留够空间。
     原来写 auto —— grid 的 auto 列会收缩到内容最小宽度，
     3–4 个指标就被挤进 ~135px 竖排成一列，把页头拉高到 236px。
     改成 minmax(320px, auto)：指标有明确的地盘，导语再长也不会把它挤没。 */
  grid-template-columns: minmax(0, 1fr) minmax(320px, auto);
  align-items: end;
  gap: var(--sp-5);
  padding-bottom: var(--sp-4);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--glass-line);
}
.vh-l { min-width: 0; flex: 1 1 auto; }
.vh-eyebrow {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  font-size: calc(10.5 * var(--u)); font-weight: 800;
  letter-spacing: calc(1.2 * var(--u)); text-transform: uppercase;
  color: var(--ink-4); margin-bottom: calc(7 * var(--u));
}
.vh-eyebrow::before {
  content: ""; width: calc(16 * var(--u)); height: calc(2 * var(--u));
  border-radius: calc(1 * var(--u));
  background: var(--vh-accent, var(--c-teal));
}
.vh-lede {
  margin: 0;
  font-size: calc(13 * var(--u)); line-height: calc(21 * var(--u));
  color: var(--ink-2); max-width: var(--measure);
}
.vh-lede b { color: var(--ink-1); font-weight: 700; }

/* 元信息条 —— 页头右侧的量化指标 */
.vh-meta {
  display: flex; gap: var(--sp-5); flex-shrink: 0;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--glass-line);
  flex-wrap: wrap;
  justify-content: flex-end;
  /* 宽度由 grid 第二列决定（minmax(320px, auto)），这里不要再加 max-width ——
     max-width 的百分比是相对**自身所在列**算的，
     写在 320px 宽的列里会变成 320 × 62% = 198px，反而把指标挤回竖排。 */
}
.vh-m { text-align: right; white-space: nowrap; }
.vh-mv {
  font-size: calc(21 * var(--u)); font-weight: 800; line-height: calc(25 * var(--u));
  color: var(--ink); letter-spacing: calc(-.5 * var(--u));
  font-variant-numeric: tabular-nums;
}
.vh-mv em {
  font-style: normal; font-size: calc(11 * var(--u)); font-weight: 700;
  color: var(--vh-accent, var(--c-teal)); margin-left: calc(2 * var(--u));
}
.vh-ml {
  font-size: calc(10 * var(--u)); color: var(--ink-4); margin-top: calc(3 * var(--u));
  white-space: nowrap;
}

/* 工具条 —— sticky，长页面滚动时筛选器不消失 */
.vbar {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; gap: var(--sp-3);
  flex-wrap: wrap;
  margin: 0 calc(-1 * var(--sp-3)) var(--sp-4);
  padding: var(--sp-3);
  border-radius: var(--r);
  background: var(--glass-2);
  backdrop-filter: var(--blur-3); -webkit-backdrop-filter: var(--blur-3);
  border: 1px solid var(--glass-line);
}
.vbar .g-filters { margin: 0; }
.vbar .g-inp { flex: 1 1 calc(200 * var(--u)); min-width: calc(160 * var(--u)); margin: 0; }
.vbar-spacer { flex: 1 1 auto; }
.vbar-count {
  font-size: calc(11 * var(--u)); color: var(--ink-3); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 视图主体 */
.vb { min-width: 0; }

/* ═══════════ 3. 内容类型 → 布局策略 ═══════════ */

/* ① 阅读型（单列，锁行长）—— 方法论讲解、判例、范文分析
      宽度不是固定 38em，而是「不超过 38em，但至少能占满主区」。
      2026-10-28 修正：右侧栏按视图策略隐藏后，主区可达 1458px，
      若仍把内容锁在 38em 居中，右侧会空出 600+px —— 反而更「太空」。
      所以阅读型改为**左对齐铺开**：正文列锁行长（可读性），
      但整块内容从左边起排，右侧留白是排版留白，视觉上不再失衡。 */
.lay-read {
  max-width: min(100%, var(--measure));
  margin-inline: 0;
}
.lay-read > * + * { margin-top: var(--sp-4); }

/* 阅读型的宽松变体 —— 需要放表格或多栏时用 */
.lay-read.wide { max-width: min(100%, calc(72em)); }

/* 六层拆解 —— 两栏（依据/诊断/动作 一列，练习/塌陷/门槛 一列）
   六层有内在的「前三层=理解，后三层=行动」分组，两栏正好对上。
   在宽版容器里用三栏，充分利用横向空间。 */
.lay-six {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(calc(300 * var(--u)), 100%), 1fr));
  gap: 0 calc(var(--sp-4));
  align-items: start;
}
.lay-six > .g-block { margin-bottom: var(--sp-3); }

/* 六层拆解的三栏变体 —— 铺满宽容器 */
.lay-six.three {
  grid-template-columns: repeat(auto-fit, minmax(min(calc(280 * var(--u)), 100%), 1fr));
  gap: 0 calc(var(--sp-5));
}

/* ② 网格型（自适应多列）—— 例句库、错误谱系、真题库
      minmax 用 min() 兜底：容器窄时列宽自动收缩，
      否则 minmax(440px,1fr) 在 900px 容器里只放得下 1 列。 */
.lay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col-mid), 100%), 1fr));
  gap: var(--sp-3);
  align-items: start;
}
.lay-grid > * { margin-bottom: 0 !important; }

/* 网格型的紧凑变体 —— 索引条目（内容短，不需要 440px 宽） */
.lay-grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(min(calc(300 * var(--u)), 100%), 1fr));
}

/* ③ 瀑布型（高度不等的条目）—— 精讲单元、素材条目 */
.lay-masonry {
  column-gap: var(--sp-3);
  columns: 3 340px;
}
.lay-masonry > * {
  break-inside: avoid;
  margin-bottom: var(--sp-3);
  display: block;
}

/* ④ 对照型（左右分栏，主次不等）—— 判卷工作台 */
.lay-split {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.lay-split > * { margin-bottom: 0; }

/* ⑤ 通栏（仪表盘、表格） */
.lay-full { width: 100%; }

/* 双栏 —— 非对称：左栏内容多、右栏是操作/结论区 */
.g2 {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: start;
}
.g2 > * { min-width: 0; }
.g2 > * > * { margin-bottom: var(--sp-4); }
.g2 > * > *:last-child { margin-bottom: 0; }

/* 双栏反转（右宽左窄） */
.g2.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }

@media (max-width: 1100px) {
  .g2, .g2.flip { grid-template-columns: minmax(0, 1fr); }
}

/* ⑥ 分栏索引（左目录 + 右内容）—— 长列表页 */
.lay-index {
  display: grid;
  grid-template-columns: calc(190 * var(--u)) minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.lay-index-nav {
  position: sticky; top: calc(66 * var(--u));
  display: flex; flex-direction: column; gap: calc(2 * var(--u));
  padding: var(--sp-3);
  border-radius: var(--r);
  background: var(--glass-1); border: 1px solid var(--glass-line);
}
.lay-index-nav .lbl {
  font-size: calc(9.5 * var(--u)); font-weight: 800;
  letter-spacing: calc(1 * var(--u)); text-transform: uppercase;
  color: var(--ink-4); padding: 0 calc(7 * var(--u)) calc(6 * var(--u));
}
.lay-index-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  font-size: calc(11.5 * var(--u)); color: var(--ink-2);
  text-decoration: none; cursor: pointer;
  transition: background .18s var(--e-out), color .18s var(--e-out);
}
.lay-index-nav a:hover { background: var(--hover); color: var(--ink); }
.lay-index-nav a.on { background: var(--active); color: var(--ink); font-weight: 700; }
.lay-index-nav a span {
  font-size: calc(10 * var(--u)); color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ═══════════ 4. 分区标题（视图内的段落级标题） ═══════════ */
.sec-h {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--glass-line);
}
.sec-h:first-child { margin-top: 0; }
.sec-h h3 {
  margin: 0; font-size: calc(15 * var(--u)); font-weight: 800;
  color: var(--ink); letter-spacing: calc(-.2 * var(--u));
}
.sec-h .n {
  font-size: calc(11 * var(--u)); color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.sec-h .d {
  font-size: calc(11.5 * var(--u)); color: var(--ink-3);
  margin-left: auto; text-align: right;
}

/* ═══════════ 5. 列表条目（统一卡片语言） ═══════════ */
.g-item, .cb-item, .ex-card, .q-item, .ar-item {
  background: var(--glass-1);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: 0;
  transition: border-color .2s var(--e-out), background .2s var(--e-out);
}
.g-item:hover, .cb-item:hover, .ex-card:hover {
  border-color: var(--glass-line-2);
  background: var(--hover);
}

/* 条目标题 */
.g-item .ih, .cb-item .ih {
  display: flex; align-items: center; gap: calc(7 * var(--u));
  flex-wrap: wrap; margin-bottom: calc(8 * var(--u));
}

/* 条目正文 */
.g-item .isub, .g-item .qp, .cb-item .qp {
  font-size: calc(12.5 * var(--u)); line-height: calc(19 * var(--u));
  color: var(--ink-2);
}

/* ═══════════ 6. 区块（g-block）统一为「引用块」语言 ═══════════ */
.g-block {
  border-left: 3px solid var(--glass-line-2);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-3);
}
.g-block:last-child { margin-bottom: 0; }
.g-block .bh {
  display: flex; align-items: baseline; gap: calc(8 * var(--u));
  font-size: calc(11 * var(--u)); font-weight: 800;
  letter-spacing: calc(.5 * var(--u)); text-transform: uppercase;
  color: var(--ink-3); margin-bottom: calc(6 * var(--u));
}
.g-block .bc {
  font-size: calc(12.5 * var(--u)); color: var(--ink-2);
  line-height: calc(20 * var(--u)); max-width: var(--measure);
}

/* ═══════════ 7. 统计条（避免孤行） ═══════════ */
.g-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(112 * var(--u)), 1fr));
  gap: calc(2 * var(--u));
  margin-bottom: var(--sp-5);
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--glass-line);
  background: var(--glass-1);
}
.g-stat {
  padding: var(--sp-3) var(--sp-4);
  border-right: 1px solid var(--glass-line);
  background: none; border-radius: 0;
}
.g-stat:last-child { border-right: none; }
.g-stat .v {
  font-size: calc(22 * var(--u)); font-weight: 800; line-height: calc(26 * var(--u));
  color: var(--ink); letter-spacing: calc(-.6 * var(--u));
  font-variant-numeric: tabular-nums;
}
.g-stat .l {
  font-size: calc(10 * var(--u)); color: var(--ink-4); margin-top: calc(4 * var(--u));
  line-height: calc(14 * var(--u));
}

/* ═══════════ 8. 首页专属：Hero 与粒子场合并 ═══════════ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(300 * var(--u));
  align-items: center;
  gap: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.hero > .hero-main { min-width: 0; }
.hero .particle-field {
  height: calc(210 * var(--u));
  border-radius: var(--r);
  border: 1px solid var(--glass-line);
  background: var(--glass-1);
  margin-bottom: 0;
}

/* ═══════════ 9. 响应式 ═══════════ */
@media (max-width: 1240px) {
  .lay-masonry { columns: 2 320px; }
  .lay-split { grid-template-columns: minmax(0, 1fr); }
  .lay-index { grid-template-columns: calc(160 * var(--u)) minmax(0, 1fr); }
}
@media (max-width: 980px) {
  .vh { grid-template-columns: 1fr; align-items: start; }
  .vh-meta { padding-left: 0; border-left: none; border-top: 1px solid var(--glass-line); padding-top: var(--sp-3); }
  .vh-m { text-align: left; }
  .hero { grid-template-columns: 1fr; }
  .lay-index { grid-template-columns: 1fr; }
  .lay-index-nav { position: static; flex-direction: row; flex-wrap: wrap; }
  .lay-index-nav .lbl { width: 100%; }
}
@media (max-width: 700px) {
  .lay-masonry { columns: 1; }
  .lay-grid { grid-template-columns: 1fr; }
  .g-stats { grid-template-columns: repeat(2, 1fr); }
  .g-stat { border-right: none; border-bottom: 1px solid var(--glass-line); }
  .vh-title { font-size: calc(22 * var(--u)); line-height calc(28 * var(--u)); }
}

/* ═══════════ 10. 右侧栏策略（由视图声明，内容决定布局） ═══════════ */
/* 右栏策略：无栏视图直接隐藏窄条（连 44px 都不留） */
body[data-rail="none"] .shell {
  grid-template-columns: auto minmax(0, 1fr);
}
body[data-rail="none"] .rail-right { display: none; }
body[data-rail="none"] .main-inner { max-width: min(100%, calc(1560 * var(--u))); }
/* 有栏视图：折叠时主区同样放宽 */
body[data-rail="always"][data-rr="collapsed"] .shell {
  grid-template-columns: auto minmax(0, 1fr) auto;
}
body[data-rail="always"][data-rr="collapsed"] .main-inner {
  max-width: min(100%, calc(1560 * var(--u)));
}

/* ═══════════ 11. 打印 ═══════════ */
@media print {
  .vbar, .lay-index-nav, .rail, .rail-right { display: none !important; }
  .lay-read, .g-block .bc { max-width: none; }
  /* 打印时卡片改为实线边框、无阴影（必须在 theme.css 之后声明才生效） */
  .g-card, .g-item, .g-fold, .cb-item, .ex-card, .cb-au, .ex-blk, .ex-unit {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    break-inside: avoid;
  }
  .lay-grid, .lay-masonry { columns: 2 !important; grid-template-columns: 1fr 1fr !important; }
  .vh-meta { border-left: none; }
}

/* 空值统计位 —— 「0 次判卷」这种占位不该和真实数据一样重 */
.g-stat.empty .v { color: var(--ink-4); }
.g-stat.empty .l { color: var(--ink-4); opacity: .7; }