@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600&family=Barlow:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* Maverick Wx — static site. No frameworks. Brand: navy + steel.
   Theme-aware: light by default, dark under the OS setting. Colours live as tokens on
   :root so a single override block flips the whole site.
   Type is a three-face system: a condensed display face for headings/wordmark, a humanist
   sans for prose, and a monospace for every measured value (knots, hPa, coordinates, IDs). */

:root {
  /* Three-face type system */
  --font-display: "Barlow Condensed", system-ui, sans-serif; /* headings, wordmark, storm names */
  --font-body: "Barlow", system-ui, sans-serif; /* prose */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* measured values */

  --navy: #0a2540;
  --navy-2: #123a5e;
  --accent: #5980a6; /* steel — brand accent (was cyan) */
  --accent-hi: #94bce3; /* light steel — hovers, marks, links on dark ground */
  --ink: #1a2733;
  --muted: #5c6b7a;
  --line: #d8dee6;
  --bg: #f4f7fa;
  --card: #ffffff;
  --card-2: #f7fafc;
  --link: #0b6fb8;
  --shadow: 0 1px 3px rgba(10, 37, 64, 0.08), 0 1px 2px rgba(10, 37, 64, 0.06);
  --shadow-lg: 0 6px 20px rgba(10, 37, 64, 0.12), 0 2px 6px rgba(10, 37, 64, 0.08);
  --radius: 12px;
  --wrap: 1120px;
  --masthead-h: 74px; /* pre-JS default; app.js measures the real bar and overrides it */
  --banner-h: 0px; /* set by app.js to the data banner's height, 0 when there is no banner */
  --header: var(--navy);
  --header-ink: #ffffff;
  --skeleton: #e6ecf2;
  --endpoint: #2c455d; /* deep steel for endpoint paths in the docs */
  --warn: #c0392b; /* no-cache / warning */
  --ok: #2e7d32; /* immutable / calm */
}

