/* ==========================================================================
   TYPE ONE — Design System for Bootstrap 5.3
   Load AFTER bootstrap.min.css. Theme via <html data-bs-theme="light|dark">.
   ========================================================================== */

/* ---------- 1. Tokens: brand + scale (theme-independent) ---------- */
:root {
  --fc-font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --fc-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale (rem @ 16px base) */
  --fc-text-xs: .75rem;    /* 12 — meta only, never body */
  --fc-text-sm: .875rem;   /* 14 */
  --fc-text-md: 1rem;      /* 16 — body */
  --fc-text-lg: 1.125rem;  /* 18 */
  --fc-text-xl: 1.25rem;   /* 20 */
  --fc-text-2xl: 1.5rem;   /* 24 */
  --fc-text-3xl: 1.875rem; /* 30 */
  --fc-text-4xl: 2.25rem;  /* 36 */
  --fc-text-5xl: 3rem;     /* 48 — hero numbers */

  /* Spacing (4px base) */
  --fc-space-1: .25rem; --fc-space-2: .5rem; --fc-space-3: .75rem;
  --fc-space-4: 1rem;   --fc-space-5: 1.5rem; --fc-space-6: 2rem;
  --fc-space-7: 3rem;

  /* Radius */
  --fc-radius-sm: 8px;    /* inputs, chips-square, small buttons */
  --fc-radius-md: 12px;   /* cards, buttons */
  --fc-radius-lg: 20px;   /* bottom sheets, modals */
  --fc-radius-pill: 999px;

  /* Touch */
  --fc-touch: 48px;       /* min target; 44px absolute floor */
  --fc-bottom-nav-h: 64px;

  /* Motion */
  --fc-ease: cubic-bezier(.2, .8, .2, 1);
  --fc-dur-fast: 120ms;
  --fc-dur: 200ms;
  --fc-dur-slow: 300ms;

  /* Brand palette (TYPE ONE) */
  --fc-red: #C41E3A;     --fc-red-light: #E85A6B;   --fc-red-dark: #9B1B2E;   --fc-red-50: #F8D7DA;
  --fc-mauve: #7B4B8A;   --fc-mauve-light: #A67BAF; --fc-mauve-dark: #5C3666; --fc-mauve-50: #EDE4F0;
  --fc-tan: #D2B48C;     --fc-tan-light: #E8D5B5;   --fc-tan-dark: #B8956A;   --fc-tan-50: #F5EDE0;
  --fc-kaki: #8B8B5A;    --fc-kaki-light: #A8A87A;  --fc-kaki-dark: #6B6B40;  --fc-kaki-50: #E8E8D5;
  --fc-ink: #2C2C2C;
}

/* ---------- 2. Light theme ---------- */
/* Contrast checked (WCAG 2.2): text 4.5:1+, field borders and focus 3:1+. */
:root,
[data-bs-theme="light"] {
  --fc-bg: #F9F6F0;               /* off-white beige */
  --fc-surface: #FFFFFF;
  --fc-surface-2: #F0EBE3;        /* tan very light */
  --fc-border: #E8D5B5;           /* decorative: cards, separators */
  --fc-field-border: #8B8B5A;     /* form fields need 3:1 → kaki (3.5:1) */
  --fc-text: #2C2C2C;             /* 13:1 */
  --fc-text-muted: #6B6B40;       /* kaki dark, 5.1:1 (kaki #8B8B5A is too light for text) */

  --fc-primary: #C41E3A;          /* red: main buttons, active nav, hero, workouts */
  --fc-on-primary: #FFFFFF;       /* 5.8:1 */
  --fc-primary-hover: #9B1B2E;
  --fc-primary-text: #C41E3A;     /* red text on light: 5.4:1 */
  --fc-primary-strong: #9B1B2E;   /* red text on red-50 (badges): 6.1:1 */
  --fc-primary-soft: #F8D7DA;

  --fc-secondary: #7B4B8A;        /* mauve: secondary buttons, links */
  --fc-on-secondary: #FFFFFF;     /* 6.5:1 */
  --fc-secondary-hover: #5C3666;
  --fc-link: #7B4B8A;             /* 6.1:1 */

  --fc-nutrition: #7B4B8A;        /* nutrition domain = mauve */
  --fc-nutrition-strong: #5C3666;
  --fc-nutrition-soft: #EDE4F0;

  --fc-success: #2E7D4F;  --fc-success-strong: #23603C;  --fc-success-soft: #E3F1E8;
  --fc-warning: #96560C;  --fc-warning-strong: #7A4609;  --fc-warning-soft: #F7E9D2;
  --fc-danger:  #9B1B2E;  --fc-danger-soft:  #F8D7DA;
  --fc-info:    #7B4B8A;  --fc-info-soft:    #EDE4F0;
  --fc-neutral-strong: #57572F;   --fc-neutral-soft: #E8E8D5;

  /* Macros — always paired with a text label */
  --fc-protein: #7B4B8A;
  --fc-carbs:   #9C7A4E;
  --fc-fat:     #6B6B40;

  --fc-shadow-sm: 0 1px 2px rgba(44,44,44,.06);
  --fc-shadow-md: 0 4px 12px rgba(44,44,44,.08);
  --fc-shadow-lg: 0 12px 32px rgba(44,44,44,.16);
  --fc-focus: 0 0 0 2px #F9F6F0, 0 0 0 4px #7B4B8A;
}

