/* Theme: Electric Blue. Light is the bare-:root default (and the no-JS/
   no-media fallback); prefers-color-scheme switches to dark for users with
   no saved choice; an explicit [data-theme] (set by the header toggle, see
   initThemeToggle in app.js) always wins over both. Tokens that don't vary
   by theme (brand colors, radius) live outside every conditional block. */
:root {
    --radius: 12px;
    --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

    --strava: #fc4c02;
    --strava-soft: rgba(252, 76, 2, 0.15);
    --strava-hover: #e04402;
    --garmin: #007db8;
    --garmin-hover: #006699;
    --imported: #ea580c;

    --bg: #f5f8fd;
    --surface: #ffffff;
    --surface-hover: #e8f0fb;
    --border: #cddaf0;
    --text: #101b2d;
    --text-muted: #51648a;
    --accent: #1f7fe0;
    --accent-hover: #1569bd;
    --accent-soft: rgba(31, 127, 224, 0.12);
    --on-accent: #ffffff;
    --success: #16a34a;
    --success-soft: rgba(22, 163, 74, 0.12);
    --success-border: rgba(22, 163, 74, 0.28);
    --warning: #b45309;
    --warning-soft: rgba(180, 83, 9, 0.10);
    --warning-border: rgba(180, 83, 9, 0.32);
    --danger: #dc2626;
    --danger-soft: rgba(220, 38, 38, 0.10);
    --danger-border: rgba(220, 38, 38, 0.28);
    --indigo: #4f46e5;
    --purple: #9333ea;
    --info: #2563eb;
    --slate: #475569;
    --violet: #7c3aed;
    --violet-hover: #6d28d9;
    --recede: rgba(16, 27, 45, 0.05);
    --tint: rgba(16, 27, 45, 0.03);
    --glow-accent: rgba(31, 127, 224, 0.08);
    --glow-success: rgba(22, 163, 74, 0.06);
    --shadow: 0 4px 20px rgba(16, 30, 55, 0.08);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0b1220;
        --surface: #131f33;
        --surface-hover: #1b2b47;
        --border: #253a5e;
        --text: #e9f1fb;
        --text-muted: #8ba3c7;
        --accent: #3ea6ff;
        --accent-hover: #62b8ff;
        --accent-soft: rgba(62, 166, 255, 0.18);
        --on-accent: #08131f;
        --success: #34d399;
        --success-soft: rgba(52, 211, 153, 0.15);
        --success-border: rgba(52, 211, 153, 0.3);
        --warning: #fbbf24;
        --warning-soft: rgba(251, 191, 36, 0.15);
        --warning-border: rgba(251, 191, 36, 0.35);
        --danger: #f87171;
        --danger-soft: rgba(248, 113, 113, 0.15);
        --danger-border: rgba(248, 113, 113, 0.3);
        --indigo: #818cf8;
        --purple: #c084fc;
        --info: #60a5fa;
        --slate: #94a3b8;
        --violet: #a78bfa;
        --violet-hover: #c4b5fd;
        --recede: rgba(15, 20, 25, 0.65);
        --tint: rgba(255, 255, 255, 0.02);
        --glow-accent: rgba(62, 166, 255, 0.12);
        --glow-success: rgba(52, 211, 153, 0.08);
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }
}

:root[data-theme="dark"] {
    --bg: #0b1220;
    --surface: #131f33;
    --surface-hover: #1b2b47;
    --border: #253a5e;
    --text: #e9f1fb;
    --text-muted: #8ba3c7;
    --accent: #3ea6ff;
    --accent-hover: #62b8ff;
    --accent-soft: rgba(62, 166, 255, 0.18);
    --on-accent: #08131f;
    --success: #34d399;
    --success-soft: rgba(52, 211, 153, 0.15);
    --success-border: rgba(52, 211, 153, 0.3);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, 0.15);
    --warning-border: rgba(251, 191, 36, 0.35);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.15);
    --danger-border: rgba(248, 113, 113, 0.3);
    --indigo: #818cf8;
    --purple: #c084fc;
    --info: #60a5fa;
    --slate: #94a3b8;
    --violet: #a78bfa;
    --violet-hover: #c4b5fd;
    --recede: rgba(15, 20, 25, 0.65);
    --tint: rgba(255, 255, 255, 0.02);
    --glow-accent: rgba(62, 166, 255, 0.12);
    --glow-success: rgba(52, 211, 153, 0.08);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-text-size-adjust: 100%;
}

button,
.btn,
.tab {
    touch-action: manipulation;
}

.calendar-scroll-wrap {
    width: 100%;
}

/* Header — logo left / centered nav / race countdown / auth right, one row
   on desktop. .header-top-row uses display:contents so its three children
   (logo, race-carousel, auth-bar) become direct flex items of .header-inner
   alongside .tabs, letting all four sit in a single ordered row without
   duplicating markup — the shared `order` values below place the race
   carousel to the right of the tabs. Mobile turns display:contents off (see
   the 768px block) so .header-top-row becomes a real flex row instead; it
   keeps only logo/race-carousel/auth-bar (tabs drops to its own full-width
   scrollable row below), and the same `order` values still put the race
   carousel between the logo and the language toggle there too. */
.header {
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
    border-bottom: 1px solid var(--border);
    padding: 1rem 2rem;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-top-row {
    display: contents;
}

.header-logo {
    order: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
}

/* Hidden by default (desktop keeps its full .tabs bar); shown only at the
   mobile breakpoint below, where it opens .mobile-drawer instead. */
.header-hamburger {
    display: none;
    order: 0;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    padding: 0;
}

.header-hamburger:hover {
    background: var(--surface-hover);
}

.header-logo-img {
    display: block;
    height: 42px;
    width: auto;
    margin-right: 0.2rem;
}

/* Temporary — remove once out of beta. Sits next to the wordmark wherever
   it appears (header, public nav, the exported share-week card). */
.beta-badge {
    display: inline-block;
    font-family: var(--font);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
}

.header .tabs {
    order: 2;
    flex: 1;
    justify-content: center;
    margin-bottom: 0;
    border-bottom: none;
}

.auth-bar {
    order: 4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Single flag button (the current locale) that opens a dropdown listing
   whichever other locale(s) you can switch to — same trigger/dropdown
   mechanic as .profile-menu, just for language instead of account actions.
   Two of these can be on the page at once (public landing nav + logged-in
   header) since only one of those two containers is ever visible. */
.locale-menu {
    position: relative;
}

.locale-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    transition: background 0.15s;
}

.locale-menu-trigger:hover {
    background: var(--surface-hover);
}

.locale-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 150px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.4rem;
    z-index: 50;
}

.locale-menu-dropdown.open {
    display: block;
}

.locale-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
    text-align: left;
    padding: 0.55rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.locale-menu-item:hover {
    background: var(--surface-hover);
}

