/* =====================================================================
   Tracks — app.css
   Logged-in shell stylesheet. Uses tokens from branding.css.

   Layout model (drop 5):
   -------------------------------------------------------------------
   The map fills the viewport edge-to-edge. Everything else is an
   overlay above the map.

      ┌──────────────────────────────────────────┐  <- top bar
      │  Tracks      [recording beacon ────────] │     (44px, may
      ├──────────────────────────────────────────┤      become beacon
      │                                          │      while tracking)
      │                                          │
      │                MAP                       │
      │                                          │
      │                          ┌───┐           │
      │                          │ ⊕ │  <- right-rail map controls
      │                          │ ⤩ │     (center, more-stats)
      │                          └───┘           │
      │                                          │
      ├──────────────────────────────────────────┤  <- stats bar
      │  20.4 mph     0.83 mi    [Stop]          │     (visible while
      ├──────────────────────────────────────────┤      tracking only)
      │  ▶ Start  · Layers · Tracks · ⚑ · ⚙     │  <- bottom nav
      └──────────────────────────────────────────┘     (60px + safe)

   Trays slide up over the stats bar + nav as bottom sheets.
   Settings is a drill-in stack (slide-from-right sub-screens).
   ===================================================================== */

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

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-book);
    font-size: var(--fs-base);
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    touch-action: manipulation;
    overscroll-behavior: none;
}

body {
    /* Body is a vertical flex shell. The map is positioned absolutely
       behind everything; chrome (top bar, stats bar, nav) flexes within
       the shell so when the keyboard opens on iOS the visible viewport
       shrinks and the layout adjusts cleanly. */
    display: flex;
    flex-direction: column;
    position: relative;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}

/* ── MAP — the background of the entire app ──────────────────────────── */

#map {
    position: absolute;
    inset: 0;
    background-color: var(--color-bg);
    z-index: var(--z-map);
    /* The map element must own all touch gestures itself — OL handles
       pan/pinch and we read long-press through OL's pointer events.
       Without these three, Safari shows the long-press text-select
       callout and steals the gesture on iOS. */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* ── TOP BAR ─────────────────────────────────────────────────────────── */

#top-bar {
    flex: 0 0 auto;
    height: calc(var(--top-bar-height) + var(--safe-top));
    padding-top: var(--safe-top);
    padding-left: var(--space-4);
    padding-right: var(--space-3);
    background: var(--color-nav-bg);
    color: var(--color-nav-text-on);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: var(--z-nav);
    box-shadow: var(--shadow-sm);
}

#app-wordmark {
    font-family: var(--font-semibold);
    font-size: var(--fs-md);
    letter-spacing: -0.2px;
    color: var(--color-text-inverse);
}

#top-bar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ── SYNC STATUS PILL (lives in the top bar, always visible) ─────────── */

.sync-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px var(--space-3) 4px var(--space-2);
    border-radius: var(--radius-pill);
    background: rgba(255,255,255,0.06);
    color: var(--color-nav-text-on);
    font-family: var(--font-medium);
    font-size: var(--fs-xs);
    cursor: default;
    transition: background var(--dur-fast) var(--ease-out);
    border: 1px solid transparent;
    user-select: none;
}

.sync-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-faint);
    flex-shrink: 0;
    transition: background var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

.sync-label {
    font-family: var(--font-medium);
    line-height: 1;
    letter-spacing: 0.02em;
}

/* Idle / synced — green dot */
.sync-status.sync-idle .sync-dot {
    background: #4FD06A;
    box-shadow: 0 0 0 0 rgba(79,208,106,0);
}

/* Syncing — pulsing green */
.sync-status.sync-syncing .sync-dot {
    background: #4FD06A;
    animation: syncPulse 1.4s ease-in-out infinite;
}
@keyframes syncPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79,208,106,0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(79,208,106,0); }
}

/* Offline — grey */
.sync-status.sync-offline .sync-dot { background: var(--color-text-faint); }
.sync-status.sync-offline { color: rgba(255,255,255,0.55); }

/* Error — amber */
.sync-status.sync-error .sync-dot { background: var(--color-warning); }


