/* Reedy's Rigs — i-Boating-style nautical chart look */

:root {
  /* Chart palette — beige land, blue water, yellow accents (like i-Boating) */
  --land: #f4ead5;
  --land-dark: #e7d9b4;
  --water-shallow: #d4e8f5;
  --water-mid: #b8dbef;
  --water-deep: #8fc6e3;
  --chart-line: #2b5d8a;
  --chart-line-soft: #8aa8c2;
  --chart-yellow: #f6c23b;
  --chart-magenta: #c9418a;
  --chart-green: #4fa36b;

  /* UI chrome — dark panels so chart pops */
  --ink: #0b1b2b;
  --ink-mid: #1a2b3f;
  --ink-soft: #24374d;
  --ink-dim: #93a9c1;
  --text: #e6edf5;
  --text-soft: #b9c6d6;
  --accent: #f6c23b;
  --accent-hot: #ff8a48;
  --success: #4fe3a8;
  --warn: #ffcf6a;
  --danger: #ff6a6a;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-card: 0 10px 32px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.25);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", Consolas, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { overflow-x: hidden; }
body {
  font-family: var(--font);
  color: var(--text);
  background: #05101c;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}
#app {
  display: grid;
  grid-template-columns: 340px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    "top   top"
    "side  main";
  height: 100vh;
}

/* ---------- Top bar ---------- */
.topbar {
  grid-area: top;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: linear-gradient(180deg, #0e1e30 0%, #0a1523 100%);
  border-bottom: 1px solid #1b2e44;
  z-index: 1100;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 6px rgba(80, 150, 255, 0.28));
  flex: 0 0 44px;
}
.brand .logo img {
  width: 44px; height: 44px; object-fit: contain; display: block;
}
.brand h1 {
  font-size: 15px; margin: 0;
  letter-spacing: 0.2px; color: var(--text);
}
.brand .sub {
  font-size: 11px; margin: 2px 0 0;
  color: var(--ink-dim); letter-spacing: 0.3px;
}
.top-actions { display: flex; align-items: center; gap: 10px; }

/* Base-layer switcher (Chart / Satellite / Ocean) */
.base-switch {
  display: inline-flex;
  background: #0a1523;
  border: 1px solid #1b2e44;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.base-btn {
  background: transparent;
  color: var(--text-soft);
  border: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.3px;
}
.base-btn:hover { color: var(--text); background: #11223a; }
.base-btn.active {
  background: var(--accent);
  color: #0b1b2b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.ghost {
  background: transparent;
  border: 1px solid #1b2e44;
  color: var(--text); padding: 7px 11px; border-radius: 8px;
  font-size: 14px; cursor: pointer;
}
.ghost:hover { background: #11223a; }

/* ---------- Sidebar ---------- */
#sidebar {
  grid-area: side;
  background: #0a1523;
  border-right: 1px solid #1b2e44;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.filters { padding: 12px; border-bottom: 1px solid #1b2e44; }
#search {
  width: 100%;
  padding: 9px 11px;
  background: #11223a;
  border: 1px solid #1b2e44;
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
#search:focus { border-color: var(--accent); }
#search::placeholder { color: var(--ink-dim); }

.filter-block { margin-top: 12px; }
.filter-block > label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-dim);
  margin-bottom: 6px;
  font-weight: 600;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: #11223a;
  color: var(--text-soft);
  border: 1px solid #1b2e44;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.chip:hover { background: #1a3050; color: var(--text); }
.chip.active {
  background: var(--accent);
  color: #0b1b2b;
  border-color: var(--accent);
  font-weight: 600;
}
#inSeasonBtn {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: linear-gradient(90deg, #1a3050 0%, #11223a 100%);
}
#inSeasonBtn.active {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hot) 100%);
  color: #0b1b2b;
}

select {
  width: 100%;
  padding: 7px 9px;
  background: #11223a;
  border: 1px solid #1b2e44;
  color: var(--text);
  border-radius: 7px;
  font-size: 12.5px;
}
.toggle {
  display: flex; align-items: center; gap: 7px;
  margin: 5px 0; font-size: 12.5px; color: var(--text-soft);
  cursor: pointer; user-select: none;
}
.toggle input[type="checkbox"] { accent-color: var(--accent); }
.count { color: var(--ink-dim); font-size: 11.5px; margin: 12px 0 0; }

.mark-list {
  list-style: none; margin: 0; padding: 6px;
  flex: 1; overflow-y: auto;
}
.mark-list li {
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: 2px;
}
.mark-list li:hover {
  background: #11223a;
  border-color: #1b2e44;
}
.m-name { font-size: 13px; display: flex; align-items: center; gap: 7px; }
.m-meta { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
.pill {
  display: inline-block;
  background: #243a55;
  color: #d4e8f5;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.pill.ramp { background: #1d4e7a; color: #cfe8ff; }
.pill.reef { background: #7a4a1d; color: #ffe0c2; }
.pill.shell { background: #4a2d7a; color: #e0cfff; }

/* ---------- Main / map ---------- */
#mapWrap {
  grid-area: main;
  position: relative;
  overflow: hidden;
}
#map {
  width: 100%; height: 100%;
  background: var(--water-mid);  /* blue while tiles load */
}

/* Leaflet overrides — match chart colours */
.leaflet-container {
  font-family: var(--font);
  background: var(--water-mid);
}
.leaflet-popup-content-wrapper {
  background: #0f2035;
  color: var(--text);
  border: 1px solid #27415f;
  border-radius: 9px;
  box-shadow: var(--shadow-card);
}
.leaflet-popup-content { margin: 10px 12px; font-size: 12.5px; line-height: 1.45; }
.leaflet-popup-tip { background: #0f2035; border: 1px solid #27415f; }
.leaflet-popup-content a { color: var(--accent); }
.leaflet-control-zoom a {
  background: #0f2035;
  color: var(--text);
  border: 1px solid #27415f;
}
.leaflet-control-zoom a:hover { background: #1a3050; }
.leaflet-control-attribution {
  background: rgba(10, 21, 35, 0.85) !important;
  color: var(--ink-dim) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--text-soft) !important; }

/* Mark icons */
.mk { background: transparent; border: none; }

/* Nav icons — real IALA SVG symbols (rendered inline by app.js) */
.nav-icon {
  background: transparent;
  border: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.nav-icon svg { display: block; }

/* Small dot helpers for public ramps / piers (no IALA convention needed) */
.nav-dot { width: 10px; height: 10px; border-radius: 50%; }
.nav-dot.pubramp { background: #2fa8ff; border: 2px solid #fff; width: 12px; height: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.nav-dot.pier { background: #f6c23b; border: 2px solid #fff; width: 9px; height: 9px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); }

/* Channel line styling (handled inline now) */

/* ---------- Detail card (i-Boating-style info card) ---------- */
#detail {
  position: absolute;
  top: 12px; right: 12px;
  width: 360px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px);
  background: #0f2035;
  border: 1px solid #27415f;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  z-index: 600;
  display: flex; flex-direction: column;
  overflow: hidden;
}
#detail.hidden { display: none; }
.close {
  position: absolute; top: 8px; right: 8px;
  background: transparent;
  color: var(--text-soft);
  border: 0;
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  z-index: 10;
}
.close:hover { background: #1a3050; color: var(--text); }

.card-head {
  padding: 14px 16px 10px;
  background: linear-gradient(180deg, #14283e 0%, #0f2035 100%);
  border-bottom: 1px solid #1b2e44;
}
.card-badge {
  display: inline-block;
  background: var(--accent);
  color: #0b1b2b;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.card-head h2 {
  margin: 0;
  font-size: 17px;
  color: var(--text);
  letter-spacing: 0.2px;
}
.card-head .meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-dim);
}

.card-tabs {
  display: flex;
  gap: 0;
  background: #0a1523;
  border-bottom: 1px solid #1b2e44;
  overflow-x: auto;
  scrollbar-width: none;
}
.card-tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1;
  background: transparent;
  color: var(--text-soft);
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 10px 0;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.2px;
  min-width: 0;
}
.tab:hover { color: var(--text); background: #11223a; }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: #0f2035;
}

.card-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
}
.tab-body { display: none; }
.tab-body.active { display: block; }

.block { margin-bottom: 14px; }
.block h3 {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.1px;
  color: var(--ink-dim);
  margin: 0 0 6px;
  font-weight: 700;
}
.block p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-soft); }
.coords {
  font-family: var(--mono);
  font-size: 12px;
  background: #0a1523;
  color: var(--accent);
  padding: 4px 8px;
  border-radius: 5px;
  display: inline-block;
}
.species-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.species-tags span {
  background: #11223a;
  color: var(--text-soft);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  border: 1px solid #1b2e44;
}

