/* Secret Rides design tokens — all --sr- variables, both themes.
   Theme switches with data-theme="dark" | "light" on <html>. Dark is default. */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Accent: Tussock — the gold of Southland tussock and gravel under a low sun.
     Warm enough to read against a dark screen in bright light, nothing like EVE3 blue or Kawhi orange. */
  --sr-accent: oklch(0.80 0.14 85);
  --sr-accent-hover: oklch(0.85 0.14 85);
  --sr-accent-soft: oklch(0.80 0.14 85 / 0.16);
  --sr-on-accent: #11181C;
  --sr-on-danger: #FFFFFF;        /* text on a danger-filled surface (SOS, 111) */

  /* Surfaces (named blacks) */
  --sr-bg-nav: #11181C;        /* Arsenic — top nav, tab bar */
  --sr-bg-side: #1D1F21;       /* Gunmetal — sidebar */
  --sr-bg: #222428;            /* Dark Gunmetal — content */
  --sr-surface: #2A2D31;       /* cards, inputs */
  --sr-surface-2: #33363B;     /* secondary buttons, pills */
  --sr-border: #3A3E44;
  --sr-border-strong: #50555C;

  /* Text */
  --sr-text: #FFFAFA;          /* Snow */
  --sr-text-2: #C9CDD2;
  --sr-text-3: #9AA0A6;
  --sr-nav-text: #FFFAFA;
  --sr-nav-text-2: #B0B5BB;

  /* Status — same lightness and chroma, hue varies */
  --sr-success: oklch(0.78 0.12 150);
  --sr-success-soft: oklch(0.78 0.12 150 / 0.18);
  --sr-warning: oklch(0.80 0.13 70);
  --sr-warning-soft: oklch(0.80 0.13 70 / 0.18);
  --sr-danger: oklch(0.74 0.15 25);
  --sr-danger-soft: oklch(0.74 0.15 25 / 0.18);
  --sr-info: oklch(0.78 0.10 230);
  --sr-info-soft: oklch(0.78 0.10 230 / 0.18);

  --sr-focus: var(--sr-accent);
  --sr-overlay: rgb(17 24 28 / 0.6);

  /* Shadow */
  --sr-shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --sr-shadow-2: 0 6px 20px rgb(0 0 0 / 0.45);

  /* Type */
  --sr-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sr-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sr-lh: 1.5;
  --sr-fs-title: 24px;
  --sr-fs-section: 16px;
  --sr-fs-body: 14px;
  --sr-fs-small: 13px;
  --sr-fs-xs: 12px;
  --sr-fs-label: 11px;
  --sr-fs-code: 28px;
  --sr-fw-semibold: 600;
  --sr-fw-medium: 500;
  --sr-fw-regular: 400;
  --sr-tracking-label: 0.06em;

  /* Spacing */
  --sr-sp-1: 5px;
  --sr-sp-2: 8px;
  --sr-sp-3: 10px;
  --sr-sp-4: 15px;
  --sr-sp-5: 20px;
  --sr-sp-6: 25px;
  --sr-sp-7: 30px;
  --sr-card-pad: 20px;
  --sr-list-pad: 15px 20px;

  /* Radius */
  --sr-r: 3px;
  --sr-r-panel: 6px;
  --sr-r-pill: 10px;
  --sr-r-round: 50%;

  /* Layout */
  --sr-nav-h: 60px;
  --sr-side-w: 240px;
  --sr-tab-h: 64px;
  --sr-content-max: 1400px;
  --sr-content-pad: 20px;
  --sr-touch: 48px;
  --sr-safe-top: env(safe-area-inset-top, 0px);
  --sr-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sr-safe-left: env(safe-area-inset-left, 0px);
  --sr-safe-right: env(safe-area-inset-right, 0px);

  --sr-duration: 160ms;

  /* ---- Release 2: map, routing, stages ---- */
  /* Base map fills (MapLibre style direction lives in Map Style.md) */
  --sr-map-land: #24282C;
  --sr-map-land-2: #2B3034;      /* built-up */
  --sr-map-green: #1F2B24;       /* parks, DOC land */
  --sr-map-water: #16252C;
  --sr-map-contour: #343A3F;
  --sr-map-hillshade: 0.35;      /* opacity */

  /* Road classes on the base map — never Tussock */
  --sr-road-motorway: #3C4147;   /* recedes */
  --sr-road-highway: #474D54;
  --sr-road-local: #5A6068;
  --sr-road-gravel: #8A7F63;     /* dashed casing */
  --sr-road-trail: #6E9C7A;      /* cycle trails stand out */
  --sr-map-label: #C9CDD2;
  --sr-map-label-halo: #11181C;

  /* Planned route + surface legend */
  --sr-route: var(--sr-accent);
  --sr-route-casing: #11181C;
  --sr-surf-sealed: oklch(0.72 0.05 250);
  --sr-surf-gravel: oklch(0.80 0.14 85);
  --sr-surf-trail: oklch(0.78 0.12 150);
  --sr-surf-track: oklch(0.74 0.15 25);

  /* Map chrome */
  --sr-control: 48px;
  --sr-control-bg: rgb(17 24 28 / 0.88);
  --sr-control-border: #3A3E44;
  --sr-sheet-r: 14px;
  --sr-sheet-grab: #50555C;
  --sr-elev-fill: oklch(0.80 0.14 85 / 0.22);
}

