/* =====================================================================
   PACEY — OVERLAYS (everything outside the pages)
   ---------------------------------------------------------------------
   The pinboard treatment for anything that renders outside #pacey-content:
   the loading overlay, the Account/Settings panel, the coach chat, the
   modals and popups (metric, edit-goal, plan prefs, workout sheet), the
   auth and onboarding cards, the tooltips, and the shared paper classes
   those use.

   Because these sit outside #pacey-content they don't inherit the board's
   token remap, so each surface re-points the --pacey-* tokens it needs.
   ===================================================================== */

/* ---------------------------------------------------------------------
   BASE STYLES — moved out of pacey.css so this file owns the overlays
   end to end. These come before the theme rules below on purpose:
   the base must keep losing to the scoped theme, exactly as it did
   when it lived in pacey.css.
   --------------------------------------------------------------------- */

/* ========== LOGIN MODAL ========== */
.pacey-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(29, 53, 87, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Sit above the sticky demo banner (z-index: 100) so the modal's
       blur overlay covers the banner when the login dialog is open */
    z-index: 200;
    padding: var(--pacey-space-lg);
}

.pacey-modal-overlay[hidden] { display: none; }

/* ---- Modal enter / exit -----------------------------------------------
   Every modal in the app is shown and hidden by toggling the `hidden`
   attribute, which is `display: none` — and a transition cannot start from
   `display: none` unless it is told to. Two things fix that here:

   `allow-discrete` lets `display` take part in the transition, so the switch
   to `none` is deferred to the end and the fade-out is actually seen rather
   than the modal vanishing mid-fade. `@starting-style` supplies the state to
   fade in from, because an element that has just appeared has no previous
   style to come from.

   Between them the nine modals animate with no JavaScript at all, and any
   modal added later inherits it for free. The three overlays that already
   animate — the chat popup, the workout sheet and the settings popup — keep
   their own scripts, because their motion is shape-specific: one grows out of
   the FAB it belongs to, two slide up as sheets.

   Declaration order matters here. `transition-behavior` is written as its own
   declaration *after* the shorthand, because the shorthand resets it: putting
   it first, or folding `allow-discrete` into the shorthand, makes a browser
   that doesn't understand the value throw away the whole transition. Written
   this way, older browsers keep the fade and merely miss the deferred display,
   so the modal still opens and closes exactly as it does today. */
.pacey-modal-overlay {
    /* Exit state — the overlay fades back down to here, and `display` is held
       open until that fade finishes. */
    opacity: 0;
    transition: opacity 0.22s ease, display 0.22s;
    transition-behavior: allow-discrete;
}

.pacey-modal-overlay:not([hidden]) { opacity: 1; }

@starting-style {
    .pacey-modal-overlay:not([hidden]) { opacity: 0; }
}

/* The card rises a little and settles, rather than only fading with the
   backdrop. Only `transform` is animated, so a card's own colour transitions
   have to be restated: a transition shorthand replaces the whole list rather
   than adding to it, and the metric popup card relies on its own pair for
   theme switching. */
.pacey-modal-overlay > * {
    transform: translateY(0.5rem) scale(0.97);
    transition:
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.pacey-modal-overlay:not([hidden]) > * { transform: none; }

@starting-style {
    .pacey-modal-overlay:not([hidden]) > * { transform: translateY(0.5rem) scale(0.97); }
}

/* Reduced motion: the fade carries no vestibular risk, so it stays; the
   movement does not, so the card simply appears with the backdrop. */
@media (prefers-reduced-motion: reduce) {
    .pacey-modal-overlay > * { transition: none; }
}

.pacey-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--pacey-muted);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: var(--pacey-radius-sm);
    transition: color var(--pacey-transition), background var(--pacey-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pacey-modal-close:hover { color: var(--pacey-navy); background: var(--pacey-light); }

/* ========== METRIC DETAIL POPUP ========== */
/* Popup card for metric explanations with gauge bar and color-coded zones */
.pacey-metric-popup-card {
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    box-shadow: var(--pacey-shadow-md);
    padding: clamp(1.5rem, 3vw, 2rem);
    width: min(100%, 28rem);
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Popup header — icon + title */
.pacey-metric-popup-header {
    display: flex;
    align-items: center;
    gap: var(--pacey-space-sm);
    margin-bottom: 0.75rem;
}

.pacey-metric-popup-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--pacey-blue);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pacey-metric-popup-icon svg { width: 100%; height: 100%; }

.pacey-metric-popup-title {
    font-weight: 700;
    font-size: var(--pacey-text-subheading);
    color: var(--pacey-navy);
    margin: 0;
}

/* Current value display with zone badge */
.pacey-metric-popup-value-row {
    display: flex;
    align-items: center;
    gap: var(--pacey-space-sm);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.pacey-metric-popup-value {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-display);
    color: var(--pacey-navy);
    line-height: 1;
}

.pacey-metric-popup-unit {
    font-size: var(--pacey-text-label);
    color: var(--pacey-muted);
}

.pacey-metric-popup-zone {
    font-size: var(--pacey-text-caption);
    font-weight: 600;
    color: var(--pacey-btn-primary-text);
    padding: 0.2rem 0.5rem;
    border-radius: var(--pacey-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Gauge section — bar with zone segments and legend */
.pacey-gauge-section {
    margin-bottom: 1rem;
}

/* Gauge bar — relative container for zone segments and value marker */
.pacey-gauge-bar {
    position: relative;
    height: 0.75rem;
    border-radius: 0.375rem;
    overflow: hidden;
    background: var(--pacey-light);
    margin-bottom: 0.35rem;
}

/* Each zone segment is absolutely positioned within the gauge bar */
.pacey-gauge-segment {
    position: absolute;
    top: 0;
    height: 100%;
    opacity: 0.75;
}

/* Current value marker — vertical line on the gauge */
.pacey-gauge-marker {
    position: absolute;
    top: -0.25rem;
    bottom: -0.25rem;
    width: 0.1875rem;
    background: var(--pacey-navy);
    border-radius: 0.09375rem;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: 0 0 0 0.125rem var(--pacey-surface);
}

/* Gauge scale labels — min and max values */
.pacey-gauge-scale {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.pacey-gauge-scale-min,
.pacey-gauge-scale-max {
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
}

/* Zone legend — color dots with labels */
.pacey-gauge-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.pacey-gauge-legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

/* Highlight the active zone in the legend */
.pacey-gauge-legend-item--active {
    opacity: 1;
    font-weight: 600;
}

.pacey-gauge-legend-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.pacey-gauge-legend-text {
    font-size: var(--pacey-text-caption);
    color: var(--pacey-text);
}

/* Textual explanation below the gauge */
.pacey-metric-popup-explanation {
    font-size: var(--pacey-text-body);
    line-height: 1.55;
    color: var(--pacey-text);
    margin: 0;
}

/* ========== SCORING GUIDE MODAL ========== */
/* Tier list inside the scoring guide — each row pairs a bold score
   range with a plain-language description of what that score means */
.pacey-score-modal-card { width: min(100%, 32rem); }

.pacey-score-tier-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.pacey-score-tier {
    display: flex;
    align-items: baseline;
    gap: var(--pacey-space-md);
    font-size: var(--pacey-text-body);
    color: var(--pacey-text);
    line-height: 1.4;
}

.pacey-score-tier-range {
    font-weight: 700;
    font-size: var(--pacey-text-label);
    color: var(--pacey-blue);
    flex-shrink: 0;
    min-width: 2.75rem;
}

/* ========== AUTH / ONBOARDING CARDS ========== */
.pacey-auth-card,
.pacey-onboard-card {
    background: var(--pacey-surface);
    border-radius: var(--pacey-radius);
    box-shadow: var(--pacey-shadow-md);
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
    width: min(100%, 30rem);
    border: 0.0625rem solid var(--pacey-border);
    margin: clamp(1rem, 3vw, 2rem);
    position: relative;
}

.pacey-onboard-card { width: min(100%, 35rem); }

/* Eyebrow */
.pacey-eyebrow {
    display: inline-block;
    font-weight: 600;
    font-size: var(--pacey-text-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pacey-blue);
    background: var(--pacey-light);
    padding: 0.25em 0.75em;
    border-radius: 62.5rem;
    margin-bottom: 0.75rem;
}

/* Auth header */
.pacey-auth-header,
.pacey-onboard-header {
    text-align: center;
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.pacey-auth-title,
.pacey-onboard-title {
    font-weight: 700;
    font-size: var(--pacey-text-display);
    color: var(--pacey-navy);
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.pacey-auth-subtitle,
.pacey-onboard-subtitle {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-body);
    color: var(--pacey-muted);
    line-height: 1.6;
    margin: 0;
}

/* Onboarding back link — only rendered when there is a dashboard behind the
   screen (no-goal mode or an active goal being changed); a first-run account
   never sees it. */
.pacey-onboard-back {
    margin-bottom: var(--pacey-space-md);
    padding-left: 0;
}

/* "Run without a goal" under the onboarding form — a real choice, not an
   abandoned form, so it sits as its own quiet row rather than inline with
   the submit. */
.pacey-onboard-nogoal {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--pacey-space-lg);
    text-align: center;
}

.pacey-onboard-nogoal-note {
    margin: 0;
    /* Explicit body face — the note sits inside the paper form, which does
       not inherit it the way the fields do. */
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-label);
    color: var(--pacey-muted);
}

/* The opt-out lives beside the save in the edit-goal modal, and under the
   goal row in the settings panel — same quiet ghost treatment in both. */
.pacey-edit-goal-nogoal { align-self: flex-start; }

.pacey-settings-nogoal {
    margin-top: var(--pacey-space-sm);
    align-self: center;
}

/* A failed opt-out save is reported inline beside the control that ran it —
   the previous mode is kept, so only the message changes. */
.pacey-onboard-nogoal-error,
.pacey-edit-goal-nogoal-error,
.pacey-settings-nogoal-error,
.pacey-goal-reminder-nogoal-error {
    margin: 0.25rem 0 0;
    font-size: var(--pacey-text-label);
    color: var(--pacey-accent-red);
}

/* ========== SETTINGS PANEL ========== */
/* Presentation is defined by the media queries at the end of this file:
   an anchored popover above the sidebar gear on desktop, and a bottom
   sheet on mobile. This base only pins the stacking context. */
.pacey-settings-popup {
    position: fixed;
    z-index: 190;
}

.pacey-settings-popup[hidden] { display: none; }

.pacey-settings-popup-card {
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    box-shadow: 0 0.5rem 2rem rgba(29, 53, 87, 0.15), 0 0.125rem 0.5rem rgba(29, 53, 87, 0.08);
    width: 20rem;
    max-width: calc(100vw - 2rem);
    overflow: hidden;
}

.pacey-settings-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 0.0625rem solid var(--pacey-border);
}

.pacey-settings-popup-title {
    font-weight: 700;
    font-size: var(--pacey-text-body);
    color: var(--pacey-navy);
    margin: 0;
}

.pacey-settings-popup-close {
    background: none;
    border: none;
    color: var(--pacey-muted);
    cursor: pointer;
    padding: var(--pacey-space-xs);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.pacey-settings-popup-close:hover { color: var(--pacey-navy); }

/* Edit race goal popup — modal for changing the race goal after onboarding.
   Reuses the same form field styles (.pacey-field, .pacey-input, etc.) as the
   onboarding screen so the look is consistent. Wider than the settings popup
   to accommodate the form fields comfortably. */
.pacey-edit-goal-card {
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    box-shadow: 0 0.5rem 2rem rgba(29, 53, 87, 0.15), 0 0.125rem 0.5rem rgba(29, 53, 87, 0.08);
    width: min(100%, 32rem);
    /* The card is a flex item of .pacey-modal-overlay, and a flex item's
       automatic min-width is its min-content size — which for the date
       field is the engine's large intrinsic input width (WebKit's is much
       bigger than Chrome's). That min-content could beat the width above
       and push the card, and the date input with it, past the modal's
       padding. min-width:0 lets the card honour its width in every engine. */
    min-width: 0;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    position: relative; /* anchor for the absolute-positioned close button */
}

.pacey-edit-goal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 0.0625rem solid var(--pacey-border);
}

.pacey-edit-goal-title {
    font-weight: 700;
    font-size: var(--pacey-text-body);
    color: var(--pacey-navy);
    margin: 0;
}

.pacey-edit-goal-form {
    padding: var(--pacey-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-md);
}

/* ---- Race goal reminder popup ---- */
/* Shown when a returning user logs in and has a persisted race goal.
   Uses the same modal overlay pattern as the edit-goal popup but with
   a simpler card body — just a summary of the saved goal and three
   action buttons (keep / edit / new). */
.pacey-goal-reminder-card {
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    box-shadow: 0 0.5rem 2rem rgba(29, 53, 87, 0.15), 0 0.125rem 0.5rem rgba(29, 53, 87, 0.08);
    width: min(100%, 28rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    position: relative;
}

.pacey-goal-reminder-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 0.0625rem solid var(--pacey-border);
}

.pacey-goal-reminder-title {
    font-weight: 700;
    font-size: var(--pacey-text-body);
    color: var(--pacey-navy);
    margin: 0;
}

.pacey-goal-reminder-body {
    padding: var(--pacey-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-md);
}

.pacey-goal-reminder-intro {
    font-size: var(--pacey-text-body);
    color: var(--pacey-text);
    margin: 0;
}

/* Summary card showing the saved race goal details — race name, distance,
   time target, race date, weekly mileage. Uses a tinted background to
   visually distinguish it from the surrounding text. */
.pacey-goal-reminder-summary {
    background: var(--pacey-light);
    border-radius: var(--pacey-radius-sm);
    padding: var(--pacey-space-md);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pacey-goal-reminder-summary-row {
    display: flex;
    justify-content: space-between;
    gap: var(--pacey-space-sm);
    font-size: var(--pacey-text-label);
}

.pacey-goal-reminder-summary-label {
    color: var(--pacey-muted);
    font-weight: 500;
}

.pacey-goal-reminder-summary-value {
    color: var(--pacey-text);
    font-weight: 600;
    text-align: right;
}

.pacey-goal-reminder-question {
    font-size: var(--pacey-text-body);
    color: var(--pacey-text);
    margin: 0;
}

.pacey-goal-reminder-actions {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-sm);
    padding: 0 var(--pacey-space-lg) var(--pacey-space-lg);
}

/* On wider screens, the edit + new buttons sit side by side while the
   primary "Keep" button stays full-width above them. */
@media (min-width: 30rem) {
    .pacey-goal-reminder-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .pacey-goal-reminder-actions .pacey-btn:first-child {
        width: 100%;
    }
    .pacey-goal-reminder-actions .pacey-btn:nth-child(2),
    .pacey-goal-reminder-actions .pacey-btn:nth-child(3) {
        flex: 1;
    }
}

.pacey-settings-popup-body {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
    gap: 0.6rem;
}

/* Profile section inside the settings popup — shown only on mobile where
   the sidebar (which normally holds the profile) is hidden. Contains the
   avatar, display name, race goal, and edit-goal button. */
.pacey-settings-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pacey-space-sm);
    padding-bottom: 0.75rem;
    border-bottom: 0.0625rem solid var(--pacey-border);
    margin-bottom: 0.25rem;
    /* Anchor for the relocated mobile theme toggle, which is absolutely
       positioned at the top-right corner of this container. */
    position: relative;
}

