/* Waypoint design system.
   Brand: varsity maroon on harbor ink; amber is reserved for heat/caution warnings.
   Every colour, size and gap below comes from these tokens — change them here, not in components. */
:root {
  /* colour */
  --brand: #7F1D2D;          /* varsity maroon: primary actions, active tab, serving badges */
  --brand-press: #64151F;
  --brand-tint: #F7E9EB;
  --on-brand: #FFFFFF;
  --ink: #14233A;            /* harbor ink: body text, map chips */
  --ink-2: #4A5668;          /* secondary text */
  --ink-3: #7C8696;          /* hints, placeholders */
  --page: #EEF0F3;           /* granite: grouped backgrounds inside sheets */
  --card: #FFFFFF;
  --line: #D9DDE3;
  --line-soft: #E8EBEF;
  --warn: #F7A21B;           /* foliage amber: heat and caution only */
  --warn-tint: #FEF3DC;
  --on-warn-tint: #6B4400;
  --on-warn: #14233A;
  --ok: #2E6B4F;             /* pine: "still there" confirmations */
  --ok-tint: #E6F2EC;
  --on-ok-tint: #1F4D38;
  --danger-tint: #F7E9EB;
  --on-danger-tint: #7F1D2D;
  --info-tint: #E8EFF8;
  --on-info-tint: #1D3A63;
  --bathroom: #7c3aed;       /* map data colours: match the pins drawn by map.js */
  --fountain: #0284c7;
  --route: #ea580c;          /* matches the route line drawn by map.js */
  --strava: #fc4c02;         /* Strava brand, used only on Strava actions */
  --scrim: rgba(20, 35, 58, .32);
  --shadow-1: 0 1px 2px rgba(20, 35, 58, .10), 0 2px 8px rgba(20, 35, 58, .10);
  --shadow-2: 0 8px 28px rgba(20, 35, 58, .20);

  /* type: one family, five steps */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --t-xs: 13px; --t-sm: 15px; --t-md: 17px; --t-lg: 22px; --t-xl: 34px;

  /* space: 4px base, 8px rhythm */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 22px;
  --tap: 48px;               /* minimum touch target */

  /* chrome */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --tab-h: 52px;               /* matches iOS's native tab bar */
  --tabbar: calc(var(--tab-h) + var(--safe-b));
  --ease: cubic-bezier(.2, .8, .2, 1);

  font-family: var(--font);
  font-size: var(--t-md);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #E07A8A;          /* maroon's dark-mode companion: same hue, readable on dark */
    --brand-press: #C9677A;
    --brand-tint: #3A1E25;
    --on-brand: #1A0B0F;
    --ink: #EEF1F5;
    --ink-2: #B5BDC9;
    --ink-3: #8691A1;
    --page: #0E1622;
    --card: #182333;
    --line: #2C3A4E;
    --line-soft: #233044;
    --warn-tint: #3A2B0E;
    --on-warn-tint: #FCD48A;
    --ok: #5FB98D;
    --ok-tint: #173528;
    --on-ok-tint: #A9E2C5;
    --danger-tint: #3A1E25;
    --on-danger-tint: #F4B4BE;
    --info-tint: #1A2A42;
    --on-info-tint: #B9D1F2;
    --scrim: rgba(0, 0, 0, .5);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-2: 0 8px 28px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--page); overscroll-behavior: none; }
/* App shell. Everything is positioned inside <body>, not pinned to the viewport: iOS 26 home-screen apps
   report a viewport (100%, 100dvh, innerHeight, position: fixed) about one status-bar height short, and
   only 100lvh measures the real screen. Sizing the page by 100lvh and anchoring to it fills the screen. */
