/* 关关通·小学英语 设计系统。
   唯一视觉规格：docs/ISTUDY-FAMILY-VISUAL-CONSTITUTION.md（v1.3）。
   色值、字号、圆角、轨宽一律来自 tokens.css，本文件零裸取值。 */
@import url("tokens.css");

* { box-sizing: border-box; }
html { font-size: 16px; }
[hidden] { display: none !important; }

/* §6.1 页面框架：外层淡紫，主站体暖白大圆角 */
body {
  margin: 0;
  background: var(--lavender);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.65;
}
body.facade-page {
  background-image:
    linear-gradient(rgba(104, 70, 232, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 70, 232, 0.035) 1px, transparent 1px);
  background-size: 22px 22px;
}
.site-shell {
  background: var(--canvas);
  width: min(100% - 24px, 1540px);
  margin-inline: auto;
  margin-block: 12px;
  border-radius: var(--radius-shell);
  overflow: clip;
  min-height: calc(100vh - 24px);
}
.facade-page .site-shell {
  background-color: rgba(255, 253, 247, 0.96);
  background-image:
    linear-gradient(rgba(104, 70, 232, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 70, 232, 0.025) 1px, transparent 1px);
  background-size: 22px 22px;
}
main {
  width: min(100% - 48px, var(--content));
  margin-inline: auto;
  padding-block: 16px 72px;
}

/* §5 排版角色 */
h1, h2, h3 { color: var(--ink); margin: 0 0 10px; }
h1 { font-size: var(--type-card-title); line-height: 1.18; letter-spacing: -0.045em; font-weight: 800; }
h1.display-title { font-size: var(--type-display); line-height: 0.99; letter-spacing: -0.075em; font-weight: 800; }
h2 { font-size: var(--type-card-title); line-height: 1.18; letter-spacing: -0.045em; font-weight: 780; margin-top: 22px; }
h2.section-title { font-size: var(--type-section-title); line-height: 1.08; letter-spacing: -0.065em; }
h3 { font-size: var(--type-supporting); line-height: 1.3; font-weight: 700; margin-top: 18px; }
p { margin: 10px 0; }
.lead { font-size: var(--type-lead); line-height: 1.8; font-weight: 520; color: var(--ink-muted); }
.small { font-size: var(--type-supporting); }
.label { font-size: var(--type-label); line-height: 1.3; font-weight: 720; letter-spacing: 0.04em; }
.facade-title { max-inline-size: 12ch; text-wrap: balance; }
.title-line { display: block; max-inline-size: 100%; }
.eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 22px 0 14px;
  color: var(--brand-strong); font-size: var(--type-label); line-height: 1.3;
  font-weight: 780; letter-spacing: 0.06em;
}
.eyebrow-rule { flex: 0 0 28px; width: 28px; height: 4px; border-radius: var(--radius-pill); background: var(--coral); }
.accent-script {
  position: relative; isolation: isolate; z-index: 0;
  display: inline-block;
  color: var(--brand);
  font-family: var(--font-accent);
  font-size: 1.02em;
  font-style: normal;
  letter-spacing: -0.06em;
  line-height: 0.92;
}
.accent-script .accent-word { position: relative; z-index: 1; }
.accent-brush {
  position: absolute; z-index: 0; inset-inline: -0.06em; inset-block-end: -0.04em;
  height: 0.28em; background: var(--sun); transform: rotate(-1deg); border-radius: 0;
}
a { color: var(--brand-strong); }
button { font: inherit; }
details summary { cursor: pointer; }

/* §3.2 门面长页节奏：只挂在门面页，课内步进不消费这些构图角色。 */
.facade-page main { padding-block: clamp(22px, 4vw, 52px) 88px; }
.facade-hero {
  display: grid; gap: clamp(18px, 3vw, 34px); align-items: center;
  margin: 0 0 clamp(24px, 5vw, 56px); padding: clamp(20px, 3.5vw, 48px);
  background: linear-gradient(118deg, var(--hero-soft) 0%, var(--surface) 52%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-hero); box-shadow: var(--shadow-raised);
  overflow: hidden;
}
/* 编辑式 Hero（指南 §10.4）：文案列 + 淡紫插画列铺满面板，人物立在列底 */
.facade-hero.has-art { padding: 0; gap: 0; align-items: stretch; min-height: 560px; }
.facade-hero .hero-art { position: relative; min-width: 0; min-height: 260px; }
/* 剪纸拱形舞台：人物立在面板底边，头顶探出拱顶，消除硬分栏缝 */
/* 胶囊沉到面板底以下，露出的上半即拱形（R1 圆角白名单） */
.facade-hero .hero-art::before {
  content: ""; position: absolute; bottom: -340px; left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: min(74%, 430px); height: calc(88% + 340px);
  background: var(--lavender); border-radius: var(--radius-pill);
}
/* 地图与考区插画更宽，舞台加宽 */
.facade-hero .map-hero-art::before,
.facade-hero .region-hero-art::before { width: min(88%, 540px); }
.facade-hero .parents-hero-art .slot-figure img { height: 96%; }
.facade-hero .hero-art .slot-figure { position: relative; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }
.facade-hero .hero-art .slot-figure img {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 100%; width: auto; max-width: none;
}
.facade-hero .hero-copy { display: grid; gap: 14px; align-content: center; min-width: 0; padding: clamp(22px, 5vw, 48px); }
.facade-hero .hero-copy > * { margin-block: 0; }
.facade-hero .hero-copy .facade-hero-action { margin-top: 8px; }
.facade-hero .hero-copy .lead { max-inline-size: 36rem; }
.method-line { color: var(--brand-strong); font-size: var(--type-supporting); font-weight: 650; }
.method-line strong { font-weight: 800; }
.facade-hero-action { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Hero 出血构图断言保留：负下边距使人物立到面板底边 */
@media (min-width: 761px) {
  .facade-hero .hero-art .illustration-frame-hero { margin-block-end: -42px; }
}

/* 今日学习主任务带：日光黄重点面板（§10.8），全站第一主行动 */
.paper-card.today-band { background: var(--sun); border-color: rgba(23, 19, 31, 0.18); }
.today-band .today-progress .bar,
.today-band .bar-track { background: rgba(255, 253, 247, 0.55); }
.today-band .today-progress .bar::-webkit-progress-value { background: var(--brand-strong); }
.today-band .today-progress .bar::-moz-progress-bar { background: var(--brand-strong); }
.today-band .tag.soft { background: rgba(255, 253, 247, 0.55); color: var(--ink); }
.today-band .today-next { border-top-color: rgba(23, 19, 31, 0.22); }
.today-band .muted { color: rgba(23, 19, 31, 0.72); }

/* 入口卡插画探出卡面顶边，呼应 Hero 纸艺手法 */
.subject-card { align-items: start; }
.subject-card .subject-art { margin-block-start: -14px; }
.facade-closing {
  margin: clamp(24px, 5vw, 56px) 0; padding: clamp(24px, 5vw, 54px);
  border: 1px solid var(--border); border-radius: var(--radius-hero);
}
.facade-content { margin-block: clamp(24px, 5vw, 56px); }
.facade-content > .paper-card:first-child { margin-top: 0; }
.facade-content > .paper-card:last-child { margin-bottom: 0; }
.entry-grid { display: grid; gap: clamp(18px, 1.6vw, 22px); }
.entry-grid > .paper-card { margin: 0; padding-block: 24px; }
.entry-grid > .paper-card h2 { margin-top: 0; }

/* §10.6 Subject Card：整卡链接，左插画右文案，可交互不旋转 */
.subject-card {
  display: grid; grid-template-columns: minmax(0, 104px) minmax(0, 1fr);
  gap: clamp(14px, 1.8vw, 20px); align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); padding: 24px;
  box-shadow: var(--shadow-soft); text-decoration: none; color: var(--ink);
}
.subject-art { display: block; min-width: 0; }
.subject-art .slot-figure.illustration-frame-card { max-width: 104px; margin-inline: auto; }
.subject-body { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.subject-title { font-size: var(--type-card-title); line-height: 1.18; letter-spacing: -0.045em; font-weight: 780; }
.subject-desc { font-size: var(--type-supporting); line-height: 1.55; color: var(--ink-muted); }
.subject-cta { font-weight: 700; color: var(--brand-strong); font-size: var(--type-supporting); }
/* 无图也成立（DESIGN.md §5.2）：插画槽缺图被整槽移除后，卡退化成单列文字占满卡宽；有图时 body 不是首子，本条不生效 */
.subject-card > .subject-body:first-child { grid-column: 1 / -1; }

/* 今日学习主任务面板 */
.facade-content > .today-panel { padding-block: 24px; }
.today-panel > h2 { margin-bottom: 6px; }
.today-progress { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-block: 0 8px; }
.today-progress .bar { flex: 1 1 200px; max-inline-size: 420px; }
.today-progress p { margin: 0; }
.today-next {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border); padding-top: 10px;
}
.today-meta { min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.today-next-title { margin: 0; font-weight: 720; font-size: 1.06rem; }
.today-tags { margin: 0; }
/* 复习行：与 today-next 同排版，另加 10px 行距与上一行分开 */
.today-review {
  display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px;
}
.facade-closing > .paper-card { margin-bottom: 0; box-shadow: none; }
.facade-closing > .paper-card:first-of-type { margin-top: 0; }
.facade-highlight,
.paper-card.facade-highlight { background: var(--sun); border-color: rgba(23, 19, 31, 0.18); }
.facade-highlight h2, .facade-highlight h3 { color: var(--ink); }
.facade-highlight .coverage-num { color: var(--ink); }
.facade-closing,
.paper-card.facade-closing { background: var(--lavender); border-color: var(--lavender-deep); }
.facade-closing h2, .facade-closing h3 { color: var(--brand-strong); }

/* §10.9 门面纸片：装饰层不接收指针/焦点，也不参与阅读顺序。 */
.facade-hero, .facade-highlight, .facade-closing { position: relative; }
.facade-decor-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.facade-hero > *:not(.facade-decor-layer),
.facade-highlight > *:not(.facade-decor-layer),
.facade-closing > *:not(.facade-decor-layer) { position: relative; z-index: 1; }
.facade-decor {
  position: absolute; display: block; pointer-events: none; user-select: none;
}
.facade-decor:nth-child(1) { inset-block-start: 17px; inset-inline-end: 8%; }
.facade-decor:nth-child(2) { inset-block-end: 18px; inset-inline-end: 4%; }
.facade-decor:nth-child(3) { inset-block-start: 46%; inset-inline-start: 2%; }
.facade-decor-dot {
  width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--sun);
}
.facade-decor-paper {
  width: 48px; height: 30px; background: var(--lavender);
  border: 2px solid var(--brand); transform: rotate(-1.2deg);
}
.facade-decor-star {
  width: 28px; height: 28px; background: var(--coral);
  clip-path: polygon(50% 0, 62% 34%, 100% 34%, 70% 55%, 82% 100%, 50% 72%, 18% 100%, 30% 55%, 0 34%, 38% 34%);
}
.facade-decor-line {
  width: 48px; height: 5px; background: var(--coral); transform: rotate(1.2deg);
}

@media (min-width: 761px) {
  .entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facade-hero,
  .facade-content,
  .facade-closing { margin-block: clamp(84px, 5vw, 96px); }
  .facade-hero { margin-top: 0; }
}

@media (min-width: 761px) and (max-width: 1023px) {
  .passage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .facade-hero { gap: 24px; padding: 44px; }
  .facade-closing { padding: 36px; }
  .facade-content .entry-grid p { margin-block: 8px; }
  .facade-closing > .paper-card { padding: 24px 28px; }
  .facade-hero.has-art { grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr); }
  .facade-hero.has-art > .hero-copy { grid-column: 1; grid-row: 1; padding: clamp(36px, 4.6vw, 64px); }
  .facade-hero.has-art > .hero-art { grid-column: 2; grid-row: 1; }
}

/* §13.2 焦点 */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.step-host [tabindex="-1"]:focus { outline: none; }
.skip-link {
  position: absolute; inset-inline-start: 16px; top: -48px;
  background: var(--surface); color: var(--brand-strong);
  padding: 10px 22px; border-radius: var(--radius-pill); z-index: 90; text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* §10.1 Header：品牌居左、白胶囊导航、真实状态在右；不粘性 */
/* 左右内衬与正文轨同源推导（总纲 §4.1 同级共享左缘）：main 的轨是
   width: min(100% - 48px, var(--content)) 居中，等价于左右各留
   max(24px, (100% - 内容轨)/2)。页头以前自写一套 clamp，宽档与正文轨差 80px，
   十页全中。这里改成同一条算式，token 改了两边一起走，不会再各算各的。 */
.site-header {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  min-height: 74px;
  padding-block: 10px;
  padding-inline: max(24px, (100% - var(--content)) / 2);
  border-bottom: 1px solid var(--border); background: var(--canvas);
}
@media (min-width: 761px) {
  .site-header { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-header .brand { justify-self: start; }
  .site-header nav { justify-self: center; }
  .site-header .user-chip { justify-self: end; margin-left: 0; }
}
.site-header .brand {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  font-weight: 800; color: var(--brand-strong); text-decoration: none; font-size: 1.14rem; letter-spacing: -0.02em;
}
.brand-mark {
  display: inline-grid; place-items: center; flex: 0 0 48px; width: 48px; height: 38px;
  border-radius: var(--radius-pill); background: var(--brand); color: #FFFFFF;
  font-family: var(--font-accent); font-size: 1.38rem; line-height: 1; font-weight: 700;
}
.brand-copy { display: inline-flex; flex-direction: column; gap: 0; min-width: 0; }
.brand-name { line-height: 1.15; }
.brand-family { color: var(--ink-muted); font-size: var(--type-label); line-height: 1.2; font-weight: 650; letter-spacing: 0.02em; }
.site-header nav {
  display: flex; gap: 2px; flex-wrap: wrap; align-items: center;
  background: rgba(255, 255, 255, 0.72); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 4px;
}
@media (max-width: 760px) {
  .site-header nav { order: 3; flex-basis: 100%; justify-content: center; }
}
.site-header nav a {
  text-decoration: none; padding: 7px 14px; border-radius: var(--radius-pill);
  color: var(--ink-muted); min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--type-supporting);
}
.site-header nav a[aria-current="page"] { background: var(--lavender); color: var(--brand-strong); font-weight: 700; }

/* 身份胶囊：头像占位 + 招呼 + 年级学段。整块是进「我」页的链接。 */
.user-chip {
  margin-left: auto; display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-pill); padding: 6px 16px 6px 6px;
  min-height: 48px; text-decoration: none; color: var(--ink);
}
.user-chip-avatar {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: var(--radius-pill);
  background: var(--lavender); border: 1px solid var(--lavender-deep);
}
.user-chip-copy { display: inline-flex; flex-direction: column; min-width: 0; }
.user-chip-greeting { font-size: var(--type-supporting); font-weight: 700; line-height: 1.25; }
.user-chip-meta { font-size: var(--type-label); color: var(--ink-muted); line-height: 1.25; }

/* 页脚：slim 单区全局 chrome，无装饰，家族关系与真实状态 */
.site-footer {
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center;
  margin-top: clamp(20px, 3vw, 36px);
  border-top: 1px solid var(--border);
  padding-block: 14px 18px;
  padding-inline: max(24px, (100% - var(--content)) / 2);
  color: var(--ink-muted); font-size: var(--type-supporting);
}
.site-footer .footer-brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--brand-strong); font-weight: 700; text-decoration: none;
  min-height: 44px;
}
.footer-mark {
  display: inline-grid; place-items: center; width: 28px; height: 24px;
  border-radius: var(--radius-pill); background: var(--brand); color: #FFFFFF;
  font-family: var(--font-accent); font-size: 0.9rem; line-height: 1;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.site-footer nav a {
  color: var(--ink-muted); text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer nav a:hover { color: var(--brand-strong); }
}
.site-footer .footer-status { margin: 0; margin-inline-start: auto; line-height: 1.5; }

/* 错误态面板（§3.4）：影响范围 + 安全内容 + 下一步 */
.error-panel {
  display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 28px); align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-panel); padding: clamp(24px, 3vw, 34px);
  margin: 17px 0; box-shadow: var(--shadow-soft);
}
.error-panel-art .slot-figure.illustration-frame-card,
.leige-tip-art .slot-figure.illustration-frame-card { max-width: 132px; }
.error-panel.compact { grid-template-columns: minmax(0, 1fr); padding: clamp(18px, 2.4vw, 26px); }
.error-panel.compact h2 { font-size: 1.15rem; }
.error-panel-body h2 { margin-top: 0; }
.error-panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (max-width: 760px) {
  .error-panel { grid-template-columns: minmax(0, 1fr); }
  .error-panel-art .slot-figure.illustration-frame-card,
  .leige-tip-art .slot-figure.illustration-frame-card { max-width: 96px; margin-inline: auto; }
  .site-footer .footer-status { margin-inline-start: 0; flex-basis: 100%; }
}

/* 面板与卡：§6.3 圆角层级 + §6.2 空间节奏 */
.paper-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel);
  padding: var(--card-inset); margin: 17px 0; box-shadow: var(--shadow-soft);
}
.paper-card.ruled {
  background-image: repeating-linear-gradient(transparent, transparent 27px, rgba(233, 222, 255, 0.55) 27px, rgba(233, 222, 255, 0.55) 28px);
}

/* §10.3 动作：实心紫色圆角矩形。
   UI 重设计阶段一把主次按钮从全圆胶囊改成圆角矩形（--radius-btn），
   pill 只留给标签、身份胶囊、分段控件与状态钉（偏离 DEV-005，见 DESIGN.md §8）。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--radius-btn); padding: 13px 24px;
  background: var(--brand); color: #FFFFFF; font-weight: 700; cursor: pointer;
  text-decoration: none; min-height: 48px; text-align: center; font-size: var(--type-body);
}
.btn.block { display: flex; inline-size: 100%; }
.btn:active { background: var(--brand-strong); }
.btn.primary-lg { min-height: 52px; padding: 14px 26px; }
.btn.ghost { background: var(--surface); color: var(--brand-strong); border: 1.5px solid var(--brand-strong); }
.btn.quiet { background: var(--lavender); color: var(--ink); }
/* 次按钮：浅紫底、深紫字，无边框（组件规格 §5.4） */
.btn-secondary { background: var(--lavender); color: var(--brand-strong); }
.btn-secondary:active { background: var(--lavender-deep); }
.btn.quiet:active { background: var(--lavender-deep); }
/* 悬停变色只在真有指针的设备上给：触屏上 hover 会在点过之后粘住，看着像选中了 */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--brand-strong); }
  .btn.quiet:hover { background: var(--lavender-deep); }
  .btn-secondary:hover { background: var(--lavender-deep); color: var(--brand-strong); }
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* §10.9 标签：胶囊，短名词 */
.tag { display: inline-block; border-radius: var(--radius-pill); padding: 3px 12px; font-size: 0.84rem; font-weight: 720; background: var(--lavender); color: var(--ink); }
.tag.sun { background: var(--sun); }
.tag.mint { background: var(--mint); }
.tag.soft { background: rgba(233, 222, 255, 0.5); color: var(--ink-muted); }
.tag.tilt { transform: rotate(-1.2deg); }

.muted { color: var(--ink-muted); }

/* 场景引入：故事卡（sun 边条 + 极浅黄底 + 编辑式引号） */
.scene {
  position: relative;
  background: rgba(255, 201, 74, 0.10);
  border-radius: var(--radius-inline); padding: 8px 18px 12px; margin: 14px 0;
}
.scene-quote {
  display: block;
  font-size: 2.2rem; font-weight: 800; line-height: 1;
  color: var(--sun); margin-block-end: 0;
}
.scene .scene-en { font-size: 1.3rem; font-weight: 650; line-height: 1.6; letter-spacing: -0.01em; margin: 4px 0 0; }

