/* Infinifit v3 "Ember" design tokens — condensed athletic type, terracotta accent, light-default with dark toggle */
:root {
    /* Ember palette — light (default) */
    --bg: #f6f2ec;
    --stage: #e7e0d6;
    --surface: #ffffff;
    --surface2: #f1ebe3;
    --line: rgba(26, 18, 12, .12);
    --line2: rgba(26, 18, 12, .07);
    --fg: #1a1512;
    --muted-text: #7d7268;
    --accent-c: #b4552f;
    --accent-c-rgb: 180, 85, 47;
    --accent-soft: rgba(180, 85, 47, .10);
    --on-accent: #ffffff;

    --font-display: 'Barlow Condensed', system-ui, sans-serif;
    --font-body: 'Barlow', system-ui, sans-serif;

    /* Back-compat aliases — existing component CSS keeps working unchanged */
    --background: var(--bg);
    --foreground: var(--fg);
    --card: var(--surface);
    --card-foreground: var(--fg);
    --primary: var(--accent-c);
    --primary-foreground: var(--on-accent);
    --secondary: var(--surface2);
    --secondary-foreground: var(--fg);
    --muted: var(--surface2);
    --muted-foreground: var(--muted-text);
    --accent: var(--accent-soft);
    --accent-foreground: var(--fg);
    --destructive: #d4183d;
    --destructive-foreground: #ffffff;
    --border: var(--line);
    --ring: var(--accent-c);
    --radius: 0.125rem;

    /* Override Bootstrap primary */
    --bs-primary: var(--accent-c);
    --bs-primary-rgb: var(--accent-c-rgb);
    --bs-body-bg: var(--background);
    --bs-body-color: var(--foreground);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius);
    --bs-border-radius-lg: calc(var(--radius) + 4px);
    --bs-border-radius-sm: calc(var(--radius) - 4px);

    /* Bootstrap surfaces and body text, bound to Ember so .text-muted, .bg-light and friends
       track the theme instead of staying on Bootstrap's stock greys. */
    --bs-body-color-rgb: 26, 21, 18;
    --bs-body-bg-rgb: 246, 242, 236;
    --bs-emphasis-color: var(--fg);
    /* Bootstrap's own default is `inherit` — keep it that way so headings inside a
       colored/dark container (e.g. .card-header.bg-primary.text-white) pick up that
       ancestor's color instead of always forcing the themed foreground. */
    --bs-heading-color: inherit;
    --bs-secondary-color: var(--muted-text);
    --bs-secondary-bg: var(--surface2);
    --bs-tertiary-bg: var(--stage);
    --bs-link-color: var(--accent-c);
    --bs-link-color-rgb: var(--accent-c-rgb);
    --bs-link-hover-color: var(--accent-hover);

    /* `.bg-light` is used as a subtle *surface* (cards, active rows), so it follows the theme
       — otherwise it paints a white card into a dark app. `.text-dark` stays literally dark
       ink in both themes: it only ever sits on a light-ish solid such as `.bg-warning`. */
    --bs-light: var(--surface2);
    --bs-light-rgb: 241, 235, 227;
    --bs-dark: #1a1512;
    --bs-dark-rgb: 26, 21, 18;

    /* Bootstrap's semantic solids, re-toned out of their stock neon and into the Ember
       range. These carry fixed ink (white, or .text-dark on warning) so they hold the same
       value in both themes — only the surface tokens above flip. */
    --bs-success: #3f7d55;
    --bs-success-rgb: 63, 125, 85;
    --bs-info: #2f6f7a;
    --bs-info-rgb: 47, 111, 122;
    --bs-warning: #d99a2b;
    --bs-warning-rgb: 217, 154, 43;
    --bs-danger: #c02540;
    --bs-danger-rgb: 192, 37, 64;
    --bs-secondary: #6f665d;
    --bs-secondary-rgb: 111, 102, 93;

    /* Accent hues — one ink/surface/line trio each. Ink is the only part that has to invert
       on dark; keeping them as tokens is what stops a blue label going navy-on-black. */
    --hue-blue-ink: #1d4ed8;
    --hue-blue-bg: rgba(59, 130, 246, .10);
    --hue-blue-line: rgba(59, 130, 246, .30);
    --hue-green-ink: #166534;
    --hue-green-bg: rgba(34, 197, 94, .10);
    --hue-green-line: rgba(34, 197, 94, .30);
    --hue-purple-ink: #7c3aed;
    --hue-purple-bg: rgba(168, 85, 247, .10);
    --hue-purple-line: rgba(168, 85, 247, .30);
    --hue-orange-ink: #9a3412;
    --hue-orange-bg: rgba(249, 115, 22, .10);
    --hue-orange-line: rgba(249, 115, 22, .30);
    --hue-amber-ink: #8f5700;
    --hue-amber-bg: rgba(234, 179, 8, .12);
    --hue-amber-line: rgba(234, 179, 8, .35);
    --hue-teal-ink: #0d5f59;
    --hue-teal-bg: rgba(20, 184, 166, .12);
    --hue-teal-line: rgba(20, 184, 166, .35);

    --accent-hover: color-mix(in srgb, var(--accent-c) 88%, black);
    --accent-grad-end: color-mix(in srgb, var(--accent-c) 62%, #5c1f0c);
    --star: #c2740a;
    --destructive-bg: rgba(212, 24, 61, .08);
    --destructive-line: rgba(212, 24, 61, .3);

    /* Elevation. Shadows read as a soft grey wash on cream and have to go near-black on the
       dark stage or every card loses its edge. */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .10);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, .12);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, .06);
    --shadow-up: 0 -2px 12px rgba(0, 0, 0, .08);
    --scrim: rgba(255, 255, 255, .15);

    /* Difficulty badge colors */
    --badge-beginner-bg: var(--hue-green-bg);
    --badge-beginner-color: var(--hue-green-ink);
    --badge-beginner-border: var(--hue-green-line);
    --badge-intermediate-bg: var(--hue-amber-bg);
    --badge-intermediate-color: var(--hue-amber-ink);
    --badge-intermediate-border: var(--hue-amber-line);
    --badge-advanced-bg: rgba(239, 68, 68, 0.1);
    --badge-advanced-color: #b91c1c;
    --badge-advanced-border: rgba(239, 68, 68, 0.3);

    /* Card metrics */
    --card-stat-blue-bg: rgba(59, 130, 246, 0.05);
    --card-stat-blue-border: rgba(59, 130, 246, 0.2);
    --card-stat-green-bg: rgba(34, 197, 94, 0.05);
    --card-stat-green-border: rgba(34, 197, 94, 0.2);
    --card-stat-purple-bg: rgba(168, 85, 247, 0.05);
    --card-stat-purple-border: rgba(168, 85, 247, 0.2);
    --card-focus-gradient: linear-gradient(135deg, rgba(168,85,247,0.05), rgba(59,130,246,0.05));
}

/* Ember palette — dark (opt-in via data-theme="dark" on <html>; theme.js sets data-bs-theme
   to match so Bootstrap's own dark palette comes along). */