/* Mobile theme toggle relocated into the settings profile — overrides the
   old floating fixed positioning so it sits at the top-right corner of
   the profile container instead of floating over the page. */
.pacey-settings-profile .pacey-theme-toggle-mobile {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

.pacey-settings-profile-name {
    font-weight: 700;
    font-size: var(--pacey-text-subheading);
    color: var(--pacey-navy);
}

.pacey-settings-profile-goal-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.pacey-settings-profile-goal {
    font-size: var(--pacey-text-label);
    color: var(--pacey-blue);
    font-weight: 500;
}

.pacey-settings-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pacey-space-md);
}

.pacey-settings-field-label {
    font-size: var(--pacey-text-label);
    color: var(--pacey-muted);
    flex-shrink: 0;
    min-width: 4rem;
}

.pacey-settings-field-value {
    font-size: var(--pacey-text-label);
    color: var(--pacey-navy);
    font-weight: 600;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pacey-settings-select {
    font-family: 'Raleway', sans-serif;
    font-size: var(--pacey-text-label);
    padding: 0.25rem 0.5rem;
    border: 0.0625rem solid var(--pacey-border);
    border-radius: 0.25rem;
    background: var(--pacey-light);
    color: var(--pacey-muted);
    cursor: not-allowed;
}

.pacey-settings-field-hint {
    display: block;
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
    margin-top: 0.15rem;
    width: 100%;
}

.pacey-settings-popup-footer {
    padding: 0.75rem 1rem;
    border-top: 0.0625rem solid var(--pacey-border);
}

/* Danger button — uses accent-red tokens so it adapts to dark mode.
   Light mode: soft red tint background with red text.
   Dark mode: darker red tint with the lighter red text token. */
.pacey-btn-danger {
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: var(--pacey-radius-sm);
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-label);
    cursor: pointer;
    background: color-mix(in srgb, var(--pacey-accent-red) 10%, transparent);
    color: var(--pacey-accent-red);
    transition: background 0.15s ease, color 0.15s ease;
}

.pacey-btn-danger:hover {
    background: color-mix(in srgb, var(--pacey-accent-red) 20%, transparent);
}

/* ========== FLOATING AI CHAT BUTTON + POPUP ========== */
/* Floating action button — bottom-right of the interface. On desktop it
   sits above the content with a fixed gap from the bottom edge. On mobile
   it floats above the bottom tab bar with extra clearance.
   Color scheme uses theme-aware variables so it adapts to light/dark mode.
   The popup expands from the button's position using a CSS transform
   animation rather than appearing as a separate overlay. */

.pacey-chat-fab {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 40%;
    /* Colour lives with the pinboard treatment further down this file — the
       note's background and ink are declared once there, not here. */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.25rem 0.75rem rgba(29, 53, 87, 0.15);
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, opacity 0.2s ease;
    /* Below the loading overlay (100) and modals (200) so the FAB never
       floats above blocking UI; above the tab bar (50) and content */
    z-index: 80;
}

.pacey-chat-fab:hover {
    color: var(--pacey-navy);
    box-shadow: 0 0.375rem 1rem rgba(29, 53, 87, 0.2);
}

.pacey-chat-fab:active { transform: scale(0.94); }

/* Hide the FAB when the chat popup is open — the popup expands from
   its position so the button is no longer needed */
.pacey-chat-fab.pacey-chat-fab--hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}

/* Chat popup — fixed-position card anchored at the bottom-right, expanding
   from the FAB's location. No full-screen overlay; instead the card sits
   near the button with a slight gap, creating the visual effect of the
   button growing into the chat interface. */
.pacey-chat-popup {
    position: fixed;
    right: 1.5rem;
    bottom: 1.7rem;
    z-index: 300;
    /* Start collapsed at the FAB's size/position, then expand */
    transform-origin: bottom right;
    transform: scale(0.1);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.pacey-chat-popup[hidden] { display: block; /* keep in DOM for transition */ }

/* Open state — expand to full size */
.pacey-chat-popup.pacey-chat-popup--open {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

.pacey-chat-popup-card {
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    /* border-radius: var(--pacey-radius); */
    border-radius: 1.7rem;
    box-shadow: 0 0.5rem 2rem rgba(29, 53, 87, 0.15), 0 0.125rem 0.5rem rgba(29, 53, 87, 0.08);
    width: min(100vw - 3rem, 24rem);
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    position: relative;
}

/* Dark mode popup card */
[data-theme="dark"] .pacey-chat-popup-card {
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4), 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
}

.pacey-chat-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 0.0625rem solid var(--pacey-border);
}

.pacey-chat-popup-title {
    font-weight: 700;
    font-size: var(--pacey-text-body);
    color: var(--pacey-navy);
    margin: 0;
}

.pacey-chat-popup-body {
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* "Coming soon" locked state */
.pacey-chat-coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--pacey-muted);
}

/* The placeholder icon sits quieter than the copy below it */
.pacey-chat-coming-soon svg { opacity: 0.4; margin-bottom: 1rem; }

.pacey-chat-coming-soon-title {
    font-weight: 700;
    font-size: var(--pacey-text-subheading);
    color: var(--pacey-navy);
    margin: 0 0 0.5rem 0;
}

.pacey-chat-coming-soon-text {
    font-size: var(--pacey-text-label);
    line-height: 1.55;
    color: var(--pacey-muted);
    margin: 0;
    max-width: 20rem;
}

/* Mobile: raise the FAB above the bottom tab bar so it doesn't overlap.
   Tab bar sits at bottom 1.5rem with height 3.5rem, so the FAB needs
   to clear that plus a comfortable gap. The popup also needs to sit
   higher to clear the tab bar. */
@media (max-width: 48rem) {
    .pacey-chat-fab {
        bottom: calc(5.5rem + env(safe-area-inset-bottom, 0));
    }
    .pacey-chat-popup {
        bottom: 5.5rem;
        right: 1.5rem;
    }
}

/* ========== PLAN PREFERENCES MODAL + CARD TWEAKS ========== */

.pacey-plan-edit-btn {
    margin-left: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--pacey-text-label);
    color: var(--pacey-blue);
    padding: 0.3rem 0.7rem;
    transition: background var(--pacey-transition), border-color var(--pacey-transition);
}

.pacey-plan-edit-btn:hover { background: var(--pacey-light); border-color: var(--pacey-blue); }

.pacey-plan-prefs-card { width: min(100%, 24rem); }

.pacey-plan-prefs-form {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-lg);
}

.pacey-distance-slider {
    width: 100%;
    accent-color: var(--pacey-blue);
}

.pacey-distance-slider-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
}

.pacey-plan-prefs-actions {
    display: flex;
    gap: var(--pacey-space-md);
    justify-content: flex-end;
}

.pacey-plan-prefs-actions .pacey-btn {
    width: auto;
    padding: 0.6rem 1.25rem;
}

/* Activity/workout cards: two lines — title/name on top, tag + meta below */
.pacey-cal-card {
    flex-direction: column;
    align-items: stretch;
}