/* ── TRACKING BEACON (lives in the top bar while tracking) ─────────────
   Drop 6: the opening selector was missing in drop 5, so the pill chrome
   never applied. Restored, then polished:
     - tighter shape, subtle border that reads as a status pill
     - dot has a soft inner highlight so it sits on the chrome
     - .gps-locked picks up a faint green wash on the pill background
       to match the dot, with a slower / softer pulse
   ───────────────────────────────────────────────────────────────────── */
#tracking-beacon {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: 4px var(--space-3) 4px var(--space-2);
    border-radius: var(--radius-pill);
    background: rgba(192,57,43,0.18);
    color: var(--color-nav-text-on);
    font-family: var(--font-medium);
    font-size: var(--fs-xs);
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out);
    border: 1px solid rgba(255,255,255,0.08);
    letter-spacing: 0.02em;
    user-select: none;
}
body.tracking #tracking-beacon { display: inline-flex; }

#tracking-beacon:hover { background: rgba(192,57,43,0.28); }

/* GPS-locked state: pill picks up a faint green wash to mirror the dot. */
#tracking-beacon.gps-locked {
    background: rgba(79,208,106,0.16);
    border-color: rgba(79,208,106,0.22);
}
#tracking-beacon.gps-locked:hover { background: rgba(79,208,106,0.24); }

.beacon-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-beacon);
    box-shadow: 0 0 0 0 var(--color-beacon-pulse),
                inset 0 0 0 1px rgba(255,255,255,0.18);
    animation: beaconPulse 1.6s ease-out infinite;
    flex-shrink: 0;
    transition: background var(--dur-base) var(--ease-out);
}
#tracking-beacon.gps-locked .beacon-dot {
    background: #4FD06A;
    animation: beaconLockedPulse 2.2s ease-out infinite;
}

@keyframes beaconPulse {
    0%   { box-shadow: 0 0 0 0 var(--color-beacon-pulse),
                       inset 0 0 0 1px rgba(255,255,255,0.18); }
    70%  { box-shadow: 0 0 0 8px rgba(192,57,43,0),
                       inset 0 0 0 1px rgba(255,255,255,0.18); }
    100% { box-shadow: 0 0 0 0 rgba(192,57,43,0),
                       inset 0 0 0 1px rgba(255,255,255,0.18); }
}
@keyframes beaconLockedPulse {
    0%   { box-shadow: 0 0 0 0 rgba(79,208,106,0.45),
                       inset 0 0 0 1px rgba(255,255,255,0.22); }
    70%  { box-shadow: 0 0 0 6px rgba(79,208,106,0),
                       inset 0 0 0 1px rgba(255,255,255,0.22); }
    100% { box-shadow: 0 0 0 0 rgba(79,208,106,0),
                       inset 0 0 0 1px rgba(255,255,255,0.22); }
}

.beacon-label {
    font-family: var(--font-medium);
    line-height: 1;
}

/* ── SCREEN CONTAINER — the middle of the shell, holds the map ───────── */

#screen-container {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    /* The map is positioned absolutely inside this region. */
}

/* ── MAP CONTROLS (right rail) ───────────────────────────────────────── */

.map-controls {
    position: absolute;
    right: var(--space-3);
    top: var(--space-3);
    z-index: var(--z-controls);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    pointer-events: none; /* let the map breathe through gaps */
}
.map-controls.bottom {
    top: unset;
    bottom: var(--space-3);
}
.map-controls > .control { pointer-events: auto; }