:root[data-theme="dark"] {
    --bg: #12100e;
    --stage: #0c0a09;
    --surface: #1b1714;
    --surface2: #242019;
    --line: rgba(255, 255, 255, .10);
    --line2: rgba(255, 255, 255, .06);
    --fg: #f7f3ec;
    --muted-text: #968c80;
    --accent-c: #d9724a;
    --accent-c-rgb: 217, 114, 74;
    --accent-soft: rgba(217, 114, 74, .15);
    --on-accent: #140f0c;

    --bs-body-color-rgb: 247, 243, 236;
    --bs-body-bg-rgb: 18, 16, 14;
    --bs-light-rgb: 36, 32, 25;

    /* Ink inverts: the 700-level hues used on cream go dark-on-dark, so dark takes the
       300-level of the same hue against a slightly stronger tint. */
    --hue-blue-ink: #93c5fd;
    --hue-blue-bg: rgba(59, 130, 246, .18);
    --hue-blue-line: rgba(147, 197, 253, .32);
    --hue-green-ink: #86efac;
    --hue-green-bg: rgba(34, 197, 94, .18);
    --hue-green-line: rgba(134, 239, 172, .32);
    --hue-purple-ink: #d8b4fe;
    --hue-purple-bg: rgba(168, 85, 247, .18);
    --hue-purple-line: rgba(216, 180, 254, .32);
    --hue-orange-ink: #fdba74;
    --hue-orange-bg: rgba(249, 115, 22, .18);
    --hue-orange-line: rgba(253, 186, 116, .32);
    --hue-amber-ink: #fcd34d;
    --hue-amber-bg: rgba(234, 179, 8, .18);
    --hue-amber-line: rgba(252, 211, 77, .32);
    --hue-teal-ink: #5eead4;
    --hue-teal-bg: rgba(20, 184, 166, .18);
    --hue-teal-line: rgba(94, 234, 212, .32);

    --accent-hover: color-mix(in srgb, var(--accent-c) 85%, white);
    --accent-grad-end: color-mix(in srgb, var(--accent-c) 76%, #f6d9c8);
    --star: #fbbf24;
    --destructive: #f4677f;
    --destructive-bg: rgba(244, 103, 127, .12);
    --destructive-line: rgba(244, 103, 127, .35);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .55);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, .6);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, .5);
    --shadow-up: 0 -2px 12px rgba(0, 0, 0, .5);
    --scrim: rgba(0, 0, 0, .45);

    --badge-advanced-bg: rgba(239, 68, 68, .18);
    --badge-advanced-color: #fca5a5;
    --badge-advanced-border: rgba(252, 165, 165, .32);

    --card-stat-blue-bg: rgba(59, 130, 246, .12);
    --card-stat-blue-border: rgba(147, 197, 253, .28);
    --card-stat-green-bg: rgba(34, 197, 94, .12);
    --card-stat-green-border: rgba(134, 239, 172, .28);
    --card-stat-purple-bg: rgba(168, 85, 247, .12);
    --card-stat-purple-border: rgba(216, 180, 254, .28);
    --card-focus-gradient: linear-gradient(135deg, rgba(168, 85, 247, .14), rgba(59, 130, 246, .14));
}

html, body {
    font-family: var(--font-body), system-ui, sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color .15s, color .15s;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display), system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: .005em;
}

/* ===== Layout ===== */
.app-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* space for mobile bottom nav + Android/iOS gesture bar (edge-to-edge) */
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
    .app-layout {
        padding-bottom: 0;
    }
}

/* ===== App Header ===== */
.app-header {
    border-bottom: 1px solid var(--border);
    background: var(--background);
    position: sticky;
    top: 0;
    z-index: 100;
    /* clear the Android/iOS status bar when the app draws edge-to-edge */
    padding-top: env(safe-area-inset-top);
}

.app-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.app-logo:hover {
    color: inherit;
    text-decoration: none;
}

.app-logo-icon {
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
}

.app-logo-text h1 {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: .005em;
    line-height: 1.2;
    margin: 0;
    color: var(--fg);
}

.app-logo-premium {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-c);
    margin: 0;
    line-height: 1.2;
}

/* ===== Desktop Tab Navigation ===== */
.app-tabs-desktop {
    display: none;
}

@media (min-width: 768px) {
    .app-tabs-desktop {
        display: flex;
        gap: 4px;
        flex: 1;
        margin-left: 2rem;
        border-bottom: none;
    }
}

.app-tab-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--muted-text);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.app-tab-link:hover {
    color: var(--fg);
    text-decoration: none;
}

.app-tab-link.active {
    color: var(--fg);
    border-bottom-color: var(--accent-c);
}

.app-tab-link svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ===== Header actions (right side): icon buttons + chips ===== */
.app-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.app-header-icon-btn {
    display: none;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--line);
    color: var(--muted-text);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}

.app-header-icon-btn svg {
    width: 1rem;
    height: 1rem;
}

.app-header-icon-btn:hover,
.app-header-icon-btn.active {
    color: var(--fg);
    border-color: var(--fg);
    text-decoration: none;
}

@media (min-width: 768px) {
    .app-header-icon-btn {
        display: flex;
    }
}

.app-header-chip {
    background: none;
    border: 1px solid var(--line);
    color: var(--muted-text);
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}

.app-header-chip:hover {
    color: var(--fg);
    border-color: var(--fg);
    text-decoration: none;
}

/* ===== Mobile Bottom Navigation ===== */
.app-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--surface);
    border-top: 1px solid var(--line);
    display: grid;
    /* Even columns whatever the item count — six when signed in, two when not. A fixed
       repeat(4, …) squeezed the signed-out pair into the left half and had no room for
       History and Profile. */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    /* clear the Android/iOS gesture navigation bar (edge-to-edge) */
    padding-bottom: env(safe-area-inset-bottom);
}

@media (min-width: 768px) {
    .app-bottom-nav {
        display: none;
    }
}

.app-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.1rem 0.9rem;
    gap: 0.3rem;
    white-space: nowrap;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted-text);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: color 0.15s;
}

.app-bottom-nav-item.active,
.app-bottom-nav-item:hover {
    color: var(--accent-c);
    text-decoration: none;
}

.app-bottom-nav-item svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* Six tabs on a narrow handset: shed the wide letter-spacing before the labels clip */
@media (max-width: 420px) {
    .app-bottom-nav-item {
        font-size: 0.5625rem;
        letter-spacing: .02em;
    }
}

/* ===== Footer ===== */
.app-footer {
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding: 1.25rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--muted-foreground);
}

.app-footer a {
    color: var(--muted-foreground);
    text-decoration: none;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius) - 2px);
    transition: color 0.15s, background-color 0.15s;
}

.app-footer a:hover {
    color: var(--foreground);
    background-color: var(--accent);
    text-decoration: none;
}

.app-footer-sep {
    color: var(--border);
    user-select: none;
}

/* Footer link rendered as a button (e.g. Cookie preferences) — matches .app-footer a */
.app-footer-link {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted-foreground);
    font: inherit;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: calc(var(--radius) - 2px);
    transition: color 0.15s, background-color 0.15s;
}

.app-footer-link:hover {
    color: var(--foreground);
    background-color: var(--accent);
}

/* ===== Cookie consent banner ===== */
.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-up);
    padding: 1rem;
}

.cookie-consent-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cookie-consent-text {
    margin: 0;
    flex: 1 1 20rem;
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.cookie-consent-text a {
    color: var(--foreground);
    font-weight: 500;
}

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}

.cookie-consent-btn {
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid transparent;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.cookie-consent-btn-primary {
    background: var(--primary);
    color: var(--primary-foreground);
}

.cookie-consent-btn-primary:hover {
    opacity: 0.9;
}

.cookie-consent-btn-secondary {
    background: transparent;
    color: var(--foreground);
    border-color: var(--border);
}

.cookie-consent-btn-secondary:hover {
    background: var(--accent);
}

@media (max-width: 480px) {
    .cookie-consent-actions {
        width: 100%;
    }

    .cookie-consent-btn {
        flex: 1 1 auto;
    }
}

/* ===== Action toast ===== */
.action-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 26rem;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-up);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
}

