.zhuyin-practice-page {
  --zhuyin-practice-frame-width: 980px;
  /* Light-theme token overrides (theme_posture: light) — warm paper + ink */
  --color-bg: #f5f0e8;
  --color-surface: #faf7f0;
  --color-surface-2: #f5f0e8;
  --color-surface-3: #ece5d8;
  --color-text: #2c2420;
  --color-text-muted: #6f6357;
  --color-border: rgba(100, 80, 60, 0.25);
  /* tool-local accents (印泥紅 ink palette, shared with the character tool) */
  --sop-ink: #2c2420;
  --sop-seal: #b23b2e;
  --sop-grid: rgba(178, 59, 46, 0.32);
  --sop-grid-soft: rgba(178, 59, 46, 0.16);
  --sop-paper: #fbf8f2;
  --sop-outline: #d9cdba;
}

.zhuyin-practice-page .tool-frame {
  max-width: var(--zhuyin-practice-frame-width);
}

.zhuyin-practice-page .tool-header-block {
  max-width: 640px;
}

.zhuyin-practice-page .page-title {
  max-width: 16ch;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 0.98;
}

.zhuyin-practice-page .page-subtitle {
  max-width: 46ch;
}

/* ── Layout: hero stage + picker aside ───────────────────────────── */
.sop {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 22px;
  align-items: start;
}

.sop__stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface);
}

/* ── The hero: big 米字格 writing square ──────────────────────────── */
.sop__writer-wrap {
  position: relative;
  width: 100%;
  /* Bound by viewport HEIGHT too, so the symbol + reading + 示範/描寫/重來 buttons
     stay on one screen (a classroom projector is often only 720–900px tall). */
  max-width: min(560px, 48vh);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: var(--sop-paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 8px 24px rgba(80, 60, 40, 0.1);
}

.sop__grid {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--sop-grid);
  border-radius: 16px;
  background-image:
    linear-gradient(to right, transparent calc(50% - 0.75px), var(--sop-grid) calc(50% - 0.75px), var(--sop-grid) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(to bottom, transparent calc(50% - 0.75px), var(--sop-grid) calc(50% - 0.75px), var(--sop-grid) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.6px), var(--sop-grid-soft) calc(50% - 0.6px), var(--sop-grid-soft) calc(50% + 0.6px), transparent calc(50% + 0.6px)),
    linear-gradient(to bottom left, transparent calc(50% - 0.6px), var(--sop-grid-soft) calc(50% - 0.6px), var(--sop-grid-soft) calc(50% + 0.6px), transparent calc(50% + 0.6px));
}

/* 田字格 mode: keep only the centre cross (drop the 米字格 diagonals) */
.sop__writer-wrap[data-guide="tian"] .sop__grid {
  background-image:
    linear-gradient(to right, transparent calc(50% - 0.75px), var(--sop-grid) calc(50% - 0.75px), var(--sop-grid) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(to bottom, transparent calc(50% - 0.75px), var(--sop-grid) calc(50% - 0.75px), var(--sop-grid) calc(50% + 0.75px), transparent calc(50% + 0.75px));
}

.sop__guide-toggle {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  /* 40px (up from 32) so a young child's finger reaches it — this is the
     "simpler grid" control the FAQ points low-grade learners to. */
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-text-muted);
  background: var(--sop-paper);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
}
.sop__guide-toggle:hover { color: var(--color-text); border-color: var(--sop-seal); }

.sop__writer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.sop__writer svg { display: block; }

/* Visually hidden but available to screen readers (stroke-order description). */
.sop__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sop__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #256b41;
  background: rgba(76, 175, 110, 0.14);
  border: 1px solid rgba(76, 175, 110, 0.4);
  border-radius: 999px;
}

/* Completion seal stamp — animates over the writer when a symbol is finished */
.sop__stamp {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  background: var(--sop-seal);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(178, 59, 46, 0.4);
  opacity: 0;
  pointer-events: none;
  transform: scale(0.4) rotate(-18deg);
}

.sop__stamp.is-stamping { animation: sop-stamp 1.3s ease forwards; }

