/*
  Velograph design system.

  Carbon and signal: a near-black frame, a deep navy rail, quiet light surfaces for the work, and one electric
  signal colour (violet-blue into cyan) reserved for brand moments, primary data and focus. Everything else is
  neutral, so that the data - zones, load, form - carries the colour on every screen.

  Tokens first, then base, layout, components. Pages add scoped CSS only for what is specific to them.
  Colour is never the only signal: statuses always carry a word or an icon too.
*/

:root {
    --vg-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --vg-font-display: "Inter Tight", "Inter", system-ui, sans-serif;

    /* Neutrals */
    --vg-bg: #f3f4f6;
    --vg-surface: #ffffff;
    --vg-surface-2: #f6f7f9;
    --vg-surface-3: #eceef2;
    --vg-border: #e5e7eb;
    --vg-border-strong: #d1d5db;
    --vg-text: #0b0d12;
    --vg-text-2: #464c58;
    --vg-text-3: #868d9b;

    /* Frame */
    --vg-ink: #0a0b10;
    --vg-ink-2: #12141b;
    --vg-ink-3: #1c1f29;
    --vg-ink-line: rgba(255, 255, 255, .07);
    --vg-ink-text: #e9ebf1;
    --vg-ink-muted: #8b91a1;

    /* Rail: the workspace navigation down the left, and the phone's top and tab bars. Deep navy drawn from the
       mark's blue rather than the frame's black, so the rail reads as Velograph and not as a hole beside the page,
       with a faint grid of dots, graph paper, in its empty space below the menu. The same in both themes. */
    --vg-rail: #0c1733;
    --vg-rail-2: #14224a;
    --vg-rail-3: #1c2c5a;
    --vg-rail-muted: #93a0c2;
    --vg-rail-label: #7584a6;
    --vg-rail-dots: rgba(150, 175, 255, .2);

    /* Signal */
    --vg-signal: #5b5cff;
    --vg-signal-2: #22d3ee;
    --vg-signal-grad: linear-gradient(135deg, #6d5dfc 0%, #3b82f6 50%, #22d3ee 100%);
    --vg-signal-soft: #eeeeff;

    /* Primary action is ink on light surfaces: confident without competing with the data. */
    --vg-primary: #0b0d12;
    --vg-primary-hover: #262a35;
    --vg-primary-ink: #ffffff;
    --vg-primary-soft: #eeeeff;
    --vg-accent: #5b5cff;
    --vg-accent-ink: #ffffff;
    --vg-accent-soft: #eeeeff;
    --vg-link: #4447e6;

    /* Status */
    --vg-good: #0f9f6e;
    --vg-good-soft: #e6f6ef;
    --vg-warn: #b45309;
    --vg-warn-soft: #fdf3e2;
    --vg-star: #d99a06;
    --vg-bad: #dc2645;
    --vg-bad-soft: #fdebee;
    --vg-info: #2563eb;
    --vg-info-soft: #e9f0fe;
    --vg-ai: #7c3aed;
    --vg-ai-soft: #f3edfe;

    /* Data */
    --vg-power: #5b5cff;
    --vg-hr: #ef4466;
    --vg-cadence: #a855f7;
    --vg-speed: #14b8a6;
    --vg-altitude: #94a3b8;
    --vg-wbal: #f59e0b;
    --vg-fitness: #3b82f6;
    --vg-fatigue: #ec4899;
    --vg-form: #f59e0b;
    /* Wellness: sleep in blues and violets, deepest sleep darkest; time awake in the night stands apart in amber. */
    --vg-sleep: #6366f1;
    --vg-sleep-deep: #2b2a8f;
    --vg-sleep-rem: #a78bfa;
    --vg-sleep-light: #8db8f5;
    --vg-sleep-awake: #f2a93b;
    --vg-breathing: #14b8a6;
    --vg-oxygen: #0ea5e9;
    --vg-steps: #22a35a;
    --vg-weight: #64748b;

    --vg-z1: #a3acb9;
    --vg-z2: #38bdf8;
    --vg-z3: #22c55e;
    --vg-z4: #facc15;
    --vg-z5: #fb923c;
    --vg-z6: #ef4444;
    --vg-z7: #a855f7;

    /* Sports beside riding, in tones apart from the zone colours rides wear (checked for colour blindness against them). */
    --vg-sport-run: #86198f;
    --vg-sport-swim: #1d4ed8;
    --vg-sport-gym: #854d0e;
    --vg-sport-other: var(--vg-text-3);

    /* A triathlon's bike leg beside its swim and run: the endurance sky, a step deeper in the dark (validated together). */
    --vg-sport-bike: #38bdf8;

    --vg-radius: 14px;
    --vg-radius-sm: 10px;
    --vg-radius-lg: 20px;
    --vg-shadow: 0 1px 2px rgba(10, 12, 20, .04);
    --vg-shadow-md: 0 4px 16px -4px rgba(10, 12, 20, .08), 0 1px 3px rgba(10, 12, 20, .05);
    --vg-shadow-lg: 0 24px 64px -16px rgba(10, 12, 20, .28);
    --vg-focus: 0 0 0 3px rgba(91, 92, 255, .28);
    --vg-scrollbar: rgba(10, 12, 20, .2);
    --vg-scrollbar-hover: rgba(10, 12, 20, .38);

    --vg-sidebar: 248px;
    --vg-topbar: 56px;

    color-scheme: light;
}

[data-theme="dark"] {
    --vg-sleep-deep: #5752e6;
    --vg-sport-run: #a3268f;
    --vg-sport-swim: #4b47d9;
    --vg-sport-gym: #a04d12;
    --vg-sport-bike: #0b9fd8;
    --vg-bg: #08090d;
    --vg-surface: #101219;
    --vg-surface-2: #161922;
    --vg-surface-3: #1e222d;
    --vg-border: #1f232e;
    --vg-border-strong: #2d3240;
    --vg-text: #eef0f5;
    --vg-text-2: #b2b8c6;
    --vg-text-3: #7d8494;
    --vg-primary: #eef0f5;
    --vg-primary-hover: #ffffff;
    --vg-primary-ink: #0b0d12;
    --vg-primary-soft: #1c1d3a;
    --vg-signal-soft: #1c1d3a;
    --vg-accent-soft: #1c1d3a;
    --vg-link: #8f90ff;
    --vg-power: #7c7dff;
    --vg-good-soft: #0c2a20;
    --vg-warn-soft: #2e2009;
    --vg-star: #f5c542;
    --vg-bad-soft: #33111a;
    --vg-info-soft: #0f1e3b;
    --vg-ai: #a78bfa;
    --vg-ai-soft: #22183b;
    --vg-shadow: none;
    --vg-shadow-md: 0 4px 16px -4px rgba(0, 0, 0, .5);
    --vg-scrollbar: rgba(255, 255, 255, .16);
    --vg-scrollbar-hover: rgba(255, 255, 255, .32);
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --vg-sleep-deep: #5752e6;
        --vg-sport-run: #a3268f;
        --vg-sport-swim: #4b47d9;
        --vg-sport-gym: #a04d12;
        --vg-sport-bike: #0b9fd8;
        --vg-bg: #08090d;
        --vg-surface: #101219;
        --vg-surface-2: #161922;
        --vg-surface-3: #1e222d;
        --vg-border: #1f232e;
        --vg-border-strong: #2d3240;
        --vg-text: #eef0f5;
        --vg-text-2: #b2b8c6;
        --vg-text-3: #7d8494;
        --vg-primary: #eef0f5;
        --vg-primary-hover: #ffffff;
        --vg-primary-ink: #0b0d12;
        --vg-primary-soft: #1c1d3a;
        --vg-signal-soft: #1c1d3a;
        --vg-accent-soft: #1c1d3a;
        --vg-link: #8f90ff;
        --vg-power: #7c7dff;
        --vg-good-soft: #0c2a20;
        --vg-warn-soft: #2e2009;
        --vg-star: #f5c542;
        --vg-bad-soft: #33111a;
        --vg-info-soft: #0f1e3b;
        --vg-ai: #a78bfa;
        --vg-ai-soft: #22183b;
        --vg-shadow: none;
        --vg-shadow-md: 0 4px 16px -4px rgba(0, 0, 0, .5);
        --vg-scrollbar: rgba(255, 255, 255, .16);
        --vg-scrollbar-hover: rgba(255, 255, 255, .32);
        color-scheme: dark;
    }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/*
   Scrollbars: a thin rounded thumb on a clear track, in the theme's colours, wherever something scrolls; no
   arrows, no grey gutter. Chrome, Edge and Safari take the ::-webkit-scrollbar rules. Chrome and Edge drop those
   for an element given scrollbar-width or scrollbar-color, and fall back to the system's scrollbar, arrows and
   all, so the standard properties are only for browsers without the others (Firefox).
*/
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { min-height: 36px; border: 3px solid transparent; border-radius: 999px; background: var(--vg-scrollbar) padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--vg-scrollbar-hover); }
::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) {
    :root { scrollbar-color: var(--vg-scrollbar) transparent; }
    * { scrollbar-width: thin; }
}

