/*
 * ═══════════════════════════════════════════════════════════════════
 *  RideComp — style.css  (Spatial / Glassmorphism redesign)
 *
 *  Layout: full-bleed Leaflet map canvas; all UI panels float
 *  above it using position:fixed + glassmorphism.
 *
 *  Typography
 *  ──────────
 *  UI / Display   → Plus Jakarta Sans (400 · 500 · 600 · 700 · 800)
 *  Data / Numbers → Fira Code (400 · 500)
 *
 *  Panel anatomy
 *  ─────────────
 *  #topbar  → floating pill, top-right
 *  #mc      → tile-selector pill, top-left
 *  #sidebar → floating glass panel, left edge
 *  #sp      → floating glass panel, right edge
 *  #cs      → floating glass strip, bottom centre
 *  Modals, toast, loader → fixed overlays
 * ═══════════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════════
   1.  DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  /* Surfaces */
  --bg:  #f4f5f2;  --bg2: #ffffff;  --bg3: #edeef0;
  --bg4: #e2e4e8;  --bg5: #d0d2d8;  --bg6: #c0c3ca;

  /* Borders */
  --ln:  rgba(0,0,0,0.06);
  --ln2: rgba(0,0,0,0.10);
  --ln3: rgba(0,0,0,0.18);

  /* Text */
  --tx: #111318;  --tx2: #4a4f5c;  --mu: #7a8091;
  --card-border: #e0e2e8;

  /* Brand */
  --acc:  #16a349;
  --acc2: #0284c7;
  --acc3: #d97706;

  /* Semantic */
  --dan:  #dc2626;  --ok:   #16a34a;  --warn: #ca8a04;

  /* Ride palette */
  --r0:#16a349; --r1:#0284c7; --r2:#d97706;
  --r3:#7c3aed; --r4:#db2777; --r5:#059669;
  --r6:#b45309; --r7:#1d4ed8; --r8:#dc2626;

  /* Garmin difficulty */
  --diff-beginner:#4ade80; --diff-easy:#86efac;
  --diff-moderate:#facc15; --diff-hard:#fb923c;
  --diff-very-hard:#f87171; --diff-expert:#c084fc;
  --diff-extreme:#f43f5e;

  /* Glass */
  --glass-bg:     rgba(252, 253, 250, 0.88);
  --glass-border: rgba(255, 255, 255, 0.62);
  --glass-blur:   blur(22px) saturate(1.7);
  --glass-shadow: 0 2px 10px rgba(0,0,0,0.07),
                  0 8px 36px rgba(0,0,0,0.05);
  --glass-hi:     inset 0 1px 0 rgba(255,255,255,0.72);

  /* Typography */
  --fui:   'Plus Jakarta Sans', system-ui, sans-serif;
  --fmono: 'Fira Code', 'Cascadia Code', monospace;

  /* Shape */
  --rad:   6px;
  --radl:  12px;
  --radx:  18px;
  --rad-panel: 16px;

  /* Panel sizing (driven by ridemap-patch.js) */
  --sbw:  268px;
  --stw:  284px;
  --chh:  150px;
  --sbw-mini: 56px;
  --panel-gap: 14px;
  --topbar-h: 52px;

  /* Panel stagger — top edge of side panels */
  --panel-top: calc(var(--topbar-h) + var(--panel-gap) + var(--panel-gap));

  /* Sidebar transition */
  --sb-trans: width 220ms cubic-bezier(.4,0,.2,1);
}

