/* Gym Tracker - Dark Theme Complete Styling */

:root {
    /* Dark Theme Colors — neutral-dark elevation system (unified with the
       refresh.css --gt-* layer; the old purple-tinted surfaces are retired). */
    --bg-primary: #0a0c14;   /* L0: page background (darkest) */
    --bg-secondary: #12151d; /* container / modal surface */
    --bg-tertiary: #161b25;  /* form inputs */
    --bg-card: #181c26;      /* L1: elevated cards */
    --bg-elevated: #232836;  /* L2: rows sitting on cards */
    --bg-hover: #2c3242;     /* hover state (clearly lighter) */

    /* Accent Colors — modern azure (replaces the indigo/violet accent) */
    --accent-primary: #5b9bff;   /* bright azure: icons, borders, accent text on dark */
    --accent-secondary: #2563eb; /* deep blue: gradient ends, strong fills */
    --accent-success: #34d399;
    --accent-warning: #fbbf24;
    --accent-error: #f87171;
    --accent-info: #38bdf8;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a4adbd;
    --text-muted: #8b93a4;
    --text-disabled: #5b6373;

    /* Border Colors */
    --border-color: #232838;
    --border-light: #343a4f;

    /* Gradients — deep azure so white button text stays legible */
    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --gradient-success: linear-gradient(135deg, #34d399 0%, #10b981 100%);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Layout */
    --bottom-nav-height: 64px;  /* Used by FAB + rest timer bar to clear the mobile nav */
}

/* Base Styles */
* {
    box-sizing: border-box;
}

body.gym-tracker {
    background: var(--bg-primary);
    color: white;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 3.25rem; /* Account for fixed header */
    min-height: 100vh;
    /* clip instead of hidden: prevents horizontal overflow without creating
       a new scroll container, which would break position:sticky on descendants
       (iOS Safari / mobile Chrome known issue). */
    overflow-x: clip;
}

body.gym-tracker h1,
body.gym-tracker h2,
body.gym-tracker h3,
body.gym-tracker h4,
body.gym-tracker h5,
body.gym-tracker h6,
body.gym-tracker p,
body.gym-tracker span,
body.gym-tracker div,
body.gym-tracker label {
    color: white;
}

/* App Container */
.app-container {
    display: flex;
    min-height: calc(100vh - 3.25rem); /* Full height minus header */
    padding-bottom: 70px; /* Space for bottom nav on mobile */
}

@media (min-width: 768px) {
    .app-container {
        padding-bottom: 0;
        padding-left: 250px; /* Space for side nav on desktop */
    }
}

/* Footer adjustments */
body.gym-tracker #footer {
    margin-bottom: 70px; /* Space for bottom nav on mobile */
}

@media (min-width: 768px) {
    body.gym-tracker #footer {
        padding-left: 250px; /* Match sidebar width on desktop */
        margin-bottom: 0; /* Remove bottom spacing on desktop */
    }
}

/* Navigation Styles */

/* Bottom Navigation (Mobile) — single dark bar with clear active state */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    padding: 0.55rem 0.4rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
    /* Subtle purple top glow line — visual separator from content */
    background-image:
        linear-gradient(to right,
            transparent 0%,
            rgba(91, 155, 255, 0.35) 50%,
            transparent 100%);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: top;
}

.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.5rem 0.35rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    /* Inactive — medium-light gray so it's clearly secondary but still readable.
       !important needed because the shared assets/css/main.css applies
       `button { color: #555555 !important; }` with higher cascade priority. */
    color: rgba(255, 255, 255, 0.65) !important;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    flex: 1;
    max-width: 96px;
    position: relative;
    transition: color var(--transition-base), background var(--transition-base),
                transform var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

/* main.css paints inset 0 0 0 1px #555 (gray) / #ce1b28 (red hover) on every
   <button>; the bottom-nav items are borderless so it leaks as a ring. Pin it
   off across base/hover/active (the active tab uses a background pill, not a
   ring). Caught on the 390px mobile bottom-nav. */
.bottom-nav .nav-item,
.bottom-nav .nav-item:hover,
.bottom-nav .nav-item:hover:active,
.bottom-nav .nav-item.active {
    box-shadow: none !important;
}

.bottom-nav .nav-item:hover:not(.active) {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.04);
}

.bottom-nav .nav-item:active {
    transform: scale(0.94);
    opacity: 0.85;
}

.bottom-nav .nav-item span {
    line-height: 1.1;
    white-space: nowrap;
    color: inherit;
    transition: color var(--transition-base), font-weight var(--transition-base);
}

.bottom-nav .nav-item i {
    font-size: 1.2rem;
    color: inherit;
    transition: color var(--transition-base), transform var(--transition-base);
}

/* Active tab — soft purple pill + accent text + bolder label */
.bottom-nav .nav-item.active {
    color: var(--accent-primary) !important;
    background: rgba(91, 155, 255, 0.16);
    border-top: none !important;
    padding-top: 0.5rem;
}

.bottom-nav .nav-item.active i,
.bottom-nav .nav-item.active span {
    color: var(--accent-primary) !important;
}

.bottom-nav .nav-item.active span { font-weight: 700; }

.bottom-nav .nav-item.active i {
    transform: translateY(-1px);
    filter: drop-shadow(0 0 6px rgba(91, 155, 255, 0.5));
}

.bottom-nav .nav-item.workout-btn {
    color: var(--text-muted);
}

/* Center "Workout" item: raised pill, always readable so the primary
   action is visually obvious even when inactive. */
.bottom-nav .nav-item.nav-item-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(91, 155, 255, 0.9), rgba(91, 155, 255, 0.95));
    box-shadow: 0 4px 14px rgba(91, 155, 255, 0.45);
    margin: -0.4rem 0.25rem 0;
    padding: 0.55rem 0.5rem;
    border-radius: 999px;
}

.bottom-nav .nav-item.nav-item-primary i,
.bottom-nav .nav-item.nav-item-primary span {
    color: #ffffff !important;
}

.bottom-nav .nav-item.nav-item-primary.active {
    background: linear-gradient(135deg, #7c6cff, #9a6cff);
    box-shadow: 0 6px 18px rgba(91, 155, 255, 0.6);
}

/* Floating action button — one-tap Start/Resume workout on Home.
   Hidden on mobile because the bottom-nav already has a Workout
   button in its primary slot, so a fixed FAB just duplicates that
   action and competes with workout content for screen space. Still
   shown on desktop (≥768px) where the side-nav has no one-tap
   workout entry point. */
.workout-fab {
    position: fixed;
    display: none;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.25rem;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, var(--accent-primary), #1d4ed8);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 26px rgba(91, 155, 255, 0.45);
    cursor: pointer;
    z-index: 950;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-base);
    animation: fab-in 260ms ease-out;
}

.workout-fab i {
    font-size: 1.05rem;
    color: #ffffff;
}

.workout-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(91, 155, 255, 0.6);
}

.workout-fab:active { transform: scale(0.97); }

.workout-fab:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(91, 155, 255, 0.45), 0 12px 26px rgba(91, 155, 255, 0.45);
}

.workout-fab[hidden] { display: none; }

.workout-fab--resume {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 12px 26px rgba(34, 197, 94, 0.45);
}

.workout-fab--resume:hover {
    box-shadow: 0 16px 30px rgba(34, 197, 94, 0.6);
}

.workout-fab--resume:focus-visible {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.45), 0 12px 26px rgba(34, 197, 94, 0.45);
}

@keyframes fab-in {
    from { opacity: 0; transform: translateY(16px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 768px) {
    .workout-fab {
        display: inline-flex;
        /* Sits to the LEFT of the shared back-to-top button (44px circle at
           right: 1.25rem), which owns the bottom-right corner. Bottoms are
           aligned so the pill and the circle read as one row. */
        bottom: 1.25rem;
        right: calc(1.25rem + 44px + 0.75rem);
    }
}

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

/* Side Navigation (Desktop) */
.side-nav {
    display: none;
}

@media (min-width: 768px) {
    .side-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 3.25rem; /* Start below header */
        bottom: 0;
        width: 250px;
        background: var(--bg-secondary);
        border-right: 1px solid var(--border-color);
        z-index: 1000;
    }

    .side-nav .nav-header {
        padding: var(--spacing-lg);
        border-bottom: 1px solid var(--border-color);
    }

    .side-nav .nav-header h2 {
        margin: 0;
        font-size: 1.5rem;
        background: var(--gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .side-nav .nav-links {
        flex: 1;
        padding: var(--spacing-md);
        overflow-y: auto;
    }

    .side-nav .nav-link {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-sm);
        background: none;
        border: none;
        border-radius: var(--radius-md);
        color: white;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all var(--transition-base);
        width: 100%;
        text-align: left;
    }

    .side-nav .nav-link i {
        font-size: 1.25rem;
        width: 24px;
        color: white;
    }

    .side-nav .nav-link span {
        color: white;
    }

    .side-nav .nav-link:hover {
        background: var(--bg-hover);
        color: white;
    }

    .side-nav .nav-link:hover span,
    .side-nav .nav-link:hover i {
        color: white;
    }

    .side-nav .nav-link.active {
        background: var(--accent-primary);
        color: white;
    }

    .side-nav .nav-link.active span,
    .side-nav .nav-link.active i {
        color: white;
    }
}

/* Main Content */
.main-content {
    flex: 1;
    padding: var(--spacing-lg);
    padding-bottom: 90px; /* Extra space for bottom nav on mobile */
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .main-content {
        padding: var(--spacing-xl);
        padding-bottom: var(--spacing-xl); /* Reset on desktop */
    }
}

/* Views */
.view {
    display: none;
    animation: fadeIn 0.3s ease;
}

.view.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.view-header {
    margin-bottom: var(--spacing-xl);
}

.view-header h1 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 2rem;
    font-weight: 700;
}

.view-header .subtitle {
    color: var(--text-primary);
    margin: 0;
    font-size: 1rem;
}

.view-header .view-actions {
    margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
    .view-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .view-header h1 {
        font-size: 2.5rem;
    }

    .view-header .view-actions {
        margin-top: 0;
    }

    .view-header .btn {
        margin-top: 0;
        align-self: center;
    }
}

/* Stats Grid */
.stats-grid {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform var(--transition-base);
    border: 1px solid var(--border-color);
    min-width: 200px;
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
}

.stat-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.stat-content {
    width: 100%;
}

.stat-label {
    color: var(--text-primary);
    font-size: 0.85rem;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-primary);
}

.stat-value .unit {
    font-size: 1rem;
    color: var(--text-primary);
    margin-left: 0.25rem;
}

/* Restore spec behavior for the [hidden] attribute. The shared
   assets/css/main.css resets every section/article/etc. to
   `display: block`, which beats the user-agent default of
   `[hidden] { display: none }`. Without this rule, setting
   `el.hidden = true` on a <section> stays visible. */
[hidden] {
    display: none !important;
}

/* Sections */
.section {
    margin-bottom: var(--spacing-xl);
}

.section h2 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--text-primary);
}

.btn-primary {
    background: var(--gradient-primary);
    color: white !important;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--bg-card);
    color: white !important;
    border: 1px solid var(--border-color);
}

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

.btn-danger {
    background: var(--accent-error);
    color: white !important;
}

.btn-danger:hover {
    filter: brightness(1.1);
}

.btn-text {
    background: none;
    border: none;
    color: white !important;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.5rem;
    transition: color var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-text:hover {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: underline;
}

.btn-icon {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-base);
    padding: 0;
    flex-shrink: 0;
}

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

/* Make all trash/delete icons red */
.fa-trash {
    color: var(--accent-error) !important;
}

/* White trash icon when sitting on a red/filled background
   (avoids red-on-red invisibility on .btn-danger) */
.btn-set-delete .fa-trash,
#active-workout .fa-trash,
.btn-danger .fa-trash {
    color: white !important;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.btn-large {
    padding: 1.25rem 2rem;
    font-size: 1.125rem;
    width: 100%;
}

/* Cards */
.program-card,
.workout-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.program-card {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    height: 100%;
    min-height: 0;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.program-card .program-description {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* When a card has no description, lean slightly into the exercise count so
   the layout still feels intentional rather than sparse. */
.program-card:not(:has(.program-description)) .program-stats .stat {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.program-card .program-header h3 {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.program-card .program-header,
.program-card .program-stats {
    margin: 0;
}

.program-card:hover,
.workout-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Program card actions — compact, single-row, visually secondary to the card
   content. Overrides the bulky global .btn defaults (height 3.25rem, heavy
   padding) and the saturated .btn-danger red so the actions don't dominate. */
.program-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
    align-items: stretch;
}

.program-actions .btn {
    flex: 1 1 auto;
    min-width: max-content;
    height: 34px !important;
    min-height: 0 !important;
    padding: 0 0.85rem !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    font-family: inherit !important;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    letter-spacing: 0;
    transition: background var(--transition-base), border-color var(--transition-base),
                color var(--transition-base), box-shadow var(--transition-base),
                transform var(--transition-base);
}

.program-actions .btn i {
    font-size: 0.78rem;
}

/* Edit — ghost/outline. Secondary to the card, but still clearly clickable. */
.program-actions .btn-secondary {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.program-actions .btn-secondary:hover {
    background: rgba(91, 155, 255, 0.12) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(91, 155, 255, 0.22);
}

.program-actions .btn-secondary:active {
    transform: translateY(0);
    background: rgba(91, 155, 255, 0.18) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
}

.program-actions .btn-secondary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.3);
}

/* Delete — smaller, desaturated destructive fill at rest; intensifies on hover. */
.program-actions .btn-danger {
    background: rgba(239, 68, 68, 0.14) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #ff9a9a !important;
    box-shadow: none !important;
}

.program-actions .btn-danger i {
    color: inherit !important;
}

.program-actions .btn-danger:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(239, 68, 68, 0.35);
}

.program-actions .btn-danger:hover i {
    color: #ffffff !important;
}

.program-actions .btn-danger:active {
    transform: translateY(0);
    background: #dc2626 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.program-actions .btn-danger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.35);
}

/* On narrow cards (very small phones) we still keep the row, but relax the
   padding a touch so the two buttons comfortably share the width. */
@media (max-width: 360px) {
    .program-actions .btn {
        padding: 0 0.6rem !important;
        font-size: 0.78rem !important;
    }
}

.program-header,
.workout-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.workout-header-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.delete-workout-btn {
    opacity: 0.8;
    transition: all 0.2s ease;
    color: var(--accent-error);
}

.delete-workout-btn:hover {
    opacity: 1;
    color: var(--accent-error);
}

.program-header h3,
.workout-card-header h3,
.workout-card-header h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
}

/* Scope: history-list workout cards get a tighter, more intentional header */
#history-list .workout-card-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.program-stats,
.workout-card-stats {
    display: flex;
    gap: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    flex-wrap: wrap;
}

.program-stats .stat,
.workout-card-stats .stat {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* Feature A: program tile schedule line — muted secondary, wraps with 7 days
   so it never overflows a narrow tile. */
.program-stats .stat.program-schedule-stat {
    color: var(--text-secondary);
    flex-wrap: wrap;
    min-width: 0;
}
.program-stats .stat.program-schedule-stat i {
    color: var(--text-secondary);
}

/* History card metric row — tabular numbers + muted icon so stats scan fast */
#history-list .workout-card-stats {
    gap: 0.9rem 1.1rem;
    margin: 0.65rem 0 0;
}

#history-list .workout-card-stats .stat {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    gap: 0.35rem;
}

#history-list .workout-card-stats .stat i {
    color: var(--accent-primary);
    font-size: 0.8rem;
    opacity: 0.85;
}

#history-list .workout-card {
    padding: 0.95rem 1rem;
}

#history-list .workout-card-header {
    margin-bottom: 0;
    align-items: flex-start;
}

.stat .label {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    display: block;
    text-align: center;
}

.stat .sublabel {
    font-size: 0.75rem;
    color: var(--text-primary);
    display: block;
    text-align: center;
}

.badge {
    padding: 0.25rem 0.75rem;
    background: var(--accent-primary);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-custom {
    background: var(--accent-warning);
    color: var(--bg-primary);
    margin-left: 0.5rem;
}

.workout-card-header .date {
    color: var(--text-primary);
    font-size: 0.9rem;
}

#history-list .workout-card-header .date {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.15rem;
}

#history-list .workout-header-info {
    gap: 0.1rem;
}

.workout-notes {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.5;
}

#history-list .workout-notes {
    margin-top: 0.7rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Lists */
.workout-list,
.achievement-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-primary);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.empty-state p {
    margin-bottom: var(--spacing-lg);
}

/* Programs Toolbar (sort) */
.programs-toolbar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--spacing-md);
}

.programs-sort-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.programs-sort-select {
    flex: 1;
    max-width: 320px;
}

/* Programs Grid */
.programs-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg);
    align-items: stretch;
}

@media (min-width: 768px) {
    .programs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

/* Mirror the workout-picker alignment: lock card geometry so titles
   that wrap to two lines, optional descriptions, and the bottom
   Edit/Delete actions all line up across the row. */
.programs-grid .program-card {
    min-height: 260px;
    padding: var(--spacing-lg);
}

.programs-grid .program-card .program-header {
    min-height: 2.4em;
    display: flex;
    align-items: flex-start;
}

.programs-grid .program-card .program-header h3 {
    margin: 0;
    line-height: 1.2;
}

/* Pin the action cluster to the card foot so Edit/Delete pairs line
   up horizontally regardless of upper content. */
.programs-grid .program-card .program-actions {
    margin-top: auto;
}

/* Drag handle (only shown when sort mode is custom) */
.program-card.is-draggable {
    cursor: grab;
    position: relative;
}

.program-card.is-draggable:active {
    cursor: grabbing;
}

.program-card-handle {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    background: transparent;
    opacity: 0;
    transition: opacity var(--transition-base), color var(--transition-base),
                background var(--transition-base);
    pointer-events: none; /* drag is on the card itself */
    font-size: 0.85rem;
    z-index: 2;
}

.program-card.is-draggable:hover .program-card-handle {
    opacity: 1;
    color: var(--text-secondary);
    background: var(--bg-elevated);
}

/* Active drag state */
.program-card.is-dragging {
    opacity: 0.6;
    transform: scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5),
                0 0 0 2px var(--accent-primary);
    cursor: grabbing;
    z-index: 5;
}

/* Drop target highlight (insertion indicator) */
.program-card.is-drop-target {
    outline: 2px dashed var(--accent-primary);
    outline-offset: -2px;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(91, 155, 255, 0.08) 100%);
}

/* Smooth layout transitions when sorting changes */
.program-card {
    transition: transform var(--transition-base),
                box-shadow var(--transition-base),
                border-color var(--transition-base),
                background var(--transition-base),
                outline-color var(--transition-fast);
}

/* Body scroll lock — applied by modal-focus.js when any modal is open.
   position:fixed + top offset is the only reliable technique on iOS Safari. */
body.modal-open {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    /* top is set inline by JS to preserve scroll position */
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    overflow-y: auto;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.3s ease;
}

.modal-content.large {
    max-width: 900px;
}

.modal-content.small {
    max-width: 400px;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: white;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

.modal-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--spacing-lg);
    color: white;
}

.modal-body strong,
.modal-body p,
.modal-body span {
    color: white;
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all var(--transition-base);
}

.form-group textarea {
    resize: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent-primary);
    background: var(--bg-card);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-primary);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 768px) {
    .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

.form-actions,
.modal-footer {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    align-items: center;
    margin-top: var(--spacing-xl);
    flex-wrap: wrap;
}

.form-actions .btn,
.modal-footer .btn {
    min-width: 140px;
    min-height: 48px;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.form-actions .btn-secondary,
.modal-footer .btn-secondary {
    border-color: var(--border-color);
}

.modal-footer {
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

/* Mobile modal improvements */
@media (max-width: 767px) {
    .modal {
        padding: var(--spacing-sm);
        align-items: flex-end;
    }

    .modal-content {
        max-width: 100%;
        max-height: 85vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .modal-header {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .modal-body {
        padding: var(--spacing-md);
    }

    .form-actions,
    .modal-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .form-actions .btn,
    .modal-footer .btn {
        width: 100%;
        min-width: unset;
        padding: 1rem;
        font-size: 1.05rem;
    }
}

#confirm-modal-message {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    font-size: 1rem;
}

#confirm-modal-message strong {
    color: var(--text-primary);
    font-weight: 700;
}

.confirm-modal-content {
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
    text-align: center;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--border-color);
}

.confirm-modal-content .modal-header {
    padding: 0;
    border-bottom: none;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    justify-content: center;
}

.confirm-modal-content #confirm-modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.confirm-modal-content .modal-body {
    padding: 0 var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.confirm-modal-content .modal-footer {
    padding: var(--spacing-md) 0 0 0;
    border-top: none;
    justify-content: center;
    gap: var(--spacing-sm);
}

.confirm-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 82, 82, 0.12);
    border: 1px solid rgba(255, 82, 82, 0.35);
    color: var(--accent-error);
    font-size: 1.4rem;
    box-shadow: 0 0 0 6px rgba(255, 82, 82, 0.06);
}