/* ---------- 3. Dark theme (default for client gym-floor use) ---------- */
[data-bs-theme="dark"] {
  --fc-bg: #1C1917;               /* warm near-black */
  --fc-surface: #26211E;
  --fc-surface-2: #312B27;
  --fc-border: #443B35;
  --fc-field-border: #7A7062;     /* 3.3:1 on surface */
  --fc-text: #F3EEE6;             /* 15:1 */
  --fc-text-muted: #A8A87A;       /* kaki light, 7.1:1 */

  --fc-primary: #C41E3A;
  --fc-on-primary: #FFFFFF;
  --fc-primary-hover: #D9304D;
  --fc-primary-text: #E85A6B;     /* red light, 5.1:1 */
  --fc-primary-strong: #F08A97;
  --fc-primary-soft: rgba(196,30,58,.22);

  --fc-secondary: #7B4B8A;
  --fc-on-secondary: #FFFFFF;
  --fc-secondary-hover: #8E5C9E;
  --fc-link: #C3A2CB;             /* 7.8:1 */

  --fc-nutrition: #C3A2CB;
  --fc-nutrition-strong: #C3A2CB;
  --fc-nutrition-soft: rgba(123,75,138,.28);

  --fc-success: #6CC58F;  --fc-success-strong: #6CC58F;  --fc-success-soft: rgba(108,197,143,.14);
  --fc-warning: #E0A458;  --fc-warning-strong: #E0A458;  --fc-warning-soft: rgba(224,164,88,.14);
  --fc-danger:  #F08A97;  --fc-danger-soft:  rgba(240,138,151,.14);
  --fc-info:    #C3A2CB;  --fc-info-soft:    rgba(123,75,138,.22);
  --fc-neutral-strong: #C9C9A3;   --fc-neutral-soft: #312B27;

  --fc-protein: #C3A2CB;
  --fc-carbs:   #D2B48C;
  --fc-fat:     #A8A87A;

  /* Elevation in dark = lighter surface, not shadow */
  --fc-shadow-sm: none;
  --fc-shadow-md: 0 0 0 1px var(--fc-border);
  --fc-shadow-lg: 0 16px 40px rgba(0,0,0,.5);
  --fc-focus: 0 0 0 2px #1C1917, 0 0 0 4px #C3A2CB;
}