.pacey-cal-card--rest {
    flex-direction: row;
    align-items: center;
}

/* Week separation — a bolder line between Mon-Sun blocks */
.pacey-cal-week-block {
    border-bottom: 0.125rem solid var(--pacey-border);
    /* margin-bottom: 0.9rem; */
    padding-bottom: 0.25rem;
}

.pacey-cal-week-block:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Week heading — names the block (Week 1, …), the training phase chip, and
   the Monday–Sunday date range, so the runner always knows where they are
   in the block without reading individual day rows. */
.pacey-cal-week-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
    padding: 0.7rem 0.1rem 0.4rem;
}

.pacey-cal-week-title {
    font-weight: 700;
    font-size: var(--pacey-text-body);
    color: var(--pacey-navy);
}

.pacey-cal-week-phase {
    font-size: var(--pacey-text-label);
    font-weight: 600;
    color: var(--pacey-blue);
    background: color-mix(in srgb, var(--pacey-blue) 12%, transparent);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}

.pacey-cal-week-range {
    margin-left: auto;
    font-size: var(--pacey-text-label);
    color: var(--pacey-muted);
}

/* Per-week Garmin send row — sits under each week block. Uses the primary
   (navy) action treatment so it reads as an action, not as another passive
   card surface, and is kept compact so the label stays short. The row
   disappears once every day in the week is synced or in the past; weeks
   beyond the two-week sync window keep a disabled button. */
.pacey-cal-week-send {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.45rem 0 0.25rem;
}

.pacey-cal-week-send-btn {
    /* .pacey-btn defaults to width:100% — override so the button hugs its
       short label instead of stretching across the whole week block. */
    width: auto;
    padding: 0.4rem 0.8rem;
    font-size: var(--pacey-text-label);
    border-radius: var(--pacey-radius-sm);
}

.pacey-cal-week-send .pacey-coach-schedule-status {
    padding: 0.3rem 0.6rem;
    font-size: var(--pacey-text-caption);
}

/* Date value — day number and month share one line */
.pacey-cal-date-value {
    display: inline-flex;
    align-items: center;
    gap: var(--pacey-space-xs);
}

/* ========== WORKOUT DETAIL — bottom sheet on mobile, modal on desktop ========== */
/* Base styles: bottom sheet that slides up from the bottom edge.
   A media query below switches to a centered modal on large screens. */

.pacey-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(29, 53, 87, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 250;
    transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

.pacey-sheet-overlay[hidden] { display: none; }

/* Open state — fade in the overlay and slide up the sheet */
.pacey-sheet-overlay--open {
    background: rgba(29, 53, 87, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pacey-workout-sheet {
    background: var(--pacey-surface);
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
    box-shadow: 0 -0.5rem 2rem rgba(29, 53, 87, 0.18);
    width: min(100%, 40rem);
    max-height: 85dvh;
    overflow-y: auto;
    padding: var(--pacey-space-xl);
    position: relative;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

/* Slide up when the overlay is open */
.pacey-sheet-overlay--open .pacey-workout-sheet {
    transform: translateY(0);
}

/* Desktop: switch from bottom sheet to a centered popup modal.
   The overlay centers vertically, the sheet gets full rounded corners,
   and the entrance animation changes from slide-up to scale-in. */
@media (min-width: 64rem) {
    .pacey-sheet-overlay {
        align-items: center;
    }

    .pacey-workout-sheet {
        border-radius: var(--pacey-radius);
        box-shadow: 0 0.5rem 2.5rem rgba(29, 53, 87, 0.25);
        width: min(90%, 32rem);
        max-height: 80dvh;
        transform: scale(0.9);
        opacity: 0;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
    }

    .pacey-sheet-overlay--open .pacey-workout-sheet {
        transform: scale(1);
        opacity: 1;
    }
}

.pacey-workout-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.pacey-sheet-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-right: 2.5rem;
}

.pacey-sheet-title {
    font-weight: 700;
    font-size: var(--pacey-text-heading);
    color: var(--pacey-navy);
    margin: 0;
    /* flex: 1; */
    /* width: min-content; */
}

.pacey-sheet-pace {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-subheading);
    color: var(--pacey-blue);
    white-space: nowrap;
}

.pacey-sheet-pace-unit {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
    margin-left: 0.15rem;
}

.pacey-sheet-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-label);
    color: var(--pacey-muted);
    padding-bottom: 0.4rem;
    border-bottom: 0.0625rem solid var(--pacey-border);
}

.pacey-sheet-meta-item strong {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    color: var(--pacey-navy);
}

.pacey-sheet-section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.pacey-sheet-section-title {
    font-weight: 700;
    font-size: var(--pacey-text-label);
    color: var(--pacey-navy);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pacey-sheet-insight {
    font-size: var(--pacey-text-body);
    line-height: 1.55;
    color: var(--pacey-text);
    background: var(--pacey-light);
    border-radius: var(--pacey-radius-sm);
    padding: 0.7rem 0.9rem;
    margin: 0;
}

/* Lazy insight states — shimmer placeholder while the on-demand text is
   written, muted error state when generation fails. */
.pacey-sheet-insight--loading {
    color: var(--pacey-muted);
}

.pacey-sheet-insight--error {
    color: var(--pacey-accent-red);
}

.pacey-sheet-steps {
    display: flex;
    flex-direction: column;
}

.pacey-sheet-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-label);
    color: var(--pacey-text);
    padding: 0.45rem 0;
    border-bottom: 0.0625rem dashed var(--pacey-border);
}

.pacey-sheet-step:last-child { border-bottom: none; }

.pacey-sheet-step-num {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-caption);
    color: var(--pacey-blue);
    background: var(--pacey-light);
    border-radius: 50%;
}

.pacey-sheet-step-type {
    font-weight: 600;
    color: var(--pacey-navy);
}

.pacey-sheet-step-detail {
    margin-left: auto;
    color: var(--pacey-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Per-step target pace — rendered as a separate element after the detail
   so there's a clear visual gap between time/distance and pace. Uses the
   blue accent to distinguish it from the muted detail text. */
.pacey-sheet-step-pace {
    margin-left: 0.75rem;
    color: var(--pacey-blue);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Description section — the short intent summary sent to Garmin as the
   workout description. Styled like the insight but without the background
   fill so it reads as a lighter, secondary block above the AI insight. */
.pacey-sheet-description {
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-body);
    line-height: 1.55;
    color: var(--pacey-muted);
    margin: 0;
}

.pacey-sheet-step--sub {
    padding-left: 2rem;
}

.pacey-sheet-step--sub .pacey-sheet-step-type {
    color: var(--pacey-muted);
    font-weight: 500;
}

.pacey-sheet-step--repeat {
    color: var(--pacey-blue);
    font-weight: 700;
}

.pacey-sheet-step--repeat .pacey-sheet-step-type,
.pacey-sheet-step--repeat .pacey-sheet-step-detail {
    color: var(--pacey-blue);
}

/* Clickable suggested workout card */
.pacey-cal-card[data-action="view"] { cursor: pointer; }
.pacey-cal-card[data-action="view"]:hover { border-color: var(--pacey-blue); }

/* ===========================================================================
   Reduced motion — respect the user's OS-level preference.
   When prefers-reduced-motion is set, all animations and transitions are
   disabled so users with vestibular sensitivity or motion aversion get
   instant state changes instead of slides, fades, spins, and shimmer
   sweeps. This is a non-negotiable quality-floor requirement.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    /* Disable all transitions — state changes happen instantly */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Hide shimmer/skeleton sweep animations — show the base colour only.
       .pacey-radar-skeleton is deliberately absent: it is now only a
       positioning container for the loading label, so giving it a background
       would paint a solid block over the placeholder radar. */
    .pacey-shimmer-text,
    .pacey-skeleton,
    .pacey-skeleton-text,
    .pacey-skeleton-line,
    .pacey-coach-loading--active {
        animation: none !important;
        background: var(--pacey-light) !important;
    }

    /* Plan loading aura: hide the border sweep entirely */
    .pacey-plan-skeleton-glow { display: none !important; }

    /* Disable the radar pulse and pillar highlight pulse */
    .pacey-radar-skeleton { opacity: 0.3 !important; }
    .pacey-pillar-card--highlight { animation: none !important; box-shadow: none !important; }

    /* Disable the conic-gradient halo spin on coach loading */
    .pacey-coach-loading--active::before { animation: none !important; }

    /* Disable the spinner rotation */
    .pacey-btn-spinner { animation: none !important; }

    /* Disable the demo banner shrink/expand — snap to the target state */
    .pacey-demo-banner,
    .pacey-demo-banner-full,
    .pacey-demo-banner-slim {
        transition: none !important;
    }

    /* Disable the tab bar slide and chat popup spring */
    .pacey-tabbar,
    .pacey-chat-popup,
    .pacey-workout-sheet,
    .pacey-sheet-overlay {
        transition: none !important;
    }

    /* Disable the sidebar collapse animation */
    .pacey-sidebar,
    .pacey-dashboard-layout,
    .pacey-header-offset {
        transition: none !important;
    }

    /* Disable theme toggle icon transitions */
    .pacey-theme-icon-sun,
    .pacey-theme-icon-moon {
        transition: none !important;
    }
}

/* ---- Overlay ---- */
.pacey-overlay {
    position: fixed;
    inset: 0;
    /* Use the theme-aware background color with 85% opacity so the overlay
       blends with the page in both light and dark modes */
    background: color-mix(in srgb, var(--pacey-bg) 85%, transparent);
    backdrop-filter: blur(0.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.pacey-overlay[hidden] { display: none; }

.pacey-overlay-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pacey-space-lg);
}

/* Shimmer text — a reusable loading effect where a gradient sweep moves
   across transparent text, creating a glowing/pulsing shimmer. Used for
   all loading placeholders across the site (plan loading, radar skeleton,
   full-screen overlay, pillars skeleton, etc.).

   The text is made transparent via background-clip: text, then two
   background layers are stacked:
   1. A moving gradient sweep (the shimmer) — animated left to right
   2. A solid base color (the muted text color underneath)

   The sweep is a narrow band of the accent color that travels across,
   making the text appear to glow as it passes. In dark mode the sweep
   is white; in light mode it's the navy accent. */
.pacey-shimmer-text {
    --pacey-shimmer-spread: 36px;
    /* Base is the muted text tone; the sweep only shifts partway toward the
       body text colour, so it reads as a gentle shimmer across the words
       rather than a navy/white band glowing over them. Mixing against the
       text token means it follows the theme on its own. */
    --pacey-shimmer-base: var(--pacey-muted);
    --pacey-shimmer-sweep: color-mix(in srgb, var(--pacey-muted) 55%, var(--pacey-text));
    display: inline-block;
    background-image:
        linear-gradient(90deg,
            transparent calc(50% - var(--pacey-shimmer-spread)),
            var(--pacey-shimmer-sweep),
            transparent calc(50% + var(--pacey-shimmer-spread))),
        linear-gradient(var(--pacey-shimmer-base), var(--pacey-shimmer-base));
    background-size: 250% 100%, auto;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: pacey-shimmer-sweep 2.5s ease-in-out infinite;
}

@keyframes pacey-shimmer-sweep {
    0%   { background-position: 150% center, 0 center; }
    100% { background-position: -50% center, 0 center; }
}

.pacey-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 0.1875rem solid var(--pacey-border);
    border-top-color: var(--pacey-blue);
    border-radius: 50%;
    animation: pacey-spin 0.7s linear infinite;
}