.confirm-modal-content:not(.confirm-modal-danger) .confirm-modal-icon {
    background: rgba(91, 155, 255, 0.12);
    border-color: rgba(91, 155, 255, 0.35);
    color: var(--accent-primary);
    box-shadow: 0 0 0 6px rgba(91, 155, 255, 0.06);
}

.confirm-modal-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    margin-top: var(--spacing-md);
    padding: 0.65rem var(--spacing-md);
    background: rgba(255, 82, 82, 0.1);
    border: 1px solid rgba(255, 82, 82, 0.3);
    border-radius: var(--radius-md);
    color: var(--accent-error);
    font-size: 0.85rem;
    font-weight: 600;
}

.confirm-modal-warning i {
    font-size: 0.9rem;
}

/* Ghost button — used for Cancel in modals */
.btn-ghost {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-light);
    transition: background var(--transition-base), border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.btn-ghost:hover {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.12);
}

.confirm-modal-content .modal-footer .btn {
    min-width: 130px;
    min-height: 44px;
}

/* Darken the overlay more when the confirm modal is shown for focus */
#confirm-modal.active {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.toggle {
    width: 56px;
    height: 30px;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: #4a4a5e !important;
    border: 2px solid #666 !important;
    border-radius: 15px !important;
    position: relative !important;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    display: inline-block !important;
    vertical-align: middle;
    outline: none;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1;
}

.toggle::before {
    content: '' !important;
    position: absolute !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: white !important;
    left: 3px !important;
    top: 2px !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.toggle:checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.toggle:checked::before {
    left: 28px;
    background: white;
}

/* Workout View Specific */
.workout-screen {
    display: none;
}

.workout-screen.active {
    display: block;
}

.workout-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.7rem;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
    position: sticky;
    /* Offset by the fixed site header so the bar sticks fully below it,
       not partially behind it. Body uses overflow-x:clip (not hidden) so
       there is no spurious scroll-container ancestor breaking stickiness. */
    top: 3.25rem;
    z-index: 100;
    gap: 0.55rem;
    border: 1px solid var(--border-color);
}

.workout-header-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Unified sizing for every header control — creates one visual system.
   Minimum 44px tap target (WCAG 2.2 AA) so sweaty mid-workout fingers
   can't accidentally trigger Discard instead of Pause/Finish. */

/* Two-row workout header on narrow screens.
   At full width the six header controls (end + unit toggle + plate/edit/pause/
   finish) plus the program name + timer don't fit on one row; .workout-info
   collapsed to 0 and the timer overlapped the unit toggle. Below 640px we wrap
   into two rows: row 1 = end button + info (name + timer, left-aligned),
   row 2 = the full action cluster. */
@media (max-width: 640px) {
    .workout-header {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0.5rem;
    }

    .workout-info {
        /* Sit next to the end button on row 1, take the remaining width. */
        flex: 1 1 auto;
        align-items: flex-start;
        text-align: left;
    }

    .workout-header-actions {
        /* Force onto its own row, right-aligned, allowed to wrap if even this
           row runs out of room on the very narrowest devices. */
        flex: 1 0 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* Mobile adjustments for workout header */
@media (max-width: 400px) {
    .workout-header {
        padding: 0.45rem 0.55rem;
    }

    .workout-header .btn-icon {
        /* Keep 44px even on small phones — accessibility minimum */
        width: 44px !important;
        height: 44px !important;
        font-size: 0.95rem !important;
    }

    .workout-header-actions {
        gap: 0.55rem;
    }

    .workout-info h2 {
        font-size: 0.98rem;
    }

    .workout-timer {
        font-size: 0.82rem;
    }
}

.workout-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-align: center;
}

.workout-info h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.2;
}

.workout-timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}

.workout-timer i {
    color: var(--accent-primary);
    font-size: 0.8rem;
}

.workout-content {
    padding-bottom: 90px; /* Extra space for bottom nav on mobile */
}

/* #17: when the between-exercise rest bar is visible on mobile it sits fixed
   above the nav and would otherwise cover the last exercise's sets / Add-set /
   finish row. Reserve room so the last actionable row clears the bar when
   scrolled to the bottom. Sized for the slim bar (~44px) + its 12px gap above
   the nav + the existing nav clearance, plus breathing room. */
@media (max-width: 767px) {
    body.gt-rest-bar-visible .workout-content {
        padding-bottom: 168px;
    }
}

/* Ensure exercise cards don't scroll behind the taller sticky header
   (site header ~52px + workout header ~80px + margin ≈ 140px).
   scroll-margin-top applies on scrollIntoView(); the scroll-padding-top
   on html covers keyboard-driven and programmatic scroll. */
body.gym-tracker #active-workout .exercise-entry,
body.gym-tracker #active-workout .superset-block {
    scroll-margin-top: 150px;
}

@media (min-width: 768px) {
    .workout-content {
        padding-bottom: var(--spacing-xl);
    }
}

/* ==========================================================================
   Rest timer: a large FLOATING circular dial (countdown is the focus inside a
   glowing progress ring) with a separate round Skip button beside it.
   Color-coded by rest type: GREEN between sets, BLUE between exercises.
   Floats above the bottom nav; soft shadow; minimal borders.
   ========================================================================== */
.rest-timer-bar {
    position: fixed;
    left: 50%;
    /* Self-contained dial: centered over the Workout tab (viewport center). */
    transform: translateX(-50%);
    bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 10px);
    z-index: 90;
    display: inline-flex;
    /* Accent for the active rest type; overridden by the type classes below. */
    --rest-accent: var(--accent-primary);
    --rest-glow: rgba(91, 155, 255, 0.45);
    animation: rest-bar-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rest-timer-bar[hidden] { display: none; }

@keyframes rest-bar-in {
    from { opacity: 0; transform: translate(-50%, 14px) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Color coding by rest type. */
.rest-timer-bar.rest-timer--set {
    --rest-accent: var(--accent-success);
    --rest-glow: rgba(52, 211, 153, 0.45);
}
.rest-timer-bar.rest-timer--exercise {
    --rest-accent: var(--accent-primary);
    --rest-glow: rgba(91, 155, 255, 0.45);
}

/* The circular dial. */
.rest-timer-dial {
    position: relative;
    width: 146px;
    height: 146px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0) 70%),
        var(--bg-secondary);
    box-shadow:
        0 10px 34px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        0 0 26px var(--rest-glow);
}

.rest-timer-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.rest-timer-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 6;
}

.rest-timer-ring-fill {
    fill: none;
    stroke: var(--rest-accent);
    stroke-width: 6;
    stroke-linecap: round;
    filter: drop-shadow(0 0 5px var(--rest-glow));
    transition: stroke-dashoffset 1s linear, stroke var(--transition-base);
}

.rest-timer-dial-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    line-height: 1;
}

.rest-timer-icon {
    color: var(--rest-accent);
    font-size: 0.72rem;
}

.rest-timer-label {
    color: var(--rest-accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.55rem;
    font-weight: 700;
    margin-bottom: 0.02rem;
}

.rest-timer-value {
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.rest-timer-caption {
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 500;
}

/* Action row: +30s and Skip as two equal pills, centered inside the dial so
   the timer is a single self-contained control (no detached button). */
.rest-timer-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 0.32rem;
}

.rest-timer-btn,
.rest-timer-btn:hover,
.rest-timer-btn:focus-visible {
    box-sizing: border-box;
    height: 24px;
    min-width: 46px;
    padding: 0 0.55rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.64rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

/* +30s — accent-outlined (primary of the pair). */
.rest-timer-add,
.rest-timer-add:hover,
.rest-timer-add:focus-visible {
    border: 1.5px solid color-mix(in srgb, var(--rest-accent) 50%, transparent);
    background: transparent;
    color: var(--rest-accent) !important;
}
.rest-timer-add:hover {
    background: color-mix(in srgb, var(--rest-accent) 16%, transparent);
}

/* Skip — neutral filled (visually secondary, still easy to tap). */
.rest-timer-skip,
.rest-timer-skip:hover,
.rest-timer-skip:focus-visible {
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary) !important;
}
.rest-timer-skip:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary) !important;
}
.rest-timer-skip i { font-size: 0.6rem; }

.rest-timer-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--rest-glow) !important;
}

/* Done: ring + countdown go green (completion), then auto-hide. */
.rest-timer-bar.rest-timer-done {
    --rest-accent: var(--accent-success);
    --rest-glow: rgba(52, 211, 153, 0.5);
}
.rest-timer-bar.rest-timer-done .rest-timer-value { color: var(--accent-success); }

/* Urgent (final seconds): ring + value turn red (value via the shared rule). */
.rest-timer-bar.rest-timer-urgent {
    --rest-accent: var(--accent-error);
    --rest-glow: rgba(248, 113, 113, 0.5);
}

/* Desktop has no bottom nav, so sit just above the viewport bottom. */
@media (min-width: 768px) {
    .rest-timer-bar { bottom: 24px; }
}

/* During rest the dial owns the bottom-center; hide the scroll-to-top arrow
   so the two never collide. */
body.gt-rest-bar-visible .back-to-top { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .rest-timer-bar { animation: none; }
    .rest-timer-ring-fill { transition: stroke var(--transition-base); }
}

/* Final-5-seconds urgent state: bar + chip turn red and pulse. */
@keyframes rest-timer-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

.rest-timer-bar.rest-timer-urgent #rest-timer-value,
.rest-countdown-chip.rest-countdown-chip--urgent {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.45);
    animation: rest-timer-pulse 0.65s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .rest-timer-bar.rest-timer-urgent #rest-timer-value,
    .rest-countdown-chip.rest-countdown-chip--urgent { animation: none; }
}

/* In-card rest countdown chip — dominant timer element in the rest row.
   Item R2-3: one element, two states. Active (default below) is the live
   colored countdown; --idle is the static gray between-set duration. */
/* Pass 2 #2: integrated into the subtitle row as a small neutral chip.
   Idle = quiet meta; only the live countdown picks up the azure accent. */
.rest-countdown-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--accent-primary);
    background: transparent;
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.5rem;
    line-height: 1.3;
}
.rest-countdown-chip i { font-size: 0.7rem; }

/* Idle: static neutral duration, same size/position as the active countdown. */
body.gym-tracker .rest-countdown-chip.rest-countdown-chip--idle {
    color: var(--text-secondary);
    background: transparent;
    border-color: var(--border-color);
    animation: none;
}
body.gym-tracker .rest-countdown-chip.rest-countdown-chip--idle i {
    color: var(--text-muted);
}

/* Plate-hints toggle button — same sizing as other header btn-icons. */
.workout-header .btn-icon-plates {
    background: rgba(91, 155, 255, 0.1) !important;
    border-color: rgba(91, 155, 255, 0.3) !important;
    color: rgba(91, 155, 255, 0.9) !important;
}

.workout-header .btn-icon-plates:hover {
    background: rgba(91, 155, 255, 0.2) !important;
    border-color: rgba(91, 155, 255, 0.5) !important;
    color: #5b9bff !important;
}

/* Dimmed state when plate hints are off. */
.workout-header .btn-icon-plates--off {
    background: transparent !important;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
    opacity: 0.6;
}

.workout-day-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 768px) {
    .workout-day-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.workout-day-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: left;
    width: 100%;
}

.workout-day-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.workout-day-card h3 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--accent-primary);
}

.workout-day-card p {
    margin: 0.5rem 0;
    color: var(--text-primary);
}

/* Exercise Entry Card (Mobile-Optimized) */
/* Pass 2 #2: the card is the only large container — one border, one radius,
   no inset/stacked shadows. */
.exercise-entry {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 0.85rem 0.9rem;
    margin-bottom: 0.85rem;
    border: 1px solid var(--border-color);
    box-shadow: none;
    transition: border-color var(--transition-base);
}

.exercise-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.exercise-entry-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-primary);
    font-weight: 700;
    letter-spacing: -0.015em;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem;
    line-height: 1.25;
    min-width: 0;
}

.exercise-name-main {
    color: var(--text-primary);
    font-weight: 700;
}

/* Pass 2 #2: subtitle row under the name — progress pill, muscle, rep range,
   rest chip all on one calm meta line. */
.exercise-subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.exercise-name-sub {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    letter-spacing: 0.005em;
}

/* Last-time reference section — deferential styling so the active inputs
   remain the focal point. Rendered as a contained rail with a muted label
   so the chips read as quiet reference material, not part of the active UI. */
.previous-data {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.7rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.previous-sets-label {
    font-size: 0.64rem;
    color: var(--text-muted);
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.previous-sets-label span {
    color: var(--text-muted);
    opacity: 0.7;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.74rem;
    margin-left: 0.3rem;
}

.previous-sets-row {
    display: flex;
    flex-wrap: wrap;
    /* Matching horizontal + vertical gap so multi-line wrapping stays even. */
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.previous-set-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.22rem 0.55rem 0.22rem 0.28rem;
    transition: background var(--transition-base), border-color var(--transition-base),
                transform var(--transition-base), box-shadow var(--transition-base);
    cursor: pointer;
    user-select: none;
}

.previous-set-badge:hover {
    border-color: rgba(91, 155, 255, 0.5);
    background: rgba(91, 155, 255, 0.08);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(91, 155, 255, 0.18);
}

.previous-set-badge:active {
    transform: translateY(0);
}

.previous-set-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(91, 155, 255, 0.4);
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.58rem;
    font-weight: 700;
    flex-shrink: 0;
}

.previous-set-badge:hover .previous-set-number {
    background: var(--accent-primary);
}

.previous-set-value {
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.previous-set-badge:hover .previous-set-value {
    color: var(--text-primary);
}

.set-inputs {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    align-items: stretch;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.input-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-left: 0.1rem;
}

.set-inputs input {
    flex: 1;
    padding: 0.75rem 0.6rem;
    background: var(--bg-tertiary);
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: border-color var(--transition-base), background var(--transition-base),
                box-shadow var(--transition-base);
}

.set-inputs input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
    font-weight: 500;
}

.set-inputs input:hover {
    border-color: var(--border-light);
}

.set-inputs input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.2);
}

/* Add Set — primary positive action. !important beats the global
   `button { color: #555 !important; height: 3.25rem; font-weight: 600 }` rule
   that was making the text read dark/muddy on the teal gradient. */
.set-inputs .btn-add-set,
.set-inputs button {
    padding: 0.75rem 1.1rem !important;
    height: auto !important;
    min-height: 0 !important;
    background: linear-gradient(135deg, #00d9a3 0%, #00b386 100%) !important;
    color: #ffffff !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-md);
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    font-family: inherit !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0, 217, 163, 0.32) !important;
    transition: background var(--transition-base), box-shadow var(--transition-base),
                transform var(--transition-base), filter var(--transition-base);
}

.set-inputs .btn-add-set i,
.set-inputs button i {
    color: #ffffff !important;
    font-size: 0.82rem;
}

.set-inputs .btn-add-set:hover,
.set-inputs button:hover {
    filter: brightness(1.08);
    box-shadow: 0 6px 18px rgba(0, 217, 163, 0.5) !important;
    transform: translateY(-1px);
}

.set-inputs .btn-add-set:active,
.set-inputs button:active {
    transform: translateY(0) scale(0.98);
    filter: brightness(0.95);
    box-shadow: 0 1px 4px rgba(0, 217, 163, 0.3) !important;
}

.set-inputs .btn-add-set:focus-visible,
.set-inputs button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 217, 163, 0.4),
                0 3px 10px rgba(0, 217, 163, 0.32) !important;
}

.set-inputs .btn-add-set:disabled,
.set-inputs button:disabled {
    background: rgba(0, 217, 163, 0.25) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

/* Duration inputs */
.duration-input {
    flex: 2;
}

.duration-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.5rem;
}

.duration-min,
.duration-sec {
    flex: 1;
    padding: 0.5rem !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    color: white !important;
    font-size: 1.1rem !important;
    text-align: center !important;
    font-weight: 600;
    min-width: 0;
}

.duration-separator {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    padding: 0 0.25rem;
}

.duration-edit-min,
.duration-edit-sec {
    width: 60px !important;
    padding: 0.5rem !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-sm) !important;
    color: white !important;
    font-size: 1rem !important;
    text-align: center !important;
    font-weight: 600;
}

