/* Whimsy Bike (Victoria Bike Map) — iOS-style look: frosted panels, filled controls, system blue
   accents, Material Symbols icons. */
:root {
  /* iOS motion: the curve of its sheets and panels (fast out, long soft settle) */
  --ease-ios: cubic-bezier(.32, .72, 0, 1);
  --label: #1C1C1E;
  /* Text and control colours pass WCAG AA (4.5:1 text, 3:1 icons) on the frosted
     panels and their grey fills: iOS's own values are a little too light for that */
  --secondary: rgba(60, 60, 67, 0.8);
  --tertiary: rgba(60, 60, 67, 0.6);
  --fill: rgba(118, 118, 128, 0.12);
  --fill-strong: rgba(118, 118, 128, 0.2);
  --separator: rgba(60, 60, 67, 0.14);
  --accent: #0062CC;              /* text, icons and outlines */
  --accent-fill: #0062CC;         /* backgrounds under white text */
  --red: #C4001A;
  --focus: #0062CC;               /* keyboard focus ring */
  --material: rgba(255, 255, 255, 0.84);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
  --bg: #F2F2F7;                 /* page behind the map */
  --surface: #FFFFFF;            /* solid cards, dialogs */
  --selected: #FFFFFF;           /* the chosen segment of a segmented control */
  --material-strong: rgba(255, 255, 255, 0.94);
  --ink: #1C1C1E;                /* dark fills that stay dark (map pins, tooltips) */
  --ok: #1B7330; --warn: #C93400; --bad: #C4001A; --green-label: #1B7330;
  --arrived: #1B7330;
  /* kept for older rules */
  --text: var(--label);
  --muted: var(--secondary);
  --border: var(--separator);
  --panel-bg: var(--material);
}
/* Night mode (js/theme.js sets data-theme from the setting or the system): iOS dark colours */
:root[data-theme="dark"] {
  --label: #FFFFFF;
  --secondary: rgba(235, 235, 245, 0.62);
  --tertiary: rgba(235, 235, 245, 0.5);
  --fill: rgba(118, 118, 128, 0.24);
  --fill-strong: rgba(118, 118, 128, 0.36);
  --separator: rgba(84, 84, 88, 0.6);
  --accent: #64ACFF;
  --accent-fill: #0064D2;
  --red: #FF7A72;
  --focus: #64ACFF;
  --material: rgba(30, 30, 32, 0.84);
  --material-strong: rgba(30, 30, 32, 0.95);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);
  --bg: #000000;
  --surface: #2C2C2E;
  --selected: #636366;
  --ink: #3A3A3C;
  --ok: #30D158; --warn: #FF9F0A; --bad: #FF6961; --green-label: #7FC58C;
}
:root[data-theme="dark"] .maplibregl-popup-content { background: var(--surface); color: var(--label); }
:root[data-theme="dark"] .maplibregl-popup-anchor-top .maplibregl-popup-tip,
:root[data-theme="dark"] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
:root[data-theme="dark"] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface); }
:root[data-theme="dark"] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
:root[data-theme="dark"] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
:root[data-theme="dark"] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface); }
:root[data-theme="dark"] .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
:root[data-theme="dark"] .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
:root[data-theme="dark"] .maplibregl-popup-close-button { color: var(--secondary); }
:root[data-theme="dark"] .maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib { background: rgba(30, 30, 32, 0.7); color: var(--secondary); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib a { color: var(--secondary); }
:root[data-theme="dark"] .maplibregl-ctrl-attrib-button { filter: invert(1); }

html, body { margin: 0; height: 100%; background: var(--bg); color: var(--label);
  font: 0.875rem/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
#map { position: absolute; inset: 0; }
.icon { display: block; flex: none; }

/* Frosted glass surfaces */
.panel, .route-panel, .fab, .suggestions, .maplibregl-ctrl-group {
  background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

/* ---- Layers panel ---------------------------------------------------- */
/* Layers: bottom-left on every screen (opens upward), as on phones */
.panel { position: absolute; bottom: 10px; left: 10px; z-index: 2; border-radius: 16px; box-shadow: var(--shadow);
  padding: 12px 14px; max-width: 340px; max-height: calc(100% - 80px); overflow-y: auto; box-sizing: border-box; }
/* Open, the Layers panel keeps one width (its rows are short now; the map styles and data views
   need the room), within the phone's own limit below */
.panel:not(.collapsed) { width: 340px; }
.panel h1 { font-size: 1.0625rem; font-weight: 600; margin: 0; white-space: nowrap; letter-spacing: -0.01em; }
.panel h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--secondary);
  margin: 14px 0 6px; font-weight: 500; }
.legend-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0;
  padding: 0; border: 0; background: none; font: inherit; color: var(--label); text-align: left; cursor: pointer; }