.action-toast-message {
    flex: 1 1 auto;
    color: var(--foreground);
}

.action-toast-action {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    color: var(--bs-danger);
}

.action-toast-action:disabled {
    opacity: 0.5;
    cursor: default;
}

.action-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted-foreground);
    font-size: 1rem;
    line-height: 1;
    padding: 0;
}

/* ===== Main Content Area ===== */
.app-content {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 1.5rem 1rem;
}

/* ===== Cards ===== */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-focus {
    background: var(--card-focus-gradient);
    border-color: var(--hue-purple-line);
}

/* ===== Today (Home) — stat strip ===== */
.today-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    margin-bottom: 1.25rem;
}

.today-stat {
    display: block;
    padding: 0.9rem 1.1rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

@media (max-width: 480px) {
    .today-stat {
        padding: 0.65rem 0.5rem;
    }

    .today-stat-value {
        font-size: 1.375rem;
    }

    .today-stat-label,
    .today-stat-sub {
        font-size: 0.6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

a.today-stat:hover {
    background: var(--accent-soft);
    text-decoration: none;
    color: inherit;
}

.today-stat-label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-text);
}

.today-stat-value {
    margin: 0.35rem 0 0;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: .95;
    color: var(--fg);
}

.today-stat-sub {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--muted-text);
}

/* ===== Today (Home) — hero ===== */
.today-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    margin-bottom: 1rem;
    padding: 1.5rem 1.6rem 1.35rem;
}

.today-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent-c);
}

.today-hero-eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-c);
}

.today-hero-title {
    margin: 0;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: .95;
}

.today-hero-note {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--muted-text);
    max-width: 52ch;
}

.today-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.9rem;
}

.today-hero-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1.15rem;
}

.btn-ember {
    background: var(--accent-c);
    color: var(--on-accent);
    border: none;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s;
}

.btn-ember:hover {
    filter: brightness(1.08);
    color: var(--on-accent);
    text-decoration: none;
}

.btn-ember-outline {
    background: none;
    color: var(--fg);
    border: 1px solid var(--line);
    padding: 0.7rem 1.5rem;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
}

.btn-ember-outline:hover {
    color: var(--accent-c);
    border-color: var(--accent-c);
    text-decoration: none;
}

/* ===== Today (Home) — missions list ===== */
.today-missions {
    border-top: 1px solid var(--line);
    margin-bottom: 1.5rem;
}

.today-mission-row {
    padding: 0.85rem 0.4rem;
    border-bottom: 1px solid var(--line);
}

.today-mission-row-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.today-mission-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.today-mission-value {
    font-size: 0.8rem;
    color: var(--muted-text);
    white-space: nowrap;
}

.today-mission-bar {
    display: block;
    height: 5px;
    background: var(--surface2);
}

.today-mission-bar-fill {
    display: block;
    height: 100%;
    background: var(--accent-c);
}

.today-mission-bar-fill.complete {
    background: var(--accent-c);
}

/* ===== Difficulty Badges ===== */
.badge-difficulty {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.2em 0.6em;
    border-radius: 100px;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.badge-difficulty.beginner {
    background: var(--badge-beginner-bg);
    color: var(--badge-beginner-color);
    border-color: var(--badge-beginner-border);
}

.badge-difficulty.intermediate {
    background: var(--badge-intermediate-bg);
    color: var(--badge-intermediate-color);
    border-color: var(--badge-intermediate-border);
}

.badge-difficulty.advanced {
    background: var(--badge-advanced-bg);
    color: var(--badge-advanced-color);
    border-color: var(--badge-advanced-border);
}

.badge-soft {
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.2em 0.6em;
    border-radius: 100px;
    border: 1px solid var(--line);
    background: var(--muted);
    color: var(--muted-foreground);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.badge-soft.blue {
    background: var(--hue-blue-bg);
    color: var(--hue-blue-ink);
    border-color: var(--hue-blue-line);
}

.badge-soft.purple {
    background: var(--hue-purple-bg);
    color: var(--hue-purple-ink);
    border-color: var(--hue-purple-line);
}

.badge-soft.green {
    background: var(--hue-green-bg);
    color: var(--hue-green-ink);
    border-color: var(--hue-green-line);
}

.badge-soft.orange {
    background: var(--hue-orange-bg);
    color: var(--hue-orange-ink);
    border-color: var(--hue-orange-line);
}

.badge-soft.amber {
    background: var(--hue-amber-bg);
    color: var(--hue-amber-ink);
    border-color: var(--hue-amber-line);
}

/* Training discipline (ExerciseGroup) — its own hue so a discipline badge never reads as a
   muscle group, focus or piece of equipment. */
.badge-soft.teal {
    background: var(--hue-teal-bg);
    color: var(--hue-teal-ink);
    border-color: var(--hue-teal-line);
}

/* ===== Exercise group filter chips ===== */
.group-chip {
    border: 1px solid var(--hue-teal-line);
    background: transparent;
    color: var(--hue-teal-ink);
    cursor: pointer;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 100px;
    line-height: 1.4;
    transition: background 0.12s, color 0.12s;
}

.group-chip:hover {
    background: var(--hue-teal-bg);
}

.group-chip-active {
    background: var(--hue-teal-ink);
    color: var(--bg);
    border-color: var(--hue-teal-ink);
}

/* ===== Favorite Star ===== */
.btn-favorite {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    color: var(--muted-foreground);
    transition: color 0.15s, transform 0.15s;
}

.btn-favorite.active {
    color: var(--star);
}

.btn-favorite:hover {
    transform: scale(1.15);
}

/* ===== Library tabs (Workouts / Exercises) ===== */
.library-tabs {
    display: inline-flex;
    border: 1px solid var(--line);
}

.library-tab {
    padding: 0.5rem 1.1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-text);
    text-decoration: none;
    background: none;
    border: none;
}

.library-tab:hover {
    color: var(--fg);
    text-decoration: none;
}

.library-tab.active {
    background: var(--accent-c);
    color: var(--on-accent);
}

/* ===== Section Headers ===== */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 0.75rem;
    margin-bottom: 1rem;
}

.section-title {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: .95;
    letter-spacing: .005em;
    margin: 0;
}

.section-subtitle {
    font-size: 0.875rem;
    color: var(--muted-text);
    margin-top: 0.35rem;
}

/* ===== Search & Filter ===== */
.search-input-wrapper {
    position: relative;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-foreground);
    pointer-events: none;
    width: 1rem;
    height: 1rem;
}

.search-input-wrapper input {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface2);
}

.search-input-wrapper input:focus {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--accent-c) 45%, transparent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25em 0.75em;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.filter-chip.active {
    background: var(--accent-c);
    color: var(--on-accent);
    border-color: var(--accent-c);
}

/* ===== Equipment Picker ===== */
.chip-count {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0 0.35em;
    border-radius: 100px;
    background: var(--muted);
    color: var(--muted-foreground);
}

.filter-chip.active .chip-count {
    background: color-mix(in srgb, var(--on-accent) 20%, transparent);
    color: inherit;
}

.owned-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

.equipment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.equipment-toggle svg,
.equipment-group-header svg {
    transition: transform 0.15s;
}

.equipment-toggle svg.caret-open,
.equipment-group-header svg.caret-open {
    transform: rotate(180deg);
}

.equipment-picker {
    max-height: 22rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.equipment-group + .equipment-group {
    border-top: 1px solid var(--border);
}

.equipment-group-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem 0;
    border: none;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.equipment-group-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--foreground);
}

.equipment-group-count {
    font-size: 0.7rem;
    margin-left: auto;
}

