/* Sail My Way — mobile shell on the PowerUp design system (see powerup.css).
   Fixed-viewport screens, bottom tab bar, no page scroll. Light default, dark via OS. */

html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;            /* the app never page-scrolls; lists scroll internally */
  background: var(--bg-1);
}

/* ---------- App bar ---------- */
.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(48px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--space-3) 0;
  background: var(--bg-1);
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}
.brand { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.brand img { height: 26px; width: auto; display: block; }
/* Sail My Way wordmark: Barlow ExtraBold, navy on light / white on dark, "My" in sea blue. */
.brand .product {
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.15rem; letter-spacing: -0.015em;
  color: #0B2E5C;
  white-space: nowrap;            /* never wrap the title onto a second line */
}
.brand .product .wm-my { color: #1C5BA6; }
[data-theme="dark"] .brand .product { color: #fff; }
[data-theme="dark"] .brand .product .wm-my { color: #A9C6EE; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .product { color: #fff; }
  :root:not([data-theme="light"]) .brand .product .wm-my { color: #A9C6EE; }
}
/* Compact header badges so the GPS + connectivity chips fit beside the title. */
.appbar .badge { font-size: 10px; padding: 2px var(--space-2); }
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-light { display: none; }
  :root:not([data-theme="light"]) .brand .logo-dark { display: block; }
}
[data-theme="dark"] .brand .logo-light { display: none; }
[data-theme="dark"] .brand .logo-dark { display: block; }

/* Lock control: hold 3s on the title/lock icon to lock or unlock the screen. Sits above
   the lock overlay so it stays tappable while locked. */
.lock-control {
  position: relative; z-index: 101;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: pointer;
}
.lock-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; margin-left: 2px;
  background: transparent; border: none; color: var(--fg-3);
  border-radius: var(--radius-sm); cursor: pointer;
}
.lock-closed { display: none; }
.lock-control.locked .lock-open { display: none; }
.lock-control.locked .lock-closed { display: block; }
.lock-control.locked .lock-btn { color: var(--orange); }

/* Input-blocking overlay (transparent). An inset orange frame signals the locked state. */
.lock-overlay { position: fixed; inset: 0; z-index: 100; touch-action: none; display: none; }
body.app-locked .lock-overlay { display: block; box-shadow: inset 0 0 0 2px var(--orange); }

.appbar-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: none; color: var(--fg-2);
  border-radius: var(--radius-md); cursor: pointer;
}
.iconbtn:hover { background: var(--bg-2); color: var(--fg-1); }
.iconbtn:focus-visible { box-shadow: var(--focus-ring); }

/* ---------- Screens ---------- */
/* isolate creates a stacking context so Leaflet's high z-index panes/controls stay
   contained here and don't paint over the settings/lock/modal overlays. */
.screens { flex: 1; min-height: 0; position: relative; isolation: isolate; }
.screen { height: 100%; }
.screen[hidden] { display: none; }

/* ---------- Tab bar ---------- */
.tabbar {
  display: flex;
  flex-shrink: 0;
  border-top: 0.5px solid var(--border);
  background: var(--bg-1);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1;
  height: 56px;
  background: transparent; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 500;
  color: var(--fg-3);
  border-top: 2px solid transparent;
}
.tab.active { color: var(--orange-press); border-top-color: var(--orange); font-weight: 600; }
.tab:focus-visible { box-shadow: var(--focus-ring); }

/* Tab bar language dropdown */
#tab-lang-dropdown {
  position: absolute; 
  bottom: 100%; /* Show above the tab bar */
  right: 0;
  background: var(--bg-1); 
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md); 
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  min-width: 140px; 
  z-index: 1000; 
  padding: var(--space-1) 0;
  margin-bottom: var(--space-1);
}

#tab-lang-dropdown .lang-btn {
  display: none; /* Hide the main button, we use the tab as the trigger */
}

/* ---------- Boat + Nav screens ---------- */
.boat, .nav-screen {
  height: 100%;
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
}

