/* Same palette and type as the Thai survey (thai.romanize.it), so the two read as one site. */
: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;
}
.sans,button,input{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

.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 16px; height:52px; display:flex; align-items:center; gap:12px}
.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}
.badge{font-family:ui-sans-serif,system-ui,sans-serif; font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:99px; background:var(--ochre-soft); color:var(--ochre); white-space:nowrap}
.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:34px 16px 60px}
.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.7rem; line-height:1.25; margin:0 0 6px; font-weight:600; letter-spacing:-.01em; text-wrap:balance}
h2{font-size:1.1rem; margin:26px 0 10px; font-weight:600}
.sub{color:var(--muted); font-size:.95rem; margin:0 0 24px; font-family:ui-sans-serif,system-ui,sans-serif}
p{margin:0 0 14px}
.rules{list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:10px}
.rules li{padding-left:19px; position:relative; font-size:.97rem; color:var(--ink-2)}
.rules li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; border:1.5px solid var(--accent); border-radius:50%}

.stim{text-align:center; padding:24px 12px; margin:0 0 22px; 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:10px}
.stim .name{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:clamp(1.4rem,6vw,2.1rem); letter-spacing:.08em; font-weight:600; overflow-wrap:anywhere}
.stim .name b{color:var(--accent); border-bottom:2px solid var(--accent)}

.q{font-weight:600; margin:20px 0 10px}
.q small{display:block; font-weight:400; color:var(--muted); font-size:.88rem; font-family:ui-sans-serif,system-ui,sans-serif}

.cands{display:flex; flex-direction:column; gap:8px}
.cand{display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--surface); border:1px solid var(--rule); border-radius:10px}
.cand .form{font-size:1.3rem; margin-right:auto; min-width:0}
.yn{display:flex; gap:6px}
.yn button,.pick button{font-size:14px; font-weight:600; padding:7px 13px; min-width:58px; border-radius:8px; border:1px solid var(--rule-strong); background:transparent; color:var(--ink-2); cursor:pointer}
.yn button[aria-pressed="true"].y{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.yn button[aria-pressed="true"].n{background:var(--rubric); border-color:var(--rubric); color:var(--accent-ink)}
.pick{display:flex; flex-wrap:wrap; gap:8px}
.pick button{font-family:inherit; font-size:1.15rem; font-weight:500; padding:7px 14px}
.pick button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

input[type=text]{width:100%; font-size:1.15rem; padding:10px 12px; border:1px solid var(--rule-strong); border-radius:8px; background:var(--surface); color:var(--ink); font-family:inherit}
.own{margin-top:10px}

.actions{display:flex; justify-content:flex-end; gap:10px; margin-top:26px}
.btn{font-size:15px; font-weight:600; padding:11px 22px; border-radius:10px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); cursor:pointer}
.btn.ghost{background:transparent; color:var(--accent)}
.btn:disabled{opacity:.4; cursor:not-allowed}

.reveal{margin-top:20px; padding:16px; background:var(--accent-soft); border-radius:12px}
.reveal h3{margin:0 0 4px; font-size:1rem}
.reveal .note{font-family:ui-sans-serif,system-ui,sans-serif; font-size:.85rem; color:var(--ink-2); margin:10px 0 0}
table.dist{width:100%; border-collapse:collapse; font-size:.95rem; margin-top:8px}
table.dist td{padding:5px 4px; border-bottom:1px solid var(--rule); vertical-align:middle}
table.dist td.f{font-size:1.15rem; width:28%}
table.dist td.pc{font-family:ui-sans-serif,system-ui,sans-serif; text-align:right; width:16%; font-variant-numeric:tabular-nums}
.barwrap{height:8px; background:var(--surface); border-radius:4px; overflow:hidden}
.barwrap i{display:block; height:100%; background:var(--accent)}
.tag{font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px; font-weight:600; padding:2px 7px; border-radius:99px; margin-left:6px; white-space:nowrap}
.tag.f{background:var(--rubric-soft); color:var(--rubric)}
.tag.m{background:var(--surface); color:var(--accent)}
.tag.bad{background:var(--ochre-soft); color:var(--ochre)}
.you{font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px; font-weight:700; color:var(--accent); margin-left:6px}

.foot{max-width:720px; margin:0 auto; padding:0 16px 40px; font-family:ui-sans-serif,system-ui,sans-serif; font-size:12px; color:var(--muted)}
.foot a{color:var(--muted)}
@media (max-width:480px){
  .cand{flex-wrap:wrap}
  .yn button{min-width:52px; padding:7px 10px}
  .bar .badge{display:none}
}