@media (prefers-color-scheme: dark) {
  :root {
    --navy: #0a2540;
    --navy-2: #16324f;
    --accent: #6fa6d6; /* steel lifts lighter on the dark ground */
    --accent-hi: #a9cbe8;
    --ink: #e7eef5;
    --muted: #93a4b5;
    --line: #223547;
    --bg: #0b1622;
    --card: #12202f;
    --card-2: #0f1b28;
    --link: #6fc4f2;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
    --header: #071a2c;
    --header-ink: #eaf3f7;
    --skeleton: #1b2c3d;
    --endpoint: #a9cbe8; /* light steel reads on the dark card */
    --warn: #ef6b60;
    --ok: #5bbf6a;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Headings, wordmark, storm names in the condensed display face. */
h1, h2, h3, .name, .item-name, .card-title, .dialog-title {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* Header / brand bar */
.masthead { background: var(--header); color: var(--header-ink); position: sticky; top: 0; z-index: 10; }
.masthead .wrap { display: flex; align-items: baseline; gap: 14px; padding: 16px 20px; flex-wrap: wrap; }
.brand { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; font-size: 20px; color: var(--header-ink); }
.brand:hover { text-decoration: none; }
.brand .mark { width: 22px; height: 22px; vertical-align: -4px; margin-right: 8px; }
.brand .wx { font-family: var(--font-mono); font-weight: 600; font-size: 0.8em; color: var(--accent-hi); margin-left: 3px; }
.masthead nav { margin-left: auto; display: flex; gap: 18px; }
.masthead nav a { color: #cfe8ef; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.masthead nav a:hover { color: #fff; text-decoration: none; }

main { padding: 0 0 64px; }

/* Hero */
.hero { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; }
.hero .wrap { padding: 40px 20px 44px; }
.hero h1 { font-size: clamp(26px, 4vw, 38px); margin: 0 0 8px; letter-spacing: -0.01em; }
.hero .lede { color: #b9d3e6; margin: 0; max-width: 60ch; font-size: 16px; }
main > .wrap { padding-top: 28px; }

h1 { font-size: 26px; margin: 0 0 6px; }
.lede { color: var(--muted); margin: 0 0 24px; }

/* Classification chips (colour ramp by wind speed; SS number only on NHC basins).
   Square + mono for the instrument look — the colour ramp below is a guardrail, unchanged. */
.chip {
  display: inline-block; padding: 3px 9px; border-radius: 0; font-size: 11px;
  font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap; color: #fff;
  background: var(--navy-2);
}
.chip.tier-unknown { background: #64748b; }
.chip.tier-td { background: #4b9fe0; }
.chip.tier-ts { background: #17b3a3; }
.chip.tier-c1 { background: #ffd43b; color: #1a2733; }
.chip.tier-c2 { background: #ff9f1c; color: #1a2733; }
.chip.tier-c3 { background: #f4632e; }
.chip.tier-c4 { background: #e01e5a; }
.chip.tier-c5 { background: #b5179e; }
.chip.major { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35) inset; }

/* Storm cards */
.storm-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color 0.12s ease;
}
.card:hover { border-color: var(--accent); }
.card { cursor: pointer; }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Crop the card thumbnail to just the map. The rendered graphic carries its own chrome
   (see app/render/frame.py FrameSpec): a header band 0.15 + stats strip 0.085 of the
   figure height at the top, a footer band 0.06 at the bottom — all fractions of height, so
   this crop is identical for every product. We trim header+stats off the top and the footer
   off the bottom, leaving the map region (23.5%–94% of height). aspect-ratio 1.4 matches
   that region's shape (full width × 0.705·height, for the 2400×2431 forecast-track), and
   translateY(-23.5%) — a percentage of the image's own height — slides the map to the top. */
.card .thumb { display: block; position: relative; overflow: hidden; background: var(--skeleton); aspect-ratio: 1.4; }
.card .thumb img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; transform: translateY(-23.5%); }
.card .thumb-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px;
}
.card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card .name { font-weight: 700; font-size: 19px; margin: 0; line-height: 1.2; color: var(--ink); }
.card .meta { color: var(--muted); font-size: 13px; margin: 0; }

/* Compact stat row inside a card */
.card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0; }
.stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stat-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stat-value { font-size: 14px; font-weight: 650; color: var(--ink); }
.stat-sub { font-size: 11px; color: var(--muted); }

/* Two-pane viewer (index): storm list rail + overview/detail pane */
.viewer { padding-top: 22px; }
.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.rail { position: sticky; top: calc(var(--masthead-h) + var(--banner-h) + 8px); display: flex; flex-direction: column; gap: 10px; }
.rail-head { font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin: 6px 0 2px; }
.rail-overview {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  padding: 11px 13px; font: inherit; font-weight: 650; color: var(--ink);
  transition: border-color 0.12s ease;
}
.rail-overview .ro-dot { width: 12px; height: 12px; border-radius: 0; background: linear-gradient(135deg, var(--navy), var(--accent)); flex: none; }
.rail-overview:hover { border-color: var(--accent); }
.rail-overview.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.storm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rail-empty { color: var(--muted); font-size: 14px; padding: 8px 2px; }
.storm-item {
  display: grid; grid-template-columns: auto 1fr; grid-auto-rows: min-content; gap: 2px 9px;
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 0;
  padding: 10px 12px; transition: border-color 0.12s ease;
}
.storm-item:hover { border-color: var(--accent); }
.storm-item.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.storm-item .chip.small { grid-row: 1 / span 2; align-self: center; }
.storm-item .item-name { font-weight: 700; font-size: 15px; line-height: 1.2; }
.storm-item .item-meta { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.chip.small { padding: 2px 8px; font-size: 11px; }

/* Invests — areas of possible formation, listed separately below the active storms.
   Square hairline rows like the storms, marked by a risk-coloured square (not a wind-tier
   chip): high red, medium orange, low yellow, unknown steel-grey. */
.invest-item {
  display: grid; grid-template-columns: auto 1fr; grid-auto-rows: min-content; gap: 2px 9px;
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); padding: 10px 12px; margin-bottom: 8px;
  transition: border-color 0.12s ease;
}
.invest-item:hover { border-color: var(--accent); }
.invest-item.active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
/* Header risk chip on the invest detail view (risk-coloured, like the map marker). */
.chip.risk-chip { color: #fff; }
.chip.risk-chip.risk-high { background: #e0483a; }
.chip.risk-chip.risk-medium { background: #f2a53b; color: #1a2733; }
.chip.risk-chip.risk-low { background: #e6cf45; color: #1a2733; }
.chip.risk-chip.risk-unknown { background: #93a4b5; color: #1a2733; }
.invest-item .invest-risk {
  grid-row: 1 / span 2; align-self: center; width: 12px; height: 12px; background: var(--muted);
}
.invest-item .invest-risk.risk-high { background: #e0483a; }
.invest-item .invest-risk.risk-medium { background: #f2a53b; }
.invest-item .invest-risk.risk-low { background: #e6cf45; }
.invest-item .invest-risk.risk-unknown { background: #93a4b5; }
.invest-item .item-name { font-weight: 700; font-size: 15px; line-height: 1.2; }
.invest-item .item-meta { color: var(--muted); font-size: 12px; }

.pane { min-width: 0; }
.pane-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pane-head h1 { margin: 0; }
.pane-head .sub { color: var(--muted); font-size: 14px; }
/* Segmented instrument control: one hairline frame, cells divided by 1px rules. */
.tabs { display: flex; gap: 0; margin-bottom: 14px; border: 1px solid var(--line); width: fit-content; max-width: 100%; flex-wrap: wrap; }
.tab {
  cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  background: var(--card); border: 0; border-right: 1px solid var(--line); border-radius: 0; padding: 7px 15px;
}
.tab:last-child { border-right: 0; }
.tab:hover { color: var(--ink); }
.tab.active { background: var(--accent); color: #fff; }
:root:not([data-theme="light"]) .tab.active { background: var(--accent); color: #06202e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tab.active { background: var(--accent); color: #06202e; } }
.overview-map { position: relative; margin: 0; border: 1px solid var(--line); border-radius: 0; overflow: hidden; background: var(--card); }
.overview-map img, .overview-map picture { display: block; width: 100%; height: auto; }

/* Corner registration marks — small accent L-brackets that give a map frame the
   viewfinder feel. Purely decorative; drawn just inside the hairline frame. */
.corner { position: absolute; width: 11px; height: 11px; z-index: 2; pointer-events: none; }
.corner.tl { top: 5px; left: 5px; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.corner.tr { top: 5px; right: 5px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.corner.bl { bottom: 5px; left: 5px; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); }
.corner.br { bottom: 5px; right: 5px; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.back-link {
  cursor: pointer; font: inherit; font-size: 14px; color: var(--link); background: none;
  border: none; padding: 0; margin-bottom: 12px;
}
.back-link:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; gap: 18px; }
  .rail { position: static; }
  .storm-list { flex-direction: row; flex-wrap: wrap; }
  .storm-item { flex: 1 1 220px; }
}

/* Per-storm page */
.stormhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.stormhead h1 { margin: 0; }
.stormhead .sub { color: var(--muted); font-size: 14px; width: 100%; }

/* Instrument readout: hairline interior grid (1px gaps over the --line ground) inside a
   solid --ink bezel, no radius — it reads as a measured panel, not a floating card. */
.stats-panel {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--ink); border-radius: 0;
  overflow: hidden; margin: 18px 0 24px;
}
.stats-panel .stat { background: var(--card); padding: 13px 15px; gap: 3px; }
.stats-panel .stat-label { font-size: 9.5px; letter-spacing: 0.14em; }
.stats-panel .stat-value { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.stats-panel .stat-value .u { font-size: 0.55em; color: var(--muted); opacity: 1; }
.stats-panel .stat-sub { font-size: 10px; }

.products { display: grid; gap: 22px; margin-top: 8px; }
.product { background: var(--card); border: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.product h2 { margin: 0; padding: 11px 15px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); border-bottom: 1px solid var(--line); }
.product picture, .product img { display: block; width: 100%; height: auto; }
.provenance { margin-top: 26px; font-size: 14px; }
.provenance table { border-collapse: collapse; width: 100%; max-width: 720px; }
.provenance th, .provenance td { text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.provenance th { color: var(--muted); font-weight: 600; white-space: nowrap; width: 190px; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* Every measured value reads as instrument data: monospace with tabular figures so
   digits align in columns. Prose and headings are unaffected. */
.data,
.mono,
.stat-value,
.stat-sub,
.item-meta,
.card .meta,
.updated,
.provenance td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* Units are subordinated to the value they qualify. */
.stat-value .u { font-size: 0.6em; font-weight: 400; opacity: 0.6; margin-left: 2px; }
/* Labels stay mono-uppercase at small sizes for the legend feel. */
.rail-head, .stat-label { font-family: var(--font-mono); }

/* States */
.notice { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); }
.notice.error { border-color: #d99; background: color-mix(in srgb, var(--card) 88%, #d94a4a); }
.updated { color: var(--muted); font-size: 13px; margin-top: 20px; }
/* Stale data: the age is already shown, this makes it read as abnormal rather than merely old. */
.updated.stale { color: #b3261e; font-weight: 600; }

/* Data-state banner (stale data / source outage). Sticky under the masthead so the warning
   stays on screen at any scroll position: below the mobile breakpoint the rail goes static and
   scrolls away, which used to hide this exactly when someone was deep in a storm's detail.
   z-index sits one below the masthead so it tucks under the brand bar, never over it. */
.databanner {
  position: sticky; top: var(--masthead-h); z-index: 9;
  margin: 0 0 18px; padding: 11px 15px;
  border: 1px solid #d99; border-radius: var(--radius);
  background: color-mix(in srgb, var(--card) 88%, #d94a4a);
  color: var(--ink); font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow);
}

/* Docs — a reference sheet: mono endpoints, a ruled uppercase header, colour-coded cache. */
.doc { max-width: 820px; }
.doc h2 { margin-top: 32px; }
.doc pre { background: #0e2036; color: #e6eef5; padding: 14px 16px; border-radius: 0; overflow-x: auto; }
.doc table { border-collapse: collapse; width: 100%; }
.doc th, .doc td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc code { background: color-mix(in srgb, var(--card) 82%, var(--muted)); padding: 1px 5px; border-radius: 0; }
.doc pre code { background: none; padding: 0; }
/* Endpoint paths get readable steel emphasis so they stand out as endpoints. */
.doc code.endpoint { color: var(--endpoint); background: color-mix(in srgb, var(--card) 84%, var(--accent)); }
/* The endpoints table reads as an API contract: a ruled, mono-uppercase header band. */
.doc .endpoints th {
  background: var(--navy); color: #eaf1f8; font-family: var(--font-mono); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; border-bottom: 0;
}
.doc .endpoints td.cache { font-family: var(--font-mono); white-space: nowrap; }
.doc .endpoints td.cache code { background: none; padding: 0; color: inherit; }
.doc .endpoints td.cache-warn { color: var(--warn); }
.doc .endpoints td.cache-ok { color: var(--ok); }

/* Footer */
footer { border-top: 1px solid var(--line); background: var(--header); color: #b9c9d6; margin-top: 40px; }
footer .wrap { padding: 22px 20px; font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
footer .wrap .brand { font-size: 14px; }
footer a { color: var(--accent-hi); }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}