@media (display-mode: standalone) { html { height: 100lvh; } }
body { position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body { -webkit-user-select: none; user-select: none; }
input, textarea, .notes, .stoplist, code { -webkit-user-select: text; user-select: text; }
#map { position: absolute; inset: 0; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; }
.ico { width: 1em; height: 1em; flex: 0 0 auto; display: inline-block; vertical-align: -.125em; }

/* Mapbox controls and attribution sit above the tab bar (attribution must stay visible). */
.mapboxgl-ctrl-bottom-right, .mapboxgl-ctrl-bottom-left { bottom: calc(var(--tabbar) + var(--s2)) !important; }
.mapboxgl-ctrl-bottom-right { right: var(--safe-r) !important; }
.mapboxgl-ctrl-bottom-left { left: var(--safe-l) !important; }
.mapboxgl-ctrl-group { border-radius: var(--r-sm) !important; box-shadow: var(--shadow-1) !important; }
.mapboxgl-ctrl-group button { width: 44px !important; height: 44px !important; }

/* ---------- Splash ---------- */
.splash { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: #E3E5E8; color: #7F1D2D; transition: opacity .35s var(--ease), visibility .35s; }
.splash.gone { opacity: 0; visibility: hidden; }
.splash-mark { display: grid; justify-items: center; gap: var(--s4); }
.splash-mark svg { width: 132px; height: 132px; }
.splash-word { font-size: var(--t-lg); font-weight: 700; letter-spacing: .01em; }

/* ---------- Tab bar ---------- */
.tabbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr);
  height: var(--tabbar); padding: 0 var(--safe-r) var(--safe-b) var(--safe-l);
  background: var(--card); border-top: 1px solid var(--line); }
.tab { border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--tap); font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--ink-3); }
.tab .pill { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background-color .2s var(--ease); }
.tab .ico { font-size: 24px; }
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] .pill { background: var(--brand); color: var(--on-brand); }
.tab:active .pill { transform: scale(.94); }
@media (min-width: 640px) { .tabbar { padding-left: calc(50% - 240px); padding-right: calc(50% - 240px); } }

/* ---------- Map chrome ---------- */
.topbar { position: absolute; z-index: 5; top: calc(var(--safe-t) + var(--s3)); left: calc(var(--safe-l) + var(--s3)); right: calc(var(--safe-r) + var(--s3));
  display: flex; flex-direction: column; align-items: center; gap: var(--s2); pointer-events: none; }
.filters { display: flex; gap: 2px; padding: 4px; background: var(--card); border-radius: 999px; box-shadow: var(--shadow-1); pointer-events: auto; }
.filters button { border: 0; background: transparent; min-height: 40px; padding: 0 var(--s4); border-radius: 999px; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--card); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px #fff; }
.dot-bathroom { background: var(--bathroom); }
.dot-fountain { background: var(--fountain); }

/* Map status pill: loading and empty states for the pins in view */
.map-status { transition: opacity .4s var(--ease); }
.map-status.fading { opacity: 0; }
.map-status { display: inline-flex; align-items: center; gap: var(--s2); padding: 8px 14px; border-radius: 999px; background: var(--card); color: var(--ink-2);
  font-size: var(--t-xs); font-weight: 600; box-shadow: var(--shadow-1); pointer-events: none; }
.map-status .spin { width: 14px; height: 14px; border-width: 2px; }

.fabs { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(var(--tabbar) + var(--s5)); display: flex; justify-content: center; pointer-events: none; }
.fab { pointer-events: auto; border: 0; min-height: 52px; padding: 0 22px; border-radius: 999px; background: var(--brand); color: var(--on-brand);
  font-weight: 700; font-size: var(--t-md); box-shadow: var(--shadow-2); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s2); }
.fab:active { background: var(--brand-press); transform: scale(.97); }
.fab .ico { font-size: 20px; }

/* Location-confirm crosshair: a pin whose tip sits on the map centre */
.crosshair { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -30px 0 0 -15px; pointer-events: none; }
.crosshair::before { content: ""; position: absolute; inset: 0; background: var(--pin, var(--ink)); border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: var(--shadow-2); }
.crosshair::after { content: ""; position: absolute; left: 12px; bottom: -4px; width: 6px; height: 6px; border-radius: 50%; background: rgba(20,35,58,.45); }

body.placing .fabs, body.placing .topbar, body.sheet-open .fabs, body.routing .fabs, body.sheet-open .map-status { display: none; }
/* Map filters only mean something on the map-led tabs. */
body[data-tab="fuel"] .topbar, body[data-tab="profile"] .topbar { display: none; }