/* Mobile optimization for set inputs */
@media (max-width: 767px) {
    .set-inputs {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .input-group {
        min-width: 0;
        flex: 1 1 calc(50% - var(--spacing-sm) / 2);
    }

    .duration-input {
        flex: 1 1 100%;
    }

    .set-inputs button {
        flex: 1 1 100%;
        width: 100%;
        padding: 0.875rem;
    }
}

.completed-sets {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.no-sets-message {
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 0.55rem 0.7rem;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    text-align: center;
    margin: 0;
    font-weight: 500;
}

.no-sets-message i {
    margin-right: 0.35rem;
    opacity: 0.55;
}

.completed-set {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.65rem 0.55rem 0.7rem;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-left: 3px solid rgba(34, 197, 94, 0.75);
    border-radius: var(--radius-md);
    gap: 0.5rem;
}

.completed-set.improved {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.4);
    border-left: 3px solid #22c55e;
}

.set-check {
    color: #22c55e;
    font-size: 1rem;
    flex-shrink: 0;
    opacity: 0.9;
}

.set-info {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    min-width: 0;
}

.set-number {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.set-details {
    color: var(--text-primary);
    font-size: 0.98rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
}

.duration-value {
    font-weight: 700;
    color: var(--accent-primary);
    font-size: 1rem;
}

.duration-label {
    font-size: 0.8rem;
    color: #aaa;
    margin-left: 0.25rem;
}

.set-actions {
    display: flex;
    gap: 0.2rem;
    flex-shrink: 0;
    align-items: center;
    margin-left: 0.25rem;
}

/* Tertiary tap targets — low-contrast at rest, reveal on hover/focus so the
   set content stays primary. !important beats the global button rule. */
.btn-set-action {
    width: 30px !important;
    height: 30px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    font-family: inherit !important;
    box-shadow: none !important;
    opacity: 0.65;
    transition: background var(--transition-base), color var(--transition-base),
                border-color var(--transition-base), opacity var(--transition-base),
                transform var(--transition-base);
}

.btn-set-action i {
    color: inherit !important;
    font-size: inherit;
}

.completed-set:hover .btn-set-action {
    opacity: 1;
}

.btn-set-action:active {
    transform: scale(0.92);
}

.btn-set-action:focus-visible {
    outline: none;
    opacity: 1;
    box-shadow: 0 0 0 2px rgba(91, 155, 255, 0.4) !important;
}

/* Edit — accent tint on hover */
.btn-set-action:not(.btn-set-delete):not(.btn-set-save):not(.btn-set-cancel):hover {
    background: rgba(91, 155, 255, 0.18) !important;
    border-color: rgba(91, 155, 255, 0.4) !important;
    color: #ffffff !important;
    opacity: 1;
}

/* Delete — destructive red on hover only; muted at rest */
.btn-set-delete:hover {
    background: rgba(239, 68, 68, 0.85) !important;
    border-color: rgba(239, 68, 68, 0.9) !important;
    color: #ffffff !important;
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35) !important;
}

.btn-set-delete:active {
    transform: scale(0.92);
    background: #dc2626 !important;
}

/* Save button - Green */
.btn-set-save {
    background: var(--accent-success);
    color: white;
}

.btn-set-save:hover {
    background: #00c48c;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 217, 163, 0.3);
}

/* Cancel button - Gray */
.btn-set-cancel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-set-cancel:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Set editing form */
.set-edit-form {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.set-edit-input {
    width: 70px;
    padding: 0.5rem;
    background: var(--bg-card);
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    text-align: center;
    font-weight: 500;
}

.set-edit-input:focus {
    outline: none;
    border-color: var(--accent-secondary);
    background: var(--bg-hover);
}

.set-edit-x {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}

.set-edit-unit {
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Mobile optimization for completed sets */
@media (max-width: 767px) {
    .completed-set {
        padding: 0.55rem 0.6rem 0.55rem 0.7rem;
    }

    .set-info {
        min-width: 0;
    }

    .btn-set-action {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
    }

    .set-edit-input {
        width: 65px;
        padding: 0.6rem 0.4rem;
    }
}

/* --- Planned set rows ---
   Each exercise renders an <ol> of rows where `i < sets.length` is a
   committed set (locked, edit/delete) and later rows are planned inputs
   with a tap-to-complete button. */
/* Pass 2 #2: progress badge sits in the subtitle row beside the name. */
.exercise-progress {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1.3;
    transition: background var(--transition-base), border-color var(--transition-base),
                color var(--transition-base);
}

.exercise-progress.is-complete {
    background: rgba(52, 211, 153, 0.14);
    border-color: var(--accent-success);
    color: var(--accent-success);
}

.exercise-progress.is-complete i {
    font-size: 0.68rem;
}

.exercise-entry.exercise-complete {
    border-color: var(--accent-success);
    box-shadow: none;
}

.set-row-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* Horizontal three-zone layout: [ num ] [ content ] [ actions + check ].
   Flex with align-items:center gives bulletproof vertical centering so the
   set number, the "55lb × 8" text, and the right-side icons always share
   the same baseline — no matter how tall the row grows. */
/* Pass 2 #3/#4: clean, quiet, consistent rows. One border style (solid 1px),
   tighter padding/height, no dashed borders. The active cue is a single
   left accent border applied on focus-within only. */
.set-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--border-color);
    border-radius: var(--radius-sm);
    min-height: 48px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.set-row-planned {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* Active cue: a single left accent border (no glow, no fill, no outline). */
.set-row-planned:focus-within {
    border-left-color: var(--accent-primary);
}

.set-row-complete {
    background: rgba(52, 211, 153, 0.07);
    border-color: var(--border-color);
    border-left-color: var(--accent-success);
}

.set-row-editing {
    border-left-color: var(--accent-primary);
}

.set-row-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.76rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    transition: background var(--transition-base), border-color var(--transition-base),
                color var(--transition-base);
}

.set-row-complete .set-row-num {
    background: rgba(52, 211, 153, 0.16);
    border-color: var(--accent-success);
    color: var(--accent-success);
}

.set-row-inputs {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.set-row-inputs input {
    width: 68px;
    height: 40px;
    padding: 0.4rem 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    transition: border-color var(--transition-fast);
}

.set-row-inputs input::placeholder {
    color: var(--text-muted);
    font-weight: 500;
}

.set-row-inputs input:hover { border-color: var(--border-light); }

.set-row-inputs input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: none;
}

.set-row-x,
.set-row-inputs .duration-separator {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8rem;
}

.set-row-details {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* ===== Pill toggle — the sole "mark set complete" control =====
   iOS/premium-fitness-app feel: horizontal pill track + circular knob that
   slides from left (incomplete) to right (completed). The knob's checkmark
   fades in as it lands, and a soft green glow confirms the ON state.
   Driven purely by `aria-pressed` so the DOM stays identical between states. */
/* Pass 2 #3: smaller resting footprint, neutral off, green only when ON.
   A transparent 40px tap padding keeps the touch target while the visible
   track stays compact. One emphasis cue per state (no stacked glows). */
.set-toggle {
    --toggle-width: 40px;
    --toggle-height: 22px;
    --toggle-pad: 3px;
    --toggle-knob: calc(var(--toggle-height) - (var(--toggle-pad) * 2));
    --toggle-travel: calc(var(--toggle-width) - var(--toggle-knob) - (var(--toggle-pad) * 2));

    flex-shrink: 0;
    position: relative;
    width: var(--toggle-width);
    height: var(--toggle-height);
    padding: 0;
    box-sizing: content-box;
    /* Transparent border supplies a >=40px tap target without inflating the
       visible track (the green fill paints to padding-box only). */
    border: 9px solid transparent;
    border-radius: 999px;
    background: var(--bg-elevated) padding-box;
    cursor: pointer;
    box-shadow: none;
    transition: background 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 220ms ease;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

.set-toggle-knob {
    position: absolute;
    top: var(--toggle-pad);
    left: var(--toggle-pad);
    width: var(--toggle-knob);
    height: var(--toggle-knob);
    border-radius: 50%;
    background: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
                background 200ms ease;
    will-change: transform;
}

.set-toggle-knob i {
    color: #ffffff !important;
    font-size: 0.58rem;
    font-weight: 900;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 150ms ease 40ms, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1) 40ms;
    line-height: 1;
}

/* ---- ON state: completed (green = completion semantics) ---- */
.set-toggle[aria-pressed="true"] {
    background: var(--accent-success) padding-box;
}

.set-toggle[aria-pressed="true"] .set-toggle-knob {
    transform: translateX(var(--toggle-travel));
    background: #ffffff;
    box-shadow: none;
}

.set-toggle[aria-pressed="true"] .set-toggle-knob i {
    color: #15803d !important;
    opacity: 1;
    transform: scale(1);
}

/* ---- Affordances on pointer devices ---- */
@media (hover: hover) {
    .set-toggle:hover {
        background: var(--bg-hover) padding-box;
    }
    .set-toggle[aria-pressed="true"]:hover {
        filter: brightness(1.06);
    }
}

.set-toggle:active .set-toggle-knob {
    /* Subtle squish on press — communicates tactile feedback. */
    transform: translateX(0) scale(0.92);
}

.set-toggle[aria-pressed="true"]:active .set-toggle-knob {
    transform: translateX(var(--toggle-travel)) scale(0.92);
}

.set-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.45);
}

.set-toggle[aria-pressed="true"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.45);
}

/* Hint the toggle while the user is entering weight/reps — single neutral
   nudge (the knob brightens slightly), no competing fill/glow. */
.set-row-planned:focus-within .set-toggle:not([aria-pressed="true"]) .set-toggle-knob {
    background: var(--text-secondary);
}

/* Celebratory pulse when a row transitions to the completed state. Triggers
   whenever the exercise re-renders with a new committed set — short, subtle,
   and skipped entirely for users who prefer reduced motion. */
@keyframes set-row-complete-pop {
    0%   { background: rgba(34, 197, 94, 0.3);
           box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2); }
    60%  { background: rgba(34, 197, 94, 0.15); }
    100% { background: rgba(34, 197, 94, 0.08);
           box-shadow: none; }
}

/* Knob entrance — CSS transitions don't fire on freshly-mounted elements,
   so play the slide explicitly when a completed row is first rendered. */
@keyframes set-toggle-knob-in {
    0%   { transform: translateX(0) scale(0.85); }
    60%  { transform: translateX(var(--toggle-travel)) scale(1.05); }
    100% { transform: translateX(var(--toggle-travel)) scale(1); }
}

@keyframes set-toggle-check-in {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

.set-row-complete {
    animation: set-row-complete-pop 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.set-row-complete .set-toggle[aria-pressed="true"] .set-toggle-knob {
    animation: set-toggle-knob-in 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.set-row-complete .set-toggle[aria-pressed="true"] .set-toggle-knob i {
    animation: set-toggle-check-in 200ms ease-out 100ms both;
}

@media (prefers-reduced-motion: reduce) {
    .set-row-complete,
    .set-row-complete .set-toggle[aria-pressed="true"] .set-toggle-knob,
    .set-row-complete .set-toggle[aria-pressed="true"] .set-toggle-knob i {
        animation: none;
    }
    .set-toggle, .set-toggle-knob, .set-toggle-knob i {
        transition: none;
    }
}

/* Group edit/delete so they share the right-side zone with the check mark.
   Consistent gap between all three icons = even rhythm. */
.set-row-actions {
    flex-shrink: 0;
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-end;
}

/* Edit/delete icons on completed set rows: always at least readable on
   touch screens (where :hover never fires), slightly bigger tap target. */
.set-row .btn-set-action {
    width: 34px !important;
    height: 34px !important;
    opacity: 0.85;
}

.set-row-complete .btn-set-action {
    color: rgba(74, 222, 128, 0.75) !important;
}

.set-row-complete .btn-set-delete {
    color: rgba(239, 68, 68, 0.7) !important;
}

.set-row .btn-set-action:hover,
.set-row .btn-set-action:focus-visible {
    opacity: 1;
}

/* Row of add/remove controls under the set list. Remove is a compact square
   icon button that only renders when there's an uncommitted row to drop. */
/* Pass 2 #5: compact set-management row — minus (neutral, red-on-hover) sits
   tight beside an azure-affordance Add-set. One border style, no dashed. */
.set-row-footer {
    margin-top: 0.55rem;
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}

.set-row-footer .btn-add-set--extra {
    margin-top: 0;
    flex: 1;
}

.btn-remove-set {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary) !important;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.btn-remove-set i {
    color: inherit !important;
    font-size: 0.85rem;
}

.btn-remove-set:hover {
    background: var(--bg-elevated);
    color: var(--accent-error) !important;
    border-color: var(--accent-error);
}

.btn-remove-set:active {
    background: var(--bg-hover);
}

.btn-remove-set:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.4);
}

/* Add-set: the primary action of the row — quiet neutral surface with an
   azure label + "+" icon. One solid border, no dashed.
   !important on `color` defeats main.css `button { color:#555 !important }`. */
.btn-add-set--extra {
    margin-top: 0.55rem;
    width: 100%;
    height: 40px;
    min-height: 40px;
    padding: 0 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--accent-primary) !important;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}

.btn-add-set--extra i {
    font-size: 0.78rem;
    color: var(--accent-primary) !important;
}

.btn-add-set--extra:hover {
    background: var(--bg-hover);
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary);
}

.btn-add-set--extra:hover i {
    color: var(--accent-primary) !important;
}

.btn-add-set--extra:active {
    background: var(--bg-hover);
    color: var(--accent-primary) !important;
}

.btn-add-set--extra:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.45);
}

@media (max-width: 480px) {
    .set-row {
        gap: 0.45rem;
        padding: 0.5rem 0.5rem;
    }
    /* Slightly smaller input width so the planned-row [weight × reps] line
       doesn't wrap on narrow phones. */
    .set-row-inputs input { width: 62px; }
    /* Tighter action spacing on phones to keep the right cluster compact. */
    .set-row-actions { gap: 0.25rem; }
}

/* Last-time chips — self-contained compact pills so wrapping always looks
   clean (each chip keeps its own padding/background; no cross-chip dividers
   that would snap awkwardly when the row breaks). Fixed height guarantees
   uniform visual weight regardless of content length (e.g. `72.5lb × 15`
   sits at the same height as `60lb × 8`). */
.previous-sets-row .prev-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 22px;
    padding: 0 0.45rem 0 0.3rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.previous-sets-row .prev-chip b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 0.22rem;
    background: rgba(91, 155, 255, 0.18);
    border-radius: 999px;
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Toast Notifications */
/* Item R2-2/R2-8: the toast container is always pointer-transparent so an
   empty (or finished) toast never blocks taps on the back-to-top arrow or
   any control beneath it. */
#toast-container {
    pointer-events: none;
}

/* Item R2-8: restyled toast — design-system card surface, border, subtle
   slide/fade. Non-interactive by default so it never intercepts taps; only
   the optional action button re-enables pointer events. */
.toast {
    position: fixed;
    /* Sit clear of the fixed site header + the sticky workout header so a
       toast never covers the workout controls (Item R2-8). */
    top: 116px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--bg-card);
    color: var(--text-primary);
    padding: 0.7rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-primary);
    box-shadow: var(--shadow-xl);
    z-index: 10100;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity var(--transition-base), transform var(--transition-base);
    max-width: min(360px, calc(100vw - 32px));
    font-size: 0.9rem;
    line-height: 1.4;
    pointer-events: none;
}

.toast .toast-message {
    font-variant-numeric: tabular-nums;
}

/* On mobile the workout header wraps to two rows and is taller, so the toast
   sits lower to never cover its controls (Item R2-8). The JS-set inline `top`
   only widens the initial offset; pin it lower here with !important so a toast
   never lands on the header buttons. */
@media (max-width: 600px) {
    body.gym-tracker .toast {
        top: 192px !important;
        left: 16px;
        right: 16px;
        max-width: none;
    }
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.toast-success {
    border-left-color: var(--accent-success);
}

.toast.toast-error {
    border-left-color: var(--accent-error);
}

.toast.toast-warning {
    border-left-color: var(--accent-warning);
}

.toast.toast-has-action {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.toast .toast-action {
    flex-shrink: 0;
    pointer-events: auto;
    background: transparent;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}

.toast .toast-action:hover {
    background: var(--accent-primary);
    color: #fff;
}

.toast .toast-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.35);
}

/* History Grid */
.history-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

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

/* Unified filter + sort toolbar for Workout History */
.history-filters {
    display: flex;
    gap: 0.55rem;
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
    align-items: center;
    padding: 0.55rem 0.7rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.history-filters input[type="date"] {
    /* The date inputs are replaced by DarkCalendar; hide the native fallback
       so there's no FOUC before JS runs. */
    display: none;
}

/* Clear button — neutral ghost style, compact height matched to dropdowns */
.history-filters .history-clear-btn {
    height: 36px !important;
    padding: 0 0.85rem !important;
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md);
    color: var(--text-secondary) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    line-height: 1 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: none !important;
    transition: background var(--transition-base), border-color var(--transition-base),
                color var(--transition-base);
}

.history-filters .history-clear-btn i {
    font-size: 0.72rem;
    color: inherit;
}

.history-filters .history-clear-btn:hover:not(:disabled) {
    background: var(--bg-elevated) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
}

.history-filters .history-clear-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.3) !important;
}

.history-filters .history-clear-btn:disabled,
.history-filters .history-clear-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Sort wrap — icon + DarkSelect, mirroring the Calendar filter pattern */
.history-sort-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 200px;
    margin-left: auto;
}

.history-sort-icon {
    color: var(--text-muted);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.history-filters select { display: none; }

.history-sort-wrap .dark-select {
    width: auto;
    min-width: 180px;
    flex: 1;
}

.history-sort-wrap .dark-select-trigger {
    height: 36px !important;
    padding: 0 0.85rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    font-family: inherit !important;
    gap: 0.55rem;
}

.history-sort-wrap .dark-select-trigger .dark-select-chevron {
    font-size: 0.7rem !important;
}

.history-sort-wrap .dark-select.is-open .dark-select-trigger {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--accent-primary);
    background: var(--bg-hover);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.22);
}

.history-sort-wrap .dark-select-popup {
    top: calc(100% - 1px);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px solid var(--accent-primary);
    padding: 0.35rem;
}

/* Match the date calendars to the 36px toolbar height */
.history-filters .dark-calendar {
    min-width: 160px;
}

.history-filters .dark-calendar-trigger {
    height: 36px !important;
    padding: 0 0.85rem !important;
    font-size: 0.85rem !important;
    gap: 0.5rem;
}

@media (max-width: 520px) {
    .history-sort-wrap,
    .history-sort-wrap .dark-select {
        width: 100%;
        margin-left: 0;
        min-width: 0;
    }
    .history-filters { gap: 0.5rem; }
    .history-filters .dark-calendar { flex: 1 1 calc(50% - 0.25rem); }
}

/* ============================================================
   DarkCalendar — custom dark-themed date picker widget
   ============================================================ */
.dark-calendar {
    position: relative;
    flex: 1;
    min-width: 160px;
    display: flex;
}

.dark-calendar-trigger {
    flex: 1;
    width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem !important;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-muted) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    height: auto !important;
    line-height: 1.3 !important;
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: left;
}

.dark-calendar-trigger:hover {
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
    color: var(--text-secondary) !important;
}

.dark-calendar.is-open .dark-calendar-trigger {
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.22);
}

.dark-calendar-trigger.has-value {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}

.dark-calendar-trigger > i {
    color: var(--accent-primary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.dark-calendar-trigger-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark-calendar-chevron {
    color: var(--text-muted) !important;
    font-size: 0.7rem !important;
    transition: transform var(--transition-base);
}

.dark-calendar.is-open .dark-calendar-chevron {
    transform: rotate(180deg);
    color: var(--accent-primary) !important;
}

.dark-calendar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1490;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.dark-calendar-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.dark-calendar-backdrop[hidden] {
    display: none;
}

.dark-calendar-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1500;
    width: 280px;
    max-width: calc(100vw - 24px);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 0.85rem;
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.85),
                0 8px 24px -8px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(91, 155, 255, 0.08);
    animation: darkCalFade 0.16s ease;
}

@media (max-width: 520px) {
    .dark-calendar-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        width: min(340px, calc(100vw - 32px));
        max-width: none;
        animation: darkCalFadeMobile 0.18s ease;
    }

    @keyframes darkCalFadeMobile {
        from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
        to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
}

@keyframes darkCalFade {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dark-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.55rem;
}

.dark-calendar-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    font-family: inherit;
}

.dark-calendar-nav {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary) !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    font-family: inherit !important;
    transition: all var(--transition-base);
}

.dark-calendar-nav:hover {
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}

.dark-calendar-nav i {
    color: inherit;
    font-size: inherit;
}

.dark-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.1rem;
    margin-bottom: 0.25rem;
}

.dark-calendar-weekdays span {
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    padding: 0.3rem 0;
    font-family: inherit;
}

.dark-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dark-calendar-day {
    aspect-ratio: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm) !important;
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), transform var(--transition-fast);
    font-variant-numeric: tabular-nums;
    font-family: inherit !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    height: auto !important;
    line-height: 1 !important;
    position: relative;
    z-index: 1;
}

.dark-calendar-day:hover {
    background: rgba(91, 155, 255, 0.18);
    color: #ffffff !important;
}

.dark-calendar-day.other {
    color: rgba(255, 255, 255, 0.25) !important;
}

.dark-calendar-day.today {
    border-color: rgba(91, 155, 255, 0.65);
    color: var(--accent-primary) !important;
    font-weight: 700 !important;
}

.dark-calendar-day.today:hover {
    background: rgba(91, 155, 255, 0.18);
}

/* Range highlighting — subtle fill for dates between endpoints */
.dark-calendar-day.in-range {
    background: rgba(91, 155, 255, 0.18);
    color: #ffffff !important;
    border-radius: 0 !important;
}

.dark-calendar-day.in-range:hover {
    background: rgba(91, 155, 255, 0.28);
}

.dark-calendar-day.in-range.other {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Range endpoints — stronger fill, square inside edge to visually connect to fill */
.dark-calendar-day.range-start,
.dark-calendar-day.range-end {
    background: var(--gradient-primary);
    border-color: var(--accent-primary);
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(91, 155, 255, 0.4);
    z-index: 2;
}

.dark-calendar-day.range-start {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.dark-calendar-day.range-end {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* When only one endpoint exists (range-start without range-end), stay fully rounded */
.dark-calendar-day.range-start.range-end {
    border-radius: var(--radius-sm) !important;
}

.dark-calendar-day.selected,
.dark-calendar-day.selected:hover {
    background: var(--gradient-primary);
    border-color: var(--accent-primary);
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(91, 155, 255, 0.4);
}

.dark-calendar-day.selected.today {
    box-shadow: 0 4px 12px rgba(91, 155, 255, 0.4), 0 0 0 2px rgba(91, 155, 255, 0.25);
}

.dark-calendar-day:active {
    transform: scale(0.94);
}

.dark-calendar-footer {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.65rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
}

.dark-calendar-action {
    padding: 0.5rem 0.85rem !important;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary) !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: auto !important;
    line-height: 1 !important;
}

.dark-calendar-action:first-child {
    margin-right: auto;
}

.dark-calendar-action:hover {
    background: var(--bg-hover);
    color: var(--text-primary) !important;
    border-color: var(--border-light);
}

.dark-calendar-action i {
    font-size: 0.75rem;
    opacity: 0.85;
}

.dark-calendar-action.primary {
    color: #ffffff !important;
    border-color: var(--accent-primary);
    background: var(--gradient-primary);
    box-shadow: 0 4px 12px rgba(91, 155, 255, 0.25);
}

.dark-calendar-action.primary:hover {
    background: var(--gradient-primary);
    border-color: var(--accent-primary);
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(91, 155, 255, 0.4);
    transform: translateY(-1px);
}

.dark-calendar-action.primary i {
    opacity: 1;
}

/* Exercise Database */
.exercise-search-bar,
.exercise-picker-search {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    background: var(--bg-tertiary);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}

.exercise-search-bar input,
.exercise-picker-search input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: white;
    font-size: 1rem;
    transition: all var(--transition-base);
}

.exercise-search-bar input:focus,
.exercise-picker-search input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.1);
}

.exercise-search-bar input:focus ~ .search-icon,
.exercise-picker-search input:focus ~ .search-icon {
    color: var(--accent-primary);
}

.exercise-search-bar input::placeholder,
.exercise-picker-search input::placeholder {
    color: #888;
}

.exercise-search-bar select,
.exercise-picker-search select {
    flex: 1;
    min-width: 150px;
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    background-color: var(--bg-card);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23b8b8d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.exercise-search-bar select:hover,
.exercise-picker-search select:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-elevated);
}

.exercise-search-bar select:focus,
.exercise-picker-search select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.2);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%236c63ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 6.5l5-5 5 5'/></svg>");
}