:root[data-theme="light"] {
  color-scheme: light;

  --sr-accent: oklch(0.50 0.12 70);
  --sr-accent-hover: oklch(0.45 0.12 70);
  --sr-accent-soft: oklch(0.50 0.12 70 / 0.14);
  --sr-on-accent: #FAF9F6;

  --sr-bg-nav: #11181C;        /* nav stays Arsenic in both themes */
  --sr-bg-side: #F8F8FF;       /* Ghost White */
  --sr-bg: #FAF9F6;            /* Off White */
  --sr-surface: #FFFAFA;       /* Snow */
  --sr-surface-2: #EFECE5;
  --sr-border: #DDD9D0;
  --sr-border-strong: #B9B4A9;

  --sr-text: #1D1F21;
  --sr-text-2: #4A4E54;
  --sr-text-3: #666B71;
  --sr-nav-text: #FFFAFA;
  --sr-nav-text-2: #B0B5BB;

  --sr-success: oklch(0.50 0.12 150);
  --sr-success-soft: oklch(0.50 0.12 150 / 0.14);
  --sr-warning: oklch(0.55 0.13 70);
  --sr-warning-soft: oklch(0.55 0.13 70 / 0.14);
  --sr-danger: oklch(0.52 0.17 25);
  --sr-danger-soft: oklch(0.52 0.17 25 / 0.12);
  --sr-info: oklch(0.50 0.10 230);
  --sr-info-soft: oklch(0.50 0.10 230 / 0.14);

  --sr-overlay: rgb(29 31 33 / 0.4);
  --sr-shadow-1: 0 1px 2px rgb(29 31 33 / 0.10);
  --sr-shadow-2: 0 6px 20px rgb(29 31 33 / 0.16);

  --sr-map-land: #F1EDE4;
  --sr-map-land-2: #E7E2D6;
  --sr-map-green: #E0E9D7;
  --sr-map-water: #CADFE8;
  --sr-map-contour: #DCD5C6;
  --sr-map-hillshade: 0.22;

  --sr-road-motorway: #D8D2C4;
  --sr-road-highway: #CFC8B8;
  --sr-road-local: #FFFFFF;
  --sr-road-gravel: #B39A63;
  --sr-road-trail: #3F7A52;
  --sr-map-label: #3A3E44;
  --sr-map-label-halo: #FAF9F6;

  --sr-route-casing: #FFFAFA;
  --sr-surf-sealed: oklch(0.50 0.06 250);
  --sr-surf-gravel: oklch(0.52 0.12 70);
  --sr-surf-trail: oklch(0.45 0.12 150);
  --sr-surf-track: oklch(0.52 0.17 25);

  --sr-control-bg: rgb(255 250 250 / 0.94);
  --sr-control-border: #DDD9D0;
  --sr-sheet-grab: #B9B4A9;
  --sr-elev-fill: oklch(0.50 0.12 70 / 0.18);
}

/* Phone: larger body text for outdoor reading.
   0.00.154 fix: the defaults above are set on ":root, :root[data-theme=dark]", a two-part selector that outranked the plain
   ":root" here, so in dark mode (and in every palette, which adds a second attribute) the phone sizes never applied and the
   Sign in boxes sat at 14px — the iPhone zooms on a box under 16px. The override now matches :root at any attribute count. */
@media (max-width: 767px) {
  :root,
  :root[data-theme],
  :root[data-palette][data-theme] {
    --sr-fs-body: 16px;
    --sr-fs-small: 14px;
    --sr-fs-xs: 13px;
    --sr-card-pad: 15px;
    --sr-list-pad: 15px;
  }
}

/* ============================================================
   Release 2.1 — map view controls (3D, compass), pin info, wind
   ============================================================ */
