/* ─────────────────────────────────────────────────────────────────────────
MOTO NAV — Rally roadbook aesthetic
Dark, high-contrast UI optimized for outdoor / through-visor visibility.
Amber accents, monospaced numerics, generous hit targets.
───────────────────────────────────────────────────────────────────────── */
:root {
--bg-deep: #0a0a0a;
--bg-panel: #141414;
--bg-elev: #1c1c1c;
--bg-elev-hi: #262626;
/* Borders and secondary text lifted one Tailwind grey step for
higher outdoor / through-visor legibility. Old values are kept
as a comment for reference in case something looks too bright. */
--line: #404040; /* was #2a2a2a (gray-750ish) → gray-700 */
--line-hi: #525252; /* was #3a3a3a → gray-600 */
--text: #f5f5f4;
--text-dim: #d4d4d4; /* was #a3a3a3 → gray-300, contrast 14:1 on bg-panel */
--text-faint: #a3a3a3; /* was #525252 → gray-400, contrast 8:1 on bg-panel */
--amber: #f59e0b;
--amber-hi: #fbbf24;
--amber-dim: #78350f;
--green: #84cc16;
--red: #ef4444;
--route-direct: #fbbf24;
--route-adv: #f97316;
/* Foreground color used on top of amber accents (button text, modal
titlebar text, marker borders). Stays dark across all themes so the
amber stays readable regardless of the page background. */
--on-amber: #0a0a0a;
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
--radius: 4px;
--radius-lg: 8px;
--shadow: 0 10px 30px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4);
}
/* ─────────────────────────────────────────────────────────────────────────
Light theme — same rally-roadbook layout, inverted palette. Amber stays
the signature accent; page background flips to off-white with a clear
information hierarchy in stone-gray text. Map style is unchanged and
remains dark, which works well as a "screen" inside the light chrome.
Activated by adding `theme-light` to the element.
───────────────────────────────────────────────────────────────────────── */
:root.theme-light {
--bg-deep: #fafaf9;
--bg-panel: #ffffff;
--bg-elev: #f5f5f4;
--bg-elev-hi: #e7e5e4;
--line: #e7e5e4;
--line-hi: #a8a29e;
--text: #1c1917;
--text-dim: #57534e;
/* Lifted one stone step (was #a8a29e ≈ stone-400; contrast on white
was only 2.7:1 — failed AA for body text). Now stone-500 at ~5:1
so faint captions / metadata stay readable in sunlight too. */
--text-faint: #78716c;
--amber: #f59e0b;
--amber-hi: #d97706;
--amber-dim: #fde68a;
--green: #65a30d;
--red: #dc2626;
--route-direct: #d97706;
--route-adv: #b45309;
--on-amber: #1c1917;
--shadow: 0 4px 14px rgba(15,12,10,0.08), 0 1px 4px rgba(15,12,10,0.04);
}
* { box-sizing: border-box; }
/* Following PizzaTool's pattern: html/body in normal flow with no
position: fixed. `min-height: 100dvh` lets the body genuinely fill the
physical screen on iOS PWA (where the dvh unit DOES expand into the
safe-area band even though `position: fixed` containers don't).
`overflow: hidden` on body keeps the app feel — no rubber-band scroll —
without putting position: fixed on the root. */
html, body {
margin: 0;
padding: 0;
}
html {
background: var(--bg-deep);
/* Disable scrolling entirely — Moto Nav is map-pan, not page-pan. The
map element handles its own gestures via MapLibre. overscroll-behavior
also kills the iOS rubber-band / pull-to-refresh effect. */
overflow: hidden;
overscroll-behavior: none;
height: 100%;
}
body {
width: 100%;
/* Layered fallback. iOS PWA initial-paint dvh is buggy short; --app-h
comes from the inline script reading screen.height (physical screen)
so it stays honest. */
min-height: 100vh;
min-height: 100dvh;
min-height: var(--app-h, 100dvh);
overflow: hidden;
overscroll-behavior: none;
/* touch-action: none on body blocks the browser's default touch
handling (drag-scroll, pinch-zoom-on-page). MapLibre attaches its
own touch listeners on its canvas and isn't affected. */
touch-action: none;
font-family: var(--font-display);
background: var(--bg-deep);
color: var(--text);
-webkit-font-smoothing: antialiased;
/* App-style: no text caret on stray clicks, no iOS grey tap-flash.
Selectable elements (search inputs, the beta-gate code input, the
address-picker input, the settings address pickers, etc.) opt
back in via the input/textarea override below. */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* Re-enable selection + the I-beam caret on actual text-entry surfaces
so the rider can still type, select, and paste into them. */
input, textarea, [contenteditable="true"] {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
button, input { font-family: inherit; color: inherit; }
/* `position: relative` (NOT fixed) — this is the key change for iOS PWA.
Children with position: absolute reference #app's box, which is a
normal-flow block sized by `min-height: 100dvh`. In iOS PWA standalone
mode, `100dvh` resolves to the FULL physical screen (including the
home-indicator band), while `position: fixed` uses a smaller initial
containing block. So absolute children of #app reach the true bottom;
fixed children would not. */
#app {
position: relative;
width: 100%;
min-height: 100vh;
min-height: 100dvh;
min-height: var(--app-h, 100dvh);
}
/* ───── Map ───── */
/* `position: absolute` relative to #app (which is min-height: 100dvh and
so reaches the full physical screen on iOS PWA). inset: 0 fills #app
edge-to-edge — including the bottom safe-area band that the old
`position: fixed` setup couldn't reach. */
#map {
position: absolute;
inset: 0;
background: #0a0a0a;
z-index: 0;
}
/* Top-edge blur strip — iOS "glass" behind the topbar chrome. Sits
between the map (z 0) and the topbar (z 10). Height covers the
safe-area inset (notch / Dynamic Island band) + the 40 px FAB row
+ a soft fade region below.
The mask gradient makes the blur "physically" present from the top
edge down to ~70 % of the strip, then fades to nothing so the
transition into the unblurred map below doesn't show a hard line.
pointer-events: none so map pans pass straight through. */
.map-top-blur {
position: absolute;
top: 0; left: 0; right: 0;
height: calc(100px + env(safe-area-inset-top, 0px));
z-index: 1;
pointer-events: none;
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
/* Soft gradient mask: opaque (= blur applied) up top, fading to
transparent at the bottom of the strip. Both `mask-image` and the
-webkit- prefix so Safari renders it. */
mask-image: linear-gradient(to bottom,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 40%,
rgba(0,0,0,0) 100%);
-webkit-mask-image: linear-gradient(to bottom,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 40%,
rgba(0,0,0,0) 100%);
}
/* Strip stays visible in ride mode too — the pause / theme-toggle /
recenter FABs along the top still benefit from the glass backing,
and the consistent silhouette across both modes feels more
intentional than a strip that pops in and out. */
/* Recolor MapLibre attribution to fit theme */
.maplibregl-ctrl-attrib {
background: rgba(20, 20, 20, 0.7) !important;
color: var(--text-dim) !important;
}
/* OSM attribution overlay. Tiny credit pinned to the top-right of
the map, slotted just under the recenter FAB so it reads as a
small footnote rather than a hero element. Held at 0.4 opacity
(60% transparent per design call) so it doesn't compete with
the actual UI; lifts to full opacity on hover for legibility.
Hidden in ride mode to declutter the HUD — the Settings → About
footer still carries the credit when riding. */
.map-attribution {
position: fixed;
right: calc(16px + env(safe-area-inset-right, 0px));
top: calc(64px + env(safe-area-inset-top, 0px));
z-index: 5;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--text-dim);
text-decoration: none;
padding: 2px 6px;
background: rgba(20, 20, 20, 0.55);
border-radius: 3px;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0.4;
transition: opacity 200ms, color 120ms;
pointer-events: auto;
}
.map-attribution:hover { opacity: 1; color: var(--amber); }
html.theme-light .map-attribution {
background: rgba(255, 255, 255, 0.75);
color: var(--text-dim);
}
/* Hide while the rider is in ride mode — at speed they don't need
chrome on the map, and the Settings footer still carries the
credit. Restored automatically on exitRide. */
body.ride-active .map-attribution { display: none; }
.maplibregl-ctrl-attrib a { color: var(--amber) !important; }
/* Desktop: move the attribution to the bottom-right corner — the
canonical position for OSM credit on map apps. Mobile keeps the
top-right placement (under the topbar) because the bottom corners
are needed for the planner panel + FABs at narrow widths. Same
gate as the desktop topbar wordmark + FAB row (#43): pointer +
hover excludes phone-landscape, so the override only kicks in on
a real desktop. */
@media (min-width: 801px) and (min-height: 501px) and (hover: hover) and (pointer: fine) {
.map-attribution {
top: auto;
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
right: calc(16px + env(safe-area-inset-right, 0px));
}
}
/* ─────────────────────────────────────────────────────────────────────────
Top bar
───────────────────────────────────────────────────────────────────────── */
.topbar {
position: absolute;
/* Push the topbar inward by the device's safe-area insets so UI sits
clear of the iOS notch / Dynamic Island, while the map itself still
extends edge-to-edge underneath (since #map uses inset: 0). */
top: calc(16px + env(safe-area-inset-top, 0px));
left: calc(16px + env(safe-area-inset-left, 0px));
right: calc(16px + env(safe-area-inset-right, 0px));
display: grid;
/* Columns: burger | theme-toggle | search (1fr) | recenter. */
grid-template-columns: auto auto 1fr auto;
gap: 12px;
align-items: center;
z-index: 10;
pointer-events: none;
/* Smooth fade when entering / exiting ride mode (body.ride-active). */
transition: opacity 350ms ease;
}
/* Pin each topbar child to its template column explicitly. Without
these, when the theme toggle is `display: none` (mobile planning
mode) the remaining items auto-flow LEFT — search lands in column
2 (auto) instead of column 3 (1fr), and recenter inherits the 1fr
expansion it doesn't need. Pinning keeps search anchored to the
1fr column regardless of which siblings are visible. The ride-mode
override `body.ride-active .theme-toggle { grid-column: 1 }` has
higher specificity, so it still wins when active. */
.topbar > .brand-wrap { grid-column: 1; }
.topbar > .theme-toggle { grid-column: 2; }
.topbar > .search { grid-column: 3; }
.topbar > #recenter { grid-column: 4; }
/* Desktop-only action clusters. On mobile the .topbar-actions
containers are hidden via display: none (see the @media block
below) so the 4-column mobile grid is unaffected. The desktop
media query rewrites grid-template-columns to accommodate them. */
.topbar > .topbar-actions { display: none; }
/* Brand button content swap — burger on mobile, motorsport wordmark
on desktop. Both elements live inside #brand-button at all times;
CSS just toggles which is visible. Default state (mobile) shows
burger, hides wordmark; the desktop media query inverts it. */
.brand-burger { display: block; }
.brand-wordmark { display: none; }
/* Theme toggle (standalone button) — show the sun in dark theme
(tap → light), show the moon in light theme (tap → dark).
Same icon-swap logic applies to the in-menu version (.menu-theme-icon)
below — both selectors live in this block so they stay in sync. */
.theme-toggle .icon-sun,
.menu-theme-icon .icon-sun { display: block; }
.theme-toggle .icon-moon,
.menu-theme-icon .icon-moon { display: none; }
html.theme-light .theme-toggle .icon-sun,
html.theme-light .menu-theme-icon .icon-sun { display: none; }
html.theme-light .theme-toggle .icon-moon,
html.theme-light .menu-theme-icon .icon-moon { display: block; }
/* Menu theme item — label spans switch in lock-step with the icons.
"Light mode" is shown when currently dark (tap → light); "Dark mode"
when currently light. */
.menu-theme-label--light { display: inline; }
.menu-theme-label--dark { display: none; }
html.theme-light .menu-theme-label--light { display: none; }
html.theme-light .menu-theme-label--dark { display: inline; }
/* Menu theme item is only shown on mobile — desktop keeps the
standalone topbar button. Compound selector `.menu-item.menu-theme`
beats the generic `.menu-item { display: flex }` declared later in
the file, otherwise the rule below loses on source order. */
.menu-item.menu-theme { display: none; }
/* Icon goes BEFORE the label. The generic `.menu-item .menu-icon` rule
below hides all menu icons (placeholder for future styling) and
pushes them to the right via `order: 2`. We un-hide it just for the
theme item and reset order / margin so the sun/moon sits to the
left of the text. */
.menu-item.menu-theme .menu-icon {
display: inline-flex;
align-items: center;
order: 0;
margin-left: 0;
width: auto;
color: var(--text-dim);
}
@media (max-width: 800px) {
.menu-item.menu-theme { display: flex; }
/* On mobile + planning mode, hide the standalone topbar theme
toggle so the in-menu item is the only theme control. In ride
mode we still want the standalone (it's the only menu we can
reach, since the burger is faded). */
body:not(.ride-active) .theme-toggle { display: none; }
}
/* ─────────────────────────────────────────────────────────────────────
Desktop topbar: expose menu actions as inline icon buttons.
Mobile keeps the burger-menu pattern (handled above + by hiding
.topbar-actions in the base rules). On desktop:
─ #brand-button swaps the burger glyph for the motorsport SPORR
wordmark (visual identity only — dropdown is suppressed)
─ #brand-menu is force-hidden so a stray click on the brand
doesn't open a panel whose entries are duplicated inline
─ .topbar-actions-left (Load · Save · Import) shows between
theme-toggle and the search input
─ .topbar-actions-right (Settings · Feedback · Sign out) shows
to the right of recenter
Grid columns are rewritten to accommodate all six new pills while
the search keeps its 1fr expansion in the middle.
───────────────────────────────────────────────────────────────────── */
/* `hover: hover` + `pointer: fine` filter out touch devices — even
when an iPhone in landscape is wider than 801 px, Safari reports
`hover: none, pointer: coarse` and stays in the mobile burger
layout. iPad with a real trackpad reports hover/fine and gets the
desktop layout, which is the intended behaviour.
`min-height: 501 px` also gates the desktop layout — a short
desktop window (≤ 500 px tall) collapses to the mobile-style
burger row (burger + search + recenter), with everything else
reachable via the burger dropdown. Mirrors the landscape-phone
collapse so a chrome window dragged short for testing, or a
ChromeOS clamshell in a side-by-side window split, picks up the
same compact layout. */
@media (min-width: 801px) and (min-height: 501px) and (hover: hover) and (pointer: fine) {
.topbar {
grid-template-columns:
auto /* brand wordmark */
auto /* theme toggle */
auto /* load / save / import */
1fr /* search */
auto /* recenter */
auto; /* settings / feedback / logout */
column-gap: 12px;
}
.topbar > .brand-wrap { grid-column: 1; }
.topbar > .theme-toggle { grid-column: 2; }
.topbar > .topbar-actions-left { grid-column: 3; display: inline-flex; gap: 8px; }
.topbar > .search { grid-column: 4; }
.topbar > #recenter { grid-column: 5; }
.topbar > .topbar-actions-right { grid-column: 6; display: inline-flex; gap: 8px; }
/* Swap the brand button's content. Wordmark inside the same pill,
so the row height + alignment are unchanged. */
.brand-burger { display: none; }
.brand-wordmark { display: inline-flex; align-items: center; }
/* Hide the burger dropdown entirely on desktop — all entries are
now exposed as icon buttons, so the dropdown is redundant. The
click handler in app.js still toggles aria-expanded but the
panel never paints. */
#brand-menu { display: none !important; }
/* Brand button presentation when showing the wordmark. On desktop
the pill chrome (background, border, shadow) is stripped — the
wordmark floats as pure brand chrome over the map, with its own
text-shadow giving it depth instead of relying on a card. The
base .brand rule pins width: 44 px (burger square); override to
auto so the wordmark gets its natural width. */
.brand-wrap .brand {
width: auto;
min-width: 0;
padding: 0 8px;
background: transparent;
border: none;
box-shadow: none;
font-family: var(--font-display);
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1;
color: var(--text);
/* No dropdown, no destination — the brand pill is pure visual
identity on desktop. Strip the interactive affordances the
base .brand class carries (pointer cursor, hover recolour,
aria-expanded amber outline) so it reads as a logo, not a
button. Focus ring stays via the browser default for keyboard
a11y; tabbing past it does nothing harmful. */
cursor: default;
transition: none;
}
.brand-wrap .brand:hover,
.brand-wrap .brand[aria-expanded="true"],
.brand-wrap .brand:active {
background: transparent;
border: none;
box-shadow: none;
color: var(--text);
}
/* Drop-shadow on the desktop action buttons (Load · Save · Import ·
Settings · Feedback · Sign out). The pill chrome stays the same
panel colour + 1 px border; the shadow lifts the cluster off the
map underneath so it reads as one floating control strip rather
than a transparent overlay. Same shadow recipe as the rest of
the floating UI surfaces. */
.topbar > .topbar-actions .topbar-fab {
box-shadow: var(--shadow);
}
}
/* Labels on the desktop topbar action buttons (Load / Save / Import /
Settings / Feedback / Sign out). Hidden by default at every
breakpoint; the wide-desktop @media block (≥ 1601 px) widens the
pill, shows the label inline next to the icon, and adds a small
gap. Below 1601 px the buttons stay icon-only with title +
aria-label carrying the same text. */
.topbar-fab-label {
display: none;
font-family: var(--font-display);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
}
@media (min-width: 1601px) and (hover: hover) and (pointer: fine) {
.topbar-actions .topbar-fab {
width: auto;
padding: 0 14px;
gap: 8px;
}
.topbar-actions .topbar-fab-label {
display: inline;
}
/* Sign out stays icon-only regardless of viewport width. It's the
destructive action of the cluster and shouldn't carry the same
visual weight as the everyday route I/O / settings buttons.
Re-pin the square geometry the base .topbar-fab rule defines
and force the label back to display:none even inside this wide-
viewport block. */
#topbar-logout {
width: 44px;
padding: 0;
}
#topbar-logout .topbar-fab-label {
display: none;
}
}
/* Motorsport wordmark inside the brand button — Russo One isn't
loaded in the app shell, so we use the existing Space Grotesk at
heavy weight with the same -6° skew + amber RR pair to evoke the
landing-page mark without a second web font request. Bumped from
16 → 22 px now that the pill chrome is stripped on desktop — the
wordmark is the only visual weight in that slot and needs to read
as the brand, not a generic label. The text-shadow lifts it off
the map underneath so it doesn't dissolve into a busy raster
background. */
.brand-wordmark {
/* Motorsport variant — Russo One with a -6° skew, identical to
the landing page hero + beta gate. Was previously rendering in
Space Grotesk 700 with a generic letter-spacing, which read as
a bold label rather than the brand mark. Russo One is already
loaded via the same Google Fonts link as the rest of the app
so there's no extra request. font-weight: 400 because Russo One
only ships a single weight; bumping that to 700 falls back to
the synthetic-bold the browser invents, which looks chunky. */
font-family: 'Russo One', var(--font-display), sans-serif;
font-weight: 400;
letter-spacing: 0.01em;
font-size: 22px;
line-height: 1;
transform: skewX(-6deg);
text-transform: uppercase;
text-shadow:
0 2px 6px rgba(0, 0, 0, 0.45),
0 1px 2px rgba(0, 0, 0, 0.30);
}
.brand-wordmark-rr {
color: var(--amber);
}
.topbar > * { pointer-events: auto; }
/* Ride mode: fade out everything in the topbar EXCEPT the theme toggle.
The rider should still be able to flip dark↔light on the fly (helpful
when going through a tunnel or moving from sun to shade). The fade is
applied per-child rather than to the whole .topbar element so the
theme toggle isn't dragged along to opacity 0. Pointer events on the
faded children are dropped so invisible search/menu/recenter pills
don't catch stray taps. */
.topbar > * {
transition: opacity 350ms ease;
}
body.ride-active .topbar > *:not(.theme-toggle) {
opacity: 0;
pointer-events: none;
}
.brand-wrap { position: relative; }
/* Shared height for everything in the topbar so brand, search and recenter
all sit as one consistent bar. Padding is horizontal-only since the
fixed height defines the vertical dimension. */
.topbar > * > .brand,
.topbar .brand,
.topbar .search input,
.topbar-fab {
height: 44px;
box-sizing: border-box;
}
/* Burger-menu button. Square icon-only button matching the recenter FAB
on the right so the topbar reads as two balanced controls flanking
the search field. Height comes from the shared topbar-row selector
above (44 px desktop, 40 px mobile). */
.brand {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
padding: 0;
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--text-dim);
cursor: pointer;
box-shadow: var(--shadow);
font-family: inherit;
transition: color 200ms, border-color 200ms, box-shadow 200ms;
}
.brand:hover { color: var(--text); border-color: var(--line-hi); }
.brand[aria-expanded="true"] {
background: var(--bg-elev);
border-color: var(--amber);
color: var(--amber);
}
/* Dropdown menu anchored under the brand button. Only displayed when the
hidden attribute is removed by the toggle handler. */
.brand-menu[hidden] { display: none; }
.brand-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 200px;
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
z-index: 20;
}
.menu-item {
background: transparent;
border: none;
color: var(--text);
padding: 10px 12px;
text-align: left;
cursor: pointer;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
display: flex;
align-items: center;
gap: 10px;
font-family: inherit;
/* Force left-alignment even for .file-btn-styled labels — without this the
Import GPX label gets centered by the legacy .file-btn rule. */
justify-content: flex-start;
width: 100%;
box-sizing: border-box;
}
.menu-item:hover:not(:disabled) { background: var(--bg-elev-hi); }
.menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.menu-item .menu-icon {
/* SVG icons sit BEFORE the label, vertically centred with it.
The icons themselves are 16 × 16 with stroke="currentColor" so
they pick up the menu-item's text colour (dim by default, full
contrast on hover via the parent rule's color: var(--text)). */
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 18px;
height: 18px;
color: var(--text-dim);
}
.menu-item:hover:not(:disabled) .menu-icon { color: var(--text); }
.menu-item:disabled .menu-icon { color: var(--text-faint); }
.menu-sep { height: 1px; background: var(--line); margin: 4px 2px; }
/* Live GPS status row at the top of the brand menu. Dot turns green when
a fix is active, red on error, neutral grey while waiting. */
.menu-status {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.04em;
color: var(--text-dim);
}
.menu-status-dot {
width: 9px; height: 9px;
border-radius: 50%;
background: var(--text-faint);
transition: background 200ms, box-shadow 200ms;
flex: 0 0 auto;
}
.menu-status.active .menu-status-dot {
background: var(--green);
box-shadow: 0 0 6px var(--green);
}
.menu-status.error .menu-status-dot {
background: var(--red);
box-shadow: 0 0 6px var(--red);
}
.menu-status-text { white-space: nowrap; }
/* Footer of the burger menu: small sporr wordmark on the left,
build-version chip on the right. Non-interactive — meant to be
ignorable chrome you only notice when you go looking for it. */
.menu-foot {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 6px 14px 4px;
gap: 12px;
pointer-events: none;
user-select: none;
}
.menu-foot-brand {
/* Motorsport wordmark — Russo One, all-caps, slight racing skew. The
HTML ships SPORR in caps, so no text-transform needed; the −6°
skewX gives it the "in motion" lean used across the rest of the
identity. Tracking opens a touch since Russo One's caps are
dense at small sizes. */
font-family: 'Russo One', var(--font-display), sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0.02em;
color: var(--text-dim);
line-height: 1;
display: inline-block;
transform: skewX(-6deg);
}
.menu-foot-rr { color: var(--amber); }
/* The version chip itself — small mono, faint colour. Populated by
app.js from import.meta.url's ?v= query so it always tracks the
current cache-bust version. */
.menu-version {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--text-faint);
}
.search { position: relative; }
.search input {
width: 100%;
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0 16px;
/* iOS Safari auto-zooms the whole page whenever an input is focused and
its font-size is below 16px. Keeping it at 16px here disables that
behaviour without needing a viewport user-scalable=no override. */
font-size: 16px;
color: var(--text);
outline: none;
box-shadow: var(--shadow);
transition: border-color 0.15s;
}
.search input:focus { border-color: var(--amber); }
.search input::placeholder { color: var(--text-faint); }
/* Recolor Chrome/Edge's built-in clear button to
match our neutral chrome. The user-agent default is system-blue,
which reads as a foreign accent against the amber-on-grey palette.
Applies globally to every type="search" field — currently the topbar
planner search and the Home/Work address picker in Settings.
Inlined SVG data URI because :pseudo elements can't read CSS vars. */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
margin-left: 8px;
cursor: pointer;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
opacity: 0.85;
}
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }
.search-results {
position: absolute;
top: calc(100% + 6px); left: 0; right: 0;
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: var(--radius);
list-style: none;
margin: 0; padding: 4px;
max-height: 320px;
overflow-y: auto;
box-shadow: var(--shadow);
}
.search-results li {
padding: 10px 12px;
cursor: pointer;
border-radius: 2px;
font-size: 14px;
color: var(--text-dim);
line-height: 1.4;
display: flex;
align-items: center;
gap: 10px;
}
.search-results li:hover, .search-results li.active {
background: var(--bg-elev);
color: var(--text);
}
.search-results li small { display: block; color: var(--text-faint); font-size: 11px; margin-top: 2px; }
.search-results .result-info { flex: 1; min-width: 0; }
.search-results .result-name { display: block; }
.search-results .result-info small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-results .result-add {
flex: 0 0 auto;
width: 32px; height: 32px;
background: var(--bg-elev);
color: var(--amber);
border: 1px solid var(--line);
border-radius: 50%;
font-size: 18px;
font-weight: 700;
line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
padding: 0;
transition: background 120ms;
}
.search-results li:hover .result-add,
.search-results li.active .result-add { background: var(--amber); color: var(--on-amber); border-color: var(--amber); }
/* Favourite variant — used by the Settings → Favourites picker.
Matches the planner search results' `.result-favourite` look: grey
outline at rest, amber-tinted outline ring on hover (NOT inverted
amber fill). Same visual vocabulary as the star buttons that sit on
live search results / recents, so adding from either surface feels
like the same affordance. */
.search-results .result-add--favourite {
background: transparent;
color: var(--text-faint);
}
.search-results .result-add--favourite > svg {
width: 16px; height: 16px; display: block;
}
.search-results li:hover .result-add--favourite,
.search-results li.active .result-add--favourite,
.search-results .result-add--favourite:hover {
background: rgba(245, 158, 11, 0.10);
color: var(--amber);
border-color: var(--amber);
}
.search-results .result-add--favourite:active {
background: rgba(245, 158, 11, 0.18);
color: var(--amber);
border-color: var(--amber);
}
/* Section heading inside the search-results dropdown — e.g. the
"Recent destinations" caption above the first recent row. Visually
a label, not a row: smaller, dimmer, uppercase, no hover. */
.search-results .result-section {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
padding: 10px 12px 4px;
cursor: default;
}
.search-results .result-section:hover {
background: transparent;
color: var(--text-faint);
}
/* Home / Work shortcuts row pinned above "Recent destinations" when
the search input is empty. Two side-by-side cells in a 1fr 1fr
grid; cells are squared, borderless, grey (text-dim) so they read
as quiet utility chrome and don't compete with the amber accents
reserved for active route + active state. When a place isn't
saved the cell becomes "Set home" / "Set work" (faint italic) and
the tap deep-links into the Settings picker for that key.
See setupSearch() in app.js for the rendering. */
.search-shortcuts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
padding: 4px;
margin: 0 0 4px;
list-style: none;
}
.search-shortcut {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 5px 10px;
background: transparent;
border: none;
border-radius: 8px;
color: var(--text-dim);
cursor: pointer;
font-family: inherit;
transition: background 120ms, color 120ms;
min-width: 0;
}
.search-shortcut:hover {
background: var(--bg-elev);
color: var(--text);
}
.search-shortcut-icon {
color: var(--text-dim);
display: inline-flex;
flex-shrink: 0;
}
.search-shortcut:hover .search-shortcut-icon { color: var(--text); }
.search-shortcut-label {
font-size: 13px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Unset state — no Home/Work saved yet. Reads as visually disabled
(faint, dimmed) but is still tappable: the click opens Settings
straight into the Home/Work picker for that key, so a tester can
set the address from one place rather than digging through menus.
No italic — the look is "greyed out", not "placeholder text". */
.search-shortcut.unset { opacity: 0.55; }
.search-shortcut.unset .search-shortcut-label,
.search-shortcut.unset .search-shortcut-icon { color: var(--text-faint); }
.search-shortcut.unset:hover { opacity: 1; background: var(--bg-elev); }
.search-shortcut.unset:hover .search-shortcut-label,
.search-shortcut.unset:hover .search-shortcut-icon { color: var(--text-dim); }
/* Per-row delete button on recent destinations. Same circular shape
as `.result-add` but transparent / faint by default so it doesn't
compete with the "Recent" pill or the row's primary tap target.
Red tint on hover to make the destructive nature obvious. Click
handler in app.js stops propagation so removing doesn't also pick. */
.search-results .result-remove {
flex: 0 0 auto;
width: 32px;
height: 32px;
background: transparent;
color: var(--text-faint);
border: 1px solid var(--line);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 120ms, color 120ms, border-color 120ms;
}
/* Hover state gated on real hover capability — on touch devices iOS
Safari "sticks" :hover to the element under the touch point after
a tap, which meant tapping the trash to delete a recent left a
red highlight on the NEXT row's trash (because rows shifted up
after the re-render). With (hover: hover) the rule only applies
to mice / trackpads, so phone taps no longer paint a phantom
hover. Active state still gives a visible red press feedback. */
@media (hover: hover) {
.search-results .result-remove:hover {
color: var(--red);
border-color: var(--red);
background: rgba(220, 38, 38, 0.10);
}
}
.search-results .result-remove:active {
color: var(--red);
border-color: var(--red);
background: rgba(220, 38, 38, 0.18);
}
/* Favourite-toggle button on a result row. Same 32 px circle as the
"+" used to be — sits in the same slot, so on live search rows the
star fully replaces the old "Add as waypoint" plus button. On
recents rows the star + trash sit side by side (star to the left
of trash). Outline glyph when not yet favourited; filled amber when
already in the user's favourites list. */
.search-results .result-favourite {
flex: 0 0 auto;
width: 32px;
height: 32px;
background: transparent;
color: var(--text-faint);
border: 1px solid var(--line);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 120ms, color 120ms, border-color 120ms;
}
.search-results .result-favourite > svg {
width: 16px; height: 16px; display: block;
}
@media (hover: hover) {
.search-results .result-favourite:hover {
color: var(--amber);
border-color: var(--amber);
background: rgba(245, 158, 11, 0.10);
}
}
.search-results .result-favourite:active {
color: var(--amber);
border-color: var(--amber);
background: rgba(245, 158, 11, 0.18);
}
/* Filled state — currently a favourite. Amber glyph stands out
against the dim row background so the user can scan the recents
dropdown and spot what's already saved. */
.search-results .result-favourite.on {
color: var(--amber);
border-color: rgba(245, 158, 11, 0.45);
background: rgba(245, 158, 11, 0.08);
}
@media (hover: hover) {
.search-results .result-favourite.on:hover {
color: var(--amber);
border-color: var(--amber);
background: rgba(245, 158, 11, 0.18);
}
}
.status {
display: flex; align-items: center; gap: 8px;
background: var(--bg-panel);
border: 1px solid var(--line);
padding: 10px 14px;
border-radius: var(--radius);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.1em;
box-shadow: var(--shadow);
}
.status-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--text-faint);
transition: background 0.3s, box-shadow 0.3s;
}
.status.active .status-dot {
background: var(--green);
box-shadow: 0 0 8px var(--green);
}
.status.error .status-dot { background: var(--red); box-shadow: 0 0 8px var(--red); }
/* ─────────────────────────────────────────────────────────────────────────
Bottom panel
───────────────────────────────────────────────────────────────────────── */
.panel {
/* `position: absolute` inside #app. Because #app uses min-height: 100dvh,
its bottom edge is the actual physical screen bottom on iOS PWA, so
bottom: 0 (plus a safe-area inset) lands where we want. */
position: absolute;
/* Inset by safe-area on iOS so the panel sits above the home indicator. */
bottom: calc(16px + env(safe-area-inset-bottom, 0px));
left: calc(16px + env(safe-area-inset-left, 0px));
/* See html.android-pwa override at the bottom of this rule's
siblings — Android PWA standalone mode needs a floor on the
bottom inset because Chrome reports safe-area-inset-bottom as 0
for many gesture-nav phones, letting the system nav bar overlap
the Start ride button. */
width: 440px;
max-height: calc(100dvh - 96px);
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 5;
}
.panel-section { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.panel-section:last-child { border-bottom: none; }
/* ─────────────────────────────────────────────────────────────────────────
Android PWA — bottom-inset floor
─────────────────────────────────────────────────────────────────────────
When Sporr is installed as a PWA on Android ("Add to home screen")
and launched in standalone mode, Chrome reports
safe-area-inset-bottom as 0 on many devices even with
viewport-fit=cover. The system nav bar (gesture pill ~24 px,
3-button nav ~48 px) then overlaps anything anchored to the bottom
of the viewport — most visibly the Start ride button.
The `android-pwa` class is set in app.js (isAndroidStandalone() in
boot()). iOS NEVER gets this class — iPhone behaviour is unchanged.
We use `max(env(...), 48px)` so devices that DO report the inset
honestly still get the OS-reported value (48 px is just a floor for
the broken case — covers 3-button nav, well above gesture-pill
needs).
Affected elements: `.panel` (planner, owns Start ride), `.nav-hud`
(ride HUD, owns the pause + recenter pills + data card). The
landscape ride-card media query has its own override further down. */
html.android-pwa .panel {
bottom: calc(16px + max(env(safe-area-inset-bottom, 0px), 48px));
}
html.android-pwa .nav-hud {
bottom: calc(16px + max(env(safe-area-inset-bottom, 0px), 48px));
}
.panel-label {
display: flex; justify-content: space-between; align-items: baseline;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
margin-bottom: 10px;
}
.panel-hint { color: var(--text-faint); font-size: 9px; text-transform: none; letter-spacing: 0.05em; }
.slider-ticks span {
position: absolute;
top: 0;
transform: translateX(-50%);
white-space: nowrap;
}
/* Solid pill that sits just above the planner. Visible while there are no
user waypoints; fades out when the first one is added.
--panel-h is updated from JS (ResizeObserver on .panel) so the offset
tracks the planner's real height regardless of viewport or content. */
.map-hint {
position: absolute;
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: 999px;
padding: 6px 14px;
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.04em;
white-space: nowrap;
z-index: 4;
pointer-events: none;
opacity: 0;
transition: opacity 350ms ease;
box-shadow: var(--shadow);
/* Desktop default: panel sits at left:16, width 440, anchored 16px from
bottom (plus iOS safe-area). Centre the hint over the panel's
horizontal middle and 10 px above its top edge. */
bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--panel-h, 320px) + 10px);
left: calc(16px + env(safe-area-inset-left, 0px) + 220px);
transform: translateX(-50%);
}
.map-hint.visible { opacity: 1; }
@media (max-width: 800px) {
/* Mobile: panel is full-width at the bottom; centre on viewport and
float 10 px above its top edge. */
.map-hint {
bottom: calc(var(--panel-h, 50dvh) + 10px);
left: 50%;
}
}
/* Recenter button when placed in the topbar (replaces the old GPS status
pill). Reuses the .fab base style but adds glow rings that mirror the
GPS state classes we used to put on the status pill. */
.topbar-fab {
display: flex; align-items: center; justify-content: center;
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--text-dim);
font-size: 18px;
cursor: pointer;
width: 44px;
padding: 0;
transition: color 200ms, border-color 200ms, box-shadow 200ms;
}
.topbar-fab:hover { color: var(--text); border-color: var(--line-hi); }
/* Pressed/active state — used by the recenter button when planner-
mode "follow my GPS" is on. Amber border + amber icon so the
toggle reads as engaged at a glance. */
.topbar-fab[aria-pressed="true"] {
color: var(--amber);
border-color: var(--amber);
box-shadow: 0 0 0 1px var(--amber);
}
/* Header row for the waypoints section — toggle + Clear sit side-by-side
on the left, count on the right. */
.waypoints-header {
display: flex;
justify-content: flex-start;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.waypoint-count {
margin-left: auto;
font-family: var(--font-mono);
font-size: 14px;
font-weight: 700;
color: var(--text-faint);
letter-spacing: 0.05em;
white-space: nowrap;
}
/* Waypoint list */
/* Waypoint list: shows up to 3 rows before scrolling. Each row is
≈ 22 (marker) + 16 (vertical padding) + 1 (dashed border) = 39 px, so
3 rows = 117 px. We use 132 px to be safe across browsers/fonts so the
scrollbar truly never appears at 3 waypoints. */
.waypoint-list {
list-style: none;
margin: 0;
padding: 0;
/* Was 132 px (≈ 3 rows). Trimmed to ~2 rows + a small peek of the
next so longer routes scroll without dominating the planner
panel. Each row is ~44 px tall (22 px marker + 8 px top/bottom
padding + dashed divider). */
max-height: 88px;
overflow-y: auto;
/* Firefox */
scrollbar-width: thin;
scrollbar-color: var(--line-hi) transparent;
}
/* WebKit (Chrome, Safari, Edge) */
.waypoint-list::-webkit-scrollbar { width: 6px; }
.waypoint-list::-webkit-scrollbar-track { background: transparent; }
.waypoint-list::-webkit-scrollbar-thumb {
background: var(--line-hi);
border-radius: 3px;
}
.waypoint-list::-webkit-scrollbar-thumb:hover { background: var(--amber); }
.waypoint-list li {
display: flex; align-items: center; gap: 10px;
padding: 8px 0;
font-size: 15px;
color: var(--text-dim);
border-bottom: 1px dashed var(--line);
}
.waypoint-list li:last-child { border-bottom: none; }
.waypoint-list .wp-marker {
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
background: var(--amber);
color: var(--on-amber);
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
border-radius: 50%;
flex-shrink: 0;
}
.waypoint-list .wp-marker.start { background: var(--green); }
.waypoint-list .wp-marker.end { background: var(--red); color: white; }
/* Destination pill flips green once the route is computed + fresh.
`.go` is added by renderWaypoints() in the same conditions that drive
the map's destination pin colour — keeps the two depictions in sync. */
.waypoint-list .wp-marker.end.go {
background: #22c55e;
color: #0a0a0a;
}
/* Finish-flag glyph inside the planner waypoint-list's end marker.
Smaller scale than the map version (22 px circle vs 28 px) and a
slightly smaller right-shift to keep the pole visually centred. */
.wp-marker-flag {
width: 11px;
height: 11px;
display: block;
transform: translateX(2px);
}
.wp-marker-flag line {
stroke: currentColor;
stroke-width: 1.6;
stroke-linecap: round;
}
.wp-marker-flag path {
fill: currentColor;
}
.waypoint-list .wp-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.waypoint-list .wp-remove {
background: none; border: none; color: var(--text-faint);
cursor: pointer; padding: 4px 6px;
line-height: 1;
border-radius: 2px;
display: inline-flex; align-items: center; justify-content: center;
}
.waypoint-list .wp-remove > svg {
width: 16px; height: 16px; display: block;
}
.waypoint-list .wp-remove:hover { color: var(--red); background: var(--bg-elev); }
/* Star toggle sits LEFT of the trash icon on each waypoint row.
Outline by default, filled amber when this waypoint is in the
user's favourites. Same hit-area as the trash button so the two
read as a pair. */
.waypoint-list .wp-favourite {
background: none; border: none; color: var(--text-faint);
cursor: pointer; padding: 4px 6px;
line-height: 1;
border-radius: 2px;
display: inline-flex; align-items: center; justify-content: center;
}
.waypoint-list .wp-favourite > svg {
width: 16px; height: 16px; display: block;
}
/* Neutral grey instead of amber — the star already reads as "saved"
when filled; using the brand accent here over-emphasised it next to
the other quieter row controls. */
.waypoint-list .wp-favourite:hover { color: var(--text); background: var(--bg-elev); }
.waypoint-list .wp-favourite.on { color: var(--text-dim); }
.waypoint-empty { color: var(--text-faint); font-style: italic; padding: 12px 0 !important; border: none !important; }
/* Collapsed-summary row that replaces the per-waypoint rows when there are
more than 2 waypoints. Clicking it expands the list. Also reused as the
header in expanded state. */
.waypoints-collapsed {
justify-content: space-between !important;
cursor: pointer;
color: var(--text) !important;
font-weight: 500;
letter-spacing: 0.04em;
}
.waypoints-collapsed:hover { color: var(--amber) !important; }
.waypoints-collapsed .wp-count { font-family: var(--font-mono); font-size: 12px; }
.waypoints-collapsed .wp-chevron { font-size: 14px; color: var(--text-dim); }
.waypoint-actions { display: flex; gap: 8px; margin-top: 10px; }
/* Mode toggle */
.mode-toggle {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.mode-btn {
background: var(--bg-elev);
border: none;
padding: 14px 8px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
color: var(--text-dim);
}
.mode-btn:hover { background: var(--bg-elev-hi); color: var(--text); }
.mode-btn.active {
background: var(--amber);
color: var(--on-amber);
}
/* Holds the inline SVG glyph for each nav mode. Sized so the SVG
has the same optical weight as the previous text character (~22 px),
and uses currentColor for stroke/fill so it picks up the button's
active-amber state automatically. */
.mode-icon {
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
line-height: 1;
}
.mode-icon svg { width: 100%; height: 100%; display: block; }
.mode-title { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; }
.mode-sub { font-size: 10px; opacity: 0.7; font-family: var(--font-mono); letter-spacing: 0.05em; }
/* Slider */
/* Animated collapse/expand. Direct mode hides the slider section
entirely; switching to Adventure or Roundtrip eases it back in (and
eases it back out when switching to Direct). max-height is generous
so the actual content height fits comfortably; padding / opacity /
border collapse together for a clean accordion feel. */
.extra {
overflow: hidden;
max-height: 220px;
opacity: 1;
transition: max-height 280ms ease,
opacity 200ms ease,
padding-top 280ms ease,
padding-bottom 280ms ease,
border-bottom-width 280ms ease;
}
.extra[data-disabled="true"] {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
border-bottom-width: 0;
pointer-events: none;
}
.slider-wrap { display: flex; align-items: center; gap: 12px; }
/* Slider + its tick labels share the same width column, separate from the
numeric value/unit on the right. Ensures the +0…+50 labels align with the
slider track and not with the "km" counter. */
.slider-track-col { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.slider-track-col input[type="range"] { width: 100%; }
input[type="range"] {
flex: 1;
-webkit-appearance: none;
appearance: none;
height: 4px;
/* Track fill up to --fill-pct (set from JS in setExtraKm) drawn with
diagonal 45° amber stripes; the remainder is the dim background.
Top layer is a window: transparent below fill-pct lets the stripes
beneath show, opaque dim above fill-pct hides them. */
background:
linear-gradient(
to right,
transparent 0 var(--fill-pct, 0%),
var(--bg-elev) var(--fill-pct, 0%) 100%
),
repeating-linear-gradient(
45deg,
var(--amber) 0 4px,
var(--amber-dim) 4px 8px
);
border-radius: 2px;
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px; height: 20px;
background: var(--amber);
border: 2px solid var(--on-amber);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 0 1px var(--amber);
}
input[type="range"]::-moz-range-thumb {
width: 20px; height: 20px;
background: var(--amber);
border: 2px solid var(--on-amber);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 0 1px var(--amber);
}
.slider-value {
font-family: var(--font-mono);
font-size: 25px; /* number is 40% larger than before */
font-weight: 600;
color: var(--amber);
min-width: 60px;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
}
.slider-value .unit {
color: var(--text-faint);
font-size: 10px;
margin-left: 0;
margin-top: 4px;
text-transform: uppercase;
letter-spacing: 0.15em;
}
.slider-ticks {
/* Labels are positioned absolutely at their real percentage along the
track. Padding accounts for the thumb's half-width so the 0% and 100%
ends line up with the thumb's actual travel range. */
position: relative;
height: 14px;
margin-top: 6px;
padding: 0 10px;
font-family: var(--font-mono);
font-size: 9px;
color: var(--text-faint);
letter-spacing: 0.05em;
}
/* Summary */
.summary-stats[hidden] { display: none; }
.summary-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 14px;
}
.summary-stats:has(#stat-stretch-wrap:not([hidden])) {
grid-template-columns: 1fr 1fr 1fr;
}
.stat {
background: var(--bg-elev);
border: 1px solid var(--line);
border-left: 3px solid var(--amber);
padding: 8px 12px;
border-radius: 2px;
}
.stat-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
color: var(--text-faint);
text-transform: uppercase;
}
.stat-value {
font-family: var(--font-mono);
font-size: 20px;
font-weight: 600;
color: var(--text);
line-height: 1.2;
margin-top: 2px;
}
.stat-value .unit { font-size: 11px; color: var(--text-faint); margin-left: 3px; }
/* Buttons */
.btn-primary, .btn-secondary, .btn-ghost {
font-family: var(--font-display);
font-weight: 600;
border: none;
cursor: pointer;
transition: background 0.15s, color 0.15s, transform 0.05s;
letter-spacing: 0.04em;
border-radius: var(--radius);
}
.btn-primary:active, .btn-secondary:active, .btn-ghost:active { transform: translateY(1px); }
.btn-primary {
width: 100%;
background: var(--amber);
color: var(--on-amber);
padding: 14px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.btn-primary:hover { background: var(--amber-hi); }
.btn-primary:disabled { background: var(--bg-elev); color: var(--text-faint); cursor: not-allowed; }
.btn-primary.loading {
background: var(--amber-dim);
color: var(--amber);
cursor: progress;
}
/* Start-ride button uses green to signal "go" once a route is ready. The
:disabled rule above still wins for greyed-out state, so the green only
appears when the button is clickable. */
#start-ride:not(:disabled) { background: #22c55e; color: #0a0a0a; }
#start-ride:not(:disabled):hover { background: #16a34a; }
/* Bottom-right corner rounded harder so the button echoes the phone
screen's bottom-right curve — mirrors the matching `.btn-trash`
bottom-left treatment so the action-row reads as a single "bottom
bezel" pair. */
#start-ride {
border-radius: var(--radius) var(--radius) 28px var(--radius);
}
.btn-secondary {
background: var(--bg-elev);
color: var(--text-dim);
padding: 10px 12px;
font-size: 12px;
border: 1px solid var(--line);
}
.btn-secondary:hover:not(:disabled) { background: var(--bg-elev-hi); color: var(--text); border-color: var(--line-hi); }
.btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-ghost {
background: transparent;
color: var(--text-dim);
padding: 6px 10px;
font-size: 11px;
border: 1px solid var(--line);
}
.btn-ghost:hover:not(:disabled) { color: var(--text); border-color: var(--line-hi); }
.btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }
/* Themed confirm dialog — used for destructive actions like "clear all
waypoints" that we don't want to fire from a single accidental tap. */
.modal-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.modal-overlay[hidden] { display: none; }
/* ─────────────────────────────────────────────────────────────────────────
Beta access gate
Lives inside a `.modal-overlay` (so it inherits the centring + dim +
backdrop-blur) but ports the V1 splash design from
beta-gate-mockups.html — wordmark / "Private Beta" label / headline /
subtitle / form / footnote, with an amber glow contained inside the
card so it keeps the "you've arrived somewhere" mood. */
.beta-gate-card {
position: relative;
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
/* Extra bottom padding reserves room for the two absolute-positioned
corner elements (language toggle on the right, "don't have one"
footnote on the left) so they sit clear of the form above. */
padding: 36px 28px 64px;
width: 100%;
max-width: 360px;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
overflow: hidden;
}
/* Diagonal amber glow inside the card — top-left + bottom-right corners
pick up a faint accent without touching the dim overlay outside. */
.beta-gate-card::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 30% 0%, rgba(245, 158, 11, 0.10), transparent 55%),
radial-gradient(circle at 80% 100%, rgba(245, 158, 11, 0.06), transparent 55%);
}
.beta-gate-card > * { position: relative; z-index: 1; }
/* Sporr wordmark — motorsport variant. Russo One all-caps with a
−6° racing skew; doubled-R still carries the amber accent. The
HTML ships SPORR in caps so the styling needs no text-transform.
Display: inline-block so the skew has a containing box to act on
without dragging neighbouring content with it. */
.beta-gate-brand {
font-family: 'Russo One', var(--font-display), sans-serif;
/* 70 px ≈ 44 × 1.6 — the wordmark is the headline element of the
gate now, so it earns the extra weight. */
font-size: 70px;
font-weight: 400;
letter-spacing: 0.01em;
color: var(--text);
line-height: 1;
display: inline-block;
transform: skewX(-6deg);
}
.beta-gate-rr { color: var(--amber); }
/* Wrap around the wordmark — kept as an inline-flex container in
case we want to slot something next to the wordmark again later.
Currently only holds the wordmark itself. */
.beta-gate-brand-wrap {
display: inline-flex;
align-items: flex-end;
gap: 8px;
}
/* Legacy divider — kept as a no-op alias in case any older saved
markup is still cached on a returning user's browser. Safe to
remove once we're confident the new HTML has rolled out. */
.beta-gate-divider { color: var(--amber); margin: 0 4px; }
/* Wordmark + tagline + divider + version pill share a column container
so they read as one tight stacked header — same composition as the
landing-page hero. The card's main 28-px gap stays for the wordmark
block ↔ form spacing; inside the header we use a smaller gap. */
.beta-gate-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
/* Tagline — mirrors .hero-sub on sporr-landing.html. The brand-term
"Adventure Rider" reads as an all-caps italic label rather than a
sentence — the casing comes from CSS so the underlying translation
keys stay in title case. Letter-spacing widens the caps so they
read as the genre tag they are, not a shouty headline. */
.beta-gate-sub {
font-size: clamp(13px, 1.9vw, 15px);
color: #d4d4d4;
font-weight: 400;
font-style: italic;
line-height: 1.35;
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: center;
margin: 0;
/* Tighten the gap to the wordmark — the header's 16-px gap is a
touch loose between a heavy wordmark and a slim tagline. */
margin-top: -4px;
}
/* Thin separator — identical to .hero-divider on the landing page. */
.beta-gate-divider {
width: 84px;
height: 1px;
background: var(--line);
}
/* Status pill — visually identical to .hero-pill on sporr-landing.html.
Holds the i18n'd "Private beta" label, a middle-dot separator, and
the dynamic version string populated by setupVersionLabel(). */
.beta-gate-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--text);
border: 1px solid var(--line);
border-radius: 4px;
}
/* Middle dot — opacity-dimmed so it reads as a quiet separator and not
a third equally-weighted token. */
.beta-gate-pill-sep { opacity: 0.55; }
/* Defensive: if the version span ends up empty (dev case, no ?v= on
the script URL), hide the dot too so the pill doesn't trail with
"PRIVATE BETA · ". :has support is Safari 15.4+ / Chrome 105+,
which covers the beta cohort. */
.beta-gate-pill:has(#beta-gate-version:empty) .beta-gate-pill-sep,
.beta-gate-pill:has(#beta-gate-version:empty) #beta-gate-version {
display: none;
}
.beta-gate-headline {
font-size: 19px;
font-weight: 700;
color: var(--text);
margin: 0;
text-align: center;
max-width: 280px;
line-height: 1.3;
}
.beta-gate-sub {
font-size: 13px;
color: var(--text-dim);
margin: -20px 0 0;
text-align: center;
max-width: 280px;
line-height: 1.5;
}
.beta-gate-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
}
.beta-gate-text {
width: 100%;
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0 14px;
height: 48px;
color: var(--text);
font-family: var(--font-mono);
/* 16 px font prevents iOS Safari from auto-zooming on focus. */
font-size: 16px;
letter-spacing: 0.18em;
text-align: center;
text-transform: uppercase;
outline: none;
transition: border-color 0.15s;
}
.beta-gate-text::placeholder {
color: var(--text-faint);
letter-spacing: 0.12em;
text-transform: none;
}
.beta-gate-text:focus { border-color: var(--amber); }
.beta-gate-text.error { border-color: var(--red); }
/* Brief horizontal shake when the code is rejected — re-triggered by
removing + re-adding the class with a forced reflow in between. */
@keyframes beta-gate-shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-4px); }
40%, 80% { transform: translateX(4px); }
}
.beta-gate-text.shake { animation: beta-gate-shake 220ms ease; }
.beta-gate-btn {
width: 100%;
height: 48px;
background: var(--amber);
color: var(--on-amber);
border: none;
border-radius: var(--radius);
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.15s;
}
.beta-gate-btn:hover { background: var(--amber-hi); }
.beta-gate-error {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.05em;
color: var(--red);
text-align: center;
min-height: 14px;
}
.beta-gate-footnote {
/* Anchored to the bottom-left corner of the gate card so the
wordmark + form get the centre line uncluttered. The language
toggle (.beta-gate-lang below) sits in the matching bottom-right
corner; the max-width clamp leaves space between them on the
narrow 360-px card so they never collide. */
position: absolute;
left: 18px;
bottom: 18px;
font-size: 10px;
color: var(--text-faint);
text-align: left;
line-height: 1.4;
margin: 0;
max-width: calc(100% - 130px);
}
.beta-gate-footnote a {
color: var(--amber);
text-decoration: none;
}
/* Stack the gate card and the install hint vertically. The base
.modal-overlay is a centred flex row; we just flip direction and
add a gap so the hint reads as a footnote below the card. */
.beta-gate-overlay {
flex-direction: column;
gap: 16px;
/* Smooth gate dismissal — two-speed fade. The dim background +
backdrop-blur ease away over the full 800 ms so the map reveal
feels gradual; the modal card + its chrome (language toggle,
install hint) wipe out faster (350 ms) so the user isn't staring
at a translucent ghost of the card while the dim is still
lingering. JS adds .fading-out then waits GATE_FADE_MS (matching
the slower dim transition) before flipping `hidden`. */
transition:
backdrop-filter 800ms ease,
-webkit-backdrop-filter 800ms ease,
background-color 800ms ease;
}
.beta-gate-overlay.fading-out {
background-color: rgba(0, 0, 0, 0);
backdrop-filter: blur(0);
-webkit-backdrop-filter: blur(0);
/* Don't let the fading layer eat taps meant for the planner / map
behind it; pointer-events flip the moment the fade starts. */
pointer-events: none;
}
/* Faster modal-card fade — wraps the card itself plus the absolute-
positioned language toggle and install hint that sit alongside it
inside the overlay. All three vanish together in 350 ms while the
dim layer behind them keeps unwinding for another 450 ms. */
.beta-gate-card,
.beta-gate-lang,
.beta-gate-install {
transition: opacity 350ms ease;
}
.beta-gate-overlay.fading-out .beta-gate-card,
.beta-gate-overlay.fading-out .beta-gate-lang,
.beta-gate-overlay.fading-out .beta-gate-install {
opacity: 0;
}
/* Language toggle anchored inside the gate card's bottom-right corner
(moved here from top-right — it was crowding the wordmark above).
Mirrors the design of the toggle on sporr-landing.html but scaled
≈ 20 % smaller (36 → 29 px height, 11 → 9 px text, 14 → 11 px
glyph, 8 → 6 px gap) so it sits comfortably inside the card chrome. */
.beta-gate-lang {
position: absolute;
bottom: 14px;
right: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 29px;
padding: 0 13px;
font-family: var(--font-display);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
color: var(--text);
background: transparent;
/* Whisper-thin outline — dropped from var(--line-hi) (#3a3a3a, very
visible) to a 10% white wash so the chip reads as a quiet
control next to the wordmark, not a competing element. Hover
fades up to full amber for a clear affordance. */
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 4px;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.beta-gate-lang:hover { border-color: var(--amber); color: var(--amber); }
.beta-gate-lang svg { width: 11px; height: 11px; }
/* Install hint panel — V1b in beta-gate-mockups.html. Visually slimmer
chrome than the gate card so the gate stays the primary focus.
Amber phone-icon, bold title, mono eyebrow, chevron right. The
whole row is a button — tap dispatches to the captured
beforeinstallprompt (Android) or the iOS instructions modal. */
.beta-gate-install {
width: 100%;
max-width: 360px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 12px 16px;
display: flex;
align-items: center;
gap: 14px;
color: var(--text-dim);
font-family: var(--font-display);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
-webkit-tap-highlight-color: transparent;
text-align: left;
}
.beta-gate-install[hidden] { display: none; }
html.theme-light .beta-gate-install {
background: rgba(255, 255, 255, 0.55);
}
.beta-gate-install:hover {
border-color: var(--amber);
background: rgba(245, 158, 11, 0.08);
}
.beta-gate-install:focus-visible {
outline: none;
border-color: var(--amber);
}
.beta-gate-install-icon {
flex: 0 0 auto;
color: var(--amber);
display: flex;
align-items: center;
justify-content: center;
}
.beta-gate-install-icon svg { width: 28px; height: 28px; }
.beta-gate-install-text {
flex: 1;
min-width: 0;
line-height: 1.3;
display: flex;
flex-direction: column;
}
.beta-gate-install-title {
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.02em;
}
.beta-gate-install-sub {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-faint);
margin-top: 2px;
}
.beta-gate-install-chev {
flex: 0 0 auto;
color: var(--text-faint);
display: flex;
align-items: center;
}
.beta-gate-install-chev svg { width: 16px; height: 16px; }
/* iOS install-instructions modal. Reuses the generic .modal /
.modal-titlebar / .modal-body chrome, just adds typography for
the ordered list of steps and the inline share-icon callout. */
.install-modal { max-width: 360px; }
.install-modal-lede {
margin: 0 0 14px 0;
font-size: 13px;
color: var(--text-dim);
line-height: 1.5;
}
.install-modal-steps {
margin: 0 0 16px 0;
padding-left: 22px;
font-size: 13px;
color: var(--text);
line-height: 1.55;
}
.install-modal-steps li { margin-bottom: 8px; }
.install-modal-steps li:last-child { margin-bottom: 0; }
.install-modal-share-inline {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
vertical-align: text-bottom;
margin: 0 2px;
color: var(--amber);
}
.install-modal-share-inline svg { width: 18px; height: 18px; }
.modal {
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
max-width: 380px;
width: 100%;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
font-family: var(--font-display);
overflow: hidden;
}
/* Amber title bar at the top of the dialog — Windows-window-style. */
.modal-titlebar {
background: var(--amber);
color: var(--on-amber);
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 12px;
}
.modal-title { line-height: 1; }
.modal-close {
background: none;
border: none;
color: var(--on-amber);
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 4px 6px;
border-radius: 2px;
font-family: inherit;
}
.modal-close:hover { background: rgba(0, 0, 0, 0.18); }
.modal-body {
padding: 20px 22px 18px;
}
.modal-message {
color: var(--text);
font-size: 15px;
line-height: 1.45;
margin-bottom: 20px;
}
.modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
/* Text input inside the prompt dialog. Same chrome family as the search
bar; 16px font-size to keep iOS from zooming the page when the input
receives focus. */
.modal-input {
display: block;
width: 100%;
background: var(--bg-elev);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 10px 14px;
font-family: var(--font-display);
font-size: 16px;
color: var(--text);
outline: none;
margin-bottom: 16px;
transition: border-color 0.15s;
}
.modal-input:focus { border-color: var(--amber); }
.modal-input::placeholder { color: var(--text-faint); }
.modal-actions .btn-primary,
.modal-actions .btn-secondary {
width: auto;
padding: 10px 18px;
}
.btn-primary.modal-danger {
background: var(--amber); /* same orange as the title bar */
color: var(--on-amber);
}
.btn-primary.modal-danger:hover { background: var(--amber-hi); }
/* Saved-routes list inside the Load dialog. Each row: name + meta on the
left, ✕ delete button on the right. Clicking the row (anywhere except
the delete button) loads that route. */
.saved-routes-list {
list-style: none; margin: 0; padding: 0;
max-height: 320px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--line-hi) transparent;
}
.saved-routes-list::-webkit-scrollbar { width: 6px; }
.saved-routes-list::-webkit-scrollbar-track { background: transparent; }
.saved-routes-list::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 3px; }
.saved-routes-list::-webkit-scrollbar-thumb:hover { background: var(--amber); }
.saved-routes-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 4px;
border-bottom: 1px dashed var(--line);
cursor: pointer;
}
.saved-routes-list li:last-child { border-bottom: none; }
.saved-routes-list li:hover { background: var(--bg-elev); }
.saved-route-info {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.saved-route-name {
font-size: 14px;
font-weight: 600;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.saved-route-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-faint);
}
.saved-route-delete {
background: none;
border: none;
color: var(--text-faint);
cursor: pointer;
padding: 4px 10px;
font-size: 18px;
line-height: 1;
border-radius: 3px;
}
.saved-route-delete:hover { color: var(--amber); background: var(--bg-elev-hi); }
.saved-routes-empty {
color: var(--text-faint);
text-align: center;
padding: 28px 0;
font-style: italic;
}
/* ─────────────────────────────────────────────────────────────────────
Settings — V1 iOS-style grouped list. Modal on desktop, fullscreen
on mobile (≤ 800 px). See settings-mockups.html for the source design.
───────────────────────────────────────────────────────────────────── */
.settings-modal {
max-width: 480px;
width: 100%;
max-height: 86vh;
display: flex;
flex-direction: column;
}
.settings-body {
flex: 1 1 auto; /* fill the column height inside .settings-modal so
the bg-deep background reaches the bottom of the
viewport even on screens taller than the content */
overflow-y: auto;
padding: 18px 18px 28px;
background: var(--bg-deep);
scrollbar-width: thin;
scrollbar-color: var(--line-hi) transparent;
}
.settings-body::-webkit-scrollbar { width: 6px; }
.settings-body::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 3px; }
/* Back chevron in the titlebar (left side) — replaces the close X on
the right. Spacer keeps the modal-title visually centred. */
.settings-back {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
padding: 0;
border-radius: 50%;
}
.settings-titlebar-spacer { width: 28px; height: 28px; display: inline-block; }
/* Section header above each group of rows. Mono uppercase, faint. */
.settings-section-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--text-faint);
text-transform: uppercase;
margin: 18px 4px 8px;
}
.settings-section-label:first-child { margin-top: 4px; }
/* Group — rounded card holding stacked rows. Rows share a left/right
inset + a bottom border between them; corners are rounded by the
parent so the rows fall into a single pill-like shape. */
.settings-group {
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: 10px;
overflow: hidden;
margin-bottom: 6px;
}
.settings-group--disabled { opacity: 0.55; pointer-events: none; }
/* One settings row. Layout: icon · label-and-sub · value/control · chev. */
.settings-v1-row {
display: flex;
align-items: center;
gap: 14px;
min-height: 56px;
padding: 10px 14px;
background: transparent;
border: none;
border-bottom: 1px solid var(--line);
width: 100%;
color: var(--text);
font-family: inherit;
text-align: left;
}
.settings-v1-row:last-child { border-bottom: none; }
.settings-v1-row--button { cursor: pointer; }
.settings-v1-row--button:hover:not([aria-disabled="true"]) { background: var(--bg-elev); }
.settings-v1-row[aria-disabled="true"] { cursor: not-allowed; }
.settings-v1-icon {
/* Outer slot keeps the 32 × 32 footprint so every row aligns its
label-and-controls column the same. Background + border-radius
stripped so the glyph floats free on the row background — cleaner
against the grouped-card look. SVG size bumped to 22 px (from the
inline 18 px attribute) so the un-boxed icon carries the visual
weight it lost when the chip went away. */
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text-dim);
flex-shrink: 0;
}
.settings-v1-icon svg { width: 22px; height: 22px; }
.settings-v1-row[aria-disabled="true"] .settings-v1-icon { color: var(--text-faint); }
/* Destructive variant — used for "Reset app". Label + icon both red
so the row signals "this is the dangerous one" even before the
confirm dialog appears. Chev stays neutral grey so it doesn't
double up on the warning. */
.settings-v1-row--danger .settings-v1-label,
.settings-v1-row--danger .settings-v1-icon { color: var(--red); }
.settings-v1-row--danger:hover:not([aria-disabled="true"]) {
background: rgba(239, 68, 68, 0.08);
}
.settings-v1-text {
flex: 1; min-width: 0;
display: flex; flex-direction: column; gap: 1px;
}
.settings-v1-label { font-size: 14px; color: var(--text); }
.settings-v1-sub { font-size: 11px; color: var(--text-faint); }
.settings-v1-value {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-dim);
letter-spacing: 0.06em;
}
.settings-v1-chev {
color: var(--text-faint);
flex-shrink: 0;
display: inline-flex; align-items: center;
}
/* Amber-tinted badge used for the beta code chip on the About row. */
.settings-v1-badge {
display: inline-flex; align-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--amber);
background: rgba(245, 158, 11, 0.12);
padding: 4px 8px;
border-radius: 4px;
}
/* Inline native