/* SG Nation Tracker — dense analyst theme.
   Light is the bare :root palette; dark is applied under prefers-color-scheme (unless the reader
   has explicitly chosen light) and under [data-theme="dark"], so auto / light / dark all resolve. */
:root{
  color-scheme:light;
  --is-light:1;
  --bg:#f3f5f8; --panel:#ffffff; --panel2:#eef1f5; --line:#dde2ea; --line2:#c4ccd8;
  --text:#0f141b; --muted:#57626f; --dim:#8a94a1;
  --accent:#d81f2c;                       /* Singapore red, darkened for white */
  --blue:#1f7ed0; --green:#12916a; --amber:#b3730a; --red:#cf2f38; --violet:#6d4fe0; --cyan:#0d8fa8;
  --grid:#e7ebf1; --zero:#b4bdc9; --hl:#94a0af;
  --hover:#f1f5fa; --rowline:#eef1f6; --track:#e6eaf0;
  --tip-bg:#ffffff; --shadow:0 10px 26px rgba(15,20,26,.13);
  --mapbg:#e9edf2;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  --shell:3200px;                         /* effectively full-bleed on a wide display; prose is capped in ch */
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark; --is-light:0;
    --bg:#0a0c10; --panel:#12161c; --panel2:#171c24; --line:#232b36; --line2:#2f3946;
    --text:#e7eef7; --muted:#8b98a9; --dim:#5f6b7c;
    --accent:#ef3340;
    --blue:#39a0ed; --green:#38c793; --amber:#f0a832; --red:#e5484d; --violet:#a78bfa; --cyan:#22d3ee;
    --grid:#1e2530; --zero:#3a4553; --hl:#4a5666;
    --hover:#161c25; --rowline:#1a2029; --track:#1a212b;
    --tip-bg:#0d1218; --shadow:0 8px 22px rgba(0,0,0,.6);
    --mapbg:#0d1116;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark; --is-light:0;
  --bg:#0a0c10; --panel:#12161c; --panel2:#171c24; --line:#232b36; --line2:#2f3946;
  --text:#e7eef7; --muted:#8b98a9; --dim:#5f6b7c;
  --accent:#ef3340;
  --blue:#39a0ed; --green:#38c793; --amber:#f0a832; --red:#e5484d; --violet:#a78bfa; --cyan:#22d3ee;
  --grid:#1e2530; --zero:#3a4553; --hl:#4a5666;
  --hover:#161c25; --rowline:#1a2029; --track:#1a212b;
  --tip-bg:#0d1218; --shadow:0 8px 22px rgba(0,0,0,.6);
  --mapbg:#0d1116;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:13px;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none} a:hover{text-decoration:underline}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:var(--panel);border-bottom:1px solid var(--line)}
.hrow{display:flex;align-items:center;gap:14px;padding:9px clamp(12px,1.3vw,26px)}
.brand{display:flex;align-items:baseline;gap:9px;font-weight:700;font-size:15px;letter-spacing:-.2px;white-space:nowrap}
.brand .flag{width:9px;height:9px;border-radius:50%;background:var(--accent);display:inline-block}
.brand small{color:var(--muted);font-weight:500;font-size:11px;letter-spacing:.3px}
.hspacer{flex:1}
.badge{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.badge.warn{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent);background:color-mix(in srgb,var(--amber) 12%,transparent)}
.badge.ok{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,transparent);background:color-mix(in srgb,var(--green) 10%,transparent)}
.themebtn{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:999px;
  font:inherit;font-size:11px;font-family:var(--mono);padding:3px 11px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px}
.themebtn:hover{color:var(--text);border-color:var(--line2)}
.themebtn svg{width:12px;height:12px;fill:currentColor}

nav{display:flex;gap:2px;padding:0 clamp(8px,1vw,20px) 0;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-size:12.5px;
  padding:7px 11px 8px;cursor:pointer;white-space:nowrap;border-radius:4px 4px 0 0}
