/* Waterlogged — vanilla CSS, no framework, no external fonts.
   Audience is 55+ North American consumers: large type, high contrast, generous spacing. */

:root {
  --navy: #1f3864;
  --navy-deep: #16294a;
  --navy-soft: #e8edf6;
  --ink: #1a1d21;
  --ink-soft: #4a5361;
  --paper: #ffffff;
  --warm: #f5f4f0;
  --warm-line: #e2ded4;

  --ok: #1a7f37;
  --marginal: #b45309;
  --blocked: #b91c1c;
  --ok-tint: #e8f4ec;
  --marginal-tint: #fbf0e2;
  --blocked-tint: #fbeaea;

  /* The SOFTENED heavy step. "Heavily impacted" is a serious assessment and not an emergency:
     it means coaches and a ship swap far more often than it means a cancelled cruise, and the
     colour should say that. Terracotta reads as one step past the amber of "moderately" without
     reaching for the red that --blocked keeps in reserve for a confirmed cancellation.
     --heavy-ink on --heavy-tint measures ~9:1, well past AA for body text. */
  --heavy: #9a3412;
  --heavy-ink: #7c2d12;
  --heavy-tint: #fdf1e9;

  /* The OTHER tail. Deliberately a different hue family from the low-water amber/red: too much
     water is not a worse drought, it is a different failure. Words always travel with the
     colour — nothing on this site is carried by hue alone. */
  --high-marginal: #0369a1;
  --high-blocked: #3730a3;
  --high-marginal-tint: #e3f0f8;
  --high-blocked-tint: #e9e9f7;
  /* Fallback for a risk state the display maps have not learned yet. */
  --unknown: #4a5361;
  --unknown-tint: #eeeff2;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(22, 41, 74, 0.08), 0 6px 18px rgba(22, 41, 74, 0.06);
  --wrap: 980px;
  --tap: 44px;
}

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

html {
  font-size: 19px; /* audience is 55+; 19px is the base the UI recommendation settles on */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--warm);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 { line-height: 1.2; color: var(--navy-deep); margin: 0 0 0.5em; }
h1 { font-size: 2.1rem; letter-spacing: -0.01em; }
h2 { font-size: 1.5rem; margin-top: 0; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
li { margin-bottom: 0.35em; }
/* Report slugs and alert-page URLs are unbreakable monospace tokens, and an unbreakable token
   wider than a 375 px phone drags the whole PAGE sideways. Let them break anywhere. */
code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.9em; overflow-wrap: anywhere;
}

