/* ============================================================
   FishRadar — Bathymetry Boat Mode (Design Sprint 1)
   Deep Ocean tokens + mobile-first 2D fullscreen layout.
   Staging preview only — informational, not navigational.
   ============================================================ */

:root {
  /* Background — Deep Ocean */
  --color-void:    #06090F;
  --color-abyss:   #0A0F18;
  --color-deep:    #0E1420;
  --color-surface: #131B2A;
  --color-shelf:   #1A2436;
  --color-ridge:   #243044;

  /* Accents — Signal */
  --color-sonar:   #2EECC1;
  --color-sonar-2: #14A882;
  --color-buoy:    #FF9F43;
  --color-reef:    #FF6B6B;
  --color-beacon:  #54A0FF;
  --color-violet:  #A371F7;

  /* Text */
  --color-ink:    #F0F4FA;
  --color-ink-70: rgba(240,244,250,.70);
  --color-ink-60: rgba(240,244,250,.60);
  --color-ink-40: rgba(240,244,250,.40);
  --color-ink-20: rgba(240,244,250,.20);
  --color-ink-10: rgba(240,244,250,.10);
  --color-ink-06: rgba(240,244,250,.06);

  /* Sonar tints */
  --sonar-06: rgba(46,236,193,.06);
  --sonar-10: rgba(46,236,193,.10);
  --sonar-20: rgba(46,236,193,.22);
  --buoy-10: rgba(255,159,67,.12);
  --buoy-20: rgba(255,159,67,.30);
  --reef-10: rgba(255,107,107,.10);
  --reef-20: rgba(255,107,107,.30);
  --beacon-10: rgba(84,160,255,.12);

  /* Type */
  --font-sans:  'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale */
  --text-xs: 10px; --text-sm: 11px; --text-base: 13px; --text-md: 14px;
  --text-lg: 15px; --text-xl: 17px; --text-2xl: 19px; --text-3xl: 24px;

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;

  /* Radii */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

  /* Glass */
  --glass-blur: 20px;
  --glass-bg: rgba(10,15,24,.78);

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  /* Shadows */
  --shadow-card: 0 4px 16px rgba(0,0,0,.35);
  --shadow-pop: 0 12px 40px rgba(0,0,0,.55);
  --glow-sonar: 0 0 24px rgba(46,236,193,.28);

  /* Safe areas (fallback to 0) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  overflow: hidden;                 /* zero page scroll */
  overscroll-behavior: none;
  background: var(--color-void);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }
.label-mono {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-40);
}
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%);
  border: 1px solid var(--color-ink-10);
}

/* ============================================================
   App shell — full-bleed, 100dvh, map is the hero
   ============================================================ */
#boat-mode {
  position: fixed; inset: 0;
  width: 100%;
  height: 100vh;            /* fallback */
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  touch-action: none;       /* we handle pan/zoom */
  user-select: none; -webkit-user-select: none;
}

/* z0 — map canvas + overlays */
#map-stage {
  position: absolute; inset: 0; overflow: hidden; background: var(--color-abyss); cursor: grab;
  touch-action: none;            /* CRITICAL: touch-action does NOT inherit — must be set on the
                                    element that actually receives touches, otherwise mobile browsers
                                    hijack pan/pinch and fight our pointer handlers. */
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
}
#map-stage.dragging { cursor: grabbing; }
#bathy-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; user-select: none;
}
#land-tex {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 70% 18%, rgba(46,236,193,.045), transparent 60%);
}
#overlay { position: absolute; inset: 0; pointer-events: none; }
#overlay svg.routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ovl-item { position: absolute; pointer-events: none; will-change: transform; }
.depth-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  transform: translate(-50%,-50%); white-space: nowrap;
}

/* ============================================================
   Top row — lake chip (left) + fullscreen / exit (right)
   ============================================================ */
