/* ═══════════════════════════════════════════════════════════════════
   雅思教练 · 语法进阶视图样式
   复用 layer.css 里的 .ld-* 组件（要点/例句/练习/过关标准）
   字号一律用全站令牌。
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════ 1. 顶层页签 ═══════ */
.gd-tabs {
  display: flex; gap: calc(7 * var(--u));
  margin-bottom: var(--sp-4);
}
.gd-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(2 * var(--u));
  padding: calc(9 * var(--u)) calc(15 * var(--u));
  border-radius: calc(10 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
  color: var(--ink-3);
  font-family: inherit; cursor: pointer; text-align: left;
  transition: border-color .16s var(--e-out), background .16s var(--e-out);
}
.gd-tab:hover { border-color: var(--glass-line-2); }
.gd-tab.on {
  background: color-mix(in srgb, var(--acc) 14%, transparent);
  border-color: var(--acc); color: var(--ink-1);
}
.gd-tab { font-size: var(--fs-5); font-weight: 700; }
.gd-tab em {
  font-style: normal; font-size: var(--fs-2); font-weight: 500;
  color: var(--ink-4);
}
.gd-tab.on em { color: var(--ink-3); }

/* ═══════ 2. 阶段条 ═══════ */
.gd-stages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(230 * var(--u)), 1fr));
  gap: calc(9 * var(--u));
  margin-bottom: var(--sp-4);
}
.gd-stage {
  display: flex; align-items: flex-start; gap: calc(10 * var(--u));
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: calc(11 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-850);
  cursor: pointer; font-family: inherit; text-align: left;
  transition: border-color .16s var(--e-out), background .16s var(--e-out);
}
.gd-stage:hover { border-color: var(--glass-line-2); }
.gd-stage.on {
  background: color-mix(in srgb, var(--acc) 9%, transparent);
  border-color: var(--acc);
}
.gd-stage-id {
  flex: 0 0 auto;
  padding: calc(3 * var(--u)) calc(8 * var(--u));
  border-radius: calc(6 * var(--u));
  background: var(--n-750);
  color: var(--ink-3);
  font-size: var(--fs-3); font-weight: 800;
}
.gd-stage.on .gd-stage-id { background: var(--acc); color: var(--acc-ink); }
.gd-stage-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.gd-stage-n {
  font-size: var(--fs-5); font-weight: 800; color: var(--ink-1);
  display: flex; align-items: baseline; gap: calc(7 * var(--u));
  flex-wrap: wrap;
}
.gd-stage-n em {
  font-style: normal; font-size: var(--fs-2); font-weight: 600;
  color: var(--acc);
}
.gd-stage-d { font-size: var(--fs-2); color: var(--ink-3); }
.gd-stage-r { font-size: var(--fs-1); color: var(--ink-4); line-height: calc(14 * var(--u)); }
.gd-stage-c {
  flex: 0 0 auto;
  padding: calc(1 * var(--u)) calc(7 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--n-800);
  border: 1px solid var(--glass-line);
  font-size: var(--fs-2); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.gd-stage-c.all { background: var(--acc); color: var(--acc-ink); border-color: var(--acc); }

.gd-stage-note {
  padding: calc(9 * var(--u)) calc(12 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--n-800);
  border: 1px solid var(--glass-line);
  border-left: 3px solid var(--acc);
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-3);
  margin-bottom: var(--sp-4);
}
.gd-stage-note b {
  color: var(--acc); font-weight: 800; margin-right: calc(8 * var(--u));
}

.gd-pat-note {
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: calc(10 * var(--u));
  background: color-mix(in srgb, var(--acc) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--acc) 26%, transparent);
  font-size: var(--fs-3);
  line-height: calc(18 * var(--u));
  color: var(--ink-2);
  margin-bottom: var(--sp-4);
}
.gd-pat-note b {
  display: block; color: var(--acc); font-weight: 800;
  margin-bottom: calc(3 * var(--u));
}

