/* Helm, home screen concept
   Theme: dark, locked at page level. Light variant is specified in CONCEPT.md.
   Radius system: surfaces 20px, tiles and list containers 16px, sheet top 26px,
   all standalone controls are full pills. */

:root {
  --bg: #070b12;
  --bg-2: #0a101b;
  --glass: rgba(255, 255, 255, 0.045);
  --glass-2: rgba(255, 255, 255, 0.08);
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-2: rgba(255, 255, 255, 0.17);
  --txt: #edf1f7;
  --txt-2: #97a1b4;
  --txt-3: #5f6a7d;
  --accent: #4da3ff;
  --accent-fill: #4da3ff;
  --on-accent: #04101f;
  --ok: #37d89b;
  --warn: #ffb35c;
  --bad: #ff7a6b;
  --info: #4da3ff;
  --soft: rgba(255, 255, 255, 0.05);
  --surface-float: rgba(12, 18, 29, 0.78);
  --surface-sheet: rgba(13, 19, 30, 0.92);
  --surface-overlay: rgba(10, 16, 27, 0.62);
  --scrim-c: rgba(3, 6, 11, 0.55);
  --shimmer-c: rgba(255, 255, 255, 0.055);
  --ring-track: rgba(255, 255, 255, 0.08);
  --ring-hole: #0c1420;
  --id-halo: rgba(2, 6, 14, 0.8);
  --r-card: 20px;
  --r-tile: 16px;
  --r-sheet: 26px;
  --font-d: "Clash Display", "Avenir Next", system-ui, sans-serif;
  --font-b: "General Sans", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

/* Light theme. The vivid accent stays on filled controls (--accent-fill);
   text and icon accent deepens (--accent) to hold WCAG AA on light surfaces. */
:root[data-theme="light"] {
  --bg: #edf1f7;
  --bg-2: #e2e9f2;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-2: rgba(255, 255, 255, 0.88);
  --stroke: rgba(18, 29, 47, 0.1);
  --stroke-2: rgba(18, 29, 47, 0.17);
  --txt: #16202e;
  --txt-2: #4c5768;
  --txt-3: #68758a;
  --accent: #1668c7;
  --on-accent: #04101f;
  --ok: #0b8f60;
  --warn: #9a6200;
  --bad: #c4442f;
  --info: #1668c7;
  --soft: rgba(18, 29, 47, 0.05);
  --surface-float: rgba(255, 255, 255, 0.8);
  --surface-sheet: rgba(252, 253, 255, 0.95);
  --surface-overlay: rgba(255, 255, 255, 0.72);
  --scrim-c: rgba(15, 23, 42, 0.32);
  --shimmer-c: rgba(18, 29, 47, 0.06);
  --ring-track: rgba(18, 29, 47, 0.12);
  --ring-hole: #ffffff;
  --id-halo: rgba(255, 255, 255, 0.9);
  color-scheme: light;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }
/* Paint the root too, so any sliver revealed behind the app (safe areas,
   an overscroll bounce) is the app's own colour rather than white. */
html { background: var(--bg); }

body {
  font-family: var(--font-b);
  background:
    radial-gradient(90rem 60rem at 75% -10%, rgba(38, 68, 110, 0.28), transparent 60%),
    radial-gradient(70rem 50rem at 10% 110%, rgba(20, 42, 74, 0.25), transparent 55%),
    var(--bg);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

[data-theme="light"] body {
  background:
    radial-gradient(90rem 60rem at 75% -10%, rgba(150, 183, 224, 0.4), transparent 60%),
    radial-gradient(70rem 50rem at 10% 110%, rgba(173, 196, 226, 0.32), transparent 55%),
    var(--bg);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.glass {
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- Presentation stage (desktop) ---------- */

.stage {
  height: 100dvh;
  display: grid;
  grid-template-columns: minmax(320px, 430px) 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 24px 0 64px;
  max-width: 1400px;
  margin: 0 auto;
}

.stage-side { max-width: 400px; }

.stage-brand {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 26px;
}

.stage-title {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}

.stage-copy {
  color: var(--txt-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 46ch;
  margin-bottom: 26px;
}

.stage-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}

.stage-toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--stroke);
}

.seg {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--txt-2);
  transition: color 0.2s, background 0.2s;
}

.seg.is-active {
  background: var(--glass-2);
  color: var(--txt);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.stage-notes { list-style: none; display: grid; gap: 12px; }

.stage-notes li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--txt-2);
  font-size: 13.5px;
  line-height: 1.5;
}

.stage-notes i { color: var(--accent); font-size: 16px; transform: translateY(2px); }

/* ---------- Device frame ---------- */

.device-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100dvh;
  transform: scale(var(--devscale, 1));
  transform-origin: center center;
}

.device {
  width: 404px;
  height: 874px;
  padding: 7px;
  border-radius: 60px;
  background: #0d121b;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 40px 90px rgba(2, 6, 14, 0.7),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  position: relative;
}

.device-island {
  position: absolute;
  top: 21px;
  left: 50%;
  transform: translateX(-50%);
  width: 112px;
  height: 32px;
  border-radius: 999px;
  background: #02040a;
  z-index: 40;
}

/* ---------- App shell ---------- */

.app {
  position: relative;
  height: 100%;
  border-radius: 54px;
  overflow: hidden;
  background:
    radial-gradient(120% 55% at 50% 30%, rgba(31, 58, 96, 0.30), transparent 65%),
    linear-gradient(180deg, #0a1220 0%, var(--bg) 46%, #05080e 100%);
}

[data-theme="light"] .app {
  background:
    radial-gradient(120% 55% at 50% 30%, rgba(190, 214, 240, 0.55), transparent 65%),
    linear-gradient(180deg, #f7fafd 0%, #eef3f9 46%, #e4ecf5 100%);
}

.app-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* Clear the floating tab bar (64px tall, 12px up, plus the home
     indicator) so the last row is never sliced by it. */
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

.app-scroll::-webkit-scrollbar { display: none; }

.statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px 0;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.75;
}

.sb-icons { display: flex; gap: 5px; font-size: 14px; }

/* ---------- Header ---------- */

.app-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 0;
}

.avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 16px;
  color: var(--txt);
  background: linear-gradient(145deg, #1d2c44, #12203a);
  border: 1px solid var(--stroke-2);
  transition: transform 0.15s var(--ease-out);
}

.avatar:active { transform: scale(0.94); }

.greet { flex: 1; min-width: 0; }

.greet-name {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.status-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--txt-2);
  transition: opacity 0.15s;
}

.status-line:active { opacity: 0.6; }

.status-line .ph-caret-right { font-size: 11px; color: var(--txt-3); }

.dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--warn);
  flex: none;
}

.dot[data-tone="ok"] { background: var(--ok); }
.dot[data-tone="warn"] { background: var(--warn); }
.dot[data-tone="muted"] { background: var(--txt-3); }

.icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 19px;
  color: var(--txt-2);
  background: var(--glass);
  border: 1px solid var(--stroke);
  transition: transform 0.15s var(--ease-out), color 0.2s;
}

.icon-btn:active { transform: scale(0.92); }

.badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-size: 10.5px;
  font-weight: 600;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
}

/* ---------- Chips row ---------- */

.chips {
  display: flex;
  gap: 8px;
  padding: 12px 20px 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  font-size: 12px;
  font-weight: 500;
  color: var(--txt-2);
  transition: transform 0.15s var(--ease-out);
}

button.chip:active { transform: scale(0.96); }

.chip i { font-size: 14px; }

.wx-sun { color: #ffc868; }

[data-theme="light"] .wx-sun { color: #b07a0a; }

.chip-static { pointer-events: none; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 385px;
  margin-top: 4px;
}

.hero-ready { position: absolute; inset: 0; }

.hero-canvas,
.hero-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-canvas {
  opacity: 0;
  transition: opacity 0.8s ease;
  touch-action: none;
  cursor: grab;
}

.hero-canvas.is-ready { opacity: 1; }
.hero-canvas:active { cursor: grabbing; }

.hero-markers { position: absolute; inset: 0; pointer-events: none; }

.marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  display: grid;
  place-items: center;
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s;
}

.marker.is-on { opacity: 1; }

.marker-core {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--txt);
  background: var(--surface-overlay);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.16), 0 4px 14px rgba(2, 6, 14, 0.5);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}

.marker:active .marker-core { transform: scale(0.88); }

.marker[data-tone="warn"] .marker-core {
  color: var(--warn);
  box-shadow: 0 0 0 3px rgba(255, 179, 92, 0.22), 0 4px 14px rgba(2, 6, 14, 0.5);
}

.marker[data-tone="warn"] .marker-core { animation: markerPulse 2.4s ease-in-out infinite; }

@keyframes markerPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255, 179, 92, 0.22), 0 4px 14px rgba(2, 6, 14, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(255, 179, 92, 0.08), 0 4px 14px rgba(2, 6, 14, 0.5); }
}

