:root {
  --bg: #03060b;
  --glass: rgba(12, 18, 26, 0.72);
  --line: rgba(160, 190, 220, 0.16);
  --text: #e6edf5;
  --muted: #8d9bab;
  --accent: #5cc8ff;
  --obs: #7ee0a8;
  --fc: #ffc46b;
  --high: #ff9f6b;
  --low: #7fb2ff;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); }
#globe { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#globe:active { cursor: grabbing; }

.panel {
  position: fixed; z-index: 2;
  background: var(--glass); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}

.top { top: 16px; left: 16px; display: flex; gap: 20px; align-items: center; padding: 10px 16px; }
.brand { font-weight: 650; letter-spacing: 0.02em; font-size: 15px; }
.brand span { color: var(--accent); }
.when #clock { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 16px; }
.when .sub { color: var(--muted); font-size: 12px; }
#source[data-kind="obs"] { color: var(--obs); }
#source[data-kind="fc"] { color: var(--fc); }

.layers { top: 16px; right: 16px; padding: 10px; display: flex; flex-direction: column; gap: 6px; width: 172px; }
.layers button {
  text-align: left; font: inherit; color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
.layers button[aria-pressed="true"] { color: var(--text); border-color: rgba(92, 200, 255, 0.55); background: rgba(92, 200, 255, 0.1); }
.field { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; gap: 8px; }
select {
  font: inherit; color: var(--text); background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px;
}
select option { background: #0e151d; }
.run { color: var(--muted); font-size: 11px; margin-top: 4px; }

.timeline {
  left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(1100px, calc(100% - 32px));
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 22px;
}
.play {
  width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid rgba(92, 200, 255, 0.5);
  background: rgba(92, 200, 255, 0.14); color: var(--text); font-size: 14px; cursor: pointer;
}
.chip {
  font: inherit; font-size: 12px; color: var(--text); background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; cursor: pointer;
}
.track { position: relative; flex: 1; height: 24px; }
.past-band { position: absolute; left: 0; top: 9px; height: 6px; border-radius: 3px; background: rgba(126, 224, 168, 0.28); pointer-events: none; }
.track input[type="range"] { position: absolute; inset: 0; width: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; }
.track input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: rgba(255, 196, 107, 0.22); }
.track input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(92, 200, 255, 0.45); }
.track input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 196, 107, 0.22); }
.track input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: none; }
.ticks { position: absolute; left: 0; right: 0; top: 24px; height: 14px; pointer-events: none; }
.tick { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--muted); white-space: nowrap; }
.tick::before { content: ""; position: absolute; left: 50%; top: -12px; width: 1px; height: 6px; background: var(--line); }
.tick.now::before { top: -16px; height: 14px; width: 2px; background: var(--obs); }
.loading { color: var(--muted); font-size: 12px; }

#labels { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.hl { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; line-height: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); }
.hl b { font-size: 22px; font-weight: 800; }
.hl span { font-size: 10px; font-weight: 600; margin-top: 1px; color: var(--text); }
.hl.high b { color: var(--high); }
.hl.low b { color: var(--low); }