/* ═══════ 3. 语法点列表 ═══════ */
.gd-list { display: flex; flex-direction: column; gap: calc(9 * var(--u)); }

.gd-item {
  border: 1px solid var(--glass-line);
  border-radius: calc(12 * var(--u));
  background: var(--n-850);
  overflow: hidden;
  transition: border-color .18s var(--e-out);
}
.gd-item.open { border-color: var(--glass-line-2); }
.gd-item.done { border-left: 3px solid var(--acc); }

.gd-item-h {
  display: flex; align-items: center; gap: calc(11 * var(--u));
  width: 100%;
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  background: none; cursor: pointer; text-align: left; font-family: inherit;
}
.gd-item-h:hover { background: var(--hover); }

/* tier 标签 —— 标记体系的核心 */
.gd-tier {
  flex: 0 0 auto;
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: calc(6 * var(--u));
  font-size: var(--fs-1); font-weight: 800;
  letter-spacing: calc(.3 * var(--u));
  white-space: nowrap;
}
.gd-tier-must {
  background: color-mix(in srgb, var(--acc) 18%, transparent);
  color: var(--acc);
}
.gd-tier-adv {
  background: color-mix(in srgb, var(--c-sky) 18%, transparent);
  color: var(--c-sky);
}
.gd-tier-plus {
  background: color-mix(in srgb, var(--c-violet) 18%, transparent);
  color: var(--c-violet);
}
.gd-tier-risk {
  background: color-mix(in srgb, var(--c-rose) 18%, transparent);
  color: var(--c-rose);
}

.gd-item-t {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: calc(2 * var(--u));
}
.gd-item-n {
  font-size: var(--fs-5); font-weight: 800; color: var(--ink-1);
  letter-spacing: calc(-.2 * var(--u));
  display: flex; align-items: baseline; gap: calc(7 * var(--u));
  flex-wrap: wrap;
}
.gd-item-n em {
  font-style: normal; font-size: var(--fs-2); font-weight: 500;
  color: var(--ink-4);
}
.gd-item-gra { font-size: var(--fs-1); color: var(--ink-3); }