/* ---------- 4. Map tokens onto Bootstrap ---------- */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-body-font-family: var(--fc-font-body);
  --bs-body-font-size: var(--fc-text-md);
  --bs-body-line-height: 1.5;
  --bs-body-bg: var(--fc-bg);
  --bs-body-color: var(--fc-text);
  --bs-secondary-color: var(--fc-text-muted);
  --bs-tertiary-bg: var(--fc-surface-2);
  --bs-border-color: var(--fc-border);
  --bs-border-radius: var(--fc-radius-sm);
  --bs-border-radius-lg: var(--fc-radius-md);
  --bs-border-radius-xl: var(--fc-radius-lg);
  --bs-link-color: var(--fc-link);
  --bs-link-hover-color: var(--fc-link);
  --bs-link-color-rgb: 123,75,138;
  --bs-primary: var(--fc-primary);
  --bs-primary-rgb: 196,30,58;
  --bs-success: var(--fc-success);
  --bs-danger: var(--fc-danger);
  --bs-warning: var(--fc-warning);
  --bs-focus-ring-color: rgba(123,75,138,.5);
}
[data-bs-theme="dark"] { --bs-link-color-rgb: 195,162,203; }

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--fc-bg);
  color: var(--fc-text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 5. Typography ---------- */
h1, h2, h3, h4, .fc-display {
  font-family: var(--fc-font-display);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.1;
  color: var(--fc-text);
}
h1 { font-size: var(--fc-text-4xl); }
h2 { font-size: var(--fc-text-3xl); }
h3 { font-size: var(--fc-text-2xl); font-weight: 600; }
h4 { font-size: var(--fc-text-xl); font-weight: 600; }
.fc-eyebrow {
  font-family: var(--fc-font-display);
  font-size: var(--fc-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fc-text-muted);
}
.fc-num {               /* stats, sets, reps, macros */
  font-family: var(--fc-font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.text-muted, .fc-muted { color: var(--fc-text-muted) !important; }
.min-w-0 { min-width: 0; } /* lets flex/grid children shrink so text-truncate works */
.fc-text-primary { color: var(--fc-primary-text) !important; }

/* ---------- 6. Focus (never remove) ---------- */
:focus-visible { outline: none; box-shadow: var(--fc-focus) !important; border-radius: var(--fc-radius-sm); }

/* ---------- 7. Buttons ---------- */
.btn {
  --bs-btn-font-family: var(--fc-font-body);
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: .75rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-border-radius: var(--fc-radius-md);
  min-height: var(--fc-touch);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: background-color var(--fc-dur) var(--fc-ease), transform var(--fc-dur-fast) var(--fc-ease);
}
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 40px; --bs-btn-padding-y: .5rem; --bs-btn-padding-x: .875rem; }
.btn-lg { min-height: 56px; --bs-btn-font-size: var(--fc-text-lg); }

.btn-primary {
  --bs-btn-bg: var(--fc-primary);
  --bs-btn-border-color: var(--fc-primary);
  --bs-btn-color: var(--fc-on-primary);
  --bs-btn-hover-bg: var(--fc-primary-hover);
  --bs-btn-hover-border-color: var(--fc-primary-hover);
  --bs-btn-hover-color: var(--fc-on-primary);
  --bs-btn-active-bg: var(--fc-primary-hover);
  --bs-btn-active-border-color: var(--fc-primary-hover);
  --bs-btn-active-color: var(--fc-on-primary);
  --bs-btn-disabled-bg: var(--fc-surface-2);
  --bs-btn-disabled-border-color: var(--fc-surface-2);
  --bs-btn-disabled-color: var(--fc-text-muted);
}
.btn-secondary {
  --bs-btn-bg: var(--fc-secondary);
  --bs-btn-color: var(--fc-on-secondary);
  --bs-btn-border-color: var(--fc-secondary);
  --bs-btn-hover-bg: var(--fc-secondary-hover);
  --bs-btn-hover-color: var(--fc-on-secondary);
  --bs-btn-hover-border-color: var(--fc-secondary-hover);
  --bs-btn-active-bg: var(--fc-secondary-hover);
  --bs-btn-active-color: var(--fc-on-secondary);
  --bs-btn-active-border-color: var(--fc-secondary-hover);
  --bs-btn-disabled-bg: var(--fc-surface-2);
  --bs-btn-disabled-border-color: var(--fc-surface-2);
  --bs-btn-disabled-color: var(--fc-text-muted);
}
.btn-outline-secondary {
  --bs-btn-bg: var(--fc-surface);
  --bs-btn-color: var(--fc-text);
  --bs-btn-border-color: var(--fc-border);
  --bs-btn-hover-bg: var(--fc-surface-2);
  --bs-btn-hover-color: var(--fc-text);
  --bs-btn-hover-border-color: var(--fc-border);
  --bs-btn-active-bg: var(--fc-surface-2);
  --bs-btn-active-color: var(--fc-text);
  --bs-btn-active-border-color: var(--fc-text-muted);
}
.btn-ghost {
  --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
  --bs-btn-color: var(--fc-text);
  --bs-btn-hover-bg: var(--fc-surface-2); --bs-btn-hover-color: var(--fc-text);
  --bs-btn-active-bg: var(--fc-surface-2); --bs-btn-active-color: var(--fc-text);
}
.btn-danger {
  --bs-btn-bg: var(--fc-danger); --bs-btn-border-color: var(--fc-danger);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}
[data-bs-theme="dark"] .btn-danger { --bs-btn-color: #1C1917; --bs-btn-hover-color: #1C1917; --bs-btn-active-color: #1C1917; }
.btn-icon { width: var(--fc-touch); padding: 0; }

/* ---------- 8. Cards / surfaces ---------- */
.card, .fc-card {
  --bs-card-bg: var(--fc-surface);
  --bs-card-border-color: var(--fc-border);
  --bs-card-border-radius: var(--fc-radius-md);
  --bs-card-spacer-y: 1rem; --bs-card-spacer-x: 1rem;
  background: var(--fc-surface);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius-md);
  box-shadow: var(--fc-shadow-sm);
}
.fc-card { padding: var(--fc-space-4); }
.fc-card-link { display: block; color: inherit; text-decoration: none; transition: border-color var(--fc-dur) var(--fc-ease); }
.fc-card-link:hover { border-color: var(--fc-text-muted); color: inherit; }

/* Hero block: the one loud surface per screen */
.fc-hero {
  background: var(--fc-primary);
  color: var(--fc-on-primary);
  border-radius: var(--fc-radius-lg);
  padding: var(--fc-space-5);
  position: relative; overflow: hidden;
}
.fc-hero::after { /* diagonal stripe — athletic, not glassy */
  content: ""; position: absolute; inset: 0 -20% 0 55%;
  background: repeating-linear-gradient(-60deg, rgba(255,255,255,.07) 0 14px, transparent 14px 28px);
  pointer-events: none;
}
.fc-hero h1, .fc-hero h2, .fc-hero .fc-eyebrow { color: var(--fc-on-primary); }
.fc-hero .btn-dark { --bs-btn-bg: #FFFFFF; --bs-btn-border-color: #FFFFFF; --bs-btn-color: #9B1B2E; --bs-btn-hover-bg: #F9F6F0; --bs-btn-hover-border-color: #F9F6F0; --bs-btn-hover-color: #9B1B2E; --bs-btn-active-bg: #F8D7DA; --bs-btn-active-color: #9B1B2E; }

/* Stat tile */
.fc-stat { padding: var(--fc-space-4); }
.fc-stat .fc-num { font-size: var(--fc-text-4xl); }
.fc-stat-label { font-size: var(--fc-text-sm); color: var(--fc-text-muted); margin-top: .25rem; }
.fc-delta-up { color: var(--fc-success); font-weight: 600; font-size: var(--fc-text-sm); }
.fc-delta-down { color: var(--fc-danger); font-weight: 600; font-size: var(--fc-text-sm); }

/* ---------- 9. Forms ---------- */
.form-label { font-weight: 600; font-size: var(--fc-text-sm); margin-bottom: .375rem; }
.form-control, .form-select {
  min-height: var(--fc-touch);
  font-size: var(--fc-text-md);          /* >=16px prevents iOS zoom */
  background-color: var(--fc-surface);
  border-color: var(--fc-field-border);
  color: var(--fc-text);
  border-radius: var(--fc-radius-sm);
}
.form-control::placeholder { color: var(--fc-text-muted); opacity: .8; }
.form-control:focus, .form-select:focus {
  background-color: var(--fc-surface); color: var(--fc-text);
  border-color: var(--fc-secondary); box-shadow: 0 0 0 3px rgba(123,75,138,.25);
}
.form-text { color: var(--fc-text-muted); }
.invalid-feedback { color: var(--fc-danger); font-weight: 500; }
/* Error under a field that has a button beside it (input-group) */
.input-group:has(.is-invalid) + .invalid-feedback { display: block; }
.form-control.is-invalid { border-color: var(--fc-danger); }
.form-check-input { width: 1.375rem; height: 1.375rem; margin-top: .0625rem; }
.form-check-input:checked { background-color: var(--fc-primary); border-color: var(--fc-primary); }

/* Stepper: − [ 10 ] + for sets / reps / rest / grams */
.fc-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--fc-field-border); border-radius: var(--fc-radius-sm); background: var(--fc-surface); overflow: hidden; }
.fc-stepper button { width: 44px; min-height: 44px; border: 0; background: var(--fc-surface-2); color: var(--fc-text); font-size: 1.25rem; font-weight: 600; }
.fc-stepper button:active { background: var(--fc-border); }
.fc-stepper input { width: 3.5rem; border: 0; text-align: center; background: transparent; color: var(--fc-text); font-family: var(--fc-font-display); font-size: var(--fc-text-xl); font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.fc-stepper input::-webkit-inner-spin-button, .fc-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fc-stepper-label { display: block; font-size: var(--fc-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--fc-text-muted); margin-bottom: .25rem; }

/* ---------- 10. Chips / badges / segmented ---------- */
.fc-chip {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 40px; padding: 0 1rem; border-radius: var(--fc-radius-pill);
  border: 1px solid var(--fc-border); background: var(--fc-surface);
  color: var(--fc-text); font-weight: 600; font-size: var(--fc-text-sm);
  white-space: nowrap; text-decoration: none;
}
.fc-chip[aria-selected="true"], .fc-chip.active { background: var(--fc-text); color: var(--fc-bg); border-color: var(--fc-text); }
.fc-chip-row { display: flex; gap: .5rem; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .25rem; scrollbar-width: none; }
.fc-chip-row::-webkit-scrollbar { display: none; }
.fc-chip-row > * { scroll-snap-align: start; flex: 0 0 auto; }

.fc-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: var(--fc-radius-pill); font-size: var(--fc-text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.fc-badge-success { background: var(--fc-success-soft); color: var(--fc-success-strong); }
.fc-badge-warning { background: var(--fc-warning-soft); color: var(--fc-warning-strong); }
.fc-badge-danger  { background: var(--fc-danger-soft);  color: var(--fc-danger); }
.fc-badge-neutral { background: var(--fc-neutral-soft);  color: var(--fc-neutral-strong); }
.fc-badge-workout { background: var(--fc-primary-soft); color: var(--fc-primary-strong); }
.fc-badge-nutrition { background: var(--fc-nutrition-soft); color: var(--fc-nutrition-strong); }

.fc-segmented { display: flex; padding: 4px; gap: 4px; background: var(--fc-surface-2); border-radius: var(--fc-radius-md); }
.fc-segmented > * { flex: 1; min-height: 40px; border: 0; border-radius: var(--fc-radius-sm); background: transparent; color: var(--fc-text-muted); font-weight: 600; }
.fc-segmented > [aria-selected="true"] { background: var(--fc-surface); color: var(--fc-text); box-shadow: var(--fc-shadow-sm); }
/* Radio-based segmented control: the input is visually hidden, so show focus on its label */
.fc-segmented > label:has(input:focus-visible) { box-shadow: var(--fc-focus); }
.fc-segmented > label:has(input:checked) { background: var(--fc-surface); color: var(--fc-text); }

/* ---------- 11. Lists (client list, exercise list) ---------- */
.fc-list { list-style: none; margin: 0; padding: 0; background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--fc-radius-md); overflow: hidden; }
.fc-list-item { display: flex; align-items: center; gap: .75rem; min-height: 64px; padding: .75rem 1rem; color: inherit; text-decoration: none; }
.fc-list-item + .fc-list-item { border-top: 1px solid var(--fc-border); }
.fc-list > li + li { border-top: 1px solid var(--fc-border); }
/* Expandable list rows (<details>) */
.fc-list summary::-webkit-details-marker { display: none; }
.fc-list summary:hover { background: var(--fc-surface-2); }
.fc-details-chevron { transition: transform var(--fc-dur) var(--fc-ease); }
details[open] > summary .fc-details-chevron { transform: rotate(180deg); }
a.fc-list-item:hover { background: var(--fc-surface-2); color: inherit; }
.fc-list-item .fc-grow { flex: 1; min-width: 0; }
.fc-list-item .fc-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-list-item .fc-sub { font-size: var(--fc-text-sm); color: var(--fc-text-muted); }

.fc-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-family: var(--fc-font-display); font-weight: 700; font-size: 1.125rem; background: var(--fc-surface-2); color: var(--fc-text); object-fit: cover; }

/* ---------- 12. Progress & macros ---------- */
.fc-progress { height: 8px; border-radius: var(--fc-radius-pill); background: var(--fc-surface-2); overflow: hidden; }
.fc-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--fc-primary); transition: width var(--fc-dur-slow) var(--fc-ease); }
.fc-progress.is-over > span { background: var(--fc-warning); }
.fc-macro { display: grid; grid-template-columns: 1fr auto; gap: .25rem .5rem; align-items: baseline; }
.fc-macro .fc-progress { grid-column: 1 / -1; }
.fc-macro-protein .fc-progress > span { background: var(--fc-protein); }
.fc-macro-carbs   .fc-progress > span { background: var(--fc-carbs); }
.fc-macro-fat     .fc-progress > span { background: var(--fc-fat); }
.fc-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ---------- Nutrition editor ---------- */
.fc-num-input { font-family: var(--fc-font-display); font-weight: 700; font-size: var(--fc-text-lg); font-variant-numeric: tabular-nums; }
.fc-food { border-top: 1px solid var(--fc-border); padding: .75rem 0; }
.fc-food-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1fr; gap: .375rem; }
.fc-food-grid .form-control { min-height: 44px; padding: .375rem .5rem; font-size: var(--fc-text-md); }
.fc-food-grid .fc-stepper-label { font-size: 10px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-meal-total { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: var(--fc-text-sm); font-weight: 600; padding-top: .75rem; border-top: 1px solid var(--fc-border); }
.fc-macro-chip { display: inline-flex; align-items: baseline; gap: .25rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-macro-chip.is-over { color: var(--fc-warning); }
@media (min-width: 992px) { .fc-sticky-lg { position: sticky; top: 72px; } }

/* ---------- 13. Workout execution ---------- */
.fc-exercise { padding: var(--fc-space-4); }
.fc-exercise-head { display: flex; gap: .75rem; align-items: flex-start; }
.fc-exercise-index { width: 32px; height: 32px; border-radius: var(--fc-radius-sm); display: grid; place-items: center; background: var(--fc-primary-soft); color: var(--fc-primary-strong); font-family: var(--fc-font-display); font-weight: 700; flex: 0 0 auto; }
.fc-set-row { display: grid; grid-template-columns: 2.5rem 1fr 1fr 56px; gap: .5rem; align-items: center; min-height: 56px; border-top: 1px solid var(--fc-border); }
.fc-set-row .fc-num { font-size: var(--fc-text-xl); }
.fc-set-check { width: 48px; height: 48px; border-radius: var(--fc-radius-md); border: 2px solid var(--fc-field-border); background: var(--fc-surface); color: transparent; display: grid; place-items: center; font-size: 1.375rem; transition: all var(--fc-dur) var(--fc-ease); }
.fc-set-check[aria-pressed="true"] { background: var(--fc-success); border-color: var(--fc-success); color: var(--fc-surface); }
.fc-set-row.is-done .fc-num { color: var(--fc-text-muted); }

/* Rest timer pill (fixed above bottom nav) */
.fc-rest-timer {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--fc-bottom-nav-h) + env(safe-area-inset-bottom) + 12px);
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .5rem .5rem 1.25rem; border-radius: var(--fc-radius-pill);
  background: var(--fc-text); color: var(--fc-bg); box-shadow: var(--fc-shadow-lg); z-index: 1031;
}
.fc-rest-timer .fc-num { font-size: var(--fc-text-2xl); }
.fc-rest-timer .btn { white-space: nowrap; }
/* Lift the timer above an editor/workout action bar when both are on screen */
.fc-action-bar ~ .fc-rest-timer { bottom: calc(var(--fc-bottom-nav-h) + env(safe-area-inset-bottom) + 84px); }