.legend-title { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.legend-title h1 { color: var(--label); }
.legend-head .chevron { color: var(--tertiary); transition: transform .2s ease; }
/* A foldable section of the Layers panel (Places) */
.section-head { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin: 2px 0 0;
  padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.section-head h2 { margin: 0; }
.section-head .chevron { color: var(--tertiary); transition: transform .2s ease; }
.section-head[aria-expanded="false"] .chevron { transform: rotate(-90deg); }
.panel.collapsed .legend-head .chevron { transform: rotate(-90deg); }
.panel.collapsed .body { display: none; }
.legend-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.legend-row .label { flex: 1; }
.swatch { flex: none; width: 28px; height: 5px; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 2.5px rgba(0,0,0,.08); }
/* Marks (× and arrows) need more height than a plain line, and no halo */
.legend-row[data-code="DC"] .swatch { height: 9px; border-radius: 0; box-shadow: none; }
.icon-swatch { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  margin: 0 4px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--surface), 0 0 0 2.5px rgba(0,0,0,.08); }
.icon-swatch svg { width: 13px; height: 13px; }
.icon-letter { color: #fff; font: 700 12px/1 -apple-system, system-ui, sans-serif; }
.toggle-row { cursor: pointer; user-select: none; }
.route-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bus-route-row { margin: 2px 0; }
.toggle-row input { margin: 0; accent-color: var(--accent); width: 16px; height: 16px; }
/* Off: the icon fades; the name only greys (faded text would be too faint to read) */
.toggle-row:has(input:not(:checked)) .icon-swatch { opacity: .4; }
.toggle-row:has(input:not(:checked)) .label { color: var(--secondary); }

/* ---- iOS segmented controls (map style, route preference) ------------ */
.map-styles, .profiles, .segmented { display: flex; gap: 2px; padding: 2px; background: var(--fill); border-radius: 9px; }
.map-styles button, .profiles button, .segmented button { flex: 1; min-width: 0; overflow-wrap: anywhere; border: 0; background: transparent; border-radius: 7px; padding: 6px 4px;
  font: inherit; font-size: 0.8125rem; font-weight: 500; color: var(--label); cursor: pointer; transition: background .15s; }
.map-styles button[aria-checked="true"], .profiles button[aria-checked="true"], .segmented button[aria-checked="true"] { background: var(--selected); font-weight: 600;
  box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
.profiles { margin-top: 8px; }

/* ---- Buttons ----------------------------------------------------------- */
.btn { border: 0; background: var(--fill); color: var(--accent); border-radius: 10px; padding: 8px 14px;
  font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
.btn:hover:not(:disabled) { background: var(--fill-strong); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent-fill); color: #fff; }
/* Destructive action, iOS style: system red text and outline */
.btn-destructive { color: var(--red); background: transparent; box-shadow: inset 0 0 0 1.5px var(--red); }
.btn-destructive:hover:not(:disabled) { background: rgba(255, 59, 48, 0.08); }
.btn[aria-pressed="true"] { background: var(--accent-fill); color: #fff; }
.link-btn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 6px 2px;
  font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--accent); cursor: pointer; }
.icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  padding: 0; border: 0; background: transparent; border-radius: 10px; cursor: pointer; color: var(--accent); }
.icon-btn:hover { background: var(--fill); }

/* Floating round buttons: location (large) and credits */
.fab { position: absolute; z-index: 3; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  box-shadow: var(--shadow); color: var(--accent); cursor: pointer; }
.fab:active { transform: scale(0.96); }
/* Corners match on every screen: credits and settings top right, location bottom right
   (zoom buttons above it on desktop), layers bottom left, map credit top left */
.fab-location { width: 44px; height: 44px; right: 10px; bottom: 10px; }
.fab-location[aria-pressed="true"] { background: var(--accent-fill); color: #fff; }
.fab-info { width: 44px; height: 44px; top: calc(10px + env(safe-area-inset-top)); right: 10px; }
.fab-settings { width: 44px; height: 44px; top: calc(64px + env(safe-area-inset-top)); right: 10px; }
/* Where I locked my bike (js/parked-bike.js): beside the location button */
.parked-dialog { width: min(380px, calc(100vw - 24px)); }
.parked-note { width: 100%; box-sizing: border-box; margin: 8px 0 12px; padding: 10px 12px; border: 1px solid var(--separator);
  border-radius: 10px; background: var(--fill); color: var(--label); font: inherit; }
.parked-actions { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 6px; }

/* Map credit: always on screen, as OpenStreetMap and OpenMapTiles ask */
.map-credit { position: absolute; z-index: 2; top: calc(8px + env(safe-area-inset-top)); left: 10px;
  max-width: calc(100% - 90px); box-sizing: border-box; margin: 0; padding: 3px 9px; border-radius: 10px;
  font-size: 0.6562rem; line-height: 1.4; color: var(--secondary); background: var(--material);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.map-credit a { color: inherit; text-decoration: none; }
.map-credit a:hover { text-decoration: underline; }
.nav-credit { margin: 6px 0 0; font-size: 0.625rem; color: var(--secondary); text-align: center; }
.nav-credit a { color: inherit; text-decoration: none; }
body.navigating .map-credit { display: none; }
/* Desktop: the credit sits along the bottom edge, centred (the route card has the top left) */
@media (min-width: 601px) {
  /* Layers (bottom left) takes at most half the height, the route card (top left) the rest */
  .panel { max-height: calc(50% - 15px); }
  .map-credit { top: auto; bottom: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 640px);
    text-align: center; }
}

/* MapLibre controls: rounded glass; its own location button is replaced by .fab-location */
.maplibregl-ctrl-group { border-radius: 12px !important; box-shadow: var(--shadow) !important; overflow: hidden; }
.maplibregl-ctrl-group button + button { border-top-color: var(--separator) !important; }
.maplibregl-ctrl-group button { width: 36px; height: 36px; }
.maplibregl-ctrl-bottom-right { right: 14px; bottom: 64px; }  /* (44 − 36) / 2 = 4 px in from the 10 px button edge */
.maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0; }

/* ---- Popups ------------------------------------------------------------ */
.maplibregl-popup-content { font: 0.8125rem/1.45 -apple-system, system-ui, sans-serif; padding: 12px 14px; border-radius: 12px;
  box-shadow: var(--shadow); }
.popup-title { font-weight: 600; font-size: 0.9375rem; margin: 0 14px 4px 0; }
.popup-cat { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--secondary); }
.popup-cat .swatch { width: 18px; }
.popup-table { border-collapse: collapse; }
.popup-table td { padding: 1px 8px 1px 0; vertical-align: top; }
.popup-table td:first-child { color: var(--secondary); white-space: nowrap; }
.popup-note { margin: 6px 0 0; font-size: 0.6875rem; color: var(--secondary); }

/* ---- Route planner ----------------------------------------------------- */
/* Route planner (desktop): a card in the top-left corner, above Layers (bottom left). It
   stops short of the Layers panel: --layers-h is that panel's height (app.js) */
.route-panel { position: absolute; top: 10px; left: 10px; z-index: 3;
  width: min(380px, calc(100% - 90px)); box-sizing: border-box;
  max-height: calc(100% - 30px - var(--layers-h, 60px)); overflow-y: auto;
  border-radius: 16px; box-shadow: var(--shadow); padding: 12px 14px; }
.route-panel:empty { display: none; }
.route-title { display: flex; align-items: center; gap: 7px; font-size: 1.0625rem; font-weight: 600; margin: 2px 0 10px; letter-spacing: -0.01em; }
/* Whimsy Bike wordmark: the app icon's cyclist in the brand teal */
:root { --brand: #069E85; }
.brand-mark { flex: none; display: block; }
.brand-name { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; color: var(--brand); }
.route-title-sub { margin-left: auto; font-size: 0.8125rem; font-weight: 500; color: var(--secondary); }
.brand-heading { display: flex; align-items: center; gap: 8px; }
.sheet-handle { display: none; }

/* Stops: search field + drop-pin button per stop */
.stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.stop[hidden], .stop-actions[hidden], .profiles[hidden] { display: none; }
.stop-row { display: flex; align-items: center; gap: 4px; }
.stop-handle { flex: none; display: inline-flex; align-items: center; gap: 2px; color: var(--tertiary); cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none; padding: 4px 0; }
.stop-handle:hover { color: var(--secondary); }
.stop.dragging { position: relative; z-index: 1; }
.stop.dragging .stop-row { background: var(--surface); border-radius: 10px; box-shadow: var(--shadow); }
.stop.dragging .stop-handle { cursor: grabbing; color: var(--label); }
body:has(.stop.dragging) { cursor: grabbing; }
.stop-input { flex: 1; min-width: 0; min-height: 36px; box-sizing: border-box; border: 0; border-radius: 10px;
  padding: 4px 10px; margin-left: 4px; font: inherit; font-size: 0.9375rem; color: var(--label); background: var(--fill);
  caret-color: var(--accent); -webkit-appearance: none; appearance: none; }
.stop-input::placeholder { color: var(--secondary); }
.stop-input:focus { outline: none; background: var(--fill-strong); box-shadow: inset 0 0 0 2px var(--focus); }
.stop.picking .stop-input { box-shadow: inset 0 0 0 2px var(--accent); }
.stop.picking .stop-input::placeholder { color: var(--accent); font-weight: 500; }
/* Drop-a-pin: a tinted button, so it reads as tappable next to the field */
.stop-pin { margin-left: 2px; border-radius: 10px; background: rgba(0, 122, 255, 0.12); color: var(--accent); }
.stop-pin:hover { background: rgba(0, 122, 255, 0.2); }
.stop.picking .stop-pin { background: var(--accent-fill); color: #fff; }
/* Destination only (before the start field appears): nothing to reorder, no letter */
.stops.solo .stop-handle, .stops.solo .stop-pin { display: none; }
/* The start (A) row: "use my location" in place of the drop-a-pin button */
.stop-locate { display: none; margin-left: 2px; border-radius: 10px; background: rgba(0, 122, 255, 0.12); color: var(--accent); }
.stop-locate:hover { background: rgba(0, 122, 255, 0.2); }
.stop:first-child .stop-locate { display: inline-flex; }
.stop:first-child .stop-pin { display: none; }
.stops.solo .stop-input { margin-left: 0; }
/* Just the one search bar (no stops yet): a magnifying glass in it, as iOS search fields have
   (Material Symbols "search", icons.js) */
.stops.solo .stop-input { padding-left: 34px; background-repeat: no-repeat; background-position: 10px 50%; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%238A8A8E' d='M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .stops.solo .stop-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%2398989F' d='M380-320q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z'/%3E%3C/svg%3E"); }
.stops.solo :is(.suggestions, .saved-bar) { margin-left: 0; }
.stop-remove { color: var(--secondary); }
/* Search results, as an iOS list: a badge for what each is, title and detail, distance on the
   right, separators inset past the badge; a chain (js/local-search.js) is a card of its own
   with its locations. The list scrolls on its own, clear of the keyboard */
.suggestions { list-style: none; margin: 6px 0 0 30px; padding: 6px; border-radius: 14px; box-shadow: var(--shadow);
  max-height: min(60vh, calc(var(--view-h, 100vh) - var(--kb, 0px) - 200px)); overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; }
.suggestions[hidden] { display: none; }
.suggestions li { font-size: 0.9375rem; cursor: pointer; }
.suggestions .sug-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px;
  min-height: 44px; box-sizing: border-box; }
/* (the separator starts after the badge, as iOS's do; none round the highlighted row) */
.suggestions > .sug-row + .sug-row::before { content: ""; position: absolute;
  left: 52px; right: 10px; top: 0; height: 1px; background: var(--separator); }
.suggestions .sug-row[aria-selected="true"], .suggestions .sug-row:hover { background: var(--fill); }
.suggestions .sug-row[aria-selected="true"]::before, .suggestions .sug-row[aria-selected="true"] + .sug-row::before,
.suggestions .sug-row:hover::before, .suggestions .sug-row:hover + .sug-row::before { opacity: 0; }
.suggestions .sug-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: #fff; }
.suggestions .sug-icon svg { width: 18px; height: 18px; fill: currentColor; }
.suggestions .sug-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.suggestions .sug-label { overflow-wrap: anywhere; }
.suggestions .sug-detail { font-size: 0.75rem; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestions .sug-km { flex: none; font-size: 0.8125rem; color: var(--secondary); font-variant-numeric: tabular-nums; }
.suggestions .sug-empty { color: var(--secondary); cursor: default; font-size: 0.8125rem; padding: 10px; }
/* A chain: a card of its own (the business, how many locations), its locations inside it */
.suggestions .sug-chain { cursor: default; margin: 6px 0; padding: 4px; border-radius: 12px; background: var(--fill);
  box-shadow: inset 0 0 0 1px var(--separator); }
.suggestions .sug-chain:first-child { margin-top: 0; }
.suggestions .sug-chain-head { display: flex; align-items: center; gap: 12px; padding: 6px 6px 4px; }
.suggestions .sug-chain-head .sug-label { font-weight: 600; }
.suggestions .sug-chain ul { list-style: none; margin: 2px 0 0; padding: 0; }
.suggestions .sug-loc { padding-left: 48px; }
.suggestions .sug-loc + .sug-loc::before { content: ""; position: absolute; left: 48px; right: 8px; top: 0; height: 1px;
  background: var(--separator); }
.suggestions .sug-chain .sug-row[aria-selected="true"], .suggestions .sug-chain .sug-row:hover { background: var(--surface); }
.stop-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }

/* A/B pins: neutral dark so they never read as a bike category */
.pin { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--ink); color: #fff; font: 600 0.75rem/1 -apple-system, system-ui, sans-serif; }
.pin-end { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2.5px var(--ink); }
.pin-stop { background: #636366; }
.pin-glyph { width: 14px; height: 14px; }
.route-marker .pin-glyph { width: 16px; height: 16px; }
.route-marker { width: 28px; height: 28px; font-size: 0.875rem; cursor: grab; box-shadow: 0 0 0 3px #fff, 0 2px 6px rgba(0,0,0,.35); }
.route-marker.pin-end { box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 3px #fff, 0 2px 6px rgba(0,0,0,.35); }

/* Bike type tiles */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; }
.modes button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0;
  background: var(--fill); border-radius: 12px; padding: 8px 2px 7px; font: inherit; font-size: 0.75rem; font-weight: 500;
  color: var(--label); cursor: pointer; transition: background .15s, color .15s; }
.modes button .icon { color: var(--secondary); }
.modes button[aria-checked="true"] { background: rgba(0, 122, 255, 0.12); color: var(--accent); font-weight: 600; }
.modes button[aria-checked="true"] .icon { color: var(--accent); }
.mode-note { margin: 6px 0 0; font-size: 0.75rem; color: var(--secondary); }
.mode-note[hidden] { display: none; }
.route-msg { font-size: 0.8125rem; color: var(--secondary); margin: 10px 0 0; }
.route-msg:empty { display: none; }

/* Route options: same hierarchy as the map bubbles (time, then climb · distance, then detail) */
.route-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.route-options[hidden] { display: none; }
.route-option { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; border: 0;
  background: var(--fill); border-radius: 12px; padding: 9px 11px; font: inherit; font-size: 0.75rem; color: var(--secondary); cursor: pointer; }
.route-option[aria-checked="true"] { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent), 0 2px 8px rgba(0,0,0,.08); }
.opt-time { font-size: 1.375rem; font-weight: 700; line-height: 1.15; color: var(--label); letter-spacing: -0.02em; }
.opt-stats { font-size: 0.8125rem; color: var(--label); font-variant-numeric: tabular-nums; }
.opt-via { font-size: 0.75rem; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-summary { display: flex; flex-direction: column; gap: 1px; }
.route-summary .opt-time { font-size: 1.75rem; }

/* Bike Share directions */
.legs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.8125rem; }
.legs li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.leg-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: rgba(0, 122, 255, 0.12); color: var(--accent); }
.leg-dist { color: var(--secondary); margin-left: 4px; }

.route-result { margin-top: 12px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.75rem; color: var(--secondary);
  font-weight: 500; text-transform: uppercase; letter-spacing: .04em; margin: 14px 0 6px; }
.section-note { font-weight: 400; text-transform: none; letter-spacing: 0; }
.route-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 1px; background: var(--surface); }
.route-steps ol { list-style: none; margin: 8px 0 0; padding: 0; }
.route-steps li { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; padding: 3px 0; }
.route-steps .swatch { width: 16px; }
.route-steps .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.route-steps .dist { color: var(--secondary); font-variant-numeric: tabular-nums; }
.route-steps { margin-top: 12px; font-size: 0.8125rem; }
.route-steps summary { cursor: pointer; color: var(--accent); font-weight: 500; }
.route-actions { display: flex; gap: 8px; margin-top: 12px; }
.route-actions:not(:has(> :not([hidden]))) { display: none; }
.route-actions .btn { padding: 10px 16px; font-size: 0.9375rem; }
.btn-start[hidden] { display: none; }
.btn-start { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; }
body.picking #map canvas { cursor: crosshair; }

/* Elevation profile */
.elev-totals { color: var(--label); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }
.elev-chart { position: relative; height: 64px; padding-left: 2.125rem; touch-action: none; }
.elev-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.elev-area { fill: rgba(0, 122, 255, 0.12); }
.elev-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.elev-other { fill: none; stroke: #8E8E93; stroke-width: 1.5; stroke-dasharray: 2 3; }
.elev-key { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.75rem; color: var(--secondary); }
.elev-key .key-solid, .elev-key .key-dotted { width: 16px; height: 0; border-top: 2px solid var(--accent); }
.elev-key .key-dotted { margin-left: 8px; border-top: 2px dotted #8E8E93; }
.elev-stop { stroke: #AEAEB2; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.elev-cursor { stroke: var(--label); stroke-width: 1; }
.elev-axis { position: absolute; left: 0; font-size: 0.625rem; color: var(--secondary); font-variant-numeric: tabular-nums; }
.elev-hi { top: -2px; }
.elev-lo { bottom: -2px; }
.elev-tip { position: absolute; top: -24px; transform: translateX(-50%); margin-left: 2.125rem; background: var(--ink); color: #fff;
  font-size: 0.6875rem; padding: 3px 7px; border-radius: 6px; white-space: nowrap; pointer-events: none; }

/* Credits: desktop has the button in the panel's top-right corner */
.route-panel .search-area { position: static; }
.panel-buttons { display: none; } /* settings and credits are the round buttons, top right */

/* Settings dialog (js/settings.js): same card as Credits */
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; cursor: pointer; }
.setting-block { padding: 8px 0; border-top: 1px solid var(--separator); }
.setting-row small, .setting-block small { color: var(--secondary); }
.setting-block .segmented { margin-top: 8px; }
.setting-note { margin: 6px 0 0; }
/* iOS-style switch */
.switch { -webkit-appearance: none; appearance: none; flex: none; width: 51px; height: 31px; margin: 0; border-radius: 16px;
  background: rgba(120, 120, 128, 0.16); position: relative; cursor: pointer; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.16); transition: transform .2s; }
.switch:checked { background: #34C759; }
.switch:checked::after { transform: translateX(20px); }

/* Credits dialog */
.credits { width: min(440px, calc(100vw - 32px)); max-height: min(80vh, 640px); padding: 0; border: 0;
  border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.25); color: var(--label); background: var(--surface); }
.credits::backdrop { background: rgba(0,0,0,.3); }
.credits-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 4px 18px; }
.credits-head h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.credits-body { padding: 0 18px 18px; overflow-y: auto; max-height: calc(min(80vh, 640px) - 64px); font-size: 0.875rem; }
.credits-body h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--secondary); font-weight: 500; margin: 16px 0 6px; }
.credits-body ul { margin: 0; padding-left: 18px; }
.credits-body li { margin-bottom: 8px; line-height: 1.45; }
.credits-body a { color: var(--accent); }
.credits-body p { margin: 0; line-height: 1.5; color: var(--secondary); }

