/* Dashboard layout: dark brand band with tabs, KPI row, map + editor's note, dense story rows.
   Storyline colours are the validated categorical set (order nickel, energy, forest, ocean, rights, carbon);
   every coloured dot sits next to its text label, so colour never carries identity alone. */
:root{
  color-scheme:light;
  --bg:#f3f5f4; --surface:#ffffff; --surface-2:#eef2f0; --ink:#121a17; --ink-2:#46534e; --muted:#6a7772; --line:#dbe2df;
  --band:#0c2a23; --band-ink:#e7f1ec; --band-muted:#9fb9ae; --band-line:#1f4238;
  --accent:#0b7a62; --accent-ink:#ffffff; --dot:#0b7a62; --dot-ring:#ffffff; --land:#dfe7e3; --land-ctx:#ebefed; --sea:#f7faf9;
  --nickel:#4a3aa7; --energy:#eda100; --forest:#008300; --ocean:#2a78d6; --rights:#eb6834; --carbon:#1baf7a;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --brand:"Inter", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --bg:#0e1311; --surface:#161d1a; --surface-2:#1c2522; --ink:#e6ece9; --ink-2:#b7c3be; --muted:#8c9a94; --line:#26312d;
  --band:#08201a; --band-ink:#e7f1ec; --band-muted:#8fb0a3; --band-line:#18382f;
  --accent:#3cc29b; --accent-ink:#06140f; --dot:#3cc29b; --dot-ring:#161d1a; --land:#26322e; --land-ctx:#1c2421; --sea:#121917;
  --nickel:#9085e9; --energy:#c98500; --forest:#008300; --ocean:#3987e5; --rights:#d95926; --carbon:#199e70;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0e1311; --surface:#161d1a; --surface-2:#1c2522; --ink:#e6ece9; --ink-2:#b7c3be; --muted:#8c9a94; --line:#26312d;
  --band:#08201a; --band-ink:#e7f1ec; --band-muted:#8fb0a3; --band-line:#18382f;
  --accent:#3cc29b; --accent-ink:#06140f; --dot:#3cc29b; --dot-ring:#161d1a; --land:#26322e; --land-ctx:#1c2421; --sea:#121917;
  --nickel:#9085e9; --energy:#c98500; --forest:#008300; --ocean:#3987e5; --rights:#d95926; --carbon:#199e70;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}

/* Brand band */
.band{background:var(--band);color:var(--band-ink)}
.band .top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 20px;padding-block:22px 14px}
.brand{margin:0;font:800 1.8rem/1 var(--brand);letter-spacing:-.035em}
.brand span{color:#5fd3ae;font-weight:500}
.sub{margin:6px 0 0;font-size:.85rem;color:var(--band-muted)}
.week{font:500 .72rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--band-ink);border:1px solid var(--band-line);border-radius:4px;padding:5px 9px;white-space:nowrap}
nav.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--band-line)}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--band-muted);font:500 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:13px 12px 11px;cursor:pointer;white-space:nowrap}
nav.tabs button:hover{color:var(--band-ink)}
nav.tabs button[aria-selected="true"]{color:var(--band-ink);border-bottom-color:var(--accent)}
nav.tabs .count{display:inline-block;margin-left:6px;background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 6px;font-size:.66rem;letter-spacing:0}

