/* app.css — LKSA web app shell. Same palette family as the site
 * (styles.css) but an app-like layout: full-viewport view, bottom tab
 * bar, sheet overlay. Self-contained on purpose — the web app must not
 * depend on site CSS refactors (two-tier rule, docs/WEBAPP-PWA.md). */

:root {
  color-scheme: dark;
  --bg: #0b1320;
  --bg-soft: #101a2b;
  --surface: #132033;
  --surface-2: #17263d;
  --line: rgba(255, 255, 255, 0.10);
  --text: #eaf2fb;
  --muted: #a8bbcf;
  --accent: #44c2ff;
  --ok: #7ee081;
  --warn: #f5c04e;
  --bad: #f87171;
  --radius: 14px;
  --tabbar-h: 58px;
  --header-h: 50px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  overscroll-behavior-y: none;
  /* the app is always exactly the device width — any wide content must
     wrap or scroll inside its own container, never the whole page
     (strips like .day-chips / .hourly have their own overflow-x).
     `clip` where supported: unlike `hidden` it doesn't create a scroll
     container, so position:sticky (day tabs) keeps working. */
  overflow-x: hidden;
  overflow-x: clip;
}
a { color: var(--accent); text-decoration: none; }

/* header */
.wa-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex; align-items: center; gap: 0.6rem;
  /* PORTRAIT: line up with the app content gutter below (0.8rem, same
     as #view) — the notch is on top, nothing to clear sideways.
     LANDSCAPE: inset 40px left / 55px right (per Alan) to clear the
     camera cutout and rounded corners, or more if the device reports
     bigger safe areas. */
  padding-left: max(0.8rem, env(safe-area-inset-left));
  padding-right: max(0.8rem, env(safe-area-inset-right));
  background: rgba(11, 19, 32, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.wa-header { cursor: pointer; } /* whole bar = back-to-map touch target */
@media (orientation: landscape) {
  .wa-header {
    padding-left: max(40px, env(safe-area-inset-left));
    padding-right: max(55px, env(safe-area-inset-right));
  }
}
.wa-header img { height: 30px; width: auto; border-radius: 7px; }
.wa-header-x {
  margin-left: 0.55rem; flex-shrink: 0;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font: inherit; font-size: 1rem; cursor: pointer;
}
.wa-header .wa-title { font-weight: 700; font-size: 1.02rem; letter-spacing: 0.01em; }
.wa-header .wa-sub { color: var(--muted); font-size: 0.72rem; margin-left: auto; }

/* main view */
#view {
  padding: calc(var(--header-h) + env(safe-area-inset-top) + 8px) 0.8rem
           calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  max-width: 860px; margin: 0 auto;
}

/* bottom tab bar */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: rgba(11, 19, 32, 0.95);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.tab-btn {
  flex: 1; border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 0.68rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px 0;
}
.tab-btn .tab-ico { font-size: 1.25rem; line-height: 1; }
.tab-btn.tab-on { color: var(--accent); }

/* day chips */
.day-chips {
  display: flex; gap: 0.25rem; overflow-x: auto;
  /* top/side padding = badge headroom at the container edges */
  padding: 4px 2px 0.5rem;
  scrollbar-width: none;
  /* pinned: the day tabs stay put below the header while the page
     scrolls (and below the sheet grab-bar inside a spot sheet) */
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top));
  z-index: 450;
  background: var(--bg);
}
.sheet .day-chips { top: 0; background: var(--surface); }
.day-chips::-webkit-scrollbar { display: none; }

/* app-parity day pills: wind-tier tint, selection capsule, badges.
   The strip carries its own inner padding so corner badges (going pip,
   ★/✨) are never clipped by the scroll container's edges — on any
   screen width the first and last pills keep full badge headroom. */