/* ---------- 14. App shell ---------- */
.fc-topbar {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: .5rem;
  min-height: 56px; padding: env(safe-area-inset-top) 1rem 0;
  background: var(--fc-bg); border-bottom: 1px solid transparent;
}
.fc-topbar.is-scrolled { border-bottom-color: var(--fc-border); }
.fc-topbar-title { font-family: var(--fc-font-display); font-weight: 700; font-size: var(--fc-text-xl); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }

.fc-main { padding: 1rem 1rem calc(var(--fc-bottom-nav-h) + env(safe-area-inset-bottom) + 1.5rem); max-width: 1200px; margin: 0 auto; }

.fc-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--fc-bottom-nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--fc-surface); border-top: 1px solid var(--fc-border);
}
.fc-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--fc-text-muted); text-decoration: none;
  font-size: var(--fc-text-xs); font-weight: 600; letter-spacing: .02em;
}
.fc-bottom-nav a i, .fc-bottom-nav a svg { font-size: 1.375rem; width: 24px; height: 24px; }
.fc-bottom-nav a[aria-current="page"] { color: var(--fc-text); }
.fc-bottom-nav a[aria-current="page"] i { color: var(--fc-primary-text); }
.fc-bottom-nav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 32px; height: 3px; border-radius: 0 0 3px 3px; background: var(--fc-primary); }
.fc-bottom-nav a { position: relative; }
.fc-bottom-nav .fc-nav-fab { align-self: center; justify-self: center; width: 52px; height: 52px; border-radius: 16px; background: var(--fc-primary); color: var(--fc-on-primary); }
.fc-bottom-nav .fc-nav-fab i { color: var(--fc-on-primary) !important; font-size: 1.5rem; }