/* Sub-strip: the condensed mobile stat trio only — the race countdown now
   lives in the header itself (see .race-carousel below) on every viewport,
   so this bar has nothing to show on desktop and stays hidden there. */
.header-substrip {
    display: none;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 2rem;
}

.header-substrip-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.header-mobile-stats {
    display: none;
}

.header-stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.1;
}

.header-stat-value.accent { color: var(--accent); }
.header-stat-value.strava { color: var(--strava); }

.header-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* Race carousel: sits in the header itself, to the right of the tabs on
   desktop and between the logo and the language toggle on mobile (see the
   order values above). Shows one race "pill" at a time — auto-rotates on a
   timer, swipeable via native scroll-snap, click navigates to that race on
   the Agenda calendar — same mechanic as before, just relocated. */
.race-carousel {
    order: 3;
    flex: 0 0 230px;
    max-width: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.race-carousel-track {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.race-carousel-track::-webkit-scrollbar {
    display: none;
}

.race-pill {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.85rem;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 999px;
    flex: 0 0 100%;
    scroll-snap-align: start;
    cursor: pointer;
}

.race-pill-empty-text {
    font-size: 0.8rem;
    line-height: 1;
    color: var(--text-muted);
    margin: 0 auto;
}

.race-pill-days {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    line-height: 1;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
    flex-shrink: 0;
}

.race-pill-divider {
    width: 1px;
    height: 14px;
    background: var(--border);
    flex-shrink: 0;
}

/* Wrapper clips the name to the remaining chip width; the name itself is
   what the marquee (below) slides sideways when it doesn't fit, so it
   can't carry its own overflow/ellipsis — the wrapper does the clipping.
   The wrapper is itself a flex container (rather than relying on the
   outer .race-pill's align-items) so the inline-block name text is
   centered by flexbox instead of by inline baseline metrics — an
   inline-block's baseline alignment leaves it sitting slightly off from
   plain-text siblings like .race-pill-days, which is what made "days" and
   the race name look vertically mismatched. */
.race-pill-name-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.race-pill-name {
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--text-muted);
    white-space: nowrap;
}

.race-pill-name.is-marquee {
    animation: race-name-marquee 8s ease-in-out infinite;
}

@keyframes race-name-marquee {
    0%, 15% { transform: translateX(0); }
    50%, 65% { transform: translateX(var(--marquee-distance, 0)); }
    100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .race-pill-name.is-marquee {
        animation: none;
    }
}

.race-carousel-dots {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    margin-top: 0.1rem;
}

.race-carousel-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--border);
    cursor: pointer;
    padding: 0;
    border: none;
}

.race-carousel-dot.active {
    background: var(--accent);
}

.auth-badge {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
}

.read-only-badge {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid var(--warning-border);
}

/* Read-only mode — hide edit controls */
body.read-only #btn-add,
body.read-only .calendar-day-add,
body.read-only .agenda-actions,
body.read-only .calendar-workout-actions,
body.read-only .strava-list-actions,
body.read-only #btn-import-strava,
body.read-only #btn-import-csv,
body.read-only #btn-connect-strava,
body.read-only #btn-disconnect-strava,
body.read-only #btn-edit-workout-modal,
body.read-only #btn-delete-workout-modal,
body.read-only #btn-edit-exercise-modal,
body.read-only #btn-link-activity-workout,
body.read-only #btn-unlink-activity-workout,
body.read-only .workout-detail-btn {
    display: none !important;
}

body.read-only .calendar-workout {
    cursor: pointer;
}

body.read-only .calendar-workout[draggable="true"] {
    cursor: pointer;
}

body.read-only .tab[data-panel="panel-exercises"],
body.read-only .tab[data-panel="panel-settings"] {
    display: none;
}

/* Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.stat-card .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.stat-card .value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem;
    font-weight: 700;
}

.stat-card .value.accent { color: var(--accent); }
.stat-card .value.success { color: var(--success); }
.stat-card .value.strava { color: var(--strava); }

/* Tabs */
.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}

.tab {
    background: none;
    border: none;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}

.tab:hover { color: var(--text); }
.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tab-badge {
    display: inline-block;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 1.1rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    margin-left: 0.4rem;
}

.strava-queue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1.1rem;
    margin-bottom: 0.6rem;
}

.strava-queue-item-title {
    font-weight: 600;
}

.strava-queue-item-meta {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

.strava-queue-item-expiry {
    color: var(--warning);
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.strava-queue-item-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.email-template-columns {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 900px) {
    .email-template-columns {
        grid-template-columns: 1fr;
    }
}

.email-template-edit-col,
.email-template-preview-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.email-quill-toolbar.ql-toolbar.ql-snow {
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--surface-hover);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.email-quill-body.ql-container.ql-snow {
    border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--surface);
    font-size: 0.92rem;
    min-height: 220px;
}

.email-placeholder-formats {
    position: relative;
    margin-left: auto;
    padding-left: 0.5rem;
}

.placeholder-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 260px;
    padding: 0.5rem;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.placeholder-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: monospace;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid var(--accent);
    cursor: pointer;
}

.email-preview-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.email-preview-frame {
    width: 100%;
    min-height: 320px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #ffffff;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Toolbar */
.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.toolbar h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
}

.toolbar-subtitle {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.toolbar-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.agenda-primary-actions {
    display: flex;
    gap: 0.5rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background 0.2s, transform 0.1s;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--surface-hover); }

.btn-strava {
    background: var(--strava);
    color: #fff;
}
.btn-strava:hover { background: var(--strava-hover); }

.btn-garmin {
    background: var(--garmin);
    color: #fff;
}
.btn-garmin:hover { background: var(--garmin-hover); }

.btn-danger {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
}
.btn-danger:hover { background: var(--danger-soft); }

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
}

.btn-icon {
    padding: 0.4rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 6px;
}
.btn-icon:hover {
    background: var(--surface-hover);
    color: var(--text);
}

/* Training calendar */
.training-calendar {
    gap: 1rem;
}

.view-switcher {
    display: flex;
    flex-shrink: 0;
    gap: 0.15rem;
    background: var(--surface);
    padding: 0.2rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.view-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}

/* Icon shown only at the mobile breakpoint (below) — desktop keeps the
   plain text labels this switcher has always used. */
.view-switch-icon {
    display: none;
}

.view-switch-btn:hover:not(.active) {
    color: var(--text);
    background: var(--surface-hover);
}

.view-switch-btn.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* Month/Week (the grid views) are desktop-only; Calendar (the merged
   day-strip view) is mobile-only — see the 768px block below. Both sets
   sit in the same markup so JS doesn't need to rebuild the switcher. */
.view-switch-mobile-only {
    display: none;
}