/* ── Dark via media query ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:  #0b0d12;  --bg2: #13161e;  --bg3: #1a1f29;
    --bg4: #222836;  --bg5: #2c3244;  --bg6: #374050;

    --ln:  rgba(255,255,255,0.06);
    --ln2: rgba(255,255,255,0.10);
    --ln3: rgba(255,255,255,0.17);

    --tx: #e6e8f0;  --tx2: #9ba3b5;  --mu: #6b7585;
    --card-border: #1e2430;

    --acc:  #4ade80;  --acc2: #38bdf8;  --acc3: #fbbf24;
    --dan:  #f87171;  --ok:   #4ade80;  --warn: #fbbf24;

    --r0:#4ade80; --r1:#38bdf8; --r2:#fbbf24;
    --r3:#a78bfa; --r4:#f472b6; --r5:#34d399;
    --r6:#f59e0b; --r7:#60a5fa; --r8:#f87171;

    --glass-bg:     rgba(10, 12, 18, 0.86);
    --glass-border: rgba(255,255,255,0.07);
    --glass-shadow: 0 2px 16px rgba(0,0,0,0.55),
                    0 8px 40px rgba(0,0,0,0.32);
    --glass-hi:     inset 0 1px 0 rgba(255,255,255,0.04);
  }
}

/* ── Manual overrides ─────────────────────────────────────────── */
[data-theme="light"] {
  --bg:#f4f5f2; --bg2:#ffffff; --bg3:#edeef0;
  --bg4:#e2e4e8; --bg5:#d0d2d8; --bg6:#c0c3ca;
  --ln:rgba(0,0,0,0.06); --ln2:rgba(0,0,0,0.10); --ln3:rgba(0,0,0,0.18);
  --tx:#111318; --tx2:#4a4f5c; --mu:#7a8091;
  --card-border:#e0e2e8;
  --acc:#16a349; --acc2:#0284c7; --acc3:#d97706;
  --dan:#dc2626; --ok:#16a34a;  --warn:#ca8a04;
  --r0:#16a349; --r1:#0284c7; --r2:#d97706;
  --r3:#7c3aed; --r4:#db2777; --r5:#059669;
  --r6:#b45309; --r7:#1d4ed8; --r8:#dc2626;
  --glass-bg:rgba(252,253,250,0.88);
  --glass-border:rgba(255,255,255,0.62);
  --glass-shadow:0 2px 10px rgba(0,0,0,0.07),0 8px 36px rgba(0,0,0,0.05);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,0.72);
}

[data-theme="dark"] {
  --bg:#0b0d12; --bg2:#13161e; --bg3:#1a1f29;
  --bg4:#222836; --bg5:#2c3244; --bg6:#374050;
  --ln:rgba(255,255,255,0.06); --ln2:rgba(255,255,255,0.10); --ln3:rgba(255,255,255,0.17);
  --tx:#e6e8f0; --tx2:#9ba3b5; --mu:#6b7585;
  --card-border:#1e2430;
  --acc:#4ade80; --acc2:#38bdf8; --acc3:#fbbf24;
  --dan:#f87171; --ok:#4ade80;  --warn:#fbbf24;
  --r0:#4ade80; --r1:#38bdf8; --r2:#fbbf24;
  --r3:#a78bfa; --r4:#f472b6; --r5:#34d399;
  --r6:#f59e0b; --r7:#60a5fa; --r8:#f87171;
  --glass-bg:rgba(10,12,18,0.86);
  --glass-border:rgba(255,255,255,0.07);
  --glass-shadow:0 2px 16px rgba(0,0,0,0.55),0 8px 40px rgba(0,0,0,0.32);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ══════════════════════════════════════════════════════════════════
   2.  RESET & BASE
   ══════════════════════════════════════════════════════════════════ */

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: var(--fui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select, textarea { font-family: var(--fui); }
button { cursor: pointer; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg5); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--bg6); }

/* ══════════════════════════════════════════════════════════════════
   3.  FULL-BLEED MAP CANVAS
   ══════════════════════════════════════════════════════════════════ */

#map {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bg);
}

/* Push Leaflet zoom below the tile-selector pill */
.leaflet-top.leaflet-left { top: calc(var(--topbar-h) + var(--panel-gap) + 40px) !important; }
.leaflet-control-zoom { margin-left: var(--panel-gap) !important; }

/* ══════════════════════════════════════════════════════════════════
   4.  GLASS PANEL — shared mixin (applied inline per panel)
   ══════════════════════════════════════════════════════════════════ */

/* Helper class — panels apply this directly via selectors below */

/* ══════════════════════════════════════════════════════════════════
   5.  FLOATING TOPBAR  ─  top-right pill
   ══════════════════════════════════════════════════════════════════ */

#topbar {
  position: fixed;
  top: var(--panel-gap);
  right: var(--panel-gap);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 14px;
  border-radius: var(--rad-panel);
  z-index: 500;
  /* Glass */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-hi);
}

/* Brand word-mark */
.logo {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--acc);
  white-space: nowrap;
  flex-shrink: 0;
}
.logo em { color: var(--tx); font-style: normal; }

