:root{
  --bg:#f7f7f5; --card:#ffffff; --ink:#1c1f26; --muted:#61666f; --line:#e3e3df;
  --pri:#1f6feb; --pri-d:#174fbf;
  --s1:#2f855a; --s2:#2b6cb0;   /* left=green right=blue for the pair */
  --exec:#6b46c1; --inf:#dd6b20; --rel:#3182ce; --strat:#38a169; /* gallup domain dot colors */
  --gold:#b8860b;
  --r-sm:10px; --r:14px; --r-lg:18px;
  --shadow:0 1px 2px rgba(20,24,33,.05), 0 6px 18px -10px rgba(20,24,33,.28);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Noto Sans Thai','Inter',system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{max-width:760px;margin:0 auto;padding:20px 18px 40px}
.wrap.narrow{max-width:540px}

:where(button,a,[tabindex]):focus-visible{outline:2.5px solid var(--pri); outline-offset:3px; border-radius:6px}

/* screens */
.screen{display:none}
.screen.active{display:block}
#intro.screen.active{display:flex; align-items:center; justify-content:center; min-height:100dvh; padding:32px 18px}
#intro .wrap{width:100%}
#assess.screen.active{display:flex; flex-direction:column; min-height:100dvh}

/* typography */
h1{font-size:clamp(1.5rem,1.2rem + 1.6vw,2rem); line-height:1.2; letter-spacing:-.02em; margin:0 0 10px; text-wrap:balance}
h2{font-size:1rem; margin:0 0 6px; letter-spacing:-.01em}
.lede{color:var(--muted); margin:0 0 24px; font-size:1.02rem; max-width:60ch}
.muted{color:var(--muted); font-size:.85rem}
.muted.err{color:#a12a2a; font-weight:600}
.disclaimer{color:var(--muted); font-size:.8rem; line-height:1.55; margin:24px 0 6px}

/* intro: the three things worth knowing before committing half an hour */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0 0 26px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.facts>div{background:var(--card); padding:14px 12px}
.facts dt{font-size:.74rem; color:var(--muted); margin:0 0 3px}
.facts dd{margin:0; font-weight:600; font-size:1.02rem; font-variant-numeric:tabular-nums}

.howto{margin:0 0 26px}
.howto-lede{color:var(--muted); font-size:.9rem; margin:0 0 16px}
.scale-demo{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin:0 0 16px}
.sd-end{font-size:.74rem; color:var(--muted); white-space:nowrap}
.sd-r{text-align:right}
.sd-dots{position:relative; display:flex; justify-content:space-between; align-items:center; padding:0 2px}
.sd-dots::before{content:""; position:absolute; left:6px; right:6px; top:50%; height:2px; background:var(--line); transform:translateY(-50%)}
.sd{position:relative; width:13px; height:13px; border-radius:50%; background:#fff; border:2.5px solid #c9ccd2}
.sd.s-a{border-color:var(--s1); background:var(--s1)}
.sd.s-b{border-color:var(--s1)}
.sd.s-e{border-color:var(--s2); background:var(--s2)}
.sd.s-d{border-color:var(--s2)}
.howto-list{margin:0; padding:0; list-style:none; font-size:.9rem; color:var(--muted)}
.howto-list li{padding:3px 0}
.howto-list b{color:var(--ink); font-weight:600}

/* buttons */
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.actions.center{justify-content:center}
button{font-family:inherit; cursor:pointer; border:none; border-radius:var(--r-sm); padding:13px 20px; font-size:1rem; font-weight:600; transition:background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease)}
.primary{background:var(--pri); color:#fff; box-shadow:var(--shadow)}
.primary:hover{background:var(--pri-d)}
.primary:active{transform:translateY(1px)}
.primary:disabled{background:#b9bec7; box-shadow:none; cursor:not-allowed}
.ghost{background:transparent; color:var(--pri); box-shadow:inset 0 0 0 1.5px var(--pri)}
.ghost:hover{background:rgba(31,111,235,.07)}
.ghost.small{padding:8px 14px; font-size:.86rem}
.linkbtn{background:none; color:var(--muted); padding:8px 4px; font-size:.86rem; font-weight:500; text-decoration:underline; text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}
.iconbtn{background:none; padding:0; width:44px; height:44px; display:grid; place-items:center; color:var(--pri); border-radius:50%; flex:none}
.iconbtn svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.iconbtn:hover{background:rgba(31,111,235,.09)}
.iconbtn:disabled{color:#c2c6cc; cursor:default}
.iconbtn:disabled:hover{background:none}

/* topbar / progress */
.topbar{position:sticky; top:0; z-index:10; background:rgba(247,247,245,.9); backdrop-filter:blur(10px);
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--line)}
.prog{flex:1; min-width:0}
.prog-track{height:6px; background:#e3e3df; border-radius:99px; overflow:hidden}
/* scaleX, not width: animating width forces layout on every frame */
.prog-fill{height:100%; width:100%; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--pri),#54a0ff); border-radius:99px; transition:transform .3s var(--ease)}
.prog-label{font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; min-width:2.6em; text-align:right}

/* question: statements first, answer control within thumb reach */
.qwrap{flex:1; display:flex; flex-direction:column; justify-content:center; padding-bottom:16px}
.qmeta{font-size:.8rem; color:var(--muted); margin:0 0 16px; text-align:center; font-variant-numeric:tabular-nums}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:stretch}
.stmt{background:#fff; color:var(--ink); border-radius:var(--r); padding:14px 16px 18px;
  font-size:1.04rem; font-weight:500; line-height:1.5; min-height:132px;
  display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  box-shadow:inset 0 0 0 1.5px var(--line), var(--shadow); font-family:inherit;
  transition:box-shadow .18s var(--ease), transform .18s var(--ease)}
.stmt>span:last-child{flex:1; display:flex; align-items:center; text-wrap:pretty}
.stmt:hover{transform:translateY(-2px)}
.stmt.left:hover{box-shadow:inset 0 0 0 1.5px var(--s1), var(--shadow)}
.stmt.right:hover{box-shadow:inset 0 0 0 1.5px var(--s2), var(--shadow)}
.stmt.left.picked{box-shadow:inset 0 0 0 2.5px var(--s1), var(--shadow)}
.stmt.right.picked{box-shadow:inset 0 0 0 2.5px var(--s2), var(--shadow)}
.badge{align-self:flex-start; width:24px; height:24px; border-radius:50%; flex:none;
  color:#fff; font-weight:700; font-size:.8rem; display:grid; place-items:center; font-family:'Inter',sans-serif}
.badge.b1{background:var(--s1)} .badge.b2{background:var(--s2)}

/* answer bar */
.answerbar{position:sticky; bottom:0; background:rgba(247,247,245,.94); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom)}
.answerbar .wrap{padding:14px 18px 12px}
.scale-labels{display:grid; grid-template-columns:1fr auto 1fr; gap:10px; font-size:.74rem; color:var(--muted); margin-bottom:12px}
.scale-labels .end-l{text-align:left}
.scale-labels .mid-l{text-align:center; white-space:nowrap}
.scale-labels .end-r{text-align:right}
.dots{display:flex; justify-content:space-between; align-items:center; position:relative; padding:4px 8px}
.dots::before{content:""; position:absolute; left:26px; right:26px; top:50%; height:3px; background:var(--line); border-radius:2px; transform:translateY(-50%); z-index:0}
.dot{position:relative; z-index:1; width:44px; height:44px; border-radius:50%; background:none; border:none; padding:0;
  display:grid; place-items:center; flex:none}
.dot::after{content:""; width:26px; height:26px; border-radius:50%; background:#fff; border:3px solid #c2c6cc;
  transition:transform .14s var(--ease), border-color .14s var(--ease), background .14s var(--ease)}
.dot:hover::after{border-color:var(--pri); transform:scale(1.14)}
.dot.sel::after{transform:scale(1.22)}
.dot.sel[data-v="1"]::after,.dot.sel[data-v="2"]::after{background:var(--s1); border-color:var(--s1)}
.dot.sel[data-v="4"]::after,.dot.sel[data-v="5"]::after{background:var(--s2); border-color:var(--s2)}
.dot.sel[data-v="3"]::after{background:#8b9099; border-color:#8b9099}
.hint{text-align:center; color:var(--muted); font-size:.76rem; margin:10px 0 0}
.kbd-hint{display:none}

/* results */
.res-head{text-align:center; margin:6px 0 20px}
.res-head .lede{margin-left:auto; margin-right:auto; margin-bottom:14px}
.rank-list{display:flex; flex-direction:column; gap:8px}
.box-grid{display:grid; gap:14px 8px; padding-top:16px}
.box-grid.fixed{grid-template-columns:repeat(8,1fr)}
.box{background:#fff; color:var(--ink); border-radius:12px; padding:22px 6px 12px; min-height:98px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  box-shadow:inset 0 0 0 1px var(--line), 0 1px 3px rgba(20,24,33,.06); position:relative; cursor:pointer;
  font-family:inherit; font-weight:400; transition:transform .15s var(--ease), box-shadow .15s var(--ease)}
.box:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--line), 0 6px 16px -8px rgba(20,24,33,.4)}
.box .b-rk{position:absolute; top:-12px; left:8px; width:30px; height:30px; border-radius:50%; background:var(--c);
  color:#fff; font-weight:700; font-size:.88rem; display:grid; place-items:center;
  box-shadow:0 1px 4px rgba(0,0,0,.25); border:2px solid var(--bg); font-family:'Inter',sans-serif}
.box .b-th{font-weight:600; font-size:.84rem; line-height:1.25}
.box .b-en{font-size:.58rem; color:var(--muted); margin-top:3px; font-family:'Inter',sans-serif}
.box.top{box-shadow:inset 0 0 0 2.5px #ffd54a, 0 2px 8px rgba(184,134,11,.22)}
.box.top:hover{box-shadow:inset 0 0 0 2.5px #ffd54a, 0 8px 18px -8px rgba(184,134,11,.5)}
.box .b-your{font-size:.58rem; color:var(--gold); font-weight:700; margin-top:3px; font-family:'Inter',sans-serif}
.domain-key{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:22px 0 4px; font-size:.76rem; color:var(--muted)}
.domain-key i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:middle}

/* theme detail — opens as an overlay on tap from the results grid */
.theme-detail{position:fixed; inset:0; z-index:50; background:rgba(17,20,26,.5); display:flex; align-items:center; justify-content:center; padding:20px}
.theme-detail[hidden]{display:none}
.td-card{position:relative; width:100%; max-width:420px; max-height:82vh; overflow-y:auto; background:#fff;
  border-radius:var(--r-lg); padding:26px 22px 22px; box-shadow:0 18px 50px -12px rgba(17,20,26,.5);
  animation:rise .22s var(--ease)}
@keyframes rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.td-card h2{margin:0; font-size:1.35rem; line-height:1.3}
.td-close{position:absolute; top:10px; right:10px; width:36px; height:36px; border:0; background:none;
  color:var(--muted); display:grid; place-items:center; border-radius:50%; padding:0}
.td-close svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.td-close:hover{color:var(--ink); background:#f1f2f5}
.td-rank{width:38px; height:38px; border-radius:50%; background:var(--c); color:#fff; font-weight:700;
  display:grid; place-items:center; margin-bottom:12px; font-family:'Inter',sans-serif}
.td-en{margin:4px 0 0; font-size:.78rem; color:var(--muted)}
.td-badge{display:inline-block; margin:12px 0 0; padding:4px 10px; border-radius:999px; background:#f1f2f5; color:var(--muted); font-size:.76rem; font-weight:600}
.td-badge.is-top{background:#fff4d1; color:#8a6400}
.td-desc{margin:14px 0 0; line-height:1.65}
.td-freq{margin:12px 0 0; font-size:.78rem; color:var(--muted)}

@media(min-width:700px){
  .kbd-hint{display:inline}
}
@media(max-width:560px){
  .box-grid.fixed{grid-template-columns:repeat(4,1fr)}
  .pair{grid-template-columns:1fr; gap:10px}
  .stmt{min-height:88px; padding:22px 14px 16px; font-size:1rem}
  .facts dd{font-size:.95rem}
  .theme-detail{align-items:flex-end; padding:0}
  .td-card{max-width:none; max-height:78vh; border-radius:var(--r-lg) var(--r-lg) 0 0}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.06s !important}
  .stmt:hover,.box:hover{transform:none}
}

@media print{
  .topbar,.answerbar,.actions,.disclaimer,.theme-detail{display:none !important}
  body{background:#fff}
  .box{box-shadow:inset 0 0 0 1px #ccc; break-inside:avoid}
  .box.top{box-shadow:inset 0 0 0 2.5px #b8860b}
  .box-grid.fixed{grid-template-columns:repeat(6,1fr)}
}