/* ============================================================
   Weather-API Demo Gallery — shared design tokens & components
   Dark-first, cinematic. Palette validated (dataviz six checks,
   dark surface #10161c): accents #5578E6/#17A07A/#BD8422,
   status #27A07C/#B58C15/#C93A60.
   ============================================================ */
:root {
  --bg:#0b1016; --surface:#10161c; --surface-2:#161e26; --surface-3:#1d2732;
  --ink:#e4ecf3; --ink-2:#b3c2cf; --ink-3:#7f93a4; --rule:#2b3844;
  --acc-sky:#5578E6;   /* Skycard — consumer forecast */
  --acc-flood:#17A07A; /* Flood Watch — globe */
  --acc-mould:#BD8422; /* Mould Risk Monitor */
  --st-low:#27A07C; --st-elevated:#B58C15; --st-critical:#C93A60;
  --sans:"Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1140px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.6 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:var(--ink-2); }
a:hover { color:var(--ink); }
code { font-family:var(--mono); font-size:.92em; background:var(--surface-2);
  border:1px solid var(--rule); border-radius:4px; padding:1px 6px; }

/* ---- top bar (every page) ---- */
.topbar { display:flex; align-items:center; gap:14px; padding:14px 22px;
  border-bottom:1px solid var(--rule); background:rgba(11,16,22,.82);
  backdrop-filter:blur(8px); position:sticky; top:0; z-index:30; }
.topbar .brand { font-weight:700; letter-spacing:-.01em; color:var(--ink);
  text-decoration:none; white-space:nowrap; }
.topbar .brand em { font-style:normal; color:var(--ink-3); font-weight:500; }
.topbar .crumb { font:600 11px var(--mono); letter-spacing:.12em;
  text-transform:uppercase; padding:3px 10px; border-radius:99px;
  border:1px solid var(--rule); color:var(--ink-3); white-space:nowrap; }
.topbar .spacer { flex:1; }
.topbar a.gallery { font-size:13.5px; text-decoration:none; }

/* ---- badges / chips ---- */
.badge { display:inline-flex; align-items:center; gap:6px; font:600 10.5px var(--mono);
  letter-spacing:.09em; text-transform:uppercase; border-radius:99px;
  padding:3px 11px; border:1px solid var(--rule); color:var(--ink-3); }
.badge.sample { color:var(--st-elevated); border-color:var(--st-elevated); }
.badge.live { color:var(--st-low); border-color:var(--st-low); }
.chip { font:600 12px var(--sans); color:var(--ink-2); background:var(--surface-2);
  border:1px solid var(--rule); border-radius:99px; padding:7px 14px; cursor:pointer;
  min-height:34px; }
.chip[aria-pressed="true"] { color:var(--ink); border-color:var(--ink-3);
  background:var(--surface-3); }
.chip:focus-visible { outline:2px solid var(--acc-sky); outline-offset:2px; }

/* ---- status (never color alone: pair with .dot + text) ---- */
.dot { display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:7px; vertical-align:0; }
.dot.low { background:var(--st-low); } .dot.elevated { background:var(--st-elevated); }
.dot.critical { background:var(--st-critical); }

/* ---- docs strip (below every visualization) ---- */
.docs { max-width:var(--maxw); margin:0 auto; padding:38px 22px 70px; }
.docs h2 { font-size:19px; margin:0 0 4px; }
.docs .sub { color:var(--ink-3); font-size:13.5px; margin:0 0 18px; }
.docs h3 { font:600 11px var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin:22px 0 6px; }
.docs pre { background:#0a0f14; color:#d7e3ee; border:1px solid var(--rule);
  border-radius:8px; padding:14px 16px; overflow-x:auto; font:12.5px/1.55 var(--mono);
  margin:8px 0; }
.docs .tbl { overflow-x:auto; border:1px solid var(--rule); border-radius:8px; margin:8px 0; }
.docs table { border-collapse:collapse; width:100%; font-size:13px; }
.docs th { text-align:left; font:600 10.5px var(--mono); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); background:var(--surface-2);
  padding:8px 12px; border-bottom:1px solid var(--rule); }
.docs td { padding:8px 12px; border-bottom:1px solid var(--rule); color:var(--ink-2); }
.docs tr:last-child td { border-bottom:none; }
.tok-k{color:#7fd1c0}.tok-s{color:#e6b877}.tok-n{color:#e88}.tok-c{color:#6b7f8f;font-style:italic}

/* ---- footer ---- */
.foot { border-top:1px solid var(--rule); padding:20px 22px 36px;
  font:12px var(--mono); color:var(--ink-3); text-align:center; }
.foot a { color:var(--ink-3); }

/* ---- controls row (filters above/below charts) ---- */
.controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
input[type="range"] { accent-color:var(--acc-flood); height:32px; }

@media (max-width:700px) {
  .topbar { padding:12px 14px; gap:10px; }
  .topbar .crumb { display:none; }
  .docs { padding:28px 14px 54px; }
}