/* ── lettertypen ───────────────────────────────────────────────────────
   Zelf gehost, niet via Google (P-18): architectuurprincipe 7 wil geen
   externe dienst, en het scheelt een verzoek naar buiten. Variabele fonts,
   dus twee bestanden dekken alle gewichten — 81 kB samen.            */
@font-face {
  font-family: 'Archivo';
  src: url('/static/fonts/archivo-var.woff2') format('woff2');
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/inter-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ── Waymark design tokens ─────────────────────────────────────────────
   Licht thema (P-15) met het merkpalet uit P-14. Kleur codeert de
   activiteitsoort, vorm codeert routes tegenover activiteiten (P-17).
   Deze namen bestaan één-op-één ook in js/theme.js — wijzig ze samen.
   ──────────────────────────────────────────────────────────────────── */
:root {
  /* blad en vlakken */
  --bg: #EDEFF3;
  --surface: #FFFFFF;
  --surface-2: #F5F7F9;
  --border: #DFE5EC;
  --border-soft: #EDF1F5;

  /* tekst */
  --text: #12374F;
  --text-muted: #5B6B7F;
  --text-faint: #7A8B9E;
  --text-on-dark: #FFFFFF;

  /* merk */
  --brand-navy: #12374F;
  --brand-navy-2: #1D4462;
  --brand-orange: #F0561C;
  --brand-orange-2: #F8842B;
  --brand-blue: #2680BC;
  --brand-blue-2: #349AD2;
  --brand-teal: #37A093;

  /* soortkleuren — P-18: walk en hike delen blauw, other en leeg is navy */
  --type-walk: var(--brand-blue);
  --type-hike: var(--brand-blue);
  --type-cycle: var(--brand-orange);
  --type-run: var(--brand-teal);
  --type-other: var(--brand-navy);

  /* interactie */
  --accent: #2680BC;
  --accent-hover: #1F6DAE;
  --accent-soft: rgba(38,128,188,.10);
  --accent-soft-solid: #E4EFF7;  /* a chosen filter; navy on it is 10,7:1 */
  --danger: #D6453F;
  --danger-soft: rgba(214,69,63,.10);
  --success: #2E9C6B;
  --warning: #E08A16;
  --star: #E8A21C;
  --strava: #FC4C02;

  /* kaart */
  --track-casing: #FFFFFF;
  /* gelopen routes (api#29) — donkerder dan --success: wit erop haalt 5,3:1,
     --success zelf maar 3,4:1 en dat is te weinig voor kleine tekst */
  --walked: #1E7A50;
  --partly: #8A4B00;         /* 6,2:1 op --partly-bg */
  --partly-bg: #FFF3DF;
  --map-dim: 0.86;           /* toonaanpassing op de OSM-tegels, P-18 */
  --map-sat: 0.88;

  /* charts (P-29, validated). Run teal and Other differ from the map's type
     colours on purpose: brand teal sits too close to walk blue (dE 13 < 15) */
  --chart-walk: #2680BC;
  --chart-cycle: #F0561C;
  --chart-run: #29A27A;
  --chart-other: #C98FD0;
  --chart-now: #2680BC;
  --chart-prev: #A3AFBC;
  --chart-grid: #E6EAEF;
  --heat-0: #EEF1F4;
  --heat-1: #8DBBE0;
  --heat-2: #5D9DD0;
  --heat-3: #3A80BC;
  --heat-4: #225F93;
  --heat-5: #123F66;
  --delta-up: #17643F;
  --delta-down: #A3261F;

  /* vorm en diepte */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-btn: 6px;   /* buttons, chips, tabs, search fields */
  --radius-round: 999px;   /* count badges and status labels only */
  --shadow-sm: 0 1px 2px rgba(18,55,79,.07);
  --shadow: 0 1px 2px rgba(18,55,79,.06), 0 6px 18px rgba(18,55,79,.07);
  --shadow-lg: 0 10px 34px rgba(18,55,79,.16);

  /* typografie */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* maten */
  --gap: 16px;
  --topbar-h: 56px;
  --footer-h: 28px;
  /* De vorm van een foto-miniatuur: liggend, 92:62. Eenheidsloos, want de strip
     onder de kaart hangt er zijn eigen maat aan en de marker op de kaart een
     andere — één vorm, twee groottes, zodat ze niet uiteen kunnen lopen. */
  --photo-tile-w: 92;
  --photo-tile-h: 62;
  /* De marker blijft op kaarthoogte: even hoog als voorheen, zodat de kaart er
     niet voller uit gaat zien dan hij was. De breedte volgt de vorm hierboven. */
  --photo-marker-h: 44px;
}

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

html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; }

/* koppen en cijfers in de display-letter: steviger, krapper, met kleine
   kapitalen voor labels — de typografie uit de mockup */
h1, h2, h3, h4,
.act-stat-val, .seg-speed,
.sidebar-item-title, .view-header h2 {
  font-family: var(--font-display);
  letter-spacing: -.01em;
}

#app { height: 100%; }

/* ══ componentlaag ═════════════════════════════════════════════════════
   W-19: het uiterlijk van een knop, een kaartje of een chip leeft hier en
   nergens anders. Er stonden 22 verschillende classlijsten op 61 knoppen en
   20 knoppen zonder enige class; die laatste erven nu vanzelf de basis.
   Een knop mét een eigen class wint op specificiteit en verandert dus niet —
   die worden stuk voor stuk overgezet, niet in één klap.
   ════════════════════════════════════════════════════════════════════ */

button {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
button:hover { background: var(--surface-2); border-color: var(--text-faint); }
button:active { transform: translateY(.5px); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: default; }

/* toonvarianten */
.btn-primary { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--text-on-dark); font-family: var(--font-display); }
.btn-primary:hover { background: var(--brand-navy-2); border-color: var(--brand-navy-2); color: var(--text-on-dark); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--text-on-dark); }
.btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-dark); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-quiet:hover { background: var(--surface-2); border-color: transparent; color: var(--text); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--text-on-dark); }
.btn-tiny { padding: 5px 11px; font-size: 0.74rem; }

/* ── kaart (het vlak, niet de landkaart) ── */
.wm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}

/* ── label in kleine kapitalen ── */
.wm-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand-navy-2);
  display: block;
}

/* ── chip ── */
.wm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--text);
}
/* The text takes a darker shade of the type colour: orange and teal on their own tint stay under 4.5:1. */
.wm-chip[data-type] { border-color: color-mix(in srgb, var(--tc) 45%, transparent); color: var(--tc-text, var(--tc)); background: color-mix(in srgb, var(--tc) 9%, var(--surface)); }
.wm-chip[data-type="walk"], .wm-chip[data-type="hike"] { --tc: var(--type-walk); --tc-text: #1F6DAE; }
.wm-chip[data-type="cycle"] { --tc: var(--type-cycle); --tc-text: #B23A0B; }
.wm-chip[data-type="run"] { --tc: var(--type-run); --tc-text: #1F6F65; }
.wm-chip[data-type="other"] { --tc: var(--type-other); }

/* ── stat-tegel ── */
.wm-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 11px 10px;
  text-align: center;
}
.wm-stat .k { font-family: var(--font-display); font-weight: 700; font-size: 0.6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); display: block; }
.wm-stat .v { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; display: block; line-height: 1.15; margin-top: 5px; }
.wm-stat .u { font-size: 0.66rem; color: var(--text-muted); display: block; }
.wm-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ── invoer: één focusring voor het hele oppervlak ── */
input, select, textarea {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── kaartchrome: de knoppen en labels óp de kaart ── */
.leaflet-control-layers,
.leaflet-bar,
.leaflet-popup-content-wrapper,
.leaflet-control-attribution {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  color: var(--text);
}
.leaflet-bar a,
.leaflet-bar a:hover {
  background: var(--surface);
  color: var(--text);
  border-bottom-color: var(--border-soft);
}
.leaflet-bar a:hover { background: var(--surface-2); }
.leaflet-control-layers label { font-size: 0.78rem; font-weight: 500; }
.leaflet-popup-content-wrapper { padding: 2px; }
.leaflet-popup-tip { box-shadow: none; }
.leaflet-container { font-family: var(--font-body); }
.leaflet-control-attribution { font-size: 10px; padding: 2px 7px !important; background: rgba(255,255,255,.86) !important; }

/* ── screens ── */
.screen { height: 100%; }
.hidden { display: none !important; }

/* ── login ── */
.login-logo { display: block; width: 132px; margin: 0 auto 14px; }
#setup-screen,
#auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
}
#auth-screen { overflow-y: auto; padding: 16px; box-sizing: border-box; }
#auth-screen .login-box { margin: auto; }
.login-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.login-box h1 { font-size: 1.6rem; text-align: center; }
.login-box .tagline { text-align: center; color: var(--text-muted); font-size: 0.85rem; }
.login-box form { display: flex; flex-direction: column; gap: 10px; }
.login-box input, .login-box button { width: 100%; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1rem; }
.login-box button { background: var(--accent); border-color: var(--accent); color: var(--text-on-dark); cursor: pointer; font-weight: 600; font-family: var(--font-display); }
.login-box button:hover { background: var(--accent-hover); color: var(--text-on-dark);}

/* ── topbar ── */
#topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 var(--gap);
  gap: var(--gap);
  z-index: 1000;
}
.brand { font-weight: 800; font-size: 1.05rem; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-blue); min-width: 0; display: flex; align-items: center; gap: 9px; }
/* Het merk is 1,59:1 breed — vaste hoogte, breedte volgt, geen afronding (de
   losse svg heeft geen tegel; die zit alleen in icon.svg voor favicon en PWA). */
.brand-logo { height: 28px; width: auto; flex-shrink: 0; }
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 6px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: color 0.15s, border-color 0.15s;
}
.nav-btn:hover, .nav-btn.active { color: var(--text); border-color: var(--border); }
.nav-btn.active { background: var(--surface-2); }
.nav-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
#topbar-actions { display: flex; align-items: center; gap: 6px; }
#topbar-user { color: var(--text-muted); font-size: 0.85rem; }

/* ── user menu dropdown ── */
.user-menu { position: relative; }
.user-menu-btn {
  display: flex; align-items: center; gap: 5px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 5px 10px;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
}
.user-menu-btn:hover { color: var(--text); border-color: var(--text-muted); }
.user-menu-caret { font-size: 0.6rem; opacity: 0.6; }
.user-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  z-index: 600;
  overflow: hidden;
}
.user-menu-dropdown.open { display: block; }
.user-menu-item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 0.88rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.user-menu-item:last-child { border-bottom: none; }
.user-menu-item:hover { background: var(--surface-2); }
.user-menu-item--danger { color: var(--danger); }
.user-menu-item--danger:hover { color: var(--danger); }

#upload-btn, #garmin-btn {
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: var(--radius);
  padding: 6px 14px;
  cursor: pointer;
  font-weight: 600;
}
#upload-btn:hover { background: var(--accent-hover); color: var(--text-on-dark);}
#strava-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-weight: 400; border-radius: var(--radius); padding: 6px 14px; cursor: pointer; }
#strava-btn:hover { border-color: #fc4c02; color: #fc4c02; background: var(--surface-2); }
#garmin-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-weight: 400; border-radius: var(--radius); padding: 6px 14px; cursor: pointer; }
#garmin-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }

/* ── footer ── */
#app-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--footer-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  z-index: 500;
}
.footer-version-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.72rem;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
}
.footer-version-btn:hover { color: var(--text); background: var(--surface-2); }

/* ── changelog modal content ── */
#changelog-modal .modal-box { max-height: 80vh; }
#changelog-content {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
#changelog-content::-webkit-scrollbar { width: 6px; }
#changelog-content::-webkit-scrollbar-track { background: transparent; }
#changelog-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
#changelog-content::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.cl-loading { color: var(--text-muted); font-size: 0.9rem; }
.cl-list { display: flex; flex-direction: column; }
.cl-item { border-bottom: 1px solid var(--border); }
.cl-item:first-child { border-top: 1px solid var(--border); }
.cl-header {
  display: flex; align-items: center; gap: 8px;
  width: 100%; background: transparent; border: none;
  color: var(--text); padding: 10px 0; cursor: pointer; text-align: left;
}
.cl-header:hover { color: var(--accent); }
.cl-chevron { font-size: 0.6rem; color: var(--text-muted); transition: transform 0.15s; display: inline-block; }
.cl-item.cl-open .cl-chevron { transform: rotate(90deg); }
.cl-title { font-size: 0.85rem; font-weight: 600; }
.cl-date { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); }
.cl-body { display: none; padding: 0 0 12px 18px; }
.cl-item.cl-open .cl-body { display: block; }
.cl-sub { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 10px 0 4px; }
.cl-entries { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-entries li { font-size: 0.82rem; color: var(--text); padding-left: 12px; position: relative; line-height: 1.45; }
.cl-entries li::before { content: "–"; position: absolute; left: 0; color: var(--text-muted); }
.cl-code { background: var(--surface-2); border-radius: 3px; padding: 1px 4px; font-family: monospace; font-size: 0.8em; }
.cl-p { font-size: 0.82rem; color: var(--text-muted); margin: 4px 0; }

/* ── views ── */
.view { position: fixed; top: var(--topbar-h); left: 0; right: 0; bottom: var(--footer-h); overflow-y: auto; }

/* ── kaartbeeld: toon en dekking ────────────────────────────────────────
   De standaard OSM-tegels zijn een stuk luider dan het kaartbeeld in de
   mockups: gele wegen, roze snelwegen, verzadigd groen. Een lichte
   toonaanpassing brengt ze dichtbij zonder een andere tegelbron en dus
   zonder externe dienst of sleutel (P-18, A-1).                          */
.leaflet-tile-pane { filter: saturate(var(--map-sat)) brightness(1.05) contrast(0.95); }

/* ── map view ── */
/* Drie kolommen zoals de mockup: filters permanent links, kaart als hoofdvlak,
   blokken rechts. Onder 1100px valt de linkerkolom weg — daar zitten de filters
   op mobiel onder één knop, precies zoals ui-herziening.md voorschrijft. */
#view-map {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
#view-map > * { min-height: 0; }
#map-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
#map {
  flex: 1;
  min-width: 0;
  min-height: 0;
  /* De dekkingslaag gebruikt mix-blend-mode. Zonder eigen stacking context
     blendt die met álles wat eronder ligt — ook met de interface buiten de
     kaart, die dan willekeurig grijs wordt. isolation sluit het effect op in
     de kaart, waar het thuishoort. */
  isolation: isolate;
}