.control {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.control:hover { background: var(--color-surface-alt); }
.control.active,
.control.centered {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.control.hide { display: none; }

.map-controls.tracking-hidden #center-map,
.map-controls.tracking-hidden #more-stats { display: none; }
body:not(.tracking) #more-stats,
body:not(.tracking) #waypoint-add,
body:not(.tracking) #speed-legend { 
    display: none;
}

/* ── COMPASS WIDGET (sits with the right-rail map controls) ──────────
   Always-visible north indicator. The face is fixed; the inner arrow
   rotates to point to true north (i.e. counter to the map rotation).
   When the map's rotation is 0, the arrow points up. Tap centers the
   map on the last known position (cheap "re-orient" affordance).
   Hidden via `show-compass=0` in Settings → Map.
   ─────────────────────────────────────────────────────────────────── */
.compass {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.compass.hide { display: none; }
.compass-face {
    width: 100%;
    height: 100%;
    transition: transform var(--dur-base) var(--ease-out);
    will-change: transform;
}
.compass-needle {
    position: absolute;
    left: 50%;
    top: 4px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left:  6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 13px solid var(--color-danger);
}
.compass-needle.south {
    top: auto;
    bottom: 4px;
    border-bottom: 0;
    border-top: 13px solid var(--color-text-faint);
}
.compass-label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-semibold);
    font-size: 9px;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* ── SPEED LEGEND (collapsible, right rail above the controls) ──────
   Default collapsed: a single 42px pill that just shows the gradient
   bar + a chevron. Tap expands to show the 7 buckets stacked. Tap
   again (or anywhere outside) to collapse.
   ─────────────────────────────────────────────────────────────────── */
.speed-legend {
    pointer-events: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    font-size: var(--fs-xs);
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
    width: 42px;
    transition: width var(--dur-base) var(--ease-out);
}
.speed-legend.expanded { width: 140px; cursor: default; }

.speed-legend-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 8px;
    border-bottom: 1px solid transparent;
}
.speed-legend.expanded .speed-legend-head {
    border-bottom-color: var(--color-border);
    padding: 6px var(--space-3);
}
.speed-legend-bar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: var(--radius-pill);
    /* mirrors SPEED_COLORS order in tracking.js */
    background: linear-gradient(to right,
        #9CA3AF 0%, #9CA3AF 14%,
        #D81B7A 14%, #D81B7A 28%,
        #F26B5B 28%, #F26B5B 42%,
        #F39423 42%, #F39423 57%,
        #E8B800 57%, #E8B800 71%,
        #1FB8D1 71%, #1FB8D1 85%,
        #1E5BCC 85%, #1E5BCC 100%);
}
.speed-legend-caret {
    color: var(--color-text-faint);
    font-size: 10px;
    transition: transform var(--dur-fast) var(--ease-out);
}
.speed-legend.expanded .speed-legend-caret { transform: rotate(180deg); }

.speed-legend-body {
    display: none;
    padding: var(--space-2) var(--space-3) var(--space-3);
}
.speed-legend.expanded .speed-legend-body { display: block; }
.speed-legend-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 3px 0;
    color: var(--color-text-muted);
}
.speed-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.7),
                0 0 0 2px rgba(0,0,0,0.06);
}
.speed-legend-label {
    flex: 1 1 auto;
    font-family: var(--font-medium);
}
.speed-legend-units {
    font-size: 10px;
    color: var(--color-text-faint);
}

/* ── STATS BAR (visible while tracking; sits above bottom nav) ───────── */

#stats-bar {
    flex: 0 0 auto;
    display: none;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    z-index: var(--z-stats);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    transition: background var(--dur-base) var(--ease-out);
}
body.tracking #stats-bar { display: block; }

.stats-compact {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    min-height: var(--stats-bar-height);
    cursor: pointer;
}

.stat-block {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.stat-block .stat-value {
    font-family: var(--font-semibold);
    font-size: var(--fs-2xl);
    color: var(--color-text);
    line-height: 1;
}
.stat-block .stat-units {
    font-family: var(--font-medium);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-top: 4px;
}
.stat-block .stat-label {
    font-family: var(--font-medium);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

#stop-btn {
    background: var(--color-danger);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-pill);
    font-family: var(--font-semibold);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background var(--dur-fast);
}
#stop-btn:hover { background: var(--color-danger-hover); }

/* Expanded stats — slides up when user taps the compact bar */
#stats-expanded {
    display: none;
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt);
}
body.stats-expanded #stats-expanded { display: block; }

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-3) var(--space-4);
}
.stats-grid .stat-block .stat-value {
    font-size: var(--fs-lg);
}
.stat-reset {
    color: var(--color-text-faint);
    font-size: var(--fs-sm);
    margin-left: var(--space-1);
    cursor: pointer;
}
.stat-reset:hover { color: var(--color-danger); }

/* ── IDLE BAR (Start button block — visible when NOT tracking) ───────── */

#idle-bar {
    flex: 0 0 auto;
    display: flex;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    z-index: var(--z-stats);
}
body.tracking #idle-bar { display: none; }