.status {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  background: var(--glass); border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px;
}
.status.error { color: #ffb4a8; }
.status[hidden] { display: none; }

@media (max-width: 700px) {
  .top { left: 16px; right: 16px; }
  .layers { top: auto; bottom: 96px; width: auto; left: 16px; right: 16px; flex-direction: row; flex-wrap: wrap; }
}

.chart-opts { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 6px; padding: 6px 8px; border-left: 2px solid var(--accent); }
.chart-opts[hidden] { display: none; }
.chart-opts input[type=range] { width: 96px; accent-color: var(--accent); }
.chart-opts small { color: var(--muted); font-size: 11px; }
.field.slider { flex-direction: column; align-items: stretch; gap: 2px; }
.field.slider input { width: 100%; accent-color: var(--accent); }
.layers .action, .ground-hud .action {
  text-align: center; color: var(--text); border-color: rgba(92, 200, 255, 0.55); background: rgba(92, 200, 255, 0.16);
}
.ground-hud {
  top: 84px; left: 16px; display: flex; flex-direction: column; gap: 8px; padding: 12px; width: 220px;
}
.ground-hud[hidden] { display: none; }
.ground-hud .action { font: inherit; border: 1px solid; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.compass {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center;
  font-weight: 700; font-size: 12px; color: var(--fc); position: relative;
}
.ground-info #facing { font-weight: 600; }
.ground-info .sub { color: var(--muted); font-size: 12px; }
.hint {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 2;
  color: var(--muted); font-size: 12px; background: var(--glass); padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); transition: opacity 0.6s; pointer-events: none;
}
.hint.gone { opacity: 0; }

.keys { color: var(--muted); font-size: 11px; line-height: 1.5; }
.keys b { color: var(--text); font-weight: 600; }

.lightning-src { position: fixed; left: 16px; bottom: 100px; z-index: 2; color: #cfd8ff; font-size: 12px; text-shadow: 0 1px 4px #000; }
.ground-hud { width: 250px; }

.layers { max-height: calc(100vh - 140px); overflow-y: auto; }

.front-legend { position: fixed; left: 16px; bottom: 120px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px 12px;
  max-width: 260px; font-size: 11px; color: var(--muted); background: var(--glass); border: 1px solid var(--line);
  border-radius: 10px; padding: 6px 10px; }
.front-legend[hidden] { display: none; }
.front-legend span { display: inline-flex; align-items: center; gap: 5px; }
.fl { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.fl.cold { background: #4088ff; } .fl.warm { background: #ff4d40; }
.fl.stat { background: linear-gradient(90deg, #ff4d40 50%, #4088ff 50%); }
.fl.trough { background: repeating-linear-gradient(90deg, #ffa626 0 5px, transparent 5px 8px); }
.fl.squall { background: repeating-linear-gradient(90deg, #f040d9 0 6px, transparent 6px 8px, #f040d9 8px 9px, transparent 9px 11px); }

/* Google 3D tiles: key prompt and the required attribution */
.gkey { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 4px; font-size: 12px; }
.gkey[hidden] { display: none; }
.gkey input { background: rgba(0, 0, 0, 0.35); color: inherit; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 6px 8px; font: inherit; min-width: 0; }
.gkey small { opacity: 0.7; line-height: 1.3; }
.tiles-credit { position: fixed; left: 16px; bottom: 98px; z-index: 2; font-size: 11px; color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); max-width: min(60vw, 520px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiles-credit[hidden] { display: none; }
.osm-credit { position: fixed; right: 16px; bottom: 98px; z-index: 3; font-size: 11px; padding: 1px 6px; border-radius: 3px;
  background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.9); }
.osm-credit a { color: inherit; text-decoration: none; }
.osm-credit a:hover { text-decoration: underline; }
.osm-credit[hidden] { display: none; }

/* Tides and currents: HUD line and station markers */
.tide-info { font-size: 12px; line-height: 1.4; padding: 6px 0 2px; }
.tide-info[hidden] { display: none; }
.tide-info .sub { opacity: 0.65; font-size: 11px; cursor: help; }
.tm { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 3px; font: 600 11px/1 system-ui, sans-serif;
  color: #dff4ff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); white-space: nowrap; pointer-events: auto; }
.tm i { font-style: normal; display: inline-block; }
.tm.tide i { color: #7fd3ff; font-size: 9px; }
.tm.cur i { color: #ffd166; font-size: 13px; }
.tm.cur.slack i { color: #9aa; }

/* Forecast verification markers */
.vm { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 4px; font: 600 11px/1 system-ui, sans-serif; color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; white-space: nowrap; pointer-events: auto; cursor: help; }
.vm i { font-style: normal; width: 10px; height: 10px; border-radius: 50%; display: inline-block; font-size: 0; box-shadow: 0 0 0 1px #0008; }

/* ---------------------------------------------------------------- phones and tablets (iOS Safari)
   Same layout everywhere above; this adds safe-area insets, touch sizing and, on narrow or short
   screens, a bottom sheet (portrait) / right drawer (landscape) for the layer panel and a
   collapsible navigation HUD. The breakpoint is mirrored in js/mobile.js. */
html, body { overscroll-behavior: none; }
body { position: fixed; inset: 0; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
#globe, .panel, .fab, .movepad { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#globe { touch-action: none; }
button, select, input, a { touch-action: manipulation; }
.fab, .touch-only, .hud-toggle { display: none; }
.movepad[hidden] { display: none !important; }
.hud-row { display: flex; align-items: center; gap: 10px; }
.hud-row .ground-info { flex: 1; min-width: 0; }

/* Coarse pointers (touch): no hover-only cues, 44 px targets. */
@media (pointer: coarse) {
  .touch-only { display: block; }
  .desktop-only { display: none; }
  #globe, #globe:active { cursor: default; }
  .layers button, .ground-hud .action, .chip, select, .gkey input { min-height: 44px; }
  .layers button { padding: 8px 12px; }
  .chip { padding: 8px 14px; }
  .play { width: 44px; height: 44px; font-size: 16px; }
  .track { height: 44px; }
  .past-band { top: 19px; }
  .track input[type="range"]::-webkit-slider-runnable-track { height: 6px; }
  .track input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
  .ticks { top: 38px; }
  .field.slider input { min-height: 44px; }
  .movepad { position: fixed; z-index: 4; right: calc(env(safe-area-inset-right) + 12px);
    bottom: calc(env(safe-area-inset-bottom) + 110px); display: grid; grid-template-columns: 56px 56px; gap: 8px; }
  .movepad button { width: 56px; height: 56px; border-radius: 14px; font: 600 15px system-ui, sans-serif; color: var(--text);
    background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .movepad button:active { background: rgba(92, 200, 255, 0.3); }
}

/* Narrow (phone portrait) or short (phone landscape) screens: drawers. */
@media (max-width: 820px), (max-height: 500px) {
  :root { font-size: 13px; }
  .top { top: calc(env(safe-area-inset-top) + 8px); left: calc(env(safe-area-inset-left) + 8px); right: auto;
    gap: 10px; padding: 6px 12px; max-width: calc(100vw - 120px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  .brand { font-size: 14px; }
  .when #clock { font-size: 13px; }
  .when .sub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .fab { display: flex; align-items: center; justify-content: center; position: fixed; z-index: 7;
    top: calc(env(safe-area-inset-top) + 8px); right: calc(env(safe-area-inset-right) + 8px);
    min-width: 88px; min-height: 44px; padding: 0 16px; border-radius: 22px; font: 600 14px system-ui, sans-serif;
    color: var(--text); background: var(--glass); border: 1px solid rgba(92, 200, 255, 0.5);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  .fab[aria-expanded="true"] { background: rgba(92, 200, 255, 0.22); }

  /* Layer panel: bottom sheet, two columns, hidden until the Layers button opens it. */
  .layers { z-index: 6; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 72vh; max-height: 72dvh;
    display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 8px;
    padding: 14px calc(env(safe-area-inset-right) + 12px) calc(env(safe-area-inset-bottom) + 14px) calc(env(safe-area-inset-left) + 12px);
    border-radius: 18px 18px 0 0; border-bottom: none; overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; transform: translateY(105%); visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s; }
  .layers.open { transform: none; visibility: visible; transition: transform 0.25s ease; }
  .layers .field, .layers .gkey, .layers .run, .layers .action { grid-column: 1 / -1; }
  .layers .field { min-height: 44px; font-size: 13px; }
  .layers button { min-height: 44px; }

  /* Navigation HUD (surface / flight): compact card, details behind More. */
  .ground-hud { top: calc(env(safe-area-inset-top) + 64px); left: calc(env(safe-area-inset-left) + 8px);
    width: min(300px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-height: calc(100vh - 200px); overflow-y: auto; overscroll-behavior: contain; padding: 8px 10px; gap: 6px; }
  .hud-toggle { display: inline-flex; align-items: center; min-height: 44px; }
  .ground-hud.collapsed > :not(.hud-row):not(#back) { display: none; }
  .compass { width: 40px; height: 40px; flex: none; }

  .timeline { left: calc(env(safe-area-inset-left) + 8px); right: calc(env(safe-area-inset-right) + 8px);
    bottom: calc(env(safe-area-inset-bottom) + 8px); transform: none; width: auto; gap: 8px; padding: 4px 10px 18px; }
  .tick { font-size: 9px; }
  #speed { max-width: 76px; }
  .hint { bottom: calc(env(safe-area-inset-bottom) + 84px); max-width: calc(100vw - 32px); text-align: center; white-space: normal; }
  .lightning-src { left: calc(env(safe-area-inset-left) + 10px); bottom: calc(env(safe-area-inset-bottom) + 84px); font-size: 11px; }
  .front-legend { left: calc(env(safe-area-inset-left) + 8px); bottom: calc(env(safe-area-inset-bottom) + 84px);
    max-width: min(300px, 70vw); font-size: 10px; padding: 3px 8px; gap: 2px 8px; }
  .lightning-src:not(:empty) ~ .front-legend { bottom: calc(env(safe-area-inset-bottom) + 104px); }
  .tiles-credit { left: calc(env(safe-area-inset-left) + 8px); bottom: calc(env(safe-area-inset-bottom) + 84px); }
  .osm-credit { right: calc(env(safe-area-inset-right) + 8px); bottom: calc(env(safe-area-inset-bottom) + 84px); }
  #coast-src { left: calc(env(safe-area-inset-left) + 8px) !important; bottom: calc(env(safe-area-inset-bottom) + 140px) !important; }
}

/* Phone landscape: the layer panel becomes a right-hand drawer; the timeline gets slimmer. */
@media (max-height: 500px) {
  .layers { top: 0; bottom: 0; left: auto; width: min(340px, 48vw); max-height: none; border-radius: 18px 0 0 18px;
    padding-top: calc(env(safe-area-inset-top) + 60px); transform: translateX(105%); grid-template-columns: 1fr 1fr; }
  .ground-hud { top: calc(env(safe-area-inset-top) + 56px); max-height: calc(100vh - 150px); }
  .timeline { left: 50%; right: auto; transform: translateX(-50%); width: min(700px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right))); padding-bottom: 16px; }
  .front-legend { display: none; }
  #coast-src { bottom: calc(env(safe-area-inset-bottom) + 84px) !important; }
}
/* Phone: radar toggle (inline-styled at left:350px by radar_ui.js) moves under the Layers button; day labels thin out. */
@media (max-width: 820px), (max-height: 500px) {
  button[data-layer="radar"] { left: auto !important; right: calc(env(safe-area-inset-right) + 8px) !important;
    top: calc(env(safe-area-inset-top) + 60px) !important; min-height: 44px; min-width: 88px; border-radius: 22px !important; font-size: 14px !important; }
}
@media (max-width: 520px) {
  .tick:not(.now) { font-size: 0; }
  .tick:not(.now):nth-child(3n+1) { font-size: 9px; }
}

/* Hurricanes & storms details */
.storm-panel { position: fixed; left: 16px; top: 120px; z-index: 4; width: min(420px, calc(100vw - 32px)); max-height: 60vh; overflow: auto; padding: 10px 12px; font-size: 12px; }
.storm-panel[hidden] { display: none; }
.storm-panel .sp-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.storm-panel .sp-close { background: none; border: 0; color: inherit; font-size: 18px; cursor: pointer; }
.storm-panel .sp-sub, .storm-panel .sp-note { color: var(--muted); margin: 4px 0; }
.storm-panel .sp-now { margin: 6px 0; }
.storm-panel .sp-table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.storm-panel .sp-table th, .storm-panel .sp-table td { text-align: left; padding: 2px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.storm-panel a { color: var(--accent); }

/* Multi-model wind strip, docked above the timeline */
.wind-table { position: fixed; z-index: 4; height: 66px; padding: 0; font-size: 11px; overflow: visible; }
.wind-table[hidden] { display: none; }
.wind-table .ws-head { display: flex; align-items: center; gap: 8px; height: 18px; padding: 2px 10px 0; color: var(--muted); }
.wind-table .ws-head b { color: var(--text); }
.wind-table .ws-legend { margin-left: auto; font-size: 10px; opacity: .8; }
.wind-table .ws-close { background: none; border: 0; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }
.wind-table .ws-note { padding: 4px 10px; color: var(--muted); font-size: 11px; }
.wind-table .ws-cols { position: relative; height: 46px; }
.wind-table .ws-col { position: absolute; top: 0; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; cursor: pointer; border-radius: 3px; }
.wind-table .ws-col:hover { background: rgba(255,255,255,.07); }
.wind-table .ws-col.now { box-shadow: inset 0 0 0 1px rgba(92,200,255,.8); }
.wind-table .ws-col.day { border-left: 1px solid rgba(255,255,255,.12); }
.wind-table .ws-arrow { font-weight: 700; font-size: 12px; line-height: 13px; }
.wind-table .ws-avg { min-width: 18px; text-align: center; border-radius: 3px; color: #0b0f14; font-weight: 700; line-height: 14px; padding: 0 2px; }
.wind-table .ws-gust { color: var(--muted); font-size: 9.5px; line-height: 12px; white-space: nowrap; }
.wind-table .ws-pop { position: absolute; bottom: 70px; width: 280px; padding: 6px 8px; font-size: 11px; background: rgba(16,22,32,.97); border: 1px solid var(--line); border-radius: 6px; }
.wind-table .ws-models span { display: inline-block; margin: 2px 8px 0 0; color: var(--muted); }
.wind-table .ws-models b { color: var(--text); font-weight: 600; }
.wt-mark { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border: 2px solid #ffd34d; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.6); pointer-events: none; }
.wt-mark[hidden] { display: none; }
.storm-panel .ip-list { margin: 6px 0; padding-left: 16px; }
.storm-panel .ip-list li { margin: 3px 0; }
.storm-panel .ip-list small { color: var(--muted); }
/* the wind strip sits above the timeline: lift what normally lives there */
body.ws-open .front-legend { bottom: 192px; }
body.ws-open .osm-credit { bottom: 170px; }
body.ws-open #coast-src { bottom: 168px !important; }

/* Quiet workspace: controls are tucked away on every screen size. */
.layers-fab { display: flex; position: fixed; z-index: 7; top: 16px; right: 16px;
  align-items: center; justify-content: center; min-height: 42px; padding: 0 18px;
  border-radius: 24px; background: var(--glass); color: var(--text); border: 1px solid #547084; }
.brightness-control { position: fixed; z-index: 5; top: 16px; right: 126px;
  min-height: 42px; padding: 0 14px; border-radius: 24px; background: var(--glass);
  color: var(--text); border: 1px solid #547084; cursor: pointer; }
.brightness-control[aria-pressed="true"] { color: #ffe4a0; border-color: #dfbd6b; background: #30291fe8; }
.layers { display: none; }
.layers.open { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.layers.open > * { flex-shrink: 0; }
.drawer-title { font-size: 18px; padding: 8px 2px 12px; }
.layer-group { border-top: 1px solid #ffffff20; padding: 10px 0; width: 100%; }
.layer-group summary { cursor: pointer; color: var(--text); padding: 5px 0; }
.layer-group[open] > button { display: block; width: 100%; margin-top: 6px; text-align: left; }
.layer-group .field { margin-top: 8px; }
@media (min-width: 821px) and (min-height: 501px) {
  .layers { top: 70px; width: 264px; max-height: calc(100dvh - 180px); z-index: 6; }
}
@media (max-width: 820px), (max-height: 500px) {
  .brightness-control { top: calc(env(safe-area-inset-top) + 60px); right: calc(env(safe-area-inset-right) + 8px); font-size: 12px; }
  .layers-fab { top: calc(env(safe-area-inset-top) + 8px); right: calc(env(safe-area-inset-right) + 8px); }
}

.news-panel { position: fixed; z-index: 8; top: 76px; right: 16px; width: min(410px, calc(100vw - 32px));
  max-height: calc(100dvh - 180px); padding: 16px; overflow-y: auto; }
.news-panel[hidden] { display: none; }
.news-body h3 { font-size: 14px; margin-bottom: 4px; }
.news-body section { border-top: 1px solid #ffffff20; margin-top: 16px; }
.news-body a { color: #a5d9f5; line-height: 1.5; }
.news-body small { color: #a1adbb; }

.layers button[data-layer="radar"] { position: static !important; min-width: 0; border-radius: 8px !important;
  font: inherit !important; color: var(--text) !important; }
.radar-panel { left: 16px !important; top: 110px !important; max-width: calc(100vw - 32px); }
@media (max-width: 820px) { .brand { white-space: nowrap; } }

#vessel-overlay { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:3; }
#marine-status { position:fixed; left:16px; bottom:116px; z-index:4; font-size:11px; padding:5px 9px;
  border-radius:7px; background:#0c1725d9; color:#e8c28c; pointer-events:none; }
#marine-status[data-state="live"] { color:#9ee9d4; }
#terrain-credit { position:fixed; left:16px; bottom:98px; z-index:4; color:#adbfcd; font-size:10px;
  background:#0b1722b8; padding:1px 4px; pointer-events:none; }
.vessel-panel { left:16px; top:100px; z-index:9; width:min(360px,calc(100vw - 32px)); padding:14px; max-height:calc(100dvh - 240px); overflow:auto; }
.vessel-panel[hidden] { display:none; }
.vessel-detail { display:flex; justify-content:space-between; gap:12px; margin:9px 0; font-size:12px; }
.vessel-detail span { color:var(--muted); } .vessel-detail strong { text-align:right; font-weight:500; }
.vessel-actions { display:flex; gap:8px; margin-top:14px; }
.follow-ship[aria-pressed="true"] { color:#8ce6d4; border-color:#5dbda9; }
#coast-src { bottom:140px !important; }
@media (max-width:820px), (max-height:500px) {
  #marine-status { left:8px; bottom:112px; max-width:calc(100vw - 16px); }
  #terrain-credit { left:8px; bottom:96px; max-width:calc(100vw - 16px); font-size:9px; }
  .vessel-panel { top:115px; left:8px; }
}

.vessel-selected #ground-hud { display:none; }

#marks-overlay{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}#marks-credit{position:fixed;top:84px;right:14px;text-align:right;z-index:3;font:10px system-ui;color:#b9ced0;max-width:80vw}#marks-credit a{color:inherit}.mark-panel{position:fixed;right:16px;top:110px;width:min(340px,calc(100vw - 32px));max-height:70vh;overflow:auto;z-index:35;padding:16px}.mark-panel[hidden]{display:none}.mark-panel a{color:#8bddd6}

.fleet-fab{right:235px;top:17px;width:auto;padding:0 18px;border-radius:24px}.fleet-panel{position:fixed;right:16px;top:110px;width:min(360px,calc(100vw - 32px));max-height:70vh;overflow:auto;padding:18px;z-index:38}.fleet-panel[hidden]{display:none}.fleet-search-label{display:grid;gap:8px;margin:16px 0;font-size:12px}.fleet-search-label input{box-sizing:border-box;width:100%;border:1px solid #4b6575;border-radius:12px;background:#10212b;color:#eefaff;padding:12px;font:14px system-ui}.fleet-tabs{display:flex;gap:8px}.fleet-tabs button{flex:1}.fleet-tabs button[aria-pressed=true]{background:#24545b}.fleet-row{display:flex;gap:10px;border-bottom:1px solid #ffffff14;padding:7px 0}.fleet-ship{flex:1;text-align:left;white-space:pre-line;border:0;background:transparent;line-height:1.7}.fleet-star{color:#ffce66;font-size:23px;border:0;background:transparent;min-width:40px}.fleet-results{font-size:13px}.fleet-panel button{cursor:pointer}@media(max-width:600px){.fleet-fab{top:78px;right:14px;font-size:11px;padding:0 13px}.fleet-panel{top:125px}#marks-credit{top:122px}}

#watch-overlay{position:fixed;inset:0;pointer-events:none;z-index:4;width:100%;height:100%}.watch-detail{position:fixed;right:16px;top:110px;width:min(340px,calc(100vw - 32px));max-height:65vh;overflow:auto;padding:18px;z-index:39;font-size:12px}.watch-detail[hidden]{display:none}.watch-detail a,.watch-races a{color:#7fddd2}.news-tabs{display:flex;gap:8px;margin:12px 0}.news-tabs button{flex:1}.watch-races section{border-bottom:1px solid #ffffff20;padding:12px 0}.watch-races input{max-width:100%}

.fleet-fab{display:flex;align-items:center;justify-content:center;position:fixed;z-index:9;height:42px;background:rgba(12,25,36,.87);color:#e6edf5;border:1px solid #536a7a;font:600 12px system-ui;cursor:pointer}.news-panel{z-index:36}.watch-detail p{line-height:1.5}.watch-detail a{display:block;padding:8px 0}


@media(max-width:820px){.fleet-fab{top:calc(env(safe-area-inset-top) + 108px);right:8px;height:36px}#marks-credit{top:150px;font-size:9px}}

.fleet-panel .sp-head,.watch-detail .sp-head,.mark-panel .sp-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.fleet-panel button,.watch-detail button,.mark-panel button,.news-tabs button,.watch-races button{font:inherit;color:var(--text);border:1px solid #ffffff25;border-radius:9px;background:#18313f;padding:8px 11px;cursor:pointer}.fleet-panel .fleet-ship{background:transparent;border:0;color:#e7f3f5;padding:8px 0}.fleet-panel .fleet-star{background:transparent;border:0;color:#ffce66;font-size:23px}.fleet-tabs button[aria-pressed=true],.news-tabs button[aria-pressed=true]{background:#295965;border-color:#73d4cd}.news-body small{display:block;color:#b3c4cb;margin-top:4px}.watch-races input{display:block;margin:10px 0}

.conditions-panel{position:fixed;right:16px;top:80px;width:min(410px,calc(100vw - 32px));max-height:calc(100dvh - 180px);overflow:auto;z-index:40;padding:18px}.conditions-panel[hidden]{display:none}.conditions-panel .sp-head{display:flex;align-items:center;justify-content:space-between}.conditions-panel section{border-top:1px solid #ffffff20;margin-top:12px;padding-top:8px}.conditions-panel h3{margin:8px 0}.conditions-panel p{font-size:12px;line-height:1.5}.condition-tide p,.condition-aurora p{display:flex;justify-content:space-between;gap:15px;margin:9px 0}.conditions-panel p span{color:#9eb4c0}.conditions-panel p strong{text-align:right;max-width:68%;font-weight:500}.conditions-panel button{padding:8px 10px;border:1px solid #73939f55;border-radius:8px;background:#173340;color:#e4f4f6;font:inherit;font-size:12px;cursor:pointer}.conditions-panel button:disabled{opacity:.4;cursor:default}.condition-actions{display:flex;gap:8px;flex-wrap:wrap}.tide-curve{display:block;width:100%;height:100px;border-radius:9px;cursor:crosshair;margin:12px 0}.kp-outlook{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.kp-outlook button{font-size:10px}.conditions-panel a{color:#74d8ce}.condition-drying{color:#dbc18f}@media(max-width:600px){.conditions-panel{top:72px;max-height:calc(100dvh - 170px)}}