/* ---- Colour editor (?edit) -------------------------------------------- */
.edit-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.edit-status { font-size: 0.75rem; color: var(--secondary); margin: 6px 0 0; }
.edit-status.dirty { color: var(--warn); font-weight: 600; }
.cat-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; margin: 0 0 4px;
  border: 0; background: var(--fill); border-radius: 10px; padding: 7px 9px; font: inherit; font-size: 0.8125rem; cursor: pointer; }
.cat-btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent); font-weight: 600; }
.cat-btn kbd { margin-left: auto; font: 0.6875rem ui-monospace, monospace; color: var(--secondary); }

.opt-tag { font-weight: 600; color: var(--accent); }
.opt-tag-quality { color: var(--green-label); }  /* Scenic, Shaded: same green as on the map bubbles */

/* ---- Long-press / right-click popup: set destination or add a stop ------- */
.maplibregl-canvas { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.drop-popup .maplibregl-popup-content { padding: 4px; border-radius: 14px; box-shadow: var(--shadow); }
.drop-popup .maplibregl-popup-tip { display: none; }
.drop-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 9px 14px;
  background: var(--accent-fill); color: #fff; font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.drop-btn:hover { filter: brightness(1.08); }
.drop-choices { display: flex; flex-direction: column; gap: 4px; }
.drop-btn.secondary { background: var(--fill, rgba(120,120,128,.16)); color: var(--label); }

/* ---- Turn-by-turn guidance (js/navigation.js) -------------------------- */
/* While guiding, the map and a slim dashboard are all there is */
body.navigating .route-panel, body.navigating #legend, body.navigating .fab-info, body.navigating .fab-settings, body.navigating .fab-location,
body.navigating .maplibregl-ctrl-bottom-right, body.navigating .lab-panel { display: none !important; }
.nav-dash { position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); bottom: calc(10px + env(safe-area-inset-bottom));
  width: min(440px, calc(100vw - 16px)); box-sizing: border-box; padding: 12px 14px 10px; border-radius: 22px;
  background: var(--material); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.08); }
.nav-dash[hidden] { display: none; }
.nav-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.nav-head .nav-dest { margin: 0; text-align: left; font-size: 0.875rem; font-weight: 600; color: var(--label); }
.nav-end { flex: none; border: 0; border-radius: 999px; padding: 6px 14px; font: inherit;
  font-size: 0.9375rem; font-weight: 600; color: var(--red); background: rgba(255, 59, 48, 0.12); cursor: pointer; }
/* Elevation profile as the progress bar: ridden part in the accent colour, a dot for the rider */
.nav-elev-plot { position: relative; height: 44px; }
.nav-elev-chart { display: block; width: 100%; height: 100%; overflow: visible; }
.nav-elev-ahead { fill: var(--fill-strong); }
.nav-elev-done { fill: var(--accent); opacity: .85; }
.nav-elev-line { fill: none; stroke: var(--secondary); stroke-width: 1.5; }
.nav-elev-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--accent); border: 2.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); box-sizing: border-box; }
.nav-where { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nav-climb { font-size: 0.75rem; font-weight: 600; color: var(--secondary); font-variant-numeric: tabular-nums; }
.nav-climb:empty { display: none; }
.nav-bar { height: 8px; margin-top: 18px; border-radius: 4px; background: var(--fill-strong); overflow: hidden; }
.nav-bar-fill { display: block; height: 100%; width: 0; background: var(--accent); }
.nav-msg { margin: 8px 0 0; padding: 4px 10px; border-radius: 8px; background: rgba(255, 149, 0, .14); color: var(--warn);
  font-size: 0.8125rem; font-weight: 500; }
.nav-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--separator); text-align: center; }
.nav-stats div { display: flex; flex-direction: column; }
.nav-stats:has(> div:only-child) { grid-template-columns: 1fr; }   /* (riders under 19: distance left only) */
.nav-stats b { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nav-stats span { font-size: 0.6875rem; color: var(--secondary); text-transform: uppercase; letter-spacing: .04em; }
.nav-dest { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-recenter { z-index: 6; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h, 190px) + 22px + env(safe-area-inset-bottom)); width: auto; min-height: 44px;
  padding: 0 16px; border-radius: 999px; gap: 6px; display: inline-flex; align-items: center; color: var(--accent);
  font: 600 0.9375rem -apple-system, BlinkMacSystemFont, system-ui, sans-serif; box-shadow: var(--shadow); }
.nav-recenter[hidden] { display: none; }
/* Turn banner: the coming turn's arrow and street, top of the screen */
.nav-banner { position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); top: calc(8px + env(safe-area-inset-top));
  width: min(440px, calc(100vw - 16px)); box-sizing: border-box; display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: 22px; background: var(--sign, #0A58CA); color: var(--sign-ink, #fff); transition: background-color .6s;
  box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.1); }