#start-btn {
    flex: 1;
    background: var(--color-accent);
    color: #fff;
    padding: 14px;
    border-radius: var(--radius-md);
    font-family: var(--font-semibold);
    font-size: var(--fs-md);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: background var(--dur-fast);
}
#start-btn:hover  { background: var(--color-accent-hover); }
#start-btn:active { background: var(--color-accent-press); }
#start-btn .las   { font-size: 22px; }

/* ── BOTTOM NAV (always visible) ─────────────────────────────────────── */

#bottom-nav {
    flex: 0 0 auto;
    height: calc(var(--bottom-nav-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--color-nav-bg);
    z-index: var(--z-nav);
    display: flex;
    align-items: stretch;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--color-nav-text);
    font-family: var(--font-medium);
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
    transition: color var(--dur-fast);
    -webkit-tap-highlight-color: transparent;
}
.nav-item:hover  { color: rgba(255,255,255,0.92); }
.nav-item.active { color: var(--color-accent); }

.nav-icon {
    font-size: 22px;
    line-height: 1;
}
.nav-label {
    font-size: 11px;
    line-height: 1;
}

/* ── BOTTOM SHEET (used for Layers, Tracks, Waypoints, Settings) ─────── */

.sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20,20,20,0);
    z-index: var(--z-tray);
    pointer-events: none;
    transition: background var(--dur-base) var(--ease-out);
}
body.sheet-open .sheet-backdrop {
    pointer-events: auto;
    background: rgba(20,20,20,0.28);
}

.sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-tray) + 1);
    background: var(--color-surface);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    box-shadow: var(--shadow-tray);
    transform: translateY(100%);
    transition: transform var(--dur-close) var(--ease-in);
    display: flex;
    flex-direction: column;
    /* Explicit height — not just max-height. Without this, when the
       .sheet-body container is empty at open time (Layers/Tracks before
       their lists hydrate, or Settings root before settingsReset paints),
       the flex column collapses to just the header height and the sheet
       appears as a thin slice. Waypoints worked by coincidence because
       its body has a baked-in hint <div>. */
    height: 75dvh;
    max-height: 75dvh;
    padding-bottom: var(--safe-bottom);
}
.sheet.open {
    transform: translateY(0);
    transition: transform var(--dur-base) var(--ease-out);
}

.sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border-strong);
    margin: 8px auto 4px;
    flex-shrink: 0;
}

.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.sheet-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-semibold);
    font-size: var(--fs-md);
    color: var(--color-text);
}
.sheet-title .las { font-size: 22px; color: var(--color-accent); }

.sheet-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 20px;
    transition: background var(--dur-fast);
}
.sheet-close:hover { background: var(--color-surface-alt); color: var(--color-text); }

.sheet-back {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 22px;
    transition: background var(--dur-fast);
    visibility: hidden;
}
.sheet-back:hover { background: var(--color-surface-alt); color: var(--color-text); }
.sheet[data-stack-depth]:not([data-stack-depth="0"]) .sheet-back { visibility: visible; }

.sheet-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-3) var(--space-4) var(--space-4);
}

/* ── EDITOR SHEET (generic "name this thing" surface) ─────────────────
   Stacks above the regular nav sheets — route rename is triggered from
   within the Tracks sheet, waypoint rename from within Waypoints. Both
   need to remain visible behind the editor for context. Own backdrop,
   own z-layer; the openSheet/closeSheet single-active state machine in
   app.js is intentionally NOT used here. */

.editor-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20,20,20,0);
    z-index: calc(var(--z-modal) - 1);
    pointer-events: none;
    transition: background var(--dur-base) var(--ease-out);
}
body.editor-open .editor-backdrop {
    pointer-events: auto;
    background: rgba(20,20,20,0.40);
}

.editor-sheet {
    /* Sits above everything except toasts; toasts (z-toast 1300) need
       to be visible if a save triggers one before the close animation
       finishes — but we close before toasting, so this is belt-and-
       suspenders only. */
    z-index: var(--z-modal);
    /* Compact — only a header + one input field. Auto-height beats
       75dvh here; the keyboard would compete with all that empty
       space. */
    height: auto;
    max-height: 75dvh;
}