.marker[data-occ="1"] { opacity: 0.18; pointer-events: none; }

.marker[hidden] { display: none; }

.hero-top {
  position: absolute;
  top: 10px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

.hero-top > * { pointer-events: auto; }

.boat-id {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  text-shadow: 0 2px 12px var(--id-halo);
  padding: 6px 10px;
  margin: -6px -10px;
  border-radius: 12px;
  transition: background 0.15s, transform 0.15s var(--ease-out);
}

.boat-id:active { background: var(--soft); transform: scale(0.97); }

.boat-name {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.boat-name i { font-size: 11px; color: var(--txt-2); }

.boat-sub { font-size: 11px; color: var(--txt-2); margin-top: 1px; }

.hero-caption {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface-overlay);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--txt-2);
  white-space: nowrap;
  transition: opacity 0.6s, transform 0.6s;
}

.hero-caption i { color: var(--accent); font-size: 14px; }

.hero-caption.is-gone { opacity: 0; transform: translateX(-50%) translateY(6px); pointer-events: none; }

/* Skeleton and error state for the 3D stage */

.hero-skel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 12px;
  color: var(--txt-3);
  transition: opacity 0.5s;
}

.hero-skel.is-hidden { opacity: 0; pointer-events: none; }

.skel-blob {
  width: 225px;
  height: 64px;
  border-radius: 40px;
  background: var(--glass);
  border: 1px solid var(--stroke);
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--shimmer-c), transparent);
  animation: shimmer 1.8s infinite;
}

@keyframes shimmer { 100% { transform: translateX(100%); } }

.skel-retry { margin-top: 2px; }

/* First run hero */

.hero-first {
  position: absolute;
  inset: 10px 20px 6px;
  border-radius: var(--r-card);
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(77, 163, 255, 0.10), transparent 70%),
    var(--glass);
  border: 1px dashed var(--stroke-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 26px;
  gap: 10px;
}

.first-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 30px;
  color: var(--accent);
  background: rgba(77, 163, 255, 0.10);
  border: 1px solid rgba(77, 163, 255, 0.25);
  margin-bottom: 2px;
}

.hero-first h2 {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
}

.hero-first p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--txt-2);
  max-width: 30ch;
}

.first-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--txt-2);
}

.first-steps > span { display: inline-flex; align-items: center; gap: 5px; }

.first-steps i { color: var(--accent); font-size: 14px; }

.first-steps .sep { color: var(--txt-3); font-size: 10px; }

.first-ctas { display: flex; gap: 10px; margin-top: 8px; }

.first-note { font-size: 11px; color: var(--txt-3); }

/* ---------- Pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.15s var(--ease-out), background 0.2s;
}

.pill:active { transform: scale(0.96); }

.pill.sm { height: 32px; padding: 0 13px; font-size: 12px; font-weight: 500; }

.pill.primary {
  background: linear-gradient(180deg, #63b1ff, var(--accent-fill));
  color: var(--on-accent);
  box-shadow: 0 6px 18px rgba(77, 163, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.pill.ghost {
  background: var(--surface-overlay);
  border: 1px solid var(--stroke-2);
  color: var(--txt);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pill i { font-size: 15px; }

/* ---------- Status cards ---------- */

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 20px 0;
}

.card {
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 13px 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 8px;
  min-height: 108px;
  transition: transform 0.15s var(--ease-out), background 0.2s;
}

.card:active { transform: scale(0.97); background: var(--glass-2); }

.card-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-ic {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 16px;
  background: var(--soft);
  border: 1px solid var(--stroke);
  color: var(--txt-2);
}

.card-ic[data-tone="ok"] { color: var(--ok); background: rgba(55, 216, 155, 0.08); border-color: rgba(55, 216, 155, 0.2); }
.card-ic[data-tone="warn"] { color: var(--warn); background: rgba(255, 179, 92, 0.09); border-color: rgba(255, 179, 92, 0.22); }
.card-ic[data-tone="info"] { color: var(--info); background: rgba(77, 163, 255, 0.09); border-color: rgba(77, 163, 255, 0.22); }
.card-ic[data-tone="muted"] { color: var(--txt-3); }

.card-body { display: flex; flex-direction: column; gap: 2px; }

.card-label { font-size: 11.5px; font-weight: 500; color: var(--txt-2); }

.card-value {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.card.is-muted .card-value { color: var(--txt-3); }

.card-sub { font-size: 11px; color: var(--txt-3); }

/* Fuel ring */

.ring {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--ring-track) 0);
}

.ring::before {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 999px;
  background: var(--ring-hole);
}

.ring span { position: relative; font-size: 8.5px; font-weight: 600; color: var(--txt-2); }

/* Readiness segments */

.segs { display: inline-flex; gap: 4px; }

.segs i {
  width: 15px;
  height: 4px;
  border-radius: 999px;
  background: var(--ok);
}

.segs i.is-off { background: transparent; box-shadow: inset 0 0 0 1px var(--stroke-2); }

/* ---------- Quick actions ---------- */

.actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 22px 20px 0;
}

.qa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 13px 4px 11px;
  border-radius: var(--r-tile);
  background: var(--glass);
  border: 1px solid var(--stroke);
  transition: transform 0.15s var(--ease-out), background 0.2s;
}

.qa:active { transform: scale(0.95); background: var(--glass-2); }

.qa-ic {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 19px;
  color: var(--accent);
  background: rgba(77, 163, 255, 0.09);
  border: 1px solid rgba(77, 163, 255, 0.18);
}

.qa-label { font-size: 11px; font-weight: 500; color: var(--txt-2); }

/* ---------- Today ---------- */

.today { padding: 26px 20px 0; }

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.sec-head h2 {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
}

.link { font-size: 12.5px; font-weight: 500; color: var(--accent); }

.link:active { opacity: 0.6; }

.today-list { border-radius: var(--r-tile); overflow: hidden; }

.t-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-align: left;
  transition: background 0.15s;
}

.t-item:active { background: var(--glass-2); }

.t-item + .t-item { border-top: 1px solid var(--stroke); }

.t-ic {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: var(--txt-2);
  background: var(--soft);
  border: 1px solid var(--stroke);
}

.t-ic[data-tone="warn"] { color: var(--warn); background: rgba(255, 179, 92, 0.09); border-color: rgba(255, 179, 92, 0.22); }
.t-ic[data-tone="info"] { color: var(--info); background: rgba(77, 163, 255, 0.09); border-color: rgba(77, 163, 255, 0.22); }

.t-body { flex: 1; min-width: 0; }

.t-title {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.t-sub { font-size: 11.5px; color: var(--txt-3); margin-top: 1px; }

.t-item > .ph-caret-right { color: var(--txt-3); font-size: 13px; flex: none; }

.bottom-space { height: 108px; }

/* ---------- Tab bar ---------- */

.tabbar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  height: 64px;
  border-radius: 999px;
  background: var(--surface-float);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 14px 34px rgba(2, 6, 14, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: stretch;
  padding: 0 8px;
  z-index: 20;
}

[data-theme="light"] .tabbar {
  box-shadow: 0 14px 34px rgba(23, 42, 71, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--txt-3);
  font-size: 10px;
  font-weight: 500;
  border-radius: 999px;
  transition: color 0.2s, transform 0.15s var(--ease-out);
}

.tab i { font-size: 21px; }

.tab:active { transform: scale(0.92); }

.tab.is-active { color: var(--accent); }

/* ---------- Sheet ---------- */

.scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-c);
  z-index: 30;
  opacity: 0;
  transition: opacity 0.3s;
}

.scrim.is-open { opacity: 1; }

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--surface-sheet);
  border: 1px solid var(--stroke-2);
  border-bottom: none;
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: 0 -18px 50px rgba(2, 6, 14, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateY(105%);
  transition: transform 0.34s var(--ease-out);
  touch-action: none;
}