.day-pill {
  border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  flex-shrink: 0; font: inherit;
  /* per-pill breathing room: badges overhang into THIS padding, not
     into a neighbour or the clipped container edge */
  padding: 4px 7px 0;
}
.day-caps { width: 34px; height: 4px; border-radius: 999px; }
.day-pill-body {
  position: relative; display: flex; flex-direction: column; align-items: center;
  min-width: 58px; padding: 5px 12px; border-radius: 8px; line-height: 1.25;
}
.day-l1 { font-size: 0.68rem; font-weight: 800; }
.day-l2 { font-size: 0.68rem; font-weight: 700; }
.day-badge {
  position: absolute; top: -7px; right: -6px; font-size: 11px; color: #ffd54a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.day-badge-great { font-size: 10px; }
.day-going {
  position: absolute; top: -8px; left: -7px;
  /* stretchy: grows with the number instead of clipping it */
  min-width: 17px; width: auto; height: 17px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: #fff;
  border: 1px solid #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); box-sizing: border-box;
  white-space: nowrap;
}
.chip {
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font: inherit; font-size: 0.8rem;
  padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.chip-on { background: var(--accent); color: #06121c; border-color: var(--accent); font-weight: 700; }
.chip-spot { font-size: 0.78rem; }
.chip-good { border-color: rgba(126, 224, 129, 0.5); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

/* map */
.wa-map {
  height: calc(100vh - var(--header-h) - var(--tabbar-h)
               - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 108px);
  min-height: 320px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-soft);
  /* Own stacking context: Leaflet's internal panes/controls use
     z-indexes up to ~1000, which otherwise escape the map box and sit
     ABOVE the tab bar (the OSM attribution was floating over the
     menu). With an isolated context, everything Leaflet stays inside
     the map rectangle, below all app chrome. */
  position: relative; z-index: 0;
}
.wa-marker { background: none; border: none; }
.mk-dot {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  /* dark disc behind the glyph — same as the site map's markers
     (spot-wind-map.js uses background:rgba(11,18,32,0.82)) */
  background: rgba(11, 18, 32, 0.82);
}
.mk-dot { line-height: 1; font-weight: 800; }
.mk-arrow { display: inline-block; }
.mk-school {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  border: 2.5px solid #2cc3ff; background: rgba(11, 19, 32, 0.7);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* layers popover */
.layers-wrap { position: relative; margin-bottom: 0.45rem; }
.layers-btn { font-size: 0.78rem; }
.layers-pop {
  /* above Leaflet's controls (z-index 1000), below the sheets (1200+) */
  display: none; position: absolute; top: 110%; left: 0; z-index: 1100;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 12px; padding: 0.6rem 0.85rem; min-width: 240px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
.layers-pop.open { display: block; }
.layers-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.layers-x {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: inherit; font-size: 0.85rem; border-radius: 8px;
  width: 30px; height: 30px; cursor: pointer; flex-shrink: 0;
}
@media (max-width: 640px), (pointer: coarse) {
  .layers-x { width: 38px; height: 34px; }
}
.layers-title {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); margin: 0.45rem 0 0.15rem;
}
.layers-pop .check-row { margin-top: 0.3rem; cursor: pointer; }

/* beach info card */
.beach-card .beach-row { margin-top: 0.5rem; font-size: 0.84rem; }
.beach-card summary { font-weight: 700; }

/* in-app spot page */
#spotpage-overlay {
  position: fixed; inset: 0; z-index: 1300; display: flex;
  flex-direction: column; background: var(--bg);
}
.spotpage-bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: calc(env(safe-area-inset-top) + 6px) 0.8rem 6px;
  border-bottom: 1px solid var(--line); background: var(--bg-soft);
}
.spotpage-bar .x-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font: inherit; font-size: 0.85rem; border-radius: 10px;
  padding: 0.35rem 0.7rem; cursor: pointer; width: auto; height: auto;
}
.spotpage-title { font-weight: 700; flex: 1; text-align: center; }
/* Dark canvas + explicit dark colour-scheme: the spot pages are
   dark-themed, so the frame must never flash (or fall back to) a white
   canvas — that made the page look unstyled/invisible in dark mode. */
.spotpage-frame { flex: 1; width: 100%; border: 0; background: var(--bg); color-scheme: dark; }
.mk-fav {
  position: absolute; top: -7px; right: -7px; font-size: 11px; color: #ffd54a;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
/* going-count pip on a map pin (app parity) — same royal blue as the
   day-pill going badge, top-left so it never collides with the ★ */
.mk-goingpip {
  position: absolute; top: -8px; left: -8px;
  min-width: 16px; height: 16px; padding: 0 3px; box-sizing: border-box;
  border-radius: 999px; background: #2f6fde; color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
/* Days-tab cards land below the pinned header when scrolled to */
.day-card { scroll-margin-top: calc(var(--header-h) + env(safe-area-inset-top) + 8px); }

/* headline strip (4a) */
.headline-strip {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 0.85rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 10px; padding: 0.55rem 0.75rem; margin: 0 0 0.6rem;
}
.headline-strip.static { cursor: default; }
/* one-line collapsed; touch to expand in place */
.headline-strip:not(.static):not(.open) {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* map toolbar: layers left, updated stamp far right */
.map-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; margin-bottom: 0.45rem;
}
.map-toolbar .layers-wrap { margin-bottom: 0; }
.updated-stamp { text-align: right; white-space: nowrap; }

/* status pill */
.status-pill {
  background: rgba(245, 192, 78, 0.12); color: var(--warn);
  border: 1px solid rgba(245, 192, 78, 0.4); border-radius: 10px;
  font-size: 0.78rem; padding: 0.45rem 0.7rem; margin-bottom: 0.6rem;
}

/* cards */
.day-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.85rem 0.95rem; margin-bottom: 0.8rem;
}
.day-card h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.wknd-card {
  border-left: 4px solid var(--line); background: var(--surface-2);
  border-radius: 10px; padding: 0.55rem 0.75rem; margin: 0.45rem 0;
}
.wknd-heading { font-weight: 700; font-size: 0.9rem; }
.wknd-summary { font-weight: 600; font-size: 0.84rem; margin-top: 2px; }
.wknd-narrative, .week-row { font-size: 0.84rem; color: var(--muted); margin-top: 0.3rem; }
details summary { cursor: pointer; color: var(--accent); font-size: 0.8rem; }

/* spot sheet */
#sheet-overlay {
  /* Above Leaflet's controls (z-index 1000 inside the map pane). */
  position: fixed; inset: 0; z-index: 1200; display: none;
  background: rgba(2, 8, 14, 0.6);
}
#sheet-overlay.open { display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  overscroll-behavior: contain; /* no scroll-chaining to the page/map */
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 18px 18px 0 0; width: 100%; max-width: 640px;
  max-height: 88vh; overflow-y: auto;
  padding: 0.5rem 1rem calc(1rem + env(safe-area-inset-bottom));
}
.sheet-grab {
  width: 44px; height: 5px; border-radius: 3px; background: var(--line);
  margin: 0.35rem auto 0.6rem; cursor: pointer;
}
.sheet-head { display: flex; align-items: flex-start; gap: 0.5rem; }
.sheet-head h2 { margin: 0; font-size: 1.15rem; }
.sheet-head .fav-btn, .sheet-head .x-btn {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: 1.05rem; border-radius: 10px; width: 38px; height: 38px; cursor: pointer;
}
.sheet-head .fav-btn { margin-left: auto; }
.sheet-head .fav-on { color: #ffd54a; border-color: rgba(255, 213, 74, 0.5); }

.verdict-card {
  border: 1px solid var(--line); border-left-width: 5px;
  border-radius: 12px; padding: 0.6rem 0.8rem; margin-top: 0.6rem;
  background: var(--surface);
}
.verdict-headline { font-weight: 700; font-size: 0.92rem; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.45rem; margin-top: 0.55rem; }
.kv-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.kv-value { font-size: 0.86rem; }
.caution { color: var(--warn); font-size: 0.8rem; margin-top: 0.45rem; }

.hourly { display: flex; gap: 3px; align-items: flex-end; margin: 0.7rem 0 0.2rem; overflow-x: auto; padding-bottom: 0.2rem; }
.hour-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 26px; }
.hour-bars { position: relative; height: 58px; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bar { width: 12px; border-radius: 3px 3px 0 0; position: absolute; bottom: 0; }
.bar-gust { background: rgba(68, 194, 255, 0.25); width: 16px; }
.bar-kt { background: var(--accent); }
.hour-kt { font-size: 0.62rem; margin-top: 2px; }
.hour-t { font-size: 0.58rem; color: var(--muted); }

.tides { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0; }
.tide-item {
  font-size: 0.75rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 8px; padding: 0.2rem 0.5rem;
}
.tide-primary { color: var(--text); border-color: var(--accent); }
.tide-win-chip {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  color: var(--ok); background: rgba(126, 224, 129, 0.1);
  border: 1px solid rgba(126, 224, 129, 0.35);
  border-radius: 8px; padding: 0.18rem 0.55rem;
}

.note-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.55rem 0.75rem; margin-top: 0.6rem; font-size: 0.85rem;
}
.note-title { font-weight: 700; font-size: 0.8rem; margin-bottom: 2px; }
.rating { color: #ffd54a; }

.link-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; }
.pill-link {
  border: 1px solid var(--line); border-radius: 999px; padding: 0.3rem 0.75rem;
  font-size: 0.78rem; background: var(--surface);
}
.going-inline { margin-top: 0.6rem; }
/* KitePool line on the spot sheet: no height while empty, breathing
   room once populated */