.top-row {
  position: absolute; z-index: 20;
  top: calc(var(--safe-t) + 10px);
  left: calc(var(--safe-l) + 10px);
  right: calc(var(--safe-r) + 10px);
  display: flex; align-items: flex-start; justify-content: space-between;
  pointer-events: none;
}
.top-row > * { pointer-events: auto; }
.lake-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--color-ink-10);
  box-shadow: var(--shadow-card);
}
.lake-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-sonar); box-shadow: 0 0 8px var(--color-sonar); }
.lake-chip b { font-weight: 600; font-size: var(--text-md); letter-spacing: -.01em; }
.lake-chip small { color: var(--color-ink-40); font-size: var(--text-xs); }
.top-actions { display: flex; gap: 8px; }
.icon-btn {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-ink-10); box-shadow: var(--shadow-card);
  color: var(--color-ink-70); transition: all .15s var(--ease);
  text-decoration: none;
}
.icon-btn:hover { color: var(--color-ink); border-color: var(--color-ink-20); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn svg { width: 20px; height: 20px; }
/* back-to-2d link with text label (wider pill) */
.back-2d-link {
  width: auto; padding: 0 14px; gap: 6px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}

/* ============================================================
   Quick rail — right, vertical, 4 actions (≥44px)
   ============================================================ */
.rail {
  position: absolute; z-index: 20;
  right: calc(var(--safe-r) + 10px);
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
.rail .rail-btn { pointer-events: auto; }
.rail-btn {
  position: relative;
  width: 52px; height: 52px; border-radius: var(--r-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border: 1px solid var(--color-ink-10);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-card); color: var(--color-ink-70);
  transition: all .15s var(--ease);
}
.rail-btn svg { width: 22px; height: 22px; }
.rail-btn .rb-label { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.rail-btn:hover { color: var(--color-ink); border-color: var(--color-ink-20); }
.rail-btn:active { transform: scale(.96); }
.rail-btn.active {
  background: linear-gradient(145deg, #2EECC1, #14A882);
  color: #06090F; border-color: transparent;
  box-shadow: var(--glow-sonar);
}
.rail-btn.error { border-color: var(--reef-20); background: var(--reef-10); color: var(--color-reef); }
.rail-btn.loading { border-color: var(--sonar-20); }
.rail-btn[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }
.rail-btn .badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill);
  background: var(--color-buoy); color: #1a1206;
  font-family: var(--font-mono); font-size: 8px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-void);
}
.rail-btn .spinner {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--sonar-20); border-top-color: var(--color-sonar);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Zoom cluster (below rail or bottom-right) */
.zoom-cluster {
  position: absolute; z-index: 20;
  right: calc(var(--safe-r) + 10px);
  bottom: calc(var(--dock-h, 150px) + 14px);   /* always clears the dock/HUD */
  display: flex; flex-direction: column; gap: 1px;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-card);
}
.zoom-cluster button {
  width: 44px; height: 44px; font-size: 20px; font-weight: 600;
  background: var(--glass-bg); color: var(--color-ink-70);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-ink-10);
}
.zoom-cluster button:active { background: var(--sonar-10); color: var(--color-sonar); }

/* ============================================================
   Depth legend — bottom-left, above dock
   ============================================================ */
.legend {
  position: absolute; z-index: 18;
  left: calc(var(--safe-l) + 10px);
  bottom: calc(var(--dock-h, 150px) + 14px);   /* always clears the dock/HUD */
  border-radius: var(--r-md); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 5px; width: 144px;
  box-shadow: var(--shadow-card);
}
.legend .ramp { height: 8px; border-radius: 4px; }
.legend .scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 8.5px; color: var(--color-ink-60); }

/* ============================================================
   Banner — manual / gps / offline
   ============================================================ */
.banner {
  position: absolute; z-index: 21;
  left: 50%; transform: translateX(-50%);
  top: calc(var(--safe-t) + 64px);
  max-width: calc(100% - 32px);
  display: none; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--sonar-20); box-shadow: var(--shadow-pop);
  font-size: var(--text-base); white-space: nowrap;
}
.banner.show { display: inline-flex; }
.banner.warn { border-color: var(--buoy-20); }
.banner.error { border-color: var(--reef-20); color: var(--color-reef); }
.banner .b-act { color: var(--color-sonar); font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); background: var(--sonar-10); }
.banner.warn .b-act { color: var(--color-buoy); background: var(--buoy-10); }

/* ============================================================
   Bottom dock — view switch + HUD + safety note
   ============================================================ */
.dock {
  position: absolute; z-index: 19; left: 0; right: 0;
  bottom: 0;
  padding: 10px 12px calc(var(--safe-b) + 10px);
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(6,9,15,.72) 0%, rgba(6,9,15,.30) 70%, transparent 100%);
}
.dock > * { pointer-events: auto; }

.view-switch {
  display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill);
  align-self: center; box-shadow: var(--shadow-card);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.view-switch::-webkit-scrollbar { display: none; }