.filter-chip.equipment-group-all {
    border-style: dashed;
}

.equipment-legend {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--muted-foreground);
}

/* ===== Progress Bars ===== */
.progress {
    height: 8px;
    border-radius: 100px;
    background: var(--muted);
    overflow: hidden;
}

.progress-bar {
    background: var(--primary);
    transition: width 0.4s ease;
}

/* ===== Activity List Items ===== */
.activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-radius: calc(var(--radius) - 2px);
    transition: background 0.12s;
}

.activity-item:hover {
    background: var(--muted);
}

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

.empty-state-icon {
    font-size: 2.5rem;
    opacity: 0.35;
    margin-bottom: 1rem;
    display: block;
}

/* ===== Page Loading Spinner ===== */
.page-loading {
    text-align: center;
    padding: 4rem 1rem;
}

/* ===== Buttons ===== */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-foreground);
}

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

.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

a, .btn-link {
    color: var(--accent-c);
}

/* ===== Forms ===== */
.form-control:focus, .form-select:focus {
    border-color: color-mix(in srgb, var(--accent-c) 45%, transparent);
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}

/* ===== Blazor error UI ===== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ===== Misc ===== */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e51840; }
.validation-message { color: #e51840; }
h1:focus { outline: none; }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Bootstrap's `.text-*` helpers are the *ink* form of each semantic colour — they sit
   straight on the page background, so unlike the `.bg-*` solids they have to invert with the
   theme. Bootstrap only re-tones its `-text-emphasis` variants on dark and leaves these at
   their light-mode value, which is what left labels sitting dark-on-dark. */
.text-success { color: var(--hue-green-ink) !important; }
.text-info { color: var(--hue-teal-ink) !important; }
.text-warning { color: var(--hue-amber-ink) !important; }
.text-danger { color: var(--destructive) !important; }
.text-primary { color: var(--accent-c) !important; }

/* Custom Bootstrap color helpers kept for backward compat */
.bg-orange { background-color: #dc6502 !important; color: white; }
.btn-orange { background-color: #dc6502 !important; color: white; border-color: #c45a02 !important; }
.btn-orange:hover { background-color: #c45a02 !important; color: white; }

/* ===== Workout Session Fullscreen (Mobile) ===== */
/* Hide header and bottom nav when in an active workout session on mobile */
@media (max-width: 767.98px) {
    body.workout-session-active .app-header {
        display: none;
    }

    body.workout-session-active .app-bottom-nav {
        display: none;
    }

    body.workout-session-active .app-layout {
        padding-bottom: 0;
    }

    body.workout-session-active .app-content {
        padding: 0;
    }
}

/* ── Premium Gate ── */
.premium-gate {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
}

.premium-gate-blur {
    filter: blur(4px);
    pointer-events: none;
    user-select: none;
    opacity: 0.4;
}

.premium-gate-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--scrim);
    backdrop-filter: blur(2px);
}

.premium-gate-content {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    text-align: center;
    max-width: 360px;
    box-shadow: var(--shadow-lg);
}

.premium-gate-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.premium-gate-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--foreground);
}

.premium-gate-message,
.premium-gate-usage {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin-bottom: 0.75rem;
}

.premium-gate-cta {
    display: inline-block;
    background: var(--primary);
    color: var(--primary-foreground);
    padding: 0.5rem 1.5rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}

.premium-gate-cta:hover {
    opacity: 0.85;
    color: var(--primary-foreground);
}

/* ── Upgrade Page ── */
.upgrade-page {
    max-width: 700px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.upgrade-hero {
    text-align: center;
    margin-bottom: 2rem;
}

.upgrade-hero-badge {
    display: inline-block;
    background: var(--secondary);
    border-radius: 2rem;
    padding: 0.25rem 0.875rem;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--foreground);
}

.upgrade-hero-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.upgrade-hero-subtitle {
    color: var(--muted-foreground);
    font-size: 1rem;
    max-width: 480px;
    margin: 0 auto;
}

.upgrade-pricing-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px);
    padding: 2rem;
    text-align: center;
    margin-bottom: 2.5rem;
    box-shadow: var(--shadow-card);
}

.upgrade-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
}

.upgrade-price-amount {
    font-size: 2.75rem;
    font-weight: 700;
}

.upgrade-price-period {
    font-size: 1rem;
    color: var(--muted-foreground);
}

.upgrade-price-note {
    font-size: 0.8rem;
    color: var(--muted-foreground);
    margin-bottom: 0;
}

.upgrade-cta {
    font-size: 1rem;
    padding: 0.625rem 2rem;
    border-radius: var(--radius);
}

.upgrade-message {
    font-size: 0.875rem;
}

.upgrade-features-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    text-align: center;
}

.upgrade-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 576px) {
    .upgrade-features-grid {
        grid-template-columns: 1fr;
    }
}

.upgrade-feature-group {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}

.upgrade-feature-group.premium {
    border-color: var(--foreground);
}

.upgrade-feature-group-badge {
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.upgrade-feature-group-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.upgrade-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.upgrade-feature-item {
    font-size: 0.85rem;
    padding-left: 1.25rem;
    position: relative;
}

.upgrade-feature-item.included::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--hue-green-ink);
    font-weight: 700;
}

.upgrade-feature-item.limited::before {
    content: "⚡";
    position: absolute;
    left: 0;
}

.upgrade-feature-item.locked {
    color: var(--muted-foreground);
}

.upgrade-feature-item.locked::before {
    content: "🔒";
    position: absolute;
    left: 0;
    font-size: 0.75rem;
}

/* ===== Workout Session Layout ===== */
.workout-session-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@media (max-width: 767.98px) {
    .workout-session-page {
        min-height: 100dvh;
    }
}

/* Rep target card — the number you are chasing, sized to be read at arm's length */
.session-rep-target {
    border: 1px solid var(--accent-c);
    background: var(--card-focus-gradient, var(--surface));
    border-radius: 0.5rem;
    padding: 0.9rem 1rem;
    text-align: center;
}

.session-rep-target-label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-c);
}

.session-rep-target-value {
    margin: 0.15rem 0 0;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: clamp(2.75rem, 12vw, 4rem);
    font-weight: 700;
    line-height: 1;
}

.session-rep-target-unit {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted-text);
    margin-left: 0.5rem;
}

.session-actual-reps-input {
    width: 7rem;
    font-weight: 700;
    text-align: center;
}

/* Sticky top session bar (mobile) */
.session-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 1rem;
    /* drop the bar (and its quit button) below the status bar when edge-to-edge */
    padding-top: calc(0.6rem + env(safe-area-inset-top));
    background: var(--background);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 50;
    gap: 0.5rem;
}

.session-top-bar .session-title {
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.session-top-bar .session-round-badge {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--primary);
    color: var(--primary-foreground);
    border-radius: 100px;
    padding: 0.2em 0.7em;
    flex-shrink: 0;
}

.session-top-bar .session-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.session-top-bar .btn-session-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s;
    padding: 0;
    color: var(--foreground);
}

.session-top-bar .btn-session-icon:hover {
    background: var(--muted);
}

.session-top-bar .btn-session-icon.danger {
    color: var(--destructive);
    border-color: var(--destructive-line);
}

.session-top-bar .btn-session-icon.danger:hover {
    background: var(--destructive-bg);
}

.session-top-bar .btn-session-icon.play {
    color: var(--hue-green-ink);
    border-color: var(--hue-green-line);
}

.session-top-bar .btn-session-icon.play:hover {
    background: var(--hue-green-bg);
}

/* Session body padding on mobile */
.session-body {
    flex: 1;
    padding: 1rem;
}

