/* ============================================================================
   AI FITNESS ASSISTANT — DESIGN SYSTEM  ·  "Volt Lab"
   Style:      Athletic sports-tech. Near-black canvas, one electric accent,
               viewfinder / HUD motifs borrowed from the pose tracker itself.
   Type:       Archivo (expanded display + body) / JetBrains Mono (data, labels)
   Palette:    Volt #D7FF3A on ink #0A0C0F, cyan #5CD3F5 for landmark data
   Source:     design-system/ai-fitness-assistant/MASTER.md
   ----------------------------------------------------------------------------
   1. Tokens          6. Cards & chips      11. Calculators & tools
   2. Reset & base    7. Navigation         12. Exercise lab
   3. A11y            8. Page structure     13. Modals & timers
   4. Layout          9. Content blocks     14. Motion
   5. Buttons        10. Forms & tables     15. Responsive
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
    color-scheme: dark;

    /* --- Color: canvas & surfaces ---------------------------------------- */
    --color-bg:            #0A0C0F;
    --color-bg-deep:       #060709;
    --color-surface:       #111419;
    --color-surface-2:     #171B21;
    --color-surface-3:     #1F242C;

    --color-line:          rgba(255, 255, 255, 0.08);   /* decorative only */
    --color-line-strong:   rgba(255, 255, 255, 0.16);
    --color-line-interactive: #5B6472;                  /* 3.1:1 on surface — inputs */

    /* --- Color: text ------------------------------------------------------ */
    --color-fg:            #F3F5F7;
    --color-fg-muted:      #A4ADBA;   /* 8.2:1 on surface */
    --color-fg-subtle:     #8A93A1;   /* 6.0:1 on surface — smallest copy */

    /* --- Color: accents --------------------------------------------------- */
    --color-volt:          #D7FF3A;   /* primary accent — 17:1 on bg */
    --color-volt-hover:    #E6FF7F;
    --color-on-volt:       #0A0C0F;
    --color-volt-soft:     rgba(215, 255, 58, 0.10);
    --color-volt-line:     rgba(215, 255, 58, 0.32);

    --color-cyan:          #5CD3F5;   /* landmark / data accent — 11:1 on bg */
    --color-cyan-soft:     rgba(92, 211, 245, 0.10);
    --color-cyan-line:     rgba(92, 211, 245, 0.32);

    --color-warn:          #FFC857;   /* "waiting" cues */
    --color-danger:        #FF5C5C;   /* fills, borders */
    --color-danger-text:   #FF9A94;   /* 8.4:1 on surface — error copy */

    --color-ring:          #D7FF3A;

    /* --- Typography ------------------------------------------------------- */
    --font-display: "Archivo", "Arial", system-ui, sans-serif;
    --font-body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

    --stretch-display: 125%;   /* expanded cut for headlines */
    --stretch-title:   112%;   /* card / component titles */

    --text-xs:   0.75rem;    /* 12px — floor for any readable text */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px — body baseline */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.375rem;   /* 22px */
    --text-2xl:  1.75rem;    /* 28px */
    --text-3xl:  clamp(2rem, 3.4vw, 2.75rem);
    --text-4xl:  clamp(2.375rem, 5vw, 3.75rem);
    --text-hero: clamp(2.5rem, 5.6vw, 5rem);

    --leading-tight: 1.02;
    --leading-snug:  1.25;
    --leading-body:  1.6;

    --tracking-tight: -0.025em;
    --tracking-label: 0.14em;

    /* --- Spacing ---------------------------------------------------------- */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 112px;

    /* --- Radii ------------------------------------------------------------ */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-pill: 999px;

    /* --- Elevation -------------------------------------------------------- */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md:   0 8px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg:   0 24px 48px -16px rgba(0, 0, 0, 0.7);
    --glow-volt:   0 10px 32px -8px rgba(215, 255, 58, 0.45);

    /* --- Motion: distinct tokens per job ---------------------------------- */
    --motion-fast:   120ms;  /* colour / opacity feedback */
    --motion-base:   220ms;  /* hover, small transforms */
    --motion-slow:   360ms;  /* panels, drawers, bars */
    --motion-reveal: 700ms;  /* scroll entrance */
    --ease-out:      cubic-bezier(0.16, 1, 0.30, 1);
    --ease-standard: cubic-bezier(0.40, 0, 0.20, 1);

    /* --- Layout ----------------------------------------------------------- */
    --nav-height:     68px;
    --container-max:  1240px;
    --z-nav:          100;
    --z-drawer:       200;
    --z-skiplink:     300;
}