:root,
:root[data-theme="dark"] {
  /* Compass */
  --sr-compass-n: var(--sr-danger);      /* north half of the needle */
  --sr-compass-s: var(--sr-text-3);
  --sr-compass-ring: var(--sr-border-strong);

  /* 3D view */
  --sr-tilt: 60deg;                      /* pitch when 3D is on */
  --sr-tilt-persp: 900px;
  --sr-tilt-fade: rgb(17 24 28 / 0.85);  /* far-distance fade, not a sky layer */

  /* Wind */
  --sr-wind-head: var(--sr-warning);
  --sr-wind-tail: var(--sr-success);
  --sr-wind-cross: var(--sr-text-2);
  --sr-wind-arrow: var(--sr-text-2);

  /* Pin gestures */
  --sr-pin-hold: 520ms;                  /* hold-to-open duration */
  --sr-pin-lift: 0 10px 16px rgb(0 0 0 / 0.5);
  --sr-pin-shadow: rgb(0 0 0 / 0.45);
}

:root[data-theme="light"] {
  --sr-tilt-fade: rgb(250 249 246 / 0.85);
  --sr-pin-lift: 0 10px 16px rgb(29 31 33 / 0.28);
  --sr-pin-shadow: rgb(29 31 33 / 0.3);
}

/* ============================================================
   Release 2b — one missing step in the surface ramp.
   surface-3 is the "inset / track / tile" level. Insets always sit ON
   surface-2 (inside .sr-offline, .sr-nearby-row, sheets), so it is set a
   real step below surface-2 — 1.27:1 light, 1.29:1 dark — enough to read
   as a recess at a glance without becoming another surface colour.
   ============================================================ */
:root,
:root[data-theme="dark"] {
  --sr-surface-3: #212429;
}
:root[data-theme="light"] {
  --sr-surface-3: #D8D3C8;
}


/* ============================================================
   0.00.061 — palettes. A palette is a second attribute, data-palette on
   <html> (kept in localStorage sr-palette, set by sr-build.js on every
   screen). The day/night toggle keeps switching data-theme underneath it,
   so every palette has a dark and a light face. No data-palette = Tussock.
   ============================================================ */

/* Poster — the palette of the Datawrapper chart-types poster: deep teal on
   a pale teal wash, navy for the nav and headings, magenta only for danger. */
:root[data-palette="poster"][data-theme="light"] {
  color-scheme: light;
  --sr-accent: #007495;
  --sr-accent-hover: #16607A;
  --sr-accent-soft: rgb(0 116 149 / 0.14);
  --sr-on-accent: #FFFFFF;
  --sr-bg-nav: #1D4078;
  --sr-bg-side: #EAF4F6;
  --sr-bg: #F3F8F9;
  --sr-surface: #FFFFFF;
  --sr-surface-2: #E4F0F2;
  --sr-surface-3: #D2E4E8;
  --sr-border: #CFE0E4;
  --sr-border-strong: #9EC4CC;
  --sr-text: #202020;
  --sr-text-2: #3F5560;
  --sr-text-3: #5C7580;
  --sr-nav-text: #FFFFFF;
  --sr-nav-text-2: #B4E1E4;
  --sr-success: #0F8A6C;
  --sr-success-soft: rgb(15 138 108 / 0.14);
  --sr-warning: #B0741A;
  --sr-warning-soft: rgb(176 116 26 / 0.14);
  --sr-danger: #B24079;
  --sr-danger-soft: rgb(178 64 121 / 0.12);
  --sr-info: #1D4078;
  --sr-info-soft: rgb(29 64 120 / 0.12);
  --sr-overlay: rgb(29 64 120 / 0.4);
  --sr-shadow-1: 0 1px 2px rgb(29 64 120 / 0.10);
  --sr-shadow-2: 0 6px 20px rgb(29 64 120 / 0.16);
  --sr-map-land: #EEF3F4; --sr-map-land-2: #E3EAEC; --sr-map-green: #DDEBE3; --sr-map-water: #B4E1E4; --sr-map-contour: #D5DFE2; --sr-map-hillshade: 0.22;
  --sr-road-motorway: #CFD8DB; --sr-road-highway: #C4CED2; --sr-road-local: #FFFFFF; --sr-road-gravel: #8A7F63; --sr-road-trail: #0F8A6C;
  --sr-map-label: #3F5560; --sr-map-label-halo: #F3F8F9;
  --sr-route-casing: #FFFFFF;
  --sr-surf-sealed: #1D4078; --sr-surf-gravel: #007495; --sr-surf-trail: #1FBDC6; --sr-surf-track: #B24079;
  --sr-control-bg: rgb(255 255 255 / 0.94); --sr-control-border: #CFE0E4; --sr-sheet-grab: #9EC4CC;
  --sr-elev-fill: rgb(0 116 149 / 0.18);
  --sr-tilt-fade: rgb(243 248 249 / 0.85); --sr-pin-lift: 0 10px 16px rgb(29 64 120 / 0.28); --sr-pin-shadow: rgb(29 64 120 / 0.3);
  --sr-wind-head: #B0741A; --sr-wind-tail: #0F8A6C;
}

