/* styles.css — all InletCast styles: theme tokens, header, inlet rows, charts, map, planner, method, footer.
   Visual language borrows from the paper chart: white deep water for the page, a pale
   shallow-water tint for surfaces, buff land on the map, and chart magenta (the color of
   nav aids and hazards on every NOAA chart) as the single accent. Numbers are set in a
   mono face so the rows read like a buoy bulletin. */
@font-face { font-family:"Archivo Narrow"; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/archivo-narrow-600.woff2) format("woff2"); }
@font-face { font-family:"Archivo Narrow"; font-style:normal; font-weight:700; font-display:swap; src:url(../fonts/archivo-narrow-700.woff2) format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/plex-mono-500.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --display:"Archivo Narrow","Arial Narrow","Roboto Condensed","Helvetica Neue",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --body:-apple-system,"Segoe UI",system-ui,sans-serif;
  --surface-1:#ffffff; --surface-2:#e9f2f8; --page:#f6f9fb;
  --ink-1:#132029; --ink-2:#3d5262; --ink-3:#5d7182;
  --grid:#d7e3eb; --axis:#b0c3cf; --hairline:rgba(19,32,41,0.14);
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a;
  --seq-300:#6da7ec; --seq-450:#2a78d6; --seq-100:#cde2fb;
  --st-good:#0ca30c; --st-warn:#fab219; --st-serious:#ec835a; --st-critical:#d03b3b;
  --st-good-ink:#006300;
  /* text-bearing fills: darker than the dot/strip colors so white labels reach 4.5:1 */
  --st-good-deep:#087f08;
  --accent:#c2187f;
  /* accent as TEXT or border needs more contrast on the light page than accent fills do */
  --accent-ink:#a3126a;
  --accent-btn:#a3126a;
  --chip-bg:rgba(19,32,41,0.06);
  --land:#f3e9cc;
  --shadow:none;
  --radius:3px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1:#13212a; --surface-2:#172c38; --page:#0c161d;
    --ink-1:#eef4f7; --ink-2:#b7c7d1; --ink-3:#8fa2b0;
    --grid:#233642; --axis:#31495a; --hairline:rgba(255,255,255,0.13);
    --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
    --seq-300:#6da7ec; --seq-450:#3987e5; --seq-100:#184f95;
    --st-good-ink:#0ca30c;
    --chip-bg:rgba(255,255,255,0.07);
    --land:#22303a;
    --accent:#f06fbf;
    --accent-ink:#f06fbf;
    --accent-btn:#b0156f;
    --shadow:none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1:#13212a; --surface-2:#172c38; --page:#0c161d;
  --ink-1:#eef4f7; --ink-2:#b7c7d1; --ink-3:#8fa2b0;
  --grid:#233642; --axis:#31495a; --hairline:rgba(255,255,255,0.13);
  --series-1:#3987e5; --series-2:#d95926; --series-3:#199e70;
  --seq-300:#6da7ec; --seq-450:#3987e5; --seq-100:#184f95;
  --st-good-ink:#0ca30c;
  --chip-bg:rgba(255,255,255,0.07);
  --land:#22303a;
  --accent:#f06fbf;
  --accent-ink:#f06fbf;
  --accent-btn:#b0156f;
  --shadow:none;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--body);
  background:var(--page); color:var(--ink-1);
  font-size:15px; line-height:1.45;
  padding-bottom:70px;
}
a { color:var(--accent-ink); text-underline-offset:2px; }
button { font-family:inherit; }
/* every number on the site is an instrument reading */
.num, .stat .val, .mode-badge, table.data td, .windowrow .when, .segrow .segval, .mapreadout, .fchip b { font-family:var(--mono); font-variant-numeric:tabular-nums; }
svg text { font-family:var(--mono); }
h1, h2, h3, .card h3, .daycard h3 { font-family:var(--display); }