/* ---------- Bottom sheet ---------- */
.sheet { position: absolute; z-index: 10; left: var(--safe-l); right: var(--safe-r); bottom: var(--tabbar);
  max-height: calc(100% - var(--tabbar) - var(--safe-t) - 56px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -6px 28px rgba(20,35,58,.16);
  padding: var(--s2) var(--s4) var(--s4); -webkit-user-select: none; user-select: none; }
@media (min-width: 640px) { .sheet { left: 50%; right: auto; width: 440px; margin-left: -220px; bottom: calc(var(--tabbar) + var(--s4)); border-radius: var(--r-lg); } }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto var(--s3); }
.sheet h2 { margin: 0 0 var(--s1); font-size: var(--t-lg); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: var(--s2); }
.sheet h2 .ico { color: var(--brand); }
.sheet .sub { margin: 0 0 var(--s4); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.4; }
.sheet .field { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); margin: var(--s4) 0 6px; }
.sheet textarea, .sheet input.text { width: 100%; min-height: var(--tap); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px;
  font: inherit; font-size: 17px; color: var(--ink); background: var(--card); }
.sheet textarea { min-height: 84px; resize: vertical; line-height: 1.4; }
.sheet textarea:focus, .sheet input.text:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.sheet ::placeholder { color: var(--ink-3); }

/* Screen-to-screen motion */
@keyframes sheet-in { from { transform: translateY(32px); opacity: 0; } }
@keyframes swap-in { from { opacity: 0; transform: translateX(14px); } }
.sheet.enter { animation: sheet-in .28s var(--ease); }
.sheet.swap > * { animation: swap-in .2s var(--ease); }
@media (prefers-reduced-motion: reduce) { .sheet.enter, .sheet.swap > * { animation: none; } .splash { transition: none; } }

.type-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.type-pick button { border: 1.5px solid var(--line); background: var(--card); border-radius: var(--r-md); min-height: 112px; padding: var(--s4) var(--s2);
  font-weight: 700; font-size: var(--t-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); }
.type-pick .ico { font-size: 32px; }
.type-pick button:active { border-color: var(--brand); background: var(--brand-tint); }

.row { display: flex; gap: var(--s3); margin-top: var(--s5); }
.btn { flex: 1; border: 0; border-radius: var(--r-md); min-height: var(--tap); padding: 12px 14px; font-weight: 700; font-size: var(--t-sm);
  background: var(--page); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); text-align: center; }
.btn:active { filter: brightness(.94); transform: scale(.985); }
.btn-primary, .btn-water { background: var(--brand); color: var(--on-brand); }
.btn-primary:active, .btn-water:active { background: var(--brand-press); filter: none; }
.btn-go { background: var(--ok); color: #fff; }
.btn-warn { background: var(--warn-tint); color: var(--on-warn-tint); }
.btn-danger { background: var(--danger-tint); color: var(--on-danger-tint); }
.btn-strava { background: var(--strava); color: #fff; }
.btn:disabled { opacity: .45; cursor: default; transform: none; filter: none; }
.link { border: 0; background: none; min-height: 44px; padding: 0 2px; color: var(--brand); font-size: var(--t-sm); font-weight: 600; }
.feedback-link { margin: var(--s3) 0 0; text-align: center; }
.feedback-link .link { display: inline-flex; align-items: center; text-decoration: none; }
.wide { display: flex; width: 100%; margin-top: var(--s3); }

.switch { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap); margin-top: var(--s3); font-weight: 600; font-size: var(--t-sm); }
.switch input { width: 46px; height: 28px; accent-color: var(--brand); }
.months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: var(--s2); }
.months button { border: 1.5px solid var(--line); background: var(--card); border-radius: var(--r-sm); min-height: 44px; font-size: var(--t-xs); font-weight: 600; }
.months button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

.photo-pick { display: flex; align-items: center; gap: var(--s3); }
.photo-pick img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); }
.photo-pick input { display: none; }
.photo-pick label.btn { flex: 0 0 auto; }

/* ---------- Amenity detail ---------- */
.badge { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; color: #fff; }
.badge-bathroom { background: var(--bathroom); }
.badge-water_fountain { background: var(--fountain); }
.type-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; flex: 0 0 auto; }
.type-mark .ico { color: #fff; font-size: 20px; }
.type-bathroom { background: var(--bathroom); }
.type-water_fountain { background: var(--fountain); }
.detail-photo { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--r-md); margin: var(--s2) 0 var(--s3); }
.notes { font-size: var(--t-md); line-height: 1.45; margin: 0 0 var(--s3); white-space: pre-wrap; }
.meta { font-size: var(--t-xs); color: var(--ink-2); margin: var(--s1) 0; line-height: 1.45; }
.meta.warn { color: var(--on-warn-tint); background: var(--warn-tint); border-radius: var(--r-sm); padding: 8px 10px; font-weight: 600; }
.meta a { color: inherit; }