/* ------------------------------------------------------- 2. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    /* Keeps anchored headings clear of the sticky nav (WCAG 2.2 focus-not-obscured) */
    scroll-padding-top: calc(var(--nav-height) + var(--space-lg));
    -webkit-text-size-adjust: 100%;
    background: var(--color-bg);
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    background-color: var(--color-bg);
    color: var(--color-fg);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-stretch: var(--stretch-title);
    font-weight: 750;
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

p  { text-wrap: pretty; }
a  { color: var(--color-volt); text-underline-offset: 3px; }
img, svg, video, canvas { display: block; max-width: 100%; }
ul[role="list"], ol[role="list"] { list-style: none; }

code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    background: var(--color-surface-3);
    color: var(--color-cyan);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.mono { font-family: var(--font-mono); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-deep); }
::-webkit-scrollbar-thumb {
    background: var(--color-surface-3);
    border: 2px solid var(--color-bg-deep);
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-line-interactive); }

::selection { background: var(--color-volt); color: var(--color-on-volt); }

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- 3. A11Y */

/* Visible focus on every operable control — never removed, only restyled. */
:focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 3px;
}
/* Suppress the ring for pointer users only, keeping it for keyboard. */
:focus:not(:focus-visible) { outline: none; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    z-index: var(--z-skiplink);
    transform: translateY(-200%);
    background: var(--color-volt);
    color: var(--color-on-volt);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-pill);
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--motion-base) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ------------------------------------------------------------- 4. LAYOUT */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page > main { flex: 1; }

.section { padding-block: var(--space-4xl); }
.section--tight { padding-block: var(--space-3xl); }
.section + .section { padding-top: 0; }

.grid { display: grid; gap: var(--space-md); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* Grid + glow backdrop: the "lab floor". Decorative layers sit behind content. */
.backdrop { position: relative; isolation: isolate; overflow: hidden; }
.backdrop::before,
.backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.backdrop::before {
    background-image:
        linear-gradient(var(--color-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-line) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 0%, #000 20%, transparent 75%);
            mask-image: radial-gradient(ellipse 80% 70% at 70% 0%, #000 20%, transparent 75%);
}
.backdrop::after {
    background:
        radial-gradient(640px circle at 82% -8%, rgba(215, 255, 58, 0.13), transparent 62%),
        radial-gradient(520px circle at 8% 110%, rgba(92, 211, 245, 0.07), transparent 60%);
}

/* ----------------------------------------------------------- 5. BUTTONS */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 48px;
    padding: 0 var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 650;
    letter-spacing: 0.005em;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition:
        background-color var(--motion-fast) var(--ease-standard),
        color            var(--motion-fast) var(--ease-standard),
        border-color     var(--motion-fast) var(--ease-standard),
        transform        var(--motion-base) var(--ease-out),
        box-shadow       var(--motion-base) var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn .btn__arrow { transition: transform var(--motion-base) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--primary {
    background: var(--color-volt);
    color: var(--color-on-volt);
}
.btn--primary:hover { background: var(--color-volt-hover); box-shadow: var(--glow-volt); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); box-shadow: none; }

.btn--secondary {
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-fg);
    border-color: var(--color-line-strong);
}
.btn--secondary:hover {
    border-color: var(--color-volt-line);
    background: var(--color-volt-soft);
    color: var(--color-volt);
}

.btn--ghost {
    background: transparent;
    color: var(--color-fg-muted);
    border-color: var(--color-line);
}
.btn--ghost:hover {
    background: var(--color-surface-3);
    color: var(--color-fg);
    border-color: var(--color-line-strong);
}

.btn--lg { min-height: 56px; padding-inline: var(--space-xl); font-size: var(--text-lg); }
.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.38;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.btn--primary:disabled:hover { background: var(--color-volt); }
.btn--ghost:disabled:hover,
.btn--secondary:disabled:hover { background: transparent; color: inherit; border-color: var(--color-line); }

/* ----------------------------------------------------- 6. CARDS & CHIPS */
.card {
    position: relative;
    background: var(--color-surface);
    color: var(--color-fg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
}

/* Short accent rule along the top edge — the system's signature mark. */
.card--barred::before {
    content: "";
    position: absolute;
    top: -1px;
    left: var(--space-xl);
    width: 44px;
    height: 2px;
    background: var(--color-volt);
    border-radius: 0 0 2px 2px;
}
.card--barred.is-accent::before { background: var(--color-cyan); }

.card--interactive {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition:
        border-color var(--motion-fast) var(--ease-standard),
        background   var(--motion-fast) var(--ease-standard),
        transform    var(--motion-base) var(--ease-out),
        box-shadow   var(--motion-base) var(--ease-out);
}
.card--interactive:hover {
    background: var(--color-surface-2);
    border-color: var(--color-volt-line);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: var(--color-volt-soft);
    border: 1px solid var(--color-volt-line);
    border-radius: var(--radius-md);
    color: var(--color-volt);
    flex-shrink: 0;
}
.card__icon svg { width: 22px; height: 22px; }
.card__icon--cyan {
    background: var(--color-cyan-soft);
    border-color: var(--color-cyan-line);
    color: var(--color-cyan);
}

.card__title { font-size: var(--text-xl); margin-bottom: var(--space-sm); color: var(--color-fg); }
.card__body  { font-size: var(--text-base); color: var(--color-fg-muted); }
.card__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: auto;
    padding-top: var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 650;
    color: var(--color-fg);
    transition: color var(--motion-fast) var(--ease-standard);
}
.card__action svg { width: 16px; height: 16px; transition: transform var(--motion-base) var(--ease-out); }
.card--interactive:hover .card__action { color: var(--color-volt); }
.card--interactive:hover .card__action svg { transform: translateX(4px); }

/* Badge — pill label for status and context */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 30px;
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-fg-muted);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
}
.badge--accent {
    color: var(--color-volt);
    background: var(--color-volt-soft);
    border-color: var(--color-volt-line);
}
.badge__dot {
    position: relative;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--color-volt);
    box-shadow: 0 0 0 3px rgba(215, 255, 58, 0.18);
    flex-shrink: 0;
}