.exercise-search-bar select option,
.exercise-picker-search select option {
    background-color: var(--bg-card);
    color: var(--text-primary);
    padding: var(--spacing-sm) var(--spacing-md);
    font-weight: 500;
}

.exercise-search-bar select option:checked,
.exercise-picker-search select option:checked {
    background: var(--accent-primary) linear-gradient(0deg, var(--accent-primary), var(--accent-primary));
    color: white;
}

.exercise-search-bar select option:disabled,
.exercise-picker-search select option:disabled {
    color: var(--text-disabled) !important;
    background-color: var(--bg-secondary) !important;
    text-decoration: line-through;
    font-style: italic;
}

.exercise-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 640px) {
    .exercise-filters {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .exercise-search-bar .exercise-filters {
        grid-template-columns: repeat(3, 1fr);
    }
}

.btn-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: transparent;
    border: 2px solid rgba(91, 155, 255, 0.4);
    border-radius: var(--radius-lg);
    color: var(--accent-primary);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
}

.btn-filter-reset:hover {
    background: rgba(91, 155, 255, 0.12);
    border-color: var(--accent-primary);
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.15);
}

.btn-filter-reset:active {
    transform: scale(0.97);
    background: rgba(91, 155, 255, 0.2);
}

.btn-filter-reset i {
    font-size: 0.85rem;
    transition: transform var(--transition-base);
}

.btn-filter-reset:hover i {
    transform: rotate(-180deg);
}

.btn-filter-reset:disabled,
.btn-filter-reset[disabled] {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
}

.btn-filter-reset:disabled:hover,
.btn-filter-reset[disabled]:hover {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-muted);
    box-shadow: none;
}

.btn-filter-reset:disabled:hover i,
.btn-filter-reset[disabled]:hover i {
    transform: none;
}

.exercise-db-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

@media (min-width: 768px) {
    .exercise-db-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .exercise-db-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.exercise-db-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
    box-shadow: var(--shadow-sm);
}

.exercise-db-card:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.exercise-db-card.has-history {
    cursor: pointer;
}

.exercise-db-card.has-history:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(91, 155, 255, 0.15);
}

.exercise-db-card.no-history {
    cursor: default;
    opacity: 0.85;
}

.history-icon {
    color: var(--accent-success);
    margin-left: 0.5rem;
    font-size: 0.9rem;
}

.exercise-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.exercise-db-card h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    flex: 1;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.exercise-db-card .exercise-muscle {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
}

.exercise-db-card .exercise-muscle i {
    color: var(--accent-primary);
    font-size: 0.75rem;
}

.delete-exercise-btn {
    opacity: 0.8;
    transition: all 0.2s ease;
    flex-shrink: 0;
    color: var(--accent-error);
}

.delete-exercise-btn:hover {
    opacity: 1;
    color: var(--accent-error);
}

.exercise-db-card .exercise-meta {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.exercise-db-card .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1;
}

.exercise-db-card .badge i {
    font-size: 0.7rem;
    opacity: 0.9;
}

.exercise-db-card .badge-category i {
    color: var(--accent-primary);
}

.exercise-db-card .badge-equipment i {
    color: var(--accent-info);
}

.btn-view-history {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    background: rgba(91, 155, 255, 0.12);
    border: 1px solid rgba(91, 155, 255, 0.35);
    border-radius: var(--radius-md);
    color: var(--accent-primary);
    font-size: 0.85rem;
    font-weight: 600;
    align-self: flex-start;
    transition: all var(--transition-base);
    pointer-events: none;
}

.btn-view-history .view-history-arrow {
    font-size: 0.7rem;
    transition: transform var(--transition-base);
}

.exercise-db-card.has-history:hover .btn-view-history {
    background: rgba(91, 155, 255, 0.22);
    border-color: var(--accent-primary);
    box-shadow: 0 0 12px rgba(91, 155, 255, 0.25);
}

.exercise-db-card.has-history:hover .view-history-arrow {
    transform: translateX(3px);
}

/* Exercise Picker */
.exercise-picker-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(74, 74, 94, 0.3) 100%);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.exercise-picker-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.exercise-picker-card:hover::before {
    opacity: 1;
}

.exercise-picker-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(91, 155, 255, 0.2);
}

.exercise-picker-card:active {
    transform: translateY(-2px);
}

.exercise-picker-card h4 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: white;
    letter-spacing: 0.3px;
}

.exercise-picker-card .exercise-meta {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin: var(--spacing-sm) 0;
}

.exercise-picker-card .badge {
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(91, 155, 255, 0.2), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(91, 155, 255, 0.3);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    color: var(--accent-primary);
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

.exercise-picker-card p {
    color: #bbb;
    margin: var(--spacing-sm) 0 0 0;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Picked state for multi-select — card stays visible so the user can unselect. */
.exercise-picker-card.is-picked {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(91, 155, 255, 0.18), rgba(91, 155, 255, 0.22));
    box-shadow: 0 0 0 1px rgba(91, 155, 255, 0.45) inset;
}

.exercise-picker-card.is-picked::before { opacity: 1; }

.exercise-picker-check {
    position: absolute;
    top: 0.55rem;
    right: 0.65rem;
    font-size: 1.1rem;
    color: var(--text-muted);
    opacity: 0.65;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.exercise-picker-card.is-picked .exercise-picker-check {
    color: #22c55e;
    opacity: 1;
}

/* Sticky tray pinned to the bottom of the picker modal body. */
.exercise-picker-tray {
    position: sticky;
    bottom: 0;
    margin-top: var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 0.7rem 0.9rem;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
    z-index: 2;
}

.exercise-picker-tray[hidden] { display: none; }

.exercise-picker-tray-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.55rem;
}

.exercise-picker-tray-count {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.88rem;
    letter-spacing: 0.02em;
}

.exercise-picker-tray-list {
    list-style: none;
    margin: 0 0 0.65rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 240px;
    overflow-y: auto;
}

.exercise-picker-tray-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.55rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.45rem 0.6rem;
}

.exercise-picker-tray-row .tray-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exercise-picker-tray-row .tray-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}

.exercise-picker-tray-row .tray-remove:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.exercise-picker-tray-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

@media (max-width: 600px) {
    .exercise-picker-tray-row {
        grid-template-columns: 1fr auto;
    }
}

.exercise-picker-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    max-height: 60vh;
    overflow-y: auto;
    padding: var(--spacing-xs);
}

.exercise-picker-list::-webkit-scrollbar {
    width: 8px;
}

.exercise-picker-list::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.exercise-picker-list::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 4px;
}

.exercise-picker-list::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}

@media (min-width: 768px) {
    .exercise-picker-list {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
}

@media (min-width: 1024px) {
    .exercise-picker-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Edit Program — compact exercise row */
#program-exercises-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* ---- Create/Edit Program modal — form polish ---- */
#program-form .form-group {
    margin-bottom: var(--spacing-md);
}

#program-form .form-group label {
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-secondary);
}

#program-form .form-group input[type="text"],
#program-form .form-group textarea {
    padding: 0.7rem 0.85rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.95rem;
    border-radius: var(--radius-md);
}

#program-form .form-group input::placeholder,
#program-form .form-group textarea::placeholder {
    color: rgba(184, 184, 209, 0.78);
    opacity: 1;
}

#program-form .form-group input:focus,
#program-form .form-group textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.18);
}

/* Modal body padding tightens slightly inside the program modal */
#program-modal .modal-body {
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md);
}

/* ---- Create/Edit Program — Exercises section ---- */
.program-exercises-section {
    margin-top: var(--spacing-md);
    padding: 0.85rem 0.85rem 0.7rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.program-exercises-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}

.program-exercises-heading {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    letter-spacing: -0.005em;
}

.program-exercises-heading i {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.program-exercises-count {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.program-exercises-count:empty { display: none; }

#program-exercises-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.program-exercises-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.4rem 1rem;
    background: var(--bg-card);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    text-align: center;
}

.program-exercises-empty i {
    font-size: 1.85rem;
    color: var(--accent-primary);
    opacity: 0.75;
    margin-bottom: 0.25rem;
}

.program-exercises-empty p {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.program-exercises-empty small {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Two-row layout at every breakpoint so exercise identity never competes with
   the numeric controls. The drag handle + index badge span both rows so the
   whole card reads as a single draggable unit; identity + delete occupy the
   top row; the Sets/Reps/Rest cluster sits below as a secondary control row. */
.program-exercise-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
        "handle position name   delete"
        "handle position targets targets";
    align-items: center;
    column-gap: 0.55rem;
    row-gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), background var(--transition-fast),
                border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.program-exercise-row .pex-drag-handle { grid-area: handle; align-self: center; }
.program-exercise-row .pex-position    { grid-area: position; align-self: center; }
.program-exercise-row .pex-name        { grid-area: name; align-self: center; }
.program-exercise-row .pex-delete      { grid-area: delete; align-self: center; justify-self: end; }

/* Base = mobile. Keep the original flex-wrap row exactly as it was — the
 * desktop media query below swaps in the new vertical-block grid layout. */
.pex-targets {
    grid-area: targets;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    min-width: 0;
}

/* Desktop refinement — left-aligned card, tighter title/control connection,
   and a structured CSS Grid for Sets / Reps / Rest. Each stepper lives
   inside a bounded grid cell so siblings can NEVER overlap.
   Mobile keeps its existing flex-wrap layout via the media query boundary. */
@media (min-width: 641px) {
    /* Wider program modal so there's real horizontal space for three
       stepper cells + padding without crowding. */
    #program-modal .modal-content { max-width: 760px; }

    /* Left-aligned, full-width: the list fills the modal body instead of
       centering a narrow column. */
    #program-exercises-list {
        max-width: none;
        margin-inline: 0;
    }

    .program-exercise-row {
        padding: 0.75rem 1rem;
        column-gap: 0.75rem;
        /* Tight row-gap + dashed divider = "title and controls are one unit." */
        row-gap: 0.6rem;
        border-radius: var(--radius-lg);
        /* Desktop: targets get their own full-width row beneath the title row
           so Sets/Reps/Rest can breathe across the entire card instead of
           being squeezed into the name+delete columns. `minmax(0, 1fr)` on
           the name column stops long exercise names from forcing the whole
           card wider than the modal. */
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas:
            "handle position name    delete"
            "targets targets targets targets";
    }

    .program-exercise-row .pex-name-main { font-size: 1.05rem; }

    .program-exercise-row .pex-name-sub {
        font-size: 0.8rem;
        opacity: 1;
    }

    /* Controls row: sets-block takes the majority of space; rest stepper
       sits in a fixed-size right column when present (custom mode).
       Spans all four outer-grid columns via redefined grid-template-areas. */
    .pex-targets {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.75rem;
        padding-top: 0.5rem;
        margin-top: 0;
        border-top: 1px dashed var(--border-color);
        min-width: 0;
        width: 100%;
        align-items: start;
    }

    .pex-targets > * {
        min-width: 0;
    }

    /* Desktop-only: each control is a vertical block — label on top of
       a full-width [-  value  +] pill. The outer .pex-stepper becomes a
       transparent wrapper (all pill chrome moves to .pex-stepper-controls)
       so the label isn't competing inside a crowded single row.
       Mobile keeps the original horizontal pill via the base rules. */
    .program-exercise-row .pex-stepper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.3rem;
        width: 100%;
        min-width: 0;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-sizing: border-box;
    }

    .program-exercise-row .pex-stepper-label {
        font-size: 0.76rem;
        letter-spacing: 0;
        padding-left: 0.1rem;
    }

    /* The pill now lives on .pex-stepper-controls on desktop. */
    .program-exercise-row .pex-stepper-controls {
        display: flex;
        justify-content: space-between;
        gap: 0.4rem;
        padding: 0.4rem 0.65rem;
        background: var(--bg-elevated);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm);
        min-width: 0;
        box-sizing: border-box;
    }

    /* Slightly larger value floor so "2:15"/"10:30" sit cleanly without
       crowding the +/- buttons. Tabular numerals keep widths stable. */
    .program-exercise-row .pex-stepper-value {
        min-width: 3ch;
        font-size: 0.9rem;
    }

    .program-exercise-row .pex-stepper-controls {
        gap: 0.4rem;
    }

    .program-exercise-row .pex-stepper-btn {
        width: 26px;
        height: 26px;
        font-size: 0.75rem;
    }

    /* Drag handle + index badge — more presence on the taller card. */
    .program-exercise-row .pex-drag-handle {
        height: 28px;
        font-size: 0.9rem;
    }
    .program-exercise-row .pex-position {
        width: 22px;
        height: 22px;
        font-size: 0.8rem;
    }

    /* Delete stays tertiary at rest; aligned to the identity row's right edge. */
    .program-exercise-row .pex-delete {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.82rem !important;
    }
}

/* Between 641px and 900px keep the 2-column layout (sets-block + rest).
   No special override needed — the 1fr auto grid already stacks gracefully. */

/* Stepper — two zones separated by space-between:
     [ LABEL ]                   [ - value + ]
   The inner .pex-stepper-controls owns its own fixed inter-element gap so
   the spacing between minus, value, and plus is ALWAYS identical, no matter
   how long the value string is ("3", "10", "1:30", "2:15", "10:30"). */
/* Base = mobile. Horizontal inline pill — label inside, [-  value  +]
 * sharing the same rounded container. Desktop media query above replaces
 * this with a vertical label-over-pill block layout. */
.pex-stepper {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.35rem;
    font-size: 0.78rem;
    min-width: 0;
    box-sizing: border-box;
}

.pex-stepper-label {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Right-side cluster: [-] value [+]. Inline, no background of its own —
 * the outer .pex-stepper provides the pill chrome on mobile. */
.pex-stepper-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.pex-stepper-value {
    min-width: 2.6ch;
    padding: 0 0.1rem;
    text-align: center;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
}

.pex-stepper-btn {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.pex-stepper-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.pex-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pex-stepper-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(91, 155, 255, 0.45);
}

/* Tighter gap specifically between the number badge and the exercise name,
   so the badge reads as attached to the name it belongs to. */
.program-exercise-row .pex-position + .pex-name {
    margin-left: -0.15rem;
}

.program-exercise-row:hover {
    background: var(--bg-elevated);
    border-color: var(--border-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Neutral, low-emphasis index marker (not a bold blue circle). */
.pex-position {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Drag handle — low-emphasis grip icon; the whole row is draggable, this is
   just the visual affordance. Brightens on row hover. */
.pex-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 26px;
    color: var(--text-muted);
    opacity: 0.85;
    cursor: grab;
    font-size: 0.95rem;
    transition: color var(--transition-fast), opacity var(--transition-fast);
    flex-shrink: 0;
}

.program-exercise-row:hover .pex-drag-handle {
    color: var(--text-secondary);
    opacity: 1;
}

.pex-drag-handle:active {
    cursor: grabbing;
}

/* Row drag states */
.program-exercise-row {
    cursor: grab;
}

.program-exercise-row:active {
    cursor: grabbing;
}

.program-exercise-row.is-dragging {
    opacity: 0.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    border-color: var(--accent-primary);
}

/* Drop indicator — accent bar on the edge the dragged row would land on */
.program-exercise-row.is-drop-above {
    box-shadow: 0 -2px 0 0 var(--accent-primary);
}

.program-exercise-row.is-drop-below {
    box-shadow: 0 2px 0 0 var(--accent-primary);
}

.pex-name {
    font-size: 0.95rem;
    color: var(--text-primary);
    letter-spacing: -0.005em;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    line-height: 1.25;
}

.pex-name-main {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    letter-spacing: -0.01em;
}

.pex-name-sub {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.78rem;
    opacity: 1;
    white-space: nowrap;
}

/* Delete — small, low-contrast at rest; clear red on hover without heavy glow */
.pex-delete {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent !important;
    color: var(--text-muted) !important;
    opacity: 0.65;
    border-radius: var(--radius-sm);
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: none !important;
    font-family: inherit !important;
    transition: color var(--transition-fast), background var(--transition-fast),
                border-color var(--transition-fast), opacity var(--transition-fast),
                transform var(--transition-fast);
}

.program-exercise-row:hover .pex-delete {
    opacity: 1;
    border-color: var(--border-color) !important;
}

.pex-delete:hover,
.pex-delete:focus-visible {
    color: var(--accent-error) !important;
    background: var(--bg-elevated);
    border-color: var(--accent-error) !important;
    opacity: 1;
    outline: none;
}

.pex-delete:focus-visible {
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.4) !important;
}

.pex-delete:active {
    transform: scale(0.96);
}

/* Add Exercise — full-width secondary action. Subtle tinted surface at rest,
   brightens on hover. !important beats the global button overrides. */
.btn-add-exercise {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    height: auto !important;
    min-height: 0 !important;
    padding: 0.6rem 1rem !important;
    background: var(--bg-elevated) !important;
    border: 1px dashed var(--border-light) !important;
    border-radius: var(--radius-lg);
    color: var(--text-secondary) !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background var(--transition-base), border-color var(--transition-base),
                color var(--transition-base), box-shadow var(--transition-base);
}

.btn-add-exercise:hover {
    background: var(--bg-hover) !important;
    border-color: var(--border-light) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.btn-add-exercise:active {
    background: var(--bg-hover) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

.btn-add-exercise:focus-visible {
    outline: none;
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.4) !important;
}

.btn-add-exercise i {
    font-size: 0.78rem;
    color: inherit !important;
    transition: color var(--transition-base);
}

.btn-add-exercise:hover i {
    color: inherit !important;
}

/* Bottom action row — anchored footer with clear Cancel/Save hierarchy. */
.program-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.program-form-actions .btn {
    height: 44px !important;
    min-height: 0 !important;
    min-width: 120px;
    padding: 0 1.25rem !important;
    border-radius: 10px;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    line-height: 1 !important;
    transition: background var(--transition-base), border-color var(--transition-base),
                color var(--transition-base), box-shadow var(--transition-base),
                transform var(--transition-base), filter var(--transition-base);
}

/* Cancel — transparent/outline, tuned down so Save dominates. */
.program-form-actions .btn-ghost {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: none !important;
}

.program-form-actions .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: var(--text-primary) !important;
}

.program-form-actions .btn-ghost:active {
    background: var(--bg-hover) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

.program-form-actions .btn-ghost:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.25) !important;
}

/* Save — primary CTA. Strong gradient + glow so it's the obvious action. */
/* Calmer azure primary: flat fill, standard height, no glow/heavy shadow. */
.btn-save-program {
    background: var(--accent-primary) !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
    box-shadow: none !important;
    padding: 0.5rem 1rem !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 0.85rem !important;
}

.btn-save-program i {
    color: #ffffff !important;
    font-size: 0.82rem;
}

.btn-save-program:hover {
    filter: brightness(1.08);
    box-shadow: none !important;
}

.btn-save-program:active {
    filter: brightness(0.95);
    box-shadow: none !important;
}

.btn-save-program:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.4) !important;
}

@media (max-width: 520px) {
    .program-form-actions { flex-direction: column-reverse; align-items: stretch; gap: 0.5rem; }
    .program-form-actions .btn { width: 100%; min-width: 0; }
}

@media (max-width: 520px) {
    .program-exercise-row {
        gap: 0.5rem;
        padding: 0.5rem 0.6rem;
    }
    .pex-position { width: 22px; height: 22px; font-size: 0.65rem; }
}

/* Workout Day Exercise Items */
.exercise-day-item {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.exercise-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    gap: var(--spacing-sm);
}

.exercise-day-header h5 {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
    flex: 1;
}

.exercise-reorder-controls {
    display: flex;
    gap: 0.25rem;
}

.btn-reorder {
    padding: 0.25rem;
    font-size: 0.85rem;
    opacity: 0.7;
}

.btn-reorder:hover:not(:disabled) {
    opacity: 1;
    color: var(--accent-primary);
}

.btn-reorder:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.exercise-day-details {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.small-input {
    width: 60px;
    padding: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-align: center;
}

.workout-day-item {
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.workout-day-item h4 {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--accent-primary);
}

.workout-day-item p {
    margin: 0.25rem 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.workout-day-item .btn {
    margin-top: var(--spacing-sm);
    margin-right: var(--spacing-xs);
}

/* ============================================================
   Calendar — workout-tracking calendar
   ============================================================ */

/* Month-summary stat row */
.calendar-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    margin-bottom: var(--spacing-md);
}

@media (min-width: 640px) {
    .calendar-stats { grid-template-columns: repeat(5, 1fr); }
}

.cal-stat {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    min-width: 0;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-base);
}

.cal-stat:hover {
    border-color: var(--border-light);
}

.cal-stat-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(91, 155, 255, 0.12);
    border: 1px solid rgba(91, 155, 255, 0.22);
    border-radius: var(--radius-sm);
    color: var(--accent-primary);
    font-size: 0.9rem;
}