/* 引导发现 */
details.discover { border: 1.5px dashed var(--brand); border-radius: var(--radius-inline); padding: 12px 16px; margin: 18px 0; background: var(--surface); }
details.discover summary { cursor: pointer; font-weight: 650; color: var(--brand-strong); min-height: 32px; }
details.discover[open] summary { margin-bottom: 6px; }

.rule-box { background: var(--lavender); border-radius: var(--radius-inline); padding: 15px 18px; margin: 18px 0; font-size: 1.06rem; }
.takeaway { padding: 9px 14px; margin: 10px 0; background: color-mix(in srgb, var(--lavender) 42%, transparent); border-radius: var(--radius-row); font-size: var(--type-supporting); color: var(--ink-muted); }
.rule-box { margin-block: 16px; }

/* 规则确认的身份由 .lead-chip 承载（乙三，DEC-125）；旧左条与折角退役。 */

/* 例句折叠与辅助组 */
details.discover.example-fold, details.discover.aux-group { border-radius: var(--radius-row); }

/* 记忆卡（速记与避坑，2026-08-06 方案 A）：透明底细边框，不占课内主色块名额；
   荧光笔只标冻结保点关键词，三色标签片沿用既有 token。 */
.memo-card { border: 1.5px solid var(--lavender-deep); border-radius: var(--radius-inline); margin-block: 18px; overflow: hidden; }
.memo-head { display: flex; align-items: center; gap: 8px; padding: 9px 16px 8px; border-bottom: 1px solid var(--lavender); }
.memo-title { font-size: 0.88rem; font-weight: 800; color: var(--brand-strong); letter-spacing: 0.04em; }
.memo-bar { flex: 1; height: 3px; background: linear-gradient(90deg, var(--lavender-deep), transparent); }
.memo-row { display: flex; gap: 10px; padding: 10px 16px; align-items: baseline; }
.memo-row + .memo-row { border-top: 1px dashed var(--lavender); }
/* 标签片挂 .tag 基类（药丸圆角在豁免清单内），此处只调尺寸与三色语义 */
.memo-chip { flex: none; font-size: 11.5px; font-weight: 750; padding: 1px 9px; letter-spacing: 0.02em; }
/* 身份标签片（乙三，DEC-125）：替代左缘色条的组件身份件。实底形用于浅紫底上。 */
.lead-chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 12px;
  margin-right: 10px; vertical-align: 1px;
  background: var(--brand); color: var(--surface); border-radius: var(--radius-pill);
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em;
}
/* 珊瑚变体直接借 memo 的 chip-keng 色（class="lead-chip chip-keng"），不另设色值。 */
.chip-ji { background: var(--lavender); color: var(--brand-strong); }
.chip-jue { background: rgba(255, 201, 74, 0.32); color: #7A5800; }
.chip-keng { background: rgba(255, 128, 108, 0.18); color: #B3402E; }
.memo-body { margin: 0; font-size: 0.98rem; color: var(--ink); }
.memo-card mark { background: linear-gradient(180deg, transparent 42%, rgba(255, 201, 74, 0.55) 42%); color: inherit; padding: 0 2px; font-weight: 650; }
.memo-jue-body { min-width: 0; }
.memo-jue-body .memo-body { font-weight: 560; letter-spacing: 0.01em; }
.memo-keng-body { font-size: 0.93rem; }
@media (max-width: 430px) { .memo-row { flex-direction: column; gap: 4px; } }
.example-fold { margin-top: 8px; }
.example-fold .example { margin-block: 10px; }
.aux-group { margin-block: 16px; }
.aux-group .takeaway { border-left: none; margin: 6px 0; padding: 4px 0; }
.aux-group .explain { margin: 6px 0; }

/* 辅助条降权 */
.explain { border-radius: var(--radius-inline); padding: 9px 12px; background: rgba(233, 222, 255, 0.42); font-size: var(--type-supporting); margin: 12px 0; }

/* 学练分界线：随学随测标题前一条淡分隔 */
.quiz-section-title { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 24px; }

/* 开场步目标清单卡 */
.goals-card {
  background: rgba(233, 222, 255, 0.42);
  border-radius: var(--radius-inline); padding: 14px 18px; margin: 14px 0;
}
.goals-card h3 { margin-top: 0; }
.goals-list { list-style: none; padding: 0; display: grid; gap: 9px; margin: 8px 0 2px; }
.goals-list li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.6; }
.goal-no {
  flex: 0 0 24px; width: 24px; height: 24px; margin-top: 1px;
  display: inline-grid; place-items: center;
  background: var(--brand); color: #FFFFFF;
  border-radius: var(--radius-pill);
  font-weight: 800; font-size: 0.85rem;
}

/* 讲解条（雷哥） */
.teach-bar { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0; }
.teach-bar .avatar-slot { flex: 0 0 56px; height: 56px; border-radius: var(--radius-pill); overflow: hidden; box-shadow: 0 0 0 2px var(--brand); }
.teach-bar .avatar-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.teach-bar .teach-text { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-inline); padding: 16px 18px; flex: 1; font-size: 1.02rem; line-height: 1.75; }
.teach-sentence { margin: 0 0 4px; line-height: 1.75; }
.teach-sentence:last-child { margin-bottom: 0; }
.teach-en { font-weight: 650; color: var(--brand-strong); font-size: 1.1em; line-height: 1.6; }

/* 语法术语提示 */
.grammar-tip {
  border-bottom: 1.5px dotted var(--brand);
  cursor: pointer;
}
.grammar-tip-pop {
  position: fixed; z-index: 60;
  max-width: 300px; min-width: 180px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-raised);
  padding: 14px 16px;
  font-size: var(--type-supporting);
  overflow-wrap: break-word; word-break: break-word;
}
.grammar-tip-header { font-weight: 750; color: var(--brand-strong); margin-bottom: 4px; }
.grammar-tip-body { color: var(--ink); line-height: 1.6; overflow-wrap: break-word; }
/* 底部不出屏：clamp top */
@media (max-height: 700px) {
  .grammar-tip-pop { max-height: 40vh; overflow-y: auto; }
}
.teach-bar .teach-text::before {
  content: ""; position: absolute; left: -13px; top: 21px;
  border: 7px solid transparent; border-right-color: var(--border);
}
.teach-bar .teach-text::after {
  content: ""; position: absolute; left: -11px; top: 22px;
  border: 6px solid transparent; border-right-color: var(--surface);
}

.example { margin: 10px 0; padding: 10px 14px; border-radius: var(--radius-inline); background: var(--surface); border: 1px solid var(--border); }
.example .en { font-weight: 650; font-size: 1.25rem; line-height: 1.65; }
.example .zh { color: var(--ink-muted); margin-top: 2px; }

table.grid { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 0.875rem; }
table.grid th, table.grid td { border: 1px solid var(--lavender); padding: 7px 9px; text-align: left; }
table.grid th { background: rgba(233, 222, 255, 0.42); }
table.grid tbody tr:nth-child(even) { background: rgba(233, 222, 255, 0.18); }
.table-wrap { overflow-x: auto; }

/* ── 课内视觉减负（P2）：只在 .step-host 内生效，门面四页观感与高度 floor 不受影响 ──
   盒子收编：课内只留 scene（场景色块）、rule-box（唯一高亮主盒）、memo-card（收尾参考盒）
   与 teach-text 对话气泡；例句与引导发现改用留白分组（Law of Proximity 替代 Common Region），
   Von Restorff 的那一份高亮全部让给 rule-box。教学大块纵向节奏统一到 26px 档。 */
.step-host .example {
  margin-block: 16px; padding: 0;
  border: 0; background: transparent; border-radius: 0;
}
.step-host .example .en { margin-block: 0; }
.step-host .example .zh { margin-block: 2px 0; }

.step-host details.discover {
  margin-block: 26px; padding: 0;
  border: 0; background: transparent; border-radius: 0;
}
.step-host details.example-fold { margin-block-start: 8px; }
/* 想一想的摘要即触发器：给按钮手感，答案贴在按钮下方 */
.step-host details.discover > summary {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 18px; margin-bottom: 12px;
  border: 1.5px solid var(--brand-strong); border-radius: var(--radius-row);
  background: var(--surface); color: var(--brand-strong); font-weight: 700;
  list-style: none;
}
.step-host details.discover > summary::-webkit-details-marker { display: none; }
.step-host details.discover > summary::marker { content: none; }
.step-host details.discover > summary::after {
  content: "▾"; font-size: 0.72rem; line-height: 1;
}
.step-host details.discover[open] > summary::after { content: "▴"; }

.step-host .scene,
.step-host .teach-bar,
.step-host .rule-box,
.step-host .table-wrap,
.step-host .memo-card { margin-block: 26px; }
.step-host .scene { padding-block-start: 14px; }
.step-host .table-wrap table.grid { margin-block: 0; }

/* 音频：每位一个播放/暂停切换按钮 + 状态文字 */
.player { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.player button {
  min-height: 44px; min-width: 64px; border: 1.5px solid var(--brand-strong);
  background: var(--surface); color: var(--brand-strong); border-radius: var(--radius-pill);
  padding: 4px 16px; cursor: pointer; font-weight: 650;
}
.player .status { font-size: 0.875rem; color: var(--ink-muted); }

/* 播放设置：全页唯一的「慢一点」开关 */
.pace-control { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pace-control button {
  min-height: 44px; min-width: 88px; border: 1.5px solid var(--border);
  background: var(--surface); color: var(--ink); border-radius: var(--radius-pill);
  padding: 2px 16px; cursor: pointer;
}
.pace-control button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--surface); font-weight: 650; }

/* 连着听（lesson-listen-001）：幕内容区顶部的次级按钮；正在念的条目淡紫底加品牌色左缘线 */
.listen-row { display: flex; margin-block: 8px 12px; }
.memo-card .listen-row { margin: 8px 16px 4px; }
.reading-now {
  background: var(--lavender);
  box-shadow: inset 0 0 0 2px var(--lavender-deep);
  border-radius: var(--radius-row);
}

/* 练习 */
.quiz-item { margin: 16px 0; }
.quiz-item .stem { font-weight: 650; font-size: 1.08rem; line-height: 1.7; white-space: pre-line; }
.underline-mark { border-bottom: 1px solid var(--ink); }
.quiz-options { display: grid; gap: 9px; margin: 12px 0; }
.quiz-options button {
  text-align: left; padding: 11px 16px; min-height: 44px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border); background: var(--surface); cursor: pointer;
}
.quiz-options .option-key { font-weight: 800; color: var(--brand-strong); margin-inline-end: 8px; }
.quiz-options button[data-picked="right"] { border-color: var(--ok); background: var(--mint); }
.quiz-options button[data-picked="wrong"] { border-color: var(--bad); background: var(--bad-soft); }
.quiz-options button .verdict-glyph { font-weight: 800; margin-inline-end: 3px; }
.quiz-options button[data-picked="right"] .verdict-glyph { color: var(--ok); }
.quiz-options button[data-picked="wrong"] .verdict-glyph { color: var(--bad); }
/* 判分后按钮 disabled。浏览器默认会把禁用文字压到三成不透明度，对比度远低于 AA，
   孩子答完就看不清自己选的是哪一项。母本继承的既有缺陷，2026-08-20 实测确认后修正。 */
.quiz-options button:disabled { cursor: default; color: var(--ink); }
/* 配对题（连线题）：左右两栏点选成对。不做拖拽，孩子在触屏上拖不准。
   轨道写 minmax(0, 1fr) 不写裸 1fr，长词才不会把栏撑破。窄容器下改上下两栏。 */
.quiz-match { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 12px 0; container-type: inline-size; }
.quiz-match-col { display: grid; gap: 8px; align-content: start; }
.quiz-match-item {
  text-align: left; padding: 11px 16px; min-height: 44px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border); background: var(--surface); cursor: pointer;
  display: grid; gap: 4px;
}
.quiz-match-item[aria-pressed="true"] { border-color: var(--brand); background: var(--lavender); }
.quiz-match-item[data-paired="yes"] { border-color: var(--brand-strong); }
.quiz-match-item[data-used="yes"] { opacity: 0.55; cursor: default; }
.quiz-match-mate { color: var(--brand-strong); font-weight: 720; }
.quiz-match-right { color: var(--bad); }
.quiz-match-item[data-picked="right"] { border-color: var(--ok); background: var(--mint); }
.quiz-match-item[data-picked="wrong"] { border-color: var(--bad); background: var(--bad-soft); }
.quiz-match-item[data-picked="right"] .verdict-glyph { color: var(--ok); }
.quiz-match-item[data-picked="wrong"] .verdict-glyph { color: var(--bad); }
/* 判分后按钮 disabled，但题面必须照样看得清：浏览器默认会把禁用文字压到三成不透明度，
   对比度远低于 AA，孩子看不清自己刚做的是哪道。显式取回正文色。 */
.quiz-match-item:disabled { cursor: default; opacity: 1; color: var(--ink); }
/* 断点用 rem 不用 px：本站正文下限 18px，rem 断点会跟着字号一起缩放；
   另外设计系统门的 track-no-raw-width 数的就是裸 px 的 max-width。 */
@container (max-width: 28rem) { .quiz-match { grid-template-columns: minmax(0, 1fr); } }
.quiz-blank input { font: inherit; padding: 9px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); min-width: 10ch; max-width: 100%; }
.quiz-fragments { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.quiz-fragments li { padding: 5px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); }
.quiz-selfcheck { margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-inline); background: var(--lavender); }
.quiz-selfcheck-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.verdict { font-weight: 720; }
.verdict.ok { color: var(--ok); }
.verdict.bad { color: var(--bad); }

/* 课完成收束面板：日光黄重点面板，克制无动画 */
.celebration-panel {
  background: var(--sun); border-color: rgba(23, 19, 31, 0.18);
  border-radius: var(--radius-card); padding: clamp(24px, 3vw, 34px);
  text-align: center;
}
.celebration-panel h2 { margin-top: 0; }
.celebration-panel .slot-figure img { max-width: 240px; }
.celebration-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.relearn-block { border-top: 1px solid rgba(23, 19, 31, 0.22); margin-top: 16px; padding-top: 12px; }

/* 底部悬浮坞（总纲 §2.3、DESIGN.md §4.1）：触控档主导航第二形态。
   宽屏基础态不挂坞；1120 以下转入坞，页头胶囊导航让位只留品牌与考区徽章。
   层序在内容之上、弹层之下（z-index 30 低于遮罩 50 与术语气泡 60）。
   与步进器互斥：body.has-stepbar 时整坞隐藏只留步进器底栏，任一视口最多一个固定底栏。
   main 内衬两条规则同权重：本块位于 .step-bar 块之前，其后的 body.has-stepbar main
   规则在源序上胜出；坞挂载脚本同步移除 has-dock 类，双保险不依赖任一单层。 */
.dock-nav { display: none; }
@media (width < 1120px) {
  .dock-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    position: fixed;
    inset-inline: 0;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    z-index: 30;
    width: min(100% - 12px, 45rem);
    margin-inline: auto;
    padding: 4px;
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 93%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius-row);
    box-shadow: var(--shadow-soft);
  }
  /* 坞项：图标在上、文字在下（UI 重设计阶段一） */
  .dock-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 56px;
    padding: 6px;
    border-radius: var(--radius-row);
    text-decoration: none;
    color: var(--ink-muted);
    font-size: var(--type-label);
    font-weight: 650;
    white-space: nowrap;
  }
  .dock-nav a[aria-current="page"] {
    background: var(--lavender);
    color: var(--brand);
    font-weight: 720;
  }
  .site-header nav { display: none; }
  /* 胶囊导航让位后页头网格只剩两列：品牌居左、身份胶囊居右（原三列网格里它会落进中间列） */
  .site-header { grid-template-columns: 1fr auto; }
  body.has-dock main { padding-bottom: 96px; }
  body.has-dock .site-footer { padding-bottom: 72px; }
}
body.has-stepbar .dock-nav { display: none; }

/* 分步学习流 */
.lesson-top { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.lesson-top, .step-host { max-inline-size: 48rem; margin-inline: auto; }
.step-host { transition: var(--motion-feedback); }
.step-host.step-enter-next { transform: translateX(12px); }
.step-host.step-enter-prev { transform: translateX(-12px); }
.step-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  background: var(--canvas); border-top: 1px solid var(--border);
  padding: 10px clamp(15px, 3vw, 28px) calc(10px + env(safe-area-inset-bottom, 0px));
}
.step-track { position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--lavender); }
.step-track-fill {
  height: 100%; inline-size: 100%; background: var(--brand);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
}
.step-bar-inner {
  width: min(100% - 8px, var(--content)); margin-inline: auto;
  display: flex; align-items: center; gap: 12px;
}
.step-bar .step-pos { font-size: 0.875rem; color: var(--ink-muted); margin-inline: auto; }
body.has-stepbar main { padding-bottom: 130px; }
/* 页脚让位固定步进栏：坞有 has-dock 让位规则，步进栏此前漏配，滚到底页脚被栏盖住 67px（2026-08-20 实测）。 */
body.has-stepbar .site-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
.step-dots { display: flex; gap: 6px; flex-wrap: wrap; }
  .step-dots .dot { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--lavender); }
.step-dots .dot.now { background: var(--brand); }
.step-dots .dot.done { background: var(--mint); }

/* 槽位插画 */
.slot-figure { margin: 0; text-align: center; }
.slot-figure img { max-width: min(280px, 60%); height: auto; }
.slot-figure.wide img { max-width: min(520px, 100%); }


.slot-figure[class*="illustration-frame-"] {
  width: 100%; margin-inline: auto; overflow: hidden; background: transparent;
}
.slot-figure.illustration-frame-hero { max-width: 560px; aspect-ratio: 16 / 10; }
.slot-figure.illustration-frame-panel { max-width: 560px; aspect-ratio: 4 / 3; }
.slot-figure.illustration-frame-card { max-width: 300px; aspect-ratio: 1 / 1; }
.slot-figure[class*="illustration-frame-"] img {
  width: 100%; height: 100%; max-width: none; object-fit: contain; object-position: center center; display: block;
}


/* 首访引导 */
.onboard-mask { position: fixed; inset: 0; background: rgba(23, 19, 31, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.onboard-panel { background: var(--canvas); border-radius: var(--radius-hero); max-width: 460px; width: 100%; padding: clamp(24px, 4vw, 34px); max-height: 90vh; overflow: auto; }
.choice-grid { display: grid; gap: 10px; margin: 12px 0; }

/* 地图：章节轻量分区（不装卡），条目单行 */
.map-chapter { margin: 0; padding: clamp(18px, 2.6vw, 28px) 0; border-top: 1px solid var(--border); }
details.map-chapter > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  padding: 8px 12px; margin-inline: -12px; border-radius: var(--radius-row);
  transition: background-color 180ms cubic-bezier(0.2, 0, 0, 1);
}
/* 展开控件：淡紫小方块内一枚箭头，展开态转 90 度；配色沿用 .tag 的淡紫底墨字组合 */
details.map-chapter > summary::before {
  content: "▸"; flex: 0 0 32px; width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--lavender); color: var(--ink);
  border-radius: var(--radius-row);
  font-size: 1.45rem; line-height: 1;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1),
              background-color 180ms cubic-bezier(0.2, 0, 0, 1);
}
details.map-chapter[open] > summary::before {
  transform: rotate(90deg); background: var(--lavender-deep);
}
details.map-chapter > summary::-webkit-details-marker { display: none; }
details.map-chapter > summary::marker { content: none; }