/* ---------- header: masthead ---------- */
header.app {
  position:sticky; top:0; z-index:40;
  background:var(--page);
  border-bottom:2px solid var(--ink-1);
  padding:10px 16px 0;
}
.brandrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; position:relative; }
.brand { display:flex; flex-direction:column; line-height:1; }
h1.logo { font-weight:700; font-size:26px; letter-spacing:.02em; text-transform:uppercase; line-height:1; }
.logo .cast { color:var(--accent); }
.eyebrow { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:3px; }
.mode-badge {
  font-size:11px; font-weight:500; padding:4px 9px; border-radius:var(--radius); border:1px solid var(--hairline);
  cursor:pointer; letter-spacing:.04em; text-transform:uppercase;
  background:var(--surface-1); color:var(--ink-2); display:inline-flex; align-items:center; gap:7px;
}
.mode-badge:hover { border-color:var(--ink-3); }
.mode-badge .dot { width:8px; height:8px; border-radius:50%; background:var(--ink-3); }
.mode-badge.live .dot { background:var(--st-good); }
/* all real data, but served from an expired cache after a network failure */
.mode-badge.cached .dot { background:var(--st-warn); }
/* data older than the hard staleness threshold: amber badge, one tap = refresh */
.mode-badge.stale { background:var(--st-warn); color:#3a2a00; border-color:var(--st-warn); }
.mode-badge.stale .dot { background:#3a2a00; }
.mode-sources .refreshbtn { margin-top:8px; width:100%; }
/* mode-badge dropdown: which sources are live vs simulated */
.mode-sources {
  position:absolute; top:100%; left:0; z-index:60; min-width:240px; max-width:340px;
  background:var(--surface-1); border:1px solid var(--ink-1); border-radius:var(--radius);
  padding:10px 12px; font-size:12px; color:var(--ink-2);
}
.mode-sources .popttl { margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.mode-sources ul { margin:0; padding-left:16px; }
.mode-sources li { margin:2px 0; }
.mode-sources li.sim { color:var(--st-critical); font-weight:600; }
.spacer { flex:1; }
.iconbtn {
  background:none; border:1px solid var(--hairline); color:var(--ink-2);
  border-radius:var(--radius); padding:5px 10px; font-size:13px; cursor:pointer;
}
.iconbtn:hover { background:var(--chip-bg); border-color:var(--ink-3); }
a.betabtn { text-decoration:none; background:var(--accent-btn); border-color:var(--accent-btn); color:#fff; font-weight:600; }
a.betabtn:hover { background:var(--accent-btn); filter:brightness(1.08); }
/* the copy-email fallback is a quiet text control next to the CTA */
#copyEmailBtn { border-color:transparent; color:var(--ink-3); font-size:12px; text-decoration:underline; text-underline-offset:2px; padding:5px 4px; }
#copyEmailBtn:hover { background:none; color:var(--ink-1); }
/* revealed by the Copy email fallback when the Clipboard API is unavailable */
.copyaddr { font-size:12px; color:var(--ink-2); user-select:all; font-family:var(--mono); }

/* filter row */
.filters {
  display:flex; gap:8px; align-items:center; padding:10px 0 8px;
  overflow-x:auto; scrollbar-width:none;
}
.filters::-webkit-scrollbar { display:none; }
.filters label { font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.filters label + select { margin-right:8px; }
.filters select {
  font-family:inherit; font-size:13px; color:var(--ink-1);
  background:var(--surface-1); border:1px solid var(--hairline);
  border-radius:var(--radius); padding:6px 8px;
}
nav.tabs { display:flex; gap:0; overflow-x:auto; scrollbar-width:none; margin:0 -16px; padding:0 16px; }
nav.tabs::-webkit-scrollbar { display:none; }
nav.tabs button {
  background:none; border:none; border-bottom:3px solid transparent; margin-bottom:-2px;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-3); font-size:14px; font-weight:600;
  padding:8px 12px 9px; cursor:pointer; white-space:nowrap;
}
nav.tabs button:hover { color:var(--ink-1); }
nav.tabs button.active { color:var(--ink-1); border-bottom-color:var(--accent); }

/* ---------- layout ---------- */
main { max-width:980px; margin:0 auto; padding:16px; }
.view { display:none; }
.view.active { display:block; }
/* the Terms section stays reachable without JS: navigating to #view-terms shows it */
.view:target { display:block; }
h2.viewtitle { font-size:22px; margin:2px 0 2px; letter-spacing:.01em; text-transform:uppercase; }
p.viewsub { font-size:13.5px; color:var(--ink-2); margin-bottom:14px; max-width:680px; }

/* hero: value pitch above the notice banner on the Inlets view */
.hero { margin:6px 0 16px; padding-bottom:14px; border-bottom:1px solid var(--hairline); }
.hero h2.herotitle { font-size:34px; line-height:1.05; letter-spacing:.005em; margin:0 0 6px; max-width:640px; text-transform:none; }
.hero p.herosub { font-size:15px; color:var(--ink-2); margin:0; max-width:560px; }
.hero p.heronote { font-size:12.5px; color:var(--ink-3); margin:6px 0 0; }

/* notice banner */
.notice {
  background:var(--surface-2); border-left:3px solid var(--st-warn);
  border-radius:0 var(--radius) var(--radius) 0; padding:10px 12px; margin:0 0 16px;
  font-size:13px; color:var(--ink-2); display:flex; gap:10px; align-items:flex-start;
}
.notice strong { color:var(--ink-1); }
.notice button { margin-left:auto; background:none; border:none; color:var(--ink-3); font-size:16px; cursor:pointer; line-height:1; padding:2px; }

/* ---------- inlet rows (the bulletin) ---------- */
.cardgrid { display:flex; flex-direction:column; border-top:2px solid var(--ink-1); }
.card {
  background:var(--surface-1); border-bottom:1px solid var(--grid);
  border-left:4px solid var(--axis);
  padding:12px 14px 12px 16px; cursor:pointer;
}
.card:hover { background:var(--surface-2); }
.card:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
/* the left rule carries the current class — the same encoding as the chip and the strip */
.card.cls-good { border-left-color:var(--st-good); }
.card.cls-warn { border-left-color:var(--st-warn); }
.card.cls-serious { border-left-color:var(--st-serious); }
.card.cls-critical { border-left-color:var(--st-critical); }
.cardtop { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.card h3 { font-size:20px; text-transform:uppercase; letter-spacing:.02em; display:flex; align-items:baseline; gap:8px; line-height:1.1; }
.card .area { font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:500; }
.statrow { display:flex; gap:18px; margin:6px 0 4px; flex-wrap:wrap; }
.stat { min-width:76px; }
.stat .lbl { font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); }
.stat .val { font-size:18px; font-weight:500; color:var(--ink-1); line-height:1.2; }
.stat .sub { font-family:var(--mono); font-size:11px; color:var(--ink-2); }
.nextwin { font-size:12.5px; color:var(--ink-2); margin-top:6px; }
.nextwin strong { color:var(--ink-1); font-weight:600; font-family:var(--mono); font-size:12px; }

/* skeleton rows — shown instantly at boot, replaced as each inlet's sources settle */
.card.skeleton { cursor:default; }
.card.skeleton:hover { background:var(--surface-1); }
.skelbar {
  height:12px; border-radius:2px; margin-top:10px;
  background:linear-gradient(90deg, var(--chip-bg) 25%, var(--grid) 50%, var(--chip-bg) 75%);
  background-size:200% 100%; animation:shimmer 1.2s linear infinite;
}
.skelbar.w60 { width:60%; }
.skelbar.strip { height:28px; margin-top:14px; }
.skelnote { font-size:12px; color:var(--ink-3); margin-top:8px; }
@keyframes shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
/* vestibular safety: no decorative motion when the OS asks for reduced motion
   (the JS wind-particle layer checks the same query and skips itself) */
@media (prefers-reduced-motion: reduce) {
  .skelbar { animation:none; }
}

/* "scored for [boat] — change" microcopy + link-styled button */
.boatnote { margin-top:-10px; }
.linkbtn { background:none; border:none; color:var(--accent-ink); cursor:pointer; font:inherit; padding:0; text-decoration:underline; text-underline-offset:2px; }

/* status-class popover — point-of-use definitions, dismissed by any tap outside */
.clspop {
  position:fixed; z-index:95; display:none;
  background:var(--surface-1); border:1px solid var(--ink-1); border-radius:var(--radius);
  padding:12px 14px; max-width:320px;
  font-size:12px; color:var(--ink-2);
}
.clspop .popttl { margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.clspop .clsrow { display:flex; gap:8px; align-items:flex-start; margin:6px 0; }
.clspop .clsrow .chip { flex:none; }
.clspop .clsnote { color:var(--ink-3); margin-top:8px; }

/* status chips — icon + label, never color alone */
.chip {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:var(--radius);
  color:#fff;
}
.chip .ic { font-size:10px; }
/* chips are keyboard-operable controls (they open the class-definitions popover) */
.chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.chip.good { background:var(--st-good-deep); }
.chip.warn { background:var(--st-warn); color:#3a2a00; }
.chip.serious { background:var(--st-serious); color:#3d1400; }
.chip.critical { background:var(--st-critical); }
.chip.ghost { background:var(--chip-bg); color:var(--ink-2); }
/* synthetic-source marker — deliberately loud; never restyle to blend in */
.chip.sim {
  background:repeating-linear-gradient(135deg, var(--st-critical) 0 8px, #7a1020 8px 16px);
  color:#fff;
}
.simnote { color:var(--st-critical); font-weight:600; }
/* expired-cache marker — real data saved earlier: amber, between live and simulated */
.chip.cached { background:var(--st-warn); color:#3a2a00; }
.cachednote { color:var(--ink-2); font-weight:600; }

/* status strip */
.strip { margin-top:10px; }
.strip svg { display:block; width:100%; }

/* ---------- detail ---------- */
.backbtn { background:none; border:none; color:var(--accent-ink); font-size:14px; font-weight:600; cursor:pointer; padding:0 0 10px; }
.detailhead { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.detailhead h2 { font-size:28px; letter-spacing:.01em; text-transform:uppercase; line-height:1.05; }
.inletnote { font-size:13.5px; color:var(--ink-2); margin:2px 0 12px; max-width:640px; }
.windowlist { display:flex; flex-direction:column; margin:10px 0 4px; border-top:1px solid var(--grid); }
.windowrow {
  display:flex; align-items:center; gap:10px; background:none;
  border-bottom:1px solid var(--grid); padding:8px 4px; font-size:13px;
}
.windowrow .when { font-weight:500; color:var(--ink-1); min-width:150px; font-size:12.5px; }
.windowrow .why { color:var(--ink-2); font-size:12px; }
.panel {
  background:var(--surface-1); border:1px solid var(--grid); border-top:2px solid var(--ink-1); border-radius:0;
  padding:14px; margin:14px 0;
}
.panel h3 { font-size:16px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-1); margin-bottom:2px; }
.panel .psub { font-size:12px; color:var(--ink-3); margin-bottom:8px; }
.panelhead { display:flex; align-items:baseline; gap:10px; }
.panelhead .spacer { flex:1; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--ink-2); align-items:center; }
.legend .key { display:inline-flex; align-items:center; gap:6px; }
.legend .lk { width:14px; height:2px; border-radius:1px; display:inline-block; }
.legend .sw { width:10px; height:10px; border-radius:2px; display:inline-block; }
.factorchips { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.fchip {
  font-size:12px; padding:5px 10px; border-radius:var(--radius); background:var(--surface-2);
  color:var(--ink-2); display:inline-flex; gap:6px; align-items:center;
}
.fchip b { color:var(--ink-1); font-weight:500; }
.tablewrap { overflow-x:auto; margin-top:10px; }
table.data { border-collapse:collapse; width:100%; font-size:12px; }
table.data th {
  text-align:left; color:var(--ink-3); font-weight:500; padding:6px 10px 6px 0;
  font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--ink-1); white-space:nowrap;
}
table.data td { padding:5px 10px 5px 0; border-bottom:1px solid var(--grid); color:var(--ink-2); white-space:nowrap; }
table.data td:first-child { color:var(--ink-1); }

/* charts */
.chart { position:relative; }
.chart svg { display:block; width:100%; overflow:visible; }
.tooltip {
  position:fixed; z-index:90; pointer-events:none; display:none;
  background:var(--surface-1); border:1px solid var(--ink-1); border-radius:var(--radius);
  padding:8px 10px; font-size:12px; min-width:130px; max-width:230px;
}
.tooltip .tt-title { color:var(--ink-3); font-size:11px; margin-bottom:4px; font-family:var(--mono); }
.tooltip .tt-row { display:flex; align-items:center; gap:7px; padding:1.5px 0; }
.tooltip .tt-key { width:12px; height:2px; border-radius:1px; flex:none; }
.tooltip .tt-val { font-weight:500; color:var(--ink-1); font-family:var(--mono); }
.tooltip .tt-lbl { color:var(--ink-2); }

/* map */
.mappanel { padding:10px 10px 6px; margin:0 0 16px; }
.mappanel .chart { max-width:700px; margin:0 auto; }
.mappanel .maphead .spacer { flex:1; }
.laybtn {
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  padding:3px 10px; border-radius:var(--radius); cursor:pointer;
  background:none; border:1px solid var(--hairline); color:var(--ink-3); margin-left:4px;
}
.laybtn.on { background:var(--accent-btn); border-color:var(--accent-btn); color:#fff; }
.mapreadout {
  position:absolute; left:10px; bottom:10px; display:none; pointer-events:none;
  background:var(--surface-1); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:3px 8px; font-size:11px; font-weight:500; color:var(--ink-2);
}
.sstlegend { display:flex; align-items:center; gap:8px; font-size:10.5px; color:var(--ink-3); padding:6px 4px 2px; max-width:700px; margin:0 auto; font-family:var(--mono); }
.sstlegend .sstbar { flex:0 0 140px; height:8px; border-radius:2px; display:inline-block; }
.sstlegend .sstnote { margin-left:auto; }
/* text alternative for the pointer-only west-wall overlay */
.wallnote { font-size:11px; color:var(--ink-2); padding:2px 4px 4px; max-width:700px; margin:0 auto; }
.mappanel .maphead { display:flex; align-items:baseline; gap:10px; padding:2px 4px 6px; flex-wrap:wrap; }
.mappanel .mapvalue { font-size:12px; color:var(--ink-2); padding:0 4px 6px; }
.mappanel .maphead h3 { font-size:16px; }
.mappanel .maphead span { font-size:11px; color:var(--ink-3); }

/* offshore planner */
.daycards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; margin-top:8px; }
.daycard { background:var(--surface-1); border:1px solid var(--grid); border-top:2px solid var(--ink-1); padding:12px; }
.daycard h3 { font-size:16px; text-transform:uppercase; letter-spacing:.03em; display:flex; gap:8px; align-items:center; justify-content:space-between; }
.segrow { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--ink-2); padding:4px 0; border-bottom:1px solid var(--grid); }
.segrow:last-child { border-bottom:none; }
.segrow .segname { color:var(--ink-2); }
.segrow .segval { font-weight:500; color:var(--ink-1); font-size:12px; display:flex; gap:6px; align-items:center; }
.segdot { width:9px; height:9px; border-radius:50%; display:inline-block; border:2px solid var(--surface-1); }

/* method */
.method p { margin:0 0 12px; max-width:640px; color:var(--ink-2); font-size:14.5px; line-height:1.55; }
.method h3 { margin:22px 0 6px; font-size:17px; text-transform:uppercase; letter-spacing:.03em; }
.method .sig { color:var(--ink-3); font-size:13px; margin-top:20px; font-family:var(--mono); }

/* outlook */
.outlook { font-size:14px; color:var(--ink-2); }
.outlook .byline { font-size:12px; color:var(--ink-3); margin-bottom:8px; font-family:var(--mono); }
.outlook p { margin-bottom:10px; }
/* sample panels — visually muted and dashed so canned content never reads as a live forecast */
.panel.sample { background:var(--chip-bg); border:1px dashed var(--axis); }
.panel.sample .sampletag { margin-left:auto; }

/* footer disclaimer */
footer.disc {
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  background:var(--page); border-top:1px solid var(--hairline);
  padding:8px 16px; font-size:11px; color:var(--ink-3); text-align:center;
}
@media (max-width:640px) {
  main { padding:12px; }
  h1.logo { font-size:22px; }
  .hero h2.herotitle { font-size:27px; }
  .card h3 { font-size:18px; }
  /* touch targets: primary controls reach ≥44px effective height on phones */
  .laybtn, .iconbtn, nav.tabs button { min-height:44px; }
  .laybtn { padding:8px 14px; }
  .mode-badge { min-height:32px; }
}