/* Chip — compact mono data tag (thresholds, joints, counts) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--color-fg-muted);
    background: var(--color-surface-3);
    border-radius: var(--radius-sm);
}
.chip--volt { color: var(--color-volt); background: var(--color-volt-soft); }
.chip--cyan { color: var(--color-cyan); background: var(--color-cyan-soft); }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* Exercise model card (homepage + Exercise Lab) */
.ex-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.ex-card__index {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    color: var(--color-fg-subtle);
}
.ex-card .card__title { margin-bottom: 6px; }
.ex-card__data { margin-top: var(--space-md); }

/* Eyebrow — mono kicker above section titles */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-volt);
    margin-bottom: var(--space-md);
}
.eyebrow::before {
    content: "";
    width: 18px; height: 2px;
    background: currentColor;
}

/* Stat tile */
.stat__value {
    font-family: var(--font-display);
    font-stretch: var(--stretch-display);
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--color-fg);
    font-variant-numeric: tabular-nums;
}
.stat__value small { font-size: 0.5em; font-weight: 600; color: var(--color-volt); margin-left: 2px; }
.stat__label {
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-volt);
}
.stat__desc { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-fg-muted); line-height: 1.5; }

/* -------------------------------------------------------- 7. NAVIGATION */
.nav {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    background: rgba(10, 12, 15, 0.78);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
            backdrop-filter: blur(14px) saturate(150%);
    border-bottom: 1px solid var(--color-line);
}
.nav__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    min-height: var(--nav-height);
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-lg);
}

.nav__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: var(--font-display);
    font-stretch: var(--stretch-title);
    font-size: var(--text-base);
    font-weight: 750;
    letter-spacing: -0.01em;
    color: var(--color-fg);
    text-decoration: none;
    white-space: nowrap;
}
.nav__brand span { color: var(--color-fg-subtle); font-weight: 500; }

.brand-mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand-mark__tile  { fill: var(--color-volt); }
.brand-mark__limb  { fill: none; stroke: var(--color-on-volt); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark__arc   { fill: none; stroke: var(--color-on-volt); stroke-width: 1.6; stroke-linecap: round; opacity: 0.55; }
.brand-mark__joint { fill: var(--color-on-volt); }

.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    font-size: var(--text-sm);
    font-weight: 550;
    color: var(--color-fg-muted);
    text-decoration: none;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    transition: color var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard);
}
.nav__link:hover { color: var(--color-fg); background: var(--color-surface-2); }
.nav__link[aria-current="page"] { color: var(--color-fg); }
.nav__link[aria-current="page"]::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-volt);
}

.nav__cta {
    min-height: 44px;
    margin-left: var(--space-sm);
    padding-inline: 18px;
    font-size: var(--text-sm);
}

