/* The Maritime Shell — the Forecast Network's shell, as an ocean liner.
 *
 * The network's land sites are Interstate guide signs: a coloured panel with a
 * white keyline, a route marker, numbered exit chips and a dashed lane line
 * under every section heading. That grammar belongs to a highway. At sea the
 * same jobs are done by a ship, and the translation is close enough that every
 * class name below is still the network's:
 *
 *   guide-sign panel  .sign    → the HULL: midnight hull plating, a gold cheat
 *                                 line for the keyline, a row of lit portholes,
 *                                 then the white boot-top line and the red
 *                                 boot-topping below the waterline
 *   route marker      .shield  → the FUNNEL: a raked stack in the line's
 *                                 livery, black-topped. Shipping lines have
 *                                 always told their ships apart by the funnel,
 *                                 which is exactly how the network tells its
 *                                 sites apart — so each maritime site is a
 *                                 livery on this one hull
 *   route plate icon  plate    → the LIFEBUOY
 *   exit chips        .mm      → PORTS OF CALL, on brass plaques
 *   lane line         .rule    → a swell line
 *   live badge                 → UNDER WAY, with the green starboard light
 *   footer rule                → hull and boot-topping, the waterline
 *
 * The paper stays paper: ship's-stationery ivory rather than a screen white,
 * for the reason every network site gives — these pages are read outdoors, on
 * phones, on deck. Map imagery sits in dark inset panels as elsewhere.
 *
 * One hull, several lines
 * -----------------------
 * This file is shared by every maritime site and is edited only here, in
 * forecastcurrents; a site adds a livery file of `:root` tokens and nothing
 * else. The planned fleet:
 *
 *   Forecast Currents  forecastcurrents.com  midnight hull, sea-teal funnel
 *                                             with a white band, black top
 *   Forecast Cruise    forecastcruise.com    (planned) white hull — set
 *                                             --sign light and --sign-tx dark;
 *                                             every rule below reads its
 *                                             colours from tokens so a light
 *                                             hull works
 *   Forecast Fishing   forecastfishing.com   (planned) trawler: deep green
 *                                             hull, safety-orange funnel
 *
 * The defaults here are the Currents livery, so a page that loads this file
 * alone is still a correct ship.
 */
:root {
  /* Paper and ink */
  --paper: #f4efe3;          /* ship's stationery */
  --card: #fffdf8;
  --ink: #111a22;
  --ink2: #43505a;
  --line: #d9d0bd;
  --line2: #eee7d8;
  --mut: #6b6a60;

  /* The hull — the network's --sign family, so every shared rule finds it */
  --sign: #0f2536;
  --sign-dk: #091827;
  --sign-tx: #ffffff;
  --sign-sub: #cfe4e8;

  /* The sea — the network's working accent (--motorway / --blue): links,
     timeline, section rules, the live badge, anything that does work */
  --motorway: #0b6f7d;
  --motorway-dk: #07505b;
  --motorway-sub: #cdecef;
  --blue: #0b6f7d;
  --navy: #0b4a63;
  --blue-sub: #cdecef;

  /* Brass */
  --amber: #b8893b;
  --amber-2: #e2c27a;

  /* Maritime-only tokens */
  --cheat: #c9a24a;          /* the gold line along the hull */
  --boot: #b3261e;           /* boot-topping: the red below the waterline */
  --waterline: #f3efe6;      /* the white boot-top line between the two */
  --porthole: rgba(255, 233, 170, .62);
  --funnel: #0b6f7d;
  --funnel-band: #ffffff;
  --funnel-top: #0a0e13;
  --starboard: #1f9d55;      /* running lights */
  --port: #c62828;

  --figure: #07111a;
  --figure-line: #1d2c38;

  --font: 'Overpass', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono-font: 'Overpass Mono', ui-monospace, monospace;
  --chart-font: 'EB Garamond', Georgia, 'Times New Roman', serif;  /* water names, as on a chart */
  --maxw: 1080px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--mono-font); font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.wrap-wide { max-width: 1560px; margin: 0 auto; padding: 0 18px; }