.chapter-toggle-all { flex: 0 0 auto; margin-inline-start: auto; }
.map-chapter:first-of-type { border-top: 0; }
.map-chapter-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.chapter-chip {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  background: var(--brand); color: #FFFFFF;
  border-radius: var(--radius-row);
  font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em;
}
.map-chapter-head > .map-chapter-title { min-width: 0; flex: 1 1 60%; }
.map-chapter-head h2 { margin: 0; }
.map-chapter-head .chapter-summary { margin-inline-start: auto; white-space: nowrap; }
.map-entries { display: grid; gap: 6px; margin-top: 10px; }
.map-entry { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: center; padding: 7px 14px; border-radius: var(--radius-row); background: var(--surface); border: 1px solid var(--border); }
.map-entry a { overflow-wrap: anywhere; min-height: 44px; display: flex; align-items: center; }
.map-entry .entry-lesson { grid-column: 2; overflow-wrap: anywhere; }
.mastery-mark { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-entry .m-dot { flex: 0 0 12px; height: 12px; border-radius: var(--radius-pill); background: var(--lavender); }
.map-entry .m-dot.m2 { background: var(--sun); }
.map-entry .m-dot.m3 { background: var(--mint); }
.coverage-banner { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.coverage-num { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 820; color: var(--brand-strong); letter-spacing: -0.045em; }
.map-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-block: 24px 28px; padding: 12px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-panel);
}
.chapter-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chapter-jump-label { flex: 0 0 auto; color: var(--brand-strong); font-weight: 720; }
.chapter-jump-select {
  font: inherit; min-height: 44px; padding: 8px 14px; max-inline-size: 100%;
  border: 1.5px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink);
}
.map-chapter, .cloze-chapter-group { scroll-margin-top: 16px; }

/* 课程目录（两层折叠）：大类一层、小节一层，收起时一行一个，页高不跟课数走 */
.course-directory { display: grid; gap: 10px; margin-top: 14px; }
.course-domain { border: 1px solid var(--border); border-radius: var(--radius-row); background: var(--surface); padding: 4px 16px; } /* 收起时只有一行高，圆角取行档才不超短边四分之一（判卷 ⑧） */
.course-domain > summary {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center;
  min-height: 52px; padding: 6px 2px; cursor: pointer; list-style: none;
  border-radius: var(--radius-row);
}
.course-domain > summary::-webkit-details-marker { display: none; }
.course-domain > summary::marker { content: none; }
/* 大类行的展开记号：与章行同一枚箭头方块，收起时孩子和家长都看得出这一行能点开（DEC-023） */
.course-domain > summary::before {
  content: "▸"; flex: 0 0 32px; width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--lavender); color: var(--ink);
  border-radius: var(--radius-row);
  font-size: 1.45rem; line-height: 1;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1),
              background-color 180ms cubic-bezier(0.2, 0, 0, 1);
}
.course-domain[open] > summary::before { transform: rotate(90deg); background: var(--lavender-deep); }
.course-domain-name { font-weight: 780; color: var(--brand-strong); font-size: 1.14rem; letter-spacing: -0.02em; }
.course-domain > summary .small { margin-inline-start: auto; }
.course-domain .map-chapter { padding-block: 6px; }
.course-domain .map-chapter > summary { min-height: 48px; }
.course-chapter-name { font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .course-domain > summary:hover { background: var(--hero-soft); }
}

/* 地图筛选条：全局控件，登记 data-ui-chrome，状态只存内存 */
.map-filter { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.map-filter-group { display: flex; flex-wrap: wrap; gap: 6px; }
.map-filter-group button {
  min-height: 40px; padding: 7px 16px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer;
}
.map-filter-group button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #FFFFFF; font-weight: 650; }
.map-filter-search { display: inline-flex; align-items: center; gap: 8px; }
.map-filter-search input {
  font: inherit; padding: 8px 16px; min-height: 40px; min-width: 16ch; max-width: 100%;
  border: 1.5px solid var(--border); border-radius: var(--radius-pill); background: var(--canvas);
}
.map-filter-count { color: var(--ink-muted); }
.map-empty-note { margin: 0 0 18px; padding: 14px 18px; }
@media (hover: hover) and (pointer: fine) {
  .map-entry:hover { background: rgba(233, 222, 255, 0.35); }
  details.map-chapter > summary:hover { background: rgba(233, 222, 255, 0.4); }
  details.map-chapter > summary:hover::before { background: var(--lavender-deep); }
}
@media (min-width: 761px) {
  .map-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 7px; }
  .map-entry { min-height: 44px; gap: 0 10px; padding-block: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .map-entry .entry-lesson { grid-column: auto; text-align: end; max-inline-size: 22ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* 摸底与跳级测 */
.assessment-list { display: grid; gap: 8px; padding: 0; list-style: none; }
.assessment-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 0;
}
.assessment-row.is-mastered { background: rgba(201, 243, 211, 0.5); }
.assessment-row.is-reinforce { background: rgba(255, 201, 74, 0.18); }
.assessment-row.is-learn { background: rgba(233, 222, 255, 0.42); }

/* 考场语篇 */
.passage-list { display: grid; gap: 12px; }
.passage-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-inline); }
.cloze-card-grid { display: block; }
.cloze-chapter-heading h2 { margin-top: 0; }
@media (min-width: 1024px) {
  .cloze-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: start; }
  .cloze-chapter-group { display: contents; }
  .cloze-chapter-heading { min-width: 0; padding: 24px; background: var(--lavender); border: 1px solid var(--lavender-deep); border-radius: var(--radius-panel); grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
  .cloze-chapter-heading h2 { margin: 0; }
  .cloze-chapter-heading p { margin: 0; }
  .cloze-chapter-group > .passage-list { display: contents; }
  .cloze-chapter-group > .passage-list > .passage-card { min-width: 0; margin: 0; }
}
.passage-text {
  background: rgba(233, 222, 255, 0.28); border-radius: var(--radius-inline);
  padding: 18px; margin: 14px 0; font-size: 1.05rem; line-height: 2.15;
  overflow-wrap: anywhere;
}
.cloze-blank-wrap {
  display: inline-block; white-space: nowrap;
  vertical-align: baseline; margin: 0 2px;
}
.cloze-blank-no { font-size: 0.75rem; line-height: 1.2; color: var(--ink-muted); margin-inline-end: 3px; }
.cloze-blank-input {
  border: none; border-bottom: 2px solid var(--brand);
  background: transparent; font: inherit; font-size: 1.05rem;
  padding: 2px 4px; min-width: 4ch; max-width: 16ch;
  border-radius: 0; text-align: center;
}
.cloze-intro-blank { border-bottom: 2px solid var(--brand); font-weight: 650; padding: 0 2px; }
.cloze-blank-input:focus { border-bottom-color: var(--brand-strong); border-bottom-width: 3px; margin-bottom: -1px; }
.cloze-blank-input:disabled { opacity: 1; background: transparent; }
.cloze-blank-input-right { border-bottom-color: var(--ok); }
.cloze-blank-input-wrong { border-bottom-color: var(--bad); }
.cloze-blank-wrap .verdict-glyph { font-size: 0.82rem; font-weight: 800; margin-top: 1px; }
.cloze-blank-input-right ~ .verdict-glyph { color: var(--ok); }
.cloze-blank-input-wrong ~ .verdict-glyph { color: var(--bad); }
.cloze-blank-hint { font-size: 0.75rem; color: var(--bad); margin-top: 1px; white-space: nowrap; }
.cloze-actions { margin-top: 16px; display: flex; gap: 10px; }

/* 语篇判分解析区 */
.cloze-explain-box {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-inline);
  padding: 14px 18px;
  background: rgba(233, 222, 255, 0.25);
}
.cloze-explain-box h3 { margin-top: 0; }
.cloze-explain-row { margin: 6px 0; line-height: 1.6; }
.passage-score-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
details.score-detail { border: 1.5px dashed var(--brand); border-radius: var(--radius-inline); padding: 12px 16px; margin: 14px 0; background: var(--surface); }
details.score-detail summary { cursor: pointer; font-weight: 650; color: var(--brand-strong); min-height: 32px; }
details.score-detail[open] summary { margin-bottom: 6px; }

/* 家长看板 */
.board-grid { display: grid; gap: 17px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 16px; }
.stat { background: var(--surface); border-radius: var(--radius-row); border: 1px solid var(--border); padding: 12px 18px; min-width: 120px; flex: 1 1 140px; }
.stat .num { font-size: 1.4rem; font-weight: 820; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
progress.bar { appearance: none; display: block; width: 100%; height: 12px; border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--lavender); }
progress.bar::-webkit-progress-bar { background: var(--lavender); }
progress.bar::-webkit-progress-value { background: var(--brand); }
progress.bar::-moz-progress-bar { background: var(--brand); }
.chapter-progress-list { display: grid; gap: 0; margin-top: 18px; }
.chapter-progress { padding-block: 12px; border-top: 1px solid var(--border); }
/* 全站进度的大类折叠件沿用课程目录那一套（.course-domain），只多两笔：
   汇总条形在汇总行里另起一行占满宽，收起时也一眼看得到；章列表贴着汇总行排。 */
.course-domain > summary > .bar { flex-basis: 100%; margin-block-start: 2px; }
.progress-domain .chapter-progress-list { margin-top: 10px; }
.chapter-progress-heading { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; }
.chapter-progress h3 { margin: 0; font-size: 1rem; letter-spacing: 0; }
.chapter-progress-stats { white-space: nowrap; }
.board-wrong .slot-figure.illustration-frame-card { max-width: 120px; }
/* 家长看板两格（ENG-PARENTS-002）：这一周学了什么与下一步建议，行高一律 44px 命中区 */
.board-week-list, .board-next-list { display: grid; margin-top: 12px; }
.board-week-row, .board-next-row {
  display: flex; align-items: center; min-height: 44px;
  padding: 2px 2px; border-top: 1px solid var(--border);
}
.board-next-row { color: var(--brand-strong); font-weight: 650; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .board-next-row:hover { text-decoration: underline; }
}
.region-info-grid { display: block; }
/* 家长指引（PARENT-001）：一篇一个折叠件，默认收起只露题目一行；展开记号与课程目录同一枚箭头方块 */
.pguide-item { border-top: 1px solid var(--border); }
.pguide-item > summary {
  display: flex; gap: 14px; align-items: center;
  min-height: 52px; padding: 6px 2px; cursor: pointer; list-style: none;
  border-radius: var(--radius-row);
  font-weight: 650; color: var(--brand-strong);
}
.pguide-item > summary::-webkit-details-marker { display: none; }
.pguide-item > summary::marker { content: none; }
.pguide-item > summary::before {
  content: "▸"; flex: 0 0 32px; width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--lavender); color: var(--ink);
  border-radius: var(--radius-row);
  font-size: 1.45rem; line-height: 1;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1),
              background-color 180ms cubic-bezier(0.2, 0, 0, 1);
}
.pguide-item[open] > summary::before { transform: rotate(90deg); background: var(--lavender-deep); }
.pguide-body { padding: 2px 2px 14px 48px; }
.pguide-body p { margin: 0 0 10px; line-height: 1.8; }
.pguide-body p:last-child { margin-bottom: 0; }
@media (hover: hover) and (pointer: fine) {
  .pguide-item > summary:hover { background: var(--hero-soft); }
}

/* §7 响应式 */
@media (max-width: 430px) {
  .celebration-actions, .cloze-actions, .quiz-selfcheck-actions, .today-next { flex-direction: column; align-items: stretch; }
  .celebration-actions .btn, .cloze-actions .btn, .quiz-selfcheck-actions .btn, .today-next .btn { width: 100%; }
}
@media (min-width: 768px) {
  .site-header { min-height: 88px; }
  .board-grid { grid-template-columns: 1fr 1fr; }
  .board-grid .span2 { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "cover assessment"
      "passage time"
      "week next"
      "progress progress"
      "wrong wrong"
      "pguide pguide"
      "worksheet worksheet"
      "promise promise";
    gap: 28px;
  }
  .board-grid > .board-cover { grid-area: cover; }
  .board-grid > .board-assessment { grid-area: assessment; }
  .board-grid > .board-passage { grid-area: passage; }
  .board-grid > .board-time { grid-area: time; }
  .board-grid > .board-week { grid-area: week; } /* ENG-PARENTS-002：排在最近四周之后 */
  .board-grid > .board-next { grid-area: next; }
  .board-grid > .board-progress { grid-area: progress; }
  .board-grid > .board-wrong { grid-area: wrong; }
  .board-grid > .board-promise { grid-area: promise; }
  .board-grid > .pguide { grid-area: pguide; } /* PARENT-001：给家长的说明，排在 closing 浅紫面板之前 */
  .board-grid > .board-worksheet { grid-area: worksheet; } /* ENG-WORKSHEET-001：打印练习纸入口，排在 closing 面板之前 */
  .chapter-progress-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .region-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; align-items: start; }
  .region-info-grid > .paper-card { margin: 0; }
}
@media (max-width: 760px) {
  :root { --radius-hero: 34px; --radius-shell: 34px; }
  .site-shell { width: min(100% - 12px, 1540px); margin-block: 6px; border-radius: var(--radius-shell); min-height: calc(100vh - 12px); }
  main { width: min(100% - 30px, var(--content)); }
  /* 窄档正文轨改留 15px，页眉页脚跟着同一个数走，别处不必再各写一份 */
  .site-header, .site-footer { padding-inline: 15px; }
  .onboard-panel { border-radius: var(--radius-hero); }
  .subject-card { border-radius: var(--radius-panel); grid-template-columns: minmax(0, 88px) minmax(0, 1fr); }
  .subject-art .slot-figure.illustration-frame-card { max-width: 88px; }
  .facade-hero .hero-art { min-height: 220px; }
}
@media (max-width: 389px) {
  html { font-size: 15px; }
}
@media (max-width: 340px) {
  h1.display-title { font-size: clamp(2.6rem, 13vw, 3.35rem); line-height: 1.02; letter-spacing: -0.06em; }
  .facade-title { max-inline-size: 100%; }
}

/* §11 动效：只用 --motion-feedback，悬停用能力查询 */
@media (hover: hover) and (pointer: fine) {
  .btn, .user-chip, .quiz-options button, .subject-card { transition: var(--motion-feedback); }
  .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
  .user-chip:hover { transform: translateY(-1px); }
  .subject-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
}

/* 教学反馈动效：用户动作触发、单次；答对轻抬、答错 4px 轻震两次；reduced-motion 全局归零 */
@keyframes pick-right { from { transform: translateY(2px); } to { transform: none; } }
@keyframes pick-wrong {
  0%, 100% { transform: none; }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.quiz-options button[data-picked="right"], .cloze-blank-input-right { animation: pick-right 200ms cubic-bezier(0.2, 0, 0, 1); }
.quiz-options button[data-picked="wrong"], .cloze-blank-input-wrong { animation: pick-wrong 240ms cubic-bezier(0.2, 0, 0, 1); }

/* pressed 态：translateY(1px) 即时反馈，transition 只包 --motion-feedback 族；置于悬停规则之后确保按下生效 */
.btn, .quiz-options button, .map-filter-group button, .pace-control button { transition: var(--motion-feedback); }
.btn:active, .quiz-options button:active, .map-filter-group button:active, .pace-control button:active { transform: translateY(1px); }

/* §11.3 减少动态效果：首次渲染前生效，全局瞬时 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
  .scroll-row { scroll-snap-type: none; }
  @media (hover: hover) and (pointer: fine) {
    .btn:hover { transform: none; }
    .user-chip:hover { transform: none; }
  }
  .btn:active, .quiz-options button:active, .map-filter-group button:active, .pace-control button:active { transform: none; }
}

@media print {
  body { background: #FFFFFF; }
  .site-shell { width: 100%; margin: 0; border-radius: 0; min-height: auto; }
  .site-header, .site-footer, .btn, .step-bar, .pace-control, .no-print, .player, .grammar-tip-pop, .onboard-mask, .dock-nav { display: none !important; }
  .paper-card { box-shadow: none; border-color: #CCCCCC; }
  .chapter-jump { display: none !important; }
  .cloze-card-grid { display: block; }
  .cloze-chapter-group { display: block; }
  .cloze-chapter-group > .passage-list { display: grid; grid-template-columns: 1fr; }
  .cloze-chapter-heading { padding: 0; background: transparent; border: 0; }
  .board-grid { display: block; }
  .board-grid > * { grid-area: auto; }
  .chapter-progress-list { grid-template-columns: 1fr; }
  .region-info-grid { display: block; }
  a { color: var(--ink); text-decoration: none; }
}

/* 考区档案：页面头 + 换考区组合容器（Law of Proximity） */
.region-head-wrap { margin-block-end: clamp(12px, 2vw, 24px); }

/* 换考区：紧凑标签式选择器 */
.region-switch-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}
.region-switch-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.region-switch-btn {
  padding: 4px 14px;
  min-height: 40px;
  font-size: 0.875rem;
}

/* exam 面板：N条说明折叠（Miller's Law + Chunking） */
.exam-notes {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.exam-notes summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--brand-strong);
  font-size: 0.92rem;
}

/* 语法侧重：卡片视觉分组 + 条目轻量分隔（Cognitive Load） */
.focus-card {
  background: rgba(233, 222, 255, 0.12);
}
.grammar-focus-list li {
  padding-block: 8px;
}
.grammar-focus-list li + li {
  border-top: 1px solid var(--border);
}
.grammar-focus-list li strong {
  color: var(--brand-strong);
}

/* 练习区：说明默认折叠（Progressive Disclosure） */
.practice-note {
  margin-bottom: 14px;
}
.practice-note summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--brand-strong);
  font-size: 0.92rem;
}

/* 平台接线：登录页与会话提示条 */
.login-card {
  max-width: 520px;
  margin-inline: auto;
  margin-block: clamp(24px, 6vw, 64px);
}
.login-form {
  display: grid;
  gap: 8px;
  margin-block-start: 18px;
}
.login-form label {
  font-weight: 650;
  color: var(--ink);
}
.login-form input {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-row);
  background: var(--surface);
  color: var(--ink);
}
.login-form input:focus-visible {
  outline: 3px solid var(--brand-strong);
  outline-offset: 2px;
}
.login-form button[type="submit"] {
  margin-block-start: 10px;
  justify-self: start;
}
.login-status:empty { display: none; }
.login-status {
  margin: 0;
  color: var(--brand-strong);
  font-weight: 600;
}
.login-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 18px;
}
.platform-notice {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px clamp(16px, 4vw, 32px);
  background: var(--sun);
  border-top: 1px solid var(--border);
  color: var(--ink);
  font-size: 0.94rem;
}
.platform-notice a {
  font-weight: 650;
  color: var(--brand-strong);
}

/* ── 课程脉络轨（P4）：宽屏左翼的地标导航，窄屏整条不显示 ────────────────
   1280px 是实测阈值而非拍脑袋：main 宽 = min(视口 − 72px, 1200px)，正文列锁死
   48rem，左翼 = (main − 768) / 2。视口 1272px 起 main 才吃满 1200px、左翼才有
   216px，容得下 184px 的轨加 32px 留白；1200px 档左翼只有 180px，放不下。
   取整到 1280px。窄档 display:none，不占文档流宽度，也不会引起横向溢出。 */