/* --- Shared paper sheet + pushpin ------------------------------------ */
.pacey-settings-popup-card,
.pacey-chat-popup-card {
    position: relative;
    background-color: var(--pinboard-paper);
    background-image: var(--pinboard-paper-noise);
    background-size: 140px 140px;
    background-repeat: repeat;
    border: none;
    border-radius: 3px 12px 4px 14px / 14px 4px 12px 3px;
    box-shadow: var(--pinboard-shadow), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
    /* Pin the paper-context palette so descendants stay dark-on-light */
    --pacey-surface: var(--pinboard-paper);
    --pacey-text: var(--pinboard-ink);
    --pacey-navy: var(--pinboard-ink);
    --pacey-border: var(--pinboard-line);
    --pacey-muted: var(--pinboard-muted);
    --pacey-light: var(--pinboard-paper-2);
    --pacey-sky: var(--pinboard-note-blue);
    --pacey-blue: #2a5169;
    --pacey-accent-green: #2f6a3f;
    --pacey-accent-amber: #7a5810;
    --pacey-accent-red: #a83b3b;
    /* Run-type tags use the app's light-mode colours, matching the board */
    --pacey-run-easy: #43caca;
    --pacey-run-lsd: #5a70ca;
    --pacey-run-race-pace: #2f6fb0;
    --pacey-run-tempo: #8a6313;
    --pacey-run-speedwork: #f14040;
    --pacey-run-warmup: #e7d897;
    --pacey-run-cross-train: #8a8a8a;
    /* A primary button inside the panel sits on the (dark) remapped navy, so
       its label must stay white in both themes */
    --pacey-btn-primary-text: #ffffff;
    color: var(--pinboard-ink);
}

/* Pushpin holding each sheet to the board */
.pacey-settings-popup-card::before,
.pacey-chat-popup-card::before {
    content: "";
    position: absolute;
    top: 0.7rem;
    left: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: -0.4rem;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ff9b8f 0%, var(--pinboard-pin) 58%, #6f1f17 100%);
    box-shadow: 0 0.18rem 0.25rem rgba(0, 0, 0, 0.4), inset 0 -0.08rem 0.1rem rgba(0, 0, 0, 0.3);
    z-index: 4;
}

/* --- Headings, rules and close buttons -------------------------------- */
.pacey-settings-popup-title,
.pacey-chat-popup-title {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: 0;
    color: var(--pinboard-ink);
}
/* Extra top padding leaves room for the pin above the heading */
.pacey-settings-popup-header,
.pacey-chat-popup-header {
    padding-top: 1.15rem;
    border-bottom-color: var(--pinboard-line);
}
.pacey-settings-popup-footer { border-top-color: var(--pinboard-line); }
.pacey-settings-profile { border-bottom-color: var(--pinboard-line); }

.pacey-settings-popup-close,
.pacey-chat-popup-card .pacey-modal-close {
    color: var(--pinboard-muted);
    border-radius: 0.5rem;
}
.pacey-settings-popup-close:hover,
.pacey-chat-popup-card .pacey-modal-close:hover {
    color: var(--pinboard-ink);
    background: var(--pinboard-paper-2);
}

/* --- Fields: labels in the handwriting face, values in ink ------------ */
.pacey-settings-field-label { font-family: var(--font-fuzzy); color: var(--pinboard-muted); }
.pacey-settings-field-value { color: var(--pinboard-ink); }
.pacey-settings-field-hint { font-family: var(--font-fuzzy); color: var(--pinboard-muted); }
.pacey-settings-select {
    background: var(--pinboard-paper-2);
    color: var(--pinboard-ink);
    border-color: var(--pinboard-line);
    border-radius: 2px 7px 3px 8px / 8px 3px 7px 2px;
}
.pacey-settings-profile-name {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--pinboard-ink);
}
.pacey-settings-profile-goal { font-family: var(--font-fuzzy); color: #2a5169; }

/* Site section (the app's link back to terrancehah.com) */
.pacey-settings-site { border-top-color: var(--pinboard-line); }
.pacey-settings-site-links a { font-family: var(--font-fuzzy); color: #2a5169; }
.pacey-settings-site-socials img { border-radius: 5px; }

/* Destructive action stays clearly destructive, but sits on the paper */
.pacey-btn-danger { color: #a83b3b; background: rgba(168, 59, 59, 0.12); }
.pacey-btn-danger:hover { background: rgba(168, 59, 59, 0.2); }

/* --- Chat FAB — a small note pinned to the board.
   Cream in light mode, dark-brown cork at night: the note follows the board
   rather than being permanently dark. -------------------------------- */
.pacey-chat-fab {
    background-color: var(--pinboard-paper);
    color: #2b2620;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 3% 6% 2% 4% / 36% 32% 38% 30%;
    /* Nudge the icon down so the pin above it doesn't crowd the glyph */
    padding-top: 0.3rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 0.5rem 0.8rem rgba(0, 0, 0, 0.24);
    transform: rotate(-4deg);
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, color 0.18s ease-out, opacity 0.2s ease;
}
/* The pushpin holding the note to the board */
.pacey-chat-fab::before {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    margin-left: -0.25rem;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ff9b8f 0%, var(--pinboard-pin) 58%, #6f1f17 100%);
    box-shadow: 0 0.12rem 0.18rem rgba(0, 0, 0, 0.4);
    z-index: 2;
}
.pacey-chat-fab:hover {
    color: #1a1613;
    box-shadow: var(--pinboard-shadow-hover);
    transform: rotate(-1deg) translateY(-0.15rem);
}
.pacey-chat-fab:active { transform: rotate(-4deg) scale(0.94); }
/* Night board: the note turns dark-brown cork and the ink flips to cream. */
[data-theme="dark"] .pacey-chat-fab {
    background-color: #4a3728;
    color: #f1ede4;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 0.5rem 0.85rem rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .pacey-chat-fab:hover { color: #ffffff; }

/* --- Chat popup copy ------------------------------------------------- */
.pacey-chat-coming-soon { color: var(--pinboard-muted); }
.pacey-chat-coming-soon-title {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--pinboard-ink);
}
.pacey-chat-coming-soon-text {
    font-family: var(--font-fuzzy);
    font-size: 1rem;
    color: var(--pinboard-muted);
}

/* --- Reduced motion: no tilt/lift, keep the resting angle ------------- */
@media (prefers-reduced-motion: reduce) {
    .pacey-chat-fab:hover,
    .pacey-chat-fab:active { transform: rotate(-4deg); }
}

/* =====================================================================
   METRIC DETAIL MODAL — a light-blue post-it, matching the vitals card
   Scoped to #pacey-metric-popup so the scoring/dimension modals (which
   reuse .pacey-metric-popup-card) keep their own look.
   ===================================================================== */
#pacey-metric-popup .pacey-metric-popup-card {
    position: relative;
    background-color: var(--pinboard-note-blue);
    background-image: none;
    border: none;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14), 0 0.5rem 0.75rem rgba(0, 0, 0, 0.22), inset 0 -1.6rem 1.6rem -1.6rem rgba(0, 0, 0, 0.12);
    /* Paper-context palette: the note stays light in both themes */
    --pacey-surface: var(--pinboard-paper);
    --pacey-text: var(--pinboard-ink);
    --pacey-navy: var(--pinboard-ink);
    --pacey-border: var(--pinboard-line);
    --pacey-muted: var(--pinboard-muted);
    --pacey-light: var(--pinboard-paper-2);
    --pacey-blue: #2a5169;
    --pacey-btn-primary-text: #ffffff;
    color: var(--pinboard-ink);
}
/* Pushpin, same treatment as the other pinned sheets */
#pacey-metric-popup .pacey-metric-popup-card::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    left: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: -0.4rem;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ff9b8f 0%, var(--pinboard-pin) 58%, #6f1f17 100%);
    box-shadow: 0 0.18rem 0.25rem rgba(0, 0, 0, 0.4), inset 0 -0.08rem 0.1rem rgba(0, 0, 0, 0.3);
    z-index: 4;
}
/* Heading + copy in the handwriting faces */
#pacey-metric-popup .pacey-metric-popup-header { margin-top: 0.35rem; }
#pacey-metric-popup .pacey-metric-popup-title {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0;
    color: var(--pinboard-ink);
}
#pacey-metric-popup .pacey-metric-popup-icon { color: #2a5169; }
/* The number follows the vitals card, which the pinboard theme puts in Fuzzy */
#pacey-metric-popup .pacey-metric-popup-value {
    font-family: var(--font-fuzzy);
    color: var(--pinboard-ink);
}
#pacey-metric-popup .pacey-metric-popup-unit { font-family: var(--font-fuzzy); color: var(--pinboard-muted); }
#pacey-metric-popup .pacey-metric-popup-zone {
    font-family: var(--font-fuzzy);
    border-radius: 999px;
    color: #ffffff;
}
#pacey-metric-popup .pacey-metric-popup-explanation {
    font-family: var(--font-fuzzy);
    font-size: 1rem;
    color: var(--pinboard-muted);
}

/* Gauge — a thin marker bar, echoing the thin bar under each vitals number */
#pacey-metric-popup .pacey-gauge-bar {
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
#pacey-metric-popup .pacey-gauge-segment { opacity: 0.9; }
#pacey-metric-popup .pacey-gauge-marker {
    top: -0.2rem;
    bottom: -0.2rem;
    width: 0.15rem;
    background: var(--pinboard-ink);
    box-shadow: 0 0 0 0.1rem var(--pinboard-note-blue);
}
#pacey-metric-popup .pacey-gauge-scale-min,
#pacey-metric-popup .pacey-gauge-scale-max { font-family: var(--font-fuzzy); color: var(--pinboard-muted); }
#pacey-metric-popup .pacey-gauge-legend-item { font-family: var(--font-fuzzy); color: var(--pinboard-muted); }
#pacey-metric-popup .pacey-gauge-legend-item--active { color: var(--pinboard-ink); }
#pacey-metric-popup .pacey-gauge-legend-text { font-family: var(--font-fuzzy); color: inherit; }
#pacey-metric-popup .pacey-gauge-legend-dot { border-radius: 3px; }
#pacey-metric-popup .pacey-modal-close { color: var(--pinboard-muted); border-radius: 0.5rem; }
#pacey-metric-popup .pacey-modal-close:hover { color: var(--pinboard-ink); background: rgba(255, 255, 255, 0.45); }

/* =====================================================================
   INFO MODALS — "How scores work" + the six-areas explainer
   These are explanatory sheets rather than metric cards, so they get the
   cream paper treatment with a blue pushpin (the metric modal above keeps
   its blue post-it). Scoped per-modal so nothing else shifts.
   ===================================================================== */