.nav-banner[hidden] { display: none; }
.nav-banner-arrow { flex: none; display: grid; place-items: center; width: 64px; height: 64px; }
.nav-banner-arrow svg { fill: currentColor; }
.nav-banner-what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nav-banner-dist { font-size: 1.875rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.nav-banner-verb { font-size: 1.0625rem; font-weight: 500; opacity: .9; }
.nav-banner.slim { padding: 8px 14px; gap: 10px; border-radius: 18px; }
.nav-banner.slim .nav-banner-arrow { width: 36px; height: 36px; }
.nav-banner.slim .nav-banner-dist { font-size: 1.25rem; }
.nav-banner.slim .nav-banner-verb { font-size: 0.9375rem; opacity: 1; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.2; }
.nav-banner.arrived { background: var(--arrived); }
/* Arrival: early or late against the estimate (navigation.js timingHtml) */
.nav-banner-timing { display: block; margin-top: 4px; font-size: 0.9375rem; font-weight: 600; }
/* A right turn: the arrow on the right. Close to the turn it blinks, like a turn signal */
.nav-banner.turn-right { flex-direction: row-reverse; }
.nav-banner.turn-right .nav-banner-what { text-align: right; align-items: flex-end; }
.nav-signal { animation: nav-signal 0.7s ease-in-out infinite alternate; }
@keyframes nav-signal { from { opacity: 1; } to { opacity: .25; } }
/* The street: up to two lines, smaller when it's long (data-long, js/navigation.js) */
.nav-banner-onto { font-size: 1.5rem; font-weight: 700; line-height: 1.15; overflow: hidden; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.nav-banner-onto[data-long] { font-size: 1.1875rem; }
.nav-banner-verb[data-long] { font-size: 0.875rem; }
.nav-puck { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-fill);
  color: #fff; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); box-sizing: border-box; }

/* ---- Shade / scenic score overlay (js/scenic-overlay.js) ----------------- */
.score-overlay { margin-top: 6px; }
.score-key { margin-top: 6px; }
.score-key[hidden] { display: none; }
.traffic-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; font-size: 0.75rem; }
.traffic-key span { display: inline-flex; align-items: center; gap: 5px; }
.traffic-key i { width: 18px; height: 5px; border-radius: 3px; }
.traffic-key i.dot { width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.score-ramp { display: block; height: 8px; border-radius: 4px; }
.score-ends { display: flex; justify-content: space-between; font-size: 0.6875rem; color: var(--secondary); margin-top: 2px; }

/* ---- Route lab (js/route-lab.js): a temporary developer view ------------ */
.lab-panel { position: absolute; z-index: 4; top: 10px; left: 10px; bottom: 10px; width: 420px; overflow-y: auto;
  box-sizing: border-box; padding: 12px 14px 16px; border-radius: 16px; box-shadow: var(--shadow);
  background: var(--material-strong); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  overscroll-behavior: contain; font-size: 0.8125rem; }
.lab-panel[hidden] { display: none; }
body.lab-open #legend { display: none; }
.lab-head { display: flex; align-items: center; justify-content: space-between; }
.lab-head h2 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
.lab-panel h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--secondary);
  margin: 16px 0 6px; font-weight: 500; }
.lab-panel .segmented { margin-top: 8px; }
.lab-sub, .lab-empty { color: var(--secondary); margin: 2px 0 6px; }
.lab-hint { text-transform: none; letter-spacing: 0; color: var(--secondary); font-size: 0.75rem; }
p.lab-hint { margin: 4px 0 0; }
.lab-rules { margin-top: 10px; background: var(--fill); border-radius: 10px; padding: 8px 10px; }
.lab-rules summary { cursor: pointer; font-weight: 600; }
.lab-rules ol { margin: 6px 0 0; padding-left: 18px; }
.lab-rules li { margin: 4px 0; }
.lab-cands { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lab-cand { display: flex; gap: 8px; padding: 8px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--separator); }
.lab-cand.focused { box-shadow: 0 0 0 2px var(--accent); }
.lab-cand.off { opacity: .45; }
.lab-swatch { flex: none; width: 34px; height: 24px; border: 0; border-radius: 7px; background: var(--c); color: #fff;
  font: 600 0.6875rem/24px inherit; cursor: pointer; padding: 0; }
.lab-cand.off .lab-swatch { background: transparent; color: var(--c); box-shadow: inset 0 0 0 2px var(--c); }
.lab-main { flex: 1; min-width: 0; }
.lab-line1 { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.lab-via { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.lab-status { font-size: 0.6875rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.lab-status.pick { background: rgba(52, 199, 89, .16); color: var(--ok); }
.lab-status.spare { background: rgba(0, 122, 255, .12); color: var(--accent); }
.lab-status.rejected { background: rgba(255, 59, 48, .1); color: var(--bad); white-space: normal; }
.lab-status.other { background: var(--fill); color: var(--secondary); white-space: normal; }
.lab-status.missed { background: rgba(255, 149, 0, .16); color: var(--warn); white-space: normal; }
.lab-bar { position: relative; display: flex; height: 10px; margin: 6px 0 4px; border-radius: 3px; background: var(--fill); }
.lab-bar span { height: 100%; }
.lab-bar span:first-child { border-radius: 3px 0 0 3px; }
.lab-climb { background: repeating-linear-gradient(135deg, #8E8E93 0 3px, #C7C7CC 3px 6px); }
.lab-mark, .lab-mark-key { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 2px solid var(--label); }
.lab-mark.limit, .lab-mark-key.limit { border-left: 2px dashed #D70015; }
.lab-nums { color: var(--secondary); font-variant-numeric: tabular-nums; }
.lab-nums strong { color: var(--label); }
.lab-nums .over { color: var(--bad); font-weight: 600; }
.lab-found { color: var(--secondary); font-size: 0.6875rem; margin-top: 2px; }
.lab-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; color: var(--secondary); font-size: 0.6875rem; }
.lab-key span { display: inline-flex; align-items: center; gap: 4px; }
.lab-key i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; }
.lab-key .lab-mark-key { position: static; width: 0; height: 12px; border-radius: 0; }
.lab-matrix, .lab-mults { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.lab-matrix th, .lab-matrix td, .lab-mults td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--separator); }
.lab-matrix th:first-child, .lab-mults td:first-child { text-align: left; }
.lab-matrix thead th { font-weight: 500; color: var(--secondary); font-size: 0.75rem; }
.lab-matrix .sel { background: rgba(0, 122, 255, .06); }
.lab-matrix td.pick { color: var(--ok); font-weight: 600; }
.lab-matrix td.over { color: var(--secondary); }
.lab-matrix tbody tr:hover { background: var(--fill); }
.lab-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }

/* ---- Phones ------------------------------------------------------------ */
@media (max-width: 600px) {
  /* The route card floats above the bottom edge, clear of the screen's sides. Collapsed
     it shows just the search bar; expanded it slides up (route-planner.js). */
  .route-panel { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom) + var(--kb, 0px));
    width: auto; max-height: 78vh; border-radius: 20px; padding: 0 12px 12px;
    transition: height .42s var(--ease-ios);
    overscroll-behavior: contain; box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.08); }
  .route-panel.sheet-collapsed { overflow: hidden; }
  /* Collapsed, Start and Clear route stay in reach: pinned under the search bar (the
     card's peek height makes room for them, route-planner.js) */
  .route-panel.sheet-collapsed .route-actions { position: absolute; left: 12px; right: 12px; bottom: 12px; margin: 0; }
  .route-panel.sheet-collapsed > :not(.sheet-handle, .search-area, .route-actions, .sheet-egg) { visibility: hidden; }
  /* Typing a stop: only that field (and its results) — the keyboard takes the rest */
  body.searching .route-panel > :not(.search-area),
  body.searching .stop:not(.editing),
  body.searching .stop-handle, body.searching .stop-pin, body.searching .stop-locate, body.searching .stop-remove,
  body.searching .fab, body.searching #legend { display: none !important; }
  /* With the handle hidden, matching top padding keeps the field centred in the card */
  body.searching .route-panel { padding-top: 12px; }
  /* …and the card goes to the top of the screen, as tall as the field and its results, which
     scroll in the room down to the keyboard (--view-h: the height above it, route-planner.js) */
  body.searching .route-panel, body.searching.keyboard-open .route-panel {
    top: calc(env(safe-area-inset-top) + 8px); bottom: auto; height: auto; max-height: none;
    transition: none; animation: search-to-top .28s var(--ease-ios); }
  body.searching .suggestions { max-height: calc(var(--view-h, 100vh) - env(safe-area-inset-top) - 120px); }
  @keyframes search-to-top { from { transform: translateY(12px); opacity: .6; } }
  body.searching .stop-input { margin-left: 0; }
  body.searching :is(.suggestions, .saved-bar) { margin-left: 0; }
  /* (the app moves it with the keyboard, over the keyboard's own time: --kb-ms, route-planner.js;
     the website's arrives all at once) */
  body.keyboard-open .route-panel { bottom: calc(8px + var(--kb, 0px)); max-height: none;
    transition: bottom var(--kb-ms, 0s) cubic-bezier(.38, .7, .125, 1); }
  .route-panel.sheet-dragging { transition: none; }
  /* In the app the card also moves with the keyboard, over its time (--kb-ms) */
  .native-app .route-panel:not(.sheet-dragging) { transition: height .42s var(--ease-ios), bottom var(--kb-ms, 0s) cubic-bezier(.38, .7, .125, 1); }
  .sheet-handle { display: block; position: sticky; top: 0; z-index: 1; height: 28px; margin: 0 -12px 0;
    background: transparent; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
  .sheet-handle::before { content: ""; display: block; width: 36px; height: 5px; margin: 10px auto 0;
    border-radius: 3px; background: var(--tertiary); }
  .route-panel .search-area { display: block; }
  .route-title { display: none; }
  /* iOS zooms the page into fields with text under 16px */
  .stop-input { font-size: 1rem; min-height: 40px; }
  .stop-pin, .stop-locate { width: 40px; height: 40px; }

  /* Credits: round button top right. Location: large round button above the card. */
  .fab-location { width: 60px; height: 60px; right: 14px; bottom: calc(var(--sheet-h, 0px) + 14px); }
  .fab-location .icon { width: 30px; height: 30px; }
  /* No zoom buttons on phones: pinch to zoom */
  .maplibregl-ctrl-bottom-right { display: none; }

  /* While the card is open it covers most of the map: tuck the location button away */
  .fab-location { transition: opacity .2s; }
  body.sheet-expanded .fab-location { opacity: 0; pointer-events: none; }

  /* Layers: a small round icon button in the bottom-left corner, above the card; it
     opens upward into the full panel */
  .panel { left: 14px; bottom: calc(var(--sheet-h, 0px) + 14px); max-width: calc(100vw - 104px);
    max-height: calc(100vh - var(--sheet-h, 0px) - 80px - env(safe-area-inset-top)); overflow-y: auto;
    overscroll-behavior: contain; transition: opacity .2s; }
  .panel.collapsed { width: 44px; height: 44px; padding: 0; border-radius: 50%; overflow: hidden; }
  .panel.collapsed .legend-head { width: 44px; height: 44px; justify-content: center; }
  .panel.collapsed .legend-title h1, .panel.collapsed .legend-head .chevron { display: none; }
  body.sheet-expanded .panel { opacity: 0; pointer-events: none; }
  /* The route lab is a desktop tool for now */
  .dev-only, .lab-panel { display: none !important; }
  .cat-btn kbd { display: none; }
}