.toast { position: absolute; z-index: 40; left: 50%; top: calc(var(--safe-t) + 64px); transform: translate(-50%, -10px); background: var(--ink); color: var(--card);
  padding: 12px 18px; border-radius: 999px; font-size: var(--t-sm); font-weight: 600; opacity: 0; transition: opacity .2s, transform .2s var(--ease);
  pointer-events: none; max-width: calc(100vw - 32px); text-align: center; box-shadow: var(--shadow-2); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--brand); color: var(--on-brand); }

.no-token { position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; text-align: center; background: var(--page); padding: var(--s5); }
.no-token h1 { font-size: var(--t-lg); margin: 0 0 var(--s2); }

/* ---------- Loading and empty states ---------- */
.spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; display: inline-block; animation: spin .7s linear infinite; flex: 0 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.sk { display: block; border-radius: 8px; background: var(--line-soft); position: relative; overflow: hidden; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: shimmer 1.2s infinite; }
@media (prefers-color-scheme: dark) { .sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after, .spin { animation: none; } }
.sk-line { height: 14px; margin: 8px 0; }
.sk-card { height: 64px; border-radius: var(--r-md); margin: 8px 0; }
.empty { text-align: center; padding: var(--s5) var(--s4); color: var(--ink-2); }
.empty .ico { font-size: 36px; color: var(--ink-3); }
.empty strong { display: block; color: var(--ink); font-size: var(--t-md); margin: var(--s2) 0 var(--s1); }
.empty p { margin: 0; font-size: var(--t-sm); line-height: 1.45; }

/* ---------- Route planner ---------- */
.route-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.route-head h2 { margin: 0; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: var(--s1) 0 var(--s3); }
.stats > div { background: var(--page); border-radius: var(--r-md); padding: var(--s3) var(--s2); text-align: center; }
.stats strong { display: block; font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stats span { font-size: 12px; color: var(--ink-2); }
.pace { width: 3.8em; font: inherit; font-size: 13px; font-weight: 700; text-align: center; border: 1.5px solid var(--line); border-radius: 6px; padding: 3px 0; color: var(--ink); background: var(--card); }
.pace.invalid { border-color: var(--brand); color: var(--brand); }
.stops { display: flex; gap: 6px; overflow-x: auto; padding-bottom: var(--s1); scrollbar-width: none; }
.stop { flex: 0 0 auto; font-size: var(--t-xs); font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--page); font-variant-numeric: tabular-nums; }
.stop-bathroom { box-shadow: inset 0 0 0 1.5px var(--bathroom); }
.stop-water_fountain { box-shadow: inset 0 0 0 1.5px var(--fountain); }
.tools { margin-top: var(--s3); }
.tools .btn { padding: 10px 8px; font-size: 14px; }
.route-actions { margin-top: var(--s3); }

/* Map-side screens: the map is the workspace, so sheets there stay short and the route panel compact. */
body[data-tab="map"] .sheet, body[data-tab="routes"] .sheet { max-height: min(calc(100% - var(--tabbar) - var(--safe-t) - 56px), 58%); }
body.routing .sheet { padding-top: 6px; padding-bottom: var(--s3); }
body.routing .grabber { margin-bottom: var(--s2); }
.rp-head { display: flex; align-items: center; gap: var(--s3); min-height: 44px; }
.rp-hint { flex: 1; margin: 0; font-size: var(--t-md); font-weight: 600; line-height: 1.3; }
.rp-stats { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px var(--s4); font-size: 13px; color: var(--ink-2); }
.rp-stats strong { font-size: var(--t-lg); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-right: 4px; }
.rp-stats .pace { margin: 0 3px; }
.rp-sub { margin: 2px 0 0; font-size: var(--t-xs); color: var(--ink-2); line-height: 1.4; }
.icon-btn { flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--page); color: var(--ink); display: grid; place-items: center; }
.icon-btn .ico { font-size: 20px; }
.icon-btn:active { filter: brightness(.92); }
body.routing .stops { margin-top: var(--s2); }
.rp-tools { display: flex; gap: var(--s2); margin-top: var(--s3); }
.rp-tools .btn { min-height: 44px; padding: 0 var(--s3); font-size: var(--t-sm); border-radius: var(--r-sm); }
.rp-tools .btn .ico { font-size: 17px; }
.rp-actions { margin-top: var(--s2); }
.sheet code { font-size: 13px; background: var(--page); padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.guide { margin: var(--s4) 0 var(--s1); padding-left: 22px; line-height: 1.5; font-size: var(--t-sm); }
.guide li { margin-bottom: var(--s2); }
.guide a { color: var(--strava); font-weight: 700; }
.wp { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--route); border: 3px solid var(--route); display: grid; place-items: center;
  font-size: 11px; font-weight: 800; box-shadow: 0 2px 6px rgba(20,35,58,.3); font-family: var(--font); }