#pacey-score-modal .pacey-metric-popup-card,
#pacey-dimension-modal .pacey-metric-popup-card {
    position: relative;
    background-color: var(--pinboard-paper);
    background-image: var(--pinboard-paper-noise);
    background-size: 140px 140px;
    background-repeat: repeat;
    border: none;
    border-radius: 3px 12px 4px 14px / 14px 4px 12px 3px;
    box-shadow: var(--pinboard-shadow), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
    --pacey-surface: var(--pinboard-paper);
    --pacey-text: var(--pinboard-ink);
    --pacey-navy: var(--pinboard-ink);
    --pacey-border: var(--pinboard-line);
    --pacey-muted: var(--pinboard-muted);
    --pacey-light: var(--pinboard-paper-2);
    --pacey-blue: #2a5169;
    --pacey-btn-primary-text: #ffffff;
    color: var(--pinboard-ink);
}
#pacey-score-modal .pacey-metric-popup-card::before,
#pacey-dimension-modal .pacey-metric-popup-card::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    left: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: -0.4rem;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #a7c9e6 0%, var(--pinboard-pin-blue) 58%, #17365a 100%);
    box-shadow: 0 0.18rem 0.25rem rgba(0, 0, 0, 0.4), inset 0 -0.08rem 0.1rem rgba(0, 0, 0, 0.3);
    z-index: 4;
}
#pacey-score-modal .pacey-metric-popup-header,
#pacey-dimension-modal .pacey-metric-popup-header { margin-top: 0.35rem; }
#pacey-score-modal .pacey-metric-popup-title,
#pacey-dimension-modal .pacey-metric-popup-title {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0;
    color: var(--pinboard-ink);
}
#pacey-score-modal .pacey-metric-popup-icon,
#pacey-dimension-modal .pacey-metric-popup-icon { color: #2a5169; }
#pacey-score-modal .pacey-metric-popup-explanation,
#pacey-dimension-modal .pacey-metric-popup-explanation {
    font-family: var(--font-fuzzy);
    font-size: 1rem;
    color: var(--pinboard-muted);
}
#pacey-score-modal .pacey-modal-close,
#pacey-dimension-modal .pacey-modal-close { color: var(--pinboard-muted); border-radius: 0.5rem; }
#pacey-score-modal .pacey-modal-close:hover,
#pacey-dimension-modal .pacey-modal-close:hover { color: var(--pinboard-ink); background: var(--pinboard-paper-2); }

/* Score tiers — the range in Caveat, the description in Fuzzy */
#pacey-score-modal .pacey-score-tier { font-family: var(--font-fuzzy); }
#pacey-score-modal .pacey-score-tier-range {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--pinboard-ink);
}
#pacey-score-modal .pacey-score-tier-desc { font-family: var(--font-fuzzy); color: var(--pinboard-muted); }

/* Six-areas explainer rows */
#pacey-dimension-modal .pacey-dimension-explainer-name {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--pinboard-ink);
}
#pacey-dimension-modal .pacey-dimension-explainer-desc { font-family: var(--font-fuzzy); color: var(--pinboard-muted); }
/* Drop the coloured dot beside each area name — the label carries it */
#pacey-dimension-modal .pacey-dimension-explainer-dot { display: none; }

/* =====================================================================
   REMAINING MODALS + SHEETS — same pinned-paper language so the whole app
   is consistent. Form modals also get a paper input fill via --pacey-bg.
   ===================================================================== */
#pacey-plan-prefs-modal .pacey-metric-popup-card,
#pacey-edit-goal-popup .pacey-edit-goal-card,
#pacey-goal-reminder-popup .pacey-goal-reminder-card,
#pacey-workout-sheet .pacey-workout-sheet,
#pacey-login-modal .pacey-auth-card,
#pacey-readiness-review-modal .pacey-readiness-review-card,
#pacey-past-races-modal .pacey-past-races-card,
#pacey-goal-change-confirm .pacey-goal-change-card {
    position: relative;
    background-color: var(--pinboard-paper);
    background-image: var(--pinboard-paper-noise);
    background-size: 140px 140px;
    background-repeat: repeat;
    border: none;
    border-radius: 3px 12px 4px 14px / 14px 4px 12px 3px;
    box-shadow: var(--pinboard-shadow), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
    /* Paper-context palette (the sheet stays light in both themes) */
    --pacey-surface: var(--pinboard-paper);
    --pacey-bg: var(--pinboard-paper-2);
    --pacey-text: var(--pinboard-ink);
    --pacey-navy: var(--pinboard-ink);
    --pacey-border: var(--pinboard-line);
    --pacey-muted: var(--pinboard-muted);
    --pacey-light: var(--pinboard-paper-2);
    --pacey-sky: var(--pinboard-note-blue);
    --pacey-blue: #2a5169;
    --pacey-accent-green: #2f6a3f;
    --pacey-accent-amber: #7a5810;
    --pacey-accent-red: #a83b3b;
    /* Run-type tags use the app's light-mode colours, matching the board */
    --pacey-run-easy: #43caca;
    --pacey-run-lsd: #5a70ca;
    --pacey-run-race-pace: #2f6fb0;
    --pacey-run-tempo: #8a6313;
    --pacey-run-speedwork: #f14040;
    --pacey-run-warmup: #e7d897;
    --pacey-run-cross-train: #8a8a8a;
    --pacey-btn-primary-text: #ffffff;
    color: var(--pinboard-ink);
}
/* Pushpin on each sheet */
#pacey-plan-prefs-modal .pacey-metric-popup-card::before,
#pacey-edit-goal-popup .pacey-edit-goal-card::before,
#pacey-goal-reminder-popup .pacey-goal-reminder-card::before,
#pacey-workout-sheet .pacey-workout-sheet::before,
#pacey-login-modal .pacey-auth-card::before,
#pacey-readiness-review-modal .pacey-readiness-review-card::before,
#pacey-past-races-modal .pacey-past-races-card::before,
#pacey-goal-change-confirm .pacey-goal-change-card::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    left: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: -0.4rem;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ff9b8f 0%, var(--pinboard-pin) 58%, #6f1f17 100%);
    box-shadow: 0 0.18rem 0.25rem rgba(0, 0, 0, 0.4), inset 0 -0.08rem 0.1rem rgba(0, 0, 0, 0.3);
    z-index: 4;
}
/* Headings on those sheets use the handwriting faces */
#pacey-edit-goal-popup .pacey-edit-goal-title,
#pacey-goal-reminder-popup .pacey-goal-reminder-title,
#pacey-plan-prefs-modal .pacey-metric-popup-title,
#pacey-login-modal .pacey-auth-title,
#pacey-readiness-review-modal .pacey-readiness-review-title,
#pacey-past-races-modal .pacey-past-races-title,
#pacey-goal-change-confirm .pacey-goal-change-title {
    font-family: var(--font-caveat);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--pinboard-ink);
}
#pacey-plan-prefs-modal .pacey-metric-popup-header { margin-top: 0.35rem; }
#pacey-plan-prefs-modal .pacey-metric-popup-icon { color: #2a5169; }
/* Labels and copy in Fuzzy */
#pacey-plan-prefs-modal .pacey-plan-pref-label,
#pacey-edit-goal-popup .pacey-label,
#pacey-login-modal .pacey-label,
#pacey-goal-reminder-popup .pacey-goal-reminder-body,
#pacey-workout-sheet .pacey-sheet-description { font-family: var(--font-fuzzy); }
/* Workout sheet heading + section labels */
#pacey-workout-sheet .pacey-sheet-title {
    font-family: var(--font-caveat);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--pinboard-ink);
}
#pacey-workout-sheet .pacey-sheet-section-title { font-family: var(--font-fuzzy); color: var(--pinboard-muted); }
/* Close buttons */
#pacey-plan-prefs-modal .pacey-modal-close,
#pacey-edit-goal-popup .pacey-modal-close,
#pacey-goal-reminder-popup .pacey-modal-close,
#pacey-workout-sheet .pacey-modal-close,
#pacey-readiness-review-modal .pacey-modal-close,
#pacey-past-races-modal .pacey-modal-close,
#pacey-goal-change-confirm .pacey-modal-close { color: var(--pinboard-muted); border-radius: 0.5rem; }
#pacey-plan-prefs-modal .pacey-modal-close:hover,
#pacey-edit-goal-popup .pacey-modal-close:hover,
#pacey-goal-reminder-popup .pacey-modal-close:hover,
#pacey-workout-sheet .pacey-modal-close:hover,
#pacey-readiness-review-modal .pacey-modal-close:hover,
#pacey-past-races-modal .pacey-modal-close:hover,
#pacey-goal-change-confirm .pacey-modal-close:hover { color: var(--pinboard-ink); background: var(--pinboard-paper-2); }

/* =====================================================================
   READINESS REVIEW MODAL — the six-area analysis as it stood before the
   race, kept reachable after the recap takes its place on the pages. The
   radar, the Big Picture verdict and the six dimension cards are laid on
   the same paper sheet language as the other modals; the body scrolls and
   the sheet is capped so nothing pushes past the viewport.
   ===================================================================== */
/* Opened from a past race, the review must sit above the past-races list — both
   overlays share the base z-index and the list comes later in the DOM. Closing
   it returns to the list underneath. */
#pacey-readiness-review-modal { z-index: 210; }

.pacey-readiness-review-card {
    width: min(100%, 72rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: var(--pacey-space-md);
}

.pacey-readiness-review-header {
    margin-top: 0.35rem;
    /* Clear the close button pinned to the top-right of the sheet. */
    padding-right: 2rem;
}

.pacey-readiness-review-title { margin: 0; font-size: 1.5rem; }

.pacey-readiness-review-sub {
    margin: 0.25rem 0 0;
    font-family: var(--font-fuzzy);
    font-size: 1rem;
    color: var(--pinboard-muted);
}

.pacey-readiness-review-body {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-md);
    margin-top: var(--pacey-space-md);
}

/* The close button is pinned inside the scrolling sheet: sticky keeps it
   at the top-right for the whole scroll while the header scrolls away,
   and the negative bottom margin takes back the space it would otherwise
   push the header down by. The paper chip keeps it readable over the
   text sliding beneath. */
#pacey-readiness-review-modal .pacey-modal-close {
    position: sticky;
    top: 0.75rem;
    z-index: 5;
    width: fit-content;
    margin-left: auto;
    margin-bottom: -2.2rem;
    background: var(--pinboard-paper-2);
}

/* The radar sits on the sheet rather than a card of its own, centred and
   capped so a wide modal never produces an oversized polygon. */
.pacey-readiness-review-radar {
    align-self: center;
    width: min(100%, 26rem);
}

.pacey-readiness-review-empty {
    margin: 0;
    font-family: var(--font-fuzzy);
    font-size: 1rem;
    color: var(--pinboard-muted);
    text-align: center;
}

/* The board's handwriting is assigned under #pacey-content, which this modal
   sits outside of — so its cards would otherwise fall back to the app's
   Raleway. These mirror the board rules for the review's contents only. */
