/* ============================================================================
   Pweener — desert weather
   Tokens first, then chrome, then components. Chart colors come from the
   validated categorical palette; page chrome is a warm neutral built around it.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Surfaces & ink */
  --plane:        #f4f1ea;
  --surface:      #fdfcf9;
  --surface-sunk: #efebe1;
  --ink:          #14120e;
  --ink-2:        #54514a;
  --ink-muted:    #857f72;
  --rule:         #e2ddd0;
  --rule-strong:  #cbc4b3;
  --grid:         #e4e0d6;
  --axis:         #c9c2b1;

  /* Interactive */
  --accent:       #a8471a;
  --accent-ink:   #ffffff;
  --accent-wash:  #f6e7dd;
  --focus:        #2a78d6;

  /* Categorical series (validated against light surface #fdfcf9) */
  --s1: #2a78d6;
  --s2: #eb6834;
  --s3: #1baf7a;
  --s4: #eda100;
  --s5: #e87ba4;
  --s6: #008300;

  /* Single-series accent for one-color bar charts */
  --bar: #cb582b;

  /* Sequential heat ramp — one hue, light -> dark */
  --h1: #ffdfce; --h2: #ffc9b4; --h3: #fbb49a; --h4: #f09e81;
  --h5: #e48765; --h6: #d76f48; --h7: #cb582b; --h8: #be4000;
  --h0: #eeebe3;              /* no data */

  /* Status */
  --good: #0ca30c;
  --critical: #d03b3b;

  --shadow: 0 1px 2px rgba(20, 18, 14, .05), 0 8px 24px -16px rgba(20, 18, 14, .18);
  --radius: 12px;
  --maxw: 1180px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:        #100f0d;
    --surface:      #191713;
    --surface-sunk: #211e19;
    --ink:          #ffffff;
    --ink-2:        #c6c2b5;
    --ink-muted:    #948d7e;
    --rule:         #2f2c26;
    --rule-strong:  #423e35;
    --grid:         #2b2926;
    --axis:         #3b3831;

    --accent:       #f0925c;
    --accent-ink:   #1a1105;
    --accent-wash:  #2a1d13;
    --focus:        #77aef3;

    --s1: #3987e5; --s2: #d95926; --s3: #199e70;
    --s4: #c98500; --s5: #d55181; --s6: #008300;
    --bar: #d76f48;

    --h1: #ac2c00; --h2: #be4000; --h3: #cb582b; --h4: #d76f48;
    --h5: #e48765; --h6: #f09e81; --h7: #fbb49a; --h8: #ffc9b4;
    --h0: #242119;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:        #100f0d;
  --surface:      #191713;
  --surface-sunk: #211e19;
  --ink:          #ffffff;
  --ink-2:        #c6c2b5;
  --ink-muted:    #948d7e;
  --rule:         #2f2c26;
  --rule-strong:  #423e35;
  --grid:         #2b2926;
  --axis:         #3b3831;

  --accent:       #f0925c;
  --accent-ink:   #1a1105;
  --accent-wash:  #2a1d13;
  --focus:        #77aef3;

  --s1: #3987e5; --s2: #d95926; --s3: #199e70;
  --s4: #c98500; --s5: #d55181; --s6: #008300;
  --bar: #d76f48;

  --h1: #ac2c00; --h2: #be4000; --h3: #cb582b; --h4: #d76f48;
  --h5: #e48765; --h6: #f09e81; --h7: #fbb49a; --h8: #ffc9b4;
  --h0: #242119;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--plane);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.015em; font-weight: 650; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.55rem); }
h3 { font-size: 1.0625rem; }
h4 { font-size: .9375rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); padding: .6rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ── Navbar ────────────────────────────────────────────────────────────── */

.navbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem;
  min-height: 54px; display: flex; align-items: center; gap: 1rem;
}
.nav-logo {
  display: flex; align-items: center; gap: .5rem;
  font-size: 1.0625rem; font-weight: 680; color: var(--ink);
  letter-spacing: -.02em; margin-right: auto; flex-shrink: 0;
}
.nav-logo:hover { text-decoration: none; }
.nav-logo img { width: 30px; height: auto; }
.nav-logo span { white-space: nowrap; }

.nav-links { list-style: none; display: flex; gap: .25rem; align-items: center; }
.nav-links a {
  display: block; padding: .4rem .65rem; border-radius: 7px;
  font-size: .875rem; color: var(--ink-2); font-weight: 520;
}
.nav-links a:hover { background: var(--surface-sunk); color: var(--ink); text-decoration: none; }
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--accent-wash); }