.lesson-rail { display: none; }
@media (min-width: 1280px) {
  .lesson-rail-host { position: relative; }
  .lesson-rail {
    display: block;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 184px;
  }
  .lesson-rail-inner {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    max-block-size: calc(100vh - 150px);
  }
  /* 轨头借门面 eyebrow 那套 label 语言（珊瑚短线加小标签），只改间距，不另起装饰。 */
  .lesson-rail .eyebrow { margin: 0 0 18px; gap: 8px; }
  .lesson-rail-list {
    display: grid;
    gap: 4px;
    /* 焦点环是 3px 描边加 4px 偏移，会被这个滚动容器裁掉；向外借 8px 站位再用
       等量内边距补回，条目仍是 184px、右侧 32px 留白不动。 */
    margin: -8px;
    padding: 8px;
    list-style: none;
    min-block-size: 0;
    overflow: auto;
  }
  .lesson-rail-item {
    position: relative;
    inline-size: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    border: 0;
    border-radius: var(--radius-row);
    background: none;
    color: var(--ink-muted);
    font: inherit;
    font-size: var(--type-label);
    line-height: 1.35;
    text-align: start;
    cursor: pointer;
  }
  /* 时间线：每个条目画自己那一段（上下各出 2px 与 4px 条距对接，线不断），
     结点压在线上。走过的一段用完成色，当前条目上半段已走、下半段未走。 */
  .lesson-rail-item::before {
    content: "";
    position: absolute;
    inset-block: -2px;
    inset-inline-start: 15px;
    inline-size: 2px;
    background: var(--border);
  }
  .lesson-rail-list li:first-child .lesson-rail-item::before { inset-block-start: calc(50% - 1px); }
  .lesson-rail-list li:last-child .lesson-rail-item::before { inset-block-end: calc(50% - 1px); }
  .lesson-rail-item.done::before { background: var(--ok); }
  .lesson-rail-item.now::before { background: linear-gradient(var(--ok) 50%, var(--border) 50%); }
  /* 首尾条目那一段整段都在结点的同一侧，不做上下分色。 */
  .lesson-rail-list li:first-child .lesson-rail-item.now::before { background: var(--border); }
  .lesson-rail-list li:last-child .lesson-rail-item.now::before { background: var(--ok); }
  .lesson-rail-dot {
    position: relative;
    flex: 0 0 16px;
    block-size: 16px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    background: var(--lavender);
    color: var(--ok);
    font-size: 0.66rem;
    line-height: 1;
  }
  .lesson-rail-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  @media (hover: hover) and (pointer: fine) {
    .lesson-rail-item:hover { background: var(--hero-soft); color: var(--ink); }
    .lesson-rail-item:hover .lesson-rail-dot { background: var(--lavender-deep); }
    .lesson-rail-item:disabled:hover { background: none; color: var(--ink-muted); }
  }
  .lesson-rail-item.done { color: var(--ink); }
  .lesson-rail-item.done .lesson-rail-dot { background: var(--mint); }
  /* 完成条目未解锁时不只靠透明度说话：结点改空心环，和「未到」的实心点分得开。 */
  .lesson-rail-item:disabled { cursor: default; opacity: 0.5; }
  .lesson-rail-item:disabled .lesson-rail-dot {
    background: var(--surface);
    box-shadow: inset 0 0 0 2px var(--lavender-deep);
  }
  .lesson-rail-item.now {
    background: var(--lavender);
    color: var(--brand-strong);
    font-weight: 700;
  }
  .lesson-rail-item.now .lesson-rail-dot {
    background: var(--brand);
    box-shadow: 0 0 0 3px var(--lavender-deep);
  }
  /* 课号无效时的提示行原本贴 main 左缘，会被轨压住；与正文列同宽同心即可。 */
  .lesson-notice { max-inline-size: 48rem; margin-inline: auto; }
}

/* 练一练：货架横滚、完整平铺视图、难度标签页（总纲 §6.8 手法，零色彩事件） */
.practice-head { margin-block: clamp(18px, 3vw, 30px); }
.practice-head .lead { margin-top: 12px; }
.practice-back { margin-top: 10px; }

.practice-shelves { margin-block: clamp(24px, 4vw, 44px); }
.practice-shelf { margin-block-end: clamp(20px, 3vw, 32px); }
.scroll-row-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-block-end: 16px; }
.scroll-row-head h3 { margin: 0; font-size: var(--type-card-title); line-height: 1.18; letter-spacing: -0.045em; }
.shelf-count { color: var(--ink-muted); font-size: var(--type-supporting); font-weight: 500; margin-inline-start: 10px; }
.scroll-row-steppers { display: flex; gap: 8px; }
.stepper-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--brand-strong);
  font-size: var(--type-body); cursor: pointer;
  transition: var(--motion-feedback);
}
@media (hover: hover) and (pointer: fine) {
  .stepper-btn:hover { background: var(--hero-soft); }
}
.scroll-row-wrap { position: relative; }
.scroll-row-wrap::after {
  content: ""; position: absolute; inset: 0 0 0 auto; width: 3.5rem;
  background: linear-gradient(90deg, transparent, var(--canvas));
  pointer-events: none;
}
.scroll-row {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(17rem, 68%);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: 12px;
  scrollbar-width: thin;
}
.scroll-row > a {
  scroll-snap-align: start;
  display: grid; gap: 8px; align-content: start;
  padding: 24px;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink); text-decoration: none;
  transition: var(--motion-feedback);
}
.scroll-row > a strong { font-size: var(--type-card-title); letter-spacing: -0.02em; color: var(--ink); }
.scroll-row > a small { color: var(--ink-muted); font-size: var(--type-supporting); }
@media (hover: hover) and (pointer: fine) {
  .scroll-row > a:hover { border-color: var(--brand); }
}

.practice-all { margin-block: clamp(20px, 3vw, 36px); border-top: 1px solid var(--border); }
.practice-all > summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding-block: 12px;
  font-weight: 700; list-style: none; cursor: pointer;
}
.practice-all > summary::-webkit-details-marker { display: none; }
.practice-all > summary::marker { content: none; }
.practice-all > summary::before {
  content: "▸"; width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--lavender); color: var(--ink);
  border-radius: var(--radius-row);
  transition: var(--motion-feedback);
}
.practice-all[open] > summary::before { transform: rotate(90deg); }
.practice-flat { padding-block: 8px 16px; }
.practice-flat-domain { margin-block: 16px; }
.practice-flat-domain-name {
  margin: 0 0 6px; font-size: var(--type-label); line-height: 1.3;
  font-weight: 720; letter-spacing: 0.04em; color: var(--brand-strong);
}
.practice-flat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding-block: 10px;
  border-top: 1px solid var(--border);
  color: var(--ink); text-decoration: none;
}
.practice-flat-count { color: var(--ink-muted); font-size: var(--type-supporting); font-variant-numeric: tabular-nums; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .practice-flat-row:hover .practice-flat-title { color: var(--brand-strong); }
}

.tabs [role="tablist"] { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--border); }
.tabs [role="tab"] {
  min-height: 44px; padding: 0 12px;
  border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--ink-muted); font-weight: 700;
  cursor: pointer;
}
.tabs [role="tab"][aria-selected="true"] { color: var(--brand-strong); border-bottom-color: var(--brand); }
@media (hover: hover) and (pointer: fine) {
  .tabs [role="tab"]:hover { color: var(--brand-strong); }
}
.tabs [role="tabpanel"] { padding-block: 24px; }

.practice-set { margin-top: 16px; }
.practice-again { margin-top: 20px; }
.practice-wrong { margin-block: clamp(24px, 4vw, 44px); }
.practice-wrong-btn { margin-top: 8px; }

/* 试卷室：货架目录与成卷作答（与练一练同手法，零色彩事件） */
.shelf { margin-block-end: clamp(20px, 3vw, 32px); }
.practice-papers-link { margin-top: 12px; }
.practice-papers-link a {
  color: var(--brand-strong); font-weight: 650;
  padding-block: 8px;
}
.papers-head { margin-block: clamp(18px, 3vw, 30px); }
.papers-head .lead { margin-top: 12px; }
.papers-back { margin-top: 10px; }
.papers-shelves { margin-block: clamp(24px, 4vw, 44px); }
.papers-badge {
  justify-self: start;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font-size: var(--type-label);
  font-weight: 600;
}
/* 试卷室货架按辑折叠（ENG-PAPERS-003）：每辑一件原生 details，题头辑名加卷数，
   展开是该辑的横滚货架；chevron 与「看全部卷子」同一记号，打印前全展开走 ui.js 既有机制。 */
.papers-series { border-top: 1px solid var(--border); }
.papers-series-summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding-block: 12px;
  font-weight: 700; list-style: none; cursor: pointer;
}
.papers-series-summary::-webkit-details-marker { display: none; }
.papers-series-summary::marker { content: none; }
.papers-series-summary::before {
  content: "▸"; width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--lavender); color: var(--ink);
  border-radius: var(--radius-row);
  transition: var(--motion-feedback);
}
.papers-series[open] > .papers-series-summary::before { transform: rotate(90deg); }
.papers-series-count { color: var(--ink-muted); font-size: var(--type-supporting); font-weight: 500; }
/* 题头已带辑名与卷数，辑内货架自带的同款标题去重，只留两枚步进按钮靠右。 */
.papers-series .scroll-row-head { justify-content: flex-end; margin-block-end: 12px; }
.papers-series .scroll-row-head h3 { display: none; }
.papers-all { margin-block: clamp(20px, 3vw, 36px); border-top: 1px solid var(--border); }
.papers-all > summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding-block: 12px;
  font-weight: 700; list-style: none; cursor: pointer;
}
.papers-all > summary::-webkit-details-marker { display: none; }
.papers-all > summary::marker { content: none; }
.papers-all > summary::before {
  content: "▸"; width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--lavender); color: var(--ink);
  border-radius: var(--radius-row);
  transition: var(--motion-feedback);
}
.papers-all[open] > summary::before { transform: rotate(90deg); }
.papers-flat { padding-block: 8px 16px; }
.papers-flat-series { margin-block: 16px; }
.papers-flat-series-name {
  margin: 0 0 6px; font-size: var(--type-label); line-height: 1.3;
  font-weight: 720; letter-spacing: 0.04em; color: var(--brand-strong);
}
.papers-flat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding-block: 10px;
  border-top: 1px solid var(--border);
  color: var(--ink); text-decoration: none;
}
.papers-flat-title { min-width: 0; }
.papers-flat-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.papers-flat-count { color: var(--ink-muted); font-size: var(--type-supporting); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .papers-flat-row:hover .papers-flat-title { color: var(--brand-strong); }
}
.papers-section { margin-block: clamp(24px, 4vw, 40px); }
.papers-section-head {
  margin: 0 0 14px;
  font-size: var(--type-card-title);
  letter-spacing: -0.02em;
}
.papers-passage {
  margin-block-end: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-inline);
  background: var(--surface);
  font-size: var(--type-body);
  line-height: 1.7;
  white-space: pre-line;
}
/* 练一练的共用语篇（ENG-QUIZ-002）：与 .papers-passage 同一套视觉，类名分开挂 */
.quiz-passage {
  margin-block: 4px 16px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-inline);
  background: var(--surface);
  font-size: var(--type-body);
  line-height: 1.7;
  white-space: pre-line;
}
.papers-summary {
  margin-block: clamp(24px, 4vw, 44px);
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.papers-summary h2 { margin: 0 0 10px; font-size: var(--type-card-title); }
.papers-again { margin-top: 14px; }

/* 词表：目录货架、词卡网格、附表（与练一练同手法，零色彩事件；不规则动词页按 §4.2 用一件重点面板） */
.vocab-head { margin-block: clamp(18px, 3vw, 30px); }
.vocab-head .lead { margin-top: 12px; }
.vocab-head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vocab-head-row h1 { margin: 0; }
.vocab-ipa-toggle { flex-shrink: 0; min-height: 44px; }
.vocab-back { margin-top: 10px; }

.vocab-pos-help { margin-top: 14px; }
.vocab-pos-help summary {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 4px;
  font-weight: 650; color: var(--brand-strong); cursor: pointer;
}
.vocab-pos-help p { margin-block: 4px 8px; color: var(--ink-muted); font-size: var(--type-supporting); line-height: 1.8; }

.vocab-shelves { margin-block: clamp(24px, 4vw, 44px); }

.vocab-all { margin-block: clamp(20px, 3vw, 36px); border-top: 1px solid var(--border); }
.vocab-all > summary {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding-block: 12px;
  font-weight: 700; list-style: none; cursor: pointer;
}
.vocab-all > summary::-webkit-details-marker { display: none; }
.vocab-all > summary::marker { content: none; }
.vocab-all > summary::before {
  content: "▸"; width: 24px; height: 24px;
  display: grid; place-items: center;
  background: var(--lavender); color: var(--ink);
  border-radius: var(--radius-row);
  transition: var(--motion-feedback);
}
.vocab-all[open] > summary::before { transform: rotate(90deg); }
.vocab-flat { padding-block: 8px 16px; }
.vocab-flat-group { margin-block: 16px; }
.vocab-flat-group-name {
  margin: 0 0 6px; font-size: var(--type-label); line-height: 1.3;
  font-weight: 720; letter-spacing: 0.04em; color: var(--brand-strong);
}
.vocab-flat-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding-block: 10px;
  border-top: 1px solid var(--border);
  color: var(--ink); text-decoration: none;
}
.vocab-flat-count { color: var(--ink-muted); font-size: var(--type-supporting); font-variant-numeric: tabular-nums; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .vocab-flat-row:hover .vocab-flat-title { color: var(--brand-strong); }
}

/* 主题词卡：chip-grid 是不可点的自足卡（家族网格契约里 .card-grid 才要求整卡链接） */
.vocab-chips {
  margin-block: clamp(20px, 3vw, 32px);
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}
.vocab-chip {
  padding: 20px 22px;
  border: 1px solid var(--border); border-radius: var(--radius-inline);
  background: var(--surface);
}
.vocab-chip p { margin: 0; }
.vocab-chip-head { line-height: 1.4; }
.vocab-chip-word { font-size: var(--type-card-title); letter-spacing: -0.02em; color: var(--ink); }
.vocab-chip-forms { color: var(--ink-muted); font-size: var(--type-supporting); }
.vocab-chip .vocab-ipa { color: var(--ink-muted); font-size: var(--type-supporting); margin-inline-start: 8px; }
.vocab-chip-syl { margin-top: 6px; color: var(--brand-strong); font-weight: 650; }
.vocab-chip-sense { margin-top: 6px; }
.vocab-chip-ex-en { margin-top: 10px; }
.vocab-chip-ex-zh { color: var(--ink-muted); font-size: var(--type-supporting); }

/* 附表 */
.vocab-table-panel { margin-block: clamp(20px, 3vw, 32px); }
.vocab-table-duo { display: grid; gap: 18px; margin-block: clamp(20px, 3vw, 32px); }
.vocab-table-duo .paper-card { margin: 0; }
@media (min-width: 1024px) {
  .vocab-table-duo { grid-template-columns: 1fr 1fr; align-items: start; }
}
.vocab-table-block + .vocab-table-block { margin-top: 22px; }
.vocab-subhead { margin: 0 0 4px; font-size: var(--type-card-title); letter-spacing: -0.02em; }
.vocab-notice { margin-block: clamp(16px, 2.5vw, 24px) 0; }
.vocab-notice p { margin-block: 0; }
.vocab-forms-help { margin-block: 16px; }
.vocab-forms-help summary {
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 4px;
  font-weight: 650; color: var(--brand-strong); cursor: pointer;
}
.vocab-forms-help p { margin-block: 4px 8px; color: var(--ink-muted); font-size: var(--type-supporting); line-height: 1.8; }

/* 年级引导页与学习台本学期地图（ENG-GUIDE-001）：新类一律 guide- 与 semester- 前缀，只增不删 */
.guide-head { margin-block: clamp(24px, 5vw, 48px); }
.guide-head h1 { margin-block: 4px 10px; }
.guide-head .lead { margin-block: 0; max-inline-size: var(--track-reading); }
.guide-steps { margin-block: clamp(24px, 5vw, 56px); max-inline-size: var(--track-reading); }
.guide-steps h2 { margin: 0 0 8px; }
.guide-step-desc { margin: 0 0 4px; color: var(--ink-muted); }
.guide-choice { display: grid; gap: 10px; margin: 14px 0 4px; }
.guide-choice .btn { min-height: 52px; justify-content: flex-start; white-space: normal; text-align: start; }
.guide-choice .btn .tag { margin-inline-start: 10px; }
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block: 18px 0; }
.guide-unit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 14px 4px; }
.guide-unit input {
  width: 8rem; min-height: 44px; padding: 8px 12px;
  font-size: var(--type-body); color: var(--ink);
  border: 1px solid var(--border); border-radius: var(--radius-inline);
  background: var(--surface);
}
.guide-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block: 14px 4px; }
.guide-summary-text { margin: 0; font-weight: 700; }

.semester-map { padding-block: 24px; }
.semester-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; margin-bottom: 8px; }
.semester-head h2 { margin: 0; }
.semester-guide-meta { margin: 0; color: var(--ink-muted); }
.semester-change {
  min-height: 44px; display: inline-flex; align-items: center;
  font-weight: 700; color: var(--brand-strong);
}
.semester-note { margin: 0 0 4px; color: var(--ink-muted); }
.semester-group-title { margin: 16px 0 6px; font-size: var(--type-supporting); font-weight: 720; color: var(--ink-muted); }
.semester-list { display: grid; gap: 8px; }
.semester-row {
  display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 8px 14px; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-row);
}
.semester-pin {
  flex: 0 0 auto; padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: var(--type-label); font-weight: 720; white-space: nowrap;
  background: var(--lavender); color: var(--ink);
}
.semester-pin.pin-done { background: var(--mint); }
.semester-pin.pin-now { background: var(--sun); }
.semester-title { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; font-weight: 640; }
.semester-meta { flex: 0 0 auto; color: var(--ink-muted); font-size: var(--type-label); white-space: nowrap; }
.semester-chevron { flex: 0 0 auto; color: var(--ink-muted); font-size: 1.3rem; line-height: 1; }
.semester-done-toggle { margin-top: 10px; }
@media (hover: hover) and (pointer: fine) {
  .semester-row:hover { border-color: var(--brand); background: var(--hero-soft); }
  .semester-change:hover { color: var(--brand); }
}

/* 复习：今天复习（错题再做一遍、知识卡回看），零色彩事件 */
.review-head { margin-block: clamp(18px, 3vw, 30px); }
.review-head .lead { margin-top: 12px; }
.review-section { margin-block: clamp(24px, 4vw, 44px); }
.review-section h2 { margin-block-end: 12px; }
.review-wrong-group { margin-block: 12px 20px; }
.review-group-row { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.review-group-name { font-weight: 700; }
.review-group-count { color: var(--ink-muted); font-size: var(--type-supporting); font-variant-numeric: tabular-nums; }
.review-group-start { margin-inline-start: auto; }
.review-empty { margin-top: 8px; }
.review-due-list { list-style: none; margin: 0; padding: 0; }
.review-due-row {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding-block: 8px; border-top: 1px solid var(--border);
}
.review-due-name { font-weight: 600; }
.review-due-chapter { color: var(--ink-muted); font-size: var(--type-supporting); margin-inline-end: 8px; }
.review-due-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.review-due-more { margin-top: 12px; }
.review-due-row-fading { opacity: 0; transition: opacity var(--motion-feedback); }

/* 歇一歇提示（ENG-REST-001）：连续学习约 30 分钟挂一次的右下角小面板。
   浅底、正文字号、圆角随 tokens；不遮内容、不锁滚动、不自动消失。
   层序在坞（30）之上、遮罩（50）与术语气泡（60）之下。 */
.rest-note {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 40;
  display: grid;
  gap: 10px;
  max-width: min(21rem, calc(100vw - 32px));
  padding: 14px 16px;
  background: var(--lavender);
  border: 1px solid var(--lavender-deep);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-raised);
}
.rest-note-text { margin: 0; font-size: var(--type-body); line-height: 1.7; color: var(--ink); }
.rest-note-btn {
  justify-self: end;
  min-height: 44px;
  padding: 8px 22px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--surface);
  font-weight: 700;
  cursor: pointer;
}
/* 触控档抬到坞之上，别盖住底部导航 */
@media (width < 1120px) {
  body.has-dock .rest-note { bottom: 96px; }
}