#pacey-readiness-review-modal .pacey-overall-insight-verdict,
#pacey-readiness-review-modal .pacey-overall-insight-takeaway-name,
#pacey-readiness-review-modal .pacey-overall-insight-focus-label,
#pacey-readiness-review-modal .pacey-pillar-name {
    font-family: var(--font-caveat);
    font-weight: 700;
    letter-spacing: 0;
}
#pacey-readiness-review-modal .pacey-overall-insight-verdict { font-size: 1.3rem; }
#pacey-readiness-review-modal .pacey-overall-insight-takeaway-name { font-size: 1.5rem; }
#pacey-readiness-review-modal .pacey-overall-insight-focus-label { font-size: 1.15rem; }
#pacey-readiness-review-modal .pacey-pillar-name { font-size: 1.3rem; }

/* The coloured dot beside the pillar name is dropped here too — the same
   rule the board applies under #pacey-content, which this modal sits
   outside of. The score's colour already carries the status. */
#pacey-readiness-review-modal .pacey-pillar-dot { display: none; }

/* Coach copy and labels — Fuzzy Bubbles, matching the readiness page */
#pacey-readiness-review-modal .pacey-overall-insight-summary,
#pacey-readiness-review-modal .pacey-overall-insight-takeaway-note,
#pacey-readiness-review-modal .pacey-overall-insight-focus-text,
#pacey-readiness-review-modal .pacey-pillar-summary,
#pacey-readiness-review-modal .pacey-pillar-note {
    font-family: var(--font-fuzzy);
    font-size: 1.02rem;
    line-height: 1.5;
}
#pacey-readiness-review-modal .pacey-pillar-section-label { font-family: var(--font-fuzzy); font-weight: 700; }

/* Strengths / Gaps labels keep the board's dark-on-light colours: the sheet
   stays light in both themes, so the app's dark-mode Strengths rule (light
   green, written for a dark card) would otherwise land on the light paper and
   wash out. Values mirror the board, so the label reads the same in the modal
   and on the readiness page. */
#pacey-readiness-review-modal .pacey-pillar-section-label--strengths {
    background: rgba(47, 106, 63, 0.26);
    color: #114d20;
}
#pacey-readiness-review-modal .pacey-pillar-section-label--gaps {
    background: rgba(235, 189, 71, 0.55);
    color: #5f410b;
}
html[data-theme="dark"] #pacey-readiness-review-modal .pacey-pillar-section-label--strengths {
    background: rgba(47, 106, 63, 0.18);
    color: #275a34;
}
html[data-theme="dark"] #pacey-readiness-review-modal .pacey-pillar-section-label--gaps {
    background: rgba(225, 178, 61, 0.82);
    color: #5f410b;
}

/* Scores read as handwritten coaching marks, the "/10" quieter beside them */
#pacey-readiness-review-modal .pacey-pillar-score,
#pacey-readiness-review-modal .pacey-overall-insight-score,
#pacey-readiness-review-modal .pacey-pillar-score-max,
#pacey-readiness-review-modal .pacey-overall-insight-score-max {
    font-family: var(--font-fuzzy);
    font-weight: 400;
}
#pacey-readiness-review-modal .pacey-pillar-score { font-size: 1.9rem; line-height: 1; }
#pacey-readiness-review-modal .pacey-overall-insight-score { font-size: 1.7rem; }
#pacey-readiness-review-modal .pacey-pillar-score-max,
#pacey-readiness-review-modal .pacey-overall-insight-score-max {
    font-size: 0.95rem;
    color: var(--pinboard-muted);
}

/* =====================================================================
   PAST RACES — the entrance and its list. The button sits at the right of
   a section title row (the Readiness/Recap page, and the overview's goal
   section), quiet by design so it never competes with the current goal;
   the modal carries the archived races.
   ===================================================================== */
.pacey-past-races-btn {
    /* A plain, low-key control — no card and no fill, just a quiet way back.
       The auto margin parks it at the right end of the title row. */
    margin-left: auto;
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-label);
    font-weight: 400;
    color: var(--pacey-muted);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
    cursor: pointer;
}
/* The readiness "last updated" stamp owns the right alignment while it is
   showing, so the button tucks in beside it rather than splitting the gap. */
.pacey-readiness-updated:not([hidden]) ~ .pacey-past-races-btn { margin-left: 0; }

.pacey-past-races-btn:hover { color: var(--pacey-navy); }
.pacey-past-races-btn:focus-visible {
    outline: 0.125rem solid var(--pacey-blue);
    outline-offset: 0.125rem;
    border-radius: 0.25rem;
}

.pacey-past-races-card {
    width: min(100%, 40rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: var(--pacey-space-md);
}

.pacey-past-races-header { margin-top: 0.35rem; padding-right: 2rem; }
.pacey-past-races-title { margin: 0; font-size: 1.5rem; }

.pacey-past-races-sub {
    margin: 0.25rem 0 0;
    font-family: var(--font-fuzzy);
    font-size: 1rem;
    color: var(--pinboard-muted);
}

.pacey-past-races-body {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-md);
    margin-top: var(--pacey-space-md);
}

/* Each race is a post-it on the sheet — the same materials as the board's
   pillar cards, so the list belongs to the app rather than reading as a plain
   dialog list. Alternating notes and a slight tilt keep them from looking
   stamped. */
.pacey-past-race {
    position: relative;
    background-color: var(--pinboard-note-blue);
    background-image: none;
    border-radius: 1px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.14), 0 0.5rem 0.75rem rgba(0, 0, 0, 0.22), inset 0 -1.6rem 1.6rem -1.6rem rgba(0, 0, 0, 0.12);
    padding: 1.05rem 0.95rem 0.95rem;
    --tilt: -0.5deg;
    transform: rotate(var(--tilt));
}
.pacey-past-race:nth-child(2n) { --tilt: 0.6deg; background-color: var(--pinboard-note-blue-2); }
.pacey-past-race:nth-child(3n) { --tilt: -0.2deg; }

/* Pushpin, matching the board's post-its. Never swallows a click meant for the
   head button underneath it. */
.pacey-past-race::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 50%;
    width: 0.7rem;
    height: 0.7rem;
    margin-left: -0.35rem;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ff9b8f 0%, var(--pinboard-pin) 58%, #6f1f17 100%);
    box-shadow: 0 0.18rem 0.25rem rgba(0, 0, 0, 0.4), inset 0 -0.08rem 0.1rem rgba(0, 0, 0, 0.3);
    pointer-events: none;
    z-index: 2;
}

/* The whole head is the toggle, so the row is one big hit target. */
.pacey-past-race-head {
    display: flex;
    align-items: baseline;
    gap: var(--pacey-space-sm);
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.pacey-past-race-name {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--pinboard-ink);
}

.pacey-past-race-meta {
    /* Pushes the meta and the chevron to the right, leaving the name left. */
    margin-left: auto;
    font-family: var(--font-fuzzy);
    font-size: 0.95rem;
    color: var(--pinboard-muted);
    white-space: nowrap;
}

.pacey-past-race-chevron {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    align-self: center;
    color: var(--pinboard-muted);
    transition: transform 0.28s ease;
}
.pacey-past-race.is-open .pacey-past-race-chevron { transform: rotate(180deg); }

/* Expand/collapse — grid-template-rows 0fr→1fr animates to the content's own
   height, so nothing has to measure the panel in JS. The inner clips the
   content while collapsed, which is also what hides the panel's top gap. */
.pacey-past-race-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.pacey-past-race.is-open .pacey-past-race-panel { grid-template-rows: 1fr; }

.pacey-past-race-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* min-height:0 lets the 0fr row fold shut — a grid child otherwise keeps
       a min-content floor. overflow:hidden clips the content while closed. */
    min-height: 0;
    overflow: hidden;
}
/* A margin rather than padding, so the gap is inside the clipped content and
   disappears cleanly when the panel is shut. */
.pacey-past-race-panel-inner > :first-child { margin-top: 0.5rem; }

.pacey-past-race-recap {
    margin: 0;
    font-family: var(--font-fuzzy);
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--pinboard-ink);
}

/* The entry's actions sit together on one compact row — "View recap" points
   the readiness page at the archive, "Review readiness" opens its snapshot. */
.pacey-past-race-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pacey-space-sm);
}
.pacey-past-race-review { align-self: flex-start; }

/* The review button follows the app's button treatment — the same hand-cut
   corners and soft shadow every board button carries (see #pacey-content
   .pacey-btn in pinboard-theme.css) — and takes the note's own blue rather than
   the paper fill, which reads as a brown chip on a blue note. Hover darkens the
   button's own colour, like the primary, instead of switching hue. */
#pacey-past-races-modal .pacey-past-race-review {
    background: var(--pacey-blue);
    color: var(--pacey-btn-primary-text);
    border: none;
    border-radius: 2px 7px 3px 8px / 8px 3px 7px 2px;
    box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.22);
    transition: transform 0.18s ease-out, background 0.18s ease-out, box-shadow 0.18s ease-out;
}
#pacey-past-races-modal .pacey-past-race-review:hover {
    background: color-mix(in srgb, var(--pacey-blue) 85%, var(--pacey-navy));
}

/* Secondary buttons darken their own fill on hover instead of washing to the
   note blue. Both the board (#pacey-content) and the paper-context modals remap
   --pacey-sky to the note colour, which turned the app's "slightly stronger
   tint" into a hue switch — the chip appeared to change material. Token-based,
   so it holds in both themes. */
#pacey-content .pacey-btn-secondary:hover,
#pacey-plan-prefs-modal .pacey-btn-secondary:hover,
#pacey-edit-goal-popup .pacey-btn-secondary:hover,
#pacey-goal-reminder-popup .pacey-btn-secondary:hover,
#pacey-workout-sheet .pacey-btn-secondary:hover,
#pacey-login-modal .pacey-btn-secondary:hover,
#pacey-goal-change-confirm .pacey-btn-secondary:hover {
    background: color-mix(in srgb, var(--pacey-light) 88%, var(--pacey-navy));
}

@media (prefers-reduced-motion: reduce) {
    /* !important matches the shared shell's precedence — the preference wins
       regardless of sheet order or specificity. */
    .pacey-past-race-panel,
    .pacey-past-race-chevron { transition: none !important; }
}

.pacey-past-races-empty {
    margin: 0;
    font-family: var(--font-fuzzy);
    font-size: 1rem;
    color: var(--pinboard-muted);
    text-align: center;
}

/* =====================================================================
   GOAL CHANGE CONFIRMATION — shown only when a goal change would discard a
   plan still in progress. Paper sheet, like the other modals.
   ===================================================================== */
.pacey-goal-change-card {
    width: min(100%, 30rem);
    padding: var(--pacey-space-md);
}

.pacey-goal-change-header { margin-top: 0.35rem; padding-right: 2rem; }
.pacey-goal-change-title { margin: 0; font-size: 1.5rem; }

.pacey-goal-change-body {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: var(--pacey-space-md);
}

.pacey-goal-change-lead,
.pacey-goal-change-note {
    margin: 0;
    font-family: var(--font-fuzzy);
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--pinboard-ink);
}
/* The supporting notes read quieter than the lead sentence. */
.pacey-goal-change-note { color: var(--pinboard-muted); }

.pacey-goal-change-actions {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-sm);
    margin-top: var(--pacey-space-md);
}
@media (min-width: 30rem) {
    .pacey-goal-change-actions { flex-direction: row; }
    .pacey-goal-change-actions .pacey-btn { flex: 1; }
}

/* =====================================================================
   ONBOARDING / AUTH FINISHING PASS
   ===================================================================== */