#map-filters {
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
}
#map-filters .wm-card { padding: 12px; }
.filter-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-hint { font-size: 0.68rem; color: var(--text-muted); margin-top: 7px; line-height: 1.45; }
.filter-hint--warn { color: var(--warning); }
.search-radius-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 0.72rem; color: var(--text-muted); }
.search-radius-row select { flex: 1; font-size: 0.72rem; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.search-field { display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 5px 12px; }
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-field svg { width: 13px; height: 13px; flex: 0 0 auto; fill: none; stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; }
.search-field input { border: 0; padding: 3px 0; font-size: 0.76rem; background: transparent; width: 100%; }
.search-field input:focus, .search-field input:focus-visible { outline: none; box-shadow: none; border: 0; }

/* de knop in een filterpaneel: een chip die aan of uit staat */
.ftog {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 500; line-height: 1;
  padding: 6px 11px; border-radius: var(--radius-btn);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
}
.ftog .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.ftog .dash { width: 13px; height: 0; border-top: 3px dashed currentColor; border-radius: 2px; flex: 0 0 auto; }
.ftog .line { width: 13px; height: 0; border-top: 3px solid currentColor; border-radius: 2px; flex: 0 0 auto; }
.ftog.on { color: var(--tc, var(--accent)); border-color: color-mix(in srgb, var(--tc, var(--accent)) 45%, transparent); background: color-mix(in srgb, var(--tc, var(--accent)) 10%, transparent); }
.ftog:hover { border-color: var(--text-faint); }

/* stat-tegels bovenin de rechterkolom */
.month-stats { padding: 12px 12px 0; }
.month-stats .wm-label { margin-bottom: 8px; }

/* ── fotostrip onder de kaart ── */
.photo-strip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.photo-strip-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: calc(var(--photo-tile-h) * 1px);
  text-align: center;
  flex: 0 0 auto;
  margin: 0;
  color: var(--brand-blue);
}
.photo-strip-add {
  flex: 0 0 auto;
  width: 34px; height: calc(var(--photo-tile-h) * 1px);
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  color: var(--text-faint); font-size: 1.1rem; cursor: pointer;
}
.photo-strip-add:hover { border-color: var(--accent); color: var(--accent); }
.photo-strip-note { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.photo-strip-items { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.photo-strip-items img {
  width: calc(var(--photo-tile-w) * 1px);
  height: calc(var(--photo-tile-h) * 1px);
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  flex: 0 0 auto;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.photo-strip-items img:hover { transform: translateY(-2px); box-shadow: var(--shadow); }

/* ── fotoviewer ── */
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px;
  background: rgba(18, 55, 79, .82);
  backdrop-filter: blur(3px);
}
.pv-figure { margin: 0; max-width: min(1100px, 92vw); display: flex; flex-direction: column; gap: 10px; }
.pv-img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.pv-cap {
  color: #fff;
  font-size: 0.82rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Waar de foto bij hoort staat naast het bijschrift, niet erin: het is een feit
   over de foto, geen tekst die iemand geschreven heeft. */
.pv-owner { color: rgba(255, 255, 255, .72); font-style: italic; }
.pv-locate {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.34);
  color: #fff;
  padding: 5px 13px;
  font-size: 0.74rem;
}
.pv-locate:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.5); color: #fff; }
.pv-close {
  position: absolute;
  top: 16px; right: 18px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  padding: 4px 12px;
}
.pv-close:hover { background: rgba(255,255,255,.26); color: #fff; }
.pv-nav {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  padding: 6px 15px;
  flex: 0 0 auto;
}
.pv-nav:hover { background: rgba(255,255,255,.26); color: #fff; }

/* ── map sidebar ── */
#map-sidebar {
  width: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  overflow: hidden;
  z-index: 400;
}
#sidebar-list-view,
#sidebar-detail-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.sidebar-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.sidebar-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.sidebar-back {
  background: transparent;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.88rem;
  padding: 0;
}
.sidebar-back:hover { text-decoration: underline; }
#sidebar-activity-list {
  flex: 1;
  overflow-y: auto;
}
.sidebar-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.sidebar-item:last-child { border-bottom: none; }
.sidebar-item:hover { background: var(--surface-2); }
.sidebar-item-title { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-item-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 0.76rem; color: var(--text-muted); }
.sidebar-type-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 4px;
  vertical-align: middle;
}
.sidebar-type-badge {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
  font-size: 0.7rem;
  text-transform: capitalize;
  color: var(--text-muted);
  flex-shrink: 0;
}
.sidebar-empty {
  padding: 20px 14px;
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.5;
}
/* detail view */
#sidebar-detail-content {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.detail-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.detail-type-badge {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  text-transform: capitalize;
  color: var(--text-muted);
  align-self: flex-start;
}
.detail-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
}
.detail-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.stat-row:last-child { border-bottom: none; }
.stat-label { color: var(--text-muted); font-size: 0.8rem; }
.stat-value { font-size: 0.85rem; font-weight: 600; text-align: right; }
.detail-description {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  white-space: pre-wrap;
}
/* speed analysis */
.speed-section { display: flex; flex-direction: column; gap: 6px; }
.speed-section-header {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.speed-legend-row { display: flex; align-items: center; gap: 6px; }
.speed-legend-label { font-size: 0.72rem; color: var(--text-muted); flex-shrink: 0; }
.speed-gradient-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, rgb(210,35,35), rgb(230,120,20), rgb(30,160,70));
}
.speed-range-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: -4px;
}
/* segment list */
.seg-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.seg-list-head {
  display: grid;
  grid-template-columns: 52px 1fr 1fr 1fr;
  padding: 4px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.seg-row {
  display: grid;
  grid-template-columns: 52px 1fr 1fr 1fr;
  padding: 6px 8px;
  font-size: 0.78rem;
  border-bottom: 1px solid var(--border);
  gap: 2px;
}
.seg-row:last-child { border-bottom: none; }
.seg-row--fastest { background: rgba(78, 203, 113, 0.08); }
.seg-row--slowest { background: rgba(224, 92, 92, 0.08); }
.seg-label { color: var(--text-muted); font-size: 0.75rem; }
.seg-speed { font-weight: 700; }
.seg-row--fastest .seg-speed { color: var(--success); }
.seg-row--slowest .seg-speed { color: var(--danger); }
.seg-time { color: var(--text-muted); font-size: 0.73rem; }
.seg-dur  { color: var(--text-muted); font-size: 0.73rem; }
.seg-icon { font-size: 0.8rem; }
svg[width="1em"] { vertical-align: -0.15em; }

/* ── activities list ── */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--gap);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}
.view-header h2 { font-size: 1.1rem; }
.view-header button {
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: var(--radius);
  padding: 6px 14px;
  cursor: pointer;
  font-weight: 600;
}

/* ── activity filters ── */
.activity-filters {
  padding: 10px var(--gap) 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 53px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
}
.filter-row-search {
  display: flex;
  gap: 8px;
  align-items: center;
}
.filter-advanced-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 5px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  white-space: nowrap;
}
.filter-advanced-btn:hover, .filter-advanced-btn.active { border-color: var(--accent); color: var(--accent); }
.filter-count { font-size: 0.78rem; color: var(--text-muted); white-space: nowrap; }
.filter-row-advanced {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 0 4px;
  border-top: 1px solid var(--border);
}
.filter-range-group { display: flex; flex-direction: column; gap: 4px; }
.filter-range-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.range-inputs { display: flex; align-items: center; gap: 4px; }
.range-inputs input {
  width: 72px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 4px 6px;
  font-size: 0.82rem;
}
.range-inputs input:focus { outline: none; border-color: var(--accent); }
.range-sep { color: var(--text-muted); font-size: 0.8rem; }
.range-inputs--dates input { width: 140px; }
.filter-range-group select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 4px 6px;
  font-size: 0.82rem;
  max-width: 240px;
}