/* Vertical separator inside topbar */
.tb-sep-v {
  width: 1px;
  height: 20px;
  background: var(--glass-border);
  flex-shrink: 0;
}

/* Flexible spacer */
.tb-div {
  flex: 1;
  min-width: 8px;
  max-width: 24px;
}

/* Action button group */
.tbr {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Chips ────────────────────────────────────────────────────── */
.chip {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--bg4);
  border: 1px solid var(--ln2);
  color: var(--tx2);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--fmono);
  letter-spacing: 0.02em;
}
.chip.on   { border-color: var(--acc);  color: var(--acc);  background: rgba(74,222,128,.08); }
.chip.warn { border-color: var(--warn); color: var(--warn); background: rgba(202,138,4,.08); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: var(--rad);
  border: 1px solid var(--ln2);
  background: var(--bg3);
  color: var(--tx);
  transition: background 130ms, border-color 130ms, color 130ms;
  white-space: nowrap;
}
.btn:hover { background: var(--bg4); border-color: var(--ln3); }

.btn.primary {
  background: var(--acc);
  border-color: var(--acc);
  color: #fff;
  font-weight: 700;
}
.btn.primary:hover { filter: brightness(1.09); }

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--tx2);
}
.btn.ghost:hover { background: var(--bg4); color: var(--tx); border-color: var(--ln); }

.btn.dbtn  { border-color: var(--dan); color: var(--dan); }
.btn.dbtn:hover { background: rgba(220,38,38,.08); }

/* 32×32 icon buttons in the topbar */
.btn.ghost.tb-icon {
  width: 32px; height: 32px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 15px;
}

#fi { display: none; }

/* ══════════════════════════════════════════════════════════════════
   6.  TILE-SELECTOR  ─  top-left pill
   ══════════════════════════════════════════════════════════════════ */

#mc {
  position: fixed;
  top: var(--panel-gap);
  left: var(--panel-gap);
  z-index: 500;
  display: flex;
  gap: 2px;
  padding: 6px 7px;
  border-radius: var(--rad-panel);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-hi);
}

.mb {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--tx2);
  cursor: pointer;
  transition: all 120ms;
  letter-spacing: 0.02em;
}
.mb:hover { background: var(--bg4); color: var(--tx); }
.mb.on    { background: var(--acc); color: #fff; border-color: transparent; }

/* ══════════════════════════════════════════════════════════════════
   7.  LEFT PANEL  ─  rides / sidebar
   ══════════════════════════════════════════════════════════════════ */

#sidebar {
  position: fixed;
  top: var(--panel-top);
  left: var(--panel-gap);
  /* bottom = chart height + gap below chart + one gap above chart
     = --chh + --panel-gap (chart bottom offset) + --panel-gap (breathing room)
     This gives exactly --panel-gap of air between sidebar bottom
     and chart strip top edge, matching all other element spacing.  */
  bottom: calc(var(--chh, 150px) + var(--panel-gap) * 2);
  width: var(--sbw, 268px);
  min-width: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--rad-panel);
  /* Glass */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-hi);
  transition: var(--sb-trans);
}

/* Panel header */
.ph {
  padding: 12px 13px 10px;
  border-bottom: 1px solid var(--ln);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 6px;
}
.panel-header-inner { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.panel-wordmark { display: flex; align-items: baseline; gap: 6px; }
.panel-logo {
  font-size: 14px; font-weight: 800;
  letter-spacing: -0.03em; color: var(--acc);
}
.panel-logo em { color: var(--tx); font-style: normal; }
.panel-tagline {
  font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--mu);
}
.ph-row { display: flex; align-items: center; gap: 6px; }

.pt {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mu); flex: 1;
}
.rc-count {
  font-family: var(--fmono);
  font-size: 11px; font-weight: 500;
  color: var(--mu); flex-shrink: 0;
}
.pill-btn {
  font-size: 10px !important;
  padding: 3px 9px !important;
  border-radius: 99px !important;
  border: 1px solid var(--ln2) !important;
  height: auto !important;
}
.multi-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; color: var(--mu);
  cursor: pointer; user-select: none;
  white-space: nowrap;
}
.multi-label input { accent-color: var(--acc); width: 12px; height: 12px; }

/* Rides list */
#rides-list {
  flex: 1;
  overflow-y: auto;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ─── Ride card ────────────────────────────────────────────────── */
