/* สร้างอัตโนมัติด้วย bin/build-drill-cinema-pages.py — ห้ามแก้ด้วยมือ
   แปลงสีที่ฝังใน <style> ของหน้าเกมซ้อมเร็ว ๘ หน้าเป็นโทเคน --kc-* (ดู app/css/drill-cinema.css) */

/* ── akkhara ── */
html.kc body .ak-table th,
html.kc body .ak-table td { border: 1px solid var(--kc-line); }
html.kc body .ak-table th { background: color-mix(in srgb, var(--kc-accent) 12%, transparent); color: var(--kc-accent); }
html.kc body .ak-table td:first-child { color: var(--kc-accent); background: color-mix(in srgb, var(--kc-accent) 12%, transparent); }
html.kc body .ak-bigchar { color: var(--kc-accent); }
html.kc body .ak-syl-dim { color: var(--kc-accent); }
html.kc body .ak-syl-hi { color: var(--kc-accent); }
html.kc body .ak-game { background: color-mix(in srgb, var(--kc-accent) 12%, transparent); }
html.kc body .ak-hero-card { color: var(--kc-ink); background: var(--kc-soft); border: 1px solid color-mix(in srgb, var(--kc-accent) 38%, transparent); }
html.kc body .ak-hero-mark small { color: var(--kc-ink); background: color-mix(in srgb, var(--kc-ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--kc-ok) 38%, transparent); }
html.kc body .ak-hero-eyebrow { color: var(--kc-accent); }
html.kc body .ak-sound-toggle { background: var(--kc-soft); border: 1px solid var(--kc-line); }
html.kc body .ak-sound-toggle:hover { background: var(--kc-soft); }
html.kc body .ak-game .kt-stage-card { border: 1px solid color-mix(in srgb, var(--kc-accent) 38%, transparent); }

/* ── sandhi ── */
html.kc body .sd-table th,
html.kc body .sd-table td { border: 1px solid var(--kc-line); }
html.kc body .sd-table th { background: color-mix(in srgb, var(--kc-accent) 12%, transparent); color: var(--kc-accent); }
html.kc body .sd-table td:first-child { color: var(--kc-accent); background: color-mix(in srgb, var(--kc-accent) 12%, transparent); }
html.kc body .sd-word { color: var(--kc-accent); }
html.kc body .sd-yearbtn { border: 2px solid var(--kc-line); background: var(--kc-soft); }
html.kc body .sd-yearbtn__name { color: var(--kc-ink); }
html.kc body .sd-yearbtn__sub { color: var(--kc-muted); }
html.kc body .sd-yearbtn--star { background: color-mix(in srgb, var(--kc-warn) 12%, transparent); }
html.kc body .sd-letterbadge { background: color-mix(in srgb, var(--kc-accent) 12%, transparent); color: var(--kc-accent); }
html.kc body .sd-table th.sd-th--sara { color: var(--kc-accent); }
html.kc body .sd-table th.sd-th--byan { color: var(--kc-accent); }
html.kc body .sd-table th.sd-th--nikk { color: var(--kc-ok); }
html.kc body .sd-tick--sara { color: var(--kc-accent); }
html.kc body .sd-tick--byan { color: var(--kc-accent); }
html.kc body .sd-tick--nikk { color: var(--kc-ok); }
html.kc body .sd-mean { color: var(--kc-ink2); }

/* ── nama ── */
html.kc body .nm-facttable td { border: 1px solid var(--kc-line); }
html.kc body .nm-facttable td:first-child { color: var(--kc-accent); background: color-mix(in srgb, var(--kc-accent) 12%, transparent); }
html.kc body .nm-dectable th,
html.kc body .nm-dectable td { border: 1px solid var(--kc-line); }
html.kc body .nm-dectable th { background: color-mix(in srgb, var(--kc-accent) 12%, transparent); color: var(--kc-accent); }
html.kc body .nm-dectable td:first-child { color: var(--kc-ink2); background: color-mix(in srgb, var(--kc-accent) 12%, transparent); }
html.kc body .nm-nipcard { border: 1px solid var(--kc-line); background: var(--kc-soft); }
html.kc body .nm-nipcard b { color: var(--kc-accent); }
html.kc body .nm-nipcard span { color: var(--kc-ink2); }
html.kc body .nm-decpip { background: color-mix(in srgb, var(--kc-accent) 12%, transparent); color: var(--kc-accent); }
html.kc body .nm-decpip.is-done { background: color-mix(in srgb, var(--kc-ok) 12%, transparent); color: var(--kc-ink); }