/* ── advanced search: what is filtered, each removable, one reset (api#33) ── */
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { background: var(--accent-soft); border-color: var(--accent); color: var(--brand-navy); padding-right: 4px; }
.filter-chip-x {
  background: transparent; border: none; color: var(--brand-navy); cursor: pointer;
  font-size: 0.95rem; line-height: 1; padding: 0 5px; border-radius: var(--radius-btn);
}
.filter-chip-x:hover, .filter-chip-x:focus-visible { background: var(--brand-navy); color: #fff; }
.filter-chip-reset { cursor: pointer; color: var(--brand-navy); font-weight: 600; }
.filter-chip-reset:hover { border-color: var(--danger); color: var(--danger); }
.filter-error { font-size: 0.8rem; color: var(--danger); }

/* ── the map's search (api#35): a strip above the map, the panel in a modal ── */
.map-search-bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 7px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.map-search-bar .filter-error { flex-basis: 100%; }
.modal-box.map-filter-box { max-width: 640px; max-height: 90vh; overflow-y: auto; gap: 14px; }
.map-filter-section { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.map-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.map-filter-box .filter-row-advanced { border-top: 0; padding: 0; }
.map-filter-box .range-inputs input { width: 80px; }
.map-filter-box .range-inputs--dates input { width: 150px; }

/* ── confirm modal ── */
.confirm-box { max-width: 320px; }
.confirm-message { margin: 0 0 16px; font-size: 0.95rem; line-height: 1.5; }
.btn-danger-confirm {
  background: var(--danger);
  border: none;
  color: #fff;
  border-radius: var(--radius);
  padding: 8px 18px;
  cursor: pointer;
  font-weight: 600;
}
.btn-danger-confirm:hover { background: #c0392b; }

/* ── empty state ── */
.empty-state {
  text-align: center;
  padding: 48px var(--gap);
  color: var(--text-muted);
}
.empty-state p { margin: 0 0 8px; }
.empty-state p:first-child { font-size: 1.05rem; color: var(--text); font-weight: 600; }
.empty-state-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.empty-state-actions button {
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 600;
}

/* ── relative date tooltip ── */
.rel-date { cursor: default; border-bottom: 1px dotted var(--border); }

#activity-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
  align-content: start;
}
#activity-list .act-full-width { grid-column: 1 / -1; }
.act-scroll-sentinel { height: 1px; }

/* ── catalog: a list with its filters in an aside (api#83, P-27) ──
   Activities now, Routes next: one set of classes, driven by FilterAside
   (js/catalog.js). Below 860 px the aside is a drawer. */
.catalog {
  /* where the sticky columns stop: under the view header (50 px, or what a
     page with a taller header measures and sets) */
  --catalog-top: calc(50px + var(--gap));
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: var(--gap);
}
/* only the drawer state clips, or the sticking stops */
.catalog-aside {
  position: sticky;
  top: var(--catalog-top);
  max-height: calc(100vh - var(--topbar-h) - var(--footer-h) - var(--catalog-top) - var(--gap));
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.catalog-aside:focus { outline: none; }
.catalog-aside-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.catalog-aside-head h3 { font-size: 0.95rem; }
.catalog-none { font-size: 0.78rem; color: var(--text-muted); }
.catalog-aside-body { overflow: auto; flex: 1; }
.catalog-aside-foot { display: none; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.catalog-aside-foot .btn-primary { flex: 1; justify-content: center; }
.catalog-backdrop { display: none; }
.catalog [hidden] { display: none; }

.fgroup { border-bottom: 1px solid var(--border-soft); }
.fgroup:last-child { border-bottom: 0; }
.fgroup > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 11px 14px;
  font: 700 0.7rem var(--font-display); letter-spacing: .11em; text-transform: uppercase; color: var(--brand-navy-2);
}
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: auto; transform: rotate(45deg); transition: transform .15s;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
}
.fgroup[open] > summary::after { transform: rotate(-135deg); }
.fgroup > summary:hover { background: var(--surface-2); }
.fgroup-cnt { font: 700 0.62rem var(--font-body); letter-spacing: 0; background: var(--brand-navy); color: #fff; border-radius: var(--radius-round); padding: 1px 7px; }
.fbody { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 6px; }
.fbody select { width: 100%; padding: 7px 9px; font-size: 0.84rem; }
.fhint { font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; }

.fopt {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; justify-content: flex-start;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 6px 8px;
  font-weight: 500; font-size: 0.84rem; line-height: 1.2; color: var(--text);
}
.fopt:hover { background: var(--surface-2); border-color: var(--border); color: var(--text); }
.fopt.on { background: var(--accent-soft-solid); border-color: #B9D5EA; color: var(--brand-navy); }
.fopt.on:hover { background: #D6E7F3; border-color: #9CC3E0; color: var(--brand-navy); }
.fopt-box { width: 16px; height: 16px; flex: none; display: grid; place-items: center; border-radius: 4px; border: 2px solid var(--text-muted); background: #fff; }
.fopt.on .fopt-box { background: var(--brand-navy); border-color: var(--brand-navy); }
.fopt.on .fopt-box::after { content: ""; width: 4px; height: 8px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fopt-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.fopt-ico { width: 15px; height: 15px; flex: none; }
.fopt-star { color: var(--star); }
.fopt-n { margin-left: auto; font-size: 0.74rem; font-weight: 500; color: var(--text-muted); }
.fopt.on .fopt-n { color: #2E4A61; }

.frange { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; }
.frange input { width: 100%; min-width: 0; padding: 7px 9px; font-size: 0.84rem; }
.frange span { color: var(--text-muted); font-size: 0.8rem; }
.presets { display: flex; gap: 5px; flex-wrap: wrap; }
.preset { padding: 4px 10px; font-size: 0.74rem; font-weight: 600; line-height: 1.3; }
.preset:hover { background: var(--surface-2); border-color: var(--text-faint); color: var(--text); }
.preset.on, .preset.on:hover { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; }

.catalog-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.catalog-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.catalog-search {
  flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 0 6px 0 13px;
}
.catalog-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.catalog-search svg { width: 17px; height: 17px; color: var(--text-muted); flex: none; }
.catalog-search input { border: 0; background: transparent; flex: 1; min-width: 0; padding: 9px 0; font-size: 0.86rem; }
.catalog-search input:focus { box-shadow: none; }
.catalog-tools select { border-radius: var(--radius-btn); padding: 8px 12px; font-size: 0.84rem; }
.catalog-filters-btn { display: none; align-items: center; gap: 6px; }
.catalog-filters-n { background: #fff; color: var(--brand-navy); border-radius: var(--radius-round); font-size: 0.66rem; padding: 1px 6px; }
.catalog-summary { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.84rem; color: var(--text-muted); }
.catalog-summary b { color: var(--text); }
.achip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 11px; font-size: 0.76rem; font-weight: 600; line-height: 1.3;
  background: var(--accent-soft-solid); border: 1px solid #B9D5EA; color: var(--brand-navy);
}
.achip:hover { background: #D6E7F3; border-color: #9CC3E0; color: var(--brand-navy); }
.achip i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: rgba(18,55,79,.12); font-size: 0.7rem; }
.link-btn { background: transparent; border: 0; padding: 2px 4px; color: var(--accent-hover); font-weight: 600; font-size: 0.8rem; }
.link-btn:hover { background: transparent; color: var(--brand-navy); text-decoration: underline; }

@media (max-width: 860px) {
  .catalog { grid-template-columns: minmax(0, 1fr); overflow-x: clip; }
  .catalog-aside {
    position: fixed; left: 0; top: var(--topbar-h); bottom: 0; z-index: 40; width: min(330px, 88%); max-height: none;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0; box-shadow: var(--shadow-lg);
    transform: translateX(-110%); visibility: hidden; transition: transform .2s, visibility 0s .2s;
  }
  /* visible at once on opening, so focus can move into it */
  .drawer-open .catalog-aside { transform: none; visibility: visible; transition: transform .2s; }
  .drawer-open .catalog-backdrop { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 39; background: rgba(18,55,79,.38); }
  .catalog-aside-foot { display: flex; }
  .catalog-filters-btn { display: inline-flex; }
  #activity-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .catalog-aside { transition: none; } }

/* ── activity cards ── */
.act-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.act-card:hover { border-color: var(--accent); box-shadow: 0 2px 12px rgba(79,142,247,0.08); }
.act-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.act-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.act-type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.act-type-label { text-transform: capitalize; font-weight: 600; color: var(--text-muted); }
.act-date { margin-left: auto; }
.act-route-badge {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 600;
}
.act-card-title {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-card-stats {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.act-stat-val { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.act-stat-lbl { font-size: 0.68rem; color: var(--text-muted); margin-top: 1px; text-transform: uppercase; letter-spacing: 0.03em; }
.act-card-actions { display: flex; gap: 2px; margin-top: auto; padding-top: 4px; }
.act-card-thumb-wrap {
  width: 96px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
  align-self: stretch;
}
.act-card-thumb { width: 96px; height: 72px; object-fit: contain; display: block; }
.act-card--route { border-left: 3px solid var(--accent); }
.btn-icon {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  border-radius: var(--radius);
}
.btn-icon:hover { color: var(--danger); }

/* ── stats (api#88, P-29) ──
   One filter row scopes every card. Colour means sport and nothing else; text
   is always in the text colours, never in a series colour. Hero and tiles use
   the body sans with proportional figures; tables and axes are tabular. */
#view-stats .view-header { position: static; }
#stats-body { padding: var(--gap); container-type: inline-size; }
.st { display: flex; flex-direction: column; gap: 14px; color: var(--text); }
.st-filters { position: sticky; top: 0; z-index: 20; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; box-shadow: var(--shadow-sm); }
.st .seg { background: var(--surface); }
.st .seg button { color: var(--text); }
.st .seg button:hover { background: var(--surface-2); color: var(--text); }
.st .seg button.on, .st .seg button.on:hover { background: var(--brand-navy); color: var(--text-on-dark); }
.st-stepper { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 0.9rem; }
.st-stepper button { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
.st-stepper span { min-width: 118px; text-align: center; }
.st-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.st-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; font-size: 0.78rem; font-weight: 600; border-radius: var(--radius-btn); border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.st-chip:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-muted); }
.st-chip.on { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--text-on-dark); }
.st-chip.on:hover { background: var(--brand-navy-2); border-color: var(--brand-navy-2); color: var(--text-on-dark); }
.st-chip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.st-chip.on i { box-shadow: 0 0 0 2px #fff; }
.st-tbtn { padding: 4px 10px; font-size: 0.72rem; background: var(--surface); border-color: var(--border); color: var(--text-muted); flex: none; }
.st-tbtn:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-muted); }
.st-tbtn.on, .st-tbtn.on:hover { background: var(--surface-2); color: var(--text); border-color: var(--text); }

.st-row { display: grid; gap: 14px; align-items: stretch; }
.st-row--hero { grid-template-columns: minmax(260px, 1.1fr) repeat(4, minmax(0, 1fr)); }
.st-row--1 { grid-template-columns: minmax(0, 1fr); }
.st-row--2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.st-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); min-width: 0; }
.st-card h3 { font: 700 0.98rem var(--font-body); letter-spacing: 0; color: var(--text); }
.st-card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.st-sub { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.st-k { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.st-hero-v { font: 700 3.5rem/1.05 var(--font-body); font-variant-numeric: proportional-nums; letter-spacing: -0.02em; margin-top: 4px; color: var(--text); }
.st-hero-v small { font-size: 1.2rem; font-weight: 600; color: var(--text-muted); margin-left: 4px; letter-spacing: 0; }
.st-tile-v { font: 600 1.5rem/1.15 var(--font-body); font-variant-numeric: proportional-nums; margin-top: 4px; color: var(--text); }
.st-tile-v small { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
.st-delta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: 0.78rem; font-weight: 700; margin-top: 6px; }
.st-delta--up { color: var(--delta-up); }
.st-delta--down { color: var(--delta-down); }
.st-delta--flat { color: var(--text-muted); }
.st-delta span { color: var(--text-muted); font-weight: 500; }
.st-delta span[aria-hidden] { color: inherit; }
.st-chart svg { display: block; max-width: 100%; overflow: visible; }
.st-tile .st-chart, .st-spark-wrap { margin-top: 10px; }
.st-scroll { overflow-x: auto; }
.st-scroll svg { max-width: none; }

.st-axis text { fill: var(--text-muted); font: 400 11px var(--font-body); font-variant-numeric: tabular-nums; }
.st-axis--cal text { font-size: 10px; }
.st-axis .st-top { fill: var(--text); font-weight: 700; }
.st-grid { stroke: var(--chart-grid); stroke-width: 1; }
.st-end { fill: var(--text); font: 700 12px var(--font-body); font-variant-numeric: tabular-nums; }
.st-end-prev { fill: var(--text-muted); font: 400 11px var(--font-body); }
.st-hit { fill: transparent; cursor: crosshair; outline: none; }
.st-hit:focus-visible { stroke: var(--text); stroke-width: 2px; }
.st-hl { stroke: var(--text-muted); stroke-width: 1; opacity: 0; pointer-events: none; }
.st-hl.on { opacity: 1; }
.st-cell-future { stroke: var(--chart-grid); }
.st-cell-on { stroke: var(--text); stroke-width: 1.5px; }

.st-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.76rem; color: var(--text-muted); margin-top: 8px; }
.st-legend span { display: inline-flex; align-items: center; gap: 6px; }
.st-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.st-legend i.st-ln { width: 16px; height: 0; border-top: 2px solid; border-radius: 0; }
.st-hm-scale { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; font-size: 0.72rem; color: var(--text-muted); margin-top: 8px; }
.st-hm-scale i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.st-hm-scale span { margin-left: 10px; }

.st-tablewrap { max-height: 280px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.st-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.st-table th { position: sticky; top: 0; background: var(--surface-2); color: var(--text-muted); font-weight: 600; text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.st-table td { color: var(--text); padding: 6px 10px; border-bottom: 1px solid var(--border-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-table tbody tr:hover td { background: var(--surface-2); }

.st-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; padding: 6px 0; border-bottom: 1px solid var(--border); }
.st-kv:last-child, .st-kv--plain { border-bottom: 0; }
.st-kv span:first-child { color: var(--text-muted); }
.st-kv b { font-weight: 600; text-align: right; }
.st-muted { color: var(--text-muted); font-weight: 400; }
.st-note { font-size: 0.76rem; color: var(--text-muted); line-height: 1.45; margin-top: 8px; }
.st-note--first { margin-top: 0; }
.st-meter { position: relative; display: flex; gap: 2px; height: 10px; border-radius: 5px; background: var(--heat-1); overflow: hidden; }
.st-meter i { display: block; height: 100%; }
.st-meter--gap { margin: 8px 0 4px; }
.st-meter--thin { height: 7px; }
.st-meter--goal { height: 12px; margin-top: 4px; overflow: visible; }
.st-meter--goal i { border-radius: 6px; }
.st-today { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); }
.st-split { margin: 6px 0 10px; }
.st-split-h { display: flex; justify-content: space-between; gap: 8px; font-size: 0.8rem; margin-bottom: 4px; }
.st-split-h > span:first-child { display: flex; gap: 6px; align-items: center; }
.st-split-h i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.st-folders { margin-top: 12px; }
.st-folder { margin-bottom: 9px; }
.st-rec { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.st-rec-sport { display: flex; align-items: center; gap: 7px; margin: 16px 0 8px; font-size: 0.85rem; font-weight: 700; color: var(--text); }
.st-rec-sport:first-child { margin-top: 0; }
.st-rec-sport i { width: 10px; height: 10px; border-radius: 50%; }
.st-recc { display: flex; flex-direction: column; gap: 3px; border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 12px; background: var(--surface); color: var(--text); text-decoration: none; }
a.st-recc:hover { border-color: var(--chart-now); color: var(--text); }
.st-recc .st-k { font-size: 0.72rem; }
.st-recc .st-k i { width: 8px; height: 8px; border-radius: 50%; }
.st-recc-v { font: 600 1.2rem var(--font-body); }
.st-recc small { font-size: 0.74rem; color: var(--text-muted); }
.st-actions { display: flex; gap: 6px; margin-top: 8px; }
.st-goal-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-goal-form input { width: 110px; margin-left: 6px; }
.st-goal-form .st-note { flex-basis: 100%; margin-top: 0; }
.st-goal-form .st-note:empty { display: none; }

.st-tip { display: none; position: fixed; z-index: 5000; pointer-events: none; max-width: 240px; padding: 7px 10px; border-radius: 8px; background: var(--brand-navy); color: var(--text-on-dark); font: 500 0.78rem/1.4 var(--font-body); box-shadow: var(--shadow-lg); }
.st-tip b { font-weight: 700; }
.st-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }

@container (max-width: 1100px) {
  .st-row--hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-row--hero .st-hero { grid-column: 1 / -1; }
  .st-row--2, .st-row--3 { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 560px) {
  .st-filters { position: static; }
}
/* The chart colours have validated dark steps (mockup round 2). The product
   stays light (P-18), so nothing sets data-theme yet. */
.st[data-theme="dark"] {
  --chart-walk: #3F8FCB; --chart-cycle: #E8622C; --chart-run: #2BA57B; --chart-other: #BE5FA0; --chart-now: #4E9FD8; --chart-prev: #6C7C8C; --chart-grid: #24384A;
  --heat-0: #1F2F3D; --heat-1: #2D5E86; --heat-2: #3C78A8; --heat-3: #5193CB; --heat-4: #80B6E2; --heat-5: #B9DBF6;
  --delta-up: #6FD3A0; --delta-down: #F29A92;
}

/* ── user list ── */
#user-list { padding: var(--gap); display: flex; flex-direction: column; gap: 10px; }
.view-header button:disabled { opacity: 0.6; cursor: default; }
.user-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--gap);
  display: flex;
  align-items: center;
  gap: var(--gap);
}
.user-card .info { flex: 1; }
.user-card .name { font-weight: 600; }
.user-card .email { color: var(--text-muted); font-size: 0.85rem; }
.badge-admin { background: var(--accent); color: #fff; border-radius: 4px; padding: 2px 8px; font-size: 0.75rem; }

/* ── modals ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  /* op een licht blad is 60% zwart een gordijn; een navy waas houdt de kaart
     eronder herkenbaar en past bij de huisstijl */
  background: rgba(18, 55, 79, .34);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
/* Bevestigen kan gevraagd worden vanuit elke laag, ook vanuit de schermvullende
   fotoviewer — dus dit venster hoort boven alles te staan, niet ernaast. Dat
   geldt voor elk venster dat de viewer zelf opent: het bijschrift wordt daar
   gevraagd, en op 2000 kwam het achter de viewer uit. */
#confirm-modal,
#caption-modal { z-index: 3100; }

/* ── berichten ──────────────────────────────────────────────────────────────
   De laagvolgorde staat hier expliciet, want die is eerder stilletjes fout
   gegaan: de bijschrift-modal opende achter de viewer en geen enkele test zag
   het, omdat een klik zich niets aantrekt van wat erboven ligt.

     kaart en panelen  <  lade 800  <  viewer 3000  <  modals 3100  <  berichten

   Berichten staan bovenaan omdat een mededeling die achter iets valt niet
   gedaan is. De bak vangt geen muis (`pointer-events: none`), anders zou een
   onzichtbare strook over de kaart de klikken opeten; de berichten zelf wel,
   want er zit een kruisje op en een link in. */
.notices {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--footer-h) + 14px);
  z-index: 3200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  pointer-events: none;
}
.notice {
  pointer-events: auto;
  max-width: min(520px, 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 12px;
  padding: 11px 14px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 0.88rem;
  line-height: 1.4;
  animation: notice-in .16s ease-out;
}
/* Blijvend betekent: er is iets misgegaan, of er staat iets in dat je moet
   lezen. Allebei verdienen ze een rand die niet op "prima" lijkt. */
.notice-stays { border-left-color: var(--danger); }
/* basis 0, niet auto: met `auto` neemt een lange tekst de hele regel en duwt
   het kruisje naar een eigen regel eronder. */
.notice-text { flex: 1 1 0; min-width: 0; }
.notice-detail {
  flex: 1 1 100%;
  overflow-wrap: anywhere;
  user-select: all;
  padding: 6px 8px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.notice-close {
  flex: 0 0 auto;
  background: none; border: 0; padding: 0 2px;
  font-size: 1.1rem; line-height: 1;
  color: var(--text-muted); cursor: pointer;
}
.notice-close:hover { background: none; color: var(--text); }
@keyframes notice-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .notice { animation: none; } }
.modal-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.01em; }
.modal-close { background: transparent; border: none; color: var(--text-muted); font-size: 1.35rem; cursor: pointer; line-height: 1; padding: 2px 8px; border-radius: var(--radius-btn); }
.modal-close:hover { background: var(--surface-2); }
.modal-close:hover { color: var(--text); }
.modal-box form { display: flex; flex-direction: column; gap: 12px; }
.modal-box label { display: flex; flex-direction: column; gap: 5px; color: var(--text-muted); font-size: 0.78rem; font-weight: 500; }
.modal-box input, .modal-box select, .modal-box textarea {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}
.modal-box textarea { resize: vertical; }
.checkbox-label { flex-direction: row; align-items: center; gap: 8px; }
.form-actions { display: flex; gap: 10px; }
.form-actions button { flex: 1; padding: 9px; border-radius: var(--radius); border: 1px solid var(--border); cursor: pointer; font-size: 0.95rem; }
.form-actions button[type="submit"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.form-actions button[type="submit"]:hover { background: var(--accent-hover); color: var(--text-on-dark);}
.form-actions button[type="button"] { background: transparent; color: var(--text-muted); }
.form-actions button[type="button"]:hover { color: var(--text); }
/* An action row without a form still has one button that carries the weight;
   the attribute rule above would otherwise flatten it into the quiet one. */
.form-actions button.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.form-actions button.btn-primary:hover { background: var(--accent-hover); color: var(--text-on-dark); }

/* ── misc ── */
.error { color: var(--danger); font-size: 0.85rem; }

/* ── layer control ── */
.leaflet-control-layers {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
  color: var(--text) !important;
}
.leaflet-control-layers-toggle {
  background-color: var(--surface) !important;
}
.leaflet-control-layers label {
  color: var(--text) !important;
  font-size: 0.85rem;
}

/* ── cluster icons ── */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-color: rgba(79, 142, 247, 0.25) !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background-color: rgba(79, 142, 247, 0.75) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ── cluster popup ── */
.leaflet-popup-content-wrapper {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
  padding: 0 !important;
  color: var(--text) !important;
}
.leaflet-popup-tip {
  background: var(--surface) !important;
}
.leaflet-popup-content {
  margin: 0 !important;
}
.cluster-popup {
  min-width: 260px;
}
.cluster-popup-header {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--border);
}
.cluster-popup-list {
  max-height: 280px;
  overflow-y: auto;
}
.cluster-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.cluster-item:last-child { border-bottom: none; }
.cluster-item:hover { background: var(--surface-2); }
.cluster-item-title { font-weight: 600; font-size: 0.9rem; }
.cluster-item-meta { color: var(--text-muted); font-size: 0.78rem; margin-top: 2px; text-transform: capitalize; }

/* ── garmin modal ── */
.garmin-hint {
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.5;
  margin-bottom: 4px;
}
/* ── strava modal ── */
.strava-hint { color: var(--text-muted); font-size: 0.83rem; line-height: 1.5; }
.strava-hint a { color: var(--accent); }
.strava-hint code { background: var(--bg); padding: 1px 5px; border-radius: 3px; font-family: monospace; font-size: 0.8rem; color: var(--accent); }
.strava-status-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.strava-name-label { font-weight: 600; font-size: 0.9rem; }
.btn-danger-sm { background: transparent; border: 1px solid var(--danger); color: var(--danger); border-radius: var(--radius); padding: 4px 10px; cursor: pointer; font-size: 0.8rem; }
.btn-danger-sm:hover { background: var(--danger); color: #fff; }
.btn-sm { background: transparent; border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--radius); padding: 4px 10px; cursor: pointer; font-size: 0.8rem; }
.btn-sm:hover { color: var(--text); border-color: var(--text-muted); }
.btn-accent-sm { background: var(--accent); border: none; color: #fff; border-radius: var(--radius); padding: 4px 12px; cursor: pointer; font-size: 0.8rem; font-weight: 600; }
.btn-accent-sm:hover { background: var(--accent-hover); color: var(--text-on-dark);}
.btn-accent-sm:disabled { opacity: 0.5; cursor: not-allowed; }
.strava-list-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
#strava-list-count { font-size: 0.82rem; color: var(--text-muted); }
.strava-list-actions { display: flex; gap: 6px; }
#strava-activity-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.strava-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.12s; }
.strava-item:last-child { border-bottom: none; }
.strava-item:hover { background: var(--surface-2); }
.strava-item--done { opacity: 0.5; }
.strava-item input[type="checkbox"] { flex-shrink: 0; accent-color: var(--accent); width: 15px; height: 15px; }
.strava-item-title { font-size: 0.88rem; font-weight: 600; }
.strava-item-meta { font-size: 0.76rem; color: var(--text-muted); text-transform: capitalize; margin-top: 2px; }
.strava-badge-done { background: var(--success); color: #000; border-radius: 3px; padding: 1px 5px; font-size: 0.7rem; font-weight: 600; text-transform: none; }
.strava-loading, .strava-empty { padding: 16px; color: var(--text-muted); font-size: 0.85rem; text-align: center; }
.strava-result { font-size: 0.85rem; margin-top: 8px; }
.strava-autosync { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.strava-autosync-row { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.strava-autosync-row input[type="checkbox"] { flex-shrink: 0; accent-color: var(--accent); width: 15px; height: 15px; }
.strava-autosync-label { font-size: 0.83rem; }
.strava-autosync-select { font-size: 0.8rem; padding: 3px 6px; border-radius: var(--radius); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.strava-autosync-select:disabled { opacity: 0.45; cursor: not-allowed; }
.strava-autosync-note { flex-basis: 100%; margin: 0; font-size: 0.76rem; color: var(--text-muted); }
.garmin-field { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.garmin-field input { font-size: 0.9rem; padding: 7px 9px; border-radius: var(--radius); background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.garmin-warning { margin: 0 0 12px; padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--danger); color: var(--danger); font-size: 0.83rem; }
.garmin-backfill { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.success-text { color: var(--success); }

/* ── map type filter control ── */
.map-filter-control {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 8px;
}
.mf-btn {
  width: 36px; height: 36px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; gap: 2px;
  flex-direction: column;
  transition: background 0.12s, opacity 0.15s;
  opacity: 0.35;
  padding: 0;
}
.mf-btn:last-child { border-bottom: none; }
.mf-btn.active { opacity: 1; color: var(--tc); }
.mf-btn:hover { background: var(--surface-2); opacity: 1; }
.mf-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tc);
  flex-shrink: 0;
}

/* ── activity type markers ── */
.activity-marker {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #fff;
  letter-spacing: 0;
  position: relative;
}
.route-marker { border-width: 2.5px; box-shadow: 0 2px 8px rgba(0,0,0,0.55); }
.route-lib-marker {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--surface);
  box-shadow: var(--shadow-sm);
  background: var(--type-other);  /* js zet de soortkleur erop, P-17 */
  position: relative;
}
.route-lib-marker-walked {
  position: absolute;
  bottom: -6px; right: -6px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--walked);
  border: 2px solid var(--surface);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 11px;
  text-align: center;
}
.route-count-badge {
  position: absolute;
  top: -7px; right: -7px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 16px; height: 16px;
  padding: 0 3px;
  font-size: 0.58rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* ── route sidebar item ── */
.sidebar-route-item { background: rgba(79,142,247,0.05); }
.sidebar-route-item:hover { background: var(--surface-2); }

/* ── route detail (sidebar) ── */
.route-activity-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.route-activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
  font-size: 0.82rem;
  gap: 8px;
}
.route-activity-item:last-child { border-bottom: none; }
.route-activity-item:hover { background: var(--surface-2); }
.route-activity-date { color: var(--text); flex: 1; }
.route-activity-speed { color: var(--accent); font-weight: 600; font-size: 0.8rem; flex-shrink: 0; }

/* ── route card (activities view) ── */
.route-card { cursor: pointer; border-left: 3px solid var(--accent); }
.route-card:hover { border-color: var(--accent); }
.route-count-chip {
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── activity list filters ── */
.activity-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--gap);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.activity-filters select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}
.filter-count {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-left: auto;
}

/* ── sidebar stats overview ── */
.sidebar-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.stat-chip {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 8px 10px;
}
.stat-chip-value { font-weight: 700; font-size: 1rem; }
.stat-chip-label { color: var(--text-muted); font-size: 0.72rem; margin-top: 2px; }
.stat-chip-wide {
  grid-column: span 2;
}

/* ── sidebar loading ── */
.sidebar-loading {
  padding: 24px 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sidebar-cancel-btn {
  margin-top: 4px;
  padding: 5px 14px;
  font-size: 0.8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
}
.sidebar-cancel-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}
.spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── sidebar mode toggle (Activities / Routes) + tracks switch ── */
#sidebar-mode-toggle {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* Een segmentkiezer in plaats van twee onderstreepte woorden: er staat een
   duidelijk vlak omheen, dus je ziet zonder nadenken wélke van de twee bakken
   je bekijkt — en dat onderscheid is er een dat nooit vaag mag zijn (P-5). */
.smtabs {
  display: flex;
  gap: 3px;
  margin: 10px 12px 8px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
}
.smtab {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 4px;
  margin: 0;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.smtab:hover { color: var(--text); background: transparent; border-color: transparent; }
.smtab.active {
  color: var(--brand-navy);
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

/* tracks toggle row */
.smtracks {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 7px;
  cursor: pointer;
  border-top: 1px solid var(--border);
  user-select: none;
}
#sidebar-tracks-toggle { display: none; }
.smtracks-pill {
  width: 30px;
  height: 17px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.smtracks-pill::before {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  background: var(--text-muted);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform 0.2s, background 0.2s;
}
#sidebar-tracks-toggle:checked + .smtracks-pill {
  background: var(--accent);
  border-color: var(--accent);
}
#sidebar-tracks-toggle:checked + .smtracks-pill::before {
  transform: translateX(13px);
  background: #fff;
}
.smtracks-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: color 0.15s;
}
#sidebar-tracks-toggle:checked ~ .smtracks-text { color: var(--text); }

/* ── sidebar routes panel ── */
#sidebar-routes-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
.sroutes-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px 6px;
  flex-shrink: 0;
}
.sroutes-sort {
  flex: 1;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-btn);
  padding: 7px 12px;
  font-size: 0.8rem;
}
.sroutes-locate-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 4px 7px;
  font-size: 0.95rem;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}
.sroutes-locate-btn:hover { color: var(--accent); border-color: var(--accent); }
.sroutes-dist-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sroutes-input {
  width: 100%;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-btn);
  padding: 7px 12px;
  font-size: 0.8rem;
}
.sroutes-input:focus { outline: none; border-color: var(--accent); }
.sroutes-sep { color: var(--text-muted); font-size: 0.8rem; }
.sroutes-hint { grid-column: 1 / -1; font-size: 0.7rem; color: var(--text-muted); }
.sroutes-search-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 8px; padding: 7px 12px;
  background: var(--accent-soft); border-radius: var(--radius);
  font-size: 0.78rem; color: var(--text);
}
.sroutes-search-clear {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 0.74rem; white-space: nowrap;
}
.sroutes-search-clear:hover { text-decoration: underline; }
.sroutes-item { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.sroutes-item:hover { background: var(--surface-2); }
.sroutes-list {
  flex: 1;
  overflow-y: auto;
}
.sroutes-loading {
  padding: 20px 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* ── sidebar route card ── */
.sroute-item { cursor: pointer; }
.sroute-nearby { font-size: 0.75rem; color: #f97316; }

/* ── sidebar edit button ── */
.detail-edit-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius);
  padding: 3px 10px;
  cursor: pointer;
  font-size: 0.78rem;
  margin-left: auto;
}
.detail-edit-btn:hover { color: var(--text); border-color: var(--text-muted); }
.sidebar-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* ── elevation profile ── */
.elevation-section { display: flex; flex-direction: column; gap: 4px; }
.elevation-range { font-size: 0.72rem; color: var(--text-muted); display: flex; justify-content: space-between; }
.elevation-svg { width: 100%; height: 56px; display: block; overflow: visible; }

/* ── track direction arrows ── */
.track-dir-arrow {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid rgba(255,255,255,0.9);
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.65));
  pointer-events: none;
}

/* ── favorites ── */
.fav-btn {
  background: transparent;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--text-muted);
  line-height: 1;
  padding: 2px 4px;
  transition: color 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.fav-btn:hover { color: #f5c518; transform: scale(1.15); }
.fav-btn--active { color: #f5c518; }

.fav-star {
  font-size: 1.05rem;
  color: var(--text-muted);
  transition: color 0.15s;
}
.fav-star:hover { color: #f5c518; }
.fav-star--active { color: #f5c518; }

.ignore-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  font-size: 1.25rem;
  line-height: 0;
  transition: color 0.15s;
  flex-shrink: 0;
}
.ignore-btn:hover { color: var(--text); }
.ignore-btn--active { color: var(--text-muted); }
.ignore-btn--active:hover { color: var(--text); }

.mf-btn--fav {
  font-size: 1rem;
  letter-spacing: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 2px;
}
.mf-btn--fav.active { color: #f5c518 !important; opacity: 1; }

.fav-filter-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.fav-filter-label input { accent-color: #f5c518; cursor: pointer; width: 14px; height: 14px; }
.fav-filter-label:has(input:checked) { color: #f5c518; }

/* ── sidebar toggle (mobile only) ── */
#sidebar-toggle {
  display: none;
  position: fixed;
  bottom: calc(var(--footer-h) + 120px);
  right: 14px;
  width: 46px; height: 46px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  font-size: 1.15rem;
  cursor: pointer;
  z-index: 500;
  box-shadow: 0 2px 12px rgba(0,0,0,0.45);
  align-items: center;
  justify-content: center;
}

#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 799;
}
#sidebar-overlay.active { display: block; }

/* ── strava rate limit bar ── */
.strava-rate-bar { margin: 10px 0 4px; }
.strava-rate-label { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 3px; }
.strava-rate-track { background: var(--surface-2); border-radius: 4px; height: 6px; overflow: hidden; }
.strava-rate-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.3s; }
.strava-rate-fill--warn { background: #f0a500; }
.strava-rate-fill--danger { background: var(--danger); }
#strava-rate-limits { padding: 0 0 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }

/* ── hamburger button (hidden on desktop) ── */
.hamburger-btn { display: none; }

/* ── mobile menu (hidden on desktop) ── */
.mobile-menu {
  display: none;
  position: fixed;
  top: var(--topbar-h);
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 950;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  transform: translateY(-110%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.open { transform: translateY(0); }
#mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--topbar-h);
  background: rgba(0,0,0,0.5);
  z-index: 940;
  opacity: 0;
  transition: opacity 0.2s;
}
#mobile-menu-overlay.active { opacity: 1; }

/* ── smal: de filterkolom valt weg ── */
@media (max-width: 1180px) {
  #view-map { grid-template-columns: minmax(0, 1fr) 300px; }
  #map-filters { display: none; }
}

/* ── mobile ── */
@media (max-width: 640px) {
  #view-map { grid-template-columns: minmax(0, 1fr); }
  :root { --topbar-h: 52px; }

  /* Single-row topbar: logo on left, hamburger on right */
  #topbar { flex-wrap: nowrap; height: var(--topbar-h); }
  .nav-links { display: none; }
  .nav-right { display: none; }
  #topbar-actions { display: none; }

  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text);
    font-size: 1.25rem;
    cursor: pointer;
    flex-shrink: 0;
  }
  .hamburger-btn:hover { background: var(--surface-2); border-color: var(--border); }

  /* Mobile menu */
  .mobile-menu { display: block; }
  #mobile-menu-overlay { display: block; pointer-events: none; }
  #mobile-menu-overlay.active { pointer-events: auto; }

  /* Wraps: eleven entries do not fit one row at 390 px */
  .mobile-menu-nav {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 10px;
    gap: 4px;
    border-bottom: 1px solid var(--border);
  }
  .mobile-menu-nav .nav-btn {
    flex: 1 1 auto;
    white-space: nowrap;
    text-align: center;
    padding: 10px 4px;
    font-size: 0.85rem;
  }

  .mobile-menu-notifs {
    padding: 10px 12px 0;
  }
  .mobile-notif-list {
    margin-top: 6px;
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
  }

  .mobile-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }
  .mobile-action-btn {
    width: 100%;
    padding: 11px 14px;
    text-align: left;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .mobile-action-btn:hover { filter: brightness(1.15); }
  .mobile-action-btn--danger { color: var(--danger); }

  .mobile-menu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
  }
  .mobile-menu-user { color: var(--text-muted); font-size: 0.85rem; }
  #logout-btn-m {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius);
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.88rem;
  }
  #logout-btn-m:hover { color: var(--text); }

  #map-sidebar {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: var(--footer-h);
    width: min(85vw, 320px);
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 800;
    box-shadow: -4px 0 24px rgba(0,0,0,0.5);
  }

  #map-sidebar.open { transform: translateX(0); }

  #sidebar-toggle { display: flex; }

  /* Modals slide up from bottom */
  .modal-overlay { align-items: flex-end; }
  .modal-box {
    max-width: 100%;
    width: 100%;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 20px 16px;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Login / setup */
  .login-box {
    padding: 28px 20px;
    margin: 16px;
    max-width: 100%;
  }

  /* Strava list actions wrap on small screens */
  .strava-list-header { flex-wrap: wrap; row-gap: 8px; }
  .strava-list-actions { flex-wrap: wrap; }

  /* Activity cards: hide thumb on very small screens */
  .act-card-thumb-wrap { width: 72px; }
  .act-card-thumb { width: 72px; height: 54px; }

  /* Touch-friendly minimum target size */
  .btn-icon { padding: 8px; }
  .modal-close { padding: 8px; }
  .sidebar-item { padding: 12px 14px; }
  .cluster-item { padding: 12px 14px; }
}

/* ── library route sidebar ── */
.route-start-coords { display: flex; align-items: center; gap: 6px; }
.route-coords-link { color: var(--accent); font-size: 0.82rem; text-decoration: none; font-variant-numeric: tabular-nums; }
.route-coords-link:hover { text-decoration: underline; }
.route-coords-copy {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 1px 5px;
  line-height: 1.4;
  flex-shrink: 0;
}
.route-coords-copy:hover { color: var(--text); border-color: var(--text-muted); }

.lib-download-section {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.lib-download-btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  width: 100%;
  padding: 8px 12px;
}

/* ── upload mode toggle ── */
.upload-mode-toggle {
  display: flex;
  gap: 4px;
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 3px;
  margin-bottom: 14px;
}
.upload-mode-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: calc(var(--radius) - 2px);
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.upload-mode-btn.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
#upload-new-folder {
  margin-top: 6px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.9rem;
}

/* ── routes view ── */
.routes-folder-tabs {
  display: flex;
  gap: 6px;
  padding: 10px var(--gap);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
}
.rfolder-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius-btn);
  padding: 5px 14px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.rfolder-tab:hover { color: var(--text); border-color: var(--text-muted); }
.rfolder-tab.active { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.rfolder-tab .count { background: var(--brand-navy); color: #fff; border-radius: var(--radius-round); padding: 0 7px; font-size: 0.7rem; margin-left: 4px; }

/* ── Routes page (api#84, P-28): aside | list | map of exactly that list ── */
.catalog.with-map { grid-template-columns: 264px minmax(0, 1fr) minmax(320px, .9fr); }
.routes-list { display: flex; flex-direction: column; gap: 8px; }
.routes-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 40px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.rgroup-h { display: flex; align-items: center; gap: 10px; margin: 6px 2px 2px; font-size: 0.8rem; color: var(--text-muted); }
.rgroup-name { font: 700 0.68rem var(--font-display); letter-spacing: .11em; text-transform: uppercase; color: var(--brand-navy-2); }
.rmeter { flex: none; width: 90px; height: 5px; border-radius: 3px; background: #DCE9F3; overflow: hidden; }
.rmeter i { display: block; height: 100%; background: var(--walked); }
.fopt-folder { font-weight: 600; }
.fopt-folder .fopt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fopt-folder .rmeter { width: 54px; height: 4px; border-radius: 2px; }
.fopt-folder .fopt-n { margin-left: 0; min-width: 1.4em; text-align: right; }
.fopts { display: flex; flex-direction: column; gap: 6px; }

.rrow {
  display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-left: 3px solid var(--rc, var(--accent));
  border-radius: var(--radius); line-height: 1.35;
}
.rrow:hover { border-color: var(--accent); border-left-color: var(--rc, var(--accent)); background: var(--surface); color: var(--text); box-shadow: 0 2px 12px rgba(38,128,188,.10); }
.rrow.sel, .rrow.sel:hover { background: #F1F7FC; color: var(--text); border-color: var(--brand-navy); border-left-color: var(--rc, var(--accent)); box-shadow: 0 0 0 1px var(--brand-navy); }
.rrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rrow img { width: 72px; height: 54px; border-radius: 9px; object-fit: cover; flex: none; background: var(--surface-2); }
.rrow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rrow-title { font: 700 0.94rem var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 0.76rem; color: var(--text-muted); }
.rrow-type { padding: 2px 8px; }
.rrow-nums { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; }
.rrow-nums b { font-weight: 600; }
.rrow-from { color: #B23A0B; font-weight: 600; }
.rrow-open { flex: none; }
.aud { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; padding: 3px 9px 3px 7px; border-radius: var(--radius-round); border: 1px solid #B9D5EA; background: #EAF3FA; color: #1A5E96; white-space: nowrap; }
.aud svg { width: 13px; height: 13px; flex: none; }
.aud.plain { border-color: var(--border); background: var(--surface-2); }

/* sticky beside the list, under the view header, like the aside */
.rmap {
  position: sticky; top: var(--catalog-top);
  height: calc(100vh - var(--topbar-h) - var(--footer-h) - var(--catalog-top) - var(--gap)); min-height: 420px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: #EEF0EA; box-shadow: var(--shadow-sm);
}
.rmap-map { position: absolute; inset: 0; }
/* these maps end above the footer; only the main map needs room for it */
.rmap .leaflet-bottom, .rpage-map .leaflet-bottom { padding-bottom: 0; }
.rmap-legend {
  background: rgba(255,255,255,.95); border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 10px;
  font-size: 0.74rem; color: var(--text); display: flex; flex-direction: column; gap: 4px; box-shadow: var(--shadow);
}
.rmap-legend span { display: flex; align-items: center; gap: 7px; }
.rmap-legend i { display: inline-block; width: 22px; border-top: 3px dashed var(--brand-blue); }
.rmap-legend i.halo { box-shadow: 0 0 0 3px #9ED4B8; border-radius: 2px; }
.rmap-fit { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.rmap-fit:hover { background: var(--surface-2); color: var(--text); }
.mapcard {
  position: absolute; left: 14px; right: 14px; bottom: 28px; z-index: 1000;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.mapcard.hidden { display: none; }
.mapcard-who { display: flex; gap: 9px; align-items: center; font-size: 0.84rem; min-width: 0; }
.mapcard-who > div { min-width: 0; }
.mapcard-who small { display: block; color: var(--text-muted); font-size: 0.74rem; }
.mapcard-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mapcard-actions, .rpage-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
a.btn-tiny.btn-primary { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--text-on-dark); }
a.btn-tiny.btn-primary:hover { background: var(--brand-navy-2); border-color: var(--brand-navy-2); color: var(--text-on-dark); }
.rmap-toggle { display: none; }
.rmap-toggle.btn-on { background: var(--accent-soft-solid); border-color: #B9D5EA; color: var(--brand-navy); }
.rmap-toggle.btn-on:hover { background: #D6E7F3; border-color: #9CC3E0; color: var(--brand-navy); }

@media (max-width: 1100px) {
  .catalog.with-map { grid-template-columns: 264px minmax(0, 1fr); }
  .catalog.with-map .rmap { position: relative; top: 0; height: 300px; min-height: 0; grid-column: 2; grid-row: 1; }
  .catalog.with-map .rmap.closed { display: none; }
  .catalog.with-map .catalog-main { grid-column: 2; grid-row: 2; }
  .catalog.with-map .catalog-aside { grid-column: 1; grid-row: 1 / span 2; }
  .rmap-toggle { display: inline-flex; }
}
@media (max-width: 860px) {
  .catalog.with-map { grid-template-columns: minmax(0, 1fr); }
  .catalog.with-map .rmap, .catalog.with-map .catalog-main { grid-column: 1; }
  .catalog.with-map .catalog-aside { grid-row: auto; }
}

/* ── one route, #/route/<id> ── */
.rpage { display: grid; grid-template-columns: minmax(0, 1fr) 380px; height: 100%; }
.rpage-map { position: relative; min-height: 0; background: #EEF0EA; }
.rpage-side {
  overflow-y: auto; padding: var(--gap); display: flex; flex-direction: column; gap: 14px;
  background: var(--surface); border-left: 1px solid var(--border);
}
.rpage-back { font-size: 0.84rem; font-weight: 600; color: var(--accent-hover); text-decoration: none; align-self: flex-start; }
.rpage-back:hover { color: var(--brand-navy); text-decoration: underline; }
.rpage-title { font-size: 1.2rem; overflow-wrap: anywhere; }
.rpage-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 3px; }
.navrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.82rem; }
.navrow-label { width: 44px; color: var(--text-muted); }
.navrow code { font-size: 0.76rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
@media (max-width: 860px) {
  .rpage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 320px auto; height: auto; }
  .rpage-side { overflow: visible; border-left: 0; border-top: 1px solid var(--border); }
}

/* walked / partly walked (api#29): fill and symbol differ as well as colour */
.walk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-round);
  padding: 2px 10px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.walk-badge--walked { background: var(--walked); color: #fff; border: 1px solid var(--walked); }
.walk-badge--partly { background: var(--partly-bg); color: var(--partly); border: 1px dashed var(--partly); }
.walk-badge--compact { padding: 0 8px; font-size: 0.72rem; flex-shrink: 0; }
.sroute-walk { margin-top: 4px; }

.lib-walks { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.lib-walks-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-walks-title { font-weight: 700; font-size: 0.85rem; color: var(--text); }
.lib-walks-note { font-size: 0.76rem; color: var(--text-muted); }
.lib-walks .route-activity-list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.lib-walk-item .route-activity-date { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.lib-walk-title { flex: 1; min-width: 0; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── map library route banner ── */
.map-lib-banner {
  position: absolute;
  bottom: calc(var(--footer-h) + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 6px 12px 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 500;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  max-width: calc(100% - 40px);
  pointer-events: auto;
}
.map-lib-banner-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #f97316;
  flex-shrink: 0;
}
.map-lib-banner-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-lib-banner-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0 2px;
  flex-shrink: 0;
  line-height: 1;
}
.map-lib-banner-close:hover { color: var(--text); }

/* ── PWA install banner ── */
.pwa-banner {
  position: fixed;
  bottom: var(--footer-h);
  left: 0; right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  z-index: 1100;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.35);
}
.pwa-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.pwa-banner-text strong { font-size: 0.9rem; color: var(--text); }
.pwa-banner-text span { font-size: 0.78rem; color: var(--text-muted); }
.pwa-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pwa-install-btn {
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: var(--radius);
  padding: 7px 16px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}
.pwa-install-btn:hover { background: var(--accent-hover); color: var(--text-on-dark);}
.pwa-dismiss-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: var(--radius);
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.pwa-dismiss-btn:hover { color: var(--text); border-color: var(--text-muted); }

/* iOS banner: share icon points up on iOS */
.pwa-ios-banner .pwa-banner-text span { line-height: 1.5; }

/* Android app from this server (WAY-28) */
a.pwa-install-btn { text-decoration: none; }
.aa-version { font-size: 0.95rem; }
.aa-download { align-self: flex-start; padding: 10px 18px; border-radius: var(--radius); text-decoration: none; }
.aa-sha code { word-break: break-all; font-size: 0.72rem; }
.aa-qr { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.aa-qr-code svg { display: block; border-radius: 6px; }
.aa-qr p { flex: 1; min-width: 180px; }
.aa-steps { padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; }

/* Push Leaflet bottom controls above the footer bar */
.leaflet-bottom { padding-bottom: calc(var(--footer-h) + 6px); }

/* ── locate accuracy toast ── */
.locate-toast {
  position: absolute;
  bottom: calc(var(--footer-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(360px, 90vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-size: 0.82rem;
  color: var(--text);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  z-index: 700;
  text-align: center;
  line-height: 1.4;
  transition: opacity 0.4s;
}
.locate-toast--warn { border-color: #f0a500; color: #f0a500; }
.locate-toast--hidden { opacity: 0; pointer-events: none; }

/* ── map locate button ── */
.map-locate-btn {
  width: 34px; height: 34px;
  background: var(--surface);
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  transition: background 0.15s;
}
.map-locate-btn:hover { background: var(--surface-2); }
.map-locate-btn.locating { color: var(--accent); animation: pulse 1s ease-in-out infinite; }
.map-locate-btn.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.map-locate-btn.active:hover { background: var(--accent-hover); color: var(--text-on-dark);}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ── view loading spinner ── */
.view-loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 2rem var(--gap);
  color: var(--text-muted);
  font-size: 0.9rem;
}
.view-loading::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ── API tokens view ─────────────────────────────────────────────────────── */
.view-note { color: var(--text-muted); font-size: 0.85rem; margin: var(--gap) var(--gap) 0; max-width: 560px; }
#new-token-result { margin: var(--gap) var(--gap) 0; }
#token-list { padding: var(--gap); display: flex; flex-direction: column; gap: 10px; }
.badge-scope { background: var(--surface-2); color: var(--accent); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 0.7rem; margin-left: 4px; }
.badge-oauth { color: var(--success); }
.badge-revoked { background: var(--surface-2); color: var(--danger); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 0.7rem; margin-left: 4px; }
.token-revoked { opacity: 0.5; }
.token-create-form, .token-plain-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--gap); max-width: 560px; }
.token-create-form label { display: block; font-size: 0.8rem; color: var(--text-muted); margin: 8px 0 4px; }
.token-create-form input[type="text"] { width: 100%; box-sizing: border-box; padding: 8px 10px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); }
.token-scopes-row { display: flex; gap: var(--gap); margin-top: 8px; }
.token-scopes-row label { display: flex; align-items: center; gap: 6px; margin: 0; }
.token-form-actions { display: flex; gap: 8px; margin-top: 12px; justify-content: flex-end; }
.token-form-actions button {
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.9rem;
}
.token-form-actions button:hover { background: var(--accent-hover); color: var(--text-on-dark);}
.token-form-actions .btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.token-form-actions .btn-secondary:hover { background: var(--surface-2); }
.token-plain-title { color: var(--success); font-size: 0.85rem; margin-bottom: 8px; }
.token-plain-box code { display: block; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; word-break: break-all; user-select: all; }
.empty-state { color: var(--text-muted); }

/* ── POI markers & popups ────────────────────────────────────────────────── */
.poi-marker { display: flex; align-items: center; justify-content: center; }
.poi-marker span { font-size: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }
/* The popup wrapper zeroes its own padding so the cluster popup can draw its
   own header, which left everything in here flat against the border and under
   the close cross. These popups bring their own. */
.poi-popup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  min-width: 232px;
}
.poi-popup-title {
  font-weight: 600;
  font-size: 0.95rem;
  padding-right: 22px;   /* keeps the title clear of the close button */
  line-height: 1.3;
}
.poi-popup-meta { color: var(--text-muted); font-size: 0.8rem; }
.poi-popup-desc { font-size: 0.85rem; line-height: 1.45; }

/* Category and Save sit on one row and share a height, instead of a stack of
   controls that each ended up a few pixels taller than the next. */
.poi-popup-row { display: flex; align-items: stretch; gap: 8px; }
.poi-popup-row select,
.poi-popup-row input { flex: 1; min-width: 0; }
.poi-popup-row button { flex: 0 0 auto; align-self: stretch; }

.poi-popup input[type="text"],
.poi-popup input[type="number"],
.poi-popup select {
  height: 34px;
  padding: 0 10px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: inherit;
  outline: none;
}
.poi-popup select { padding-right: 6px; }
.poi-popup input::placeholder { color: var(--text-muted); }
/* Replaces the browser's default focus ring, which drew a bright halo over
   this dark surface. */
.poi-popup input:focus,
.poi-popup select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.25);
}
.poi-popup button {
  height: 34px;
  background: var(--accent);
  border: none;
  color: #fff;
  border-radius: var(--radius);
  padding: 0 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-end;
}
.poi-popup button:hover { background: var(--accent-hover); color: var(--text-on-dark);}
.poi-popup-delete {
  background: transparent !important;
  color: var(--danger) !important;
  border: 1px solid var(--border) !important;
  font-weight: 500 !important;
}
.poi-popup-delete:hover { border-color: var(--danger) !important; }

/* "Open in Google Maps" after a click on empty map space; an anchor dressed
   like the popup buttons. */
.poi-popup-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  background: var(--accent);
  color: #fff !important;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.poi-popup-link:hover { background: var(--accent-hover); color: var(--text-on-dark) !important; }
.poi-popup-coords { padding-right: 22px; }

/* Leaflet's own close button is mid-grey on white by default — invisible here. */
.leaflet-popup-close-button {
  color: var(--text-muted) !important;
  padding: 10px 10px 0 0 !important;
  font-size: 18px !important;
}
.leaflet-popup-close-button:hover { color: var(--text) !important; }

/* ── photos ──────────────────────────────────────────────────────────────── */
/* De selector moet `.leaflet-container .leaflet-marker-pane img` uit leaflet.css
   verslaan: die zet `width: auto`, waardoor de breedte de eigen verhouding van
   de foto volgde en een staande foto smal wegviel tegen de kaart. Vandaar de
   drie klassen — geen `!important`. De hoogte blijft wat hij was; `aspect-ratio`
   geeft elke marker dezelfde liggende vorm als een striptegel, en `cover` snijdt
   een staande foto op het midden bij. De popup en de vergroter tonen hem heel. */
.leaflet-container .leaflet-marker-pane .photo-marker img {
  height: var(--photo-marker-h);
  aspect-ratio: var(--photo-tile-w) / var(--photo-tile-h);
  width: auto;
  object-fit: cover;
  border-radius: var(--radius);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
/* Aanwijzen wélke miniatuur het was, na "Show on map". Geen popup meer: een
   randje in de accentkleur zegt hetzelfde zonder de kaart af te dekken. */
.photo-marker-found img {
  border-color: var(--accent) !important;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Friends layer (P-24): a friend's photo, place or cluster, with the owner's
   initial in the corner so it is never mistaken for your own (orange-free on purpose). */
.fl-marker { position: relative; }
.leaflet-container .leaflet-marker-pane .fl-marker .fl-thumb {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 10px; border: 3px solid #fff; background: #fff;
  box-shadow: 0 2px 8px rgba(18, 55, 79, 0.35);
}
.fl-owner { position: absolute; right: -7px; bottom: -7px; border: 2px solid #fff; border-radius: 50%; line-height: 0; }
.fl-pin .fl-pin-head {
  position: absolute; inset: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: #fff; border: 3px solid var(--brand-navy, #12374F); box-shadow: 0 2px 6px rgba(18, 55, 79, 0.35);
}
.fl-cluster .fl-blob { position: absolute; inset: 6px; border-radius: 50%; background: var(--brand-navy, #12374F); opacity: 0.8; }
.fl-count {
  position: absolute; left: -9px; top: -9px; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 12px; border: 2px solid #fff; background: var(--brand-navy, #12374F); color: #fff;
  font: 700 0.72rem/20px var(--font-body); text-align: center;
}
#friend-layer-hint:empty { display: none; }
#friend-layer-hint { margin-top: 6px; }

.photo-strip-box { margin-top: var(--gap); }
.photo-strip-head { display: flex; align-items: center; justify-content: space-between; }
.photo-strip-title { font-weight: 600; font-size: 0.9rem; }
.photo-add-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: 3px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}
.photo-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.photo-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.photo-tile { position: relative; width: 72px; height: 72px; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; cursor: zoom-in; }
/* Een knop op een foto hoort rond te zijn, en dat kost hier drie dingen die de
   componentlaag hierboven anders overneemt: `padding: 0`, want een border-box
   kan niet smaller dan zijn eigen padding en `9px 15px` maakte van 18x18 een
   ovaal van 30x18 — met `border-radius: 50%` dus een ellips; een eigen
   `:hover`, want `button:hover` (0,1,1) wint van deze class (0,1,0) en verfde
   hem lichtgrijs met een wit kruisje erin; en `outline-offset: 0`, want de
   focusring stak anders 2px buiten de thumbnail. */
.photo-tile-delete {
  position: absolute; top: 2px; right: 2px;
  display: grid; place-items: center;
  width: 18px; height: 18px; padding: 0;
  line-height: 1;
  background: rgba(0, 0, 0, 0.6);
  color: #fff; border: none; border-radius: 50%;
  cursor: pointer; font-size: 0.85rem;
  opacity: 0; transition: opacity 0.15s, background 0.13s;
}
.photo-tile:hover .photo-tile-delete,
.photo-tile-delete:focus-visible { opacity: 1; }
.photo-tile-delete:hover,
.photo-tile-delete:focus-visible { background: rgba(0, 0, 0, 0.85); }
.photo-tile-delete:focus-visible { outline-offset: 0; }
.photo-strip-status { color: var(--text-muted); font-size: 0.8rem; margin-top: 6px; }

/* ── Placing a photo that carries no location (P-20) ─────────────────────── */
/* Dezelfde vorm als de plaats-vraag hierboven: de foto links, het veld ernaast.
   Op 360 px valt hij onder de foto in plaats van ernaast te knijpen. */
.caption-head { display: flex; gap: 12px; align-items: stretch; margin-bottom: var(--gap); }
.caption-preview {
  width: 96px; height: 96px; flex: 0 0 96px;
  object-fit: cover; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
}
.caption-input {
  flex: 1 1 auto;
  min-width: 0;
  resize: vertical;
  padding: 8px 10px;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.caption-input:focus { outline: none; border-color: var(--accent); }
@media (max-width: 420px) {
  .caption-head { flex-direction: column; }
  .caption-preview { width: 100%; height: 140px; flex: 0 0 auto; }
}

.place-photo-head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: var(--gap); }
.place-photo-preview {
  width: 96px; height: 96px; flex: 0 0 96px;
  object-fit: cover; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--border);
}
.place-photo-note { margin: 0; color: var(--text-muted); font-size: 0.86rem; line-height: 1.45; }
.place-photo-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 var(--gap); }
.place-photo-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px; text-align: left; cursor: pointer;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.place-photo-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.place-photo-icon { font-size: 1.05rem; }
.place-photo-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-photo-dist { color: var(--text-muted); font-size: 0.8rem; }
.place-photo-empty { margin: 6px 0 var(--gap); color: var(--text-muted); font-size: 0.86rem; }

/* Pointing at the map to put a new place there. */
.leaflet-container.picking-place { cursor: crosshair; }
.map-pick-hint {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 1000; pointer-events: none;
  padding: 7px 14px; border-radius: var(--radius-btn);
  background: var(--brand-navy); color: var(--text-on-dark);
  font-size: 0.82rem; box-shadow: var(--shadow-lg);
}
/* ── Sharing & privacy view ──────────────────────────────────────────────── */
#zone-list, #share-list { padding: var(--gap); display: flex; flex-direction: column; gap: 10px; }
.btn-copy { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px; cursor: pointer; }
.btn-copy:hover { border-color: var(--accent); color: var(--accent); }

/* ── Accounts (7.1): sign-up screens, admin, account ─────────────────── */
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.85rem; }
.auth-links a { color: var(--accent); text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
.auth-legal { text-align: center; font-size: 0.75rem; color: var(--text-muted); }
.auth-legal a { color: var(--text-muted); }
.auth-banner { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 0.85rem; }
.auth-banner.ok { background: rgba(46,156,107,.12); color: var(--walked); font-weight: 600; }
.auth-check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; color: var(--text-muted); }
.login-box .auth-check input { width: auto; margin-top: 3px; }
.login-box button:disabled { opacity: 0.55; cursor: default; }
.inviter b { display: block; }
.small { font-size: 0.8rem; }
.muted { color: var(--text-muted); }
.nowrap { white-space: nowrap; }
.pw-rules { display: flex; flex-direction: column; gap: 2px; font-size: 0.78rem; color: var(--text-muted); }
.pw-rule::before { content: "○ "; }
.pw-rule.ok { color: var(--walked); }
.pw-rule.ok::before { content: "✓ "; }

.nav-btn .count, .bell-btn .count, .mobile-action-btn .count {background: var(--brand-orange); color: #fff; border-radius: var(--radius-round); padding: 0 7px; font-size: 0.7rem; margin-left: 4px; }
.admin-pane { padding: var(--gap); display: flex; flex-direction: column; gap: 14px; }
.admin-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 6px; }
.admin-rows { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.admin-rows--pending { border-color: #EBCB94; background: #FFFBF3; }
.admin-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.admin-row + .admin-row { border-top: 1px solid var(--border-soft); }
.admin-row .grow { flex: 1; }
.admin-row small { display: block; color: var(--text-muted); }
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table th { text-align: left; font-size: 0.72rem; color: var(--text-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.admin-actions { white-space: nowrap; }
.admin-actions button { margin-left: 4px; }
.status-pill { border-radius: var(--radius-round); padding: 2px 8px; font-size: 0.72rem; font-weight: 600; background: var(--surface-2); }
.status-pill.st-active { background: rgba(46,156,107,.12); color: var(--walked); }
.status-pill.st-suspended { background: var(--danger-soft); color: var(--danger); }
.status-pill.st-deleting, .status-pill.st-pending_verification { background: var(--partly-bg); color: var(--partly); }
.linkbox { display: flex; gap: 8px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.linkbox input { flex: 1; min-width: 220px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: monospace; font-size: 0.8rem; }
.admin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; max-width: 860px; }
.mode-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.mode-card { text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.mode-card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); background: var(--surface); }
.mode-card:disabled { cursor: not-allowed; opacity: 0.7; }
.mode-card small { color: var(--text-muted); }
.checklist { margin: 6px 0 0; padding-left: 0; list-style: none; font-size: 0.75rem; color: var(--danger); }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.set-row small { display: block; color: var(--text-muted); }
.switch input { width: 18px; height: 18px; }

.account-body { padding: var(--gap); display: flex; flex-direction: column; gap: 14px; max-width: 1180px; margin: 0 auto; }
.account-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.account-card h3 { font-size: 1rem; }
.account-card--danger { border-color: rgba(214,69,63,.4); }
.account-form { display: flex; flex-direction: column; gap: 10px; }
.account-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-muted); }
.account-form input, .account-form textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: inherit; }
a.btn-tiny { display: inline-block; align-self: flex-start; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; }

/* ── settings (WAY-41/42) ──
   Centred like the Feed page: the header bar stays full width, its content
   lines up with the page. A section nav beside one wide column; on a phone
   the nav is the list and a section is its own page. */
#view-settings {
  --set-page: 1180px;
  --set-inset: max(var(--gap), calc((100% - var(--set-page)) / 2 + var(--gap)));
  /* white text on --danger is 4.0:1; this one is 5.9:1, and 5.6:1 as text on white */
  --danger-strong: #B3302A;
}
.settings-header { justify-content: flex-start; padding-left: var(--set-inset); padding-right: var(--set-inset); }
.settings-page { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: start; max-width: var(--set-page); margin: 0 auto; padding: 20px var(--gap) 48px; }
.settings-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.settings-nav-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius-btn); color: var(--text); text-decoration: none; font-size: 0.88rem; }
.settings-nav-item:hover { background: var(--surface-2); }
.settings-nav-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.settings-nav-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-nav-text b { font-weight: 500; }
.settings-nav-text small, .settings-nav-chev { display: none; }
.settings-nav-item.on { background: var(--accent-soft-solid); color: var(--brand-navy); box-shadow: inset 3px 0 0 var(--brand-navy); }
.settings-nav-item.on b { font-weight: 700; }
.settings-content { min-width: 0; }
.settings-back { display: none; }
.settings-panel { display: none; flex-direction: column; gap: 16px; }
.settings-panel.on { display: flex; }
.settings-panel > div { display: flex; flex-direction: column; gap: 16px; }
.settings-page .account-card { padding: 20px 22px; gap: 10px; box-shadow: var(--shadow-sm); }
.settings-page .account-card h3 { font-size: 1.05rem; }
.settings-page .account-card--danger { border-color: rgba(179,48,42,.45); }
.set-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.set-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.connection-card .set-actions { margin-top: 14px; }
.set-list { display: flex; flex-direction: column; gap: 8px; }
.set-list .user-card { border-radius: var(--radius); padding: 12px 14px; }
.set-list .empty-state { font-size: 0.85rem; }
.account-form--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; max-width: 760px; }
.account-form--grid .span-2 { grid-column: 1 / -1; }
.account-form--grid p { margin: 0; }
/* buttons in here: normal width, the 6 px radius, every state readable */
.settings-page .btn-sm, .settings-page .btn-danger-sm, .settings-page .btn-accent-sm { border-radius: var(--radius-btn); padding: 7px 12px; font-size: 0.8rem; }
.settings-page .btn-sm { color: var(--text); }
.settings-page .btn-accent-sm { background: var(--brand-navy); border: 1px solid var(--brand-navy); color: var(--text-on-dark); }
.settings-page .btn-accent-sm:hover { background: var(--brand-navy-2); border-color: var(--brand-navy-2); }
.settings-page .btn-danger-sm, .btn-danger-outline { background: var(--surface); border: 1px solid var(--danger-strong); color: var(--danger-strong); }
.settings-page .btn-danger-sm:hover, .btn-danger-outline:hover { background: var(--danger-strong); border-color: var(--danger-strong); color: var(--text-on-dark); }
.settings-page .btn-danger { background: var(--danger-strong); border-color: var(--danger-strong); }
.settings-page .btn-danger:hover { background: #962620; border-color: #962620; }
.set-actions a.btn { display: inline-flex; align-items: center; font-size: 0.82rem; font-weight: 600; line-height: 1; padding: 9px 15px; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--surface); color: var(--text); text-decoration: none; }
.set-actions a.btn:hover { background: var(--surface-2); border-color: var(--text-faint); }
.settings-page a:not(.btn):not(.settings-nav-item):not(.settings-back) { color: var(--accent-hover); }
.settings-page .token-form-actions button { background: var(--brand-navy); border: 1px solid var(--brand-navy); border-radius: var(--radius-btn); color: var(--text-on-dark); font-size: 0.82rem; }
.settings-page .token-form-actions button:hover { background: var(--brand-navy-2); }
.settings-page .token-form-actions .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.settings-page .token-form-actions .btn-secondary:hover { background: var(--surface-2); color: var(--text); }
.settings-page .token-create-form input[type="text"] { border-radius: var(--radius-sm); }
.settings-page .token-plain-title { color: var(--walked); }
.settings-page .badge-scope { color: var(--accent-hover); }
.settings-page .badge-oauth { color: var(--walked); }
.settings-page .badge-revoked { color: var(--danger-strong); }
.settings-page #token-list { padding: 0; }
.settings-page #new-token-result { margin: 0; }
.settings-page #visibility-defaults { display: flex; flex-direction: column; gap: 10px; }
.settings-page .vis-defaults { margin: 0; }
.settings-page .vis-banner { margin: 0; }
.settings-page .strava-hint + .strava-hint { margin-top: 6px; }
.settings-page .strava-autosync-select, .settings-page .garmin-field input { border-radius: var(--radius-sm); }
.settings-page .garmin-field { max-width: 420px; }
.settings-page .garmin-warning { border-color: var(--danger-strong); color: var(--danger-strong); }
.settings-page #strava-activity-list { max-height: 420px; }
.user-menu-sep { border: none; border-top: 1px solid var(--border); margin: 0; }
.np-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); }
.np-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 112px; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.np-row:last-child { border-bottom: none; }
.np-row > :not(.np-text) { justify-self: center; text-align: center; }
.np-head { padding-top: 8px; padding-bottom: 8px; background: var(--surface-2); font-size: 0.74rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; border-radius: var(--radius) var(--radius) 0 0; }
.np-soon { display: block; font-size: 0.66rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--partly); }
.np-text { display: flex; flex-direction: column; gap: 2px; }
.np-text small { color: var(--text-muted); font-size: 0.78rem; }
.np-switch { display: inline-flex; padding: 6px; cursor: pointer; }
.np-switch input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-navy); cursor: pointer; }
.np-switch input:disabled { cursor: not-allowed; }
@media (max-width: 900px) {
  .settings-page { grid-template-columns: 200px minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
  .settings-page { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px 10px 40px; }
  .settings-page[data-mode="list"] .settings-content { display: none; }
  .settings-page[data-mode="detail"] .settings-nav { display: none; }
  .settings-nav { position: static; padding: 0; gap: 0; overflow: hidden; }
  .settings-nav-item { padding: 14px 16px; border-radius: 0; border-bottom: 1px solid var(--border-soft); }
  .settings-nav-item:last-child { border-bottom: none; }
  .settings-nav-text b { font-weight: 600; }
  .settings-nav-text small { display: block; color: var(--text-muted); font-size: 0.78rem; }
  .settings-nav-chev { display: block; color: var(--text-muted); font-size: 1.3rem; }
  .settings-nav-item.on { background: none; color: var(--text); box-shadow: none; }
  .settings-back { display: inline-block; margin: 2px 0 10px; color: var(--accent-hover); font-weight: 600; font-size: 0.88rem; text-decoration: none; }
  .settings-page .account-card { padding: 16px; }
  .account-form--grid { grid-template-columns: minmax(0, 1fr); }
  .settings-page .strava-status-row { flex-wrap: wrap; gap: 8px; }
  .np-row { grid-template-columns: minmax(0, 1fr) 60px 72px; gap: 8px; padding: 12px 10px; }
}

/* ── friends (7.2) ── */
.avatar { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; flex: none; }
/* the picture covers the initial; a transparent picture must not let the letter through */
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--surface); }
.avatar--gone { background: var(--text-muted); }

/* ── profile picture editor (#109) ── */
.avatar-editor { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.avatar-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; min-width: 220px; }
.avatar-pick p { margin: 0; }
.avatar-drop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; padding: 14px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 0.85rem; }
.avatar-drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.avatar-crop { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; width: 100%; }
.avatar-crop-area { touch-action: none; cursor: grab; border-radius: var(--radius-sm); background: var(--surface-2); max-width: 100%; }
.avatar-crop-area:active { cursor: grabbing; }
.avatar-crop-area:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.avatar-crop-side { display: flex; flex-direction: column; gap: 14px; min-width: 200px; }
.avatar-previews { display: flex; align-items: flex-end; gap: 12px; }
.avatar-preview { border-radius: 50%; background: var(--surface-2); }
.avatar-zoom { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--text-muted); }
.avatar-zoom input { accent-color: var(--accent); }
.avatar-actions { display: flex; gap: 8px; }
.admin-row a { color: var(--text); text-decoration: none; }
.admin-row a:hover { text-decoration: underline; }
.friend-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.friend-actions .grow { flex: 1; }
.account-card input[type="search"] { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: inherit; }
.bell-btn { background: transparent; border: none; cursor: pointer; font-size: 1.05rem; padding: 4px 8px; color: var(--text-muted); }
.bell-btn:hover { color: var(--text); }
.bell-btn .count { font-size: 0.65rem; vertical-align: top; margin-left: -4px; }
.bell-dropdown { min-width: 280px; max-height: 360px; overflow-y: auto; }
.notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border-soft); font-size: 0.85rem; }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: var(--accent-soft); }
.notif-item small { display: block; color: var(--text-muted); margin-top: 2px; }
.notif-empty { padding: 14px 12px; color: var(--text-muted); font-size: 0.85rem; }