.rc {
  border: 1px solid var(--card-border);
  border-radius: var(--radl);
  padding: 9px 10px 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 130ms, background 130ms, box-shadow 130ms;
  animation: fadeUp 180ms ease;
  background: transparent;
}
/* Coloured left accent bar */
.rc::after {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  background: var(--rc, var(--acc));
  border-radius: 0 3px 3px 0;
}
.rc:hover {
  border-color: var(--ln3);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}
.rc.sel {
  border-color: var(--rc, var(--acc)) !important;
  background: rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 0 0 1px var(--rc, var(--acc)) !important;
}
.rc.fad { opacity: 0.32; }

.rc-hd {
  display: flex; align-items: center;
  gap: 7px; margin-bottom: 7px;
}
.rc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rc);
  flex-shrink: 0;
}
.rc-nm {
  font-size: 12px; font-weight: 700;
  color: var(--tx); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.rc-acts { display: flex; gap: 3px; }
.ibb {
  width: 22px; height: 22px;
  border-radius: 5px;
  border: 1px solid var(--ln);
  background: transparent;
  color: var(--mu);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  transition: all 120ms;
  flex-shrink: 0;
}
.ibb:hover { border-color: var(--ln3); color: var(--tx); background: var(--bg4); }
.ibb.rm:hover { border-color: var(--dan); color: var(--dan); }

.rc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
}
.rc-kv { font-family: var(--fmono); font-size: 11px; color: var(--mu); }
.rc-kv b { color: var(--tx2); font-weight: 500; font-size: 14px; }

/* ─── Drop zone ─────────────────────────────────────────────────── */
#dz {
  margin: 6px 7px 0;
  border: 1px dashed var(--ln2);
  border-radius: var(--radl);
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color 200ms, background 200ms;
  flex-shrink: 0;
}
#dz:hover, #dz.ov {
  border-color: var(--acc);
  background: rgba(74,222,128,0.06);
}
.dz-icon { font-size: 18px; margin-bottom: 3px; }
.dz1 { font-size: 12px; font-weight: 600; color: var(--tx); margin-bottom: 2px; }
.dz2 { font-size: 10px; color: var(--mu); }

/* ─── DB badge ──────────────────────────────────────────────────── */
#db-badge {
  margin: 6px 7px 7px;
  padding: 6px 10px;
  border-radius: var(--rad);
  border: 1px solid var(--ln);
  background: rgba(255,255,255,0.04);
  font-size: 10px; color: var(--mu);
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0; cursor: pointer;
  transition: border-color 150ms;
  font-family: var(--fmono);
}
#db-badge:hover { border-color: var(--ln2); }
#dbdot {
  width: 7px; height: 7px;
  border-radius: 50%; background: var(--mu);
  flex-shrink: 0; transition: background 300ms;
}
#dbdot.ok   { background: var(--ok); }
#dbdot.warn { background: var(--warn); }

/* ─── Empty state ───────────────────────────────────────────────── */
.empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%; padding: 24px;
  text-align: center;
  animation: fadeUp 300ms ease;
}
.ei { font-size: 30px; opacity: 0.18; margin-bottom: 12px; }
.et { font-size: 13px; font-weight: 700; color: var(--mu); margin-bottom: 5px; }
.es { font-size: 11px; color: var(--mu); opacity: 0.6; line-height: 1.7; max-width: 200px; }

/* ══════════════════════════════════════════════════════════════════
   8.  SIDEBAR STATES  (managed by ridemap-patch.js)
   ══════════════════════════════════════════════════════════════════ */

/* Mini — icon rail */
#sidebar[data-sb-state="mini"] {
  width: var(--sbw-mini) !important;
}
#sidebar[data-sb-state="mini"] .sb-full-only,
#sidebar[data-sb-state="mini"] .rc-nm,
#sidebar[data-sb-state="mini"] .rc-grid,
#sidebar[data-sb-state="mini"] .rc-acts,
#sidebar[data-sb-state="mini"] .dz1,
#sidebar[data-sb-state="mini"] .dz2,
#sidebar[data-sb-state="mini"] #dblbl,
#sidebar[data-sb-state="mini"] .panel-header-inner { display: none !important; }