@media (min-width: 768px) {
    .session-top-bar {
        display: none; /* desktop keeps the original inline layout */
    }
}

/* ===== Today (Home) — quick action tiles ===== */
.dashboard-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .dashboard-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.dashboard-action {
    display: block;
    width: 100%;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--line);
    background: none;
    color: inherit;
    text-decoration: none;
    text-align: left;
    transition: border-color 0.15s;
}

.dashboard-action:hover {
    border-color: var(--accent-c);
    color: inherit;
    text-decoration: none;
}

.dashboard-action-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    line-height: 1.15;
}

/* ===== Create landing — route picker ===== */
.create-routes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

/* One equal column per route, however many are visible (the "Other" tile is flag-dependent). */
@media (min-width: 640px) {
    .create-routes {
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}

.create-route {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--line);
    background: none;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s, background 0.15s;
}

.create-route:hover {
    border-color: var(--accent-c);
    color: inherit;
    text-decoration: none;
}

.create-route.active {
    border-color: var(--accent-c);
    background: var(--accent-soft);
}

.create-route.active .create-route-label {
    color: var(--accent-c);
}

.create-route-label {
    margin: 0;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
}

.create-route-note {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--muted-text);
}

/* The embedded builders bring their own .container-fluid padding; strip the leading gap so the
   panel sits tight under the route picker. */
.create-panel > .container-fluid {
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

/* Favourite / no-go toggles on an exercise row. Muted until set, so a list of mostly-unset
   exercises stays quiet and the ones the user has marked stand out. */
.pref-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted-text);
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.15rem;
    opacity: .45;
    transition: opacity 0.15s, color 0.15s;
}

.pref-btn:hover {
    opacity: 1;
    color: var(--fg);
}

.pref-btn-active-fav {
    color: var(--accent-c);
    opacity: 1;
}

.pref-btn-active-nogo {
    color: var(--destructive);
    opacity: 1;
}

/* ===== Live session: current exercise ===== */
.sess-panel {
    border: 1px solid var(--line);
    background: var(--surface);
}

.sess-panel-body {
    padding: 1.5rem 1.35rem;
    text-align: center;
}

.sess-eyebrow {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent-c);
}

/* Sized off the viewport so it stays readable from the floor, and capped so it does not swamp a
   desktop window. */
.sess-clock {
    margin: 0.4rem 0 0;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: min(22vw, 8rem);
    font-weight: 700;
    line-height: .85;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}

.sess-clock.is-urgent {
    color: var(--destructive);
}

.sess-move {
    margin: 0.6rem 0 0;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: clamp(1.4rem, 5vw, 2.25rem);
    font-weight: 600;
    line-height: 1.05;
}

.sess-move-desc {
    margin: 0.5rem auto 0;
    max-width: 44ch;
    font-size: 0.9rem;
    color: var(--muted-text);
}

/* ===== Performance report ===== */
.rp-week {
    margin: 0 0 0.9rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-text);
}

.rp-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .rp-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.rp-stat {
    padding: 0.9rem 1.1rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.rp-stat-label {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-text);
}

.rp-stat-value {
    margin: 0.35rem 0 0;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: .95;
}

.rp-stat-delta {
    margin: 0.3rem 0 0;
    font-size: 0.72rem;
    color: var(--muted-text);
}

.rp-charts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
    .rp-charts {
        grid-template-columns: 1.4fr 1fr;
    }
}

.rp-panel {
    border: 1px solid var(--line);
    background: var(--surface);
    padding: 1.15rem 1.25rem;
}

.rp-panel-title {
    margin: 0;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
}

.rp-panel-note {
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    color: var(--muted-text);
}

.rp-empty {
    margin: 1rem 0 0;
    font-size: 0.8rem;
    color: var(--muted-text);
}

/* --- Sessions-per-week bars --- */
.rp-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    height: 10rem;
    margin-top: 1.1rem;
}

.rp-bar-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0.45rem;
    height: 100%;
}

.rp-bar {
    width: 100%;
    background: var(--surface2);
    min-height: 2px;
}

.rp-bar.current {
    background: var(--accent-c);
}

.rp-bar-label {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* --- Focus balance bars --- */
.rp-focus {
    margin-top: 0.9rem;
}

.rp-focus-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.3rem;
}

.rp-focus-label {
    font-size: 0.82rem;
    font-weight: 600;
}

.rp-focus-count {
    font-size: 0.75rem;
    color: var(--muted-text);
}

.rp-focus-track {
    display: block;
    height: 6px;
    background: var(--surface2);
}

.rp-focus-fill {
    display: block;
    height: 100%;
    background: var(--accent-c);
}

/* --- Session list --- */
.rp-sessions {
    margin-top: 0.9rem;
    border-top: 1px solid var(--line2);
}

.rp-session {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.15rem;
    border-bottom: 1px solid var(--line2);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s;
}

.rp-session:hover {
    background: var(--accent-soft);
    color: inherit;
    text-decoration: none;
}

.rp-session-name {
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-session-type {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-text);
}

/* ===== Exercise library: list + detail ===== */
.ex-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 992px) {
    .ex-layout {
        grid-template-columns: minmax(0, 1fr) 21rem;
    }
}

.ex-list {
    border-top: 1px solid var(--line);
    min-width: 0;
}

.ex-row {
    display: grid;
    align-items: center;
    gap: 0.2rem 1rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--line);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "main actions"
        "meta actions";
    transition: background 0.15s;
}

@media (min-width: 768px) {
    .ex-row {
        grid-template-columns: minmax(0, 1fr) 7rem 8rem auto;
        grid-template-areas: "main focus equip actions";
    }
}

.ex-row:hover {
    background: var(--accent-soft);
}

.ex-row.active {
    background: var(--accent-soft);
    box-shadow: inset 3px 0 0 var(--accent-c);
}

.ex-row-nogo .ex-row-name {
    color: var(--muted-text);
}

.ex-row-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.ex-row-name-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.ex-row-name {
    font-size: 1rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-row-tag {
    flex: none;
    border: 1px solid var(--line);
    color: var(--muted-text);
    padding: 0.05rem 0.35rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ex-row-tag-mastered {
    border-color: var(--accent-c);
    color: var(--accent-c);
    letter-spacing: 0;
}

.ex-row-summary {
    font-size: 0.78rem;
    color: var(--muted-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-row-meta {
    font-size: 0.75rem;
    color: var(--muted-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-row-focus {
    grid-area: focus;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ex-row-equip {
    grid-area: equip;
}

@media (max-width: 767.98px) {
    .ex-row-meta {
        grid-area: meta;
        display: inline;
        font-size: 0.72rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
    }

    .ex-row-focus:not(:empty)::after {
        content: " · ";
    }
}

.ex-row-actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* --- Detail pane --- */
.ex-detail {
    border: 1px solid var(--line);
    background: var(--surface);
}

@media (min-width: 992px) {
    .ex-detail {
        position: sticky;
        top: 5rem;
        max-height: calc(100vh - 7rem);
        overflow-y: auto;
    }
}

/* Below the two-column breakpoint the pane is a sheet over the list, opened by picking a row —
   there is no room to show both at once. */
@media (max-width: 991.98px) {
    .ex-detail {
        display: none;
    }

    .ex-detail.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 300;
        overflow-y: auto;
        border: none;
        padding-bottom: calc(5rem + env(safe-area-inset-bottom));
    }
}

.ex-detail-close {
    display: none;
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--fg);
    cursor: pointer;
    font-size: 0.9rem;
}

@media (max-width: 991.98px) {
    .ex-detail.is-open .ex-detail-close {
        display: block;
    }
}

.ex-detail-head {
    padding: 1.25rem 1.35rem 1.1rem;
    border-bottom: 1px solid var(--line2);
}

.ex-detail-eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent-c);
}

.ex-detail-name {
    margin: 0;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.05;
}

.ex-detail-summary {
    margin: 0.6rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--muted-text);
}

.ex-detail-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--line2);
}