.wp-start { background: var(--route); color: #fff; }
.stoplist { white-space: pre-wrap; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--page); border-radius: var(--r-sm); padding: 10px 12px; margin: var(--s2) 0 0; max-height: 140px; overflow-y: auto; }
.tip { font-size: var(--t-xs); color: var(--ink-2); background: var(--page); border-radius: var(--r-sm); padding: 10px 12px; margin: var(--s2) 0 0; line-height: 1.45; }

/* ---------- Hydration advisor: form ---------- */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; }
.hm { display: flex; align-items: center; gap: 6px; }
.hm input { width: 100%; }
.hm span { font-size: var(--t-xs); color: var(--ink-2); }
.hint { font-weight: 400; color: var(--ink-2); font-size: var(--t-xs); line-height: 1.45; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--page); border-radius: var(--r-md); }
.seg button { border: 0; background: transparent; border-radius: var(--r-sm); min-height: 44px; font-weight: 600; font-size: var(--t-sm); color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
.seg.two { grid-template-columns: 1fr 1fr; }
.known { margin-top: var(--s4); font-size: var(--t-sm); }
.known summary { cursor: pointer; font-weight: 600; color: var(--brand); min-height: 44px; display: flex; align-items: center; }
.known .hint { margin: 6px 0 0; }
.my-products { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s4); padding: var(--s3) var(--s4); background: var(--page); border-radius: var(--r-md); }
.my-products .field { margin: 0 0 2px; }
.my-products-summary { font-size: var(--t-sm); font-weight: 600; }
.my-products .btn { flex: 0 0 auto; padding: 0 18px; background: var(--card); box-shadow: var(--shadow-1); }

/* ---------- Hydration advisor: plan ---------- */
.plan-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin: var(--s1) 0 var(--s2); }
.plan-head > div { background: var(--page); border-radius: var(--r-md); padding: var(--s3) var(--s2); text-align: center; }
.plan-head strong { display: block; font-size: var(--t-lg); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.plan-head span { font-size: 12px; color: var(--ink-2); }
.phase { border-top: 1px solid var(--line-soft); padding-top: var(--s4); margin-top: var(--s4); }
.phase h3 { margin: 0 0 var(--s2); font-size: var(--t-md); font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: var(--s2); }
.phase h3 .ico { color: var(--brand); font-size: 20px; }
.phase p { margin: 0 0 var(--s2); font-size: var(--t-sm); line-height: 1.45; }
.phase .k, .k { font-size: var(--t-xs); color: var(--ink-2); }
.alert { display: flex; gap: var(--s2); align-items: flex-start; border-radius: var(--r-md); padding: var(--s3); font-size: var(--t-sm); line-height: 1.45; margin: var(--s2) 0;
  background: var(--warn-tint); color: var(--on-warn-tint); }
.alert::before { content: ""; flex: 0 0 18px; height: 18px; margin-top: 1px; background: currentColor;
  -webkit-mask: url('/icons/ui/alert.svg') center / contain no-repeat; mask: url('/icons/ui/alert.svg') center / contain no-repeat; }
.alert-danger, .alert-extreme_danger { background: var(--warn); color: var(--on-warn); font-weight: 600; }
.alert-overdrinking { background: var(--info-tint); color: var(--on-info-tint); }

/* Serving cards — built to be read at arm's length, mid-stride */
.servings { list-style: none; margin: var(--s2) 0 var(--s3); padding: 0; display: grid; gap: var(--s2); }
.sv { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: center; padding: var(--s3); background: var(--card);
  border: 1.5px solid var(--line-soft); border-radius: var(--r-md); }
.sv-qty { display: grid; place-items: center; min-width: 64px; height: 64px; padding: 0 var(--s2); border-radius: var(--r-md); background: var(--brand); color: var(--on-brand);
  font-size: var(--t-xl); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1; align-content: center; gap: 3px; }
.sv-qty small { font-size: 11px; font-weight: 600; letter-spacing: .01em; opacity: .9; }
.sv-body { display: grid; gap: 2px; min-width: 0; }
.sv-name { font-size: var(--t-md); font-weight: 700; line-height: 1.25; }
.sv-when { font-size: var(--t-sm); color: var(--ink); line-height: 1.35; }
.sv-meta { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.4; }
.servings.alts .sv + .sv { position: relative; margin-top: 18px; }
.servings.alts .sv + .sv::before { content: "or"; position: absolute; top: -21px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--ink-3); }
.target { font-size: var(--t-sm); margin: var(--s3) 0 0; }
.caffeine { font-size: var(--t-sm); line-height: 1.45; background: var(--page); color: var(--ink); border-radius: var(--r-md); padding: var(--s3); margin: var(--s4) 0 0; }
.disclaimer { font-size: 12px; color: var(--ink-2); line-height: 1.45; margin: var(--s3) 0 0; }