/* 试卷室打印入口（ENG-PDF-001）：次要按钮，与主按钮同高同形，白面紫字 */
.btn-secondary { background: var(--surface); color: var(--brand-strong); border: 1.5px solid var(--brand-strong); }
.btn-secondary:active { background: var(--lavender); }
.papers-print { margin-top: 10px; margin-inline-end: 12px; }
@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover { background: var(--lavender); }
}

/* 范文库（ENG-ESSAY-001）：六类话题标签页加行式列表、范文详情；零色彩事件面板。
   标签页复用 .tabs（练一练同款），段位钉与学期钉同手法。 */
.essays-head { margin-block: clamp(18px, 3vw, 30px); }
.essays-head .lead { margin-top: 12px; }
.essays-head h1 { margin: 0; }
.essays-meta { display: flex; align-items: center; gap: 10px; margin-block: 12px 0; }
.essays-back { margin-top: 12px; }
.essays-words { color: var(--ink-muted); font-size: var(--type-supporting); font-variant-numeric: tabular-nums; white-space: nowrap; }
.essays-stage {
  display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill);
  font-size: var(--type-label); font-weight: 720; white-space: nowrap;
  background: var(--lavender); color: var(--ink);
}

/* 目录行式列表：整行单链接，行内元数据成列（标题、词数、段位钉） */
.essays-rows { margin-block: 4px; }
.essays-row {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding-block: 9px; border-top: 1px solid var(--border);
  text-decoration: none; color: var(--ink);
}
.essays-row-title { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.essays-row-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .essays-row:hover .essays-row-title { color: var(--brand-strong); }
}

/* 详情：正文书卷、译文、亮点句、写作骨架（悬挂序号列表） */
.essays-read { margin-block: clamp(20px, 3vw, 34px); }
.essays-body { font-size: var(--type-body); line-height: 1.8; }
.essays-body p { margin-block: 0; white-space: pre-line; }
.essays-body p + p { margin-block-start: 14px; }
.essays-translation-toggle { margin-top: 18px; }
.essays-translation {
  margin-block: 16px 0; padding: 10px 14px;
  background: color-mix(in srgb, var(--lavender) 35%, transparent); border-radius: var(--radius-inline);
}
.essays-translation p { margin-block: 0; font-size: var(--type-body); line-height: 1.8; white-space: pre-line; }
.essays-translation p + p { margin-block-start: 12px; }
.essays-section { margin-block: clamp(24px, 4vw, 44px); }
.essays-section h2 { margin-block-end: 6px; }
.essays-highlights { list-style: none; margin: 0; padding: 0; }
.essays-highlights li { padding-block: 12px; border-top: 1px solid var(--border); }
.essays-highlights li:last-child { border-bottom: 1px solid var(--border); }
.essays-hl-en { margin: 0; font-size: var(--type-body); font-weight: 650; line-height: 1.7; }
.essays-hl-why { margin: 4px 0 0; color: var(--ink-muted); font-size: var(--type-supporting); line-height: 1.8; }
.essays-skeleton { list-style: none; counter-reset: essays-step; margin: 0; padding: 0; }
.essays-skeleton li {
  position: relative; counter-increment: essays-step;
  padding: 10px 0 10px 44px; border-top: 1px solid var(--border);
  font-size: var(--type-body); line-height: 1.7;
}
.essays-skeleton li:last-child { border-bottom: 1px solid var(--border); }
.essays-skeleton li::before {
  content: counter(essays-step);
  position: absolute; left: 0; top: 10px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--radius-pill);
  background: var(--lavender);
  font-size: var(--type-label); font-weight: 700;
}

/* 「我的」设置页行式列表（ENG-ME-001）：整行一个链接或一个开关，44px 触控高。
   标签列定宽、说明列吃满剩余并允许折行，尾部动作右贴行缘，各行同列共享左右缘。 */
.me-head { margin-block: clamp(24px, 5vw, 48px); }
.me-head h1 { margin-block: 4px 10px; }
.me-head .lead { margin-block: 0; max-inline-size: var(--track-reading); }
.me-list { display: grid; gap: 10px; }
.me-row {
  display: flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 8px 16px; text-align: left; text-decoration: none; cursor: pointer;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-row);
  font: inherit;
}
.me-label { flex: 0 0 7em; font-weight: 640; }
.me-value { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; color: var(--ink-muted); }
.me-go { flex: 0 0 auto; color: var(--brand-strong); font-weight: 640; white-space: nowrap; }
.me-pace-state {
  margin-left: auto; padding: 2px 12px; border-radius: var(--radius-pill);
  font-weight: 720; background: var(--lavender);
}
.me-pace[aria-checked="true"] .me-pace-state { background: var(--brand); color: var(--surface); }
@media (hover: hover) and (pointer: fine) {
  .me-row:hover { border-color: var(--brand); }
}

/* 打印练习纸目录（ENG-WORKSHEET-001）：按段分组，行式列表整行一个链接，行内元数据成列
   （册名、页数、题数）；家长看板入口链接沿用纸卡排版，不另起样式族。 */
.worksheets-head { margin-block: clamp(18px, 3vw, 30px); }
.worksheets-head .lead { margin-top: 12px; }
.worksheets-head h1 { margin: 0; }
.worksheets-section { margin-block: clamp(20px, 3vw, 30px); }
.worksheets-section h2 { margin-block-end: 6px; }
.worksheets-rows { margin-block: 4px; }
.worksheets-row {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding-block: 9px; border-top: 1px solid var(--border);
  text-decoration: none; color: var(--ink);
}
.worksheets-row-title { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.worksheets-row-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.worksheets-count {
  color: var(--ink-muted); font-size: var(--type-supporting);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) {
  .worksheets-row:hover .worksheets-row-title { color: var(--brand-strong); }
}
.worksheets-parent-link { font-weight: 640; }

/* 家长看板打印练习纸入口（ENG-WORKSHEET-001）：closing 面板前的一行入口，
   句子加内联链接，不入纸卡（纸卡会撑高家长看板，挤压 ⑯ 组高度预算）。 */
.worksheets-parent-entry { margin: 0; }
.worksheets-parent-entry p { margin: 0; }
.worksheets-parent-link { font-weight: 640; color: var(--brand-strong); }

/* 范文库写作小技巧与自查清单（ENG-ESSAY-002）：技巧卡原生 details 折叠件默认全部收起，
   summary 整行 44px 触控高，带话题类的卡钉类名短名；例句英文一行中文一行。
   自查清单是本页唯一浅紫重点面板（DESIGN.md §4.2），方框勾选只在本次浏览有效，不写存储。 */
.essays-tips h2 { margin-block-end: 6px; }
.essays-tip { border-top: 1px solid var(--border); }
.essays-tip:last-of-type { border-bottom: 1px solid var(--border); }
.essays-tip-summary {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  cursor: pointer; font-weight: 640;
}
.essays-tip-title { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.essays-tip-pin {
  flex-shrink: 0; padding: 3px 12px; border-radius: var(--radius-pill);
  font-size: var(--type-label); font-weight: 720; white-space: nowrap;
  background: var(--lavender); color: var(--ink);
}
.essays-tip-body { padding-block: 4px 18px; }
.essays-tip-body > p { margin: 0; font-size: var(--type-body); line-height: 1.8; }
.essays-tip-examples {
  list-style: none; margin: 14px 0 0; padding: 10px 14px;
  background: color-mix(in srgb, var(--lavender) 35%, transparent); border-radius: var(--radius-inline);
}
.essays-tip-examples li + li { margin-block-start: 14px; }
.essays-tip-en { margin: 0; font-size: var(--type-body); font-weight: 650; line-height: 1.7; }
.essays-tip-zh {
  margin: 4px 0 0; color: var(--ink-muted);
  font-size: var(--type-supporting); line-height: 1.8;
}
.essays-checklist {
  margin-block: clamp(24px, 4vw, 44px); padding: 20px 22px;
  background: var(--lavender); border: 1px solid var(--lavender-deep);
  border-radius: var(--radius-panel);
}
.essays-checklist h2 { margin-block-end: 6px; color: var(--brand-strong); }
.essays-checklist-items { list-style: none; margin: 0; padding: 0; }
.essays-checklist-items li + li { border-top: 1px solid var(--lavender-deep); }
.essays-checklist-row { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.essays-checklist-row input { flex-shrink: 0; width: 20px; height: 20px; accent-color: var(--brand); }
.essays-checklist-text { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; font-size: var(--type-body); line-height: 1.7; }
.essays-checklist-done { margin: 12px 0 0; font-size: var(--type-body); font-weight: 640; }
.essays-tips-link { margin: 12px 0 0; }
.essays-tips-link a { font-weight: 640; }

/* 冲刺专区（ENG-SPRINT-001）：总复习 21 讲目录行式列表（讲序、标题、要点数、题数、
   拔高衔接钉）加讲页（要点悬挂序号、相关知识卡行式列表、练一练）。零色彩事件面板。 */
.sprint-head { margin-block: clamp(18px, 3vw, 30px); }
.sprint-head .lead { margin-top: 12px; }
.sprint-head h1 { margin: 0; }
.sprint-subtitle { margin: 8px 0 0; color: var(--ink-muted); font-size: var(--type-body); }
.sprint-back { margin-top: 12px; }
.sprint-summary { max-inline-size: var(--track-reading); margin-block: clamp(20px, 3vw, 30px); line-height: 1.8; }
.sprint-rows { margin-block: 4px; }
.sprint-row {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding-block: 9px; border-top: 1px solid var(--border);
  text-decoration: none; color: var(--ink);
}
.sprint-row:last-child { border-bottom: 1px solid var(--border); }
.sprint-row-no {
  flex: 0 0 4.5em; white-space: nowrap;
  color: var(--ink-muted); font-size: var(--type-supporting);
  font-variant-numeric: tabular-nums;
}
.sprint-row-title { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.sprint-row-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sprint-count {
  color: var(--ink-muted); font-size: var(--type-supporting);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sprint-badge {
  display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill);
  font-size: var(--type-label); font-weight: 720; white-space: nowrap;
  background: var(--lavender); color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .sprint-row:hover .sprint-row-title { color: var(--brand-strong); }
}

/* 讲页：要点悬挂序号列表（总纲 §6.8 与 DESIGN.md §4.5），例句英文加中文两行。 */
.sprint-section { margin-block: clamp(24px, 4vw, 44px); }
.sprint-section h2 { margin-block-end: 6px; }
.sprint-points { list-style: none; counter-reset: sprint-point; margin: 4px 0 0; padding: 0; }
.sprint-points > li {
  position: relative; counter-increment: sprint-point;
  padding: 12px 0 12px 48px; border-top: 1px solid var(--border);
}
.sprint-points > li:last-child { border-bottom: 1px solid var(--border); }
.sprint-points > li::before {
  content: counter(sprint-point);
  position: absolute; left: 0; top: 14px;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--lavender);
  font-size: var(--type-label); font-weight: 700;
}
.sprint-points h3 { margin: 0; }
.sprint-point-body { margin: 6px 0 0; line-height: 1.8; }
.sprint-examples { list-style: none; margin: 10px 0 0; padding: 0; }
.sprint-examples li + li { margin-top: 8px; }
.sprint-example-en { margin: 0; font-weight: 650; }
.sprint-example-zh { margin: 2px 0 0; color: var(--ink-muted); font-size: var(--type-supporting); }

/* 讲页：相关知识卡行式列表，整行单链接到课页。 */
.sprint-lessons { margin-block: 4px; }
.sprint-lesson-row {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding-block: 9px; border-top: 1px solid var(--border);
  text-decoration: none; color: var(--ink);
}
.sprint-lesson-row:last-child { border-bottom: 1px solid var(--border); }
.sprint-lesson-title { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .sprint-lesson-row:hover .sprint-lesson-title { color: var(--brand-strong); }
}

/* 讲页：练一练作答区（quiz.js 同款判分，宿主与按钮带冲刺前缀）。 */
.sprint-start { margin-top: 8px; }
.sprint-set { margin-top: 16px; }
.sprint-again { margin-top: 20px; }

/* 初中衔接子区与高频考点卷入口（ENG-SPRINT-002）：行式列表沿用冲刺目录行同款骨架
   （sprint-row 与 sprint-count），零新色彩事件，只补入口按钮的行距。 */
.sprint-papers-link { margin: 12px 0 0; }


/* ============================================================
   UI 重设计阶段一：共用组件词汇
   规格来源 quality/ui-redesign-001/组件规格.md 第五节。
   本段只建词汇，逐页改用在阶段二各页工单里做。
   ============================================================ */

/* 图标尺寸三档（几何在 app/js/icons.js，尺寸值只在 tokens.css） */
.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.icon-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }
.icon-md { inline-size: var(--icon-md); block-size: var(--icon-md); }
.icon-lg { inline-size: var(--icon-lg); block-size: var(--icon-lg); }

/* 小物件图位三档（3D 件在 app/assets/objects/） */
.obj { display: block; object-fit: contain; }
.obj-sm { inline-size: var(--obj-sm); block-size: var(--obj-sm); }
.obj-md { inline-size: var(--obj-md); block-size: var(--obj-md); }
.obj-lg { inline-size: var(--obj-lg); block-size: var(--obj-lg); }

/* 卡片两个新变体：浅紫软面板、无阴影内嵌卡（避免双层阴影） */
.paper-card.soft { background: var(--lavender); border-color: var(--lavender-deep); }
.paper-card.soft h2, .paper-card.soft h3 { color: var(--brand-strong); }
.paper-card.flat { box-shadow: none; }

/* 区块标题行：图位 + 标题 + 右侧「查看全部」 */
.section-head {
  display: flex; align-items: center; gap: var(--card-mark-gap); min-height: 44px; margin-block-end: 16px;
}
.section-head h2, .section-head h3 { margin: 0; font-size: var(--type-card-title); font-weight: 700; }
.section-head .section-more {
  margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px;
  color: var(--brand); font-size: var(--type-supporting); font-weight: 600; text-decoration: none;
  min-height: 44px; padding-inline: 6px; border-radius: var(--radius-row);
}

/* 状态钉三态：颜色之外必有形状与文字（总纲 §5.4 双通道） */
.pin {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-pill); padding: 4px 10px;
  font-size: var(--type-label); font-weight: 700; white-space: nowrap;
}
.pin-done { color: var(--state-correct-ink); background: var(--state-correct-face); }
.pin-now { color: var(--brand); background: var(--lavender); }
.pin-todo { color: var(--ink-muted); background: transparent; border: 1px solid var(--border); }

/* 进度条：槽浅紫、填充紫 */
.bar-track {
  block-size: 8px; inline-size: 100%; border-radius: var(--radius-pill);
  background: var(--lavender); overflow: hidden;
}
.bar-fill { block-size: 100%; background: var(--brand); border-radius: var(--radius-pill); }
.today-band .bar-fill { background: var(--brand-strong); }

/* 节点串：一排圆点连线表示课序，超宽横滚 */
.node-track {
  display: flex; align-items: center; gap: 0; overflow-x: auto; scroll-snap-type: x proximity;
  padding-block: 4px;
}
.node-track .node {
  flex: 0 0 auto; inline-size: 20px; block-size: 20px; border-radius: var(--radius-pill);
  display: grid; place-items: center; scroll-snap-align: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--surface);
}
.node-track .node-done { background: var(--brand); border-color: var(--brand); }
.node-track .node-now { border: 2px solid var(--brand); background: var(--surface); }
.node-track .node-now::after {
  content: ""; inline-size: 8px; block-size: 8px; border-radius: var(--radius-pill); background: var(--brand);
}
.node-track .node-end { border: 0; background: transparent; color: var(--coral); }
.node-track .node-link { flex: 1 0 16px; block-size: 2px; background: var(--border); min-inline-size: 16px; }
.node-track .node-link-done { background: var(--brand); }

/* 进度环：用 conic-gradient 画，中心开洞放数字 */
.progress-ring {
  inline-size: 96px; block-size: 96px; border-radius: var(--radius-pill);
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--brand) calc(var(--ring-value, 0) * 1%), var(--lavender) 0);
}
.progress-ring::before {
  content: ""; position: absolute; inset: 10px; border-radius: var(--radius-pill); background: var(--surface);
}
.progress-ring .ring-value {
  position: relative; font-size: var(--type-card-title); font-weight: 800; color: var(--ink);
}
.ring-legend { display: grid; gap: 8px; }
.ring-legend .legend-row { display: flex; align-items: center; gap: 8px; font-size: var(--type-supporting); }
.ring-legend .legend-dot { inline-size: 8px; block-size: 8px; border-radius: var(--radius-pill); flex: 0 0 auto; }
.ring-legend .legend-done { background: var(--state-correct-ink); }
.ring-legend .legend-now { background: var(--brand); }
.ring-legend .legend-todo { background: var(--ink-muted); }

/* 分段控件：难度三层，槽内选中段浅紫 */
.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 4px;
}
.segmented button {
  min-height: 44px; border: 0; background: transparent; cursor: pointer;
  border-radius: var(--radius-pill); color: var(--ink-muted);
  font-size: var(--type-body); font-weight: 650;
}
.segmented button[aria-pressed="true"] { background: var(--lavender); color: var(--brand-strong); font-weight: 700; }

/* 开关：轨 44×26，整行可点，旁边永远不出现速度数字 */
.switch-row {
  display: flex; align-items: center; gap: 12px; min-height: 56px; inline-size: 100%;
  border: 0; background: transparent; cursor: pointer; text-align: start; padding: 8px 0;
}
.switch-row .switch-copy { display: grid; gap: 2px; min-width: 0; }
.switch-row .switch-name { font-size: var(--type-body); font-weight: 650; color: var(--ink); }
.switch-row .switch-note { font-size: var(--type-supporting); color: var(--ink-muted); }
.switch-track {
  margin-inline-start: auto; flex: 0 0 44px; inline-size: 44px; block-size: 26px;
  border-radius: var(--radius-pill); background: var(--border); position: relative;
}
.switch-track::after {
  content: ""; position: absolute; inset-block: 2px; inset-inline-start: 2px;
  inline-size: 22px; border-radius: var(--radius-pill); background: var(--surface);
  transition: var(--motion-feedback);
}
.switch-row[aria-checked="true"] .switch-track { background: var(--brand); }
.switch-row[aria-checked="true"] .switch-track::after { inset-inline-start: 20px; }

/* 面包屑：只在域、章、卡三层出现 */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--type-supporting); color: var(--ink-muted); }
.crumbs a {
  color: var(--ink-muted); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px;
}
.crumbs .crumb-current { color: var(--ink); font-weight: 600; }

/* 空状态：插画 + 标题 + 一句话 + 一个次要行动，不放主行动色块 */
.empty-state {
  display: grid; gap: 12px; justify-items: center; text-align: center; padding-block: 8px;
}
.empty-state h2, .empty-state h3 { margin: 0; font-size: var(--type-panel-title); font-weight: 700; }
.empty-state p { margin: 0; font-size: var(--type-body); color: var(--ink-muted); }

/* ---- 学习台面板（UI 重设计阶段二第一单） ---- */