.cal-stat.is-hot .cal-stat-icon {
    color: #ff7849;
    background: rgba(255, 120, 73, 0.14);
    border-color: rgba(255, 120, 73, 0.28);
}

.cal-stat-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cal-stat-value {
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-stat-label {
    font-family: inherit;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Controls bar — single cohesive toolbar: month nav + today on the left,
   activity filter on the right. Shared component language across children. */
.calendar-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.55rem 0.7rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.calendar-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Subtle divider between month nav and the Today utility — keeps the toolbar
   cohesive while signaling that Today is a separate action. */
.calendar-nav-sep {
    width: 1px;
    height: 22px;
    background: var(--border-color);
    margin: 0 0.2rem;
    display: inline-block;
    flex-shrink: 0;
}

.calendar-controls h2 {
    margin: 0;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    min-width: 10.5ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* Calendar control buttons — armored against the global
   `button { height: 3.25rem; color: #555 !important; padding: 0 1.75rem; }`
   rule in assets/css/main.css. Use !important and explicit overrides. */
.calendar-nav-btn {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md);
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1 !important;
    box-shadow: none !important;
    font-family: inherit;
    transition: all var(--transition-base);
}

.calendar-nav-btn i {
    line-height: 1;
    display: inline-block;
}

.calendar-nav-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}

/* Activity filter — wraps a DarkSelect-styled dropdown. Width is controlled
   here (DarkSelect defaults to 100%). Filter icon sits just to the left of
   the trigger for a clearer "this is a filter" affordance. */
.calendar-filter-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 180px;
}

.calendar-filter-icon {
    color: var(--text-muted);
    font-size: 0.78rem;
    flex-shrink: 0;
}

/* Native <select> is hidden by DarkSelect; this only matters before
   the JS upgrade has run (prevents FOUC flashing the browser styles). */
.calendar-filter { display: none; }

/* Scope DarkSelect styling for the calendar toolbar — compact 36px trigger
   that visually matches .calendar-nav-btn and the Today button. */
.calendar-filter-wrap .dark-select {
    width: auto;
    min-width: 160px;
    flex: 1;
}

.calendar-filter-wrap .dark-select-trigger {
    height: 36px !important;
    padding: 0 0.85rem !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    font-family: inherit !important;
    gap: 0.6rem;
}

.calendar-filter-wrap .dark-select-trigger .dark-select-chevron {
    font-size: 0.7rem !important;
}

/* Open state visually "attaches" the popup to the trigger by flattening
   the shared edge and letting the accent ring wrap both pieces. */
.calendar-filter-wrap .dark-select.is-open .dark-select-trigger {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--accent-primary);
    background: var(--bg-hover);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.22);
}

.calendar-filter-wrap .dark-select-popup {
    top: calc(100% - 1px);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 1px solid var(--accent-primary);
    padding: 0.35rem;
}

/* Today — compact utility pill, lives inline with the month nav. Smaller
   than a full secondary button but clearly still an interactive action. */
.calendar-today-btn {
    height: 36px !important;
    padding: 0 0.8rem !important;
    background: rgba(91, 155, 255, 0.14);
    border: 1px solid rgba(91, 155, 255, 0.45) !important;
    border-radius: var(--radius-md);
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    font-family: inherit !important;
    letter-spacing: 0.005em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: none !important;
    transition: background var(--transition-base), border-color var(--transition-base),
                color var(--transition-base), box-shadow var(--transition-base),
                transform var(--transition-base);
}

.calendar-today-btn i {
    color: var(--accent-primary);
    font-size: 0.78rem;
    transition: color var(--transition-base);
}

.calendar-today-btn:hover:not(:disabled) {
    background: rgba(91, 155, 255, 0.26);
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(91, 155, 255, 0.3);
    transform: translateY(-1px);
}

.calendar-today-btn:hover:not(:disabled) i {
    color: #ffffff;
}

.calendar-today-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.28);
    background: rgba(91, 155, 255, 0.32);
}

.calendar-today-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.35);
}

.calendar-today-btn:disabled {
    background: transparent;
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
    box-shadow: none !important;
}

.calendar-today-btn:disabled i { color: var(--text-muted) !important; }

/* Mobile: let the filter take its own row underneath the nav */
@media (max-width: 520px) {
    .calendar-controls {
        gap: 0.6rem;
    }
    .calendar-nav {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    .calendar-filter-wrap {
        width: 100%;
        min-width: 0;
    }
    .calendar-filter-wrap .dark-select {
        width: 100%;
        min-width: 0;
    }
}

/* Legend */
.calendar-legend {
    display: flex;
    gap: 1rem;
    margin: 0.4rem 0 0.75rem;
    flex-wrap: wrap;
    padding: 0 0.2rem;
}

.calendar-legend:empty { display: none; }

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.legend-cue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.legend-dot-cue {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 6px rgba(91, 155, 255, 0.6);
}

.legend-pr-cue {
    color: #f5b942;
    font-size: 0.7rem;
}

/* Calendar grid — 7 equal columns, equal gap horizontal + vertical */
.calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.3rem;
    margin-bottom: 0.2rem;
    padding: 0.6rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.calendar-day-header {
    padding: 0.2rem 0 0.35rem;
    text-align: center;
    font-weight: 700;
    color: var(--text-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: inherit;
    line-height: 1.2;
}

.calendar-day {
    aspect-ratio: 1;
    display: block;
    padding: 0;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                transform var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
    line-height: 1 !important;
    overflow: hidden;
    /* Beat main.css `button { height: 3.25rem; padding: 0 1.75rem; }` */
    height: auto !important;
}

/* Buttons — the <button> tag for day cells — armor against global button rule */
button.calendar-day {
    box-shadow: none !important;
    color: var(--text-primary) !important;
}

.calendar-day-num {
    position: absolute;
    top: 0.4rem;
    right: 0.45rem;
    line-height: 1;
    font-family: inherit;
}

.calendar-day:hover {
    background: var(--bg-elevated);
    border-color: var(--border-light);
    transform: translateY(-1px);
}

.calendar-day.future {
    color: var(--text-disabled) !important;
    cursor: default;
    opacity: 0.65;
}

.calendar-day.future:hover {
    background: var(--bg-card);
    border-color: transparent;
    transform: none;
}

.calendar-day.empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
    pointer-events: none;
}

/* Days that have a workout — clearly accented so they pop at-a-glance */
.calendar-day.has-workout {
    background: linear-gradient(135deg, rgba(91, 155, 255, 0.18) 0%, rgba(91, 155, 255, 0.32) 100%);
    border-color: rgba(91, 155, 255, 0.4);
    box-shadow: inset 0 0 0 1px rgba(91, 155, 255, 0.18);
}

.calendar-day.has-workout:hover {
    background: linear-gradient(135deg, rgba(91, 155, 255, 0.25) 0%, rgba(91, 155, 255, 0.4) 100%);
    border-color: rgba(91, 155, 255, 0.6);
}

/* Today — purple ring outline (second priority) */
.calendar-day.today {
    border-color: var(--accent-primary);
    box-shadow: inset 0 0 0 1px var(--accent-primary) !important;
    color: var(--accent-primary) !important;
    font-weight: 700;
}

/* Selected — filled accent (highest priority) */
.calendar-day.selected {
    background: var(--gradient-primary) !important;
    border-color: var(--accent-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(91, 155, 255, 0.4), 0 0 0 1px var(--accent-primary);
    transform: translateY(-1px);
}

.calendar-day.selected .calendar-day-num { color: #ffffff !important; }

.calendar-day.dim {
    opacity: 0.35;
}

.calendar-day.dim:not(.selected):not(.today) {
    color: var(--text-disabled);
}

/* Workout indicator dot — bottom-center, brighter for visibility */
.calendar-day-dot {
    position: absolute;
    bottom: 0.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8),
                0 0 12px rgba(91, 155, 255, 0.6);
}

.calendar-day.selected .calendar-day-dot {
    background: #ffffff;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}

/* PR star — top-left corner */
.calendar-day-pr {
    position: absolute;
    top: 0.4rem;
    left: 0.45rem;
    color: #f5b942;
    font-size: 0.65rem;
    line-height: 1;
    filter: drop-shadow(0 0 3px rgba(245, 185, 66, 0.5));
}

.calendar-day.selected .calendar-day-pr {
    color: #fff8a8;
    filter: drop-shadow(0 0 3px rgba(255, 248, 168, 0.6));
}

/* Selected-day detail panel */
.calendar-detail {
    margin-top: var(--spacing-md);
}

.calendar-detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md);
    box-shadow: var(--shadow-sm);
}

.calendar-detail-card.empty {
    background: var(--bg-secondary);
    border-style: dashed;
    text-align: center;
    padding: 1.25rem var(--spacing-md);
}

.calendar-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-md);
}

.calendar-detail-card.empty .calendar-detail-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
    justify-content: center;
    text-align: center;
}

.calendar-detail-title {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.calendar-detail-sub {
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    line-height: 1.3;
}

.calendar-detail-sub .pr-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: rgba(245, 185, 66, 0.15);
    border: 1px solid rgba(245, 185, 66, 0.3);
    color: #f5b942;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.calendar-detail-empty {
    margin: 0.6rem 0 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
}

.calendar-detail-empty i {
    color: var(--accent-primary);
    opacity: 0.6;
}

.cal-session {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.85rem;
    margin-top: 0.55rem;
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base),
                transform var(--transition-fast), box-shadow var(--transition-base);
    outline: none;
}

.cal-session:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.cal-session:hover .cal-session-chevron {
    color: var(--accent-primary);
    transform: translateX(2px);
}

.cal-session:active {
    transform: translateY(0) scale(0.99);
}

.cal-session:focus-visible {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.25);
}

.cal-session:first-of-type { margin-top: 0; }

.cal-session-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cal-session-header strong {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.95rem;
}

.cal-session-chevron {
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: color var(--transition-base), transform var(--transition-fast);
}

.cal-session-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.cal-session-stats i {
    color: var(--accent-primary);
    margin-right: 0.25rem;
    font-size: 0.7rem;
}

.cal-session-notes {
    margin: 0.5rem 0 0 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
    font-style: italic;
}

/* ============================================================
   Achievements — progression system
   ============================================================ */

.achievement-summary {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.achievement-summary #unlocked-count {
    color: var(--accent-primary);
    font-weight: 700;
}

/* Filter / sort controls (replace tabs) */
.achievement-controls {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
    background: var(--bg-secondary);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.achievement-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-width: 160px;
}

.achievement-control-group label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.achievement-control-group select {
    width: 100%;
    padding: 0.65rem 2.4rem 0.65rem 0.9rem;
    background-color: var(--bg-elevated);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23b8b8d1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.achievement-control-group select:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-hover);
}

.achievement-control-group select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.2);
}

/* Layout: vertical stack of categories */
.achievements-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Each category section */
.achievement-category {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Header is a button so it's keyboard-focusable; reset native button look */
.achievement-category-header {
    width: 100%;
    display: flex;
    align-items: center;
    text-align: left;
    gap: var(--spacing-md);
    padding: 0.75rem 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base),
                box-shadow var(--transition-base);
    color: var(--text-primary);
    font-family: inherit;
}

.achievement-category-header:hover {
    background: var(--bg-elevated);
    border-color: var(--border-light);
    box-shadow: var(--shadow-sm);
}

.achievement-category.is-expanded .achievement-category-header {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(91, 155, 255, 0.06) 100%);
}

.achievement-category-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1.1rem;
}

.achievement-category-text {
    flex: 1;
    min-width: 0;
}

.achievement-category-text h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
}

.achievement-category-text p {
    margin: 0.1rem 0 0 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.achievement-category-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
}

.achievement-category-count strong {
    color: var(--accent-primary);
    font-weight: 700;
    margin-right: 0.15rem;
}

.achievement-category-chevron {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    transition: transform var(--transition-base), color var(--transition-base);
}

.achievement-category.is-expanded .achievement-category-chevron {
    transform: rotate(180deg);
    color: var(--accent-primary);
}

/* Progression chain — vertical list of cards. Hidden until parent expanded. */
.achievement-chain {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    animation: achievementChainExpand 0.2s ease;
}

.achievement-chain[hidden] {
    display: none;
}

@keyframes achievementChainExpand {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
    .achievement-chain {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .achievement-chain {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Bulk expand/collapse buttons in the controls row */
.achievement-bulk-toggle {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    margin-left: auto;
}

.achievement-bulk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.1rem !important;
    height: auto !important;
    min-height: 2.55rem;
    line-height: 1.2 !important;
    background: rgba(91, 155, 255, 0.1);
    border: 1px solid rgba(91, 155, 255, 0.35);
    border-radius: var(--radius-md);
    color: #ffffff !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base),
                color var(--transition-base), box-shadow var(--transition-base),
                transform var(--transition-base);
    white-space: nowrap;
    letter-spacing: 0.005em;
}

.achievement-bulk-btn:hover:not(:disabled) {
    background: rgba(91, 155, 255, 0.2);
    border-color: var(--accent-primary);
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(91, 155, 255, 0.28);
    transform: translateY(-1px);
}

.achievement-bulk-btn:active:not(:disabled) {
    background: rgba(91, 155, 255, 0.28);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.28);
    transform: translateY(0);
}

.achievement-bulk-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.35);
}

.achievement-bulk-btn:disabled {
    background: transparent;
    border-color: var(--border-color);
    color: var(--text-muted) !important;
    cursor: not-allowed;
    opacity: 0.45;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}

.achievement-bulk-btn i {
    font-size: 0.78rem;
    color: #ffffff;
    opacity: 0.95;
    transition: opacity var(--transition-base), color var(--transition-base);
}

.achievement-bulk-btn:hover:not(:disabled) i {
    opacity: 1;
    color: #ffffff;
}

.achievement-bulk-btn:disabled i {
    color: var(--text-muted);
    opacity: 0.6;
}

@media (max-width: 600px) {
    .achievement-bulk-toggle {
        margin-left: 0;
        width: 100%;
        justify-content: stretch;
    }
    .achievement-bulk-btn { flex: 1; justify-content: center; }
}

/* Achievement card */
.achievement-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.achievement-card.locked {
    background: var(--bg-secondary);
    opacity: 0.55;
}

.achievement-card.in-progress {
    border-color: rgba(91, 155, 255, 0.35);
    box-shadow: var(--shadow-sm);
}

.achievement-card.unlocked {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(93, 189, 149, 0.08) 100%);
    border-color: rgba(93, 189, 149, 0.35);
    box-shadow: var(--shadow-sm), 0 0 24px -8px rgba(93, 189, 149, 0.35);
}

.achievement-card:hover {
    transform: translateY(-1px);
}

.achievement-card.unlocked:hover {
    box-shadow: var(--shadow-md), 0 0 32px -6px rgba(93, 189, 149, 0.45);
}

.achievement-card .achievement-icon {
    font-size: 1.6rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all var(--transition-base);
}

.achievement-card.in-progress .achievement-icon {
    filter: grayscale(0%);
    opacity: 0.95;
    border-color: rgba(91, 155, 255, 0.4);
}

.achievement-card.unlocked .achievement-icon {
    filter: grayscale(0%);
    opacity: 1;
    border-color: rgba(93, 189, 149, 0.45);
    box-shadow: 0 0 12px rgba(93, 189, 149, 0.25);
}

.achievement-card .achievement-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.achievement-card .achievement-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.achievement-card .achievement-info h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}

.achievement-card .achievement-info p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Checkmark badge for unlocked */
.achievement-checkmark {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #5dbd95;
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.7rem;
    box-shadow: 0 0 0 3px rgba(93, 189, 149, 0.18);
}

/* Progress track inside cards */
.achievement-progress-track {
    margin-top: 0.35rem;
    height: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.achievement-progress-bar {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 3px;
    transition: width var(--transition-slow);
    box-shadow: 0 0 8px rgba(91, 155, 255, 0.35);
}

.achievement-card .achievement-status {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}

.achievement-card.unlocked .achievement-status.unlocked-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #5dbd95;
    font-weight: 600;
}

/* Settings */
.settings-form {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.settings-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.settings-section-header {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.settings-section-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(91, 155, 255, 0.15);
    border: 1px solid rgba(91, 155, 255, 0.3);
    color: var(--accent-primary);
    border-radius: var(--radius-md);
    font-size: 1rem;
}

.settings-section h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

.settings-section-sub {
    margin: 0.2rem 0 0 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

.setting-item {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    padding: 0;
    background: transparent;
    border-radius: 0;
    margin: 0;
    min-height: 0;
}

.setting-item label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.setting-item input[type="checkbox"],
.setting-item .toggle {
    flex-shrink: 0;
    margin-left: var(--spacing-md);
}

/* ----- Custom dark dropdown (DarkSelect) ----- */
.dark-select {
    position: relative;
    width: 100%;
}

.dark-select-trigger {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 0.95rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    text-align: left;
}

.dark-select-trigger:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}

.dark-select.is-open .dark-select-trigger {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.18);
}

.dark-select-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark-select-chevron {
    color: var(--text-muted);
    font-size: 0.75rem;
    transition: transform var(--transition-base), color var(--transition-base);
    flex-shrink: 0;
}

.dark-select.is-open .dark-select-chevron {
    color: var(--accent-primary);
    transform: rotate(180deg);
}

.dark-select-popup {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.3rem;
    box-shadow: 0 18px 40px -8px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(91, 155, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: darkSelectFade 0.16s ease;
    max-height: 320px;
    overflow-y: auto;
}

.dark-select-popup[hidden] {
    display: none !important;
}

@keyframes darkSelectFade {
    from { opacity: 0; transform: translateY(-6px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dark-select-option {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    /* Pinned !important: these options are <button>s, so without it the
       sitewide main.css `button{color:#555}` paints every dropdown option a
       disabled gray and `button:hover{color:#ce1b28}` turns the hovered option
       red. Pin base + hover + selected so all dropdowns read correctly. */
    color: var(--text-primary) !important;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.dark-select-option:hover:not(.disabled) {
    background: var(--bg-elevated);
    color: var(--text-primary) !important;
}

.dark-select-option.selected,
.dark-select-option.selected:hover {
    background: rgba(91, 155, 255, 0.18);
    color: var(--accent-primary) !important;
    font-weight: 600;
}

.dark-select-option.selected:hover {
    background: rgba(91, 155, 255, 0.25);
}

.dark-select-option.disabled {
    color: var(--text-disabled) !important;
}

.dark-select-check {
    color: var(--accent-primary);
    font-size: 0.75rem;
}

.dark-select-option.disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
    opacity: 0.55;
}

/* Section header inside the popup (rendered for <optgroup>) */
.dark-select-group-label {
    padding: 0.55rem 0.75rem 0.3rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent-primary);
    border-top: 1px solid var(--border-color);
    margin-top: 0.25rem;
}

.dark-select-group-label:first-child {
    border-top: none;
    margin-top: 0;
}

/* Options under a group get a small left indent for visual hierarchy */
.dark-select-group-label + .dark-select-option,
.dark-select-group-label ~ .dark-select-option {
    /* No-op: indentation is achieved via padding on .dark-select-option itself */
}

/* Placeholder state (no value picked yet) — dimmer trigger label */
.dark-select.is-placeholder .dark-select-label {
    color: var(--text-muted);
    font-weight: 500;
}

/* ===========================================================
   Create Custom Exercise Modal — polish
   =========================================================== */
.custom-exercise-modal-content {
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--border-color);
}

#custom-exercise-modal .modal-header {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

#custom-exercise-modal .modal-header h2 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

#custom-exercise-modal .modal-close {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition-base);
}

#custom-exercise-modal .modal-close:hover {
    background: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--text-primary);
}

#custom-exercise-modal .modal-body {
    padding: var(--spacing-md) var(--spacing-lg) var(--spacing-md);
}

#custom-exercise-form .form-group {
    margin-bottom: 0.85rem;
}

#custom-exercise-form .form-group label {
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

#custom-exercise-form .form-group input[type="text"] {
    padding: 0.7rem 0.85rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
}

#custom-exercise-form .form-group input::placeholder {
    color: var(--text-muted);
}

#custom-exercise-form .form-group input:focus,
#custom-exercise-form .form-group input:focus-visible {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.18);
}

/* Suppress the harsh native :invalid red outline. We only show error
   styling once the user has actually attempted to submit (via :user-invalid
   if supported, or the .has-error class added by JS). */
#custom-exercise-form input:invalid,
#custom-exercise-form select:invalid {
    border-color: var(--border-color);
    box-shadow: none;
}

#custom-exercise-form input:user-invalid {
    border-color: rgba(255, 82, 82, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 82, 82, 0.12);
}

/* Softer error state — replaces the harsh native :invalid neon outline */
#custom-exercise-form .form-group.has-error input,
#custom-exercise-form .form-group.has-error .dark-select-trigger {
    border-color: rgba(255, 82, 82, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 82, 82, 0.12);
}