/* ── akhyata-practice ── */
html.kc body .ay-table th,
html.kc body .ay-table td { border: 1px solid var(--kc-line); }
html.kc body .ay-table th { background: color-mix(in srgb, var(--kc-accent) 12%, transparent); color: var(--kc-accent); }
html.kc body .ay-table td:first-child { color: var(--kc-accent); background: color-mix(in srgb, var(--kc-accent) 12%, transparent); }
html.kc body .ay-vibword { color: var(--kc-accent); }
html.kc body .ay-exbig { color: var(--kc-accent); }
html.kc body .ay-extrans { color: var(--kc-accent); }
html.kc body .ay-pip { background: color-mix(in srgb, var(--kc-accent) 12%, transparent); color: var(--kc-accent); }
html.kc body .ay-pip.is-done { background: color-mix(in srgb, var(--kc-ok) 12%, transparent); color: var(--kc-ink); }
html.kc body .ay-parassa { color: var(--kc-accent); }
html.kc body .ay-mnemonic { background: color-mix(in srgb, var(--kc-accent) 12%, transparent); color: var(--kc-accent); }
html.kc body .ay-mnemonic__formula { color: var(--kc-accent); }
html.kc body .ay-mnemonic__sentence strong { color: var(--kc-accent); }

/* ── kitaka ── */

/* ── kiriya ── */

/* ── samasa ── */
html.kc body .sm-facttable td { border: 1px solid var(--kc-line); }
html.kc body .sm-facttable td:first-child { color: var(--kc-accent); background: color-mix(in srgb, var(--kc-accent) 12%, transparent); }
html.kc body .sm-vik { color: var(--kc-accent); }
html.kc body .sm-memorize-study__intro h2 { color: var(--kc-ink); }
html.kc body .sm-memorize-study__intro p { color: var(--kc-ink2); }
html.kc body .sm-memorize-type { border-top: 1px solid color-mix(in srgb, var(--kc-accent) 38%, transparent); }
html.kc body .sm-memorize-type__head strong { color: var(--kc-accent); }
html.kc body .sm-memorize-type__def { color: var(--kc-accent); }
html.kc body .sm-memorize-type__memo { border-top: 1px dashed color-mix(in srgb, var(--kc-accent) 38%, transparent); color: var(--kc-ink2); }
html.kc body .sm-signal-study__intro h2 { color: var(--kc-ink); }
html.kc body .sm-signal-study__intro p { color: var(--kc-ink2); }
html.kc body .sm-signal-item { border-bottom: 1px solid color-mix(in srgb, var(--kc-accent) 38%, transparent); }
html.kc body .sm-signal-marker { background: color-mix(in srgb, var(--kc-accent) 12%, transparent); color: var(--kc-accent); }
html.kc body .sm-signal-type { color: var(--kc-ink); }
html.kc body .sm-signal-type i { color: var(--kc-accent); }
html.kc body .sm-signal-note { color: var(--kc-ink2); }

/* ── taddhita ── */
html.kc body .td-signalrule { background: var(--kc-soft); border: 1px solid var(--kc-line); }
html.kc body .td-templatecard__title { color: var(--kc-ink); }
html.kc body .td-templatecard__meaning { color: var(--kc-accent); background: color-mix(in srgb, var(--kc-accent) 12%, transparent); }
html.kc body .td-templatecard__pattern { background: color-mix(in srgb, var(--kc-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--kc-accent) 38%, transparent); color: var(--kc-accent); }
html.kc body .td-templatecard__example { color: var(--kc-accent); }
html.kc body .td-templatecard__note { color: var(--kc-ink2); }
html.kc body .kt-chip.is-wrong { background: color-mix(in srgb, var(--kc-bad) 12%, transparent); color: var(--kc-bad); }