#sidebar[data-sb-state="mini"] .ph {
  padding: 9px 0; justify-content: center; border-bottom: 1px solid var(--ln);
}
#sidebar[data-sb-state="mini"] .rc-hd { justify-content: center; margin-bottom: 0; }
#sidebar[data-sb-state="mini"] .rc-dot { width: 11px; height: 11px; }
#sidebar[data-sb-state="mini"] #rides-list { padding: 5px 4px; gap: 3px; align-items: center; }
#sidebar[data-sb-state="mini"] .rc { padding: 7px 3px; width: 44px; }
#sidebar[data-sb-state="mini"] #dz { margin: 4px; padding: 10px 3px; }
#sidebar[data-sb-state="mini"] .dz-icon { margin-bottom: 0; font-size: 15px; }
#sidebar[data-sb-state="mini"] #db-badge { justify-content: center; padding: 6px; margin: 0 4px 4px; }

/* Hidden */
#sidebar[data-sb-state="hidden"] {
  width: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  pointer-events: none;
}

/* Full-only: hidden in mini/hidden */
#sidebar[data-sb-state="mini"]   .sb-full-only { display: none !important; }
#sidebar[data-sb-state="hidden"] .sb-full-only { display: none !important; }

/* Legacy buttons — never shown */
.toggle-btn, .collapse-btn { display: none !important; }
.mob-close { display: none; }

/* ══════════════════════════════════════════════════════════════════
   9.  RIGHT PANEL  ─  stats / vitals / compare
   ══════════════════════════════════════════════════════════════════ */

#sp {
  position: fixed;
  top: var(--panel-top);
  right: var(--panel-gap);
  bottom: calc(var(--chh, 150px) + var(--panel-gap) * 2);
  width: var(--stw, 284px);
  min-width: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--rad-panel);
  /* Glass */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-hi);
  transition: width 220ms cubic-bezier(.4,0,.2,1);
}

/* Tabs */
.stabs {
  display: flex;
  border-bottom: 1px solid var(--ln);
  flex-shrink: 0;
}
.stab {
  flex: 1; padding: 10px 4px;
  text-align: center;
  font-size: 10px; font-weight: 700;
  color: var(--mu); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.stab:hover { color: var(--tx2); }
.stab.on    { color: var(--acc); border-bottom-color: var(--acc); }

#sb {
  flex: 1; overflow-y: auto;
  padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}

/* ─── Accordion (right-panel sections) ────────────────────────── */
.accordion {
  border: 1px solid var(--ln);
  border-radius: var(--radl);
  overflow: hidden;
  flex-shrink: 0;
}
.accordion-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 11px;
  font-size: 10px; font-weight: 700;
  color: var(--mu); text-transform: uppercase; letter-spacing: 0.09em;
  cursor: pointer; user-select: none;
  transition: color 120ms, background 120ms;
}
.accordion-hd:hover { color: var(--tx); background: rgba(255,255,255,0.04); }
.accordion-arrow { font-size: 9px; transition: transform 220ms ease; }
.accordion.open .accordion-arrow { transform: rotate(-180deg); }
.accordion-body { padding: 0 8px 8px; display: none; }
.accordion.open .accordion-body { display: block; }

/* ─── Stat bars ─────────────────────────────────────────────────── */
.sblk {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ln);
  border-radius: var(--radl);
  padding: 9px 11px;
}
.slbl {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--mu); margin-bottom: 8px;
}
.sbr {
  display: flex; align-items: center;
  gap: 5px; margin-bottom: 5px;
}
.sbd { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.sbn {
  width: 65px; font-size: 9px; color: var(--mu);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 0;
}
.sbb {
  flex: 1; height: 3px;
  background: var(--bg5);
  border-radius: 2px; overflow: hidden;
}
.sbf {
  height: 100%; border-radius: 2px;
  transition: width 600ms cubic-bezier(.4,0,.2,1);
}
.sbv {
  width: 54px; font-family: var(--fmono);
  font-size: 10px; color: var(--tx2);
  text-align: right; flex-shrink: 0;
}
.sbv.best { font-weight: 500; color: var(--acc); }

/* ─── Vitals grid ───────────────────────────────────────────────── */
.vsec    { margin-bottom: 4px; }
.vsect   {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--ln);
  margin-bottom: 6px; color: var(--mu);
}
.vg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px; margin-bottom: 7px;
}
.vc {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--ln);
  border-radius: var(--rad);
  padding: 8px 9px;
}
.vcl {
  font-size: 9px; font-weight: 600; color: var(--mu);
  margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.06em;
}
.vcv {
  font-family: var(--fmono);
  font-size: 17px; font-weight: 500;
  color: var(--tx); letter-spacing: -0.02em;
}
.vcv.a { color: var(--acc); }
.vcv.b { color: var(--acc2); }
.vcv.c { color: var(--acc3); }
.vcv.d { color: var(--dan); }