.kitepool-row:empty { display: none; }
.kitepool-row { margin: 0.7rem 0 0.35rem; padding: 0.15rem 0; }

/* active sewage / storm-overflow alerts — bottom of the spot page */
.alert-card {
  margin-top: 0.75rem; font-size: 0.82rem; color: var(--warn);
  background: rgba(245, 192, 78, 0.08);
  border: 1px solid rgba(245, 192, 78, 0.35);
  border-radius: 10px; padding: 0.55rem 0.75rem;
}
.alert-card div + div { margin-top: 0.3rem; }

/* going view */
.going-list { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.45rem; }
.going-row { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.going-count { font-weight: 700; }
.going-msg { min-height: 1.2em; margin-top: 0.4rem; color: var(--accent); }

/* legend sheet */
.map-toolbar .toolbar-left { display: flex; align-items: center; gap: 0.45rem; }
.map-toolbar .toolbar-right { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; }
/* Updated-stamp + ⌖ as one generous re-centre target */
.recenter-chip {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.42rem 0.7rem; min-height: 40px;
}
.recenter-chip .updated-stamp { pointer-events: none; }
.recenter-glyph { font-size: 1.15rem; line-height: 1; }
.legend-sheet { max-height: 82vh; border-radius: 18px; }
/* Legend/guide close: sticky top-right ✕ that stays visible while the
   sheet scrolls — essential when the card fills the whole screen. */
.sheet-close-row {
  position: sticky; top: -0.5rem; z-index: 6;
  display: flex; justify-content: flex-end;
  height: 0; overflow: visible;
}
/* sticky title row for legend/guide/this-week sheets: title left,
   ✕ right, in its OWN row — content scrolls underneath, and the
   button can never sit on top of table headers */
.sheet-head.sheet-sticky {
  position: sticky; top: -0.5rem; z-index: 6;
  background: var(--bg-soft); padding: 0.35rem 0 0.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.sheet-close-row .x-btn {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font: inherit; font-size: 0.95rem; border-radius: 50%;
  width: 34px; height: 34px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
/* phones / touch: bigger ✕ targets everywhere (+25% wide, +15% tall
   over the desktop sizes; the legend ✕ goes 55×51 from its 44 base) */
@media (max-width: 640px), (pointer: coarse) {
  .sheet-close-row .x-btn {
    width: 55px; height: 51px; font-size: 1.2rem; border-radius: 999px;
  }
  .sheet-head .x-btn, .sheet-head .fav-btn, .wa-header-x { width: 48px; height: 44px; }
  .trip-head .trip-x { width: 35px; height: 32px; }
  .spotpage-bar .x-btn { padding: 0.45rem 0.95rem; }
}
/* Legend (and kite-size guide) read as a centred card, not a bottom
   sheet — :has() is supported in all evergreen browsers; older ones
   gracefully keep the bottom-sheet position. */
#sheet-overlay.open:has(.legend-sheet) {
  align-items: center; padding: 1rem;
}
.leg-row { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.45rem; }
.leg-pin {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.leg-dot { width: 7px; height: 7px; border-radius: 50%; }
.leg-swatch { width: 26px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.leg-range { min-width: 74px; font-size: 0.88rem; }

/* kite-size guide + rider profile */
.profile-tag {
  font-size: 0.68rem; font-weight: 700; color: var(--accent);
  background: rgba(68, 194, 255, 0.15); border-radius: 999px;
  padding: 0.12rem 0.5rem; vertical-align: middle;
}
.ks-grid {
  display: grid; grid-template-columns: 1.1fr 1.3fr 1fr 1fr;
  /* custom profile adds a "You" column */
}
.ks-grid-5 {
  grid-template-columns: 1fr 1.1fr 0.9fr 0.9fr 1.1fr; font-size: 0.76rem;
  gap: 0.35rem 0.5rem; margin-top: 0.5rem; font-size: 0.82rem;
  align-items: baseline;
}
.ks-grid b { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ks-wind { font-weight: 700; }
.ks-current { color: var(--accent); font-weight: 700; }
.pastwind-out { margin-top: 0.5rem; min-height: 1.1em; }

/* overlapping-pin chooser — reads as a centred card (like the
   legend), not a bottom sheet: the tap that opened it was up on the
   map, so the choices belong mid-screen, not at the thumb edge. */
.chooser-sheet { max-height: 60vh; border-radius: 18px; }
#sheet-overlay.open:has(.chooser-sheet) {
  align-items: center; padding: 1rem;
}
.chooser-title { margin: 0 0 0.4rem; font-size: 1rem; }
.chooser-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 0.6rem; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--text); font: inherit;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 0.6rem 0.8rem; margin-top: 0.45rem;
}
.chooser-name { font-weight: 700; }
.chooser-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }

/* trips */
.trip-card { margin-top: 0.55rem; }
.trip-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.trip-head .trip-x {
  margin-left: auto; border: 1px solid var(--line); background: none;
  color: var(--muted); border-radius: 8px; width: 28px; height: 28px;
  font-size: 0.8rem; cursor: pointer;
}
.trip-badge { font-size: 0.75rem; font-weight: 600; color: var(--accent); }
.sched-time-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem; }
.time-input { width: auto; margin-top: 0; padding: 0.3rem 0.5rem; font-size: 0.95rem; font-weight: 700; }
.sched { margin-top: 0.5rem; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.sched-row {
  display: flex; justify-content: space-between; font-size: 0.84rem;
  padding: 0.32rem 0.7rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sched-row:last-child { border-bottom: none; }
.sched-row-hero { background: rgba(68, 194, 255, 0.1); font-weight: 700; }
.sched-knobs { margin-top: 0.45rem; }
.sched-knobs summary { font-size: 0.78rem; }
.knob-row { display: flex; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; }
.knob { display: flex; flex-direction: column; gap: 2px; }
.knob-input { width: 72px; margin-top: 0; padding: 0.3rem 0.45rem; font-size: 0.85rem; }

/* forms */
.input {
  width: 100%; margin-top: 0.5rem; padding: 0.55rem 0.7rem;
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font: inherit; font-size: 0.9rem;
}
.btn-row { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.primary-btn {
  background: var(--accent); color: #06121c; border: 0; font: inherit;
  font-weight: 700; font-size: 0.88rem; padding: 0.55rem 1rem;
  border-radius: 10px; cursor: pointer;
}
.primary-btn:disabled { opacity: 0.55; }
.ghost-btn {
  background: none; color: var(--muted); border: 1px solid var(--line);
  font: inherit; font-size: 0.85rem; padding: 0.55rem 1rem;
  border-radius: 10px; cursor: pointer;
}
.check-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; margin-top: 0.5rem; }

/* install help */
.install-sect { margin-top: 0.55rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.7rem; }
.install-sect summary { font-weight: 700; font-size: 0.88rem; cursor: pointer; color: var(--text); }
.install-sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-top: 0.55rem; }
.install-list { margin: 0.3rem 0 0.2rem; padding-left: 1.1rem; font-size: 0.84rem; }
.install-list li { margin-top: 0.25rem; }

/* onboarding tour */
#onboarding-overlay {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(2, 8, 14, 0.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.ob-card {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: 18px; max-width: 480px; width: 100%; max-height: 88vh;
  display: flex; flex-direction: column; padding: 1rem 1.1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.ob-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 0.7rem; }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.ob-dot.on { background: var(--accent); }