/* ═════════════════════════════════════════════════════════════════════════
   The network shell, verbatim from the Forecast Eagle sites (forecastdrought
   assets/forecastdrought.css, the utility bar through the wind options).
   Do not edit in place — the maritime translation is the block after it.
   ═════════════════════════════════════════════════════════════════════════ */
/* ── thin utility bar ─────────────────────────────────── */
.util {
  background: var(--ink); color: #cfccc4; border-bottom: 3px solid var(--sign);
  position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 8px rgba(0, 0, 0, .22);
}
.util .bar {
  max-width: 1560px; margin: 0 auto; padding: 0 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 34px; flex-wrap: wrap;
}
.util .mono { font-size: 11px; letter-spacing: .06em; }
.util .lnks { display: flex; gap: 16px; flex-wrap: wrap; }
.util a { color: #e9e7e0; font-weight: 700; font-size: 11px; letter-spacing: .06em; }
.util a:hover { color: var(--sign-sub); text-decoration: none; }
.util a[aria-current="page"] { color: var(--sign-sub); }

/* ── province strip ───────────────────────────────────────
   A second tier of the top navigation, because a province is a destination people
   return to and the models are not — you look up Ontario far more often than you
   choose between HRDPS and RDPS. Sits directly under the utility bar and shares its
   geometry so the two read as one masthead.

   Short forms rather than full names: thirteen provinces at full length wrap on any
   laptop, and "Sask." is unambiguous to every Canadian in a way that a truncated
   "Saskatch…" is not. The full name is the link's title. */
.provbar {
  background: var(--sign-dk); color: var(--sign-sub);
  border-bottom: 1px solid rgba(0, 0, 0, .25);
}
.provbar .bar {
  max-width: 1560px; margin: 0 auto; padding: 5px 18px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.provbar .lbl {
  font: 700 9px var(--mono-font); letter-spacing: .14em;
  color: rgba(255, 255, 255, .55); white-space: nowrap;
}
.provbar .lnks { display: flex; gap: 4px; flex-wrap: wrap; }
.provbar a {
  font: 800 11px var(--font); letter-spacing: .02em; color: #fff;
  padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
.provbar a:hover { background: rgba(255, 255, 255, .18); text-decoration: none; }
.provbar a[aria-current="page"] { background: #fff; color: var(--sign-dk); }

/* ── guide sign panel ─────────────────────────────────── */
.sign {
  background: var(--sign); border-radius: 10px; color: var(--sign-tx);
  padding: 26px 24px 24px; position: relative;
  box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 6px rgba(255, 255, 255, .9),
              0 10px 30px rgba(0, 0, 0, .16);
}
.sign a { color: #fff; }
.signhead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.signhead img { width: 62px; height: 62px; flex: none; display: block; }
.word {
  font-weight: 900; font-size: clamp(28px, 5.4vw, 50px); line-height: .92;
  letter-spacing: -.02em; margin: 0;
}
.word .yl { color: var(--sign-sub); }
.tag {
  margin: 8px 0 0; font-weight: 700; font-size: clamp(13px, 2.2vw, 16px);
  color: var(--sign-sub); letter-spacing: .01em;
}

/* UK motorway route plate.
   The real sign is white Transport lettering on motorway blue inside a white
   keyline — the "M 6" confirmation plate — so this one is motorway blue on the
   navy panel, outlined in white, rather than the solid white shield the
   Trans-Canada marker uses. */
.shield {
  background: var(--motorway); color: #fff; border: 2.5px solid #fff;
  border-radius: 6px; padding: 5px 11px 6px; text-align: center; line-height: 1;
  flex: none; display: inline-block; box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}
.shield .a { font-size: 8px; font-weight: 700; letter-spacing: .16em; color: var(--motorway-sub); display: block; }
.shield .b { font-size: 20px; font-weight: 900; letter-spacing: .04em; display: block; color: #fff; }
.shield .c { font-size: 8px; font-weight: 700; letter-spacing: .12em; color: var(--motorway-sub); display: block; }

/* Junction-style chips — Britain numbers junctions, not exits. */
.exits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; align-items: center; }
.exits .lbl { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--sign-sub); }
.mm {
  background: rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 5px; padding: 6px 12px; font-family: inherit; font-weight: 700;
  font-size: 12px; letter-spacing: .03em; cursor: pointer; color: #fff;
}
.mm:hover { background: #fff; color: var(--sign); text-decoration: none; }

/* ── section rule header ──────────────────────────────── */
section { padding: 26px 0 4px; }
.rule { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rule .ln {
  height: 3px; flex: 1;
  background: repeating-linear-gradient(90deg, var(--motorway) 0 18px, transparent 18px 34px);
}
.rule h2 {
  margin: 0; color: var(--motorway); font-size: 15px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
}
.rule .sub { color: var(--mut); font-size: 11px; font-weight: 700; letter-spacing: .06em; }

/* ── cards ────────────────────────────────────────────── */
.card-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 0; overflow: hidden; display: block; color: inherit;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .08); transition: transform .14s, box-shadow .14s;
}
a.card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .13); text-decoration: none; }
.card .chead {
  background: var(--motorway); color: #fff; padding: 9px 14px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.card .chead.blue { background: var(--blue); }
.card .chead.red { background: var(--sign); }
.card .chead .k { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--motorway-sub); }
.card .chead.blue .k { color: var(--blue-sub); }
.card .chead.red .k { color: var(--sign-sub); }
.card .cbody { padding: 14px; }
.card h3 { margin: 0 0 5px; font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--ink2); font-size: 13.5px; font-weight: 600; line-height: 1.5; }

.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px; box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}