/* ─── HR Zones ──────────────────────────────────────────────────── */
.zr {
  display: flex; align-items: center;
  gap: 5px; margin-bottom: 4px;
}
.zl  { font-size: 9px; color: var(--mu); width: 44px; flex-shrink: 0; font-family: var(--fmono); }
.zbg { flex: 1; height: 4px; background: var(--bg5); border-radius: 2px; }
.zf  { height: 100%; border-radius: 2px; }
.zp  { font-family: var(--fmono); font-size: 9px; color: var(--tx2); width: 28px; text-align: right; flex-shrink: 0; }

/* ─── Plan / insight ────────────────────────────────────────────── */
.ins {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ln);
  border-radius: var(--rad);
  padding: 9px 11px;
  font-size: 11px; line-height: 1.65; color: var(--tx2);
}
.ins b   { color: var(--tx); font-weight: 600; }
.insl    {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--mu); margin-bottom: 4px;
}

/* ─── Difficulty segments ────────────────────────────────────────── */
.seg-row {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px;
  background: rgba(255,255,255,0.04);
  border-radius: var(--rad);
  border: 1px solid var(--ln);
  margin-bottom: 4px; cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.seg-row:hover { background: rgba(255,255,255,0.08); border-color: var(--ln2); }
.seg-dot {
  width: 7px; height: 7px;
  border-radius: 50%; flex-shrink: 0;
}
.seg-dot.beginner  { background: var(--diff-beginner); }
.seg-dot.easy      { background: var(--diff-easy); }
.seg-dot.moderate  { background: var(--diff-moderate); }
.seg-dot.hard      { background: var(--diff-hard); }
.seg-dot.very-hard { background: var(--diff-very-hard); }
.seg-dot.expert    { background: var(--diff-expert); }
.seg-dot.extreme   { background: var(--diff-extreme); }

.diff-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.diff-badge.beginner  { background:rgba(74,222,128,.12);  color:var(--diff-beginner);  border:1px solid rgba(74,222,128,.28); }
.diff-badge.easy      { background:rgba(134,239,172,.12); color:#16a34a;               border:1px solid rgba(134,239,172,.28); }
.diff-badge.moderate  { background:rgba(250,204,21,.12);  color:var(--diff-moderate);  border:1px solid rgba(250,204,21,.28); }
.diff-badge.hard      { background:rgba(251,146,60,.12);  color:var(--diff-hard);      border:1px solid rgba(251,146,60,.28); }
.diff-badge.very-hard { background:rgba(248,113,113,.12); color:var(--diff-very-hard); border:1px solid rgba(248,113,113,.28); }
.diff-badge.expert    { background:rgba(192,132,252,.12); color:var(--diff-expert);    border:1px solid rgba(192,132,252,.28); }
.diff-badge.extreme   { background:rgba(244,63,94,.12);   color:var(--diff-extreme);   border:1px solid rgba(244,63,94,.28); }

/* ══════════════════════════════════════════════════════════════════
   10.  BOTTOM PANEL  ─  elevation / HR / speed profile
   ══════════════════════════════════════════════════════════════════ */

#cs {
  position: fixed;
  bottom: var(--panel-gap);
  /* Always span the full viewport width — side panels already
     end above the chart top via their own `bottom` rule, so
     no gap formula is needed here. Full width also eliminates
     the blank corner boxes that appeared beside the panels. */
  left:  var(--panel-gap);
  right: var(--panel-gap);
  height: var(--chh, 150px);
  min-height: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 14px 7px;
  border-radius: var(--rad-panel);
  overflow: hidden;
  /* Glass */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-hi);
  transition: height 200ms cubic-bezier(.4,0,.2,1);
}