.gd-item-r {
  margin-left: auto; flex: 0 0 auto;
  display: flex; align-items: center; gap: calc(8 * var(--u));
}
.gd-item-band {
  font-size: var(--fs-2); color: var(--ink-3);
  padding: calc(1 * var(--u)) calc(7 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--n-800);
  border: 1px solid var(--glass-line);
  white-space: nowrap;
}
.gd-item-ck {
  font-size: var(--fs-2); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.gd-item-ck.all { color: var(--acc); font-weight: 800; }
.gd-item .vb-chev {
  width: calc(13 * var(--u)); height: calc(13 * var(--u));
  color: var(--ink-4); flex: 0 0 auto;
  transition: transform .3s var(--e-out);
}
.gd-item.open .vb-chev { transform: rotate(90deg); }

.gd-item-b { padding: 0 calc(14 * var(--u)) calc(14 * var(--u)); }

/* ═══════ 4. 结构公式 ═══════ */
.gd-struct {
  padding: calc(11 * var(--u)) calc(13 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--n-800);
  border: 1px solid var(--glass-line);
  border-left: 3px solid var(--acc);
  font-size: var(--fs-4);
  line-height: calc(19 * var(--u));
  color: var(--ink-1);
  font-weight: 600;
}
.gd-struct b { color: var(--acc); }

/* ═══════ 5. 规则清单 ═══════ */
.gd-rules { margin: 0; padding-left: calc(22 * var(--u)); }
.gd-rules li {
  font-size: var(--fs-3); line-height: calc(19 * var(--u));
  color: var(--ink-2);
  margin-bottom: calc(7 * var(--u));
}
.gd-rules li:last-child { margin-bottom: 0; }
.gd-rules li::marker { color: var(--acc); font-weight: 800; }
.gd-rules b { color: var(--ink-1); font-weight: 700; }

/* ═══════ 6. 常见错误 ═══════ */
.gd-pits { margin: 0; padding-left: calc(20 * var(--u)); }
.gd-pits li {
  font-size: var(--fs-3); line-height: calc(18 * var(--u));
  color: var(--ink-3);
  margin-bottom: calc(6 * var(--u));
}
.gd-pits li:last-child { margin-bottom: 0; }
.gd-pits li::marker { color: var(--c-rose); }
.gd-pits b { color: var(--ink-2); font-weight: 700; }

/* ═══════ 7. 窄屏 ═══════ */
@media (max-width: 860px) {
  .gd-stages { grid-template-columns: 1fr; }
  .gd-item-h { flex-wrap: wrap; }
  .gd-item-r { margin-left: 0; width: 100%; }
  .gd-tabs { flex-wrap: wrap; }
}

/* ═══════ 8. 学习路径语法页的入口块 ═══════ */
.fd-gd-entry {
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(11 * var(--u));
  border: 1px solid color-mix(in srgb, var(--acc) 28%, transparent);
  background: color-mix(in srgb, var(--acc) 7%, transparent);
  margin-bottom: var(--sp-4);
}
.fd-gd-entry-t {
  font-size: var(--fs-5); font-weight: 800; color: var(--acc);
  margin-bottom: calc(4 * var(--u));
}
.fd-gd-entry-d {
  font-size: var(--fs-3); line-height: calc(18 * var(--u));
  color: var(--ink-2);
  margin-bottom: calc(9 * var(--u));
}
.fd-gd-entry-b {
  display: flex; align-items: center; gap: calc(11 * var(--u));
  flex-wrap: wrap;
}
.fd-gd-entry-b span {
  font-size: var(--fs-2); color: var(--ink-4);
  flex: 1 1 calc(220 * var(--u));
}

/* ═══════════════════════════════════════════════════════════════════
   语法课件扩展层 · 变位表 / 例句阶梯 / 错题诊所
   ═══════════════════════════════════════════════════════════════════ */
.gc-note {
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-3);
  margin-bottom: calc(8 * var(--u));
}
.gc-note b { color: var(--ink-1); font-weight: 700; }

/* ── 变位表 ── */
.gc-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--glass-line);
  border-radius: calc(10 * var(--u));
  margin-bottom: calc(12 * var(--u));
}
.gc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-2);
  min-width: calc(420 * var(--u));
}
.gc-table thead th {
  background: var(--n-800);
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  text-align: left;
  font-weight: 800;
  color: var(--ink-4);
  font-size: var(--fs-1);
  letter-spacing: calc(.2 * var(--u));
  white-space: nowrap;
  border-bottom: 1px solid var(--glass-line-2);
}
.gc-table tbody td {
  padding: calc(7 * var(--u)) calc(10 * var(--u));
  border-bottom: 1px solid var(--glass-line);
  color: var(--ink-3);
  line-height: calc(15 * var(--u));
  vertical-align: top;
}
.gc-table tbody tr:last-child td { border-bottom: none; }
.gc-table tbody tr:hover td { background: var(--hover); }
.gc-table tbody td:first-child {
  color: var(--ink-1); font-weight: 700; white-space: nowrap;
}
.gc-table td b { color: var(--acc); font-weight: 800; }