[data-theme="light"] .sheet {
  box-shadow: 0 -18px 50px rgba(23, 42, 71, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.sheet.is-open { transform: translateY(0); }

.sheet.is-dragging { transition: none; }

.sheet-grab {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: var(--stroke-2);
  margin: 4px auto 12px;
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.sheet-ic {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 21px;
  color: var(--accent);
  background: rgba(77, 163, 255, 0.09);
  border: 1px solid rgba(77, 163, 255, 0.2);
}

.sheet-titles { flex: 1; min-width: 0; }

.sheet-head h3 {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 1.15;
}

.sheet-sub { font-size: 11.5px; color: var(--txt-3); }

.chip-status {
  flex: none;
  height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--txt-2);
  background: var(--soft);
  border: 1px solid var(--stroke);
}

.chip-status[data-tone="ok"] { color: var(--ok); background: rgba(55, 216, 155, 0.09); border-color: rgba(55, 216, 155, 0.22); }
.chip-status[data-tone="warn"] { color: var(--warn); background: rgba(255, 179, 92, 0.1); border-color: rgba(255, 179, 92, 0.24); }
.chip-status[data-tone="info"] { color: var(--info); background: rgba(77, 163, 255, 0.1); border-color: rgba(77, 163, 255, 0.24); }

.sheet-rows {
  padding: 4px 0 2px;
  max-height: min(52vh, 460px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.s-row { padding: 11px 2px; }

.s-row + .s-row { border-top: 1px solid var(--stroke); }

.s-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.s-label { font-size: 13px; color: var(--txt-2); }

.s-value {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

.s-value[data-tone="ok"] { color: var(--ok); }
.s-value[data-tone="warn"] { color: var(--warn); }
.s-value[data-tone="bad"] { color: var(--bad); }
.s-value[data-tone="info"] { color: var(--info); }

.s-note { font-size: 11.5px; color: var(--txt-3); margin-top: 3px; text-align: right; }

.sheet-actions { display: flex; gap: 10px; margin-top: 10px; }

.sheet-actions .primary { flex: 1.4; justify-content: center; }
.sheet-actions .ghost { flex: 1; justify-content: center; }

/* Garage rows (boat switcher) */

.g-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  text-align: left;
  transition: opacity 0.15s;
}

.g-row:active { opacity: 0.55; }

.g-row + .g-row { border-top: 1px solid var(--stroke); }

.g-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.g-name { font-size: 14px; font-weight: 600; }

.g-spec { font-size: 11.5px; color: var(--txt-3); }

.g-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--txt-3);
}

.g-side .g-active { font-size: 19px; color: var(--accent); }

.spin { animation: spin 1.2s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Toast ---------- */

.toast {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 40;
  max-width: 84%;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--surface-sheet);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(2, 6, 14, 0.55);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--txt-2);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s var(--ease-out);
  pointer-events: none;
}

.toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Boat switching and processing states ---------- */

.hero-canvas.is-swapping { opacity: 0.1; transition-duration: 0.18s; }

.hero.is-processing .hero-canvas { opacity: 0; }

.hero.is-processing .hero-markers,
.hero.is-processing .hero-caption,
.hero.is-processing .hero-top .pill {
  display: none;
}

/* ---------- Demo chip (mobile only) ---------- */

.demo-chip {
  position: absolute;
  right: 14px;
  bottom: 92px;
  z-index: 21;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: none;
  place-items: center;
  font-size: 17px;
  color: var(--txt-2);
  background: var(--surface-float);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.theme-chip { bottom: 140px; }

/* ---------- Responsive: full-bleed app under 1024px ---------- */

@media (max-width: 1023px) {
  /* The app fills the viewport and scrolls INTERNALLY. Letting the page
     itself scroll meant an iPhone's home-indicator inset pushed the frame
     a few px past the body, and rubber-banding exposed a strip of empty
     background under the app (owner, 2026-08-12). */
  html, body { overflow: hidden; overscroll-behavior: none; }
  .stage { display: block; height: 100dvh; padding: 0; max-width: none; }
  .stage-side { display: none; }
  .device-wrap { transform: none; height: 100dvh; }
  .device {
    width: 100%;
    height: 100dvh;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  .device-island { display: none; }
  .app { border-radius: 0; }
  .statusbar { display: none; }
  .app-header { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
  .demo-chip { display: grid; }
}

/* ---------- Accessibility fallbacks ---------- */

@media (prefers-reduced-transparency: reduce) {
  .glass, .card, .qa, .chip, .tabbar, .sheet, .toast, .pill.ghost,
  .marker-core, .hero-caption, .demo-chip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #0c1119;
  }
  [data-theme="light"] .glass, [data-theme="light"] .card, [data-theme="light"] .qa,
  [data-theme="light"] .chip, [data-theme="light"] .tabbar, [data-theme="light"] .sheet,
  [data-theme="light"] .toast, [data-theme="light"] .pill.ghost, [data-theme="light"] .marker-core,
  [data-theme="light"] .hero-caption, [data-theme="light"] .demo-chip {
    background: #ffffff;
  }
}

/* ---------- Explore / Plan a Run ---------- */

.explore {
  position: absolute;
  inset: 0;
  z-index: 5;
  isolation: isolate;
  background: var(--bg);
}

.app.on-explore .app-scroll { display: none; }
.app.on-explore #demoChip { display: none; }

.ex-map { position: absolute; inset: 0; }

.ex-map .leaflet-container {
  width: 100%;
  height: 100%;
  background: var(--bg);
  font-family: var(--font-b);
}

/* Tint the basemap toward the app's marine palette, under routes and markers */
.ex-map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  background: rgba(21, 39, 70, 0.32);
}

[data-theme="light"] .ex-map::after { background: rgba(140, 175, 220, 0.14); }

.ex-map .leaflet-tile { filter: saturate(1.12) brightness(0.94) contrast(1.04); }

[data-theme="light"] .ex-map .leaflet-tile { filter: saturate(1.05) contrast(1.02); }

.leaflet-control-attribution {
  background: rgba(10, 16, 27, 0.55) !important;
  color: var(--txt-3) !important;
  font-size: 9px !important;
  padding: 2px 7px !important;
  border-radius: 8px 0 0 0;
}

.leaflet-control-attribution a { color: var(--txt-3) !important; }

[data-theme="light"] .leaflet-control-attribution { background: rgba(255, 255, 255, 0.65) !important; }

.ex-map .leaflet-bottom { bottom: 176px; }

.ex-topfade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 165px;
  z-index: 705;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 11, 18, 0.88), rgba(7, 11, 18, 0.35) 55%, transparent);
}

[data-theme="light"] .ex-topfade {
  background: linear-gradient(180deg, rgba(237, 241, 247, 0.92), rgba(237, 241, 247, 0.4) 55%, transparent);
}

.ex-statusbar { position: absolute; top: 0; left: 0; right: 0; z-index: 745; }

/* Search stack */

.ex-top { position: absolute; top: 46px; left: 14px; right: 14px; z-index: 740; }

.ex-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 6px 0 16px;
  border-radius: 999px;
  background: var(--surface-float);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  box-shadow: 0 10px 30px rgba(2, 6, 14, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

[data-theme="light"] .ex-search { box-shadow: 0 10px 30px rgba(23, 42, 71, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.8); }

.ex-search > .ph-magnifying-glass { font-size: 17px; color: var(--txt-3); }

.ex-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--txt);
  appearance: none;
}

.ex-search input::placeholder { color: var(--txt-3); }
.ex-search input::-webkit-search-cancel-button { display: none; }

.ex-mic {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--accent);
  transition: transform 0.15s var(--ease-out);
}

.ex-mic:active { transform: scale(0.9); }

.ex-boatline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0 8px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--txt-2);
  transition: background 0.15s;
}

.ex-boatline:active { background: var(--soft); }
.ex-boatline b { color: var(--txt); font-weight: 600; }
.ex-boatline .ph-caret-down { font-size: 10px; color: var(--txt-3); }

.ex-results {
  margin-top: 8px;
  border-radius: 16px;
  background: var(--surface-sheet);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 16px 40px rgba(2, 6, 14, 0.45);
  max-height: 262px;
  overflow-y: auto;
  scrollbar-width: none;
}

.ex-result {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  text-align: left;
}

.ex-result + .ex-result { border-top: 1px solid var(--stroke); }
.ex-result:active { background: var(--soft); }
.ex-result > i { font-size: 17px; color: var(--txt-2); }
.ex-result span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ex-result span b { font-size: 13.5px; font-weight: 600; }
.ex-result span em { font-style: normal; font-size: 11px; color: var(--txt-3); }
.ex-result-mi { font-size: 12px; color: var(--txt-2); }