#custom-exercise-form .field-error {
    margin: 0.3rem 0 0 0;
    font-size: 0.75rem;
    color: rgba(255, 122, 122, 0.95);
    font-weight: 500;
}

/* Footer — match programs modal */
.custom-exercise-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.custom-exercise-form-actions .btn {
    height: 44px;
    min-width: 130px;
    padding: 0 1.1rem;
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    line-height: 1;
}

.btn-create-exercise {
    background: var(--gradient-primary);
    border: 1px solid transparent;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(91, 155, 255, 0.3);
    transition: all var(--transition-base);
}

.btn-create-exercise:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(91, 155, 255, 0.5);
    filter: brightness(1.05);
}

.btn-create-exercise:active {
    transform: translateY(0);
    filter: brightness(0.95);
}

@media (max-width: 520px) {
    .custom-exercise-form-actions { flex-direction: column-reverse; align-items: stretch; gap: 0.5rem; }
    .custom-exercise-form-actions .btn { width: 100%; min-width: 0; }
}

/* The generic .dark-select-popup already has max-height + overflow-y for
   long lists; the muscle-group dropdown scrolls inside the popup naturally. */

/* ----- Data Management button row — uniform sizing ----- */
.setting-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
}

.setting-actions .btn {
    min-height: 48px;
    height: 48px;
    padding: 0 1rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-sizing: border-box;
    border: 1px solid transparent;
    box-shadow: none;
    line-height: 1;
}

.setting-actions .btn-secondary {
    background: var(--bg-elevated);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.setting-actions .btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.setting-actions .btn-danger {
    background: rgba(255, 82, 82, 0.15);
    border-color: rgba(255, 82, 82, 0.4);
    color: #ff7676;
}

.setting-actions .btn-danger:hover {
    background: rgba(255, 82, 82, 0.25);
    border-color: var(--accent-error);
    color: #ffffff;
    filter: none;
}

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

/* ----- Save Settings — inline right-aligned action ----- */
.settings-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.75rem;
    /* No background, border, padding — sits naturally below the last card */
}

.btn-save-settings {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 42px !important;
    min-width: 140px;
    padding: 0 1.1rem !important;
    background: var(--gradient-primary);
    border: 1px solid transparent !important;
    border-radius: var(--radius-md);
    /* !important to beat the global `button { color: #555 !important }` in
       assets/css/main.css — without it the text renders dim gray on the
       purple gradient. */
    color: #ffffff !important;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(91, 155, 255, 0.22) !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base),
                filter var(--transition-base), opacity var(--transition-base);
}

.btn-save-settings i,
.btn-save-settings span,
.btn-save-settings svg {
    color: #ffffff !important;
    fill: currentColor;
    stroke: currentColor;
    opacity: 1;
}

.btn-save-settings:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 155, 255, 0.4) !important;
    filter: brightness(1.06);
    color: #ffffff !important;
}

.btn-save-settings:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.96);
    box-shadow: 0 1px 3px rgba(91, 155, 255, 0.25) !important;
}

.btn-save-settings:disabled {
    background: var(--bg-elevated);
    border-color: var(--border-color) !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-save-settings:disabled i,
.btn-save-settings:disabled span {
    color: var(--text-muted) !important;
    opacity: 1;
}

@media (max-width: 639px) {
    .settings-actions {
        justify-content: stretch;
        margin-top: 1.25rem;
    }
    .btn-save-settings {
        width: 100%;
        min-width: 0;
    }
}

/* More Menu (Mobile) */
.more-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.more-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--text-primary);
    text-decoration: none;
}

.more-item:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}

.more-item i:first-child {
    font-size: 1.25rem;
    width: 24px;
    color: var(--accent-primary);
}

.more-item span {
    flex: 1;
    font-size: 1rem;
}

.more-item i:last-child {
    color: var(--text-primary);
}

/* Utility Classes */
.text-success {
    color: var(--accent-success);
}

.text-error {
    color: var(--accent-error);
}

.text-muted {
    color: var(--text-primary);
}

.text-warning {
    color: var(--accent-warning);
    font-size: 0.9rem;
    margin: var(--spacing-sm) 0;
}

/* Program Selection Grid */
.program-selection-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
    /* `stretch` is the grid default but spelled out so future tweaks
       can't accidentally shrink-fit cards to their own content height. */
    align-items: stretch;
}

@media (min-width: 768px) {
    .program-selection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .program-selection-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Lock the workout-picker cards into the same vertical rhythm so
   single-line titles, two-line titles, and titles with descriptions
   all line their bottom action up. Scoped to .program-selection-grid
   so the Programs page (which has a different bottom action cluster)
   is unaffected. */
.program-selection-grid .program-card {
    min-height: 0;
    padding: 1.15rem 1.15rem 1.1rem;
}

/* Reserve room for ~2 lines of title so a 1-line and 2-line title
   produce the same gap to the next row. ~2.4em with the h3 line-height
   covers two lines of the typical title without forcing extra space
   when the title is short. */
.program-selection-grid .program-card .program-header {
    min-height: 2.4em;
    display: flex;
    align-items: flex-start;
}
.program-selection-grid .program-card .program-header h3 {
    margin: 0;
    line-height: 1.2;
}

/* Push the trailing element (Start Workout button OR the
   "no exercises" warning) to the foot so every card's primary action
   lines up horizontally across the row. */
.program-selection-grid .program-card > :last-child {
    margin-top: auto;
}

/* Consistent button height across cards regardless of inner content. */
.program-selection-grid .program-card .btn-large {
    width: 100%;
    min-height: 52px;
}

/* Quick Programs on Home */
.program-summary {
    text-align: center;
}

.program-summary h3 {
    color: var(--text-primary);
    font-weight: 600;
}

.quick-programs {
    margin: var(--spacing-lg) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.quick-program-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.quick-program-item[data-action] {
    cursor: pointer;
}

.quick-program-item[data-action]:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    transform: translateX(4px);
}

.quick-program-item .program-info strong {
    color: var(--text-primary);
    font-size: 1rem;
}

.quick-program-item .program-info span {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.quick-program-item .program-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
    align-items: flex-start;
}

.quick-program-item .fa-play-circle {
    color: var(--accent-primary);
    font-size: 1.5rem;
}

.quick-program-item .fa-edit {
    color: var(--text-primary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
}

.quick-program-item .fa-edit:hover {
    color: var(--accent-primary);
}

.text-secondary {
    color: var(--text-primary);
}

/* ============================================================
   Exercise History Modal — refined
   ============================================================ */

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

.exercise-detail-section:last-child { margin-bottom: 0; }

.exercise-detail-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
}

.exercise-detail-section-header h3 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.exercise-detail-section-header h3 i {
    color: var(--accent-primary);
    font-size: 0.75rem;
}

.exercise-detail-section-caption {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* Best-Set stats row — uniform cards */
.exercise-stats-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 0;
}

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

.stat-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    text-align: left;
    min-height: 64px;
}

.stat-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.1;
}

.stat-value {
    display: block;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

/* History table */
.exercise-history-table {
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.exercise-history-table table {
    width: 100%;
    border-collapse: collapse;
}

.exercise-history-table th {
    background-color: var(--bg-secondary) !important;
    padding: 0.55rem 0.85rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary) !important;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--border-color);
}

.exercise-history-table th.col-date { width: 32%; min-width: 110px; }

/* Lock header row — no hover effect, ever. */
.exercise-history-table thead tr,
.exercise-history-table thead tr:hover,
.exercise-history-table thead tr:hover th,
.exercise-history-table th:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    cursor: default;
}

.exercise-history-table td {
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid rgba(58, 58, 94, 0.4); /* lighter divider */
    vertical-align: middle;
    transition: background-color 0.15s ease;
}

/* Neutralize marketing-site zebra striping — see notes on .sets-table */
.exercise-history-table tbody tr,
.exercise-history-table tbody tr:nth-child(2n + 1),
.exercise-history-table tbody tr:nth-child(2n) {
    background-color: transparent !important;
}

.exercise-history-table tr:last-child td {
    border-bottom: none;
}

.exercise-history-table tbody tr:hover td,
.exercise-history-table tbody tr:nth-child(2n + 1):hover td,
.exercise-history-table tbody tr:nth-child(2n):hover td {
    background-color: rgba(91, 155, 255, 0.08) !important;
    color: var(--text-primary);
}

.exercise-history-table .col-date {
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.history-date {
    font-weight: 600;
}

/* "Best" row — subtle gold tint + small badge. !important beats both the
   marketing-site zebra stripe and the purple hover rule above. */
.exercise-history-table tr.is-best-row td {
    background-color: rgba(245, 185, 66, 0.06) !important;
}

.exercise-history-table tr.is-best-row:hover td {
    background-color: rgba(245, 185, 66, 0.12) !important;
}

.best-row-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    background: rgba(245, 185, 66, 0.18);
    border: 1px solid rgba(245, 185, 66, 0.4);
    color: #f5b942;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.best-row-badge i { font-size: 0.6rem; }

/* Responsive Typography */
@media (max-width: 767px) {
    .view-header h1 {
        font-size: 1.75rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .section h2 {
        font-size: 1.25rem;
    }
}

/* Loading States */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-card);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--bg-hover);
}

/* Workout Card Additional Stats — pill chips with consistent rhythm */
.workout-card-additional-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-color);
}

.additional-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 0.25rem 0.55rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.additional-stat i {
    color: var(--accent-primary);
    font-size: 0.75rem;
}

/* Clickable Cards */
.workout-card.clickable {
    cursor: pointer;
}

.workout-card.clickable:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.workout-card.clickable:active {
    transform: translateY(0);
}

/* ============================================================
   Workout Detail Modal — refinement pass
   Goal: less nested boxes, stronger exercise anchors, dark-themed
   table, comfortable scroll rhythm.
   ============================================================ */

/* Slightly narrower than the default 600px modal is actually wider than
   needed for this layout; bump to 680px for desktop comfort. */
#workout-detail-modal .modal-content {
    max-width: 680px;
}

/* Summary block — date + inline stat strip, not a boxy grid */
.workout-detail-summary {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.detail-date {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.4rem;
}

@media (max-width: 480px) {
    .detail-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.35rem 0.5rem;
    }
}

.detail-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem 0.55rem;
    background: transparent;
    border-radius: 0;
    position: relative;
    text-align: left;
}

.detail-stat + .detail-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--border-color);
}

@media (max-width: 480px) {
    .detail-stat + .detail-stat::before { display: none; }
}

.detail-stat .label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.detail-stat .value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Exercises section — flat, divider-based layout (no nested panels) */
#workout-detail-modal .modal-body > h3 {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 1rem 0 0.6rem 0;
}

.workout-detail-exercises {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.detail-exercise {
    background: transparent;
    border-radius: 0;
    padding: 0 0 0.85rem 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-exercise:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-exercise h4 {
    margin: 0 0 0.6rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-exercise h4::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    background: var(--accent-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

/* Dark-themed table */
.sets-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.sets-table th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    color: var(--text-muted) !important;
    font-weight: 700;
    background-color: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
}

/* Lock the header row — no hover effect. Overrides any inherited rule that
   might set a light background when hovering over <thead>. */
.sets-table thead tr,
.sets-table thead tr:hover,
.sets-table thead tr:hover th,
.sets-table th:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
    color: var(--text-muted) !important;
    cursor: default;
}

/* Right-align numeric columns (every column except the Set/Round col) */
.sets-table th:not(:first-child),
.sets-table td:not(:first-child) {
    text-align: right;
}

.sets-table td {
    padding: 0.55rem 0.75rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s ease;
}

/* Neutralize the marketing-site zebra stripe that bleeds in from
   assets/css/main.css: `table tbody tr:nth-child(2n + 1) { background: rgba(0,0,0,0.075) }`.
   We do NOT want alternating rows here — the modal uses a uniform dark theme. */
.sets-table tbody tr,
.sets-table tbody tr:nth-child(2n + 1),
.sets-table tbody tr:nth-child(2n) {
    background-color: transparent !important;
}

.sets-table tbody tr:last-child td {
    border-bottom: none;
}

/* Dark-themed hover: subtle tint applied to the cells of every row
   (not the <tr>), so it always reads the same regardless of stripe state. */
.sets-table tbody tr:hover td,
.sets-table tbody tr:nth-child(2n + 1):hover td,
.sets-table tbody tr:nth-child(2n):hover td {
    background-color: rgba(91, 155, 255, 0.08) !important;
    color: var(--text-primary);
}

.sets-table td:first-child {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.82rem;
    width: 2.5rem;
}

/* Additional Metrics — consistent with the summary strip at the top */
#workout-detail-modal .modal-body > h3:not(:first-of-type) {
    margin-top: 1.25rem;
}

/* Relocated Additional Metrics section sits directly below the summary.
   The h3 inside doesn't need extra top margin (it's already the first
   heading under the summary), and the section gets a bottom spacer so
   Exercises below doesn't crowd it. */
.workout-detail-metrics {
    margin: 0.25rem 0 1.25rem;
}

.workout-detail-metrics > h3 {
    margin-top: 0;
}

.workout-detail-notes {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.88rem;
    line-height: 1.55;
    white-space: pre-wrap;
    margin: 0;
}

/* Close button — scoped polish so it matches the rest of the app */
#workout-detail-modal .modal-close {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 1.35rem;
    line-height: 1;
    transition: background var(--transition-base), color var(--transition-base),
                border-color var(--transition-base);
}

#workout-detail-modal .modal-close:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-color);
}

#workout-detail-modal .modal-close:focus-visible {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.3);
}

#workout-detail-modal .modal-header {
    padding: 1rem 1.1rem;
}

#workout-detail-modal .modal-header h2 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

#workout-detail-modal .modal-body {
    padding: 1rem 1.1rem 1.1rem;
}

/* Paused Workout Banner */
.paused-workout-banner {
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-card) 100%);
    border: 2px solid var(--accent-warning);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

@media (min-width: 768px) {
    .paused-workout-banner {
        flex-direction: row;
        align-items: center;
    }
}

.paused-workout-icon {
    font-size: 2.5rem;
    color: var(--accent-warning);
    text-align: center;
}

@media (min-width: 768px) {
    .paused-workout-icon {
        margin-right: var(--spacing-md);
    }
}

.paused-workout-info {
    flex: 1;
    text-align: center;
}

@media (min-width: 768px) {
    .paused-workout-info {
        text-align: left;
    }
}

.paused-workout-info h3 {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--accent-warning);
    font-size: 1.1rem;
}

.paused-workout-info p {
    margin: 0;
    color: var(--text-primary);
}

.paused-workout-meta {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-top: var(--spacing-xs);
    color: var(--text-secondary) !important;
    font-size: 0.85rem;
}

@media (min-width: 768px) {
    .paused-workout-meta {
        justify-content: flex-start;
    }
}

.paused-workout-meta i {
    margin-right: var(--spacing-xs);
}

.paused-workout-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

@media (min-width: 768px) {
    .paused-workout-actions {
        flex-direction: column;
    }
}

.paused-workout-actions .btn {
    min-width: 100px;
}

.btn-danger-outline {
    background: transparent;
    border: 1px solid var(--accent-error);
    color: var(--accent-error);
}

.btn-danger-outline:hover {
    background: rgba(255, 82, 82, 0.1);
}

/* Paused program item in quick programs */
.quick-program-item.paused {
    border-color: var(--accent-warning);
    background: rgba(255, 165, 0, 0.1);
}

.quick-program-item.paused .paused-label {
    color: var(--accent-warning);
    font-weight: 500;
}

.quick-program-item.paused .paused-label i {
    margin-right: 4px;
}

.quick-program-item.paused .fa-play-circle {
    color: var(--accent-warning);
}

/* Exercise History Set Badges — simplified to neutral + best */
.sets-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.set-badge {
    display: inline-flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    padding: 0.25rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.set-badge.set-best {
    background: rgba(245, 185, 66, 0.14);
    border-color: rgba(245, 185, 66, 0.5);
    color: #f5b942;
    font-weight: 700;
}

/* Improved vs previous session — soft green tint */
.set-badge.set-improved {
    background: rgba(93, 189, 149, 0.14);
    border-color: rgba(93, 189, 149, 0.45);
    color: #5dbd95;
    font-weight: 600;
    cursor: help;
}

/* Worse vs previous session — soft red tint (calm, not alarming) */
.set-badge.set-worse {
    background: rgba(255, 122, 122, 0.12);
    border-color: rgba(255, 122, 122, 0.4);
    color: #ff7a7a;
    font-weight: 600;
    cursor: help;
}

/* Exercise History Count Badge */
.exercise-db-card {
    position: relative;
}

.history-count-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--accent-primary);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: var(--shadow-md);
}

/* Print Styles */
@media print {
    .bottom-nav,
    .side-nav,
    .btn,
    .modal {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }
}

/* Delete-history footer inside exercise detail modal */
.exercise-detail-delete-footer {
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    display: flex;
    justify-content: center;
}

.exercise-detail-delete-history-btn .fa-trash {
    color: var(--accent-error) !important;
}

/* ============================================================
 * Per-exercise progression chart (exercise detail modal)
 * ============================================================ */
.exercise-progression {
    margin-top: var(--spacing-lg);
}

.exercise-detail-section-caption.is-up {
    color: var(--accent-success);
}
.exercise-detail-section-caption.is-down {
    color: var(--accent-error);
}

.progression-chart-wrap {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.progression-chart {
    display: block;
    width: 100%;
    height: auto;
    max-height: 200px;
}

.progression-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.progression-line-primary {
    stroke: var(--accent-primary);
}

.progression-line-e1rm {
    stroke: var(--accent-success);
    stroke-dasharray: 4 4;
    opacity: 0.75;
}

.progression-dot {
    fill: var(--accent-primary);
    stroke: var(--bg-tertiary);
    stroke-width: 1.5;
}

.progression-axis {
    font-size: 10px;
    fill: var(--text-muted);
}

.progression-axis-line {
    stroke: var(--border-color);
    stroke-width: 1;
}

.progression-legend {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.progression-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.progression-legend .dot {
    display: inline-block;
    width: 10px;
    height: 2px;
    border-radius: 1px;
}

.progression-legend .dot-primary {
    background: var(--accent-primary);
}

.progression-legend .dot-e1rm {
    background: var(--accent-success);
}

/* ============================================================
 * This-week dashboard card (Home view)
 * ============================================================ */
.week-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.week-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--spacing-md);
}

.week-summary-header h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.week-summary-caption {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.week-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

@media (min-width: 640px) {
    .week-summary-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.week-tile {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.week-tile-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.week-tile-value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin-top: 2px;
}

.week-tile-delta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.week-tile-delta.is-up {
    color: var(--accent-success);
}

.week-tile-delta.is-down {
    color: var(--accent-error);
}

/* ============================================================
 * PR badge on just-committed set rows
 * ============================================================ */
.set-row--pr {
    position: relative;
    background: linear-gradient(
        to right,
        rgba(255, 165, 0, 0.08),
        transparent 40%
    );
    border-left: 2px solid var(--accent-warning);
}

.pr-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: #2a1a00;
    background: linear-gradient(135deg, #ffcb5c, #ffa500);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    vertical-align: baseline;
    white-space: nowrap;
}

.pr-badge .fa-trophy {
    font-size: 0.7rem;
}

/* ============================================================
 * First-run onboarding modal
 * ============================================================ */
.onboarding-modal-content {
    max-width: 560px;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}

/* Scrollable body — header + footer stay fixed outside the scroll. */
.onboarding-body {
    overflow-y: auto;
    max-height: 70vh;
    flex: 1 1 auto;
}

.onboarding-intro {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.onboarding-section {
    margin-bottom: var(--spacing-lg);
}

.onboarding-section:last-child {
    margin-bottom: 0;
}

.onboarding-section-title {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent-primary);
}

.onboarding-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.onboarding-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.onboarding-item-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.onboarding-item-body {
    flex: 1 1 auto;
    min-width: 0;
}

.onboarding-item-title {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 2px 0;
    font-size: 0.95rem;
}

.onboarding-item-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.45;
}

.onboarding-item-cta {
    flex: 0 0 auto;
    align-self: center;
}

@media (max-width: 767px) {
    .onboarding-body {
        max-height: 68vh;
    }
    .onboarding-item {
        gap: var(--spacing-sm);
    }
    .onboarding-item-cta {
        align-self: flex-start;
    }
}

.onboarding-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-md) 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.onboarding-step {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.onboarding-step-number {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-primary);
    color: white;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onboarding-step-body {
    flex: 1;
}

.onboarding-step-title {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 2px 0;
    font-size: 0.95rem;
}

.onboarding-step-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0;
}

.onboarding-step-cta {
    flex: 0 0 auto;
}