/* Fishing tab summary banner */
.fish-summary {
  background: linear-gradient(90deg, rgba(246,194,59,0.14), rgba(246,194,59,0.04));
  border: 1px solid rgba(246,194,59,0.35);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
}
.fish-summary b { color: var(--accent); }
.fish-summary .fs-stat {
  display: inline-block;
  background: var(--accent);
  color: #0b1b2b;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  margin-right: 6px;
}
.fish-bite {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 10px 0 14px;
}
.fish-bite .fb {
  background: #0a1523;
  border: 1px solid #1b2e44;
  border-radius: 7px;
  padding: 7px 10px;
}
.fish-bite .fb .lab {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-dim);
  font-weight: 700;
}
.fish-bite .fb .v {
  font-size: 13px;
  color: var(--text);
  margin-top: 2px;
  font-weight: 600;
}
.fish-bite .fb .sub {
  font-size: 10.5px;
  color: var(--text-soft);
  margin-top: 1px;
}
.sp-section-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-dim);
  margin: 2px 0 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-section-head .count-pill {
  background: var(--accent);
  color: #0b1b2b;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
}

/* Fishing tab — species cards */
.sp-card {
  background: #0a1523;
  border: 1px solid #1b2e44;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 9px;
}
.sp-card.in-season {
  border-color: var(--accent);
  background: linear-gradient(180deg, #1a2414 0%, #0a1523 100%);
  box-shadow: 0 0 0 1px rgba(246, 194, 59, 0.15);
}
.sp-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.sp-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  display: flex; align-items: center; gap: 6px;
}
.sp-name .ic { font-size: 15px; }
.sp-season {
  font-size: 10.5px;
  color: var(--ink-dim);
  padding: 2px 7px;
  background: #11223a;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.sp-season.hot {
  background: var(--accent);
  color: #0b1b2b;
  font-weight: 700;
}
.sp-row {
  font-size: 12px;
  color: var(--text-soft);
  margin: 3px 0;
  line-height: 1.45;
}
.sp-row b { color: var(--text); font-weight: 600; }
.sp-tip {
  margin-top: 6px;
  padding: 6px 9px;
  background: #11223a;
  border-left: 2px solid var(--accent);
  border-radius: 0 5px 5px 0;
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.45;
}

.card-foot {
  padding: 10px 16px;
  border-top: 1px solid #1b2e44;
  background: #0a1523;
  font-size: 12px;
}
.card-foot a { color: var(--accent); text-decoration: none; }
.card-foot a:hover { text-decoration: underline; }