.ex-chips {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.ex-chips::-webkit-scrollbar { display: none; }
.ex-chips .chip { flex: none; }

.ex-chips .chip.is-active {
  color: var(--accent);
  border-color: rgba(77, 163, 255, 0.45);
  background: rgba(77, 163, 255, 0.1);
}

/* Floating controls */

.ex-ctrls {
  position: absolute;
  right: 14px;
  top: 212px;
  z-index: 730;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ex-ctl {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 19px;
  color: var(--txt-2);
  background: var(--surface-float);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 22px rgba(2, 6, 14, 0.3);
  transition: transform 0.15s var(--ease-out), color 0.2s;
}

.ex-ctl:active { transform: scale(0.92); }
.ex-ctl.is-active { color: var(--accent); border-color: rgba(77, 163, 255, 0.45); }

.ex-ai {
  position: absolute;
  left: 14px;
  bottom: 196px;
  z-index: 730;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 21px;
  color: var(--on-accent);
  background: linear-gradient(180deg, #63b1ff, var(--accent-fill));
  box-shadow: 0 10px 26px rgba(77, 163, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.15s var(--ease-out);
}

.ex-ai:active { transform: scale(0.92); }

.ex-rangechip {
  position: absolute;
  left: 14px;
  top: 212px;
  z-index: 720;
  max-width: 62%;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface-float);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 11px;
  font-weight: 500;
  color: var(--txt-2);
}

/* Browse rail */

.ex-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 88px;
  z-index: 750;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 14px;
}

.ex-rail::-webkit-scrollbar { display: none; }

.ex-railcard {
  flex: none;
  width: 192px;
  border-radius: var(--r-tile);
  padding: 10px 12px;
  background: var(--surface-float);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 22px rgba(2, 6, 14, 0.28);
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  transition: transform 0.15s var(--ease-out);
}

.ex-railcard:active { transform: scale(0.96); }

.ex-railtop { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ex-railtop i { font-size: 14px; color: var(--accent); flex: none; }
.ex-railtop b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-railsub { font-size: 11px; color: var(--txt-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Map markers */

.mk-wrap { background: none; border: none; }

.mk { position: relative; width: 34px; height: 34px; display: grid; place-items: center; }

.mk-core {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--txt);
  background: var(--surface-overlay);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(2, 6, 14, 0.45);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}

.mk.is-sel .mk-core {
  transform: scale(1.15);
  color: var(--accent);
  box-shadow: 0 0 0 4px rgba(77, 163, 255, 0.25), 0 6px 18px rgba(2, 6, 14, 0.5);
}

.mk-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--surface-sheet);
  border: 1px solid var(--stroke-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
}

.mk-busy {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid var(--bg);
  background: var(--txt-3);
}

.mk-busy[data-tone="ok"] { background: var(--ok); }
.mk-busy[data-tone="warn"] { background: var(--warn); }
.mk-busy[data-tone="bad"] { background: var(--bad); }

.mk-home .mk-core {
  background: linear-gradient(180deg, #63b1ff, var(--accent-fill));
  color: #04101f;
  border: none;
  box-shadow: 0 0 0 4px rgba(77, 163, 255, 0.2), 0 6px 16px rgba(2, 6, 14, 0.45);
}

.mk-hazard .mk-core {
  color: var(--warn);
  border-color: rgba(255, 179, 92, 0.5);
  box-shadow: 0 0 0 4px rgba(255, 179, 92, 0.16), 0 4px 14px rgba(2, 6, 14, 0.45);
  font-size: 16px;
}

.mk-event .mk-core { color: var(--accent); border-color: rgba(77, 163, 255, 0.4); }

.mk-friend .mk-core {
  width: 26px;
  height: 26px;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 12px;
  background: linear-gradient(145deg, #1d2c44, #12203a);
  color: #edf1f7;
}

/* Explore panel (non-modal bottom sheet) */

.ex-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 760;
  height: 46%;
  max-height: calc(100% - 128px);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--surface-sheet);
  border: 1px solid var(--stroke-2);
  border-bottom: none;
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: 0 -18px 50px rgba(2, 6, 14, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  transition: height 0.3s var(--ease-out);
}

[data-theme="light"] .ex-panel { box-shadow: 0 -18px 50px rgba(23, 42, 71, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8); }

.ex-panel.is-full { height: calc(100% - 128px); }

.ex-grab { padding: 9px 0 5px; display: grid; place-items: center; cursor: grab; touch-action: none; }
.ex-grab i { width: 38px; height: 4px; border-radius: 999px; background: var(--stroke-2); }

.ex-panel-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0 18px 96px;
}

.ex-panel-body::-webkit-scrollbar { display: none; }

.ex-head { display: flex; align-items: center; gap: 12px; padding: 4px 0 10px; }
.ex-head-txt { flex: 1; min-width: 0; }
.ex-head-txt h3 { font-family: var(--font-d); font-weight: 600; font-size: 18px; letter-spacing: -0.005em; line-height: 1.2; }
.ex-head-txt span { font-size: 11.5px; color: var(--txt-3); }
.ex-head > .icon-btn:last-child { margin-left: auto; }

.ex-ctx { font-size: 12.5px; color: var(--txt-2); line-height: 1.5; padding-bottom: 12px; }

.ex-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-bottom: 12px; }

.ex-stat {
  border-radius: 14px;
  background: var(--soft);
  border: 1px solid var(--stroke);
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ex-stat span { font-size: 10.5px; color: var(--txt-3); }
.ex-stat b { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.ex-lvl {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--txt-2);
  background: var(--soft);
  border: 1px solid var(--stroke);
  white-space: nowrap;
}

.ex-lvl[data-tone="ok"] { color: var(--ok); background: rgba(55, 216, 155, 0.09); border-color: rgba(55, 216, 155, 0.22); }
.ex-lvl[data-tone="warn"] { color: var(--warn); background: rgba(255, 179, 92, 0.1); border-color: rgba(255, 179, 92, 0.24); }
.ex-lvl[data-tone="bad"] { color: var(--bad); background: rgba(255, 122, 107, 0.1); border-color: rgba(255, 122, 107, 0.24); }

.ex-actions { display: flex; gap: 8px; padding-bottom: 6px; }
.ex-actions .pill { flex: 1; justify-content: center; }
.ex-actions .pill.primary { flex: 1.35; }

.ex-more-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--txt-3);
  padding: 4px 0 12px;
}

.ex-card {
  border-radius: var(--r-tile);
  background: var(--soft);
  border: 1px solid var(--stroke);
  padding: 12px 13px;
  margin-bottom: 10px;
}

.ex-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ex-card-head > i { font-size: 15px; color: var(--accent); }
.ex-card-head b { font-size: 13px; font-weight: 600; }
.ex-card-head .ex-src, .ex-card-head .ex-lvl { margin-left: auto; }

.ex-src { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; color: var(--txt-3); }
.ex-src[data-tone="info"] { color: var(--accent); }
.ex-src i { font-size: 11px; }

.ex-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; }
.ex-kv span { font-size: 12px; color: var(--txt-2); flex: none; }
.ex-kv b { font-size: 12.5px; font-weight: 600; text-align: right; }
.ex-kv b[data-tone="ok"] { color: var(--ok); }
.ex-kv b[data-tone="warn"] { color: var(--warn); }
.ex-kv b[data-tone="bad"] { color: var(--bad); }

.ex-note { font-size: 11.5px; color: var(--txt-3); line-height: 1.5; margin-top: 6px; }

.ex-split { display: flex; gap: 16px; margin-top: 8px; font-size: 11.5px; color: var(--txt-2); }
.ex-split span { display: inline-flex; align-items: center; gap: 6px; }

.ex-timeline { display: flex; gap: 5px; align-items: flex-end; padding: 4px 0 2px; }
.ex-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ex-bar-wrap b { font-size: 9.5px; font-weight: 500; color: var(--txt-3); }
.ex-bar-wrap.is-now b { color: var(--accent); font-weight: 700; }

.ex-bar {
  display: block;
  width: 100%;
  max-width: 22px;
  height: calc(6px + var(--lv) * 7px);
  border-radius: 4px;
  background: var(--txt-3);
  opacity: 0.5;
}

.ex-bar[data-tone="ok"] { background: var(--ok); opacity: 0.85; }
.ex-bar[data-tone="warn"] { background: var(--warn); opacity: 0.85; }
.ex-bar[data-tone="bad"] { background: var(--bad); opacity: 0.85; }

.ex-best { background: rgba(77, 163, 255, 0.07); border-color: rgba(77, 163, 255, 0.22); }
.ex-best-win { font-family: var(--font-d); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; }
.ex-best-times { display: flex; gap: 16px; font-size: 11.5px; color: var(--txt-2); margin: 4px 0 9px; }
.ex-best-times b { color: var(--txt); font-weight: 600; }

.ex-reasons { list-style: none; display: grid; gap: 4px; margin-bottom: 9px; }
.ex-reasons li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--txt-2); }
.ex-reasons i { font-size: 13px; color: var(--ok); }

.ex-why { font-size: 11.5px; color: var(--txt-3); line-height: 1.55; border-top: 1px solid var(--stroke); padding-top: 8px; }

.ex-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ex-tags span { font-size: 10.5px; font-weight: 500; color: var(--txt-2); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--stroke); }

.ex-report { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: 12px; color: var(--txt-2); }
.ex-report i { font-size: 13px; color: var(--txt-3); transform: translateY(1px); }
.ex-report.is-hazard i { color: var(--warn); }
.ex-report span { flex: 1; line-height: 1.45; }
.ex-report b { font-size: 10.5px; font-weight: 500; color: var(--txt-3); white-space: nowrap; }

.ex-limited { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--txt-3); line-height: 1.5; }
.ex-limited i { font-size: 14px; transform: translateY(2px); }

.ex-eventcard { border-color: rgba(77, 163, 255, 0.25); }

/* Planning */

.ex-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 2px 0 12px; }
.ex-grid4 div { display: flex; flex-direction: column; gap: 2px; }
.ex-grid4 span { font-size: 10px; color: var(--txt-3); }
.ex-grid4 b { font-family: var(--font-d); font-weight: 500; font-size: 14.5px; white-space: nowrap; }