body {
    margin: 0;
    font-family: var(--vg-font);
    font-size: 14px;
    line-height: 1.55;
    color: var(--vg-text);
    background: var(--vg-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.2; font-family: var(--vg-font-display); font-weight: 700; letter-spacing: -.02em; color: var(--vg-text); }
h1 { font-size: 1.85rem; letter-spacing: -.03em; }
h2 { font-size: 1.05rem; letter-spacing: -.01em; }
h3 { font-size: .98rem; letter-spacing: -.01em; }
h4 { font-size: .9rem; }
p { margin: 0 0 .75rem; }
a { color: var(--vg-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
small, .vg-muted { color: var(--vg-text-3); }
code { font-size: .88em; background: var(--vg-surface-2); padding: .1em .35em; border-radius: 5px; border: 1px solid var(--vg-border); }
hr { border: 0; border-top: 1px solid var(--vg-border); margin: 1.25rem 0; }
:focus-visible { outline: none; box-shadow: var(--vg-focus); border-radius: 8px; }
/* The router moves focus to each new page's heading for screen readers (FocusOnNavigate). It is not a control, so no ring. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { box-shadow: none; outline: none; }
::selection { background: rgba(91, 92, 255, .2); }

.vg-num { font-family: var(--vg-font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; font-weight: 600; }
.vg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vg-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vg-text-3); }

/* ---------- Brand ---------- */

.vg-brand { display: inline-flex; align-items: center; gap: .6rem; color: inherit; font-family: var(--vg-font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; text-decoration: none !important; }
.vg-brand-mark { width: 30px; height: 30px; flex-shrink: 0; display: block; }
.vg-brand small { color: var(--vg-ink-muted); font-weight: 500; letter-spacing: 0; }
.vg-gradient-text { background: var(--vg-signal-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Shell ---------- */

/* The rail and the phone's bars wear the rail's navy: everything drawn in them in the frame's colours, the
   workspace and account menus' triggers too, takes the navy shades instead. */
.vg-topbar, .vg-sidebar, .vg-tabbar {
    --vg-ink: var(--vg-rail);
    --vg-ink-2: var(--vg-rail-2);
    --vg-ink-3: var(--vg-rail-3);
    --vg-ink-muted: var(--vg-rail-muted);
}

.vg-shell { min-height: 100vh; display: flex; flex-direction: column; }
.vg-body { flex: 1; display: flex; min-height: 0; }

/* The top bar only exists on phones and on pages outside a team. */
.vg-topbar {
    position: sticky; top: 0; z-index: 40;
    height: var(--vg-topbar);
    display: flex; align-items: center; gap: .75rem;
    padding: 0 1.1rem;
    background: var(--vg-ink);
    color: var(--vg-ink-text);
    border-bottom: 1px solid var(--vg-ink-line);
}
.vg-topbar-team { color: var(--vg-ink-muted); font-weight: 500; display: inline-flex; align-items: center; gap: .4rem; }
.vg-topbar-spacer { flex: 1; }
.vg-topbar .vg-btn--ghost { color: var(--vg-ink-muted); }
.vg-topbar .vg-btn--ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }
/* Team pages carry their own navigation rail, and the landing and sign-in pages their own header. */
.vg-shell:has(.vg-sidebar) .vg-topbar, .vg-shell:has(.vg-landing) .vg-topbar, .vg-shell:has(.vg-auth) .vg-topbar { display: none; }

.vg-sidebar {
    width: var(--vg-sidebar); flex-shrink: 0;
    background: var(--vg-ink);
    color: var(--vg-ink-text);
    position: sticky; top: 0;
    height: 100vh;
    display: flex; flex-direction: column;
    padding: 1.1rem .8rem .9rem;
    border-right: 1px solid var(--vg-ink-line);
    /* Above the page, so the workspace and account menus that open from the rail lie over it. */
    z-index: 50;
}
.vg-sidebar__brand { padding: .15rem .55rem 1.1rem; }
.vg-team-switch {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem .6rem; margin-bottom: .9rem;
    border-radius: 12px; background: var(--vg-ink-2); border: 1px solid var(--vg-ink-line);
    color: var(--vg-ink-text); text-decoration: none !important;
}
.vg-team-switch:hover { background: var(--vg-ink-3); }
.vg-team-switch__mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-family: var(--vg-font-display); font-weight: 700; font-size: .8rem; color: #0b0d12; flex-shrink: 0; }
/* A logo sits on white with a little air around it, the way a crest is printed on a jersey. */
.vg-team-switch__mark--logo { position: relative; overflow: hidden; background: #fff !important; color: transparent; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); }
.vg-team-switch__mark--logo img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; }
.vg-team-switch__name { font-weight: 600; font-size: .86rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-team-switch__role { font-size: .74rem; color: var(--vg-ink-muted); }

.vg-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
/* The menu reaches the rail's edges, so the current place's bar on the left edge is not cut off by the menu's scrolling. */
.vg-sidebar .vg-nav { margin-inline: -.8rem; padding-inline: .8rem; }
/* Graph paper: dots in the empty space between the last place and the footer, coming in below the menu and gone again
   before the footer's line, so they never sit under a word. A window too short to leave space shows none. */
.vg-sidebar .vg-nav::after {
    content: ""; flex: 1 0 0; margin-inline: -.8rem; pointer-events: none;
    background-image: radial-gradient(circle, var(--vg-rail-dots) 1px, transparent 1.5px);
    background-size: 16px 16px; background-position: 4px 4px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 1.5rem, rgba(0, 0, 0, .6) 45%, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, transparent 1.5rem, rgba(0, 0, 0, .6) 45%, #000 80%, transparent);
}
/*
   On a short window the rail scrolls, without a scrollbar beside the menu: the edge that has more beyond it
   fades out, and only while it does. Browsers that cannot tell how far the rail is scrolled get a thin dark
   thumb with no arrows instead. (Setting scrollbar-width or scrollbar-color in Chrome or Edge brings back the
   system's own scrollbar, arrows and all, so those are for Firefox only.)
*/
@property --vg-rail-top { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --vg-rail-bottom { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes vg-rail-fade {
    0% { --vg-rail-top: 0px; --vg-rail-bottom: 32px; }
    10% { --vg-rail-top: 32px; }
    90% { --vg-rail-bottom: 32px; }
    100% { --vg-rail-top: 32px; --vg-rail-bottom: 0px; }
}
.vg-sidebar .vg-nav::-webkit-scrollbar { width: 4px; }
.vg-sidebar .vg-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 999px; }
.vg-sidebar .vg-nav::-webkit-scrollbar-track { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
    .vg-sidebar .vg-nav { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; }
}
@supports (animation-timeline: scroll()) {
    .vg-sidebar .vg-nav {
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--vg-rail-top), #000 calc(100% - var(--vg-rail-bottom)), transparent);
        mask-image: linear-gradient(to bottom, transparent, #000 var(--vg-rail-top), #000 calc(100% - var(--vg-rail-bottom)), transparent);
        animation: vg-rail-fade linear both;
        animation-timeline: scroll(self);
    }
    .vg-sidebar .vg-nav::-webkit-scrollbar { display: none; }
}
.vg-nav-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--vg-rail-label); margin: 1.1rem .65rem .4rem; }
.vg-nav a {
    position: relative;
    display: flex; align-items: center; gap: .7rem;
    padding: .52rem .65rem; border-radius: 9px;
    color: var(--vg-ink-muted); font-weight: 500; font-size: .89rem; text-decoration: none !important;
    transition: background .12s, color .12s;
}
.vg-nav a:hover { background: rgba(255, 255, 255, .05); color: var(--vg-ink-text); }
.vg-nav a.active { background: rgba(255, 255, 255, .07); color: #fff; }
.vg-nav a.active::before { content: ""; position: absolute; left: -.8rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vg-signal-grad); }
.vg-nav a.active svg { color: #9fa0ff; }
/* A laptop's short window: the rail tightens so every entry fits without scrolling. */
@media (max-height: 880px) {
    .vg-sidebar .vg-team-switch { margin-bottom: .5rem; }
    .vg-sidebar .vg-nav-label { margin: .7rem .65rem .25rem; }
    .vg-sidebar .vg-nav a { padding-top: .36rem; padding-bottom: .36rem; }
}

.vg-sidebar__footer { border-top: 1px solid var(--vg-ink-line); padding-top: .8rem; margin-top: .6rem; display: flex; align-items: center; gap: .3rem; }
.vg-sidebar__footer .vg-btn--ghost { color: var(--vg-ink-muted); }
.vg-sidebar__footer .vg-btn--ghost:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.vg-sidebar__user { flex: 1; min-width: 0; display: flex; align-items: center; gap: .55rem; font-size: .82rem; color: var(--vg-ink-muted); white-space: nowrap; overflow: hidden; }

.vg-main { flex: 1; min-width: 0; padding: 2rem 2.25rem 5rem; }

/* Ask beside the page: on a wide screen the open Ask panel (460px, AskPanel.razor.css) takes the right of the window and
   the page moves aside, so nothing hides behind it and the page stays usable. */
.vg-main { transition: padding-right .2s ease; }
@media (min-width: 1100px) {
    html:has(aside.ask) .vg-main { padding-right: calc(460px + 1.5rem); }
}
@media (prefers-reduced-motion: reduce) {
    .vg-main { transition: none; }
}
.vg-container { max-width: 1320px; margin: 0 auto; }
.vg-container--narrow { max-width: 760px; margin: 0 auto; }

.vg-tabbar, .vg-mobilebar { display: none; }

/* Inside Velograph's iPhone and Android apps (the app sets these on <html>): the phone draws the frame natively, its
   top bar above the page and its tab bar below, so the page draws neither, nor the rail on a wide screen; links and
   pictures open no browser-style preview on a long press. */
html.vg-app { -webkit-tap-highlight-color: transparent; }
html.vg-app a, html.vg-app img { -webkit-touch-callout: none; }
html.vg-app .vg-sidebar { display: none; }
html.vg-app .vg-main { padding-top: 1rem; }
/* The app's top bar has back, so a page needs no trail of where it sits. */
html.vg-app .vg-breadcrumb { display: none; }

@media (max-width: 900px) {
    .vg-sidebar { display: none; }
    .vg-main { padding: 0 1rem calc(6.5rem + env(safe-area-inset-bottom)); }
    h1 { font-size: 1.5rem; }

    /* Workspace pages draw their own phone header; the app's generic top bar is for pages outside one. */
    .vg-shell:has(.vg-sidebar) .vg-topbar { display: none; }

    .vg-mobilebar {
        position: sticky; top: 0; z-index: 40;
        display: flex; align-items: center; gap: .75rem;
        margin: 0 -1rem 1.1rem; padding: .6rem 1rem;
        padding-top: calc(.6rem + env(safe-area-inset-top));
        background: color-mix(in srgb, var(--vg-bg) 86%, transparent);
        backdrop-filter: saturate(1.4) blur(14px);
        border-bottom: 1px solid var(--vg-border);
    }
    .vg-mobilebar__team {
        flex: 1; min-width: 0; display: flex; align-items: center; gap: .6rem;
        padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer;
        color: var(--vg-text); text-decoration: none !important; font-weight: 650;
    }
    .vg-mobilebar__team .vg-team-switch__mark { width: 32px; height: 32px; border-radius: 10px; }
    .vg-mobilebar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .98rem; letter-spacing: -.01em; }
    .vg-mobilebar__team svg { color: var(--vg-text-3); flex-shrink: 0; }
    .vg-mobilebar__me { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }

    /* The tab bar: four places for the person's role plus More. Big targets, a clear pill on the current one. */
    .vg-tabbar {
        display: flex; position: fixed; inset: auto 0 0 0; z-index: 45;
        gap: .15rem; padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--vg-rail) 94%, transparent); backdrop-filter: saturate(1.4) blur(16px);
        border-top: 1px solid var(--vg-ink-line);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, .18);
    }
    .vg-tab {
        flex: 1; min-width: 0; min-height: 56px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
        border: 0; background: none; cursor: pointer; font: inherit;
        color: var(--vg-rail-muted); text-decoration: none !important; -webkit-tap-highlight-color: transparent;
    }
    .vg-tab__icon {
        display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px;
        transition: background .18s ease, color .18s ease;
    }
    .vg-tab__label { font-size: .72rem; font-weight: 600; letter-spacing: .005em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vg-tab.active { color: #fff; }
    .vg-tab.active .vg-tab__icon { background: rgba(135, 138, 255, .22); color: #c7c8ff; }
    .vg-tab:active .vg-tab__icon { transform: scale(.94); }

    /* "More": everything else, in a sheet that rises from the bottom. */
    .vg-sheet-backdrop {
        position: fixed; inset: 0; z-index: 60;
        background: rgba(6, 7, 11, .5); backdrop-filter: blur(2px);
        display: flex; align-items: flex-end; animation: vg-fade .15s ease-out;
    }
    .vg-sheet {
        width: 100%; max-height: 86vh; overflow-y: auto; outline: none;
        background: var(--vg-surface); color: var(--vg-text);
        border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .3);
        padding: .5rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
        animation: vg-rise .22s cubic-bezier(.2, .8, .2, 1);
    }
    .vg-sheet__handle { width: 40px; height: 5px; border-radius: 3px; background: var(--vg-border-strong, var(--vg-border)); margin: .2rem auto .9rem; }
    .vg-sheet__team {
        display: flex; align-items: center; gap: .75rem; width: 100%; padding: .75rem .85rem; border: 0; border-radius: 14px;
        background: var(--vg-surface-2); color: var(--vg-text); font: inherit; text-align: left; cursor: pointer; text-decoration: none !important;
    }
    .vg-sheet__team b { display: block; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .vg-sheet__team span span, .vg-sheet__team > span > span { display: block; font-size: .78rem; color: var(--vg-text-3); }
    .vg-sheet__switch { font-size: .8rem; font-weight: 600; color: var(--vg-link); flex-shrink: 0; }
    .vg-sheet__label { font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; color: var(--vg-text-3); margin: 1.1rem .2rem .5rem; }
    .vg-sheet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
    .vg-sheet__item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; text-align: center;
        min-height: 84px; padding: .7rem .4rem; border-radius: 14px;
        background: var(--vg-surface-2); color: var(--vg-text); font-size: .8rem; font-weight: 600; line-height: 1.2;
        text-decoration: none !important; border: 1px solid transparent;
    }
    .vg-sheet__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--vg-surface); color: var(--vg-text-2, var(--vg-text)); }
    .vg-sheet__item.is-current { border-color: color-mix(in srgb, #6b6cff 45%, transparent); }
    .vg-sheet__item.is-current .vg-sheet__icon { background: color-mix(in srgb, #6b6cff 16%, transparent); color: #6b6cff; }
    .vg-sheet__account { border-radius: 14px; background: var(--vg-surface-2); overflow: hidden; }
    .vg-sheet__row {
        display: flex; align-items: center; gap: .7rem; min-height: 50px; padding: 0 .9rem;
        color: var(--vg-text); font-weight: 550; font-size: .9rem; text-decoration: none !important;
        border-bottom: 1px solid var(--vg-border);
    }
    .vg-sheet__row:last-child { border-bottom: 0; }
    .vg-sheet__row--tools { justify-content: space-between; }
    .vg-sheet__row--tools .vg-btn--ghost { color: var(--vg-text-2, var(--vg-text)); }
}

@keyframes vg-rise { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes vg-fade { from { opacity: 0; } to { opacity: 1; } }
/* ---------- Page header ---------- */

.vg-page-header { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.vg-page-header h1 { margin: 0; }
.vg-page-header .vg-subtitle { color: var(--vg-text-3); margin: .3rem 0 0; font-size: .92rem; }
.vg-page-header-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.vg-breadcrumb { font-size: .8rem; color: var(--vg-text-3); margin-bottom: .4rem; font-weight: 500; }
.vg-breadcrumb a { color: var(--vg-text-3); }
.vg-breadcrumb a:hover { color: var(--vg-text); }

/* A ride's page: the breadcrumb on the left, previous and next ride on the right. */
.act-topline { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .4rem; }
.act-topline .vg-breadcrumb { margin-bottom: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Both halves are one fixed width with the arrows at the outer edges, so stepping through rides never moves them. */
.act-step { display: inline-flex; flex: none; border: 1px solid var(--vg-border); border-radius: 10px; background: var(--vg-surface); overflow: hidden; }
.act-step__link {
    display: inline-flex; align-items: center; gap: .4rem; width: 9.5rem; padding: .3rem .6rem;
    color: var(--vg-text); text-decoration: none; font-size: .8rem; font-weight: 600; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.act-step__link + .act-step__link { border-left: 1px solid var(--vg-border); }
a.act-step__link:hover { background: var(--vg-surface-2); text-decoration: none; }
.act-step__link.is-off { color: var(--vg-text-3); cursor: default; }
.act-step__link--next { justify-content: flex-end; text-align: right; }
.act-step__link > svg { flex: none; }
.act-step__text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; line-height: 1.15; }
.act-step__text small { font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--vg-text-3); }
.act-step__race { display: inline-flex; flex: none; color: var(--vg-warn); }
/* On a phone the dates would crowd out the breadcrumb: two square arrows, the date in the tooltip. */
@media (max-width: 640px) {
    .act-step__text, .act-step__race { display: none; }
    .act-step__link, .act-step__link--next { width: 2.5rem; height: 2.25rem; padding: 0; justify-content: center; }
}

/* ---------- Cards and grids ---------- */

.vg-card {
    background: var(--vg-surface);
    border: 1px solid var(--vg-border);
    border-radius: var(--vg-radius);
    box-shadow: var(--vg-shadow);
    min-width: 0;
}
a.vg-card { transition: border-color .15s, box-shadow .15s, transform .15s; }
a.vg-card:hover { border-color: var(--vg-border-strong); box-shadow: var(--vg-shadow-md); text-decoration: none; }
.vg-card__header { display: flex; align-items: center; gap: .75rem; padding: 1.05rem 1.25rem 0; min-height: 2.6rem; }
.vg-card__header h2, .vg-card__header h3 { margin: 0; font-size: .98rem; }
.vg-card__header .vg-card__actions { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.vg-card__body { padding: 1rem 1.25rem 1.2rem; }
.vg-card__footer { padding: .8rem 1.25rem; border-top: 1px solid var(--vg-border); display: flex; gap: .5rem; justify-content: flex-end; }
.vg-card + .vg-card { margin-top: 1rem; }
.vg-grid > .vg-card + .vg-card, .vg-stack > .vg-card + .vg-card, .vg-row > .vg-card + .vg-card { margin-top: 0; }

.vg-grid { display: grid; gap: 1rem; }
.vg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vg-grid--sidebar { grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; }
@media (max-width: 1180px) { .vg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vg-grid--sidebar { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .vg-grid--2, .vg-grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .vg-grid--4 { grid-template-columns: 1fr 1fr; gap: .6rem; } }

.vg-stack { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.vg-grid > *, .vg-stack > * { min-width: 0; }
.vg-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.vg-spacer { flex: 1; }

/* ---------- Stats ---------- */

.vg-stat { padding: 1.05rem 1.2rem 1.1rem; position: relative; overflow: hidden; }
.vg-stat__label { font-size: .78rem; font-weight: 500; color: var(--vg-text-3); display: flex; align-items: center; gap: .4rem; }
.vg-stat__label svg { color: var(--vg-text-3); }
.vg-stat__value { font-family: var(--vg-font-display); font-size: 2.05rem; font-weight: 700; line-height: 1.05; margin-top: .45rem; font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.vg-stat__value small { font-size: .95rem; color: var(--vg-text-3); font-weight: 500; margin-left: .2rem; letter-spacing: 0; }
.vg-stat__hint { font-size: .78rem; color: var(--vg-text-3); margin-top: .35rem; }
.vg-stat__spark { position: absolute; right: 0; bottom: 0; left: 52%; height: 46px; opacity: .85; pointer-events: none; }

.vg-delta { display: inline-flex; align-items: center; gap: .15rem; font-size: .74rem; font-weight: 600; padding: .05rem .4rem; border-radius: 6px; font-variant-numeric: tabular-nums; }
.vg-delta--up { color: var(--vg-good); background: var(--vg-good-soft); }
.vg-delta--down { color: var(--vg-bad); background: var(--vg-bad-soft); }
.vg-delta--flat { color: var(--vg-text-3); background: var(--vg-surface-2); }

.vg-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem 1.25rem; margin: 0; }
.vg-kv dt { font-size: .76rem; color: var(--vg-text-3); font-weight: 500; }
.vg-kv dd { margin: .15rem 0 0; font-family: var(--vg-font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vg-kv dd small { font-family: var(--vg-font); font-size: .8rem; color: var(--vg-text-3); font-weight: 500; letter-spacing: 0; }

/* ---------- Buttons ---------- */

.vg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 36px; padding: 0 .9rem;
    border-radius: var(--vg-radius-sm);
    border: 1px solid var(--vg-border);
    background: var(--vg-surface); color: var(--vg-text);
    font: inherit; font-weight: 600; font-size: .86rem; letter-spacing: -.005em;
    cursor: pointer; text-decoration: none !important; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(10, 12, 20, .04);
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.vg-btn:hover { background: var(--vg-surface-2); border-color: var(--vg-border-strong); }
.vg-btn:disabled, .vg-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.vg-btn--primary { background: var(--vg-primary); border-color: var(--vg-primary); color: var(--vg-primary-ink); }
.vg-btn--primary:hover { background: var(--vg-primary-hover); border-color: var(--vg-primary-hover); }
.vg-btn--accent { background: var(--vg-signal-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 20px -6px rgba(91, 92, 255, .6); }
.vg-btn--accent:hover { filter: brightness(1.08); background: var(--vg-signal-grad); }
.vg-btn--ai { background: linear-gradient(135deg, #7c3aed, #5b5cff); border-color: transparent; color: #fff; }

/* Ask, one tap away on every workspace page: bottom right, above the tab bar on phones. */
.vg-ask-fab {
    position: fixed; z-index: 44; right: 1.25rem; bottom: 1.25rem;
    display: inline-flex; align-items: center; gap: .45rem;
    border: 0; border-radius: 999px; padding: .65rem 1.05rem .65rem .9rem;
    background: linear-gradient(135deg, #7c3aed, #5b5cff); color: #fff;
    font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
    box-shadow: 0 10px 28px rgba(91, 92, 255, .35), 0 2px 6px rgba(0, 0, 0, .12);
    transition: transform .15s, box-shadow .15s;
}
.vg-ask-fab:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(91, 92, 255, .42), 0 2px 6px rgba(0, 0, 0, .12); }
.vg-ask-fab:focus-visible { outline: none; box-shadow: var(--vg-focus), 0 10px 28px rgba(91, 92, 255, .35); }
/* An answer being written on another page: three dots where the mark is; one written and not read: a dot on the button. */
.vg-ask-fab__dots { display: inline-flex; align-items: center; gap: 3px; width: 18px; height: 18px; justify-content: center; }
.vg-ask-fab__dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: vg-ask-fab-dot 1s infinite ease-in-out; }
.vg-ask-fab__dots i:nth-child(2) { animation-delay: .15s; }
.vg-ask-fab__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes vg-ask-fab-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .vg-ask-fab__dots i { animation: none; opacity: .85; } }
.vg-ask-fab__badge { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--vg-good, #16a34a); border: 2px solid var(--vg-surface, #fff); }
@media (max-width: 900px) {
    .vg-ask-fab { bottom: calc(5.1rem + env(safe-area-inset-bottom)); right: .9rem; padding: .7rem; }
    .vg-ask-fab span { display: none; }
}
@media print { .vg-ask-fab { display: none; } }
@media (max-width: 900px) {
    html.vg-app .vg-main { padding-bottom: 2rem; }
    html.vg-app .vg-ask-fab { bottom: 1rem; }
    html.vg-app .vg-toasts { bottom: 1rem; }
    html.vg-app .vg-sheet { padding-bottom: 1.2rem; }
}
.vg-btn--ai:hover { filter: brightness(1.08); background: linear-gradient(135deg, #7c3aed, #5b5cff); }
.vg-btn--ai-outline { border-color: #a99bf8; color: var(--vg-ai); background: var(--vg-surface); }
.vg-btn--ai-outline:hover { background: var(--vg-ai-soft); border-color: #7c3aed; }
.vg-ai-issues { border-color: var(--vg-warn); }
.vg-btn--danger { color: var(--vg-bad); }
.vg-btn--danger:hover { background: var(--vg-bad-soft); border-color: color-mix(in srgb, var(--vg-bad) 35%, var(--vg-border)); }
.vg-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--vg-text-2); }
.vg-btn--ghost:hover { background: var(--vg-surface-3); border-color: transparent; color: var(--vg-text); }
.vg-btn--sm { min-height: 30px; padding: 0 .65rem; font-size: .8rem; border-radius: 8px; }
.vg-btn--lg { min-height: 46px; padding: 0 1.3rem; font-size: .95rem; border-radius: 12px; }
.vg-btn--icon { padding: 0; width: 36px; }
.vg-btn--sm.vg-btn--icon { width: 30px; }
.vg-btn--block { width: 100%; }

/* ---------- Forms ---------- */

.vg-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.vg-label { font-size: .82rem; font-weight: 600; color: var(--vg-text); }
.vg-help { font-size: .78rem; color: var(--vg-text-3); line-height: 1.45; }
.vg-input, .vg-select, .vg-textarea {
    width: 100%; min-height: 38px; padding: .5rem .75rem;
    border: 1px solid var(--vg-border-strong); border-radius: var(--vg-radius-sm);
    background: var(--vg-surface); color: var(--vg-text);
    font: inherit; font-size: .9rem;
    transition: border-color .12s, box-shadow .12s;
}
.vg-select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23868d9b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; }
.vg-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.vg-input:hover, .vg-select:hover, .vg-textarea:hover { border-color: var(--vg-text-3); }
.vg-input:focus, .vg-select:focus, .vg-textarea:focus { outline: none; border-color: var(--vg-signal); box-shadow: var(--vg-focus); }
.vg-input::placeholder, .vg-textarea::placeholder { color: var(--vg-text-3); }
/* An API key in a text field (SecretInput), masked like a password but out of reach of password managers. */
.vg-secret { -webkit-text-security: disc; font-family: var(--vg-font); letter-spacing: .04em; }
.vg-secret:placeholder-shown { -webkit-text-security: none; letter-spacing: normal; }
.vg-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.vg-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .vg-form-grid, .vg-form-grid--3 { grid-template-columns: 1fr; } }
.vg-check { display: inline-flex; align-items: center; gap: .55rem; font-weight: 500; cursor: pointer; }
.vg-check input { width: 17px; height: 17px; accent-color: var(--vg-signal); }

.vg-scale { display: flex; gap: .4rem; }
.vg-scale button {
    flex: 1; min-height: 44px; border-radius: var(--vg-radius-sm);
    border: 1px solid var(--vg-border); background: var(--vg-surface-2);
    font: inherit; font-family: var(--vg-font-display); font-size: 1rem; font-weight: 700; cursor: pointer; color: var(--vg-text-2);
    transition: all .12s;
}
.vg-scale button:hover { border-color: var(--vg-border-strong); color: var(--vg-text); }
.vg-scale button.is-selected { background: var(--vg-primary); border-color: var(--vg-primary); color: var(--vg-primary-ink); }

/* ---------- Badges, chips, alerts ---------- */

.vg-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .1rem .5rem; border-radius: 6px;
    font-size: .74rem; font-weight: 600; line-height: 1.55;
    background: var(--vg-surface-3); color: var(--vg-text-2);
    white-space: nowrap;
}
.vg-badge--good { background: var(--vg-good-soft); color: var(--vg-good); }
.vg-badge--warn { background: var(--vg-warn-soft); color: var(--vg-warn); }
.vg-badge--bad { background: var(--vg-bad-soft); color: var(--vg-bad); }
.vg-badge--info { background: var(--vg-info-soft); color: var(--vg-info); }
.vg-badge--ai { background: var(--vg-ai-soft); color: var(--vg-ai); }
.vg-badge--primary { background: var(--vg-signal-soft); color: var(--vg-link); }

.vg-chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .08rem .5rem .08rem .42rem; border-radius: 999px;
    font-size: .73rem; font-weight: 600;
    background: var(--vg-surface); color: var(--vg-text-2);
    border: 1px solid var(--vg-border);
}
.vg-chip__dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.vg-alert {
    display: flex; gap: .7rem; align-items: flex-start;
    padding: .8rem 1rem; border-radius: var(--vg-radius-sm);
    border: 1px solid transparent; font-size: .88rem;
    color: var(--vg-text);
}
.vg-alert > svg { flex-shrink: 0; margin-top: .12rem; }
.vg-alert--info { background: var(--vg-info-soft); border-color: color-mix(in srgb, var(--vg-info) 18%, transparent); }
.vg-alert--info > svg { color: var(--vg-info); }
.vg-alert--good { background: var(--vg-good-soft); border-color: color-mix(in srgb, var(--vg-good) 18%, transparent); }
.vg-alert--good > svg { color: var(--vg-good); }
.vg-alert--warn { background: var(--vg-warn-soft); border-color: color-mix(in srgb, var(--vg-warn) 18%, transparent); }
.vg-alert--warn > svg { color: var(--vg-warn); }
.vg-alert--error { background: var(--vg-bad-soft); border-color: color-mix(in srgb, var(--vg-bad) 18%, transparent); color: var(--vg-bad); }
.vg-alert--ai { background: var(--vg-ai-soft); border-color: color-mix(in srgb, var(--vg-ai) 18%, transparent); }
.vg-alert--ai > svg { color: var(--vg-ai); }
.vg-alert p:last-child { margin-bottom: 0; }

/* ---------- Tables and lists ---------- */

/* Positioned, so a hidden label in a header cell stays inside the scrolling table instead of widening the page. */
.vg-table-wrap { position: relative; overflow-x: auto; margin: 0 -1.25rem; padding: 0 1.25rem; }
.vg-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.vg-table th {
    text-align: left; font-size: .74rem; font-weight: 500;
    color: var(--vg-text-3); padding: .55rem .7rem; border-bottom: 1px solid var(--vg-border); white-space: nowrap;
}
.vg-table td { padding: .7rem .7rem; border-bottom: 1px solid var(--vg-border); vertical-align: middle; }
.vg-table th:first-child, .vg-table td:first-child { padding-left: 0; }
.vg-table th:last-child, .vg-table td:last-child { padding-right: 0; }
.vg-table tr:last-child td { border-bottom: 0; }
.vg-table td .vg-row { flex-wrap: nowrap; white-space: nowrap; }
.vg-table tbody tr.is-link { cursor: pointer; transition: background .1s; }
.vg-table tbody tr.is-link:hover td { background: var(--vg-surface-2); }
.vg-table td.num { text-align: right; font-family: var(--vg-font-display); font-weight: 600; font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Headers above numbers align with them but keep the header style, so every column heading reads the same. */
.vg-table th.num { text-align: right; }
/* A table placed straight in a card (no card body) keeps the card's inner margin on both sides. */
.vg-card > .vg-table-wrap { margin: 0; padding: 0; }
.vg-card > .vg-table-wrap .vg-table th:first-child, .vg-card > .vg-table-wrap .vg-table td:first-child { padding-left: 1.25rem; }
.vg-card > .vg-table-wrap .vg-table th:last-child, .vg-card > .vg-table-wrap .vg-table td:last-child { padding-right: 1.25rem; }
.vg-card > .vg-table-wrap .vg-table th { padding-top: .8rem; padding-bottom: .65rem; }
.vg-card > .vg-table-wrap .vg-table tr:last-child td:first-child { border-bottom-left-radius: var(--vg-radius-lg); }
.vg-card > .vg-table-wrap .vg-table tr:last-child td:last-child { border-bottom-right-radius: var(--vg-radius-lg); }

.vg-list { list-style: none; margin: 0; padding: 0; }
.vg-list > li { display: flex; align-items: center; gap: .8rem; padding: .75rem 0; border-bottom: 1px solid var(--vg-border); }
.vg-list > li:first-child { padding-top: .2rem; }
.vg-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.vg-list__main { flex: 1; min-width: 0; }
.vg-list__title { font-weight: 600; color: var(--vg-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; letter-spacing: -.005em; }
a.vg-list__title:hover { color: var(--vg-link); text-decoration: none; }
.vg-list__meta { font-size: .78rem; color: var(--vg-text-3); }

/* Activity rows: races stand out with the race colour, and every ride carries its effort strip. */
.vg-list > li.is-race { box-shadow: inset 3px 0 0 var(--vg-warn); padding-left: .7rem; }
/* The whole row is the link to the ride. */
.act-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
.act-row:hover { text-decoration: none; }
.act-row:hover .vg-list__title { color: var(--vg-link); }
/* Badges and the device credit never shrink, so in a narrow card the name takes a line of its own
   instead of being squeezed to nothing beside them. */
.act-row__title { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; min-width: 0; }
.act-row__title .vg-list__title { min-width: 0; max-width: 100%; }
.act-row__race, .act-row__tag { flex: none; font-size: .66rem; padding: .05rem .4rem; gap: .2rem; }

/* A platform's credit for its data, such as "Garmin Edge 1050": plain text beside or under the title, always
   visible, never in a tooltip (Garmin's API brand guidelines). */
.vg-attribution { margin: .15rem 0 0; color: var(--vg-text-2); font-size: .78rem; font-weight: 600; letter-spacing: .01em; }
.vg-attribution--derived { margin: .4rem 0 0; font-weight: 500; color: var(--vg-text-3); }
.act-row__attribution { flex: none; margin: 0; font-size: .7rem; white-space: nowrap; }
.act-row__effort { max-width: 260px; margin-top: .35rem; }
.act-row__ask {
    flex: none; font-size: .66rem; font-weight: 700; padding: .05rem .45rem; border-radius: 999px;
    border: 1px dashed var(--vg-warn); color: var(--vg-warn); text-decoration: none;
}
.act-row__ask:hover { background: var(--vg-warn-soft); text-decoration: none; }

/* "Was this a race?" on a ride that looks like one. */
.act-race-q {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    border: 1px solid var(--vg-warn); background: var(--vg-warn-soft); border-radius: 14px;
    padding: .8rem 1rem; margin-bottom: 1rem;
}
.act-race-q__mark { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--vg-surface); color: var(--vg-warn); flex: none; }
.act-race-q__text { flex: 1 1 320px; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.act-race-q__text span { font-size: .86rem; color: var(--vg-text-2); }
.act-race-q__actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.act-race-q__yes { border-color: var(--vg-warn); }
.vg-btn--race.is-active { background: var(--vg-warn-soft); border-color: var(--vg-warn); color: var(--vg-text); }
.vg-btn--race.is-active svg { color: var(--vg-warn); }
/* Range buttons and a season picker side by side in a card header; they wrap under the title on phones. */
.ov-ranges { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.ov-season { width: auto; padding-top: .3rem; padding-bottom: .3rem; font-size: .8rem; }
.act-kind button { padding-top: .2rem; padding-bottom: .2rem; font-size: .78rem; }
.vg-segmented.act-kind button.is-race { background: var(--vg-warn-soft); color: var(--vg-text); box-shadow: inset 0 0 0 1px var(--vg-warn); }
.vg-segmented.act-kind button.is-race svg { color: var(--vg-warn); }
button.act-link-race { border: 0; cursor: pointer; font: inherit; font-size: .72rem; }
/* The planned session a ride was: opens the choice of session. With none, an empty slot to tie one in. */
button.act-plan { border: 0; cursor: pointer; font-family: inherit; }
button.act-plan:hover { box-shadow: inset 0 0 0 1px currentColor; }
button.act-plan:focus-visible { outline: none; box-shadow: var(--vg-focus); }
button.act-plan--open { background: transparent; outline: 1px dashed var(--vg-border-strong); outline-offset: -1px; }
button.act-plan--open:hover { box-shadow: none; color: var(--vg-text); background: var(--vg-surface-2); }

/* ---------- Tabs ---------- */

.vg-tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--vg-border); margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.vg-tabs a, .vg-tabs button {
    padding: .65rem .85rem; font-weight: 600; font-size: .86rem; color: var(--vg-text-3);
    border: 0; background: none; cursor: pointer; text-decoration: none !important;
    border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-family: inherit;
}
.vg-tabs a:hover, .vg-tabs button:hover { color: var(--vg-text); }
.vg-tabs .is-active { color: var(--vg-text); border-bottom-color: var(--vg-text); }

.vg-segmented { display: inline-flex; background: var(--vg-surface-3); border-radius: 10px; padding: 3px; gap: 2px; }
.vg-segmented button {
    border: 0; background: none; padding: .32rem .75rem; border-radius: 7px;
    font: inherit; font-size: .8rem; font-weight: 600; color: var(--vg-text-3); cursor: pointer;
}
.vg-segmented button:hover { color: var(--vg-text); }
.vg-segmented button.is-active { background: var(--vg-surface); color: var(--vg-text); box-shadow: 0 1px 3px rgba(10, 12, 20, .1); }

/* ---------- Avatars ---------- */

.vg-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    font-weight: 700; font-size: .74rem; color: #fff; letter-spacing: .02em;
    background: var(--vg-signal);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}
.vg-avatar--lg { width: 72px; height: 72px; font-size: 1.4rem; font-family: var(--vg-font-display); }

/* ---------- Empty, loading, modal ---------- */

.vg-empty { text-align: center; padding: 3rem 1rem; color: var(--vg-text-3); }
.vg-empty > svg { color: var(--vg-text-3); margin-bottom: .75rem; padding: 12px; width: 64px; height: 64px; border-radius: 18px; background: var(--vg-surface-2); border: 1px solid var(--vg-border); }
.vg-empty h2, .vg-empty h3 { color: var(--vg-text); font-size: 1.1rem; }
.vg-empty p { max-width: 460px; margin-left: auto; margin-right: auto; }

.vg-spinner {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: vg-spin .7s linear infinite; display: inline-block; flex-shrink: 0;
}
@keyframes vg-spin { to { transform: rotate(360deg); } }
.vg-loading { display: flex; align-items: center; gap: .6rem; color: var(--vg-text-3); padding: 3rem; justify-content: center; }
.vg-skeleton { background: linear-gradient(90deg, var(--vg-surface-2), var(--vg-surface-3), var(--vg-surface-2)); background-size: 200% 100%; animation: vg-shimmer 1.2s infinite; border-radius: 8px; }
@keyframes vg-shimmer { to { background-position: -200% 0; } }

.vg-modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(8, 9, 13, .55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 1rem; animation: vg-fade .15s ease-out; }
/*
   The title and the buttons stay put; only what is between them scrolls, so Save is always in reach and the
   scrollbar runs between the two rather than over the rounded corners.
*/
.vg-modal {
    width: min(620px, 100%); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg); box-shadow: var(--vg-shadow-lg); animation: vg-pop .18s ease-out;
}
.vg-modal:focus { outline: none; }
.vg-modal--wide { width: min(940px, 100%); }
.vg-modal__header { display: flex; align-items: center; gap: .75rem; padding: 1.2rem 1.4rem .4rem; flex-shrink: 0; }
.vg-modal__header h2 { margin: 0; font-size: 1.15rem; }
.vg-modal__body { padding: .75rem 1.4rem 1.1rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.vg-modal__footer { flex-shrink: 0; padding: .9rem 1.4rem 1.1rem; display: flex; gap: .5rem; justify-content: flex-end; border-top: 1px solid var(--vg-border); background: var(--vg-surface-2); border-radius: 0 0 var(--vg-radius-lg) var(--vg-radius-lg); }
@keyframes vg-fade { from { opacity: 0; } }
@keyframes vg-pop { from { opacity: 0; transform: translateY(6px) scale(.985); } }

/*
    Bottom right, just above Ask: the top of a page holds its actions and the ride stepper, and this sits higher
    than the editors' save bars. On a phone, beside Ask above the tab bar. Only the toasts themselves catch clicks.
*/
.vg-toasts {
    position: fixed; z-index: 120; right: 1.25rem; bottom: 4.75rem;
    display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; pointer-events: none;
}
.vg-toasts > * { pointer-events: auto; }
@media (max-width: 900px) {
    .vg-toasts { left: .9rem; right: calc(.9rem + 3.25rem); bottom: calc(5.1rem + env(safe-area-inset-bottom)); align-items: stretch; }
}
.vg-toast {
    background: var(--vg-ink); color: #fff; padding: .7rem .9rem; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--vg-shadow-lg); font-size: .86rem; display: flex; gap: .6rem; align-items: center; max-width: 440px;
    animation: vg-pop .2s ease-out;
}
.vg-toast > svg { color: #4ade80; }
.vg-toast--error > svg { color: #fb7185; }

/* ---------- Markdown and AI ---------- */

.vg-markdown { line-height: 1.65; }
.vg-markdown h1, .vg-markdown h2 { font-size: 1rem; margin-top: 1.2rem; }
.vg-markdown h3 { font-size: .95rem; margin-top: 1rem; }
.vg-markdown > :first-child { margin-top: 0; }
.vg-markdown ul, .vg-markdown ol { padding-left: 1.2rem; margin: 0 0 .75rem; }
.vg-markdown li { margin-bottom: .3rem; }
.vg-markdown table { border-collapse: collapse; margin-bottom: .75rem; font-size: .86rem; }
.vg-markdown th, .vg-markdown td { border: 1px solid var(--vg-border); padding: .35rem .55rem; }

.vg-ai-block {
    position: relative;
    border: 1px solid var(--vg-border);
    background:
        radial-gradient(600px 160px at 0% 0%, color-mix(in srgb, var(--vg-ai) 9%, transparent), transparent 70%),
        var(--vg-surface);
    border-radius: var(--vg-radius);
    padding: 1.05rem 1.25rem 1.15rem;
}
.vg-ai-block::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, color-mix(in srgb, var(--vg-ai) 55%, transparent), transparent 45%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.vg-ai-block__label { display: flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 700; color: var(--vg-ai); text-transform: uppercase; letter-spacing: .07em; margin-bottom: .7rem; }

/* Rides from Strava, said plainly and calmly (StravaNotice): info styling, like any other platform's terms. */
.vg-strava-notice p { margin: 0 0 .5rem; }
.vg-strava-notice__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: .65rem; }
.vg-strava-notice__home { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .6rem 1rem; }
.vg-strava-notice__home > div { flex: 1 1 22rem; min-width: 0; }
.vg-strava-notice__hide { margin: -.3rem -.55rem -.3rem -.35rem; color: var(--vg-text-3); }
.vg-strava-notice__hide:hover { color: var(--vg-text); }
.vg-strava-note {
    display: flex; gap: .45rem; align-items: flex-start; text-align: left;
    margin: .8rem 0 0; padding: .55rem .7rem; border-radius: var(--vg-radius-sm);
    background: var(--vg-surface-2); color: var(--vg-text-2); font-size: .8rem; line-height: 1.45;
}
.vg-strava-note > svg { flex-shrink: 0; margin-top: .12rem; color: var(--vg-text-3); }
.vg-strava-note b { color: var(--vg-text); }

/* Strava's "Powered by Strava" logo (PoweredByStrava), Strava's files as they come: the orange one on light pages and
   the white one on dark pages, never recoloured. Clear space on every side keeps it apart from Velograph's own name. */
.vg-strava-logo { display: inline-flex; flex: none; padding: 4px; line-height: 0; }
.vg-strava-logo img { display: block; width: auto; height: 16px; }
.vg-strava-logo__dark { display: none !important; }
[data-theme="dark"] .vg-strava-logo__light { display: none !important; }
[data-theme="dark"] .vg-strava-logo__dark { display: block !important; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .vg-strava-logo__light { display: none !important; }
    :root:not([data-theme="light"]) .vg-strava-logo__dark { display: block !important; }
}

/* ---------- Form state, zones ---------- */

.vg-form--fresh { --vg-form-color: var(--vg-info); }
.vg-form--ready { --vg-form-color: var(--vg-good); }
.vg-form--neutral { --vg-form-color: var(--vg-text-2); }
.vg-form--productive { --vg-form-color: var(--vg-warn); }
.vg-form--overreaching { --vg-form-color: var(--vg-bad); }

.vg-zonebar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--vg-surface-3); gap: 2px; }
.vg-zonebar span { display: block; height: 100%; }
.vg-zones { display: flex; flex-direction: column; gap: .55rem; }
.vg-zone-row { display: grid; grid-template-columns: 120px 1fr 78px; gap: .75rem; align-items: center; font-size: .83rem; }
.vg-zone-row__bar { height: 10px; border-radius: 999px; background: var(--vg-surface-3); overflow: hidden; }
.vg-zone-row__bar span { display: block; height: 100%; border-radius: 999px; }
.vg-zone-row__time { text-align: right; font-family: var(--vg-font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.vg-zone-row__range { font-size: .72rem; color: var(--vg-text-3); }

/* ---------- Charts ---------- */

.vg-chart { position: relative; width: 100%; user-select: none; touch-action: pan-y; }
.vg-chart__plot { position: absolute; }
.vg-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vg-chart .grid line { stroke: var(--vg-border); stroke-width: 1; stroke-dasharray: 2 4; }
.vg-chart__labels { position: absolute; inset: 0; pointer-events: none; }
.vg-chart__ylabel, .vg-chart__xlabel { position: absolute; font-size: 10.5px; color: var(--vg-text-3); line-height: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 500; }
.vg-chart__ylabel { text-align: right; }
.vg-chart__ylabel--right { text-align: left; }
.vg-chart__xlabel { transform: translateX(-50%); }
.vg-chart__xlabel.is-start { transform: none; }
.vg-chart__xlabel.is-end { transform: translateX(-100%); }
.vg-chart__mark { position: absolute; font-size: 10px; font-weight: 600; line-height: 13px; white-space: nowrap; opacity: .9; }
.vg-chart .dots { fill: none; stroke-width: 5.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vg-chart .guide { stroke-width: 1.2; opacity: .8; }
.vg-chart.is-link .vg-chart__plot { cursor: pointer; }
.vg-chart__dots { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.vg-chart__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid var(--vg-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.vg-chart .series { fill: none; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vg-chart .area { opacity: 1; }
.vg-chart .cursor { stroke: var(--vg-text-2); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .75; }
/* The stretch an effort or a block covers, while it is pointed at in a list, a chart or on the map. */
.vg-chart .band { fill: var(--vg-signal); opacity: .13; }
/* A ride's chart measures what is dragged across it: the stretch stays picked out, edges drawn, until it is let go. */
.vg-chart[data-vg-select] .vg-chart__plot { cursor: col-resize; }
.vg-chart .marks .sel { fill: var(--vg-signal); opacity: .16; }
.vg-chart .marks .sel-edge { stroke: var(--vg-signal); stroke-width: 1.5; opacity: .9; }
/* Intervals marked by hand, faint behind the lines, each named along the top of the first chart. */
.vg-chart .marks .span { fill: var(--vg-text); opacity: .055; }
.vg-chart__span {
    position: absolute; height: 1.15rem; padding: 0 .3rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    border-top: 2px solid var(--vg-text-2); font-size: .66rem; font-weight: 600; line-height: 1.05rem; color: var(--vg-text-2);
}
.vg-chart-tooltip__block { color: #fff; font-weight: 600; margin-bottom: .2rem; }
.vg-chart-tooltip__hint { color: #b9b4ff; font-size: .72rem; font-weight: 600; margin-top: .25rem; }
.vg-chart-tooltip {
    position: absolute; pointer-events: none; z-index: 5;
    background: var(--vg-ink); color: #fff; border-radius: 10px; padding: .5rem .65rem;
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: .76rem; line-height: 1.5; white-space: nowrap; box-shadow: var(--vg-shadow-lg);
}
.vg-chart-tooltip > div:first-child { color: #9aa1b2; font-size: .72rem; margin-bottom: .1rem; }
.vg-chart-tooltip b { font-family: var(--vg-font-display); font-size: .92rem; }
.vg-chart-tooltip .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: .4rem; }
.vg-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .76rem; color: var(--vg-text-2); margin-top: .5rem; font-weight: 500; }
.vg-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.vg-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.vg-legend button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.vg-legend .vg-legend__gap { margin-left: .6rem; color: var(--vg-text-3); }
.vg-chart-caption { font-size: .74rem; font-weight: 600; color: var(--vg-text-2); margin: .1rem 0 -.2rem; }
.vg-legend button.is-off { opacity: .4; }
/* A unit over its axis: "W" above the watts, "bpm" above heart rate. */
.vg-chart__unit { position: absolute; top: 0; font-size: 9.5px; line-height: 12px; font-weight: 600; color: var(--vg-text-3); white-space: nowrap; letter-spacing: .02em; }

/* The read-out of any mark carrying data-vg-tip (velograph.js): the line charts' read-out, beside the pointer. */
.vg-tip { position: fixed; left: 0; top: 0; z-index: 1300; }
.vg-tip.is-inside { position: absolute; }
.vg-tip .vg-tip__one { color: #fff; font-size: .78rem; margin: 0; white-space: normal; max-width: 280px; }
.vg-tip__note { color: #c9cdd8; font-size: .72rem; margin-top: .15rem; white-space: normal; max-width: 260px; }
[data-vg-tip]:focus-visible { outline: 2px solid var(--vg-signal); outline-offset: 1px; }

/* The button that opens a chart full screen: in its card's header, or in the chart's corner while it is pointed at. */
.vg-chart, .ic, [data-vg-chart], [data-vg-theatre]:not([data-vg-theatre="off"]) { position: relative; }
.vg-expand {
    position: absolute; top: 2px; right: 2px; z-index: 6; width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
    border: 1px solid var(--vg-border); border-radius: 8px; background: color-mix(in srgb, var(--vg-surface) 92%, transparent);
    color: var(--vg-text-2); cursor: pointer; opacity: 0; transition: opacity .15s, background .15s, color .15s;
}
:is(.vg-chart, .ic, [data-vg-chart], [data-vg-theatre]):hover > .vg-expand, .vg-expand:focus-visible { opacity: 1; }
.vg-expand:hover { color: var(--vg-text); background: var(--vg-surface-2); }
.vg-expand:focus-visible { outline: none; box-shadow: var(--vg-focus); }
.vg-expand svg { width: 14px; height: 14px; }
.vg-expand--head { position: static; flex: none; opacity: 1; width: 30px; height: 30px; border-color: transparent; background: transparent; color: var(--vg-text-3); }
.vg-card__header > .vg-expand--head { margin-left: auto; }
.vg-card__header > .vg-card__actions ~ .vg-expand--head { margin-left: 0; }
@media (hover: none) { .vg-expand { opacity: .8; width: 26px; height: 26px; } .vg-expand--head { opacity: 1; width: 32px; height: 32px; } }

/* ---------- Theatre: one chart full screen ---------- */

/* Tells velograph.js the theatre's styles have arrived, so its buttons never show unstyled on a public page. */
:root { --vg-theatre-styles: 1; }
html.vg-theatre-open, html.vg-theatre-open body { overflow: hidden; }
.vg-theatre {
    position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: center; padding: clamp(10px, 3vw, 36px);
    background: rgba(8, 9, 13, .6); backdrop-filter: blur(3px); animation: vg-fade .15s ease-out;
}
.vg-theatre__panel {
    flex: 1; min-width: 0; max-width: 1680px; display: flex; flex-direction: column; overflow: hidden;
    background: var(--vg-surface); color: var(--vg-text); border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg);
    box-shadow: var(--vg-shadow-lg); animation: vg-pop .18s ease-out;
}
.vg-theatre__head { flex: none; display: flex; align-items: flex-start; gap: .5rem; padding: 1rem 1rem .25rem 1.4rem; }
.vg-theatre__titles { flex: 1; min-width: 0; }
.vg-theatre__title { margin: 0; font-family: var(--vg-font-display); font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.vg-theatre__sub { margin: .15rem 0 0; font-size: .84rem; color: var(--vg-text-3); }
.vg-theatre__btn {
    flex: none; height: 36px; min-width: 36px; padding: 0 .55rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border: 1px solid var(--vg-border); border-radius: 10px; background: var(--vg-surface); color: var(--vg-text-2);
    font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.vg-theatre__btn:hover { background: var(--vg-surface-2); color: var(--vg-text); }
.vg-theatre__btn:focus-visible { outline: none; box-shadow: var(--vg-focus); }
.vg-theatre__turn { display: none; }
.vg-theatre__body {
    flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .6rem; overflow: auto;
    padding: .75rem 1.4rem 1.4rem; --vg-theatre: 1;
}
.vg-theatre__body > * { flex: none; }
/*
  The charts share the height in the proportions they had on the page, and never get smaller than they were there: a
  short window scrolls instead. Keys and notes keep their height. Each line chart is a size container, so it shows the
  denser full-screen value lines and dates only when it really has the room for them.
*/
.vg-theatre__body .vg-chart {
    height: auto !important; flex: var(--vg-h, 200) 1 0px; min-height: calc(var(--vg-h, 200) * 1px);
    container: vg-theatre-chart / size;
}
.vg-theatre__body > :is(.ic, [data-vg-chart], [data-vg-theatre]) { flex: 1 1 0px; min-height: 0; display: flex; flex-direction: column; }
.vg-theatre__body > [data-vg-theatre]:has(.vg-chart) { min-height: auto; }
.vg-theatre__body .vg-chart__ylabel, .vg-theatre__body .vg-chart__xlabel { font-size: 12px; }
/*
  A line chart draws the value lines and dates for the card and for full screen. Full screen shows the denser set once
  the chart is tall enough for the values (about 300 px) or wide enough for the dates (about 720 px), so a phone held
  upright keeps the card's dates until it is turned.
*/
.vg-chart .only-full { visibility: hidden; }
@container vg-theatre-chart (min-height: 300px) {
    .vg-chart__ylabel.only-full, .grid .only-full { visibility: visible; }
    .vg-chart__ylabel.only-card, .grid .only-card { visibility: hidden; }
}
@container vg-theatre-chart (min-width: 720px) {
    .vg-chart__xlabel.only-full { visibility: visible; }
    .vg-chart__xlabel.only-card { visibility: hidden; }
}
.vg-theatre__body .vg-chart__unit { font-size: 11px; }
.vg-theatre__body .vg-legend { font-size: .85rem; margin-top: 0; }

/* A phone: the whole screen, clear of the notch and the home bar; held upright it can turn the chart on its side. */
@media (max-width: 640px), (max-height: 520px) {
    .vg-theatre { padding: 0; }
    .vg-theatre__panel { border: 0; border-radius: 0; animation: none; }
    .vg-theatre__head { padding: calc(.55rem + env(safe-area-inset-top)) calc(.6rem + env(safe-area-inset-right)) .1rem calc(1rem + env(safe-area-inset-left)); }
    .vg-theatre__title { font-size: 1rem; }
    .vg-theatre__sub { font-size: .78rem; }
    .vg-theatre__body { padding: .5rem calc(.75rem + env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) calc(.75rem + env(safe-area-inset-left)); }
}
@media (pointer: coarse) and (orientation: portrait) { .vg-theatre__turn { display: inline-flex; } }

/* Turned: the panel a quarter turn clockwise, as wide as the phone is tall. The notch is then on its left. */
.vg-theatre.is-turned { padding: 0; }
.vg-theatre.is-turned .vg-theatre__panel {
    position: fixed; top: 0; left: 100vw; width: 100vh; height: 100vw; max-width: none;
    left: 100dvw; width: 100dvh; height: 100dvw;
    transform-origin: top left; transform: rotate(90deg); border: 0; border-radius: 0; animation: none;
    padding-left: env(safe-area-inset-top); padding-right: env(safe-area-inset-bottom);
}
.vg-theatre.is-turned .vg-theatre__head { padding-top: .45rem; }
.vg-theatre.is-turned .vg-theatre__body { padding-bottom: calc(.6rem + env(safe-area-inset-left)); }

.vg-spark { display: block; width: 100%; height: 100%; overflow: visible; }

/* Leaflet stacks its panes up to z-index 1000; isolate them so dialogs and sticky bars stay on top. */
.vg-map { position: relative; z-index: 0; isolation: isolate; width: 100%; height: 360px; border-radius: var(--vg-radius); overflow: hidden; background: var(--vg-surface-2); border: 1px solid var(--vg-border); }
.vg-map-canvas { height: 100%; }
.vg-map--hero { height: 100%; min-height: 240px; border: 0; border-radius: 12px; }
.vg-map-size {
    width: 34px; height: 34px; display: grid; place-items: center; padding: 0; cursor: pointer;
    border: 0; border-radius: 8px; background: #fff; color: #0b0d12; box-shadow: 0 1px 5px rgba(0, 0, 0, .28);
}
.vg-map-size:hover { background: #f1f2f5; }
.vg-map-size:focus-visible { outline: none; box-shadow: var(--vg-focus); }

/* A map made big fills the window over a dimmed page; on a ride, the effort strip docks under it. */
.vg-map-dock { display: none; }
.vg-map.is-big {
    position: fixed; inset: clamp(10px, 3vw, 36px); z-index: 90; width: auto; height: auto; min-height: 0;
    display: flex; flex-direction: column;
    border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg); box-shadow: var(--vg-shadow-lg);
    background: var(--vg-surface); animation: vg-pop .18s ease-out;
}
.vg-map.is-big .vg-map-canvas { flex: 1; min-height: 0; height: auto; }
.vg-map.is-big .vg-map-dock { display: block; flex: none; padding: .45rem .9rem 0; background: var(--vg-surface); border-top: 1px solid var(--vg-border); color: var(--vg-text); }
.vg-map-backdrop { position: fixed; inset: 0; z-index: 89; background: rgba(8, 9, 13, .55); backdrop-filter: blur(3px); animation: vg-fade .15s ease-out; }
html.vg-map-open, html.vg-map-open body { overflow: hidden; }

/* ---------- Calendar ---------- */

.vg-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--vg-border); border: 1px solid var(--vg-border); border-radius: var(--vg-radius); overflow: hidden; }
.vg-cal__head { background: var(--vg-surface-2); padding: .5rem .6rem; font-size: .72rem; font-weight: 600; color: var(--vg-text-3); }
.vg-cal__day { background: var(--vg-surface); min-height: 124px; padding: .4rem; display: flex; flex-direction: column; gap: .3rem; }
.vg-cal__day.is-today { box-shadow: inset 0 0 0 2px var(--vg-signal); }
.vg-cal__day.is-other { background: var(--vg-surface-2); }
.vg-cal__date { font-size: .76rem; font-weight: 600; color: var(--vg-text-3); display: flex; justify-content: space-between; font-family: var(--vg-font-display); }
.vg-cal-item {
    font-size: .74rem; line-height: 1.35; border-radius: 7px; padding: .32rem .45rem;
    border-left: 3px solid var(--vg-border-strong); background: var(--vg-surface-2); cursor: pointer;
    overflow: hidden; text-overflow: ellipsis; transition: filter .1s;
}
.vg-cal-item:hover { filter: brightness(.97); }
.vg-cal-item--planned { border-left-color: var(--vg-signal); background: var(--vg-signal-soft); }
.vg-cal-item--draft { border-left-color: var(--vg-ai); background: var(--vg-ai-soft); border-left-style: dashed; }
.vg-cal-item--done { border-left-color: var(--vg-good); background: var(--vg-good-soft); }
.vg-cal-item--missed { border-left-color: var(--vg-bad); background: var(--vg-bad-soft); }
/* Ridden more than 20% under or over the plan: amber, as on the squad board. */
.vg-cal-item--short, .vg-cal-item--long { border-left-color: var(--vg-star); background: color-mix(in srgb, var(--vg-star) 13%, var(--vg-surface)); }
.vg-cal-item--activity { border-left-color: var(--vg-text-3); }
.vg-cal-item--race { border-left-color: var(--vg-warn); background: var(--vg-warn-soft); font-weight: 700; }
@media (max-width: 760px) {
    .vg-cal { grid-template-columns: 1fr; }
    .vg-cal__head { display: none; }
    .vg-cal__day { min-height: 0; }
}

/* A planned session being dragged to another day (calendar.js): a copy of it under the pointer, saying where it will go. */
.vg-cal-ghost {
    position: fixed; left: 0; top: 0; z-index: 1000; margin: 0; pointer-events: none; will-change: transform;
    box-shadow: var(--vg-shadow-lg), 0 0 0 1px color-mix(in srgb, var(--vg-signal) 30%, transparent);
    transition: opacity .12s, box-shadow .12s;
}
.vg-cal-ghost.is-nowhere { opacity: .72; }

/* Scrubbing the season strip: the month under the finger, beside it (calendar.js). */
.vg-cal-scrub {
    position: fixed; z-index: 95; pointer-events: none; transform: translateY(-50%);
    padding: .45rem .75rem; border-radius: 12px; background: var(--vg-ink); color: #fff; box-shadow: var(--vg-shadow-lg);
    font: 700 .95rem/1.15 var(--vg-font-display); white-space: nowrap;
}
.vg-cal-scrub small { display: block; margin-top: .15rem; font: 500 .72rem/1.2 var(--vg-font); color: var(--vg-ink-muted); }
.vg-cal-ghost.is-dropped { box-shadow: var(--vg-shadow-md); }
.vg-cal-ghost__to { display: block; margin-top: .3rem; font: 700 .68rem/1.2 var(--vg-font-display); color: var(--vg-signal); }
.vg-cal-ghost__to:empty { display: none; }
.vg-cal-ghost.is-nowhere .vg-cal-ghost__to { color: var(--vg-text-3); }
/* Several picked sessions moving together: how many, on the corner of the one under the pointer. */
.vg-cal-ghost[data-count]::before {
    content: attr(data-count); position: absolute; top: -.55rem; left: -.55rem; z-index: 1;
    min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; border-radius: 999px; box-sizing: border-box;
    display: grid; place-items: center; background: var(--vg-signal); color: #fff;
    font: 700 .7rem/1 var(--vg-font-display); box-shadow: 0 0 0 2px var(--vg-surface);
}
.vg-cal-ghost[data-count] { overflow: visible; }
html.vg-cal-dragging, html.vg-cal-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }

/* ---------- Auth ---------- */

.vg-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--vg-surface); }
/* The brand side keeps to the window while a long form beside it scrolls, so its headline never drops below the fold. */
.vg-auth__brand {
    position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh;
    overflow: hidden; container: auth-brand / inline-size;
    background: var(--vg-ink); color: var(--vg-ink-text);
    padding: 2.5rem 3rem; display: flex; flex-direction: column; gap: 2rem;
}
.vg-auth__brand::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 420px at 15% 110%, rgba(91, 92, 255, .35), transparent 60%), radial-gradient(500px 320px at 100% 0%, rgba(34, 211, 238, .18), transparent 60%); }
.vg-auth__brand > * { position: relative; }
.vg-auth__brand > .ash { margin: auto 0; }
.vg-auth__quote { max-width: 520px; }
.vg-auth__quote h2 { font-size: 2rem; line-height: 1.12; letter-spacing: -.03em; color: #fff; margin-bottom: .6rem; }
.vg-auth__quote p { color: var(--vg-ink-muted); font-size: .95rem; margin: 0; }
.vg-auth__panel { display: grid; place-items: center; padding: 2.5rem 1.5rem; }
.vg-auth__form { width: min(380px, 100%); }
.vg-auth__form h1 { font-size: 1.6rem; margin-bottom: .3rem; }
.vg-auth .vg-card { width: min(420px, 100%); }
@media (max-width: 900px) {
    .vg-auth { grid-template-columns: 1fr; }
    .vg-auth__brand { position: relative; height: auto; padding: 1.25rem 1.25rem; }
    .vg-auth__quote { display: none; }
}

/* ---------- Landing ---------- */

.vg-landing { background: var(--vg-ink); color: var(--vg-ink-text); min-height: 100vh; overflow: hidden; }
.vg-landing a:not(.vg-btn) { color: var(--vg-ink-text); }
.vg-landing-nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 2rem; max-width: 1240px; margin: 0 auto; padding: 1.25rem 1.5rem; }
.vg-landing-nav__links { display: flex; gap: 1.6rem; font-size: .88rem; font-weight: 500; white-space: nowrap; }
.vg-landing-nav__links a { color: var(--vg-ink-muted) !important; }
.vg-landing-nav__links a:hover { color: #fff !important; text-decoration: none; }
@media (max-width: 1000px) { .vg-landing-nav__links { display: none; } }
/* On a phone the brand and the two buttons share one line: tighter gaps and buttons, and on the narrowest the
   page's own "Sign in" (in the hero, or none needed) stands in for the nav's, so "Get started" never runs off. */
@media (max-width: 560px) {
    .vg-landing-nav { gap: .5rem; padding: 1rem .75rem; }
    .vg-landing-nav .vg-btn { padding-left: .8rem; padding-right: .8rem; }
}
@media (max-width: 380px) { .vg-landing-nav__signin { display: none !important; } }

.vg-hero2 { position: relative; text-align: center; padding: 4.5rem 1.5rem 0; }
.vg-hero2::before {
    content: ""; position: absolute; inset: -20% -10% 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(800px 420px at 50% 0%, rgba(91, 92, 255, .32), transparent 65%),
        radial-gradient(600px 300px at 80% 30%, rgba(34, 211, 238, .14), transparent 60%);
}
.vg-hero2::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 30%, transparent 75%);
}
.vg-hero2 > * { position: relative; z-index: 1; }
.vg-hero2__pill { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .35rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); font-size: .8rem; color: var(--vg-ink-muted); margin-bottom: 1.6rem; }
.vg-hero2__pill b { background: var(--vg-signal-grad); color: #fff; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; }
.vg-hero2 h1 { font-size: clamp(2.6rem, 6.4vw, 4.9rem); line-height: 1.04; letter-spacing: -.035em; color: #fff; max-width: 980px; margin: 0 auto 1.3rem; font-weight: 800; }
.vg-hero2 p.lead { font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--vg-ink-muted); max-width: 640px; margin: 0 auto 2.2rem; line-height: 1.6; }
.vg-hero2__ctas { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.vg-btn--light { background: #fff; color: #0b0d12; border-color: #fff; }
.vg-btn--light:hover { background: #e9ebf1; border-color: #e9ebf1; }
.vg-btn--outline-dark { background: rgba(255, 255, 255, .04); color: #fff; border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.vg-btn--outline-dark:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); }

.vg-preview { position: relative; max-width: 1180px; margin: 4rem auto 0; padding: 0 1.5rem; }
.vg-preview__window {
    border-radius: 16px 16px 0 0; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1); border-bottom: 0;
    background: var(--vg-bg);
    box-shadow: 0 -20px 120px -20px rgba(91, 92, 255, .45), 0 0 0 1px rgba(0, 0, 0, .4);
    text-align: left; color: var(--vg-text);
}
.vg-preview__chrome { display: flex; align-items: center; gap: .4rem; padding: .65rem .9rem; background: #12141b; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.vg-preview__chrome i { width: 10px; height: 10px; border-radius: 50%; background: #2a2e3a; }
.vg-preview__chrome span { margin-left: 1rem; font-size: .72rem; color: #6b7182; background: #0a0b10; padding: .2rem .8rem; border-radius: 6px; }
.vg-preview__body { display: grid; grid-template-columns: 200px 1fr; min-height: 520px; }
.vg-preview__nav { background: var(--vg-ink); padding: 1rem .7rem; display: flex; flex-direction: column; gap: 3px; }
.vg-preview__nav div { padding: .45rem .6rem; border-radius: 8px; font-size: .78rem; color: #8b91a1; display: flex; gap: .55rem; align-items: center; }
.vg-preview__nav div.on { background: rgba(255, 255, 255, .07); color: #fff; }
.vg-preview__main { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; }
.vg-preview__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(transparent, var(--vg-ink)); pointer-events: none; }
@media (max-width: 760px) { .vg-preview__body { grid-template-columns: 1fr; } .vg-preview__nav { display: none; } }

.vg-logos { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem 1rem; text-align: center; }
/* #868c9c on the ink background is 5.9:1, above the 4.5:1 small text needs (it was #5d6372, 3.3:1). */
.vg-logos p { color: #868c9c; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.vg-logos__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; margin-top: 1rem; color: #8b91a1; font-family: var(--vg-font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; }

.vg-section { max-width: 1180px; margin: 0 auto; padding: 6rem 1.5rem 0; }
.vg-section__head { max-width: 680px; margin-bottom: 3rem; }
.vg-section__head h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.08; letter-spacing: -.035em; color: #fff; font-weight: 800; margin-bottom: 1rem; }
.vg-section__head p { color: var(--vg-ink-muted); font-size: 1.05rem; }
.vg-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.vg-bento__cell { grid-column: span 2; background: var(--vg-ink-2); border: 1px solid var(--vg-ink-line); border-radius: 18px; padding: 1.6rem; overflow: hidden; position: relative; min-height: 220px; }
.vg-bento__cell--wide { grid-column: span 4; }
.vg-bento__cell--half { grid-column: span 3; }
.vg-bento__cell h3 { color: #fff; font-size: 1.1rem; margin: .9rem 0 .4rem; }
.vg-bento__cell p { color: var(--vg-ink-muted); font-size: .9rem; margin: 0; max-width: 420px; }
.vg-bento__icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(91, 92, 255, .14); color: #a5a6ff; border: 1px solid rgba(91, 92, 255, .25); }
.vg-bento__visual { margin-top: 1.4rem; }
/*
   The cells are dark in either theme, so the charts and badges in them take colours made for the cell (#12141b)
   rather than the visitor's theme, which gave light-theme badges and grey legends on dark. Each text is at least
   4.5:1 on the cell: axis labels 4.9:1, legends 5.8:1, badges 6.3:1 or more.
*/
.vg-bento .vg-chart__ylabel, .vg-bento .vg-chart__xlabel { color: #7d8494; }
.vg-bento .vg-chart .grid line { stroke: rgba(255, 255, 255, .06); }
.vg-bento .vg-legend { color: var(--vg-ink-muted); }
.vg-bento .vg-badge--good { background: #0c2a20; color: #34d399; }
.vg-bento .vg-badge--warn { background: #2e2009; color: #fbbf24; }
.vg-bento .vg-badge--bad { background: #33111a; color: #fb7185; }
.vg-bento .vg-badge--info { background: #0f1e3b; color: #60a5fa; }
@media (max-width: 900px) { .vg-bento { grid-template-columns: 1fr; } .vg-bento__cell, .vg-bento__cell--wide, .vg-bento__cell--half { grid-column: auto; } }

.vg-cta { max-width: 1180px; margin: 6rem auto 0; padding: 0 1.5rem; }
.vg-cta__box { position: relative; overflow: hidden; border-radius: 24px; padding: 4rem 2rem; text-align: center; background: var(--vg-ink-2); border: 1px solid var(--vg-ink-line); }
.vg-cta__box::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 300px at 50% 120%, rgba(91, 92, 255, .4), transparent 70%); }
.vg-cta__box > * { position: relative; }
.vg-cta__box h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: #fff; letter-spacing: -.035em; font-weight: 800; }
.vg-cta__box p { color: var(--vg-ink-muted); margin-bottom: 2rem; }
.vg-footer { max-width: 1180px; margin: 0 auto; padding: 3rem 1.5rem; display: flex; gap: 1rem; align-items: center; color: #868c9c; font-size: .82rem; flex-wrap: wrap; }
.vg-footer--legal { flex-direction: column; align-items: flex-start; gap: .85rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.vg-footer__brand { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; color: #8d93a3; }
.vg-footer__links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.vg-footer__links a { color: #aab0bf; text-decoration: none; }
.vg-footer__links a:hover { color: #fff; }
/* #868c9c on the ink background is 5.6:1, above the 4.5:1 small text needs (it was #5d6372, 3.3:1). */
.vg-footer__copy { font-size: .76rem; }

/* Kept for pages that still use the original hero classes. */
.vg-hero { background: var(--vg-ink); color: #fff; padding: 4rem 1.5rem; text-align: center; }
.vg-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.vg-feature { padding: 1.25rem; }
.vg-feature__icon { width: 38px; height: 38px; border-radius: 11px; background: var(--vg-signal-soft); color: var(--vg-signal); display: grid; place-items: center; }

/* ---------- Dashboard pieces ---------- */

.vg-greeting { font-size: 2.1rem; letter-spacing: -.035em; }
.vg-hero-card {
    position: relative; overflow: hidden;
    background: var(--vg-ink); color: var(--vg-ink-text); border-color: var(--vg-ink);
}
.vg-hero-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 300px at 100% 0%, rgba(91, 92, 255, .28), transparent 60%), radial-gradient(400px 220px at 0% 100%, rgba(34, 211, 238, .12), transparent 60%); pointer-events: none; }
.vg-hero-card > * { position: relative; }
.vg-hero-card h2, .vg-hero-card h3 { color: #fff; }

/*
   A panel on a dark card that holds parts drawn with the page's own colours, such as a session's outline:
   those colours dealt again for ink, so the parts look made for the dark card in either theme.
*/
.vg-ink-panel {
    --vg-surface: #14161d; --vg-surface-2: #1b1e27; --vg-surface-3: #252935;
    --vg-border: rgba(255, 255, 255, .09); --vg-border-strong: rgba(255, 255, 255, .17);
    --vg-text: #e9ebf1; --vg-text-2: #b4bacb; --vg-text-3: #7f8699;
    margin-top: 1.1rem; padding: .9rem 1rem .1rem; border-radius: 12px;
    background: var(--vg-surface); border: 1px solid var(--vg-border); color: var(--vg-text);
}
.vg-hero-card .vg-muted, .vg-hero-card .vg-stat__label, .vg-hero-card .vg-help { color: var(--vg-ink-muted); }
.vg-hero-card .vg-chart__ylabel, .vg-hero-card .vg-chart__xlabel { color: #6b7182; }
.vg-hero-card .vg-chart .grid line { stroke: rgba(255, 255, 255, .07); }
.vg-hero-card .vg-legend { color: var(--vg-ink-muted); }
.vg-hero-card .vg-segmented { background: rgba(255, 255, 255, .06); }
.vg-hero-card .vg-segmented button { color: var(--vg-ink-muted); }
.vg-hero-card .vg-segmented button.is-active { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; }

.vg-metric-strip { display: flex; gap: 2.2rem; flex-wrap: wrap; }
.vg-metric-strip > div { min-width: 90px; }
.vg-metric-strip dt { font-size: .76rem; color: var(--vg-ink-muted); display: flex; align-items: center; gap: .4rem; }
.vg-metric-strip dt i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.vg-metric-strip dd { margin: .15rem 0 0; font-family: var(--vg-font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums; }

.vg-formbar { position: relative; height: 6px; width: 90px; border-radius: 999px; background: var(--vg-surface-3); }
.vg-formbar::after { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--vg-border-strong); }
.vg-formbar span { position: absolute; top: 0; bottom: 0; border-radius: 999px; }

.vg-date-block { width: 46px; flex-shrink: 0; text-align: center; border-radius: 10px; border: 1px solid var(--vg-border); overflow: hidden; background: var(--vg-surface); }
.vg-date-block b { display: block; font-family: var(--vg-font-display); font-size: 1.15rem; line-height: 1.6; letter-spacing: -.02em; }
.vg-date-block small { display: block; background: var(--vg-text); color: var(--vg-surface); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .05rem 0; }

.vg-attention { display: flex; gap: .8rem; align-items: flex-start; padding: .85rem 0; border-bottom: 1px solid var(--vg-border); }
.vg-attention:last-child { border-bottom: 0; padding-bottom: 0; }
.vg-attention:first-child { padding-top: .2rem; }
.vg-attention__icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }

/* ---------- Utilities ---------- */

.vg-mt-0 { margin-top: 0 !important; }
.vg-mt { margin-top: 1rem; }
.vg-mb-0 { margin-bottom: 0 !important; }
.vg-mb { margin-bottom: 1rem; }
.vg-text-right { text-align: right; }
.vg-nowrap { white-space: nowrap; }
.vg-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-good { color: var(--vg-good); }
.vg-bad { color: var(--vg-bad); }
.vg-warn { color: var(--vg-warn); }
.vg-hide-sm { }
@media (max-width: 760px) { .vg-hide-sm { display: none !important; } }

.vg-preview__split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .vg-preview__split { grid-template-columns: 1fr; } }


/* ---------- Activity header ---------- */

.vg-act-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: 1.5rem; padding: 1.5rem; }
.vg-act-hero__stats { display: flex; flex-direction: column; justify-content: center; }
.vg-act-hero__map { min-height: 240px; border-radius: 12px; overflow: hidden; }
.vg-act-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 1.6rem; }
.vg-act-metrics dd small { font-family: var(--vg-font); font-size: .85rem; color: var(--vg-ink-muted); font-weight: 500; margin-left: .2rem; letter-spacing: 0; }
@media (max-width: 1000px) { .vg-act-hero { grid-template-columns: 1fr; } .vg-act-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.vg-metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.2rem 1.5rem; margin: 0; }
.vg-metric-grid dt { font-size: .76rem; color: var(--vg-text-3); font-weight: 500; display: flex; align-items: center; gap: .35rem; }
.vg-metric-grid dd { margin: .2rem 0 .15rem; font-family: var(--vg-font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.vg-metric-grid dd small { font-family: var(--vg-font); font-size: .78rem; color: var(--vg-text-3); font-weight: 500; margin-left: .15rem; letter-spacing: 0; }
.vg-metric-grid p { margin: 0; font-size: .75rem; color: var(--vg-text-3); line-height: 1.4; }

/* ---------- Role picker ---------- */

.vg-role-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .4rem; }
@media (max-width: 640px) { .vg-role-picker { grid-template-columns: 1fr; } }
.vg-role-option { display: flex; gap: .65rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--vg-border); border-radius: var(--vg-radius-sm); cursor: pointer; background: var(--vg-surface); transition: border-color .12s, background .12s; }
.vg-role-option:hover { border-color: var(--vg-border-strong); }
.vg-role-option.is-on { border-color: var(--vg-signal); background: var(--vg-signal-soft); }
.vg-role-option.is-disabled { opacity: .5; cursor: not-allowed; }
.vg-role-option input { margin-top: .2rem; accent-color: var(--vg-signal); width: 16px; height: 16px; }

/* Print: fit sheets and plans go to the workshop on paper */
@page { size: A4; margin: 12mm; }
@media print {
  .vg-sidebar, .vg-topbar, .vg-tabbar, .vg-toasts, .vg-no-print { display: none !important; }
  .vg-main { padding: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .vg-card { box-shadow: none !important; border-color: #ccc !important; break-inside: avoid; }
}

/* Velograph support looking into a workspace under the customer's grant. */
.vg-support-banner { display: flex; align-items: center; gap: .6rem; margin: -2rem -2.25rem 1.5rem; padding: .6rem 2.25rem; background: #fef3c7; color: #78350f; font-size: .86rem; border-bottom: 1px solid #fcd34d; }
@media (max-width: 900px) { .vg-support-banner { margin: -1.1rem -1rem 1rem; padding: .55rem 1rem; border-radius: 0; } .vg-mobilebar + .vg-support-banner { margin-top: -1.1rem; } }

/* ---------- Riding with the phone (Pages/Ride) ----------
   The sensors and the start on the app's own light or dark; the ride itself always dark, as a bike computer is,
   with the data colours a touch brighter to read on black at a glance. */

.ride-kind { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.ride-kind--trainer { background: linear-gradient(135deg, #6d5dfc, #3b82f6); }
.ride-kind--power { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.ride-kind--heart { background: linear-gradient(135deg, #f43f5e, #ef4466); }
.ride-kind--speed { background: linear-gradient(135deg, #0d9488, #14b8a6); }

.ride-home { max-width: 720px; padding-bottom: 4rem; }
.ride-home > .vg-alert { margin-bottom: 1rem; }
.ride-home .vg-alert p { margin: 0 0 .5rem; }
.ride-home .vg-alert p:last-child { margin-bottom: 0; }
.ride-sensors .vg-card__body, .ride-uploads .vg-card__body { padding-top: .5rem; }

.ride-sensors__empty { text-align: center; padding: 1rem .5rem 1.25rem; }
.ride-sensors__kinds { display: inline-flex; gap: .5rem; margin-bottom: .9rem; }
.ride-sensors__kinds .ride-kind:nth-child(2) { transform: translateY(-6px); }
.ride-sensors__empty p { color: var(--vg-text-2); max-width: 420px; margin: 0 auto 1rem; }

.ride-sensor-list { list-style: none; margin: 0; padding: 0; }
.ride-sensor { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--vg-border); }
.ride-sensor:last-child { border-bottom: 0; }
.ride-sensor:not(.is-connected) .ride-kind { filter: grayscale(1); opacity: .45; }
.ride-sensor__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ride-sensor__text b { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ride-sensor__text span { color: var(--vg-text-3); font-size: .8rem; }
.ride-sensor__value { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; color: var(--vg-text-3); font-size: .78rem; font-weight: 600; line-height: 1.15; }
.ride-sensor__value b { font-family: var(--vg-font-display); font-variant-numeric: tabular-nums; font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; color: var(--vg-text); }
.ride-sensor__value--heart b { color: var(--vg-hr); }
.ride-sensor__value--trainer b, .ride-sensor__value--power b { color: var(--vg-power); }
.ride-sensor__value small { font-size: .78rem; color: var(--vg-text-3); }
.ride-status.is-on .ride-status__dot { background: var(--vg-good); animation: none; }
.ride-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--vg-text-3); white-space: nowrap; }
.ride-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vg-warn); animation: ride-pulse 1.2s ease-in-out infinite; }
.ride-hint { color: var(--vg-text-3); font-size: .8rem; margin: .75rem 0 0; }
@keyframes ride-pulse { 50% { opacity: .25; } }

.ride-start { margin: 1.25rem 0; }
.ride-start__go { min-height: 58px; font-size: 1.05rem; border-radius: 16px; gap: .55rem; }
.ride-start__go:disabled { box-shadow: none; }
.ride-start__note { text-align: center; color: var(--vg-text-3); font-size: .82rem; margin: .6rem 0 1rem; }
.ride-setting { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; background: var(--vg-surface); border: 1px solid var(--vg-border); border-radius: var(--vg-radius); }
.ride-setting > span { display: flex; flex-direction: column; min-width: 0; }
.ride-setting > span > span { color: var(--vg-text-3); font-size: .8rem; }
.ride-setting + .ride-setting { margin-top: .5rem; }
.ride-setting__pick { width: auto; min-width: 8.5rem; flex-shrink: 0; }

/* On the trainer or outside: two big choices, the one chosen filled. */
.ride-where { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .25rem; margin-bottom: 1rem; border-radius: 14px; background: var(--vg-surface-2, rgba(127, 127, 127, .1)); border: 1px solid var(--vg-border); }
.ride-where button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; border: 0; border-radius: 11px; background: transparent; color: var(--vg-text-2); font: inherit; font-weight: 600; cursor: pointer; }
.ride-where button.is-on { background: var(--vg-surface); color: var(--vg-text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* Calibrating: a small action under the sensor's name, then a dialog that says what to do and what the sensor says. */
.ride-sensor__calibrate { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; padding: .2rem .55rem; border: 1px solid var(--vg-border); border-radius: 999px; background: var(--vg-surface); color: var(--vg-text-2); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; }
.ride-sensor__calibrate:hover { border-color: var(--vg-signal); color: var(--vg-text); }
.ride-calibrate p { margin: 0 0 .75rem; color: var(--vg-text-2); }
.ride-calibrate__how { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.ride-calibrate__stage { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.25rem .5rem; text-align: center; }
.ride-calibrate__say { color: var(--vg-text-3); font-weight: 600; }
.ride-calibrate__big { font-family: var(--vg-font-display); font-variant-numeric: tabular-nums; font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.ride-calibrate__big small { font-size: .95rem; font-weight: 600; margin-left: .3rem; color: var(--vg-text-3); letter-spacing: 0; }
.ride-calibrate__now { color: var(--vg-text-2); font-size: .9rem; }
.ride-calibrate__stage.is-go .ride-calibrate__big { color: var(--vg-signal); }
.ride-calibrate__stage.is-stop .ride-calibrate__big { color: var(--vg-warn); font-size: 2rem; }
.ride-calibrate__stage.is-done { color: var(--vg-good); }
.ride-calibrate__stage.is-done b { color: var(--vg-text); font-size: 1.1rem; }
.ride-calibrate__stage.is-done span { color: var(--vg-text-3); font-size: .85rem; }

.ride-upload-list { list-style: none; margin: 0; padding: 0; }
.ride-upload { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--vg-border); flex-wrap: wrap; }
.ride-upload:last-child { border-bottom: 0; }
.ride-upload__when { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ride-upload__when b { font-weight: 600; }
.ride-upload__when span { color: var(--vg-text-3); font-size: .8rem; }
.ride-upload__state { flex-basis: 100%; order: 3; font-size: .8rem; color: var(--vg-warn); }
.ride-upload.is-refused .ride-upload__state { color: var(--vg-bad); }
.ride-upload__actions { display: inline-flex; gap: .3rem; align-items: center; }
.ride-upload__link { display: flex; align-items: center; gap: .75rem; width: 100%; color: inherit; text-decoration: none !important; }
.ride-upload__link > svg { color: var(--vg-text-3); }

.finder-hint { display: flex; align-items: center; gap: .65rem; }
.finder-radar { width: 18px; height: 18px; border-radius: 50%; position: relative; flex-shrink: 0; background: color-mix(in srgb, var(--vg-signal) 22%, transparent); }
.finder-radar::after, .finder-radar span { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--vg-signal); animation: finder-ping 1.6s ease-out infinite; }
.finder-radar span { animation-delay: .8s; }
@keyframes finder-ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.finder-none { color: var(--vg-text-3); font-size: .85rem; padding: .75rem 0; margin: 0; }
.finder-list { list-style: none; margin: 0; padding: 0; }
.finder-item { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--vg-border); animation: vg-pop .2s ease-out; }
.finder-item:last-child { border-bottom: 0; }
.finder-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.finder-item__text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder-item__text span { color: var(--vg-text-3); font-size: .8rem; }
.finder-signal { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.finder-signal span { width: 3px; border-radius: 1px; background: var(--vg-border-strong); }
.finder-signal span.is-on { background: var(--vg-good); }

.ride {
    --vg-power: #8b8cff;
    --vg-hr: #ff5577;
    --ride-muted: #8b91a1;
    position: fixed; inset: 0; z-index: 95;
    display: flex; flex-direction: column;
    padding: calc(env(safe-area-inset-top) + .5rem) calc(env(safe-area-inset-right) + 1rem) calc(env(safe-area-inset-bottom) + .75rem) calc(env(safe-area-inset-left) + 1rem);
    /* The light sits behind the big number and fades to the ride's black before the edges, where the phone's own
       strips (status bar, home indicator) take the same black in the app. */
    background: radial-gradient(110% 55% at 50% 32%, #161a2c 0%, #0a0b10 68%), #0a0b10;
    color: #e9ebf1; color-scheme: dark;
    -webkit-user-select: none; user-select: none;
    animation: vg-fade .2s ease-out;
}
/* A reset that never outweighs the ride's own button styles below. */
:where(.ride) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:where(.ride) button:focus-visible { box-shadow: 0 0 0 2px rgba(139, 140, 255, .7); }
/* Both sides as wide as either needs, so the state stays centred and a third or fourth sensor stays on one line. */
.ride__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; min-height: 44px; }
.ride__hide { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--ride-muted) !important; }
.ride__state { justify-self: center; display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ride__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5577; box-shadow: 0 0 0 4px rgba(255, 85, 119, .18); animation: ride-pulse 1.4s ease-in-out infinite; }
.ride.is-paused .ride__dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .18); animation: none; }
.ride__elapsed { font-family: var(--vg-font-display); font-variant-numeric: tabular-nums; font-size: .9rem; letter-spacing: 0; text-transform: none; color: #fff; }
.ride__sensors { justify-self: end; display: inline-flex; justify-content: flex-end; gap: .25rem; }
.ride__sensor { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; color: #fff; }
.ride__sensor.is-off { filter: grayscale(1); opacity: .35; animation: ride-pulse 1.2s infinite; }

.ride__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .8rem; padding-top: .35rem; }
.ride__hero { --zone: var(--vg-power); position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: .15rem; transition: transform .1s; }
/* The zone's colour as a soft halo behind the number (a plain colour, blurred: phones' web views draw it alike). */
.ride__hero::before { content: ""; position: absolute; z-index: -1; left: 22%; right: 22%; top: 20%; height: 55%; border-radius: 50%; background: var(--zone); opacity: .32; filter: blur(34px); transition: background .6s; }
.ride__hero--heartrate { --zone: var(--vg-hr); }
.ride__label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ride-muted); }
/* As big as the phone's width allows, and smaller on a short phone, so the tiles under it are never squeezed. */
.ride__big { font-family: var(--vg-font-display); font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(4.5rem, min(31vw, 14.5vh), 10rem); line-height: .9; letter-spacing: -.045em; color: #fff; }
/* Nothing measures it yet: a quiet dash, not a white bar. */
.ride__big.is-empty, .ride__value.is-empty { color: rgba(255, 255, 255, .2); font-weight: 500; }
.ride__big.is-empty { transform: scale(.45); color: rgba(255, 255, 255, .16); }
.ride__unit { display: inline-flex; align-items: center; gap: .6rem; font-size: .95rem; font-weight: 600; color: var(--ride-muted); }
.ride__zone { padding: .15rem .6rem; border-radius: 999px; background: var(--zone); color: #0a0b10; font-size: .7rem; font-weight: 800; letter-spacing: .02em; }

/* The picture gives way first when room is short (a pause banner, a small phone); the tiles only after it. */
.ride-chart { position: relative; flex: 1 10 120px; min-height: 64px; max-height: 240px; margin-bottom: 1rem; color: var(--ride-muted); }
.ride-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ride-chart__empty { height: 100%; display: grid; place-items: center; color: #5d6373; font-size: .8rem; border: 1px dashed rgba(255, 255, 255, .1); border-radius: 14px; }
.ride-chart__ftp { position: absolute; left: 0; transform: translateY(-115%); font-size: .62rem; font-weight: 700; letter-spacing: .04em; }
.ride-chart__legend { position: absolute; left: 0; bottom: -1.05rem; font-size: .62rem; font-weight: 600; letter-spacing: .02em; }
.ride-chart__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 .3rem 0 .55rem; vertical-align: -1px; }
.ride-chart__legend i:first-child { margin-left: 0; }
.ride-chart__legend .is-power { background: var(--vg-power); }
.ride-chart__legend .is-heart { background: var(--vg-hr); }

/* Rows keep their height: on a phone too short for the rider's tiles they scroll rather than clip. */
.ride__grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: max-content; gap: .5rem; overflow-y: auto; min-height: 0; flex-shrink: .01; padding-bottom: .1rem; }
.ride__tile { --tile: var(--ride-muted); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: .7rem .9rem .75rem; border-radius: 16px; text-align: left; background: rgba(255, 255, 255, .045) !important; border: 1px solid rgba(255, 255, 255, .06) !important; transition: transform .1s, background .2s; }
.ride__tile::before { content: ""; position: absolute; left: 0; top: .75rem; bottom: .75rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--tile); }
.ride__tile--power { --tile: var(--vg-power); }
.ride__tile--heartrate { --tile: var(--vg-hr); }
.ride__tile--cadence { --tile: #c084fc; }
.ride__tile--speed, .ride__tile--distance { --tile: #2dd4bf; }
.ride__tile--time { --tile: #e9ebf1; }
.ride__tile--energy { --tile: #fbbf24; }
.ride__tile--climb { --tile: #fb923c; }
.ride__tile:last-child:nth-child(odd) { grid-column: span 2; }
.ride__tile:active, .ride__hero:active { transform: scale(.975); }
.ride__value { font-family: var(--vg-font-display); font-variant-numeric: tabular-nums; font-weight: 700; font-size: clamp(1.6rem, 7.5vw, 2.3rem); line-height: 1.1; letter-spacing: -.025em; color: #fff; white-space: nowrap; }
.ride__value small { font-size: .8rem; font-weight: 600; color: var(--ride-muted); margin-left: .3rem; letter-spacing: 0; }

/* Outside: the pages, as tabs under the header (a swipe across the numbers moves between them too). */
.ride__pages { align-self: center; display: inline-flex; gap: .2rem; padding: .15rem; margin: 0 0 .15rem; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.ride__pages button { padding: .25rem .8rem; border-radius: 999px !important; font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--ride-muted) !important; }
.ride__pages button.is-on { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
.ride__body.is-page { gap: .9rem; }

.ride-climb { --steep: var(--ride-muted); flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .6rem; }
.ride-climb__grade { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.ride-climb__grade .ride__big { color: var(--steep); }
.ride-climb__profile { position: relative; flex: 1 1 140px; min-height: 90px; max-height: 260px; }
.ride-climb__profile svg { width: 100%; height: 100%; display: block; }
.ride-climb__fill { fill: var(--steep); fill-opacity: .18; transition: fill .6s; }
.ride-climb__line { fill: none; stroke: var(--steep); stroke-width: 2.5; stroke-linejoin: round; transition: stroke .6s; }
.ride-climb__dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--steep); }
.ride-climb__scale { position: absolute; left: 0; font-size: .62rem; font-weight: 700; color: var(--ride-muted); }
.ride-climb__scale.is-high { top: 0; }
.ride-climb__scale.is-low { bottom: 0; }

.ride-route { position: relative; flex: 1; min-height: 160px; display: grid; }
.ride-route svg { width: 100%; height: 100%; min-height: 0; }
.ride-route__line { fill: none; stroke: var(--vg-power); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ride-route__start { fill: #4ade80; stroke: #0a0b10; stroke-width: 6; }
.ride-route__now { fill: #fff; stroke: var(--vg-power); stroke-width: 8; }
.ride-route__halo { fill: var(--vg-power); opacity: .25; animation: ride-pulse 1.6s ease-in-out infinite; }
.ride-route__north { position: absolute; top: 0; right: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: .65rem; font-weight: 800; color: var(--ride-muted); border: 1px solid rgba(255, 255, 255, .14); }

/* What was just said floats over the bottom of the numbers, above the buttons, so nothing moves when it comes and goes. */
.ride__banner.is-cue { position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 7.6rem); width: max-content; max-width: calc(100% - 2rem); margin: 0; background: #23244a; color: #d4d5ff; text-align: center; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6); animation: vg-fade .2s ease-out; }

.ride__banner { align-self: center; display: inline-flex; align-items: center; gap: .45rem; margin-top: .6rem; padding: .45rem .95rem; border-radius: 999px; background: rgba(245, 158, 11, .14); color: #fbbf24; font-weight: 600; font-size: .85rem; animation: vg-pop .2s ease-out; }

.ride__controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .9rem; padding-top: .8rem; }
.ride__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 64px; border-radius: 18px !important; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: #b2b8c6 !important; background: rgba(255, 255, 255, .05) !important; transition: transform .1s; }
.ride__btn:active { transform: scale(.96); }
.ride__btn:disabled { opacity: .35; }
.ride__btn--main { width: 86px; height: 86px; border-radius: 50% !important; background: #fff !important; color: #0a0b10 !important; box-shadow: 0 12px 34px -10px rgba(139, 140, 255, .7); font-size: .66rem; }
.ride.is-paused .ride__btn--main { background: var(--vg-signal-grad) !important; color: #fff !important; }

/* Shorter phones (an SE, a 13 mini): the tiles and the picture give a little each. */
@media (orientation: portrait) and (max-height: 760px) {
    .ride__tile { padding: .55rem .8rem .6rem; gap: .1rem; }
    .ride__value { font-size: clamp(1.45rem, 7vw, 2rem); }
    .ride-chart { margin-bottom: .9rem; }
}

.field-picker { display: flex; flex-direction: column; gap: .9rem; }
.field-picker__group { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.field-picker__item { --tile: var(--vg-text-3); display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .55rem .75rem .6rem; border-radius: 12px; border: 1px solid var(--vg-border); background: var(--vg-surface); box-shadow: inset 3px 0 0 var(--tile); text-align: left; font: inherit; color: var(--vg-text); cursor: pointer; }
.field-picker__item span { font-size: .76rem; color: var(--vg-text-3); }
.field-picker__item b { font-family: var(--vg-font-display); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
.field-picker__item b small { font-size: .72rem; font-weight: 600; }
.field-picker__item.is-current { border-color: var(--vg-signal); box-shadow: inset 3px 0 0 var(--tile), var(--vg-focus); }
.field-picker__item--power { --tile: var(--vg-power); }
.field-picker__item--heartrate { --tile: var(--vg-hr); }
.field-picker__item--cadence { --tile: var(--vg-cadence); }
.field-picker__item--speed, .field-picker__item--distance { --tile: var(--vg-speed); }
.field-picker__item--energy { --tile: var(--vg-wbal); }

.ride-finish { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1rem; }
.ride-finish > div { display: flex; flex-direction: column; align-items: center; padding: .8rem .5rem; border-radius: 12px; background: var(--vg-surface-2); }
.ride-finish b { font-family: var(--vg-font-display); font-variant-numeric: tabular-nums; font-size: 1.35rem; letter-spacing: -.02em; }
.ride-finish span { font-size: .74rem; color: var(--vg-text-3); }
.ride-finish__discard { margin-top: .25rem; }

.ride-done { max-width: 520px; margin: 1.5rem auto 2rem; text-align: center; }
.ride-done__mark { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; background: var(--vg-surface-3); color: var(--vg-text-2); }
.ride-done__mark.is-sent { background: var(--vg-signal-grad); color: #fff; box-shadow: 0 14px 36px -12px rgba(91, 92, 255, .7); animation: vg-pop .35s ease-out; }
.ride-done__line { color: var(--vg-text-2); max-width: 400px; margin: 0 auto; }
.ride-done__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 1.5rem 0; }
.ride-done__stats > div { display: flex; flex-direction: column; padding: .95rem 1rem; border-radius: var(--vg-radius); background: var(--vg-surface); border: 1px solid var(--vg-border); }
.ride-done__stats b { font-family: var(--vg-font-display); font-variant-numeric: tabular-nums; font-size: 1.85rem; letter-spacing: -.025em; line-height: 1.1; }
.ride-done__stats span { font-size: .76rem; color: var(--vg-text-3); }
.ride-done__stats .is-power b { color: var(--vg-power); }
.ride-done__stats .is-heart b { color: var(--vg-hr); }
.ride-done__stats .is-climb b { color: #ea7a2f; }
.ride-done__actions { display: flex; flex-direction: column; gap: .5rem; }
.ride-done__sends { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: -.5rem 0 1rem; }
.ride-done__sends:empty { display: none; }
/* The session: its card on the Ride page, and its panel on the ride screen. */
.ride-session { margin-bottom: 1rem; }
.ride-session__title { display: flex; flex-direction: column; min-width: 0; }
.ride-session__title h2 { margin: 0; }
.ride-session__pick { max-width: 13rem; }
.ride-session__how { color: var(--vg-text-2); font-size: .88rem; margin: .85rem 0 1rem; }
.ride-session__ai { display: flex; align-items: flex-start; gap: .45rem; margin: -.5rem 0 1rem; color: var(--vg-text-2); font-size: .82rem; }
.ride-session__ai svg { flex-shrink: 0; margin-top: .15rem; color: var(--vg-ai); }

.ride__body { overflow-y: auto; overscroll-behavior: contain; }
.ride-plan { --zone: var(--vg-power); display: flex; flex-direction: column; gap: .65rem; }
.ride-plan__step { position: relative; overflow: hidden; padding: .7rem .9rem .8rem 1rem; border-radius: 18px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .06); }
.ride-plan__step::before { content: ""; position: absolute; left: 0; top: .8rem; bottom: .8rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--zone); }
.ride-plan__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 38px; }
.ride-plan__head .ride__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ride-plan__intensity { display: inline-flex; align-items: center; gap: .15rem; padding: .15rem; border-radius: 999px; background: rgba(255, 255, 255, .06); flex-shrink: 0; }
.ride-plan__intensity button { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff !important; background: rgba(255, 255, 255, .07) !important; }
.ride-plan__intensity button:disabled { opacity: .35; }
.ride-plan__intensity span { min-width: 3.3rem; text-align: center; font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ride-plan__intensity span.is-changed { color: #fbbf24; }
.ride-plan__left { display: flex; align-items: baseline; gap: .5rem; }
.ride-plan__countdown { font-family: var(--vg-font-display); font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(2.6rem, 13vw, 3.6rem); line-height: 1; letter-spacing: -.03em; color: #fff; }
.ride-plan__of { color: var(--ride-muted); font-size: .85rem; font-weight: 600; }
/* A step a minute longer: small, beside the time left, out of the way of the big buttons. */
.ride-plan__more { margin-left: auto; align-self: center; padding: .35rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #b2b8c6 !important; background: rgba(255, 255, 255, .07) !important; }
.ride-plan__more:active { transform: scale(.95); }
.ride-plan__match { margin-top: .25rem; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vg-power); }
.ride-plan__bar { height: 6px; margin-top: .6rem; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ride-plan__bar span { display: block; height: 100%; border-radius: inherit; background: var(--zone); transition: width 1s linear; }

.ride-plan__numbers { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ride-plan__numbers.is-single { grid-template-columns: 1fr; }
.ride-plan__number { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .3rem 0; }
.ride-plan__number.is-target::before { content: ""; position: absolute; z-index: -1; left: 18%; right: 18%; top: 22%; height: 46%; border-radius: 50%; background: var(--zone); opacity: .28; filter: blur(26px); }
.ride-plan__big { font-family: var(--vg-font-display); font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(3.3rem, 18vw, 5.4rem); line-height: .95; letter-spacing: -.04em; color: #fff; }
.ride-plan__number.is-target .ride-plan__big { color: var(--zone); }
.ride-plan__under { color: var(--ride-muted); font-size: .85rem; font-weight: 600; }
.ride-plan__erg { margin-top: .2rem; padding: .3rem .75rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: #b2b8c6 !important; background: rgba(255, 255, 255, .07) !important; }
.ride-plan__erg:disabled { cursor: default; }
.ride-plan__erg.is-holding { color: #4ade80 !important; background: rgba(52, 199, 89, .15) !important; }
.ride-plan__erg.is-easing { color: #fbbf24 !important; background: rgba(245, 158, 11, .16) !important; }
.ride-plan__done { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: 18px; color: #4ade80; background: rgba(52, 199, 89, .12); }
.ride-plan__done b { display: block; color: #fff; font-size: 1.05rem; }
.ride-plan__done span { color: var(--ride-muted); font-size: .85rem; }
.ride-plan__session { display: contents; }
.ride-plan__next { margin: 0; text-align: center; color: var(--ride-muted); font-size: .85rem; }
.ride-plan__next b { color: #e9ebf1; }

.ride-session-chart { position: relative; }
.ride-session-chart__over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ride__grid.is-plan .ride__tile { padding: .5rem .8rem .55rem; }
.ride__grid.is-plan .ride__value { font-size: clamp(1.35rem, 6.5vw, 1.8rem); }
.ride-done__session { display: inline-flex; align-items: center; gap: .4rem; margin: .6rem 0 0; padding: .3rem .75rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--vg-text-2); background: var(--vg-surface-2); }

/* ERG as the switch it is: the knob right and green when the trainer holds the target. */
.ride-plan__erg.is-switch { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .35rem; font-size: .78rem; }
.ride-plan__knob { position: relative; width: 34px; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, .18); transition: background .2s; flex-shrink: 0; }
.ride-plan__knob > span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; }
.ride-plan__erg.is-switch[aria-checked="true"] .ride-plan__knob { background: #34c759; }
.ride-plan__erg.is-switch[aria-checked="true"] .ride-plan__knob > span { transform: translateX(14px); }
.ride-plan__erg.is-easing .ride-plan__knob { background: #f59e0b !important; }

/* A course on the trainer: how far along, the gap to the ride ridden against, the whole course as a strip with both
   on it, then the power beside the gradient (or the watts to hold). The strip draws in the page's colours on the Ride
   page and in the ride screen's own on the ride screen. */
.ride-course-profile {
    --rcp-area: var(--vg-altitude, #94a3b8); --rcp-done: var(--vg-power); --rcp-line: var(--vg-text-3); --rcp-ring: var(--vg-surface);
    position: relative; width: 100%;
}
.ride .ride-course-profile { --rcp-area: #ffffff; --rcp-line: rgba(255, 255, 255, .55); --rcp-ring: #0a0b10; }
.ride-course-profile svg { width: 100%; height: 100%; display: block; }
.ride-course-profile__area { fill: var(--rcp-area); opacity: .12; }
.ride-course-profile__climb { fill: #f97316; opacity: .3; }
.ride-course-profile__done { fill: var(--rcp-done); opacity: .55; }
.ride-course-profile__line { fill: none; stroke: var(--rcp-line); stroke-width: 1.5; stroke-linejoin: round; }
.ride-course-profile__dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none; }
.ride-course-profile__dot.is-you { z-index: 2; background: #fff; box-shadow: 0 0 0 3px var(--vg-power), 0 0 0 7px rgba(139, 140, 255, .25); }
.ride-course-profile__dot.is-ghost { background: #a78bfa; box-shadow: 0 0 0 2px var(--rcp-ring); }

.ride-course .ride-plan__left { flex-wrap: wrap; row-gap: .25rem; }
.ride-course__gap { margin-left: auto; align-self: center; padding: .3rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #b2b8c6; background: rgba(255, 255, 255, .07); }
.ride-course__gap.is-ahead { color: #4ade80; background: rgba(52, 199, 89, .13); }
.ride-course__gap.is-behind { color: #fbbf24; background: rgba(245, 158, 11, .14); }
.ride-course .ride-course-profile { margin-top: .55rem; }
.ride-course__next { margin: .4rem 0 0; font-size: .8rem; font-weight: 600; color: var(--ride-muted); }
.ride-course__done { margin: .2rem 0 0; padding: .55rem .7rem; }
.ride-plan__number.is-grade .ride-plan__big { color: var(--steep); transition: color .6s; }
.ride-plan__big small { font-size: .38em; margin-left: .12em; letter-spacing: 0; color: var(--ride-muted); }

/* The climbing page of a course: the road ahead a hundred metres at a time, each in its gradient's colour. */
.ride-ahead { --steep: var(--ride-muted); flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .6rem; }
.ride-ahead .ride-climb__grade .ride__big { color: var(--steep); }
.ride-ahead__road { position: relative; flex: 1 1 150px; min-height: 100px; max-height: 280px; }
.ride-ahead__road svg { width: 100%; height: 100%; display: block; }
.ride-ahead__road polygon { opacity: .85; stroke: #0a0b10; stroke-width: .6; vector-effect: non-scaling-stroke; }
.ride-ahead__road polygon.is-done { opacity: .3; }
.ride-ahead__pct { position: absolute; bottom: .3rem; transform: translateX(-50%); font-size: .62rem; font-weight: 800; color: #0a0b10; }
.ride-ahead__climb { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .1rem; text-align: center; }
.ride-ahead__climb b { font-size: .95rem; color: #fff; }
.ride-ahead__climb span { font-size: .82rem; color: var(--ride-muted); }

/* The map page of a course: the map dimmed to the screen's dark, the course and the riders bright on it. */
.ride-course-map { position: relative; flex: 1 1 220px; min-height: 180px; border-radius: 18px; overflow: hidden; background: #11131b; }
.ride-course-map__canvas { position: absolute; inset: 0; background: #11131b; }
.ride-course-map__canvas .vg-tiles-dim { filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.9) saturate(.5); }
.ride-course-map__canvas .leaflet-control-attribution { font-size: 9px; background: rgba(10, 11, 16, .6) !important; color: #8b91a1; }
.ride-course-map__canvas .leaflet-control-attribution a { color: #b2b8c6; }
.ride-course-map__mode { position: absolute; z-index: 500; top: .6rem; right: .6rem; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .75rem; border-radius: 999px; font-size: .75rem !important; font-weight: 700 !important; color: #fff !important; background: rgba(10, 11, 16, .72) !important; backdrop-filter: blur(6px); }
.ride.is-day .ride-course-map, .ride.is-day .ride-course-map__canvas { background: #eef0f3; }

/* On the course's main page the map sits right above the profile, the road and its climbs read together. */
.ride-course__road { display: flex; flex-direction: column; gap: .45rem; padding: .55rem; border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); }
.ride-course-map.is-compact { flex: none; height: clamp(120px, 22vh, 260px); min-height: 0; border-radius: 12px; }
.ride-course-map.is-compact .ride-course-map__mode { top: .45rem; right: .45rem; padding: .3rem .6rem; font-size: .7rem !important; }
.ride-course__road .ride-course__next { margin: 0; }
.ride-course__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .9rem; }
.ride-course__effort { display: flex; flex-wrap: wrap; gap: .1rem .8rem; margin: 0; font-size: .8rem; font-weight: 650; color: var(--ride-muted); font-variant-numeric: tabular-nums; }
.ride-course__effort span { white-space: nowrap; }
.ride-course__effort i { display: inline-block; width: .55rem; height: .55rem; margin-right: .35rem; border-radius: 50%; vertical-align: 0; }
.ride-course__effort .is-you { background: #fff; box-shadow: 0 0 0 2px #0a0b10; }
.ride-course__effort .is-them { background: #a78bfa; box-shadow: 0 0 0 2px #fff; }
.ride.is-day .ride-course__road { background: #f3f4f6; border-color: #e3e5ea; }
.vg-ghost-tip { padding: .1rem .45rem !important; border: 0 !important; border-radius: 999px !important; background: #a78bfa !important; color: #0a0b10 !important; font: 700 11px/1.4 var(--vg-font, system-ui) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .35) !important; }
.vg-ghost-tip::before { display: none !important; }
.ride.is-day .ride-ahead__climb b { color: #0a0b10; }

/* The Ride page's course card. */
.ride-course-pick__facts { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .7rem 0 .3rem; color: var(--vg-text-2); font-size: .9rem; }
.ride-course-pick__facts b { font-family: var(--vg-font-display); font-size: 1.15rem; color: var(--vg-text); }
.ride-course-pick__mode { margin: .9rem 0 .4rem; }
.ride-course-pick__mode button:disabled { opacity: .45; cursor: not-allowed; }
.ride-course-pick__weather { display: flex; gap: .45rem; align-items: flex-start; margin: .4rem 0 0; font-size: .86rem; color: var(--vg-text-2); }
.ride-course-pick__weather small { display: block; margin-top: .15rem; font-size: .72rem; color: var(--vg-text-3); }
.ride-course-pick__step { background: var(--vg-surface-2) !important; }
.ride-course-pick__step button { color: var(--vg-text) !important; background: var(--vg-surface) !important; border: 1px solid var(--vg-border) !important; }

/* Sideways (a phone on a stand by the trainer): the buttons stand in a column on the right, so the ride has the
   height, and what is stacked upright sits side by side. */
@media (orientation: landscape) and (max-height: 640px) {
    .ride { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "top controls" "pages controls" "body controls" "banner controls"; column-gap: 1rem; padding-top: calc(env(safe-area-inset-top) + .35rem); }
    .ride__top { grid-area: top; min-height: 36px; }
    .ride__pages { grid-area: pages; justify-self: center; }
    .ride__body.is-page > .ride-climb, .ride__body.is-page > .ride-route, .ride__body.is-page > .ride-ahead, .ride__body.is-page > .ride-course-map { grid-column: 1; grid-row: 1 / span 2; }
    .ride__hide { height: 36px; }
    .ride__body { grid-area: body; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 1rem; row-gap: .5rem; padding-top: .25rem; }
    .ride__hero { grid-column: 1; grid-row: 1; }
    .ride__big { font-size: clamp(3.5rem, 20vh, 7rem); }
    .ride-chart { grid-column: 1; grid-row: 2; min-height: 56px; margin-bottom: .9rem; }
    .ride__grid { grid-column: 2; grid-row: 1 / span 2; align-content: start; }
    .ride__tile { padding: .45rem .75rem .5rem; gap: .05rem; }
    .ride__value { font-size: clamp(1.3rem, 6.5vh, 1.9rem); }
    .ride__banner { grid-area: banner; justify-self: center; margin-top: .35rem; }
    .ride__banner.is-cue { left: calc(50% - 50px); bottom: calc(env(safe-area-inset-bottom) + .75rem); }
    .ride__controls { grid-area: controls; grid-template-columns: none; grid-template-rows: 1fr auto 1fr; align-items: center; justify-items: center; gap: .6rem; padding: 0; }
    .ride__btn { width: 84px; min-height: 52px; }
    .ride__btn--main { width: 72px; height: 72px; }

    /* A session: the step over the session's picture on the left, the power and target over the tiles on the right
       (the panel's parts join the ride's own grid). */
    .ride__body.is-plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "step numbers" "session tiles"; }
    .ride__body.is-plan .ride-plan { display: contents; }

    /* A course sideways: the map and the profile down the left, the distance and the numbers on the right. */
    .ride__body.is-plan:has(.ride-course) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "road step" "road numbers"; }
    .ride-course__road { grid-area: road; min-height: 0; }
    .ride-course__road .ride-course-map.is-compact { flex: 1 1 auto; height: auto; min-height: 120px; }
    .ride__body.is-plan .ride__grid { grid-area: tiles; grid-column: auto; grid-row: auto; }
    .ride-plan__step, .ride-plan__done { grid-area: step; }
    .ride-plan__step { padding: .5rem .75rem .6rem .85rem; }
    .ride-plan__head { min-height: 30px; }
    .ride-plan__intensity button { width: 28px; height: 28px; }
    .ride-plan__intensity span { min-width: 2.8rem; font-size: .8rem; }
    .ride-plan__countdown { font-size: clamp(2rem, 11vh, 2.8rem); }
    .ride-plan__bar { margin-top: .4rem; }
    .ride-plan__numbers { grid-area: numbers; align-items: center; }
    .ride-plan__big { font-size: clamp(2.4rem, 15vh, 3.8rem); }
    .ride-plan__session { grid-area: session; align-self: start; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
    .ride-session-chart .wp { height: clamp(44px, 16vh, 72px) !important; }
}

/* The light ride screen, for riding in sunshine: black on white, the colours kept for what they mean. */
.ride.is-day { --ride-muted: #5b6170; background: #ffffff; color: #0a0b10; color-scheme: light; }
.ride.is-day .ride__state { background: rgba(10, 11, 16, .06); }
.ride.is-day .ride__elapsed, .ride.is-day .ride__big, .ride.is-day .ride__value, .ride.is-day .ride-plan__countdown, .ride.is-day .ride-plan__big { color: #0a0b10; }
.ride.is-day .ride__big.is-empty, .ride.is-day .ride__value.is-empty { color: rgba(10, 11, 16, .2); }
.ride.is-day .ride__hero::before, .ride.is-day .ride-plan__number.is-target::before { opacity: .14; }
.ride.is-day .ride__tile, .ride.is-day .ride-plan__step { background: #f3f4f6 !important; border-color: #e3e5ea !important; }
.ride.is-day .ride__tile--time { --tile: #0a0b10; }
.ride.is-day .ride__btn { background: #eef0f3 !important; color: #2c303a !important; }
.ride.is-day .ride__btn--main { background: #0a0b10 !important; color: #fff !important; box-shadow: none; }
.ride.is-day.is-paused .ride__btn--main { background: var(--vg-signal-grad) !important; }
.ride.is-day .ride__pages, .ride.is-day .ride-plan__intensity, .ride.is-day .ride-plan__more, .ride.is-day .ride-plan__erg { background: rgba(10, 11, 16, .06) !important; }
.ride.is-day .ride__pages button.is-on { background: #0a0b10 !important; color: #fff !important; }
.ride.is-day .ride-plan__intensity button { background: rgba(10, 11, 16, .08) !important; color: #0a0b10 !important; }
.ride.is-day .ride-plan__more, .ride.is-day .ride-plan__erg { color: #2c303a !important; }
.ride.is-day .ride-plan__next b { color: #0a0b10; }
.ride.is-day .ride__banner { background: rgba(245, 158, 11, .16); color: #92400e; }
.ride.is-day .ride__banner.is-cue { background: #e6e7ff; color: #3730a3; box-shadow: 0 8px 24px -10px rgba(10, 11, 16, .35); }
.ride.is-day .ride-chart__empty { color: #8b91a1; border-color: rgba(10, 11, 16, .12); }
.ride.is-day .ride-climb__dot { background: #0a0b10; }
.ride.is-day .ride-route__start { stroke: #fff; }
.ride.is-day .ride-route__now { fill: #0a0b10; }
.ride.is-day .ride-route__north { border-color: rgba(10, 11, 16, .14); }

/* ---------- Overview blocks ---------- */
/* The statistics blocks a person adds to their overview share one look: a sentence that answers first, a chart, then
   numbers with the change beside each. Shared here because each block is its own component. */

.ovb-sub { font-size: .8rem; margin-top: .15rem; }
.ovb-lede { margin: 0 0 .8rem; font-size: .95rem; font-weight: 600; line-height: 1.45; color: var(--vg-text); }

.ovb-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .8rem 1.2rem; margin: 0 0 .6rem; }
.ovb-kv dt { font-size: .74rem; color: var(--vg-text-3); }
.ovb-kv dd { margin: .1rem 0 0; font-family: var(--vg-font-display); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.ovb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: .5rem; margin: 0 0 .6rem; }
.ovb-tiles > div { padding: .55rem .7rem; border-radius: 10px; background: var(--vg-surface-2); min-width: 0; }
.ovb-tiles dt { font-size: .72rem; color: var(--vg-text-3); }
.ovb-tiles dd { margin: .1rem 0 0; font-family: var(--vg-font-display); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.ovb-tiles small { display: block; font-size: .72rem; color: var(--vg-text-3); font-variant-numeric: tabular-nums; }
.ovb-tiles small.is-up { color: var(--vg-good); }
.ovb-tiles small.is-down { color: var(--vg-warn); }

.ovb-bests { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.ovb-best {
    display: grid; gap: .1rem; height: 100%; box-sizing: border-box; padding: .6rem .7rem; border-radius: 10px;
    background: var(--vg-surface-2); color: inherit; text-decoration: none; border: 1px solid transparent;
}
a.ovb-best[href]:hover { border-color: var(--vg-border-strong); text-decoration: none; }
.ovb-best.is-ever { background: color-mix(in srgb, var(--vg-signal) 9%, var(--vg-surface)); border-color: color-mix(in srgb, var(--vg-signal) 30%, transparent); }
.ovb-best__label { font-size: .72rem; font-weight: 600; color: var(--vg-text-3); }
.ovb-best__watts { font-family: var(--vg-font-display); font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ovb-best__watts small { font-size: .75rem; font-weight: 600; color: var(--vg-text-3); }
.ovb-best__kg, .ovb-best__vs { font-size: .74rem; color: var(--vg-text-2); font-variant-numeric: tabular-nums; }
.ovb-best__badge { display: inline-flex; align-items: center; gap: .25rem; margin-top: .2rem; font-size: .68rem; font-weight: 700; color: var(--vg-signal); }

.ovb-stood { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ovb-stood li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; font-size: .84rem; line-height: 1.45; color: var(--vg-text-2); }
.ovb-stood b { color: var(--vg-text); }
.ovb-stood__icon { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; background: var(--vg-surface-2); color: var(--vg-text-2); }
.ovb-stood li.is-best .ovb-stood__icon { background: var(--vg-good-soft); color: var(--vg-good); }