/* Demographic Transitions - styles. Light and dark themes via CSS variables. */
:root{
  --bg:#F2F5F1; --panel:#FFFFFF; --panel-2:#E9EEE9; --ink:#1C2723; --muted:#5C6B64;
  --line:#D5DDD6; --accent:#1F6E8C; --accent-ink:#FFFFFF; --good:#2E7D4F; --part:#A26B12; --bad:#A83A2E;
  --map-fill:#DDE4DF; --map-stroke:#F2F5F1; --focus:#1F6E8C;
  --s1:#3E5C76; --s2:#1D7A6B; --s3:#6FA34D; --s4:#D9A521; --s5:#C25B4E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131A1D; --panel:#1B2429; --panel-2:#222E34; --ink:#E7ECE9; --muted:#94A39C;
    --line:#324046; --accent:#57A7C4; --accent-ink:#0E181D; --good:#5FBE8A; --part:#DCA83E;
    --bad:#E07A6B; --map-fill:#2A363C; --map-stroke:#131A1D; --focus:#57A7C4;
  }
}
:root[data-theme="dark"]{
  --bg:#131A1D; --panel:#1B2429; --panel-2:#222E34; --ink:#E7ECE9; --muted:#94A39C;
  --line:#324046; --accent:#57A7C4; --accent-ink:#0E181D; --good:#5FBE8A; --part:#DCA83E;
  --bad:#E07A6B; --map-fill:#2A363C; --map-stroke:#131A1D; --focus:#57A7C4;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{
  background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  line-height:1.55; min-height:100vh;
}
.wrap{max-width:1180px;margin:0 auto;padding:20px 20px 56px}
header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:6px 2px 18px;border-bottom:1px solid var(--line);margin-bottom:22px}
h1{font-family:"Fraunces",serif;font-weight:700;font-size:1.7rem;letter-spacing:.01em}
h1 span{color:var(--accent)}
.hud{display:flex;gap:22px;font-size:.95rem;color:var(--muted)}
.hud b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:.55rem 1rem;transition:background .15s,border-color .15s,transform .06s}
button:hover{border-color:var(--accent)}
button:active{transform:scale(.985)}
button:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button:disabled{opacity:.55;cursor:default}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600;padding:.7rem 1.5rem}
.grid{display:grid;grid-template-columns:minmax(340px,460px) 1fr;gap:22px;align-items:start}
@media (max-width:880px){.grid{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1.25rem 1.4rem}
.kicker{font-size:.8rem;color:var(--muted);letter-spacing:.02em;margin-bottom:.35rem}
.q-title{font-family:"Fraunces",serif;font-weight:600;font-size:1.35rem;margin-bottom:.9rem}
.stim{background:var(--panel-2);border-radius:10px;padding:1rem 1.1rem;margin-bottom:1rem}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:.5rem .9rem;font-size:.95rem}
.stats div b{display:block;font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums}
.stats div span{color:var(--muted);font-size:.82rem}
.causes{list-style:none;font-size:.95rem}
.causes li{padding:.28rem 0;border-bottom:1px dashed var(--line)}
.causes li:last-child{border-bottom:none}
.answers{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:1rem}
@media (max-width:420px){.answers{grid-template-columns:repeat(3,1fr)}}
.answers button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:.6rem .3rem;line-height:1.15}
.answers button .num{font-family:"Fraunces",serif;font-weight:700;font-size:1.3rem}
.answers button .lbl{font-size:.68rem;color:var(--muted);text-align:center}
.answers button.picked-good{border-color:var(--good);background:color-mix(in srgb,var(--good) 14%,var(--panel))}
.answers button.picked-part{border-color:var(--part);background:color-mix(in srgb,var(--part) 14%,var(--panel))}
.answers button.picked-bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--panel))}
.answers button.reveal{border-color:var(--good)}
.feedback{border-left:3px solid var(--accent);padding:.15rem 0 .15rem .9rem;margin-bottom:1rem;font-size:.95rem}
.feedback .verdict{font-weight:600;margin-bottom:.2rem}
.feedback .verdict.good{color:var(--good)} .feedback .verdict.part{color:var(--part)} .feedback .verdict.bad{color:var(--bad)}
.ced{font-size:.78rem;color:var(--muted);margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--line)}
.map-card{padding:1rem}
.map-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:.4rem;flex-wrap:wrap}
.map-head p{font-size:.85rem;color:var(--muted)}
#mapbox{position:relative;width:100%;height:440px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--panel-2)}
@media (max-width:880px){#mapbox{height:340px}}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-top:.6rem}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:11px;height:11px;border-radius:3px;display:inline-block}
.minidtm{margin:0 0 1rem}
.center{text-align:center}
.start-card{max-width:640px;margin:4vh auto 0;text-align:left}
.start-card h2{font-family:"Fraunces",serif;font-weight:700;font-size:2.2rem;line-height:1.15;margin-bottom:.8rem}
.start-card p{margin-bottom:.8rem;color:var(--muted)}
.start-card ul{margin:0 0 1.2rem 1.2rem;color:var(--muted)}
.start-card li{margin-bottom:.3rem}
.rowend{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.end-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:1.2rem 0}
.end-stats .card{padding:.9rem 1rem}
.end-stats b{font-family:"Fraunces",serif;font-size:1.9rem;font-weight:700}
.end-stats span{font-size:.8rem;color:var(--muted);display:block}
.bar{height:8px;border-radius:4px;background:var(--panel-2);overflow:hidden;margin-top:.35rem}
.bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.typerow{display:grid;grid-template-columns:130px 1fr 60px;gap:10px;align-items:center;font-size:.9rem;margin-bottom:.5rem}
.hidden{display:none}
.pyr-note{font-size:.8rem;color:var(--muted);margin-top:.4rem}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}