/* Public dashboard shell, aligned with the approved WIR scale site.
   Chart panel backgrounds and validated categorical/ordinal palettes stay intact. */
html:root {--bg:#f0effa;--text:#0a0a2e;--text-2:#33334e;--maxw:1380px}
html[data-theme="night"] {--bg:#0a0a2e;--text:#f8f8fd;--text-2:#d9d8ee}
body > header {background:#fafaff;color:#0a0a2e;border-bottom:1px solid #d9d8ee;box-shadow:none}
body .topbar {padding-block:20px;gap:24px}
body .brand {gap:16px}
body .brand-title {font-size:16px;letter-spacing:-.025em}
body .brand .sub {color:#575773;white-space:nowrap}
body .brand .light {display:block}body .brand .dark {display:none}
.back-site {font-size:12px;font-weight:500;white-space:nowrap;border-right:1px solid #d9d8ee;padding-right:16px;color:#3222e9}
body header :is(.seg,.themebtn) {background:#eeedfb;border-color:#d9d8ee;color:#0a0a2e}
body header .seg button {color:#454460}
body header .seg button.on {background:#111333;color:#fff}
body header .badge-live {color:#454460}
body #nav {border-top:1px solid #e4e3f0;gap:12px}
body #nav button {font-size:13px;color:#575773;padding:18px 16px}
body #nav button.active {color:#3222e9;border-color:#3222e9;background:#eeedfb}
body #intro {background:radial-gradient(ellipse at 90% 0,#39327d,transparent 68%),#111333;color:#fafaff;padding:52px 40px;border:0;margin-top:28px;position:relative;overflow:hidden}
body #intro h1 {font:500 clamp(34px,4vw,60px)/1.04 var(--f-sans);letter-spacing:-.055em;color:#fff}
body #intro h1 em {font-family:var(--f-display);font-weight:400;color:#cabbff}
body #intro .lead {color:#d4d1e7;font-size:15px;line-height:1.7}
body #intro .stats {border-color:#565078}
body #intro .stat {background:transparent;border-color:#565078}
body #intro .stat b {color:#fff;font-family:var(--f-sans);font-size:30px;letter-spacing:-.04em}
body #intro .stat span {color:#d4d1e7}
body #intro .site,body #intro .site a {color:#d4d1e7}
body #intro .enter {background:#fafaff;color:#111333;border-radius:999px;padding:13px 22px}
body .tab {padding-top:12px}
body .panel {border-radius:8px}
.data-status {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;background:#e5e2ff;color:#111333;margin:20px 0;border-left:3px solid #7064fa;font-size:14px}
.data-status[hidden] {display:none}
.data-status button {font:inherit;border:1px solid #7064fa;padding:8px 14px;color:#111333;background:#fafaff;cursor:pointer;border-radius:4px}
body :focus-visible {outline:3px solid #8c7fee;outline-offset:4px}
@media(max-width:960px){body .topbar{gap:16px;padding-block:14px}body .brand .sub{max-width:none}body #intro{padding:36px 26px}body #nav{gap:0}body #nav button{padding:14px 12px;font-size:12px}}
@media(max-width:600px){body .brand-title{font-size:14px}body .brand .sub{font-size:10px;max-width:215px}body .brand{gap:10px}.back-site{font-size:11px;padding-right:10px}body .brand img{height:36px!important}body #intro{padding:28px 20px;margin-top:18px}body #intro .stat b{font-size:24px}body #intro h1{font-size:36px}body .period{gap:8px}body header .badge-live{font-size:10px}body #nav{overflow-x:auto;flex-wrap:nowrap}body #nav button{white-space:nowrap;flex-shrink:0}.data-status{align-items:start;flex-direction:column}}
body #intro p.lead b {color:#fafaff}
body #intro .stats {background:#22244c;border-color:#565078}
body #intro .stat {background:#22244c}
body #intro .discl,body #intro .discl summary {color:#d4d1e7}
body header .badge-live {display:inline-flex}
/* Mobile header: index.html hides the live badge at <=640px, but the inline-flex rule above
   out-specified it, pushing the controls onto two rows (~190px of sticky header).
   Keep the controls on one row, and fold them away once the reader scrolls into the data. */
@media(max-width:640px){body header .badge-live{display:none}body .period{flex-wrap:nowrap;gap:6px}body header .seg button{padding:6px 8px;font-size:11px}body header .themebtn{padding:6px 8px;font-size:10px}body header.compact .period{display:none}body header.compact .topbar{padding-block:8px}}
@media(max-width:374px){body .period{flex-wrap:wrap}}