/* ── 例句阶梯 ── */
.gc-ladder {
  display: flex; flex-direction: column; gap: calc(7 * var(--u));
  margin-bottom: calc(12 * var(--u));
}
.gc-step {
  display: flex; gap: calc(10 * var(--u));
  padding: calc(9 * var(--u)) calc(12 * var(--u));
  border-radius: calc(9 * var(--u));
  border: 1px solid var(--glass-line);
  border-left: 3px solid var(--glass-line-2);
  background: var(--n-800);
}
.gc-step-lv {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u));
  min-width: calc(52 * var(--u));
}
.gc-lvbadge {
  font-size: var(--fs-2); font-weight: 800;
  color: var(--ink-4);
  padding: calc(2 * var(--u)) calc(7 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--n-850);
  border: 1px solid var(--glass-line);
}
.gc-lvnote {
  font-size: var(--fs-1); color: var(--ink-4);
  text-align: center; white-space: nowrap;
}
.gc-step-lv1 { border-left-color: var(--acc); }
.gc-step-lv1 .gc-lvbadge { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 40%, transparent); }
.gc-step-lv2 { border-left-color: color-mix(in srgb, var(--acc) 60%, var(--glass-line-2)); }
.gc-step-lv2 .gc-lvbadge { color: var(--acc); }
.gc-step-lv3 { border-left-color: var(--c-amber); }
.gc-step-lv3 .gc-lvbadge { color: var(--c-amber); border-color: color-mix(in srgb, var(--c-amber) 40%, transparent); }
.gc-step-lv4 { border-left-color: var(--c-rose); }
.gc-step-lv4 .gc-lvbadge { color: var(--c-rose); border-color: color-mix(in srgb, var(--c-rose) 40%, transparent); }
.gc-step-b { flex: 1 1 auto; min-width: 0; }
.gc-step-en {
  font-size: var(--fs-4);
  line-height: calc(19 * var(--u));
  color: var(--ink-1);
  font-family: var(--font-en, inherit);
}
.gc-step-cn {
  margin-top: calc(3 * var(--u));
  font-size: var(--fs-2); color: var(--ink-3);
}
.gc-step-note {
  margin-top: calc(5 * var(--u));
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-4);
}
.gc-step-note b { color: var(--ink-2); font-weight: 700; }

/* ── 错题诊所 ── */
.gc-clinic {
  display: flex; flex-direction: column; gap: calc(8 * var(--u));
  margin-bottom: calc(12 * var(--u));
}
.gc-case {
  display: flex; gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border-radius: calc(10 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-800);
}
.gc-case-tag {
  flex: 0 0 auto;
  align-self: flex-start;
  font-size: var(--fs-1); font-weight: 800;
  color: var(--c-rose);
  padding: calc(2 * var(--u)) calc(8 * var(--u));
  border-radius: calc(5 * var(--u));
  background: color-mix(in srgb, var(--c-rose) 14%, transparent);
  white-space: nowrap;
  max-width: calc(140 * var(--u));
  overflow: hidden; text-overflow: ellipsis;
}
.gc-case-b { flex: 1 1 auto; min-width: 0; }
.gc-case-bad {
  display: flex; gap: calc(8 * var(--u));
  align-items: flex-start;
}
.gc-mark {
  flex: 0 0 auto;
  font-weight: 800; color: var(--c-rose);
  font-size: var(--fs-4); line-height: 1.2;
}
.gc-case-en {
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-2);
  font-family: var(--font-en, inherit);
}
.gc-case-cn {
  font-size: var(--fs-2); color: var(--ink-4);
  margin-top: calc(2 * var(--u));
}
.gc-case-why {
  margin-top: calc(7 * var(--u));
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-3);
}
.gc-case-why b {
  display: inline-block; margin-right: calc(6 * var(--u));
  color: var(--c-amber); font-weight: 800; font-size: var(--fs-2);
}
.gc-case-fix {
  margin-top: calc(6 * var(--u));
  font-size: var(--fs-3);
  line-height: calc(17 * var(--u));
  color: var(--ink-2);
}
.gc-case-fix b {
  display: inline-block; margin-right: calc(6 * var(--u));
  color: var(--acc); font-weight: 800; font-size: var(--fs-2);
}
.gc-case-fixen {
  display: inline;
  font-family: var(--font-en, inherit);
  font-size: var(--fs-3);
  color: var(--acc);
  font-weight: 600;
}
.gc-case-fixen b { margin-right: 0; }

@media (max-width: 760px) {
  .gc-step { flex-direction: column; gap: calc(6 * var(--u)); }
  .gc-step-lv { flex-direction: row; align-items: baseline; gap: calc(7 * var(--u)); }
  .gc-case { flex-direction: column; gap: calc(6 * var(--u)); }
  .gc-case-tag { max-width: 100%; }
}