/* Hamburger — only rendered below the 900px breakpoint */
.nav__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    color: var(--color-fg);
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-standard);
}
.nav__toggle:hover { background: var(--color-surface-2); }
.nav__toggle svg { width: 20px; height: 20px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-open  { display: none; }

/* ---------------------------------------------------- 8. PAGE STRUCTURE */
.section__header { max-width: 760px; margin-bottom: var(--space-2xl); }
.section__header--center { margin-inline: auto; text-align: center; }
.section__header--split {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    max-width: none;
}
.section__header--split > div { max-width: 680px; }

.section__title {
    font-size: var(--text-3xl);
    font-stretch: var(--stretch-display);
    font-weight: 800;
    line-height: 1.04;
    margin-bottom: var(--space-md);
    color: var(--color-fg);
}
.section__title em, .page-head__title em { font-style: normal; color: var(--color-volt); }
.section__desc { font-size: var(--text-lg); color: var(--color-fg-muted); }

/* Inner-page header */
.page-head {
    padding-block: var(--space-3xl) var(--space-2xl);
    border-bottom: 1px solid var(--color-line);
}
.page-head__title {
    font-size: var(--text-4xl);
    font-stretch: var(--stretch-display);
    font-weight: 800;
    line-height: 1.02;
    margin-bottom: var(--space-md);
    max-width: 16ch;
}
.page-head__lede { font-size: var(--text-lg); color: var(--color-fg-muted); max-width: 640px; }
.page-head__meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.page-head + .section { padding-top: var(--space-3xl); }

/* Tab strip linking sibling tools (1RM / Strength Level) */
.tool-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--space-xl);
    padding: 4px;
    background: var(--color-bg-deep);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
}
.tool-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-fg-muted);
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}
.tool-tabs a svg { width: 16px; height: 16px; }
.tool-tabs a:hover { color: var(--color-fg); background: var(--color-surface-2); }
.tool-tabs a[aria-current="page"] { color: var(--color-on-volt); background: var(--color-volt); }

/* Footer */
.footer {
    margin-top: auto;
    background: var(--color-bg-deep);
    border-top: 1px solid var(--color-line);
}
.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-2xl);
    padding-block: var(--space-3xl) var(--space-2xl);
}
.footer__text { font-size: var(--text-sm); color: var(--color-fg-muted); max-width: 36ch; margin-top: var(--space-md); }
.footer__heading {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-fg-subtle);
    margin-bottom: var(--space-sm);
}
.footer__links { list-style: none; display: flex; flex-direction: column; }
.footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: var(--text-sm);
    color: var(--color-fg-muted);
    text-decoration: none;
    transition: color var(--motion-fast) var(--ease-standard);
}
.footer__links a:hover { color: var(--color-volt); }
.footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-lg);
    padding-block: var(--space-lg);
    border-top: 1px solid var(--color-line);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-fg-subtle);
}

/* --------------------------------------------------- 9. CONTENT BLOCKS */
/* Numbered tag above editorial headings: "01 — Section" */
.step-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-fg-subtle);
}
.step-tag b { color: var(--color-volt); font-weight: 600; }

/* Alternating text/visual rows used by the About and Methodology pages. */
.feature-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
    padding: var(--space-2xl);
    margin-bottom: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
}
.feature-row--reverse > .feature-row__media { order: -1; }
.feature-row--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

.feature-row__title {
    font-size: var(--text-2xl);
    font-stretch: var(--stretch-display);
    font-weight: 800;
    color: var(--color-fg);
    margin-bottom: var(--space-md);
}
.feature-row__body > p { margin-bottom: var(--space-md); color: var(--color-fg-muted); }
.feature-row__body > p:last-child { margin-bottom: 0; }
.feature-row__body strong { color: var(--color-fg); font-weight: 650; }

.feature-row__media { position: relative; }
.feature-row__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;          /* reserves space so nothing shifts on load */
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-line);
}
.feature-row__figure {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: var(--space-xl);
    background: var(--color-bg-deep);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}

/* Viewfinder corners — reused on media frames and the camera stage */
.frame-corners { position: relative; }
.frame-corners::after {
    content: "";
    position: absolute;
    inset: 12px;
    pointer-events: none;
    --c: var(--color-volt);
    --l: 22px;
    background:
        linear-gradient(var(--c), var(--c)) top    left  / var(--l) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) top    left  / 2px var(--l) no-repeat,
        linear-gradient(var(--c), var(--c)) top    right / var(--l) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) top    right / 2px var(--l) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left  / var(--l) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom left  / 2px var(--l) no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / var(--l) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) bottom right / 2px var(--l) no-repeat;
    opacity: 0.85;
}

.rich-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-md); }
.rich-list li {
    position: relative;
    padding-left: var(--space-lg);
    color: var(--color-fg-muted);
}
.rich-list li::before {
    content: "";
    position: absolute;
    left: 2px; top: 0.62em;
    width: 8px; height: 8px;
    border: 2px solid var(--color-volt);
    border-radius: 2px;
}
.rich-list strong { color: var(--color-fg); font-weight: 650; }