.view-switch button {
  flex: 0 0 auto; padding: 10px 14px; border-radius: var(--r-pill);
  font-size: var(--text-base); font-weight: 600; color: var(--color-ink-60);
  white-space: nowrap; transition: all .15s var(--ease); min-height: 44px;
}
.view-switch button.active {
  background: linear-gradient(145deg, #2EECC1, #14A882); color: #06090F;
  box-shadow: 0 4px 14px rgba(46,236,193,.25);
}
.view-switch button:not(.active):active { background: var(--color-ink-06); }

.hud {
  display: flex; align-items: stretch; gap: 8px; align-self: stretch;
  justify-content: center;
}
.hud-card {
  flex: 1 1 0; max-width: 200px;
  border-radius: var(--r-md); padding: 8px 12px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: var(--shadow-card);
}
.hud-card .k { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-40); }
.hud-card .v { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.02em; }
.hud-card .v small { font-size: var(--text-sm); color: var(--color-ink-60); font-weight: 600; }
.hud-card.depth .v { color: var(--color-sonar); }
.hud-card.target .v { color: var(--color-buoy); }
.hud-card.muted .v { color: var(--color-ink-40); }

/* compact empty state when there is no position — no big dead card */
.hud-empty {
  display: none; align-items: center; gap: 8px;
  align-self: center; max-width: 100%;
  padding: 8px 14px; border-radius: var(--r-pill);
  color: var(--color-ink-60); font-size: var(--text-base);
  box-shadow: var(--shadow-card);
}
.hud-empty svg { flex: 0 0 auto; color: var(--color-sonar); opacity: .85; }
.hud-empty span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.safety-note {
  align-self: center; font-size: 10px; color: var(--color-ink-40);
  display: flex; align-items: center; gap: 5px;
}
.safety-note .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-ink-40); }

/* ── Telemetry instrument bar (speed / course / accuracy / status) ── */
.telemetry {
  display: none; align-items: stretch; gap: 6px; align-self: center;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
  padding: 5px 7px; border-radius: var(--r-pill); box-shadow: var(--shadow-card);
}
.telemetry::-webkit-scrollbar { display: none; }
.telemetry.show { display: inline-flex; }
.tel-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 1px 8px; white-space: nowrap; }
.tel-cell + .tel-cell { border-left: 1px solid var(--color-ink-10); }
.tel-cell .tk { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-40); }
.tel-cell .tv { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); letter-spacing: -.01em; }
.tel-cell .tv small { color: var(--color-ink-40); font-weight: 500; }
.tel-cell.status .tv { display: inline-flex; align-items: center; gap: 5px; }
.tel-cell.status .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--color-ink-40); }
.tel-status-off    .pip { background: var(--color-ink-40); }
.tel-status-live   .pip { background: var(--color-sonar); box-shadow: 0 0 7px var(--color-sonar); }
.tel-status-weak   .pip { background: var(--color-buoy); box-shadow: 0 0 7px var(--color-buoy); }
.tel-status-sim    .pip { background: var(--color-violet); box-shadow: 0 0 7px var(--color-violet); }
.tel-status-error  .pip { background: var(--color-reef); }
.tel-cell.status.tel-status-live .tv  { color: var(--color-sonar); }
.tel-cell.status.tel-status-weak .tv  { color: var(--color-buoy); }
.tel-cell.status.tel-status-sim  .tv  { color: var(--color-violet); }
.tel-cell.status.tel-status-error .tv { color: var(--color-reef); }
.tel-cell .flag-out { color: var(--color-reef); }

/* ── Add-to-home-screen hint (shown only when fullscreen API unavailable) ── */
.a2hs {
  position: absolute; z-index: 60; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--dock-h, 150px) + 64px);
  display: none; align-items: center; gap: 10px;
  max-width: calc(100% - 28px);
  padding: 10px 12px 10px 14px; border-radius: var(--r-lg);
  border: 1px solid var(--buoy-20); box-shadow: var(--shadow-pop);
  font-size: var(--text-base); line-height: 1.35;
}
.a2hs.show { display: inline-flex; }
.a2hs .a2hs-ico { flex: 0 0 auto; color: var(--color-buoy); }
.a2hs .a2hs-ico svg { width: 22px; height: 22px; }
.a2hs span { color: var(--color-ink-70); }
.a2hs b { color: var(--color-ink); font-weight: 600; }
.a2hs .a2hs-x { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--r-pill); background: var(--color-ink-06); color: var(--color-ink-60); display: flex; align-items: center; justify-content: center; }

/* fullscreen button = active state when in fullscreen */
.icon-btn.is-fs { color: var(--color-sonar); border-color: var(--sonar-20); background: var(--sonar-06); }