.csh {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.cst {
  font-size: 10px; font-weight: 700;
  color: var(--mu); text-transform: uppercase; letter-spacing: 0.10em;
}
.cts { display: flex; gap: 3px; margin-left: auto; }
.ct {
  font-size: 10px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--mu); cursor: pointer;
  transition: all 120ms;
}
.ct:hover { color: var(--tx2); background: var(--bg4); }
.ct.on {
  border-color: var(--acc2);
  color: var(--acc2);
  background: rgba(56,189,248,0.08);
}

#cw  { flex: 1; position: relative; min-height: 0; }
#pc  { display: block; }

/* ══════════════════════════════════════════════════════════════════
   11.  MAP HOVER LABEL
   ══════════════════════════════════════════════════════════════════ */

#mhl {
  position: fixed;
  z-index: 450;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--rad);
  padding: 5px 10px;
  font-size: 10px; font-family: var(--fmono);
  font-weight: 500; color: var(--tx);
  pointer-events: none;
  display: none;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
}

/* ══════════════════════════════════════════════════════════════════
   12.  MODAL
   ══════════════════════════════════════════════════════════════════ */

#mb {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.50);
  z-index: 800;
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#mb.open { display: flex; }

.modal {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radx);
  padding: 26px;
  width: 440px; max-width: 96vw;
  max-height: 92vh; overflow-y: auto;
  animation: mIn 200ms ease;
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
}
@keyframes mIn {
  from { opacity:0; transform: scale(0.96) translateY(10px); }
  to   { opacity:1; transform: none; }
}

.mt { font-size: 17px; font-weight: 800; color: var(--tx); margin-bottom: 4px; letter-spacing: -0.02em; }
.ms { font-size: 12px; color: var(--mu); margin-bottom: 18px; line-height: 1.6; }
.fr  { margin-bottom: 12px; }
.fl  { font-size: 10px; font-weight: 700; color: var(--mu); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; display: block; }
.fi2 {
  width: 100%; padding: 8px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--ln2);
  border-radius: var(--rad);
  color: var(--tx); font-size: 13px; outline: none;
  transition: border-color 150ms;
}
.fi2:focus { border-color: var(--acc); }
.fh  { font-size: 10px; color: var(--mu); margin-top: 4px; line-height: 1.5; }
.ma  { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }
.msec { border-top: 1px solid var(--ln); padding-top: 14px; margin-top: 14px; }
.mst { font-size: 10px; font-weight: 700; color: var(--mu); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 9px; }

pre.sql {
  font-family: var(--fmono); font-size: 9px; color: var(--mu);
  background: rgba(255,255,255,0.04);
  padding: 8px; border-radius: var(--rad);
  overflow: auto; line-height: 1.5;
  border: 1px solid var(--ln);
}

/* Auth buttons */
.auth-provider-btns { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.auth-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: var(--rad);
  border: 1px solid var(--ln2);
  background: rgba(255,255,255,0.05);
  color: var(--tx); font-size: 13px; font-weight: 500;
  width: 100%; cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.auth-btn:hover { background: rgba(255,255,255,0.10); border-color: var(--ln3); }
.auth-btn svg   { width: 18px; height: 18px; flex-shrink: 0; }

.auth-divider {
  display: flex; align-items: center; gap: 8px;
  margin: 10px 0; font-size: 10px; color: var(--mu);
}
.auth-divider::before,
.auth-divider::after { content:''; flex:1; height:1px; background:var(--ln2); }

/* Admin */
.admin-row { display:flex; align-items:center; gap:8px; padding:8px 10px; background:rgba(255,255,255,0.04); border-radius:var(--rad); border:1px solid var(--ln); margin-bottom:5px; font-size:11px; }
.admin-name  { flex:1; color:var(--tx); font-weight:600; }
.admin-email { font-size:10px; color:var(--mu); width:140px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--fmono); }
.admin-time  { font-family:var(--fmono); font-size:9px; color:var(--mu); width:70px; text-align:right; flex-shrink:0; }
.status-badge { font-size:9px; font-weight:700; padding:2px 7px; border-radius:99px; flex-shrink:0; }
.sb-pending  { background:rgba(202,138,4,.10); border:1px solid var(--warn); color:var(--warn); }
.sb-approved { background:rgba(22,163,74,.10);  border:1px solid var(--ok);   color:var(--ok);   }
.sb-denied   { background:rgba(220,38,38,.10);  border:1px solid var(--dan);  color:var(--dan);  }