.code-block {
    display: block;
    padding: var(--space-lg);
    margin-block: var(--space-md);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.75;
    white-space: pre;
    color: var(--color-fg);
    background: var(--color-bg-deep);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
}
.code-block .tok-fn  { color: var(--color-cyan); }
.code-block .tok-kw  { color: var(--color-volt); }
.code-block .tok-com { color: var(--color-fg-subtle); }
.code-block .tok-num { color: var(--color-warn); }

.block-section {
    padding: var(--space-2xl);
    margin-bottom: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-xl);
}
.block-section__title {
    font-size: var(--text-2xl);
    font-stretch: var(--stretch-display);
    font-weight: 800;
    color: var(--color-fg);
    margin-bottom: var(--space-xl);
}

.citations-list { padding-left: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); }
.citations-list li { color: var(--color-fg-muted); line-height: var(--leading-body); padding-left: var(--space-xs); }
.citations-list li::marker { font-family: var(--font-mono); color: var(--color-volt); font-size: var(--text-sm); }
.citations-list em { color: var(--color-fg); }

/* Closing call-to-action band */
.cta-band {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-3xl) var(--space-2xl);
    color: var(--color-on-volt);
    background: var(--color-volt);
    border-radius: var(--radius-xl);
    overflow: hidden;
    isolation: isolate;
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(10, 12, 15, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 12, 15, 0.07) 1px, transparent 1px);
    background-size: 40px 40px;
}
.cta-band__title {
    font-size: var(--text-3xl);
    font-stretch: var(--stretch-display);
    font-weight: 800;
    line-height: 1.04;
    color: var(--color-on-volt);
    margin-bottom: var(--space-sm);
}
.cta-band__body { font-size: var(--text-lg); color: rgba(10, 12, 15, 0.78); max-width: 52ch; }
.cta-band .btn--dark {
    background: var(--color-on-volt);
    color: var(--color-fg);
}
.cta-band .btn--dark:hover { background: #1A1E25; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.cta-band :focus-visible { outline-color: var(--color-on-volt); }

/* --------------------------------------------------- 10. FORMS & TABLES */
.field { margin-bottom: var(--space-lg); border: 0; min-width: 0; }
.field__label {
    display: block;                   /* always a visible label, never placeholder-only */
    padding: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-fg);
    margin-bottom: var(--space-sm);
}
.field__label .field__optional { font-weight: 400; color: var(--color-fg-subtle); }
.field__hint { font-size: var(--text-sm); color: var(--color-fg-subtle); margin-top: 6px; }
.field__error { font-size: var(--text-sm); color: var(--color-danger-text); margin-top: 6px; }

.input, .select {
    width: 100%;
    min-height: 50px;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-fg);
    background: var(--color-bg-deep);
    border: 1px solid var(--color-line-interactive);
    border-radius: var(--radius-md);
    transition: border-color var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-fast) var(--ease-standard);
}
.input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.input:hover, .select:hover { border-color: var(--color-fg-subtle); }
.input:focus-visible, .select:focus-visible {
    outline: none;
    border-color: var(--color-volt);
    box-shadow: 0 0 0 3px rgba(215, 255, 58, 0.22);
}
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.input::placeholder { color: #6B7482; }

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4ADBA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    background-size: 18px;
    padding-right: var(--space-2xl);
    cursor: pointer;
}
.select option { background: var(--color-surface); color: var(--color-fg); }

/* Segmented control built from real radios (arrow keys work, state is announced) */
.segmented {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--color-bg-deep);
    border: 1px solid var(--color-line-interactive);
    border-radius: var(--radius-pill);
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding-inline: var(--space-md);
    font-size: var(--text-sm);
    font-weight: 650;
    color: var(--color-fg-muted);
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard);
}
.segmented label:hover { color: var(--color-fg); background: var(--color-surface-3); }
.segmented input:checked + label { color: var(--color-on-volt); background: var(--color-volt); }
/* The ring must follow the visually-hidden radio onto its label. */
.segmented input:focus-visible + label { outline: 2px solid var(--color-ring); outline-offset: 2px; }

.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.table th, .table td {
    padding: 14px var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-line);
}
.table th {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-fg-subtle);
    background: var(--color-bg-deep);
}
.table td { color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background var(--motion-fast) var(--ease-standard); }
.table tbody tr:hover td { background: var(--color-surface-2); color: var(--color-fg); }
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}
.table-scroll .table tr:last-child td { border-bottom: 0; }