.ob-body { overflow-y: auto; flex: 1; }
.ob-body h2 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.ob-body p { margin: 0.4rem 0; }
.ob-bullet { display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 0.6rem; }
.ob-ico { font-size: 1.25rem; width: 30px; text-align: center; flex-shrink: 0; }
.ob-nav { display: flex; justify-content: space-between; margin-top: 0.9rem; }

/* sessions */
.session-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; gap: 0.6rem; text-align: left; cursor: pointer;
  background: none; color: var(--text); font: inherit; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.55rem 0.1rem;
}
.session-row:last-child { border-bottom: 0; }
.session-map {
  height: 260px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-soft); margin-bottom: 0.8rem;
  position: relative; z-index: 0;
}

/* gpx import progress */
.imp-progress { margin-top: 0.5rem; }
.imp-bar {
  height: 6px; border-radius: 3px; background: var(--surface-2);
  overflow: hidden; margin: 0.4rem 0;
}
.imp-bar-fill {
  height: 100%; width: 0; background: var(--accent);
  transition: width 0.25s ease; border-radius: 3px;
}
.imp-log { max-height: 180px; overflow-y: auto; overscroll-behavior: contain; }
.imp-line { margin-top: 0.25rem; word-break: break-word; }

/* session stats tables */
.pb-row { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.35rem; }
.pb-row .muted:first-child { min-width: 92px; }
/* sessions year filter + iOS-style Overview rows */
.year-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.year-pill {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 999px; padding: 0.28rem 0.75rem; font-size: 0.78rem; cursor: pointer;
}
.year-pill.on { background: var(--accent); color: #06121c; border-color: var(--accent); font-weight: 700; }
.ov-rows { margin-top: 0.35rem; }
.ov-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem;
  width: 100%; padding: 0.34rem 0; border: 0; border-bottom: 1px solid var(--line);
  background: none; color: var(--text); text-align: left; font: inherit;
}
.ov-row:last-child { border-bottom: 0; }
/* long values ("47.4 km · East Wittering (Jolliffe Rd)") wrap onto a
   second line instead of widening the page past the phone screen */