/* ---------- Marine mini-panel (bottom-left chip) ---------- */
.marine {
  position: absolute;
  left: 12px; bottom: 12px;
  width: 310px;
  background: #0f2035;
  border: 1px solid #27415f;
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  z-index: 500;
  overflow: hidden;
}
.marine-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 10px 12px;
  background: linear-gradient(180deg, #14283e 0%, #0f2035 100%);
  border-bottom: 1px solid #1b2e44;
}
.marine-head h3 { margin: 0; font-size: 13px; color: var(--text); }
.marine-head p { margin: 2px 0 0; font-size: 11px; color: var(--ink-dim); }
.marine-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #1b2e44;
}
.m-cell {
  background: #0f2035;
  padding: 8px 10px;
}
.m-cell.full { grid-column: 1 / -1; }
.m-cell .label {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ink-dim);
  font-weight: 600;
}
.m-cell .val {
  font-size: 14px;
  color: var(--text);
  margin-top: 2px;
  display: flex; align-items: center; gap: 5px;
}
.m-cell .sub {
  font-size: 11px;
  color: var(--text-soft);
  margin-top: 2px;
}
.wind-arrow {
  display: inline-block;
  color: var(--accent);
  font-size: 14px;
  transition: transform 0.3s;
}
.m-loading { padding: 14px; color: var(--ink-dim); font-size: 12px; }
.mini {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid #1b2e44;
  border-radius: 5px;
  width: 24px; height: 24px;
  cursor: pointer;
  font-size: 14px;
}
.mini:hover { background: #1a3050; color: var(--text); }

/* ---------- Legend ---------- */
.legend {
  position: absolute;
  right: 12px; bottom: 12px;
  background: #0f2035cc;
  backdrop-filter: blur(6px);
  border: 1px solid #27415f;
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 11px;
  z-index: 500;
  max-width: 200px;
}
.legend h4 {
  margin: 0 0 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-dim);
  font-weight: 700;
}
.legend .row {
  display: flex; align-items: center; gap: 7px;
  margin: 3px 0;
  color: var(--text-soft);
}
.legend hr {
  border: 0;
  border-top: 1px solid #1b2e44;
  margin: 8px 0 6px;
}
.legend .sym {
  width: 14px; height: 14px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
}
/* IALA lateral + safety marks (match the inline SVGs on the map) */
.legend .sym.port { width: 7px; height: 10px; background: #d32f2f; border: 1px solid #000; border-radius: 1px; }
.legend .sym.stbd {
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 11px solid #2e7d32;
  background: transparent;
  filter: drop-shadow(0 0 0.5px #000);
}
.legend .sym.safe {
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff;
  border: 1px solid #000;
  background-image: linear-gradient(90deg, #d32f2f 25%, #fff 25%, #fff 75%, #d32f2f 75%);
}
.legend .sym.bcn {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 11px solid #1a1a1a;
  background: transparent;
}
.legend .sym.by { width: 10px; height: 10px; background: #2e7d32; border-radius: 50%; border: 1px solid #000; }
.legend .sym.rk {
  background: transparent;
  color: #b71c1c;
  font-weight: 900;
  font-size: 13px;
}
.legend .sym.rk::before { content: "✳"; }
.legend .sym.wr { color: #b71c1c; font-size: 11px; background: transparent; border: 0; }
.legend .sym.wr::before { content: "⚓"; }

/* Shipping channel — Navionics-style pale lane with navy edges */
.legend .sym.ch {
  width: 20px; height: 8px;
  background: #7ec0e8;
  border-top: 1.5px solid #0f3a66;
  border-bottom: 1.5px solid #0f3a66;
  border-radius: 1px;
  opacity: 0.85;
}

/* Depth sounding numeric labels */
.sounding {
  background: transparent;
  border: none;
  font: 600 10.5px var(--mono);
  color: #0b3d66;
  text-shadow: 0 0 2px rgba(255,255,255,0.9), 0 0 3px rgba(255,255,255,0.7);
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: -0.3px;
}

/* 3-day daily forecast in Weather tab */
.dfc {
  background: #0a1523;
  border: 1px solid #1b2e44;
  border-radius: 8px;
  overflow: hidden;
}
.dfc-row {
  display: grid;
  grid-template-columns: 52px 1fr 68px 88px 58px;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #1b2e44;
  font-size: 11.5px;
  color: var(--text-soft);
}
.dfc-row:last-child { border-bottom: 0; }
.dfc-day { font-weight: 700; color: var(--text); font-size: 12px; }
.dfc-wx { color: var(--text-soft); font-size: 11px; }
.dfc-temp { color: var(--text); font-weight: 600; text-align: right; }
.dfc-temp .low { color: var(--ink-dim); font-weight: 500; }
.dfc-wind { color: var(--accent); font-size: 11px; white-space: nowrap; }
.dfc-rain { color: var(--text-soft); text-align: right; font-size: 11px; }
@media (max-width: 420px) {
  .dfc-row {
    grid-template-columns: 42px 1fr 54px 70px;
    font-size: 10.5px;
  }
  .dfc-rain { display: none; }
}

/* Fishing-mark legend chips (mirror the divIcon style, small) */
.legend .sym.mk-ramp, .legend .sym.mk-art,
.legend .sym.mk-shell, .legend .sym.mk-reef {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  outline: 1px solid #0b1b2b;
  font-size: 9px;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,0.6);
  font-weight: 700;
}
.legend .sym.mk-ramp { background: #1e88e5; }
.legend .sym.mk-art { background: #ff6a00; }
.legend .sym.mk-shell { background: #9c27b0; }
.legend .sym.mk-reef { background: #ff9800; }
.legend .swatch {
  width: 18px; height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.legend .swatch.d1 { background: #8fb8d4; }
.legend .swatch.d2 { background: #4e8bb3; }
.legend .swatch.d3 { background: #2e6590; }
.legend .swatch.d4 { background: #1b3f63; }
.legend .swatch.d5 { background: #0a2440; }
.legend .warn {
  margin: 6px 0 0;
  font-size: 10px;
  color: var(--warn);
  line-height: 1.35;
}
.legend .warn a { color: var(--accent); }

/* ---------- Mobile (real narrow viewport) ----------
   Strategy: two-row topbar (brand + ghost toggle on row 1, scrollable
   preset pills on row 2). Hide desktop-only device toggle. Expand tap
   targets to 40px+. Marine panel starts as a pill, expands on tap. */
@media (max-width: 780px) {
  #app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "top" "main";
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }
  .topbar {
    flex-wrap: wrap;
    padding: 8px 10px 6px;
    gap: 6px;
    row-gap: 8px;
    align-items: center;
    min-height: auto;
    min-width: 0;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
  }
  .brand { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .brand .logo { width: 34px; height: 34px; flex: 0 0 34px; }
  .brand .logo img { width: 34px; height: 34px; }
  .brand h1 {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .brand h1 .brand-accent { display: none; }
  .brand .sub { display: none; }
  .top-actions {
    order: 2;
    flex: 1 1 100%;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .top-actions::-webkit-scrollbar { display: none; }
  /* Sidebar toggle — anchor to top-right, always reachable, outside the
     scrollable top-actions row so it never scrolls off-screen. */
  #toggleSidebar {
    position: absolute;
    top: 8px;
    right: 10px;
    min-width: 44px;
    min-height: 40px;
    font-size: 20px;
    padding: 6px 10px;
    z-index: 10;
  }
  .topbar { position: relative; }
  /* Leave space on the right of the brand for the toggle. */
  .brand { margin-right: 52px; }
  /* Hide device preview toggle on a real phone — you’re already on mobile. */
  .device-toggle,
  #app .device-toggle,
  #app[data-device="desktop"] .device-toggle,
  #app[data-device="mobile"] .device-toggle { display: none !important; }
  /* Row 2: preset + drawer pills, horizontally scrollable. Larger targets. */
  .preset-switch,
  .drawer-btns {
    flex: 0 0 auto;
    padding: 3px;
  }
  .preset-btn,
  .drawer-btn {
    padding: 9px 10px;
    font-size: 11.5px;
    min-height: 36px;
    line-height: 1.15;
  }
  /* Restore drawer button labels — they were hidden before; icons alone aren’t clear. */
  .drawer-btn .db-tx { display: inline; font-size: 11px; }
  .drawer-btn .db-ic { font-size: 13px; }
  .drawer-btn { padding: 9px 9px; gap: 4px; }

  #sidebar {
    position: fixed;
    top: 96px; left: 0; bottom: 0;
    width: 88%; max-width: 340px;
    transform: translateX(-105%);
    transition: transform 0.25s;
    z-index: 1050;
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.5);
  }
  #sidebar.open { transform: translateX(0); }

  #detail {
    top: auto;
    bottom: 12px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: 65vh;
  }

  /* Marine panel — collapsible pill on mobile. Collapsed by default so the
     map fills the screen; tap the header to expand. */
  .marine {
    top: auto;
    bottom: 8px;
    left: 8px;
    right: 8px;
    max-width: none;
    width: auto;
    font-size: 11px;
    max-height: 55vh;
    overflow-y: auto;
    border-radius: 10px;
  }
  .marine .marine-head { cursor: pointer; user-select: none; }
  .marine .marine-head h3 { font-size: 12.5px; }
  .marine .marine-head::after {
    content: " ▾";
    color: var(--accent);
    font-size: 14px;
    margin-left: auto;
    align-self: center;
  }
  .marine.mobile-open .marine-head::after { content: " ▴"; }
  .marine:not(.mobile-open) .marine-body { display: none; }
  .marine:not(.mobile-open) { padding-bottom: 6px; }

  /* Legend — collapsible pill on mobile so the map stays visible. */
  .legend {
    top: auto;
    bottom: 56px;
    right: 8px;
    left: auto;
    width: auto;
    max-width: 78vw;
    max-height: calc(100vh - 220px);
    overflow-y: auto;
    padding: 8px 12px;
    font-size: 11px;
    border-radius: 10px;
    z-index: 500;
  }
  .legend:not(.open) > *:not(h4:first-child) { display: none; }
  .legend:not(.open) > h4:first-child { margin: 0; cursor: pointer; }
  .legend:not(.open) > h4:first-child::after { content: " ▾"; color: var(--accent); }
  .legend.open > h4:first-child::after { content: " ▴"; color: var(--accent); }
  .legend > h4 { cursor: pointer; min-height: 28px; display: flex; align-items: center; }

  .base-switch .base-btn { padding: 5px 8px; font-size: 11px; }

  /* Larger tap targets for chips & toggles in the sidebar */
  #sidebar .chip { padding: 9px 12px; min-height: 36px; }
  #sidebar .toggle { padding: 6px 0; min-height: 36px; }
  #sidebar .toggle input[type="checkbox"] { width: 18px; height: 18px; }
}

/* Very narrow phones (iPhone SE / small Androids): icon-only drawer buttons
   so all action buttons fit without horizontal scroll. */
@media (max-width: 400px) {
  .drawer-btn .db-tx { display: none; }
  .drawer-btn { padding: 9px 10px; }
  #app[data-device="mobile"] .drawer-btn .db-tx { display: none; }
}

/* ============================================================================
   Preset switcher (Fish Now / Navigate / Structure / Plan Trip)
   ============================================================================ */
.preset-switch {
  display: inline-flex;
  background: #0a1523;
  border: 1px solid #1b2e44;
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.preset-btn {
  background: transparent;
  color: var(--text-soft);
  border: 0;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.preset-btn:hover { color: var(--text); background: #11223a; }
.preset-btn.active {
  background: linear-gradient(180deg, #f6c23b 0%, #e6a820 100%);
  color: #0b1b2b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* ============================================================================
   Unified header pill groups — drawer buttons + device toggle
   Share the same visual language as .preset-switch / .preset-btn
   ============================================================================ */
.drawer-btns,
.device-toggle {
  display: inline-flex;
  background: #0a1523;
  border: 1px solid #1b2e44;
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.drawer-btn,
.dev-btn {
  background: transparent;
  color: var(--text-soft);
  border: 0;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.2px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.drawer-btn:hover,
.dev-btn:hover { color: var(--text); background: #11223a; }
.drawer-btn.active,
.dev-btn.active {
  background: linear-gradient(180deg, #f6c23b 0%, #e6a820 100%);
  color: #0b1b2b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.drawer-btn .db-ic { font-size: 13px; line-height: 1; }
.dev-btn svg { display: block; }

/* Narrow viewport: drawer-btn sizing handled by main mobile block above */

/* ============================================================================
   Layer group (collapsible sections in the sidebar)
   ============================================================================ */
.layer-group {
  margin-top: 10px;
  border: 1px solid #1b2e44;
  border-radius: 8px;
  background: #0a1523;
  overflow: hidden;
}
.layer-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  background: #0d1a2b;
  border-bottom: 1px solid transparent;
  transition: background 0.15s;
  user-select: none;
}
.layer-group > summary::-webkit-details-marker { display: none; }
.layer-group > summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--ink-dim);
  font-size: 11px;
  transition: transform 0.2s;
}
.layer-group[open] > summary::after { transform: rotate(180deg); }
.layer-group[open] > summary { border-bottom-color: #1b2e44; }
.layer-group > summary:hover { background: #122238; }
.lg-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
}
.lg-dot.base    { background: #64b5f6; }
.lg-dot.overlay { background: #ba68c8; }
.lg-dot.fish    { background: #ff8a48; }
.lg-dot.live    { background: #4fe3a8; }
.lg-hint {
  margin-left: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-dim);
  text-transform: none;
  letter-spacing: 0;
}
.lg-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lg-body .chips { gap: 5px; }
.lg-body .chips .chip {
  background: #132338;
  color: var(--text-soft);
  border: 1px solid #1e3452;
  padding: 6px 9px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 5px;
}
.lg-body .chips .chip:hover { background: #1b2e48; color: var(--text); }
.lg-body .chips .chip.active {
  background: var(--accent);
  color: #0b1b2b;
  border-color: var(--accent);
}
.lg-note {
  margin: 6px 2px 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--ink-dim);
}
.slider-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 4px;
}
.slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

/* ELITE tag pill — shown next to premium chart layers */
.elite-tag {
  display: inline-block;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  background: linear-gradient(135deg, #c8a24c 0%, #e8c877 100%);
  color: #0b1b2b;
  border-radius: 3px;
  margin-left: 4px;
  vertical-align: 1px;
  text-transform: uppercase;
}
.chip.active .elite-tag {
  background: #0b1b2b;
  color: #e8c877;
}

/* Mobile: shrink presets */
@media (max-width: 700px) {
  .preset-btn { padding: 5px 8px; font-size: 10.5px; letter-spacing: 0; }
}

/* Wind vector markers (live data grid) */
.wv-icon { background: transparent; border: 0; }
.wind-vector {
  display: flex; flex-direction: column; align-items: center;
  pointer-events: auto; cursor: help;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.wv-arrow-wrap {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.wv-svg { transform-origin: 50% 50%; }
.wv-label {
  margin-top: 1px;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(11,27,43,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Tide station markers */
.ts-icon { background: transparent; border: 0; }
.tide-station {
  display: flex; align-items: center; gap: 6px;
  pointer-events: auto; cursor: help;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45));
}
.ts-head {
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(11,27,43,0.85);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.25);
}
.ts-glyph {
  color: #0b1b2b;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.ts-label {
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(11,27,43,0.92);
  border: 1px solid rgba(255,255,255,0.08);
  line-height: 1.15;
}
.ts-name {
  font-size: 10px;
  font-weight: 700;
  color: #e8eef5;
  letter-spacing: 0.2px;
}
.ts-sub {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-top: 1px;
}
.tide-station[data-state="rising"] .ts-head { animation: tidePulseUp 2.4s ease-in-out infinite; }
.tide-station[data-state="falling"] .ts-head { animation: tidePulseDown 2.4s ease-in-out infinite; }
@keyframes tidePulseUp {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes tidePulseDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

/* ============================================================================
   Slide-in drawers — Bag limits & Ramps
   Fixed overlay. Scrim darkens the rest; panel slides in from right.
   ============================================================================ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.drawer[hidden] { display: none; }
.drawer.open { pointer-events: auto; }
.drawer-scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 24, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.drawer.open .drawer-scrim { opacity: 1; }

.drawer-panel {
  position: relative;
  width: min(520px, 100vw);
  height: 100vh;
  background: #0b1b2b;
  border-left: 1px solid #1b2e44;
  box-shadow: -12px 0 40px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.drawer.open .drawer-panel { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid #1b2e44;
  background: linear-gradient(180deg, #0d2238 0%, #0b1b2b 100%);
}
.drawer-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.2px;
}
.drawer-sub {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.45;
}
.drawer-sub a { color: #f6c23b; text-decoration: none; }
.drawer-sub a:hover { text-decoration: underline; }

.drawer-close {
  background: transparent;
  border: 1px solid #1b2e44;
  color: var(--text-soft);
  font-size: 20px;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: all 0.15s;
}
.drawer-close:hover { color: var(--text); background: #11223a; border-color: #274a6b; }

.drawer-search {
  padding: 10px 18px;
  border-bottom: 1px solid #14263b;
  background: #0a1523;
}
.drawer-search input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  background: #0b1b2b;
  border: 1px solid #1b2e44;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.drawer-search input:focus { border-color: #f6c23b; }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 18px 16px;
}
.drawer-body::-webkit-scrollbar { width: 8px; }
.drawer-body::-webkit-scrollbar-track { background: transparent; }
.drawer-body::-webkit-scrollbar-thumb { background: #1b2e44; border-radius: 4px; }

.drawer-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-top: 1px solid #1b2e44;
  font-size: 11px;
  color: var(--text-soft);
  background: #0a1523;
}
.drawer-foot a {
  color: #f6c23b;
  text-decoration: none;
  font-weight: 600;
  font-size: 11.5px;
}
.drawer-foot a:hover { text-decoration: underline; }

/* ----- Bag limits items ----- */
.bl-cat {
  margin: 12px 0 4px;
  padding: 6px 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f6c23b;
  background: #0d2238;
  border: 1px solid #1b2e44;
  border-radius: 6px;
}
.bl-cat:first-child { margin-top: 4px; }
.bl-item {
  padding: 10px 2px 10px;
  border-bottom: 1px solid #122235;
}
.bl-item:last-child { border-bottom: none; }
.bl-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.bl-name a { color: var(--text); text-decoration: none; }
.bl-name a:hover { color: #f6c23b; }
.bl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 4px 0;
}
.bl-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 999px;
  background: #0a1523;
  border: 1px solid #1b2e44;
  color: var(--text);
}
.bl-pill.size { color: #8fd4ff; border-color: #1d3c5a; }
.bl-pill.bag  { color: #f6c23b; border-color: #42371a; }
.bl-pill.sub  { color: #ff9c7a; border-color: #4a2a22; }
.bl-notes {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* ----- Ramps items ----- */
.rp-item {
  padding: 12px 2px;
  border-bottom: 1px solid #122235;
}
.rp-item:last-child { border-bottom: none; }
.rp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.rp-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.rp-rating {
  font-size: 10.5px;
  font-weight: 700;
  color: #f6c23b;
  white-space: nowrap;
}
.rp-area {
  font-size: 11.5px;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.rp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px 10px;
  margin: 6px 0;
  font-size: 11.5px;
}
.rp-stat b { color: var(--text); font-weight: 600; }
.rp-stat span { color: var(--text-soft); }
.rp-wind {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 4px;
}
.rp-wind-pill {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.rp-wind-pill.good { background: rgba(52, 168, 83, 0.18); color: #7dd395; border: 1px solid rgba(52,168,83,0.4); }
.rp-wind-pill.bad  { background: rgba(234, 88, 46, 0.16); color: #ff9c7a; border: 1px solid rgba(234,88,46,0.38); }
.rp-notes {
  font-size: 11.5px;
  color: var(--text-soft);
  margin: 6px 0 0;
  line-height: 1.5;
}
.rp-best { margin: 5px 0 0; font-size: 11.5px; color: #c9e6ff; }
.rp-best b { color: #f6c23b; }
.rp-hazards { margin: 5px 0 0; font-size: 11.5px; color: #ffc49b; }
.rp-hazards b { color: #ff9c7a; }
.rp-src { margin: 6px 0 0; font-size: 10.5px; }
.rp-src a { color: var(--text-soft); text-decoration: none; }
.rp-src a:hover { color: #f6c23b; text-decoration: underline; }

/* ============================================================================
   Device preview — Mobile frame when #app has data-device="mobile"
   Wraps the whole app in a phone-sized frame with a bezel.
   ============================================================================ */
/* Mobile preview frame — DESKTOP-ONLY. On a real phone the viewport IS
   the phone, so we don't wrap it in a fake bezel. This block makes the
   preview faithfully mirror real-mobile layout (single column, scrollable
   preset row, collapsible marine pill, hidden device toggle).
   NOTE: only applies at ≥1025px so that iPads/large phones (768-1024px) get
   the real full-bleed mobile layout, not a tiny centered mockup. */
@media (min-width: 1025px) {
  #app[data-device="mobile"] {
    width: 412px;
    height: 868px;
    max-width: 100vw;
    max-height: 100vh;
    margin: 0 auto;
    border: 10px solid #0a1523;
    border-radius: 32px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 2px #1b2e44;
    overflow: hidden;
    position: relative;
    /* CRITICAL: override the desktop 340px sidebar column so the map fills the frame */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "top" "main";
  }
  body:has(#app[data-device="mobile"]) {
    background: radial-gradient(1200px 600px at 50% 40%, #0f2438 0%, #06101c 75%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }

  /* Topbar inside the preview frame — two-row layout, scrollable pills */
  #app[data-device="mobile"] .topbar {
    position: relative;
    flex-wrap: wrap;
    padding: 8px 10px 6px;
    gap: 6px;
    row-gap: 8px;
    min-height: auto;
    overflow: hidden;
  }
  #app[data-device="mobile"] .brand { flex: 1 1 auto; min-width: 0; gap: 8px; margin-right: 52px; }
  #app[data-device="mobile"] .brand .logo { width: 34px; height: 34px; flex: 0 0 34px; }
  #app[data-device="mobile"] .brand .logo img { width: 34px; height: 34px; }
  #app[data-device="mobile"] .brand h1 {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  #app[data-device="mobile"] .brand h1 .brand-accent { display: none; }
  #app[data-device="mobile"] .brand .sub { display: none; }
  #app[data-device="mobile"] .top-actions {
    order: 2;
    flex: 1 1 100%;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  #app[data-device="mobile"] .top-actions::-webkit-scrollbar { display: none; }
  #app[data-device="mobile"] #toggleSidebar {
    position: absolute;
    top: 8px;
    right: 10px;
    min-width: 44px;
    min-height: 40px;
    font-size: 20px;
    padding: 6px 10px;
    z-index: 10;
  }
  #app[data-device="mobile"] .device-toggle { display: none !important; }
  #app[data-device="mobile"] .preset-switch,
  #app[data-device="mobile"] .drawer-btns {
    flex: 0 0 auto;
    padding: 3px;
  }
  #app[data-device="mobile"] .preset-btn,
  #app[data-device="mobile"] .drawer-btn {
    padding: 9px 12px;
    font-size: 12px;
    min-height: 36px;
    line-height: 1.15;
  }
  #app[data-device="mobile"] .drawer-btn .db-tx { display: inline; font-size: 11.5px; }
  #app[data-device="mobile"] .drawer-btn .db-ic { font-size: 14px; }

  /* Sidebar — slide-in from left inside the frame */
  #app[data-device="mobile"] #sidebar {
    position: absolute;
    top: 96px; left: 0; bottom: 0;
    width: 88%; max-width: 340px;
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    z-index: 1050;
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.5);
  }
  #app[data-device="mobile"] #sidebar.open,
  #app[data-device="mobile"] #sidebar.mobile-open { transform: translateX(0); }

  /* Map fills remaining space */
  #app[data-device="mobile"] #mapWrap { grid-area: main; position: relative; }
  #app[data-device="mobile"] #map { width: 100%; height: 100%; }

  /* Detail panel — bottom sheet style inside frame */
  #app[data-device="mobile"] #detail {
    top: auto;
    bottom: 12px;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: 65vh;
  }

  /* Marine panel — collapsible pill inside the frame too */
  #app[data-device="mobile"] .marine {
    top: auto;
    bottom: 8px;
    left: 8px;
    right: 8px;
    max-width: none;
    width: auto;
    font-size: 11px;
    max-height: 55vh;
    overflow-y: auto;
    border-radius: 10px;
  }
  #app[data-device="mobile"] .marine .marine-head { cursor: pointer; user-select: none; }
  #app[data-device="mobile"] .marine .marine-head h3 { font-size: 12.5px; }
  #app[data-device="mobile"] .marine .marine-head::after {
    content: " ▾";
    color: var(--accent);
    font-size: 14px;
    margin-left: auto;
    align-self: center;
  }
  #app[data-device="mobile"] .marine.mobile-open .marine-head::after { content: " ▴"; }
  #app[data-device="mobile"] .marine:not(.mobile-open) .marine-body { display: none; }
  #app[data-device="mobile"] .marine:not(.mobile-open) { padding-bottom: 6px; }

  /* Legend — collapsible pill */
  #app[data-device="mobile"] .legend {
    display: block;
    top: auto;
    bottom: 56px;
    right: 8px;
    left: auto;
    width: auto;
    max-width: 78vw;
    max-height: calc(100% - 220px);
    overflow-y: auto;
    padding: 8px 12px;
    font-size: 11px;
    border-radius: 10px;
    z-index: 500;
  }
  #app[data-device="mobile"] .legend:not(.open) > *:not(h4:first-child) { display: none; }
  #app[data-device="mobile"] .legend:not(.open) > h4:first-child { margin: 0; cursor: pointer; }
  #app[data-device="mobile"] .legend:not(.open) > h4:first-child::after { content: " ▾"; color: var(--accent); }
  #app[data-device="mobile"] .legend.open > h4:first-child::after { content: " ▴"; color: var(--accent); }
  #app[data-device="mobile"] .legend > h4 { cursor: pointer; min-height: 28px; display: flex; align-items: center; }

  /* Drawers full-width inside the frame */
  #app[data-device="mobile"] .drawer-panel { width: 100%; border-left: 0; }
}
/* Old mobile-preview rules removed — replaced by the comprehensive block above. */

/* ============================================================================
   Mobile responsive (drawer panels full-width on narrow viewport)
   Note: main mobile layout lives in the @media (max-width: 780px) block above.
   This block only handles drawer sizing.
   ============================================================================ */
@media (max-width: 780px) {
  .drawer-panel { width: 100vw; border-left: 0; }
  .drawer-head h2 { font-size: 15px; }
}

/* ===========================================================================
   Species overlay — legend + chip "overlay-on" state
   =========================================================================== */

/* Chip activated for overlay (distinct from .active used by single-select filter) */
.chip.overlay-on {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-color: currentColor;
  box-shadow: 0 0 0 1px currentColor, 0 0 14px rgba(255,255,255,0.08);
  color: #fff;
  position: relative;
}
.chip.overlay-on::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.15);
}

/* Legend injected after #speciesChips */
.species-legend {
  margin: 8px 0 14px;
  padding: 10px 10px 8px;
  border-radius: 10px;
  background: rgba(12, 18, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
}
.species-legend .sl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a93a6;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.species-legend .sl-clear {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffcf6a;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.species-legend .sl-clear:hover { background: rgba(255, 207, 106, 0.08); }

.species-legend .sl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  font-size: 13px;
  color: #e5e9f0;
}
.species-legend .sl-swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.species-legend .sl-name {
  flex: 1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.species-legend .sl-meta {
  font-size: 11px;
  color: #8a93a6;
  white-space: nowrap;
}
.species-legend .sl-x {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 16px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}
.species-legend .sl-x:hover { background: rgba(255,255,255,0.08); color: #ff6b6b; }

/* Make sure overlay rings sit above base tiles but below marker icons */
.leaflet-overlay-pane svg .leaflet-interactive { pointer-events: auto; }

/* ============================================================================
   MOBILE + iPad PORTRAIT REBUILD (v20)
   Desktop (>=1025px) is completely untouched — all rules below are inside
   @media (max-width: 1024px). This is the bottom-sheet / FAB layout.
   ========================================================================== */

/* By default hide mobile chrome on desktop */
#fabStack, #bottomSheet, #sheetScrim { display: none; }

@media (max-width: 1024px) {
  /* ---- Root layout: map takes whole viewport, chrome floats on top ---- */
  #app[data-device="desktop"] { grid-template-rows: 52px 1fr; grid-template-columns: 1fr; grid-template-areas: "top" "main"; }
  #app[data-device="mobile"] { grid-template-rows: 52px 1fr; grid-template-columns: 1fr; grid-template-areas: "top" "main"; }

  /* ---- Compact top bar (52px) ---- */
  .topbar { padding: 0 12px; min-height: 52px; }
  .brand h1 { font-size: 15px; line-height: 1.1; }
  .brand h1 .brand-accent { display: none; } /* just "Reedy's Rigs" */
  .brand .sub { display: none; }
  .brand { text-decoration: none; }
  .brand h1 { text-decoration: none; border: 0; }

  /* Hide old top-bar preset switch + drawer buttons (moved into sheet) */
  .top-actions .preset-switch { display: none; }
  .top-actions .drawer-btns   { display: none; }
  .top-actions #toggleSidebar { display: none; }

  /* ---- Sidebar hidden — its contents are cloned into the bottom sheet ---- */
  #sidebar { display: none !important; }

  /* ---- Map takes all remaining space ---- */
  #mapWrap { position: relative; width: 100vw; height: calc(100vh - 52px); height: calc(100dvh - 52px); }
  #map { width: 100%; height: 100%; }

  /* Leaflet native zoom control: hide on mobile, we use our FAB */
  .leaflet-control-zoom { display: none !important; }
  .leaflet-control-attribution { font-size: 9px; padding: 0 4px; }

  /* Detail card on mobile: full-screen bottom sheet */
  #detail.card {
    position: fixed; inset: auto 0 0 0; top: auto; right: 0; bottom: 0; left: 0;
    width: 100vw; max-width: 100vw; height: 85vh; height: 85dvh; max-height: 85dvh;
    border-radius: 18px 18px 0 0; border-bottom: 0;
    box-shadow: 0 -12px 48px rgba(0,0,0,0.55);
    z-index: 1250;
  }

  /* Marine panel: inline at bottom of sheet instead of floating over map */
  #marinePanel.marine { display: none; } /* we surface this via sheet summary */

  /* IALA legend: hidden from map, moved into full sheet under a "Legend" accordion */
  #mapWrap .legend { display: none !important; }

  /* ---- FAB stack: vertical, bottom-right, above sheet peek ---- */
  #fabStack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    right: 12px;
    bottom: calc(136px + env(safe-area-inset-bottom, 0px)); /* clears the peek sheet */
    z-index: 1180;
    transition: bottom 240ms cubic-bezier(.22,.61,.36,1);
  }
  #bottomSheet[data-snap="half"] ~ #fabStack,
  #app:has(#bottomSheet[data-snap="half"]) #fabStack { bottom: calc(52vh + 16px + env(safe-area-inset-bottom, 0px)); }
  #app:has(#bottomSheet[data-snap="full"]) #fabStack { bottom: calc(94vh + env(safe-area-inset-bottom, 0px)); opacity: 0; pointer-events: none; }
  .fab {
    width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(14, 30, 48, 0.94);
    color: #e8eef5;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800; line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) inset;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease, background 160ms ease;
  }
  .fab:active { transform: scale(0.92); }
  .fab.fab-primary { background: linear-gradient(180deg, #4a9bff 0%, #2e77d1 100%); color: #fff; border-color: rgba(255,255,255,0.35); }
  .fab.fab-primary.locating { animation: fabLocating 1.4s ease-in-out infinite; }
  .fab.fab-primary.tracking { background: linear-gradient(180deg, #35c26b 0%, #1d9a4f 100%); }
  .fab.fab-small { width: 40px; height: 40px; font-size: 22px; }
  @keyframes fabLocating {
    0%,100% { box-shadow: 0 0 0 0 rgba(74,155,255,0.55), 0 6px 16px rgba(0,0,0,0.45); }
    50% { box-shadow: 0 0 0 10px rgba(74,155,255,0), 0 6px 16px rgba(0,0,0,0.45); }
  }

  /* ---- Bottom sheet ---- */
  #bottomSheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, #0e1e30 0%, #0a1523 100%);
    border-top: 1px solid #1b2e44;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.45);
    z-index: 1190;
    transform: translateY(0);
    transition: height 260ms cubic-bezier(.22,.61,.36,1), transform 260ms cubic-bezier(.22,.61,.36,1);
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #bottomSheet[data-snap="peek"] { height: calc(130px + env(safe-area-inset-bottom, 0px)); }
  #bottomSheet[data-snap="half"] { height: 52vh; height: 52dvh; }
  #bottomSheet[data-snap="full"] { height: 94vh; height: 94dvh; }

  .sheet-grab {
    height: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
  }
  .sheet-grab:active { cursor: grabbing; }
  .sheet-handle {
    display: block;
    width: 44px; height: 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.22);
  }

  .sheet-peek {
    padding: 2px 12px 10px;
    flex-shrink: 0;
  }
  .sheet-peek-row {
    display: flex; align-items: center; gap: 8px;
  }
  .sheet-presets {
    display: flex; gap: 6px;
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 2px 0 4px;
    width: 100%;
  }
  .sheet-presets::-webkit-scrollbar { display: none; }
  .sp-btn {
    flex: 0 0 auto;
    padding: 9px 14px;
    min-height: 38px;
    border-radius: 10px;
    border: 1px solid #1b2e44;
    background: #0a1523;
    color: #b8c4d3;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    transition: background 140ms, color 140ms, border-color 140ms;
  }
  .sp-btn.active {
    background: var(--accent); color: #0b1b2b;
    border-color: var(--accent);
  }
  .sp-btn:active { transform: scale(0.96); }

  .sheet-summary {
    margin-top: 8px;
    gap: 10px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .ss-item {
    display: flex; flex-direction: column; gap: 1px;
    flex: 1 1 0; min-width: 0;
  }
  .ss-k {
    font-size: 9.5px; letter-spacing: 0.6px; text-transform: uppercase;
    color: var(--ink-dim);
    font-weight: 700;
  }
  .ss-v {
    font-size: 13px; font-weight: 800;
    color: #e8eef5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ss-expand {
    flex: 0 0 auto;
    padding: 8px 12px;
    min-height: 36px;
    border-radius: 10px;
    background: rgba(246,194,59,0.12);
    color: var(--accent);
    border: 1px solid rgba(246,194,59,0.3);
    font-size: 12px; font-weight: 800;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* ---- Sheet body (scroll region, revealed at half/full) ---- */
  .sheet-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4px 14px 20px;
  }
  #bottomSheet[data-snap="peek"] .sheet-body { display: none; }

  /* Cloned sidebar inside sheet — restyle for touch */
  .sheet-body .filters { padding: 0; border: 0; }
  .sheet-body #search {
    width: 100%;
    min-height: 48px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #0a1523;
    border: 1px solid #1b2e44;
    color: var(--text);
    font-size: 16px; /* 16px prevents iOS zoom on focus */
    margin-bottom: 14px;
  }
  .sheet-body .filter-block { margin-bottom: 14px; }
  .sheet-body .filter-block > label {
    display: block;
    font-size: 10.5px; letter-spacing: 0.8px; text-transform: uppercase;
    color: var(--ink-dim); font-weight: 800;
    margin-bottom: 8px;
  }
  .sheet-body .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .sheet-body .chip {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid #1b2e44;
    background: #0a1523;
    color: #b8c4d3;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .sheet-body .chip.active {
    background: var(--accent); color: #0b1b2b; border-color: var(--accent);
  }
  .sheet-body .chip.overlay-on {
    color: #0b1b2b;
  }
  .sheet-body #areaFilter {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    background: #0a1523; border: 1px solid #1b2e44;
    color: var(--text);
    border-radius: 10px;
    font-size: 15px;
  }
  .sheet-body details.layer-group {
    margin-top: 10px;
    border-top: 1px solid #1b2e44;
    padding-top: 10px;
  }
  .sheet-body details.layer-group > summary {
    min-height: 44px;
    padding: 8px 0;
    font-size: 14px; font-weight: 700;
  }
  .sheet-body .toggle {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px;
    padding: 4px 0;
    font-size: 14px;
  }
  .sheet-body .toggle input[type=checkbox] { width: 22px; height: 22px; }
  .sheet-body .mark-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
  }
  .sheet-body .mark-list li {
    padding: 12px 4px;
    border-top: 1px solid #1b2e44;
    min-height: 56px;
    cursor: pointer;
  }
  .sheet-body .mark-list li .m-name { font-size: 14px; font-weight: 700; }
  .sheet-body .mark-list li .m-meta { font-size: 12px; color: var(--ink-dim); margin-top: 3px; }

  /* Species legend inside sheet */
  .sheet-body .species-legend { margin-top: 14px; }

  /* Drawer panels (Bag limits / Ramps) — full-screen on mobile */
  .drawer-panel {
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh; height: 100dvh;
    right: 0 !important;
  }

  /* Scrim behind full sheet */
  .sheet-scrim {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1185;
    opacity: 0;
    transition: opacity 220ms ease;
    pointer-events: none;
  }
  .sheet-scrim.visible { opacity: 1; pointer-events: auto; }

  /* Cluster styling: inherit our brand navy + accent instead of default green/blue */
  .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
    background: rgba(14, 30, 48, 0.65);
  }
  .marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
    background: linear-gradient(180deg, #4a9bff 0%, #2e77d1 100%);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    border: 2px solid #0e1e30;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
}

/* iPad portrait (768-1024): same pattern as phone but larger type / wider snap */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  #bottomSheet[data-snap="peek"] { height: calc(148px + env(safe-area-inset-bottom, 0px)); }
  #bottomSheet[data-snap="half"] { height: 48vh; }
  .sp-btn { font-size: 14px; padding: 11px 18px; min-height: 44px; }
  .ss-v { font-size: 15px; }
  .fab { width: 54px; height: 54px; font-size: 22px; }
  .fab.fab-small { width: 46px; height: 46px; }
  .sheet-body .chip { font-size: 14px; padding: 10px 16px; min-height: 44px; }
}

/* Very small phones (SE 375x667) */
@media (max-width: 400px) {
  .brand h1 { font-size: 14px; }
  .sp-btn { padding: 8px 12px; font-size: 12.5px; }
  .ss-k { font-size: 9px; }
  .ss-v { font-size: 12.5px; }
  #fabStack { right: 10px; }
}

/* ============================================================================
   MARKER CLUSTER — Reedy's brand styling (v20)
   Overrides the default green/orange markercluster palette with our navy+blue.
   ============================================================================ */
.marker-cluster,
.leaflet-marker-icon.mc-cluster,
.mc-cluster {
  background: transparent !important;
}
.mc-cluster .mc-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  box-shadow:
    0 0 0 4px rgba(74, 155, 255, 0.18),
    0 2px 10px rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255,255,255,0.85);
  background: linear-gradient(145deg, #4a9bff 0%, #2e77d1 100%);
  transition: transform 120ms ease-out;
}
.mc-cluster:hover .mc-inner {
  transform: scale(1.08);
}
.mc-cluster .mc-inner.mc-sm {
  background: linear-gradient(145deg, #5ca8ff 0%, #3b85de 100%);
  font-size: 12px;
}
.mc-cluster .mc-inner.mc-md {
  background: linear-gradient(145deg, #4a9bff 0%, #2e77d1 100%);
  font-size: 13px;
}
.mc-cluster .mc-inner.mc-lg {
  background: linear-gradient(145deg, #1f5ca8 0%, #0e1e30 100%);
  box-shadow:
    0 0 0 5px rgba(74, 155, 255, 0.28),
    0 3px 14px rgba(0, 0, 0, 0.45);
  font-size: 14px;
}
/* Hide the default markercluster spans that pages older Leaflet versions show */
.mc-cluster > div:not(.mc-inner) { display: none !important; }
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
  transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}