.nav-tools { display: flex; gap: .375rem; align-items: center; flex-shrink: 0; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: 8px; cursor: pointer; width: 36px; height: 34px;
  flex-direction: column; gap: 4px; justify-content: center; align-items: center;
}
.nav-toggle span {
  display: block; width: 16px; height: 1.5px; background: var(--ink);
  border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu { display: none; border-top: 1px solid var(--rule); background: var(--surface); }
.mobile-menu.open { display: block; }
.mobile-menu ul { list-style: none; padding: .5rem 1.25rem 1rem; max-width: var(--maxw); margin: 0 auto; }
.mobile-menu a {
  display: block; padding: .6rem .25rem; color: var(--ink);
  font-size: 1rem; border-bottom: 1px solid var(--rule);
}
.mobile-menu li:last-child a { border-bottom: 0; }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

/* ── Buttons & controls ────────────────────────────────────────────────── */

.btn {
  font: inherit; font-size: .8125rem; font-weight: 560;
  padding: .4rem .7rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink-2);
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--surface-sunk); color: var(--ink); }
.btn[aria-pressed="true"], .btn.is-on {
  background: var(--accent-wash); border-color: var(--accent); color: var(--ink);
}
.btn-icon { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; font-size: .95rem; }

/* Seven range presets no longer fit one line on a phone, so the control
   wraps into a grid rather than overflowing its filter row. */
.seg {
  display: inline-flex; flex-wrap: wrap; max-width: 100%;
  border: 1px solid var(--rule-strong); border-radius: 8px;
  overflow: hidden; background: var(--surface);
}
.seg .btn { border: 0; border-right: 1px solid var(--rule); border-radius: 0; }
.seg .btn:last-child { border-right: 0; }

select, input[type="date"] {
  font: inherit; font-size: .8125rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: 8px; padding: .4rem .55rem; max-width: 100%;
}

.filters {
  display: flex; flex-wrap: wrap; gap: .625rem 1rem; align-items: flex-end;
  padding: .875rem 1rem; margin-bottom: 1.25rem;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
}
.field { display: flex; flex-direction: column; gap: .3rem; }
.field > label, .field > .field-label {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted); font-weight: 620;
}
.filters .spacer { margin-left: auto; }

/* ── Layout blocks ─────────────────────────────────────────────────────── */

main { padding: 1.75rem 0 3rem; }

.page-head { margin-bottom: 1.5rem; }
.page-head p.lede { color: var(--ink-2); max-width: 62ch; margin-top: .5rem; font-size: 1rem; }
.eyebrow {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-muted); font-weight: 660; margin-bottom: .4rem;
}

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.125rem 1.25rem 1.25rem;
  box-shadow: var(--shadow);
}
main .wrap > section + section,
main .wrap > section + div,
.card + .card, .stack > * + * { margin-top: 1.25rem; }
.card-head { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; margin-bottom: .25rem; }
.card-head h2, .card-head h3 { margin-right: auto; }
.card-sub { color: var(--ink-2); font-size: .8125rem; margin-bottom: 1rem; }

.grid { display: grid; gap: 1.25rem; align-items: start; }
/* The grid's own gap does the spacing; the sibling rule above must not
   also push every card but the first down inside its cell. */
.grid > * + * { margin-top: 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem; align-items: center;
  padding: 1.5rem 0 1.75rem;
}
.hero img { width: clamp(110px, 16vw, 190px); }
.hero .lede { color: var(--ink-2); font-size: 1.0625rem; max-width: 54ch; margin-top: .6rem; }
@media (max-width: 620px) {
  .hero { grid-template-columns: 1fr; }
  .hero img { width: 120px; }
}

/* Hero figure — one per page */
.hero-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.hero-figure .value {
  font-size: clamp(2.75rem, 2rem + 4vw, 4rem); font-weight: 680;
  letter-spacing: -.03em; line-height: 1; color: var(--ink);
}
.hero-figure .where { color: var(--ink-2); font-size: .9375rem; }
.hero-figure .where strong { color: var(--ink); font-weight: 620; }

/* ── Stat tiles ────────────────────────────────────────────────────────── */

.tiles { display: grid; gap: .875rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); }
.tile {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; padding: .8rem .9rem;
}
.tile .label {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .055em;
  color: var(--ink-muted); font-weight: 620;
}
.tile .value { font-size: 1.5rem; font-weight: 650; letter-spacing: -.02em; margin-top: .2rem; }
.tile .note { font-size: .75rem; color: var(--ink-2); margin-top: .15rem; }

/* ── Tables ────────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
table { border-collapse: collapse; width: 100%; font-size: .8125rem; }
caption { text-align: left; color: var(--ink-2); font-size: .8125rem; padding-bottom: .5rem; }
th, td { text-align: left; padding: .5rem .625rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
thead th {
  font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-muted); font-weight: 640; border-bottom-color: var(--rule-strong);
}
tbody th { font-weight: 580; color: var(--ink); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--surface-sunk); }
tbody tr:last-child td { border-bottom: 0; }
thead th[aria-sort] { cursor: pointer; user-select: none; }
thead th[aria-sort]:hover { color: var(--ink); }
thead th[aria-sort="ascending"]::after { content: " \25B2"; }
thead th[aria-sort="descending"]::after { content: " \25BC"; }

.swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: .45rem; vertical-align: baseline;
}
.key-line { display: inline-block; width: 14px; height: 2px; border-radius: 2px; margin-right: .45rem; vertical-align: middle; }

/* ── Chart shell ───────────────────────────────────────────────────────── */