/* ── who sees what (7.3) ── */
.seg { display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-btn); padding: 2px; flex: none; }
.seg button { border: none; background: transparent; color: var(--text-muted); border-radius: var(--radius-btn); padding: 5px 12px; font-size: 0.78rem; }
.seg button.on { background: var(--brand-navy); color: var(--text-on-dark); }
.seg.locked button { cursor: not-allowed; color: var(--text-muted); }
.seg.locked button.on { background: var(--border); color: var(--text); }
.vis-defaults { margin: 0 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.vis-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.vis-row:last-child { border-bottom: none; }
.vis-row-text { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.vis-row-text small { color: var(--text-muted); font-size: 0.75rem; }
.vis-banner { margin: 10px 16px; padding: 10px 13px; border-radius: var(--radius); font-size: 0.8rem; background: var(--accent-soft); color: var(--text); }
.vis-banner.warn { background: var(--partly-bg); color: var(--partly); }
.picker { position: relative; margin: 8px 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.picker-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.picker-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.picker-btn { padding: 4px 10px; font-size: 0.8rem; border-radius: var(--radius-btn); }
.picker-btn.btn-on { border-color: var(--accent); color: var(--accent); }
.picker-sub { margin-top: 6px; font-size: 0.75rem; color: var(--text-muted); }
.picker-sub.exc { color: var(--partly); }
.pop { position: absolute; right: 8px; top: 40px; z-index: 30; width: min(320px, 90vw); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(18,55,79,.12); padding: 4px; }
.opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; border: none; background: transparent; border-radius: var(--radius-sm); padding: 8px 10px; }
.opt small { color: var(--text-muted); font-size: 0.72rem; font-weight: 400; }
.opt.on { background: var(--accent-soft); }
.defpill { font-size: 0.65rem; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-round); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); margin-left: 4px; }
.aud.plain { font-size: 0.78rem; color: var(--text-muted); }
.locked-box { margin-top: 8px; font-size: 0.78rem; color: var(--text-muted); }
.vis-inline { font-size: 0.8rem; color: var(--text-muted); margin: 6px 0; }
.vis-inline-seg { margin-bottom: 8px; }
.photo-vis { margin-top: 8px; padding: 8px; background: var(--surface); color: var(--text); border-radius: var(--radius); text-align: left; max-width: 360px; }
.shared-row { cursor: pointer; }
.shared-thumb { width: 64px; height: 48px; flex: none; background: var(--surface-2); border-radius: var(--radius-sm); }
.shared-item { max-width: 720px; width: 100%; }
.shared-map { height: min(50vh, 380px); border-radius: var(--radius); border: 1px solid var(--border); margin: 8px 0; }