.ex-opts { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 0 2px; }
.ex-opts::-webkit-scrollbar { display: none; }

.ex-opt {
  flex: none;
  width: 122px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: var(--soft);
  padding: 10px 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  position: relative;
}

.ex-opt b { font-size: 13px; font-weight: 600; }
.ex-opt span { font-size: 10.5px; color: var(--txt-3); }
.ex-opt span.is-warn { color: var(--warn); }
.ex-opt.is-active { border-color: rgba(77, 163, 255, 0.55); background: rgba(77, 163, 255, 0.08); }

.ex-rec {
  position: absolute;
  top: -8px;
  right: 8px;
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent-fill);
  padding: 2px 7px;
  border-radius: 999px;
}

.ex-warnrow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: 12px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--warn);
  background: rgba(255, 179, 92, 0.08);
  border: 1px solid rgba(255, 179, 92, 0.2);
}

.ex-warnrow i { font-size: 13px; transform: translateY(1px); }
.ex-warnrow .pill { margin-top: 2px; }

.ex-stopcard {
  width: 100%;
  margin-top: 8px;
  border-radius: 14px;
  border: 1px dashed var(--stroke-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  transition: background 0.15s;
}

.ex-stopcard:active { background: var(--soft); }
.ex-addlabel { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--accent); margin-top: 4px; }

.ex-wx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 2px 0 6px; }
.ex-wx-pt { display: flex; flex-direction: column; gap: 2px; }
.ex-wx-pt span { font-size: 10px; color: var(--txt-3); }
.ex-wx-pt b { font-size: 13.5px; font-weight: 600; }
.ex-wx-pt i { font-style: normal; font-size: 11px; color: var(--txt-2); }
.ex-wx-pt i.is-warn { color: var(--warn); }

.ex-leg { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.ex-leg-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--txt-3); flex: none; }
.ex-leg-dot[data-tone="ok"] { background: var(--ok); }
.ex-leg-dot[data-tone="warn"] { background: var(--warn); }
.ex-leg-dot[data-tone="bad"] { background: var(--bad); }
.ex-leg-dot[data-tone="info"] { background: var(--accent); }
.ex-leg-txt { flex: 1; min-width: 0; }
.ex-leg-txt b { font-size: 12.5px; font-weight: 600; display: block; }
.ex-leg-txt span { font-size: 11px; color: var(--txt-3); }

.icon-btn.sm { width: 30px; height: 30px; font-size: 14px; }

.ex-addrow { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }

.ex-cta { padding: 4px 0 10px; }
.ex-cta .pill { width: 100%; justify-content: center; }
.ex-cta-col { display: flex; flex-direction: column; gap: 8px; }
.pill.xl { height: 52px; font-size: 15px; }

.ex-final { padding-bottom: 4px; }
.ex-final-route { font-family: var(--font-d); font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }
.ex-final-route i { font-size: 12px; color: var(--txt-3); }

.ex-fine { font-size: 10.5px; color: var(--txt-3); line-height: 1.5; text-align: center; padding: 2px 6px 14px; }

/* Layers sheet content */

.ex-layergroup { font-size: 11px; font-weight: 600; color: var(--txt-3); padding: 12px 2px 3px; }

.ex-layerrow { display: flex; align-items: center; gap: 10px; padding: 9px 2px; }
.ex-layerrow + .ex-layerrow { border-top: 1px solid var(--stroke); }
.ex-layerrow > i { font-size: 16px; color: var(--txt-2); }
.ex-layerrow > span:first-of-type { flex: 1; font-size: 13px; }
.ex-layerrow.is-soon { opacity: 0.55; }

.switch {
  width: 40px;
  height: 24px;
  flex: none;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--stroke-2);
  position: relative;
  transition: background 0.2s, border-color 0.2s;
}

.switch i {
  position: absolute;
  top: 2.5px;
  left: 3px;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: var(--txt-3);
  transition: left 0.2s var(--ease-out), background 0.2s;
}

.switch.is-on { background: var(--accent-fill); border-color: transparent; }
.switch.is-on i { left: 19px; background: #eef4fb; }

.scrim.is-clear { background: transparent; }

/* ---------- Boat profile ---------- */

.profile {
  position: absolute;
  inset: 0;
  z-index: 5;
  isolation: isolate;
  background: var(--bg);
}

.app.on-profile .app-scroll { display: none; }
.app.on-profile #demoChip { display: none; }

.p-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  /* Clear the floating tab bar (64px tall, 12px up, plus the home
     indicator) so the last row is never sliced by it. */
  padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

.p-scroll::-webkit-scrollbar { display: none; }

.p-hero { height: 312px; margin-top: 0; }

.p-hero .hero-top { display: none; }

.p-head {
  position: absolute;
  top: 46px;
  left: 16px;
  right: 16px;
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.p-head > *, .p-head-actions > * { pointer-events: auto; }

.p-head-actions { display: flex; gap: 8px; }

.p-ai { bottom: 96px; }

.p-body { padding: 4px 20px 130px; }

/* Identity */

.p-id { padding: 10px 0 4px; }

.p-id h2 {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 27px;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.p-id-sub { font-size: 12.5px; color: var(--txt-2); margin-top: 3px; }

.p-id-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.p-id-meta > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--txt-3);
}

.p-id-meta i { font-size: 13px; }

/* Readiness strip and quick stats */

.p-strip, .p-stats {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 14px 0 2px;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
}

.p-strip::-webkit-scrollbar, .p-stats::-webkit-scrollbar { display: none; }

.p-pill {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px 9px 9px;
  border-radius: var(--r-tile);
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
}

.p-pill-txt { display: flex; flex-direction: column; line-height: 1.25; }
.p-pill-txt b { font-size: 13px; font-weight: 600; }
.p-pill-txt span { font-size: 10px; color: var(--txt-3); }
.p-pill-txt em { font-style: normal; font-size: 10px; color: var(--txt-2); }

.p-stat {
  flex: none;
  min-width: 108px;
  border-radius: var(--r-tile);
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.p-stat b {
  font-family: var(--font-d);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.p-stat b i { font-style: normal; font-size: 11px; color: var(--txt-3); font-family: var(--font-b); font-weight: 500; }
.p-stat > span { font-size: 10.5px; color: var(--txt-2); }

/* Sections and cards */

.p-sec { margin-top: 26px; }

.p-card {
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding: 14px 15px;
}

.p-seg-row { margin-bottom: 10px; }

.p-chart { width: 100%; height: auto; display: block; margin-bottom: 6px; }

.p-ch-lbl { font-size: 9px; fill: var(--txt-3); font-family: var(--font-b); }

/* Maintenance */

.p-next { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.p-next-txt b { font-size: 14px; font-weight: 600; display: block; }
.p-next-txt span { font-size: 12px; color: var(--txt-2); }
.p-next-txt span b { display: inline; font-size: 12px; }
.p-next-txt span b[data-tone="warn"] { color: var(--warn); }

.p-track {
  height: 5px;
  border-radius: 999px;
  background: var(--soft);
  border: 1px solid var(--stroke);
  overflow: hidden;
  margin: 10px 0 4px;
}

.p-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent-fill);
}

.p-track i.is-warn { background: var(--warn); }

.p-tl { margin-top: 8px; }

.p-tl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}

.p-tl-row + .p-tl-row { border-top: 1px solid var(--stroke); }

.p-tl-row b { flex: 1; font-size: 12.5px; font-weight: 500; }
.p-tl-row.is-up b { font-weight: 600; }
.p-tl-row > span:last-child { font-size: 11px; color: var(--txt-3); }

.p-tl-ic {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--txt-2);
  background: var(--soft);
  border: 1px solid var(--stroke);
}

.p-tl-ic[data-tone="ok"] { color: var(--ok); background: rgba(55, 216, 155, 0.08); border-color: rgba(55, 216, 155, 0.2); }
.p-tl-ic[data-tone="warn"] { color: var(--warn); background: rgba(255, 179, 92, 0.09); border-color: rgba(255, 179, 92, 0.22); }

/* Runs */

.p-run {
  width: 100%;
  border-radius: var(--r-card);
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(18px) saturate(1.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  padding: 13px 14px;
  margin-bottom: 10px;
  text-align: left;
  transition: transform 0.15s var(--ease-out);
}

.p-run:active { transform: scale(0.98); }

.p-run-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.p-run-top b { font-size: 14px; font-weight: 600; }
.p-run-top span { font-size: 11px; color: var(--txt-3); }

.p-run-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 0 8px; }
.p-run-grid div { display: flex; flex-direction: column; gap: 1px; }
.p-run-grid b { font-family: var(--font-d); font-weight: 500; font-size: 13.5px; white-space: nowrap; }
.p-run-grid span { font-size: 9.5px; color: var(--txt-3); }

.p-run-cond { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--txt-2); }
.p-run-cond i { font-size: 13px; color: var(--txt-3); }