/* -------------------------------------------- 11. CALCULATORS & TOOLS */
.calc-layout {
    display: grid;
    grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
}
.calc-form { position: sticky; top: calc(var(--nav-height) + var(--space-lg)); }
.calc-form .card__title { margin-bottom: 4px; }
.calc-form__lead { font-size: var(--text-sm); color: var(--color-fg-subtle); margin-bottom: var(--space-xl); }
.input-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

.result-card {
    position: relative;
    padding: var(--space-2xl) var(--space-xl);
    margin-bottom: var(--space-lg);
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-volt-line);
    border-radius: var(--radius-xl);
    overflow: hidden;
    isolation: isolate;
}
.result-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(420px circle at 50% 0%, rgba(215, 255, 58, 0.12), transparent 70%);
}
.result-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-volt);
    margin-bottom: var(--space-md);
}
.result-value {
    font-family: var(--font-display);
    font-stretch: var(--stretch-display);
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--color-fg);
    font-variant-numeric: tabular-nums;
}
.result-formula {
    display: inline-block;
    margin-top: var(--space-lg);
    padding: 6px 12px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-fg-muted);
    background: var(--color-bg-deep);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-pill);
}

/* Placeholder shown before a calculation exists — reserves the space
   so the layout does not jump when results appear (CLS). */
.result-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    min-height: 360px;
    padding: var(--space-xl);
    text-align: center;
    color: var(--color-fg-muted);
    background:
        repeating-linear-gradient(135deg, transparent 0 12px, rgba(255, 255, 255, 0.015) 12px 24px),
        var(--color-surface);
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius-xl);
}
.result-empty p { max-width: 34ch; }
.result-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    color: var(--color-volt);
    background: var(--color-volt-soft);
    border: 1px solid var(--color-volt-line);
    border-radius: 50%;
}
.result-empty__icon svg { width: 28px; height: 28px; }

/* Horizontal progress meter */
.meter {
    height: 12px;
    margin-top: var(--space-xl);
    background: var(--color-bg-deep);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.meter__fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, rgba(215, 255, 58, 0.55), var(--color-volt));
    border-radius: var(--radius-pill);
    box-shadow: 0 0 16px rgba(215, 255, 58, 0.45);
    transition: width var(--motion-slow) var(--ease-out);
}

/* ------------------------------------------------------ 12. EXERCISE LAB */
/* Split camera layout — scoped to .lab so it never leaks into content pages. */
body.lab {
    display: grid;
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--color-bg-deep);
}

.lab__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-height: 0;
    padding: var(--space-lg);
    background: var(--color-surface);
    border-right: 1px solid var(--color-line);
    overflow-y: auto;
}

.lab__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    align-self: flex-start;
    min-height: 40px;
    padding: 0 14px 0 10px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-fg-muted);
    text-decoration: none;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    transition: color var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard);
}
.lab__back:hover { color: var(--color-fg); border-color: var(--color-fg-subtle); background: var(--color-surface-3); }
.lab__back svg { width: 16px; height: 16px; }

.lab__title {
    margin-top: var(--space-sm);
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    font-stretch: var(--stretch-display);
    font-weight: 800;
    line-height: 1.02;
    color: var(--color-fg);
}
.lab__title::before {
    content: "Live pose model";
    display: block;
    margin-bottom: var(--space-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    font-stretch: 100%;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-volt);
}

/* Rep counter — the single most-read element on the page */
.rep-counter {
    position: relative;
    padding: var(--space-lg);
    background:
        linear-gradient(var(--color-line) 1px, transparent 1px) 0 0 / 100% 28px,
        var(--color-bg-deep);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.rep-counter__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-fg-subtle);
}
.rep-counter__value {
    margin-top: var(--space-sm);
    font-family: var(--font-display);
    font-stretch: var(--stretch-display);
    font-size: clamp(4.5rem, 8vw, 7rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.04em;
    color: var(--color-fg);
    font-variant-numeric: tabular-nums;
}

.instruction-panel {
    display: flex;
    align-items: center;
    min-height: 84px;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface-2);
    border: 1px solid var(--color-line);
    border-left: 3px solid var(--color-warn);
    border-radius: var(--radius-md);
    transition: border-color var(--motion-base) var(--ease-standard);
}
.instruction-panel:has(.instruction-text.action) { border-left-color: var(--color-volt); }
.instruction-panel:has(.instruction-text.error)  { border-left-color: var(--color-danger); }
.instruction-text {
    font-family: var(--font-display);
    font-stretch: var(--stretch-title);
    font-size: var(--text-xl);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-fg);
}
.instruction-text.waiting { color: var(--color-warn); }
.instruction-text.action  { color: var(--color-volt); }
.instruction-text.error   { color: var(--color-danger-text); }