/* ============================================================
 * Accessibility: visible focus rings and touch targets
 * ============================================================ */
.gym-tracker *:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Keep the input border-colour cue and ADD a visible focus ring
 * (previously outline was forced to 'none'). */
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.form-group select:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.modal-close:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Override the generic .setting-item flex-direction: column so toggle
 * rows lay out label-left / switch-right instead of stacked. */
.setting-item.setting-item-toggle {
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: 0.5rem 0;
}

.setting-toggle-label {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

/* Custom toggle switch (native checkbox hidden behind a styled slider). */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex: 0 0 auto;
    margin: 0 !important;
}

.toggle-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    cursor: pointer;
    z-index: 1;
}

.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: var(--text-primary);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform var(--transition-base);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider::before {
    transform: translateX(22px);
}

.toggle-switch input[type="checkbox"]:focus-visible + .toggle-slider {
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.4);
}

/* ============================================================
 * Inline form validation (dark-theme friendly)
 * ============================================================ */
.form-error {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0 0 0;
    padding: 0;
    font-size: 0.8rem;
    color: #ff9a9a;
    line-height: 1.3;
}

.form-error i {
    font-size: 0.8rem;
    flex: 0 0 auto;
}

.form-error[hidden] { display: none; }

/* Invalid input — subtle red border + faint glow, not harsh. */
.form-group input.is-invalid,
.form-group textarea.is-invalid,
.form-group select.is-invalid {
    border-color: rgba(239, 68, 68, 0.6) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.12);
}

.form-group input.is-invalid:focus,
.form-group textarea.is-invalid:focus {
    border-color: rgba(239, 68, 68, 0.8) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

/* Section-level error banner (e.g. "add at least one exercise"). */
.form-error-section {
    margin-top: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: var(--radius-md);
}

/* Section container highlighted when its inner validation fails. */
.is-invalid-section {
    border-color: rgba(239, 68, 68, 0.45) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.08);
}


/* ------------------------------------------------------------------
   Sync status pill — inline indicator rendered into
   `[data-sync-status-slot]` placeholders (one in the desktop side-nav
   footer, one in the mobile More view header). Was previously a
   floating bottom-right element that overlapped the workout FAB and
   bottom nav and flickered green↔amber as debounced writes flushed
   between sets. Lives inside layout flow now so it never covers
   workout controls. State logic: js/utils/sync-status.js.
   ------------------------------------------------------------------ */
.sync-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    user-select: none;
    transition: background 200ms ease, color 200ms ease;
    white-space: nowrap;
}
.sync-status-pill::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: 6px;
    background: currentColor;
    /* Shape doubles as a non-color signal so users with low color
       perception still get state from the dot's position + label. */
    flex: none;
}
.sync-status-pill[data-state="synced"]     { background: rgba(34, 197, 94, 0.85); }
.sync-status-pill[data-state="syncing"]    { background: rgba(245, 158, 11, 0.85); }
.sync-status-pill[data-state="connecting"] { background: rgba(245, 158, 11, 0.6); }
.sync-status-pill[data-state="offline"]    { background: rgba(148, 163, 184, 0.85); }
.sync-status-pill[data-state="idle"]       { background: rgba(100, 116, 139, 0.7); }

/* Mobile compact sync dot — a tiny colored circle pinned to the upper
   corner of the "More" tab in the bottom nav. Always visible on
   mobile so the user gets an at-a-glance "everything's synced"
   confirmation without needing to navigate anywhere. Hidden on desktop
   (the side-nav pill already covers that surface). Decorative only —
   `aria-hidden` in HTML keeps it out of the SR tree, the offline
   banner handles real announcements. */
.nav-sync-dot {
    position: absolute;
    top: 6px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.85); /* default = slate (idle) */
    box-shadow: 0 0 0 2px var(--bg-secondary); /* halo against nav bg */
    pointer-events: none;
    transition: background 200ms ease;
}
.nav-sync-dot[data-state="synced"]     { background: rgba(34, 197, 94, 0.95); }
.nav-sync-dot[data-state="syncing"]    { background: rgba(245, 158, 11, 0.95); }
.nav-sync-dot[data-state="connecting"] { background: rgba(245, 158, 11, 0.55); }
.nav-sync-dot[data-state="offline"]    { background: rgba(148, 163, 184, 0.95); }
.nav-sync-dot[data-state="idle"]       { background: rgba(100, 116, 139, 0.85); }

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

/* Side-nav footer — pushed to the bottom of the sidebar so it sits
   below all nav links like a system tray. .nav-links uses flex:1, so
   this element naturally docks at the bottom without absolute
   positioning. */
.side-nav-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-start;
}

/* Mobile sync banner — pinned to the top of the viewport, full width,
   only visible when sync state is offline (or briefly on the
   offline→synced transition). Hidden in all other states so it never
   competes with workout content. The desktop side-nav pill above is
   the equivalent surface for desktop users. */
.sync-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100; /* Above bottom-nav (1000), below modals (~2000). */
    padding: 8px 14px calc(8px + env(safe-area-inset-top, 0px));
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: background 200ms ease, opacity 200ms ease, transform 200ms ease;
    transform: translateY(0);
}
.sync-banner[hidden] { display: none; }
.sync-banner[data-state="offline"] { background: rgba(100, 116, 139, 0.95); }
.sync-banner[data-state="synced"]  { background: rgba(34, 197, 94, 0.95); }
.sync-banner[data-fading="true"]   { opacity: 0; transform: translateY(-4px); }

/* Hide the banner on desktop — the side-nav pill already shows status
   and a top banner would shove the layout down for no reason. */
@media (min-width: 768px) {
    .sync-banner { display: none !important; }
}

/* ------------------------------------------------------------------
   Keyboard reorder buttons — sit alongside the drag handle on programs
   and program-exercise rows (in the Program edit modal). The card-
   level arrows on the Programs grid were removed in favour of drag-
   only reorder; the in-modal exercise-row arrows stay because there's
   no drag handle inside the modal.
   ------------------------------------------------------------------ */
.pex-move-buttons {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    margin-right: 4px;
}
.btn-icon-move {
    width: 28px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn-icon-move:hover:not(:disabled),
.btn-icon-move:focus-visible {
    background: rgba(91, 155, 255, 0.18);
    border-color: rgba(91, 155, 255, 0.45);
    color: #fff;
}
.btn-icon-move:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.btn-icon-move-mini {
    width: 24px;
    height: 18px;
    font-size: 10px;
}

/* ------------------------------------------------------------------
   Plate calculator UI — Settings input stack + per-row inline hint.
   ------------------------------------------------------------------ */
.setting-item-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

/* Settings form was relying on browser default styling for plain
   <input>s, which renders as a glaring white box on this dark UI.
   Match the same dark-on-dark treatment .form-group inputs already
   use elsewhere in the app: subtle border, deep-blue surface, soft
   purple focus ring, and inset shadow for tactility. */
.settings-form .setting-item input[type="text"],
.settings-form .setting-item input[type="number"],
.settings-form .setting-item input[type="date"] {
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    padding: 0.7rem 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transition: border-color var(--transition-base),
                background var(--transition-base),
                box-shadow var(--transition-base);
}
.settings-form .setting-item input[type="text"]::placeholder,
.settings-form .setting-item input[type="number"]::placeholder {
    color: rgba(255, 255, 255, 0.35);
}
.settings-form .setting-item input[type="text"]:hover,
.settings-form .setting-item input[type="number"]:hover {
    border-color: rgba(91, 155, 255, 0.45);
}
.settings-form .setting-item input[type="text"]:focus,
.settings-form .setting-item input[type="number"]:focus,
.settings-form .setting-item input[type="text"]:focus-visible,
.settings-form .setting-item input[type="number"]:focus-visible {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
/* Hide the spinner on number inputs in the settings form — the value
   range is wide and the up/down arrows clutter the dark surface. */
.settings-form .setting-item input[type="number"] {
    -moz-appearance: textfield;
}
.settings-form .setting-item input[type="number"]::-webkit-outer-spin-button,
.settings-form .setting-item input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.settings-help-text {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted, #a8a8c8);
}

/* Forces the plate hint onto its own line under the inputs/toggle row.
   .set-row is now flex-wrap: wrap, so flex-basis: 100% pushes us below
   the main row instead of competing with it for horizontal space. */
.plate-hint {
    flex: 1 0 100%;
    margin: 2px 0 0;
    padding: 4px 0 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
    font-size: 0.72rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.55);
    /* Don't let a long stack push the row width — single-line ellipsis. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.plate-hint-label i {
    margin-right: 4px;
    opacity: 0.7;
}
.plate-hint em {
    font-style: normal;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}
/* On phones, shorten the leading label to a dumbbell icon + breakdown so
   "Plates per side:" doesn't eat half the row. The .plate-hint-label-text
   span carries the words; we hide that on small screens and the icon
   alone communicates intent. */
.plate-hint-label-text { display: inline; }
@media (max-width: 600px) {
    .plate-hint-label-text { display: none; }
    .plate-hint { font-size: 0.78rem; }
}

/* ------------------------------------------------------------------
   Supersets — Program edit link button + workout-view group card.
   ------------------------------------------------------------------ */

/* Row-level link/unlink button in the program-edit modal. Sits in the
   same trailing actions cluster as the delete (×) button. */
.pex-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.btn-icon-link {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.btn-icon-link:hover,
.btn-icon-link:focus-visible {
    background: rgba(91, 155, 255, 0.18);
    border-color: rgba(91, 155, 255, 0.45);
    color: #fff;
}
.btn-icon-link.is-on {
    background: rgba(91, 155, 255, 0.28);
    border-color: rgba(91, 155, 255, 0.7);
    color: #fff;
}

/* Visual cohesion for adjacent rows in the same superset: collapse the
   bottom border of the row above and the top border of the row below
   so they read as one unit, plus a subtle accent stripe. */
.program-exercise-row.is-grouped {
    border-color: rgba(91, 155, 255, 0.45);
    background: rgba(91, 155, 255, 0.05);
}
.program-exercise-row.is-linked-above {
    border-top-color: transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}
.program-exercise-row.is-linked-below {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
}
.pex-superset-tag {
    position: absolute;
    top: -8px;
    left: 12px;
    padding: 1px 7px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0;
}
.program-exercise-row { position: relative; }

/* Workout-view group card — wraps consecutive .exercise-entry blocks
   that share a groupId. The wrapper provides the outer purple frame +
   header; the inner exercise-entries keep their own dashed/solid look
   but lose their outer margin so they sit flush. */
.superset-block {
    position: relative;
    margin: 1rem 0;
    padding: 8px;
    background: rgba(91, 155, 255, 0.05);
    border: 1px solid rgba(91, 155, 255, 0.4);
    border-radius: var(--radius-md);
}
.superset-block-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin: -16px 0 8px;
    background: var(--bg-card);
    border: 1px solid rgba(91, 155, 255, 0.55);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-primary);
    text-transform: uppercase;
}
.superset-block .exercise-entry {
    margin: 0 0 8px;
}
.superset-block .exercise-entry:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Insights view — volume bars + 12-month heatmap.
   ------------------------------------------------------------------ */
.insights-empty-line {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.insights-volume-grid {
    display: grid;
    gap: 8px;
}
.insights-bar-row {
    display: grid;
    grid-template-columns: 100px 1fr 90px;
    align-items: center;
    gap: 10px;
}
.insights-bar-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.insights-bar-track {
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
}
.insights-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, rgba(91, 155, 255, 0.85), rgba(91, 155, 255, 0.85));
    border-radius: 999px;
    transition: width 200ms ease;
}
.insights-bar-value {
    text-align: right;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
    .insights-bar-row {
        grid-template-columns: 80px 1fr 80px;
        gap: 8px;
    }
    .insights-bar-value { font-size: 0.72rem; }
}

/* Heatmap: month labels above, week-column grid below. Each week is a
   stack of 7 day cells; the grid is one column per week. */
.insights-heatmap {
    overflow-x: auto;
    padding: 4px 2px 6px;
}
.hm-month-row {
    display: grid;
    column-gap: 2px;
    margin-bottom: 4px;
    height: 14px;
    position: relative;
}
.hm-month-label {
    grid-row: 1;
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.hm-grid {
    display: grid;
    column-gap: 2px;
}
.hm-week {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    row-gap: 2px;
}
.hm-cell {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.04);
    transition: filter 120ms ease;
}
.hm-cell:hover { filter: brightness(1.3); }
.hm-cell-out { visibility: hidden; }
.hm-cell-l1 { background: rgba(91, 155, 255, 0.25); }
.hm-cell-l2 { background: rgba(91, 155, 255, 0.5); }
.hm-cell-l3 { background: rgba(91, 155, 255, 0.75); }
.hm-cell-l4 { background: rgba(91, 155, 255, 0.95); }

.hm-legend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.hm-legend .hm-cell {
    width: 12px;
    height: 12px;
    aspect-ratio: auto;
}
.hm-legend-label { margin: 0 4px; }

.section-caption {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* ------------------------------------------------------------------
   Measurements — trends grid (tiles + sparklines), history rows.
   ------------------------------------------------------------------ */
.measurements-trends-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.measurement-tile {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    color: var(--text-primary);
    display: grid;
    gap: 4px;
}
.measurement-tile-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}
.measurement-tile-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.measurement-tile-value small {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 2px;
}
.measurement-tile-delta {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.measurement-tile-delta.is-up   { color: #4ade80; }
.measurement-tile-delta.is-down { color: #fb7185; }
.measurement-tile-delta span    { color: var(--text-muted); margin-left: 2px; }
.measurement-spark {
    margin-top: 6px;
    width: 100%;
    height: 32px;
    color: var(--accent-primary);
    opacity: 0.85;
}

.measurements-history {
    display: grid;
    gap: 10px;
}
.measurement-row {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.measurement-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.measurement-row-header h3 {
    margin: 0;
    font-size: 1rem;
}
.measurement-row-actions {
    display: inline-flex;
    gap: 4px;
}
.measurement-row-actions .btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.measurement-row-actions .btn-icon:hover {
    background: rgba(91, 155, 255, 0.18);
    border-color: rgba(91, 155, 255, 0.45);
    color: #fff;
}
.measurement-row-actions .btn-icon-danger:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fff;
}
.measurement-row-stats {
    margin-top: 8px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.measurement-row-stats .m-stat b {
    color: var(--text-muted);
    font-weight: 600;
}
.measurement-row-notes {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

/* The .form-row-2 grid utility stacks two form-groups in two columns
   on wide viewports, falling back to one column on phones. */
.form-row.form-row-2 {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
    .form-row.form-row-2 {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------------------------------------
   Rest mode toggle (program modal)
   ------------------------------------------------------------------ */

.rest-mode-group {
    margin-bottom: 0.75rem;
}

.rest-mode-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.rest-mode-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.rest-mode-label i {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.rest-mode-uniform-section {
    margin-top: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rest-mode-uniform-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
}

.rest-mode-uniform-input {
    width: 100%;
    max-width: 140px;
    padding: 0.4rem 0.6rem;
    background: var(--bg-input, var(--bg-elevated));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.rest-mode-uniform-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(91, 155, 255, 0.25);
}

.form-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

/* ------------------------------------------------------------------
   Per-set rep rows in the program builder
   ------------------------------------------------------------------ */

/* The sets-block replaces the old Sets + Reps steppers. */
.pex-sets-block {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.pex-sets-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Reuse the existing .pex-stepper-label for the "Sets / Reps" heading.
   Reduced emphasis: smaller, lighter, Title Case. */
.pex-sets-header .pex-stepper-label {
    font-size: 0.76rem;
    letter-spacing: 0;
    font-weight: 600;
    text-transform: none;
    color: var(--text-secondary);
}

/* Add set: a quiet neutral chip that reads as part of the sets block.
   Clearly clickable (filled elevated surface) without a blue border. */
.pex-add-set-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    background: var(--bg-elevated) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm);
    color: var(--text-secondary) !important;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    white-space: nowrap;
}

.pex-add-set-btn i { color: inherit !important; }

.pex-add-set-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    outline: none;
}

.pex-add-set-btn:focus-visible {
    color: var(--text-primary) !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.4) !important;
}

.pex-set-rows {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.pex-set-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.pex-set-label {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    min-width: 3.2rem;
}

.pex-set-reps {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
}

.pex-reps-input {
    width: 3.2rem;
    padding: 0.25rem 0.3rem;
    background: var(--bg-input, var(--bg-elevated));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    -moz-appearance: textfield;
}

.pex-reps-input::-webkit-inner-spin-button,
.pex-reps-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.pex-reps-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(91, 155, 255, 0.22);
}

.pex-reps-sep {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 700;
}

.pex-reps-sep-hidden,
.pex-reps-max-hidden {
    display: none;
}

/* Single/Range selector: a quiet neutral segmented-style toggle, not a
   bordered blue button. Borderless quiet fill at rest; subtle elevated fill
   when on. */
.pex-range-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 64px;
    height: 32px;
    padding: 0 0.55rem;
    background: var(--bg-elevated) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm);
    color: var(--text-secondary) !important;
    cursor: pointer;
    font-size: 0.7rem;
    transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}

.pex-range-toggle:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.pex-range-toggle:focus-visible {
    color: var(--text-primary) !important;
    border-color: transparent !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.4) !important;
}

.pex-range-toggle:hover:active {
    background: var(--bg-hover) !important;
}

.pex-range-toggle.is-on {
    background: var(--bg-hover) !important;
    border-color: transparent !important;
    color: var(--text-primary) !important;
}

.pex-range-toggle.is-on:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.pex-range-toggle-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    color: inherit;
}

/* Per-exercise hint below the sets/reps header */
.pex-range-hint {
    margin: 0.15rem 0 0.35rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* At mobile widths refresh.css forces width:32px on .pex-range-toggle which
   would clip the text label — override to auto-width with a sensible minimum. */
@media (max-width: 640px) {
    body.gym-tracker .pex-range-toggle {
        width: auto;
        min-width: 58px;
        height: 32px;
        padding: 0 0.4rem;
    }
}

.pex-set-remove {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-disabled);
    cursor: pointer;
    font-size: 0.72rem;
    transition: color 100ms ease, background 100ms ease;
}

.pex-set-remove:hover:not(:disabled) {
    color: var(--accent-error);
    background: var(--bg-elevated);
    outline: none;
}

.pex-set-remove:focus-visible:not(:disabled) {
    color: var(--accent-error);
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.4);
}

.pex-set-remove:disabled {
    opacity: 0.25;
    cursor: default;
}

/* When rest stepper is absent (uniform mode), sets-block spans full width. */
.pex-targets:not(:has(.pex-stepper)) .pex-sets-block {
    grid-column: 1 / -1;
}

/* ---- Finish Workout Modal — premium redesign ---- */

.finish-workout-modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    /* Clip the hero gradient horizontally to the rounded corners, but let the
       body scroll vertically when it exceeds the modal height. Without this the
       heart-rate / calories / notes / Save controls were unreachable on short
       screens (overflow: hidden clipped them). max-height pins the bound. */
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 90vh;
}

/* Hero banner: workout name + live duration. Calmer: single subtle azure
   tint, consistent padding with the body, one bottom border (no glow). */
.finish-modal-hero {
    background: rgba(91, 155, 255, 0.08);
    border-bottom: 1px solid var(--border-color);
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.finish-modal-hero-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.finish-modal-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.finish-modal-duration-hero {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--accent-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Small neutral close button matching .gt-iconbtn (decision #8 modal system). */
.finish-modal-close,
.feel-intro-modal-content .modal-close {
    flex-shrink: 0;
    margin-top: 0;
    width: 26px;
    height: 26px;
    font-size: 1.02rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--bg-elevated) !important;
    color: var(--text-muted) !important;
}
.finish-modal-close:hover,
.feel-intro-modal-content .modal-close:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

/* Summary stat grid */
/* Item R2-8: inline "log a set first" message inside the finish modal. */
.finish-inline-message {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--spacing-md);
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-md);
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1.4;
}
.finish-inline-message i {
    color: #f59e0b;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.workout-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

/* When PRs stat is visible the grid expands to 4 columns */
.workout-summary:has(#summary-prs-stat:not([hidden])) {
    grid-template-columns: repeat(4, 1fr);
}

.summary-stat {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

.summary-stat-icon {
    font-size: 1rem;
    color: var(--accent-primary);
    line-height: 1;
    margin-bottom: 0.1rem;
}

.summary-stat .value {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.summary-stat .label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

/* PR stat card gets a gold accent */
.summary-stat--pr {
    border-color: rgba(255, 165, 0, 0.4);
    background: rgba(255, 165, 0, 0.07);
}

.summary-stat--pr .summary-stat-icon {
    color: var(--accent-warning);
}

.summary-stat--pr .value {
    color: var(--accent-warning);
}

/* Post-workout metrics section */
.post-workout-metrics-section {
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-lg);
    margin-top: 0;
}

.post-workout-metrics-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--spacing-md);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.post-workout-metrics-header i {
    color: var(--accent-primary);
    font-size: 0.9rem;
}

.post-workout-optional {
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--text-disabled);
    text-transform: lowercase;
    letter-spacing: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.1em 0.6em;
}

