:root{
  --ink:#10263B; --ink-soft:#4A5E71; --paper:#F3F7F9; --card:#FFFFFF;
  --line:#D8E2E8;
  --excellent:#0E8A5F; --go:#2C7FB8; --marginal:#C98A00; --nogo:#B3402F; --off:#8A98A5;
  --prime:#FF5A1F;
  --disp:'Barlow Condensed',Arial Narrow,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --body:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;
     padding-bottom:48px}
.wrap{max-width:680px;margin:0 auto;padding:0 14px}

/* masthead */
header{border-bottom:2px solid var(--ink);padding:18px 0 12px;margin-bottom:14px;
  background-image:repeating-linear-gradient(180deg,transparent 0 11px,rgba(16,38,59,.05) 11px 12px)}
.mast{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
h1{font-family:var(--disp);font-weight:700;font-size:30px;letter-spacing:.04em;text-transform:uppercase;line-height:.95}
h1 span{display:block;font-size:15px;letter-spacing:.28em;color:var(--ink-soft)}
.stamp{text-align:right;font-family:var(--mono);font-size:11px;color:var(--ink-soft);white-space:nowrap}
.stamp b{color:var(--ink)}
.live{margin-top:10px;font-family:var(--mono);font-size:12px;background:var(--ink);color:#DFF0E8;
  padding:7px 10px;border-radius:4px;display:flex;gap:14px;flex-wrap:wrap}
.live em{font-style:normal;color:#8FD8B8}
.live .muted{color:#8FA6B8}
.live .stale{color:#FFC08A}

/* banner for degraded / stale states */
.banner{border:1.5px solid var(--marginal);background:#FFF8E6;border-radius:6px;padding:9px 12px;
  margin-bottom:14px;font-size:13.5px;color:#6B4E00}
.banner.bad{border-color:var(--nogo);background:#FDEEEB;color:#7A2617}
.banner b{font-family:var(--disp);letter-spacing:.08em;text-transform:uppercase}

/* best day hero */
.hero{background:var(--card);border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;margin-bottom:16px;
      box-shadow:0 2px 0 rgba(16,38,59,.15)}
.hero-flag{background:var(--prime);color:#fff;font-family:var(--disp);font-weight:700;font-size:14px;
  letter-spacing:.2em;text-transform:uppercase;padding:5px 12px;display:flex;justify-content:space-between;gap:8px}
.hero-main{padding:14px 14px 6px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px}
.hero-main .day{font-family:var(--disp);font-weight:700;font-size:34px;text-transform:uppercase;line-height:1}
.hero-main .dest{font-family:var(--disp);font-weight:600;font-size:22px;color:var(--excellent);text-transform:uppercase}
.hero-stats{display:flex;gap:8px;padding:8px 14px 4px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:11.5px;border:1px solid var(--line);border-radius:4px;padding:3px 8px;background:#F7FAFB}
.chip b{font-weight:600}
.hero-note{padding:8px 14px 12px;font-size:13.5px;color:var(--ink-soft)}

/* shape-of-day bar */
.shape{padding:10px 14px 4px}
.shape-label{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:5px}
.bar{position:relative;height:34px;border-radius:5px;overflow:hidden;display:flex;border:1px solid var(--line)}
.seg{height:100%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);
     font-size:10px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden}
.ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--ink-soft);margin-top:3px}
.s-glass{background:#0E8A5F}.s-beach{background:#2C7FB8}.s-run{background:#7BA7C9}.s-late{background:#C98A00}.s-off{background:#B9C6D0;color:#41525f}

/* day rail */
.rail-label{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.18em;text-transform:uppercase;margin:4px 0 8px}

/* wind chart */
.chart{background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-bottom:16px}
.chart-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px 6px;flex-wrap:wrap;gap:6px}
.chart-head .t{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.18em;text-transform:uppercase}
.times{display:flex;gap:6px}
.tbtn{font-family:var(--mono);font-size:11px;border:1px solid var(--line);background:#F7FAFB;border-radius:4px;
  padding:4px 9px;cursor:pointer;color:var(--ink)}
.tbtn.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.lbtn{font-family:var(--mono);font-size:11px;border:1px solid var(--line);background:#F7FAFB;border-radius:4px;padding:4px 9px;cursor:pointer;color:var(--ink-soft)}
.lbtn.on{background:#0E4D7A;color:#fff;border-color:#0E4D7A}
.legend{display:flex;gap:10px;align-items:center;font-family:var(--mono);font-size:10px;color:var(--ink-soft);padding:0 12px 10px;flex-wrap:wrap}
.sw{width:14px;height:9px;border-radius:2px;display:inline-block;margin-right:4px;vertical-align:-1px}
.stage{position:relative;width:100%;aspect-ratio:600/430;background:linear-gradient(160deg,#BFD9E6,#A9CBDD 60%,#9CC2D6)}
.stage svg,.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.chart-foot{display:flex;gap:8px;padding:8px 12px 10px;flex-wrap:wrap}

/* time scrubber */
.scrub{padding:2px 12px 8px;display:flex;align-items:center;gap:10px}
.scrub input[type=range]{flex:1;accent-color:#0E4D7A;height:22px}
.scrub-read{font-family:var(--mono);font-size:11px;color:var(--ink-soft);text-align:right;min-width:132px}
.scrub-read b{display:block;color:var(--ink);font-size:12px}

.rail{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch}
.dcard{min-width:86px;background:var(--card);border:1px solid var(--line);border-radius:7px;padding:0 0 8px;
  text-align:center;cursor:pointer;flex-shrink:0;position:relative}
.dcard .pen{height:6px;border-radius:7px 7px 0 0}
.dcard.sel{border-color:var(--ink);box-shadow:0 2px 0 rgba(16,38,59,.2)}
.dcard .dow{font-family:var(--disp);font-weight:700;font-size:16px;text-transform:uppercase;margin-top:6px}
.dcard .dt{font-family:var(--mono);font-size:10px;color:var(--ink-soft)}
.dcard .verdict{font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
.dcard .wx{font-family:var(--mono);font-size:10px;color:var(--ink-soft);margin-top:2px}
.watch-dot{position:absolute;top:9px;right:7px;width:8px;height:8px;border-radius:50%;background:var(--prime);
  animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.watch-dot{animation:none}}

/* detail panel */
.detail{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px;margin-top:4px}
.detail h3{font-family:var(--disp);font-size:24px;font-weight:700;text-transform:uppercase;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.detail h3 small{font-size:15px;font-weight:600;letter-spacing:.06em}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}
.cell{border:1px solid var(--line);border-radius:5px;padding:6px 8px;background:#F7FAFB}
.cell .k{font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.cell .v{font-family:var(--mono);font-size:12.5px;font-weight:600}
.detail p{font-size:13.5px;color:var(--ink-soft)}
.detail .shape{padding:8px 0 2px}
.await{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);border:1px dashed var(--line);
  border-radius:5px;padding:8px 10px;margin-top:8px;background:#F7FAFB}

/* NWS zone text */
.zone{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px;margin-top:16px}
.zone .rail-label{margin-top:0}
.zone-body{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);line-height:1.5}
.zone-body .hl{color:var(--nogo);font-weight:600;display:block;margin-bottom:6px}
.zone-body .pd{margin-bottom:5px}
.zone-body .pd b{color:var(--ink)}

footer{margin-top:22px;font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);
  border-top:1px solid var(--line);padding-top:10px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px}
footer .warn{color:var(--nogo)}
.c-excellent{color:var(--excellent)}.c-go{color:var(--go)}.c-marginal{color:var(--marginal)}.c-nogo{color:var(--nogo)}.c-off{color:var(--off)}
.b-excellent{background:var(--excellent)}.b-go{background:var(--go)}.b-marginal{background:var(--marginal)}.b-nogo{background:var(--nogo)}.b-off{background:var(--off)}

/* required day-shape line, beach-test result, and derived timing facts */
.shapeline{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink);
  background:#EAF3F7;border-left:3px solid #0E4D7A;border-radius:0 4px 4px 0;
  padding:7px 10px;margin:10px 0 6px}
.beachline{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);
  padding:0 0 4px}
/* ROUTING.md invariants. The pattern names the day, the gates carry their own
   verdict, and the risk is always one of the eight named traps — so each gets
   its own line rather than being buried in the note. */
.patternline{font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  color:var(--ink-soft);text-transform:uppercase;padding:0 0 6px}
.gateline{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);
  padding:0 0 4px}
.riskline{font-family:var(--mono);font-size:11.5px;font-weight:600;
  color:#8A3B12;background:#FDF1E7;border-left:3px solid #C2571A;
  border-radius:0 4px 4px 0;padding:6px 9px;margin:2px 0 8px}
.facts{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.facts span{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:4px;padding:2px 7px;background:#F7FAFB}
.facts b{color:var(--ink);font-weight:600}
.hero-note .shapeline{margin-top:2px}

/* Narrow screens: "Bow Bells Report" is a longer masthead than the space a
   phone gives it alongside the scan stamp, so stack them instead of letting
   the stamp clip. */
@media (max-width: 520px){
  h1{font-size:25px}
  h1 span{font-size:12px;letter-spacing:.16em;margin-top:2px}
  .mast{flex-direction:column;align-items:flex-start;gap:6px}
  .stamp{text-align:left;white-space:normal}
}