/* ---- The page itself never zooms or bounces: only the map does ---------------
   (viewport meta: user-scalable=no; iOS Safari ignores that, so app.js also cancels
   its pinch "gesture" events). UI elements still scroll vertically and take taps
   without the double-tap zoom delay. */
html, body { overscroll-behavior: none; touch-action: pan-x pan-y; }
.route-panel, .panel, .credits, .suggestions, .fab, button { touch-action: pan-y; }

/* ---- Live location: blue dot, and messages about it ---------------------------- */
.me-dot { width: 16px; height: 16px; border-radius: 50%; background: #007AFF; border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.3); }
.me-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid #007AFF;
  animation: me-pulse 2s ease-out infinite; }
@keyframes me-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
.toast { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); top: calc(14px + env(safe-area-inset-top));
  max-width: min(440px, calc(100vw - 32px)); box-sizing: border-box; padding: 10px 14px; border-radius: 14px;
  background: rgba(28,28,30,.92); color: #fff; font-size: 0.875rem; line-height: 1.35; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.toast[hidden] { display: none; }

/* Route notes (js/route-notes.js) in the route details */
.route-notes { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.8125rem; line-height: 1.4; }
.night-note { margin: 6px 0 8px; padding: 6px 10px; border-radius: 10px; font-size: 0.8125rem; background: var(--fill); color: var(--label); }
.valet-status { margin: 6px 0 4px; }
.valet-hours caption { text-align: left; font-size: 0.6875rem; color: var(--secondary); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 2px; }
.valet-hours tr.today td { font-weight: 700; }
.ferry-text { margin: 4px 0; font-size: 0.75rem; }
.valet-notes { margin: 6px 0; padding-left: 16px; font-size: 0.75rem; }
.valet-checked { margin: 4px 0 0; font-size: 0.6875rem; color: var(--secondary); }
.bus-badge { min-width: 22px; min-height: 20px; padding: 0 4px; border-radius: 6px; color: #fff; font-size: 0.6875rem; font-weight: 700;
  display: inline-grid; place-items: center; box-sizing: border-box; }
.transit-when { margin: 0 0 6px; font-size: 0.8125rem; }
.parking-line { margin: 0 0 4px; font-size: 0.8125rem; line-height: 1.4; }
.parking-line small { color: var(--secondary); }
.route-notes li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: rgba(255, 204, 0, .14); }
.route-notes .note-icon { flex: none; margin-top: 1px; }
.note-kind { margin-left: 6px; font-size: 0.6875rem; color: var(--secondary); }

/* Map editor (js/editor.js): a full-window workspace. Top bar, tool rail (left), side
   panels (right: inspector, overlays, history), status bar (bottom); the map in between. */
