/* WeatherIQ motion and impact. Tokens match docs/design/weatheriq/assets/tokens.css.
   A colour literal is legal only on a custom-property definition. */
:root {
  --page: #080f1d;
  --app: #0c1627;
  --tile: #101b2f;
  --tile-raised: #112636;
  --line: #2a405d;
  --line-strong: #5b7392;
  --ink: #ebf6fb;
  --ink-2: #95a6bc;
  --gold: #dcb750;
  --gold-ink: #dcb750;
  --on-gold: #080f1d;
  --cyan: #8ee8f9;
  --red: #f17382;
  --on-red: #080f1d;
  --green: #679d79;
  --on-green: #080f1d;
  --gold-dim: #5f5637;
  --green-dim: #304c48;
  --red-dim: #683b4b;
  --ff: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  --t-small: 12.58px;
  --lh-small: 20px;
  --t-body: 16px;
  --lh-body: 24px;
  --t-title: 20.35px;
  --lh-title: 28px;
  --t-headline: 25.89px;
  --lh-headline: 32px;
  --track-label: .12em;
  --g1: 8px;
  --g2: 16px;
  --g3: 24px;
  --tap: 44px;
  --margin: 16px;
  --phi-fr: 1.6180339887fr;
  --measure: 66ch;
  --mast: #070f1c;
  --mast-ink: #eaf6fb;
  --mast-mut: #93a6bb;
  --mast-gold: #c4a275;
  --hair: #7ee8f7;
  --home-h1: 32.5px;
  --home-h1-lh: 40px;
  --home-h2: 23px;
  --home-h2-lh: 28px;
  --home-lede: 18px;
  --home-lede-lh: 28px;
  --home-label: 12.5px;
  --home-measure: 544px;
  --home-wrap: 960px;
  --home-paper: #f4fbfd;
  --home-ink: #0c1727;
  --home-gold: #735630;
  --home-teal: #0e4a63;
  --surf: #ffffff;
  --paper-line: #d9e4ec;
  --paper-mut: #52677a;
  --fs-step--3: 11px;
  --lb-step--3: 16px;
  --fs-step--2: 12.5px;
  --lb-step--2: 20px;
  --fs-step--1: 14px;
  --lb-step--1: 20px;
  --fs-step-0: 16px;
  --lb-step-0: 24px;
  --fs-step-1: 18px;
  --lb-prose-1: 28px;
  --lbh-step-1: 24px;
  --fs-step-3: 23px;
  --lbh-step-3: 28px;
  --fs-step-6: 32.5px;
  --lbh-step-6: 40px;
  --sp-half: 4px;
  --sp1: 8px;
  --sp1half: 12px;
  --sp2: 16px;
  --sp3: 24px;
  --sp4: 32px;
  --sp5: 40px;
  --sp-tap: 44px;
  --sp6: 48px;
  --sp8: 64px;
  --sp10: 80px;
  --wrap: 960px;
  --gut: var(--sp2);
  --radius: 0px;
  --bw-hair: 1px;
  --w-prose: 400;
  --w-label: 600;
  --w-bold: 700;
  --w-mark: 800;
  --track-kicker: 0.16em;
  --track-h1: -0.02em;
  --photo-ratio: 8 / 5;
  --cols-3: 3;
  --card-rows: 4;
  --role-rows: 3;
  --chain-rows: 4;
}
[data-theme="day"] {
  --page: #f5fbfd;
  --app: #f5fbfd;
  --tile: #ffffff;
  --tile-raised: #eaf5f9;
  --line: #d9e4ec;
  --line-strong: #7d8ea4;
  --ink: #0d1728;
  --ink-2: #52677a;
  --gold: #dcb750;
  --gold-ink: #8a6418;
  --on-gold: #0d1728;
  --cyan: #0e7490;
  --red: #f17382;
  --on-red: #0d1728;
  --green: #679d79;
  --on-green: #0d1728;
  --gold-dim: #f1e2b9;
  --green-dim: #c2d8c9;
  --red-dim: #f9c7cd;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--ff);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
button, input { font: inherit; color: inherit; }
button, a { border-radius: 0; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }
.top { padding: var(--g2) var(--margin) 0; background: var(--app); border-bottom: 1px solid var(--line); }
.brandrow { display: flex; align-items: center; gap: var(--g2); min-height: var(--tap); }
.mark { margin: 0; font-size: var(--t-title); line-height: var(--lh-title); font-weight: 800; }
.mark span { color: var(--gold-ink); }
.place { margin: 0; flex: 1; color: var(--ink-2); font-family: var(--ff-mono); font-size: var(--t-small); }
h1 { margin: var(--g1) 0 0; font-size: var(--t-headline); line-height: var(--lh-headline); font-weight: 700; max-width: var(--measure); }
.tabs, .product { display: flex; gap: var(--g1); margin-top: var(--g1); }
.product { padding-bottom: var(--g1); }
.product a {
  flex: 1;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--tile);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.tabs button, .iconbtn, .timebar button, .actions button, .actions a, .row, #spotlight {
  min-height: var(--tap);
  min-width: var(--tap);
  background: var(--tile);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.tabs button { flex: 1; }
.iconbtn { padding: 0 var(--g2); }
.tabs button[aria-selected="true"], #play[aria-pressed="true"] {
  background: var(--gold);
  color: var(--on-gold);
  border-color: var(--gold);
}
main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#panel-motion { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
#map, #sat { background: var(--app); }
#map { flex: 1; min-height: 240px; }
#spotlight {
  position: absolute;
  z-index: 500;
  top: var(--g2);
  left: var(--margin);
  max-width: calc(100% - 88px);
  padding: 0 var(--g2);
  text-align: left;
}
.timebar {
  display: flex;
  gap: var(--g1);
  align-items: center;
  padding: var(--g1) var(--margin);
  background: var(--app);
}
.timebar button { flex: 0 0 auto; white-space: nowrap; padding: 0 var(--g2); }
#scrub { flex: 1; min-height: var(--tap); accent-color: var(--gold); }
.when, .sources, .status, .definition, .klass, #detail-summary, figcaption {
  margin: 0;
  padding: 0 var(--margin) var(--g1);
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: var(--lh-small);
}
.definition { color: var(--ink); font-size: var(--t-body); line-height: var(--lh-body); max-width: var(--measure); padding-top: var(--g2); }
.legend {
  display: flex;
  gap: var(--g2);
  padding: 0 var(--margin) var(--g1);
  color: var(--ink-2);
  font-size: var(--t-small);
  line-height: var(--lh-small);
}
.legend span { display: flex; align-items: center; gap: 4px; flex: 1; }
.swatch { width: 12px; height: 12px; border: 1px solid var(--line-strong); display: inline-block; }
.s1 { border-color: var(--green); }
.s2 { background: var(--green); }
.s3 { border-color: var(--gold); }
.s4 { background: var(--gold); }
.s5 { background: var(--red); }
#panel-impact { flex: 1; overflow: auto; }
.impact-body {
  display: grid;
  grid-template-columns: 1fr var(--phi-fr);
  gap: var(--g2);
  padding: 0 var(--margin) var(--g3);
}
.split { display: grid; grid-template-columns: var(--phi-fr) 1fr; gap: var(--g2); align-items: start; }
.label {
  margin: var(--g1) 0;
  color: var(--cyan);
  font-size: var(--t-small);
  line-height: 16px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.ledger div {
  display: flex;
  justify-content: space-between;
  gap: var(--g2);
  min-height: var(--tap);
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.ledger span:last-child { font-family: var(--ff-mono); }
.row {
  display: grid;
  grid-template-columns: var(--tap) 1fr auto;
  gap: var(--g2);
  width: 100%;
  padding: var(--g1);
  margin-top: var(--g1);
  text-align: left;
  align-items: center;
}
.row img, .thumb {
  width: var(--tap);
  height: var(--tap);
  object-fit: cover;
  background: var(--tile-raised);
  display: block;
}
.row b { display: block; font-weight: 700; }
.row small, .below li { color: var(--ink-2); font-family: var(--ff-mono); font-size: var(--t-small); }
.row[aria-current="true"] { border-color: var(--gold); }
.below { margin: var(--g2) 0 0; padding: 0; list-style: none; }
.below li { min-height: var(--tap); display: flex; align-items: center; border-bottom: 1px solid var(--line); }
#detail h2 { margin: 0; font-size: var(--t-title); line-height: var(--lh-title); }
#sat { height: 280px; border: 1px solid var(--line); }
figure { margin: 0; }
#photo-img { width: 100%; max-height: 280px; object-fit: contain; background: var(--tile); border: 1px solid var(--line); }
figcaption { padding-left: 0; padding-right: 0; }
.actions { display: flex; gap: var(--g2); flex-wrap: wrap; margin-top: var(--g2); }
.actions button, .actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--g2);
  text-decoration: none;
}
.note {
  margin: 0 var(--margin) var(--g2);
  padding: var(--g2);
  border: 1px solid var(--line-strong);
  background: var(--tile);
  max-width: var(--measure);
}
.risk {
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-mono);
  background: var(--tile);
  border: 1px solid var(--line-strong);
}
.r1 { border-color: var(--green); color: var(--green); }
.r2 { background: var(--green); color: var(--on-green); border-color: var(--green); }
.r3 { border-color: var(--gold); color: var(--gold-ink); }
.r4 { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.r5 { background: var(--red); color: var(--on-red); border-color: var(--red); }
.row.plan { grid-template-columns: var(--tap) minmax(0, 1fr); }
#panel-advice { flex: 1; overflow: auto; padding-bottom: var(--g3); }
.leaflet-container { background: var(--app); font-family: var(--ff); }
.leaflet-bar, .leaflet-bar a, .leaflet-control-attribution {
  border-radius: 0 !important;
  box-shadow: none !important;
}
.leaflet-bar a {
  width: var(--tap);
  height: var(--tap);
  line-height: var(--tap);
  background: var(--tile);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.leaflet-control-attribution {
  background: var(--app);
  color: var(--ink-2);
  max-width: 100%;
}
@media (max-width: 759px) {
  .impact-body, .split { grid-template-columns: 1fr; }
  .legend { flex-wrap: wrap; }
  .timebar { flex-wrap: wrap; }
  #scrub { flex: 1 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}

/* Public homepage */
.home {
  display: block;
  min-height: 100%;
  background: var(--home-paper);
  color: var(--home-ink);
  --line: var(--paper-line);
  --ink: var(--home-ink);
  --mut: var(--paper-mut);
  font-size: var(--fs-step-0);
  line-height: var(--lb-step-0);
  font-weight: var(--w-prose);
}
.home .site,
.home .mast,
.home .proof,
.home .band,
.home .foot {
  display: grid;
  justify-items: center;
}
.home .site,
.home .mast,
.home .proof,
.home .foot {
  background: var(--mast);
  color: var(--mast-ink);
}
.home .wrap {
  width: 100%;
  max-width: var(--wrap);
  padding-inline: var(--gut);
}
.home .sitebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp2);
  min-height: var(--sp8);
}
.home .mark {
  margin: 0;
  color: var(--mast-ink);
  text-decoration: none;
  font-size: var(--fs-step-1);
  line-height: var(--lbh-step-1);
  font-weight: var(--w-mark);
}
.home .mark span { color: var(--mast-gold); }
.home .sitenav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp1);
}
.home .sitenav a,
.home .sitenav button {
  min-height: var(--sp-tap);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--sp1);
  color: var(--mast-ink);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  font-size: var(--fs-step--1);
  line-height: var(--lb-step--1);
}
.home .signin {
  background: var(--gold);
  color: var(--on-gold);
  font-weight: var(--w-bold);
  padding-inline: var(--sp2);
}
.home .mast { padding-block: var(--sp8) var(--sp5); }
.home .kicker {
  margin: 0;
  margin-block-end: var(--sp2);
  color: var(--mast-gold);
  font-size: var(--fs-step--2);
  line-height: var(--lb-step--2);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  font-weight: var(--w-label);
}
.home h1 {
  margin: 0;
  max-width: var(--home-measure);
  font-size: var(--fs-step-6);
  line-height: var(--lbh-step-6);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-h1);
}
.home h2 {
  margin: 0;
  margin-block-end: var(--sp3);
  font-size: var(--fs-step-3);
  line-height: var(--lbh-step-3);
  font-weight: var(--w-label);
}
.home h3 {
  margin: 0;
  font-size: var(--fs-step-1);
  line-height: var(--lbh-step-1);
  font-weight: var(--w-label);
}
.home .hair {
  width: var(--sp6);
  height: var(--bw-hair);
  margin-block: var(--sp3);
  margin-inline: 0;
  background: var(--hair);
}
.home .lede {
  margin: 0;
  max-width: var(--home-measure);
  font-size: var(--fs-step-1);
  line-height: var(--lb-prose-1);
  color: var(--mast-mut);
}
.home .pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp1);
  margin-block-start: var(--sp3);
}
.home .btn {
  min-height: var(--sp-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--sp2);
  text-decoration: none;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--mast-ink);
  font-size: var(--fs-step--1);
  line-height: var(--lb-step--1);
  font-weight: var(--w-label);
}
.home .btn.gold {
  background: var(--gold);
  color: var(--on-gold);
  font-weight: var(--w-bold);
}
.home .btn.line { border: var(--bw-hair) solid var(--mast-mut); }
.home .band .btn.line {
  color: var(--home-ink);
  border-color: var(--line-strong);
  background: var(--surf);
}
.home .proof {
  margin: 0;
  padding-block-end: var(--sp8);
  color: var(--mast-mut);
  font-size: var(--fs-step--2);
  line-height: var(--lb-step--2);
}
.home .plate { margin: 0; background: var(--mast); }
.home .plate img,
.home .shot {
  width: 100%;
  height: auto;
  aspect-ratio: var(--photo-ratio);
  object-fit: cover;
  display: block;
}
.home .band {
  background: var(--surf);
  color: var(--home-ink);
  padding-block: var(--sp8);
}
.home .paper { background: var(--home-paper); }
.home .band .kicker,
.home .band a { color: var(--home-gold); }
.home .foot a { color: var(--mast-ink); }
.home .foot .kicker { color: var(--mast-gold); }
.home .foot .ledger div { border-bottom-color: var(--mast-mut); color: var(--mast-ink); }
.home .foot .ledger span:last-child { color: var(--mast-ink); }
.home p { margin: 0; max-width: var(--home-measure); }
.home .band p + p,
.home .foot p + p { margin-block-start: var(--sp2); }
.home .cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp3);
}
.home .card {
  display: grid;
  align-content: start;
  gap: var(--sp2);
  min-width: 0;
  border: 0;
  border-top: var(--bw-hair) solid var(--line);
  border-radius: var(--radius);
  padding-top: var(--sp2);
}
.home .figure {
  margin: 0;
  font-size: var(--fs-step-6);
  line-height: var(--lbh-step-6);
  font-weight: var(--w-bold);
  color: var(--home-ink);
}
.home .quiet {
  margin-block-start: var(--sp2);
  max-width: var(--home-measure);
  color: var(--paper-mut);
  font-size: var(--fs-step--2);
  line-height: var(--lb-step--2);
}
.home .foot {
  padding-block: var(--sp5) var(--sp8);
  color: var(--mast-mut);
  font-size: var(--fs-step--2);
  line-height: var(--lb-step--2);
}
.home .field {
  display: grid;
  gap: var(--sp-half);
  margin-block-end: var(--sp2);
  font-size: var(--fs-step--1);
  line-height: var(--lb-step--1);
  color: var(--home-ink);
}
.home input,
.home select {
  min-height: var(--sp-tap);
  border: var(--bw-hair) solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surf);
  color: var(--home-ink);
  padding-inline: var(--sp1half);
  font: inherit;
}
.home .check {
  display: flex;
  align-items: center;
  gap: var(--sp1);
  min-height: var(--sp-tap);
  font-size: var(--fs-step--1);
  line-height: var(--lb-step--1);
}
.home .check input {
  width: var(--sp2);
  height: var(--sp2);
  min-height: var(--sp2);
  padding: 0;
}
.home .person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--sp2);
  align-items: center;
}
.home .people,
.home #hits { display: grid; gap: var(--sp1); }
.home .result { margin-block-start: var(--sp3); }
.home .stack { margin-block-start: var(--sp3); }
.home[data-track="home"] .crew { display: none; }
@media (min-width: 896px) {
  :root { --gut: var(--sp6); }
  .home .cards { grid-template-columns: repeat(var(--cols-3), minmax(0, 1fr)); }
  .home .cards.roles { grid-template-rows: repeat(var(--role-rows), auto); }
  .home .cards.work { grid-template-rows: repeat(var(--card-rows), auto); }
  .home .cards.roles .card {
    grid-row: span var(--role-rows);
    grid-template-rows: subgrid;
  }
  .home .cards.chain { grid-template-rows: repeat(var(--chain-rows), auto); }
  .home .cards.chain .card {
    grid-row: span var(--chain-rows);
    grid-template-rows: subgrid;
  }
  .home .cards.work .card {
    grid-row: span var(--card-rows);
    grid-template-rows: subgrid;
  }
}
@media (max-width: 640px) {
  .home .person { grid-template-columns: minmax(0, 1fr); }
}