/* Brand lockup on the login card: Pacey mark + wordmark, no eyebrow pill */
.pacey-auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}
.pacey-auth-brand .pacey-card-logo { margin-bottom: 0; width: 44px; height: 44px; }
.pacey-auth-brand-name {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 2rem;
    line-height: 1;
    color: var(--pinboard-ink);
}

/* iOS zooms the whole page when a focused field is under 16px. Pin every
   form control to 1rem so tapping email/password/number never zooms. */
.pacey-input,
.pacey-select,
.pacey-duration-input { font-size: 1rem; }

/* Onboarding cards join the pinned-paper family */
#pacey-onboarding-screen .pacey-onboard-card,
#pacey-onboarding-fitness-screen .pacey-onboard-card,
#pacey-onboarding-plan-screen .pacey-onboard-card {
    position: relative;
    background-color: var(--pinboard-paper);
    background-image: var(--pinboard-paper-noise);
    background-size: 140px 140px;
    background-repeat: repeat;
    border: none;
    border-radius: 3px 12px 4px 14px / 14px 4px 12px 3px;
    box-shadow: var(--pinboard-shadow), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
    --pacey-surface: var(--pinboard-paper);
    --pacey-bg: var(--pinboard-paper-2);
    --pacey-text: var(--pinboard-ink);
    --pacey-navy: var(--pinboard-ink);
    --pacey-border: var(--pinboard-line);
    --pacey-muted: var(--pinboard-muted);
    --pacey-light: var(--pinboard-paper-2);
    --pacey-blue: #2a5169;
    --pacey-btn-primary-text: #ffffff;
    color: var(--pinboard-ink);
}
/* Onboarding headings + copy in the handwriting faces */
.pacey-onboard-title { font-family: var(--font-caveat); font-weight: 700; letter-spacing: 0; }
.pacey-onboard-card .pacey-onboard-subtitle,
.pacey-onboard-card .pacey-onboard-desc,
.pacey-onboard-card .pacey-label,
.pacey-onboard-card .pacey-hint,
.pacey-onboard-card .pacey-field-error,
.pacey-onboard-card .pacey-eyebrow { font-family: var(--font-fuzzy); }

/* Larger titles on the welcome-back and edit-goal cards */
#pacey-goal-reminder-popup .pacey-goal-reminder-title,
#pacey-edit-goal-popup .pacey-edit-goal-title { font-size: 1.5rem; }
#pacey-goal-reminder-popup .pacey-goal-reminder-intro,
#pacey-goal-reminder-popup .pacey-goal-reminder-summary-row,
#pacey-goal-reminder-popup .pacey-goal-reminder-question { font-family: var(--font-fuzzy); }

/* Race goal modal: no internal vertical scroll, and a tighter rhythm so the
   form fits even a small phone viewport (down to ~667px) without one. */
#pacey-edit-goal-popup .pacey-edit-goal-card { max-height: none; overflow-y: visible; }
#pacey-edit-goal-popup .pacey-edit-goal-form { padding: 0.7rem; gap: 0.45rem; }
/* Extra top padding keeps the pushpin clear of the title */
#pacey-edit-goal-popup .pacey-edit-goal-header { padding: 1.05rem 0.8rem 0.55rem; }
#pacey-edit-goal-popup .pacey-input { padding: 0.5em 0.7em; }
#pacey-edit-goal-popup .pacey-label { line-height: 1.2; }

/* Two-factor step in the login modal. Sits under the code field and explains
   what to do with it, since the code arrives out-of-band from Garmin. */
.pacey-mfa-hint {
    margin: 0.4rem 0 0;
    font-family: var(--font-fuzzy);
    font-size: var(--pacey-text-label);
    line-height: 1.4;
    color: var(--pacey-muted);
}
#pacey-edit-goal-popup .pacey-btn { padding: 0.55rem 1rem; }

/* Live sentence under the race-result inputs */
.pacey-race-result-summary {
    margin: 0;
    padding: 0.7rem 0.85rem;
    background: var(--pinboard-note-blue);
    border-radius: 2px 8px 3px 9px / 9px 3px 8px 2px;
    font-family: var(--font-fuzzy);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--pinboard-ink);
}

/* =====================================================================
   TYPOGRAPHY FINISHING PASS
   The board speaks in two hands — Caveat for headings, Fuzzy Bubbles for
   everything else. These elements were still on the old Raleway/Lato stack
   and read as a different product beside the rest of the pinboard. The one
   deliberate exception stays the form controls (.pacey-input and friends):
   email, password and number fields keep a legible sans so typing is easy
   and iOS doesn't zoom the page when they take focus.
   ===================================================================== */

/* Metric card date caption */
#pacey-content .pacey-metrics-date { font-family: var(--font-fuzzy); }

/* Readiness "last updated" caption */
#pacey-content .pacey-readiness-updated { font-family: var(--font-fuzzy); }

/* "Show more" button label */
#pacey-content .pacey-show-more-btn { font-family: var(--font-fuzzy); }

/* Run-type pill. Fuzzy ships a single weight, so drop the synthetic bold
   rather than letting the browser fake it. */
#pacey-content .pacey-run-tag {
    font-family: var(--font-fuzzy);
    font-weight: 400;
}

/* Coach insight prose in the workout sheet. The sheet and the settings popup
   are siblings of #pacey-content (both live under .pacey-main), so they're
   scoped by their own id rather than the content wrapper. */
#pacey-workout-sheet .pacey-sheet-insight { font-family: var(--font-fuzzy); }

/* Settings panel — account values and the connect/disconnect button. The
   values are read, not typed, so the handwriting face applies here. */
#pacey-settings-popup .pacey-settings-field-value {
    font-family: var(--font-fuzzy);
    font-weight: 400;
}

#pacey-settings-popup #pacey-settings-logout-btn { font-family: var(--font-fuzzy); }

/* =====================================================================
   LOADING OVERLAY — a pinned paper sheet with a handwritten note
   Shown after login and on refresh, so it should read like the rest of
   the board rather than a generic blurred spinner.
   ===================================================================== */
.pacey-overlay {
    background: color-mix(in srgb, var(--pinboard-cork) 90%, transparent);
    backdrop-filter: blur(0.3rem);
    -webkit-backdrop-filter: blur(0.3rem);
}
.pacey-overlay-content {
    position: relative;
    background-color: var(--pinboard-paper);
    background-image: var(--pinboard-paper-noise);
    background-size: 140px 140px;
    background-repeat: repeat;
    border-radius: 3px 12px 4px 14px / 14px 4px 12px 3px;
    box-shadow: var(--pinboard-shadow), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
    padding: 1.5rem 1.15rem 1.25rem;
    gap: 0.4rem;
}
/* Pushpin holding the sheet */
.pacey-overlay-content::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    left: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: -0.4rem;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ff9b8f 0%, var(--pinboard-pin) 58%, #6f1f17 100%);
    box-shadow: 0 0.18rem 0.25rem rgba(0, 0, 0, 0.4);
    z-index: 2;
}
/* Hand-drawn loading phrase. The SVG is injected INLINE (not as an <img>) so
   WebKit runs its stroke animation; the note is paper in both themes, and the
   SVG carries its own fixed dark-ink stroke. */
.pacey-overlay-stroke {
    display: block;
    width: min(80vw, 24rem);
    margin: 0.55rem 0 0;
}
.pacey-overlay-stroke svg {
    display: block;
    width: 100%;
    height: auto;
}
/* Fallback if the SVG can't be fetched — the phrase as plain handwriting. */
.pacey-overlay-stroke-fallback {
    display: block;
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--pinboard-ink);
}
/* The overlay no longer uses the shimmer text, but the class is still used by
   other inline loading placeholders — keep the ink-toned override. */
.pacey-shimmer-text {
    /* On the paper sheets the shimmer shifts partway toward the ink rather
       than running a full-contrast band over the words. */
    --pacey-shimmer-base: var(--pinboard-muted);
    --pacey-shimmer-sweep: color-mix(in srgb, var(--pinboard-muted) 55%, var(--pinboard-ink));
}

/* =====================================================================
   CHART / CALENDAR TOOLTIPS — small paper notes
   The radar tooltip (overview + readiness) and the calendar day tooltip are
   DOM elements appended to <body>, so they sit outside #pacey-content and
   were still using the old white/navy surface. Give them the paper treatment
   and re-map the tokens so their text stays dark on the light note.
   ===================================================================== */
