/* Reference classroom system: warm paper, calm blue ink, tactile controls. */
:root {
  --paper: #faf7f0;
  --blue: #245fa5;
  --blue-pressed: #174b88;
  --ink: #293e50;
  --muted: #5d6d77;
  --line: #d9ddd9;
  --blue-soft: #edf4fc;
  --teal: #26705e;
  --teal-soft: #edf6f0;
  --gold-soft: #fff2ce;
  --shadow: 0 4px 12px #34493d09;
  color: var(--ink);
  background: var(--paper);
}
body { background: var(--paper); }
::selection { background: #d5e8fb; color: #193f6b; }
textarea { caret-color: var(--blue); }
:focus-visible { outline-color: var(--blue); }
.panel { border: 2px solid var(--line); border-radius: 22px; box-shadow: none; }
.btn { border-radius: 14px; font-weight: 700; }
.btn.primary { background: var(--blue); box-shadow: 0 3px 0 var(--blue-pressed); }
.btn.primary:hover { background: var(--blue-pressed); }
.btn.secondary { color: var(--blue); background: var(--blue-soft); }
.btn.outline { border: 2px solid var(--line); }
.btn.outline:hover { border-color: #9aaebc; background: #f8fafb; }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.btn:disabled { box-shadow: none; }
.header { max-width: 1080px; height: 76px; gap: 14px; }
.brand { gap: 10px; letter-spacing: 0; }
.brandmark { background: var(--blue); color: #ffdc78; border-radius: 14px; }
.brand small { letter-spacing: 1.3px; }
.header-note { display: none; }
.header-actions { gap: 8px; }
.header-actions .text-btn { border-radius: 12px; white-space: nowrap; min-width: 48px; }
.header-actions .text-btn:hover { background: var(--blue-soft); }
.restart-btn { background: #fff; border: 2px solid var(--line); padding-inline: 12px; }
.shell { max-width: 1080px; }
.setup-intro { display: flex; align-items: center; gap: 16px; margin: 8px auto 22px; }
.setup-intro h1 { font-size: 32px; letter-spacing: -.02em; margin: 0 0 5px; }
.setup-intro p { color: var(--muted); font-size: 16px; }
.setup-art { width: 80px; height: 80px; object-fit: contain; flex: 0 0 80px; mix-blend-mode: multiply; }
.setup-grid { max-width: 960px; gap: 18px; }
.setup-intro { max-width: 960px; }
.input-panel { padding: 24px; }
.input-panel h2 { font-size: 20px; }
.input-tools { gap: 8px; }
.input-tools .text-btn { padding-inline: 8px; }
.input-guide { margin: 4px 0 14px; color: var(--muted); }
.input-panel textarea { border: 2px solid #d9e2e6; background: #fcfdfd; min-height: 240px; font-size: 17px; line-height: 1.8; border-radius: 16px; }
.input-panel textarea:focus { outline: 2px solid var(--blue); outline-offset: 2px; border-color: transparent; }
.photo-entry { border: 1px solid #c7daeb; border-radius: 12px; }
.setup-ready { padding: 16px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.setup-count { color: var(--muted); font-size: 15px; font-weight: 600; }
.setup-actions { grid-template-columns: 112px minmax(100px,1fr) minmax(120px,.8fr); gap: 12px; }
.setup-actions .batch-setting { position: relative; gap: 5px; }
.setup-actions .batch-setting select { border: 2px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; padding-inline: 10px; }
.setup-actions>[data-action=openQuickReview] { color: var(--teal); border-color: #bfdbcd; background: var(--teal-soft); }
.setup-ready .batch-preview p { background: #f5f6f1; }
.setup-method { background: transparent; border: 0; border-radius: 0; }
.setup-method>summary { min-height: 64px; padding: 4px 6px; }
.setup-method>summary strong { font-size: 17px; }
.setup-method>summary small { color: var(--muted); }
.method-toggle { color: var(--blue); }
.setup-method-details { padding: 16px 6px; }
.setup-method .route .stepnum { background: var(--blue-soft); color: var(--blue); }
.setup-method .route li:last-child { grid-column: auto; }
.setup-method .route small { color: var(--muted); }
@media(max-width:800px) {
  .header { min-height: 68px; height: auto; padding-block: 8px; flex-wrap: nowrap; }
  .brand { font-size: 18px; }
  .brand small { display: none; }
  .brandmark { width: 32px; height: 32px; font-size: 21px; }
  .header-actions { width: auto; flex-wrap: nowrap; margin-left: auto; gap: 4px; }
  .header-actions .text-btn { flex: 0 0 auto; font-size: 14px; padding: 8px; }
  .setup-intro h1 { font-size: 28px; }
}
@media(max-width:600px) {
  .header { padding-inline: max(16px,env(safe-area-inset-left)); gap: 8px; }
  .brand { gap: 7px; font-size: 16px; white-space: nowrap; }
  .header-actions { gap: 2px; }
  .header-actions .text-btn { font-size: 14px; padding-inline: 6px; }
  .shell { padding-inline: max(16px,env(safe-area-inset-left)); margin-top: 8px; }
  .setup-intro { gap: 10px; margin: 4px 0 16px; }
  .setup-intro h1 { font-size: 26px; }
  .setup-intro p { font-size: 14px; }
  .setup-art { width: 58px; height: 58px; flex-basis: 58px; }
  .input-panel { padding: 16px; border-radius: 20px; }
  .input-panel h2 { font-size: 18px; }
  .input-tools { gap: 2px; }
  .input-tools .text-btn { font-size: 14px; padding-inline: 6px; }
  .input-guide { font-size: 14px; line-height: 1.6; }
  .input-panel textarea { font-size: 16px; min-height: 234px; padding-inline: 12px; }
  .setup-actions { grid-template-columns: minmax(76px,.8fr) minmax(60px,.8fr) minmax(88px,1fr); gap: 8px; }
  .setup-actions .batch-setting select { min-width: 0; padding-inline: 6px; }
  .setup-actions>.btn { font-size: 16px; }
  .setup-method>summary { gap: 8px; }
  .setup-method>summary small { font-size: 13px; }
}
@media(max-width:359px) {
  .header .brandmark { display: none; }
  .setup-intro p { max-width: 23ch; }
}
@media(prefers-reduced-motion:reduce) { .btn:active:not(:disabled) { transform: none; } }

/* REF-UI-02: one reading surface with a compact, state-aware route. */
.content-nav,.game-layout,.shell>.bar,.global-speech-settings { max-width: 880px; margin-inline: auto; }
.content-nav { padding: 0; border: 0; background: transparent; margin-bottom: 14px; }
.nav-controls { grid-template-columns: 92px minmax(0,1fr) 92px; gap: 10px; }
.nav-controls .btn { border-radius: 16px; min-height: 48px; padding: 8px 12px; font-size: 16px; }
#content-nav { font-weight: 700; color: var(--blue); }
.content-nav .list-chevron { display: inline-block; width: 7px; height: 7px; border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg); margin-left: 4px; }
.lesson-overview { justify-content: center; margin-top: 8px; font-size: 13px; }
.lesson-overview strong { color: var(--muted); font-weight: 500; }
.game-layout { grid-template-columns: minmax(0,1fr); gap: 14px; }
.trail { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; padding: 0; }
.trail-item,button.trail-item { display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 8px; margin: 0; padding: 9px 8px; min-height: 52px; border: 2px solid var(--line); border-radius: 16px; color: var(--muted); background: #fff; font-size: 15px; font-weight: 650; box-shadow: none; }
.trail-item .stepnum { width: 26px; height: 26px; font-size: 14px; background: #f1f3f2; color: var(--muted); }
.trail-item.active,.trail-item.resume { background: var(--blue-soft); border-color: #8cafd2; color: var(--blue); }
.trail-item.active .stepnum,.trail-item.resume .stepnum { background: var(--blue); color: #fff; }
.trail-item.done { background: var(--teal-soft); border-color: #c5dccc; color: var(--teal); box-shadow: none; }
.trail-item.done .stepnum { background: #dceee3; color: var(--teal); }
.trail-item.done:hover { background: #e3f1e9; }
.trail-item.done.active { border-color: var(--blue); box-shadow: none; }
.game-card { padding: 28px; min-height: 0; border-radius: 22px; }
.game-card>.question { font-size: 30px; color: var(--ink); margin: 0 0 12px; line-height: 1.5; }
.game-card[data-stage="0"]>.question { font-size: 24px; color: var(--muted); }
.game-card>.question+.chunks { margin: 0 0 18px; gap: 8px 16px; }
.game-card>.question+.chunks .chunk { background: transparent; color: var(--ink); border-radius: 0; border-bottom: 3px solid #d8e7f5; padding: 2px 0; font-size: 28px; line-height: 1.5; font-weight: 700; }
.game-card>.question+.chunks .chunk:nth-child(even) { border-color: #d4e9df; }
.game-card .audio-panel { border: 0; border-radius: 0; padding: 0; background: transparent; margin: 12px 0 20px; }
.game-card .audio-row { gap: 8px; }
.game-card .audio-row>.btn { min-height: 48px; }
.game-card .actions { margin-top: 20px; padding-top: 16px; gap: 10px; }
.game-card .method-card { margin: 12px 0 0; color: var(--muted); }
.game-card .method-card summary { font-size: 14px; }
.game-card .method-toggle { color: var(--blue); }
.game-card .reveal-area { background: #f4f8fc; border: 2px dashed #cad9e6; border-radius: 16px; padding: 20px; }
.game-card .reveal-area .english { color: var(--ink); }
.hidden-words { font-size: 22px; letter-spacing: 0; color: var(--muted); }
.paper-note { background: #fff8e8; border: 1px solid #e4d7b5; color: #66532b!important; padding: 18px; }
.game-card .slots { background: #f7fafc; border: 2px dashed #cad9e6; border-radius: 16px; }
.game-card .word { border: 2px solid #d1dfe9; border-bottom-width: 3px; border-radius: 12px; color: var(--blue); }
.game-card .slots .word { background: var(--blue-soft); }
.game-card .bank:empty { display: none; }
.game-card .feedback { color: var(--teal); background: var(--teal-soft); border-color: #c5dccc; }
.game-card .feedback.repair { color: #725223; background: #fff7e8; border-color: #e9d5ae; }
.game-card .phonetics-panel { padding: 14px 0; margin: 18px 0 12px; }
.game-card .phonetic-word { background: #f7fafc; border: 1px solid #d7e2e8; }
.game-card .phonetics-heading strong { font-size: 16px; color: var(--muted); }
.shell>.bar { height: 6px; background: #e3eae7; }
.shell>.bar span { background: var(--teal); }
@media(max-width:600px) {
  .nav-controls { grid-template-columns: 72px minmax(0,1fr) 72px; gap: 8px; }
  .nav-controls .btn { padding-inline: 6px; font-size: 15px; }
  .content-nav { margin-bottom: 12px; }
  .trail { gap: 6px; }
  .trail-item,button.trail-item { flex-direction: column; gap: 3px; min-height: 60px; padding: 6px 2px; border-radius: 14px; font-size: 13px; line-height: 1.3; }
  .trail-item .stepnum { width: 24px; height: 24px; font-size: 13px; }
  .game-layout { gap: 12px; }
  .game-card { padding: 20px 16px; border-radius: 20px; }
  .game-card>.question { font-size: 27px; }
  .game-card[data-stage="0"]>.question { font-size: 22px; }
  .game-card>.question+.chunks .chunk { font-size: 26px; }
  .game-card .actions .btn { min-width: 0; }
  .game-card .method-card summary { gap: 8px; font-size: 13px; }
}


/* REF-UI-03: review cards and supporting surfaces share the classroom palette. */
.quick-review { max-width: 960px; }
.quick-header { align-items: center; gap: 12px; }
.quick-header p { color: var(--muted); font-size: 14px; }
.quick-header>.btn { min-width: 64px; }
.quick-toolbar { background: transparent; border: 0; padding: 0; gap: 12px; margin: 16px 0; }
.quick-toolbar .quick-bulk .btn { min-width: 132px; }
.quick-toolbar #quick-playback-rate { color: var(--muted); }
.quick-bulk .btn[aria-pressed="true"],.quick-actions .quick-mask[aria-pressed="true"] { color: var(--blue); background: var(--blue-soft); border-color: #8cafd2; }
.quick-review .quick-list { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; background: transparent; border: 0; border-radius: 0; overflow: visible; margin: 16px 0; }
.quick-review .quick-row { grid-template-columns: 2ch minmax(0,1fr); align-items: start; gap: 10px 12px; padding: 18px; border: 2px solid var(--line); border-radius: 18px; background: #fff; min-width: 0; }
.quick-number { color: var(--muted); font-size: 14px; padding-top: 4px; }
.quick-review .quick-pair p { font-size: 19px; line-height: 1.55; }
.quick-pair .quick-en,.mistake-en { color: var(--ink); }
.quick-chunk { padding: 0; border-radius: 0; border-bottom: 2px solid #d8e7f5; background: transparent; }
.quick-chunk:nth-child(even) { border-color: #d4e9df; background: transparent; }
.quick-pair .is-covered { padding: 10px; background: #f4f8fc; border: 1px dashed #cad9e6; color: var(--muted); border-radius: 10px; }
.quick-review .quick-actions { grid-column: 2; gap: 8px; }
.quick-review .quick-actions .btn { padding: 9px 10px; min-width: 48px; font-size: 14px; }
.quick-review .quick-actions .quick-mask { border-color: transparent; background: transparent; color: var(--muted); }
.quick-review .quick-actions .quick-mask:hover { background: #f4f8fc; }
.quick-review .quick-actions .quick-mask[aria-pressed="true"] { border-color: #8cafd2; background: var(--blue-soft); color: var(--blue); }
.btn.save-icon { color: var(--muted); }
.btn.save-icon:hover { background: var(--blue-soft); }
.btn.save-icon[aria-pressed="true"] { color: var(--teal); background: var(--teal-soft); }
.save-icon[aria-pressed="true"] svg { fill: #d4e9df; }
.mistake-book { max-width: 960px; padding: 0; border: 0; background: transparent; }
.mistake-storage-note { color: var(--muted); }
.mistake-list { margin-top: 18px; gap: 12px; align-items: start; }
.mistake-entry { padding: 20px; border: 2px solid var(--line); border-radius: 18px; }
.mistake-entry-top>span { background: var(--teal-soft); color: var(--teal); border-radius: 8px; }
.mistake-entry h2 { margin-top: 8px; }
.mistake-entry .secondary { margin-top: 4px; }
.mistake-empty { background: #fff; color: var(--muted); border-color: #b8c8cc; }
dialog { border: 2px solid var(--line); border-radius: 22px; box-shadow: 0 12px 40px #20354526; }
dialog::backdrop { background: #20354580; backdrop-filter: none; }
.word-dialog { padding: 26px; }
.word-heading h2 { font-size: clamp(32px,7vw,40px); }
.word-primary-actions { margin: 16px 0 12px; }
.word-source>strong,.word-source .word-context { color: var(--muted); }
.word-source .word-sentence { color: var(--ink); }
.word-dictionary summary,.word-grammar summary,.word-lemma { color: var(--blue); }
.word-grammar { border-color: var(--line); }
.word-phonics-line { color: var(--ink); }
.word-dialog .meaning-hint { color: var(--blue); }
.rest-counter { color: var(--teal); background: var(--teal-soft); border-color: #c5dccc; }
.rest-counter output { color: var(--teal); letter-spacing: 0; }
#pause-dialog h2 { color: var(--ink); }
#items-dialog .items-list button { background: #fff; border: 2px solid var(--line); border-radius: 14px; }
#items-dialog .items-list button[aria-current] { background: var(--blue-soft); border-color: var(--blue); }
#items-dialog .items-list small { color: var(--blue); }
#updates-dialog { background: var(--paper); }
.photo-dialog { border: 2px solid var(--line); border-radius: 22px; }
.photo-status,.photo-source figcaption { color: var(--muted); }
.photo-error { color: #943b28; }
.completion-plan summary { color: var(--muted); }
@media(min-width:900px) {
  .quick-review .quick-list,.mistake-list { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
}
@media(max-width:600px) {
  .quick-toolbar { gap: 8px; }
  .quick-toolbar .quick-bulk .btn { min-width: 0; }
  .quick-review .quick-row { padding: 14px; gap: 10px; }
  .quick-review .quick-pair p { font-size: 18px; }
  .quick-header h1,.mistake-book h1 { font-size: 24px; }
  .mistake-entry { padding: 16px; }
  .word-dialog { padding: 22px 20px; }
}
@media(max-width:359px) {
  .quick-review .quick-actions { grid-column: 1/-1; }
  .quick-review .quick-actions .btn { padding-inline: 8px; }
}