/* Mono (W4) — neutral greyscale, no colour cast. State is carried by
   lightness, wording and icons; nothing on screen depends on hue. */
:root[data-palette="mono"][data-theme="light"] {
  color-scheme: light;
  --sr-accent: #1F1F1F;
  --sr-accent-hover: #000000;
  --sr-accent-soft: rgb(31 31 31 / 0.10);
  --sr-on-accent: #FFFFFF;
  --sr-bg-nav: #1F1F1F;
  --sr-bg-side: #F2F2F2;
  --sr-bg: #F5F5F5;
  --sr-surface: #FFFFFF;
  --sr-surface-2: #E8E8E8;
  --sr-surface-3: #D9D9D9;
  --sr-border: #D9D9D9;
  --sr-border-strong: #A6A6A6;
  --sr-text: #1F1F1F;
  --sr-text-2: #4D4D4D;
  --sr-text-3: #6B6B6B;
  --sr-nav-text: #FFFFFF;
  --sr-nav-text-2: #BFBFBF;
  --sr-success: #2E2E2E;
  --sr-success-soft: rgb(46 46 46 / 0.10);
  --sr-warning: #595959;
  --sr-warning-soft: rgb(89 89 89 / 0.12);
  --sr-danger: #000000;
  --sr-danger-soft: rgb(0 0 0 / 0.10);
  --sr-info: #4D4D4D;
  --sr-info-soft: rgb(77 77 77 / 0.10);
  --sr-overlay: rgb(31 31 31 / 0.4);
  --sr-shadow-1: 0 1px 2px rgb(0 0 0 / 0.10);
  --sr-shadow-2: 0 6px 20px rgb(0 0 0 / 0.16);
  --sr-map-land: #EFEFEF; --sr-map-land-2: #E4E4E4; --sr-map-green: #E9E9E9; --sr-map-water: #D4D4D4; --sr-map-contour: #DCDCDC; --sr-map-hillshade: 0.22;
  --sr-road-motorway: #D2D2D2; --sr-road-highway: #C8C8C8; --sr-road-local: #FFFFFF; --sr-road-gravel: #8C8C8C; --sr-road-trail: #5A5A5A;
  --sr-map-label: #3A3A3A; --sr-map-label-halo: #F5F5F5;
  --sr-route-casing: #FFFFFF;
  --sr-surf-sealed: #A6A6A6; --sr-surf-gravel: #4D4D4D; --sr-surf-trail: #7A7A7A; --sr-surf-track: #1F1F1F;
  --sr-control-bg: rgb(255 255 255 / 0.94); --sr-control-border: #D9D9D9; --sr-sheet-grab: #A6A6A6;
  --sr-elev-fill: rgb(31 31 31 / 0.14);
  --sr-tilt-fade: rgb(245 245 245 / 0.85); --sr-pin-lift: 0 10px 16px rgb(0 0 0 / 0.28); --sr-pin-shadow: rgb(0 0 0 / 0.3);
  --sr-wind-head: #595959; --sr-wind-tail: #2E2E2E; --sr-wind-cross: #8C8C8C; --sr-wind-arrow: #4D4D4D;
  --sr-compass-n: #1F1F1F;
}

/* Colour-safe (W5) — azure blue accent, status and surfaces from the
   Okabe–Ito set so every pair reads apart under all common CVD types. */
