/* ===== Shared site navigation (all pages) =====
   Desktop (≥861px): the existing inline pill nav, unchanged — this file only adds
   the active-page state. Mobile (≤860px): the topbar becomes a compact sticky bar
   with a hamburger; the nav links + unit toggles collapse into a dropdown panel
   (.topbar-tools) opened by nav.js. Uses the page tokens (--bg-*, --ink, --line…)
   defined by each page's own stylesheet, so it must load AFTER it. */

/* --- Inline stroke icons (shared, every page) ---
   Duplicate of the fuel.css base so pages that don't load fuel.css
   (landing, stats) still render them. Icons inherit the text color. */
.ico { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: -0.18em; }
.ico path, .ico circle, .ico rect, .ico line, .ico polyline { fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round; }
.nav-ico .ico { width: 13px; height: 13px; }
.nav-search .ico, .nav-gear .ico { width: 16px; height: 16px; }

/* --- Active page (all widths) — set by nav.js via aria-current --- */
/* Each tool wears its own accent (the same colour as its landing card and
   section chips), so the lit pill doubles as a "you are here" in brand colour. */
.nav a[href="/raceday"] { --nav-acc: var(--gold, #ffd23f); }
.nav a[href="/creator"] { --nav-acc: var(--moss, #9ae600); }
.nav a[aria-current="page"] {
    color: var(--nav-acc, var(--ink));
    background: color-mix(in srgb, var(--nav-acc, var(--ink)) 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-acc, var(--line)) 45%, transparent),
                0 0 12px color-mix(in srgb, var(--nav-acc, transparent) 22%, transparent);
}

/* --- Hamburger button (hidden on desktop) --- */
.nav-burger { display: none; }

/* Desktop: the tools cluster hugs the right edge (matches today's layout on every
   page; on the landing page it slots between the wordmark and the CTA). */
@media (min-width: 861px) {
    .topbar-tools { margin-left: auto; }
}

@media (max-width: 860px) {
    /* Compact sticky bar — the nav is reachable from anywhere on 4,000px+ pages. */
    .topbar {
        position: sticky; top: 0; z-index: 2000;
        flex-wrap: nowrap;
        padding-top: 10px; padding-bottom: 10px;
        background: color-mix(in srgb, var(--bg-0, #07120f) 86%, transparent);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
    }

    /* No blur support (old WebViews, battery savers) → solid bars, still legible. */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .topbar, .section-chips { background: var(--bg-0, #07120f); }
    }

    .nav-burger {
        display: inline-flex; align-items: center; justify-content: center;
        order: 10;                      /* far right, after any topbar CTA */
        flex: 0 0 auto;
        width: 44px; height: 44px;      /* full-size touch target */
        margin: -4px 0;                 /* …without growing the bar */
        background: transparent; border: none; border-radius: 12px;
        cursor: pointer; color: var(--ink);
    }
    .nav-burger:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

    /* The three lines → X morph */
    .nav-burger-box { position: relative; width: 20px; height: 14px; display: block; }
    .nav-burger-box span {
        position: absolute; left: 0; width: 20px; height: 2px; border-radius: 2px;
        background: currentColor; transition: transform 0.2s ease, opacity 0.15s ease, top 0.2s ease;
    }
    .nav-burger-box span:nth-child(1) { top: 0; }
    .nav-burger-box span:nth-child(2) { top: 6px; }
    .nav-burger-box span:nth-child(3) { top: 12px; }
    .menu-open .nav-burger-box span:nth-child(1) { top: 6px; transform: rotate(45deg); }
    .menu-open .nav-burger-box span:nth-child(2) { opacity: 0; }
    .menu-open .nav-burger-box span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

    /* The mascot hugs the wordmark; the auto margin absorbs the slack so
       space-between can't center him between wordmark and burger. */
    .topbar-mascot { display: inline-flex; margin-right: auto; }

    /* Landing-page CTA stays visible in the bar, compacted. */
    .topbar > .cta { margin-left: auto; padding: 7px 14px; font-size: 0.85rem; }

    /* --- Dropdown panel --- */
    .topbar-tools {
        display: none;
        position: absolute; top: calc(100% + 8px); left: 12px; right: 12px;
        flex-direction: column; align-items: stretch; gap: 4px;
        padding: 8px;
        background: color-mix(in srgb, var(--bg-1, #0a1a1c) 96%, #ffffff 4%);
        border: 1px solid var(--line); border-radius: 16px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
        max-height: calc(100dvh - 90px); overflow-y: auto;
    }
    .topbar.menu-open .topbar-tools { display: flex; animation: nav-drop 0.16s ease; }
    @keyframes nav-drop {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: none; }
    }

    /* Links become full-width touch rows. */
    .topbar-tools .nav { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
    .topbar-tools .nav a {
        display: flex; align-items: center; min-height: 46px;
        padding: 10px 14px; border-radius: 11px;
        font-size: 1rem; font-weight: 600;
    }
    .topbar-tools .nav a[aria-current="page"] { color: var(--nav-acc, var(--orange)); }
    .topbar-tools .nav a:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

    /* Unit toggles ride along in the panel as full-width segmented controls
       (they're inside .topbar-tools on the pages that have them). */
    .topbar-tools .unit-toggle { display: flex; width: 100%; }
    .topbar-tools .unit-toggle button { flex: 1 1 0; padding-top: 10px; padding-bottom: 10px; }
    .topbar-tools .unit-toggle:first-of-type {
        margin-top: 6px; border-radius: 12px;
    }
    .topbar-tools .unit-toggle:first-of-type::before { display: none; }
    .topbar-tools .unit-toggle + .unit-toggle { border-radius: 12px; }

    /* Dim + block the page behind the open menu; tapping it closes (nav.js). */
    body.nav-open::after {
        content: ""; position: fixed; inset: 0; z-index: 1900;
        background: rgba(4, 10, 8, 0.45);
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar.menu-open .topbar-tools { animation: none; }
    .nav-burger-box span { transition: none; }
}

/* ===== Section-jump chips (built by nav.js on the long tool pages) =====
   Pill styles are shared; each breakpoint defines its own ROW. Narrow: sticky
   under the topbar (the page scrolls). Desktop split pages: a quiet static row
   between topbar and panes (the RIGHT PANE scrolls — audit F5: a 6,000px pane
   had no navigation at all on desktop). */
.section-chips { display: none; }
.section-chip {
    flex: 0 0 auto; white-space: nowrap;
    min-height: 36px; padding: 6px 14px;
    background: var(--glass);
    color: color-mix(in srgb, var(--chip-acc, var(--muted)) 80%, var(--ink));
    border: 1px solid color-mix(in srgb, var(--chip-acc, var(--line)) 30%, var(--line));
    border-radius: 999px;
    font: inherit; font-size: 0.82rem; font-weight: 600;
    cursor: pointer;
    transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
/* The section in view glows in its own accent as you scroll. */
.section-chip[aria-current] {
    color: var(--chip-acc, var(--ink));
    border-color: var(--chip-acc, var(--orange));
    background: color-mix(in srgb, var(--chip-acc, var(--orange)) 16%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--chip-acc, var(--orange)) 45%, transparent),
                inset 0 0 8px color-mix(in srgb, var(--chip-acc, var(--orange)) 18%, transparent);
}
.section-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.section-chips::-webkit-scrollbar { display: none; }
@media (max-width: 860px) {
    .section-chips {
        position: sticky; z-index: 1890;   /* under the topbar (2000) and the menu scrim (1900) */
        top: 63px;                          /* nav.js keeps this synced to the real topbar height */
        display: flex; gap: 8px;
        padding: 8px 16px 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        background: color-mix(in srgb, var(--bg-0, #07120f) 86%, transparent);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--line);
    }
    .section-chips[hidden] { display: none; }
    /* Scrollability affordance (KRI-58): the clipped edge fades to nothing —
       a half-faded chip is the "more this way" signal. Mask-only, so the row's
       background and blur fade with the chips instead of leaving a hard seam.
       nav.js toggles the classes from scroll position. */
    .section-chips.chips-more-right {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    }
    .section-chips.chips-more-left {
        -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent);
        mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent);
    }
    .section-chips.chips-more-left.chips-more-right {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent);
    }
}
@media (min-width: 861px) {
    /* Inside the right pane (nav.js moves it there): a sticky floating toolbar
       pinned to the top of the column it controls. Centered, and it WRAPS —
       never clips — when the pane is narrow. z-index clears the scroll fade (6). */
    body.split-page .split-right > .section-chips {
        display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
        position: sticky; top: 0; z-index: 7;
        margin: 0; padding: 10px 12px;
        background: color-mix(in srgb, var(--bg-0, #07120f) 82%, transparent);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border: 1px solid var(--line); border-radius: 14px;
    }
    /* An explicit display beats the [hidden] UA rule — restate it (known trap). */
    body.split-page .split-right > .section-chips[hidden] { display: none; }
    /* Auto-hide, in lockstep with the plan-action bar (one timer in raceday.js
       toggles .rd-actions-hidden on both). Opacity-only fade: the sticky slot
       stays in flow so chip-click / scrollspy offsets that use row.offsetHeight
       don't shift. Slides UP — it's a top bar (the plan bar slides down). */
    body.split-page .split-right > .section-chips {
        transition: opacity 0.28s ease, transform 0.28s ease;
    }
    body.split-page .split-right > .section-chips.rd-actions-hidden {
        opacity: 0; transform: translateY(-10px); pointer-events: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.split-page .split-right > .section-chips.rd-actions-hidden { transform: none; }
}

/* ===== Topbar mascot — the goat mascot trotting beside the wordmark =====
   The landing hero's goat, miniaturised: same LED palette-cycle glow hugging
   his silhouette, a small bob, and the poof trailing behind him (he runs
   left, so the dust kicks off to the right). */
/* Mobile-only: on desktop the wordmark stands alone. */
.topbar-mascot { display: none; align-items: center; gap: 1px; margin-left: 8px; flex: 0 0 auto; }
@media (max-width: 860px) { .topbar-mascot { display: inline-flex; } }
.topbar-goat {
    height: 32px; width: auto; display: block;
    animation: tg-mini-bob 3.2s ease-in-out infinite, tg-mini-led 22s linear infinite;
}
.topbar-dust { font-size: 0.9rem; line-height: 1; animation: tg-mini-dust 1.6s ease-in-out infinite; }
@keyframes tg-mini-bob {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50%      { transform: translateY(-2px) rotate(1deg); }
}
@keyframes tg-mini-led {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255,122,26,0.55)) drop-shadow(0 0 7px rgba(255,122,26,0.4)); }
    16.6%    { filter: drop-shadow(0 0 2px rgba(255,210,63,0.55)) drop-shadow(0 0 7px rgba(255,210,63,0.4)); }
    33.3%    { filter: drop-shadow(0 0 2px rgba(154,230,0,0.55)) drop-shadow(0 0 7px rgba(154,230,0,0.4)); }
    50%      { filter: drop-shadow(0 0 2px rgba(25,195,177,0.55)) drop-shadow(0 0 7px rgba(25,195,177,0.4)); }
    66.6%    { filter: drop-shadow(0 0 2px rgba(139,108,255,0.55)) drop-shadow(0 0 7px rgba(139,108,255,0.4)); }
    83.3%    { filter: drop-shadow(0 0 2px rgba(255,93,115,0.55)) drop-shadow(0 0 7px rgba(255,93,115,0.4)); }
}
@keyframes tg-mini-dust {
    0%   { opacity: 0; transform: translateX(-3px) scale(0.8); }
    40%  { opacity: 0.85; }
    100% { opacity: 0; transform: translateX(10px) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
    .topbar-goat, .topbar-dust { animation: none; }
}

/* ===== Toasts (TrailGoatToast in nav.js) ===== */
.tg-toast-stack {
    position: fixed; bottom: 18px; right: 18px; z-index: 4000;
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
    pointer-events: none;
}
.tg-toast {
    pointer-events: auto;
    max-width: min(90vw, 400px);
    background: var(--bg-1, #0a1a1c);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    border-left: 3px solid var(--tg-toast-acc, var(--orange, #ff7a1a));
    color: var(--ink, #eef5ef);
    border-radius: 12px; padding: 11px 16px;
    font-size: 0.92rem; line-height: 1.45;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.tg-toast.show { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .tg-toast { transition: none; transform: none; }
}

/* ===== Command palette (⌘K) ===== */
.tg-pal-backdrop {
    position: fixed; inset: 0; z-index: 4500; display: none;
    background: rgba(3, 9, 7, 0.55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: 12vh 16px 0;
}
.tg-pal-backdrop.open { display: block; }
.tg-pal {
    max-width: 520px; margin: 0 auto;
    background: var(--bg-1, #0a1a1c);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.tg-pal-input {
    width: 100%; padding: 16px 18px;
    background: transparent; border: none; outline: none;
    color: var(--ink, #eef5ef); font: inherit; font-size: 1.05rem;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.1));
}
.tg-pal-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.tg-pal-item {
    display: flex; align-items: baseline; gap: 10px; width: 100%;
    padding: 10px 12px; border: none; border-radius: 10px;
    background: transparent; color: var(--ink, #eef5ef);
    font: inherit; text-align: left; cursor: pointer;
}
.tg-pal-item.sel { background: rgba(255, 122, 26, 0.14); }
.tg-pal-kind {
    flex: 0 0 auto; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--muted, #9ab5a8);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    border-radius: 6px; padding: 1px 6px;
}
.tg-pal-name { font-weight: 600; }
.tg-pal-meta { color: var(--muted, #9ab5a8); font-size: 0.85rem; margin-left: auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%; }
.tg-pal-none { padding: 18px; color: var(--muted, #9ab5a8); font-size: 0.92rem; }
.tg-pal-hint {
    padding: 8px 16px; border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08));
    color: var(--muted, #9ab5a8); font-size: 0.75rem;
}
body.pal-open { overflow: hidden; }

/* ===== Goat moments ===== */
.topbar-mascot.goat-sprint .topbar-goat { animation: goat-sprint 0.35s ease-in-out 4; }
.topbar-mascot.goat-sprint .topbar-dust { animation: goat-dust 1.4s ease-out 1; }
.topbar-mascot.goat-party .topbar-goat { animation: goat-hop 0.4s cubic-bezier(.3,1.6,.5,1) 4; }
@keyframes goat-sprint {
    0%, 100% { transform: translateX(0) rotate(0); }
    50% { transform: translateX(5px) rotate(6deg); }
}
@keyframes goat-dust {
    0% { opacity: 0; transform: translateX(0) scale(0.8); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateX(-10px) scale(1.3); }
}
@keyframes goat-hop {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-7px) rotate(-6deg); }
}

/* ===== Auth (Sign in with Google — auth.js) ===== */
.tg-auth { position: relative; display: inline-flex; align-items: center; }
.tg-auth-btn {
    font: inherit; font-size: 0.88rem; font-weight: 600;
    color: var(--ink, #eef5ef);
    background: var(--glass, rgba(255, 255, 255, 0.045));
    border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    border-radius: 999px; padding: 7px 16px; cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tg-auth-btn:hover { border-color: var(--moss, #9ae600); box-shadow: 0 0 14px rgba(154, 230, 0, 0.15); }
.tg-auth-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font: inherit; font-size: 0.88rem; font-weight: 600;
    color: var(--ink, #eef5ef);
    background: var(--glass, rgba(255, 255, 255, 0.045));
    border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    border-radius: 999px; padding: 4px 14px 4px 5px; cursor: pointer;
}
.tg-auth-avatar { width: 26px; height: 26px; border-radius: 50%; display: block; }
.tg-auth-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 3000;
    min-width: 220px;
    background: var(--bg-1, #0a1a1c);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    border-radius: 14px; padding: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.tg-auth-menu[hidden] { display: none; }
.tg-auth-who { padding: 4px 6px 10px; font-weight: 600; color: var(--ink, #eef5ef); }
.tg-auth-who small { display: block; font-weight: 400; color: var(--muted, #9ab5a8); margin-top: 2px; }
.tg-auth-out {
    width: 100%; text-align: left; font: inherit; font-size: 0.9rem;
    color: var(--ink, #eef5ef); background: transparent;
    border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    border-radius: 10px; padding: 9px 12px; cursor: pointer;
}
.tg-auth-out:hover { border-color: var(--coral, #ff5d73); color: var(--coral, #ff5d73); }
.tg-auth-head { font-weight: 700; padding: 4px 6px 10px; }
.tg-auth-google { display: flex; justify-content: center; padding: 4px 0 8px; min-height: 44px; }
.tg-auth-note { color: var(--muted, #9ab5a8); font-size: 0.8rem; margin: 4px 6px 2px; line-height: 1.45; }

@media (max-width: 860px) {
    /* Inside the hamburger panel the auth control becomes a full-width row,
       and its dropdown opens in flow (an absolute menu would clip). */
    .tg-auth { display: block; margin-top: 6px; }
    .tg-auth-btn, .tg-auth-chip { width: 100%; justify-content: center; display: inline-flex; min-height: 46px; }
    .tg-auth-menu { position: static; margin-top: 6px; width: 100%; box-shadow: none; }
}

/* ===== My plans (auth.js phase 2) ===== */
.tg-plans-head {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted, #9ab5a8); padding: 8px 6px 6px;
    border-top: 1px solid var(--line, rgba(255, 255, 255, 0.08)); margin-top: 4px;
}
.tg-plans-list { max-height: 260px; overflow-y: auto; margin-bottom: 8px; }
.tg-plans-empty { color: var(--muted, #9ab5a8); font-size: 0.85rem; padding: 6px; line-height: 1.45; }
.tg-plan-row { display: flex; align-items: stretch; gap: 4px; }
.tg-plan-open {
    flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px;
    text-align: left; font: inherit; color: var(--ink, #eef5ef);
    background: transparent; border: 1px solid transparent; border-radius: 10px;
    padding: 8px 10px; cursor: pointer;
}
.tg-plan-open:hover { background: rgba(154, 230, 0, 0.08); border-color: rgba(154, 230, 0, 0.3); }
.tg-plan-name { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-plan-meta { color: var(--muted, #9ab5a8); font-size: 0.78rem; }
.tg-plan-del {
    flex: 0 0 auto; width: 34px; font: inherit; font-size: 1rem;
    color: var(--muted, #9ab5a8); background: transparent;
    border: 1px solid transparent; border-radius: 10px; cursor: pointer;
}
.tg-plan-del:hover { color: var(--coral, #ff5d73); border-color: rgba(255, 93, 115, 0.4); }

/* "Save plan" beside Clear course (fuel/raceday, signed-in with a course) */
.tg-plan-save {
    font: inherit; font-size: 0.88rem; font-weight: 600;
    color: var(--moss, #9ae600);
    background: rgba(154, 230, 0, 0.08);
    border: 1px solid rgba(154, 230, 0, 0.35);
    border-radius: 999px; padding: 8px 16px; cursor: pointer; margin-right: 8px;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.tg-plan-save:hover { box-shadow: 0 0 16px rgba(154, 230, 0, 0.2); transform: translateY(-1px); }
.tg-plan-save[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tg-plan-save:hover { transform: none; } }

/* ===== Direction A: segmented tool switcher + search + settings ===== */
/* Desktop: the two tools read as one centered segmented control; settings
   (unit toggles) collapse behind a gear; search fronts the ⌘K palette. */
@media (min-width: 861px) {
    .topbar-tools { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
    .tool-switch {
        margin: 0 auto;
        display: inline-flex; gap: 2px;
        background: var(--glass, rgba(255, 255, 255, 0.045));
        border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
        border-radius: 999px; padding: 3px;
    }
    .tool-switch a { border-radius: 999px; white-space: nowrap; }
}
.nav-ico { margin-right: 7px; }
.nav-search, .nav-gear {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.95rem; cursor: pointer;
    color: var(--ink, #eef5ef);
    background: var(--glass, rgba(255, 255, 255, 0.045));
    border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    border-radius: 11px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nav-search:hover, .nav-gear:hover {
    border-color: var(--gold, #ffd23f);
    box-shadow: 0 0 12px rgba(255, 210, 63, 0.15);
}
.nav-search:focus-visible, .nav-gear:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.nav-settings { position: relative; flex: 0 0 auto; }
.nav-settings-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 3000;
    min-width: 260px;
    background: var(--bg-1, #0a1a1c);
    border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    border-radius: 14px; padding: 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column; gap: 10px;
}
.nav-settings-menu[hidden] { display: none; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.set-label { font-size: 0.88rem; font-weight: 600; }
.set-row .unit-toggle { margin: 0; }
/* Theme picker: five options — stack the row and let the pills wrap. */
.set-row-theme { flex-direction: column; align-items: stretch; gap: 8px; }
/* Five themes never fitted the 2-segment .unit-toggle pill: wrapping left a
   999px-rounded box with ragged rows and the active pill riding its curve.
   Own component — an even grid, cells of equal width, modest corners. */
/* minmax(0,1fr), not 1fr: plain 1fr floors at min-content, so the longest
   label ('Alpenglow') would widen its column and skew the grid. */
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
    background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px; padding: 5px;
    box-shadow: var(--well, inset 0 2px 6px rgba(0,0,0,0.5)); }
/* Odd one out spans the row, so the block stays symmetric instead of lopsided. */
.theme-grid button:last-child { grid-column: 1 / -1; }
.theme-grid button { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
    background: transparent; color: var(--muted, #8ea7a0); border: 1px solid transparent;
    cursor: pointer; font-family: inherit; font-weight: 700; font-size: 0.78rem;
    letter-spacing: 0.03em; padding: 7px 10px; border-radius: 10px;
    transition: background 0.15s, color 0.15s, border-color 0.15s; }
.theme-grid button:hover { color: var(--ink, #eaf4ee); background: rgba(255,255,255,0.05); }
.theme-grid button.active { color: var(--ink, #eaf4ee);
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
    border-color: rgba(255,255,255,0.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 8px rgba(0,0,0,0.45); }
.theme-grid button:focus-visible { outline: 2px solid var(--orange, #ff7a1a); outline-offset: 1px; }
/* Palette preview: the theme's ground with its two accents sitting on it. */
.theme-swatch { position: relative; flex: 0 0 auto; width: 22px; height: 16px; border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.18); overflow: hidden; display: block; }
.theme-swatch i { position: absolute; bottom: 3px; width: 6px; height: 6px; border-radius: 50%; }
.theme-swatch i:first-child { left: 3px; }
.theme-swatch i:last-child { right: 3px; }
.set-note { margin: 0; color: var(--muted, #9ab5a8); font-size: 0.76rem; }

@media (max-width: 860px) {
    /* In the hamburger panel: search becomes a full-width row; the gear hides
       and the settings rows show inline (an explicit display beats [hidden]). */
    .nav-search {
        width: 100%; height: auto; min-height: 46px;
        justify-content: flex-start; gap: 10px;
        border-radius: 11px; padding: 10px 14px;
        font-size: 1rem; font-weight: 600;
    }
    .nav-search::after { content: "Search courses & tools"; font-size: 1rem; }
    .nav-gear { display: none; }
    .nav-settings { width: 100%; }
    .nav-settings-menu, .nav-settings-menu[hidden] {
        display: flex; position: static; min-width: 0; width: 100%;
        box-shadow: none; padding: 10px 4px 2px; border: none; border-top: 1px solid var(--line);
        border-radius: 0; background: transparent;
    }
}

/* ===== Canonical topbar look (pairs with nav-template.js) =====
   The topbar markup is injected from ONE template on every page; these rules
   (loaded after each page's own stylesheet) make it render identically
   everywhere, whatever the page CSS defines for .topbar/.nav/.unit-toggle. */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap; padding: 18px clamp(16px, 4vw, 40px); max-width: 1180px; margin: 0 auto; }
.topbar .wordmark { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.4rem;
    letter-spacing: 0.02em; color: var(--ink, #eaf4ee); text-decoration: none; }
.topbar .grad { background: linear-gradient(100deg, var(--orange, #ff7a1a), var(--gold, #ffd23f) 45%, var(--moss, #9ae600));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.topbar .nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topbar .nav a { color: var(--muted, #8ea7a0); text-decoration: none; font-weight: 600; font-size: 0.92rem;
    padding: 8px 14px; border-radius: 999px; transition: color 0.2s ease, background 0.2s ease; }
.topbar .nav a:hover { color: var(--ink, #eaf4ee); background: var(--glass, rgba(255,255,255,0.045)); }
/* Sleek CTA — tinted outline pill, not a solid ledge. Orange stays the identity
   (text + border tint); the fill only warms on hover. Same quiet language as the
   rail actions and the feedback link. */
.topbar > .cta { color: var(--orange, #ff7a1a); text-decoration: none; font-weight: 600; font-size: 0.88rem;
    padding: 8px 16px; border-radius: 999px;
    background: rgba(255, 122, 26, 0.08);
    border: 1px solid rgba(255, 122, 26, 0.45);
    transition: background 0.15s ease, border-color 0.15s ease; white-space: nowrap; }
.topbar > .cta:hover { background: rgba(255, 122, 26, 0.16); border-color: var(--orange, #ff7a1a); }

/* App-shell pages (Race Day's split layout, the Course Creator): the body is a
   flex column, which shrink-wraps the topbar to its content — the wordmark ends
   up bunched against the nav pills in a floating centered cluster. Stretch it
   full-width so space-between lays it out like the landing page: wordmark hard
   left, pills centered, controls right. */
body.split-page > .topbar,
body.app-shell > .topbar { align-self: stretch; width: auto; max-width: none;
    margin-left: 0; margin-right: 0;   /* the shared .topbar's `margin: 0 auto` absorbs the stretch */
    padding-left: clamp(16px, 2vw, 30px); padding-right: clamp(16px, 2vw, 30px); }
/* Unit toggles — inset track + raised neutral key (one look sitewide). */
.unit-toggle { display: inline-flex; gap: 4px; background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.09); border-radius: 999px; padding: 4px;
    box-shadow: var(--well, inset 0 2px 6px rgba(0,0,0,0.5)); }
.unit-toggle button { background: transparent; color: var(--muted, #8ea7a0); border: none; cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em;
    padding: 7px 16px; border-radius: 999px; transition: all 0.15s; }
.unit-toggle button.active { color: var(--ink, #eaf4ee);
    background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 3px 8px rgba(0,0,0,0.45); }
@media (max-width: 860px) {
    .topbar > .cta { display: none; }  /* the burger menu handles mobile nav */
}

/* ===== "About you" inside the settings menu (Race Day, data-athlete) ===== */
.nav-settings-menu { max-height: min(76vh, 640px); overflow-y: auto; }
.set-sec { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line, rgba(255,255,255,0.1));
    font-size: 0.88rem; font-weight: 700; }
.set-sec small { display: block; font-weight: 400; font-size: 0.72rem;
    color: var(--muted, #8ea7a0); margin-top: 1px; }
.set-field { display: flex; flex-direction: column; gap: 6px; }
.set-field .field-label { font-size: 0.8rem; font-weight: 600; color: var(--muted, #8ea7a0); }
.set-field .field-label em { font-style: normal; color: var(--muted, #8ea7a0); }
.set-field select, .set-field input[type="number"] {
    width: 100%; background: rgba(0,0,0,0.3); color: var(--ink, #eaf4ee);
    border: 1px solid var(--line, rgba(255,255,255,0.1)); border-radius: 10px;
    padding: 8px 10px; font-family: inherit; font-size: 0.9rem;
    box-shadow: var(--well, inset 0 2px 6px rgba(0,0,0,0.5)); color-scheme: dark;
}
.set-field select:focus, .set-field input:focus { outline: none; border-color: var(--teal, #19c3b1); }

/* ===== Tips (pairs with tg-tips.js, injected sitewide by nav-template.js) ===== */
.tg-info { display: inline-grid; place-items: center; width: 16px; height: 16px;
    padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28);
    background: rgba(255,255,255,0.06); color: var(--muted, #8ea7a0);
    font: 700 0.62rem/1 ui-monospace, "SF Mono", Menlo, monospace; cursor: help;
    vertical-align: -2px; flex: 0 0 auto;
    transition: color 0.15s, border-color 0.15s, background 0.15s; }
.tg-info:hover, .tg-info:focus-visible { color: #0b1a15; background: var(--teal, #19c3b1);
    border-color: var(--teal, #19c3b1); outline: none; }
/* Touch screens: 16px is un-tappable — grow the target (KRI-109). */
@media (pointer: coarse) {
    .tg-info { width: 24px; height: 24px; font-size: 0.72rem; }
}
#tg-tip { position: fixed; z-index: 9999; max-width: 260px; background: #10231e;
    border: 1px solid rgba(25,195,177,0.45); color: var(--ink, #eaf4ee);
    font-size: 0.78rem; line-height: 1.5; padding: 9px 12px; border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 34px rgba(0,0,0,0.6);
    opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
#tg-tip.show { opacity: 1; }
#tg-tip::before { content: ""; position: absolute; top: 100%; left: var(--arrow-x, 50%);
    transform: translateX(-50%); border: 6px solid transparent;
    border-top-color: rgba(25,195,177,0.45); }
#tg-tip.below::before { top: auto; bottom: 100%; border-top-color: transparent;
    border-bottom-color: rgba(25,195,177,0.45); }
#tg-pop { position: fixed; z-index: 9999; width: min(280px, calc(100vw - 24px));
    background: #0e211c; border: 1px solid rgba(25,195,177,0.4); border-radius: 14px;
    padding: 14px 32px 14px 16px; box-shadow: 0 18px 44px rgba(0,0,0,0.6);
    font-size: 0.8rem; color: var(--muted, #8ea7a0); line-height: 1.55;
    opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
#tg-pop.show { opacity: 1; pointer-events: auto; }
#tg-pop b { color: var(--ink, #eaf4ee); display: block; margin-bottom: 4px; }
#tg-pop .tg-pop-x { position: absolute; top: 8px; right: 10px; background: none; border: none;
    color: var(--muted, #8ea7a0); cursor: pointer; font-size: 0.9rem; padding: 2px; }
@media (prefers-reduced-motion: reduce) { #tg-tip, #tg-pop { transition: none; } }

/* Feedback line at the bottom of the settings menu (nav-template.js). */
.set-feedback { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
    font-size: 0.85rem; font-weight: 600; color: var(--teal); text-decoration: none; }
.set-feedback:hover { text-decoration: underline; }

/* ===== Dashboard link in the account chip menu (auth.js) ===== */
.tg-auth-dash { display: block; font-size: 0.9rem; font-weight: 600;
    color: var(--teal, #19c3b1); text-decoration: none;
    border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
    border-radius: 10px; padding: 9px 12px; margin: 0 0 4px; }
.tg-auth-dash:hover { border-color: var(--teal, #19c3b1); background: rgba(25, 195, 177, 0.08); }

/* ===== Site footer (ONE template — filled by nav-template.js) =====
   The page shells only carry <footer class="foot"></footer>; content and
   styling both live with the nav template so every page matches. */
footer.foot { text-align: left; max-width: 1180px; margin: 0 auto; }
.foot-grid { display: grid; grid-template-columns: repeat(var(--foot-cols, 3), 1fr); gap: 28px;
    padding: 30px 8px 22px; border-top: 1px solid var(--line, rgba(255, 255, 255, 0.1)); }
.foot-col h4 { margin: 0 0 10px; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink, #eef5ef); }
.foot-link { display: inline-block; color: var(--teal, #19c3b1); text-decoration: none;
    font-weight: 600; font-size: 0.92rem; }
.foot-link:hover { text-decoration: underline; }
.foot-note { margin: 8px 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--muted, #9ab5a8); }
/* Flat like every other primary verb — orange label + outline, no solid fill. */
.foot-donate { display: inline-flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: 0.92rem; text-decoration: none;
    color: var(--orange, #ff7a1a);
    background: rgba(255, 122, 26, 0.08);
    border: 1px solid rgba(255, 122, 26, 0.45);
    border-radius: 999px; padding: 9px 18px;
    transition: background 0.13s ease, border-color 0.13s ease; }
.foot-donate:hover { background: rgba(255, 122, 26, 0.16); border-color: var(--orange, #ff7a1a); }
.foot-social { display: flex; gap: 10px; }
.foot-soc { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    color: var(--muted, #9ab5a8); background: var(--glass, rgba(255, 255, 255, 0.045));
    border: 1px solid var(--line, rgba(255, 255, 255, 0.1)); transition: color 0.15s, border-color 0.15s, transform 0.15s; }
.foot-soc:hover { color: var(--ink, #eef5ef); border-color: var(--teal, #19c3b1); transform: translateY(-2px); }
.foot-credits { text-align: center; color: var(--muted, #9ab5a8); font-size: 0.8rem;
    padding: 14px 8px 6px; border-top: 1px solid var(--line, rgba(255, 255, 255, 0.06)); }
.foot-credits p { margin: 0; }
@media (max-width: 720px) {
    .foot-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ===== Brand mascot as an inline icon =====
   TrailGoat never uses the generic goat emoji — it renders differently on every
   OS and reads as clip-art. This is the drawn mascot (goat-pin.png, the small
   transparent cut — goat.png is the 400 KB hero illustration, hero use only).
   Sized in em so it scales with whatever slot it sits in. */
.tg-goat {
    width: 1.35em; height: 1.35em; object-fit: contain;
    display: inline-block; vertical-align: -0.32em; flex-shrink: 0;
}

/* Footer legal links (About · Privacy) — sit between the grid and credits. */
.foot-legal { display: flex; justify-content: center; align-items: center; gap: 10px;
    margin-top: 18px; }
.foot-legal a { color: var(--muted); font-size: 12.5px; text-decoration: none; }
.foot-legal a:hover { color: var(--orange); }
.foot-legal span { color: var(--muted); opacity: 0.5; font-size: 12px; }