.editor-sheet .sheet-header {
    /* Cancel/Save are text buttons, not icon circles — override the
       icon-button sizing inherited via sheet-back/sheet-close. */
    padding: var(--space-2) var(--space-3) var(--space-3);
}

.editor-cancel,
.editor-save {
    height: 36px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    font-family: var(--font-medium);
    font-size: var(--fs-md);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.editor-cancel {
    color: var(--color-text-muted);
}
.editor-cancel:hover { background: var(--color-surface-alt); color: var(--color-text); }
.editor-save {
    color: var(--color-accent);
    font-family: var(--font-semibold);
}
.editor-save:hover { background: var(--color-accent-soft); }
.editor-save:disabled {
    color: var(--color-text-muted);
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
}

.editor-label {
    display: block;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}

.editor-input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 var(--space-3);
    font: inherit;
    font-size: var(--fs-md);
    color: var(--input-text);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    /* Stop iOS from zooming on focus (font-size < 16px triggers it). */
    -webkit-appearance: none;
}
.editor-input::placeholder { color: var(--input-placeholder); }
.editor-input:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px rgba(74, 107, 62, 0.18);
}

/* ── LAYERS sheet content ────────────────────────────────────────────── */

.layer-row {
    display: flex;
    flex-direction: column;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.layer-row:last-child { border-bottom: 0; }

.layer-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.layer-name {
    font-family: var(--font-medium);
    font-size: var(--fs-base);
    color: var(--color-text);
    cursor: pointer;
    flex: 1;
}
.layer-name.active {
    color: var(--color-accent);
    font-family: var(--font-semibold);
}
.layer-name.active::before {
    content: "●";
    margin-right: var(--space-2);
    color: var(--color-accent);
}

.layer-opacity {
    width: 100%;
    margin-top: var(--space-2);
    height: 4px;
    accent-color: var(--color-accent);
}

/* ── TRACKS sheet content ────────────────────────────────────────────── */

.track-item, .waypoint-item {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.track-item:last-child, .waypoint-item:last-child { border-bottom: 0; }

.track-item b, .waypoint-item b {
    font-family: var(--font-semibold);
    font-weight: normal;
    font-size: var(--fs-base);
    color: var(--color-text);
}

.track-item a, .waypoint-item a {
    color: var(--color-accent);
    font-size: var(--fs-sm);
    font-family: var(--font-medium);
    margin-right: var(--space-3);
}
.track-item a:hover, .waypoint-item a:hover { text-decoration: underline; }

.waypoint-hint {
    background: var(--color-accent-soft);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--color-text);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.waypoint-hint .las { color: var(--color-accent); font-size: 18px; margin-top: 1px; }

/* ── SETTINGS sheet — drill-in stack ─────────────────────────────────── */

.settings-screen {
    position: absolute;
    inset: 0;
    background: var(--color-surface);
    padding: var(--space-3) var(--space-4) var(--space-4);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
}
.settings-screen.root  { transform: translateX(0); }
.settings-screen.active { transform: translateX(0); }
.settings-screen.exit-left  { transform: translateX(-100%); }

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background var(--dur-fast);
    min-height: 52px;
}
.settings-row:last-child { border-bottom: 0; }
.settings-row:hover { background: var(--color-surface-alt); }

.settings-row.disabled {
    cursor: default;
    opacity: 0.55;
}
.settings-row.disabled:hover { background: transparent; }

/* `.static` — non-interactive row (the row itself isn't a click target;
   any actions live in dedicated buttons inside .settings-row-right). */
.settings-row.static { cursor: default; }
.settings-row.static:hover { background: transparent; }

.settings-row-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.settings-row-title {
    font-family: var(--font-medium);
    font-size: var(--fs-base);
    color: var(--color-text);
}
.settings-row-sub {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.settings-row-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--fs-sm);
}
.settings-row-right .las { font-size: 18px; }

.settings-row select {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-family: inherit;
    font-size: var(--fs-sm);
    color: var(--color-text);
    min-width: 140px;
}