:root[data-palette="colour-safe"][data-theme="light"] {
  color-scheme: light;
  --sr-accent: #0072B2;
  --sr-accent-hover: #005A8E;
  --sr-accent-soft: rgb(0 114 178 / 0.14);
  --sr-on-accent: #FFFFFF;
  --sr-bg-nav: #10334A;
  --sr-bg-side: #F0F5F9;
  --sr-bg: #F5F8FB;
  --sr-surface: #FFFFFF;
  --sr-surface-2: #E6EEF4;
  --sr-surface-3: #D6E2EB;
  --sr-border: #D3DEE7;
  --sr-border-strong: #A3B8C8;
  --sr-text: #1B2530;
  --sr-text-2: #445562;
  --sr-text-3: #5F7381;
  --sr-nav-text: #FFFFFF;
  --sr-nav-text-2: #A9CDE8;
  --sr-success: #007A5E;
  --sr-success-soft: rgb(0 158 115 / 0.14);
  --sr-warning: #A66B00;
  --sr-warning-soft: rgb(230 159 0 / 0.16);
  --sr-danger: #B24A00;
  --sr-danger-soft: rgb(213 94 0 / 0.12);
  --sr-info: #0072B2;
  --sr-info-soft: rgb(86 180 233 / 0.18);
  --sr-overlay: rgb(16 51 74 / 0.4);
  --sr-shadow-1: 0 1px 2px rgb(16 51 74 / 0.10);
  --sr-shadow-2: 0 6px 20px rgb(16 51 74 / 0.16);
  --sr-map-land: #F0F3F5; --sr-map-land-2: #E5EAEE; --sr-map-green: #E3EDE6; --sr-map-water: #C9E3F3; --sr-map-contour: #D8DFE4; --sr-map-hillshade: 0.22;
  --sr-road-motorway: #D2D9DE; --sr-road-highway: #C7CFD5; --sr-road-local: #FFFFFF; --sr-road-gravel: #A66B00; --sr-road-trail: #007A5E;
  --sr-map-label: #445562; --sr-map-label-halo: #F5F8FB;
  --sr-route-casing: #FFFFFF;
  --sr-surf-sealed: #56B4E9; --sr-surf-gravel: #E69F00; --sr-surf-trail: #009E73; --sr-surf-track: #D55E00;
  --sr-control-bg: rgb(255 255 255 / 0.94); --sr-control-border: #D3DEE7; --sr-sheet-grab: #A3B8C8;
  --sr-elev-fill: rgb(0 114 178 / 0.16);
  --sr-tilt-fade: rgb(245 248 251 / 0.85); --sr-pin-lift: 0 10px 16px rgb(16 51 74 / 0.28); --sr-pin-shadow: rgb(16 51 74 / 0.3);
  --sr-wind-head: #D55E00; --sr-wind-tail: #0072B2; --sr-compass-n: #D55E00;
}


/* ---- Dark faces: the default dark surfaces stay; only what carries the palette changes. ---- */
:root[data-palette="poster"][data-theme="dark"] {
  --sr-accent: #1FBDC6; --sr-accent-hover: #5AD3DA; --sr-accent-soft: rgb(31 189 198 / 0.16); --sr-on-accent: #0F1A26;
  --sr-bg-nav: #14304F; --sr-bg-side: #182029; --sr-bg: #1C2530; --sr-surface: #243040; --sr-surface-2: #2C3A4B; --sr-surface-3: #1A222C;
  --sr-border: #34455A; --sr-border-strong: #4C6280;
  --sr-nav-text-2: #B4E1E4;
  --sr-success: #4FCFA6; --sr-success-soft: rgb(79 207 166 / 0.18);
  --sr-warning: #E5B25A; --sr-warning-soft: rgb(229 178 90 / 0.18);
  --sr-danger: #E07AB0; --sr-danger-soft: rgb(224 122 176 / 0.18);
  --sr-info: #9EC4E8; --sr-info-soft: rgb(158 196 232 / 0.18);
  --sr-map-land: #1F2934; --sr-map-land-2: #26313D; --sr-map-green: #1F2E2C; --sr-map-water: #16303A; --sr-map-contour: #34424F;
  --sr-road-trail: #4FCFA6;
  --sr-surf-sealed: #9EC4E8; --sr-surf-gravel: #1FBDC6; --sr-surf-trail: #4FCFA6; --sr-surf-track: #E07AB0;
  --sr-elev-fill: rgb(31 189 198 / 0.22); --sr-wind-tail: #4FCFA6; --sr-wind-head: #E5B25A;
}
:root[data-palette="mono"][data-theme="dark"] {
  --sr-on-danger: #141414;
  --sr-accent: #E6E6E6; --sr-accent-hover: #FFFFFF; --sr-accent-soft: rgb(230 230 230 / 0.14); --sr-on-accent: #141414;
  --sr-bg-nav: #0F0F0F; --sr-bg-side: #1A1A1A; --sr-bg: #1F1F1F; --sr-surface: #282828; --sr-surface-2: #313131; --sr-surface-3: #1C1C1C;
  --sr-border: #3A3A3A; --sr-border-strong: #545454;
  --sr-text: #FFFFFF; --sr-text-2: #CFCFCF; --sr-text-3: #A0A0A0; --sr-nav-text-2: #B5B5B5;
  --sr-success: #DADADA; --sr-success-soft: rgb(218 218 218 / 0.14);
  --sr-warning: #A8A8A8; --sr-warning-soft: rgb(168 168 168 / 0.16);
  --sr-danger: #FFFFFF; --sr-danger-soft: rgb(255 255 255 / 0.14);
  --sr-info: #C4C4C4; --sr-info-soft: rgb(196 196 196 / 0.14);
  --sr-map-land: #242424; --sr-map-land-2: #2B2B2B; --sr-map-green: #262626; --sr-map-water: #1A1A1A; --sr-map-contour: #353535;
  --sr-road-gravel: #8C8C8C; --sr-road-trail: #B5B5B5; --sr-map-label: #CFCFCF; --sr-map-label-halo: #0F0F0F;
  --sr-surf-sealed: #7A7A7A; --sr-surf-gravel: #E6E6E6; --sr-surf-trail: #B5B5B5; --sr-surf-track: #4D4D4D;
  --sr-elev-fill: rgb(230 230 230 / 0.16); --sr-wind-head: #A8A8A8; --sr-wind-tail: #DADADA; --sr-wind-cross: #7A7A7A; --sr-wind-arrow: #CFCFCF; --sr-compass-n: #FFFFFF;
}
:root[data-palette="colour-safe"][data-theme="dark"] {
  --sr-accent: #56B4E9; --sr-accent-hover: #86CBF1; --sr-accent-soft: rgb(86 180 233 / 0.18); --sr-on-accent: #0E1A24;
  --sr-bg-nav: #0F1E2B;
  --sr-success: #3FC9A0; --sr-success-soft: rgb(0 158 115 / 0.22);
  --sr-warning: #E69F00; --sr-warning-soft: rgb(230 159 0 / 0.20);
  --sr-danger: #F08A47; --sr-danger-soft: rgb(213 94 0 / 0.20);
  --sr-info: #56B4E9; --sr-info-soft: rgb(86 180 233 / 0.18);
  --sr-road-gravel: #E69F00; --sr-road-trail: #3FC9A0;
  --sr-surf-sealed: #56B4E9; --sr-surf-gravel: #E69F00; --sr-surf-trail: #3FC9A0; --sr-surf-track: #F08A47;
  --sr-elev-fill: rgb(86 180 233 / 0.20); --sr-wind-head: #F08A47; --sr-wind-tail: #56B4E9; --sr-compass-n: #F08A47;
}