.ex-detail-strip > div {
    padding: 0.7rem 0.85rem;
    border-right: 1px solid var(--line2);
    min-width: 0;
}

.ex-detail-strip > div:last-child {
    border-right: none;
}

.ex-detail-strip-label {
    margin: 0;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-text);
}

.ex-detail-strip-value {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ex-detail-section {
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--line2);
}

/* Illustrated exercise animation (Components/ExerciseAnimation.razor) */
.exercise-animation {
    aspect-ratio: 4 / 3;
    max-width: 100%;
    background: var(--stage);
    border-bottom: 1px solid var(--line2);
}

.exercise-animation canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* Inline placements (exercise pickers, the workout session) frame the clip as a card of its own
   and cap its size, so it illustrates the move without pushing the clock or the list away. */
.exercise-animation.is-inline {
    width: 100%;
    max-width: 320px;
    margin: 0.75rem auto 0;
    border: 1px solid var(--line2);
    border-radius: 0.75rem;
    overflow: hidden;
}

.ex-detail-section-label {
    margin: 0 0 0.6rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-text);
}

.ex-detail-guidance {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    white-space: pre-line;
}

/* pre-line above would turn the markup's whitespace between <li>s into blank lines. */
.ex-detail-list {
    white-space: normal;
    padding-left: 1.25rem;
}

.ex-detail-list li + li {
    margin-top: .25rem;
}

.ex-detail-history {
    margin: 0;
    font-size: 0.85rem;
    color: var(--muted-text);
}

.ex-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ex-chip {
    border: 1px solid var(--line);
    color: var(--muted-text);
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
}

.ex-chip-primary {
    border-color: var(--accent-c);
    color: var(--accent-c);
}

.ex-detail-actions {
    padding: 1.1rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ex-detail-fav {
    background: none;
    border: 1px solid var(--line);
    color: var(--muted-text);
    padding: 0.65rem 1rem;
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color 0.15s, border-color 0.15s;
}

.ex-detail-fav:hover,
.ex-detail-fav.active {
    color: var(--accent-c);
    border-color: var(--accent-c);
}

.ex-detail-video {
    text-align: center;
    border: 1px solid var(--line);
    color: var(--muted-text);
    padding: 0.65rem 1rem;
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.ex-detail-video:hover {
    color: var(--fg);
    border-color: var(--fg);
    text-decoration: none;
}

/* ===== Workout library rows ===== */
.wr-list {
    border-top: 1px solid var(--line);
}

.wr-row {
    position: relative;
    display: grid;
    align-items: center;
    gap: 0.25rem 1rem;
    padding: 0.9rem 0.5rem;
    border-bottom: 1px solid var(--line);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name actions"
        "meta actions";
    transition: background 0.15s;
}

.wr-row:hover {
    background: var(--accent-soft);
}

@media (min-width: 992px) {
    .wr-row {
        grid-template-columns: minmax(0, 1fr) 6rem 9rem 6.5rem 4.5rem auto;
        grid-template-areas: "name format equip level mins actions";
    }
}

.wr-name {
    grid-area: name;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Stretches the name button's hit area over the whole row, so anywhere that is not one of the
   trailing action buttons opens the workout. */
.wr-name::after {
    content: "";
    position: absolute;
    inset: 0;
}

.wr-name-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.wr-name-text {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wr-tag {
    flex: none;
    border: 1px solid var(--line);
    color: var(--muted-text);
    padding: 0.1rem 0.4rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.wr-tag-ai {
    border-color: var(--accent-c);
    color: var(--accent-c);
}

.wr-desc {
    font-size: 0.8rem;
    color: var(--muted-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wr-missing {
    font-size: 0.72rem;
    color: var(--muted-text);
}

.wr-row-missing .wr-missing::before {
    content: "⚠ ";
}

/* Lets the four meta spans sit in their own grid columns at >=992px, where this wrapper
   is not a box of its own. Below that it becomes the single "meta" cell (see below). */
.wr-metas {
    display: contents;
}

.wr-meta {
    font-size: 0.8rem;
    color: var(--muted-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wr-meta-format,
.wr-meta-level {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.wr-mins {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Below the grid breakpoint the columns collapse onto one muted line under the name. The
   wrapper takes the grid cell so the spans flow as text inside it — placing each of them in
   the "meta" area directly would stack them all in the same cell, on top of one another. */
@media (max-width: 991.98px) {
    .wr-metas {
        grid-area: meta;
        display: block;
        min-width: 0;
    }

    .wr-meta,
    .wr-mins {
        display: inline;
        font-family: var(--font-body), system-ui, sans-serif;
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--muted-text);
        overflow: visible;
        white-space: normal;
    }

    .wr-meta:not(:empty)::after {
        content: " · ";
    }
}

.wr-actions {
    grid-area: actions;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wr-start {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--accent-c);
    color: var(--on-accent);
    border: none;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: filter 0.15s;
}

.wr-start:hover {
    filter: brightness(1.08);
}

@media (max-width: 575.98px) {
    .wr-start-label {
        display: none;
    }
}

.wr-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: none;
    border: 1px solid var(--line);
    color: var(--muted-text);
    cursor: pointer;
    font-size: 0.8rem;
    transition: color 0.15s, border-color 0.15s;
}

.wr-icon-btn:hover:not(:disabled) {
    color: var(--fg);
    border-color: var(--fg);
}

.wr-icon-btn-danger:hover:not(:disabled) {
    color: var(--destructive);
    border-color: var(--destructive);
}

/* ===== Workout details panel (create / edit) ===== */

/* Editorial name + description at the top of the main column, matching how the AI draft review
   screen treats the workout it is proposing: the name is the headline, not a labelled field. */
.wd-editorial {
    margin-bottom: 1.5rem;
}

.wd-name-input {
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px dashed var(--line);
    color: var(--fg);
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.05;
    padding: 0 0 0.35rem;
    outline: none;
}

.wd-name-input::placeholder {
    color: var(--muted-text);
    opacity: .5;
}

.wd-name-input:focus {
    border-bottom-color: var(--accent-c);
}

.wd-description-input {
    width: 100%;
    margin-top: 0.9rem;
    background: none;
    border: none;
    color: var(--muted-text);
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0;
    outline: none;
    resize: vertical;
}

.wd-description-input::placeholder {
    color: var(--muted-text);
    opacity: .6;
}

/* Plain block in the normal document flow — an earlier sticky treatment kept overlapping the
   cards below it while scrolling, so it now just scrolls with the page like everything else. */
.wd-aside {
    border: 1px solid var(--line);
    background: var(--surface);
}

.wd-aside-title {
    margin: 0;
    padding: 1rem 1.15rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-text);
    border-bottom: 1px solid var(--line2);
}

.wd-aside-body {
    padding: 1.15rem;
}

.wd-field {
    margin-bottom: 1.35rem;
}

.wd-field:last-child {
    margin-bottom: 0;
}

.wd-label {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg);
}

.wd-label-unit {
    letter-spacing: .08em;
    color: var(--muted-text);
    font-weight: 500;
}

.wd-help {
    margin-top: 0.45rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--muted-text);
}

/* A value the protocol fixes rather than one the user enters. */
.wd-readout {
    margin: 0;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
}

/* ===== Number stepper ===== */
.stepper {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line);
    max-width: 11rem;
}

.stepper-btn {
    flex: none;
    width: 2.4rem;
    background: none;
    border: none;
    color: var(--muted-text);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: color 0.15s, background 0.15s;
}

.stepper-btn:hover:not(:disabled) {
    background: var(--accent-soft);
    color: var(--accent-c);
}

.stepper-btn:disabled {
    opacity: .35;
    cursor: default;
}

.stepper-input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    color: var(--fg);
    text-align: center;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.5rem 0.25rem;
    outline: none;
}

.stepper-input:focus {
    background: var(--accent-soft);
}

/* The spinners duplicate the buttons either side of the field. */
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.stepper-input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ===== Smart workout form ===== */
.gen-field {
    margin-bottom: 1.75rem;
}

.gen-label {
    margin: 0 0 0.6rem;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.gen-label-hint {
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted-text);
}

.gen-minutes {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.gen-minutes-value {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: .9;
    font-variant-numeric: tabular-nums;
}

.gen-minutes-unit {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted-text);
}

.gen-slider {
    width: 100%;
    margin-top: 0.75rem;
    accent-color: var(--accent-c);
}

/* Square, uppercase selector shared by style / space / focus / equipment. */
.gen-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    border: 1px solid var(--line);
    background: none;
    color: var(--muted-text);
    padding: 0.55rem 0.95rem;
    cursor: pointer;
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.chip:hover {
    color: var(--fg);
    border-color: var(--fg);
}

.chip.active {
    background: var(--accent-c);
    border-color: var(--accent-c);
    color: var(--on-accent);
}

.gen-presets {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

@media (min-width: 560px) {
    .gen-presets {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    }
}

.gen-preset {
    display: block;
    text-align: left;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--line);
    background: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.gen-preset:hover {
    border-color: var(--accent-c);
}

.gen-preset.active {
    border-color: var(--accent-c);
    background: var(--accent-soft);
}

.gen-preset-name {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
}

.gen-preset.active .gen-preset-name {
    color: var(--accent-c);
}

.gen-preset-note {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--muted-text);
}

/* Top rule only: the action bar below carries its own, and stacking both put three rules within a
   couple of rows of each other. */
.gen-disclosure {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.75rem 0;
    border: none;
    border-top: 1px solid var(--line);
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.85rem;
    color: var(--muted-text);
}

.gen-disclosure:hover {
    color: var(--fg);
}

.gen-disclosure-action {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-c);
}

.gen-prompt-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.gen-prompt-textarea {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    min-height: 5.5rem;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--bg);
    color: var(--fg);
    font: inherit;
    font-size: 0.9rem;
}

.gen-prompt-textarea:focus {
    outline: none;
    border-color: var(--accent-c);
}

.gen-equipment {
    padding-top: 1rem;
}

.gen-equipment-group {
    margin: 1rem 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-text);
}

.gen-equipment-group:first-child {
    margin-top: 0;
}

/* Pinned to the bottom of the viewport while the form is in view, so the form can be as long as
   it needs to be without the action scrolling away. Clears the mobile bottom nav. */
.gen-actionbar {
    position: sticky;
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
    padding: 0.85rem 0 calc(0.85rem + env(safe-area-inset-bottom));
    /* Opaque, so the form scrolls underneath rather than through it — but in the page's own colour
       rather than the panel colour, which read as a floating card against a design that otherwise
       separates everything with rules alone. */
    background: var(--bg);
    border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
    .gen-actionbar {
        bottom: 0;
    }
}

.gen-summary {
    margin: 0 0 0.6rem;
    font-size: 0.8rem;
    color: var(--muted-text);
}

.gen-generate {
    width: 100%;
}

.gen-actionbar-note {
    margin: 0.5rem 0 0;
    font-size: 0.72rem;
    color: var(--muted-text);
}

/* Once there is room, the summary sits beside the action instead of above it — stacked, the three
   rows make the bar tall enough to read as a block rather than a footer. */
@media (min-width: 560px) {
    .gen-actionbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 1.5rem;
    }

    .gen-summary {
        margin: 0;
    }

    .gen-generate {
        width: auto;
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }

    .gen-actionbar-note {
        grid-column: 1 / -1;
        margin-top: 0.55rem;
    }
}

