/* ============================================================
   read.css — shared styles for the "Read Thai" section
   (read.html hub + section pages). Uses the site's :root
   design tokens, which every page defines in its head.
   ============================================================ */

/* ── page scaffolding ── */
.read-wrap { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.read-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.read-title { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 4px; line-height: 1.2; }
.read-intro { font-size: 15px; color: var(--text-secondary); line-height: 1.7; margin: 0.6rem 0 1.5rem; }  /* r136b: full wrapper width on desktop (owner) — was max-width:680px; phones (<680px) unaffected */
.read-intro strong { color: var(--text-primary); font-weight: 500; }
.read-intro .th { font-family: var(--font-thai); }

/* ── the index-page style mode toggle (Sentences | Read) ── */
.mode-toggle-wrap { display: flex; justify-content: center; margin: 1.6rem auto 0; padding: 0 1.5rem; }
.mode-toggle { display: flex; background: var(--surface); border: 0.5px solid var(--border-strong); border-radius: 14px; padding: 4px; gap: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
.mt-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; padding: 9px 20px; border-radius: 10px; transition: background 0.15s, color 0.15s; }
.mt-btn:hover { color: var(--accent); }
.mt-btn.active { background: var(--accent); color: #fff; }
.mt-btn.active:hover { color: #fff; }
.mt-ico { font-family: var(--font-thai); font-weight: 600; font-size: 15px; line-height: 1; }
.mt-btn svg { width: 15px; height: 15px; }
@media (max-width: 480px) { .mt-btn { font-size: 12.5px; padding: 8px 12px; gap: 6px; } }

/* ── hub: learning-path section cards ── */
.read-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 1.25rem; }
@media (max-width: 800px) { .read-path { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .read-path { grid-template-columns: 1fr; } }
.path-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.1rem 0.9rem; text-decoration: none; display: flex; flex-direction: column; gap: 7px; transition: border-color 0.15s, box-shadow 0.15s; position: relative; }
.path-card:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.path-step { font-size: 10px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.path-name { font-size: 14.5px; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.path-blurb { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; flex: 1; }
.path-blurb .th, .path-name .th { font-family: var(--font-thai); }
.path-progress { font-size: 11.5px; color: var(--text-tertiary); border-top: 0.5px solid var(--border); padding-top: 7px; }
.path-progress.done { color: var(--accent); font-weight: 500; }
/* stacked per-test progress lines (hub cards + test-panel headers) */
.pp-line { padding: 1px 0; line-height: 1.45; }
.pp-name { font-weight: 600; }
.path-progress.done .pp-line { font-weight: 400; }
.test-stat-lines { font-size: 12px; color: var(--text-secondary); margin: -0.1rem 0 0.8rem; }
.test-stat-lines .pp-name { color: var(--text-primary); }
/* sounds page: family cards (reuse final-card) */
.fam-grid { grid-template-columns: repeat(2, 1fr); margin-top: 0.9rem; }
@media (max-width: 560px) { .fam-grid { grid-template-columns: 1fr; } }
.fam-label { font-size: 13.5px; }

/* ── hub: tone demo + transliteration key ── */
.read-panel { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.35rem 1.2rem; margin: 1.25rem 0; }
.read-panel h2 { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 0.35rem; letter-spacing: -0.01em; }
.read-panel p { font-size: 14px; color: var(--text-secondary); line-height: 1.65; }
.read-panel p + p { margin-top: 0.5rem; }
.read-panel .th { font-family: var(--font-thai); }
/* Grid so a row that must wrap does so evenly (6 chips → 3+3, never 5+1). */
.tone-demo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin-top: 0.9rem; }
.tone-demo-row.chips-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 760px) { .tone-demo-row.chips-6 { grid-template-columns: repeat(3, 1fr); } }
.tone-chip { min-width: 0; background: var(--bg); border: 0.5px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.7rem 0.5rem 0.6rem; text-align: center; cursor: pointer; font-family: var(--font-ui); transition: border-color 0.15s, box-shadow 0.15s; }
.tone-chip:hover { border-color: var(--accent); }
.tone-chip.playing { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.tone-chip .tc-thai { font-family: var(--font-thai); font-size: 26px; font-weight: 500; color: var(--text-primary); line-height: 1.25; }
.tone-chip .tc-t { font-size: 14px; color: var(--accent); font-weight: 500; }
.tone-chip .tc-tone { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-tertiary); margin-top: 2px; }
.tone-chip .tc-en { font-size: 11.5px; color: var(--text-secondary); }
.key-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 0.8rem; }
.key-item { flex: 1; min-width: 88px; background: var(--bg); border: 0.5px solid var(--border); border-radius: var(--radius-md); padding: 0.55rem 0.6rem; text-align: center; }
.key-item .k-mark { font-size: 22px; font-weight: 600; color: var(--accent); line-height: 1.2; }
.key-item .k-name { font-size: 12px; font-weight: 500; color: var(--text-primary); }
.key-item .k-desc { font-size: 10.5px; color: var(--text-tertiary); line-height: 1.35; }

/* ── letter / vowel explainer grid ── */
.letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 1rem 0 2rem; }
.letter-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-md); padding: 0.85rem 0.9rem 0.8rem; text-align: center; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; position: relative; }
.letter-card:hover { border-color: var(--accent); }
.letter-card.playing { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.letter-card .lc-ch { font-family: var(--font-thai); font-size: 44px; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.letter-card .lc-name { font-size: 14.5px; font-weight: 500; color: var(--accent); margin-top: 2px; }
.letter-card .lc-sound { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; margin-top: 2px; }
.letter-card .lc-hint { position: absolute; top: 8px; right: 10px; color: var(--text-tertiary); opacity: 0.7; }
.letter-card .lc-hint svg { width: 13px; height: 13px; }
.letter-card .lc-word { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  /* ⚠ inline-flex sizes to MAX-CONTENT and does not shrink to its parent, so at large OS
     font sizes this pill grew straight out through the side of its .letter-card
     (owner-reported on Android: the ฤดู box escaping the ฤ box, 2026-08-09).
     max-width pins it to the card; flex-wrap lets the Thai/translit/gloss reflow inside it.
     Deliberately NOT capped with --te-ui: this is lesson CONTENT and must scale in full. */
  max-width: 100%; flex-wrap: wrap; margin-top: 8px; font-size: 12px; background: var(--bg); border: 0.5px solid var(--border); border-radius: 20px; padding: 3px 11px; color: var(--text-secondary); cursor: pointer; font-family: var(--font-ui); transition: border-color 0.15s, color 0.15s; }
.letter-card .lc-word:hover { border-color: var(--accent); color: var(--accent); }
.letter-card .lc-word.playing { border-color: var(--accent); color: var(--accent); }
.letter-card .lc-word .th { font-family: var(--font-thai); font-size: 13px; color: var(--text-primary); }
.letter-card .lc-word svg { width: 10px; height: 10px; flex-shrink: 0; }
.letter-card.obsolete { opacity: 0.62; }
.obsolete-chip { position: absolute; top: 7px; left: 9px; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); background: var(--bg); border-radius: 8px; padding: 1px 7px; }
/* ⛔ GROUND IS --lav-bg, NOT --accent-light. These must match the guide page's .readthai-box
   exactly (owner, 2026-09-22) and --accent-light is the T3 tint, which is a pale LAVENDER
   (hue 244, sat 60). --lav-bg is --card-tint #F6F6FD, near-white. Same for .quiz-summary,
   .signin-gate and .read-dl below - one box style across the reading arm. */
.read-note { font-size: 13px; color: var(--accent, #261B65); background: var(--lav-bg, #F6F6FD); border-radius: var(--radius-md); padding: 0.75rem 1rem; line-height: 1.6; margin: 0 0 1.5rem; }
.read-note .th { font-family: var(--font-thai); }

/* ── test panel ── */
.test-panel { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.35rem 1.35rem; margin-top: 1rem; }
.test-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0.35rem; }
.test-head h2 { font-size: 17px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.test-stats { font-size: 12px; color: var(--text-tertiary); }
.test-sub { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem; }
.test-modes { display: flex; gap: 10px; flex-wrap: wrap; }
.test-mode-btn { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; background: var(--bg); border: 0.5px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.9rem 1rem; cursor: pointer; font-family: var(--font-ui); text-align: left; transition: border-color 0.15s, box-shadow 0.15s; }
.test-mode-btn:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
/* Four modes (finals page): a 2×2 grid, not the flex row — flex-wrap would put 3 across and
   leave the 4th stretched alone on its own row. Stacks to one column on phones. */
.test-modes.modes-4 { display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
.test-modes.modes-4 .test-mode-btn { min-width: 0; }
@media (max-width: 600px) { .test-modes.modes-4 { grid-template-columns: 1fr; } }
.tm-title { font-size: 14.5px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 7px; }
.tm-title svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); }
.tm-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.tm-record { font-size: 11.5px; color: var(--text-tertiary); margin-top: 3px; }

/* quiz-in-progress */
.tq-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0.8rem; }
.tq-count { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.tq-actions { display: flex; gap: 6px; }
.tq-icon-btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--text-secondary); background: var(--bg); border: 0.5px solid var(--border-strong); border-radius: 20px; padding: 5px 12px; cursor: pointer; transition: color 0.15s, border-color 0.15s; }
.tq-icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.tq-icon-btn svg { width: 12px; height: 12px; }
.tq-bar { height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden; margin-bottom: 1.1rem; }
.tq-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.25s; }
.tq-question { text-align: center; margin-bottom: 1.1rem; }
.tq-prompt { font-size: 13px; color: var(--text-secondary); margin-bottom: 0.6rem; }
.tq-big-play { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-ui); font-size: 14.5px; font-weight: 500; color: #fff; background: var(--accent); border: none; border-radius: 24px; padding: 11px 24px; cursor: pointer; transition: background 0.15s; }
.tq-big-play:hover { background: var(--accent-mid); }
.tq-big-play svg { width: 15px; height: 15px; }
.tq-big-symbol { font-family: var(--font-thai); font-size: 64px; font-weight: 500; color: var(--text-primary); line-height: 1.25; }
.tq-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: 480px; margin: 0 auto; }
.tq-choice { background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.85rem 0.6rem; text-align: center; cursor: pointer; font-family: var(--font-ui); transition: border-color 0.15s, box-shadow 0.15s; position: relative; }
.tq-choice:hover { border-color: var(--accent); }
.tq-choice .c-sym { font-family: var(--font-thai); font-size: 40px; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.tq-choice.correct { border-color: #2E8B57; background: #EAF6EF; box-shadow: 0 0 0 3px #D3EDDD; }
.tq-choice.wrong { border-color: #C0392B; background: #FBEDEB; }
.tq-choice.revealed { border-color: #2E8B57; }
.tq-choice[disabled] { cursor: default; }
/* Post-answer: tiles are locked as answers but not inert — those carrying audio stay tappable so
   they can be replayed and compared (the ones with nothing to play just lose the pointer). */
.tq-choice.locked { cursor: default; }
.tq-choice.locked.replayable { cursor: pointer; }
/* letter→sound: audio option tiles */
.tq-choice.audio-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0.9rem 0.6rem; }
.tq-choice.audio-opt .c-play { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--accent-light); color: var(--accent); transition: background 0.15s; }
.tq-choice.audio-opt:hover .c-play { background: var(--accent); color: #fff; }
.tq-choice.audio-opt.playing .c-play { background: var(--accent); color: #fff; }
.tq-choice.audio-opt .c-play svg { width: 17px; height: 17px; }
.tq-choice.audio-opt .c-label { font-size: 11.5px; color: var(--text-tertiary); }
.tq-choice.audio-opt .c-pick { font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: var(--accent); background: var(--surface); border: 0.5px solid var(--border-strong); border-radius: 16px; padding: 4px 14px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.tq-choice.audio-opt .c-pick:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.tq-feedback { text-align: center; font-size: 14px; font-weight: 500; min-height: 44px; padding-top: 0.9rem; }
.tq-feedback .ok { color: #2E8B57; }
.tq-feedback .no { color: #C0392B; }
.tq-hint { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-tertiary); margin-top: 3px; }
.tq-next { font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; color: var(--accent); background: var(--surface); border: 0.5px solid var(--border-strong); border-radius: 20px; padding: 7px 20px; cursor: pointer; margin-top: 6px; }
.tq-next:hover { background: var(--accent-light); border-color: var(--accent); }
/* results */
.tq-result { text-align: center; padding: 1.25rem 0 0.5rem; }
.tq-score { font-size: 34px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; }
.tq-verdict { font-size: 14px; color: var(--text-secondary); margin: 0.3rem 0 1.1rem; }
.tq-result-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* text-choice tiles + multi-select (sounds & finals tests) */
.tq-choice .c-txt { font-size: 14.5px; font-weight: 500; color: var(--text-primary); }
.tq-choice.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); background: var(--accent-light); }
.tq-choices.choices-2 { grid-template-columns: repeat(2, 1fr); max-width: 360px; }
.tq-choices.choices-8 { grid-template-columns: repeat(4, 1fr); max-width: 560px; }
@media (max-width: 480px) { .tq-choices.choices-8 { grid-template-columns: repeat(4, 1fr); gap: 6px; } }

/* ── finals page: the 8-endings grid ── */
.final-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0.75rem 0 1rem; }
@media (max-width: 800px) { .final-grid { grid-template-columns: repeat(2, 1fr); } }
.final-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-md); padding: 0.8rem 0.75rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fc-sound { font-size: 22px; font-weight: 600; color: var(--accent); letter-spacing: -0.01em; line-height: 1.2; }
.fc-type { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); }
.fc-letters { font-family: var(--font-thai); font-size: 17px; color: var(--text-primary); line-height: 1.6; }

/* ── tone rules page ── */
.tone-table-scroll { overflow-x: auto; margin: 1rem 0 1.75rem; border: 0.5px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.tone-table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 12.5px; }
.tone-table th { background: var(--bg); font-weight: 600; color: var(--text-secondary); padding: 9px 10px; text-align: center; border-bottom: 0.5px solid var(--border-strong); white-space: nowrap; font-size: 11.5px; }
.tone-table th .th { font-family: var(--font-thai); font-size: 14px; }
.tone-table td { padding: 9px 8px; text-align: center; border-bottom: 0.5px solid var(--border); vertical-align: top; }
.tone-table tr:last-child td { border-bottom: none; }
.tone-table td.cls-cell { font-weight: 600; color: var(--text-primary); text-align: left; white-space: nowrap; padding-left: 14px; }
.tt-tone { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 3px; }
.tt-mid { color: var(--text-tertiary); } .tt-low { color: #B87A00; } .tt-falling { color: #A23A3A; } .tt-high { color: #2E7D6B; } .tt-rising { color: var(--accent); }
.tt-ex { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; border: 0.5px solid var(--border); background: var(--bg); border-radius: 14px; padding: 2px 9px; font-family: var(--font-ui); transition: border-color 0.15s; }
.tt-ex:hover, .tt-ex.playing { border-color: var(--accent); }
.tt-ex .th { font-family: var(--font-thai); font-size: 14.5px; color: var(--text-primary); }
.tt-ex .rr { font-size: 11.5px; color: var(--accent); }
.tt-ex svg { width: 9px; height: 9px; color: var(--text-tertiary); flex-shrink: 0; }
.tt-empty { color: var(--text-tertiary); }
.tt-en { display: block; font-size: 10.5px; color: var(--text-tertiary); margin-top: 2px; }
.rule-cards h2, .read-h2 { font-size: 18px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; margin: 1.75rem 0 0.5rem; }
.read-p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 0.6rem; max-width: 680px; }
.read-p .th { font-family: var(--font-thai); color: var(--text-primary); }
.read-p strong { color: var(--text-primary); font-weight: 500; }
.marks-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0.75rem 0 0.5rem; }
.mark-item { flex: 1; min-width: 110px; background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 0.6rem; text-align: center; }
.mark-item .m-sym { font-family: var(--font-thai); font-size: 26px; color: var(--text-primary); line-height: 1.2; }
.mark-item .m-name { font-size: 12px; font-weight: 500; color: var(--accent); }
.mark-item .m-note { font-size: 10.5px; color: var(--text-tertiary); }