/* Documents */

.p-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.p-doc {
  border-radius: var(--r-tile);
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  text-align: left;
  transition: transform 0.15s var(--ease-out);
}

.p-doc:active { transform: scale(0.97); }

.p-doc b { font-size: 12.5px; font-weight: 600; }
.p-doc > span { font-size: 11px; color: var(--txt-2); }
.p-doc > span[data-tone="warn"] { color: var(--warn); }
.p-doc > span[data-tone="ok"] { color: var(--ok); }

/* Health */

.p-health { display: flex; align-items: center; gap: 18px; }

.p-ring {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--ring-track) 0);
}

.p-ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  background: var(--ring-hole);
}

.p-ring b {
  position: relative;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  line-height: 1;
}

.p-ring span { position: relative; font-size: 9.5px; color: var(--txt-3); margin-top: 2px; }

.p-hbars { flex: 1; min-width: 0; display: grid; gap: 8px; }

.p-hbar { display: flex; align-items: center; gap: 9px; }
.p-hbar > span { width: 62px; flex: none; font-size: 11px; color: var(--txt-2); }
.p-hbar .p-track { flex: 1; margin: 0; }
.p-hbar > b { width: 22px; text-align: right; font-size: 11.5px; font-weight: 600; }

/* Ownership */

.p-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 0 4px; }
.p-counts div { display: flex; flex-direction: column; gap: 1px; }
.p-counts b { font-family: var(--font-d); font-weight: 500; font-size: 16px; }
.p-counts span { font-size: 10.5px; color: var(--txt-3); }

.p-verified { border-top: 1px solid var(--stroke); margin-top: 8px; padding-top: 10px; }
.p-verified-top { display: flex; justify-content: space-between; align-items: baseline; }
.p-verified-top b { font-size: 12.5px; font-weight: 600; }
.p-verified-top span { font-size: 11px; color: var(--accent); font-weight: 600; }

/* Garage rows with profile chevron */

.g-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  text-align: left;
  transition: opacity 0.15s;
}

.g-main:active { opacity: 0.55; }

@media (max-width: 1023px) {
  .p-head { top: calc(12px + env(safe-area-inset-top, 0px)); }
}

/* ---------- Active Run ---------- */

.run {
  position: absolute;
  inset: 0;
  z-index: 6;
  isolation: isolate;
  background: var(--bg);
}

.app.on-run .app-scroll { display: none; }
.app.on-run .tabbar { display: none; }
/* Prototype chips (state, season, day and night) sit bottom right, which
   is exactly where the run panel's End run button lives. Hide them for the
   whole run; the map theme is switchable from Run actions instead. */
.app.on-run .demo-chip { display: none; }

.run .ex-map { position: absolute; inset: 0; }

.run-topfade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  z-index: 705;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 11, 18, 0.9), rgba(7, 11, 18, 0.35) 60%, transparent);
}

[data-theme="light"] .run-topfade {
  background: linear-gradient(180deg, rgba(237, 241, 247, 0.94), rgba(237, 241, 247, 0.42) 60%, transparent);
}

.run-head {
  position: absolute;
  top: 46px;
  left: 14px;
  right: 14px;
  z-index: 740;
  display: flex;
  align-items: center;
  gap: 12px;
}

.run-head-txt { flex: 1; min-width: 0; text-align: center; }
.run-head-txt b {
  display: block;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.run-head-txt span { display: block; font-size: 11.5px; color: var(--txt-2); }
.run-head-txt em { display: block; font-style: normal; font-size: 10px; color: var(--txt-3); margin-top: 1px; }

.run-conn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: var(--surface-float);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 11px;
  font-weight: 600;
  color: var(--txt-2);
  flex: none;
}

.run-conn .dot { width: 7px; height: 7px; }

.run-reroute {
  position: absolute;
  top: 108px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 745;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface-sheet);
  border: 1px solid var(--stroke-2);
  font-size: 12px;
  font-weight: 600;
}

.run-reroute i { color: var(--accent); font-size: 14px; }

.run-recenter {
  position: absolute;
  right: 14px;
  bottom: 250px;
  z-index: 730;
}

.run-recenter.is-active { color: var(--accent); border-color: rgba(77, 163, 255, 0.45); }

.run-ai {
  position: absolute;
  left: 14px;
  bottom: 250px;
  z-index: 730;
}

.run-alerts {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 236px;
  z-index: 735;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.run-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-tile);
  background: var(--surface-sheet);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 28px rgba(2, 6, 14, 0.4);
  pointer-events: auto;
  margin: 0 44px 0 44px;
}

.run-alert > i { font-size: 16px; color: var(--accent); transform: translateY(1px); }
.run-alert[data-sev="warning"] { border-color: rgba(255, 179, 92, 0.4); }
.run-alert[data-sev="warning"] > i { color: var(--warn); }

.run-alert-txt { flex: 1; min-width: 0; }
.run-alert-txt b { display: block; font-size: 12.5px; font-weight: 600; }
.run-alert-txt span { display: block; font-size: 11px; color: var(--txt-2); line-height: 1.4; }
.run-alert-txt em { display: block; font-style: normal; font-size: 9.5px; color: var(--txt-3); margin-top: 2px; }

.run-alert .pill { flex: none; align-self: center; }

/* Bottom telemetry panel */

.run-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 760;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--surface-sheet);
  border: 1px solid var(--stroke-2);
  border-bottom: none;
  backdrop-filter: blur(30px) saturate(1.4);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: 0 -18px 50px rgba(2, 6, 14, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  max-height: 78%;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

[data-theme="light"] .run-panel { box-shadow: 0 -18px 50px rgba(23, 42, 71, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8); }

.run-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 2px 18px 4px;
}

.run-speed { display: flex; align-items: baseline; gap: 5px; flex: none; }

.run-speed b {
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 46px;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.run-speed span { font-size: 12px; font-weight: 500; color: var(--txt-3); }

.run-mets { flex: 1; display: flex; gap: 14px; justify-content: space-evenly; min-width: 0; }

.run-met { display: flex; flex-direction: column; gap: 1px; }
.run-met > span { font-size: 10px; color: var(--txt-3); display: inline-flex; align-items: center; gap: 4px; }
.run-met > span i {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 600;
  color: var(--txt-3);
  border: 1px solid var(--stroke-2);
  border-radius: 999px;
  padding: 0 4px;
}
.run-met > b { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

.run-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 4px;
}

.run-next {
  font-size: 11.5px;
  color: var(--txt-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.run-health {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--txt-2);
}

.run-drawer, .run-summary {
  overflow-y: auto;
  scrollbar-width: none;
  padding: 0 18px;
}

.run-drawer::-webkit-scrollbar, .run-summary::-webkit-scrollbar { display: none; }

.run-panel.is-full .run-drawer, .run-panel.is-full .run-summary { padding-bottom: 10px; }

.run-grp { padding: 10px 0 4px; }
.run-grp + .run-grp { border-top: 1px solid var(--stroke); }
.run-grp > b { display: block; font-size: 11px; font-weight: 600; color: var(--txt-3); margin-bottom: 2px; }

@media (max-width: 1023px) {
  .run-head { top: calc(12px + env(safe-area-inset-top, 0px)); }
  .run-reroute { top: calc(76px + env(safe-area-inset-top, 0px)); }
}

/* ---------- Seasonal home: checklists, build, marketplace, recap ---------- */

.sz-seasons .seg { padding: 8px 11px; font-size: 12.5px; }

.season-chip { bottom: 188px; }

.app.on-explore #seasonChip, .app.on-profile #seasonChip, .app.on-run #seasonChip { display: none; }

.sz-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  text-align: left;
  font-size: 13px;
  transition: opacity 0.15s;
}

.sz-item:active { opacity: 0.55; }
.sz-item + .sz-item { border-top: 1px solid var(--stroke); }
.sz-item > i { font-size: 18px; color: var(--txt-3); flex: none; }
.sz-item.is-done > i { color: var(--ok); }
.sz-item > span { flex: 1; min-width: 0; }
.sz-item.is-done > span { color: var(--txt-3); text-decoration: line-through; text-decoration-color: var(--stroke-2); }
.sz-item > b { font-size: 12px; font-weight: 600; color: var(--txt-2); }

.sz-listing {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
}

.sz-listing + .sz-listing { border-top: 1px solid var(--stroke); }
.sz-listing .sz-item { width: auto; flex: 1; padding: 0; }
.sz-listing .sz-item + * { border: none; }
.sz-listing-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sz-listing-txt b { font-size: 13px; font-weight: 600; }
.sz-listing-txt span { font-size: 11px; color: var(--txt-3); }
.sz-listing-txt em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--accent); }
.sz-listing-txt s { color: var(--txt-3); font-weight: 500; margin-left: 4px; }

.sz-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 8px 0 12px;
}