/* ===== Create landing — inline template list ===== */
.create-template-list {
    border-top: 1px solid var(--line);
}

.create-template-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 1.25rem;
    text-align: left;
    font: inherit;
    cursor: pointer;
    padding: 1rem 0.5rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line);
    color: inherit;
    transition: background 0.15s;
}

.create-template-row:hover {
    background: var(--accent-soft);
}

/* A row that navigates rather than acts, with only a name and a chevron. */
.create-template-row.is-link {
    text-decoration: none;
}

.create-template-row.is-link:hover {
    color: inherit;
}

@media (min-width: 768px) {
    .create-template-row {
        grid-template-columns: minmax(0, 1fr) 6.5rem 7rem 7rem 1rem;
    }

    .create-template-row.is-link {
        grid-template-columns: minmax(0, 1fr) 1rem;
    }
}

.create-template-main {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.create-template-name {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
}

.create-template-desc {
    font-size: 0.8rem;
    color: var(--muted-text);
}

.create-template-meta {
    font-size: 0.8rem;
    color: var(--muted-text);
}

.create-template-meta.uppercase {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* The chevron and the secondary columns are noise on a narrow screen — the name and description
   carry the row there. */
@media (max-width: 767.98px) {
    .create-template-row > svg {
        display: none;
    }

    .create-template-meta {
        display: none;
    }
}

.dashboard-action-label {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
}

.dashboard-action-subtitle {
    margin-top: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted-text);
}
/* ===== Dashboard — Progress bar category colors ===== */
.progress-bar-strength  { background: #2563eb; }
.progress-bar-endurance { background: #059669; }
.progress-bar-stability { background: #7c3aed; }
.progress-bar-mobility  { background: #d97706; }
.progress-bar-power     { background: #dc2626; }
.progress-bar-default   { background: var(--primary); }

/* ===== Dashboard — Trained Section pill toggle ===== */
.pill-toggle {
    display: inline-flex;
    background: var(--muted);
    border-radius: 100px;
    padding: 2px;
    gap: 2px;
}

.pill-toggle-btn {
    border: none;
    background: transparent;
    border-radius: 100px;
    padding: 0.2rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}

.pill-toggle-btn.active {
    background: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-sm);
}


/* ===== AMRAP Board ===== */
.amrap-board {
    max-width: 32rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    text-align: center;
}

.amrap-clock {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
}

.amrap-clock.is-urgent {
    color: var(--destructive);
}

.amrap-clock-label {
    margin-top: -0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-foreground);
}

.amrap-rounds {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.amrap-rounds-value {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.amrap-rounds-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-foreground);
}

.amrap-exercise-list {
    list-style: none;
    counter-reset: amrap-exercise;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-align: left;
}

.amrap-exercise {
    counter-increment: amrap-exercise;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
}

.amrap-exercise + .amrap-exercise {
    border-top: 1px solid var(--line2);
}

.amrap-exercise-name::before {
    content: counter(amrap-exercise) ".";
    margin-right: 0.5rem;
    color: var(--muted-foreground);
    font-variant-numeric: tabular-nums;
}

.amrap-exercise-name {
    font-weight: 500;
}

.amrap-exercise-volume {
    flex-shrink: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
}

.amrap-round-button {
    min-height: 5rem;
    width: 100%;
    border: none;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--accent-c), var(--accent-grad-end));
    color: var(--on-accent);
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    box-shadow: var(--shadow-md);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.amrap-round-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.amrap-round-button:active {
    transform: translateY(0);
}

/* ===== Interval Board (EMOM/Tabata) ===== */
.interval-board {
    max-width: 32rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    text-align: center;
}

.interval-phase-label {
    align-self: center;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.interval-phase-label.is-work {
    background: var(--accent-soft);
    color: var(--primary);
}

.interval-phase-label.is-rest {
    background: var(--hue-amber-bg);
    color: var(--hue-amber-ink);
}

.interval-clock {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
}

.interval-clock.is-urgent {
    color: var(--destructive);
}

.interval-current-exercise {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.interval-exercise-name {
    font-size: 1.5rem;
    font-weight: 700;
}

.interval-exercise-volume {
    font-size: 1rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--muted-foreground);
}

.interval-progress {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--muted-foreground);
}

.interval-progress-value {
    font-weight: 600;
}

.interval-intensity-cue {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--primary);
}

/* ===== Bootstrap alignment =====
   The pages the v3 design never covered (history, quick-log, auth, profile, activity detail) are
   built from stock Bootstrap chrome. Rather than hand-editing each one, the shared classes are
   pulled onto the Ember tokens here: flat bordered surfaces instead of rounded drop-shadowed ones,
   uppercase micro-labels, and the accent on primary actions. Bootstrap's stylesheet is linked
   before this file, so these win on equal specificity. */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}

.card:hover {
    box-shadow: none;
}

.card-header {
    background: var(--surface2);
    border-bottom: 1px solid var(--line);
    padding: 0.75rem 1.1rem;
}

.card-header h1, .card-header h2, .card-header h3,
.card-header h4, .card-header h5, .card-header h6 {
    margin: 0;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.form-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg);
    margin-bottom: 0.4rem;
}