.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart.is-loading { opacity: .45; }
.chart text { font-family: var(--sans); }
.tick-label { font-size: 11px; fill: var(--ink-muted); }
.value-label { font-size: 11px; font-weight: 600; fill: var(--ink); }
.series-label { font-size: 11px; font-weight: 600; fill: var(--ink-2); }
.gridline { stroke: var(--grid); stroke-width: 1; }
.axis-line { stroke: var(--axis); stroke-width: 1; }
.crosshair { stroke: var(--rule-strong); stroke-width: 1; }
.hit { fill: transparent; cursor: crosshair; }

.legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .75rem 0 .25rem; font-size: .8125rem; color: var(--ink-2); }
.legend .item { display: inline-flex; align-items: center; gap: .4rem; }

.scale-legend { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--ink-muted); margin-top: .75rem; flex-wrap: wrap; }
.scale-legend .steps { display: flex; }
.scale-legend .steps span { width: 22px; height: 10px; }
.scale-legend .steps span:first-child { border-radius: 3px 0 0 3px; }
.scale-legend .steps span:last-child { border-radius: 0 3px 3px 0; }

.tooltip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--surface); border: 1px solid var(--rule-strong);
  border-radius: 9px; box-shadow: var(--shadow); padding: .5rem .625rem;
  font-size: .75rem; min-width: 140px; transform: translate(-50%, -100%);
}
.tooltip[hidden] { display: none; }
.tooltip .tt-date { color: var(--ink-muted); font-weight: 620; margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .04em; font-size: .6875rem; }
.tooltip .tt-row { display: flex; align-items: baseline; gap: .5rem; padding: .1rem 0; }
.tooltip .tt-val { font-weight: 660; color: var(--ink); font-variant-numeric: tabular-nums; margin-left: auto; }
.tooltip .tt-name { color: var(--ink-2); }

.table-view[hidden] { display: none; }
.table-view { margin-top: 1rem; }

/* ── Desert / record cards ─────────────────────────────────────────────── */

.desert-card {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1rem 1.125rem;
  color: inherit; box-shadow: var(--shadow);
  transition: border-color .15s ease, transform .15s ease;
}
a.desert-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-1px); }
.desert-card .region { font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); font-weight: 620; }
.desert-card h3 { color: var(--ink); }
.desert-card .blurb { color: var(--ink-2); font-size: .8125rem; flex-grow: 1; }
.desert-card .readout { display: flex; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: .625rem; }
.desert-card .readout div { font-size: .75rem; color: var(--ink-muted); }
.desert-card .readout b { display: block; font-size: 1.0625rem; color: var(--ink); font-weight: 640; letter-spacing: -.01em; }

.record-list { list-style: none; display: flex; flex-direction: column; }
.record-list li {
  display: grid; grid-template-columns: 1.25rem 1fr auto;
  gap: 0 .75rem; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--rule);
}
.record-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.record-list .rank {
  grid-row: span 2; align-self: center; font-size: .75rem; font-weight: 640;
  color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.record-list .who { font-weight: 580; }
.record-list .when { grid-column: 2; font-size: .75rem; color: var(--ink-muted); }
.record-list .amount {
  grid-row: span 2; align-self: center; font-size: 1.0625rem; font-weight: 650;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Prose (about, privacy) ────────────────────────────────────────────── */

.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.prose h3 { margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: .4rem; }
.prose table { margin-top: .5rem; }
.prose td, .prose th { white-space: normal; vertical-align: top; }
.prose .updated { color: var(--ink-muted); font-size: .8125rem; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em;
  background: var(--surface-sunk); padding: .1em .35em; border-radius: 4px;
}
.callout {
  border-left: 3px solid var(--accent); background: var(--accent-wash);
  padding: .875rem 1rem; border-radius: 0 8px 8px 0;
}

/* ── States ────────────────────────────────────────────────────────────── */

.msg { padding: 1.25rem; border-radius: var(--radius); border: 1px dashed var(--rule-strong); color: var(--ink-2); font-size: .875rem; }
.msg.error { border-style: solid; border-color: var(--critical); color: var(--ink); }
.msg[hidden] { display: none; }

/* ── Footer ────────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--rule); background: var(--surface); padding: 1.5rem 0; margin-top: 2rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; font-size: .8125rem; color: var(--ink-muted); }
.site-footer nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-left: auto; }
/* Required attribution — must stay legible, so it does not shrink below the
   rest of the footer type. */
.site-footer .credit { max-width: 46ch; }

@media print {
  .navbar, .filters, .site-footer, .btn { display: none !important; }
  body { background: #fff; }
  .table-view[hidden] { display: block !important; }
}