a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--navy-deep); }

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--navy); color: #fff; padding: 0.7rem 1rem; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------- header / footer */
.site-header { background: var(--navy); color: #fff; }
.header-inner {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem;
  align-items: center; justify-content: space-between; padding-top: 0.9rem; padding-bottom: 0.9rem;
}
.brand { display: inline-flex; align-items: baseline; gap: 0.5rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.3rem; }
.brand-mark { font-size: 1.5rem; line-height: 1; }
.brand:hover { color: #fff; text-decoration: underline; }
.site-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-nav a { color: #fff; text-decoration: none; padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { border-bottom-color: rgba(255, 255, 255, 0.7); color: #fff; }
.site-nav a[aria-current="page"] { border-bottom-color: #fff; font-weight: 600; }
.site-header :focus-visible { outline-color: #fff; }

.site-footer {
  margin-top: auto; background: var(--navy-deep); color: #eaeef6;
  padding: 1.5rem 0; font-size: 0.85rem;
}
.site-footer a { color: #cfe0ff; }
.footer-data { margin-bottom: 0.35em; }
.footer-disclaimer { margin: 0 0 0.35em; color: #dbe4f5; max-width: 90ch; }
.footer-meta { margin: 0; color: #b9c4da; }

/* ---------------------------------------------------------------- legal page */
.legal-head { margin-bottom: 1.5rem; }
.legal-block {
  background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius);
  padding: 1.2rem 1.4rem; margin-bottom: 1.25rem;
}
.legal-block h2 { font-size: 1.25rem; }
.legal-block p { max-width: 76ch; }
.legal-list { max-width: 76ch; padding-left: 1.3em; }
.legal-list li { margin-bottom: 0.5em; }

/* ---------------------------------------------------------------- ribbons + notices */
.ribbon { padding: 0.85rem 0; font-size: 0.95rem; border-bottom: 1px solid; }
.ribbon .wrap { margin: 0 auto; }
.ribbon-demo { background: var(--navy-soft); border-color: #c6d4ea; color: var(--navy-deep); }
.ribbon-demo a { color: var(--navy-deep); }
.ribbon-degraded {
  background: var(--marginal-tint); border: 2px solid var(--marginal); border-radius: var(--radius);
  color: #6b3205; padding: 1rem 1.1rem; margin: 0 0 1.5rem;
}
.ribbon-degraded a { color: #6b3205; }

.notice { border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1.5rem 0 0; }
.notice-error { background: var(--blocked-tint); border: 2px solid var(--blocked); color: #7a1212; }
.notice p { margin: 0; }

main { padding: 2rem 1.25rem 3rem; }
section { margin-bottom: 2.75rem; }

/* ---------------------------------------------------------------- home */
/* Review P2-2: trimmed so "1. Cruise line" is inside the first screen on an iPad in a split
   view (1024x768 landscape halves to ~507 px of height once the browser chrome is off). The
   type is still large — 2.35 rem is 45 px at the 19 px base — the SPACE around it is what came
   out, and the body scale is untouched. */
.hero h1 { font-size: 2.35rem; margin-bottom: 0.3em; }
.hero-lede { font-size: 1.15rem; max-width: 46ch; color: var(--ink-soft); margin-bottom: 0.6em; }
.hero-note { color: var(--ink-soft); font-size: 0.95rem; max-width: 60ch; }

/* One measured sentence between the selector and the price (review P2-3). */
.live-example {
  border-left: 6px solid var(--navy); background: var(--paper);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 0.75rem 1.1rem;
  margin: 0 0 1.25rem; max-width: 60ch; font-size: 0.95rem; color: var(--ink);
}
.live-example strong { color: var(--navy-deep); }

/* ONE VERTICAL COLUMN, deliberately. An auto-fit grid used to lay the three steps out
   side by side at different heights — each field is a different height, `align-items: end`
   bottom-aligned them, and the eye had to zigzag 1 → 2 → 3 across three columns and back.
   A numbered sequence has to read top to bottom in one line, and the column is held to a
   comfortable measure rather than stretched across the hero. */
.check-form {
  background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.5rem; margin: 1.25rem 0 1.25rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  max-width: 34rem;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
label { font-weight: 600; color: var(--navy-deep); }
select, input[type="date"], input[type="email"], input[type="text"] {
  font: inherit; color: var(--ink); background: #fff;
  border: 2px solid #9aa5b6; border-radius: 8px; padding: 0.65rem 0.7rem; width: 100%;
  min-height: 3rem;
}
select:hover, input:hover { border-color: var(--navy); }
.hint { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
/* The caption belongs to its own control, so it never floats away from the select it explains. */
.field .hint { max-width: 100%; }
.field-submit { margin-top: 0.25rem; }
.field-submit .btn { width: 100%; }

.btn {
  display: inline-block; font: inherit; font-weight: 700; cursor: pointer;
  border-radius: 8px; padding: 0.7rem 1.4rem; min-height: 3rem; border: 2px solid var(--navy);
  background: var(--navy); color: #fff; text-decoration: none; text-align: center;
}
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
.btn-quiet { background: #fff; color: var(--navy); }
.btn-quiet:hover { background: var(--navy-soft); color: var(--navy-deep); }

/* ticker */
.ticker { background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius); padding: 1.25rem 1.4rem; }
.ticker-heading { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.ticker-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ticker-item {
  display: grid; gap: 0.15rem 0.6rem; grid-template-columns: auto 1fr;
  border-left: 4px solid var(--navy); padding: 0.35rem 0 0.35rem 0.8rem; margin: 0;
}
.ticker-item-missing { border-left-color: var(--ink-soft); }
.ticker-name { grid-column: 1 / -1; font-weight: 700; color: var(--navy-deep); }
.ticker-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ticker-trend { align-self: center; font-weight: 600; }
.ticker-time { grid-column: 1 / -1; font-size: 0.85rem; color: var(--ink-soft); }
/* The translation is the point of the ticker: raw centimetres are a commodity, this is not. */
.ticker-say { grid-column: 1 / -1; font-size: 0.92rem; color: var(--ink); }
.ticker-state { margin-right: 0.4rem; vertical-align: 0.05em; }
.ticker-foot { font-size: 0.9rem; color: var(--ink-soft); margin: 0; max-width: 68ch; }
.trend-down { color: var(--blocked); }
.trend-up { color: var(--ok); }
.trend-flat { color: var(--ink-soft); }

/* how it works — one explanation, not three cards that each say a third of it */
.explainer p { max-width: 72ch; font-size: 1.05rem; }
.trio-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius); padding: 1.25rem; }
.card p:last-child { margin-bottom: 0; }

/* the horizon contract, set before the answer */
.horizon-preview { font-weight: 600; color: var(--navy-deep); }

/* ---------------------------------------------------------------- the three-step selector */
/* Line -> cruise -> date, in the order a passenger thinks. There is no calendar any more: a
   date picker invites a date nobody sails, and every option in the date menu is either an
   operator-confirmed departure or a labelled estimate of one. */
.form-lede {
  grid-column: 1 / -1; margin: 0; font-weight: 600; color: var(--navy-deep); max-width: 60ch;
}
.check-form select { min-height: var(--tap); }
/* The menus can carry long itinerary names; let them wrap the layout rather than overflow. */
#cruise, #depart { max-width: 100%; text-overflow: ellipsis; }

.selection-legend {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; font-size: 0.9rem; color: var(--ink-soft);
}
.selection-legend li { margin: 0; }
.selection-legend strong { color: var(--navy-deep); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- how it works */
.how-steps {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.how-step {
  margin: 0; background: var(--paper); border: 1px solid var(--warm-line);
  border-top: 6px solid var(--navy); border-radius: var(--radius); padding: 1.1rem 1.25rem;
}
.how-number {
  margin: 0 0 0.2em; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.how-step h3 { font-size: 1.1rem; }
.how-step p:last-child { margin-bottom: 0; color: var(--ink-soft); font-size: 0.95rem; }
.how-note { max-width: 72ch; color: var(--ink-soft); }

/* ---------------------------------------------------------------- pricing */
.tier-grid {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: start;
}
.tier-card {
  margin: 0; background: var(--paper); border: 1px solid var(--warm-line);
  border-radius: var(--radius); padding: 1.25rem 1.4rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.tier-card-feature { border: 2px solid var(--navy); }
.tier-flag {
  margin: 0; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--navy);
}
.tier-card h3 { margin: 0; font-size: 1.25rem; }
.tier-price { margin: 0; display: flex; flex-direction: column; }
.tier-amount { font-size: 2.2rem; font-weight: 800; color: var(--navy-deep); line-height: 1.1; }
.tier-cadence { font-size: 0.85rem; color: var(--ink-soft); }
.tier-line { margin: 0; font-weight: 600; color: var(--ink); }
.tier-list { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; color: var(--ink-soft); }
.tier-list li { display: flex; gap: 0.5rem; margin-bottom: 0.45em; }
.tier-tick { color: var(--ok); font-weight: 700; flex: 0 0 auto; }
.tier-cross { color: var(--ink-soft); font-weight: 700; flex: 0 0 auto; }
.tier-not { opacity: 0.85; }
.tier-card .btn { margin-top: auto; }

/* ---------------------------------------------------------------- sample + trust */
.sample-card {
  background: var(--navy-soft); border: 2px solid #b7c8e4; border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}
.sample-card p { max-width: 74ch; color: var(--navy-deep); }
.trust-grid {
  display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 1rem;
}
.trust-item {
  background: var(--paper); border: 1px solid var(--warm-line); border-left: 6px solid var(--navy);
  border-radius: 8px; padding: 1rem 1.15rem;
}
.trust-item h3 { font-size: 1.05rem; }
.trust-item p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------------------------------------------------------------- the paywall */
/* Never above the call. The state call, the horizon, the day strip and the trigger number all
   sit above this bar and are always free; what it sells is the arithmetic underneath them. */
.upgrade {
  background: var(--paper); border: 2px solid var(--navy); border-radius: var(--radius);
  padding: 1.25rem 1.4rem; margin: 0 0 2.25rem;
}
.upgrade-open { border-style: solid; border-color: var(--ok); }
.upgrade-flag {
  margin: 0 0 0.35em; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--ink-soft);
}
.upgrade-title { font-size: 1.2rem; margin-bottom: 0.35em; }
.upgrade-body { max-width: 72ch; margin-bottom: 0.9em; }

.locked-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.9rem; }
.locked-panel {
  margin: 0; background: var(--paper); border: 1px dashed #9aa5b6; border-radius: 8px;
  padding: 1rem 1.15rem;
}
.locked-panel h3 { font-size: 1.05rem; display: flex; gap: 0.5rem; align-items: baseline; }
.locked-panel p { margin: 0 0 0.6em; color: var(--ink-soft); font-size: 0.95rem; max-width: 74ch; }
.locked-icon { font-size: 0.95rem; }
/* Review P1-12: the one thing about a paid section that has to be said BEFORE the button, so it
   is set in full-strength ink rather than in the muted grey the rest of the teaser uses. */
.locked-panel .locked-caveat {
  border-left: 6px solid var(--marginal); padding-left: 0.9rem;
  color: var(--ink); font-size: 0.95rem;
}
.locked-skeleton { display: flex; flex-direction: column; gap: 0.4rem; margin: 0; }
.skeleton-line {
  display: block; height: 0.7rem; border-radius: 4px;
  background: linear-gradient(90deg, #e7e9ee, #f2f3f6, #e7e9ee);
}
.skeleton-short { width: 62%; }

/* ---------------------------------------------------------------- checkout (simulated)
   Review P0-4: "mock" is a developer's word. The notice is set in the page's own voice, in type
   larger than the price it qualifies, and it is a solid amber band rather than a whisper — but
   it is still amber-on-cream ink at ~7:1, not a red alarm, because nothing has gone wrong. */
.ribbon-mock {
  background: var(--marginal-tint); border-color: var(--marginal); color: #6b3205;
  border-bottom-width: 3px;
}
.mock-headline { margin: 0 0 0.25em; font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.mock-detail { margin: 0; max-width: 76ch; }
.ribbon-sample { background: var(--navy-soft); border-color: #c6d4ea; color: var(--navy-deep); }
.checkout { max-width: 62ch; }
.checkout-price { display: flex; flex-direction: column; margin-bottom: 1em; }
.checkout-mock-note {
  border-left: 6px solid var(--marginal); padding-left: 0.9rem; margin: 1.25rem 0 0;
  font-weight: 600; color: #6b3205;
}
.checkout-form { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 1.25rem; }
.checkout-sailing { margin-bottom: 0.25em; }
.checkout-sailing strong { color: var(--navy-deep); }
.checkout-ref { overflow-wrap: anywhere; }
.checkout-warning {
  border-left: 6px solid var(--marginal); padding-left: 0.9rem; color: #6b3205;
}
/* The refund promise sits directly above the button, where the hand already is. */
.checkout-refund { margin: 0.75rem 0 0; font-weight: 600; }
.checkout-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0; }
/* The retrieval code is the one thing on the receipt that cannot be reconstructed later, so it
   is set at display size, spaced for reading aloud, and selectable in one tap. */
.order-code { margin: 0.25em 0 0.75em; }
.order-code code {
  display: inline-block; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--navy-deep); background: var(--navy-soft); border: 1px solid #c6d4ea;
  border-radius: 6px; padding: 0.35rem 0.7rem; user-select: all;
}
@media (max-width: 420px) {
  .order-code code { font-size: 1.3rem; letter-spacing: 0.05em; }
}

/* ==================================================================================
   THE PAID REPORT'S LAYOUT LANGUAGE
   Left-accent cards, chip strips, colour-coded segments, paired panels, collapsibles —
   the shapes borrowed from the hand-built dashboard, set on THIS site's type scale.
   Nothing here goes below 0.85 rem (≈16 px at the 19 px base): the audience is 55+ and
   the dashboard's 11 px labels would be unreadable to them.
   ================================================================================== */

/* ---------------------------------------------------------------- header strip */
.report-head { margin-bottom: 1.5rem; }
.report-eyebrow {
  margin: 0 0 0.35em; font-size: 0.85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--navy);
}
.report-identity { font-size: 1.7rem; margin-bottom: 0.4em; }
.report-identity-date {
  display: block; font-size: 1.05rem; font-weight: 500; color: var(--ink-soft); margin-top: 0.15em;
}
.chip-strip {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.strip-chip {
  margin: 0; background: var(--paper); border: 1px solid var(--warm-line); border-radius: 999px;
  padding: 0.4rem 1rem; font-size: 0.9rem; color: var(--ink-soft);
}
.strip-chip strong { color: var(--navy-deep); font-weight: 700; }
.strip-chip-countdown { border-color: var(--navy); background: var(--navy-soft); }
.strip-chip-mirror { border-color: #b7c8e4; }
.live-dot {
  display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--ok); margin-right: 0.45rem; vertical-align: 0.05em;
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.live-dot-stale { background: var(--marginal); animation: none; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------------------------------------------------------------- the call block */
.call-block { margin-bottom: 2.75rem; }
.call-block .banner { margin-bottom: 1rem; }
.call-block .banner-call { font-size: 1.4rem; }

/* ---------------------------------------------------------------- the three-way split
   Three labelled bars: the outcome, the odds, and what it actually looks like from a cabin.
   The percentage is the claim and the bar is only its shape — bars are scaled to the largest of
   the three so the picture stays readable when every outcome is individually unlikely. */
.outcome-split { margin-bottom: 1rem; }
.outcome-split-head {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; margin: 0 0 0.6em;
}
.outcome-split-title { font-size: 1.15rem; font-weight: 700; color: var(--navy-deep); margin: 0; }
/* The tag that travels with every percentage on this site. It is not decoration: there is no
   code path that renders a "%" without it, and the test suite asserts that. */
.calibration-tag {
  font-size: 0.85rem; color: var(--ink-soft); background: var(--warm);
  border: 1px dashed var(--navy); border-radius: 999px; padding: 0.1rem 0.75rem;
}
.calibration-tag a { color: var(--navy); }
.outcome-split-foot { margin-bottom: 0; }

.outcome-states { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.6rem; }
.outcome-state {
  margin: 0; background: var(--paper); border: 1px solid var(--warm-line);
  border-left: 8px solid var(--ink-soft); border-radius: 8px; padding: 0.85rem 1.1rem;
}
.outcome-state-ok { border-left-color: var(--ok); }
.outcome-state-marginal { border-left-color: var(--marginal); }
.outcome-state-heavy { border-left-color: var(--heavy); }
/* The likeliest outcome. Marked with weight, a tinted panel AND the largest number — never
   colour alone, and never colour instead of the figure that made it the largest. */
.outcome-state-marked { border-width: 1px 1px 1px 10px; box-shadow: var(--shadow); }
.outcome-state-ok.outcome-state-marked { background: var(--ok-tint); }
.outcome-state-marginal.outcome-state-marked { background: var(--marginal-tint); }
.outcome-state-heavy.outcome-state-marked { background: var(--heavy-tint); }
.outcome-state-head {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline;
  justify-content: space-between; margin: 0 0 0.35em;
}
.outcome-state-name { font-size: 1.1rem; font-weight: 700; color: var(--navy-deep); }
.outcome-state-pct {
  font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; line-height: 1;
}
.outcome-state-ok .outcome-state-pct { color: #145c28; }
.outcome-state-marginal .outcome-state-pct { color: #6b3205; }
.outcome-state-heavy .outcome-state-pct { color: var(--heavy-ink); }
.outcome-state-bar {
  display: block; height: 0.6rem; background: #e7e9ee; border-radius: 4px;
  overflow: hidden; margin: 0 0 0.5em;
}
.outcome-state-fill { display: block; height: 100%; border-radius: 4px; background: var(--unknown); }
.outcome-fill-ok { background: var(--ok); }
.outcome-fill-marginal { background: var(--marginal); }
.outcome-fill-heavy { background: var(--heavy); }
.outcome-state-body { margin: 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 74ch; }

.how-step-block { margin-bottom: 1rem; }
.how-step-block h3, .how-step-block h4 { font-size: 1.02rem; margin: 0 0 0.25em; }
.how-step-block p { margin: 0; max-width: 74ch; color: var(--ink-soft); }
.how-caveat {
  border-left: 6px solid var(--navy); padding-left: 0.9rem; max-width: 74ch; color: var(--ink);
}

.call-trigger, .call-anchor, .call-odds {
  background: var(--paper); border: 1px solid var(--warm-line); border-left: 6px solid var(--navy);
  border-radius: 0 8px 8px 0; padding: 1rem 1.2rem; margin-bottom: 0.9rem;
}
.call-trigger h3, .call-anchor-head { margin: 0 0 0.35em; font-size: 1.05rem; }
.call-trigger .trigger-sentence { margin: 0; }
.call-anchor-head {
  font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.call-anchor-line { margin: 0 0 0.3em; font-size: 1.05rem; max-width: 72ch; }
.call-anchor-line strong { font-variant-numeric: tabular-nums; }
.call-anchor .fineprint, .call-odds .fineprint { margin-bottom: 0; }
.call-odds { border-left-color: var(--navy-deep); }
.call-odds h3 { margin: 0 0 0.4em; font-size: 1.05rem; }

.how-percentages, .method-panel, .route-days, .watch-detail, details.calcs {
  background: var(--paper); border: 1px solid var(--warm-line); border-radius: 8px;
  padding: 0 1.1rem; margin: 0 0 0.75rem;
}
.how-percentages > summary, .method-panel > summary, .route-days > summary,
.watch-detail > summary, details.calcs > summary {
  cursor: pointer; font-weight: 700; color: var(--navy); padding: 0.85rem 0;
  min-height: var(--tap); display: flex; align-items: center;
}
.how-percentages > summary:hover, .method-panel > summary:hover, .route-days > summary:hover,
.watch-detail > summary:hover, details.calcs > summary:hover { color: var(--navy-deep); }
.details-body {
  border-top: 1px solid var(--warm-line); padding: 1rem 0 1.1rem; color: var(--ink);
}
.details-body > p { max-width: 74ch; }
.details-body > p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- the one-paragraph version */
.summary-callout {
  background: var(--navy-soft); border: 2px solid #b7c8e4; border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.summary-callout h2 { font-size: 1.25rem; }
.summary-body { font-size: 1.1rem; line-height: 1.65; max-width: 74ch; color: var(--navy-deep); }
.summary-callout .fineprint { margin-bottom: 0; color: #3d4c6b; }

/* ---------------------------------------------------------------- live gauge cards */
.live-grid {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
}
.live-card {
  position: relative; overflow: hidden; background: var(--paper);
  border: 1px solid var(--warm-line); border-left: 8px solid var(--ink-soft);
  border-radius: 10px; padding: 1rem 1.15rem;
}
.live-card-ok { border-left-color: var(--ok); }
.live-card-marginal { border-left-color: var(--marginal); }
.live-card-blocked { border-left-color: var(--blocked); }
.live-card-high-marginal { border-left-color: var(--high-marginal); }
.live-card-high-blocked { border-left-color: var(--high-blocked); }
.live-card-unknown { border-left-color: var(--unknown); }
/* The itinerary day this gauge's reach is crossed on — the fact that turns a gauge into YOUR gauge. */
.live-transit {
  position: absolute; top: 0.9rem; right: 0.9rem; margin: 0;
  font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--navy-soft); color: var(--navy-deep); border: 1px solid #c6d4ea;
  border-radius: 6px; padding: 0.1rem 0.5rem;
}
.live-name { margin: 0 0 0.05em; font-size: 1.1rem; padding-right: 5.5rem; }
.live-river {
  margin: 0 0 0.4em; font-size: 0.85rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.live-value { margin: 0 0 0.15em; display: flex; align-items: baseline; }
.live-number {
  font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--navy-deep);
}
.live-number-missing { font-size: 1.3rem; color: var(--ink-soft); }
.live-unit { font-size: 1rem; color: var(--ink-soft); margin-left: 0.2rem; }
.live-delta { margin: 0 0 0.4em; font-size: 0.9rem; color: var(--ink-soft); max-width: 34ch; }
.live-delta strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.live-bar {
  display: block; height: 0.5rem; background: #e7e9ee; border-radius: 4px;
  overflow: hidden; margin: 0 0 0.7em;
}
.live-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--unknown); }
.live-bar-ok { background: var(--ok); }
.live-bar-marginal { background: var(--marginal); }
.live-bar-blocked { background: var(--blocked); }
.live-bar-high-marginal { background: var(--high-marginal); }
.live-bar-high-blocked { background: var(--high-blocked); }
.live-card .calc-badges { margin-bottom: 0.6rem; }
.live-note {
  margin: 0 0 0.4em; padding-top: 0.6rem; border-top: 1px solid var(--warm-line);
  font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5;
}
.live-stamp { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- route segments */
.segment-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
.segment {
  margin: 0; display: grid; gap: 0.3rem 1.2rem; align-items: start;
  grid-template-columns: 10rem 1fr auto;
  background: var(--paper); border: 1px solid var(--warm-line);
  border-left: 8px solid var(--navy); border-radius: 8px; padding: 0.9rem 1.1rem;
}
.segment-ok { border-left-color: var(--ok); }
.segment-marginal { border-left-color: var(--marginal); }
.segment-blocked { border-left-color: var(--blocked); }
.segment-high-marginal { border-left-color: var(--high-marginal); }
.segment-high-blocked { border-left-color: var(--high-blocked); }
.segment-neutral, .segment-unknown { border-left-color: var(--navy); }
.segment-dates { margin: 0; }
.segment-range {
  display: block; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--navy-deep);
}
.segment-days {
  display: block; font-size: 0.85rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.segment-main { min-width: 0; }
.segment-name { margin: 0 0 0.1em; font-size: 1.1rem; font-weight: 700; color: var(--navy-deep); }
.segment-reaches {
  margin: 0 0 0.25em; font-size: 0.85rem; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.segment-reason { margin: 0; font-size: 0.95rem; color: var(--ink-soft); max-width: 74ch; }
.segment-risk { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-end; }
.segment-class { font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; }

/* ---------------------------------------------------------------- paired panels */
.panel-pair {
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-bottom: 1rem;
}
.panel {
  background: var(--paper); border: 1px solid var(--warm-line); border-top: 6px solid var(--navy);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
}
.panel h3, .panel h4 { margin: 0 0 0.4em; font-size: 1.08rem; }
.panel-good { border-top-color: var(--ok); }
.panel-good h3 { color: #145c28; }
.panel-bad { border-top-color: var(--blocked); }
.panel-bad h3 { color: #8f1616; }
.panel-plain { border-top-color: var(--navy); margin-bottom: 1.25rem; }
.panel-plain .policy-list, .panel-plain .floor-list { margin-bottom: 0; }
.panel-list { list-style: none; margin: 0; padding: 0; }
.panel-item {
  position: relative; margin: 0; padding: 0.65rem 0 0.65rem 1.3rem;
  border-top: 1px solid var(--warm-line); font-size: 0.95rem; color: var(--ink); line-height: 1.55;
}
.panel-item:first-child { border-top: 0; }
.panel-item::before {
  content: ""; position: absolute; left: 0; top: 1.15rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ink-soft);
}
.panel-item-up::before { background: var(--ok); }
.panel-item-down::before { background: var(--blocked); }

/* ---------------------------------------------------------------- free report: quiet free note */
.free-note {
  border-left: 6px solid var(--ok); background: var(--paper);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 0.8rem 1.1rem; margin: 0 0 2.25rem;
  font-size: 0.95rem; color: var(--ink-soft); max-width: 78ch;
}
.free-note strong { color: var(--navy-deep); }
.call-outcomes { margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------- full report: calculations */
.calc-table th[scope="row"] { white-space: normal; min-width: 12ch; }
.calc-river, .calc-stamp {
  display: block; font-weight: 400; font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.15em;
}
.calc-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.calc-working {
  background: var(--paper); border: 1px solid var(--warm-line); border-radius: 8px;
  padding: 0 1.1rem; margin-top: 0.6rem;
}
.calc-working summary {
  cursor: pointer; font-weight: 700; color: var(--navy); padding: 0.8rem 0; min-height: var(--tap);
}
.calc-working summary:hover { color: var(--navy-deep); }
.calc-working[open] { padding-bottom: 0.9rem; }
.working-list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.7rem; }
.working-step {
  margin: 0; border-left: 6px solid var(--navy-soft); padding-left: 0.9rem;
}
.working-label { margin: 0; font-weight: 700; color: var(--navy-deep); font-size: 0.95rem; }
.working-formula {
  margin: 0.15em 0; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.88rem; color: var(--ink-soft);
}
.working-detail {
  margin: 0; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--ink);
}
.working-high { border-left: 6px solid var(--high-marginal); padding-left: 0.9rem; }
.working-high ul { margin: 0.3em 0 0.6em; }

/* ---------------------------------------------------------------- full report: watch levels */
.watch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.watch-row {
  margin: 0; background: var(--paper); border: 1px solid var(--warm-line);
  border-left: 8px solid var(--navy); border-radius: 8px; padding: 1rem 1.15rem;
}
.watch-row h3 { margin-bottom: 0.3em; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.watch-river {
  font-size: 0.8rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.watch-line { font-size: 1.05rem; max-width: 72ch; margin-bottom: 0.5em; }
.watch-line strong { font-variant-numeric: tabular-nums; }
.watch-caveat, .watch-high { font-size: 0.92rem; color: var(--ink-soft); max-width: 72ch; margin-bottom: 0.4em; }
.watch-high { border-left: 4px solid var(--high-marginal); padding-left: 0.8rem; }
.watch-high strong, .watch-caveat strong { font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------------------------------------------------------------- full report: route */
.route-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.route-day {
  margin: 0; background: var(--paper); border: 1px solid var(--warm-line);
  border-left: 8px solid var(--ink-soft); border-radius: 8px; padding: 0.85rem 1.1rem;
}
.route-head { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; margin-bottom: 0.3em; }
.route-daynum { font-weight: 800; color: var(--navy-deep); }
.route-date { font-size: 0.85rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.route-port { font-size: 1.1rem; font-weight: 700; color: var(--navy-deep); }
.route-class { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.3em; }
.route-class-word { font-size: 0.9rem; color: var(--ink-soft); }
.route-reaches, .route-binding, .route-reason, .route-ungauged {
  margin: 0 0 0.3em; font-size: 0.92rem; color: var(--ink-soft); max-width: 76ch;
}
.route-binding { color: var(--ink); }
.route-ungauged { border-left: 4px solid var(--warm-line); padding-left: 0.8rem; font-style: normal; }
.route-day:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- full report: policy */
.policy-headline { font-size: 1.1rem; font-weight: 600; max-width: 74ch; }
.policy-facts {
  display: grid; gap: 0.5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 0 0 1.25rem;
}
.policy-facts > div { border-top: 1px solid var(--warm-line); padding-top: 0.5rem; }
.policy-facts dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.policy-facts dd { margin: 0; font-weight: 600; }
.policy-list { margin: 0 0 1.25rem; padding-left: 1.3em; max-width: 76ch; }
.policy-list li { margin-bottom: 0.5em; }
.policy-source { display: block; font-size: 0.8rem; color: var(--ink-soft); }
.policy-claim { border-left: 6px solid var(--marginal); padding-left: 0.9rem; max-width: 74ch; }
.policy-sister, .policy-link { font-size: 0.92rem; color: var(--ink-soft); max-width: 74ch; }
.policy-disclaimer {
  background: var(--marginal-tint); border: 2px solid var(--marginal); border-radius: 8px;
  padding: 0.9rem 1.1rem; color: #6b3205; max-width: 76ch;
}
.policy .unverified { border-left: 4px solid var(--warm-line); padding-left: 0.9rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- full report: the money section
   Every rendered figure carries a confidence marker, so the marker has to be legible at a
   glance and never colour-only: a character, then the word it stands for. */
.conf {
  display: inline-block; font-size: 0.8rem; white-space: nowrap;
  border: 1px solid var(--warm-line); border-radius: 999px; padding: 0.05rem 0.55rem;
  color: var(--ink-soft); background: var(--paper);
}
.conf-mark { font-weight: 700; }
.conf-confirmed { border-color: #a7cdb3; background: var(--ok-tint); color: #145c28; }
.conf-secondary { border-color: #ddc59c; background: var(--marginal-tint); color: #6b3205; }
.conf-unverified { border-color: #c9ccd2; background: #f4f5f7; color: #464c56; }
.unverified-value { font-style: normal; font-weight: 600; color: #464c56; }
.as-published { display: block; font-size: 0.78rem; color: var(--ink-soft); }

.policy-class {
  background: var(--paper); border: 1px solid var(--warm-line); border-left: 6px solid var(--navy);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 1.5rem;
}
.policy-class-cash_program { border-left-color: var(--ok); }
.policy-class-credit_only { border-left-color: var(--marginal); }
.policy-class-contract_only { border-left-color: var(--blocked); }
.policy-class-label {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; color: var(--ink-soft); margin: 0 0 0.3em;
}
.policy-class-sentence { font-size: 1.1rem; font-weight: 600; max-width: 74ch; }

.scenario-table th[scope="row"] { white-space: normal; min-width: 11rem; }
.scenario-table td { vertical-align: top; }
.scenario-indicated { background: var(--marginal-tint); }
.outcome {
  display: inline-block; font-weight: 700; font-size: 0.86rem; border-radius: 6px;
  padding: 0.1rem 0.5rem; margin-bottom: 0.35rem; border: 1px solid var(--warm-line);
}
.outcome-pays { background: var(--ok-tint); color: #145c28; border-color: #a7cdb3; }
.outcome-in_kind, .outcome-credit { background: var(--marginal-tint); color: #6b3205; border-color: #ddc59c; }
.outcome-excluded { background: var(--blocked-tint); color: #8f1616; border-color: #e0b3b3; }
.outcome-discretionary, .outcome-unstated { background: #f4f5f7; color: #464c56; }
.scenario-rate, .scenario-detail { display: block; margin-bottom: 0.35rem; }
.scenario-likelihood { color: var(--ink-soft); }

.worked-list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 1rem; }
.worked-row {
  background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.worked-row h4 { margin: 0 0 0.4em; }
.worked-line { font-size: 1.05rem; max-width: 74ch; }
.worked-breakeven { border-left: 6px solid var(--navy); padding-left: 0.9rem; max-width: 74ch; }
.worked-caveat, .worked-cap { color: var(--ink-soft); max-width: 74ch; }
.worked-cap { font-size: 1rem; color: var(--ink); }

.floor-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.85rem; }
.floor-row { margin: 0; border-top: 1px solid var(--warm-line); padding-top: 0.6rem; }
.floor-row h4 { margin: 0 0 0.25em; font-size: 1rem; }
.floor-row p { margin: 0; max-width: 78ch; }
/* overflow-wrap: the statutory-floor summary carries long hyphenated statute names that a 375 px
   phone cannot fit on one line, and an over-wide paragraph drags the whole PAGE sideways. */
.floor-bottom {
  border-left: 6px solid var(--navy); padding-left: 0.9rem; max-width: 76ch;
  overflow-wrap: break-word;
}

.claim-warning {
  background: var(--blocked-tint); border: 2px solid var(--blocked); border-radius: var(--radius);
  padding: 0.9rem 1.1rem; margin: 0 0 1.25rem; max-width: 76ch;
}
.claim-warning-head { font-weight: 700; font-size: 1.1rem; color: #8f1616; margin: 0 0 0.35em; }
.claim-warning p { margin: 0; }

.checklist, .unknowns { list-style: none; padding-left: 0; }
.checklist li, .unknowns li { border-top: 1px solid var(--warm-line); padding: 0.45rem 0; margin: 0; }
.track-row { margin-bottom: 0.8em; }
.track-open .track-status { font-weight: 700; color: #8f1616; }
.track-status { display: block; }
.policy-sources { list-style: none; padding-left: 0; margin: 0 0 1rem; }
.policy-sources li { margin-bottom: 0.3em; }
.sources-head { font-size: 1rem; }

/* ---------------------------------------------------------------- full report: guidance */
.guidance-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.guidance-block {
  margin: 0; background: var(--paper); border: 1px solid var(--warm-line);
  border-left: 6px solid var(--navy); border-radius: 8px; padding: 1rem 1.15rem;
}
.guidance-block h3 { font-size: 1.08rem; }
.guidance-block p { max-width: 76ch; margin-bottom: 0.5em; }
.guidance-items { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ---------------------------------------------------------------- full report: method */
.method-constants { max-width: 72ch; }
.method-constants strong { font-variant-numeric: tabular-nums; }
.honesty-box {
  border-left: 6px solid var(--navy); background: var(--paper);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.2rem; margin: 1.25rem 0;
}
.honesty-box h2, .honesty-box h3 { font-size: 1.05rem; }
.honesty-box p { max-width: 74ch; margin-bottom: 0.6em; }
.honesty-box p:last-child { margin-bottom: 0; }

/* -------------------------------------------- daily view (part of the one paid report) */
.daily-head {
  background: var(--paper); border: 1px solid var(--warm-line); border-top: 6px solid var(--navy);
  border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-bottom: 1.25rem;
}
.daily-flag {
  margin: 0 0 0.3em; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--navy);
}
.change-strip {
  list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.change-item {
  margin: 0; border-left: 6px solid var(--ink-soft); padding: 0.3rem 0 0.3rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.change-up { border-left-color: var(--ok); }
.change-down { border-left-color: var(--blocked); }
.change-flat { border-left-color: var(--ink-soft); }
.change-unknown { border-left-color: var(--warm-line); }
.change-gauge { font-weight: 700; color: var(--navy-deep); }
.change-value { font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.change-delta { font-size: 0.88rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- report banner
   SOFTENED. This used to be white capitals on a solid alarm-red field. The call is still the
   most prominent thing on the page — it leads, in the largest type, in plain operative words —
   but it is set as an assessment rather than as a siren: dark ink on a tint, with the severity
   carried by a heavy left accent and a chip. A persistence model on today's reading does not
   earn a siren, and a page that shouts at every low-water summer stops being read.

   Colour steps are softened too. Heavy uses --heavy (terracotta) rather than --blocked (pure
   red); --blocked is now reserved for a confirmed-cancellation state, which this engine does
   not yet publish. Every combination below is dark ink on a light tint, comfortably past AA. */
.banner {
  border-radius: var(--radius); padding: 1.5rem 1.6rem; margin-bottom: 1.25rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--warm-line); border-left: 10px solid var(--ink-soft);
}
.banner-ok { border-left-color: var(--ok); background: var(--ok-tint); }
.banner-marginal { border-left-color: var(--marginal); background: var(--marginal-tint); }
.banner-blocked { border-left-color: var(--heavy); background: var(--heavy-tint); }
/* Structural horizon: no green/amber/terracotta at all. The call word is replaced, not tinted. */
.banner-early { border-left-color: var(--navy); background: var(--navy-soft); }
.banner-eyebrow {
  font-size: 0.85rem; margin-bottom: 0.5em; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
}
/* The lead is the headline now: what the call MEANS, in calm operative words. */
.banner-call { color: var(--navy-deep); margin: 0 0 0.5em; font-size: 1.55rem; }
.banner-call-lead { display: block; font-size: 1.55rem; font-weight: 700; line-height: 1.25; }
/* ...and the category follows it as a secondary chip, not as the headline. */
.banner-assessment { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; margin: 0 0 0.9em; }
.banner-assessment-label {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-soft);
}
.banner-call-word {
  display: inline-block; font-size: 1rem; font-weight: 700; letter-spacing: 0.01em;
  border-radius: 999px; padding: 0.15rem 0.85rem; border: 1px solid currentColor;
}
.banner-ok .banner-call-word { color: #145c28; background: #fff; }
.banner-marginal .banner-call-word { color: #6b3205; background: #fff; }
.banner-blocked .banner-call-word { color: var(--heavy-ink); background: #fff; }
.banner-early .banner-call-word { color: var(--navy-deep); background: #fff; }
.banner-sub { margin: 0 0 1em; max-width: 66ch; color: var(--ink); }
/* The horizon rule lives INSIDE the call, so the two are read as one statement. */
.banner-horizon {
  margin: 0; max-width: 68ch; color: var(--ink-soft); font-size: 0.95rem;
  border-top: 1px solid var(--warm-line); padding-top: 0.9rem;
}
.horizon-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); }

/* The honesty split, demoted to one clause + the methodology link (it used to be a box). */
.honesty-line {
  border-left: 6px solid var(--navy); background: var(--paper); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.8rem 1.1rem; margin: 0 0 2.25rem; font-size: 0.95rem; color: var(--ink-soft);
  max-width: 78ch;
}

/* ---------------------------------------------------------------- exposure gate */
.exposure-banner {
  background: var(--navy-soft); border: 2px solid #b7c8e4; border-radius: var(--radius);
  padding: 1.25rem 1.4rem; margin-bottom: 1.25rem;
}
.exposure-banner h2 { font-size: 1.2rem; margin-bottom: 0.4em; }
.exposure-banner p { margin: 0; max-width: 72ch; color: var(--navy-deep); }

.section-lede { color: var(--ink-soft); max-width: 72ch; }

/* ---------------------------------------------------------------- outcome menu */
.outcome-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.outcome {
  background: var(--paper); border: 1px solid var(--warm-line); border-left: 6px solid var(--navy);
  border-radius: 8px; padding: 0.7rem 1rem; margin: 0;
}
.outcome h3 { font-size: 1.02rem; margin-bottom: 0.15em; }
.outcome p { margin: 0; max-width: 72ch; color: var(--ink-soft); font-size: 0.92rem; }
.outcome:last-child { border-left-color: var(--ink-soft); }

/* ---------------------------------------------------------------- days stat pair */
.stat-pair {
  display: grid; gap: 0.75rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}
.stat { margin: 0; }
.stat-number {
  font-size: 3rem; line-height: 1; font-weight: 800; color: var(--navy-deep);
  font-variant-numeric: tabular-nums; margin: 0 0 0.15em;
}
.stat-quiet .stat-number { color: var(--ink-soft); font-size: 2.2rem; }
.stat-unit { margin: 0; font-weight: 600; color: var(--ink-soft); font-size: 0.95rem; }
.stat-detail { grid-column: 1 / -1; margin: 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 72ch; }

/* ---------------------------------------------------------------- clearance band */
.band { width: 100%; height: 44px; display: block; margin: 0.5rem 0 0.75rem; }
.band-too-little { fill: var(--blocked); }
.band-thin { fill: var(--marginal); }
.band-workable { fill: var(--ok); }
.band-caution { fill: var(--high-marginal); }
.band-stop { fill: var(--high-blocked); }
.band-tick { stroke: #ffffff; stroke-width: 3; }
.band-now { stroke: var(--ink); stroke-width: 6; }
.band-key {
  list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.4rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); font-size: 0.92rem;
}
.band-key li { margin: 0; padding-left: 0.8rem; border-left: 6px solid var(--warm-line); }
.band-key strong { font-variant-numeric: tabular-nums; }
.band-key-now { border-left-color: var(--ink); }
.band-key-floor { border-left-color: var(--blocked); }
.band-key-clear { border-left-color: var(--ok); }
.band-key-mark1 { border-left-color: var(--high-marginal); }
.band-key-hsw { border-left-color: var(--high-blocked); }
/* Review P2-8: the scale's sentence, visible. It is also the SVG's accessible name (the graphic
   is aria-labelledby this element), so it is written once and heard once. */
.band-caption { margin: 0 0 0.6em; font-size: 0.95rem; color: var(--ink); max-width: 72ch; }

/* ---------------------------------------------------------------- season odds */
.odds { background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius); padding: 1.25rem 1.4rem; }
.odds-lead { font-size: 1.1rem; max-width: 70ch; }
.odds-frame, .odds-high-tail { max-width: 70ch; color: var(--ink-soft); }
.odds-high-tail { border-left: 6px solid var(--high-marginal); padding-left: 0.9rem; }

/* insurance attach — bordered and labelled so it can never be mistaken for the call */
.attach-module {
  border: 2px dashed var(--navy); border-radius: var(--radius); background: var(--paper);
  padding: 1.25rem 1.4rem; margin-bottom: 2.75rem;
}
.attach-label {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--navy); margin-bottom: 0.5em;
}
.attach-module h2 { font-size: 1.15rem; }
.attach-module p { max-width: 72ch; }
.attach-state { font-weight: 700; color: var(--navy-deep); margin: 0; }

/* ---------------------------------------------------------------- trigger + alert */
.trigger { background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius); padding: 1.5rem; }
.trigger-sentence { font-size: 1.15rem; font-weight: 600; color: var(--navy-deep); max-width: 66ch; }
/* Review P0-3: what happens to the address, next to the field that asks for it — and the same
   sentence that is written to disk beside the address itself. */
.subscribe-consent {
  margin: 0.9rem 0 0; font-size: 0.9rem; color: var(--ink-soft); max-width: 68ch;
  border-left: 4px solid var(--warm-line); padding-left: 0.8rem;
}

.entitlement { font-weight: 600; }
.entitlement-gap { color: var(--ink-soft); }
.analogue p { max-width: 72ch; font-size: 1.05rem; }

/* ---------------------------------------------------------------- collapsed gauges */
.gauge-more { margin-top: 1.25rem; }
.gauge-more summary {
  cursor: pointer; font-weight: 600; color: var(--navy); padding: 0.7rem 0; min-height: var(--tap);
}
.gauge-more summary:hover { color: var(--navy-deep); }
.gauge-more .gauge-grid { margin-top: 1rem; }

/* ---------------------------------------------------------------- share + provenance */
.share-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.provenance { font-size: 0.85rem; color: var(--ink-soft); overflow-wrap: anywhere; }
/* Review P2-5 / P1-8: the copy-link reply, and the promise that paper gets the whole thing. */
.copy-status { margin: 0 0 0.5em; font-size: 0.9rem; color: var(--ink); min-height: 1.4em; }
.print-note { font-size: 0.9rem; color: var(--ink-soft); max-width: 72ch; }

/* ---------------------------------------------------------------- day strip */
/* The one horizontal scroller on the page. Wraps into a grid once there is room for it. */
.day-strip {
  list-style: none; margin: 0 0 1rem; padding: 0 0 0.6rem;
  display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.chip {
  /* positioned so the .sr-only labels inside resolve against the chip: absolutely-positioned
     descendants of a horizontal scroller otherwise land in the initial containing block and drag
     the whole PAGE sideways (a scrollable page of blank space, invisible until you swipe). */
  position: relative;
  display: flex; flex-direction: column; gap: 0.25rem;
  flex: 0 0 min(78vw, 15rem); scroll-snap-align: start;
  background: var(--paper); border: 1px solid var(--warm-line); border-left: 8px solid var(--ink-soft);
  border-radius: 8px; padding: 0.7rem 0.85rem; margin: 0; font-size: 0.9rem;
}
.chip-ok { border-left-color: var(--ok); background: var(--ok-tint); }
.chip-marginal { border-left-color: var(--marginal); background: var(--marginal-tint); }
.chip-blocked { border-left-color: var(--blocked); background: var(--blocked-tint); }
.chip-high-marginal { border-left-color: var(--high-marginal); background: var(--high-marginal-tint); }
.chip-high-blocked { border-left-color: var(--high-blocked); background: var(--high-blocked-tint); }
.chip-unknown { border-left-color: var(--unknown); background: var(--unknown-tint); }
/* Beyond the forecast window the chips carry geography, not risk — so they carry no colour. */
.chip-neutral { border-left-color: var(--navy); background: var(--paper); }
.chip-head { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.chip-day { font-weight: 700; color: var(--navy-deep); }
.chip-port { font-weight: 700; font-size: 1.05rem; color: var(--navy-deep); }
.chip-meta { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.chip-icon { font-size: 1rem; }
.chip-ok .chip-risk { color: #146029; }
.chip-marginal .chip-risk { color: #8a3f07; }
.chip-blocked .chip-risk { color: #8f1616; }
.chip-high-marginal .chip-risk { color: #075985; }
.chip-high-blocked .chip-risk { color: #312e81; }
.chip-unknown .chip-risk { color: var(--unknown); }
.chip-exposure { color: var(--ink-soft); font-weight: 600; }
.chip-note { color: var(--ink-soft); font-size: 0.82rem; }

.legend {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  font-size: 0.85rem; color: var(--ink-soft);
}
.legend li { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.legend-icon { font-size: 1rem; color: var(--navy); }
.legend-swatch { width: 1rem; height: 1rem; border-radius: 3px; display: inline-block; }
.swatch-ok { background: var(--ok); }
.swatch-marginal { background: var(--marginal); }
.swatch-blocked { background: var(--blocked); }
.swatch-high-marginal { background: var(--high-marginal); }
.swatch-high-blocked { background: var(--high-blocked); }
.swatch-unknown { background: var(--unknown); }

/* ---------------------------------------------------------------- gauge cards */
.gauge-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gauge-card {
  background: var(--paper); border: 1px solid var(--warm-line); border-top: 6px solid var(--ink-soft);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow);
}
.gauge-ok { border-top-color: var(--ok); }
.gauge-marginal { border-top-color: var(--marginal); }
.gauge-blocked { border-top-color: var(--blocked); }
.gauge-high-marginal { border-top-color: var(--high-marginal); }
.gauge-high-blocked { border-top-color: var(--high-blocked); }
.gauge-unknown { border-top-color: var(--unknown); }
.gauge-head h3 { margin-bottom: 0.1em; }
.gauge-river { margin: 0 0 0.6em; color: var(--ink-soft); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; }
.gauge-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.4em; }
.gauge-number { font-size: 2.3rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--navy-deep); }
.gauge-trend { font-weight: 600; }
.gauge-margin { margin: 0; color: var(--ink-soft); font-size: 0.9rem; }
.gauge-risk { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.5em; }

.spark { width: 100%; height: 60px; display: block; }
.spark-area { fill: rgba(31, 56, 100, 0.09); stroke: none; }
.spark-line { fill: none; stroke: var(--navy); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.spark-dot { fill: var(--navy); }
.gauge-blocked .spark-line, .gauge-blocked .spark-dot { stroke: var(--blocked); fill: var(--blocked); }
.gauge-blocked .spark-line { fill: none; }
.gauge-marginal .spark-line, .gauge-marginal .spark-dot { stroke: var(--marginal); fill: var(--marginal); }
.gauge-marginal .spark-line { fill: none; }
.spark-caption { font-size: 0.8rem; color: var(--ink-soft); margin: 0 0 0.75em; }

.bafg-forecast {
  margin-top: 1.5rem; padding: 1.2rem 1.25rem; max-width: 760px;
  background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.bafg-forecast h3 { margin-bottom: 0.35em; }
.forecast-chart { width: 100%; height: 150px; display: block; }
.forecast-grid { stroke: var(--warm-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.forecast-band { fill: rgba(58, 116, 167, 0.22); stroke: none; }
.forecast-median {
  fill: none; stroke: var(--navy-deep); stroke-width: 3;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.forecast-axis {
  display: flex; justify-content: space-between; gap: 1rem;
  color: var(--ink-soft); font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.forecast-key {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem;
  color: var(--ink-soft); font-size: 0.82rem;
}
.forecast-key-band {
  display: inline-block; width: 1.5rem; height: 0.75rem;
  background: rgba(58, 116, 167, 0.22);
}
.forecast-key-line {
  display: inline-block; width: 1.5rem; height: 0;
  border-top: 3px solid var(--navy-deep); margin-left: 0.6rem;
}

.pill {
  display: inline-block; border-radius: 999px; padding: 0.15rem 0.7rem;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  background: var(--navy-soft); color: var(--navy-deep);
}
.pill-ok { background: var(--ok); color: #fff; }
.pill-marginal { background: var(--marginal); color: #fff; }
.pill-blocked { background: var(--blocked); color: #fff; }
.pill-high-marginal { background: var(--high-marginal); color: #fff; }
.pill-high-blocked { background: var(--high-blocked); color: #fff; }
.pill-unknown { background: var(--unknown); color: #fff; }
/* Not a risk state: the segment pill beyond the forecast window, where the word is geography. */
.pill-neutral { background: var(--navy-soft); color: var(--navy-deep); border: 1px solid #c6d4ea; }
.badge {
  display: inline-block; border-radius: 4px; padding: 0.1rem 0.5rem; font-size: 0.78rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.badge-stale { background: var(--marginal-tint); color: #6b3205; border: 1px solid var(--marginal); }
/* measured-and-modelled vs our own judgment: the split the whole product rests on */
.badge-basis-modelled { background: var(--navy-soft); color: var(--navy-deep); border: 1px solid #c6d4ea; }
.badge-basis-judgment { background: #fff; color: var(--navy-deep); border: 2px dashed var(--navy); }
.badge-basis-stub { background: var(--warm); color: var(--ink-soft); border: 1px solid var(--warm-line); }
.badge-role-context { background: var(--warm); color: var(--ink-soft); border: 1px solid var(--warm-line); }
.badge-role-chokepoint { background: var(--navy-soft); color: var(--navy-deep); border: 1px solid #c6d4ea; }

.empty-state {
  background: var(--paper); border: 1px dashed var(--warm-line); border-radius: var(--radius);
  padding: 1.25rem; color: var(--ink-soft); max-width: 72ch; margin: 0;
}

/* ---------------------------------------------------------------- narrative + tail */
.narrative-body { font-size: 1.1rem; max-width: 68ch; }
.operator-history p { max-width: 72ch; }
.operator-history .unverified { border-left: 4px solid var(--warm-line); padding-left: 0.9rem; color: var(--ink-soft); }
.fineprint { font-size: 0.85rem; color: var(--ink-soft); max-width: 72ch; }

.subscribe { background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius); padding: 1.5rem; }
.subscribe p { max-width: 68ch; }
.subscribe-form { display: grid; gap: 1rem; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; max-width: 560px; }
.subscribe-note { font-size: 0.9rem; color: var(--ink-soft); margin: 1rem 0 0; }

.report-meta dl { display: grid; gap: 0.5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0 0 1rem; }
.report-meta dl > div { border-top: 1px solid var(--warm-line); padding-top: 0.5rem; }
.report-meta dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.report-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.share { font-size: 0.85rem; color: var(--ink-soft); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- tables + prose */
.page-head .lede { font-size: 1.1rem; color: var(--ink-soft); max-width: 68ch; }
.table-scroll { overflow-x: auto; }
/* Review P1-7: a sideways scroller with no affordance is a table with invisible columns, and
   this audience is the one least likely to try a swipe on spec. Shown only where the table
   actually overflows — see the 560 px breakpoint — and never on paper, where it prints whole. */
.scroll-cue { display: none; }
.data-table { border-collapse: collapse; width: 100%; background: var(--paper); font-size: 0.95rem; }
.data-table caption { text-align: left; }
.data-table th, .data-table td { border: 1px solid var(--warm-line); padding: 0.65rem 0.8rem; text-align: left; vertical-align: top; }
.data-table thead th { background: var(--navy-soft); color: var(--navy-deep); }
.data-table tbody th { font-weight: 700; white-space: nowrap; }
.detail-cell { color: var(--ink-soft); font-size: 0.9rem; min-width: 18ch; }

.prose { max-width: 72ch; }
.prose h2 { margin-top: 0; }
.formula {
  background: var(--paper); border: 1px solid var(--warm-line); border-left: 6px solid var(--navy);
  border-radius: 8px; padding: 0.9rem 1.1rem; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.95rem; overflow-x: auto;
}

/* ---------------------------------------------------------------- reported disruptions */
.eyebrow {
  margin: 0 0 0.3rem; color: var(--navy); font-size: 0.82rem; font-weight: 800;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.disruption-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem; margin: 0 0 2rem;
}
.disruption-card {
  background: var(--paper); border: 1px solid var(--warm-line); border-top: 6px solid var(--blocked);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.2rem;
}
.disruption-notice { border-top-color: var(--navy); }
.disruption-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 0.6rem 1rem; margin-bottom: 0.8rem;
}
.disruption-head h3 { margin: 0; }
.evidence {
  display: inline-block; border: 1px solid var(--warm-line); border-radius: 999px;
  padding: 0.15rem 0.55rem; font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.evidence-confirmed { color: var(--ok); background: var(--ok-tint); border-color: #b7d9c0; }
.evidence-secondary { color: var(--marginal); background: var(--marginal-tint); border-color: #e5c9a5; }
.evidence-unverified { color: var(--unknown); background: var(--unknown-tint); }
.disruption-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1rem; margin: 0 0 1rem;
}
.disruption-facts div { min-width: 0; }
.disruption-facts dt {
  color: var(--ink-soft); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.disruption-facts dd { margin: 0; overflow-wrap: anywhere; }
.disruption-facts dd span { display: block; color: var(--ink-soft); font-size: 0.86rem; }
.disruption-facts .disruption-wide { grid-column: 1 / -1; }
.source-links { margin: 0; padding-left: 1.15rem; font-size: 0.87rem; color: var(--ink-soft); }
.source-links li { margin-bottom: 0.5rem; }

/* ---------------------------------------------------------------- schematic gauge map */
.gauge-map {
  margin: 0 0 1.4rem; padding: 1.2rem; background: var(--paper);
  border: 1px solid var(--warm-line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.gauge-map figcaption { max-width: 76ch; margin-bottom: 1rem; color: var(--ink-soft); }
.river-map-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.river-lane {
  min-width: 0; padding: 0.9rem; background: #f8fafc; border: 1px solid #c6d4ea;
  border-radius: 8px;
}
.river-lane header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 0.6rem; }
.river-lane header h3 { margin: 0; }
.river-lane header span { color: var(--ink-soft); font-size: 0.76rem; }
.river-gauges {
  position: relative; list-style: none; margin: 1rem 0 0; padding: 0;
}
.river-gauges::before {
  content: ""; position: absolute; left: 0.55rem; top: 0.65rem; bottom: 0.65rem;
  width: 5px; border-radius: 5px; background: #83b8d8;
}
.map-gauge {
  position: relative; display: grid; grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.55rem; align-items: start; margin: 0 0 0.9rem; min-width: 0;
}
.map-gauge:last-child { margin-bottom: 0; }
.map-gauge-dot {
  z-index: 1; display: block; width: 1.15rem; height: 1.15rem; margin-top: 0.18rem;
  border: 3px solid var(--paper); border-radius: 50%; background: var(--unknown);
  box-shadow: 0 0 0 2px var(--unknown);
}
.map-gauge strong, .map-reading, .map-state { display: block; overflow-wrap: anywhere; }
.map-reading { font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.map-state { color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; }
.map-gauge-ok .map-gauge-dot { background: var(--ok); box-shadow: 0 0 0 2px var(--ok); }
.map-gauge-marginal .map-gauge-dot { background: var(--marginal); box-shadow: 0 0 0 2px var(--marginal); }
.map-gauge-blocked .map-gauge-dot { background: var(--blocked); box-shadow: 0 0 0 2px var(--blocked); }
.map-gauge-high-marginal .map-gauge-dot { background: var(--high-marginal); box-shadow: 0 0 0 2px var(--high-marginal); }
.map-gauge-high-blocked .map-gauge-dot { background: var(--high-blocked); box-shadow: 0 0 0 2px var(--high-blocked); }
.map-gauge-context .map-gauge-dot { background: var(--paper); box-shadow: 0 0 0 2px var(--navy); }
.map-legend { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; margin: 1rem 0; font-size: 0.8rem; }
.map-legend span { display: inline-flex; gap: 0.35rem; align-items: center; }
.legend-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--unknown); }
.legend-ok { background: var(--ok); }
.legend-marginal { background: var(--marginal); }
.legend-blocked { background: var(--blocked); }
.legend-context { background: var(--paper); border: 2px solid var(--navy); }
.legend-unknown { background: var(--unknown); }
.condition-table-wrap { margin-bottom: 2rem; }
.condition-table caption { padding: 0 0 0.5rem; color: var(--ink-soft); font-weight: 700; }
.condition-table small { color: var(--ink-soft); font-weight: 500; }
.badge-basis-context { background: var(--warm); color: var(--ink-soft); border: 1px solid var(--warm-line); }

/* ---------------------------------------------------------------- responsive */
/* Once there is room, the day strip stops being a scroller and wraps: the recommendation allows
   exactly one horizontal scroller on the page, and only where it earns its place. */
@media (min-width: 721px) {
  .day-strip { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; }
  .chip { flex: 1 1 14rem; }
}

@media (max-width: 720px) {
  /* base type does NOT step down on small screens: 19 px is the audience's floor, not a maximum */
  .hero h1 { font-size: 2.1rem; }
  .banner-call-word { font-size: 1.9rem; }
  .banner-early .banner-call-word { font-size: 1.5rem; }
  .subscribe-form { grid-template-columns: 1fr; }
  .check-form { max-width: none; padding: 1.15rem; }
  .gauge-grid, .trio-grid, .ticker-list, .stat-pair { grid-template-columns: 1fr; }
  .header-inner { flex-direction: column; align-items: flex-start; }
  .site-nav a { min-height: var(--tap); display: flex; align-items: center; }
  .share-row .btn { width: 100%; }
  .tier-grid, .trust-grid, .how-steps, .change-strip { grid-template-columns: 1fr; }
  .checkout-form .btn { width: 100%; }
  .live-grid, .panel-pair { grid-template-columns: 1fr; }
  .disruption-grid, .disruption-facts { grid-template-columns: 1fr; }
  .river-map-grid { grid-template-columns: 1fr; }
  .disruption-facts .disruption-wide { grid-column: auto; }
  /* The segment card stacks: dates on their own line above the leg, chip below it. Three columns
     at 375 px would squeeze the reason sentence to four words a line. */
  /* min-width:0 and a wrapping risk row: a `1fr` track will not shrink below its content's
     min-content width, and a nowrap class label next to a pill was 13 px wider than a 375 px
     phone — which drags the whole PAGE sideways, not just the card. */
  .segment { grid-template-columns: minmax(0, 1fr); }
  .segment > * { min-width: 0; }
  .segment-dates { display: flex; gap: 0.6rem; align-items: baseline; }
  .segment-range, .segment-days { display: inline; }
  .segment-risk {
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 0.4rem 0.6rem;
  }
  .segment-class { white-space: normal; }
  .report-identity { font-size: 1.35rem; }
  .live-name { padding-right: 0; }
  .live-transit { position: static; display: inline-block; margin-bottom: 0.4rem; }
}

/* The calculations table is the one thing on the site that genuinely needs seven columns. On a
   phone it scrolls inside its own container rather than shrinking the numbers below legibility
   or letting the page itself go sideways. */
@media (max-width: 560px) {
  .calc-table { font-size: 0.88rem; min-width: 34rem; }
  .scroll-cue {
    display: block; margin: 0 0 0.5em; font-size: 0.92rem; color: var(--ink);
    border-left: 6px solid var(--navy); padding-left: 0.8rem;
  }
  /* The scroller is focusable so it can be driven from a keyboard; make that visible. */
  .table-scroll:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- print (report page)
   The printout is the first draft of the disruption dossier: timestamped measured fact, the call
   that was made, and when. Everything that only works on a screen comes out. */
@media print {
  html { font-size: 12pt; }
  body { background: #fff; color: #000; }
  .site-header, .site-nav, .site-footer, .skip-link, .subscribe, .ribbon-demo, .btn,
  .subscribe-form, .subscribe-note, .subscribe-consent, .attach-module, .upgrade, .locked,
  .copy-status, .print-note, .scroll-cue, .live-example { display: none !important; }
  main { padding: 0; }
  section { margin-bottom: 1.2rem; break-inside: avoid; }
  /* The full report is meant to go in a boarding folder, so the working is printed OPEN and the
     tables print whole rather than clipped at the edge of a scroller. EVERY collapsible on the
     page opens on paper: a printed dossier with a section the reader cannot tap is a dossier with
     a hole in it, and the whole point of the redesign is that the working is one tap away on a
     screen — not that it is absent. */
  .calc-working:not([open]) > *:not(summary) { display: block; }
  details:not([open]) > *:not(summary) { display: block; }
  details > summary { list-style: none; }
  .calc-working summary { font-weight: 700; }
  .how-percentages summary, .method-panel summary, .route-days summary,
  .watch-detail summary, details.calcs summary { font-weight: 700; }
  .details-body { border-top: 1px solid #666 !important; }

  /* Colour is carried on the left edge in ink, and the animated live dot stops moving. */
  .live-dot { animation: none !important; border: 1px solid #000; }
  .outcome-state, .live-card, .segment, .panel, .summary-callout, .call-trigger, .call-anchor,
  .call-odds, .strip-chip, .how-percentages, .method-panel, .route-days, .watch-detail,
  details.calcs {
    border: 1px solid #666 !important; background: #fff !important; box-shadow: none;
    break-inside: avoid;
  }
  .outcome-state-marked { border-left: 8px solid #000 !important; }
  /* The split has to print: it is the half of the call a claims handler quotes back. Bars go to
     ink, the percentage keeps its weight, and the calibration tag prints WITH them — a tag that
     only exists on screen would be worse than no tag at all. */
  .outcome-state-pct { color: #000 !important; }
  .outcome-state-bar { border: 1px solid #666; }
  .outcome-state-fill { background: #666 !important; }
  .calibration-tag {
    border: 1px dashed #000 !important; background: #fff !important; color: #000 !important;
  }
  .segment-blocked, .segment-high-blocked, .live-card-blocked, .live-card-high-blocked {
    border-left: 8px solid #000 !important;
  }
  .live-bar { border: 1px solid #666; }
  .live-bar-fill { background: #666 !important; }
  .live-grid, .panel-pair { display: grid; grid-template-columns: 1fr 1fr; }
  .chip-strip { gap: 0.4rem; }
  .calc-working, .watch-row, .route-day, .guidance-block, .policy-disclaimer, .honesty-box,
  .daily-head, .trust-item, .how-step, .tier-card,
  .policy-class, .worked-row, .claim-warning, .legal-block {
    border: 1px solid #666 !important; background: #fff !important; box-shadow: none;
    break-inside: avoid;
  }
  /* The money section is the half of the report a claims handler reads. It prints in full,
     markers and all — a confidence marker that only exists on screen is worse than none. */
  .conf { border: 1px solid #666 !important; background: #fff !important; }
  .claim-warning { border-width: 3px !important; }
  .scenario-indicated { background: #fff !important; }
  .scenario-table { font-size: 9pt; }
  .table-scroll { overflow: visible !important; }
  .calc-table { min-width: 0 !important; font-size: 9pt; }
  .working-detail, .working-formula { font-size: 9pt; }
  .banner { color: #000; background: #fff !important; border: 1px solid #000; border-left: 8px solid #000 !important; }
  .banner-eyebrow, .banner-call, .banner-sub, .banner-call-lead, .banner-horizon,
  .banner-assessment-label { color: #000; }
  .banner-call-word { color: #000 !important; background: #fff !important; border-color: #000; }
  .banner-horizon { border-top-color: #000; }
  .chip, .gauge-card, .honesty-line, .ribbon-degraded, .empty-state, .outcome, .stat-pair,
  .exposure-banner, .odds, .trigger {
    border: 1px solid #666 !important; background: #fff !important; box-shadow: none;
    break-inside: avoid;
  }
  .chip-blocked, .gauge-blocked, .chip-high-blocked, .gauge-high-blocked {
    border-left: 8px solid #000 !important;
  }
  /* the one scroller must not clip on paper */
  .day-strip {
    display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; scroll-snap-type: none;
  }
  .chip { flex: none; }
  .gauge-more[open] summary { font-weight: 700; }
  .gauge-more:not([open]) { display: none; }
  .spark-line, .spark-dot { stroke: #000; fill: #000; }
  .spark-line { fill: none; }
  .spark-area { fill: #ddd; }
  .bafg-forecast { border: 1px solid #666; background: #fff; box-shadow: none; break-inside: avoid; }
  .forecast-band { fill: #ddd; }
  .forecast-median { stroke: #000; }
  .band { border: 1px solid #666; }
  a { text-decoration: none; color: #000; }
  .share code, .provenance { font-size: 10pt; }
}

/* =========================================================================================
   INFORMATION-FIRST SURFACES (the rebuild)

   One rule governs every colour below: a corridor type is STRUCTURAL, so it may not borrow the
   risk palette. Free-flowing is not "bad" and lock-held is not "good" — they are different
   kinds of water, and a reader who has learned that green means safe elsewhere on the web must
   not read a meaning into these that is not there. The type words travel with every chip, so
   nothing here is carried by hue alone.
   ========================================================================================= */
:root {
  --type-free: #0b6b7a;        /* free-flowing: the level is the constraint */
  --type-free-tint: #e4f1f3;
  --type-locked: #4b5563;      /* held by locks: structural, deliberately grey */
  --type-locked-tint: #eceef1;
  --type-tidal: #3f6212;       /* tidal: a different mechanism again */
  --type-tidal-tint: #eef3e6;
  --type-notice: #6b21a8;      /* notice-governed: an authority decides, not a gauge */
  --type-notice-tint: #f2e9f8;
  --type-port: #64748b;
  --type-port-tint: #f1f3f6;
}

/* ---------------------------------------------------------------- brand */
.brand { align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.brand-logo { display: inline-flex; }
.brand-logo img {
  display: block; height: 46px; width: auto; max-width: 100%;
  background: #fff; border-radius: 6px; padding: 4px 8px;
}
.brand-tagline {
  font-size: 0.78rem; font-weight: 400; color: #cfe0ff; letter-spacing: 0.01em;
  max-width: 22ch; line-height: 1.3;
}
@media (max-width: 600px) {
  .brand-logo img { height: 40px; padding: 4px 6px; }
  .brand-tagline { display: none; }
}

/* ---------------------------------------------------------------- page furniture */
.hero-info { margin-bottom: 2rem; }
.hero-info .hero-note { color: var(--ink-soft); max-width: 72ch; }
.eyebrow {
  margin: 0 0 0.25em; font-size: 0.85rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft);
}
.section-lede { max-width: 78ch; color: var(--ink-soft); }
.table-scroll { overflow-x: auto; }

/* ---------------------------------------------------------------- corridor board */
.corridor-board { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .corridor-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.corridor {
  background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem 1.1rem;
}
.corridor-head { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: baseline; }
.corridor-name { margin: 0; font-size: 1.15rem; }
.corridor-mechanism { margin: 0.4em 0 0; color: var(--ink-soft); }
.corridor-extent, .corridor-note, .corridor-nogauge {
  margin: 0.4em 0 0; font-size: 0.88rem; color: var(--ink-soft);
}
.corridor-note { border-left: 3px solid var(--warm-line); padding-left: 0.7rem; }
.corridor-gauges { margin-top: 0.9rem; display: grid; gap: 0.75rem; }

.chip-type {
  display: inline-block; padding: 0.12em 0.6em; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap;
}
.chip-type-free_flowing { background: var(--type-free-tint); color: var(--type-free); }
.chip-type-impounded    { background: var(--type-locked-tint); color: var(--type-locked); }
.chip-type-tidal        { background: var(--type-tidal-tint); color: var(--type-tidal); }
.chip-type-notice       { background: var(--type-notice-tint); color: var(--type-notice); }
.chip-type-in_port      { background: var(--type-port-tint); color: var(--type-port); }

.corridor-free_flowing { border-left: 4px solid var(--type-free); }
.corridor-impounded    { border-left: 4px solid var(--type-locked); }
.corridor-tidal        { border-left: 4px solid var(--type-tidal); }
.corridor-notice       { border-left: 4px solid var(--type-notice); }

/* ---------------------------------------------------------------- one gauge */
.gstat { border-top: 1px solid var(--warm-line); padding-top: 0.7rem; }
.corridor-gauges .gstat:first-child { border-top: 0; padding-top: 0; }
.gstat-name { margin: 0; font-weight: 600; }
.gstat-river { font-weight: 400; color: var(--ink-soft); font-size: 0.85rem; margin-left: 0.4em; }
.gstat-value { margin: 0.15em 0; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline; }
.gstat-cm { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.gstat-trend { font-size: 0.9rem; color: var(--ink-soft); }
.gstat-none { font-size: 1.1rem; color: var(--ink-soft); font-style: italic; }
.gstat-gap { margin: 0.3em 0; }
.gstat-basis { display: block; font-size: 0.85rem; color: var(--ink-soft); }
.gstat-noline strong { font-weight: 600; }
.gstat-high { color: var(--ink); }
.gstat-meta { margin: 0.3em 0 0; font-size: 0.82rem; color: var(--ink-soft); }
.gstat-publisher { margin: 0.3em 0; font-size: 0.85rem; }
.gstat-publisher-scale, .gstat-publisher-note { color: var(--ink-soft); }
.pill-publisher { background: var(--navy-soft); color: var(--navy-deep); font-weight: 600; }
.gstat-missing { opacity: 0.85; }
.gauge-spark { margin: 0.6rem 0; }

/* ---------------------------------------------------------------- link-outs */
.linkouts { margin-top: 0.9rem; }
.linkouts-heading { font-size: 1rem; margin: 0 0 0.4em; }
.linkout-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.linkout {
  border: 1px dashed var(--warm-line); border-radius: 8px; padding: 0.65rem 0.8rem;
  background: var(--warm);
}
.linkout-anchor { font-weight: 600; }
.linkout-what { margin: 0.3em 0; font-size: 0.9rem; }
.linkout-meta, .linkout-why { margin: 0.25em 0 0; font-size: 0.8rem; color: var(--ink-soft); }
.linkout-leaves { font-weight: 600; }

/* ---------------------------------------------------------------- freeze map */
.freeze-days { list-style: none; margin: 0.8rem 0; padding: 0; display: grid; gap: 0.4rem; }
.freeze-day {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: baseline;
  padding: 0.45rem 0.7rem; border-radius: 8px; background: var(--paper);
  border: 1px solid var(--warm-line);
}
.freeze-no { font-weight: 700; min-width: 4.5rem; }
.freeze-port { font-weight: 600; }
.freeze-reaches { font-size: 0.82rem; color: var(--ink-soft); }
.freeze-free_flowing { border-left: 4px solid var(--type-free); }
.freeze-impounded    { border-left: 4px solid var(--type-locked); }
.freeze-tidal        { border-left: 4px solid var(--type-tidal); }
.freeze-notice       { border-left: 4px solid var(--type-notice); }
.freeze-in_port      { border-left: 4px solid var(--type-port); }
.freeze-summary { font-weight: 600; }
.freeze-note { font-size: 0.85rem; color: var(--ink-soft); max-width: 78ch; }

/* ---------------------------------------------------------------- history + diary */
.history-panel { margin-top: 0.6rem; }
.history-heading { font-size: 1.05rem; margin: 0 0 0.3em; }
.history-span, .history-window, .history-licence, .history-note {
  font-size: 0.85rem; color: var(--ink-soft); margin: 0.3em 0;
}
.history-limits { font-weight: 600; margin: 0.5em 0 0; }
.history-caveats { font-size: 0.85rem; color: var(--ink-soft); padding-left: 1.1rem; }
.history-table { border-collapse: collapse; width: 100%; margin: 0.6rem 0; font-variant-numeric: tabular-nums; }
.history-table th, .history-table td {
  text-align: left; padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--warm-line);
}
.history-current { background: var(--navy-soft); font-weight: 600; }
.history-details summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }

.diary-form { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: end; }
.diary-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.7rem; }
.diary-entry {
  background: var(--paper); border: 1px solid var(--warm-line); border-radius: 8px;
  padding: 0.7rem 0.9rem;
}
.diary-headline { margin: 0; }
.diary-dates, .diary-basis { margin: 0.3em 0 0; font-size: 0.85rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- rain */
.rain-panel { margin: 2rem 0; }
.rain-bars { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.7rem 0; }
.rain-bar {
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0.5rem;
  background: var(--navy-soft); border-radius: 6px; font-size: 0.78rem; min-width: 5.2rem;
}
.rain-mm { font-weight: 700; font-variant-numeric: tabular-nums; }
.rain-date { color: var(--ink-soft); }
.rain-totals { font-weight: 600; }
.rain-basin, .rain-source, .rain-off, .rain-disclaimer { font-size: 0.88rem; color: var(--ink-soft); }
.rain-disclaimer { max-width: 78ch; }
.basin-list { list-style: none; margin: 0.6rem 0; padding: 0; display: grid; gap: 0.5rem; }
.basin { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: baseline; }
.basin-meta, .basin-gauges { font-size: 0.82rem; color: var(--ink-soft); }
.basin-current .btn { border-color: var(--navy); font-weight: 700; }

/* ---------------------------------------------------------------- policies */
.policy-card {
  background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.policy-name { margin: 0 0 0.4em; }
.policy-facts, .policy-links { list-style: none; margin: 0.4em 0; padding: 0; }
.policy-facts li, .policy-links li { margin-bottom: 0.3em; }
.policy-unknowns { margin: 0.5em 0; }
.policy-unknowns-lead { margin: 0 0 0.2em; font-weight: 600; }
.policy-unknowns ul { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; color: var(--ink-soft); }
.policy-sister, .policy-disclaimer { font-size: 0.85rem; color: var(--ink-soft); max-width: 80ch; }
.policy-disclaimer { border-top: 1px solid var(--warm-line); padding-top: 0.5em; margin-top: 0.6em; }
.policy-questions ol { max-width: 80ch; }

/* ---------------------------------------------------------------- sources */
.source-table { border-collapse: collapse; width: 100%; min-width: 44rem; margin: 0.6rem 0; }
.source-table th, .source-table td {
  text-align: left; vertical-align: top; padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--warm-line); font-size: 0.9rem;
}
.source-table thead th { background: var(--navy-soft); }
.source-group { margin: 2rem 0; }
.source-group-rendered h2 { color: var(--type-free); }
.source-group-permission-pending h2, .source-group-excluded h2 { color: var(--type-notice); }
.feed-list { list-style: none; margin: 0.5rem 0; padding: 0; }
.feed-row { padding: 0.25rem 0; font-size: 0.9rem; }

/* ---------------------------------------------------------------- index pages */
.gauge-cards, .line-cards, .unread-list {
  list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 1rem;
}
@media (min-width: 760px) {
  .gauge-cards, .line-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gauge-card, .line-card, .unread-item {
  background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius);
  padding: 0.9rem 1rem; box-shadow: var(--shadow);
}
.gauge-card-type { margin: 0 0 0.5em; }
.line-meta { font-size: 0.85rem; color: var(--ink-soft); margin: 0.2em 0; }
.line-list, .ship-list { list-style: none; margin: 0.8rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.btn-current { background: var(--navy-soft); border-color: var(--navy); font-weight: 700; }
.unread-name { margin: 0 0 0.3em; font-weight: 600; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.unread-mechanism, .unread-note { margin: 0.25em 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- arithmetic + explainer */
.arith-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 1rem; }
.arith-item {
  background: var(--paper); border: 1px solid var(--warm-line); border-radius: var(--radius);
  padding: 0.9rem 1rem;
}
.arith-gauge { margin: 0 0 0.4em; font-size: 1.05rem; }
.arith-steps { margin: 0.4em 0; padding-left: 1.3rem; }
.arith-steps li { margin-bottom: 0.3em; }
.arith-now { margin: 0.5em 0 0; font-variant-numeric: tabular-nums; }
.learn-section { margin-bottom: 1rem; max-width: 80ch; }
.learn-steps { max-width: 80ch; }

.corridor-links { margin-top: 0.8rem; }
.corridor-links > summary {
  cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--navy);
  padding: 0.3rem 0;
}
.corridor-links[open] > summary { margin-bottom: 0.4rem; }