.sz-stats div { display: flex; flex-direction: column; gap: 2px; }
.sz-stats b { font-family: var(--font-d); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.sz-stats span { font-size: 10.5px; color: var(--txt-3); }

.sz-bucket-note { margin: -2px 0 8px 28px; }

.chip.sz-var-on { color: var(--accent); border-color: rgba(77, 163, 255, 0.45); background: rgba(77, 163, 255, 0.1); }

/* Marine network markers: clusters, community reports, bridges */

.mk-cluster {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--font-d);
  font-weight: 600;
  font-size: 15px;
  color: var(--on-accent);
  background: linear-gradient(180deg, #63b1ff, var(--accent-fill));
  box-shadow: 0 0 0 5px rgba(77, 163, 255, 0.2), 0 6px 16px rgba(2, 6, 14, 0.45);
}

.mk-report .mk-core {
  color: var(--warn);
  border-style: dashed;
  border-color: rgba(255, 179, 92, 0.55);
}

.mk-bridge .mk-core {
  color: var(--txt-2);
  border-color: var(--stroke-2);
}

/* Auth inputs */
.ex-authinput {
  width: 100%; padding: 11px 14px; margin-bottom: 10px;
  border-radius: 12px; border: 1px solid var(--stroke-2);
  background: var(--glass-2); color: var(--txt-1);
  font: inherit; font-size: 14px;
}
.ex-authinput:focus { outline: none; border-color: var(--accent); }
#authStep2 { margin-top: 4px; }

/* ---------------- Skeleton loaders ---------------- */

.skel {
  position: relative;
  overflow: hidden;
  background: var(--glass-2);
  border-radius: 8px;
  min-height: 14px;
}
.skel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.07) 50%, transparent 70%);
  animation: skel-sweep 1.3s ease-in-out infinite;
}
[data-theme="light"] .skel::after {
  background: linear-gradient(100deg, transparent 30%, rgba(10, 30, 60, 0.08) 50%, transparent 70%);
}
@keyframes skel-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
.skel-kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.skel-kv .skel:first-child { width: 34%; }
.skel-kv .skel:last-child { width: 44%; }
.skel-result { display: flex; align-items: center; gap: 10px; padding: 11px 4px; }
.skel-result .skel-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.skel-result .skel-line { flex: 1; height: 13px; }
.skel-result .skel-mi { width: 76px; height: 12px; flex: none; }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* ---------------- Tooltips (hover devices only) ---------------- */

@media (hover: hover) and (pointer: fine) {
  .ex-ctl[aria-label], .icon-btn[aria-label] { position: relative; }
  .ex-ctl[aria-label]:hover::before, .icon-btn[aria-label]:hover::before {
    content: attr(aria-label);
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--glass-1, rgba(10, 16, 28, 0.92));
    border: 1px solid var(--stroke-2);
    color: var(--txt-1);
    box-shadow: 0 6px 18px rgba(2, 6, 14, 0.35);
    pointer-events: none;
    z-index: 60;
    opacity: 0;
    animation: tip-in 0.15s ease 0.35s forwards;
  }
  .icon-btn[aria-label]:hover::before {
    right: auto; left: 50%; top: calc(100% + 8px);
    transform: translateX(-50%);
  }
}
@keyframes tip-in { to { opacity: 1; } }

.mk-zonemid {
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--warn, #ffb35c);
  background: rgba(10, 16, 28, 0.75);
  border: 1.5px dashed var(--warn, #ffb35c);
  cursor: pointer;
}

.mk-zonept {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #241303;
  background: var(--warn, #ffb35c);
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 8px rgba(2, 6, 14, 0.45);
}

/* Live device position: pulsing dot with a heading tick. */
.mk-me {
  width: 30px; height: 30px; position: relative;
  display: grid; place-items: center;
}
.mk-me i {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent-fill, #2f7fe0);
  border: 2.5px solid #fff;
  box-shadow: 0 0 0 4px rgba(77, 163, 255, 0.25), 0 2px 8px rgba(2, 6, 14, 0.5);
}
.mk-me::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(77, 163, 255, 0.18);
  animation: me-pulse 2.4s ease-out infinite;
}
.mk-me[style*="--hdg"]::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  border: 5px solid transparent;
  border-bottom: 9px solid var(--accent);
  transform: translate(-50%, -50%) rotate(var(--hdg)) translateY(-14px);
}
@keyframes me-pulse {
  0% { transform: scale(0.55); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------------- Rich place card (real OSM places) ---------------- */

.place-banner {
  height: 92px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  background:
    radial-gradient(120% 160% at 20% 0%, rgba(77, 163, 255, 0.28), transparent 55%),
    linear-gradient(160deg, rgba(77, 163, 255, 0.16), rgba(10, 18, 32, 0.55));
  border: 1px solid var(--stroke-2);
}

.place-banner i { font-size: 34px; color: var(--accent); opacity: 0.85; }

[data-theme="light"] .place-banner {
  background:
    radial-gradient(120% 160% at 20% 0%, rgba(22, 104, 199, 0.16), transparent 55%),
    linear-gradient(160deg, rgba(22, 104, 199, 0.10), rgba(232, 240, 250, 0.9));
}

.place-photo { position: relative; margin-bottom: 12px; }
.place-photo img {
  width: 100%; height: 132px; object-fit: cover;
  border-radius: 16px; display: block;
}
.place-credit {
  position: absolute; right: 8px; bottom: 8px;
  font-size: 9.5px; padding: 3px 8px; border-radius: 999px;
  background: rgba(4, 10, 20, 0.66); color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
}

.place-actions {
  display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap;
}

.place-act {
  flex: 1 1 0;
  min-width: 74px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--stroke-2);
  background: var(--glass-2);
  color: var(--txt-1);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.place-act:active { transform: scale(0.96); }
.place-act i { font-size: 15px; }
.place-act.is-primary {
  background: linear-gradient(180deg, #63b1ff, var(--accent-fill));
  border: none; color: #04101f;
}

.place-note {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; color: var(--txt-2);
  padding: 7px 0; line-height: 1.45;
}
.place-note b {
  flex: none; font-size: 9.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--glass-2); border: 1px solid var(--stroke-2);
  color: var(--txt-3); letter-spacing: 0.04em; text-transform: uppercase;
}

.mk-pin .mk-core {
  color: #04101f;
  background: linear-gradient(180deg, #63b1ff, var(--accent-fill));
  border: none;
  box-shadow: 0 0 0 4px rgba(77, 163, 255, 0.22), 0 6px 16px rgba(2, 6, 14, 0.45);
}

.ex-depthchip {
  top: calc(212px + 44px);
  cursor: pointer;
  text-align: left;
}

@media (max-width: 1023px) {
  .ex-depthchip { top: calc(178px + 44px + env(safe-area-inset-top, 0px)); }
}

.ex-repgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px 0 10px;
}

.ex-repchip {
  justify-content: flex-start;
  height: 44px;
  font-size: 13px;
  font-weight: 600;
  gap: 9px;
}

.ex-repchip i { font-size: 17px; color: var(--warn); }

.ex-repgrid [data-suggest] i { color: var(--accent); }

/* Real charted places (OSM) and community-suggested spots */

.mk-osm .mk-core {
  width: 24px;
  height: 24px;
  font-size: 12px;
  color: var(--txt-2);
  opacity: 0.92;
}

.mk-cand .mk-core {
  color: var(--accent);
  border-style: dotted;
  border-color: rgba(77, 163, 255, 0.6);
}

.mk-votes {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--on-accent);
  background: var(--accent-fill);
  border: 2px solid var(--bg);
}

.mk-spot .mk-core {
  color: var(--accent);
  border-color: rgba(77, 163, 255, 0.45);
}

/* Nav-app follow camera: the run map is oversized so heading-up rotation
   never reveals corners; static markers counter-rotate to stay upright. */

#runMap {
  position: absolute;
  inset: -30%;
  transition: transform 0.95s linear;
  will-change: transform;
}

#runMap.run-rotate .mk { transform: rotate(var(--ccr, 0deg)); }
#runMap.run-rotate .leaflet-control-attribution { transform: rotate(var(--ccr, 0deg)); }

/* No transform transition on the own-vessel marker: Leaflet re-anchors
   marker positions whenever the map pane re-origins, so a long transition
   made the arrow slide across the whole canvas and never land on screen
   (owner: "the indicator is too far down, I can't even see it"). The map's
   own pan animation supplies the smoothness. */
.mk-vessel-el { transition: none; }

.run-orient {
  position: absolute;
  right: 14px;
  bottom: 304px;
  z-index: 730;
}

/* Navigation digital twin sprite marker */

.mk-twin {
  position: relative;
  display: grid;
  place-items: center;
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out);
}

.mk-twin::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(77, 163, 255, 0.22), transparent 70%);
}

.mk-twin img {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s linear;
  filter: drop-shadow(0 0 1.5px rgba(237, 241, 247, 0.9)) drop-shadow(0 3px 8px rgba(2, 6, 14, 0.55));
}