/* 三栏：主列略宽，两侧等宽。触控档单栏顺排。 */
/* 侧卡是直接的栅格项，同一行自然等高（默认 stretch，不写 align-items: start）。
   主卡按侧卡行数纵跨，左右两半才对得上。 */
.dash-grid { display: grid; gap: 16px; margin-block: 16px; }
.dash-grid > * { min-inline-size: 0; margin: 0; }
.dash-main { grid-row: span var(--span-rows, 1); }
@media (min-width: 761px) { .dash-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .dash-grid-wide { grid-template-columns: 1.4fr 1fr 1fr; }
  .dash-grid-narrow { grid-template-columns: 1.4fr 1fr; }
}

.mini-card { margin: 0; padding: var(--card-inset); min-inline-size: 0; }
.mini-card .section-head { margin-block-end: 12px; }
.mini-card .section-head svg { color: var(--brand); }
.mini-title { margin: 0 0 4px; font-size: var(--type-body); font-weight: 700; }
.mini-meta { margin: 0 0 12px; font-size: var(--type-supporting); color: var(--ink-muted); }
.mini-card .bar-track { margin-block-end: 12px; }

/* 统计块：数字与单位分开排，项名在下 */
.mini-card .stat-row { gap: 8px; }
.mini-card .stat { min-width: 0; flex: 1 1 0; padding: 12px; text-align: center; }
.stat-value { display: block; }
.stat-value strong { font-size: var(--type-card-title); font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-unit { font-size: var(--type-label); color: var(--ink-muted); margin-inline-start: 2px; }
.stat-name { display: block; margin-block-start: 2px; font-size: var(--type-label); color: var(--ink-muted); }

/* 下一区：刚刚完成占大半，雷哥小贴士占一侧 */
.dash-row { display: grid; gap: 16px; margin-block: 16px; }
.dash-row > * { min-inline-size: 0; }
@media (min-width: 1024px) { .dash-row.dash-row-split { grid-template-columns: 2fr 1fr; } }

.recent-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr);
  gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding-block-end: 4px;
}
.recent-item {
  display: grid; gap: 4px; align-content: start; scroll-snap-align: start;
  padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-inline);
  background: var(--canvas); text-decoration: none; color: var(--ink); min-height: 96px;
}
.recent-mark { color: var(--state-correct-ink); }
.recent-title { font-size: var(--type-supporting); font-weight: 700; }
.recent-meta { font-size: var(--type-label); color: var(--ink-muted); }

/* 雷哥小贴士：浅紫软面板，插画贴右下 */
.leige-tip { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.leige-tip-copy p { margin: 0; font-size: var(--type-body); color: var(--ink); }
.leige-tip-copy .section-head { margin-block-end: 8px; }
.leige-tip-copy .section-head .eyebrow { margin: 0; }
.leige-tip-copy .eyebrow { color: var(--brand-strong); }
.leige-tip-art { align-self: end; }
/* 进侧栏时上下排：侧栏宽约 340，左文右图会把两行字挤成四行 */
.leige-tip-stacked { grid-template-columns: 1fr; justify-items: start; }
.leige-tip-stacked .leige-tip-art { justify-self: end; margin-block-start: -8px; }
@media (width < 560px) {
  .leige-tip { grid-template-columns: 1fr; }
}

/* 本学期全部内容：折叠件，题头承担名称，内层卡去掉自己的边与头 */
.semester-fold { margin-block: 16px; padding: 0; }
.semester-fold > summary {
  display: flex; align-items: center; gap: var(--card-mark-gap); cursor: pointer;
  padding: 20px var(--card-inset); min-height: 56px; border-radius: var(--radius-panel);
  font-size: var(--type-card-title); font-weight: 700;
}
.semester-fold > summary .fold-count { font-size: var(--type-supporting); font-weight: 500; color: var(--ink-muted); }
.semester-fold > summary svg { margin-inline-start: auto; color: var(--ink-muted); }
.semester-fold[open] > summary svg { transform: rotate(180deg); }
.semester-map.in-fold { border: 0; box-shadow: none; margin: 0; padding: 0 var(--card-inset) var(--card-inset); }
.semester-map.in-fold .semester-head h2 { display: none; }

/* 更多入口：一行式列表替掉原来四张大卡加一张考区卡（省下约四分之一页高） */
.entry-rows { margin-block: 16px; }
.entry-rows-title { margin: 0; font-size: var(--type-card-title); font-weight: 700; }
.entry-row-list { display: grid; gap: 8px; }
@media (min-width: 761px) { .entry-row-list { grid-template-columns: 1fr 1fr; } }
.entry-row {
  display: flex; align-items: center; gap: 12px; min-height: 64px;
  padding: 12px 16px; border-radius: var(--radius-row); text-decoration: none; color: var(--ink);
  border: 1px solid var(--border); background: var(--canvas); min-inline-size: 0;
}
.entry-row > svg:first-child { color: var(--brand); }
.entry-row > svg:last-child { margin-inline-start: auto; color: var(--ink-muted); }
.entry-row-copy { display: grid; gap: 2px; min-width: 0; }
.entry-row-title { font-size: var(--type-body); font-weight: 650; }
.entry-row-note { font-size: var(--type-label); color: var(--ink-muted); }
@media (hover: hover) and (pointer: fine) {
  .entry-row:hover { background: var(--lavender); }
}

/* 卡头图位定宽：不论放线性图标还是 3D 小物件，标题左缘都落在同一条线上
   （卡内衬 + 图位 + 间距）。没有图位的卡由 JS 补一个，见 index.js 的 miniCard。 */
.section-head > :first-child { flex: 0 0 var(--card-mark); inline-size: var(--card-mark); }
.section-head > svg:first-child { block-size: var(--card-mark); padding: 8px; }

.semester-fold > summary > img { flex: 0 0 var(--card-mark); inline-size: var(--card-mark); }

/* ---- 课页：幕步进器（UI 重设计阶段二） ---- */
.phase-steps {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  list-style: none; margin: 0 0 16px; padding: 0;
}
.phase-step { display: inline-flex; align-items: center; gap: 8px; }
.phase-step + .phase-step::before {
  content: ""; inline-size: 20px; block-size: 2px; background: var(--border); margin-inline-end: 8px;
}
.phase-step.phase-done + .phase-step::before,
.phase-step.phase-now::before { background: var(--brand); }
.phase-dot {
  inline-size: 28px; block-size: 28px; border-radius: var(--radius-pill);
  display: grid; place-items: center; border: 1px solid var(--border);
  font-size: var(--type-label); font-weight: 700; color: var(--ink-muted); background: var(--surface);
}
.phase-now .phase-dot,
.phase-done .phase-dot { background: var(--brand); border-color: var(--brand); color: var(--surface); }
.phase-name { font-size: var(--type-label); color: var(--ink-muted); }
.phase-now .phase-name { color: var(--brand-strong); font-weight: 700; }
.lesson-top + .crumbs, .crumbs { margin-block-end: 12px; }
/* 课页面包屑与正文同列：不设宽时它从 main 左缘起排，宽屏被绝对定位的课程脉络轨盖住（2026-08-20 实测）。 */
.lesson-rail-host .crumbs { max-inline-size: 48rem; margin-inline: auto; }
/* ---- 练一练页（ENG-UI-PRACTICE） ---- */

/* 选择面板三栏：左挑主题、中难度与开始、右最近与错题；下区示例与小提示 */
.prac-board { display: grid; gap: 16px; margin-block: 16px; align-items: start; }
.prac-board > * { min-inline-size: 0; }
@media (min-width: 761px) {
  .prac-board { grid-template-columns: 260px minmax(0, 1fr); }
  .prac-side { grid-column: 1 / -1; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .prac-board { grid-template-columns: 260px minmax(0, 1fr) 300px; }
  .prac-side { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
}
.prac-board .paper-card { margin: 0; }

/* 能力域 chips：单选胶囊，选中浅紫 */
.prac-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 16px; }
.prac-chip {
  min-height: 44px; padding: 9px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-muted);
  font-size: var(--type-body); font-weight: 650; cursor: pointer;
  transition: var(--motion-feedback);
}
.prac-chip[aria-pressed="true"] {
  background: var(--lavender); border-color: var(--lavender-deep);
  color: var(--brand-strong); font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .prac-chip:hover { background: var(--lavender); }
}

/* 主题树：主题行展开出难度层，当前项浅紫底 */
.prac-tree { display: grid; gap: 2px; }
.prac-topic > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 10px 12px;
  border-radius: var(--radius-row); list-style: none;
  transition: var(--motion-feedback);
}
.prac-topic > summary::-webkit-details-marker { display: none; }
.prac-topic > summary::marker { content: none; }
.prac-topic-title {
  flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; text-align: start;
  font-size: var(--type-body); font-weight: 650; color: var(--ink);
}
.prac-topic-count { flex: 0 0 auto; font-size: var(--type-supporting); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.prac-topic > summary > svg { flex: 0 0 auto; color: var(--ink-muted); transition: var(--motion-feedback); }
.prac-topic[open] > summary > svg { transform: rotate(180deg); }
.prac-topic.current > summary { background: var(--lavender); }
.prac-topic.current .prac-topic-title { color: var(--brand-strong); font-weight: 700; }
.prac-parts { display: grid; gap: 2px; padding: 4px 8px 8px 36px; }
.prac-part {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 44px; padding: 6px 12px;
  border: 0; border-radius: var(--radius-row);
  background: transparent; text-align: start; cursor: pointer;
  font-size: var(--type-supporting); color: var(--ink);
}
.prac-part-name { flex: 1 1 0; }
.prac-part-count { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .prac-part:hover { background: var(--hero-soft); }
}

/* 左栏底部入口行 */
.prac-pick > .entry-row { margin-block-start: 16px; }

/* 中栏：引导、难度分段与开始练习面板 */
.prac-main-card .eyebrow { margin-block-start: 0; }
.prac-main-card .segmented { margin-block-end: 16px; }
.segmented button:disabled { opacity: 0.45; cursor: default; }
.prac-start { display: grid; gap: 10px; justify-items: start; margin-block-start: 16px; }
.prac-start h2 { margin: 0; font-size: var(--type-panel-title); font-weight: 700; }
.prac-start-meta { margin: 0; font-size: var(--type-supporting); color: var(--ink-muted); }
.prac-start-note { margin: 0; font-size: var(--type-supporting); color: var(--ink-muted); }
.prac-start .btn { margin-block-start: 4px; }
.prac-set { margin-block-start: 16px; }
.prac-again { margin-block-start: 20px; }

/* 右栏：最近做过行式列表与错题本 */
.prac-recent-list { display: grid; gap: 2px; }
.prac-recent-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 64px; padding: 10px 8px 10px 12px;
  border: 0; border-radius: var(--radius-row);
  background: transparent; text-align: start; cursor: pointer;
}
/* 标题一行、状态与成绩一行：侧栏 300px 装不下四件横排，单行会把标题压成一字一行（2026-08-20 实测 18px 竖排）。 */
.prac-recent-main { flex: 1 1 0; min-width: 0; display: grid; gap: 4px; justify-items: start; }
.prac-recent-title { font-size: var(--type-body); font-weight: 650; color: var(--ink); }
.prac-recent-sub { display: flex; align-items: center; gap: 12px; }
.prac-recent-meta {
  font-size: var(--type-supporting); color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.prac-recent-row > svg { flex: 0 0 auto; color: var(--ink-muted); }
@media (hover: hover) and (pointer: fine) {
  .prac-recent-row:hover { background: var(--lavender); }
}
.prac-wrong-line { margin: 0 0 12px; font-size: var(--type-body); }
.prac-wrong-line strong { font-size: var(--type-card-title); font-weight: 800; font-variant-numeric: tabular-nums; margin-inline-end: 6px; }

/* 下区：题目示例与小提示 */
.prac-lower { display: grid; gap: 16px; margin-block: 16px; align-items: start; }
.prac-lower .paper-card { margin: 0; }
@media (min-width: 761px) {
  .prac-lower { grid-template-columns: 1.4fr 1fr; }
  .prac-lower.prac-lower-single { grid-template-columns: 1fr; }
}
.prac-sample .quiz-item { margin: 0; }
.prac-sample-options { display: grid; gap: 8px; margin-block: 12px; }
.prac-sample-option {
  display: flex; align-items: center; gap: 12px;
  min-height: 48px; padding: 10px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-inline);
  background: var(--surface); font-size: var(--type-body); overflow-wrap: anywhere;
}
.prac-sample-key { flex: 0 0 auto; font-weight: 800; color: var(--brand-strong); }
.prac-sample .muted { margin: 0; }

/* 统一错误面板（组件规格 §5.15）：浅紫居中，只有「我知道了」 */
.prac-error {
  display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  gap: 24px; align-items: center; justify-items: center; text-align: center;
  background: var(--lavender); border-radius: var(--radius-panel);
  padding: 32px; margin: 16px 0;
}
.prac-error-body { display: grid; gap: 8px; justify-items: center; }
.prac-error-body h2 { margin: 0; font-size: var(--type-panel-title); font-weight: 700; }
.prac-error-body p { margin: 0; font-size: var(--type-body); }
@media (width <= 760px) {
  .prac-error { grid-template-columns: minmax(0, 1fr); padding: 24px; }
}

/* 主题作答页：面包屑与头部、作答卡 */
.prac-topic-head { margin-block: clamp(12px, 2vw, 20px); }
/* 面包屑里的链接进 flex 行会被块化，命中区必须补到 44px */
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.prac-topic-head .eyebrow { margin-block-start: 0; }
.prac-topic-head .lead { margin-top: 12px; }
.prac-topic-zone { margin-block: 8px 16px; }

/* 移动单栏：主题选择收成两行下拉，其余同序 */
.prac-mobile-pick { display: none; }
@media (width <= 760px) {
  .prac-pick { display: none; }
  .prac-mobile-pick { display: grid; gap: 8px; }
}
.prac-select {
  min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-inline);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--type-body);
}
/* ---- 体系地图页（ENG-UI-MAP） ---- */
/* 规格来源 quality/ui-redesign-001/组件规格.md §6.4：左栏统计与总体进度，
   右栏能力域折叠件。小圆点与进度环用 clip-path 画圆：判卷 ⑧ 静态禁 50% 裸圆角，
   渲染态比例门又按半径比短边卡 0.25（胶囊 999px 在小点上必超），clip-path 的圆
   在几何上与圆点等价，两门都不碰。内层章折叠件与统计格取行档圆角，与旧课程
   目录折叠件同一判例。 */

.map-head { display: grid; gap: 12px; margin-block: 8px 0; }
.map-head .eyebrow { margin: 0; }
.map-head h1 { margin: 0; }
.map-head .lead { margin: 0; }

.map-grid { display: grid; gap: 16px; margin-block: 24px 16px; align-items: start; }
.map-side { display: grid; gap: 16px; align-content: start; min-inline-size: 0; }
.map-main { display: grid; gap: 16px; min-inline-size: 0; }
/* 五域折叠件此前没有任何容器规则，纯 block 零间距，卡片贴在一起（2026-08-19 产品负责人指出）。
   折叠件是卡不是行，按 DESIGN.md §3.4 卡间 16px。 */
.map-domains { display: grid; gap: 16px; }
@media (min-width: 761px) { .map-grid { grid-template-columns: 260px 1fr; } }

/* 左栏统计块：侧栏宽 260 放两乘二，移动端通栏时四格横排（规格 §6.4 移动版式） */
.map-side .stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.map-side .stat {
  flex: none; min-width: 0; padding: 12px 8px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-row); background: var(--canvas);
}
@media (width <= 760px) { .map-side .stat-row { grid-template-columns: repeat(4, 1fr); } }

/* 总体进度：环加三行图例 */
.ring-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.map-ring-legend { display: grid; gap: 8px; }
/* 阶段一的环用胶囊 token，本页作用域内复位圆角、改用 clip-path 画圆（见段首说明） */
.map-side .progress-ring, .map-side .progress-ring::before { border-radius: 0; clip-path: circle(50%); }

.map-skip-btn { margin-block: 0; }