/* ============================================================
   Bottom sheets — Layers / Targets (≤ ½ screen)
   ============================================================ */
.scrim {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(4,7,12,.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
}
.scrim.show { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; z-index: 50; left: 0; right: 0; bottom: 0;
  height: var(--sheet-h, min(62dvh, 560px));
  max-height: calc(100dvh - var(--safe-t) - 12px);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-top: 1px solid var(--color-ink-10);
  box-shadow: var(--shadow-pop);
  transform: translateY(110%); transition: transform .28s var(--spring), height .24s var(--spring);
  display: flex; flex-direction: column;
  padding-bottom: calc(var(--safe-b) + 12px);
  overscroll-behavior: contain;
  touch-action: none;
}
.sheet.show { transform: translateY(0); }
.sheet[data-snap="collapsed"] { --sheet-h: min(34dvh, 280px); }
.sheet[data-snap="half"] { --sheet-h: min(58dvh, 520px); }
.sheet[data-snap="full"] { --sheet-h: calc(100dvh - var(--safe-t) - 12px); }
.sheet .grip { width: 40px; height: 4px; border-radius: 99px; background: var(--color-ink-20); margin: 10px auto 4px; flex: 0 0 auto; cursor: grab; touch-action: none; }
.sheet.dragging { transition: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 10px; flex: 0 0 auto; }
.sheet-head h3 { margin: 0; font-size: var(--text-xl); font-weight: 600; letter-spacing: -.01em; }
.sheet-head .close { width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--color-ink-06); display: flex; align-items: center; justify-content: center; color: var(--color-ink-60); }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 18px 8px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }

.section-label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-40); margin: 14px 0 8px; }

/* style cards */
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.style-card {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 1.5px solid var(--color-ink-10); padding: 0;
  text-align: left; transition: border-color .15s var(--ease);
}
.style-card .swatch { height: 40px; }
.style-card .sc-meta { padding: 7px 10px; display: flex; align-items: center; justify-content: space-between; }
.style-card .sc-meta b { font-size: var(--text-base); font-weight: 600; }
.style-card.active { border-color: var(--color-sonar); box-shadow: var(--glow-sonar); }
.style-card .flag { font-family: var(--font-mono); font-size: 8px; padding: 1px 5px; border-radius: 99px; background: var(--buoy-10); color: var(--color-buoy); letter-spacing: .06em; }

/* toggles */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--color-ink-06); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row .tr-label { font-size: var(--text-md); }
.toggle-row .tr-sub { font-size: 10px; color: var(--color-ink-40); }
.switch { position: relative; width: 44px; height: 26px; border-radius: 99px; background: var(--color-ink-10); transition: background .18s var(--ease); flex: 0 0 auto; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-ink-60); transition: transform .18s var(--spring), background .18s var(--ease); }
.switch.on { background: var(--sonar-20); }
.switch.on::after { transform: translateX(18px); background: var(--color-sonar); }
.switch[disabled] { opacity: .4; }

/* unit seg */
.seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--color-ink-10); }
.seg button { padding: 6px 16px; border-radius: var(--r-pill); font-size: var(--text-base); font-weight: 600; color: var(--color-ink-60); }
.seg button.active { background: var(--sonar-10); color: var(--color-sonar); }


.measure-dot { width: 5px; height: 5px; border-radius: 50%; transform: translate(-50%,-50%); background: var(--color-sonar); box-shadow: 0 0 0 1px rgba(6,9,15,.75); pointer-events: none; }

/* target rows */
.target-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--color-ink-06); width: 100%; text-align: left;
}
.target-row .tg-ico { width: 34px; height: 34px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--color-ink-06); }
.target-row .tg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.target-row .tg-name { display: block; font-size: var(--text-md); font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.target-row .tg-sub { display: block; font-size: 11px; color: var(--color-ink-40); line-height: 1.2; }
.target-row .tg-depth { flex: 0 0 auto; margin-left: auto; padding-left: 10px; font-family: var(--font-mono); font-size: var(--text-md); color: var(--color-sonar); white-space: nowrap; }
.target-row.active { background: var(--sonar-06); border-radius: var(--r-md); padding-left: 8px; padding-right: 8px; }

.empty-state { text-align: center; padding: 22px 16px; }
.empty-state .es-ico { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: var(--r-lg); background: var(--color-ink-06); display: flex; align-items: center; justify-content: center; color: var(--color-ink-40); }
.empty-state p { color: var(--color-ink-60); font-size: var(--text-base); margin: 0 0 4px; }
.empty-state small { color: var(--color-ink-40); font-size: 11px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--text-md);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease); min-height: 44px;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: linear-gradient(145deg, #2EECC1, #14A882); color: #06090F; box-shadow: 0 8px 24px rgba(46,236,193,.25); }
.btn--ghost { background: var(--color-ink-06); color: var(--color-ink); border: 1px solid var(--color-ink-10); }
.btn--full { width: 100%; }

/* 3D preview link inside Layers sheet — clearly marked, not a main mode */
.preview-link { justify-content: space-between; color: var(--color-ink-70); }
.preview-link .preview-tag {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .1em;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--buoy-10); color: var(--color-buoy); border: 1px solid var(--buoy-20);
}