/* ---------- My products (fuel profile) ---------- */
.tabs { margin-bottom: var(--s1); position: sticky; top: calc(-1 * var(--s2)); z-index: 2; box-shadow: 0 0 0 var(--s2) var(--card); }
.tabs button { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.tabs .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; font-size: 12px; background: var(--brand); color: var(--on-brand); }
.tabs .count:empty { display: none; }
.pick-group { margin: var(--s5) 0 var(--s2); font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.pick { width: 100%; display: flex; gap: var(--s3); align-items: flex-start; text-align: left; border: 1.5px solid var(--line); background: var(--card);
  border-radius: var(--r-md); padding: var(--s3); min-height: var(--tap); }
.pick[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); }
.pick .check { flex: 0 0 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line); display: grid; place-items: center; font-weight: 800; color: var(--on-brand); font-size: 15px; margin-top: 1px; background: var(--card); }
.pick[aria-pressed="true"] .check { background: var(--brand); border-color: var(--brand); }
.pick-text { display: grid; gap: 3px; min-width: 0; }
.pick-name { font-size: var(--t-sm); line-height: 1.3; }
.pick-serving { font-size: var(--t-xs); color: var(--ink); line-height: 1.35; }
.pick-facts { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.pick-note { font-size: 12px; color: var(--on-warn-tint); background: var(--warn-tint); border-radius: 6px; padding: 3px 7px; width: fit-content; }
.pick-row { display: flex; align-items: stretch; gap: 4px; }
.pick-row .pick { flex: 1; min-width: 0; }
.pick-edit { flex: 0 0 auto; padding: 0 var(--s2); }
.badge-src { display: inline-block; width: fit-content; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-top: 3px; vertical-align: middle; }
.badge-verified { background: var(--ok-tint); color: var(--on-ok-tint); }
.badge-user { background: var(--warn-tint); color: var(--on-warn-tint); }
.add-product { margin: var(--s3) 0 var(--s1); border: 1.5px dashed var(--line); background: var(--card); color: var(--brand); }
.req { font-weight: 700; font-size: 11px; color: var(--brand); }
.sticky-actions { position: sticky; bottom: calc(-1 * var(--s4)); z-index: 2; background: var(--card); padding: var(--s3) 0 var(--s4); margin-bottom: calc(-1 * var(--s4)); border-top: 1px solid var(--line-soft); }

/* ---------- Profile (settings) and Strava lists ---------- */
.sheet h3.section { margin: var(--s5) 0 var(--s2); font-size: var(--t-sm); font-weight: 700; color: var(--ink-2); }
.strava-connect { border: 0; padding: 0; background: none; display: block; line-height: 0; cursor: pointer; min-height: var(--tap); }
.strava-connect img { height: 48px; width: auto; }
.strava-connect:disabled { opacity: .6; }
.status-line { margin: 0 0 var(--s1); font-weight: 600; display: flex; align-items: center; gap: var(--s2); }
.dot-on { background: var(--ok); box-shadow: none; }
.sroutes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.sroutes li { border-bottom: 1px solid var(--line-soft); }
.sroutes button { width: 100%; text-align: left; border: 0; background: none; min-height: 60px; padding: var(--s3) 2px; display: flex; flex-direction: column; justify-content: center; gap: 3px; font: inherit; color: var(--ink); }
.sroutes button:active { background: var(--page); }
.sroutes button:disabled { opacity: .6; }
.sr-name { font-weight: 700; font-size: var(--t-sm); }
.sr-meta { font-size: var(--t-xs); color: var(--ink-2); }
.strava-link { color: var(--strava); font-weight: 700; }
.sroutes li.act { padding: var(--s3) 2px; display: flex; flex-direction: column; gap: var(--s1); }
.act-plan { font-size: var(--t-xs); color: var(--ink); display: flex; flex-wrap: wrap; gap: 0 var(--s3); align-items: center; }
.act-attach { align-self: flex-start; }
.plan-pick { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.plan-pick .btn { justify-content: flex-start; text-align: left; font-size: 14px; font-weight: 600; }
.plan-pick .link { align-self: flex-start; }
.act-share { align-self: flex-start; flex: 0 0 auto; padding: 0 16px; font-size: 14px; margin-top: var(--s1); }
.act-shared { font-size: var(--t-xs); font-weight: 700; color: var(--strava); }

/* ---------- Map chrome: glass bars + draggable sheet ----------
   Checked over live street and satellite tiles, light and dark (Oct 2026). The html prefix keeps these
   rules ahead of the earlier, plainer ones in the cascade.

   Glass opacity is set by worst-case maths, not by eye: composited over a pure-white or pure-black tile,
   --ink and --ink-2 text keep >= 4.5:1 (light .84 → 5.1:1 worst for --ink-2; dark .86 → 5.4:1). --ink-3 does
   not, so text on glass never uses it. The blur is a finish; the opacity is what makes text readable.
   The sheet stays solid: its small grey hints would need ~98% opacity to stay as readable as they are today. */
:root { --glass: rgba(255, 255, 255, .84); --glass-edge: rgba(20, 35, 58, .10); --glass-blur: saturate(180%) blur(20px); --sheet-visible: 0px; }
@media (prefers-color-scheme: dark) { :root { --glass: rgba(24, 35, 51, .86); --glass-edge: rgba(255, 255, 255, .09); } }

html .tabbar { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-top: 0; box-shadow: 0 -.5px 0 var(--glass-edge); }
html .tab { color: var(--ink-2); }
html .tab[aria-current="page"] { color: var(--ink); }
html .filters, html .map-status { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-1), inset 0 0 0 .5px var(--glass-edge); }
html .filters button[aria-pressed="false"] { color: var(--ink); }
/* No blur support (rare): fall back to the solid colours rather than see-through text. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html .tabbar, html .filters, html .map-status { background: var(--card); }
}

/* The sheet: JS sets its height (peek · half · full); CSS only animates it. */
html body .sheet { max-height: none; overflow-y: auto; }
html .sheet.settling { transition: height .32s var(--ease); }
html body.sheet-peek .sheet { overflow: hidden; }
html .sheet .peek-head ~ * { transition: opacity .2s var(--ease); }
html body.sheet-peek .sheet .peek-head ~ * { opacity: 0; visibility: hidden; }
html .sheet .grabber { display: block; position: relative; width: calc(100% + 2 * var(--s4)); height: 24px; margin: calc(-1 * var(--s2)) calc(-1 * var(--s4)) var(--s1);
  padding: 0; border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: none; cursor: grab; touch-action: none; }
html .sheet .grabber::before { content: ''; position: absolute; left: 50%; top: 9px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--line); }
html body.sheet-dragging .sheet .grabber { cursor: grabbing; }
html .sheet [data-peek] { touch-action: none; }
html body.routing .grabber { margin-bottom: 0; }
.detail-head h2 { margin-bottom: 2px; }
.detail-head .meta { margin-top: 0; }

/* Mapbox logo + attribution ride just above whatever is lowest: the tab bar or the sheet's top edge. */
html .mapboxgl-ctrl-bottom-right, html .mapboxgl-ctrl-bottom-left {
  bottom: calc(var(--tabbar) + var(--sheet-visible) + var(--s2)) !important; transition: bottom .32s var(--ease); }
html body.sheet-dragging .mapboxgl-ctrl-bottom-right, html body.sheet-dragging .mapboxgl-ctrl-bottom-left { transition: none; }
/* At full height there's only a strip of map left: the filters and the locate button step aside for the attribution. */
html body.sheet-full .topbar { opacity: 0; pointer-events: none; }
html body.sheet-full .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group { display: none; }
@media (prefers-reduced-motion: reduce) { html .sheet.settling, html .mapboxgl-ctrl-bottom-right, html .mapboxgl-ctrl-bottom-left { transition: none; } }