[data-theme="light"] .mk-twin img {
  filter: drop-shadow(0 0 1.5px rgba(22, 32, 46, 0.55)) drop-shadow(0 3px 8px rgba(23, 42, 71, 0.35));
}

/* Own-vessel marker */

/* The direction arrow: chip carries the halo, the triangle carries the
   heading. Rotating the triangle alone keeps the halo steady. */
.mk-arrowchip {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #63b1ff, var(--accent-fill));
  box-shadow: 0 0 0 4px rgba(77, 163, 255, 0.28), 0 6px 16px rgba(2, 6, 14, 0.5);
}

.mk-arrow {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid #04101f;
  transition: transform 0.25s linear;
}

.mk-vessel {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}

.mk-vessel i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 17px;
  border-radius: 999px;
  color: #04101f;
  background: linear-gradient(180deg, #63b1ff, var(--accent-fill));
  box-shadow: 0 0 0 4px rgba(77, 163, 255, 0.28), 0 6px 16px rgba(2, 6, 14, 0.5);
  transition: transform 0.6s linear;
}

/* Explore responsive and fallbacks */

@media (max-width: 1023px) {
  .ex-top { top: calc(12px + env(safe-area-inset-top, 0px)); }
  .ex-ctrls { top: calc(178px + env(safe-area-inset-top, 0px)); }
  .ex-rangechip { top: calc(178px + env(safe-area-inset-top, 0px)); }
  .ex-topfade { height: 140px; }
}

@media (prefers-reduced-transparency: reduce) {
  .ex-search, .ex-ctl, .ex-railcard, .ex-panel, .ex-results, .ex-rangechip, .mk-core,
  .p-card, .p-pill, .p-stat, .p-run, .p-doc {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #0c1119;
  }
  [data-theme="light"] .ex-search, [data-theme="light"] .ex-ctl, [data-theme="light"] .ex-railcard,
  [data-theme="light"] .ex-panel, [data-theme="light"] .ex-results, [data-theme="light"] .ex-rangechip,
  [data-theme="light"] .mk-core, [data-theme="light"] .p-card, [data-theme="light"] .p-pill,
  [data-theme="light"] .p-stat, [data-theme="light"] .p-run, [data-theme="light"] .p-doc {
    background: #ffffff;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------- Bridge layer ---------------- */
.mk-bridgep .mk-core { color: #8fa1b3; }
.mk-bridgep[data-cls="GREEN"] .mk-core { color: #37c98b; }
.mk-bridgep[data-cls="YELLOW"] .mk-core { color: #f0b64a; }
.mk-bridgep[data-cls="ORANGE"] .mk-core { color: #f08c4a; }
.mk-bridgep[data-cls="RED"] .mk-core { color: #ef6461; }
.mk-bridge.is-aware .mk-core { box-shadow: 0 0 0 3px rgba(240,182,74,.55); }
.mk-bridge.is-crit .mk-core { box-shadow: 0 0 0 4px rgba(239,100,97,.6); animation: brpulse 1.1s infinite; }
.mk-bridge.is-passed { opacity: .55; }
@keyframes brpulse { 50% { box-shadow: 0 0 0 8px rgba(239,100,97,.15); } }
.ex-field { display: block; font-size: 12px; color: #8fa1b3; margin: 10px 2px; }
.ex-field input { display: block; width: 100%; margin-top: 6px; padding: 10px; border-radius: 10px;
  border: 1px solid rgba(140,160,180,.25); background: transparent; color: inherit; font-size: 15px; }

/* Directional-lane ghost arrows (owner-pinned divided channels) */
.mk-flow { width: 7px; height: 7px; margin: 3px auto;
  border-top: 1.5px solid rgba(77, 163, 255, 0.5);
  border-right: 1.5px solid rgba(77, 163, 255, 0.5); }

/* Real-place markers: kind colors so the map reads at a glance */
.mk-osm[data-kind="fuel"] .mk-core i { color: #f5a623; }
.mk-osm[data-kind="food"] .mk-core i { color: #ff6f61; }
.mk-osm[data-kind="marina"] .mk-core i { color: #2bb3c0; }
.mk-osm[data-kind="launch"] .mk-core i { color: #58c26e; }
.mk-osm[data-kind="hotel"] .mk-core i { color: #a78bfa; }
.mk-osm[data-kind="bathroom"] .mk-core i { color: #94a3b8; }
.run-report .ph-warning { color: #f0b64a; }

/* Active-category highlight on the places layer */
.mk-osm.is-hot .mk-core, .mk.is-hot .mk-core { box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.45); }
.mk.is-hot[data-kind="fuel"] .mk-core i { color: #f5a623; }
.ex-result.is-catall b { color: #4da3ff; }

/* Turn-by-turn banner: distance to the next turn and its direction, top
   center. Goes yellow briefly when the boat enters a no-wake zone. */
.run-turnbanner {
  position: absolute;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 740;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--surface-sheet);
  border: 1px solid var(--stroke-2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 28px rgba(2, 6, 14, 0.4);
  pointer-events: none;
  white-space: nowrap;
}
.run-turnbanner i { font-size: 26px; color: var(--accent); }
.run-turn-txt { display: flex; flex-direction: column; line-height: 1.25; }
.run-turn-txt b { font-size: 16px; }
.run-turn-txt span { font-size: 11px; opacity: 0.65; }
.run-turnbanner.is-nowake { background: rgba(240, 182, 74, 0.94); border-color: rgba(240, 182, 74, 0.9); }
.run-turnbanner.is-nowake i,
.run-turnbanner.is-nowake b,
.run-turnbanner.is-nowake span { color: #201503; opacity: 1; }

/* Hazard report rides the right rail above orientation and recenter. */
.run-report {
  position: absolute;
  right: 14px;
  bottom: 358px;
  z-index: 730;
}

/* The hover-tooltip rule above sets position: relative on labeled controls
   with (0,2,0) specificity, which flattened the run screen's absolutely
   positioned map-rail buttons on desktop. Rail controls stay absolute. */
.run .run-recenter, .run .run-orient, .run .run-ai, .run .run-report {
  position: absolute;
}

/* Hazard flash: the banner goes red for reported or charted dangers. */
.run-turnbanner.is-hazard { background: rgba(224, 92, 80, 0.94); border-color: rgba(224, 92, 80, 0.9); }
.run-turnbanner.is-hazard i,
.run-turnbanner.is-hazard b,
.run-turnbanner.is-hazard span { color: #fff; opacity: 1; }

/* Waze-style navigation front end (owner spec, 2026-08-11). The old
   .run-turnbanner bubble is replaced by a filled full-span header. */

.run-navbox {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 745;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px;
  background: linear-gradient(180deg, #2f7fdf, #2465b8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 26px rgba(2, 6, 14, 0.35);
}
.run-navbox > i { font-size: 38px; color: #fff; }
.run-navbox .run-turn-txt { display: flex; flex-direction: column; line-height: 1.2; }
.run-navbox .run-turn-txt b { font-size: 24px; color: #fff; }
.run-navbox .run-turn-txt span {
  font-size: 13px; color: rgba(255, 255, 255, 0.85); opacity: 1;
  max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.run-navbox .run-conn {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.run-navbox.is-nowake { background: linear-gradient(180deg, #f0b64a, #dfa233); }
.run-navbox.is-nowake > i,
.run-navbox.is-nowake .run-turn-txt b { color: #201503; }
.run-navbox.is-nowake .run-turn-txt span { color: rgba(32, 21, 3, 0.8); }
.run-navbox.is-hazard { background: linear-gradient(180deg, #e05c50, #c74a40); }

/* Right rail: big touch targets stacked under the navigation header. */
.run .run-report, .run .run-orient, .run .run-recenter {
  left: auto;
  right: 12px;
  bottom: auto;
  width: 52px;
  height: 52px;
  font-size: 23px;
}
.run .run-report   { top: calc(env(safe-area-inset-top, 0px) + 104px); }
.run .run-orient   { top: calc(env(safe-area-inset-top, 0px) + 166px); }
.run .run-recenter { top: calc(env(safe-area-inset-top, 0px) + 228px); }

/* Destination line + bright red End run inside the pull-up panel. */
.run-dest { display: flex; align-items: baseline; gap: 8px; padding: 2px 16px 4px; min-width: 0; }
.run-dest b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.run-dest span { font-size: 12px; opacity: 0.65; white-space: nowrap; }
.run-endbtn {
  margin: 10px 14px 12px;
  width: calc(100% - 28px);
  padding: 13px;
  border-radius: 999px;
  background: #d9453a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.run-endbtn:active { transform: scale(0.98); }

/* Run now stays reachable without scrolling the plan: the primary CTA
   sticks to the bottom of the panel's scrollport and rides down to its
   natural place at the end of the list. */
.ex-cta-stick {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin: 0 -18px;
  padding: 12px 18px calc(10px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, var(--surface-sheet) 26%);
}