:root {
  --bg: #030807; --panel: #051110; --panel-2: #081a17; --line: #12403a; --line-2: #1d6358;
  --text: #c4ffe9; --dim: #5f9c8b; --cyan: #00e5ff; --green: #39ff88; --amber: #ffc400; --red: #ff2a3d; --orange: #ff7a1a;
  --glow-c: 0 0 6px rgba(0,229,255,.55); --glow-r: 0 0 10px rgba(255,42,61,.8);
  --mono: "Share Tech Mono", ui-monospace, Consolas, monospace;
  --disp: "Orbitron", "Share Tech Mono", monospace;
  --panel-w: 360px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 15px/1.35 var(--mono); display: flex; flex-direction: column; overflow: hidden; }
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
a { color: var(--cyan); }

/* header: a strip of dashboard instruments */
.top { display: flex; align-items: stretch; padding: 8px 12px; background: #020605; border-bottom: 1px solid var(--line-2); box-shadow: 0 1px 12px rgba(0,229,255,.12); }
/* equal-width instruments across the whole strip; extras drop off as the screen narrows */
.instruments { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; width: 100%; }
.inst { position: relative; min-width: 0; height: 70px; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 8px 3px;
  background: linear-gradient(#030d0c, #020706); border: 1px solid var(--line-2); box-shadow: inset 0 0 12px rgba(0,229,255,.06);
  font: 10px/1.25 var(--mono); letter-spacing: .12em; color: var(--dim); text-align: left; }
/* bezel screws, like panel-mounted gauges */
.inst::before, .inst::after { content: ""; position: absolute; top: 3px; width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }
.inst::before { left: 3px; } .inst::after { right: 3px; }
.inst-lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; white-space: nowrap; padding: 0 3px; }
.inst-lbl em { font-style: normal; }
.inst-lbl b { font-weight: 400; font-size: 12px; color: var(--cyan); text-shadow: var(--glow-c); overflow: hidden; text-overflow: ellipsis; }
.inst-body { display: flex; align-items: center; gap: 6px; flex: 1; }
.live { color: var(--green); }
.live i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 4px; box-shadow: 0 0 6px var(--green); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }

.inst-wind svg { width: 48px; height: 48px; }
.gauge-txt { display: flex; flex-direction: column; line-height: 1.3; }
.gauge-txt b { color: var(--amber); font-weight: 400; font-size: 12px; text-shadow: 0 0 5px rgba(255,196,0,.5); }
.gauge-txt i { color: var(--text); font-style: normal; font-size: 12px; }