/* Sticky action bar (editors) — sits above bottom nav on mobile */
.fc-action-bar {
  position: sticky; bottom: calc(var(--fc-bottom-nav-h) + env(safe-area-inset-bottom));
  z-index: 1010; display: flex; gap: .5rem; align-items: center;
  padding: .75rem 1rem; margin: 1rem -1rem 0;
  background: var(--fc-bg); border-top: 1px solid var(--fc-border);
}

/* Desktop: sidebar replaces bottom nav */
.fc-sidebar { display: none; }
@media (min-width: 992px) {
  .fc-bottom-nav { display: none; }
  .fc-rest-timer, .fc-action-bar { bottom: 1rem; }
  .fc-action-bar { bottom: 0; }
  .fc-action-bar ~ .fc-rest-timer { bottom: 88px; }
  .fc-main { padding-bottom: 2rem; }
  .fc-app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
  .fc-sidebar {
    display: flex; flex-direction: column; gap: .25rem;
    position: sticky; top: 0; height: 100vh; padding: 1.25rem .75rem;
    background: var(--fc-surface); border-right: 1px solid var(--fc-border);
  }
  .fc-sidebar a { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: 0 .75rem; border-radius: var(--fc-radius-sm); color: var(--fc-text-muted); text-decoration: none; font-weight: 600; }
  .fc-sidebar a:hover { background: var(--fc-surface-2); color: var(--fc-text); }
  .fc-sidebar a[aria-current="page"] { background: var(--fc-primary-soft); color: var(--fc-primary-strong); }
  .fc-sidebar a.fc-sidebar-logo { display: block; min-height: 0; padding: 0 .5rem; margin-bottom: 1rem; background: none; }
}