.ov-val { font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
button.ov-row { cursor: pointer; }
button.ov-row .ov-val { color: var(--accent); }
/* per-session progress bars (app KiteProgressView) */
.prog-rows { margin-top: 0.45rem; }
.prog-row {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  padding: 0.14rem 0; border: 0; background: none; color: var(--text);
  font: inherit; cursor: pointer; text-align: left;
}
.prog-date { flex: 0 0 52px; }
.prog-track {
  flex: 1; height: 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); overflow: hidden;
}
.prog-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.prog-val { flex: 0 0 62px; text-align: right; font-weight: 700; }
.agg-grid {
  display: grid; grid-template-columns: 1.5fr 0.6fr 0.9fr 0.8fr 0.6fr 0.8fr;
  gap: 0.3rem 0.5rem; margin-top: 0.5rem; font-size: 0.82rem; align-items: baseline;
}
.agg-grid b { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.agg-key { font-weight: 700; word-break: break-word; }

/* push-down refresh report (app RefreshReportView parity) */
.refresh-report {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 0.55rem 0.75rem; margin-top: 0.55rem;
  background: var(--bg-soft);
  animation: wa-pushdown 0.28s ease;
  overflow: hidden;
}
@keyframes wa-pushdown {
  from { opacity: 0; transform: translateY(-8px); max-height: 0; }
  to { opacity: 1; transform: none; max-height: 200px; }
}

/* transient feedback toast (Refresh now etc.) — body-level so it
   survives view re-renders */
.wa-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); border-radius: 999px; padding: 0.45rem 1.05rem;
  font-size: 0.82rem; font-weight: 600; z-index: 900; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* misc */
.muted { color: var(--muted); }
.small { font-size: 0.78rem; }
.centered { text-align: center; margin: 0.8rem 0; }
.empty {
  text-align: center; color: var(--muted); padding: 2.2rem 1rem; font-size: 0.9rem;
}

@media (min-width: 700px) {
  .tab-btn { flex-direction: row; gap: 8px; font-size: 0.8rem; }
}