:root {
  --bg: #04121a;
  --panel: #081e2a;
  --panel-2: #0b2735;
  --border: rgba(164, 219, 235, 0.15);
  --text: #e7f6fa;
  --muted: #8fb3c0;
  --accent: #35d4dd;
  --accent-2: #ffcf5c;
  --danger: #ff6b6b;
  --ok: #55d68b;
  --shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}
button, input { font: inherit; }
button { color: inherit; }

.topbar {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: linear-gradient(90deg, #061923, #092b38 55%, #071923);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1000;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 300px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: #021116; font-weight: 900; letter-spacing: -1px;
  background: radial-gradient(circle at 35% 30%, #bdfbff, #35d4dd 55%, #0a8ca0);
  border: 2px solid rgba(255,255,255,.7);
  box-shadow: 0 0 20px rgba(53,212,221,.28);
}
.brand h1 { font-size: 18px; line-height: 1.1; margin: 0; letter-spacing: .02em; }
.brand p { margin: 4px 0 0; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.status-strip { display: flex; align-items: center; gap: 8px; overflow-x: auto; }
.status-item {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.045);
  border: 1px solid var(--border); font-size: 12px;
}
.status-item strong { color: #fff; font-size: 11px; letter-spacing: .08em; }
.status-item span:last-child { color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #f4c95d; box-shadow: 0 0 8px currentColor; }
.dot.live { background: var(--ok); }
.dot.error { background: var(--danger); }
.dot.demo { background: var(--accent-2); }

.app-shell { height: calc(100vh - 72px); display: grid; grid-template-columns: 275px minmax(360px, 1fr) 330px; }
.sidebar { background: var(--panel); overflow-y: auto; scrollbar-width: thin; border-color: var(--border); }
.left-panel { border-right: 1px solid var(--border); }
.right-panel { border-left: 1px solid var(--border); }
.panel-section { padding: 18px; border-bottom: 1px solid var(--border); }
.panel-section h2 { margin: 0 0 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: #c9edf3; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-heading h2 { margin-bottom: 14px; }
.tag { padding: 4px 7px; border: 1px solid var(--border); color: var(--accent); border-radius: 999px; font-size: 9px; letter-spacing: .12em; }

.layer-row { display: grid; grid-template-columns: 18px 16px 1fr auto; align-items: center; gap: 9px; padding: 9px 0; color: #d8edf2; font-size: 13px; cursor: pointer; }
.layer-row input { accent-color: var(--accent); width: 16px; height: 16px; }
.always-on-row { cursor: default; }
.always-on-check {
  width: 16px; height: 16px; display: grid; place-items: center; border-radius: 4px;
  background: rgba(53,212,221,.18); border: 1px solid rgba(53,212,221,.55);
  color: var(--accent); font-size: 11px; font-weight: 900;
}
.layer-swatch { width: 12px; height: 12px; border-radius: 3px; }
.vessel-swatch { background: var(--accent); transform: rotate(45deg); border-radius: 2px 8px 2px 8px; }
.track-swatch { height: 2px; background: var(--accent); }
.sst-swatch { background: linear-gradient(135deg, #203ff0, #54dbca, #ffd45d, #f25340); }
.chlor-swatch { background: linear-gradient(135deg, #082d15, #1fa85d, #d5f06d); }
.wave-swatch { border-radius: 50%; background: #66c8ff; border: 2px solid rgba(255,255,255,.5); }
.count-badge { min-width: 24px; text-align: center; padding: 2px 6px; border-radius: 999px; background: rgba(53,212,221,.12); color: var(--accent); font-size: 11px; }

.slider-label { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-bottom: 10px; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.button-grid button {
  border: 1px solid var(--border); background: var(--panel-2); border-radius: 8px;
  padding: 9px 8px; font-size: 11px; cursor: pointer; transition: .15s ease;
}
.button-grid button:hover { border-color: rgba(53,212,221,.55); background: #0d3241; transform: translateY(-1px); }

.wave-legend { display: grid; gap: 9px; font-size: 11px; color: var(--muted); }
.wave-legend span { display: flex; align-items: center; gap: 8px; }
.wave-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); }
.wave-calm { background: #67dbbf; }
.wave-light { background: #66c8ff; }
.wave-moderate { background: #f5c858; }
.wave-high { background: #ff6b6b; }

.map-wrap { position: relative; min-width: 0; }
#map { width: 100%; height: 100%; background: #03131c; }
.map-banner {
  position: absolute; z-index: 700; top: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(10, 28, 37, .94); border: 1px solid rgba(255,207,92,.5); color: #ffe49d;
  border-radius: 999px; padding: 7px 14px; font-size: 11px; box-shadow: var(--shadow); white-space: nowrap;
}
.coordinate-readout {
  position: absolute; z-index: 700; left: 10px; bottom: 10px;
  padding: 6px 9px; border-radius: 7px; background: rgba(4,18,26,.82);
  border: 1px solid var(--border); color: #b7d7df; font: 11px ui-monospace, SFMono-Regular, Consolas, monospace;
}

.detail-content { font-size: 13px; }
.muted { color: var(--muted); line-height: 1.55; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.detail-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 10px; }
.detail-card span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; }
.detail-card strong { font-size: 16px; font-weight: 650; }
.detail-meta { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); display: grid; gap: 5px; color: var(--muted); font-size: 11px; }

.buoy-list { display: grid; gap: 8px; }
.buoy-item { width: 100%; text-align: left; border: 1px solid var(--border); background: var(--panel-2); border-radius: 9px; padding: 10px; cursor: pointer; }
.buoy-item:hover { border-color: rgba(53,212,221,.45); }
.buoy-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.buoy-station { font-size: 12px; font-weight: 700; }
.buoy-age { color: var(--muted); font-size: 9px; }
.buoy-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.buoy-values span { color: var(--muted); font-size: 9px; }
.buoy-values strong { display: block; color: var(--text); font-size: 12px; margin-top: 2px; }
.skeleton { height: 70px; border-radius: 9px; background: linear-gradient(90deg, #0b2735, #113747, #0b2735); background-size: 200% 100%; animation: pulse 1.5s infinite; }
@keyframes pulse { to { background-position: -200% 0; } }
.disclaimer p { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 0; }

.vessel-icon { background: transparent; border: 0; }
.vessel-symbol {
  width: 22px; height: 30px; position: relative; transform-origin: 50% 55%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.65));
}
.vessel-symbol::before {
  content: ''; position: absolute; inset: 1px 4px 3px;
  background: #35d4dd; clip-path: polygon(50% 0, 100% 70%, 72% 100%, 28% 100%, 0 70%);
  border-radius: 2px;
}
.vessel-symbol.demo::before { background: #ffcf5c; }
.vessel-symbol.selected::before { background: #fff; box-shadow: 0 0 12px #35d4dd; }
.wave-label { font-size: 10px; color: white; font-weight: 800; text-shadow: 0 1px 3px #000; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #092532; color: var(--text); }
.leaflet-popup-content { margin: 12px 14px; }
.leaflet-control-layers, .leaflet-bar a { background: #092532; color: var(--text); border-color: var(--border); }
.leaflet-control-layers-expanded { color: var(--text); }
.leaflet-control-attribution { background: rgba(4,18,26,.75) !important; color: #9cb9c1; }
.leaflet-control-attribution a { color: #9fe8ee; }

@media (max-width: 1150px) {
  .app-shell { grid-template-columns: 240px 1fr 290px; }
  .status-item:nth-child(3) { display: none; }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  .topbar { height: auto; min-height: 70px; padding: 10px 12px; align-items: flex-start; gap: 10px; }
  .brand { min-width: 0; }
  .brand h1 { font-size: 15px; }
  .status-strip { max-width: 48vw; }
  .app-shell { height: calc(100vh - 70px); grid-template-columns: 1fr; }
  .left-panel { position: absolute; left: 10px; top: 88px; z-index: 800; width: 230px; max-height: calc(100vh - 110px); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
  .right-panel { display: none; }
  .map-wrap { height: 100%; }
}
@media (max-width: 620px) {
  .brand p { display: none; }
  .status-strip { max-width: 55vw; }
  .status-item { padding: 6px 8px; }
  .status-item:nth-child(n+3) { display: none; }
  .left-panel { width: 205px; }
  .panel-section { padding: 13px; }
  .map-banner { max-width: calc(100vw - 30px); white-space: normal; text-align: center; }
}

/* Shipwreck, reef, and submarine-canyon layers */
.wreck-swatch {
  border-radius: 4px;
  background: #cf7650;
  border: 1px solid rgba(255,255,255,.8);
  position: relative;
}
.wreck-swatch::after {
  content: '⚓';
  position: absolute;
  inset: -4px 0 0;
  text-align: center;
  color: #fff7ec;
  font-size: 12px;
  font-weight: 900;
}
.reef-swatch {
  background: linear-gradient(135deg, transparent 0 25%, #4edb70 26% 62%, #1a8d4a 63%);
  border: 1px solid #9bffad;
  clip-path: polygon(0 100%, 33% 20%, 52% 70%, 72% 0, 100% 100%);
}
.canyon-swatch {
  background: rgba(202, 110, 255, .35);
  border: 2px dashed #d28cff;
}
.feature-legend { display: grid; gap: 9px; margin-bottom: 15px; font-size: 11px; color: var(--muted); }
.feature-legend span { display: flex; align-items: center; gap: 8px; }
.legend-subheading { margin-top: 16px !important; }
.wreck-legend-symbol {
  width: 20px; height: 20px; display: inline-grid; place-items: center; flex: 0 0 auto;
  border-radius: 5px; background: #cf7650; color: #fff; border: 1px solid rgba(255,255,255,.8);
  font-style: normal; font-size: 13px; line-height: 1; font-weight: 900;
}
.canyon-legend-symbol {
  width: 18px; height: 11px; flex: 0 0 auto; border-radius: 3px;
  background: rgba(202, 110, 255, .28); border: 1px dashed #d28cff;
}
.wreck-map-icon, .reef-map-icon { background: transparent !important; border: 0 !important; }
.shipwreck-symbol, .reef-symbol {
  display: grid; place-items: center;
  color: #fff;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.9));
  transition: transform .12s ease, filter .12s ease;
}
.shipwreck-symbol { width: 30px; height: 30px; }
.shipwreck-symbol svg, .reef-symbol svg { width: 100%; height: 100%; overflow: visible; }
.shipwreck-symbol svg path { fill: currentColor; }
.wreck-historical .shipwreck-symbol { color: #e57d50; }
.wreck-charted .shipwreck-symbol { color: #ffc85c; }
.shipwreck-symbol.selected { color: #fff; transform: scale(1.22); filter: drop-shadow(0 0 7px #ff8a57) drop-shadow(0 2px 3px #000); }
.reef-symbol { color: #55ef7b; width: 24px; height: 24px; }
.reef-site .reef-symbol { width: 31px; height: 31px; color: #a0ff79; }
.reef-symbol svg path:not([fill="none"]), .reef-symbol svg circle, .reef-symbol svg rect { fill: currentColor; }
.reef-symbol.selected { color: #fff; transform: scale(1.2); filter: drop-shadow(0 0 8px #5bff79) drop-shadow(0 2px 3px #000); }
.feature-popup { display: grid; gap: 5px; min-width: 210px; max-width: 300px; color: #18252b; }
.feature-popup strong { font-size: 14px; color: #10242d; }
.feature-popup span { font-size: 11px; color: #4d626b; }
.feature-popup b { font-size: 11px; color: #203f4a; }
.feature-popup p { margin: 2px 0; font-size: 11px; line-height: 1.35; color: #283d45; }
.feature-popup small { font-size: 9px; color: #63777f; }
.reef-popup strong { color: #14552a; }
.canyon-label-icon { background: transparent; border: 0; }
.canyon-label {
  display: inline-block; white-space: nowrap; transform: translate(-50%, -50%);
  color: #f1caff; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-shadow: 0 1px 3px #000, 0 0 7px #000;
  padding: 3px 6px; border: 1px solid rgba(210,140,255,.42); border-radius: 999px;
  background: rgba(38,12,52,.58); backdrop-filter: blur(2px);
}
.canyon-label.selected { color: #fff; border-color: #fff; box-shadow: 0 0 10px rgba(210,140,255,.7); }


/* Canyon bathymetry picture and full-size viewer */
.canyon-picture-section { background: linear-gradient(180deg, rgba(210,140,255,.045), transparent); }
.canyon-picture-button {
  width: 100%; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; background: #020b10; cursor: zoom-in; position: relative; display: block;
  box-shadow: 0 9px 22px rgba(0,0,0,.3);
}
.canyon-picture-button img { width: 100%; height: auto; max-height: 235px; object-fit: cover; display: block; transition: transform .2s ease, filter .2s ease; }
.canyon-picture-button:hover img, .canyon-picture-button:focus-visible img { transform: scale(1.025); filter: brightness(1.08); }
.canyon-picture-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.canyon-picture-zoom {
  position: absolute; right: 8px; bottom: 8px; padding: 4px 7px; border-radius: 999px;
  color: #fff; background: rgba(0,0,0,.68); border: 1px solid rgba(255,255,255,.28); font-size: 10px;
}
.image-caption { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.image-modal[hidden] { display: none; }
.image-modal { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 20px; }
.image-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.83); backdrop-filter: blur(5px); }
.image-modal-dialog {
  position: relative; z-index: 1; width: min(940px, 96vw); max-height: 94vh; overflow: auto;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.22); background: #061923; box-shadow: 0 24px 70px rgba(0,0,0,.72);
}
.image-modal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.image-modal-header h2 { margin: 0; font-size: 15px; }
.image-modal-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,.06); font-size: 22px; line-height: 1; cursor: pointer; }
.image-modal-close:hover, .image-modal-close:focus-visible { background: rgba(255,255,255,.13); outline: none; }
.image-modal-dialog > img { width: 100%; height: auto; display: block; background: #000; }
.image-modal-dialog > p { margin: 0; padding: 11px 14px 15px; color: var(--muted); font-size: 11px; line-height: 1.5; }
body.modal-open { overflow: hidden; }

@media (max-width: 900px) {
  .image-modal { padding: 8px; }
  .image-modal-dialog { width: 100%; max-height: 96vh; }
}

/* v1.3.0: Canyon picture displayed over the main map */
.canyon-map-picture[hidden], .show-canyon-picture[hidden] { display: none; }
.canyon-map-picture {
  position: absolute;
  z-index: 760;
  right: 16px;
  bottom: 42px;
  width: min(430px, calc(100% - 32px));
  padding: 11px;
  border: 1px solid rgba(210, 140, 255, .58);
  border-radius: 14px;
  background: rgba(4, 18, 26, .94);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .52);
  backdrop-filter: blur(8px);
}
.canyon-map-picture-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.canyon-map-picture-header h2 {
  margin: 2px 0 0;
  font-size: 16px;
  line-height: 1.2;
}
.map-picture-kicker {
  color: #dcaeff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
}
.map-picture-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.map-picture-close:hover, .map-picture-close:focus-visible {
  background: rgba(255, 255, 255, .15);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.canyon-map-picture .canyon-picture-button img {
  max-height: 300px;
  object-fit: contain;
}
.canyon-map-picture .image-caption {
  margin: 8px 2px 0;
  font-size: 10px;
}
.show-canyon-picture {
  position: absolute;
  z-index: 760;
  right: 16px;
  bottom: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(210, 140, 255, .65);
  border-radius: 999px;
  background: rgba(4, 18, 26, .94);
  color: #f1ddff;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.show-canyon-picture:hover, .show-canyon-picture:focus-visible {
  background: rgba(38, 22, 52, .96);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 1150px) {
  .canyon-map-picture { width: min(360px, calc(100% - 28px)); right: 14px; }
  .canyon-map-picture .canyon-picture-button img { max-height: 240px; }
}

@media (max-width: 620px) {
  .canyon-map-picture {
    right: 8px;
    bottom: 38px;
    width: min(320px, calc(100% - 16px));
    padding: 8px;
  }
  .canyon-map-picture-header h2 { font-size: 14px; }
  .canyon-map-picture .canyon-picture-button img { max-height: 190px; }
  .canyon-map-picture .image-caption { display: none; }
  .show-canyon-picture { right: 8px; bottom: 40px; }
}


/* v1.4.0: multi-source AIS status */
.provider-list { display: flex; flex-wrap: wrap; gap: 7px; }
.provider-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,.045); color: var(--muted);
  font-size: 10px; line-height: 1;
}
.provider-pill strong { color: var(--text); font-size: 10px; }
.provider-pill.live { border-color: rgba(53,212,221,.48); background: rgba(53,212,221,.09); color: #9ee9ee; }
.provider-pill.waiting { border-color: rgba(255,207,92,.38); color: #f0d892; }
.provider-pill.error { border-color: rgba(255,107,107,.55); color: #ffaaaa; }
.provider-pill.demo { border-color: rgba(255,207,92,.45); background: rgba(255,207,92,.08); color: #f6dc91; }
.source-note { margin: 9px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }


/* v1.5.0: georeferenced Hudson Canyon image used as the main map background */
.canyon-image-swatch {
  background-image: linear-gradient(rgba(4,18,26,.12), rgba(4,18,26,.12)), url('/assets/hudson-canyon-bathymetry.jpeg');
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255,255,255,.72);
}
.opacity-second { margin-top: 16px; }
.leaflet-canyonImage-pane img {
  filter: saturate(1.08) contrast(1.04);
  box-shadow: 0 0 0 1px rgba(255,255,255,.28), 0 8px 28px rgba(0,0,0,.35);
}

/* v2.0.0: full-region tiled offshore intelligence interface */
.app-shell { grid-template-columns: 310px minmax(430px, 1fr) 350px; }
.layer-group {
  border: 0;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.018), transparent);
}
.layer-group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 18px;
  color: #c9edf3;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  user-select: none;
}
.layer-group > summary::-webkit-details-marker { display: none; }
.layer-group > summary::after {
  content: '▾';
  color: var(--accent);
  transition: transform .15s ease;
}
.layer-group:not([open]) > summary::after { transform: rotate(-90deg); }
.layer-group > summary:hover { background: rgba(53,212,221,.045); }
.layer-group-body { padding: 0 18px 15px; }
.layer-group .layer-row { padding: 7px 0; }
.layer-group .layer-row span:nth-child(3) { min-width: 0; }

.select-row {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(125px, 1.15fr);
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: var(--muted);
  font-size: 11px;
}
.select-row select {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 8px;
  background: var(--panel-2);
  color: var(--text);
  outline: none;
}
.select-row select:focus { border-color: rgba(53,212,221,.65); box-shadow: 0 0 0 2px rgba(53,212,221,.12); }
.compact { margin-top: 10px; }
.mini-heading { color: #c9edf3; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; }
.quick-section { padding-top: 15px; }
.wide-button { grid-column: 1 / -1; }
.primary-button {
  width: 100%;
  border: 1px solid rgba(53,212,221,.55);
  border-radius: 9px;
  padding: 9px 11px;
  background: linear-gradient(180deg, rgba(53,212,221,.22), rgba(53,212,221,.1));
  color: #dfffff;
  font-weight: 750;
  font-size: 11px;
  cursor: pointer;
}
.primary-button:hover { background: linear-gradient(180deg, rgba(53,212,221,.31), rgba(53,212,221,.15)); }

.ocean-base-swatch { background: linear-gradient(135deg, #8fc8d7, #0e4c70 55%, #021d31); }
.satellite-swatch { background: linear-gradient(135deg, #356b45, #38443f 45%, #13476b); }
.dark-swatch { background: linear-gradient(135deg, #111827, #07111d); border: 1px solid #526071; }
.label-swatch { background: #d8edf2; box-shadow: inset 0 0 0 3px #234553; }
.contour-swatch { background: repeating-linear-gradient(0deg, transparent 0 3px, #6ec9e6 3px 4px); }
.chart-swatch { background: linear-gradient(135deg, #e9dfb8, #8cc5ce); }
.nav-swatch { background: #75c98c; }
.depth-swatch { background: linear-gradient(135deg, #b8f1ff 45%, #176ea2 46%); }
.hazard-swatch { background: repeating-linear-gradient(45deg, #ff7a6e 0 2px, transparent 2px 4px); border: 1px solid #ff7a6e; }
.traffic-swatch { background: linear-gradient(90deg, transparent 0 20%, #ffbf5a 20% 80%, transparent 80%); }
.area-swatch { background: rgba(196,125,255,.45); border: 1px dashed #d49bff; }
.aid-swatch { border-radius: 50%; background: #ff4d57; box-shadow: inset 5px 0 #42d57c; }
.service-swatch { background: #b6d7e2; clip-path: polygon(50% 0,100% 100%,0 100%); }
.seamark-swatch { background: conic-gradient(#ef4444 0 25%, #fff 0 50%, #16a34a 0 75%, #fff 0); border-radius: 50%; }
.grid-swatch { background-image: linear-gradient(#a9d4df 1px, transparent 1px), linear-gradient(90deg,#a9d4df 1px,transparent 1px); background-size: 5px 5px; }
.route-swatch { height: 2px; background: repeating-linear-gradient(90deg, #74dce4 0 5px, transparent 5px 8px); }
.tuna-swatch { background: linear-gradient(135deg, #254f89, #4fd6a1, #f7df4f, #ff3d4f); }
.sst-break-swatch { border-radius: 50%; background: #ff943d; border: 2px solid #ffdc68; }
.chlor-edge-swatch { border-radius: 50%; background: #25d88f; border: 2px solid #8cffce; }

.tuna-panel { background: linear-gradient(180deg, rgba(255,155,61,.045), transparent); }
.tuna-species-row { grid-template-columns: 70px 1fr; margin-bottom: 6px; }
.zone-list { display: grid; gap: 7px; margin-top: 10px; }
.zone-item {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 42px;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  background: var(--panel-2);
  cursor: pointer;
}
.zone-item:hover { border-color: rgba(255,155,61,.58); transform: translateY(-1px); }
.zone-rank {
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(255,155,61,.18); color: #ffd4a9; font-weight: 900; font-size: 11px;
}
.zone-copy { min-width: 0; }
.zone-copy strong { display: block; color: var(--text); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zone-copy small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.zone-score { color: #fff0cf; font-size: 17px; font-weight: 900; text-align: right; }
.score-meter { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); margin-bottom: 11px; }
.score-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #254f89, #4fd6a1, #f7df4f, #ff3d4f); }

.map-legends {
  position: absolute;
  z-index: 720;
  right: 12px;
  top: 12px;
  width: 218px;
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.map-key {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 8px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(4,18,26,.86);
  box-shadow: var(--shadow);
  backdrop-filter: blur(5px);
  pointer-events: none;
}
.map-key[hidden] { display: none; }
.map-key span { grid-column: 1 / -1; color: #d8edf2; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.map-key i { grid-column: 1 / -1; height: 8px; border-radius: 999px; }
.map-key b { color: var(--muted); font-size: 9px; font-weight: 600; }
.map-key b:last-child { text-align: right; }
.tuna-gradient { background: linear-gradient(90deg, #254f89, #3a9ed8, #4fd6a1, #f7df4f, #ff9b3d, #ff3d4f); }
.temperature-key { gap: 4px; }
.temperature-key > small {
  grid-column: 1 / -1; color: #9ec4cd; font-size: 9px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sst-gradient {
  background: linear-gradient(90deg, #311b92 0%, #2049d8 18%, #00a8e8 34%, #00cf9b 50%, #d6e84b 68%, #ff9e2c 84%, #e42d2d 100%);
  border: 1px solid rgba(255,255,255,.25);
}
.temperature-ticks {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
}
.temperature-ticks b { text-align: center !important; font-weight: 650; min-width: 0; }
.temperature-ticks em { display: block; color: #e9f8fb; font-size: 8px; font-style: normal; white-space: nowrap; }
.temperature-ticks small { display: block; margin-top: 1px; color: #91b5be; font-size: 7px; font-weight: 500; white-space: nowrap; }
.tuna-warning { top: 48px; border-color: rgba(255,107,107,.55); color: #ffc4c4; }

.grid-label-icon { background: transparent; border: 0; }
.grid-label-icon span {
  display: inline-block;
  white-space: nowrap;
  color: #f1fbfd;
  font: 9px ui-monospace, SFMono-Regular, Consolas, monospace;
  text-shadow: 0 1px 3px #000, 0 0 6px #000;
  background: rgba(3,17,25,.72);
  border: 1px solid rgba(215,238,244,.24);
  border-radius: 3px;
  padding: 1px 3px;
}
.grid-label-left span { transform: translate(3px, -50%); }
.grid-label-right span { transform: translate(calc(-100% - 3px), -50%); }
.grid-label-top span { transform: translate(-50%, 3px); }
.grid-label-bottom span { transform: translate(-50%, calc(-100% - 3px)); }
.tuna-hotspot-icon { background: transparent; border: 0; }
.tuna-hotspot-icon > span {
  width: 34px; height: 34px;
  display: grid;
  grid-template-rows: 17px 10px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #ffce79, #ee5b31 58%, #7c171b);
  border: 2px solid #fff5d5;
  box-shadow: 0 3px 10px rgba(0,0,0,.68), 0 0 12px rgba(255,126,55,.45);
}
.tuna-hotspot-icon b { font-size: 12px; line-height: 1; }
.tuna-hotspot-icon small { font-size: 8px; line-height: 1; }

@media (max-width: 1280px) {
  .app-shell { grid-template-columns: 285px minmax(390px,1fr) 320px; }
}
@media (max-width: 1150px) {
  .app-shell { grid-template-columns: 255px minmax(360px,1fr) 295px; }
  .layer-group > summary { padding-left: 14px; padding-right: 14px; }
  .layer-group-body { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .left-panel { width: min(280px, calc(100vw - 20px)); }
  .map-legends { top: 10px; right: 10px; width: 190px; }
}

/* v2.1.0: multi-source SST and chlorophyll */
.ocean-source-select { padding-top: 3px; }
.ocean-source-note {
  margin: 0 0 8px 43px;
  padding: 7px 8px;
  border-left: 2px solid rgba(53,212,221,.35);
  background: rgba(53,212,221,.035);
  border-radius: 0 7px 7px 0;
}
.ocean-source-status { display: grid; gap: 12px; }
.ocean-source-group { display: grid; gap: 6px; }
.ocean-source-group h3 {
  margin: 0;
  color: #c9edf3;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.ocean-source-row {
  display: grid;
  grid-template-columns: 9px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  border-radius: 8px;
}
.ocean-source-row span:nth-child(2) { min-width: 0; }
.ocean-source-row strong { display: block; font-size: 10px; color: var(--text); }
.ocean-source-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocean-source-row b { color: var(--accent); font-size: 9px; font-weight: 700; }
.source-state-dot { width: 8px; height: 8px; border-radius: 50%; background: #f4c95d; box-shadow: 0 0 7px currentColor; }
.source-state-dot.live { background: var(--ok); }
.source-state-dot.error { background: var(--danger); }
.source-state-dot.waiting { background: var(--accent-2); }

@media (max-width: 1150px) {
  .ocean-sources-panel { display: none; }
}


/* v2.3.0: Garmin inReach satellite tracking */
.inreach-swatch {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff3c4, #ff9f43 45%, #b84b16);
  border: 1px solid #fff0c2;
  box-shadow: 0 0 7px rgba(255,159,67,.55);
}
.inreach-track-swatch { height: 2px; background: repeating-linear-gradient(90deg, #ff9f43 0 4px, transparent 4px 7px); }
.inreach-map-icon { background: transparent; border: 0; }
.inreach-symbol {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff5c9, #ff9f43 46%, #9f3e13 100%);
  color: #301204; border: 2px solid #fff4cf;
  box-shadow: 0 3px 9px rgba(0,0,0,.65), 0 0 13px rgba(255,159,67,.48);
  font-size: 15px; font-weight: 900;
}
.inreach-symbol.selected { background: #fff; color: #c14d13; box-shadow: 0 0 17px #ff9f43, 0 3px 9px rgba(0,0,0,.65); }

/* v2.4.0: real-time weather, front lines, hover sampling and weedline outlook */
.radar-swatch { background: linear-gradient(135deg,#2c5eff,#37db8c,#f8e65a,#ff5c51,#b72fd1); }
.alert-swatch { background: rgba(255,82,82,.28); border: 2px solid #ff5f55; }
.wind-swatch { height: 2px; background: #9eeaff; position: relative; }
.wind-swatch::after { content:'➤'; position:absolute; left:3px; top:-8px; color:#9eeaff; font-size:13px; }
.wave-height-swatch { background:#47b8ff; border-radius:50%; }
.wave-period-swatch { background: repeating-linear-gradient(90deg,#e6ce6a 0 3px,transparent 3px 5px); height:3px; }
.forecast-swatch { background:#c5e7ee; border:1px solid #fff; }
.weedline-swatch { height:3px; background:repeating-linear-gradient(90deg,#d9f43b 0 4px,transparent 4px 7px); }
.opacity-second { margin-top: 12px; }

.ocean-hover-readout {
  position:absolute; z-index:720; left:10px; bottom:46px; min-width:245px;
  padding:9px 11px; border-radius:9px; background:rgba(3,17,25,.92);
  border:1px solid rgba(157,225,238,.3); box-shadow:0 8px 20px rgba(0,0,0,.35);
  pointer-events:none;
}
.ocean-hover-readout[hidden] { display:none; }
.ocean-hover-primary,.ocean-hover-secondary { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ocean-hover-primary span,.ocean-hover-secondary span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.ocean-hover-primary strong { color:#ffd56c; font-size:14px; }
.ocean-hover-secondary strong { color:#75efb4; font-size:13px; }
.ocean-hover-readout small { display:block; color:#8fb3c0; margin-top:5px; font-size:9px; max-width:330px; }

.map-legends { position:absolute; z-index:690; top:12px; right:12px; width:230px; display:grid; gap:7px; pointer-events:none; }
.map-key { background:rgba(3,17,25,.86); border:1px solid var(--border); border-radius:8px; padding:8px; box-shadow:0 6px 15px rgba(0,0,0,.27); }
.map-key > span { display:block; font-size:10px; color:#d7eef4; text-transform:uppercase; letter-spacing:.08em; }
.map-key > small { display:block; color:var(--muted); font-size:8px; margin-top:3px; }
.sst-gradient { height:8px; display:block; margin:7px 0 4px; border-radius:999px; background:linear-gradient(90deg,#302bff,#00a5ff,#17d9a5,#f0e95c,#ff8a34,#e63737); }
.temperature-ticks { display:flex; justify-content:space-between; gap:2px; }
.temperature-ticks b { font-weight:600; font-size:8px; color:#e9f7fa; text-align:center; }
.temperature-ticks em,.temperature-ticks small { display:block; font-style:normal; font-size:7px; color:var(--muted); }
.front-lines-key { display:grid; gap:5px; }
.front-legend-row { display:grid; grid-template-columns:34px 1fr; align-items:center; gap:7px; }
.front-legend-row b { font-size:9px; font-weight:600; color:#dceff3; }
.front-line-sample { height:3px; display:block; border-radius:999px; }
.temp-front-line { background:#ffb13d; }
.chlor-front-line { background:repeating-linear-gradient(90deg,#38efad 0 7px,transparent 7px 10px); }
.weedline-front-line { background:repeating-linear-gradient(90deg,#d9f43b 0 3px,transparent 3px 7px); }
.tuna-gradient { display:block; height:7px; margin:6px 0; border-radius:999px; background:linear-gradient(90deg,#254f89,#3a9ed8,#4fd6a1,#f7df4f,#ff9b3d,#ff3d4f); }

.weather-point-icon,.wind-arrow-icon,.weather-data-label { background:transparent; border:0; }
.weather-point-marker {
  width:118px; min-height:56px; transform:translate(-50%,-50%); padding:6px 8px;
  background:rgba(5,29,39,.88); border:1px solid rgba(159,231,241,.48); border-radius:9px;
  box-shadow:0 4px 12px rgba(0,0,0,.45); color:#eaf8fb; text-align:center;
}
.weather-point-marker.danger { border-color:#ff655d; box-shadow:0 0 15px rgba(255,74,74,.42); }
.weather-point-marker span { display:block; font-size:9px; color:#b8dce4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.weather-point-marker b { display:block; font-size:13px; margin-top:2px; }
.weather-point-marker small { display:block; font-size:9px; color:#d8ecf1; }
.weather-point-marker em { display:block; color:#ffe671; font-size:9px; font-style:normal; font-weight:800; }
.wind-arrow-icon { text-align:center; }
.wind-arrow { color:#9eeaff; font-size:22px; line-height:22px; transform-origin:50% 50%; text-shadow:0 2px 4px #000; }
.wind-arrow-icon span { display:inline-block; transform:translate(-50%,-2px); white-space:nowrap; padding:1px 4px; border-radius:4px; background:rgba(3,17,25,.78); color:#dff8ff; font-size:8px; border:1px solid rgba(158,234,255,.25); }
.weather-data-label span { display:inline-block; white-space:nowrap; transform:translate(-50%,-50%); padding:2px 5px; border-radius:4px; font-size:8px; font-weight:800; text-shadow:0 1px 2px #000; }
.wave-height-label span { color:#bcecff; background:rgba(0,72,113,.74); border:1px solid rgba(98,203,255,.5); }
.wave-period-label span { color:#fff1a6; background:rgba(85,65,5,.75); border:1px solid rgba(246,221,101,.5); transform:translate(-50%,70%); }

.tag.good { color:#6de19b; border-color:rgba(85,214,139,.45); }
.tag.caution { color:#ffd76f; border-color:rgba(255,207,92,.5); }
.tag.danger { color:#ff7770; border-color:rgba(255,107,107,.55); }
.safety-summary { border:1px solid var(--border); background:var(--panel-2); border-radius:10px; padding:11px; margin-bottom:10px; }
.safety-summary.good { border-left:4px solid var(--ok); }
.safety-summary.caution { border-left:4px solid var(--accent-2); }
.safety-summary.danger { border-left:4px solid var(--danger); background:rgba(82,20,24,.35); }
.safety-summary > strong { display:block; font-size:11px; line-height:1.35; }
.safety-summary p,.safety-summary ul { margin:9px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
.safety-summary ul { padding-left:17px; }
.safety-metrics { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:9px; }
.safety-metrics .detail-card { padding:7px; }
.safety-metrics .detail-card strong { font-size:13px; }
.primary-button { width:100%; border:1px solid rgba(53,212,221,.42); background:#0d3442; color:#e8fbff; border-radius:8px; padding:9px 10px; cursor:pointer; margin-bottom:10px; }
.primary-button:hover { background:#104455; }
.weather-point-list,.weather-alert-list { display:grid; gap:7px; }
.weather-point-item,.weather-alert-item { width:100%; text-align:left; border:1px solid var(--border); background:var(--panel-2); color:inherit; border-radius:8px; padding:8px; cursor:pointer; }
.weather-point-item:hover,.weather-alert-item:hover { border-color:rgba(53,212,221,.5); }
.weather-point-item strong,.weather-alert-item strong { display:block; font-size:11px; }
.weather-point-item span,.weather-alert-item span { display:block; color:#c4e2e8; font-size:9px; margin-top:3px; line-height:1.35; }
.weather-point-item small,.weather-alert-item small { display:block; color:var(--muted); font-size:8px; margin-top:3px; }
.weather-alert-list h3 { margin:7px 0 0; font-size:10px; color:#cae9ee; text-transform:uppercase; letter-spacing:.08em; }
.weather-alert-item.p2 { border-left:3px solid #ffca55; }
.weather-alert-item.p3 { border-left:3px solid #ff754e; }
.weather-alert-item.p4 { border-left:3px solid #df38db; }
.weather-no-alerts { color:#82d8a4; font-size:10px; line-height:1.4; }

@media (max-width:900px) {
  .map-legends { width:180px; }
  .ocean-hover-readout { min-width:210px; max-width:calc(100vw - 240px); }
}

/* v2.5.0: adaptive tuna ensemble and local trip learning */
.tuna-model-facts {
  display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:8px 0 10px;
}
.model-fact {
  min-width:0; padding:7px 8px; border:1px solid var(--border); border-radius:8px; background:var(--panel-2);
}
.model-fact span { display:block; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.07em; }
.model-fact strong { display:block; color:#eaf8fb; font-size:10px; margin-top:3px; overflow-wrap:anywhere; }
.zone-score { display:grid; place-items:center; min-width:43px; }
.zone-score em { display:block; color:var(--muted); font-size:7px; font-style:normal; font-weight:600; }
.score-confidence { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin:-2px 0 10px; }
.score-confidence strong { font-size:12px; color:#f5fbfc; }
.score-confidence span { color:var(--muted); font-size:9px; text-align:right; }
.feature-breakdown { margin:11px 0; padding:9px; border:1px solid var(--border); border-radius:9px; background:rgba(3,17,25,.36); }
.feature-breakdown h3 { margin:0 0 7px; color:#d8f1f5; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.feature-row { display:grid; grid-template-columns:88px 1fr 25px; align-items:center; gap:7px; margin-top:5px; }
.feature-row span,.feature-row strong { color:#bcd9df; font-size:8px; }
.feature-row strong { text-align:right; }
.feature-row i { display:block; height:5px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.07); }
.feature-row i b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#3a9ed8,#4fd6a1,#f7df4f,#ff9b3d); }
.tuna-feedback-panel { margin-top:11px; padding:9px; border:1px solid rgba(255,155,61,.25); border-radius:9px; background:rgba(255,155,61,.035); }
.tuna-feedback-panel summary { cursor:pointer; color:#ffd1a0; font-size:10px; font-weight:800; }
.feedback-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:9px 0 7px; }
.feedback-grid label,.feedback-notes { display:grid; gap:4px; }
.feedback-grid label span,.feedback-notes span { color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.06em; }
.feedback-grid input,.feedback-grid select,.feedback-notes input {
  width:100%; box-sizing:border-box; border:1px solid var(--border); border-radius:7px; background:#071d27; color:#eaf8fb; padding:7px; font:inherit; font-size:9px;
}
.secondary-button { width:100%; border:1px solid rgba(255,155,61,.4); background:#352411; color:#ffe3c5; border-radius:8px; padding:8px 10px; cursor:pointer; margin-top:8px; }
.secondary-button:hover:not(:disabled) { background:#493017; }
.secondary-button:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width:900px) { .tuna-model-facts,.feedback-grid { grid-template-columns:1fr; } }

/* v2.6.0: private alerts and browser notifications */
.private-alerts-panel { border-color: rgba(255,204,94,.26); }
.private-alert-list { display:grid; gap:7px; margin:8px 0 10px; }
.private-alert-item {
  border:1px solid var(--border); border-left:4px solid #7bbac9; border-radius:8px;
  background:var(--panel-2); padding:8px 9px;
}
.private-alert-item.danger { border-left-color:var(--danger); background:rgba(82,20,24,.30); }
.private-alert-item.caution { border-left-color:var(--accent-2); }
.private-alert-item.info { border-left-color:var(--accent); }
.private-alert-item strong { display:block; font-size:10px; line-height:1.3; }
.private-alert-item span { display:block; color:#c4e2e8; font-size:9px; line-height:1.4; margin-top:3px; }
.private-alert-item small { display:block; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.07em; margin-top:4px; }
.private-alert-clear { color:#82d8a4; font-size:10px; line-height:1.4; margin:0; }
.private-alert-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.private-alert-actions .primary-button,.private-alert-actions .secondary-button { margin:0; }
.private-alert-settings { margin-top:10px; border-top:1px solid var(--border); padding-top:9px; }
.private-alert-settings > summary { cursor:pointer; color:#d7eef4; font-size:10px; font-weight:700; }
.private-alert-settings form { margin-top:8px; }
.private-alert-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:8px 0 10px; }
.private-alert-grid label {
  display:grid; grid-template-columns:1fr auto; gap:3px 7px; align-items:center;
  padding:7px; border:1px solid var(--border); border-radius:7px; background:rgba(8,35,46,.55);
}
.private-alert-grid label span { font-size:9px; color:#cce7ec; }
.private-alert-grid label input { width:62px; min-width:0; background:#071923; color:var(--text); border:1px solid var(--border); border-radius:5px; padding:4px; }
.private-alert-grid label small { grid-column:1 / -1; color:var(--muted); font-size:8px; }
@media (max-width:900px) {
  .private-alert-actions,.private-alert-grid { grid-template-columns:1fr; }
}

/* v2.8.0: official NJ Artificial Reef Guide enrichment */
.reef-guide-links, .feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0;
}
.reef-guide-links a, .feature-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid rgba(94, 239, 123, .42);
  border-radius: 8px;
  background: rgba(68, 201, 101, .09);
  color: #bfffc9;
  font-size: 10px;
  font-weight: 750;
  text-decoration: none;
}
.reef-guide-links a:hover, .feature-actions a:hover,
.reef-guide-links a:focus-visible, .feature-actions a:focus-visible {
  border-color: #74ff93;
  background: rgba(68, 201, 101, .18);
  outline: none;
}
.feature-popup .feature-actions { margin: 4px 0 0; }
.feature-popup .feature-actions a { color: #14552a; border-color: rgba(20, 85, 42, .35); background: rgba(46, 169, 82, .08); }
.reef-icon-key {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 8px;
  margin: 8px 0 2px;
  color: var(--muted);
  font-size: 9px;
}
.reef-icon-key span { display: flex; align-items: center; gap: 6px; }
.reef-key-symbol { width: 16px; text-align: center; color: #69ef83; font-style: normal; font-size: 13px; line-height: 1; }
.key-ship { color: #55ef7b; }
.key-rock { color: #c99b59; }
.key-concrete { color: #a9b5bd; }
.key-reefball { color: #6ed6df; }
.key-subway { color: #e08ac7; }
.reef-symbol { width: 28px; height: 28px; }
.reef-site .reef-symbol { width: 34px; height: 34px; color: #a0ff79; }
.reef-ship .reef-symbol { color: #55ef7b; }
.reef-dredge-rock .reef-symbol { color: #c99b59; }
.reef-concrete .reef-symbol { color: #a9b5bd; }
.reef-military-vehicle .reef-symbol { color: #d8a348; }
.reef-reef-ball .reef-symbol { color: #6ed6df; }
.reef-subway-car .reef-symbol { color: #e08ac7; }
.reef-steel .reef-symbol, .reef-steel-cable .reef-symbol { color: #91a8b5; }
.reef-tires .reef-symbol { color: #8b8b8b; }
.reef-other .reef-symbol { color: #7fe48d; }
.reef-symbol svg path:not([fill="none"]), .reef-symbol svg circle, .reef-symbol svg rect { fill: currentColor; }


/* v2.8.1 reef recovery */
.reef-show-button {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(116,255,147,.62);
  border-radius: 8px;
  background: rgba(68,201,101,.19);
  color: #d5ffdc;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.reef-show-button:hover,.reef-show-button:focus-visible { background: rgba(68,201,101,.31); outline: 2px solid rgba(116,255,147,.3); }
#reefCount { cursor: pointer; }
#reefCount[data-fallback="true"] { color: #17240f; background: #d9ff7e; }


/* v2.8.2 reliable reef rendering */
.leaflet-reefPane { pointer-events: auto !important; }
.reef-map-icon { z-index: 1; }
.reef-map-icon .reef-symbol {
  filter: drop-shadow(0 0 2px #001b0a) drop-shadow(0 0 6px rgba(76,255,125,.95)) drop-shadow(0 2px 3px #000);
}
.reef-map-icon.reef-site .reef-symbol {
  color: #74ff72;
  width: 36px;
  height: 36px;
}
.reef-name-tooltip {
  background: rgba(5,37,22,.94);
  color: #d8ffe0;
  border: 1px solid #70ff85;
  box-shadow: 0 2px 8px rgba(0,0,0,.65);
  font-weight: 800;
  font-size: 11px;
}
.reef-name-tooltip::before { border-top-color: #70ff85 !important; }

/* v2.9.0: bundled reef deployments, hover-only names, and home-inlet distance */
.reef-zoom-status {
  margin: 6px 0 8px;
  padding: 7px 8px;
  border: 1px solid rgba(116,255,147,.22);
  border-radius: 8px;
  background: rgba(68,201,101,.055);
  color: #bdeac7;
  line-height: 1.4;
}
.home-inlet-row {
  margin-top: 9px;
  border-color: rgba(255,181,46,.28);
  background: rgba(255,181,46,.045);
}
.home-inlet-row span { color: #ffe1a8; }
.home-inlet-note { margin-top: -2px; }
.leaflet-homeInletPane { pointer-events: auto !important; }
.reef-map-icon:not(.reef-site) .reef-symbol {
  filter: drop-shadow(0 0 2px rgba(0,0,0,.95)) drop-shadow(0 0 4px rgba(88,255,130,.55));
}