/* Self-hosted so the Thai renders on any machine, not only on Thai-configured ones.
   Noto Sans Thai, SIL Open Font License 1.1 - see fonts/OFL.txt. Subset to Thai +
   Basic Latin, variable weight axis retained. */
@font-face{
  font-family:"Noto Sans Thai Local";
  src:url("fonts/NotoSansThai-var.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --ground:#F3F2ED; --surface:#FBFAF6; --surface-2:#EDEBE3;
  --ink:#1B1E19; --ink-2:#41453C; --muted:#6C7067;
  --rule:#D6D5CB; --rule-strong:#B9B8AC;
  --accent:#2C5D55; --accent-soft:#DDE8E4; --accent-ink:#FBFAF6;
  --rubric:#A64526; --rubric-soft:#F2E1D9;
  --ochre:#87681C; --ochre-soft:#EFE7CE;
  --shadow:0 1px 2px rgba(27,30,25,.06), 0 8px 24px -16px rgba(27,30,25,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#131614; --surface:#1B1F1C; --surface-2:#232823;
    --ink:#E6E5DD; --ink-2:#C2C4BA; --muted:#969A90;
    --rule:#2E332E; --rule-strong:#454B44;
    --accent:#6FB6A6; --accent-soft:#1E322E; --accent-ink:#101412;
    --rubric:#E0906E; --rubric-soft:#33221B;
    --ochre:#C9A44E; --ochre-soft:#2C2618;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#131614; --surface:#1B1F1C; --surface-2:#232823;
  --ink:#E6E5DD; --ink-2:#C2C4BA; --muted:#969A90;
  --rule:#2E332E; --rule-strong:#454B44;
  --accent:#6FB6A6; --accent-soft:#1E322E; --accent-ink:#101412;
  --rubric:#E0906E; --rubric-soft:#33221B;
  --ochre:#C9A44E; --ochre-soft:#2C2618;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  background:var(--ground); color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body[lang="th"]{
  font-family:"Noto Sans Thai Local","Noto Sans Thai","Leelawadee UI",Thonburi,"Sarabun",Tahoma,sans-serif;
  line-height:1.85;
}
.thai{font-family:"Noto Sans Thai Local","Noto Sans Thai","Leelawadee UI",Thonburi,"Sarabun",Tahoma,sans-serif}
.mono,code{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Noto Sans Thai Local",monospace}
.sans{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* ---------- chrome ---------- */
.bar{
  position:sticky; top:0; z-index:20; background:var(--ground);
  border-bottom:1px solid var(--rule);
}
.bar-in{
  max-width:720px; margin:0 auto; padding:0 20px; height:52px;
  display:flex; align-items:center; gap:14px;
}
.bar .titles{display:flex; flex-direction:column; margin-right:auto; min-width:0; line-height:1.35}
.bar .title{
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bar .org{
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.85;
}
body[lang="th"] .bar .org{font-family:inherit; font-size:11.5px}
body[lang="th"] .bar .title{font-family:inherit; text-transform:none; letter-spacing:0; font-size:13px}
.langbtn{
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:13px; font-weight:600;
  padding:5px 12px; border:1px solid var(--rule-strong); border-radius:99px;
  background:transparent; color:var(--ink-2); cursor:pointer; white-space:nowrap;
}
.langbtn:hover{border-color:var(--accent); color:var(--accent)}
.langbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.progress{height:2px; background:var(--rule)}
.progress i{display:block; height:100%; background:var(--accent); width:0; transition:width .35s ease}

main{max-width:720px; margin:0 auto; padding:38px 20px 90px}

/* ---------- screens ---------- */
.screen{animation:rise .28s ease}
@keyframes rise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .screen{animation:none} }

h1{font-size:1.72rem; line-height:1.25; margin:0 0 6px; font-weight:600; letter-spacing:-.01em; text-wrap:balance}
body[lang="th"] h1{letter-spacing:0}
.sub{color:var(--muted); font-size:.95rem; margin:0 0 26px; font-family:ui-sans-serif,system-ui,sans-serif}
body[lang="th"] .sub{font-family:inherit}
p{margin:0 0 15px}
.rules{list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:11px}
.rules li{
  padding-left:19px; position:relative; font-size:.97rem; color:var(--ink-2); line-height:1.55;
}
body[lang="th"] .rules li{line-height:1.8}
.rules li::before{
  content:""; position:absolute; left:0; top:.62em; width:7px; height:7px;
  border:1.5px solid var(--accent); border-radius:50%;
}

/* ---------- stimulus ---------- */
.stim{
  text-align:center; padding:26px 14px; margin:0 0 24px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--surface);
}
.stim .lbl{
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
body[lang="th"] .stim .lbl{font-family:inherit; letter-spacing:.02em; text-transform:none; font-size:12.5px}
.stim .word{font-size:clamp(2.1rem,7.5vw,2.9rem); line-height:1.35; font-weight:500}
.stim .word.mono{font-size:clamp(1.7rem,5.6vw,2.3rem); letter-spacing:.005em}

/* ---------- questions ---------- */
.q{margin:0 0 26px}
.qt{
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:.94rem; font-weight:600;
  display:block; margin:0 0 8px; line-height:1.5;
}
body[lang="th"] .qt{font-family:inherit; font-size:1rem; line-height:1.75}
.hint{
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:13px; color:var(--muted);
  margin:0 0 12px; line-height:1.5;
}
body[lang="th"] .hint{font-family:inherit; font-size:14px; line-height:1.75}

.cands{display:flex; flex-direction:column; gap:8px}
.cand{
  display:flex; align-items:center; gap:14px; padding:13px 16px;
  border:1px solid var(--rule); border-radius:3px; background:var(--surface); cursor:pointer;
  transition:border-color .14s, background .14s;
}
.cand:hover{border-color:var(--rule-strong)}
.cand:has(:focus-visible){outline:2px solid var(--accent); outline-offset:1px}
.cand.on{border-color:var(--accent); background:var(--accent-soft)}
.cand{cursor:default; flex-wrap:wrap; justify-content:space-between}
.cand.off{border-color:var(--rule-strong); background:var(--surface-2)}
.cand .cl{display:flex; flex-direction:column; min-width:0}
.yn{display:flex; gap:6px; flex:none}
.ynb{
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:.85rem; padding:7px 13px;
  border:1px solid var(--rule-strong); border-radius:99px; background:transparent;
  color:var(--ink-2); cursor:pointer; transition:.14s; white-space:nowrap;
}
body[lang="th"] .ynb{font-family:inherit; font-size:.92rem}
.ynb:hover{border-color:var(--accent)}
.ynb.y.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.ynb.n.on{background:var(--rubric); border-color:var(--rubric); color:var(--accent-ink)}
.yours{font-family:ui-sans-serif,system-ui,sans-serif; font-size:.94rem; color:var(--ink-2)}
body[lang="th"] .yours{font-family:inherit}
.yours .mono{font-weight:600; color:var(--ink)}
.need{margin-top:6px}
.rom{font-family:ui-sans-serif,system-ui,sans-serif; font-size:12px; color:var(--muted); margin-top:4px; letter-spacing:0; text-transform:none}
.soon{font-family:ui-sans-serif,system-ui,sans-serif; font-weight:600; color:var(--ochre)}
body[lang="th"] .soon{font-family:inherit}
.contact{font-family:ui-sans-serif,system-ui,sans-serif; font-size:.94rem; margin-top:30px}
body[lang="th"] .contact{font-family:inherit}
.contact a{color:var(--accent)}
.cand .s{font-size:1.1rem; letter-spacing:.005em}
.cand .s.thai{font-size:1.32rem}

.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt{
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:.88rem;
  padding:8px 15px; border:1px solid var(--rule); border-radius:99px; cursor:pointer;
  background:var(--surface); color:var(--ink-2); transition:.14s; text-align:left;
}
body[lang="th"] .opt{font-family:inherit; font-size:.95rem}
.opt:hover{border-color:var(--rule-strong)}
.opt.on{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.opt:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

input[type=text]{
  width:100%; padding:11px 13px; border:1px solid var(--rule); border-radius:3px;
  background:var(--ground); color:var(--ink); font:inherit; font-size:1rem;
}
input[type=text].mono{font-family:ui-monospace,Menlo,Consolas,"Noto Sans Thai Local",monospace}
input[type=text]:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}

/* ---------- actions ---------- */
.actions{
  display:flex; align-items:center; gap:12px; margin-top:30px; padding-top:22px;
  border-top:1px solid var(--rule); flex-wrap:wrap;
}
button.go{
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:.94rem; font-weight:600;
  padding:11px 24px; border-radius:3px; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink); cursor:pointer; transition:.14s;
}
body[lang="th"] button{font-family:inherit}
button.go:hover{filter:brightness(1.08)}
button.go:disabled{opacity:.38; cursor:not-allowed; filter:none}
button.ghost{
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:.9rem;
  padding:11px 18px; border-radius:3px; border:1px solid var(--rule);
  background:transparent; color:var(--muted); cursor:pointer;
}
button.ghost:hover{color:var(--ink); border-color:var(--rule-strong)}
button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.count{
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:12.5px; color:var(--muted);
  margin-left:auto; font-variant-numeric:tabular-nums;
}
body[lang="th"] .count{font-family:inherit}

/* ---------- debrief extras ---------- */
.card{
  border:1px solid var(--rule-strong); border-left:3px solid var(--accent);
  background:var(--surface); padding:20px 22px; border-radius:0 3px 3px 0; margin:24px 0;
}
.card h2{font-size:1.1rem; margin:0 0 9px; font-weight:600}
.card p:last-child{margin-bottom:0}
.card.book{border-left-color:var(--ochre)}

.lookup-res{margin-top:16px}
.lk-head{
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:13px; color:var(--muted);
  margin-bottom:12px; font-variant-numeric:tabular-nums;
}
body[lang="th"] .lk-head{font-family:inherit}
.lk-row{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:7px 0}
.lk-row .n{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1rem}
.lk-row .pct{font-family:ui-sans-serif,system-ui,sans-serif; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.lk-bar{grid-column:1/-1; height:4px; background:var(--rule); border-radius:2px; overflow:hidden}
.lk-bar i{display:block; height:100%; background:var(--accent); width:0; transition:width .5s ease}
.tag-official{
  display:inline-block; font-family:ui-sans-serif,system-ui,sans-serif; font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; padding:2px 7px; border-radius:2px;
  background:var(--ochre-soft); color:var(--ochre); margin-left:8px; vertical-align:2px;
}
body[lang="th"] .tag-official{font-family:inherit; text-transform:none; letter-spacing:0}

.credits{
  margin-top:44px; padding-top:20px; border-top:1px solid var(--rule);
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:12.5px; color:var(--muted); line-height:1.6;
}
body[lang="th"] .credits{font-family:inherit; font-size:13.5px}

.status{font-family:ui-sans-serif,system-ui,sans-serif; font-size:13px; margin-top:14px}
body[lang="th"] .status{font-family:inherit}
.status.ok{color:var(--accent)}
.status.bad{color:var(--rubric)}

/* ---------- review mode ---------- */
.reviewbar{
  background:var(--rubric-soft); color:var(--rubric); border-bottom:1px solid var(--rubric);
  font-family:ui-sans-serif,system-ui,"Noto Sans Thai Local",sans-serif; font-size:12.5px; padding:9px 20px;
  text-align:center; line-height:1.5;
}
.gatebar{
  background:var(--ochre-soft); color:var(--ochre); border-bottom:1px solid var(--ochre);
  font-family:ui-sans-serif,system-ui,"Noto Sans Thai Local",sans-serif; font-size:13px; padding:10px 20px;
  text-align:center; line-height:1.5; font-weight:600;
}
body[lang="th"] .gatebar{font-family:inherit}
body.review [data-draft="1"]{
  text-decoration:underline wavy var(--rubric); text-underline-offset:4px;
  text-decoration-thickness:1px;
}