.progress-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-fg-muted);
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius-md);
}
.progress-indicator::before {
    content: "";
    flex-shrink: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-cyan);
}

.lab__controls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-top: auto;
    padding-top: var(--space-sm);
}
.lab__controls .btn { min-height: 46px; padding-inline: var(--space-md); font-size: var(--text-sm); }
.lab__controls #startButton,
.lab__controls #stopButton { min-height: 54px; font-size: var(--text-base); }

/* Camera stage */
.lab__stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    padding: var(--space-md);
    background:
        radial-gradient(800px circle at 50% 0%, rgba(215, 255, 58, 0.05), transparent 60%),
        var(--color-bg-deep);
}

.camera-container {
    position: relative;
    width: 100%; height: 100%;
    overflow: hidden;
    background:
        linear-gradient(var(--color-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--color-line) 1px, transparent 1px),
        #08090C;
    background-size: 48px 48px, 48px 48px, auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-lg);
}

/* Idle placeholder: sits under the <video>, which paints over it once a
   stream is attached. */
.camera-container::before {
    content: "Camera idle — press Start";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 84px;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: var(--color-fg-subtle);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D7FF3A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E")
        center calc(50% - 24px) / 44px no-repeat;
    pointer-events: none;
    transition: opacity var(--motion-base) var(--ease-standard);
}

/* Viewfinder corners framing the idle camera. Hidden while a set is running, when the
   video shows nothing but the skeleton (which turns red on a form fault). */
.camera-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    --c: rgba(215, 255, 58, 0.8);
    --l: 28px;
    --i: 18px;
    background:
        linear-gradient(var(--c), var(--c)) var(--i) var(--i) / var(--l) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) var(--i) var(--i) / 2px var(--l) no-repeat,
        linear-gradient(var(--c), var(--c)) calc(100% - var(--i)) var(--i) / var(--l) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) calc(100% - var(--i)) var(--i) / 2px var(--l) no-repeat,
        linear-gradient(var(--c), var(--c)) var(--i) calc(100% - var(--i)) / var(--l) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) var(--i) calc(100% - var(--i)) / 2px var(--l) no-repeat,
        linear-gradient(var(--c), var(--c)) calc(100% - var(--i)) calc(100% - var(--i)) / var(--l) 2px no-repeat,
        linear-gradient(var(--c), var(--c)) calc(100% - var(--i)) calc(100% - var(--i)) / 2px var(--l) no-repeat;
}

#input_video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
#output_canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;               /* crop exactly like the video so landmarks line up */
    pointer-events: none;
    z-index: 2;
}

/* While a set is running (Stop is enabled) the stage shows only the video, the skeleton
   and the rep progress meter. */
