/* 基础层：reset、排版基线、焦点、可访问性原语 */
@layer base {

  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    /* 极淡的纸纹：让米色不是一块纯色，而是"纸" */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
    font-family: var(--font-ui);
    font-size: var(--t-body);
    line-height: 1.7;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
  }

  /* ── 排版基线：只有这 8 个尺寸存在 ───────────────────────── */
  h1, h2, h3, p, figure, blockquote { margin: 0; }

  h1 {
    font-family: var(--font-display);
    font-size: var(--t-display);
    line-height: 1.2;
    letter-spacing: 0;
    font-weight: 600;
    text-wrap: balance;
    margin: var(--s3) 0;
  }

  h2 {
    font-family: var(--font-display);
    font-size: calc(var(--t-h2) + 4px);
    line-height: 1.35;
    letter-spacing: 0;
    font-weight: 600;
    text-wrap: balance;
  }

  h3 {
    font-family: var(--font-display);
    font-size: var(--t-h3);
    line-height: 1.5;
    font-weight: 600;
  }

  p { line-height: 1.75; }

  strong, b { font-weight: 700; }

  em { font-style: normal; color: var(--leaf); }

  small { font-size: var(--t-meta); }

  /* 元信息：把原来的「A · B · C」拆成两行 */
  .muted, .meta, .unit-english, .scene-type, .available-label, .story-unit {
    color: var(--muted);
    font-size: var(--t-meta);
    line-height: 1.7;
  }

  /* eyebrow 只保留在两处（复习 / 审核），不再是每段标题的装饰 */
  /* 栏目名：书眉式的小字，前面一根短横，不再是彩色圆点标签 */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    font-size: var(--t-micro);
    line-height: 1.6;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--muted);
  }

  .eyebrow::before {
    content: "";
    display: block;
    width: 14px;
    height: 1px;
    background: currentColor;
    opacity: .55;
  }

  /* 英文词条：整站的「书感」只来自这一处字体切换 */
  [lang="en"],
  .word-title,
  .flashcard .word-title,
  .memory-word h2,
  .textbook-flashcard > strong,
  .picture-word,
  .ready-unit h3 > span,
  .review-solution {
    font-family: var(--font-word);
    font-weight: 600;
    letter-spacing: 0;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a:hover { color: var(--leaf); }

  img, svg { display: block; max-width: 100%; }

  /* 线性图标：跟着字走，不撑行高 */
  .glyph {
    display: inline-block;
    vertical-align: -0.14em;
    flex-shrink: 0;
  }

  img { height: auto; }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }

  button {
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  button:disabled { cursor: default; opacity: .5; }

  a, [role="button"] { -webkit-tap-highlight-color: transparent; }

  /* ── 焦点：全站唯一一种焦点环 ──────────────────────────── */
  /* 排除 main[tabindex="-1"]：路由切换后程序化聚焦不该画出整屏描边 */
  :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--leaf);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }

  /* 画布类元素（场景热区）自带描边替代，避免双重焦点框 */
  .scene-svg :focus-visible { outline: none; }

  ::selection { background: var(--leaf-wash); color: var(--ink); }

  /* ── 可访问性原语 ──────────────────────────────────────── */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    top: var(--s3);
    left: var(--s3);
    z-index: var(--z-toast);
    padding: var(--s3) var(--s4);
    background: var(--leaf);
    color: var(--white);
    border-radius: var(--r-sm);
    font-size: var(--t-meta);
    transform: translateY(-200%);
    transition: transform .16s var(--ease);
  }

  .skip-link:focus-visible {
    transform: none;
    outline-color: var(--ink);
  }

  main:focus { outline: none; }

  .footnote {
    display: flex;
    gap: var(--s2);
    align-items: flex-start;
    margin-top: var(--s6);
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: var(--t-cap);
    line-height: 1.75;
  }

  .footnote svg { flex-shrink: 0; margin-top: .25em; }
}