.form-text {
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--muted-text);
}

.form-control,
.form-select {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--fg);
}

.form-control::placeholder {
    color: var(--muted-text);
    opacity: .6;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface);
    border-color: var(--accent-c);
    color: var(--fg);
    box-shadow: 0 0 0 0.2rem var(--accent-soft);
}

.alert {
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.btn {
    border-radius: var(--radius);
}

.btn-success {
    background-color: var(--accent-c);
    border-color: var(--accent-c);
    color: var(--on-accent);
}

.btn-success:hover,
.btn-success:focus {
    background-color: color-mix(in srgb, var(--accent-c) 88%, black);
    border-color: color-mix(in srgb, var(--accent-c) 88%, black);
    color: var(--on-accent);
}

.btn-outline-primary,
.btn-outline-secondary {
    border-color: var(--line);
    color: var(--muted-text);
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
    background-color: var(--accent-soft);
    border-color: var(--accent-c);
    color: var(--accent-c);
}

/* Bootstrap's .text-muted resolves against its own theme variables, which drift from the Ember
   muted tone — especially in dark mode. */
.text-muted {
    color: var(--muted-text) !important;
}

/* ===== Beep test (issue #484) ===== */
.beep-back-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: var(--muted-text);
    text-decoration: none;
}

.beep-back-link:hover {
    color: var(--accent-c);
}

.beep-setup-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 640px) {
    .beep-setup-fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.beep-setup-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--muted-text);
}

.beep-setup-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 0 0 1.25rem;
    padding: 1rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

@media (min-width: 640px) {
    .beep-setup-preview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.beep-setup-preview dt,
.beep-run-stats dt {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-text);
}

.beep-setup-preview dd,
.beep-run-stats dd {
    margin: 0;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.beep-setup-tips {
    margin: 0 0 1.5rem;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    color: var(--muted-text);
}

.beep-setup-tips li + li {
    margin-top: 0.3rem;
}

/* The run screen is full-screen (workout-session-active hides the nav) and read from a distance. */
.beep-run {
    max-width: 32rem;
    min-height: 70vh;
    margin: 0 auto;
    /* The session layout drops the page gutter, so the screen supplies its own. */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}

.beep-run-kicker {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-text);
}

.beep-run-title {
    margin: 0;
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
}

.beep-run-hint {
    margin: 0;
    color: var(--muted-text);
}

.beep-run-countdown,
.beep-run-score {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 7rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
}

.beep-run-level {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
}

.beep-run-level.is-level-up {
    font-size: 3.25rem;
    color: var(--on-accent);
    background: var(--accent-c);
    padding: 0.5rem 0;
}

.beep-run-shuttle {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.beep-run-shuttle span {
    color: var(--muted-text);
}

.beep-run-bar {
    height: 1.25rem;
    background: var(--accent-soft);
    overflow: hidden;
}

/* Yo-Yo recovery: a calmer bar so a glance tells running from resting. */
.beep-run-bar.is-recovering .beep-run-bar-fill {
    background: var(--hue-green-ink);
}

/* No width transition: the 100 ms ticks are already smooth, and easing would lag the beep. */
.beep-run-bar-fill {
    height: 100%;
    background: var(--accent-c);
}

.beep-run-next {
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    color: var(--muted-text);
}

.beep-run-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
}

.beep-run-main-button {
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
    font-size: 1.35rem;
    font-weight: 700;
}

.beep-run-badge {
    align-self: center;
    padding: 0.3rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--accent-soft);
    color: var(--primary);
}

.beep-run-adjust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-variant-numeric: tabular-nums;
}

.beep-run-adjust .btn {
    min-width: 3rem;
    font-size: 1.25rem;
}

.beep-run-notes {
    resize: vertical;
}

/* Push-up test: the whole middle of the screen counts a push-up, big enough to touch with your chest. */
.fitness-tap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 45vh;
    width: 100%;
    border: 2px dashed var(--line);
    border-radius: 1.25rem;
    background: var(--accent-soft);
    color: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.fitness-tap:active {
    background: var(--line);
}

.fitness-tap-hint {
    color: var(--muted-text);
    font-size: 0.95rem;
}

/* Step test: the counted pulse. */
.fitness-pulse-input {
    max-width: 10rem;
    align-self: center;
    font-size: 2rem;
    font-variant-numeric: tabular-nums;
}

/* Beep test on the activity page */
.beep-detail {
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
}

.beep-detail-headline {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.beep-detail-headline .beep-run-badge {
    display: inline-block;
    margin-top: 0.4rem;
}

.beep-detail-score {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--primary);
}

.beep-detail-level {
    font-family: var(--font-display), system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
}

.beep-detail-protocol {
    font-size: 0.85rem;
    color: var(--muted-text);
}

.beep-detail-history {
    list-style: none;
    margin: 0;
    padding: 0;
}

.beep-detail-history a {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr) 3.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0.25rem;
    color: inherit;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.beep-detail-history a:hover {
    background: var(--accent-soft);
}

.beep-detail-history li.is-current a {
    font-weight: 700;
}

.beep-detail-history-date {
    font-size: 0.85rem;
    color: var(--muted-text);
}

.beep-detail-history-bar {
    height: 0.6rem;
    background: var(--accent-soft);
}

.beep-detail-history-bar > span {
    display: block;
    height: 100%;
    background: var(--accent-c);
    opacity: 0.55;
}

.beep-detail-history li.is-current .beep-detail-history-bar > span {
    opacity: 1;
}

.beep-detail-history-score {
    text-align: right;
}

/* Session load picker — optional weight for a bodyweight movement (docs/reference/optional-load.md §4) */
.load-picker .session-load-input {
    max-width: 9rem;
}

.load-picker-other:not(.active) {
    border-style: dashed;
}

.load-picker-hold,
.load-picker-offer {
    font-size: 0.85rem;
    color: var(--muted-text);
}