/* ══════════════════════════════════════════════════════════════════
   13.  TOAST & LOADER
   ══════════════════════════════════════════════════════════════════ */

#toast {
  position: fixed;
  bottom: 22px; left: 50%;
  transform: translateX(-50%) translateY(56px);
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  color: var(--tx); font-size: 12px; font-weight: 500;
  padding: 8px 20px;
  border-radius: 99px;
  z-index: 900;
  transition: transform 220ms cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
}
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.err  { border-color: var(--dan);  color: var(--dan);  }
#toast.ok   { border-color: var(--ok);   color: var(--ok);   }

#ldr {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.62);
  z-index: 700;
  display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#ldr.open { display: flex; }
.ls {
  width: 28px; height: 28px;
  border: 2px solid var(--bg5);
  border-top-color: var(--acc);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.lm { font-size: 12px; color: var(--mu); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════
   14.  LEAFLET OVERRIDES
   ══════════════════════════════════════════════════════════════════ */

.leaflet-container { background: transparent !important; }

.leaflet-control-zoom a {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: var(--tx2) !important;
  border-color: var(--glass-border) !important;
  font-size: 14px !important;
  transition: all 120ms;
}
.leaflet-control-zoom a:hover {
  color: var(--tx) !important;
  background: var(--bg4) !important;
}
.leaflet-control-attribution {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: var(--mu) !important;
  font-size: 9px !important;
  font-family: var(--fui) !important;
  border-radius: var(--rad) var(--rad) 0 0 !important;
}
.leaflet-control-attribution a { color: var(--mu) !important; }
.rm-halo { pointer-events: none !important; }

/* ══════════════════════════════════════════════════════════════════
   15.  MOBILE  ( ≤768px )
   ══════════════════════════════════════════════════════════════════ */

/* Mobile overlay */
.mob-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.48);
  z-index: 395;
}

/* Mobile buttons in topbar (hidden on desktop) */
#btn-mob-sb, #btn-mob-st { display: none; }

@media (max-width: 768px) {

  :root {
    --sbw: 0px;
    --stw: 0px;
    --panel-gap: 10px;
    --topbar-h: 48px;
  }

  /* Topbar: narrower, full-width */
  #topbar {
    left: var(--panel-gap);
    right: var(--panel-gap);
    top: var(--panel-gap);
  }
  .tb-brand .tb-sep-v,
  .tb-brand .chip:not(#chip-count) { display: none; }

  /* Tile selector: below topbar left */
  #mc { top: calc(var(--topbar-h) + var(--panel-gap) * 2); left: var(--panel-gap); }
  .mb span { display: none; }

  /* Side panels: slide-in drawers */
  #sidebar, #sp {
    top: 0 !important;
    bottom: 0 !important;
    border-radius: 0 var(--rad-panel) var(--rad-panel) 0;
    z-index: 600;
    transition: transform 220ms ease;
  }
  #sidebar {
    left: 0 !important; right: auto !important;
    width: min(82vw, 300px) !important;
    transform: translateX(-105%);
    border-radius: 0 var(--rad-panel) var(--rad-panel) 0;
  }
  #sp {
    right: 0 !important; left: auto !important;
    width: min(82vw, 300px) !important;
    transform: translateX(105%);
    border-radius: var(--rad-panel) 0 0 var(--rad-panel);
  }
  #sidebar.mob-open { transform: translateX(0) !important; pointer-events: auto; }
  #sp.mob-open      { transform: translateX(0) !important; pointer-events: auto; }

  /* Bottom chart: full width */
  #cs {
    left: var(--panel-gap) !important;
    right: var(--panel-gap) !important;
  }

  /* Show mobile close and overlay buttons */
  .mob-close  { display: flex !important; position: absolute; top: 10px; right: 10px; z-index: 10; }
  .mob-overlay { display: block; animation: fadeIn 200ms forwards; }

  /* Show mobile sidebar/stats toggle buttons */
  #btn-mob-sb, #btn-mob-st { display: flex !important; }
}

/* ══════════════════════════════════════════════════════════════════
   16.  ANIMATIONS & UTILITIES
   ══════════════════════════════════════════════════════════════════ */

@keyframes fadeUp {
  from { opacity:0; transform: translateY(6px); }
  to   { opacity:1; transform: none; }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}