body.lab:has(#stopButton:not(:disabled)) .camera-container::before,
body.lab:has(#stopButton:not(:disabled)) .camera-container::after { opacity: 0; }

/* Rep progress meter on the right edge of the stage. Shown only while a set is running;
   it carries no text, so the camera view stays free of numbers and letters. */
.rep-progress-bar-container {
    position: absolute;
    top: 50%;
    right: var(--space-lg);
    z-index: 10;
    display: none;
    flex-direction: column-reverse;   /* fills from the bottom */
    width: 12px;
    height: min(70%, 520px);
    transform: translateY(-50%);
    background: rgba(6, 7, 9, 0.6);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
body.lab:has(#stopButton:not(:disabled)) .rep-progress-bar-container { display: flex; }
.rep-progress-bar-fill {
    width: 100%; height: 0%;
    background: linear-gradient(0deg, var(--color-volt), rgba(215, 255, 58, 0.55));
    box-shadow: 0 0 14px rgba(215, 255, 58, 0.55);
    border-radius: var(--radius-pill);
    transition: height var(--motion-fast) linear;
}

/* ------------------------------------------------- 13. MODALS & TIMERS */
.modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    text-align: center;
    background: rgba(6, 7, 9, 0.92);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}
.modal[hidden] { display: none; }

.modal__title {
    font-size: var(--text-3xl);
    font-stretch: var(--stretch-display);
    font-weight: 800;
    color: var(--color-fg);
}
.modal__subtitle { font-size: var(--text-lg); color: var(--color-fg-muted); max-width: 34rem; }
.modal__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px; height: 96px;
    color: var(--color-volt);
    background: var(--color-volt-soft);
    border: 1px solid var(--color-volt-line);
    border-radius: 50%;
}
.modal__icon svg { width: 48px; height: 48px; }

/* Countdown ring — the sweep is decorative; the number carries the meaning. */
.timer-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px; height: 200px;
    margin-block: var(--space-md);
    border: 3px solid var(--color-line-strong);
    border-radius: 50%;
}
.timer-ring__spinner {
    position: absolute;
    inset: -3px;
    border: 3px solid transparent;
    border-top-color: var(--color-volt);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.timer-ring__value {
    font-family: var(--font-display);
    font-stretch: var(--stretch-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1;
    color: var(--color-fg);
    font-variant-numeric: tabular-nums;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------ 14. MOTION */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--motion-reveal) var(--ease-out),
                transform var(--motion-reveal) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Stagger siblings inside a grid for a cascading entrance. */
.grid > .reveal:nth-child(2) { transition-delay: 60ms; }
.grid > .reveal:nth-child(3) { transition-delay: 120ms; }
.grid > .reveal:nth-child(4) { transition-delay: 180ms; }
.grid > .reveal:nth-child(5) { transition-delay: 240ms; }
.grid > .reveal:nth-child(6) { transition-delay: 300ms; }

@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(215, 255, 58, 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(215, 255, 58, 0); }
    100% { box-shadow: 0 0 0 0 rgba(215, 255, 58, 0); }
}
.badge__dot--live { animation: pulse-ring 2s var(--ease-standard) infinite; }

/* -------------------------------------------------------- 15. RESPONSIVE */
@media (max-width: 1080px) {
    .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
    .feature-row,
    .feature-row--wide { grid-template-columns: 1fr; gap: var(--space-xl); padding: var(--space-xl); }
    .feature-row--reverse > .feature-row__media { order: 0; }
    .calc-layout { grid-template-columns: 1fr; }
    .calc-form { position: static; }
    .cta-band { grid-template-columns: 1fr; padding: var(--space-2xl) var(--space-xl); }
}

@media (max-width: 900px) {
    :root { --nav-height: 64px; }

    .nav__toggle { display: inline-flex; }

    /* Drawer replaces the inline links — mobile keeps full navigation. */
    .nav__links {
        position: absolute;
        top: 100%;
        inset-inline: 0;
        z-index: var(--z-drawer);
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: var(--space-md) var(--space-lg) var(--space-lg);
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-line);
        box-shadow: var(--shadow-lg);
    }
    .nav__links[hidden] { display: none; }
    .nav__link { min-height: 48px; padding-inline: var(--space-md); font-size: var(--text-base); border-radius: var(--radius-md); }
    .nav__cta { margin: var(--space-sm) 0 0; min-height: 50px; }

    /* Lab: stack the panel above the stage; counter and cue sit side by side. */
    body.lab { display: block; height: auto; overflow: auto; }
    .lab__panel {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm) var(--space-md);
        border-right: none;
        border-bottom: 1px solid var(--color-line);
        overflow: visible;
    }
    .lab__panel > .lab__back,
    .lab__panel > .lab__title,
    .lab__panel > .progress-indicator,
    .lab__panel > .lab__controls { grid-column: 1 / -1; }
    .lab__panel > .lab__back { justify-self: start; }
    .lab__title { margin-top: var(--space-xs); }
    .rep-counter { padding: var(--space-md); }
    .rep-counter__value { font-size: clamp(3.25rem, 14vw, 4.5rem); }
    .instruction-panel { min-height: 0; padding: var(--space-md); }
    .instruction-text { font-size: var(--text-lg); }
    .lab__controls { margin-top: var(--space-xs); padding-top: 0; }
    .lab__stage { height: 72vh; min-height: 360px; padding: var(--space-sm); }

    .section { padding-block: var(--space-3xl); }
}

@media (max-width: 640px) {
    .container { padding-inline: var(--space-md); }
    .nav__inner { padding-inline: var(--space-md); }
    .card { padding: var(--space-lg); }
    .card--barred::before { left: var(--space-lg); }
    .block-section, .feature-row, .feature-row--wide { padding: var(--space-lg); border-radius: var(--radius-lg); }
    .input-row { grid-template-columns: 1fr; gap: 0; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
    .cta-band { padding: var(--space-xl) var(--space-lg); }
    .cta-band .btn { width: 100%; }
    .page-head { padding-block: var(--space-2xl) var(--space-xl); }
    .tool-tabs { display: flex; border-radius: var(--radius-lg); }
    .tool-tabs a { flex: 1 1 40%; justify-content: center; padding-inline: 12px; border-radius: var(--radius-md); }
    .timer-ring { width: 160px; height: 160px; }
}

@media (max-width: 380px) {
    .nav__brand span { display: none; }
}

/* Honour the OS motion setting: strip transitions, keep everything readable. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .timer-ring__spinner { animation: none; }
}