/* 0.00.108 — Great Rides and the Tour Aotearoa on the map.
   A Great Ride is a cycle trail, so it takes the map's trail colour. The Tour takes the info blue, so it never reads as the
   rider's own route (accent) or a trail. Both follow every palette and theme through the tokens they point at. */
:root{--sr-greatride:var(--sr-road-trail);--sr-tour:var(--sr-info)}

/* 0.00.111 — NZ Routes. A violet-magenta: not the trail green, the Tour blue, your own route's gold, or danger's red.
   Mono has no hue to spare, so its line is dashed instead (--sr-nzroute-dash), and the Layers swatch is dashed to match. */
:root,:root[data-theme="dark"]{--sr-nzroute:oklch(0.74 0.14 318);--sr-nzroute-dash:none}
:root[data-theme="light"]{--sr-nzroute:oklch(0.50 0.17 318)}
:root[data-palette="poster"][data-theme="light"]{--sr-nzroute:#6A4FB0}
:root[data-palette="poster"][data-theme="dark"]{--sr-nzroute:#B9A3F0}
:root[data-palette="colour-safe"][data-theme="light"]{--sr-nzroute:#A8508A}
:root[data-palette="colour-safe"][data-theme="dark"]{--sr-nzroute:#CC79A7}
:root[data-palette="mono"][data-theme="light"]{--sr-nzroute:#6B6B6B;--sr-nzroute-dash:7 5;--sr-nzroute-swatch:repeating-linear-gradient(90deg,#6B6B6B 0 6px,transparent 6px 9px)}
:root[data-palette="mono"][data-theme="dark"]{--sr-nzroute:#B5B5B5;--sr-nzroute-dash:7 5;--sr-nzroute-swatch:repeating-linear-gradient(90deg,#B5B5B5 0 6px,transparent 6px 9px)}

/* 0.00.130 — Your rides. A vermilion: not the trail green (Great Rides), the info blue (Tour), the violet (NZ Routes),
   or the gold of your planned route and the selected edge. Mono gets dots instead of a hue. */
:root,:root[data-theme="dark"]{--sr-yourride:oklch(0.72 0.17 40);--sr-yourride-dash:none}
:root[data-theme="light"]{--sr-yourride:oklch(0.58 0.19 36)}
:root[data-palette="poster"][data-theme="light"]{--sr-yourride:#C2491D}
:root[data-palette="poster"][data-theme="dark"]{--sr-yourride:#F2875C}
:root[data-palette="colour-safe"][data-theme="light"]{--sr-yourride:#D55E00}
:root[data-palette="colour-safe"][data-theme="dark"]{--sr-yourride:#E69F00}
:root[data-palette="mono"][data-theme="light"]{--sr-yourride:#3A3A3A;--sr-yourride-dash:1 5;--sr-yourride-swatch:repeating-linear-gradient(90deg,#3A3A3A 0 3px,transparent 3px 6px)}
:root[data-palette="mono"][data-theme="dark"]{--sr-yourride:#E0E0E0;--sr-yourride-dash:1 5;--sr-yourride-swatch:repeating-linear-gradient(90deg,#E0E0E0 0 3px,transparent 3px 6px)}

/* 0.00.134 — Your rides, the other rides while one is open. SOLID (used at opacity 1) so overlaps never darken:
   a pale, greyed vermilion that sits just off the map paper in each theme. */
:root,:root[data-theme="dark"]{--sr-yourride-faded:oklch(0.43 0.035 40)}
:root[data-theme="light"]{--sr-yourride-faded:oklch(0.86 0.035 45)}
:root[data-palette="poster"][data-theme="light"]{--sr-yourride-faded:#E6C9BC}
:root[data-palette="poster"][data-theme="dark"]{--sr-yourride-faded:#6A4A3E}
:root[data-palette="colour-safe"][data-theme="light"]{--sr-yourride-faded:#E9C9AE}
:root[data-palette="colour-safe"][data-theme="dark"]{--sr-yourride-faded:#6B5233}
:root[data-palette="mono"][data-theme="light"]{--sr-yourride-faded:#C4C4C4}
:root[data-palette="mono"][data-theme="dark"]{--sr-yourride-faded:#585858}

/* 0.00.135 — Mates' rides. Pink: clear of green (Great Rides), blue (Tour), violet (NZ Routes), vermilion (yours), gold (accent). */
:root,:root[data-theme="dark"]{--sr-materide:oklch(0.74 0.16 350);--sr-materide-dash:none}
:root[data-theme="light"]{--sr-materide:oklch(0.55 0.21 355)}
:root[data-palette="poster"][data-theme="light"]{--sr-materide:#B5307A}
:root[data-palette="poster"][data-theme="dark"]{--sr-materide:#F08CC0}
:root[data-palette="colour-safe"][data-theme="light"]{--sr-materide:#CC79A7}
:root[data-palette="colour-safe"][data-theme="dark"]{--sr-materide:#E7A6CB}
:root[data-palette="mono"][data-theme="light"]{--sr-materide:#3A3A3A;--sr-materide-dash:8 5;--sr-materide-swatch:repeating-linear-gradient(90deg,#3A3A3A 0 8px,transparent 8px 12px)}
:root[data-palette="mono"][data-theme="dark"]{--sr-materide:#E0E0E0;--sr-materide-dash:8 5;--sr-materide-swatch:repeating-linear-gradient(90deg,#E0E0E0 0 8px,transparent 8px 12px)}

/* 0.00.136 — 3D ride flyover behind Sign in and Create account (sr-flyover.js). Ridden = the route gold on a dark casing;
   still ahead = a thin paper line at 45%; the dot = gold with a paper ring. The scrims are built on --sr-bg so every palette follows. */
:root,:root[data-theme="dark"]{
  --sr-flyover-ridden:var(--sr-route);
  --sr-flyover-casing:var(--sr-route-casing);
  --sr-flyover-ahead:#FFFAFA;
  --sr-flyover-ahead-opacity:0.45;
  --sr-flyover-dot:var(--sr-accent);
  --sr-flyover-dot-ring:#FFFAFA;
  --sr-flyover-scrim-wide:
    radial-gradient(ellipse 360px 62% at 50% 50%, color-mix(in srgb, var(--sr-bg) 72%, transparent) 0%, color-mix(in srgb, var(--sr-bg) 44%, transparent) 62%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--sr-bg) 70%, transparent) 0%, transparent 24%, transparent 76%, color-mix(in srgb, var(--sr-bg) 72%, transparent) 100%),
    linear-gradient(color-mix(in srgb, var(--sr-bg) 22%, transparent), color-mix(in srgb, var(--sr-bg) 22%, transparent));
  --sr-flyover-scrim-phone:
    linear-gradient(180deg, var(--sr-bg) 0%, var(--sr-bg) 12%, color-mix(in srgb, var(--sr-bg) 80%, transparent) 22%, color-mix(in srgb, var(--sr-bg) 62%, transparent) 30%, color-mix(in srgb, var(--sr-bg) 46%, transparent) 62%, color-mix(in srgb, var(--sr-bg) 22%, transparent) 84%, color-mix(in srgb, var(--sr-bg) 58%, transparent) 100%);
  --sr-flyover-text-halo:0 0 2px var(--sr-bg),0 0 8px var(--sr-bg),0 0 18px color-mix(in srgb, var(--sr-bg) 70%, transparent);
  --sr-flyover-fade-in:1200ms;
  --sr-flyover-fade-out:700ms;
}
:root[data-theme="light"]{--sr-flyover-ahead:#3A3E44;--sr-flyover-ahead-opacity:0.5;--sr-flyover-dot-ring:#FFFFFF}

/* 0.00.137 — Flyover caption profile. Ridden fill = route gold at 30%, ahead fill = the paper line colour at 7%. */
:root,:root[data-theme="dark"],:root[data-theme="light"]{
  --sr-flyover-caption-w:304px;
  --sr-flyover-profile-h:36px;
  --sr-flyover-profile-ridden-fill:color-mix(in srgb, var(--sr-flyover-ridden) 30%, transparent);
  --sr-flyover-profile-ahead-fill:color-mix(in srgb, var(--sr-flyover-ahead) 7%, transparent);
  --sr-flyover-profile-step:400ms;
}

/* 0.00.139 — Sign in card fold. Opening: height 280 ms, contents fade in 160 ms after an 80 ms wait. Closing: the same, at once. */
:root{
  --sr-auth-fold-bar-h:64px;
  --sr-auth-fold-dur:280ms;
  --sr-auth-fold-ease:cubic-bezier(.2,0,0,1);
  --sr-auth-fold-fade:160ms;
  --sr-auth-fold-fade-delay:80ms;
}

/* 0.00.141 — Flyover water. Its own token, not --sr-map-water: that one is tuned for the flat app map and disappears into
   the darkened 3D picture map behind the scrim. A muted slate-teal one step lighter and bluer than the land, so the coast and
   lakes read without pulling the eye from the gold. The flyover's terrain is dark in both themes, so day uses the same
   colours. Mono keeps grey water (a lighter grey than the land). */
:root,:root[data-theme="dark"],:root[data-theme="light"]{
  --sr-flyover-water:#21414F;
  --sr-flyover-water-opacity:0.92;
  --sr-flyover-shore:#3F6D7E;
  --sr-flyover-river:#3A6474;
  --sr-flyover-river-opacity:0.7;
}
:root[data-palette="mono"]{--sr-flyover-water:#34383C;--sr-flyover-shore:#4A4F54;--sr-flyover-river:#464B50}

/* 0.00.142 — Bike photo tile beside the flyover caption. */
:root{--sr-flyover-bike-w:104px;--sr-flyover-bike-gap:8px}

/* 0.00.144 — Phones: bike thumb in the closed Sign in bar. */
:root{--sr-auth-fold-thumb:48px}

/* 0.00.146 — Satellite base map. Same photos in both themes; the casing and halo are fixed dark and light, not theme colours.
   The night theme pulls the imagery down a little so the controls and pins keep their contrast. */
:root,:root[data-theme="light"]{
  --sr-sat-filter:none;
  --sr-sat-names-opacity:0.95;
  --sr-sat-casing:rgb(10 14 18 / 0.82);
  --sr-sat-halo:rgb(255 255 255 / 0.92);
}
:root[data-theme="dark"]{--sr-sat-filter:brightness(0.86) saturate(0.9)}

/* 0.00.148 — Popular tracks. One hue at five strengths (opacity and width), never a rainbow. Teal: not the trail green (Great Rides),
   the Tour's info blue, the NZ Routes violet, the mates' pink, your vermilion or the route's gold. Poster's accent is already teal,
   so poster takes amber; colour-safe and mono take the map's ink and let the strength carry the meaning. */
:root,:root[data-theme="dark"]{--sr-heat:oklch(0.80 0.11 195)}
:root[data-theme="light"]{--sr-heat:oklch(0.50 0.10 195)}
:root[data-palette="poster"][data-theme="light"]{--sr-heat:#B0741A}
:root[data-palette="poster"][data-theme="dark"]{--sr-heat:#E5B25A}
:root[data-palette="colour-safe"][data-theme="light"]{--sr-heat:#1B2530}
:root[data-palette="colour-safe"][data-theme="dark"]{--sr-heat:#FFFFFF}
:root[data-palette="mono"][data-theme="light"]{--sr-heat:#1F1F1F}
:root[data-palette="mono"][data-theme="dark"]{--sr-heat:#FFFFFF}