body.editing .route-panel, body.editing #legend, body.editing .fab, body.editing .maplibregl-ctrl-bottom-right,
body.editing .fab-location, body.editing .map-position { display: none !important; }
body.editing .map-credit { top: auto; left: 64px; bottom: 34px; transform: none; max-width: calc(100% - 400px); }
.ed { --ed-top: 48px; --ed-status: 26px; --ed-rail: 52px; --ed-side: 300px; font-size: 0.8125rem; }
.ed-top, .ed-tools, .ed-side, .ed-status { position: fixed; z-index: 5; background: var(--material-strong);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-sizing: border-box; }
.ed-top { top: 0; left: 0; right: 0; height: var(--ed-top); display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px 0 16px; border-bottom: 1px solid var(--separator); }
.ed-top strong { font-size: 0.9375rem; }
.ed-top-actions { display: flex; gap: 6px; align-items: center; }
.ed-top-actions .btn { padding: 6px 12px; text-decoration: none; }
.ed-icon-btn { border: 0; background: transparent; color: var(--label); width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.ed-icon-btn:hover:not(:disabled) { background: var(--fill); }
.ed-icon-btn:disabled { opacity: .35; cursor: default; }
.ed-tools { top: var(--ed-top); bottom: var(--ed-status); left: 0; width: var(--ed-rail); display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: 8px 0; border-right: 1px solid var(--separator); }
.ed-tool { position: relative; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--label);
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ed-tool:hover { background: var(--fill); }
.ed-tool[aria-pressed="true"] { background: var(--accent); color: #fff; }
.ed-tool kbd { position: absolute; right: 3px; bottom: 2px; font: 600 0.5625rem ui-monospace, monospace; opacity: .6; }
.ed-side { top: var(--ed-top); bottom: var(--ed-status); right: 0; width: var(--ed-side); overflow-y: auto;
  border-left: 1px solid var(--separator); }
.ed-panel { padding: 10px 14px 12px; border-bottom: 1px solid var(--separator); }
.ed-panel-head { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--secondary); }
.ed-panel-head .link-btn { margin-left: auto; font-size: 0.75rem; text-transform: none; letter-spacing: 0; }
.ed .sub { color: var(--secondary); font-size: 0.75rem; margin: 2px 0 8px; }
.ed p { margin: 4px 0 8px; }
.ed-label { font-size: 0.6875rem; font-weight: 600; color: var(--secondary); margin: 10px 0 4px !important; }
.ed-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ed-row .btn { padding: 6px 10px; font-size: 0.75rem; }
.ed-swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ed-swatch { display: flex; align-items: center; gap: 6px; border: 0; background: var(--fill); border-radius: 8px; padding: 6px 7px;
  font: inherit; font-size: 0.75rem; color: var(--label); cursor: pointer; text-align: left; }
.ed-swatch:hover { background: var(--fill-strong); }
.ed-swatch > span { flex: none; width: 14px; height: 14px; border-radius: 4px; }
.ed-swatch kbd { margin-left: auto; font: 0.625rem ui-monospace, monospace; color: var(--secondary); }
.ed .stop-input { width: 100%; margin: 0 0 6px; box-sizing: border-box; }
.ed-text { height: 60px; padding-top: 8px; resize: vertical; font: inherit; }
.ed-num { width: 64px; margin-left: 4px; }
.ed-check { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; }
.ed-history { list-style: none; margin: 0; padding: 0; max-height: 34vh; overflow-y: auto; }
.ed-history li { display: flex; align-items: flex-start; gap: 4px; border-radius: 6px; }
.ed-history li:hover { background: var(--fill); }
.ed-history-item { flex: 1; border: 0; background: none; text-align: left; font: inherit; font-size: 0.75rem; color: var(--label);
  padding: 4px 6px; cursor: pointer; }
.ed-x { border: 0; background: none; color: var(--secondary); font-size: 1rem; line-height: 1; padding: 4px 6px; cursor: pointer; }
.ed .hint { font-size: 0.6875rem; color: var(--secondary); margin: 8px 0 0; }
.ed .hint code { font-size: 0.6875rem; }
.ed-status { left: 0; right: 0; bottom: 0; height: var(--ed-status); display: flex; align-items: center; gap: 16px;
  padding: 0 12px; border-top: 1px solid var(--separator); font-size: 0.6875rem; color: var(--secondary); }
.ed-hint { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ed-cursor, .ed-zoom { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* The map sits between the rail, the side panels, the top and the status bar */
body.editing #map { top: 48px; left: 52px; right: 300px; bottom: 26px; }
body.editing .maplibregl-canvas:focus-visible { outline: none; }   /* the workspace frames the map already */
@media (max-width: 700px) {
  .ed { --ed-side: 100%; }
  .ed-side { top: auto; bottom: var(--ed-status); height: 42vh; left: var(--ed-rail); width: auto; border-left: 0; border-top: 1px solid var(--separator); }
  body.editing #map { right: 0; bottom: calc(42vh + 26px); }
}
.sc-key { font-size: 0.75rem; color: var(--secondary); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0; }
.sc-swatch { display: inline-block; width: 18px; height: 4px; border-radius: 2px; vertical-align: middle; }
.sc-swatch.kept { background: #1C1C1E; height: 5px; }
.sc-swatch.dropped { background: #8E8E93; }
.sc-swatch.excluded { background: #FF3B30; }
.sc-toggle { margin: 4px 0; }

/* ---- iPhone app (js/platform.js adds .native-app) ---------------------- */
/* No long-press callouts or text selection on the app's controls, as in a native app (and no
   link previews: app/capacitor.config.json); text in the fields still selects */
.native-app body { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.native-app input, .native-app textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.native-app img, .native-app a { -webkit-user-drag: none; }
/* Buttons dip a little while pressed, as iOS's do (Reduce Motion: below) */
.native-app :is(.btn, .drop-btn, .route-option, .modes button, .profiles button, .segmented button, .map-styles button) {
  transition: transform .2s var(--ease-ios), background .15s, color .15s; }
.native-app :is(.btn, .drop-btn, .route-option, .modes button, .profiles button, .segmented button, .map-styles button):active {
  transform: scale(.96); transition-duration: .08s; }

/* ---- Terms of Use (js/terms.js, terms.html) ---------------------------- */
.terms-points { margin: 4px 0 12px; padding-left: 18px; }
.terms-points li { margin-bottom: 8px; line-height: 1.45; }
.terms-full summary { cursor: pointer; color: var(--accent); margin: 4px 0 8px; }
.terms-full .terms { max-height: 40vh; overflow-y: auto; padding: 8px 12px; border-radius: 10px; background: var(--fill); }
.terms h1 { font-size: 1.375rem; margin: 4px 0; }
.terms h2 { font-size: 0.9375rem; margin: 16px 0 4px; }
.terms p, .terms li { line-height: 1.5; }
.terms-updated { color: var(--secondary); margin-top: 0; }
.terms-key { font-weight: 500; }
.terms-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; line-height: 1.4; cursor: pointer; }
.terms-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.terms-age { border: 0; margin: 14px 0 0; padding: 0; }
.terms-age legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.terms-age label { display: flex; gap: 10px; align-items: center; padding: 5px 0; cursor: pointer; }
.terms-age label[hidden] { display: none; }
.terms-age input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--accent); }
.terms-young { margin: 8px 0 0; color: var(--red, #D32F2F); font-weight: 600; }
.terms-check:has(input:disabled) { opacity: .5; cursor: default; }
.terms-agree { width: 100%; padding: 12px; font-size: 1rem; }
.ride-actions { display: flex; gap: 10px; margin-top: 8px; }
.ride-actions .btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px; font-size: 1rem; }
.terms-page .terms { color: var(--label); }

/* Developer: map position readout (js/map-position.js), top centre */
.map-position { position: absolute; z-index: 4; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  border: 0; border-radius: 10px; padding: 5px 10px; font: 0.75rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--label); background: var(--material-strong); box-shadow: var(--shadow); cursor: copy; white-space: nowrap; }
.map-position[hidden] { display: none; }
.map-position[data-copied]::after { content: " · copied"; color: var(--ok); }
@media (max-width: 600px) { .map-position { top: calc(48px + env(safe-area-inset-top)); } }
body.navigating .map-position { top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); }

/* ---- Accessibility (for-you/accessibility.md) ----------------------------- */
/* Keyboard focus: a clear ring on everything focusable (mouse and touch don't show it) */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.stop-input:focus-visible { outline: none; }          /* has its own inset ring */
.route-option:focus-visible, .modes button:focus-visible, .segmented button:focus-visible,
.map-styles button:focus-visible, .profiles button:focus-visible { outline-offset: 0; }
#map canvas:focus-visible { outline-offset: -4px; }
.sheet-handle:focus-visible { outline-offset: -3px; border-radius: 10px; }
/* Read by screen readers, not shown */
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Touch screens: every control at least 44 × 44 px (Apple's minimum) */
@media (pointer: coarse) {
  .icon-btn, .stop-pin, .stop-locate { width: 44px; height: 44px; }
  .stop-input { min-height: 44px; }
  .btn, .link-btn, .nav-end, .drop-btn { min-height: 44px; }
  .link-btn { min-width: 44px; }
  .map-styles button, .profiles button, .segmented button { min-height: 40px; }   /* + the 2 px track = 44 */
  .suggestions li { min-height: 44px; justify-content: center; box-sizing: border-box; }
  .toggle-row, .setting-row { min-height: 44px; }
  .route-steps summary, .terms-full summary { padding: 10px 0; min-height: 44px; box-sizing: border-box; }
  .why-open { min-height: 44px; }
  /* (the field's small clear button: a 44 px target round its 26 px circle) */
  .stop-clear::after { content: ""; position: absolute; inset: -9px; }
  .terms-check { min-height: 44px; align-items: center; }
  .terms-check input { margin-top: 0; width: 24px; height: 24px; }
  .toggle-row input { width: 22px; height: 22px; }
  .stop-handle { min-height: 44px; }
  /* The sheet's grab bar: 28 px tall (over WCAG's 24 px minimum), the full width of the card */
  .sheet-handle { height: 28px; }
  .sheet-handle::before { margin-top: 10px; }
}

/* Reduce Motion: no sliding, pulsing or spinning UI (MapLibre already jumps the camera
   instead of animating it when the system asks for reduced motion) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation: none !important; scroll-behavior: auto !important; }
  .fab:active, .native-app :is(.btn, .drop-btn, .route-option, .modes button, .profiles button, .segmented button,
    .map-styles button):active { transform: none; }
}

/* Larger text (browser text size, or the iPhone's Dynamic Type in the app, js/platform.js):
   everything above is in rem so it grows; the biggest numbers stop at a size that still
   fits a phone, and nothing runs off the side */
.nav-banner-dist { font-size: min(1.875rem, 40px); }
.nav-banner.slim .nav-banner-dist { font-size: min(1.25rem, 30px); }
.nav-banner-onto { font-size: min(1.5rem, 34px); }
.nav-stats b { font-size: min(1.25rem, 28px); }
.nav-stats div, .nav-banner-what, .route-option, .modes button { min-width: 0; overflow-wrap: anywhere; }
.opt-time { font-size: min(1.375rem, 32px); }
.route-summary .opt-time { font-size: min(1.75rem, 38px); }
.map-credit { font-size: min(0.65625rem, 14px); }
.nav-credit { font-size: min(0.625rem, 13px); }
/* Big text: the two route option cards stack, and the bike types wrap */
@media (max-width: 600px) {
  html.large-text .route-options { grid-template-columns: 1fr; }
  html.large-text .modes { grid-template-columns: 1fr 1fr; }
  html.large-text :is(.profiles, .segmented, .map-styles) { flex-wrap: wrap; }
  html.large-text :is(.profiles, .segmented, .map-styles) button { flex: 1 1 auto; }
  html.large-text .nav-stats b { font-size: min(1.25rem, 22px); }
}

/* The weather stations far out (js/weather-chip.js initStationPins): a pill with the sky and
   the temperature, popping in from zoom 13 */
.wx-station-pin { display: flex; align-items: center; gap: 3px; padding: 3px 9px 3px 6px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--label); font: 600 0.8125rem/1.2 -apple-system, system-ui, sans-serif; box-shadow: var(--shadow);
  cursor: pointer; opacity: 0; transform: scale(.6); transform-origin: 50% 100%; pointer-events: none;
  transition: opacity .18s, transform .34s cubic-bezier(.34, 1.4, .64, 1); }   /* (a little spring past full size) */
.wx-station-marker { pointer-events: none; }
/* (a tap target of at least 44 points around the small pill) */
.wx-station-pin { position: relative; }
.wx-station-pin::after { content: ""; position: absolute; inset: -10px -4px; }
.wx-station-marker.shown .wx-station-pin { opacity: 1; transform: scale(1); pointer-events: auto; }
.wx-station-pin .wx-sky { color: var(--label); margin: 0; }
body.navigating .wx-station-marker, body.editing .wx-station-marker { display: none; }

/* Pulled up past full with no destination (js/route-planner.js dragSheet): the stretch's note */
.sheet-egg { display: none; position: absolute; left: 0; right: 0; bottom: 18px; text-align: center;
  font-size: 0.9375rem; color: var(--secondary); opacity: 0; pointer-events: none; transition: opacity .2s; }
@media (max-width: 600px) { .sheet-egg { display: block; } }

/* ---- Weather card (js/weather-chip.js): two lines, left of Info and Settings on wide screens;
   on phones in the bottom row between Layers and the location button ------------- */
.weather-card { position: absolute; z-index: 3; top: calc(10px + env(safe-area-inset-top)); right: 64px; width: 176px;
  display: flex; flex-direction: column; border-radius: 14px; box-shadow: var(--shadow); }
.weather-card[hidden] { display: none; }
.weather-chip { width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 12px; border: 0; border-radius: 14px;
  text-align: left; font: 400 0.8125rem/1.25 inherit; color: var(--label); background: var(--material-strong); cursor: pointer;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.weather-panel[hidden] { display: none; }
/* A severe weather warning in force: red, with a footer linking to Environment Canada */
.weather-card.severe .weather-chip { background: #C4001A; color: #fff; border-radius: 14px 14px 0 0; }
.weather-card.severe .weather-chip .wx-line2, .weather-card.severe .wx-sky { color: rgba(255,255,255,.88); }
.wx-severe { display: flex; align-items: center; gap: 5px; padding: 5px 12px 6px; border-radius: 0 0 14px 14px;
  background: #8E0013; color: #fff; font: 700 0.75rem/1.2 inherit; text-decoration: none; }
.wx-severe[hidden] { display: none; }
.weather-card.severe ~ .weather-panel { top: calc(98px + env(safe-area-inset-top)); }
.weather-chip .wx-line1 { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.weather-chip .wx-line1 > span:last-child, .weather-chip .wx-line2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weather-chip .wx-line2 { font-size: 0.75rem; color: var(--secondary); }
.weather-chip .wx-icon { font-size: 1rem; line-height: 1; }
.weather-chip[data-level="warning"] { background: #C4001A; color: #fff; }
.weather-chip[data-level="rain"] { background: #0062CC; color: #fff; }
.weather-chip[data-level="wind"] { background: #8A4B00; color: #fff; }
.weather-chip[data-level="heat"] { background: #B3261E; color: #fff; }
.weather-chip[data-level="warm"] .wx-line1 { color: #8A4B00; }
:root[data-theme="dark"] .weather-chip[data-level="warm"] .wx-line1 { color: #FFB45C; }
.weather-chip:is([data-level="warning"], [data-level="rain"], [data-level="wind"], [data-level="heat"]) .wx-line2 { color: rgba(255,255,255,.88); }
.weather-panel { position: absolute; z-index: 6; top: calc(72px + env(safe-area-inset-top)); right: 64px; width: min(360px, calc(100vw - 20px));
  box-sizing: border-box; padding: 12px 14px; border-radius: 16px; background: var(--surface); color: var(--label); box-shadow: var(--shadow);
  max-height: calc(100vh - 90px - env(safe-area-inset-top)); overflow-y: auto; overflow-x: hidden;
  --wx-temp: #D9480F; --wx-wind: #0B7F86; --wx-rain: #0062CC; }
:root[data-theme="dark"] .weather-panel { --wx-temp: #FF9F45; --wx-wind: #3CC8C0; --wx-rain: #64ACFF; }
/* Weather-app hierarchy: the place, the temperature big, the sky, the day's high and low; then
   pins, warnings, and one card for the hours (a summary sentence heading it) */
.wx-hero { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 2px 30px 10px 0; }
.wx-big-row { display: flex; align-items: center; gap: 6px; }
.wx-big { font-size: 3.25rem; font-weight: 200; line-height: 1; letter-spacing: -0.02em; }
.wx-big-row .wx-sky { color: var(--label); }
.wx-cond { margin-top: 2px; font-size: 0.9375rem; color: var(--secondary); }
.wx-where { text-align: right; padding-top: 4px; min-width: 0; }
.wx-station { font-size: 0.9375rem; font-weight: 600; }
.wx-hilo { font-size: 0.875rem; font-weight: 500; }
.wx-forecast-for { font-size: 0.75rem; color: var(--secondary); }
.wx-hero .wx-close { position: absolute; top: -4px; right: -8px; }
.wx-card { margin: 8px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(118, 118, 128, .09); }
:root[data-theme="dark"] .wx-card { background: rgba(255, 255, 255, .06); }
.wx-card .wx-alerts { margin: 0; }
.wx-summary { margin: 0 0 6px; padding-bottom: 6px; font-size: 0.875rem; border-bottom: 1px solid var(--separator); }
.wx-card .wx-strip { margin: 0 -12px; padding: 0 12px; }
.wx-section .icon { flex: none; }
.wx-chart .wx-pop { font-size: 9.5px; font-weight: 600; fill: #0071A4; }
:root[data-theme="dark"] .wx-chart .wx-pop { fill: #5AC8FA; }
.wx-wind-now { position: sticky; left: 0; width: max-content; display: flex; align-items: center; gap: 8px;
  margin: 2px 0 2px; font-size: 0.8125rem; color: var(--secondary); }
.wx-wind-now strong { color: var(--label); }
.wx-wind-now .wx-compass { color: var(--label); }
.wx-wind-now .wx-compass-hub { fill: var(--surface); }
/* Windy and dry: the compass beside the two lines */
.weather-chip.with-compass { flex-direction: row; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; }
.wx-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wx-compass { flex: none; }
.wx-compass text { text-anchor: middle; dominant-baseline: central; fill: currentColor; }
.wx-compass-kmh { font-size: 11px; font-weight: 700; }
.wx-compass-from { font-size: 6.5px; font-weight: 700; }
.wx-compass-hub { fill: #8A4B00; }
/* Pins: sunscreen, bad air */
.wx-pins { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.wx-pin { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; font-size: 0.8125rem; }
.wx-pin.uv { background: #FFF1D6; color: #7A4100; }
.wx-pin.air { background: #FDE2E1; color: #9B1C14; }
:root[data-theme="dark"] .wx-pin.uv { background: #3D2A0A; color: #FFC069; }
:root[data-theme="dark"] .wx-pin.air { background: #3E1414; color: #FF9A92; }
/* The hours: charts in one strip that scrolls sideways, and the hour being read */
.wx-readout { margin: 0 0 4px; font-size: 0.8125rem; min-height: 2.5em; color: var(--secondary); }
.wx-readout strong { color: var(--label); }
.wx-strip { overflow-x: auto; margin: 0 -14px; padding: 0 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline-offset: -2px; }
.wx-strip::-webkit-scrollbar { display: none; }
.wx-strip-in { position: relative; }
.wx-section { position: sticky; left: 0; width: max-content; display: flex; align-items: center; gap: 4px;
  margin: 8px 0 2px; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--secondary); }
.wx-key { font-weight: 400; letter-spacing: 0; text-transform: none; }
.wx-chart { display: block; overflow: visible; }
.wx-chart text { font-size: 11px; font-weight: 500; fill: var(--secondary); text-anchor: middle; }
.wx-chart .wx-value { font-weight: 600; fill: var(--label); }
.wx-chart .wx-hour { font-weight: 500; font-size: 10px; }
.wx-gridline { stroke: var(--separator); stroke-width: 1; opacity: .7; }
.wx-temp-line { fill: none; stroke: var(--wx-temp); stroke-width: 2.5; stroke-linecap: round; }
.wx-temp-stop { stop-color: var(--wx-temp); }
.wx-temp-dot { fill: var(--wx-temp); stroke: var(--surface); stroke-width: 2; }
.wx-temp .wx-sky { color: var(--label); }
.wx-sunset-line { stroke: var(--secondary); stroke-width: 1; stroke-dasharray: 2 3; }
.wx-sunset { color: var(--wx-temp); }
.wx-chart .wx-sunset-text { text-anchor: start; font-size: 10.5px; }
.wx-wind-line { fill: none; stroke: var(--wx-wind); stroke-width: 2.5; stroke-linecap: round; }
.wx-gust-line { fill: none; stroke: var(--label); stroke-width: 1.5; stroke-linecap: round; opacity: .9; }
.wx-dir { color: var(--secondary); }
.wx-windy-line { stroke: var(--separator); stroke-width: 1; stroke-dasharray: 3 3; }
.wx-rain-bar { fill: var(--wx-rain); }
.wx-baseline { stroke: var(--separator); stroke-width: 1; }
.wx-cursor { position: absolute; top: 18px; bottom: 0; width: 0; border-left: 1.5px solid var(--label); opacity: .35; pointer-events: none; }
.wx-cursor[hidden] { display: none; }
.wx-close { font-size: 1.25rem; }
.wx-alerts { list-style: none; margin: 0 0 8px; padding: 0; }
.wx-alerts li { display: flex; gap: 8px; padding: 4px 0; font-size: 0.875rem; }
.wx-alerts li[data-level="warning"] { color: var(--bad); font-weight: 600; }
.wx-now { margin: 0 0 8px; }
.wx-note { margin: 8px 0 0; font-size: 0.6875rem; color: var(--secondary); }
body.navigating .weather-card, body.navigating .weather-panel, body.editing .weather-card { display: none; }
@media (max-width: 600px) {
  /* Bottom row, centred between the Layers (left 14px, 44px) and location (right 14px, 60px)
     buttons; the details open upward from it */
  .weather-card { top: auto; right: auto; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--sheet-h, 0px) + 14px); width: min(176px, calc(100vw - 168px)); }
  .weather-chip { min-height: 52px; justify-content: center; }
  .weather-panel { top: auto; right: auto; left: 50%; transform: translateX(-50%);
    bottom: calc(var(--sheet-h, 0px) + 76px); max-height: calc(100vh - var(--sheet-h, 0px) - 100px - env(safe-area-inset-top)); overflow-y: auto; }
  .weather-card.severe ~ .weather-panel { top: auto; bottom: calc(var(--sheet-h, 0px) + 104px); }
  body.sheet-expanded :is(.weather-card, .weather-panel), body:has(#legend:not(.collapsed)) :is(.weather-card, .weather-panel),
  body.searching .weather-card { display: none; }
}
/* "Why this route?": a button on the route card; open, it takes over the card */
.why-open { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 8px 0 2px;
  padding: 10px 12px; border: 0; border-radius: 12px; background: var(--fill, rgba(120,120,128,.12)); color: var(--label);
  font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
.why-open svg, .why-back svg { fill: currentColor; }
.route-panel.showing-why > :not(.why-view, .sheet-handle) { display: none !important; }
.why-view[hidden] { display: none; }
.why-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.why-head h2 { margin: 0; font-size: 1.0625rem; }
.why-back { display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px 4px 0; }
.why-sub { margin: 0 0 8px; font-size: 0.8125rem; color: var(--secondary); }
.why-lost { list-style: none; margin: 0; padding: 0; }
.why-lost li { border-top: 1px solid var(--separator); }
.why-lost-pick { display: block; width: 100%; padding: 8px 4px; border: 0; border-radius: 8px; background: none;
  color: inherit; font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; }
.why-lost-pick[aria-pressed="true"] { background: var(--fill, rgba(120,120,128,.12)); }
.why-lost-swatch { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%;
  color: #fff; font: 700 0.6875rem/1 inherit; font-style: normal; vertical-align: -3px; }
.why-lost-head { display: flex; justify-content: space-between; gap: 8px; }
.why-lost-head span, .why-lost-via { color: var(--secondary); }
.why-lost-reason { margin-top: 2px; }
.route-why { margin: 0 0 4px; padding-left: 18px; font-size: 0.8125rem; line-height: 1.35; color: var(--label); }
.route-why li + li { margin-top: 3px; }
.estimate-note { margin: 10px 0 0; font-size: 0.6875rem; color: var(--secondary); }
.guide-note { font-size: 0.8125rem; color: var(--label); }

/* Layers → Map data (js/scenic-overlay.js): six views in two rows of three */
.map-data-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.map-data-note { margin: 6px 0 0; font-size: 0.6875rem; color: var(--secondary); max-width: 280px; }
.map-data .score-key { margin-top: 6px; }
.chevron-right { transform: rotate(-90deg); }
.chevron-left { transform: rotate(90deg); }
/* Popup bullet lists (washroom amenities, js/amenities.js) */
.popup-list { margin: 4px 0; padding-left: 16px; font-size: 0.8125rem; }
/* Map editor → Turns: the moves through a junction */
.ed-moves { list-style: none; margin: 0 0 6px; padding: 0; font-size: 0.8125rem; }
.ed-moves li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 0; }
.btn.ed-mini { min-height: 0; padding: 3px 10px; font-size: 0.75rem; }
/* Map data → Comfort key: the day and night ramps */
.comfort-key { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; align-items: center; font-size: 0.75rem; }

/* ---- Featured places (js/featured.js) --------------------------------- */
.featured-head { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.featured-head img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.featured-tag { display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 6px; font-size: 0.6875rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: #FFE082; color: #5D4037; }
.featured-tag.endorsed { background: color-mix(in srgb, var(--brand) 18%, transparent); color: var(--brand); }
.featured-link { display: block; margin: 6px 0 4px; color: var(--accent); font-weight: 600; }
.featured-note { display: block; color: var(--secondary); }

/* ---- Ride lock (js/navigation.js): taps while riding hit "glass" ------------------- */
.ride-lock { position: fixed; inset: 0; z-index: 9999; background: transparent; touch-action: none;
  display: flex; align-items: center; justify-content: center; }
.ride-lock[hidden] { display: none; }
.ride-lock-msg { opacity: 0; padding: 10px 16px; border-radius: 12px; background: rgba(0,0,0,.55); color: #fff;
  font-weight: 600; font-size: 1.0625rem; }
.ride-lock.flash { animation: glass-tap .7s ease-out; }
.ride-lock.flash .ride-lock-msg { animation: glass-msg 1.6s ease-out; }
@keyframes glass-tap { 0% { background: rgba(255,255,255,0); } 12% { background: rgba(255,255,255,.38); }
  100% { background: rgba(255,255,255,0); } }
@keyframes glass-msg { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ride-lock.flash { animation-duration: .3s; } }

/* ---- Opening hours (js/hours.js) ----------------------------------------- */
.hours-status { margin: 6px 0 4px; font-weight: 600; }
.hours-status .is-open { color: #2E7D32; }
.hours-status .is-closed { color: #C62828; }
:root[data-theme="dark"] .hours-status .is-open { color: #66BB6A; }
:root[data-theme="dark"] .hours-status .is-closed { color: #EF5350; }
.hours-week { margin: 2px 0 6px; }
.hours-week tr.today td { font-weight: 700; }

.nav-banner[data-light="1"] { box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.18), var(--shadow); }
.comfort-swatch { display: inline-block; width: 22px; height: 6px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.wx-sky { flex: none; vertical-align: -4px; color: var(--secondary); margin-right: 4px; }
.wx-line1 .wx-sky { color: var(--label); }

/* ---- Report a problem (js/report.js) ------------------------------------------ */
.report-choice { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; margin: 0 0 10px;
  padding: 14px 16px; border: 0; border-radius: 14px; background: var(--fill); color: var(--label); font: inherit; cursor: pointer; }
.report-choice:hover { background: var(--fill-strong); }
.report-choice span { color: var(--secondary); font-size: 0.875rem; }
.report-label { display: block; font-weight: 600; margin-bottom: 6px; }
.report-text { width: 100%; min-height: 84px; resize: vertical; margin: 6px 0; box-sizing: border-box; }
.report-note { color: var(--secondary); margin: 6px 0; }
.report-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.report-card { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom));
  width: min(420px, calc(100% - 32px)); box-sizing: border-box; padding: 14px 16px; border-radius: 18px;
  background: var(--surface); color: var(--label); box-shadow: var(--shadow); }
.report-card[hidden] { display: none; }
.report-card p { margin: 0 0 6px; }
.report-card select { width: 100%; margin: 4px 0; }
.report-pin { color: #E53935; cursor: grab; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
body.reporting .maplibregl-canvas { cursor: crosshair; }

/* Welcome / terms dialog: uses the screen's height (the content grew with the age question)
   and tighter spacing so it fits without scrolling; "I agree" stays in view regardless */
.credits.terms-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
.terms-dialog .credits-body { max-height: calc(100dvh - 24px - 56px); }
.terms-dialog .terms-points { margin: 2px 0 8px; }
.terms-dialog .terms-points li { margin-bottom: 5px; line-height: 1.38; font-size: 0.8125rem; }
.terms-dialog .terms-age { margin-top: 8px; }
.terms-dialog .terms-age label { padding: 3px 0; }
.terms-dialog .terms-check { margin: 8px 0; }
.terms-dialog .terms-agree { position: sticky; bottom: 0; width: 100%; box-shadow: 0 -10px 12px var(--surface); }
.frost-note { margin: 8px 0; padding: 8px 10px; border-radius: 10px; font-size: 0.8125rem; line-height: 1.4;
  background: color-mix(in srgb, #29B6F6 16%, transparent); color: var(--label); }
.frost-note.black-ice { background: color-mix(in srgb, #E53935 16%, transparent); }
/* "Terrain ×2.2" stays on one line; the panel is wide enough for all four styles */
.map-styles button { white-space: nowrap; flex: 1 0 auto; }
.ix-key { margin: 2px 0 6px 8px; }
.ix-key .legend-row { font-size: 0.8125rem; }
/* Map editor → Turns: the key to the move lines */
.ed-turn-key { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.75rem; color: var(--secondary); margin: 4px 0 8px; }
.ed-turn-key span { width: 16px; height: 4px; border-radius: 2px; display: inline-block; }
.ed-turn-key .ok { background: #34C759; }
.ed-turn-key .no { background: #FF3B30; }
.ed-turn-key .mine { background: repeating-linear-gradient(90deg, #8E8E93 0 5px, transparent 5px 8px); }
.ed-turn-key .against { background: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 6px); }
/* A stop's field with its × (shown when there's text) inside on the right */
.stop-field { flex: 1; min-width: 0; display: flex; position: relative; }
.stop-field .stop-input { padding-right: 32px; }
.stop-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.stop-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--secondary); cursor: pointer; }
.stop-clear:hover { color: var(--label); background: var(--fill-strong); }
.stop-clear[hidden] { display: none; }
/* Map data keys: labelled ticks at 0, 50 and 100 under each ramp */
.score-ticks { position: relative; display: block; height: 30px; margin: 3px 6px 2px; font-size: 0.6875rem; color: var(--secondary); }
.score-ticks span { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;
  white-space: nowrap; line-height: 1.25; }
.score-ticks span:first-child { transform: none; align-items: flex-start; left: -6px !important; }
.score-ticks span:last-child { transform: none; align-items: flex-end; left: auto !important; right: -6px; }
.score-ticks b { color: var(--label); font-weight: 600; font-variant-numeric: tabular-nums; }
.score-ticks span::before { content: ""; width: 1px; height: 4px; background: var(--secondary); margin-bottom: 1px; }
.score-key small { display: block; margin-top: 2px; }
/* Settings: the version (tap 7 times for developer mode); the ride recorder and its badge */
.app-version { text-align: center; margin: 18px 0 4px; }
.app-version .link-btn { color: var(--secondary); font-size: 0.75rem; }
.ride-rec-status { margin: 6px 0; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.ride-rec .ed-row { display: flex; gap: 8px; flex-wrap: wrap; }
.rec-badge { position: fixed; top: calc(env(safe-area-inset-top) + 8px); left: 50%; transform: translateX(-50%); z-index: 50;
  border: 0; border-radius: 14px; padding: 4px 10px; background: #FF3B30; color: #fff; font: 600 0.75rem system-ui, sans-serif;
  font-variant-numeric: tabular-nums; box-shadow: var(--shadow); }
.rec-badge[hidden] { display: none; }
/* Guidance: the ride recorder's button (developer mode) */
.nav-rec { flex: none; border: 0; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 0.8125rem; font-weight: 600;
  color: var(--secondary); background: var(--fill); cursor: pointer; font-variant-numeric: tabular-nums; }
.nav-rec.on { color: #fff; background: #FF3B30; }
.nav-rec[hidden] { display: none; }
body.navigating .rec-badge { display: none; }   /* (the guidance screen has its own REC button) */
/* Guidance: spoken directions on/off */
.nav-voice { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px;
  color: var(--accent); background: var(--fill); cursor: pointer; }
.nav-voice.off { color: var(--secondary); }
.nav-view { font-size: 0.8125rem; font-weight: 700; letter-spacing: .02em; }
.nav-view[hidden] { display: none; }
/* Saved places (js/saved-places.js): thin buttons under the field being typed in */
.saved-bar { display: none; gap: 6px; margin: 6px 0 2px 30px; }
.stop.editing .saved-bar:not([hidden]) { display: flex; }
/* The saved places under the bike types, while no destination is set */
.home-bar:not([hidden]) { display: flex; margin: 8px 0 2px; }
.home-bar .saved-btn { padding: 8px 8px; }
.saved-btn { flex: 1 1 0; min-width: 0; padding: 4px 8px; border: 1px solid var(--separator); border-radius: 999px;
  background: var(--fill); color: var(--label); font: 600 0.75rem/1.2 inherit; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.saved-btn.empty { color: var(--secondary); border-style: dashed; background: transparent; }
.saved-btn.empty::before { content: "+ "; }
.saved-btn.saving { border: 1px solid var(--accent); color: var(--accent); background: transparent; }
.ed-turn-key em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; white-space: nowrap; margin-right: 8px; }
/* Settings → Saved places: each name can be typed over (js/settings.js) */
.saved-name { font: inherit; font-weight: 600; color: var(--label); background: transparent; border: 0;
  border-bottom: 1px dashed var(--separator); padding: 2px 0; width: 12ch; max-width: 100%; }
.saved-name:focus { outline: none; border-bottom: 1px solid var(--accent); }

/* Sun or shade on the route card (js/route-planner.js sunNote): the glow's colour */
.sun-note .sun-swatch { display: inline-block; width: 18px; height: 8px; margin-right: 6px; border-radius: 4px; vertical-align: 1px; opacity: .8; }

/* The pre-ride and Nerd mode agreements' line under the title */
.ride-sub { margin: 0 0 10px; font-size: 1rem; font-weight: 600; color: var(--label); }

/* ---- Whimsy: the special one (owner, 2026-10-19) -------------------------
   An iridescent rainbow, as iOS marks its AI features: the Whimsy button's outline (not its
   label), and the chosen route card while a Whimsy route is shown. Whimsy is only offered
   when it finds a route worth it (rare unless the trip is long), so it arrives with a
   shimmer (.whimsy-new, js/route-planner.js setWhimsy). */
@property --whimsy-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root { --whimsy: conic-gradient(from var(--whimsy-turn), #FF5FA2, #FF9F0A, #FFD60A, #34C759, #40C8E0, #5E5CE6, #BF5AF2, #FF5FA2); }
.profiles button[data-profile="whimsy"] { position: relative; font-weight: 600; }   /* (the label stays plain: owner) */
.profiles button[data-profile="whimsy"]::before,
:is(.whimsy-route .route-option[aria-checked="true"], .whimsy-route .route-summary)::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--whimsy);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none;
  animation: whimsy-spin 6s linear infinite; }
/* A soft glow round the chosen Whimsy button and route card (behind them: no isolation, so
   z-index −1 sits under their own background, in the panel's stacking context) */
.profiles button[data-profile="whimsy"][aria-checked="true"]::after,
:is(.whimsy-route .route-option[aria-checked="true"], .whimsy-route .route-summary)::after {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: var(--whimsy);
  filter: blur(8px); opacity: .35; pointer-events: none; animation: whimsy-spin 6s linear infinite; }
:is(.whimsy-route .route-option[aria-checked="true"], .whimsy-route .route-summary) { position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.whimsy-route .route-summary { border-radius: 12px; padding: 8px 10px; background: var(--surface); }
@keyframes whimsy-spin { to { --whimsy-turn: 360deg; } }
/* Arriving: a sweep of light across the button, twice */
.profiles button.whimsy-new { animation: whimsy-pop .5s var(--ease-ios, ease-out); }
.profiles button.whimsy-new::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%) -150% 0 / 200% 100% no-repeat;
  animation: whimsy-sweep 1.4s ease-in-out 2; }
@keyframes whimsy-pop { 0% { transform: scale(.85); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@keyframes whimsy-sweep { to { background-position: 150% 0; } }
@media (prefers-reduced-motion: reduce) {
  .profiles button[data-profile="whimsy"]::before, .profiles button[data-profile="whimsy"]::after,
  .whimsy-route :is(.route-option, .route-summary)::before, .whimsy-route :is(.route-option, .route-summary)::after,
  .profiles button.whimsy-new, .profiles button.whimsy-new::after { animation: none; }
}