.inst-wind .inst-body { justify-content: center; }
.inst-big { font: 600 17px/1.1 var(--disp); color: var(--text); letter-spacing: .06em; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inst-big .x { color: var(--red); text-shadow: var(--glow-r); } .inst-big .a { color: var(--orange); } .inst-big .ok { color: var(--green); }
.inst-big .up { color: var(--amber); } .inst-big .dn { color: #ff9f43; }
.inst-sub { font-size: 10px; color: var(--dim); padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .06em; }
@media (max-width: 1400px) { .inst-sun { display: none !important; } }
@media (max-width: 1180px) { .inst-wxa { display: none !important; } }
@media (max-width: 980px) { .inst-roads { display: none !important; } }
.inst-tide svg { display: block; width: 100%; height: 30px; }
.tide-foot { display: flex; justify-content: space-between; font-size: 9px; }
.tide-foot span:nth-child(2) { color: var(--text); }

.inst-sea { cursor: pointer; }
.inst-sea:hover { border-color: var(--cyan); }
.inst-sea.alert { border-color: var(--orange); box-shadow: inset 0 0 12px rgba(255,122,26,.2), 0 0 8px rgba(255,122,26,.35); }
.inst-sea svg { display: block; width: 100%; height: 26px; }
.sea-row { display: flex; justify-content: space-between; color: var(--text); white-space: nowrap; font-size: 10px; }

.inst-clock .inst-body { justify-content: flex-end; }
.clock { font: 600 26px/1 var(--disp); color: var(--green); text-shadow: 0 0 8px rgba(57,255,136,.6); font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.sky { display: inline-block; width: 40px; height: 34px; }
.sky svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgba(0,229,255,.5)); }

/* region buttons: their own bar under the instruments */
.regions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; padding: 6px 12px; background: #020605; border-bottom: 1px solid var(--line); }
.regions button { background: transparent; border: 1px solid var(--line-2); color: var(--dim); padding: 5px 10px; cursor: pointer;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.regions button:hover { color: var(--text); border-color: var(--cyan); }
.regions button[aria-pressed="true"] { background: var(--cyan); color: #001417; border-color: var(--cyan); box-shadow: var(--glow-c); }
/* overview (full view) */
.overview:empty { display: none; }
.overview .list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.overview .rg { color: var(--cyan); letter-spacing: .08em; }
.overview .cnt { text-align: right; white-space: nowrap; }
.overview .cnt .x { color: var(--red); } .overview .cnt .a { color: var(--orange); } .overview .cnt .ok { color: var(--green); }
.overview .m { grid-column: 1 / -1; }
.rg-chip { display: grid; grid-template-columns: auto auto; gap: 0 6px; padding: 3px 6px; font-size: 11px !important; background: rgba(2,10,9,.88); border: 1px solid var(--cyan);
  box-shadow: 0 0 8px rgba(0,229,255,.25); font: 12px/1.2 var(--mono); color: var(--text); cursor: pointer; letter-spacing: .05em; white-space: nowrap; }
.rg-chip .nm { grid-column: 1 / -1; color: var(--cyan); font: 600 10px/1.2 var(--disp); letter-spacing: .15em; }
.rg-chip .t { color: var(--green); }
.rg-chip .c { color: var(--cyan); }
.rg-chip .k { grid-column: 1 / -1; font-size: 11px; }
.rg-chip .k .x { color: var(--red); } .rg-chip .k .a { color: var(--orange); } .rg-chip .k .ok { color: var(--green); }
.rg-chip.bad { border-color: var(--red); box-shadow: 0 0 10px rgba(255,42,61,.45); }
body.overview-mode .wx-mk:not(.rg-chip), body.overview-mode .town-dot, body.overview-mode .br-chip { display: none !important; }

/* labels on the water */
.bay-lbl { display: flex; flex-direction: column; align-items: center; font: 10px/1.3 var(--mono); letter-spacing: .15em; pointer-events: none; text-shadow: 0 0 4px #000; }
.bay-lbl b { font-weight: 400; color: #0bb3cc; }
.bay-lbl .eb, .bay-lbl .fl { color: #50e6be; }
.bar-lbl { font: 10px/1 var(--mono); letter-spacing: .12em; padding: 2px 5px; border: 1px dashed; background: rgba(2,8,7,.8); pointer-events: none; white-space: nowrap; }
.bar-lbl:empty { display: none; }
body.fx-off .bay-lbl, body.fx-off .bar-lbl, body.overview-mode .bay-lbl { display: none; }

/* radar / weather-effect toggles: the ✕ turns them off */
.tool.toggle .off { display: none; margin-left: 6px; color: var(--red); font-weight: 400; }
.tool.toggle.on .off { display: inline; }
.tool .stamp { color: var(--dim); font-size: 10px; }
canvas.fx { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

/* layout */
.layout { flex: 1; position: relative; display: grid; grid-template-columns: 1fr var(--panel-w); min-height: 0; }
.map-wrap { position: relative; min-height: 0; overflow: hidden; }
.map { position: absolute; inset: 0; background: var(--bg); }

/* HUD overlay: scanlines, grid, corner brackets */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(0,229,255,.035) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(0,229,255,.035) 1px, transparent 1px) 0 0 / 60px 60px,
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
.hud .c { position: absolute; width: 26px; height: 26px; border: 2px solid var(--cyan); opacity: .7; }
.hud .tl { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.hud .tr { right: 10px; top: 10px; border-left: 0; border-bottom: 0; }
.hud .bl { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.hud .br { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.readout { position: absolute; right: 44px; bottom: 16px; font-size: 11px; color: var(--dim); letter-spacing: .1em; }
.region-name { position: absolute; left: 44px; top: 14px; font: 600 13px/1 var(--disp); color: var(--cyan); letter-spacing: .2em; opacity: .85; }

.map-tools { position: absolute; left: 14px; top: 40px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.tool { background: rgba(3,12,11,.85); border: 1px solid var(--line-2); color: var(--text); padding: 7px 10px; cursor: pointer; letter-spacing: .08em; text-align: left; }
.tool.on { border-color: var(--cyan); color: var(--cyan); box-shadow: var(--glow-c); }

.legend { position: absolute; left: 44px; bottom: 14px; z-index: 2; display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; letter-spacing: .08em; color: var(--dim);
  background: rgba(2,8,7,.8); border: 1px solid var(--line); padding: 5px 10px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend .ln { display: inline-block; width: 18px; height: 4px; }
.legend .red { background: var(--red); box-shadow: var(--glow-r); }
.legend .yel { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.legend .grn { background: var(--green); opacity: .6; }
.legend .x { color: var(--red); text-shadow: var(--glow-r); font-size: 14px; }
.legend .br { color: var(--cyan); }
.legend .tri { color: var(--orange); text-shadow: 0 0 6px var(--orange); font-size: 14px; }
.legend .cm { color: var(--text); }

/* side panel: console */
.panel { background: var(--panel); border-left: 1px solid var(--line-2); overflow-y: auto; padding: 12px 14px 20px; }
.sheet-handle { display: none; }
.route-pick { display: block; margin-bottom: 10px; }
.label { display: block; font-size: 11px; color: var(--dim); letter-spacing: .14em; margin-bottom: 4px; }
select { width: 100%; padding: 7px 8px; border: 1px solid var(--line-2); background: #020807; color: var(--text); letter-spacing: .05em; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line-2); margin-bottom: 8px; }
.tabs button { flex: 1; background: none; border: 0; padding: 8px 2px; font-size: 12px; letter-spacing: .08em; color: var(--dim); border-bottom: 2px solid transparent; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--cyan); border-bottom-color: var(--cyan); text-shadow: var(--glow-c); }
.tabs b { display: inline-block; min-width: 16px; padding: 0 4px; background: var(--red); color: #fff; font-weight: 400; box-shadow: var(--glow-r); }
.tabs b:empty { display: none; }
.tab { display: none; }
.tab.on { display: block; }
h2 { font: 600 12px/1 var(--disp); letter-spacing: .18em; color: var(--cyan); margin: 14px 0 8px; }
h2:first-child { margin-top: 4px; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--line-2); background: var(--panel-2); margin-bottom: 5px; }
.list li.empty { color: var(--dim); border-style: dashed; background: none; }
.list .t { color: var(--text); }
.list .m { font-size: 12px; color: var(--dim); }
.list li.k-closure, .list li.sev-Extreme, .list li.sev-Severe { border-left-color: var(--red); }
.list li.k-collision { border-left-color: var(--orange); }
.list li.k-work, .list li.sev-Moderate { border-left-color: var(--amber); }
.list li.sev-Minor, .list li.sev-Unknown { border-left-color: var(--line-2); }
.list li.clickable { cursor: pointer; }
.list li.clickable:hover { border-color: var(--cyan); }
#roadList .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tag { font-size: 11px; letter-spacing: .08em; padding: 0 4px; border: 1px solid currentColor; margin-right: 4px; }
.tag.closure { color: var(--red); } .tag.collision { color: var(--orange); } .tag.work { color: var(--amber); } .tag.other { color: var(--dim); }
.wx li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wx .temp { font: 600 18px/1 var(--disp); color: var(--green); }
.fine { font-size: 11px; color: var(--dim); }
.pill { font-size: 11px; letter-spacing: .06em; padding: 0 5px; border: 1px solid var(--line-2); color: var(--dim); white-space: nowrap; }
.pill.bad { color: var(--red); border-color: var(--red); }
.pill.ok { color: var(--green); border-color: var(--green); }
details summary { cursor: pointer; }

/* markers */
.mk { cursor: pointer; }
.wx-mk { display: flex; align-items: center; gap: 5px; padding: 2px 6px; background: rgba(2,10,9,.82); border: 1px solid var(--line-2);
  font: 13px/1.2 var(--mono); color: var(--text); white-space: nowrap; letter-spacing: .04em; }
.wx-mk .v { color: var(--green); }
.wx-mk .e { color: var(--cyan); font-size: 11px; }
.wx-mk .n { color: var(--dim); font-size: 11px; text-transform: uppercase; }
.wx-mk.alerted { border-color: var(--amber); box-shadow: 0 0 8px rgba(255,196,0,.5); }
.wx-mk.alerted .n::after { content: " ⚠"; color: var(--amber); }
.rw-mk { border-style: dashed; font-size: 11px; }
.town-dot { width: 5px; height: 5px; background: var(--cyan); box-shadow: 0 0 4px var(--cyan); }
.inc-mk.group { width: 34px; height: 32px; }

.x-mk { width: 40px; height: 40px; cursor: pointer; filter: drop-shadow(0 0 6px var(--red)); animation: pulse 1.8s ease-in-out infinite; }
.x-mk svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes pulse { 50% { filter: drop-shadow(0 0 16px var(--red)) brightness(1.3); } }
.inc-mk { width: 28px; height: 26px; cursor: pointer; filter: drop-shadow(0 0 5px rgba(255,122,26,.8)); }
.inc-mk svg { display: block; width: 100%; height: 100%; overflow: visible; }
.inc-mk.work { animation: workpulse 1.8s ease-in-out infinite; }
@keyframes workpulse { 50% { opacity: .35; } }
.br-mk { color: var(--cyan); font-size: 18px; text-shadow: var(--glow-c); cursor: pointer; line-height: 1; }
.br-mk.shut { color: var(--red); text-shadow: var(--glow-r); }
.br-chip .v { color: var(--cyan); }
.br-chip.shut { border-color: var(--red); } .br-chip.shut .v { color: var(--red); }
.cam-mk { width: 16px; height: 16px; border: 2px solid var(--text); border-radius: 50%; background: rgba(0,0,0,.6); box-shadow: 0 0 5px rgba(196,255,233,.5); cursor: pointer; }
.cam-mk::after { content: ""; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--text); }

.me { width: 64px; height: 64px; pointer-events: none; }
.me .cone { position: absolute; inset: 0; transition: transform .25s linear; }
.me .dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,229,255,.3), 0 0 12px var(--cyan); transform: rotate(45deg); }

/* popups */
.maplibregl-popup-content { background: #020a09; color: var(--text); border: 1px solid var(--cyan); border-radius: 0; box-shadow: var(--glow-c);
  font: 13px/1.4 var(--mono); padding: 10px 12px; max-width: 320px; }
.maplibregl-popup-content h3 { font: 600 12px/1.3 var(--disp); letter-spacing: .1em; color: var(--cyan); margin: 0 0 6px; }
.maplibregl-popup-content .m { color: var(--dim); font-size: 12px; }
.maplibregl-popup-close-button { color: var(--cyan); font-size: 18px; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--cyan); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--cyan); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--cyan); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--cyan); }
.maplibregl-ctrl-group { background: #020a09; border: 1px solid var(--line-2); border-radius: 0; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line-2); }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) sepia(1) hue-rotate(120deg) saturate(3); }
.maplibregl-ctrl-scale { background: rgba(2,8,7,.7); color: var(--dim); border-color: var(--dim); font: 10px var(--mono); }
.maplibregl-ctrl-attrib { background: rgba(2,8,7,.7) !important; color: var(--dim); font: 10px var(--mono); }
.maplibregl-ctrl-attrib a { color: var(--dim); }
.maplibregl-ctrl-top-right { top: 36px; right: 8px; }

.cam img { display: block; width: 100%; min-height: 120px; background: #000; border: 1px solid var(--line-2); margin: 6px 0 4px; filter: saturate(.8) contrast(1.05); }
.cam button, .cam-show { font: 12px/1 var(--mono); letter-spacing: .06em; padding: 5px 8px; border: 1px solid var(--line-2); background: #020807; color: var(--cyan); cursor: pointer; }
.cam-show { margin-top: 6px; }

/* TV: fixed, glanceable, nothing to press */
body.tv { font-size: 18px; --panel-w: 460px; }
body.tv .inst { height: 84px; } body.tv .inst-clock .clock { font-size: 40px; } body.tv .inst-big { font-size: 22px; }
body.tv .inst-extra { display: flex !important; } /* the TV always gets the full strip */
body.tv .clock { font-size: 40px; }
body.tv .map-tools, body.tv .tabs, body.tv .route-pick { display: none; }
body.tv .tab { display: block; }
body.tv #tab-weather { display: none; }
body.tv .wx-mk { font-size: 16px; }
body.tv .wx-mk .n { font-size: 13px; }
body.tv .legend { font-size: 14px; }
body.tv .list .m { font-size: 14px; }

/* phone: map fills the screen, details in a bottom sheet */
@media (max-width: 760px) {
  .top { padding: 6px 8px; }
  /* phones: a 2×2 block of the four core instruments */
  .instruments { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 5px; }
  .inst-extra { display: none !important; }
  .inst { height: 56px; padding: 3px 6px; }
  .inst-wind svg { width: 34px; height: 34px; }
  .inst-lbl em { display: none; }
  .inst-lbl { gap: 4px; }
  .inst-tide svg { height: 22px; }
  .tide-foot span:first-child, .tide-foot span:last-child { display: none; }
  .tide-foot { justify-content: center; }
  .sea-row span:last-child { display: none; }
  .inst-clock .clock { font-size: 18px; }
  .sky { width: 28px; height: 26px; }
  .regions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 5px 8px; }
  .regions button { flex: none; font-size: 12px; padding: 6px 9px; }
  .layout { display: block; }
  .map-wrap { position: absolute; inset: 0; }
  .panel { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; border-left: 0; border-top: 1px solid var(--cyan); box-shadow: 0 -4px 16px rgba(0,229,255,.15);
    padding: 4px 14px calc(16px + env(safe-area-inset-bottom)); transition: height .2s ease; z-index: 3; }
  .panel.min { height: 112px; overflow: hidden; }
  .panel.max { height: 82%; }
  .sheet-handle { display: block; width: 100%; height: 18px; border: 0; background: none; cursor: pointer; position: relative; }
  .sheet-handle::after { content: ""; position: absolute; left: 50%; top: 7px; width: 44px; height: 3px; margin-left: -22px; background: var(--cyan); box-shadow: var(--glow-c); }
  .legend, .readout { display: none; }
  /* map buttons: a row of round icons along the bottom of the map, riding just above the sheet */
  .map-tools { top: auto; left: 50%; transform: translateX(-50%); bottom: calc(42% + 10px); flex-direction: row; gap: 12px; z-index: 4; transition: bottom .2s ease; }
  .layout:has(.panel.min) .map-tools { bottom: 124px; }
  .layout:has(.panel.max) .map-tools { display: none; }
  .tool { position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 18px;
    background: rgba(2,8,7,.7); border: 1px solid rgba(0,229,255,.3); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .tool.on { background: rgba(0,229,255,.15); }
  .tool span, .tool .stamp { display: none; }
  .tool.toggle.on .off { position: absolute; top: -3px; right: -3px; width: 16px; height: 16px; margin: 0; display: grid; place-items: center;
    font-size: 10px; border-radius: 50%; background: #020807; border: 1px solid var(--red); }
  .hud .bl, .hud .br { display: none; }
}