/* ── Stepped slider (Drop B) ───────────────────────────────────────────
   Reusable widget: a vertical block with a value readout above, the
   range track in the middle, and tick labels below. The settings-row
   that hosts it switches from horizontal flex to vertical flex via
   .stepped-slider-row so the slider gets full width.

   Branding: the track and thumb use --color-accent (sage). The thumb
   gets a soft accent ring on focus/active to make the drag affordance
   obvious without leaning on browser default focus rings (which clash
   with the cream surface). */
.settings-row.stepped-slider-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    cursor: default;
    padding: var(--space-3) 0 var(--space-4);
}
.settings-row.stepped-slider-row:hover { background: transparent; }

.stepped-slider-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 var(--space-1);
}
.stepped-slider-value {
    align-self: flex-end;
    font-family: var(--font-medium);
    font-size: var(--fs-sm);
    color: var(--color-accent-press);
    background: var(--color-accent-soft);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    min-width: 60px;
    text-align: center;
}

input[type=range].stepped-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-pill);
    outline: none;
    margin: var(--space-2) 0 var(--space-1);
    cursor: pointer;
}
input[type=range].stepped-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-pill);
}
input[type=range].stepped-slider::-moz-range-track {
    height: 6px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-pill);
}
input[type=range].stepped-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: var(--color-accent);
    border: 3px solid var(--color-surface);
    border-radius: 50%;
    margin-top: -8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform var(--dur-fast);
}
input[type=range].stepped-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: var(--color-accent);
    border: 3px solid var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform var(--dur-fast);
}
input[type=range].stepped-slider:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range].stepped-slider:active::-moz-range-thumb     { transform: scale(1.12); }
input[type=range].stepped-slider:focus::-webkit-slider-thumb  { box-shadow: 0 0 0 6px var(--color-accent-soft); }
input[type=range].stepped-slider:focus::-moz-range-thumb      { box-shadow: 0 0 0 6px var(--color-accent-soft); }

.stepped-slider-ticks {
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
    font-size: var(--fs-xs);
    color: var(--color-text-faint);
    font-variant-numeric: tabular-nums;
}
.stepped-slider-ticks span { flex: 0 0 auto; }

/* ── Toggle switch (Drop B; locked pattern from compass) ───────────────
   Markup contract:
       <label class="toggle-switch" onclick="handleToggleClick(event, this)">
         <span class="toggle-track"><span class="toggle-thumb"></span></span>
         <input type="checkbox" onchange="..." style="display:none">
       </label>
   The label gets `.on` added by handleToggleClick whenever the inner
   checkbox flips to checked. `.on` is a pure visual projection of
   checkbox.checked — never read as a source of truth. */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.toggle-track {
    position: relative;
    width: 44px;
    height: 26px;
    background: var(--color-border-strong);
    border-radius: var(--radius-pill);
    transition: background var(--dur-fast);
}
.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--color-surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.22);
    transition: transform var(--dur-fast);
}
.toggle-switch.on .toggle-track { background: var(--color-accent); }
.toggle-switch.on .toggle-thumb { transform: translateX(18px); }
.toggle-switch:active .toggle-thumb { transform: scale(0.96); }
.toggle-switch.on:active .toggle-thumb { transform: translateX(18px) scale(0.96); }


.settings-section-title {
    font-family: var(--font-medium);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin: var(--space-4) 0 var(--space-1);
}
.settings-section-title:first-child { margin-top: 0; }

.settings-readonly {
    font-family: var(--font-medium);
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.settings-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    color: var(--btn-secondary-text);
    border-radius: var(--radius-md);
    font-family: var(--font-medium);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: background var(--dur-fast);
}
.settings-action-btn:hover { background: var(--color-surface-alt); }
.settings-action-btn.danger {
    color: var(--color-danger);
    border-color: var(--color-danger-soft);
}
.settings-action-btn.danger:hover {
    background: var(--color-danger-soft);
}
.settings-action-btn.primary {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.settings-action-btn.primary:hover { background: var(--color-accent-hover); }

/* ── Account sub-screen inline forms (Drop F) ──────────────────────────
   Email change / password change / delete account each have a
   collapsed-by-default form that expands inline beneath its row when
   the user taps the Edit / Delete button. No drill-in, no extra sheet
   — just inline disclosure. The form layout mirrors the public.css
   .field shape but with tighter spacing for the settings density. */
.account-form {
    padding: var(--space-3) 0 var(--space-3);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.account-form[hidden] { display: none; }

.account-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.account-field label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    font-family: var(--font-medium);
}
.account-field input {
    height: 44px;
    padding: 0 var(--space-3);
    font: inherit;
    font-size: var(--fs-md);
    color: var(--input-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--dur-fast);
}
.account-field input:focus {
    border-color: var(--input-border-focus);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.account-alert {
    font-size: var(--fs-sm);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    line-height: 1.4;
}
.account-alert.success {
    background: var(--color-accent-soft);
    color: var(--color-accent-press);
}
.account-alert.hidden { display: none; }

.account-form-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}

/* Debug-only scratch area inside Settings → About */
#debug-log-content {
    max-height: 240px;
    overflow-y: auto;
    padding: var(--space-2);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-text-muted);
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: var(--space-2);
}