/* Shared */
main{padding-block:20px 56px;display:flex;flex-direction:column;gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px}
.card-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px 0}
.eyebrow{margin:0;font:500 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
h2{margin:0;font-weight:600;font-size:1.3rem;line-height:1.25;text-wrap:balance}
h3{margin:0;font-weight:600;font-size:1rem;line-height:1.35;text-wrap:balance}
h3 a{text-decoration:none}
h3 a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.tagline{display:inline-flex;align-items:center;gap:6px;font:500 .72rem var(--mono);color:var(--ink-2);white-space:nowrap}
.tagline .d{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.badge{font:500 .64rem var(--mono);letter-spacing:.05em;text-transform:uppercase;border-radius:3px;padding:1px 5px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.badge.id{background:var(--accent);color:var(--accent-ink)}
.muted{color:var(--muted)}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kpi{padding:14px 16px 14px;display:flex;flex-direction:column;gap:6px;border-top:3px solid var(--c)}
.kpi .v{font:600 1.9rem/1.1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .l{font-size:.86rem;color:var(--ink-2)}
.kpi .f{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:6px}
.kpi a.src{font:500 .7rem var(--mono);color:var(--accent);text-decoration:none;white-space:nowrap}
.kpi a.src:hover{text-decoration:underline}

/* Overview grid */
.grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:920px){.grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}}
.bars{padding:4px 16px 16px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line)}
.bar{display:grid;grid-template-columns:150px minmax(0,1fr) 28px;align-items:center;gap:10px;font-size:.82rem;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.bar .track{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.bar .fill{height:100%;background:var(--accent);border-radius:0 4px 4px 0}
.bar .n{font:500 .78rem var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.bar:hover .tagline{color:var(--ink)}

/* Map */
.map-wrap{position:relative;padding:8px 12px 4px}
.map-wrap svg{display:block;width:100%;height:auto}
.map-wrap .sea{fill:var(--sea)}
.map-wrap .ctx{fill:var(--land-ctx)}
.map-wrap .idn{fill:var(--land)}
.map-wrap .hit{fill:transparent;cursor:pointer}
.map-wrap .pt{fill:var(--dot);stroke:var(--dot-ring);stroke-width:2;pointer-events:none;transition:r .15s}
.map-wrap .lbl{font:500 11px var(--mono);fill:var(--ink-2);paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.map-wrap g.on .pt{fill:var(--ink)}
.tip{position:absolute;z-index:3;pointer-events:none;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.14);padding:8px 10px;font-size:.82rem;max-width:260px}
.tip strong{display:block;font-size:.84rem}
.tip span{color:var(--muted);font:400 .72rem var(--mono)}
.map-foot{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;padding:6px 16px 14px;font-size:.8rem;color:var(--muted)}
.chipbtn{font:500 .72rem var(--mono);border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:5px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chipbtn[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chipbtn .d{width:8px;height:8px;border-radius:50%;background:var(--c,var(--muted))}
.place-list{border-top:1px solid var(--line);padding:4px 16px 8px}

/* Note */
.note{padding:16px;display:flex;flex-direction:column;gap:10px}
.note p{margin:0;color:var(--ink-2)}
.event{margin-top:4px;background:var(--surface-2);border-radius:6px;padding:12px 14px;display:flex;flex-direction:column;gap:3px;font-size:.9rem}
.event a{color:var(--accent);font-weight:500}

/* Story rows */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:4px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row .stripe{background:var(--c);border-radius:2px}
.row .b{display:flex;flex-direction:column;gap:5px;min-width:0}
.row .meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:400 .72rem var(--mono);color:var(--muted)}
.row p{margin:0;color:var(--ink-2);max-width:78ch}
.row .why{font-size:.9rem;color:var(--muted)}
.row .why b{font-weight:500;color:var(--ink-2)}
.row .num{font:500 .68rem var(--mono);letter-spacing:.08em;color:var(--accent)}
.panel{padding:4px 16px 8px}

/* Filters */
.filters{display:flex;flex-direction:column;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* Storylines */
.sl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.sl-card{text-align:left;cursor:pointer;padding:16px;display:flex;flex-direction:column;gap:8px;border-top:3px solid var(--c)}
.sl-card:hover{border-color:var(--c)}
.sl-card .n{font:600 1.6rem/1 var(--sans);font-variant-numeric:tabular-nums}
.sl-card p{margin:0;font-size:.9rem;color:var(--ink-2)}
.sl-card .latest{font-size:.85rem;color:var(--muted);border-top:1px solid var(--line);padding-top:8px}
.back{align-self:flex-start;background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font:500 .74rem var(--mono);letter-spacing:.04em}

/* Reports table */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font:500 .68rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td a{font-weight:600;text-decoration:none}
td a:hover{text-decoration:underline}
@media (max-width:640px){
  table,thead,tbody,tr,td{display:block}
  thead{display:none}
  tr{padding:10px 0;border-bottom:1px solid var(--line)}
  tr:last-child{border-bottom:0}
  td{border:0;padding:3px 12px}
}

footer{border-top:1px solid var(--line);padding-block:18px 40px;font-size:.84rem;color:var(--muted)}
footer p{margin:0 0 6px;max-width:80ch}
.draftnote{border:1px dashed var(--rights);color:var(--ink-2);border-radius:6px;padding:10px 12px;font-size:.88rem}
@media (max-width:600px){.kpis{grid-template-columns:1fr 1fr;gap:10px}.kpi{padding:12px}.kpi .v{font-size:1.35rem}.kpi .l{font-size:.8rem}.kpi .f{flex-direction:column;align-items:flex-start;gap:4px}.map-wrap .lbl{display:none}.bar{grid-template-columns:96px minmax(0,1fr) 24px}}
@media (prefers-reduced-motion:no-preference){main>*{animation:in .2s ease-out}@keyframes in{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}}

nav.tabs a{display:inline-block;border-bottom:2px solid transparent;color:var(--band-muted);font:500 .74rem var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:13px 12px 11px;white-space:nowrap;text-decoration:none}
nav.tabs a:hover{color:var(--band-ink)}
nav.tabs a[aria-current="page"]{color:var(--band-ink);border-bottom-color:var(--accent)}
.brand a{text-decoration:none;color:inherit}
a.back{text-decoration:none}
a.bar{text-decoration:none;color:inherit}
a.sl-card{text-decoration:none;color:inherit}
.arch{display:flex;flex-direction:column}
.arch a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);text-decoration:none}
.arch a:first-child{border-top:0}
.arch a:hover strong{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px}
.arch span{font:400 .74rem var(--mono);color:var(--muted)}
.lead{margin:6px 16px 0;color:var(--ink-2)}
footer a{color:var(--accent)}