/* ── reading quiz page ── */
.quiz-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 1rem; }
.quiz-card { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-md); padding: 0.9rem 1.1rem; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.qc-num { font-size: 11px; color: var(--text-tertiary); width: 20px; flex-shrink: 0; }
.qc-thai { font-family: var(--font-thai); font-size: 30px; font-weight: 500; color: var(--text-primary); flex: 1; min-width: 110px; line-height: 1.4; }
.qc-btns { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.qc-reveal-area { flex-basis: 100%; display: none; padding-top: 0.5rem; border-top: 0.5px dashed var(--border); margin-top: 0.35rem; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.quiz-card.revealed .qc-reveal-area { display: flex; }
.qc-t { font-size: 16px; font-weight: 500; color: var(--accent); }
.qc-en { font-size: 13.5px; color: var(--text-secondary); }
.qc-cls { font-size: 12px; color: var(--text-tertiary); }
.qc-cls .th { font-family: var(--font-thai); color: var(--text-secondary); }
.qc-note { font-size: 11.5px; color: var(--text-tertiary); font-style: italic; }
.qc-mark { display: flex; gap: 5px; margin-left: auto; }
.qc-mark button { font-family: var(--font-ui); font-size: 12px; font-weight: 500; border-radius: 16px; border: 0.5px solid var(--border-strong); background: var(--bg); color: var(--text-secondary); padding: 4px 12px; cursor: pointer; }
.qc-mark button.got { border-color: #2E8B57; }
.qc-mark button.got.on { background: #2E8B57; border-color: #2E8B57; color: #fff; }
.qc-mark button.missed { border-color: #C0392B; }
.qc-mark button.missed.on { background: #C0392B; border-color: #C0392B; color: #fff; }
.quiz-summary { text-align: center; font-size: 14px; color: var(--accent, #261B65); background: var(--lav-bg, #F6F6FD); border: 0; border-radius: var(--radius-md); padding: 0.9rem 1rem; margin-top: 1rem; }
.quiz-summary strong { color: var(--accent, #261B65); }

/* quiz submit */
.quiz-submit-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 1.1rem; }
.quiz-submit-btn { font-size: 14px; padding: 9px 22px; }
.quiz-submit-msg { font-size: 13.5px; color: var(--text-secondary); min-height: 1.2em; }
.quiz-submit-msg strong { color: var(--text-primary); }
.quiz-submit-msg a { color: var(--accent); font-weight: 500; }

/* quiz part tabs */
.quiz-tabs { display: flex; gap: 6px; margin-bottom: 0.8rem; flex-wrap: wrap; }
.tq-icon-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tq-icon-btn.on:hover { color: #fff; border-color: var(--accent); }

/* ── answers hidden while a test runs ──
   Everything above the test panel (letter grids, family lists, notes) would
   otherwise be scroll-up cheat material. */
body.te-testing .read-intro,
body.te-testing #read-root > *:not(.test-panel) { display: none; }

/* ── sign-in gate (tests are free but need an account) ── */
.signin-gate { text-align: center; padding: 1.5rem 1rem 1.6rem; background: var(--lav-bg, #F6F6FD); border-radius: var(--radius-md); }
.signin-gate .sg-title { font-size: 17px; font-weight: 600; color: var(--accent, #261B65); margin-bottom: 0.4rem; }
.signin-gate p { font-size: 14px; color: var(--accent, #261B65); line-height: 1.6; max-width: 420px; margin: 0 auto 1rem; }
/* ⚠ --read-term is the RETIRED #4B41AD and is deliberately kept for .gl-term, where it sits
   inside black body text and needs the contrast. A BUTTON has no such excuse, so .sg-btn
   overrides it - this is the "old blue" the owner spotted on the signed-out gate. */
.signin-gate .sg-btn { font-size: 14px; padding: 9px 22px; text-decoration: none;
  background: var(--accent, #261B65); color: #fff; }
.signin-gate .sg-btn:hover { background: var(--accent-mid, #342682); color: #fff; }

/* clear-progress (results page) — the BUTTON rules live below .rd-ghost-pill, see there */
.clear-progress-wrap { text-align: center; margin-top: 1.75rem; }

/* ── results page ── */
.results-hero h2 { font-size: 18px; }
.results-panel h2 a { color: inherit; text-decoration: none; }
.results-panel h2 a:hover { color: var(--accent); }
.results-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 0.4rem; }
.results-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); padding: 4px 8px 6px 0; border-bottom: 0.5px solid var(--border-strong); }
.results-table td { padding: 7px 8px 7px 0; border-bottom: 0.5px solid var(--border); color: var(--text-secondary); }
.results-table tr:last-child td { border-bottom: none; }
.results-table .rt-name { color: var(--text-primary); font-weight: 500; }

/* ── glossary terms + popover ── */
/* ⛔ THE GLOSSARY TERMS KEEP THE LIGHTER BLUE (owner, 2026-09-22): "the glossary words with i
   next to them such as 'aspirated' can stay the lighter blue that they are for higher contrast
   with the black."
   ⚠ HIS REASON IS A MEASUREMENT, NOT A PREFERENCE, AND IT IS THE GENERAL CASE FOR INLINE INK.
   A .gl-term sits INSIDE a run of body text: it has to be distinguishable from #1A1A1A beside it,
   and #1C124E against black is 1.7:1 - nearly invisible as a distinction, however good its
   contrast against the page. #4B41AD against black is 2.9:1 and reads as another colour.
   ✅ So: a dark accent is fine for FILLS and for headings, and wrong for a word set among black
   words. Any future inline-highlight colour needs the same check. */
/* ⚠ the PILL GROUND follows the site tint; --read-term stays the lighter blue for the glossary
   terms, which is a legibility requirement against black body text, not a theme choice. */
:root { --read-term: #4B41AD; --lav-bg: var(--card-tint, #F6F6FD); }
.gl-term { color: var(--read-term, #4B41AD); text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; position: relative; }
.gl-i { font-size: 8.5px; font-weight: 700; font-style: normal; color: #fff; background: var(--accent); border-radius: 50%; width: 11px; height: 11px; display: inline-flex; align-items: center; justify-content: center; margin-left: 1px; vertical-align: super; line-height: 1; font-family: var(--font-ui); }
.gl-pop { position: absolute; z-index: 300; width: 260px; background: var(--surface); border: 0.5px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: 0 8px 28px rgba(0,0,0,0.16); padding: 0.75rem 0.9rem 0.7rem; font-family: var(--font-ui); }
.gl-pop[hidden] { display: none; }
.gl-x { position: absolute; top: 4px; right: 7px; border: none; background: none; font-size: 16px; line-height: 1; color: var(--text-tertiary); cursor: pointer; padding: 3px; }
.gl-x:hover { color: var(--text-primary); }
.gl-title { font-size: 13px; font-weight: 600; color: var(--accent); margin-bottom: 3px; padding-right: 16px; }
.gl-def { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.gl-ref { display: block; font-size: 11.5px; color: var(--accent); margin-top: 6px; text-decoration: none; font-weight: 500; }
.gl-ref[href]:hover { text-decoration: underline; }
.gl-ref:not([href]) { color: var(--text-tertiary); cursor: default; }

/* clickable big symbol in tests (plays the letter's name) */
.tq-big-symbol.clickable { cursor: pointer; border-radius: var(--radius-md); transition: background 0.15s; padding: 0 14px; display: inline-block; }
.tq-big-symbol.clickable:hover { background: var(--accent-light); }
.tq-big-symbol.clickable.playing { background: var(--accent-light); }

/* ── shared small buttons ── */
/* ⛔ THE "CHECK BY EAR" PLAY PILLS STAY LAVENDER (owner, 2026-09-22): "the check by ear play
   buttons can stay lavender as they are and their text can stay same color as is." So BOTH halves
   are pinned - the ground and the ink - since following --accent-light alone would have left
   purple text on a grey ground, which is neither thing.
   ⛔ THE PINNING IS REVOKED (owner, 2026-09-22): "previously i said they were fine but they should
   get the same treatment so they look like the guide box A", and separately "check if any other
   little boxes like that still carrying the old blue". Ground and ink both follow the palette now,
   and the pressed state inverts into the SAME navy - the mid-press-hue-change argument below was
   only ever a reason to keep the two ENDS of the inversion matched, not a reason to stay purple. */
.rd-play-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; color: var(--accent, #261B65); background: var(--lav-bg, #F6F6FD); border: none; border-radius: 18px; padding: 6px 14px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.rd-play-pill:hover, .rd-play-pill.playing { background: var(--accent, #261B65); color: #fff; }
/* ⚠ SUBMIT RESULTS IS A rd-play-pill TOO, AND IT IS THE ONE THE OWNER ASKED TO GO NAVY:
   "the submit results pill at the bottom of the page." It borrows the pill's shape and size from
   the rule above and takes the accent back, because it is a COMMIT action at the end of the quiz,
   not one of the listen-again controls it happens to share a class with. Written after, so it
   wins on source order at equal specificity. */
.rd-play-pill.quiz-submit-btn { color: #fff; background: var(--accent); }
.rd-play-pill.quiz-submit-btn:hover { background: var(--accent-mid); color: #fff; }
.rd-play-pill svg { width: 12px; height: 12px; }
.rd-ghost-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: 12.5px; font-weight: 500; color: var(--text-secondary); background: var(--surface); border: 0.5px solid var(--border-strong); border-radius: 18px; padding: 6px 14px; cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.rd-ghost-pill:hover { border-color: var(--accent); color: var(--accent); }
/* The destructive variant of the ghost pill. MUST stay AFTER .rd-ghost-pill: both are
   single-class selectors, so source order decides, and .rd-ghost-pill's `border` SHORTHAND
   beats a bare `border-color` wherever it sits. These two rules used to sit ~35 lines above it
   with the results-page CSS and were therefore DEAD -- the button rendered as an ordinary grey
   ghost pill (owner, 2026-08-27). Colours match progress.html's .reset-btn, the same action on
   the topic side: red text, faint red outline, faint wash on hover -- never a solid red fill,
   a destructive control is outlined on this site, not filled. */
.clear-progress-btn { color: #C0392B; border: 0.5px solid #E3B5AE; }
.clear-progress-btn:hover { color: #C0392B; border-color: #C0392B; background: #FDF1F0; }

/* ── confirm modal (results page) ───────────────────────────────────────────── */
/* The site's own modal idiom, copied verbatim from progress.html's reset dialog (which is the
   same action on the topic side) so the two read identically. Deliberately NOT window.confirm,
   which is the plain grey browser box this replaced. */
.te-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(20,16,40,0.55);
  display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.te-modal-card { background: var(--surface); border-radius: var(--radius-lg); max-width: 360px;
  width: 100%; padding: 1.8rem 1.5rem; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.te-modal-card p { font-size: 14px; line-height: 1.6; margin-bottom: 1.2rem; }
.te-modal-card strong { font-weight: 600; }
.te-modal-actions { display: flex; gap: 10px; }
.te-modal-actions button { flex: 1; font-family: var(--font-ui); font-size: 13.5px; font-weight: 500;
  border-radius: var(--radius-md); padding: 10px 12px; cursor: pointer; }
.te-modal-cancel { background: var(--surface); color: var(--text-secondary); border: 0.5px solid var(--border-strong); }
.te-modal-confirm { background: #C0392B; color: #fff; border: none; }
/* The SAFE filled variant, for the one dialog whose confirm button is not the destructive one:
   the download leave-guard offers "Keep downloading" (filled, accent) against "Leave anyway"
   (the quiet outlined .te-modal-cancel). That reversal is deliberate and mirrors player.js's
   dynConfirm on the topic side — the prominent button is the one that keeps your download. */
.te-modal-primary { background: var(--accent); color: #fff; border: none; }

/* ── prev / next footer nav (mirrors topic pages) ── */
.read-nav { display: flex; justify-content: space-between; align-items: stretch; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 0.5px solid var(--border); gap: 1rem; }
.read-nav-btn { display: inline-flex; flex-direction: column; gap: 2px; max-width: 46%; min-width: 0; overflow-wrap: break-word; font-size: 13px; font-family: var(--font-ui); color: var(--accent); text-decoration: none; border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 7px 14px; transition: background 0.15s, border-color 0.15s; }
.read-nav-btn:hover { background: var(--accent-light); border-color: var(--accent); }
.read-nav-btn.disabled { color: var(--text-tertiary); border-color: var(--border); pointer-events: none; opacity: 0.4; }
.read-nav-label { font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.05em; text-transform: uppercase; }
.read-nav-name { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.read-nav-right { text-align: right; align-items: flex-end; }
.read-all-link { text-align: center; margin-top: 1.25rem; font-size: 12.5px; }
.read-all-link a { color: var(--text-secondary); text-decoration: none; font-weight: 500; }
.read-all-link a:hover { color: var(--accent); }

@media (max-width: 600px) {
  .read-wrap { padding: 1.25rem 1rem 2.5rem; }
  .read-title { font-size: 20px; }
  .letter-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tq-choices { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tq-big-symbol { font-size: 52px; }
  .qc-thai { font-size: 26px; }
}

/* ── offline-download card (hub; app / installed-PWA only) ── */
.read-dl { background: var(--lav-bg, #F6F6FD); border: 0.5px solid var(--border); border-radius: var(--radius-lg); padding: 1.05rem 1.2rem 0.95rem; margin: 1.5rem 0 0.25rem; }
.read-dl-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.read-dl-title { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
.read-dl-ico { display: inline-flex; width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.read-dl-ico svg { width: 100%; height: 100%; }
.read-dl-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
.read-dl[data-state="done"] .read-dl-desc { color: var(--accent); font-weight: 500; }
.read-dl-btn { flex-shrink: 0; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 18px; padding: 8px 18px; cursor: pointer; transition: background 0.15s; }
.read-dl-btn:hover { background: var(--accent-mid); }
.read-dl-btn:disabled { opacity: 0.6; cursor: default; }
.read-dl[data-state="done"] .read-dl-btn { color: var(--text-secondary); background: var(--surface); border: 0.5px solid var(--border-strong); font-weight: 500; }
.read-dl[data-state="done"] .read-dl-btn:hover { color: var(--accent); border-color: var(--accent); }
.read-dl-barwrap { height: 5px; background: rgba(28,18,78,0.15); border-radius: 3px; margin-top: 0.7rem; overflow: hidden; }
.read-dl-bar { height: 100%; width: 0; background: var(--accent); border-radius: 3px; transition: width 0.2s; }
.read-dl-foot { font-size: 11.5px; color: var(--text-tertiary); margin-top: 0.55rem; line-height: 1.5; }
@media (max-width: 600px) {
  .read-dl-row { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .read-dl-btn { align-self: stretch; text-align: center; }
}

/* ── alt vowel forms (สระเปลี่ยนรูป): "เออ / เอิ◌ / เอย" ──
   em-relative so it tracks the glyph it follows under iOS text-size-adjust, and so one
   rule covers the 44px card, the 40px quiz tile and the 64px prompt. The containers wrap
   and break rather than overflow: at 2x scaling three forms will not sit on one line in a
   150px card, and spilling out of the box is worse than a second line. */
/* ⛔ EVERY FORM ON A MULTI-FORM CARD IS THE SAME SIZE (owner, 2026-09-17). The whole
   container steps down instead of shrinking only the part after the slash: a card showing
   เออ / เอิ◌ / เอย is smaller than a single-form card, and that is deliberate -- uniformity
   ACROSS THE SLASH reads as one fact about one vowel, where two sizes read as a main form
   plus a footnote. So .lc-alt inherits (1em) and `.has-alt` carries the reduction. */
.lc-alt { font-size: 1em; color: var(--text-secondary); white-space: nowrap; }
.letter-card .lc-ch.has-alt { font-size: 22px; }
.tq-choice .c-sym.has-alt { font-size: 26px; }
.tq-big-symbol.has-alt { font-size: 44px; }
.letter-card .lc-ch,
.tq-choice .c-sym,
.tq-big-symbol { overflow-wrap: break-word; }
.tq-choice .c-sym { display: block; }
.lc-note { cursor: help; vertical-align: super; margin-left: 2px; }
.lc-note .gl-i { width: 13px; height: 13px; font-size: 9.5px; }
@media (max-width: 560px) {
  .letter-card .lc-ch.has-alt { font-size: 18px; }
  .tq-choice .c-sym.has-alt { font-size: 20px; }
  .tq-big-symbol.has-alt { font-size: 34px; }
}

/* The placeholder อ — the slot a consonant goes into — is red, so a black อ is always a
   real letter belonging to the vowel (ออ as in ขอ, อ็อ◌ as in ล็อก). read.js marks the
   first อ of each form; see phAw().
   ⚠ #C0392B is the same red the quiz uses for a wrong answer, but that state colours a
   tile's border and background, never glyph text, so the two do not collide. One variable
   if it ever needs changing. */
:root { --ph-color: #C0392B; }
/* ⛔ AN UNDERLINE, NOT A COLOUR. อ and its combining mark are ONE grapheme cluster, and
   Blink paints a cluster with the FIRST element's style — so `color` on this span bled into
   the mark outside it and turned the whole of อี red on desktop and the Android app. WebKit
   did not, because CoreText breaks the cluster at the element boundary (the same behaviour
   that caused the doubled-circle bug in the first place). No colour rule is right on both.
   A border paints on the element's own box and cannot bleed; the mark has zero advance, so
   the box is exactly the อ and the underline sits exactly under it. */
/* ⚠ Only ever rendered on WebKit, which splits the grapheme cluster at the element
   boundary, so the colour lands on the อ alone. Blink never sees this rule — it gets the
   dotted-circle notation instead — which is what makes `color` safe here after it bled
   across the whole cluster in v550. A border was tried in v551 and cut through อู / อุ. */
.ph { color: var(--ph-color); }