.pacey-radar-tooltip,
.pacey-chart-tooltip {
    background-color: var(--pinboard-paper);
    background-image: var(--pinboard-paper-noise);
    background-size: 140px 140px;
    background-repeat: repeat;
    border: none;
    border-radius: 2px 8px 3px 9px / 9px 3px 8px 2px;
    box-shadow: var(--pinboard-shadow);
    --pacey-surface: var(--pinboard-paper);
    --pacey-text: var(--pinboard-ink);
    --pacey-navy: var(--pinboard-ink);
    --pacey-muted: var(--pinboard-muted);
    --pacey-border: var(--pinboard-line);
    --pacey-blue: #2a5169;
    color: var(--pinboard-ink);
}
/* Radar tooltip — dimension name as a handwritten link, score beneath */
.pacey-radar-tooltip-link {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.2rem;
    color: #2a5169;
}
.pacey-radar-tooltip-link::after { color: #2a5169; opacity: 0.75; }
.pacey-radar-tooltip-link:hover { color: #1d3c50; }
.pacey-radar-tooltip-score { font-family: var(--font-fuzzy); color: var(--pinboard-ink); }
/* Calendar day tooltip */
.pacey-calendar-tooltip-date {
    /* Same title face as every other tooltip — the chart tooltips' titles use
       --pacey-chart-heading-font, which the pinboard theme maps to Fuzzy
       Bubbles. Caveat here made the calendar look like a different component.
       Fuzzy Bubbles only ships one weight, so no bold. */
    font-family: var(--font-fuzzy);
    font-weight: 400;
    color: var(--pinboard-ink);
}
.pacey-calendar-tooltip-run-name { font-family: var(--font-fuzzy); color: var(--pinboard-ink); }
.pacey-calendar-tooltip-run-meta { font-family: var(--font-fuzzy); color: var(--pinboard-muted); }

/* =====================================================================
   REFRESH SPINNER — shown at the top of the board while a refresh is
   running (tab re-tap) or while the page is pulled down (standalone).
   A rust arc on a faint track, on-brand with the sketched underline.
   ===================================================================== */
.pacey-refresh-spinner {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 0.85rem);
    left: 50%;
    width: 2.1rem;
    height: 2.1rem;
    margin-left: -1.05rem;
    border-radius: 50%;
    border: 0.2rem solid rgba(43, 38, 32, 0.16);
    border-top-color: #b6503a;
    border-right-color: #b6503a;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    pointer-events: none;
    z-index: 500;
    animation: pacey-refresh-spin 0.7s linear infinite;
}
.pacey-refresh-spinner--visible { opacity: 1; }
[data-theme="dark"] .pacey-refresh-spinner { border-color: rgba(241, 237, 228, 0.2); border-top-color: #e0895f; border-right-color: #e0895f; }
@keyframes pacey-refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .pacey-refresh-spinner { animation-duration: 1.4s; }
}

/* =====================================================================
   ADD TO HOME SCREEN MODAL — an instructional prompt that teaches the
   manual "Add to Home Screen" gesture. There is no programmatic install
   API (iOS never had one; Android only with a web app manifest), so this
   educates rather than installs. Surfaces the platform-specific steps —
   the iOS Share sheet vs the Android browser menu. Uses the same surface
   card treatment as the race-goal reminder.
   ===================================================================== */
.pacey-a2hs-card {
    position: relative;
    background-color: var(--pinboard-paper);
    background-image: var(--pinboard-paper-noise);
    background-size: 140px 140px;
    background-repeat: repeat;
    border: none;
    border-radius: 3px 12px 4px 14px / 14px 4px 12px 3px;
    box-shadow: var(--pinboard-shadow), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
    /* Pin the paper-context palette so descendants stay dark-on-light in
       both themes, exactly like the Settings / Chat sheets. */
    --pacey-surface: var(--pinboard-paper);
    --pacey-text: var(--pinboard-ink);
    --pacey-navy: var(--pinboard-ink);
    --pacey-border: var(--pinboard-line);
    --pacey-muted: var(--pinboard-muted);
    --pacey-light: var(--pinboard-paper-2);
    --pacey-sky: var(--pinboard-note-blue);
    --pacey-blue: #2a5169;
    --pacey-accent-green: #2f6a3f;
    --pacey-accent-amber: #7a5810;
    --pacey-accent-red: #a83b3b;
    /* Run-type tags use the app's light-mode colours, matching the board */
    --pacey-run-easy: #43caca;
    --pacey-run-lsd: #5a70ca;
    --pacey-run-race-pace: #2f6fb0;
    --pacey-run-tempo: #8a6313;
    --pacey-run-speedwork: #f14040;
    --pacey-run-warmup: #e7d897;
    --pacey-run-cross-train: #8a8a8a;
    --pacey-btn-primary-text: #ffffff;
    color: var(--pinboard-ink);
    width: min(100%, 26rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: 1.4rem 0 1.5rem;
}

/* Pushpin holding the sheet to the board */
.pacey-a2hs-card::before {
    content: "";
    position: absolute;
    top: 0.7rem;
    left: 50%;
    width: 0.8rem;
    height: 0.8rem;
    margin-left: -0.4rem;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ff9b8f 0%, var(--pinboard-pin) 58%, #6f1f17 100%);
    box-shadow: 0 0.18rem 0.25rem rgba(0, 0, 0, 0.4), inset 0 -0.08rem 0.1rem rgba(0, 0, 0, 0.3);
    z-index: 4;
}

.pacey-a2hs-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    padding: 0 1.5rem 0.9rem;
}

.pacey-a2hs-icon {
    border-radius: 22%;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
    margin-top: 0.35rem;
}

.pacey-a2hs-title {
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--pinboard-ink);
    margin: 0;
}

.pacey-a2hs-subtitle {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-label);
    line-height: 1.45;
    color: var(--pinboard-muted);
    margin: 0;
    max-width: 20rem;
}

/* Platform block — a heading chip plus the ordered steps. Hidden by default;
   JS reveals the visitor's platform (or both when it can't be detected). */
.pacey-a2hs-platform { padding: 0.5rem 1.5rem 0; }
.pacey-a2hs-platform[hidden] { display: none; }

.pacey-a2hs-platform-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-caveat);
    font-weight: 700;
    font-size: 1.05rem;
    color: #2a5169;
    margin-bottom: 0.45rem;
}
.pacey-a2hs-platform-label svg { color: #2a5169; }

.pacey-a2hs-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.pacey-a2hs-step {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

/* Action icon tile — shows the actual control to look for (Share glyph,
   browser menu, add, confirm) so the gesture is unmistakable. */
.pacey-a2hs-step-icon {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.55rem;
    background: var(--pinboard-paper-2);
    border: 0.0625rem solid var(--pinboard-line);
    color: #2a5169;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pacey-a2hs-step-text {
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-label);
    line-height: 1.4;
    color: var(--pinboard-ink);
}
.pacey-a2hs-step-text strong { font-weight: 700; }

/* In-app browser callout — a tinted note explaining that the option only
   exists in Safari / Chrome, not inside an in-app webview. */
.pacey-a2hs-note {
    margin: 0.9rem 1.5rem 0;
    padding: 0.7rem 0.85rem;
    background: var(--pinboard-note-yellow);
    border-radius: 2px 8px 3px 9px / 9px 3px 8px 2px;
    font-family: var(--font-fuzzy);
    font-weight: 400;
    font-size: var(--pacey-text-caption);
    line-height: 1.45;
    color: var(--pinboard-ink);
}
.pacey-a2hs-note[hidden] { display: none; }

.pacey-a2hs-actions {
    padding: 1.1rem 1.5rem 0;
    display: flex;
    flex-direction: column;
}

/* "Add to Home Screen" row inside the Account popup — the permanent entry
   point for the install instructions, so a dismissed modal never loses the
   guidance. Reads as a tappable field row on the paper sheet. */
.pacey-settings-install {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.7rem 0.75rem;
    background: var(--pinboard-paper-2);
    border: 0.0625rem solid var(--pinboard-line);
    border-radius: 2px 8px 3px 9px / 9px 3px 8px 2px;
    cursor: pointer;
    text-align: left;
    transition: background var(--pacey-transition);
}
.pacey-settings-install:hover { background: var(--pinboard-note-blue); }
.pacey-settings-install-icon { color: #2a5169; flex-shrink: 0; }
.pacey-settings-install-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pacey-settings-install-title { font-family: var(--font-fuzzy); font-weight: 700; font-size: var(--pacey-text-label); color: var(--pinboard-ink); }
.pacey-settings-install-sub { font-family: var(--font-fuzzy); font-weight: 400; font-size: var(--pacey-text-caption); color: var(--pinboard-muted); }
.pacey-settings-install-chevron { color: var(--pinboard-muted); flex-shrink: 0; }

/* =====================================================================
   SETTINGS PANEL — presentation
   Desktop: an anchored popover that opens above the sidebar's gear, at the
   sidebar's right edge, with a fade + scale from the bottom-left corner.
   Mobile: a bottom sheet that slides up from the bottom edge with a scrim,
   matching the workout detail sheet. Both share the paper-sheet card. These
   rules live last so they win over the shared paper treatment above.
   ===================================================================== */

/* ---- Desktop: anchored popover ---- */
@media (min-width: 48.0625rem) {
    .pacey-settings-popup {
        /* Just right of the sidebar, sitting above the gear */
        left: calc(var(--pacey-sidebar-w) + 0.75rem);
        bottom: 5.5rem;
        /* No scrim: clicks pass through to the page so the existing
           click-outside-to-close behaviour keeps working. The card itself
           re-enables pointer events below. */
        pointer-events: none;
    }
    /* Collapsed sidebar — tuck the popover closer to the rail */
    html:has(.pacey-sidebar.collapsed) .pacey-settings-popup {
        left: calc(var(--pacey-sidebar-collapsed) + 0.75rem);
    }
    .pacey-settings-popup-card {
        pointer-events: auto;
        opacity: 0;
        transform: translateY(0.4rem) scale(0.96);
        transform-origin: bottom left;
        transition: opacity 0.18s ease-out, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .pacey-settings-popup--open .pacey-settings-popup-card {
        opacity: 1;
        transform: none;
    }
}

/* ---- Mobile: bottom sheet ---- */
@media (max-width: 48rem) {
    .pacey-settings-popup {
        inset: 0;
        pointer-events: auto;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        background: rgba(29, 53, 87, 0);
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
        transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
    }
    .pacey-settings-popup--open {
        background: rgba(29, 53, 87, 0.4);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .pacey-settings-popup-card {
        width: 100%;
        max-width: 100%;
        max-height: 85dvh;
        overflow-y: auto;
        /* Bottom sheet shape: rounded top edge only */
        border-radius: 1.25rem 1.25rem 0 0;
        opacity: 1;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    }
    .pacey-settings-popup--open .pacey-settings-popup-card {
        transform: translateY(0);
    }
    /* The pushpin belongs to the desktop popover — a sheet isn't pinned */
    .pacey-settings-popup-card::before { content: none; }
}

/* Respect reduced-motion: cross-fade instead of slide/scale */
@media (prefers-reduced-motion: reduce) {
    .pacey-settings-popup,
    .pacey-settings-popup-card { transition-duration: 0.001ms; }
}

/* ---------------------------------------------------------------------
   Link-the-race modal
   ---------------------------------------------------------------------
   Reached from the race recap when no run matched the goal. The runner
   points at the right activity or uploads the GPX for a run that never
   reached Garmin, so the result is theirs rather than an inference from a
   date. Unscoped: the modal sits at body level, outside #pacey-content.
   --------------------------------------------------------------------- */

.pacey-link-race-card {
    background: var(--pacey-surface);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius);
    box-shadow: 0 0.5rem 2rem rgba(29, 53, 87, 0.15), 0 0.125rem 0.5rem rgba(29, 53, 87, 0.08);
    width: min(100%, 32rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    position: relative;
}

.pacey-link-race-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pacey-space-sm);
    padding: var(--pacey-space-md) var(--pacey-space-md) 0;
}

.pacey-link-race-title {
    margin: 0;
    font-size: var(--pacey-text-subheading);
    font-weight: 700;
    color: var(--pacey-navy);
}

.pacey-link-race-body {
    display: flex;
    flex-direction: column;
    gap: var(--pacey-space-sm);
    padding: var(--pacey-space-md);
}

.pacey-link-race-intro,
.pacey-link-race-empty {
    margin: 0;
    font-size: var(--pacey-text-body);
    color: var(--pacey-muted);
}

.pacey-link-race-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    /* Long activity histories would push the upload option off screen. */
    max-height: 18rem;
    overflow-y: auto;
}

.pacey-link-race-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: var(--pacey-space-sm);
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: var(--pacey-bg);
    border: 0.0625rem solid var(--pacey-border);
    border-radius: var(--pacey-radius-sm);
    font: inherit;
    color: var(--pacey-text);
    text-align: left;
    cursor: pointer;
    transition: var(--pacey-transition);
}

.pacey-link-race-item:hover {
    border-color: var(--pacey-blue);
}

/* A candidate within the goal distance. Flagged, not filtered — the runner is
   the one who knows which run was the race. */
.pacey-link-race-item.is-near {
    border-color: var(--pacey-accent-green);
}

.pacey-link-race-item-date {
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
    white-space: nowrap;
}

.pacey-link-race-item-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pacey-link-race-item-meta {
    font-size: var(--pacey-text-caption);
    color: var(--pacey-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pacey-link-race-upload {
    display: block;
    cursor: pointer;
}

.pacey-link-race-upload-label {
    font-size: var(--pacey-text-body);
    color: var(--pacey-blue);
    text-decoration: underline;
}

.pacey-link-race-status {
    margin: 0;
    font-size: var(--pacey-text-body);
    color: var(--pacey-muted);
}

.pacey-link-race-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pacey-space-sm);
    padding: 0 var(--pacey-space-md) var(--pacey-space-md);
}