/* ============================================================
   Loading screen (01)
   ============================================================ */
#loader {
  position: absolute; inset: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(120% 90% at 50% 30%, #0E1420, #06090F 70%);
  transition: opacity .4s var(--ease);
}
#loader.hide { opacity: 0; pointer-events: none; }
#loader .ring { width: 70px; height: 70px; border-radius: 50%; border: 2px solid var(--sonar-20); position: relative; }
#loader .ring::before { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--color-sonar); animation: spin 1s linear infinite; }
#loader .ring .pulse-dot { position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--color-sonar); animation: sonarPulse 2s infinite; }
@keyframes sonarPulse { 0% { box-shadow: 0 0 0 0 rgba(46,236,193,.5); } 70% { box-shadow: 0 0 0 18px rgba(46,236,193,0); } 100% { box-shadow: 0 0 0 0 rgba(46,236,193,0); } }
#loader h1 { font-family: var(--font-serif); font-weight: 400; font-size: 30px; margin: 0; letter-spacing: -.01em; }
#loader p { color: var(--color-ink-40); font-size: var(--text-base); margin: 0; }
#loader .prog { width: 180px; height: 3px; border-radius: 99px; background: var(--color-ink-10); overflow: hidden; }
#loader .prog i { display: block; height: 100%; width: 30%; background: var(--color-sonar); border-radius: 99px; transition: width .3s var(--ease); }

/* ============================================================
   Debug overlay (only with ?debug=1)
   ============================================================ */
#debug {
  position: absolute; z-index: 70; left: 10px; top: calc(var(--safe-t) + 64px);
  font-family: var(--font-mono); font-size: 10px; color: var(--color-sonar);
  background: rgba(6,9,15,.85); border: 1px solid var(--sonar-20); border-radius: 8px;
  padding: 8px 10px; max-width: 240px; line-height: 1.55; pointer-events: none;
  display: none; white-space: pre-wrap;
}
#debug.show { display: block; }

/* ============================================================
   Landscape — HUD single row, rail horizontal top-right
   ============================================================ */
@media (orientation: landscape) and (max-height: 560px) {
  .rail {
    flex-direction: row; top: calc(var(--safe-t) + 8px); right: calc(var(--safe-r) + 64px);
    transform: none;
  }
  .rail-btn { width: 46px; height: 46px; }
  .zoom-cluster { bottom: auto; top: calc(var(--safe-t) + 62px); }
  .legend { bottom: calc(var(--dock-h, 70px) + 10px); }
  .dock { padding-bottom: calc(var(--safe-b) + 6px); }
  .hud { justify-content: center; }
  .hud-card { padding: 5px 10px; }
  .hud-card .v { font-size: var(--text-lg); }
  .view-switch button { padding: 7px 12px; min-height: 36px; }
  .safety-note { display: none; }
}

/* ============================================================
   Desktop — side panel hint (≥1024px): wider dock, centered map
   ============================================================ */
@media (min-width: 1024px) {
  .legend { width: 168px; }
  .hud-card { max-width: 240px; }
  .rail-btn { width: 56px; height: 56px; }
}

/* ============================================================
   Fullscreen CSS fallback (iOS Safari blocks the FS API) —
   app-like: lock body, kill page scroll, honour safe-area insets.
   ============================================================ */
html, body { overflow-x: hidden; max-width: 100%; }
body.fs-fallback { position: fixed; inset: 0; width: 100%; height: 100dvh; overflow: hidden; }
body.fs-fallback #boat-mode {
  position: fixed; inset: 0; width: 100vw;
  height: 100vh; height: 100svh; height: 100dvh;
}
/* native fullscreen also benefits from the same lock */
:fullscreen #boat-mode, :-webkit-full-screen #boat-mode { width: 100vw; height: 100vh; }