/* ── controls ─────────────────────────────────────────── */
.btn {
  cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink2);
  border-radius: 3px; font-family: var(--font); font-weight: 700; font-size: 11.5px;
  letter-spacing: .02em; padding: 7px 12px; line-height: 1.3;
}
.btn:hover { border-color: var(--motorway); color: var(--ink); }
.btn.on, .btn[aria-pressed="true"] { background: var(--blue); color: #fff; border-color: #08488a; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-go { background: var(--blue); color: #fff; border-color: #08488a; font-weight: 900; letter-spacing: .06em; }
.btn-go:hover { background: #0b6bc4; color: #fff; }

select, input[type="text"], input[type="search"] {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  border-radius: 3px; padding: 6px 9px; font-family: var(--font);
  font-weight: 700; font-size: 12px;
}
select:focus, input:focus, .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* The `hidden` attribute is a promise the HTML makes, and a layout rule as ordinary
   as `.toolbar .group > div { display: flex }` outranks it on specificity and quietly
   breaks it — which is how the wind options first shipped visible while switched off.
   Restore it once, globally, rather than re-winning the argument per component. */
[hidden] { display: none !important; }

label { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }

/* ── timeline ─────────────────────────────────────────────
   Transport, scrubber and a UTC tick strip, in one card under the map. Shared by
   every model viewer, because a forecast loop is a forecast loop whether the frames
   are HRDPS hours or GDPS days.

   The range is index-based, so every frame gets equal width and the thumb always
   lands on one, and ticks are drawn on frames rather than at arbitrary clock times.
   Labels therefore thin out across a run exactly where its cadence coarsens. */
.timeline {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-top: 12px; background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px 9px; box-shadow: 0 6px 22px rgba(0, 0, 0, .08);
}
.tl-side { display: flex; flex-direction: column; gap: 5px; }
.tl-lab { font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mut); }
.tl-transport { display: flex; align-items: center; gap: 5px; }
.tl-track { flex: 1 1 340px; min-width: 240px; display: flex; flex-direction: column; }
.tl-track input[type="range"] { width: 100%; margin: 0; accent-color: var(--motorway); }
/* Inset by half a thumb so the first and last ticks sit under the thumb's travel,
   not under the ends of the groove the thumb never reaches. */
.tl-ticks { position: relative; height: 23px; margin: 3px 9px 0; pointer-events: none; }
.tl-ticks .tk { position: absolute; top: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; }
.tl-ticks .tk.at-start { transform: translateX(-2px); align-items: flex-start; }
.tl-ticks .tk.at-end { transform: translateX(calc(-100% + 2px)); align-items: flex-end; }
.tl-ticks .tk i { width: 1px; height: 5px; background: var(--line); display: block; }
.tl-ticks .tk span { font: 700 8.5px var(--mono-font); color: var(--mut);
  white-space: nowrap; line-height: 1; margin-top: 3px; letter-spacing: .02em; }
/* The tick that opens each forecast day carries the date and the accent green;
   the hours within that day are hairlines. */
.tl-ticks .tk.day i { height: 9px; width: 2px; background: var(--motorway); }
.tl-ticks .tk.day span { color: var(--ink2); font-weight: 800; }
/* Buffer fill. Sits between the scrubber and the tick strip, so the thing that says
   "the loop is ready" is directly under the thing you drag. It fades out once full
   rather than staying as chrome nobody needs. */
.tl-buffer { height: 2px; margin: 2px 9px 0; border-radius: 2px; background: var(--line2);
  overflow: hidden; transition: opacity .4s ease .3s; }
.tl-buffer::before { content: ""; display: block; height: 100%; width: var(--pct, 0%);
  background: var(--motorway); transition: width .15s linear; }
.tl-buffer.is-full { opacity: 0; }
.tl-ends { display: flex; justify-content: space-between; gap: 10px;
  font: 700 9.5px var(--mono-font); color: var(--mut); letter-spacing: .02em; }
.tl-count { font: 900 13px var(--mono-font); color: var(--ink); }
.tl-hint { margin-top: 7px; font-size: 11px; font-weight: 700; color: var(--mut); }

/* ── buffer policy chrome ──────────────────────────────────
   New with the converged maptimeline.js. The buffer bar's dashed tail is the part of
   the run deliberately not fetched (see Timeline.buffer); LOAD ALL beside the frame
   counter fetches it, and says what that costs. The button is created by the module,
   so there is no markup for it here — only these rules. */
.tl-buffer { position: relative; }
.tl-buffer.is-held::after {
  content: ""; position: absolute; right: 0; top: 0; height: 100%; width: var(--held, 0%);
  background: repeating-linear-gradient(90deg, var(--line) 0 3px, transparent 3px 6px);
}
.tl-load { font-size: 10px; padding: 4px 8px; margin-top: 4px; letter-spacing: .06em;
           font-family: var(--mono-font); white-space: nowrap; }
.tl-load:hover { border-color: var(--sign); color: var(--sign); }


/* Segmented control — the speed menu, and anything else that is one choice of a few */
.seg { display: flex; }
.seg button { font: 700 11px var(--mono-font); background: var(--card); color: var(--ink2);
  border: 1px solid var(--line); border-left-width: 0; padding: 5px 8px; cursor: pointer; }
.seg button:first-child { border-left-width: 1px; border-radius: 4px 0 0 4px; }
.seg button:last-child { border-radius: 0 4px 4px 0; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--motorway); color: #fff; border-color: var(--motorway); }
.seg button:disabled { cursor: not-allowed; }
/* A segment the active model or cycle cannot drive at all. Greyed as a block rather
   than hidden: a control that quietly vanishes reads as a bug, one that is greyed out
   reads as an answer, and a control strip that changes length as you switch models is
   disorienting. */
.seg.unavailable { opacity: .35; }
.seg.unavailable button { cursor: not-allowed; text-decoration: line-through;
  text-decoration-thickness: 1px; }

/* Breadcrumbs and drill chips are anchors now, not buttons, so places can be
   middle-clicked into a new tab and right-click-copied. They still have to look
   exactly like the controls they replaced — an underline on hover is the browser's
   idea, not ours. */
a.crumb, a.chip { text-decoration: none; display: inline-block; }
a.crumb:hover, a.chip:hover { text-decoration: none; }
.crumb.on { color: var(--ink); text-decoration: underline;
            text-decoration-color: var(--sign); text-underline-offset: 3px;
            text-decoration-thickness: 2px; }

/* Unit toggle — a segmented control, but a primary one, so it is a touch larger
   than the speed menu and uses the maple red rather than the accent green. Two
   buttons rather than a menu: it is a binary people flip back and forth, and a
   select turns one click into two. */
#units button { font: 800 12px var(--mono-font); padding: 6px 11px; }
#units button.on { background: var(--sign); border-color: var(--sign-dk); color: #fff; }

/* The wind overlay sits above the map and takes no pointer events — the map still
   drags and the value probe still reads through it. */
#wind-overlay {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
#wind-mode button { font: 700 10.5px var(--mono-font); padding: 5px 8px; }
#wind-mode button.on { background: var(--motorway); border-color: var(--motorway); color: #fff; }

/* ── misc ─────────────────────────────────────────────── */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 3px;
  font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
}
.badge-live { background: var(--motorway); color: #fff; }
.badge-new { background: var(--sign); color: #fff; }
.badge-soon { background: #efece5; color: var(--mut); border: 1px solid var(--line); }

.dim { color: var(--ink2); }
.faint { color: var(--mut); }

.site-footer {
  border-top: 3px solid var(--sign); margin-top: 44px; padding: 18px 0 34px;
  color: var(--ink2); font-size: 12px; font-weight: 600; background: #ddd8ce;
}
.site-footer a { color: var(--navy); font-weight: 800; }

.skip {
  position: absolute; left: -9999px; top: 0; background: var(--sign); color: #fff;
  padding: 9px 14px; z-index: 200; font-weight: 800;
}
.skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── wind options ─────────────────────────────────────────
   Sub-controls of the wind mode segment, and styled to read as subordinate to it:
   indented under a rule, smaller labels, and hidden outright when the active mode
   has nothing for them to change. */
.wind-opts { display: flex; flex-direction: column; gap: 5px; margin-top: 6px;
             padding-left: 9px; border-left: 2px solid var(--line2); }
.wind-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wind-opt label { font-size: 9px; letter-spacing: .09em; }
.wind-opt select { padding: 3px 5px; font-size: 11px; font-weight: 700; min-width: 92px; }


/* ── hero stage (network) ── */
.herostage { position: relative; margin: 16px auto 0; max-width: var(--maxw); }
.herohint { position: absolute; transform: translate(-50%, -190%); pointer-events: none;
  background: var(--ink); color: #fff; border-radius: 5px; padding: 5px 10px;
  font-family: var(--mono-font); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transition: opacity .12s ease; }
.herohint.show { opacity: 1; }

/* ═════════════════════════════════════════════════════════════════════════
   The maritime translation. Everything below overrides the network block
   above by cascade order alone — same selectors, no !important — so a
   network change to the shell still arrives here intact.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── the bridge: utility bar on a brass rail ─────────────────────────────── */
.util { background: #070d13; border-bottom-color: var(--cheat); }
.util a:hover, .util a[aria-current="page"] { color: var(--amber-2); }

/* ── the oceans strip ────────────────────────────────────────────────────── */
.provbar .lbl { color: rgba(226, 194, 122, .75); }

/* ── the hull ──────────────────────────────────────────────────────────────
   Hull plating, a gold cheat line where the guide sign has its white keyline,
   a row of lit portholes low on the plating, and then, below the panel, the
   white boot-top line and the red boot-topping. The boot-topping is an outer
   shadow rather than a border so it follows the corner radius the way a hull
   follows its turn of bilge, and so it adds nothing to the panel's box — the
   margin under the panel is what makes room for it. */
.sign {
  background:
    radial-gradient(circle, var(--porthole) 0 2.4px, rgba(255, 255, 255, .16) 2.9px 3.8px, transparent 4.3px)
      left 22px bottom 13px / 23px 10px repeat-x,
    var(--sign);
  padding: 26px 24px 38px;
  border-bottom: 3px solid var(--waterline);
  box-shadow: inset 0 0 0 4px var(--sign), inset 0 0 0 5.5px var(--cheat),
              0 11px 0 0 var(--boot), 0 20px 34px rgba(4, 16, 28, .22);
  margin-bottom: 11px;
}
.word .yl { color: var(--cheat); }

/* ── the funnel ────────────────────────────────────────────────────────────
   A raked stack: the top leans aft, as a liner's does. The livery is three
   flat bands in pixel stops, not percentages, so the black top stays the same
   depth however tall the lettering makes the stack. Line one sits in the black
   top; the band follows; the livery colour carries the rest. */
.shield {
  background: linear-gradient(180deg,
    var(--funnel-top) 0 15px, var(--funnel-band) 15px 18px, var(--funnel) 18px 100%);
  border: 0; border-radius: 0;
  clip-path: polygon(13% 0, 100% 0, 87% 100%, 0 100%);
  padding: 3px 22px 8px; box-shadow: none; min-width: 104px;
}
.shield .a { height: 12px; line-height: 12px; margin-bottom: 6px; color: #d9dde0; }
.shield .c { color: var(--motorway-sub); }

/* ── ports of call: brass plaques on the plating ─────────────────────────── */
.exits .lbl { color: var(--cheat); }
.mm { background: rgba(201, 162, 74, .10); border-color: rgba(201, 162, 74, .78); }
.mm:hover { background: var(--cheat); color: var(--sign); }

/* ── the swell line under a section heading ───────────────────────────────
   A mask, so the colour is a token and not baked into the SVG. */
.rule .ln {
  height: 7px; background: var(--motorway);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='7' viewBox='0 0 28 7'%3E%3Cpath d='M0 3.5 Q7 0.2 14 3.5 T28 3.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 7px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='7' viewBox='0 0 28 7'%3E%3Cpath d='M0 3.5 Q7 0.2 14 3.5 T28 3.5' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E") repeat-x 0 50% / 28px 7px;
}

/* ── cards: the sea by default, the hull and the boot-topping on request ─── */
.card .chead.blue, .card .chead.hull { background: var(--sign); }
.card .chead.blue .k, .card .chead.hull .k { color: var(--sign-sub); }
.card .chead.red, .card .chead.boot { background: var(--boot); }
.card .chead.red .k, .card .chead.boot .k { color: #f6d3cf; }

/* ── status badges: UNDER WAY shows the starboard light ──────────────────── */
.badge-live::before, .badge-way::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #58e08e; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55), 0 0 6px #58e08e;
  margin-right: 6px; vertical-align: 1px;
}
.badge-way { background: var(--motorway); color: #fff; }
.badge-dock { background: #efe8d8; color: var(--mut); border: 1px solid var(--line); }

/* ── the waterline under the page ────────────────────────────────────────── */
.site-footer {
  border-top: 3px solid var(--sign); box-shadow: inset 0 3px 0 var(--boot);
  background: #e9e2d2;
}

/* ── chart-room plates: map imagery in a dark inset panel ────────────────── */
.plate-dark {
  position: relative; background: var(--figure); border: 1px solid var(--figure-line);
  border-radius: 10px; overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .04), 0 10px 28px rgba(4, 16, 28, .20);
}
.plate-dark img { display: block; width: 100%; height: auto; }
.plate-cap {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; background: #0b1822; color: #9fb3bf;
  font: 700 10.5px var(--mono-font); letter-spacing: .06em; text-transform: uppercase;
}
.plate-cap b { color: #e6edf1; font-weight: 800; }

/* Water is named the way a chart names it — italic, letter-spaced serif. */
.water { font-family: var(--chart-font); font-style: italic; font-weight: 500;
         letter-spacing: .08em; }

/* The chart's own warning, which is this site's too. */
.nfn { font: 800 10.5px var(--mono-font); letter-spacing: .14em; color: var(--boot);
       text-transform: uppercase; }

/* Section spacing. The network sets `section { padding: 26px 0 4px }` but its
   own `.wrap { padding: 0 18px }` outranks an element selector, so on
   `<section class="wrap">` the vertical padding silently disappears and every
   heading sits on the block above it. Restated at a specificity that wins. */
section.wrap { padding-top: 30px; padding-bottom: 4px; }