@keyframes sop-stamp {
  0% { opacity: 0; transform: scale(1.6) rotate(-18deg); }
  18% { opacity: 1; transform: scale(0.92) rotate(-12deg); }
  28% { transform: scale(1) rotate(-12deg); }
  80% { opacity: 1; transform: scale(1) rotate(-12deg); }
  100% { opacity: 0; transform: scale(1) rotate(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sop__stamp.is-stamping { animation: sop-stamp-fade 1s ease forwards; }
  @keyframes sop-stamp-fade { 0%,80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
}

/* ── Meta row under the hero ─────────────────────────────────────── */
.sop__meta {
  width: min(74vw, 380px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sop__charinfo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sop__bigchar {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sop-seal);
}

.sop__charstats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.sop__charstats b {
  color: var(--color-text);
  font-size: 1.05rem;
}

.sop__readings { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* 例字 — the anchor for a Taiwanese child: see/hear the word the symbol's sound
   begins (ㄅ → 玻). Most prominent line in the meta card, in 印泥紅. */
.zyp__example {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sop-seal);
  letter-spacing: 0.02em;
}
.zyp__example:empty { display: none; }

/* romanised reading (learner aid) — quieter, sits beside the example word */
.zyp__sound {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.03em;
}
.zyp__sound:empty { display: none; }

/* 念 pronounce button — trailing edge of the char-info row */
.sop__speak {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--sop-seal);
  background: var(--sop-paper);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.12s, background 0.12s;
}
.sop__speak:hover {
  transform: translateY(-1px);
  border-color: var(--sop-seal);
  background: rgba(178, 59, 46, 0.08);
}
.sop__speak svg { width: 22px; height: 22px; }
.sop__speak.is-speaking { background: var(--sop-seal); color: #fff; border-color: var(--sop-seal); }

.sop__feedback {
  color: var(--sop-seal);
  font-weight: 600;
  text-decoration: underline;
}

.sop__picker-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.sop__print-btn { flex: none; min-height: 36px; }

/* ── Printable tracing worksheet (screen-hidden; shown only in print) ── */
.sop__print-sheet { display: none; }

@media print {
  .page-shell { display: none !important; }
  body > .sop__print-sheet { display: block !important; color: #000; font-family: inherit; }

  .ps-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 4px; }
  .ps-title { font-size: 18pt; font-weight: 700; }
  .ps-meta { font-size: 11pt; }
  .ps-note { margin: 2px 0 12px; font-size: 9pt; color: #555; }

  .ps-row { display: flex; align-items: center; gap: 8px; break-inside: avoid; margin-bottom: 6px; }
  .ps-label { width: 2.4cm; flex: none; text-align: center; }
  .ps-char { display: block; font-size: 20pt; font-weight: 600; }
  .ps-zhuyin { display: block; font-size: 10pt; }
  .ps-cells { display: flex; gap: 0; }

  .ps-cell {
    position: relative;
    width: 1.8cm;
    height: 1.8cm;
    border: 1px solid #000;
    margin-left: -1px;
  }
  .ps-cell::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed #bbb; }
  .ps-cell::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px dashed #bbb; }
  .ps-trace { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30pt; color: #ccc; }

  @page { size: A4 portrait; margin: 1.2cm; }
}

/* ── Controls ────────────────────────────────────────────────────── */
.sop__controls {
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: min(74vw, 380px);
}

.sop__controls .button {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* A larger leading glyph so a young (barely-reading) child recognises the action
   at a glance — ▶ watch, ✏ write, ↻ redo — while the label stays for older readers. */
.sop__act-ico { font-size: 1.5em; line-height: 1; }

.zhuyin-practice-page .button-secondary {
  color: var(--color-text);
  background: var(--sop-paper);
  border: 1px solid var(--color-border);
}
.zhuyin-practice-page .button-secondary:hover { border-color: var(--sop-seal); color: var(--sop-seal); }
.zhuyin-practice-page .button:focus-visible,
.zhuyin-practice-page .button-secondary:focus-visible,
.zhuyin-practice-page .sop__tab:focus-visible,
.zhuyin-practice-page .sop__charbtn:focus-visible {
  outline: 2px solid var(--sop-seal);
  outline-offset: 2px;
}

.sop__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.sop__nav .button-sm { min-width: 44px; min-height: 44px; font-size: 1rem; }

.sop__progress {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 7ch;
  text-align: center;
}

.sop__status {
  margin: 0;
  min-height: 1.4em;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
}
.sop__status[data-tone="success"] { color: #256b41; }
.sop__status[data-tone="error"] { color: var(--sop-seal); }
.sop__status[data-tone="info"] { color: var(--color-text-muted); }

/* ── Picker aside ────────────────────────────────────────────────── */
.sop__picker {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  background: var(--color-surface-2);
}

/* 聲母 / 介音 / 韻母 group tabs — segmented pill row */
.sop__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sop__tab {
  padding: 8px 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.sop__tab:hover { color: var(--color-text); }
.sop__tab[aria-selected="true"] {
  color: #fff;
  background: var(--sop-seal);
  border-color: var(--sop-seal);
}
.sop__tab-count { font-size: 0.7rem; opacity: 0.75; font-weight: 600; }

.sop__chargrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 8px;
}

.sop__charbtn {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-text);
  background: var(--sop-paper);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.12s, box-shadow 0.12s;
}
.sop__charbtn:hover { transform: translateY(-1px); border-color: var(--sop-seal); }
.sop__charbtn[aria-current="true"] {
  color: #fff;
  background: var(--sop-seal);
  border-color: var(--sop-seal);
  box-shadow: 0 4px 12px rgba(178, 59, 46, 0.28);
}

/* green ✓ corner badge = the learner has completed this symbol */
.sop__charbtn[data-done="true"]::after {
  content: "✓";
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  color: #256b41;
}
.sop__charbtn[data-done="true"][aria-current="true"]::after { color: #fff; }

.sop__progress-pair {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}
.sop__lesson-progress { font-size: var(--text-sm); font-weight: 600; color: #256b41; }
.sop__total-progress { font-size: var(--text-xs, 0.78rem); font-weight: 600; color: var(--color-text-muted); }
.sop__lesson-progress:not(:empty) + .sop__total-progress {
  border-inline-start: 1px solid var(--color-border);
  padding-inline-start: 10px;
}
.sop__lesson-progress:empty,
.sop__total-progress:empty { display: none; }

.sop__provenance {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .sop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .sop__stage,
  .sop__picker { display: contents; }

  /* writer → reading meta → feedback → controls → nav → group tabs → grid */
  .sop__writer-wrap { order: 1; width: min(78vw, 300px); }
  .sop__meta { order: 2; }
  .sop__status { order: 3; }
  .sop__controls { order: 4; }
  .sop__nav { order: 5; }
  .sop__tabs { order: 6; }
  .sop__picker-bar { order: 7; }
  .sop__chargrid { order: 8; }
  .sop__provenance { order: 9; }

  .sop__status,
  .sop__controls,
  .sop__tabs,
  .sop__picker-bar,
  .sop__chargrid,
  .sop__meta,
  .sop__provenance {
    width: min(88vw, 360px);
  }

  .zhuyin-practice-page .page-title {
    max-width: none;
    font-size: clamp(2rem, 9vw, 2.7rem);
  }
}