/* Sabine Pilots Dispatch board — wallboard styling (high-contrast, large-font) */
:root {
  --blue:#003366; --blue2:#005785; --accent:#0099cc; --lightblue:#e6f3ff;
  --ok:#2ecc71; --yellow:#FFD600; --red:#E53935;
  --ink:#13283d; --muted:#5a7790;
}
* { box-sizing:border-box; }
body {
  margin:0; font-family:'Segoe UI',Roboto,Arial,sans-serif; color:var(--ink);
  background:#f1f6fb; font-size:16px; line-height:1.4;
}

/* Header */
.disp-header {
  position:relative; overflow:hidden;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:linear-gradient(90deg,var(--blue),var(--blue2)); color:#fff;
  min-height:100px; padding:0 40px;   /* match the Pilot Map header height + 40px insets */
}
/* subtle chart-grid overlay (matches the Pilot Map header; no ship animation) */
.dh-grid {
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(0,50,100,0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,50,100,0.3) 1px, transparent 1px);
  background-size:30px 30px;
}
/* row 1 — matches the Map's PILOT MAP (view-eyebrow-lg) */
.disp-header h1 { margin:0; font-family:'Bruno Ace','Segoe UI',Roboto,sans-serif;
  font-size:30px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:#d4ebfb; text-shadow:1px 1px 4px rgba(0,0,0,0.35); line-height:1.02; }
/* row 2 — matches the Map's header-title (Sabine-Neches Waterway) */
.dh-sub { font-size:22px; font-weight:600; color:#a0c4e8;
  text-shadow:1px 1px 3px rgba(0,0,0,0.3); letter-spacing:0.5px; margin-top:0; }
/* left: Mesoflow logo (leftmost) + title block */
.dh-left { position:relative; z-index:1; display:flex; flex-direction:row; align-items:center; gap:18px; }
.dh-titleblock { display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.dh-right { position:relative; z-index:1; }
/* row 3 — matches the Map's route subtitle (header-subtitle) */
.dh-meta { display:flex; flex-wrap:wrap; gap:14px; font-size:13px; color:rgba(160,196,232,0.75); letter-spacing:0.5px; margin-top:3px; }
/* PROTOTYPE — centered overlay so it adds no header height */
.proto-tag { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  background:rgba(204,0,0,0.9); color:#e6f3ff; font-weight:600; white-space:nowrap;
  font-size:12px; letter-spacing:0.5px; padding:6px 16px; border-radius:4px; }
.dh-stamp { font-size:13px; }
.dh-stamp span { color:#fff; font-weight:700; }   /* keep brighter emphasis on the time values */
.dh-stamp-model { opacity:.72; }
/* right: bigger Pilot Map switch + Mesoflow logo */
.dh-right { display:flex; align-items:center; gap:18px; }
/* View switch — cross-link to the Pilot Map */
.view-switch {
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  padding:5px 12px; border-radius:999px; text-decoration:none;
  font-size:13px; font-weight:700; color:#eaf4ff;
  background:rgba(255,255,255,.12); border:1px solid rgba(160,196,232,.55);
  transition:background .15s, border-color .15s;
}
.view-switch:hover { background:rgba(255,255,255,.22); border-color:rgba(200,225,250,.9); }
.view-switch:focus-visible { outline:2px solid #cfe6f5; outline-offset:2px; }
.view-switch-lg { margin-top:0; font-size:16px; font-weight:800; padding:11px 22px; gap:8px;
  min-width:190px; justify-content:center; }
.view-switch-lg span { font-size:18px; }
@media (max-width:700px) {
  .view-switch-lg { font-size:13px; padding:8px 14px; }
}
@media (max-width:599px) {
  .disp-header { height:60px; padding:0 14px; }   /* match Pilot Map mobile header */
  .dh-logo { height:51px; }
  .disp-header h1 { font-size:13px; }
  .dh-sub, .dh-meta { display:none; }
  .view-switch-lg { min-width:0; }
}
.dh-logo-link { display:flex; align-items:center; }
.dh-logo { height:74px; width:auto; display:block; }   /* match Pilot Map logo (+15%) */

/* Alert banner */
.disp-banner { padding:12px 22px; display:flex; flex-direction:column; gap:8px; }
.disp-banner.all-clear { background:#eafaf0; }
.banner-ok { font-size:18px; font-weight:700; color:#1c7a44; }
.notice {
  display:flex; align-items:center; gap:10px; font-size:18px; font-weight:700;
  padding:10px 14px; border-radius:8px; border-left:7px solid;
}
.notice .ico { font-size:22px; }
.notice.yellow { background:#fff8d6; border-color:var(--yellow); color:#7a5b00; }
.notice.red    { background:#fdecec; border-color:var(--red);    color:#8a1414; }

/* Strip: clearance + support */
.disp-strip { display:flex; gap:14px; padding:6px 22px 14px; flex-wrap:wrap; align-items:stretch; }
.strip-col { display:flex; gap:14px; flex-wrap:wrap; }
.clearance-card, .support-card {
  background:#fff; border:1px solid #d6e3ef; border-radius:10px; padding:12px 16px;
  min-width:230px; box-shadow:0 2px 8px rgba(0,51,102,.08); border-top:5px solid var(--accent);
}
.clearance-card.red, .support-card.red       { border-top-color:var(--red);    background:#fdf3f3; }
.clearance-card.yellow, .support-card.yellow { border-top-color:var(--yellow); background:#fffbe8; }
.clearance-card.green, .support-card.green   { border-top-color:var(--ok); }
.cc-name, .sc-name { font-size:13px; font-weight:800; color:var(--blue); text-transform:uppercase; letter-spacing:.4px; }
.cc-now { margin:4px 0; }
.cc-val { font-size:34px; font-weight:800; color:var(--ink); }
.cc-lbl { font-size:12px; color:var(--muted); }
.cc-row { font-size:13px; color:var(--ink); }
.cc-meta { font-size:11px; color:var(--muted); font-style:italic; margin-top:4px; }
.sc-val { font-size:30px; font-weight:800; }
.sc-val.sm { font-size:15px; font-weight:700; }
.sc-val span { font-size:15px; font-weight:600; color:var(--muted); }
.sc-meta { font-size:11px; color:var(--muted); }

/* 36 h grid */
.disp-gridwrap { padding:6px 22px 18px; }
.disp-gridwrap h2 { font-size:18px; color:var(--blue); margin:0 0 8px; }
.disp-gridwrap .hl { color:var(--accent); }
.grid-scroll { overflow-x:auto; }
.grid-table { border-collapse:collapse; width:100%; font-size:14px; }
.grid-table th, .grid-table td {
  text-align:center; padding:6px 4px; border:1px solid #e3edf6; min-width:34px; font-variant-numeric:tabular-nums;
}
.grid-table thead th { background:var(--lightblue); color:var(--blue); font-weight:700; font-size:12px; position:sticky; top:0; }
.grid-table th.daybreak, .grid-table td.daybreak { border-left:2px solid var(--blue2); }
.grid-table .rowhdr { text-align:left; font-weight:700; color:var(--blue); white-space:nowrap; background:#f6fafe; }
.grid-table .rowhdr .thr { display:block; font-size:10px; font-weight:500; color:var(--muted); }
.grid-table td.green  { background:#fff; }
.grid-table td.yellow { background:var(--yellow); color:#5a4500; font-weight:800; }
.grid-table td.red    { background:var(--red);    color:#fff; font-weight:800; }
.grid-table td.na     { background:#f2f2f2; color:#bbb; }

/* data tables: currents + weather check */
.disp-tablewrap { padding:6px 22px 18px; }
.disp-tablewrap h2 { font-size:18px; color:var(--blue); margin:0 0 8px; }
.disp-tablewrap .hl { color:var(--accent); }
.disp-tablewrap h2 .sub { font-size:12px; font-weight:500; color:var(--muted); margin-left:8px; }
.dt-table { border-collapse:collapse; width:100%; font-size:14px; }
.dt-table th, .dt-table td {
  text-align:center; padding:6px 8px; border:1px solid #e3edf6; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.dt-table thead th { background:var(--lightblue); color:var(--blue); font-weight:700; font-size:12px; }
.dt-table .rowhdr { text-align:left; font-weight:700; color:var(--blue); background:#f6fafe; }
.dt-table td.green  { background:#fff; }
.dt-table td.yellow { background:var(--yellow); color:#5a4500; font-weight:800; }
.dt-table td.red    { background:var(--red);    color:#fff; font-weight:800; }
.dt-table td.na     { background:#f2f2f2; color:#bbb; }

/* weather check — one compact table per location */
.wc-grid { display:flex; flex-wrap:wrap; gap:18px; }
.wc-block { flex:1 1 320px; min-width:300px; overflow-x:auto; }
.wc-loc { font-size:14px; color:var(--blue); margin:0 0 4px; font-weight:800; }
.wc-table { font-size:13px; }
.wc-table th, .wc-table td { padding:4px 6px; }

/* legend + footer */
.grid-legend { margin-top:8px; font-size:13px; color:var(--ink); display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; }
.grid-legend .lg { display:inline-flex; align-items:center; gap:6px; }
.grid-legend .sw { width:16px; height:16px; border-radius:3px; border:1px solid #ccc; display:inline-block; }
.grid-legend .sw.green { background:#fff; } .grid-legend .sw.yellow { background:var(--yellow); } .grid-legend .sw.red { background:var(--red); }
.grid-legend .lg-note { color:var(--muted); font-size:11px; }
.disp-footer { padding:12px 22px 24px; font-size:12px; color:var(--muted); }
.disp-footer a { color:var(--accent); }

/* larger type on big screens / wallboards */
@media (min-width:1600px) {
  body { font-size:18px; }
  .notice { font-size:20px; }
  .grid-table { font-size:16px; }
  .cc-val { font-size:40px; }
}

/* ============================================================
   v4 redesign — observation-first: alert chips, channel ribbon,
   support gauges, de-emphasized forecast outlook.
   ============================================================ */

/* shared status colors for dots / bars / gauges */
.lvl-green  { --lvl: var(--ok); }
.lvl-yellow { --lvl: var(--yellow); }
.lvl-red    { --lvl: var(--red); }
.lvl-na     { --lvl: #b9c7d3; }

/* ── compact NWS alert chips ───────────────────────────── */
.disp-alert-chips {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:8px 22px; background:#fff6ef; border-bottom:1px solid #f0dcc7;
}
.chip-lead { font-size:12px; font-weight:800; color:var(--blue); letter-spacing:.3px; }
.alert-chip-wrap { position:relative; }
.alert-chip {
  display:inline-flex; align-items:center; gap:8px; font:inherit; cursor:pointer;
  background:#fff; border:1px solid #e2d4c4; border-left:4px solid #ccc;
  border-radius:8px; padding:6px 10px; box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.alert-chip:hover { background:#fffdf9; }
.alert-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.ac-evt { font-size:12px; font-weight:800; }
.ac-exp { font-size:11px; color:var(--muted); }
.ac-caret { font-size:10px; color:var(--muted); transition:transform .15s; }
.alert-chip.open .ac-caret { transform:rotate(180deg); }
/* full-width inline panel: flex-basis:100% forces its own row under the chips */
.alert-detail-panel {
  flex-basis:100%; width:100%; margin-top:8px;
  background:#fff; border:1px solid #e2d4c4; border-radius:10px;
  box-shadow:0 4px 14px rgba(0,51,102,.10); padding:11px 14px;
}
.alert-detail-panel[hidden] { display:none; }
.ad-head { font-size:13px; font-weight:700; color:var(--ink); line-height:1.35; }
.ad-area { font-size:12px; color:var(--muted); margin-top:5px; line-height:1.35; }
.ad-link { display:inline-block; margin-top:8px; font-size:12px; font-weight:700; color:var(--accent); text-decoration:none; }
.ad-link:hover { text-decoration:underline; }

/* ── ★ channel ribbon ──────────────────────────────────── */
.ribbon-wrap { padding:10px 22px 16px; }
.ribbon-wrap h2 { font-size:18px; color:var(--blue); margin:0 0 10px; }
.ribbon-wrap .hl { color:var(--accent); }
.ribbon-wrap h2 .sub { font-size:12px; font-weight:500; color:var(--muted); margin-left:8px; }
.ribbon {
  background:linear-gradient(180deg,#eaf4fb 0%,#f4fafd 100%);
  border:1px solid #d3e3f0; border-radius:14px; overflow:hidden;
  box-shadow:0 3px 14px rgba(0,51,102,.08);
}
/* end caps */
.rib-cap {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 18px; font-size:12px; flex-wrap:wrap;
}
.rib-cap .cap-flag { font-weight:800; color:var(--blue); letter-spacing:.3px; }
.rib-cap .cap-n { display:inline-block; background:var(--blue); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.5px; padding:2px 7px; border-radius:4px; margin-right:6px; }
.rib-cap .cap-meta { font-size:12px; color:var(--muted); }
.rib-cap .cap-meta .ok  { color:#1c7a44; font-weight:700; }
.rib-cap .cap-meta .red { color:var(--red); font-weight:800; }
.rib-cap-gulf { background:linear-gradient(90deg,#d6ecf8,#eaf4fb); border-bottom:1px solid #cfe2f0; }
.rib-cap-up   { background:linear-gradient(90deg,#dfeef9,#eef6fb); border-top:1px solid #cfe2f0; }

/* the waterway track + centerline */
.ribbon-track { position:relative; padding:4px 0; }
.ribbon-track::before {
  content:""; position:absolute; top:0; bottom:0; left:22px; transform:translateX(-50%); width:13px;
  background:linear-gradient(180deg,#3f8fc4 0%,#5fa8d8 45%,#9fd0ec 100%);
  border-radius:7px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45), 0 1px 3px rgba(0,51,102,.18);
}
.rib-row {
  position:relative; display:grid; align-items:center;
  grid-template-columns:44px minmax(110px,1.1fr) minmax(150px,2fr) 96px;
  gap:10px; padding:9px 16px 9px 0; border-bottom:1px solid #e4eef7;
}
.rib-row:last-child { border-bottom:none; }
.rib-row.forecast-only {
  background:repeating-linear-gradient(45deg,rgba(122,150,175,.04),rgba(122,150,175,.04) 6px,rgba(122,150,175,.16) 6px,rgba(122,150,175,.16) 12px);
  box-shadow:inset 3px 0 0 rgba(122,150,175,.5);
}
.rib-row.forecast-only .rib-name { color:#41617a; }

/* node dot on the centerline */
.rib-node { display:flex; justify-content:center; }
.dot {
  width:18px; height:18px; border-radius:50%; background:var(--lvl,#b9c7d3);
  border:3px solid #fff; box-shadow:0 0 0 2px rgba(0,51,102,.18); position:relative; z-index:1;
}
.rib-row.forecast-only .dot { width:16px; height:16px; background:#fff; border:3px dashed var(--lvl,#b9c7d3); box-shadow:0 0 0 2px rgba(122,150,175,.45); }
.dot.ring { background:#fff; border:2px dashed var(--muted); box-shadow:none; } /* legend */

/* station identity */
.rib-id { display:flex; flex-direction:column; gap:1px; }
.rib-name { font-size:15px; font-weight:800; color:var(--ink); line-height:1.1; }
.rib-zone { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.tide-chip { align-self:flex-start; margin-top:3px; font-size:10px; font-weight:700; color:var(--blue2);
  background:#e7f1f9; border-radius:4px; padding:1px 6px; }
.tide-chip.red { color:var(--red); background:#fdecec; }

/* flow cell: direction badge + magnitude bar + cross set */
.rib-flow { display:flex; flex-direction:column; gap:3px; min-width:0; }
.flow-line { display:flex; align-items:center; gap:9px; }
.dir-badge { font-size:11px; font-weight:800; letter-spacing:.3px; border-radius:4px; padding:2px 6px; white-space:nowrap; }
.dir-badge.fld   { color:#0a7d5a; background:#e2f4ee; }
.dir-badge.ebb   { color:#2c4d66; background:#e8eef4; }
.dir-badge.slack { color:var(--muted); background:#eef1f5; }
.arw { width:15px; height:15px; flex:none; fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  transform-box:fill-box; transform-origin:center; }
.a-along { stroke:var(--blue2); }
.a-cross { stroke:currentColor; width:13px; height:13px; }
.a-wind  { stroke:var(--blue2); }
.mag { position:relative; flex:1 1 90px; min-width:70px; max-width:230px; height:10px; background:#e3edf6; border-radius:5px; overflow:hidden; }
.mag-fill { display:block; height:100%; border-radius:5px; background:var(--lvl,#cbd6e0); transition:width .4s ease; }
.mag::after { content:""; position:absolute; top:-2px; bottom:-2px; left:80%; width:2px; background:rgba(0,51,102,.28); } /* ≈yellow line */
.set-wrap { display:inline-flex; align-items:center; gap:3px; font-size:12px; white-space:nowrap; }
.set-wrap.green  { color:var(--muted); }
.set-wrap.yellow { color:#7a5b00; font-weight:700; }
.set-wrap.red    { color:var(--red); font-weight:800; }
.set-wrap.na     { color:var(--muted); }
.flow-peak { font-size:10px; color:var(--muted); }

/* value: observed big, forecast muted */
.rib-val { text-align:right; line-height:1.05; }
.rib-val .kt { font-size:25px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.rib-val .kt.model, .rib-val .kt.na { color:var(--muted); }
.rib-val .unit { display:block; font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
.rib-val .fc { display:block; font-size:11px; color:var(--muted); font-style:italic; }

/* ribbon legend */
.ribbon-legend { margin-top:10px; font-size:13px; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }
.ribbon-legend .lg { display:inline-flex; align-items:center; gap:7px; }
.ribbon-legend .dot { width:14px; height:14px; box-shadow:none; border-width:2px; }
.ribbon-legend .lg-note { color:var(--muted); font-size:11px; }

/* ── support gauges ────────────────────────────────────── */
.sc-gauge { position:relative; width:104px; margin:4px auto 2px; }
.gauge { display:block; width:104px; height:60px; }
.gauge .g-bg  { fill:none; stroke:#e1eaf2; stroke-width:9; stroke-linecap:round; }
.gauge .g-val { fill:none; stroke:var(--lvl,#cbd6e0); stroke-width:9; stroke-linecap:round; transition:stroke-dasharray .45s ease; }
.sc-gauge .sc-val { position:absolute; left:0; right:0; bottom:-2px; text-align:center; font-size:26px; }
.sc-gauge .sc-val span { font-size:13px; }
.support-card { text-align:center; }
.support-card .sc-name { text-align:left; }
.support-card .sc-meta { text-align:left; }
.sc-compass { display:inline-flex; align-items:center; gap:4px; }
.sc-compass .arw { width:13px; height:13px; }

/* ── de-emphasized forecast outlook ────────────────────── */
.forecast-outlook { margin-top:8px; border-top:2px dashed #c4d6e6; background:#eef3f8; }
.fo-flag {
  padding:8px 22px; background:#e0eaf3; color:#56708a; border-top:2px dashed #c4d6e6;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
}
.forecast-outlook .disp-tablewrap h2,
.forecast-outlook .disp-gridwrap h2 { font-size:16px; color:var(--blue2); }
.fo-grid { margin-top:10px; }

/* Water level vs MHW — summary card + hourly table side by side */
.wl-section .wl-pair { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; }
.wl-section .clearance-card { flex:1 1 300px; min-width:280px; max-width:430px; margin:0; }
.wl-section .wl-scroll { flex:1 1 300px; min-width:260px; }

/* Water level vs MHW: above MHW (positive) = red, at/below = black */
.wl-above { color: var(--red); font-weight: 800; }
.wl-below { color: var(--ink); font-weight: 700; }
.cc-val.wl-above { color: var(--red); }
.cc-val.wl-below { color: var(--ink); }
.wl-table { max-width: 360px; }
.wl-table td { font-variant-numeric: tabular-nums; }
.wl-scroll { overflow-x: auto; }