/* Settings tab bar — visually the same segmented-control family as
   .view-switcher above, but a separate class: .view-switch-btn collapses to
   icon-only on mobile (see the 768px block below) and these tabs have no
   icon markup to fall back to. Horizontal scroll (not icon-only collapse)
   is the mobile treatment here, on both breakpoints via .settings-tabs-scroll
   below rather than a separate mobile override. */
.settings-tabs-scroll {
    overflow-x: auto;
    margin-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
}

.settings-tabs {
    display: inline-flex;
    flex-shrink: 0;
    gap: 0.15rem;
    background: var(--surface);
    padding: 0.2rem;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.settings-tab {
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.settings-tab:hover:not(.active) {
    color: var(--text);
    background: var(--surface-hover);
}

.settings-tab.active {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

.calendar-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.calendar-nav-btn {
    font-size: 1.5rem;
    line-height: 1;
    width: 2.25rem;
    height: 2.25rem;
}

.calendar-month-label {
    flex: 1;
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: capitalize;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.calendar-grid-week .calendar-day {
    min-height: 220px;
}

.calendar-weekday-date {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-top: 0.2rem;
    text-transform: none;
    letter-spacing: 0;
}

.list-strava-chip {
    margin-top: 0.5rem;
}

.calendar-weekday {
    background: var(--surface);
    padding: 0.6rem 0.5rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.calendar-day {
    background: var(--bg);
    min-height: 110px;
    min-width: 0;
    padding: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    transition: background 0.15s;
}

.calendar-day.other-month {
    background: var(--recede);
}

.calendar-day.other-month .calendar-day-number {
    color: var(--text-muted);
    opacity: 0.55;
}

.calendar-day.today {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.calendar-day.race-day {
    box-shadow: inset 0 0 0 2px var(--success);
}

.calendar-day.race-day .calendar-day-number {
    color: var(--success);
    font-weight: 800;
}

.calendar-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
}

.calendar-day-number {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.calendar-day-add {
    width: 1.35rem;
    height: 1.35rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.calendar-day:hover .calendar-day-add {
    opacity: 1;
}

.calendar-day-add:hover {
    background: var(--surface-hover);
    color: var(--accent);
}

.calendar-day-workouts {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-height: 0;
}

.calendar-workout-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.calendar-strava-chip {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.4rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid rgba(252, 76, 2, 0.35);
    border-radius: 6px;
    background: var(--strava-soft);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}

.calendar-strava-chip:hover {
    border-color: var(--strava);
    background: rgba(252, 76, 2, 0.22);
}

.calendar-strava-chip .badge {
    font-size: 0.55rem;
    padding: 0.1rem 0.35rem;
}

.calendar-strava-chip-name {
    flex: 1;
    min-width: 0;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-strava-chip-stats {
    font-size: 0.6rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.calendar-workout {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 0.35rem 0.4rem;
    cursor: grab;
    transition: border-color 0.15s, background 0.15s, opacity 0.15s;
    color: var(--text);
}

.calendar-workout:active {
    cursor: grabbing;
}

.calendar-workout.dragging {
    opacity: 0.45;
}

.calendar-day.drag-over {
    background: var(--surface-hover);
    box-shadow: inset 0 0 0 2px var(--accent);
}

.calendar-workout.type-long_run { border-left-color: var(--indigo); }
.calendar-workout.type-tempo { border-left-color: var(--danger); }
.calendar-workout.type-interval { border-left-color: var(--purple); }
.calendar-workout.type-recovery { border-left-color: var(--success); }
.calendar-workout.type-cross_training { border-left-color: var(--info); }
.calendar-workout.type-rest { border-left-color: var(--slate); }
.calendar-workout.type-race { border-left-color: var(--warning); }

.calendar-workout:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
}

.calendar-workout.completed {
    opacity: 0.7;
}

.calendar-workout.completed .calendar-workout-title {
    text-decoration: line-through;
}

.calendar-workout-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.25rem;
}

.calendar-workout-title {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.calendar-workout-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: center;
    margin-top: 0.2rem;
    font-size: 0.62rem;
    color: var(--text-muted);
}

.calendar-workout-meta .badge {
    font-size: 0.55rem;
    padding: 0.1rem 0.35rem;
}

.calendar-workout-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
    margin-top: 0.2rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.calendar-workout:hover .calendar-workout-actions {
    opacity: 1;
}

.btn-icon-sm {
    padding: 0.15rem 0.25rem;
    font-size: 0.75rem;
}

.calendar-empty-hint {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Inline unfold inside a mobile Calendar-view workout card (see
   toggleCalendarWorkoutExpand) — reuses the same .detail-stats/.detail-
   section/.plan-section classes the workout modal renders with. */
.calendar-workout-expanded {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    cursor: default;
}

.calendar-workout-expanded .detail-section,
.calendar-workout-expanded .workout-plan {
    margin-bottom: 0.85rem;
}

/* Same compact sizing as the (desktop) workout modal's .modal-workout
   .detail-stats — without this override these inherit the generic,
   much larger .detail-stats/.detail-stat meant for the modal's wider
   body, and blow up to oversized boxes in this narrow inline card. */
.calendar-workout-expanded .detail-stats {
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.calendar-workout-expanded .detail-stat {
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    text-align: left;
}

.calendar-workout-expanded .detail-stat .label {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.12rem;
}

.calendar-workout-expanded .detail-stat .value {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
}

/* Mobile-only "Calendar" view: Month and Week merge into one day-strip +
   detail panel (see renderAgendaCalendarView) so nothing is ever wider
   than the screen — a week's worth of pills always fits, and paging
   between weeks (the nav's ‹ › buttons) reaches the whole month without a
   7-column grid. Reuses .calendar-workout/.badge-* etc. for the detail
   panel's cards, same as the grid views. */
.calendar-strip-wrap {
    position: relative;
}

.calendar-strip {
    display: flex;
    gap: 0.4rem;
}

.calendar-strip-pill {
    flex: 1;
    min-width: 0;
    height: 54px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    cursor: pointer;
    padding: 0;
    font-family: var(--font);
    transition: background 0.15s, border-color 0.15s;
}

.calendar-strip-pill:hover {
    border-color: var(--accent);
}

.calendar-strip-weekday {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.calendar-strip-date {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.calendar-strip-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
}

.calendar-strip-pill.today {
    box-shadow: inset 0 0 0 2px var(--accent);
}

.calendar-strip-pill.race-day {
    box-shadow: inset 0 0 0 2px var(--success);
}

.calendar-strip-pill.race-day .calendar-strip-date {
    color: var(--success);
    font-weight: 800;
}

.calendar-strip-pill.selected {
    background: var(--accent);
    border-color: var(--accent);
}

.calendar-strip-pill.selected .calendar-strip-weekday {
    color: var(--on-accent);
    opacity: 0.85;
}

.calendar-strip-pill.selected .calendar-strip-date {
    color: var(--on-accent);
}

.calendar-strip-pill.selected .calendar-strip-dot {
    background: var(--on-accent);
}

.calendar-strip-pill.other-month {
    background: var(--recede);
}

.calendar-strip-pill.other-month .calendar-strip-weekday,
.calendar-strip-pill.other-month .calendar-strip-date {
    color: var(--text-muted);
    opacity: 0.55;
}

/* Mobile month view: one .calendar-strip per week, stacked — see
   renderAgendaMonthView/renderMonthWeekStrip in app.js. */
.calendar-month-strips {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Ties the detail panel below to whichever pill is selected, positioned by
   JS via --selected-index (0-6). */
.calendar-strip-caret {
    position: absolute;
    left: calc((var(--selected-index, 0) + 0.5) / 7 * 100%);
    transform: translateX(-50%);
    top: 100%;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid var(--accent-soft);
}

.calendar-day-detail {
    margin-top: 0.6rem;
    background: var(--accent-soft);
    border-radius: var(--radius);
    padding: 0.75rem 0.7rem;
}

.calendar-day-detail-heading {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.calendar-day-detail-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
}

/* Only one day's cards are ever shown here at once, so there's room for the
   meta line and Strava stats that the cramped grid cells hide on mobile
   (.calendar-workout-meta/.calendar-strava-chip-stats {display:none} in the
   768px block) — these two-class selectors outrank that single-class rule
   regardless of source order. */
.calendar-day-detail .calendar-workout-meta {
    display: flex;
}

.calendar-day-detail .calendar-strava-chip-stats {
    display: inline;
}

/* Agenda list */
.agenda-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.agenda-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    transition: border-color 0.2s;
}

.agenda-item:hover { border-color: var(--accent); }
.agenda-item.clickable {
    cursor: pointer;
}
.agenda-item.clickable:hover {
    border-color: var(--strava);
    background: var(--surface-hover);
}
.agenda-item.completed { opacity: 0.65; }
.agenda-item.completed .agenda-title { text-decoration: line-through; }

.agenda-date {
    text-align: center;
    min-width: 56px;
}

.agenda-date .day {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.agenda-date .month {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.agenda-body { min-width: 0; }

.agenda-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.agenda-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-run { background: var(--accent-soft); color: var(--accent); }
.badge-long_run { background: rgba(99, 102, 241, 0.2); color: var(--indigo); }
.badge-tempo { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.badge-interval { background: rgba(168, 85, 247, 0.2); color: var(--purple); }
.badge-recovery { background: var(--success-soft); color: var(--success); }
.badge-cross_training { background: rgba(59, 130, 246, 0.2); color: var(--info); }
.badge-rest { background: rgba(148, 163, 184, 0.2); color: var(--slate); }
.badge-race { background: rgba(251, 191, 36, 0.2); color: var(--warning); }
.badge-other { background: var(--surface-hover); color: var(--text-muted); }
.badge-strava { background: var(--strava-soft); color: var(--strava); }
.badge-garmin { background: rgba(0, 125, 184, 0.18); color: var(--garmin); }
.badge-imported { background: rgba(234, 88, 12, 0.18); color: var(--imported); }

.compare-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.compare-day {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: var(--surface);
}

.compare-day-label {
    padding: 0.55rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.compare-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.compare-col {
    padding: 0.85rem;
}

.compare-col + .compare-col {
    border-left: 1px solid var(--border);
}

.compare-col-title {
    margin-bottom: 0.65rem;
}

.compare-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}

.compare-card:last-child {
    margin-bottom: 0;
}

.compare-card-title {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.compare-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.compare-empty {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 0.6rem;
}

.compare-delta {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.compare-delta-good { color: var(--success, #16a34a); }
.compare-delta-over { color: var(--strava, #fc5200); }
.compare-delta-under { color: var(--text-muted); }

.link-inline-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
}
.link-inline-btn:hover { text-decoration: underline; }

.compare-empty-state { text-align: center; padding: 1rem 0; }

.compare-bar-metric { margin-bottom: 1.1rem; }
.compare-bar-metric-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.compare-bar-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
}
.compare-bar-tag {
    flex: 0 0 4.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.compare-bar-track {
    flex: 1 1 auto;
    height: 0.6rem;
    border-radius: 999px;
    background: var(--surface-hover);
    overflow: hidden;
}
.compare-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.2s ease;
}
.compare-bar-planned { background: var(--text-muted); }
.compare-bar-actual { background: var(--accent); }
.compare-bar-value {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 3.5rem;
    text-align: right;
}
.compare-compliance {
    margin-top: 0.75rem;
    font-weight: 600;
    text-align: center;
}

@media (max-width: 720px) {
    .compare-columns {
        grid-template-columns: 1fr;
    }

    .compare-col + .compare-col {
        border-left: none;
        border-top: 1px solid var(--border);
    }
}

.agenda-actions {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

/* Week groups */
.week-group { margin-bottom: 2rem; }

.week-header {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

/* Modal */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-overlay.open { display: flex; }

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow);
}

.modal-wide { max-width: 720px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 { font-family: var(--font-display); font-size: 1.1rem; }

.modal-body { padding: 1.5rem; }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
}

.share-week-preview-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 0.85rem;
}

/* Tighter than the default .form-group/.share-week-highlight-option spacing
 * elsewhere in the app — these two modals are mostly list rows stacked
 * under a live preview, so the generic form spacing reads as too airy. */
#share-week-modal-overlay .form-group,
#share-workout-modal-overlay .form-group {
    margin-bottom: 0.6rem;
}

#share-week-canvas,
#share-workout-canvas {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

/* Form */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-group input[type="radio"],
.form-group input[type="checkbox"] {
    width: auto;
    padding: 0;
    background: none;
    border: none;
    accent-color: var(--accent);
}

.form-hint {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.share-week-highlight-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.85rem;
    color: var(--text);
    cursor: pointer;
    flex: 1;
}

.share-week-highlight-option input[type="checkbox"] {
    flex-shrink: 0;
}

.share-week-highlight-option strong {
    color: var(--text);
    font-weight: 700;
}

.share-week-highlight-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 8px;
    padding: 0 0.3rem;
}

/* Drag handle replaces the old ▲▼ reorder buttons — every row (pinned or
   not) is itself draggable="true" (see wireHighlightDragReorder), this is
   just the visual affordance/grab target. */
.share-week-drag-handle {
    flex-shrink: 0;
    color: var(--text-muted);
    cursor: grab;
    font-size: 0.9rem;
    line-height: 1;
    user-select: none;
}

.share-week-highlight-row.dragging {
    opacity: 0.4;
}

/* Shows exactly where a dragged row will land (see wireHighlightDragReorder)
 * — inserted between rows as the user drags over the top/bottom half of
 * whichever row they're currently over. */
.share-week-drag-indicator {
    height: 2px;
    margin: 3px 0.3rem;
    background: var(--accent);
    border-radius: 1px;
}

/* The topmost row is always distance/duration (see
   SHARE_WEEK_PINNED_HIGHLIGHT_KEYS / SHARE_WORKOUT_PINNED_HIGHLIGHT_KEYS) —
   this is what actually renders as the card's big hero number, so it's
   called out visually rather than looking like just another list item. */
.share-week-highlight-row.is-hero {
    background: var(--accent-soft);
}

.share-week-highlight-row.is-hero .share-week-highlight-option span,
.share-week-highlight-row.is-hero .share-week-highlight-option strong {
    font-weight: 700;
    color: var(--accent);
}

.share-week-highlight-pinned {
    cursor: grab;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-row:has(.form-run-only[hidden]) {
    grid-template-columns: 1fr;
}

.strength-exercise-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.strength-exercise-empty {
    margin: 0;
    padding: 0.75rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.strength-exercise-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    background: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.strength-exercise-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
}

.strength-exercise-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 0.5rem;
    align-items: end;
}

.strength-exercise-add-row select {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
}

.strength-exercise-add-row select:focus {
    outline: none;
    border-color: var(--accent);
}

.strength-exercise-sets-field,
.strength-exercise-reps-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 4.25rem;
}

.strength-exercise-sets-field span,
.strength-exercise-reps-field span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.strength-exercise-sets-field input,
.strength-exercise-reps-field input {
    width: 100%;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.9rem;
}

.strength-exercise-sets-field input:focus,
.strength-exercise-reps-field input:focus {
    outline: none;
    border-color: var(--accent);
}

.strength-exercise-remove {
    flex-shrink: 0;
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check input { width: auto; }

.schedule-csv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.schedule-csv-hint {
    margin: 0;
}

.schedule-import-issues {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--warning-soft);
    border: 1px solid var(--warning-border);
}

.schedule-import-issues-title {
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.schedule-import-issues-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.schedule-import-issues-list li {
    margin-bottom: 0.25rem;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
}

.empty-state .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--text);
    margin-bottom: 0.5rem;
}

/* Toast */
.toast-container {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toast {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem 1.25rem;
    box-shadow: var(--shadow);
    animation: slideIn 0.3s ease;
    font-size: 0.875rem;
}

.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.warning { border-left: 3px solid var(--warning); }

.btn-strava-connect-asset { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; }

.toast-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: min(100%, 280px);
}

.toast-message {
    flex: 1;
    min-width: 0;
}

.toast-undo-btn {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--accent);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
}

.toast-undo-btn:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Combined day view */
.day-combined {
    border-left: 3px solid var(--border);
    padding-left: 1rem;
    margin-left: 0.5rem;
}

.day-combined.has-strava { border-left-color: var(--strava); }
.day-combined.has-planned { border-left-color: var(--accent); }
.day-combined.has-both { border-left-color: var(--success); }

.strava-activity {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1.1rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    color: var(--text);
}

.strava-activity:hover {
    border-color: var(--strava);
    background: var(--surface-hover);
}

.strava-activity .activity-name {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text);
}

.strava-activity .activity-stats {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.strava-activity-main {
    flex: 1;
    min-width: 0;
}

.strava-activity.linked {
    border-color: rgba(252, 76, 2, 0.35);
}

.strava-unlink-btn {
    flex-shrink: 0;
}

.strava-list-item {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
}

.strava-list-item .agenda-item-clickable {
    flex: 1;
    display: flex;
    gap: 1rem;
    cursor: pointer;
    min-width: 0;
}

.strava-list-actions {
    display: flex;
    align-items: center;
    padding-right: 0.5rem;
}

.linked-workout-label {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.85rem;
    color: var(--success);
}

.link-modal-subtitle {
    margin-bottom: 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.link-workout-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 360px;
    overflow-y: auto;
}

.link-workout-option {
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    color: var(--text);
    font-family: inherit;
    font-size: inherit;
}

.link-workout-option:hover {
    border-color: var(--accent);
    background: var(--surface-hover);
}

.link-workout-option.same-day {
    border-color: rgba(34, 197, 94, 0.35);
}

.link-workout-option-title {
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--text);
}

.link-workout-option-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.same-day-badge {
    color: var(--success);
    font-weight: 600;
}

.empty-state.compact {
    padding: 1.5rem 1rem;
}

.empty-state.compact p {
    margin: 0;
    color: var(--text-muted);
}

/* Setup page */
.setup-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
}

/* Public front page (logged-out home): a full-width marketing page, with
   sign-in/register reached via the auth modal (#auth-modal-overlay) rather
   than a form competing for attention on this page itself. */
.public-landing {
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 10%, var(--glow-accent), transparent 45%),
        radial-gradient(circle at 85% 85%, var(--glow-success), transparent 45%),
        var(--bg);
}

.public-nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border);
}

.public-nav-logo-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.public-nav-logo-img {
    display: block;
    height: 28px;
    width: auto;
}

.public-nav-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.public-hero {
    max-width: 720px;
    margin: 0 auto;
    padding: 4rem 2rem 3rem;
    text-align: center;
}

.public-hero-headline {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1.15;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.landing-pitch {
    color: var(--text-muted);
    margin: 0 auto 2rem;
    line-height: 1.6;
    max-width: 520px;
    font-size: 1.05rem;
}

.hero-ctas {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
}

.landing-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.landing-stat {
    flex: 1 1 140px;
    max-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1rem;
    text-align: center;
}

.landing-stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.landing-stat-unit {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 0.2rem;
}

.landing-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.public-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

.public-section-muted {
    max-width: none;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.public-section-heading {
    font-family: var(--font-display);
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 2rem;
}

.landing-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.landing-feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.25rem;
    border-radius: var(--radius);
    transition: background 0.15s ease;
}

.landing-feature:hover {
    background: var(--surface);
}

.landing-feature h3 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.landing-feature p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.audience-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
}

.audience-card h3 {
    margin-bottom: 0.5rem;
    color: var(--accent);
}

.audience-card p {
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.public-final-cta {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 720px;
    margin: 0 auto;
}

.public-final-cta h2 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
}

.public-footer {
    display: flex;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.public-footer a {
    color: var(--text-muted);
}

.footer-tab-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.footer-tab-link:hover {
    color: var(--text);
}

.setup-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem;
    max-width: 520px;
    width: 100%;
}

.setup-card h1 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.setup-card .subtitle {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.setup-steps {
    padding-left: 1.25rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.setup-steps li { margin-bottom: 0.5rem; }

.setup-steps a { color: var(--accent); }

.setup-card hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

.alert {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-success {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.alert-success a { color: var(--success); font-weight: 600; }

.alert-error {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.setup-card code {
    background: var(--bg);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85rem;
}

.auth-switch {
    margin-top: 1rem;
    font-size: 0.85rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.auth-switch a {
    color: var(--accent);
}

.profile-menu {
    position: relative;
}

.profile-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s;
}

.profile-menu-trigger:hover {
    background: var(--surface-hover);
}

.auth-user-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu-queue-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.profile-menu-caret {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1;
}

.profile-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.4rem;
    z-index: 50;
}

.profile-menu-dropdown.open {
    display: block;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.9rem;
    text-align: left;
    padding: 0.55rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.profile-menu-item:hover {
    background: var(--surface-hover);
}

.profile-menu-item.active {
    color: var(--accent);
}

.profile-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.3rem 0.2rem;
}

/* Mobile nav drawer — a left-edge sliding panel (see .header-hamburger).
   The overlay reuses .modal-overlay's show/hide (display:none / .open),
   overridden here to sit flush left instead of centering a boxed modal;
   nav items reuse .profile-menu-item for its hover/active states and
   click wiring, .drawer-nav-item only adds a bigger touch target and the
   icon+label layout. */
.mobile-drawer-overlay {
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    background: rgba(4, 8, 16, 0.6);
}

.mobile-drawer {
    width: min(280px, 82vw);
    height: 100%;
    background: var(--surface);
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem;
    padding-top: max(0.75rem, env(safe-area-inset-top));
    overflow-y: auto;
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0.4rem 0.85rem;
}

.mobile-drawer-brand-img {
    display: block;
    height: 22px;
    width: auto;
}

.drawer-nav-item {
    min-height: 44px;
    padding: 0.6rem 0.65rem;
    font-size: 0.92rem;
}

.drawer-nav-item.active {
    background: var(--accent-soft);
    color: var(--accent);
}

.drawer-nav-item-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.drawer-nav-item svg {
    flex-shrink: 0;
}

/* This whole drawer only ever opens from .header-hamburger, which is
   itself mobile-only — belt and suspenders in case something ever
   triggers #mobile-drawer-overlay's .open class at a wider viewport. */
@media (min-width: 769px) {
    .mobile-drawer-overlay {
        display: none !important;
    }
}

.role-choice {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}

.role-choice-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
    font-size: 0.9rem;
    cursor: pointer;
}

.coaching-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--accent);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

/* Onboarding checklist — see #onboarding-modal-overlay/#onboarding-banner.
   Each row is independently completable, not a linear wizard. */
.onboarding-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border);
}

.onboarding-item:last-child {
    border-bottom: none;
}

.onboarding-item-main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.onboarding-item-check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--border);
}

.onboarding-item-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.onboarding-item-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.onboarding-item-optional {
    opacity: 0.85;
}

.onboarding-item-done-label {
    display: none;
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--success);
    white-space: nowrap;
}

/* .done is toggled by JS once that row's real state (avatar/Strava/race/
   workout/2FA) says it's actually complete — not just "the button was
   clicked" — so it stays correct across logins too. */
.onboarding-item.done .onboarding-item-check {
    border-color: var(--success);
    background: var(--success);
    position: relative;
}

.onboarding-item.done .onboarding-item-check::after {
    content: '\2713';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.onboarding-item.done .onboarding-item-action {
    display: none;
}

.onboarding-item.done .onboarding-item-done-label {
    display: inline;
}

.onboarding-race-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.onboarding-race-form input {
    flex: 1 1 120px;
    min-width: 0;
    padding: 0.5rem 0.65rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-family: var(--font);
    font-size: 0.85rem;
}

.onboarding-race-form button {
    flex-shrink: 0;
}

/* Activity detail */
.loading-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.detail-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.detail-stat {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem;
    text-align: center;
}

.detail-stat .label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.detail-stat .value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Workout & Strava detail modals — compact stats & actions */
.modal-workout .modal-header,
.modal-activity .modal-header {
    padding: 1rem 1.25rem;
}

.modal-workout .modal-header h3,
.modal-activity .modal-header h3 {
    font-size: 1.05rem;
}

.modal-workout .modal-body,
.modal-activity .modal-body {
    padding: 1rem 1.25rem;
}

.modal-workout .modal-footer,
.modal-activity .modal-footer {
    padding: 0.75rem 1.25rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.modal-workout .modal-footer .btn,
.modal-activity .modal-footer .btn,
.modal-activity .modal-footer .btn-strava {
    padding: 0.45rem 0.9rem;
    font-size: 0.8125rem;
    min-height: 2.125rem;
}

.modal-workout .detail-stats,
.modal-activity .detail-stats {
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.modal-workout .detail-stat,
.modal-activity .detail-stat {
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    text-align: left;
}

.modal-workout .detail-stat .label,
.modal-activity .detail-stat .label {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.12rem;
}

.modal-workout .detail-stat .value,
.modal-activity .detail-stat .value {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
}

.modal-activity .detail-date {
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
}

.modal-activity .detail-meta-row {
    font-size: 0.78rem;
    margin-bottom: 0.75rem;
}

.modal-activity .workout-info-banner {
    font-size: 0.8125rem;
    padding: 0.65rem 0.75rem;
    margin-bottom: 0.75rem;
}

.detail-section {
    margin-bottom: 1.5rem;
}

.detail-section h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.detail-section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0;
}

.detail-section-header-row h4 {
    margin-bottom: 0;
}

.workout-text-collapsible .detail-section-header-row {
    margin-bottom: 0;
}

.workout-text-collapsible .workout-full-text-body:not([hidden]) {
    margin-top: 0.75rem;
}

.detail-expand-btn {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--accent);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.detail-expand-btn:hover {
    background: var(--surface-hover);
    color: var(--accent-hover);
}

.detail-description {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    white-space: pre-wrap;
}

.detail-attribution {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 1rem;
    font-style: italic;
}

.workout-description {
    margin-top: 0.35rem;
    max-height: 6.5rem;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.workout-detail-btn {
    margin-top: 0.5rem;
}

.workout-info-banner {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--warning-border);
    background: var(--warning-soft);
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.5;
}

.workout-info-banner strong {
    display: block;
    margin-bottom: 0.35rem;
}

.workout-plan {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.plan-section {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.plan-section-warmup { border-left: 3px solid var(--warning); }
.plan-section-main { border-left: 3px solid var(--accent); }
.plan-section-interval { border-left: 3px solid var(--purple); }
.plan-section-cooldown { border-left: 3px solid var(--info); }
.plan-section-recovery { border-left: 3px solid var(--success); }

.plan-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--tint);
}

.plan-section-header h4 {
    margin: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text);
}

.plan-repeat {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
}

.plan-steps {
    display: flex;
    flex-direction: column;
}

.plan-step {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
}

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

.plan-step-text {
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 0.35rem;
    line-height: 1.45;
}

.plan-step-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.plan-chip {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
}

.detail-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.splits-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.splits-table th,
.splits-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.splits-table-wrap {
    overflow-x: auto;
    margin: 0 -0.25rem;
}

.splits-table {
    min-width: 480px;
}

.splits-table th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 600;
}

.splits-table td {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.splits-table td.hr-cell { color: var(--danger); font-weight: 500; }
.splits-table td.cadence-cell { color: var(--info); font-weight: 500; }

.efforts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.effort-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
}

.effort-item .effort-name { font-weight: 500; }
.effort-item .effort-time { color: var(--strava); font-weight: 600; }

.chart-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.chart-container {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1rem 0.75rem;
    height: 240px;
    position: relative;
}

.chart-container.empty {
    height: auto;
    padding: 1.25rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.detail-date {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.search-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    min-width: 220px;
}

.exercise-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.exercise-category-title {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.exercise-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.exercise-card {
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    cursor: pointer;
    color: inherit;
    transition: background 0.15s, border-color 0.15s;
}

.exercise-card:hover {
    background: var(--surface-hover);
    border-color: var(--violet);
}

.exercise-card-name {
    display: block;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.exercise-card-preview {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.exercise-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--violet);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.exercise-link:hover {
    color: var(--violet-hover);
}

.exercise-instructions {
    margin: 0.5rem 0 0 1.25rem;
    line-height: 1.6;
}

.exercise-instructions li {
    margin-bottom: 0.35rem;
}

.form-control {
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    resize: vertical;
}

.exercise-video-section {
    margin-bottom: 1.25rem;
}

.exercise-video-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border);
}

.exercise-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.exercise-video-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--violet);
    text-decoration: none;
}

.exercise-video-link:hover {
    text-decoration: underline;
}

.exercise-video-badge {
    font-size: 0.75rem;
    color: var(--violet);
    margin-left: 0.25rem;
}

/* Responsive */
@media (max-width: 768px) {
    .public-hero-headline {
        font-size: 1.9rem;
    }

    .public-hero {
        padding: 2.5rem 1.25rem 2rem;
    }

    .public-nav-inner,
    .public-section,
    .public-final-cta,
    .public-footer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .landing-features,
    .audience-grid {
        grid-template-columns: 1fr;
    }

    .public-footer {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem 1rem;
        text-align: left;
    }

    .header {
        padding: 0.55rem 0.85rem max(0.55rem, env(safe-area-inset-top));
    }

    .header-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
    }

    /* Turn off the desktop display:contents trick — logo/race-carousel/auth
       become a real (wrapping) row of their own. justify-content:flex-start
       keeps hamburger+logo pinned together at the left regardless of what
       else wraps — .auth-bar's own margin-left:auto (below) is what pushes
       it to the right when it fits on line 1, or to line 2's right edge if
       it doesn't; space-between here would instead stretch hamburger and
       logo apart to the row's full width whenever they're the only two
       items left on the line. The race carousel always gets its own line
       (order/flex-basis below), regardless. .tabs is hidden entirely here —
       navigation moves into .mobile-drawer instead, opened by
       .header-hamburger. */
    .header-top-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    .header-hamburger {
        display: flex;
    }

    .header-logo {
        flex: 0 0 auto;
    }

    /* .tabs is replaced by .mobile-drawer at this width — the race
       carousel below takes over its old row instead (see .race-carousel's
       order/flex-basis just below, which wraps it onto its own line). */
    .tabs {
        display: none;
    }

    .auth-bar {
        margin-left: auto;
        flex-shrink: 0;
    }

    .auth-bar .btn-sm {
        min-height: 2rem;
        padding: 0.35rem 0.65rem;
        font-size: 0.75rem;
    }

    /* Hidden rather than just shrunk: a long name at 90px was still wide
       enough (once real webfonts loaded, widening it further) to push the
       hamburger+logo+auth-bar trio past the available row width and force
       auth-bar onto its own line, floating oddly. Avatar + caret alone is
       plenty to open the profile menu, and matches how most apps handle a
       cramped mobile header (icon only, no name). */
    .auth-user-name {
        display: none;
    }

    .header-logo-img {
        height: 24px;
        margin-right: 0;
    }

    .header-substrip {
        display: block;
        padding: 0.4rem 0.85rem;
    }

    .header-mobile-stats {
        display: flex;
        gap: 0.5rem;
        width: 100%;
        justify-content: space-between;
    }

    .header-stat {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        min-width: 0;
        flex: 1;
    }

    .header-stat-value {
        font-size: 0.82rem;
    }

    .header-stat-label {
        font-size: 0.52rem;
        letter-spacing: 0.02em;
    }

    .stats-grid {
        display: none;
    }

    /* Race carousel now takes over the row .tabs used to occupy: order
       places it after the hamburger/logo/profile row (which all fit on
       line 1 without it), and flex-basis:100% forces it onto its own full
       width line 2 in .header-top-row's wrapping flex layout. */
    .race-carousel {
        order: 5;
        flex: 1 1 100%;
        max-width: none;
        min-width: 0;
        margin-top: 0.4rem;
    }

    .race-pill {
        padding: 0.3rem 0.6rem;
        gap: 0.35rem;
    }

    .race-pill-days {
        font-size: 0.7rem;
    }

    .race-pill-name {
        font-size: 0.7rem;
    }

    .container {
        padding: 0.65rem 0.85rem;
        padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        margin-bottom: 1rem;
    }

    .toolbar h2 { font-size: 1.1rem; }

    .toolbar-subtitle {
        font-size: 0.8rem;
        line-height: 1.4;
    }

    .toolbar-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    /* Icon-only and auto-width here — this used to be a full-width 2-column
       grid of text buttons, which was the whole reason the switcher felt
       oversized next to Add Workout / Share workout. Now it's a third,
       compact item sharing their row (see .agenda-primary-actions below). */
    .view-switch-btn {
        padding: 0.5rem;
        min-width: 2.15rem;
        justify-content: center;
    }

    .view-switch-icon {
        display: inline-flex;
    }

    .view-switch-label {
        display: none;
    }

    .view-switch-desktop-only {
        display: none;
    }

    .view-switch-mobile-only {
        display: block;
    }

    .toolbar-actions > .btn,
    .toolbar-actions > .btn-primary {
        width: 100%;
        justify-content: center;
        min-height: 2.75rem;
    }

    /* The prev/this-week/next row is a compact nav trio, not a stack of
       full-width action buttons — override the generic .toolbar-actions
       mobile stacking above so the arrows stay small icon buttons in a
       single row instead of being stretched into oversized full-width bars
       (see .calendar-nav-btn, the same compact arrow style Calendar month
       view already uses). */
    .toolbar-actions.week-summary-nav {
        flex-direction: row;
        width: auto;
        align-items: center;
        justify-content: flex-start;
    }

    .toolbar-actions.week-summary-nav > .btn-icon,
    .toolbar-actions.week-summary-nav > .btn-sm {
        width: auto;
        min-height: 0;
    }

    .agenda-primary-actions {
        width: 100%;
    }

    .agenda-primary-actions > .btn {
        flex: 1;
        justify-content: center;
        min-height: 2.75rem;
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        font-size: 0.8rem;
    }

    .search-input {
        width: 100%;
        min-width: 0;
    }

    .btn {
        min-height: 2.5rem;
    }

    .btn-icon {
        min-width: 2.5rem;
        min-height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .agenda-item {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 0.75rem;
        padding: 0.9rem 1rem;
    }

    .agenda-date {
        text-align: center;
        min-width: 48px;
    }

    .agenda-date .day { font-size: 1.25rem; }

    .agenda-body { grid-column: 2; }

    .agenda-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        border-top: 1px solid var(--border);
        padding-top: 0.65rem;
        margin-top: 0.15rem;
        gap: 0.35rem;
    }

    .workout-detail-btn {
        width: 100%;
        justify-content: center;
        min-height: 2.5rem;
    }

    .strava-list-item {
        flex-direction: column;
        align-items: stretch;
    }

    .strava-list-item .agenda-item-clickable {
        flex-direction: row;
        width: 100%;
    }

    .strava-list-actions {
        width: 100%;
        padding: 0 1rem 0.9rem;
        justify-content: stretch;
    }

    .strava-list-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 2.5rem;
    }

    .strava-activity {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .strava-activity .activity-stats {
        white-space: normal;
    }

    .calendar-nav {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .calendar-month-label {
        font-size: 1rem;
        order: -1;
        width: 100%;
        text-align: center;
    }

    .calendar-nav-btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .calendar-nav .btn-sm {
        margin-left: auto;
        min-height: 2.5rem;
    }

    .calendar-day {
        min-height: 88px;
        padding: 0.3rem;
    }

    .calendar-grid-week .calendar-day {
        min-height: 140px;
    }

    .calendar-scroll-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1rem;
        padding: 0 1rem;
    }

    .calendar-scroll-wrap .calendar-grid {
        min-width: 520px;
    }

    .calendar-workout-title {
        font-size: 0.68rem;
        -webkit-line-clamp: 3;
    }

    .calendar-workout-meta { display: none; }

    .calendar-strava-chip-stats { display: none; }

    .calendar-workout-actions,
    .calendar-day-add {
        opacity: 1;
    }

    .calendar-workout-actions .btn-icon-sm {
        min-width: 1.85rem;
        min-height: 1.85rem;
    }

    .calendar-weekday {
        padding: 0.45rem 0.2rem;
        font-size: 0.65rem;
    }

    .exercise-category-grid {
        grid-template-columns: 1fr;
    }

    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .modal-overlay.open {
        align-items: flex-end;
    }

    .modal,
    .modal-wide {
        max-width: none;
        width: 100%;
        max-height: min(92vh, 100dvh);
        border-radius: 16px 16px 0 0;
        border-bottom: none;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .modal-header {
        padding-top: 1rem;
        position: sticky;
        top: 0;
        background: var(--surface);
        z-index: 1;
    }

    .modal-footer {
        flex-wrap: wrap;
        justify-content: stretch;
        gap: 0.5rem;
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .modal-footer .btn,
    .modal-footer .btn-strava {
        flex: 1 1 calc(50% - 0.25rem);
        justify-content: center;
        min-width: 0;
    }

    .modal-footer .btn-sm {
        flex: 1 1 100%;
    }

    .form-row { grid-template-columns: 1fr; }

    .strength-exercise-add-row {
        grid-template-columns: 1fr;
    }

    .strength-exercise-add-row .btn {
        width: 100%;
        justify-content: center;
    }

    .strength-exercise-row {
        flex-wrap: wrap;
    }

    .modal-workout .detail-stats,
    .modal-activity .detail-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .modal-workout .detail-stat .value,
    .modal-activity .detail-stat .value {
        font-size: 0.78rem;
    }

    .modal-workout .modal-footer .btn,
    .modal-activity .modal-footer .btn,
    .modal-activity .modal-footer .btn-strava {
        flex: 1 1 calc(50% - 0.25rem);
        min-height: 2rem;
        font-size: 0.78rem;
        padding: 0.4rem 0.65rem;
        justify-content: center;
    }

    .modal-activity .modal-footer #btn-unlink-activity-workout {
        flex: 1 1 100%;
    }

    .modal-workout .modal-footer #btn-delete-workout-modal {
        flex: 1 1 100%;
    }

    .detail-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chart-container {
        height: 200px;
        padding: 0.75rem 0.75rem 0.5rem;
    }

    .toast-container {
        left: 1rem;
        right: 1rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .toast {
        width: 100%;
    }

    .empty-state {
        padding: 2rem 1rem;
    }

    .empty-state .icon { font-size: 2.25rem; }

    .link-workout-list {
        max-height: 50vh;
    }
}

@media (max-width: 480px) {
    .calendar-weekday {
        font-size: 0;
        letter-spacing: 0;
    }

    .calendar-weekday::first-letter {
        font-size: 0.65rem;
    }

    .calendar-day {
        min-height: 72px;
    }

    .calendar-grid-week .calendar-day {
        min-height: 120px;
    }

    .agenda-meta {
        gap: 0.35rem;
        font-size: 0.75rem;
    }

    .badge {
        font-size: 0.65rem;
    }

    .modal-footer .btn,
    .modal-footer .btn-strava {
        flex: 1 1 100%;
    }

    .modal-workout .modal-footer .btn,
    .modal-activity .modal-footer .btn,
    .modal-activity .modal-footer .btn-strava {
        flex: 1 1 calc(50% - 0.25rem);
    }

    .modal-activity .modal-footer #btn-unlink-activity-workout {
        flex: 1 1 100%;
    }

    .modal-workout .modal-footer #btn-delete-workout-modal {
        flex: 1 1 100%;
    }
}

.admin-table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}

.admin-users-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-users-table th,
.admin-users-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.admin-users-table th {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-users-table tr:last-child td {
    border-bottom: none;
}

.admin-status-active { color: var(--success); }
.admin-status-blocked { color: var(--danger); }

.admin-users-table .btn-sm + .btn-sm {
    margin-left: 0.5rem;
}

/* Profile pictures: a circular <img> when one's set, else initials on a
   flat accent-tinted background — same box size either way so layouts
   never jump when an avatar finishes loading (or fails to). */
.avatar-preview,
.avatar-initials,
.avatar-img {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(31, 127, 224, 0.15);
    color: var(--accent);
    font-weight: 700;
    overflow: hidden;
}

.avatar-sm { width: 28px; height: 28px; font-size: 0.7rem; }
.avatar-md { width: 40px; height: 40px; font-size: 0.85rem; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.4rem; }

.avatar-preview:empty::after {
    content: '';
}