/* ── feed, kudos, comments (7.5) ── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The header bar stays full width like every view; its content lines up with the feed page below. */
#view-feed { --feed-page: 1180px; --feed-inset: max(var(--gap), calc((100% - var(--feed-page)) / 2 + var(--gap))); }
.feed-header { justify-content: flex-start; padding-left: var(--feed-inset); padding-right: var(--feed-inset); }
.view-sub { color: var(--text-muted); font-size: 0.86rem; margin-top: 2px; }
.feed-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; max-width: var(--feed-page); margin: 0 auto; padding: 16px var(--gap) 48px; }
.feed-main { min-width: 0; }
.feed-list { display: flex; flex-direction: column; gap: 12px; }
.feed-switches { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.feed-switch { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-btn); background: var(--surface); color: var(--text-muted); font-size: 0.82rem; font-weight: 500; cursor: pointer; }
.feed-switch:hover { background: var(--surface-2); border-color: var(--text-muted); color: var(--text); }
.feed-switch input { margin: 0; accent-color: var(--brand-navy); cursor: pointer; }
.feed-switch:has(input:checked) { border-color: var(--brand-navy); color: var(--text); }
.feed-switch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

.feed-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.feed-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px 6px; }
.feed-head .grow { flex: 1; min-width: 0; }
.feed-who { font-weight: 700; color: var(--text); text-decoration: none; }
.feed-who:hover { color: var(--text); text-decoration: underline; }
.feed-meta { font-size: 0.78rem; color: var(--text-muted); }
.feed-head .wm-chip { flex: none; }
.feed-title { display: block; width: 100%; padding: 2px 16px 0; border: none; border-radius: 0; background: transparent; color: var(--text); text-align: left; font: 700 1.08rem/1.3 var(--font-display); white-space: normal; }
.feed-title:hover { background: transparent; color: var(--accent-hover); }
.feed-title:focus-visible, .feed-media:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.feed-sub { padding: 2px 16px 0; font-size: 0.8rem; color: var(--text-muted); }
.feed-desc { margin: 4px 16px 0; color: var(--text); font-size: 0.84rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.feed-card > :last-child:is(.feed-title, .feed-sub, .feed-desc) { padding-bottom: 14px; }
.feed-statline { display: flex; gap: 26px; padding: 8px 16px 12px; }
.feed-statline .v { font: 700 0.98rem var(--font-display); color: var(--text); }
.feed-statline .l { font-size: 0.66rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.feed-media { display: block; width: 100%; padding: 0; border: none; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); border-radius: 0; background: var(--surface-2); cursor: pointer; }
.feed-media:hover { background: var(--surface-2); }
.feed-title + .feed-media { margin-top: 10px; }
.feed-map { display: block; width: 100%; height: 240px; background: var(--surface-2); }
.feed-media-static { cursor: default; }
.feed-title + .feed-media-static { margin-top: 10px; }
.feed-map.leaflet-container { font: inherit; isolation: isolate; cursor: pointer; }
.feed-media-static .feed-map.leaflet-container { cursor: default; }
.feed-map .leaflet-control-container, .feed-map .leaflet-interactive { pointer-events: none; }
.feed-map-empty { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.8rem; }
.feed-photo { display: block; width: 100%; max-height: 420px; object-fit: cover; }
.feed-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.feed-text b { font-size: 0.92rem; }
.feed-text small { color: var(--text-muted); font-size: 0.78rem; }
.feed-foot { padding: 10px 12px; }
.feed-hint { font-size: 0.78rem; color: var(--text-muted); margin-left: 4px; }
.feed-copy { margin-left: auto; }
.feed-comments { margin: 0; padding: 6px 16px 12px; }
.feed-comments .comments-title { display: none; }
.feed-more { align-self: center; }
.feed-endcard { text-align: center; color: var(--text-muted); font-size: 0.84rem; padding: 20px; border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.feed-endcard b { color: var(--text); }
.feed-endcard p { margin: 6px 0 0; }
.feed-endcard small { display: block; margin-top: 4px; font-size: 0.78rem; }
.feed-bundle { padding: 4px 16px 14px; }
.feed-bundle summary { cursor: pointer; color: var(--text); font-size: 0.85rem; font-weight: 600; padding: 4px 0; }
.feed-bundle summary:hover { color: var(--accent-hover); }
.feed-bundle summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.feed-bundle-list { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--border-soft); }
.feed-bundle-item { display: block; width: 100%; padding: 8px 6px; border: none; border-bottom: 1px solid var(--border-soft); border-radius: 0; background: transparent; color: var(--text); text-align: left; font-weight: 400; white-space: normal; }
.feed-bundle-item:hover { background: var(--surface-2); color: var(--text); }
.feed-bundle-more { padding: 8px 6px; }

.feed-side { display: flex; flex-direction: column; gap: 12px; }
.feed-side-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.feed-side-card h3 { font-size: 0.98rem; }
.feed-side-card p { margin: 0; }
.feed-side-card > a.small { color: var(--accent-hover); }
.feed-side-card > a.small:hover { color: var(--brand-navy); }
.feed-side-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.feed-side-row .grow { flex: 1; min-width: 0; }
.feed-side-row a { color: var(--text); text-decoration: none; }
.feed-side-row a:hover { text-decoration: underline; }
.feed-side-row small { display: block; color: var(--text-muted); font-size: 0.75rem; }

@media (max-width: 900px) {
  .feed-page { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .feed-page { padding-top: 12px; }
  .feed-map { height: 200px; }
  .feed-statline { gap: 20px; }
}

.social-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 14px 12px; }
.shared-item-social .social-bar { padding: 8px 0; }
.own-social { margin-top: var(--gap); }
.rpage-side .own-social { margin-top: 0; }
.social-kudos { display: contents; }
.social-btn { display: inline-flex; align-items: center; gap: 6px; }
.social-btn svg { width: 16px; height: 16px; }
.kudos-btn.on { background: #FFF1EA; border-color: #F6B79D; color: #A83400; }
.kudos-btn.on:hover { background: #FFE6DA; border-color: var(--brand-orange); color: #A83400; }
.social-count { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); padding: 0 4px; }
.comments { border-top: 1px solid var(--border-soft); padding-top: 8px; }
.comments-title { margin: 4px 0 8px; font-size: 0.9rem; color: var(--text); }
.comment { padding: 8px 0; border-bottom: 1px solid var(--border-soft); }
.comment-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; }
.comment-head a { color: var(--text); }
.comment-head small { color: var(--text-muted); font-size: 0.75rem; }
.comment-text { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text); font-size: 0.88rem; }
.comment-actions { display: flex; gap: 4px; margin-top: 4px; }
.comments .comment-form { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; }
.comment-form .btn-tiny { align-self: flex-end; }
.comment-form textarea { width: 100%; box-sizing: border-box; min-height: 72px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit; font-size: 0.88rem; resize: vertical; }
.comment-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