/* 学习路径图例：一行说明加四枚带文字的色点 */
/* 图例做成有边有底的小条，不再是浮着的一段灰字 */
.map-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0;
  font-size: var(--type-supporting); color: var(--ink-muted);
  padding: 10px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-inline);
}
.map-legend-title { font-weight: 700; color: var(--ink); }
.map-head-note { margin: 0; font-size: var(--type-supporting); color: var(--ink-muted); }
.lg-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lg-count { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.map-lg-dot { inline-size: 8px; block-size: 8px; clip-path: circle(50%); flex: 0 0 auto; }
.map-lg-dot.lg-done { background: var(--state-correct-ink); }
.map-lg-dot.lg-now { background: var(--brand); }
.map-lg-dot.lg-todo { background: var(--ink-muted); }
.map-lg-dot.lg-skip { background: var(--mint); }

/* 首次进站的迷你视图：浅紫欢迎面板（承载门面面板与装饰位） */
.map-welcome { margin: 0; border-radius: var(--radius-panel); }

/* 能力域折叠件：题头 = 图位 + 序号域名与一句说明 + 进度与计数 + chevron */
.domain-fold { margin: 0; }
.domain-fold > summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--card-mark-gap);
  list-style: none; min-height: 64px;
}
.domain-fold > summary::-webkit-details-marker { display: none; }
.domain-fold > summary::marker { content: none; }
.domain-fold > summary > .obj { flex: 0 0 var(--card-mark); inline-size: var(--card-mark); }
.domain-copy { display: grid; gap: 2px; min-width: 0; flex: 1 1 240px; }
.domain-copy h2 {
  display: flex; align-items: baseline; gap: 8px; margin: 0;
  font-size: var(--type-card-title); font-weight: 700;
}
.domain-no {
  font-size: var(--type-label); font-weight: 700; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.domain-desc { margin: 0; font-size: var(--type-supporting); color: var(--ink-muted); }
.domain-side { margin-inline-start: auto; display: grid; gap: 6px; justify-items: end; }
.domain-bar-row { display: flex; align-items: center; gap: 8px; }
.domain-bar-row .bar { inline-size: 180px; }
.domain-pct { font-size: var(--type-label); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.domain-counts { font-size: var(--type-supporting); color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.domain-fold > summary > svg { color: var(--ink-muted); flex: 0 0 auto; }
.domain-fold[open] > summary > svg { transform: rotate(180deg); transition: var(--motion-feedback); }
.domain-body { display: grid; gap: 8px; margin-block-start: 16px; }

/* 章折叠件（域卡内层，不占 paper-card 类：判卷 ⑯ 的卡内衬口径不适用于折叠行） */
.map-ch2 { border: 1px solid var(--border); border-radius: var(--radius-row); background: var(--canvas); }
.map-ch2 > summary {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px;
  border-radius: var(--radius-row); list-style: none;
}
.map-ch2 > summary::-webkit-details-marker { display: none; }
.map-ch2 > summary::marker { content: none; }
.ch2-name { font-size: var(--type-body); font-weight: 700; min-width: 0; }
.ch2-progress { margin-inline-start: auto; font-size: var(--type-supporting); color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch2-skip { display: inline-flex; align-items: center; gap: 4px; }
.ch2-skip svg { color: var(--state-correct-ink); }
.map-ch2 > summary > svg { color: var(--ink-muted); flex: 0 0 auto; }
.map-ch2[open] > summary > svg { transform: rotate(180deg); transition: var(--motion-feedback); }
.map-ch2-body { display: grid; gap: 2px; padding: 0 8px 8px; }

/* 课时行：整行一个链接，元数据成列右对齐（列宽不随标题长短漂移：
   序号、状态钉、圆点串与词数一律不缩不折，宽窄全由课名吸收），行尾 chevron 跟随内容列 */
.map-lesson-row {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px;
  border-radius: var(--radius-row); text-decoration: none; color: var(--ink); min-inline-size: 0;
}
.lesson-no {
  flex: 0 0 24px; text-align: end; font-size: var(--type-supporting);
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.lesson-title { flex: 1 1 auto; min-width: 0; font-size: var(--type-body); }
.map-lesson-row .pin { flex: 0 0 auto; min-inline-size: 5em; justify-content: center; }
.lesson-words { flex: 0 0 auto; min-inline-size: 3.6em; text-align: end; font-size: var(--type-label); color: var(--ink-muted); }
.lesson-dots { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
/* 圆点串随课的卡数变长，列缘要稳就得给整串一个按最多 7 卡算的定宽（7 圆点加连线加计数） */
.lesson-dots { min-inline-size: calc(98px + 3.2em); }
.lesson-dots { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ldot { inline-size: 10px; block-size: 10px; clip-path: circle(50%); background: var(--border); }
.ldot.on { background: var(--brand); }
.dots-text { margin-inline-start: 4px; min-inline-size: 3em; text-align: center; font-size: var(--type-label); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.map-lesson-row > svg { color: var(--ink-muted); flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) {
  .map-lesson-row:hover { background: var(--lavender); }
}

/* 统一错误面板（组件规格 §5.15）：浅紫居中，插画 132（窄屏 96 由既有规则接管） */
.map-error {
  display: grid; gap: 12px; justify-items: center; text-align: center;
  background: var(--lavender); border-radius: var(--radius-panel);
  padding: var(--card-inset); margin: 16px auto; max-inline-size: 560px;
}
.map-error h2 { margin: 0; font-size: var(--type-panel-title); }
.map-error p { margin: 0; font-size: var(--type-body); }
.map-error .error-panel-art { display: grid; justify-items: center; }

@media (width <= 560px) {
  .domain-bar-row .bar { inline-size: 140px; }
  /* 窄屏只留圆点串的计数文字，点串本身放下不下就不再画 */
  .ldot { display: none; }
  .lesson-dots { min-inline-size: 3.2em; }
}
/* ---- 复习页（ENG-UI-REVIEW） ---- */

/* 页头：主标题按真值项数，一句邀请话，与下面各卡共享同一条左缘。 */
.rv-head { margin-block: clamp(18px, 3vw, 32px) 24px; }
.rv-title { margin: 0; font-size: var(--type-section-title); line-height: 1.08; letter-spacing: -0.065em; font-weight: 800; }
.rv-head .lead { margin: 12px 0 0; }

/* 本页卡间距统一 16，卡都贴内容轨左右缘，不出第二条竖线。 */
.rv-stats, .rv-queue, .rv-set, .rv-progress, .rv-empty { margin: 0 0 16px; }

/* 顶部统计块：两格等分、竖分隔线，每格小物件加数字加格名（共用 .stat 词汇，拆掉盒子留分隔）。 */
.rv-stats { padding-block: 24px; }
.rv-stats .stat-row { flex-wrap: nowrap; gap: 0; }
.rv-stats .stat {
  min-width: 0; flex: 1 1 0; border: 0; border-radius: 0; background: transparent;
  padding: 4px 12px; display: grid; justify-items: center; gap: 6px; text-align: center;
}
.rv-stats .stat + .stat { border-inline-start: 1px solid var(--border); }
.rv-stats .stat .obj { margin-block-end: 4px; }

/* 复习队列：行式列表，行尾按钮是行内唯一动作，行本身不可点。 */
.rv-queue .section-head { margin-block-end: 8px; }
.rv-queue-note { margin-inline-start: auto; color: var(--ink-muted); font-size: var(--type-supporting); }
.rv-rows { list-style: none; margin: 0; padding: 0; }
.rv-row {
  display: flex; align-items: center; gap: 12px; min-height: 76px; padding-block: 10px;
  border-top: 1px solid var(--border);
}
.rv-row:last-child { border-bottom: 1px solid var(--border); }
.rv-row-copy { display: grid; gap: 2px; flex: 1 1 0; min-inline-size: 0; }
.rv-row-type { font-size: var(--type-label); color: var(--ink-muted); font-weight: 650; }
.rv-row-name { font-size: var(--type-body); font-weight: 700; overflow-wrap: anywhere; }
.rv-row-meta {
  flex: 0 0 auto; min-inline-size: 190px; text-align: end;
  font-size: var(--type-supporting); color: var(--ink-muted);
}
.rv-row-actions { margin-inline-start: auto; display: grid; justify-items: end; gap: 6px; flex: 0 0 auto; }
.rv-row-done {
  min-height: 44px; display: inline-flex; align-items: center; border: 0; background: transparent;
  color: var(--brand-strong); font-size: var(--type-supporting); font-weight: 650; cursor: pointer;
  padding-inline: 8px; border-radius: var(--radius-row);
}
@media (hover: hover) and (pointer: fine) {
  .rv-row-done:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
}
.rv-queue-more { margin: 12px 0 0; }

/* 窄档：元数据与动作折到标题下方，行不撑成两倍高。 */
@media (width < 560px) {
  .rv-row { flex-wrap: wrap; }
  .rv-row-copy { flex: 1 1 calc(100% - var(--obj-sm) - 12px); }
  .rv-row-meta { min-inline-size: 0; text-align: start; margin-inline-start: calc(var(--obj-sm) + 12px); }
}

/* 错题作答卡：挂在队列卡下方，题头是小物件加卡名加题数，主题名单独一行。 */
.rv-set-count { margin-inline-start: auto; color: var(--ink-muted); font-size: var(--type-supporting); }
.rv-set-topic { margin: 0 0 4px; font-size: var(--type-body); font-weight: 650; }
.rv-set .practice-set { margin-top: 8px; }

/* 本周复习进展：左大数字、中两格统计、右雷哥插画与鼓励，三块顶对齐。 */
.rv-progress-grid { display: grid; gap: 24px; align-items: start; }
.rv-progress-num strong { font-size: var(--type-panel-title); font-weight: 800; font-variant-numeric: tabular-nums; }
.rv-progress-name { display: block; margin-block-start: 2px; font-size: var(--type-label); color: var(--ink-muted); }
.rv-progress-sub { margin: 4px 0 0; font-size: var(--type-supporting); color: var(--ink-muted); }
.rv-progress .stat-row { flex-wrap: nowrap; gap: 0; }
.rv-progress .stat {
  min-width: 0; flex: 1 1 0; border: 0; border-radius: 0; background: transparent;
  padding: 0 20px; text-align: start;
}
.rv-progress .stat + .stat { border-inline-start: 1px solid var(--border); }
.rv-progress-art { display: grid; justify-items: end; gap: 8px; }
.rv-progress-art-host { inline-size: clamp(96px, 12vw, 132px); }
.rv-progress-cheer { margin: 0; font-size: var(--type-body); color: var(--ink); text-align: end; }
@media (min-width: 761px) {
  .rv-progress-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rv-progress-art { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .rv-progress-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); }
  .rv-progress-art { grid-column: auto; }
}
@media (width < 761px) {
  .rv-progress-grid { gap: 16px; }
  .rv-progress .stat { padding-inline-start: 0; }
}

/* 空状态：雷哥插画加一个次要行动，不放主行动色块。 */
.rv-empty { padding-block: 24px; }
.rv-empty-art { inline-size: clamp(96px, 12vw, 132px); }
.rv-empty .empty-state { gap: 16px; }

/* 出错态：浅紫面板居中，插画、标题、一句说明、一个我知道了。 */
.rv-error {
  margin-block: 16px; padding: clamp(32px, 5vw, 48px);
  background: var(--lavender); border: 1px solid var(--lavender-deep);
  border-radius: var(--radius-panel);
  display: grid; justify-items: center; gap: 12px; text-align: center;
}
.rv-error-art { inline-size: clamp(96px, 12vw, 132px); }
.rv-error h2 { margin: 0; font-size: var(--type-panel-title); }
.rv-error p { margin: 0; font-size: var(--type-body); }
/* ---- 我页（ENG-UI-ME） ---- */
/* 本段全部选择器收在 body.me-page 下，只影响我页，不碰其他页面的同名组件。 */

/* 身份卡：素色圆头像 + 时段招呼 + 一句鼓励横向排；设过年级学期时右上挂编辑入口，
   下设四格真实状态（年级 / 学制 / 学期 / 慢一点）。 */
.me-page .me-id { position: relative; display: grid; gap: 16px; }
.me-page .me-id-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.me-page .me-avatar {
  flex: 0 0 88px; inline-size: 88px; block-size: 88px;
  border-radius: var(--radius-pill); background: var(--lavender); border: 1px solid var(--lavender-deep);
}
.me-page .me-id-copy { min-width: 0; }
.me-page .me-id h1 { margin: 0; font-size: var(--type-section-title); font-weight: 800; }
.me-page .me-id-cheer { margin: 4px 0 0; color: var(--ink-muted); }
.me-page .me-id-guide { margin: 0; }
.me-page .me-id .btn { justify-self: start; }
.me-page .me-id-edit {
  position: absolute; inset-block-start: 16px; inset-inline-end: 16px;
  display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px;
  border-radius: var(--radius-pill); color: var(--ink-muted);
}
@media (hover: hover) and (pointer: fine) {
  .me-page .me-id-edit:hover { background: var(--lavender); color: var(--brand-strong); }
}
@media (width < 760px) {
  .me-page .me-avatar { flex-basis: 72px; inline-size: 72px; block-size: 72px; }
}

/* 两栏（1 : 1）：左学习设置，右给家长的说明；触控档单栏顺排。卡距由栅格 gap 承担。 */
.me-page .me-cols { display: grid; gap: 16px; align-items: start; }
.me-page .me-cols > .paper-card { margin: 0; }
@media (min-width: 761px) { .me-page .me-cols { grid-template-columns: 1fr 1fr; } }

/* 设置行复用 .entry-row 骨架：右侧值成行内元数据列，chevron 跟随值右贴行缘。 */
.me-page .me-rows { display: grid; gap: 8px; }
.me-page .entry-row .me-value {
  margin-inline-start: auto; flex: 0 0 auto; max-inline-size: 50%;
  overflow-wrap: anywhere; text-align: end;
  color: var(--ink-muted); font-size: var(--type-supporting);
}
.me-page .entry-row .me-value ~ svg:last-child { margin-inline-start: 8px; }

/* 开关行与链接行同皮（同底同边同圆角同内衬），卡内容左缘落在同一条线上。 */
.me-page .switch-row {
  border: 1px solid var(--border); border-radius: var(--radius-row);
  background: var(--canvas); padding: 12px 16px; min-height: 64px;
}
.me-page .switch-row > svg:first-child { color: var(--brand); }

/* 给家长的说明：四条勾选要点；家长看板入口卡浅紫内嵌（嵌套只此一层，去影）。 */
.me-page .me-parent-lead { margin: 0 0 12px; }
.me-page .me-parent-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.me-page .me-parent-points li { display: flex; align-items: center; gap: 8px; }
.me-page .me-parent-points svg { flex: 0 0 auto; color: var(--state-correct-ink); }
.me-page .me-parents-entry {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 0;
  padding: 16px var(--card-inset); text-decoration: none; color: inherit;
}
.me-page .me-parents-copy { display: grid; gap: 2px; min-width: 0; }
.me-page .me-parents-entry .section-head { margin-block-end: 0; min-height: 0; }
.me-page .me-parents-entry > svg:last-child { margin-inline-start: auto; color: var(--ink-muted); }
.me-page .me-parents-note { font-size: var(--type-supporting); color: var(--ink-muted); }
@media (hover: hover) and (pointer: fine) {
  .me-page .me-parents-entry:hover { border-color: var(--brand-strong); }
}

/* 统一错误面板（§5.15）：浅紫底、居中、插画在文上；只说「暂时读不到」。 */
.me-page .error-panel {
  background: var(--lavender); border-color: var(--lavender-deep);
  grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;
}
.me-page .error-panel h2 { font-size: var(--type-panel-title); }
.me-page .error-panel-actions { justify-content: center; }

/* 折叠件题头统一触控高：details 的 summary 是主要点击目标，一律不低于 44px */
details > summary { min-block-size: 44px; display: flex; align-items: center; }

/* ---- 门面三页（ENG-UI-FACADE） ---- */
/* 落地页（landing.css 引本文件后复用）、登录页与年级引导页共用。
   本段只增新类：facade-state 是出错态与空状态共用的统一面板（§5.14 与 §5.15），
   其余选择器都收在各自页面的类名下，不碰其他页。 */

/* 统一状态面板：浅紫底、居中、插画在文上 */
.paper-card.facade-state {
  display: grid; gap: 12px; justify-items: center; text-align: center;
  padding: clamp(32px, 5vw, 48px);
  background: var(--lavender); border-color: var(--lavender-deep);
}
.paper-card.facade-state h2 { margin: 0; font-size: var(--type-panel-title); }
.paper-card.facade-state p { margin: 0; font-size: var(--type-body); max-inline-size: 34em; }
.facade-state-art { inline-size: clamp(96px, 12vw, 132px); display: grid; justify-items: center; }
.facade-state-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* 登录页：页头标题加导语；卡头与行内提示跟共用词汇走 */
.login-head { margin-block: clamp(18px, 3vw, 32px) 24px; }
.login-head h1 {
  margin: 0; font-size: var(--type-section-title);
  line-height: 1.08; letter-spacing: -0.065em; font-weight: 800;
}
.login-head .lead { margin: 12px 0 0; }
.login-card { margin-block: 16px 0; }
.login-card .section-head { margin-block-end: 12px; }
.login-card .section-head > svg { color: var(--brand); }
.login-record {
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  padding: 10px 14px; border-radius: var(--radius-row);
  background: var(--lavender); font-size: var(--type-supporting); color: var(--ink);
}
.login-record svg { flex: 0 0 auto; color: var(--brand-strong); }
.login-offline .login-actions { margin-block-start: 8px; }

/* 年级引导页：步卡、步进器、分段控件与摘要卡 */
.guide-head h1 {
  font-size: var(--type-section-title);
  line-height: 1.08; letter-spacing: -0.065em; font-weight: 800;
}
.guide-body { display: grid; gap: 16px; }
.guide-body .paper-card { margin: 0; }
.guide-host { display: grid; gap: 16px; }
.guide-step { margin: 0; }
.guide-step .section-head { margin-block-end: 12px; }
.guide-step .section-head > svg { color: var(--brand); }
.guide-step-desc { margin: 0 0 14px; color: var(--ink-muted); }
.guide-stepbar { margin: 0 0 4px; }
.guide-intro { margin: 0; }
.guide-intro p { margin: 0; }
.guide-intro .section-head { margin-block-end: 12px; }
.guide-seg { margin-block: 14px 4px; }
.guide-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.guide-choice-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-summary-list { display: grid; gap: 8px; }
.guide-summary-list .entry-row { min-height: 56px; }
.guide-value {
  margin-inline-start: auto; flex: 0 0 auto; max-inline-size: 60%;
  overflow-wrap: anywhere; text-align: end;
  color: var(--ink-muted); font-size: var(--type-supporting);
}
@media (width < 560px) {
  .guide-choice-2col { grid-template-columns: minmax(0, 1fr); }
}
/* ---- 内容库四页（ENG-UI-LIBRARY） ---- */
/* 词表、范文库、练习纸、试卷室共用的新语言词汇：统一错误面板、行式列表行、
   折叠件内容体、卡头计数。各页特有的样式分段跟在共用词汇之后。 */

/* 出错态的页面主标题：出错也得有 h1，屏幕阅读器按标题层级找页面主旨。 */
.lib-title { margin: clamp(18px, 3vw, 32px) 0 0; font-size: var(--type-section-title); line-height: 1.08; letter-spacing: -0.065em; font-weight: 800; }

/* 统一错误面板（组件规格 §5.15）：浅紫居中、插画在文上、一个次按钮，居中窄轨。 */
.lib-error {
  display: grid; gap: 12px; justify-items: center; text-align: center;
  background: var(--lavender); border-radius: var(--radius-panel);
  padding: var(--card-inset); margin: 16px auto; max-inline-size: 560px;
}
.lib-error .error-panel-art { display: grid; justify-items: center; }
.lib-error h2 { margin: 0; font-size: var(--type-panel-title); }
.lib-error p { margin: 0; font-size: var(--type-body); }

/* 行式列表行（四页共用）：图位 + 标题 + 元数据列 + chevron，整行一个链接。
   元数据成列不成文字流，行尾 chevron 跟随内容列。行高与旧目录行同档（触控下限 44）。 */
.lib-list { display: grid; gap: 2px; }
.lib-row {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 8px 12px; border-radius: var(--radius-row);
  text-decoration: none; color: var(--ink); min-inline-size: 0;
}
.lib-row > svg:first-child { color: var(--brand); flex: 0 0 auto; }
.lib-row > svg:last-child { color: var(--ink-muted); flex: 0 0 auto; }
.lib-row-title { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; font-size: var(--type-body); font-weight: 650; }
.lib-row-meta {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  font-size: var(--type-supporting); color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .lib-row:hover { background: var(--lavender); }
}
/* 窄档：元数据折到标题下方第二行，右对齐，不把行撑到两倍高。 */
@media (width <= 560px) {
  .lib-row { flex-wrap: wrap; }
  .lib-row-meta { margin-inline-start: auto; flex-wrap: wrap; justify-content: flex-end; }
}

/* 列表组名：行式列表之上的小组标题（练习纸的段名、平铺视图的组名）。 */
.lib-group-name {
  margin: 12px 0 4px; font-size: var(--type-label); line-height: 1.3;
  font-weight: 700; letter-spacing: 0.04em; color: var(--brand-strong);
}
.lib-list + .lib-group-name { margin-block-start: 16px; }

/* 折叠件：题头复用学期折叠件（semester-fold），这里收薄题头与展开区，
   十一件折叠件的试卷室才压得进登记页高。 */
.lib-fold { margin: 0; }
.lib-fold > summary { padding-block: 10px; min-height: 44px; }
.lib-fold .lib-fold-body { display: grid; gap: 8px; padding: 0 var(--card-inset) 12px; }
.lib-fold-body > * { min-inline-size: 0; }

/* 卡头右侧计数：真实数字，右贴卡头行（进度说明、册数）。 */
.lib-head-count { margin-inline-start: auto; font-size: var(--type-supporting); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* 货架列宽收到 16.5rem：题头吃掉两侧内衬后行宽恰是 272 节奏的整倍数，
   第四张卡右缘差 8px 贴边、第五张不露头，末项露头契约（peek）会红。264 加 16 的节奏错开整倍数。 */
.vocab-shelves .scroll-row,
.lib-fold-body .scroll-row { grid-auto-columns: min(16.5rem, 68%); }
/* 折叠件内的货架：辑名已在折叠题头，货架自己的标题藏起、步进按钮右贴。 */
.lib-fold-body .scroll-row-head { justify-content: flex-end; margin-block-end: 8px; }
.lib-fold-body .scroll-row-head h3 { display: none; }

/* 词表：页高预算紧，货架区间距与卡距都收薄。 */
.vocab-shelves { display: grid; gap: 8px; margin-block: 16px; }
/* 栅格项默认 min-width: auto（等于内容宽），横滚货架会把容器撑成内容总宽（实测 2717px
   塞进 1200px 的轨），越出的部分被上游 overflow 裁掉，页面上就是卡片被切断。 */
.vocab-shelves > * { min-inline-size: 0; }
.vocab-shelves .shelf { margin-block-end: 0; }
.vocab-progress { margin-block-end: 16px; }
.vocab-progress .bar-track { margin-block-end: 12px; }
.vocab-first { justify-self: start; }

/* 词表：组页与附表页的操作行（状态钉加看完按钮）。 */
.vocab-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block: 0 12px; }
.vocab-toolbar .semester-done-toggle { margin-top: 0; }
/* 词表：日光黄读表提示（本页唯一色彩事件）、讲解折叠件与表卡的间距都收薄
   （不规则动词全表平铺 106 行，页高压在 5.6 屏登记预算内）。 */
.vocab-notice { margin: 0 0 8px; }
.vocab-forms-help { margin-block: 0 8px; }
.vocab-table-panel { margin-block: 16px; }
.vocab-list { margin-block: 16px; }

/* 范文库：六类话题标签页按分段控件的胶囊语言排（tablist 与 tab 的既有语义不变）。 */
.essays-tabs [role="tablist"] {
  display: flex; flex-wrap: wrap; gap: 2px; padding: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); inline-size: fit-content; max-inline-size: 100%;
}
.essays-tabs [role="tab"] {
  min-height: 44px; padding: 6px 18px;
  border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--ink-muted);
  font: inherit; font-size: var(--type-body); font-weight: 650; cursor: pointer;
}
.essays-tabs [role="tab"][aria-selected="true"] { background: var(--lavender); color: var(--brand-strong); font-weight: 700; }
.essays-tabs [role="tabpanel"] { padding-block: 0; }
@media (width <= 760px) {
  .essays-tabs [role="tablist"] { inline-size: 100%; }
  .essays-tabs [role="tab"] { flex: 1 1 auto; }
}

/* 范文库：目录行与详情页的段位钉，胶囊形与状态钉同一档。 */
.essays-stage {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: var(--radius-pill); background: var(--lavender); color: var(--brand-strong);
  font-size: var(--type-label); font-weight: 700; white-space: nowrap;
}

/* 范文库：自查清单面板（本页唯一浅紫重点面板），区块标题行打头。 */
.essays-checklist {
  margin-block: 0 16px; padding: 20px var(--card-inset);
  background: var(--lavender); border: 1px solid var(--lavender-deep);
  border-radius: var(--radius-panel);
}
.essays-checklist .section-head { margin-block-end: 8px; }
.essays-tips { margin-block: 0 16px; }
.essays-section .section-head { margin-block-end: 8px; }

/* 试卷室：辑折叠卡与货架的间距、页头收薄（十件折叠件的页高压在登记预算内）。 */
.papers-head { margin-block: 16px 12px; }
.papers-head .lead { margin-top: 8px; }
.papers-shelves { display: grid; gap: 16px; margin-block: 0 12px; }
.papers-shelves .semester-fold { margin: 0; }
.papers-shelves .shelf { margin-block-end: 0; }
.papers-flat-series { margin-block: 8px; }

/* 练习纸：段卡纵排间距。 */
.worksheets-head { margin-block: clamp(18px, 3vw, 30px) 16px; }

/* 范文库：详情页区块间距收一档，页高压回登记预算。 */
.essays-back { margin-top: 8px; }
.essays-section { margin-block: clamp(20px, 3vw, 32px); }
/* ---- 测评四页（ENG-UI-ASSESS） ---- */
/* 摸底测评、跳级测、考场语篇、考区档案：卡头一律 .section-head 带图位（图位定宽由
   学习台段的 .section-head 规则看守），出错态全站统一，折叠件与行式明细沿用地图页
   同一套骨架（行档圆角，小高件不碰 panel 档，见地图段首说明）。 */

/* 安静页头：eyebrow 加标题加一句导语（作答类页面不用门面 hero，无装饰无旋转） */
.as-head { display: grid; gap: 12px; margin-block: clamp(18px, 3vw, 32px) 24px; }
.as-head .eyebrow { margin: 0; }
.as-head h1 { margin: 0; }
.as-head h1:not(.display-title) { font-size: var(--type-section-title); line-height: 1.08; letter-spacing: -0.065em; font-weight: 800; }
.as-head .lead { margin: 0; }

/* 统一错误面板（组件规格 §5.15）：浅紫居中，插画加标题加一句说明加我知道了 */
.as-error {
  display: grid; gap: 12px; justify-items: center; text-align: center;
  background: var(--lavender); border: 1px solid var(--lavender-deep); border-radius: var(--radius-panel);
  padding: var(--card-inset); margin: 16px auto; max-inline-size: 560px;
}
.as-error h2 { margin: 0; font-size: var(--type-panel-title); }
.as-error p { margin: 0; font-size: var(--type-body); }
.as-error .error-panel-art { display: grid; justify-items: center; }
.as-error .btn { margin-block-start: 4px; }

/* 空状态面板：雷哥插画加标题加一句说明加一个次要行动（不放主行动色块） */
.as-empty { padding-block: 24px; }
.as-empty .empty-state { gap: 16px; }
.as-empty-art { inline-size: clamp(96px, 12vw, 132px); }

/* 卡头右侧计数：作答进度与篇数空数，成列不成文字流 */
.as-q-count {
  margin-inline-start: auto; flex: 0 0 auto; white-space: nowrap;
  font-size: var(--type-supporting); color: var(--ink-muted); font-variant-numeric: tabular-nums;
}

/* 说明与进度备注：普通段落配小标签，不占色彩事件名额 */
.as-note { margin: 4px 0; }

/* 行动行：主行动加次要行动，窄屏自然折行 */
.as-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 16px; }

/* 成绩统计：两个真实数字，等分格 */
.as-result-stats { gap: 8px; margin-block: 8px 4px; }
.as-result-stats .stat { min-width: 0; flex: 1 1 0; }

/* 折叠件：逐章判定明细与来源清单（同地图页章折叠件骨架，行档圆角） */
.as-fold { border: 1px solid var(--border); border-radius: var(--radius-row); background: var(--canvas); margin-block-start: 16px; }
.as-fold > summary {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px;
  border-radius: var(--radius-row); list-style: none;
}
.as-fold > summary::-webkit-details-marker { display: none; }
.as-fold > summary::marker { content: none; }
.as-fold-title { font-size: var(--type-body); font-weight: 700; min-width: 0; }
.as-fold-count {
  margin-inline-start: auto; flex: 0 0 auto; white-space: nowrap;
  font-size: var(--type-supporting); color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.as-fold > summary > svg { color: var(--ink-muted); flex: 0 0 auto; }
.as-fold[open] > summary > svg { transform: rotate(180deg); transition: var(--motion-feedback); }
.as-fold-body { display: grid; gap: 2px; padding: 0 8px 8px; }

/* 行式明细：题名加元数据列加状态钉（行本身不可点，就不做成链接） */
.as-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--radius-row); }
.as-row-title { flex: 1 1 auto; min-width: 0; font-size: var(--type-body); overflow-wrap: anywhere; }
.as-row-meta { flex: 0 0 auto; font-size: var(--type-supporting); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.as-row .pin { flex: 0 0 auto; }

/* 考区选择：选项按钮栅格，窄屏自动折成两行 */
.as-region-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); margin-block: 4px 12px; }

/* 考区档案：语法侧重与备考建议两栏，触控档单栏顺排 */
.as-info-grid { display: grid; gap: 16px; align-items: start; }
.as-info-grid > .paper-card { margin: 0; }
@media (min-width: 1024px) { .as-info-grid { grid-template-columns: 1fr 1fr; } }

/* 语篇清单：章卡内篇目行复用 .entry-row 骨架，章距由卡片外边距承担 */
.as-passage-list { display: grid; gap: 8px; }
.as-cloze-chapter .section-head { margin-block-end: 12px; }
/* ---- 家长看板与冲刺（ENG-UI-PARENT） ---- */
/* 本段只管 parents.html 与 sprint.html 的自有件；共用件（卡、卡头、钉、条、行、空态、错误面板）
   一律用前面的共用类，这里只补两页自己的排布。全部选择器收在 pb- 与 sp- 前缀下。 */

/* 家长看板：两栏栅格，进度、说明、口径三卡通栏；触控档单栏顺排。 */
.pb-grid { display: grid; gap: 16px; margin-block: 16px; }
.pb-grid > .pb-card { margin: 0; }
@media (min-width: 761px) {
  .pb-grid { grid-template-columns: 1fr 1fr; }
  .pb-grid > .pb-wide { grid-column: 1 / -1; }
}

/* 统计块：等分格、竖分隔线，数字与单位分开排（沿用 .stat 词汇，拆掉盒子留分隔）。 */
.pb-card .pb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; }
.pb-card .pb-stats .stat {
  min-width: 0; border: 0; border-radius: 0; background: transparent; padding: 8px 16px;
}
.pb-card .pb-stats .stat + .stat { border-inline-start: 1px solid var(--border); }
@media (width < 560px) {
  .pb-card .pb-stats { grid-template-columns: 1fr; }
  .pb-card .pb-stats .stat + .stat { border-inline-start: 0; border-block-start: 1px solid var(--border); }
}

/* 行内说明与文字链：说明走 supporting 档，链接带触控高。 */
.pb-note { margin: 12px 0 0; }
.pb-plain { margin: 0 0 8px; font-size: var(--type-body); }
.pb-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--brand); font-weight: 600; text-decoration: none; border-radius: var(--radius-row);
}
@media (hover: hover) and (pointer: fine) {
  .pb-link:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* 能力域折叠件：题头图位加域名加计数，右侧小进度条与百分比。 */
.pb-domains { display: grid; gap: 16px; margin-block-start: 16px; }
.pb-domain {
  border: 1px solid var(--border); border-radius: var(--radius-row); background: var(--canvas);
}
.pb-domain > summary {
  display: flex; align-items: center; gap: var(--card-mark-gap);
  padding: 10px 16px; min-height: 56px; cursor: pointer;
}
.pb-domain > summary::-webkit-details-marker { display: none; }
.pb-domain > summary::marker { content: none; }
.pb-domain > summary > .obj { flex: 0 0 var(--card-mark); inline-size: var(--card-mark); }
.pb-domain-copy { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.pb-domain-copy h3 { margin: 0; font-size: var(--type-body); font-weight: 700; }
.pb-domain-count { margin: 0; font-size: var(--type-label); color: var(--ink-muted); }
.pb-domain-side {
  flex: 0 0 auto; display: grid; gap: 2px; align-items: center;
  inline-size: clamp(120px, 22%, 200px);
}
.pb-domain-side .bar { width: 100%; block-size: 8px; }
.pb-domain-pct { font-size: var(--type-label); color: var(--ink-muted); text-align: end; }
.pb-domain > summary > svg { flex: 0 0 auto; color: var(--ink-muted); transition: var(--motion-feedback); }
.pb-domain[open] > summary > svg { transform: rotate(180deg); }
.pb-domain-body { padding: 2px 16px 12px calc(16px + var(--card-mark) + var(--card-mark-gap)); }

/* 章行：章名加计数一行，下挂八像素细条；跳级测标记用 mint 钉单列。 */
.pb-ch { padding-block: 10px; }
.pb-ch + .pb-ch { border-block-start: 1px solid var(--border); }
.pb-ch-line { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.pb-ch-line h4 { margin: 0; font-size: var(--type-supporting); font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.pb-ch-meta { margin-inline-start: auto; font-size: var(--type-label); color: var(--ink-muted); white-space: nowrap; }
.pb-ch .bar { margin-block-start: 6px; block-size: 8px; }

/* 这一周学了什么：勾选行清单。 */
.pb-week-list { display: grid; margin-block-end: 4px; }
.pb-week-row {
  display: flex; align-items: center; gap: 8px; padding-block: 10px;
  font-size: var(--type-body);
}
.pb-week-row + .pb-week-row { border-block-start: 1px solid var(--border); }
.pb-week-row svg { flex: 0 0 auto; color: var(--state-correct-ink); }

/* 下一步建议：行式列表复用 .entry-row 骨架，本页单列。 */
.pb-next-list { display: grid; gap: 8px; }

/* 错题订正空态：雷哥歇一歇插画。 */
.pb-relax { inline-size: clamp(96px, 12vw, 132px); margin-block: 8px; }

/* 家长指引折叠：题目一行，点开读正文。 */
.pb-guide-item { border-block-start: 1px solid var(--border); }
.pb-guide-item:first-of-type { border-block-start: 0; }
.pb-guide-item > summary {
  display: flex; align-items: center; gap: 8px; padding-block: 8px; cursor: pointer;
}
.pb-guide-item > summary::-webkit-details-marker { display: none; }
.pb-guide-item > summary::marker { content: none; }
.pb-guide-title { font-size: var(--type-body); font-weight: 650; }
.pb-guide-item > summary > svg { margin-inline-start: auto; color: var(--ink-muted); transition: var(--motion-feedback); }
.pb-guide-item[open] > summary > svg { transform: rotate(180deg); }
.pb-guide-body { padding-block-end: 14px; }
.pb-guide-body p { margin: 0 0 10px; line-height: 1.8; font-size: var(--type-body); }
.pb-guide-body p:last-child { margin-block-end: 0; }

/* 记录口径：closing 浅紫面板的勾选要点。 */
.pb-promise-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pb-promise-list li { display: flex; align-items: center; gap: 8px; font-size: var(--type-body); }
.pb-promise-list svg { flex: 0 0 auto; color: var(--state-correct-ink); }

/* 家长看板块内统一错误面板：浅紫、居中、一个我知道了。 */
.pb-error {
  background: var(--lavender); border: 1px solid var(--lavender-deep);
  border-radius: var(--radius-panel); padding: 24px;
  display: grid; justify-items: center; gap: 8px; text-align: center;
}
.pb-error h3 { margin: 0; font-size: var(--type-card-title); }
.pb-error p { margin: 0; font-size: var(--type-body); }
.pb-error .btn { justify-self: center; }

/* 冲刺专区：页头与讲单。 */
.sp-head { margin-block: 16px 4px; }
.sp-head .lead { margin-block-start: 4px; }
.sp-card .section-head { margin-block-end: 12px; }
.sp-card .sp-row { min-height: 48px; padding-block: 6px; }
.sp-title { margin: 0; font-size: var(--type-section-title); line-height: 1.08; letter-spacing: -0.065em; font-weight: 800; }
.sp-head .lead { margin: 12px 0 0; }
.sp-subtitle { margin: 8px 0 0; color: var(--ink-muted); font-size: var(--type-body); }
.sp-back { margin-block: 12px 0; }
.sp-summary { margin: 0 0 8px; max-inline-size: var(--track-reading); line-height: 1.8; font-size: var(--type-body); }

/* 裸节：h2 直接挂页面，行式清单不带卡壳（讲单之下的子区与讲页侧栏用）。 */
.sp-bare { margin-block: 12px; }
.sp-bare > h2 { margin: 0 0 4px; font-size: var(--type-card-title); font-weight: 700; }
.sp-bare .sp-rows { margin-block: 4px; }
.sp-bare .sp-row { min-height: 48px; padding-block: 6px; }

/* 讲单行：讲号加讲名加计数，行尾 chevron，整行单链接。 */
.sp-rows { display: block; }
.sp-row {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding-block: 8px;
  border-block-start: 1px solid var(--border); text-decoration: none; color: var(--ink);
  border-radius: var(--radius-row);
}
.sp-row:first-child { border-block-start: 0; }
.sp-row-no { flex: 0 0 64px; font-size: var(--type-label); color: var(--ink-muted); font-weight: 650; font-variant-numeric: tabular-nums; }
.sp-row-title { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; font-size: var(--type-body); font-weight: 650; }
.sp-row-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.sp-count {
  font-size: var(--type-supporting); color: var(--ink-muted); white-space: nowrap;
  min-inline-size: 5.5em; text-align: end; font-variant-numeric: tabular-nums;
}
.sp-row > svg:last-child { flex: 0 0 auto; color: var(--ink-muted); }
@media (hover: hover) and (pointer: fine) {
  .sp-row:hover { background: var(--lavender); }
  .sp-row:hover .sp-row-title { color: var(--brand-strong); }
}
@media (width < 560px) {
  .sp-row { flex-wrap: wrap; }
  .sp-row-title { flex: 1 1 calc(100% - 64px); }
  .sp-row-meta { justify-content: flex-start; }
}

/* 节说明一句。 */
.sp-note { margin: 0 0 8px; color: var(--ink-muted); font-size: var(--type-body); }

/* 要点：悬挂序号列表，每条标题加正文加例句（英文原句与中文释义成对）。 */
.sp-points { list-style: none; counter-reset: sppt; margin: 0; padding: 0; display: grid; gap: 14px; }
.sp-point { position: relative; padding-inline-start: 44px; }
.sp-point::before {
  counter-increment: sppt; content: counter(sppt);
  position: absolute; inset-inline-start: 0; inset-block-start: 2px;
  inline-size: 28px; block-size: 28px; border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--brand); color: var(--surface);
  font-size: var(--type-label); font-weight: 700;
}
.sp-point h3 { margin: 0 0 4px; font-size: var(--type-card-title); font-weight: 700; }
.sp-point-body { margin: 0; font-size: var(--type-body); line-height: 1.8; }
.sp-examples { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.sp-examples li {
  display: grid; gap: 2px; padding: 8px 16px;
  background: var(--canvas); border-radius: var(--radius-inline);
}
.sp-example-en { margin: 0; font-size: var(--type-body); font-weight: 650; }
.sp-example-zh { margin: 0; font-size: var(--type-supporting); color: var(--ink-muted); }

/* 练一练抽组。 */
.sp-start { min-height: 48px; }
.sp-set { margin-block-start: 16px; }
.sp-again { margin-block-start: 16px; }

/* 冲刺出错态：浅紫面板居中，插画、标题、一句说明、一个我知道了。 */
.sp-error {
  margin-block: 16px; padding: clamp(32px, 5vw, 48px);
  background: var(--lavender); border: 1px solid var(--lavender-deep);
  border-radius: var(--radius-panel);
  display: grid; justify-items: center; gap: 12px; text-align: center;
}
.sp-error-art { inline-size: clamp(96px, 12vw, 132px); }
.sp-error h2 { margin: 0; font-size: var(--type-panel-title); }
.sp-error p { margin: 0; font-size: var(--type-body); }

/* 栅格轨道通则：裸 1fr 的最小尺寸是 min-content，内容一宽就把列撑破并越出容器。
   本站所有多列容器的子项一律放开最小尺寸，轨道写 minmax(0, 1fr)。 */
.prac-side > *, .dash-col > *, .entry-row-list > * { min-inline-size: 0; }

/* ---- 容器查询：组件按自己容器的宽度排版，不按视口 ----
   起因（2026-08-19 产品负责人指出）：同一张小卡放进 481px 的主栏与 344px 的侧栏，
   本该有两种排法，但全站只有一套按视口判断的断点，1440 视口下侧栏被迫用宽屏排法，
   于是「本学期地图」五个字折成两行、「查看全部」也折行。
   容器查询让卡自己知道被放进了多宽的格子。 */
.mini-card, .paper-card { container-type: inline-size; }

@container (width < 380px) {
  /* 窄容器：卡头收紧，标题不折行，「查看全部」只留箭头 */
  /* 图位宽与间距不动：它们决定全站标题左缘那条线，收窄会多出一条对齐线，
     得不偿失（实测收到 32px 后学习台内容线从 3 条变 4 条，第五门当场报红）。
     窄容器只做两件事：标题不折行、「查看全部」只留箭头。 */
  .section-head h2, .section-head h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .section-head .section-more > span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .section-head .section-more { padding-inline: 4px; }
  .stat-row { gap: 6px; }
  .mini-card .stat { padding: 10px 6px; }
}