/* Hero metric: the big SOG readout */
.hero-metric {
  flex: 1;
  background: var(--bg-1);
  border: 0.5px solid var(--border);
  border-top: 2px solid var(--orange);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 0;
}
.hero-value {
  font-family: var(--font-display);
  font-weight: 800; line-height: 0.9; letter-spacing: -0.03em;
  font-size: clamp(6rem, 42vw, 16rem);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}

/* Nav screen: empty state + active layout */
.nav-empty {
  flex: 1; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--fg-3); font-size: 1rem; line-height: 1.6;
}
.nav-active { display: flex; flex-direction: column; gap: var(--space-4); }

.sail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.metric {
  background: var(--bg-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 0;
}
.metric-wide { grid-column: 1 / -1; }

/* The Nav screen has room for a larger direction dial */
.nav-screen .dest-dial { width: clamp(180px, 58vw, 300px); }
.metric-value {
  font-family: var(--font-display);
  font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  font-size: clamp(2.6rem, 15vw, 4.5rem);
  color: var(--fg-1);
  white-space: nowrap;
}
.metric-value.mono {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.02em;
  font-size: clamp(2rem, 12vw, 3.5rem);
}
.sail-dest {
  border: 0.5px solid var(--border);
  border-top: 2px solid var(--orange);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.sail-dest-head { display: flex; align-items: center; gap: var(--space-3); }
.dest-indicator {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-2) 0;
}
.dest-dial { width: clamp(120px, 42vw, 184px); height: auto; display: block; }
.dial-ring { fill: var(--bg-2); stroke: var(--border); stroke-width: 1; }
.dial-bow { fill: var(--fg-3); }                 /* top of dial = boat heading */
.dial-arrow {
  fill: var(--dial-arrow); stroke: var(--dial-arrow); stroke-width: 4; stroke-linecap: round;
  transition: transform 0.4s ease;               /* rotates about the dial centre (0,0) */
}
.dial-card {
  fill: var(--fg-2); font-family: var(--font-body); font-size: 11px; font-weight: 600;
  text-anchor: middle; dominant-baseline: central;
}
.dial-card-n { fill: var(--orange); }                 /* north stands out */
.dest-relbrg { font-size: 1rem; color: var(--fg-3); }
.dest-relbrg .t-mono { color: var(--fg-1); font-size: 1.6rem; }

.sail-dest-name {
  flex: 1;
  font-family: var(--font-display); font-weight: 600; font-size: 1.4rem;
  color: var(--fg-1); text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dest-clear {
  flex-shrink: 0;
  background: transparent; border: 0.5px solid var(--border);
  color: var(--fg-2); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 500;
  padding: 5px 12px; cursor: pointer;
}
.dest-clear:hover { background: var(--bg-2); color: var(--fg-1); }
.dest-clear:focus-visible { box-shadow: var(--focus-ring); }

/* ---------- Map screen ---------- */
.map-screen { height: 100%; display: flex; flex-direction: column; }
.map { flex: 1; min-height: 0; background: var(--bg-2); position: relative; }
/* Boat marker: heading-rotated arrow (divIcon) with a dot fallback */
/* "Zoom in" button inside Leaflet popups (popup background is always light) */
.popup-zoom {
  margin-top: 6px; padding: 4px 10px;
  border: 1px solid #ccc; border-radius: 6px;
  background: #fff; color: #cc5500; font-family: var(--font-body);
  font-size: 12px; font-weight: 500; cursor: pointer;
}
.popup-zoom:hover { background: #fff0e5; }

.boat-divicon { background: none; border: none; }
.boat-arrow { display: block; transform-origin: 50% 50%; transition: transform 0.3s ease; }
.boat-divicon.no-heading .boat-arrow { visibility: hidden; }
.boat-dot { display: none; }
.boat-divicon.no-heading .boat-dot {
  display: block; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: #2ec27e; border: 2px solid #fff;
}

.map-placeholder {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--space-6); color: var(--fg-3); font-size: 0.85rem;
}
.map-controls {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 0.5px solid var(--border);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.map-status { display: flex; align-items: center; justify-content: space-between; }
.map-points { font-size: 0.8rem; color: var(--fg-2); }
.track-toggle { font-weight: 600; letter-spacing: 0.01em; text-transform: uppercase; }

/* ---------- Waypoints screen ---------- */
.wp-screen { height: 100%; display: flex; flex-direction: column; }
.wp-searchbar { padding: var(--space-3) var(--space-4); border-bottom: 0.5px solid var(--border); }
.wp-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Waypoints screen bottom area */
.wp-bottom { 
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 0.5px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* Small language switcher for waypoints screen */
.lang-switcher-small {
  position: relative;
  display: inline-block;
}

.lang-switcher-small .lang-btn {
  padding: var(--space-2) var(--space-3);
  font-size: 0.9rem;
  background: var(--bg-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--fg-2);
  cursor: pointer;
}

.lang-switcher-small .lang-btn:hover {
  background-color: var(--bg-3); 
  color: var(--fg-1);
}

.lang-switcher-small .lang-dropdown {
  position: absolute;
  bottom: 100%;
  right: 0;
  background: var(--bg-1); 
  border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md); 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 120px; 
  z-index: 1000; 
  padding: var(--space-1) 0;
  margin-bottom: var(--space-1);
}

.lang-switcher-small .lang-option {
  display: block; 
  width: 100%; 
  padding: var(--space-2) var(--space-3);
  background: none; 
  border: none; 
  cursor: pointer;
  text-align: left; 
  font: inherit; 
  color: var(--fg-2);
  transition: background-color 0.15s, color 0.15s;
}

.lang-switcher-small .lang-option:hover {
  background-color: var(--bg-2); 
  color: var(--fg-1); 
}

.lang-switcher-small .lang-option.active {
  background-color: var(--bg-3); 
  color: var(--fg-1); 
  font-weight: 600;
}

/* Filter bar (fixed under the search box) */
.wp-filters {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap;
  padding: var(--space-2) var(--space-3);
  border-bottom: 0.5px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch; /* stay one row, scroll if ever too narrow */
}
.wp-filter {
  display: inline-flex; align-items: center; flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  border: 0.5px solid var(--border); border-radius: var(--radius-pill);
  font-size: 0.85rem; color: var(--fg-3); white-space: nowrap;
  background: transparent; font-family: var(--font-body);
  cursor: pointer; user-select: none;
}
/* Active filter = coloured pill; inactive = muted outline (no checkbox). */
.wp-filter[aria-pressed="true"] {
  background: var(--orange-tint); border-color: var(--orange); color: var(--orange-press);
}
.wp-filter:focus-visible { box-shadow: var(--focus-ring); }

.wp-add {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  background: transparent; border: 0.5px solid var(--border); border-radius: var(--radius-pill);
  color: var(--fg-2); font-size: 0.85rem; font-family: var(--font-body); cursor: pointer;
  white-space: nowrap;
}
.wp-add:hover { background: var(--bg-2); }
.wp-add:focus-visible { box-shadow: var(--focus-ring); }

/* List rows */
.wp-row {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; min-height: 56px;
  padding: var(--space-3) var(--space-4);
  background: transparent; border: none; border-bottom: 0.5px solid var(--border);
  cursor: pointer; text-align: left; color: var(--fg-1);
  font-family: var(--font-body); font-size: 1.15rem;
}
.wp-row:hover { background: var(--bg-3); }
.wp-row:focus-visible { box-shadow: var(--focus-ring); }
.wp-row.active { background: var(--orange-tint); color: var(--orange-press); }
.wp-icon { display: inline-flex; flex-shrink: 0; color: var(--fg-3); }
.wp-icon .wp-cat-ico { width: 24px; height: 24px; display: block; }
.wp-row.active .wp-icon { color: var(--orange-press); }
.wp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-del {
  flex-shrink: 0; margin-left: var(--space-2);
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3); font-size: 1rem; border-radius: var(--radius-sm); cursor: pointer;
}
.wp-del:hover { color: var(--danger); background: var(--bg-3); }
.wp-push {
  flex-shrink: 0; margin-left: var(--space-2);
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3); border-radius: var(--radius-sm); cursor: pointer;
}
.wp-push:hover { color: var(--fg-1); background: var(--bg-3); }
.wp-dist { color: var(--fg-3); font-size: 0.95rem; flex-shrink: 0; }
.wp-row.active .wp-dist { color: var(--orange-press); }
.wp-empty {
  padding: var(--space-3) var(--space-4);
  color: var(--fg-3); font-size: 0.95rem;
}

/* ---------- Language switcher ---------- */
.lang-switcher { display: inline-block; position: relative; }
.lang-btn {
  background: none; border: none; cursor: pointer;
  padding: var(--space-2) var(--space-3);
  font: inherit; color: var(--fg-2);
  border-radius: var(--radius-md);
  transition: background-color 0.2s, color 0.2s;
}
.lang-btn:hover { background-color: var(--bg-3); color: var(--fg-1); }
.lang-dropdown {
  position: absolute; right: 0; top: 100%;
  background: var(--bg-1); border: 0.5px solid var(--border-strong);
  border-radius: var(--radius-md); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 140px; z-index: 1000; padding: var(--space-1) 0;
}
.lang-option {
  display: block; width: 100%; padding: var(--space-2) var(--space-3);
  background: none; border: none; cursor: pointer;
  text-align: left; font: inherit; color: var(--fg-2);
  transition: background-color 0.15s, color 0.15s;
}
.lang-option:hover { background-color: var(--bg-2); color: var(--fg-1); }
.lang-option.active { background-color: var(--bg-3); color: var(--fg-1); font-weight: 600; }

/* ---------- Settings sheet ---------- */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 110; /* above the lock control (101) so it covers the app bar */
  background: var(--bg-1);
  display: flex; align-items: stretch; justify-content: center;
}
.sheet-backdrop[hidden] { display: none; }
.sheet {
  width: 100%; max-width: 520px;
  background: var(--bg-1);
  display: flex; flex-direction: column; gap: var(--space-3);
  overflow-y: auto;
  padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--space-4)
           calc(var(--space-6) + env(safe-area-inset-bottom));
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; }
.sheet-title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0; }
.set-row {
  display: flex; align-items: center; gap: var(--space-4);
  font-size: 0.95rem; color: var(--fg-1);
}
.set-row > span { flex: 1; min-width: 0; }
.set-row .input.set-num { width: 110px; flex: 0 0 110px; } /* beats .input width:100% */
.set-toggle { width: 22px; height: 22px; accent-color: var(--orange); }
.set-note { margin: 0; font-size: 0.7rem; color: var(--fg-3); }
.tracks-list { display: flex; flex-direction: column; gap: var(--space-2); }
.track-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 0.5px solid var(--border);
}
.track-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.track-title { font-size: 0.95rem; color: var(--fg-1); }
.track-meta { font-size: 0.75rem; color: var(--fg-3); }
.track-actions { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.track-actions .btn { padding: var(--space-2) var(--space-3); }

/* form input (from components guide) */
.input {
  width: 100%; height: 40px;
  border: 0.5px solid var(--border); border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  font-family: var(--font-body); font-size: 14px;
  color: var(--fg-1); background: var(--bg-1); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,107,0,0.12); }

/* ---------- Centered modal (add buoy) ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: 100%; max-width: 420px;
  background: var(--bg-1);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.modal .set-row { gap: var(--space-3); }
.modal .input { flex: 1; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 60;
  max-width: 320px;
  background: #1C1C1C; color: #F0EEEA;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  font-size: 0.85rem;
}
.toast[hidden] { display: none; }

/* Recording-gap banner: a flat full-width strip shown while GPS fixes have stopped mid-record. */
.gap-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--warning-bg);
  color: var(--warning);
  border-bottom: 0.5px solid var(--warning-border);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
}
.gap-banner[hidden] { display: none; }
.gap-banner-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warning); flex-shrink: 0;
}

/* Account section in the settings sheet */
.account-section { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.set-section-title { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; }
.account-section .input { width: 100%; }
.account-actions { display: flex; gap: var(--space-2); }
.account-actions .btn { flex: 1; }
#account-signed-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.account-who { font-family: var(--font-body); }
#acct-status:empty { display: none; }

/* Upload sheet: boat crew checkboxes + actions */
.upl-crew { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
.upl-crew:empty { display: none; }
.upl-crew-title { font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; }
.upl-crew label { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); }
.upl-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.upl-actions .btn { flex: 1; }
#upl-status:empty { display: none; }