.debug-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.debug-buttons button {
    text-align: left;
    padding: 10px var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-family: var(--font-medium);
    font-size: var(--fs-sm);
    color: var(--color-text);
    cursor: pointer;
}
.debug-buttons button:hover { background: var(--color-surface-alt); }
.debug-buttons button.danger {
    color: var(--color-danger);
    border-color: var(--color-danger-soft);
}

/* ── TOAST component ─────────────────────────────────────────────────── */

#toast-container {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: none;
    max-width: calc(100% - 32px);
}
body.tracking #toast-container {
    bottom: calc(var(--bottom-nav-height) + var(--stats-bar-height) + var(--safe-bottom) + 16px);
}

.toast {
    pointer-events: auto;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    color: var(--color-text-inverse);
    font-family: var(--font-medium);
    font-size: var(--fs-sm);
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
    max-width: 360px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.toast.toast-visible { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--color-success); }
.toast-error   { background: var(--color-danger); }
.toast-info    { background: var(--color-info); }

.toast-action {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    font-family: var(--font-semibold);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background var(--dur-fast);
}
.toast-action:hover { background: rgba(255,255,255,0.3); }

/* ── Service-worker update banner (persistent, has Reload button) ────── */

.update-banner {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bottom-nav-height) + var(--safe-bottom) + 14px);
    transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px;
    background: var(--color-text); color: #fff;
    font-size: 13px;
    padding: 10px 12px 10px 18px;
    border-radius: 24px;
    z-index: var(--z-toast);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    max-width: calc(100vw - 32px);
}
.update-banner-text {
    font-family: var(--font-medium);
    white-space: nowrap;
}
.update-banner-btn {
    background: #fff; color: var(--color-text);
    border: 0; border-radius: 16px;
    padding: 6px 14px;
    font-family: var(--font-semibold); font-size: 13px;
    cursor: pointer;
}
.update-banner-btn:disabled { opacity: 0.6; cursor: default; }

/* ── OpenLayers control tweaks ───────────────────────────────────────── */

.ol-zoom {
    top: var(--space-3);
    left: var(--space-3);
}
.ol-zoom button {
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    width: 36px;
    height: 36px;
    font-size: 18px;
}
.ol-zoom button:hover  { background: var(--color-surface-alt); }
.ol-zoom button:focus  { outline: none; }
.ol-control button     { border-radius: var(--radius-sm); }

.ol-attribution {
    background: rgba(255,255,255,0.7) !important;
    font-size: 10px;
}

/* ── Waypoint long-press visual feedback ─────────────────────────────── */

body.waypoint-pressing #map::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 3px var(--color-accent);
    border-radius: 4px;
    animation: pressGlow 700ms ease-out forwards;
    z-index: var(--z-controls);
}
@keyframes pressGlow {
    0%   { box-shadow: inset 0 0 0 0 var(--color-accent); }
    100% { box-shadow: inset 0 0 0 3px var(--color-accent); }
}

/* ── Landscape phone tweaks ──────────────────────────────────────────── */

@media (orientation: landscape) and (max-height: 500px) {
    :root {
        --top-bar-height:    36px;
        --bottom-nav-height: 50px;
        --stats-bar-height:  64px;
    }
    .stat-block .stat-value { font-size: var(--fs-xl); }
    .sheet { max-height: 90dvh; }
}