nav button:hover{color:var(--text);background:var(--hover)}
nav button.on{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
nav button .nb{font-family:var(--mono);font-size:10px;color:var(--dim);margin-left:5px}

/* ---------- layout ---------- */
main{padding:14px clamp(12px,1.3vw,26px) 60px;max-width:var(--shell);margin:0 auto}
.tab{display:none} .tab.on{display:block}
h2.sec{font-size:12px;text-transform:uppercase;letter-spacing:.9px;color:var(--muted);font-weight:600;margin:22px 0 9px;
  display:flex;align-items:center;gap:9px}
h2.sec:before{content:"";width:3px;height:13px;background:var(--accent);border-radius:2px}
h2.sec:first-child{margin-top:4px}
.sub{color:var(--muted);font-size:12px;margin:-4px 0 12px;line-height:1.55;max-width:110ch}
.grid{display:grid;gap:12px}
/* auto-fit with a floor of "one Nth of the row": a wide display gains a column instead of stretching
   two charts across a metre of glass, and a laptop keeps the two-up it always had. The max() caps the
   column count (g2 never exceeds 3), the px term sets the point below which a column is dropped. */
.g1{grid-template-columns:1fr}
.g2{grid-template-columns:repeat(auto-fit,minmax(max(440px,(100% - 24px)/3),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(max(300px,(100% - 24px)/3),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(max(260px,(100% - 36px)/4),1fr))}
.g23{grid-template-columns:repeat(auto-fit,minmax(max(460px,(100% - 12px)/2),1fr))}
.g31{grid-template-columns:repeat(auto-fit,minmax(max(460px,(100% - 12px)/2),1fr))}
@media(max-width:760px){.grid{grid-template-columns:1fr!important}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:12px 13px;position:relative;min-width:0}
.card h3{margin:0 0 3px;font-size:13px;font-weight:600;letter-spacing:-.1px}
.card .note{color:var(--muted);font-size:11.5px;margin:0 0 9px;line-height:1.5;max-width:110ch}
.card.accent{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}

/* KPI tiles */
.kpis{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 12px;position:relative}
.kpi .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:5px;line-height:1.3;padding-right:46px;min-height:26px}
.kpi .v{font-family:var(--mono);font-size:21px;font-weight:600;letter-spacing:-.6px;line-height:1.1}
.kpi .d{font-size:11px;margin-top:4px;color:var(--muted);font-family:var(--mono)}
.kpi .d.up{color:var(--green)} .kpi .d.dn{color:var(--red)}
.kpi .asof{position:absolute;right:10px;top:9px;font-size:9.5px;color:var(--dim);font-family:var(--mono);letter-spacing:0}

/* verdict banner */
.verdict{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:9px;padding:13px 15px;margin-bottom:14px}
.verdict h1{margin:0 0 5px;font-size:16px;font-weight:650;letter-spacing:-.2px}
.verdict p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.65;max-width:125ch}
.verdict b{color:var(--text)}

/* tables */
table{border-collapse:collapse;width:100%;font-size:12px}
th{text-align:right;font-weight:600;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
  padding:6px 8px;border-bottom:1px solid var(--line2);position:sticky;top:0;background:var(--panel);z-index:2;white-space:nowrap;cursor:pointer}
th:first-child,td:first-child{text-align:left}
th.nosort{cursor:default}
td{padding:5px 8px;border-bottom:1px solid var(--rowline);text-align:right;font-family:var(--mono);font-size:11.5px;white-space:nowrap}
td:first-child{font-family:var(--sans);font-size:12px}
td.wrap{white-space:normal;font-family:var(--sans);text-align:left;line-height:1.5;min-width:32ch;max-width:90ch}
tbody tr:hover{background:var(--hover)}
.tw{overflow:auto;max-height:560px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.pos{color:var(--green)} .neg{color:var(--red)} .mut{color:var(--muted)} .dim{color:var(--dim)}
.tag{display:inline-block;font-size:10px;padding:1.5px 6px;border-radius:4px;font-family:var(--sans);font-weight:600;letter-spacing:.2px;
  background:color-mix(in srgb,var(--muted) 15%,transparent);color:var(--muted)}
.tag.met{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.tag.track{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}
.tag.behind{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.tag.miss{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.tag.unk{background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--muted)}
.tag.pap{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.tag.opp{background:color-mix(in srgb,var(--blue) 16%,transparent);color:var(--blue)}

/* charts */
.chart{width:100%;height:auto;display:block;overflow:visible}
.c-grid{stroke:var(--grid);stroke-width:1} .c-zero{stroke:var(--zero);stroke-width:1}
.c-ax{fill:var(--dim);font-size:9.5px;font-family:var(--mono)}
.c-val{fill:var(--muted);font-size:9px;font-family:var(--mono)}
.c-empty{fill:var(--dim);font-size:12px}
.c-hl{stroke:var(--hl);stroke-width:1;stroke-dasharray:3 3}
.c-bar:hover{opacity:.75} .c-arc:hover{opacity:.8}
.c-donut-v{fill:var(--text);font-size:17px;font-family:var(--mono);font-weight:600}
.chartbox{position:relative}
.ctip{display:none;position:absolute;pointer-events:none;background:var(--tip-bg);border:1px solid var(--line2);border-radius:6px;
  padding:6px 9px;font-size:11px;z-index:40;box-shadow:var(--shadow);min-width:130px;font-family:var(--mono)}
.ctip b{display:block;margin-bottom:4px;color:var(--text);font-size:11px}
.ctip div{display:flex;align-items:center;gap:6px;line-height:1.55;white-space:nowrap}
.ctip i{width:8px;height:8px;border-radius:2px;display:inline-block;flex:0 0 auto}
.ctip span{margin-left:auto;padding-left:12px;color:var(--text)}
.legend{display:flex;flex-wrap:wrap;gap:11px;margin-top:7px;font-size:11px;color:var(--muted)}
.legend i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px}
.legend span{display:inline-flex;align-items:center}
.spark{vertical-align:middle}

/* ranked bars */
.rankbars{display:flex;flex-direction:column;gap:3px;overflow:auto}
.rb{display:grid;grid-template-columns:minmax(90px,1.5fr) 3fr minmax(58px,auto);gap:8px;align-items:center;font-size:11.5px}
.rb-n{color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rb-t{background:var(--track);height:12px;border-radius:3px;overflow:hidden}
.rb-f{display:block;height:100%;border-radius:3px}
.rb-v{font-family:var(--mono);color:var(--muted);text-align:right;font-size:11px}

/* map */
#map{width:100%;height:clamp(520px,70vh,940px);border-radius:9px;overflow:hidden;border:1px solid var(--line);background:var(--mapbg)}
.maprow{display:grid;grid-template-columns:minmax(0,1fr) clamp(268px,19vw,340px);gap:12px}
@media(max-width:1000px){.maprow{grid-template-columns:1fr}}
.ctl{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px;align-items:center}
.basisbar{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 11px;margin-bottom:12px}
.basisbar .dim{font-size:11px}
.basisbar .chip{font-size:11px;padding:3px 10px}
.chip{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:4px 11px;
  font-size:11.5px;cursor:pointer;user-select:none;white-space:nowrap}
.chip:hover{color:var(--text);border-color:var(--line2)}
.chip.on{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);color:var(--accent)}
select,input[type=text]{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:6px;
  padding:5px 9px;font:inherit;font-size:12px;outline:none}
select:focus,input:focus{border-color:var(--line2)}
.mlegend{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)}
.mlegend .row{display:flex;align-items:center;gap:7px}
.mlegend .sw{width:15px;height:11px;border-radius:2px;flex:0 0 auto}
.maplibregl-popup-content{background:var(--panel)!important;color:var(--text)!important;border:1px solid var(--line2);
  border-radius:7px!important;font-size:11.5px;font-family:var(--sans);padding:9px 11px!important;box-shadow:var(--shadow)}
.maplibregl-popup-tip{border-top-color:var(--panel)!important;border-bottom-color:var(--panel)!important}
.maplibregl-popup-close-button{color:var(--muted)!important}
.maplibregl-ctrl-group{background:var(--panel)!important;border:1px solid var(--line)!important}
.maplibregl-ctrl-group button+button{border-top-color:var(--line)!important}
.maplibregl-ctrl-icon{filter:var(--is-light, 1) 0 0 0}
:root[data-theme="dark"] .maplibregl-ctrl-icon,
:root:not([data-theme="light"]) .maplibregl-ctrl-icon{filter:invert(.85)}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .maplibregl-ctrl-icon{filter:none}}
:root[data-theme="light"] .maplibregl-ctrl-icon{filter:none}
.maplibregl-ctrl-attrib{background:color-mix(in srgb,var(--panel) 80%,transparent)!important}
.maplibregl-ctrl-attrib a{color:var(--muted)!important}
.pop b{display:block;margin-bottom:4px;font-size:12.5px;color:var(--text)}
.pop div{display:flex;gap:14px;justify-content:space-between;font-family:var(--mono);font-size:11px;line-height:1.6}
.pop div span:last-child{color:var(--text)}

/* sources / provenance */
.src{margin-top:14px;font-size:11px;color:var(--dim);line-height:1.7;border-top:1px solid var(--line);padding-top:9px;max-width:150ch}
.src b{color:var(--muted);font-weight:600}
.src a{color:var(--blue);opacity:.85}
.miss{color:var(--dim);font-style:italic}
footer{color:var(--dim);font-size:11px;padding:18px clamp(12px,1.3vw,26px) 30px;border-top:1px solid var(--line);margin-top:28px;line-height:1.7}
.loading{color:var(--muted);padding:26px;text-align:center;font-size:12px}
.err{color:var(--amber);font-size:11.5px;background:color-mix(in srgb,var(--amber) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--amber) 35%,transparent);border-radius:7px;padding:9px 11px;margin:9px 0}

/* ---------- 2026-09-16 review fixes ---------- */
html,body{overflow-x:hidden}                       /* the header must never widen the page */
.hrow{flex-wrap:wrap;row-gap:6px}
@media(max-width:900px){.brand small{display:none}}
nav.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
tr.hid{display:none}
.showall{display:block;width:100%;background:var(--panel2);border:0;border-top:1px solid var(--line);color:var(--muted);font:inherit;font-size:11.5px;padding:7px;cursor:pointer}
.showall:hover{color:var(--text)}
.basiscap{font-size:11px;color:var(--dim);margin:-2px 0 10px;font-family:var(--mono)}

/* country switch (2026-09-17) */
.countrysel{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:999px;font:inherit;font-size:12px;
  padding:3px 10px;cursor:pointer}
.countrysel:hover{border-color:var(--line2)}
.kpi .asof.long{position:static;display:block;margin-top:5px;font-size:9.5px;line-height:1.35;white-space:normal;color:var(--dim);font-family:var(--mono)}
.kpi:has(.asof.long) .k{padding-right:0}