/* Input with inline unit label */
.input-with-unit {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-unit input {
    width: 100%;
    padding: 0.7rem 3.2rem 0.7rem 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color var(--transition-base), background var(--transition-base),
                box-shadow var(--transition-base);
    outline: none;
}

.input-with-unit input:focus {
    border-color: var(--accent-primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.18);
}

.input-with-unit input::placeholder {
    color: var(--text-disabled);
}

.input-unit {
    position: absolute;
    right: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    pointer-events: none;
    white-space: nowrap;
}

/* Override form-group defaults inside the finish modal metrics so the
   input-with-unit wrapper handles the styling instead. */
#finish-workout-modal .post-workout-metrics-section .form-group input[type="number"],
#finish-workout-modal .post-workout-metrics-section .form-group textarea {
    padding: 0.7rem 3.2rem 0.7rem 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base), background var(--transition-base),
                box-shadow var(--transition-base);
}

#finish-workout-modal .post-workout-metrics-section .form-group input:focus,
#finish-workout-modal .post-workout-metrics-section .form-group textarea:focus {
    border-color: var(--accent-primary);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.18);
    outline: none;
}

#finish-workout-modal .post-workout-metrics-section .form-group textarea {
    padding: 0.7rem 0.85rem;
    resize: none;
}

/* Action row */
/* #7 Complete / Cancel — calm green primary + tight neutral secondary that
   read as one action group (decision #2). No heavy glow, standard height. */
.finish-workout-actions {
    /* Complete Workout on top (primary focus); Cancel as a plain centered
       text link directly below it, tight gap. */
    display: flex;
    flex-direction: column-reverse;
    gap: 0.3rem;
    align-items: center;
    margin-top: var(--spacing-lg);
}

.finish-workout-submit,
.finish-workout-submit:hover,
.finish-workout-submit:focus-visible {
    width: 100%;
    background: var(--accent-success) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-lg);
    color: #07140d !important;
    font-weight: 700;
    letter-spacing: 0.01em;
    min-height: 48px;
    font-size: 1rem;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}
.finish-workout-submit i { color: inherit !important; }
.finish-workout-submit:hover { filter: brightness(1.06); }
.finish-workout-submit:focus-visible {
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.45) !important;
}

/* Cancel: a plain centered text button (no pill, no border/fill), muted. */
.finish-workout-cancel,
.finish-workout-cancel:hover,
.finish-workout-cancel:focus-visible {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 0;
    padding: 0.5rem 1rem;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: var(--radius-sm);
    color: var(--text-muted) !important;
    font-weight: 500;
    text-align: center;
}
.finish-workout-cancel:hover {
    color: var(--text-secondary) !important;
}

@media (max-width: 480px) {
    .workout-summary {
        grid-template-columns: repeat(3, 1fr);
    }

    .summary-stat .value {
        font-size: 1rem;
    }

    .finish-modal-duration-hero {
        font-size: 1.6rem;
    }

    .finish-modal-title {
        font-size: 1rem;
    }
}

/* ---- Program selection: last-done info ---- */

.program-last-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 0.45rem 0.7rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.program-last-done i {
    color: var(--accent-primary);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.program-last-done--never {
    color: var(--text-disabled);
    border-style: dashed;
}

.program-last-done--never i {
    color: var(--text-disabled);
}

.psc-relative {
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.psc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.2rem;
    width: 100%;
}

.psc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.15em 0.55em;
    font-variant-numeric: tabular-nums;
}

.psc-chip i {
    color: var(--accent-primary);
    font-size: 0.65rem;
}

/* ── Pagination controls ──────────────────────────────────────────── */
.pagination-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0 var(--spacing-sm);
    grid-column: 1 / -1; /* span full width inside any grid container */
}

.pagination-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    min-width: 90px;
    text-align: center;
    white-space: nowrap;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 72px;
    justify-content: center;
}

.pagination-btn:disabled,
.pagination-btn[aria-disabled="true"] {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}


/* On mobile the back-to-top arrow tucks LOW, hugging just above the fixed
   bottom-nav band, in ONE fixed position for every view and every state. It
   reads like the desktop corner button, but referenced to the nav top instead
   of the screen bottom. The arrow no longer lifts when the between-exercise
   rest bar appears: the rest bar is narrowed on mobile (see .rest-timer-bar
   override) to leave a right-corner pocket, so the two sit side by side, both
   low, rather than stacked.

   The tuck offset above --bottom-nav-height is chosen so the arrow's 44px
   circle clears the nav's top edge by a real ~16-20px gap at 390x844 (the nav
   renders ~2px taller than the 64px variable, so the gap runs slightly tight
   of the nominal value). The arrow's `bottom` is intentionally NOT pinned
   !important sitewide, so this gym-scoped override wins; other apps/pages are
   untouched. Desktop (no bottom-nav) keeps the sitewide corner position. */
@media (max-width: 767px) {
    body.gym-tracker .back-to-top {
        bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px) + 1.25rem);
    }
}

/* ============================================================
   Wave 2 additions (Items 3, 4, 5, 7, 8, 9)
   New interactive elements pin their own hover/focus colors so the
   sitewide button:hover red can't bleed in.
   ============================================================ */

/* Item 3: Edit-program header button — purple/secondary accent. */
.workout-header .btn-icon-edit-program {
    background: rgba(91, 155, 255, 0.10) !important;
    border-color: rgba(91, 155, 255, 0.30) !important;
    color: #8b85ff !important;
}
.workout-header .btn-icon-edit-program:hover,
.workout-header .btn-icon-edit-program:focus-visible {
    background: rgba(91, 155, 255, 0.20) !important;
    border-color: rgba(91, 155, 255, 0.55) !important;
    color: #a39dff !important;
}

/* Item 8: per-session unit toggle (kg | lbs) in the workout header. */
.workout-unit-toggle {
    display: inline-flex;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-elevated);
    height: 44px;
}
.workout-unit-btn {
    appearance: none;
    border: 0;
    background: transparent;
    /* Pinned !important: <button> hit by main.css `button{color:#555!important}`. */
    color: var(--text-secondary) !important;
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0 0.7rem;
    min-width: 40px;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base);
}
.workout-unit-btn + .workout-unit-btn {
    border-left: 1px solid var(--border-color);
}
.workout-unit-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary) !important;
}
.workout-unit-btn.is-active,
.workout-unit-btn.is-active:hover {
    background: #2563eb;
    color: #ffffff !important;
}
.workout-unit-btn.is-active:hover {
    background: #1d4ed8;
}
.workout-unit-btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(91, 155, 255, 0.55);
}

/* Item 4: Return-to-workout button in the program editor footer. */
.btn.btn-return-workout,
.btn.btn-return-workout:hover,
.btn.btn-return-workout:focus-visible {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border: 1px solid transparent;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.3);
}
.btn.btn-return-workout:hover,
.btn.btn-return-workout:focus-visible {
    filter: brightness(1.07);
    box-shadow: 0 5px 14px rgba(34, 197, 94, 0.45);
}

/* Item 5: Leave-workout modal primary action. */
.btn.btn-leave-workout {
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: #f0b429 !important;
}
.btn.btn-leave-workout:hover,
.btn.btn-leave-workout:focus-visible {
    background: rgba(251, 191, 36, 0.24);
    border-color: rgba(251, 191, 36, 0.7);
    color: #fbbf24 !important;
}

/* Item R3-4: the chosen-feel toggle icon on the exercise header. Colors are
   pinned with !important to defeat the sitewide main.css `button` color/hover
   rules. Tapping cycles good -> bad -> none. */
.feel-toggle {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0;
    font-size: 0.95em;
    vertical-align: middle;
    line-height: 1;
    box-shadow: none !important;
    transition: color var(--transition-base), transform var(--transition-base);
}
/* Pin on BOTH the button and its <i>: main.css `button { color:#555 !important }`
   does not reach the <i> directly, but raising specificity on the icon keeps
   the green reliable regardless of inheritance order. */
.feel-toggle-good,
.feel-toggle-good i { color: #22c55e !important; }
.feel-toggle-good:hover,
.feel-toggle-good:focus-visible,
.feel-toggle-good:hover i,
.feel-toggle-good:focus-visible i { color: #16a34a !important; }
.feel-toggle-good:hover,
.feel-toggle-good:focus-visible { transform: scale(1.1); }
.feel-toggle:focus-visible { outline: none; }

/* Item 7: last-feel icon next to the exercise name. */
.feel-history {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    font-size: 0.9em;
    vertical-align: middle;
}
/* !important + the <i> target so the sitewide main.css `h3 { color:#555 }`
   inheritance (the history icon lives inside the exercise-header <h3>) cannot
   wash the smiley back to gray. Good stays green. */
.feel-history-good,
.feel-history-good i { color: #22c55e !important; }

/* Item R3-4: the feel picker modal. The intro copy + the single "Felt good"
   icon button (the only choice) + "Not yet". */
/* #8 Feel modal: shorter, consistent padding, calm rewarding green primary
   + neutral secondary as one action group. One accent, no stacked glow. */
.feel-modal-header {
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: none;
}
.feel-modal-header h2 {
    font-size: 1.15rem;
}
.feel-modal-body {
    /* Roomier: clear top gap below the header, generous side padding, and a
       comfortable bottom so the actions are not cramped. */
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
}
.feel-intro-lead {
    margin: 0 0 var(--spacing-lg);
    color: var(--text-secondary);
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.5;
}
.feel-modal-actions {
    display: flex;
    align-items: stretch;
    gap: var(--spacing-md);
}
/* "Felt good" — primary. Calm green: solid-tinted, content-hugging row, one
   border (no glow). Pinned !important to defeat sitewide button color/hover. */
.feel-modal-btn {
    appearance: none;
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.35rem;
    min-height: 46px;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    cursor: pointer;
    /* Smaller icon so the smiley reads friendly, not heavy. */
    font-size: 1.05rem;
    box-shadow: none !important;
    transition: filter var(--transition-base), box-shadow var(--transition-base);
}
.feel-modal-btn-label {
    font-size: 0.92rem;
    font-weight: 700;
}
.feel-modal-btn-good {
    background: var(--accent-success) !important;
    border-color: transparent;
    color: #0a3a26 !important;
}
/* Premium two-tone smiley: a filled darker-green face with the button's green
   showing through the eyes/smile, so it reads as an intentional crafted mark
   (not a default emoji). Sized slightly larger than the label for presence and
   vertically centered with the text. */
.feel-modal-smiley {
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
    display: block;
}
.feel-modal-btn-good:hover,
.feel-modal-btn-good:focus-visible {
    filter: brightness(1.06);
    color: #0a3a26 !important;
}
.feel-modal-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.45) !important;
}
/* "Not yet" — clear secondary (neutral ghost), matched height + roomy padding. */
.feel-modal-skip-secondary,
.feel-modal-skip-secondary:hover,
.feel-modal-skip-secondary:focus-visible {
    flex: 0 0 auto;
    min-width: 96px;
    min-height: 46px;
    padding: 0.6rem 1.35rem;
    color: var(--text-secondary) !important;
    border-radius: var(--radius-lg);
}

/* Item 9: weekday chips in the program editor. */
.program-schedule-days {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.35rem;
}
.schedule-day-chip {
    appearance: none;
    /* Every day is an identical cell: equal width (flex share) + fixed height,
       border-box so the 1px border never shifts size. Selection changes ONLY
       background/border/text color, never the box dimensions. */
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    background: var(--bg-elevated);
    /* Pin colour !important across states: these chips are <button>s, so the
       sitewide main.css `button{color:#555!important}` / `:hover{#ce1b28}` trap
       would otherwise dim them to a disabled-looking gray. */
    color: var(--text-primary) !important;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base),
                color var(--transition-base);
}
.schedule-day-chip:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    color: var(--text-primary) !important;
}
.schedule-day-chip.is-on,
.schedule-day-chip.is-on:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff !important;
}
.schedule-day-chip.is-on:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
.schedule-day-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.35);
}
.program-schedule-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
}

/* Item 9: calendar schedule marker (distinct from the workout dot/PR star).
   Positioned bottom-left to avoid overlapping the day number (top-right),
   PR star (top-left) and workout dot (bottom-center). */
.calendar-day-schedule {
    position: absolute;
    bottom: 0.3rem;
    left: 0.35rem;
    font-size: 0.55rem;
    color: #8b85ff;
    opacity: 0.85;
    pointer-events: none;
}
.calendar-day.selected .calendar-day-schedule,
.calendar-day.today .calendar-day-schedule {
    color: #b9b4ff;
}
.calendar-scheduled-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.5rem 0;
}
.calendar-scheduled-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.4rem 0.55rem;
    border: 1px dashed rgba(91, 155, 255, 0.4);
    border-radius: var(--radius-md);
    background: rgba(91, 155, 255, 0.07);
}
.calendar-scheduled-item i { color: #8b85ff; }
.legend-schedule-cue { color: #8b85ff; }

/* ============================================================
   Round 2 Wave B additions
   ============================================================ */

/* Item R2-6: week strip on the workout selection screen. */
/* ==========================================================================
   Workout-selection week schedule (mobile-first): a row of compact day pills
   (label + a dot when that day has a workout) and a detail panel below that
   shows the SELECTED day's full workout name(s). The selected day also
   highlights the matching program card(s) further down. Tapping a pill selects
   a day; it does not start a workout.
   ========================================================================== */
.week-strip {
    margin: 0 0 1.25rem;
    padding: 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}
.week-strip-pills {
    display: flex;
    gap: 0.3rem;
}
.week-day-pill {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    min-height: 48px;
    padding: 0.4rem 0.15rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--bg-elevated) !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    font-family: inherit;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.week-day-pill-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.week-day-pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: transparent;
}
/* Empty days stay quiet (no dot); only workout days show the accent dot. */
.week-day-pill.has-workout .week-day-pill-dot { background: var(--accent-primary); }
.week-day-pill:hover {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}
/* Today: subtle accent ring (when not the selected day). */
.week-day-pill.is-today {
    color: var(--text-primary) !important;
    border-color: rgba(91, 155, 255, 0.45);
}
/* Selected day: strong filled state. */
.week-day-pill.is-selected,
.week-day-pill.is-selected:hover {
    background: var(--accent-primary) !important;
    color: #0a1020 !important;
    border-color: transparent;
}
.week-day-pill.is-selected .week-day-pill-dot,
.week-day-pill.is-selected.has-workout .week-day-pill-dot { background: #0a1020; }
.week-day-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.45) !important;
}

/* Selected-day detail: full workout name(s) with room to breathe. */
.week-strip-detail { margin-top: 0.75rem; }
.week-detail-day {
    margin: 0 0 0.45rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.week-detail-empty { margin: 0; color: var(--text-secondary); font-size: 0.9rem; }
.week-detail-list { display: flex; flex-direction: column; gap: 0.45rem; }
.week-detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.week-detail-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.3;
}
.week-detail-start,
.week-detail-start:hover,
.week-detail-start:focus-visible {
    flex-shrink: 0;
    background: var(--accent-primary) !important;
    color: #0a1020 !important;
    border: none;
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-weight: 700;
    font-size: 0.82rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: none !important;
    cursor: pointer;
}
.week-detail-start:hover { filter: brightness(1.06); }
.week-detail-start:focus-visible { box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.45) !important; }

/* Selected day highlights the matching program card(s) below. */
.program-selection-grid .program-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.program-card--scheduled {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 1px var(--accent-primary);
}
.program-sched-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-primary);
    background: rgba(91, 155, 255, 0.14);
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    white-space: nowrap;
}

/* Item R2-9: unsaved-settings guard modal. Pin button colors so the sitewide
   button:hover red cannot bleed into these controls. */
.unsaved-settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
}
#unsaved-settings-save,
#unsaved-settings-save:hover,
#unsaved-settings-save:focus {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}
#unsaved-settings-save:hover { filter: brightness(1.08); }
#unsaved-settings-discard:hover,
#unsaved-settings-discard:focus {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

/* Item R2-9: settings save control in a sticky header bar, always visible
   while the settings form scrolls under it. Mirrors the workout header's
   offset so it sits fully below the fixed site header. */
.settings-view-header {
    position: sticky;
    top: 3.25rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin-bottom: var(--spacing-lg);
    padding: 0.7rem 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}
/* Solid bright title inside the card-surfaced sticky header (the sitewide
   gradient-clip h1 has too little contrast on the card background). */
.settings-view-header h1 {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    font-size: 1.5rem !important;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .settings-view-header h1 { font-size: 1.85rem !important; }
}
.settings-view-header .btn-save-settings {
    margin: 0;
    white-space: nowrap;
    width: 100%;
    justify-content: center;
}
/* Desktop: title and Save on one row. */
@media (min-width: 768px) {
    .settings-view-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--spacing-md);
        padding: 0.65rem 0.85rem;
    }
    .settings-view-header .btn-save-settings {
        width: auto;
        flex: 0 0 auto;
    }
}

/* Item R2-7: mid-workout program editor sticky header action bar. */
.program-modal-workout-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.program-modal-workout-actions[hidden] { display: none; }
.program-modal-workout-actions .btn { white-space: nowrap; }

/* In workout mode: pin the header to the top of the scrolling modal content,
   hide the footer save/return cluster and the corner X (the two header actions
   are the only controls). */
#program-modal.program-editor-workout-mode .program-modal-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
}
#program-modal.program-editor-workout-mode .modal-close {
    display: none;
}
#program-modal.program-editor-workout-mode .program-form-actions {
    display: none;
}
/* Pin the header action button colors so the sitewide button red can't bleed. */
#program-modal-save-resume,
#program-modal-save-resume:hover,
#program-modal-save-resume:focus {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}
#program-modal-save-resume:hover {
    filter: brightness(1.08);
}
#program-modal-cancel-workout:hover,
#program-modal-cancel-workout:focus {
    color: var(--text-primary) !important;
    background: var(--bg-hover) !important;
}

/* Feature B: normal create/edit mode also pins Save + Cancel in a sticky
   header at the top of the scrolling modal. Mirrors the R2-7 workout-mode
   layout for normal entry. */
.program-modal-normal-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.program-modal-normal-actions[hidden] { display: none; }
.program-modal-normal-actions .btn { white-space: nowrap; }

/* Pin the header in normal mode too (the R2-7 rule only stickies workout mode).
   Both modes now use the header for actions, so the header is always sticky.
   Reads as a flat navigation bar: title left, actions right, a single bottom
   border (no card elevation / drop shadow). */
#program-modal .program-modal-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem var(--spacing-lg);
}

/* Title is the focal point of the bar: larger + stronger than the generic
   modal-header h2. Stays on one line; actions (Cancel + Save) sit on the right. */
#program-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    white-space: nowrap;
    margin: 0;
    margin-right: auto;
}

/* Cancel: a plain muted text button (no border/fill), pairs with the blue Save. */
#program-modal .program-modal-cancel,
#program-modal .program-modal-cancel:hover,
#program-modal .program-modal-cancel:focus-visible {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
    padding: 0.5rem 0.6rem;
    font-weight: 600;
}
#program-modal .program-modal-cancel:hover { color: var(--text-primary) !important; }

/* The bottom form actions are now redundant in both modes — the header carries
   Save + Cancel. Hide the footer cluster for this modal entirely. */
#program-modal .program-form-actions {
    display: none;
}

/* Pin the header Save button accent color against the sitewide red button bleed
   (mirrors #program-modal-save-resume). .btn-save-program already gets the
   primary gradient, but assert it here in the header context too. */
.program-modal-normal-actions .btn-save-program,
.program-modal-normal-actions .btn-save-program:hover,
.program-modal-normal-actions .btn-save-program:focus {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}

/* Cancel: small, quiet ghost text, not a heavy button. Applies to both the
   normal and workout header action clusters. */
.program-modal-normal-actions .btn-ghost,
.program-modal-workout-actions .btn-ghost {
    padding: 0.5rem 0.65rem !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
}
.program-modal-normal-actions .btn-ghost:hover,
.program-modal-normal-actions .btn-ghost:focus-visible,
.program-modal-workout-actions .btn-ghost:hover,
.program-modal-workout-actions .btn-ghost:focus-visible {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
    border-color: transparent !important;
    outline: none;
}
.program-modal-normal-actions .btn-ghost:focus-visible,
.program-modal-workout-actions .btn-ghost:focus-visible {
    box-shadow: 0 0 0 3px rgba(91, 155, 255, 0.4) !important;
}