/* Bottom sheet (Bootstrap offcanvas-bottom restyle) */
.offcanvas-bottom.fc-sheet {
  height: auto; max-height: 90vh;
  border-radius: var(--fc-radius-lg) var(--fc-radius-lg) 0 0;
  background: var(--fc-surface); color: var(--fc-text); border: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.fc-sheet .fc-grabber { width: 40px; height: 4px; border-radius: 2px; background: var(--fc-border); margin: .5rem auto 0; }

/* Empty state */
.fc-empty { text-align: center; padding: var(--fc-space-7) var(--fc-space-4); }
.fc-empty i { font-size: 2.5rem; color: var(--fc-text-muted); }

/* Skeleton */
.fc-skeleton { background: linear-gradient(90deg, var(--fc-surface-2) 25%, var(--fc-border) 50%, var(--fc-surface-2) 75%); background-size: 200% 100%; animation: fc-shimmer 1.2s infinite; border-radius: var(--fc-radius-sm); }
@keyframes fc-shimmer { to { background-position: -200% 0; } }

/* Toast */
.toast { --bs-toast-bg: var(--fc-text); --bs-toast-color: var(--fc-bg); --bs-toast-border-color: transparent; --bs-toast-border-radius: var(--fc-radius-md); }
/* Toast is inverted, so the close icon must be the opposite of the page theme */
.toast .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: .8; }
[data-bs-theme="dark"] .toast .btn-close { filter: none; }

/* Tables (desktop admin) */
.table { --bs-table-bg: var(--fc-surface); --bs-table-color: var(--fc-text); --bs-table-border-color: var(--fc-border); --bs-table-hover-bg: var(--fc-surface-2); }
.table th { font-size: var(--fc-text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--fc-text-muted); font-weight: 700; }

/* ---------- 15. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .btn:active { transform: none; }
}

/* ---------- 16. Forced colors (Windows High Contrast) ---------- */
@media (forced-colors: active) {
  .fc-set-check[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .fc-bottom-nav a[aria-current="page"] { text-decoration: underline; }
  :focus-visible { outline: 3px solid CanvasText; }
}