#detail-share-btn:hover, #detail-export-btn:hover { color: var(--text); }

/* ══ landing page (WAY-49, W-69) ════════════════════════════════════════
   The signed-out home. Every class carries lp- and every rule is scoped to
   #login-screen, so nothing here can reach the app and the app's rules on
   bare elements cannot reach in. Mockup: plans/landing-page/landing.html.
   ════════════════════════════════════════════════════════════════════ */
#login-screen { height: 100%; overflow-y: auto; background: var(--bg); padding-bottom: var(--footer-h); line-height: 1.5; }
#login-screen img { display: block; max-width: 100%; }
/* --accent-hover, not --accent: the lighter blue is 4.2:1 on white */
#login-screen a { color: var(--accent-hover); }
#login-screen a:hover { color: var(--brand-navy); }
/* --danger on white is 4:1; the sign-in error needs the darker red */
#login-screen .error { color: #B3261E; font-size: .85rem; }
#login-screen .lp-btn{font-family:var(--font-body);font-size:.88rem;font-weight:600;line-height:1;padding:11px 16px;border:1px solid var(--border);border-radius:var(--radius-btn);
  background:var(--surface);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;white-space:nowrap;
  transition:background .13s,border-color .13s,color .13s}
#login-screen .lp-btn:hover{background:var(--surface-2);border-color:var(--text-faint);color:var(--text)}
#login-screen .lp-btn:focus-visible,#login-screen input:focus-visible,#login-screen a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#login-screen .lp-btn-primary{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff;font-family:var(--font-display)}
#login-screen .lp-btn-primary:hover{background:var(--brand-navy-2);border-color:var(--brand-navy-2);color:#fff}
#login-screen .lp-btn-accent{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;font-family:var(--font-display)}
#login-screen .lp-btn-accent:hover{background:var(--brand-navy-2);border-color:var(--brand-navy-2);color:#fff}
#login-screen .lp-btn-quiet{background:transparent;border-color:transparent;color:var(--text)}
#login-screen .lp-btn-quiet:hover{background:var(--surface-2);border-color:transparent}
#login-screen .lp-btn-sm{padding:8px 13px;font-size:.82rem}
#login-screen .lp-btn-full{width:100%}
#login-screen .lp-btn svg{width:16px;height:16px}
#login-screen input{font-family:var(--font-body);font-size:.95rem;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-btn);padding:11px 12px;width:100%}
#login-screen input::placeholder{color:#5B6B7F}
#login-screen input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(38,128,188,.14)}
#login-screen .lp-avatar{border-radius:50%;display:block;flex:none}
#login-screen .lp-wm-label{font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--brand-navy-2);display:block}
#login-screen .lp-chip{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;padding:5px 10px;border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--surface);color:var(--text);white-space:nowrap}
#login-screen .lp-chip svg{width:14px;height:14px;flex:none}
#login-screen .lp-chip[data-type=walk]{border-color:#A9CCE4;background:#EEF5FA;color:#1F6DAE}
#login-screen .lp-chip[data-type=cycle]{border-color:#F6BBA4;background:#FEF1EC;color:#B23A0B}
#login-screen .lp-chip[data-type=run]{border-color:#A8D6D0;background:#EEF7F6;color:#1F6F65}
#login-screen .lp-muted{color:var(--text-muted)}
#login-screen .lp-small{font-size:.8rem}
#login-screen .lp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
/* ── page ──*/
#login-screen .lp-wrap{max-width:1200px;margin:0 auto;padding:0 32px}
#login-screen .lp-top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
#login-screen .lp-top .lp-wrap{display:flex;align-items:center;gap:28px;height:64px}
#login-screen .lp-brand{font-family:var(--font-display);font-weight:800;font-size:1.08rem;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-blue);display:flex;align-items:center;gap:10px;text-decoration:none}
#login-screen .lp-brand:hover{color:var(--brand-blue)}
#login-screen .lp-brand img{height:28px;width:auto}
#login-screen .lp-top nav{display:flex;gap:4px}
#login-screen .lp-top nav a{color:var(--text-muted);text-decoration:none;font-weight:500;padding:7px 12px;border-radius:var(--radius-btn)}
#login-screen .lp-top nav a:hover{color:var(--text);background:var(--surface-2)}
#login-screen .lp-top .lp-right{margin-left:auto;display:flex;align-items:center;gap:10px}
#login-screen .lp-pill-note{font-size:.76rem;font-weight:600;color:var(--brand-navy);background:var(--accent-soft-solid);border:1px solid #C9DDEC;border-radius:var(--radius-round);padding:5px 11px;white-space:nowrap}
#login-screen .lp-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#FFFFFF 0%,#F6F8FA 70%,var(--bg) 100%)}
#login-screen .lp-hero::before{content:"";position:absolute;inset:0;background-image:var(--topo);background-size:900px auto;opacity:.55;pointer-events:none}
#login-screen .lp-hero .lp-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:64px;align-items:start;padding-top:72px;padding-bottom:56px}
#login-screen .lp-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px}
#login-screen .lp-eyebrow .lp-dots{display:inline-flex;gap:4px}
#login-screen .lp-eyebrow .lp-dots i{width:8px;height:8px;border-radius:50%;display:block}
#login-screen .lp-hero h1{font-size:3.5rem;font-weight:800;letter-spacing:-.025em;line-height:1.04;max-width:640px}
#login-screen .lp-hero h1 em{font-style:normal;color:var(--accent-hover)}
#login-screen .lp-lead{font-size:1.14rem;color:var(--text-muted);max-width:560px;margin-top:20px;line-height:1.55}
#login-screen .lp-hero-facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
#login-screen .lp-signin{padding:28px 28px 24px;box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:14px;position:relative;scroll-margin-top:84px}
#login-screen .lp-signin h2{font-size:1.4rem}
#login-screen .lp-signin form{display:flex;flex-direction:column;gap:10px}
#login-screen .lp-signin .lp-row{display:flex;justify-content:space-between;align-items:center;font-size:.84rem}
#login-screen .lp-signin .lp-sep{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:.78rem;margin:2px 0}
#login-screen .lp-signin .lp-sep::before,#login-screen .lp-signin .lp-sep::after{content:"";flex:1;height:1px;background:var(--border)}
#login-screen .lp-banner{border-radius:var(--radius);padding:12px 13px;font-size:.86rem;line-height:1.45;display:flex;gap:10px;background:var(--accent-soft-solid);border:1px solid #C9DDEC;color:var(--brand-navy)}
#login-screen .lp-banner svg{width:18px;height:18px;flex:none;margin-top:1px}
#login-screen .lp-banner b{display:block;margin-bottom:2px}
#login-screen .lp-req{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.84rem;padding:2px 2px 0}
#login-screen .lp-legal{font-size:.76rem;color:var(--text-muted);text-align:center}
/* app window preview under the hero*/
#login-screen .lp-hero .lp-wrap.lp-showcase{display:block;padding-top:0;padding-bottom:40px}
#login-screen .lp-window{border-radius:14px;overflow:hidden;border:1px solid #CFD8E2;box-shadow:0 24px 60px rgba(18,55,79,.18);background:var(--surface)}
#login-screen .lp-window .lp-chrome{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#F1F3F6;border-bottom:1px solid var(--border)}
#login-screen .lp-window .lp-chrome i{width:10px;height:10px;border-radius:50%;background:#D5DBE2;display:block}
#login-screen .lp-window .lp-chrome span{margin-left:12px;font-size:.72rem;color:var(--text-muted);background:#fff;border:1px solid var(--border);border-radius:5px;padding:2px 10px}
#login-screen .lp-appbar{display:flex;align-items:center;gap:18px;height:52px;padding:0 18px;border-bottom:1px solid var(--border)}
#login-screen .lp-appbar .lp-brand{font-size:.92rem}
#login-screen .lp-appbar .lp-brand img{height:22px}
#login-screen .lp-appbar .lp-tabs{display:flex;gap:2px}
#login-screen .lp-appbar .lp-tabs b{font-weight:500;font-size:.82rem;color:var(--text-muted);padding:6px 11px;border-radius:var(--radius-btn);border:1px solid transparent}
#login-screen .lp-appbar .lp-tabs b.lp-on{color:var(--text);background:var(--surface-2);border-color:var(--border);font-weight:600}
#login-screen .lp-appbar .lp-me{margin-left:auto}
#login-screen .lp-appbody{display:grid;grid-template-columns:300px 1fr;height:470px}
#login-screen .lp-applist{border-right:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column}
#login-screen .lp-applist .lp-head{padding:12px 14px;border-bottom:1px solid var(--border-soft);display:flex;justify-content:space-between;align-items:center}
#login-screen .lp-applist .lp-head b{font-family:var(--font-display);font-size:.95rem}
#login-screen .lp-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border-soft);align-items:center}
#login-screen .lp-item img{width:58px;height:44px;border-radius:7px;object-fit:cover;border:1px solid var(--border-soft)}
#login-screen .lp-item .lp-t{font-weight:600;font-size:.84rem}
#login-screen .lp-item .lp-s{font-size:.74rem;color:var(--text-muted)}
#login-screen .lp-item.lp-on{background:#F2F7FB}
#login-screen .lp-appmap{position:relative;overflow:hidden}
#login-screen .lp-appmap>img{width:100%;height:100%;object-fit:cover}
#login-screen .lp-maplayers{position:absolute;top:12px;right:12px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow);padding:10px 12px;font-size:.76rem;display:flex;flex-direction:column;gap:6px;min-width:168px}
#login-screen .lp-maplayers b{font-family:var(--font-display);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-navy-2)}
#login-screen .lp-maplayers label{display:flex;align-items:center;gap:7px}
#login-screen .lp-maplayers .lp-sw{margin-left:auto;width:26px;height:15px;border-radius:9px;background:#C6D0DB;position:relative}
#login-screen .lp-maplayers .lp-sw::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#fff}
#login-screen .lp-maplayers .lp-sw.lp-on{background:var(--accent-hover)}
#login-screen .lp-maplayers .lp-sw.lp-on::after{left:13px}
#login-screen .lp-maplayers i{width:14px;height:3px;border-radius:2px;display:block}
/* features*/
#login-screen section.lp-feat{padding:88px 0}
#login-screen section.lp-feat.lp-alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
#login-screen .lp-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center}
#login-screen .lp-split.lp-flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
#login-screen .lp-split.lp-flip .lp-copy{order:2}
#login-screen .lp-copy h2{font-size:2.3rem;font-weight:800;letter-spacing:-.02em;margin:10px 0 14px}
#login-screen .lp-copy>p{font-size:1.04rem;color:var(--text-muted);max-width:520px}
#login-screen .lp-ticks{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px}
#login-screen .lp-ticks li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem}
#login-screen .lp-ticks li svg{width:20px;height:20px;flex:none;color:var(--walked);margin-top:1px}
#login-screen .lp-ticks li b{font-weight:600}
#login-screen .lp-ticks li span{color:var(--text-muted)}
#login-screen .lp-note{display:flex;gap:9px;align-items:flex-start;margin-top:18px;font-size:.84rem;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;max-width:520px}
#login-screen .lp-feat.lp-alt .lp-note{background:#F7F9FB}
#login-screen .lp-note svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--text-muted)}
#login-screen .lp-sec-head{text-align:center;max-width:680px;margin:0 auto 48px}
#login-screen .lp-sec-head h2{font-size:2.3rem;font-weight:800;letter-spacing:-.02em;margin:10px 0 12px}
#login-screen .lp-sec-head p{font-size:1.04rem;color:var(--text-muted)}
/* previews*/
#login-screen .lp-stage{position:relative}
#login-screen .lp-mapcard{overflow:hidden;border-radius:var(--radius-lg)}
#login-screen .lp-mapcard img{width:100%;height:auto}
#login-screen .lp-float{position:absolute;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:11px 13px;font-size:.8rem}
#login-screen .lp-legend{display:flex;flex-direction:column;gap:6px}
#login-screen .lp-legend div{display:flex;align-items:center;gap:8px}
#login-screen .lp-legend i{width:18px;height:3.5px;border-radius:2px;display:block}
#login-screen .lp-legend i.lp-dash{background:repeating-linear-gradient(90deg,var(--type-walk) 0 6px,transparent 6px 10px)!important}
#login-screen .lp-routes{padding:6px 0}
#login-screen .lp-routes .lp-r{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border-soft)}
#login-screen .lp-routes .lp-r:last-child{border-bottom:0}
#login-screen .lp-routes .lp-r img{width:76px;height:54px;border-radius:8px;object-fit:cover;border:1px solid var(--border-soft)}
#login-screen .lp-routes .lp-r .lp-t{font-weight:600}
#login-screen .lp-routes .lp-r .lp-s{font-size:.78rem;color:var(--text-muted)}
#login-screen .lp-routes .lp-r .lp-g{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
#login-screen .lp-walked{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;color:var(--walked);background:#E7F5EE;border:1px solid #BFE3CF;border-radius:var(--radius-btn);padding:3px 8px;white-space:nowrap}
#login-screen .lp-walked svg{width:12px;height:12px}
#login-screen .lp-folder{display:flex;align-items:center;gap:8px;padding:12px 16px 8px;font-size:.78rem;color:var(--text-muted);font-weight:600;border-bottom:1px solid var(--border-soft)}
#login-screen .lp-folder svg{width:15px;height:15px}
#login-screen .lp-routeact{display:flex;gap:8px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--border-soft);background:var(--surface-2)}
#login-screen .lp-feed{display:flex;flex-direction:column;gap:16px}
#login-screen .lp-post{overflow:hidden}
#login-screen .lp-post .lp-h{display:flex;gap:11px;align-items:center;padding:14px 16px 6px}
#login-screen .lp-post .lp-h .lp-who{font-weight:700}
#login-screen .lp-post .lp-h .lp-meta{font-size:.78rem;color:var(--text-muted)}
#login-screen .lp-post .lp-title{font:700 1.06rem var(--font-display);padding:2px 16px 0}
#login-screen .lp-post .lp-nums{display:flex;gap:22px;padding:8px 16px 12px}
#login-screen .lp-post .lp-nums div{display:flex;flex-direction:column}
#login-screen .lp-post .lp-nums small{font-size:.68rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
#login-screen .lp-post .lp-nums b{font:700 1.02rem var(--font-display)}
#login-screen .lp-post .lp-pic{display:grid;grid-template-columns:2fr 1fr;gap:2px;border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
#login-screen .lp-post .lp-pic img{width:100%;height:200px;object-fit:cover}
#login-screen .lp-post .lp-pic .lp-col{display:grid;grid-template-rows:1fr 1fr;gap:2px}
#login-screen .lp-post .lp-pic .lp-col img{height:99px}
#login-screen .lp-post .lp-f{display:flex;align-items:center;gap:8px;padding:10px 12px}
#login-screen .lp-post .lp-f .lp-btn{padding:7px 11px;font-size:.8rem}
#login-screen .lp-post .lp-f .lp-names{font-size:.78rem;color:var(--text-muted)}
#login-screen .lp-kudos-on{color:#B23A0B!important;border-color:#F6BBA4!important;background:#FEF1EC!important}
#login-screen .lp-comment{display:flex;gap:10px;padding:10px 16px 14px;border-top:1px solid var(--border-soft);font-size:.84rem}
#login-screen .lp-comment b{font-weight:600}
#login-screen .lp-invite{display:flex;flex-direction:column;gap:10px;padding:16px}
#login-screen .lp-invite .lp-link{display:flex;gap:8px}
#login-screen .lp-invite .lp-link code{flex:1;font-size:.8rem;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-btn);padding:9px 10px;color:var(--text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#login-screen .lp-friendrow{display:flex;align-items:center;gap:-8px}
#login-screen .lp-friendrow img{border:2px solid #fff;margin-left:-8px}
#login-screen .lp-friendrow img:first-child{margin-left:0}
#login-screen .lp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
#login-screen .lp-tile{padding:14px 15px}
#login-screen .lp-tile small{display:block;font-size:.7rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.07em}
#login-screen .lp-tile b{display:block;font:800 1.65rem/1.1 var(--font-display);margin-top:6px}
#login-screen .lp-tile b span{font-size:.9rem;font-weight:700;color:var(--text-muted);margin-left:2px}
#login-screen .lp-tile .lp-d{font-size:.74rem;margin-top:4px;color:#17643F;font-weight:600}
#login-screen .lp-statgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;margin-top:12px}
#login-screen .lp-goal{padding:16px}
#login-screen .lp-goal .lp-bar{height:12px;border-radius:7px;background:var(--heat-0);position:relative;margin:12px 0 8px;overflow:visible}
#login-screen .lp-goal .lp-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:var(--accent-hover)}
#login-screen .lp-goal .lp-bar u{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--brand-navy);border-radius:1px}
#login-screen .lp-goal .lp-gl{display:flex;justify-content:space-between;font-size:.78rem;color:var(--text-muted)}
#login-screen .lp-cal{display:grid;grid-template-columns:repeat(26,11px);grid-template-rows:repeat(7,11px);grid-auto-flow:column;gap:3px;margin-top:14px}
#login-screen .lp-cal i{border-radius:2px;display:block}
#login-screen .lp-be{padding:16px}
#login-screen .lp-be table{width:100%;border-collapse:collapse;font-size:.84rem;margin-top:8px}
#login-screen .lp-be td{padding:7px 0;border-bottom:1px solid var(--border-soft)}
#login-screen .lp-be tr:last-child td{border-bottom:0}
#login-screen .lp-be td:nth-child(2){font:700 .95rem var(--font-display);text-align:right}
#login-screen .lp-be td:nth-child(3){text-align:right;color:var(--text-muted);font-size:.76rem;width:96px}
#login-screen .lp-pr{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.04em;color:#B23A0B;background:#FEF1EC;border:1px solid #F6BBA4;border-radius:4px;padding:1px 5px;margin-left:6px;vertical-align:1px}
#login-screen .lp-tri{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
#login-screen .lp-box{padding:26px 26px 22px;display:flex;flex-direction:column;gap:12px}
#login-screen .lp-box h3{font-size:1.32rem;font-weight:800}
#login-screen .lp-box>p{color:var(--text-muted)}
#login-screen .lp-icon{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft-solid);color:var(--accent-hover)}
#login-screen .lp-icon svg{width:22px;height:22px}
#login-screen .lp-srcs{display:flex;flex-direction:column;gap:8px;margin-top:4px}
#login-screen .lp-src{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2)}
#login-screen .lp-src .lp-lg{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:#fff;font:800 .8rem var(--font-display);flex:none}
#login-screen .lp-src b{display:block;font-size:.88rem}
#login-screen .lp-src span{font-size:.76rem;color:var(--text-muted)}
#login-screen .lp-src .lp-st{margin-left:auto;font-size:.72rem;font-weight:600;color:var(--walked);white-space:nowrap}
#login-screen .lp-term{background:#12374F;color:#DCE7F1;border-radius:var(--radius);padding:12px 14px;font:500 .78rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:hidden}
#login-screen .lp-term .lp-q{color:#9FD3F7}
#login-screen .lp-term .lp-a{color:#fff}
#login-screen .lp-term .lp-k{color:#F8B48A}
#login-screen .lp-scopes{display:flex;gap:6px;flex-wrap:wrap}
#login-screen .lp-phone-wrap{display:flex;justify-content:center;gap:28px;align-items:flex-end}
#login-screen .lp-phone{width:270px;border-radius:38px;background:#1B2430;padding:10px;box-shadow:0 24px 60px rgba(18,55,79,.24)}
#login-screen .lp-phone .lp-scr{border-radius:29px;overflow:hidden;background:#fff;height:540px;display:flex;flex-direction:column;position:relative}
#login-screen .lp-phone .lp-sb{height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;font-size:.66rem;font-weight:600;color:var(--text)}
#login-screen .lp-phone .lp-pbar{display:flex;align-items:center;gap:8px;padding:6px 14px 8px;border-bottom:1px solid var(--border-soft)}
#login-screen .lp-phone .lp-pbar b{font-family:var(--font-display);font-size:.98rem}
#login-screen .lp-phone .lp-pmap{flex:1;position:relative;overflow:hidden}
#login-screen .lp-phone .lp-pmap img{width:100%;height:100%;object-fit:cover}
#login-screen .lp-phone .lp-rec{position:absolute;right:12px;bottom:12px;background:var(--brand-orange);color:#fff;border-radius:var(--radius-round);padding:10px 15px;font:700 .8rem var(--font-display);display:flex;align-items:center;gap:7px;box-shadow:var(--shadow-lg)}
#login-screen .lp-phone .lp-rec i{width:9px;height:9px;border-radius:50%;background:#fff;display:block}
#login-screen .lp-phone .lp-rec{background:#C9400F}
#login-screen .lp-phone .lp-live{position:absolute;left:12px;top:12px;right:12px;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:9px 12px;display:flex;justify-content:space-between;font-size:.72rem}
#login-screen .lp-phone .lp-live b{display:block;font:800 1rem var(--font-display)}
#login-screen .lp-phone .lp-live small{color:var(--text-muted)}
#login-screen .lp-phone .lp-nav{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--border);padding:7px 2px 9px;background:#fff}
#login-screen .lp-phone .lp-nav div{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.6rem;color:var(--text-muted);font-weight:600}
#login-screen .lp-phone .lp-nav div svg{width:18px;height:18px}
#login-screen .lp-phone .lp-nav div.lp-on{color:var(--accent-hover)}
#login-screen .lp-toastn{position:absolute;left:10px;right:10px;top:34px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:10px 12px;display:flex;gap:10px;align-items:center;font-size:.72rem;z-index:2}
#login-screen .lp-toastn b{display:block;font-size:.76rem}
#login-screen .lp-privacy-card{padding:18px}
#login-screen .lp-pref{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-soft)}
#login-screen .lp-pref:last-of-type{border-bottom:0}
#login-screen .lp-pref .lp-t b{display:block;font-size:.9rem}
#login-screen .lp-pref .lp-t small{font-size:.76rem;color:var(--text-muted)}
#login-screen .lp-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-btn);background:var(--surface);padding:2px;gap:2px;flex:none}
#login-screen .lp-seg span{border-radius:4px;padding:6px 10px;font-size:.76rem;font-weight:600;color:var(--text)}
#login-screen .lp-seg span.lp-on{background:var(--brand-navy);color:#fff}
#login-screen .lp-seg.lp-locked span{color:var(--text-muted)}
#login-screen .lp-seg.lp-locked span.lp-on{background:#DDE3EA;color:var(--text)}
#login-screen .lp-zonemap{margin-top:14px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);position:relative}
#login-screen .lp-zonemap img{width:100%}
#login-screen .lp-zonemap .lp-lbl{position:absolute;font-size:.7rem;font-weight:600;background:#fff;border:1px solid var(--border);border-radius:var(--radius-btn);padding:3px 7px;box-shadow:var(--shadow-sm)}
#login-screen .lp-trust{background:var(--brand-navy);color:#fff;padding:64px 0}
#login-screen .lp-trust .lp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
#login-screen .lp-trust .lp-it svg{width:26px;height:26px;color:#9FD3F7}
#login-screen .lp-trust h3{font-size:1.08rem;margin:12px 0 6px;color:#fff}
#login-screen .lp-trust p{color:#C9D6E2;font-size:.9rem}
#login-screen .lp-trust .lp-lead2{font:800 1.9rem/1.15 var(--font-display);letter-spacing:-.02em;margin-bottom:36px;max-width:640px}
#login-screen .lp-cta{padding:88px 0;text-align:center}
#login-screen .lp-cta h2{font-size:2.3rem;font-weight:800;letter-spacing:-.02em}
#login-screen .lp-cta p{color:var(--text-muted);font-size:1.04rem;margin:12px auto 24px;max-width:560px}
#login-screen .lp-cta .lp-acts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
#login-screen footer{border-top:1px solid var(--border);background:var(--surface);padding:28px 0}
#login-screen footer .lp-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
#login-screen footer .lp-links{display:flex;gap:18px;margin-left:auto;font-size:.86rem}
#login-screen footer .lp-links a{color:var(--text-muted);text-decoration:none}
#login-screen footer .lp-links a:hover{color:var(--text);text-decoration:underline}
#login-screen footer small{color:var(--text-muted);font-size:.8rem}
@media (max-width:860px){
#login-screen .lp-wrap{padding:0 18px}
#login-screen .lp-top .lp-wrap{height:56px;gap:12px}
#login-screen .lp-top nav,#login-screen .lp-top .lp-pill-note{display:none}
#login-screen .lp-brand{font-size:.98rem}
#login-screen .lp-brand img{height:24px}
#login-screen .lp-hero .lp-wrap{grid-template-columns:1fr;gap:26px;padding-top:34px;padding-bottom:30px}
#login-screen .lp-hero h1{font-size:2.25rem}
#login-screen .lp-lead{font-size:1rem;margin-top:14px}
#login-screen .lp-hero-facts{margin-top:18px}
#login-screen .lp-signin{padding:22px 18px 18px}
#login-screen .lp-appbar .lp-tabs,#login-screen .lp-applist,#login-screen .lp-maplayers,#login-screen .lp-window .lp-chrome span{display:none}
#login-screen .lp-appbody{grid-template-columns:1fr;height:280px}
#login-screen .lp-appbar{height:44px}
#login-screen section.lp-feat{padding:56px 0}
#login-screen .lp-split,#login-screen .lp-split.lp-flip{grid-template-columns:1fr;gap:30px}
#login-screen .lp-split.lp-flip .lp-copy{order:0}
#login-screen .lp-copy h2,#login-screen .lp-sec-head h2,#login-screen .lp-cta h2{font-size:1.75rem}
#login-screen .lp-sec-head{margin-bottom:28px}
#login-screen .lp-stats{grid-template-columns:repeat(2,1fr)}
#login-screen .lp-statgrid{grid-template-columns:1fr}
#login-screen .lp-cal{grid-template-columns:repeat(26,1fr);grid-template-rows:repeat(7,auto);gap:2px}
#login-screen .lp-cal i{aspect-ratio:1}
#login-screen .lp-tri{grid-template-columns:1fr}
#login-screen .lp-box{padding:20px 18px}
#login-screen .lp-phone-wrap .lp-side{display:none}
#login-screen .lp-trust{padding:48px 0}
#login-screen .lp-trust .lp-grid{grid-template-columns:1fr;gap:22px}
#login-screen .lp-trust .lp-lead2{font-size:1.5rem;margin-bottom:24px}
#login-screen .lp-cta{padding:56px 0}
#login-screen .lp-float.lp-hide-m{display:none}
#login-screen .lp-post .lp-pic img{height:150px}
#login-screen .lp-post .lp-pic .lp-col img{height:74px}
#login-screen footer .lp-links{margin-left:0}
}