/* =============================================================
   SportsLab — broadcast-sports aesthetic
   ============================================================= */

/* =============================================================
   SportsLab — visual system (MediaPortal-aligned)
   Light theme by default; data-theme="dark" on <html> overrides
   the colour tokens. Variable NAMES are preserved (so all 180+
   existing var(--red) and var(--bg-N) references keep working);
   only the values changed. `--red` is now warm orange but kept
   under that name to avoid a project-wide rename.
   ============================================================= */

:root {
    /* Surfaces */
    --bg-0: #f4f5f6;            /* page background */
    --bg-1: #ffffff;            /* card / panel */
    --bg-2: #eceef0;            /* input background, subtle panel */
    --bg-3: #e1e4e7;            /* hovered surface */

    /* Lines */
    --line: #d8dadd;
    --line-soft: rgba(0, 0, 0, 0.06);
    --line-bright: #c2c6cb;

    /* Text */
    --text: #16181a;
    --text-dim: #54585e;
    --text-mute: #888d93;

    /* Accent — warm orange (kept under --red for back-compat). */
    --accent: #e85a2e;
    --accent-dim: #c2491f;
    --accent-glow: rgba(232, 90, 46, 0.18);
    --red: var(--accent);
    --red-bright: var(--accent-dim);

    /* Status — slightly muted for light backgrounds */
    --amber: #b8791f;
    --cyan: #1a8fa3;
    --green: #1f9b5b;

    /* Skeleton overlay on the analyze video — these need to stay
       legible on the *video* (which is always pixels), so the values
       don't depend on light/dark theme. */
    --skel-line: #22d3ee;
    --skel-joint: #f59e0b;
    --skel-glow: rgba(34, 211, 238, 0.6);

    /* Radii — MediaPortal uses very small radii throughout. */
    --r-sm: 2px;
    --r: 3px;
    --r-lg: 6px;

    /* Typography */
    --display: "Barlow Condensed", "Oswald", system-ui, sans-serif;
    --body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

/* Dark theme — values match MediaPortal's dark palette. */
[data-theme="dark"] {
    --bg-0: #0b0d0f;
    --bg-1: #131619;
    --bg-2: #1b1f23;
    --bg-3: #232830;

    --line: #2a2f36;
    --line-soft: rgba(255, 255, 255, 0.06);
    --line-bright: #3a4048;

    --text: #f2f3f4;
    --text-dim: #aab0b8;
    --text-mute: #6b7178;

    --accent: #ff6a3d;
    --accent-dim: #e85a2e;
    --accent-glow: rgba(255, 106, 61, 0.25);

    --amber: #f5b942;
    --cyan: #22d3ee;
    --green: #3ddc84;
}

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

html, body { height: 100%; }

body {
    background: var(--bg-0);
    color: var(--text);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--red-bright); }

button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }

input, select, textarea {
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
}

/* =============================================================
   Brand
   ============================================================= */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
}
.brand-mark {
    width: 22px;
    height: 22px;
    background:
        radial-gradient(circle at 30% 30%, #fff 0%, #fff 18%, var(--red) 19%, var(--red) 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 3px var(--red);
    position: relative;
}
.brand-mark::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.5) transparent rgba(255, 255, 255, 0.5) transparent;
}
.brand-name {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 0.08em;
    font-weight: 400;
}

/* =============================================================
   Buttons
   ============================================================= */
.primary-btn,
.ghost-btn,
.danger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--r);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.06s, background 0.15s, border-color 0.15s;
    user-select: none;
    white-space: nowrap;
}

.primary-btn {
    background: linear-gradient(180deg, var(--red-bright), var(--red));
    color: white;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 6px 16px -8px var(--red);
}
.primary-btn:hover { color: white; filter: brightness(1.1); }
.primary-btn:active { transform: translateY(1px); }
.primary-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ghost-btn {
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--line);
}
.ghost-btn:hover { background: var(--bg-3); border-color: var(--line-bright); color: var(--text); }
.ghost-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.danger-btn {
    background: transparent;
    color: var(--red-bright);
    border: 1px solid var(--red);
}
.danger-btn:hover { background: var(--accent-glow); color: var(--accent-dim); }

.lg { padding: 14px 26px; font-size: 15px; }
.full { width: 100%; }

/* =============================================================
   Marketing / hero
   ============================================================= */
.marketing { background:
    radial-gradient(1200px 600px at 80% -200px, var(--accent-glow), transparent 60%),
    radial-gradient(900px 500px at 0% 30%, rgba(34, 211, 238, 0.08), transparent 60%),
    var(--bg-0);
    min-height: 100vh;
}

.hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px 80px;
}
.marketing-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-bottom: 80px;
}
.nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}
.nav-actions a:not(.primary-btn) { color: var(--text-dim); }
.nav-actions a:not(.primary-btn):hover { color: var(--text); }

.hero-content { max-width: 980px; }

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 100px;
    color: var(--text-dim);
    font-size: 13px;
    margin-bottom: 32px;
}
.hero-tag .dot {
    width: 6px; height: 6px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.hero-title {
    font-family: var(--display);
    font-size: clamp(56px, 10vw, 128px);
    line-height: 0.92;
    letter-spacing: 0.005em;
    font-weight: 400;
    margin-bottom: 28px;
}
.hero-title .accent {
    color: var(--red);
    background: linear-gradient(180deg, var(--red-bright), var(--red));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-sub {
    font-size: clamp(16px, 1.6vw, 19px);
    color: var(--text-dim);
    max-width: 600px;
    margin-bottom: 40px;
    line-height: 1.6;
}

.hero-cta {
    display: flex;
    gap: 14px;
    margin-bottom: 80px;
    flex-wrap: wrap;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.feature {
    background: var(--bg-1);
    padding: 28px 24px 32px;
}
.feature-num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--red);
    margin-bottom: 16px;
    letter-spacing: 0.15em;
}
.feature h3 {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    font-weight: 400;
}
.feature p { color: var(--text-dim); font-size: 14px; }

/* =============================================================
   Auth pages
   ============================================================= */
.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    background:
        radial-gradient(800px 400px at 50% -100px, var(--accent-glow), transparent 60%),
        var(--bg-0);
}
.auth-shell > .brand { margin-bottom: 40px; }
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 40px;
}
.auth-card h1 {
    font-family: var(--display);
    font-size: 38px;
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-bottom: 6px;
}
.auth-sub { color: var(--text-dim); margin-bottom: 28px; }
.auth-card label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    margin: 16px 0 6px;
    font-weight: 600;
}
.auth-card input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text);
    transition: border-color 0.15s;
}
.auth-card input:focus { outline: none; border-color: var(--red); }
.auth-card button { margin-top: 24px; }
.auth-foot {
    margin-top: 24px;
    color: var(--text-dim);
    font-size: 14px;
    text-align: center;
}
.auth-foot a { color: var(--red-bright); }

.alert {
    padding: 12px 14px;
    border-radius: var(--r);
    font-size: 14px;
    margin-bottom: 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    color: var(--text-dim);
}

/* 6-digit login code — large monospace digits, centered, roomy tap target
   on phones. maxlength=6 on the input caps user input. */
.code-input {
    font-family: var(--mono);
    font-size: 28px;
    letter-spacing: 0.4em;
    text-align: center;
    padding: 14px 10px !important;
    text-indent: 0.4em; /* offsets letter-spacing so digits look centred */
}
.alert.error {
    /* MediaPortal-style error inline — accent-tinted background with the
       accent as the text colour. The accent here is orange in both themes
       so red is replaced by the warm-orange family for consistency. */
    background: var(--accent-glow);
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* =============================================================
   App shell
   ============================================================= */
.app {
    min-height: 100vh;
    background: var(--bg-0);
    display: flex;
    flex-direction: column;
}
.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    border-bottom: 1px solid var(--line);
    background: var(--bg-1);
    height: 60px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 30;
}
.topbar-menu {
    display: contents;
}
.nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    margin-left: auto;
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
    transform-origin: center;
}
.topbar.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.topbar.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.topbar-links {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 16px;
}
.topbar-links a {
    /* MediaPortal-style nav: uppercase mono links, no pill background.
       The active link is just the accent colour — quieter than a filled
       pill and lets the topbar feel as light as MediaPortal's. */
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0;
    transition: color 0.12s;
}
.topbar-links a:hover {
    color: var(--text);
    text-decoration: none;
    background: transparent;
    box-shadow: none;
}
.topbar-links a.active {
    color: var(--accent);
    background: transparent;
    box-shadow: none;
}
.topbar-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.user-name {
    font-size: 13px;
    color: var(--text-dim);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--r);
    transition: color 0.12s, background 0.12s;
}
a.user-name:hover { color: var(--text); background: var(--bg-2); }
a.user-name.active { color: var(--text); background: var(--bg-2); }

/* =============================================================
   Page (dashboard, athletes)
   ============================================================= */
.page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 24px;
    width: 100%;
    flex: 1;
}
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}
.kicker {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--red);
    margin-bottom: 6px;
}
.page-head h1, .page h1 {
    font-family: var(--display);
    font-size: 56px;
    letter-spacing: 0.02em;
    font-weight: 400;
    line-height: 1;
}
.page-actions { display: flex; gap: 10px; }

.empty {
    text-align: center;
    padding: 120px 24px;
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-1);
}
.empty-mark {
    width: 56px; height: 56px;
    margin: 0 auto 24px;
    background:
        radial-gradient(circle at 30% 30%, #fff, #fff 18%, var(--red) 19%, var(--red) 100%);
    border-radius: 50%;
    opacity: 0.4;
}
.empty h2 {
    font-family: var(--display);
    font-size: 36px;
    letter-spacing: 0.02em;
    font-weight: 400;
    margin-bottom: 8px;
}
.empty p { color: var(--text-dim); margin-bottom: 24px; }
.empty-actions { display: flex; gap: 12px; justify-content: center; }

/* Session grid */
.session-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.session-card {
    display: block;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform 0.15s, border-color 0.15s;
    color: var(--text);
}
.session-card:hover {
    transform: translateY(-2px);
    border-color: var(--line-bright);
    color: var(--text);
}
.session-thumb {
    aspect-ratio: 16 / 10;
    background:
        repeating-linear-gradient(45deg, rgba(0,0,0,0.03) 0 8px, transparent 8px 16px),
        linear-gradient(135deg, var(--bg-3) 0%, var(--bg-2) 100%);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 12px 14px;
    overflow: hidden;
}
.session-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 60%);
}
/* When a real thumbnail image is present, hide the placeholder background +
   glow so the photo shows through cleanly, and add a bottom gradient so the
   type/duration chips stay readable over bright frames. The dark overlay
   stays dark regardless of theme — it's about contrast with the image. */
.session-thumb.has-image {
    background: var(--bg-2);
}
.session-thumb.has-image::before {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
}
.session-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.session-type {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    /* Chip overlays the thumbnail image — white-on-accent stays legible
       on any image AND on either light or dark page background. */
    color: #fff;
    background: var(--accent);
    padding: 4px 8px;
    border-radius: var(--r-sm);
    z-index: 1;
}
.session-dur {
    font-family: var(--mono);
    font-size: 11px;
    /* Chip with dark backdrop on the thumbnail — white text is correct
       regardless of theme since the chip's own background is dark. */
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    padding: 4px 8px;
    border-radius: var(--r-sm);
    backdrop-filter: blur(4px);
    z-index: 1;
}
.session-body { padding: 16px; }
.session-body h3 {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-bottom: 4px;
}
.session-meta { color: var(--text-dim); font-size: 13px; margin-bottom: 12px; }
.session-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    font-family: var(--mono);
    font-size: 11px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    padding: 3px 8px;
    border-radius: var(--r-sm);
    color: var(--text-dim);
}

/* Athletes */
/* Pagination — appears below library and athletes grids */
/* =============================================================
   Library toolbar — search input + total count, sits between the
   page-head and the session-grid. On narrow screens it stacks so
   the count sits under the search input instead of beside it.
   ============================================================= */
.library-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.library-toolbar .muted.small {
    flex-shrink: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 11px;
}

.search-wrap {
    position: relative;
    flex: 1 1 auto;
    max-width: 480px;
}
.search-input {
    /* Right padding leaves room for the × clear button; left padding
       matches the default .ctl so the placeholder sits flush left. */
    width: 100%;
    padding: 9px 36px 9px 12px;
}
.search-input::-webkit-search-decoration,
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-results-button,
.search-input::-webkit-search-results-decoration {
    display: none;
}
.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--bg-3);
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}
.search-clear:hover { background: var(--line-bright); color: var(--text); }
.search-clear[hidden] { display: none; }

/* Infinite-scroll status + sentinel. The sentinel is a 1px-tall empty
   div that the IntersectionObserver watches; when it enters the viewport
   (plus rootMargin 400px) the next batch loads. The status line above
   shows "Loading more…" / "All caught up" / error messages. */
.library-status {
    text-align: center;
    margin-top: 24px;
    min-height: 20px;
}
.library-loading {
    color: var(--text-dim);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 11px;
}
.library-sentinel {
    height: 1px;
    width: 100%;
}

@media (max-width: 640px) {
    .library-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .search-wrap { max-width: none; }
    .library-toolbar .muted.small { text-align: right; }
}

.athlete-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.athlete-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px;
}
.athlete-mono {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-dim));
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-size: 20px;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    color: white;
}
.athlete-card h3 {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 0.04em;
    font-weight: 400;
    margin-bottom: 4px;
}
.athlete-meta { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
/* Secondary athlete meta lines (team · org, age · height · weight). Tighter
   vertical rhythm so a card with all fields filled doesn't tower above a
   card without them. */
.athlete-meta + .athlete-meta { margin-top: -4px; }
.athlete-phys { letter-spacing: 0.04em; font-size: 12px; }
.athlete-count {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--amber);
    margin: 0 0 12px;
    text-decoration: none;
    transition: color 0.12s, transform 0.12s;
}
a.athlete-count:hover {
    color: var(--text);
    transform: translateX(2px);
}

/* Filter pill on the dashboard, shown when sessions are scoped to a single
   athlete. Acts as a link back to the unfiltered library. */
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 6px 10px 6px 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-dim);
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.filter-pill:hover {
    background: var(--bg-3);
    border-color: var(--line-bright);
    color: var(--text);
}
.filter-pill-x {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-3);
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1;
}
.filter-pill:hover .filter-pill-x {
    background: var(--red);
    color: white;
}
.athlete-notes { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.athlete-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.athlete-actions .ghost-btn {
    flex: 1;
}

/* Small ghost button — used in card action rows. */
.ghost-btn.small {
    padding: 6px 12px;
    font-size: 12px;
    min-height: 0;
}
.ghost-btn.danger {
    color: var(--red);
    border-color: var(--accent);
}
.ghost-btn.danger:hover {
    background: var(--accent-glow);
    border-color: var(--red);
}

/* =============================================================
   Studio (live + analyze)
   ============================================================= */
.studio {
    flex: 1;
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-areas: "side stage";
    overflow: hidden;
    min-height: 0;
}
.studio-side {
    grid-area: side;
    background: var(--bg-1);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    height: calc(100vh - 60px);
}
.side-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
}
.side-section h2 {
    font-family: var(--display);
    font-size: 28px;
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-bottom: 6px;
}
.muted { color: var(--text-dim); font-size: 13px; }
.muted.small { font-size: 12px; }
.error-text {
    color: var(--red);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 8px;
}
.error-text:empty { display: none; }

.ctl-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    font-weight: 600;
    margin: 14px 0 6px;
}
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: var(--text);
}
.toggle-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
    cursor: pointer;
}
.ctl {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text);
    transition: border-color 0.15s;
    font-size: 14px;
}
.ctl:focus { outline: none; border-color: var(--red); }
textarea.ctl { resize: vertical; min-height: 60px; font-family: inherit; }
/* Vertical spacing between sidebar action buttons (Save / Regenerate / Delete).
   Scoped to DIRECT children with `>` so it doesn't bleed into the .tool-grid
   buttons nested inside, which would otherwise have margin-top added to every
   button after the first — causing the first tool button to look like it
   doesn't have the same vertical alignment as the others. */
.side-section > button + button { margin-top: 8px; }

.live-metrics .metric-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
    color: var(--text-dim);
}
.live-metrics .metric-row:last-child { border: none; }
.live-metrics .metric-row span:last-child { color: var(--text); font-weight: 500; }

.metric-list { display: flex; flex-direction: column; gap: 4px; }
.metric-list .metric-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-2);
    border-radius: var(--r-sm);
    font-size: 13px;
}
.metric-list .metric-row span:last-child { font-family: var(--mono); color: var(--amber); }

.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.tool-btn {
    padding: 10px 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-size: 13px;
    text-align: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tool-btn:hover { background: var(--bg-3); border-color: var(--line-bright); }
.tool-btn.active {
    background: var(--red);
    border-color: var(--red);
    color: white;
}

.progress {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-2);
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar > div {
    height: 100%;
    background: linear-gradient(90deg, var(--red), var(--amber));
    width: 0;
    transition: width 0.2s;
}

/* Upload progress — used during video uploads in both the live save panel
   and the analyze save section. Shows percent + bytes + ETA so the user has
   real signal that something is happening. */
.upload-progress {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.upload-progress-bar {
    height: 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}
.upload-progress-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--red), var(--amber));
    width: 0%;
    transition: width 0.15s linear;
}
.upload-progress-bar.indeterminate > span {
    width: 30%;
    animation: upload-indet 1.2s ease-in-out infinite;
}
@keyframes upload-indet {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(333%); }
}
.upload-progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-dim);
}
.upload-progress-meta span:first-child { color: var(--text); }
#saveProgressDetail,
#analyzeUploadProgressDetail {
    margin: 0;
    min-height: 16px;
}

/* Stage */
.studio-stage {
    grid-area: stage;
    display: flex;
    flex-direction: column;
    background: var(--bg-0);
    height: calc(100vh - 60px);
    overflow: hidden;
}
.stage-frame {
    flex: 1;
    position: relative;
    /* Video stage stays dark regardless of theme — video review needs a
       dark backdrop so the footage isn't competing with a bright surround.
       Literal values (not var(--bg-0)) because bg-0 is light on light theme. */
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 80px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 80px),
        #07090f;
    overflow: hidden;
    min-height: 0;
}
.stage-frame video,
.stage-frame canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.stage-frame video { z-index: 1; }
#liveCanvas, #analyzeCanvas { z-index: 2; pointer-events: none; }
#annotateCanvas { z-index: 3; touch-action: none; }

.stage-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    background: rgba(7, 9, 15, 0.7);
    backdrop-filter: blur(8px);
}
.stage-overlay[hidden] { display: none; }
.overlay-card {
    text-align: center;
    padding: 32px;
    max-width: 420px;
}
.overlay-card h2 {
    font-family: var(--display);
    font-size: 32px;
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-bottom: 8px;
}
.overlay-card p { color: var(--text-dim); }

/* Save overlay — full-viewport scrim that centers a bounded card. The card
   itself is height-capped to the viewport so its footer (action buttons) is
   always visible. Inner body scrolls if the form is taller than what fits.

   We use a bounded-modal pattern instead of sticky-bottom because:
     1. position:sticky inside an overflow:auto flex column is unreliable on
        iOS Safari and some narrow-viewport rendering modes.
     2. Bounding the card guarantees the footer is always reachable without
        depending on scroll-overflow behavior at all. */
#saveOverlay {
    position: fixed;
    inset: 0;
    /* Use the dynamic viewport on supporting browsers so the modal isn't
       hidden behind the iOS URL bar; fall back to plain vh otherwise. */
    height: 100vh;
}
@supports (height: 100dvh) {
    #saveOverlay { height: 100dvh; }
}
#saveOverlay {
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 9, 15, 0.7);
    backdrop-filter: blur(8px);
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.save-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 460px;
    /* Cap the card to the available height so the footer is always visible.
       The padding values match #saveOverlay's so the card never overflows. */
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
    padding: 0;
}

.save-card-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 28px 12px;
    min-height: 0; /* required for flex children to actually scroll */
}
.save-card h2 {
    text-align: center;
    margin-bottom: 4px;
    font-family: var(--display);
    font-size: 26px;
    letter-spacing: 0.03em;
    font-weight: 400;
}
.save-card .muted.small {
    text-align: center;
    margin-bottom: 16px;
    color: var(--text-dim);
}
.save-card .ctl {
    margin-bottom: 12px;
}
.save-card .ctl-label {
    margin-top: 4px;
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.save-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 28px;
    border-top: 1px solid var(--line);
    background: var(--bg-1);
}
.save-actions .primary-btn,
.save-actions .ghost-btn {
    width: 100%;
}
#saveStatus {
    text-align: center;
    margin-top: 12px;
    color: var(--text-dim);
}
/* Lock the body scroll while the save panel is open so the underlying page
   doesn't scroll alongside the overlay (and so iOS doesn't get confused
   about which scroll container should respond to touch). */
body.save-open {
    overflow: hidden;
    touch-action: none;
}

/* ---------------------------------------------------------------------------
   Share modal — uses the same bounded-modal pattern as #saveOverlay
   --------------------------------------------------------------------------- */
#shareModal {
    position: fixed;
    inset: 0;
    height: 100vh;
}
@supports (height: 100dvh) {
    #shareModal { height: 100dvh; }
}
#shareModal {
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 9, 15, 0.7);
    backdrop-filter: blur(8px);
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.share-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 480px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.share-card-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 28px 12px;
    min-height: 0;
}
.share-card .save-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 28px;
    border-top: 1px solid var(--line);
    background: var(--bg-1);
}
.share-card h2 {
    text-align: center;
    margin-bottom: 4px;
    font-family: var(--display);
    font-size: 24px;
    letter-spacing: 0.03em;
    font-weight: 400;
}
.share-card .muted.small {
    margin-bottom: 16px;
}
.share-card .ctl-label {
    margin-top: 4px;
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.share-card .ctl { margin-bottom: 12px; }
.share-url-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.share-url-row .ctl {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px;
    margin-bottom: 0;
}
.share-url-row .ghost-btn.small {
    flex-shrink: 0;
}
.share-stats {
    display: flex;
    gap: 18px;
    margin: 14px 0 16px;
    padding: 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.share-stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.share-stats strong {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 500;
}

/* Divider between the public-link and user-share sections of the modal. */
.share-divider {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 22px 0 18px;
}

/* Direct-share email input + "Share" button row. */
.share-grant-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin: 8px 0 6px;
}
.share-grant-row .ctl {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}
.share-grant-row .primary-btn.small {
    flex-shrink: 0;
    /* The .small variant of .primary-btn isn't a standard preset, so define
       the size here to keep it compact next to the email input. */
    padding: 8px 14px;
    font-size: 13px;
}

#grantMessage {
    margin: 6px 0 12px;
}
#grantMessage.error {
    color: var(--red);
}

/* ---------------------------------------------------------------------------
   Public watch page — stripped-down view for recipients without accounts
   --------------------------------------------------------------------------- */
.watch-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 16px 16px;
    max-width: 960px;
    margin: 0 auto;
}
.watch-head {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}
.watch-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px;
    margin: 0 auto;
    width: 100%;
    max-width: 480px;
    text-align: center;
}
.watch-card-wide {
    max-width: 100%;
    text-align: left;
}
.watch-card h1 {
    font-family: var(--display);
    font-size: 32px;
    letter-spacing: 0.02em;
    font-weight: 400;
    margin-bottom: 6px;
}
.watch-meta { margin-bottom: 20px; }
.watch-meta .kicker { color: var(--red); margin-bottom: 6px; }
.watch-stage {
    background: #000;
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 20px;
}
.watch-stage video {
    width: 100%;
    display: block;
    max-height: 70vh;
    background: #000;
}
.watch-metrics h2 {
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--text-dim);
}
.watch-metrics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.watch-foot {
    margin-top: 32px;
    text-align: center;
}
.watch-foot a { color: var(--red); text-decoration: none; }
.watch-foot a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Self-record: setup card and on-stage countdown
   --------------------------------------------------------------------------- */

/* Same bounded-modal treatment as #saveOverlay — escape the stage frame so
   the card uses the full viewport, with overflow-safe action buttons. */
#selfRecordSetup {
    position: fixed;
    inset: 0;
    height: 100vh;
}
@supports (height: 100dvh) {
    #selfRecordSetup { height: 100dvh; }
}
#selfRecordSetup {
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 9, 15, 0.7);
    backdrop-filter: blur(8px);
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.self-record-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 420px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
    padding: 0;
}
.self-record-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 28px 12px;
    min-height: 0;
}
.self-record-card h2 {
    text-align: center;
    margin-bottom: 4px;
    font-family: var(--display);
    font-size: 26px;
    letter-spacing: 0.03em;
    font-weight: 400;
}
.self-record-card .muted.small {
    text-align: center;
    margin-bottom: 16px;
    color: var(--text-dim);
}
.self-record-card .ctl-label {
    display: block;
    margin-top: 14px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-dim);
}
.self-record-card .save-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 28px;
    border-top: 1px solid var(--line);
    background: var(--bg-1);
}
.self-record-card .save-actions .primary-btn,
.self-record-card .save-actions .ghost-btn {
    width: 100%;
}

/* Segmented button group — used for mode/duration/countdown pickers. */
.seg-group {
    display: flex;
    gap: 4px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 4px;
}
.seg-group .seg-btn {
    flex: 1;
    padding: 9px 6px;
    background: transparent;
    border: 0;
    border-radius: calc(var(--r) - 4px);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.seg-group .seg-btn:hover {
    color: var(--text);
}
.seg-group .seg-btn.active {
    background: var(--red);
    color: white;
}

/* On-stage countdown overlay. Sits on top of the live preview while the
   user is stepping into frame and during the recording itself. */
.countdown-overlay {
    background: rgba(7, 9, 15, 0.45);
    backdrop-filter: blur(2px);
    pointer-events: none; /* don't block the live video underneath */
}
.countdown-display {
    text-align: center;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.countdown-label {
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--text-dim);
}
.countdown-number {
    font-family: var(--display);
    font-size: clamp(120px, 28vw, 220px);
    line-height: 1;
    font-weight: 400;
    color: white;
    /* Pop animation on each tick */
    animation: countdown-pop 0.6s ease-out;
}
.countdown-overlay.recording .countdown-number {
    color: var(--red);
    animation: none;
}
.countdown-hint {
    font-size: 14px;
    color: var(--text-dim);
    margin-top: 12px;
}
@keyframes countdown-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    40%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.stage-rec {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 12;
    /* Intentionally literal red — the REC indicator is a universal UX
       convention that should stay red regardless of the app's accent
       colour. Using var(--accent) here would make it orange and lose
       the "recording in progress" signal. */
    background: rgba(225, 29, 46, 0.9);
    color: white;
    font-family: var(--mono);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: var(--r);
    letter-spacing: 0.1em;
    animation: rec-blink 1s ease-in-out infinite;
}
@keyframes rec-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

/* Timeline */
.timeline {
    background: var(--bg-1);
    border-top: 1px solid var(--line);
    padding: 14px 24px;
    flex-shrink: 0;
}
.tl-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--r);
    background: var(--bg-2);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-size: 14px;
    color: var(--text);
    transition: background 0.12s;
}
.icon-btn:hover { background: var(--bg-3); }
.icon-btn.primary { background: var(--red); border-color: var(--red); color: white; }
.icon-btn.primary:hover { filter: brightness(1.1); }

#timeRead { color: var(--text-dim); margin-left: 8px; min-width: 80px; }
.speed-select {
    margin-left: auto;
    width: 140px;
    /* Reset native styling explicitly — iOS Safari's default range slider
       renders as a white pill, which clashes with the dark theme. We draw
       our own track + thumb below so it matches the timeline scrubber. */
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 22px;
    cursor: pointer;
    accent-color: var(--red);
}
.speed-select::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--bg-3);
    border: 1px solid var(--line);
}
.speed-select::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--bg-3);
    border: 1px solid var(--line);
}
.speed-select::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--red);
    border: 0;
    margin-top: -7px; /* center on the 4px track */
    cursor: pointer;
}
.speed-select::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--red);
    border: 0;
    cursor: pointer;
}
#speedRead { color: var(--text-dim); min-width: 50px; text-align: right; }

.tl-track {
    /* Make tl-track a positioning context so the trim-band can sit
       absolutely on top of the range input. */
    position: relative;
}
.tl-track input[type="range"] {
    width: 100%;
    accent-color: var(--red);
    height: 6px;
    /* Keep the range input above the trim band so the thumb stays
       interactive (the band has pointer-events:none anyway). */
    position: relative;
    z-index: 1;
}

/* Visual band over the timeline scrubber showing the active trim window.
   Positioned absolutely; left/width are set inline by analyze.js. */
.trim-band {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
    background: var(--accent-glow);
    border: 1px solid var(--accent);
    border-radius: 4px;
    pointer-events: none;
    z-index: 0;
}

/* Sidebar trim controls. */
.trim-display {
    margin: 8px 0 10px;
    padding: 8px 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.trim-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.trim-actions .ghost-btn.small {
    flex: 1 1 auto;
    min-width: 0;
}

.mono { font-family: var(--mono); }
.small { font-size: 12px; }

/* ---------------------------------------------------------------------------
   Compare — side-by-side playback view
   --------------------------------------------------------------------------- */
.compare-pickers {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.compare-pickers .ctl { flex: 1 1 0; min-width: 0; }
.compare-pickers .vs {
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.compare-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.compare-clip {
    position: relative;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.compare-clip video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    opacity: 0;
    transition: opacity 0.2s;
}
.compare-clip.loaded video { opacity: 1; }
.compare-clip canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.compare-clip .clip-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 14px;
    pointer-events: none;
}
.compare-clip.loaded .clip-empty { display: none; }
.compare-clip .clip-label {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    z-index: 2;
    background: rgba(7, 9, 15, 0.7);
    color: var(--text);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--r);
    backdrop-filter: blur(4px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Per-clip control rows — one per clip, mirrors the side-by-side layout. */
.clip-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.clip-controls {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.clip-controls .clip-scrub {
    width: 100%;
    accent-color: var(--red);
}
.clip-controls-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.clip-controls-row .icon-btn { padding: 6px 10px; }
.clip-controls-row .ghost-btn.small {
    margin-left: auto;
    /* Active state is set by JS when this clip has a sync point. */
}
.clip-controls-row .ghost-btn.small.active {
    background: var(--red);
    color: white;
    border-color: var(--red);
}
.clip-controls-row .mono.small {
    color: var(--text-dim);
    min-width: 52px;
    text-align: right;
}

/* Master playback section — drives both clips together. */
.compare-master {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px 18px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.compare-master-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.compare-master-row #seek { flex: 1 1 0; min-width: 0; }
.compare-master-row .speed-select { width: 110px; }
.compare-master-row #syncStatus {
    margin-left: auto;
    font-family: var(--mono);
}

.compare-toggles {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px 18px;
}
.compare-toggles .muted.small { margin-top: 4px; }

/* Stack everything on phones. */
@media (max-width: 700px) {
    .compare-stage,
    .clip-controls-grid {
        grid-template-columns: 1fr;
    }
    .compare-pickers {
        flex-direction: column;
        align-items: stretch;
    }
    .compare-pickers .vs {
        text-align: center;
    }
    .compare-master-row #syncStatus { margin-left: 0; flex-basis: 100%; }
    .clip-controls-row .ghost-btn.small { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   Account / settings page
   --------------------------------------------------------------------------- */
.page-narrow {
    max-width: 720px;
    margin: 0 auto;
}
.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.settings-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px;
}
.settings-card h2 {
    font-family: var(--display);
    font-size: 24px;
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-bottom: 4px;
}
.settings-card > .muted.small {
    margin-bottom: 20px;
}

/* Theme preview cards on the Account page. Each .theme-opt is a small
   miniature of the app's chrome — a bar (for the accent) and a card
   (for surfaces). The currently-selected one gets an accent border. */
.theme-opts {
    display: flex;
    gap: 16px;
    margin-top: 4px;
}
.theme-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}
.theme-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.theme-prev {
    width: 140px;
    height: 88px;
    border-radius: var(--r);
    border: 2px solid var(--line-bright);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.15s;
}
.theme-opt.sel .theme-prev { border-color: var(--accent); }
.theme-opt.sel span { color: var(--accent); }
.tp-bar { height: 10px; border-radius: 2px; width: 60%; }
.tp-card { flex: 1; border-radius: 2px; }
.tp-light { background: #f4f5f6; }
.tp-light .tp-bar { background: #e85a2e; }
.tp-light .tp-card { background: #fff; border: 1px solid #d8dadd; }
.tp-dark { background: #0b0d0f; }
.tp-dark .tp-bar { background: #ff6a3d; }
.tp-dark .tp-card { background: #131619; border: 1px solid #2a2f36; }

.settings-card .ctl-label {
    display: block;
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-dim);
}
.settings-card .ctl + .muted.small {
    margin-top: 6px;
}
.settings-card .primary-btn,
.settings-card .danger-btn {
    margin-top: 20px;
}
.settings-card.danger-card {
    border-color: var(--accent);
}
.settings-card.danger-card h2 {
    color: var(--red);
}

.settings-subhead {
    margin-top: 24px;
    margin-bottom: 8px;
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: 0.04em;
    font-weight: 400;
    color: var(--text-dim);
}

/* Newly-generated invitation card (shown after Generate clicked). */
.invite-card {
    margin-top: 14px;
    padding: 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.invite-card .muted.small { margin-bottom: 8px; }
.invite-url-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.invite-url-row .ctl {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px;
    margin-bottom: 0;
}
.invite-url-row .ghost-btn.small { flex-shrink: 0; }

/* List of past invitations. */
.invitations-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.invitation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.invitation-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}
.invitation-info strong {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.invitation-info .muted.small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status pills for used/revoked/expired invitations. */
.pill {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
}
.pill.used    { background: var(--accent-glow); color: var(--green); border: 1px solid var(--green); }
.pill.revoked { background: var(--accent-glow); color: var(--red); border: 1px solid var(--accent); }
.pill.expired { background: var(--bg-3); color: var(--text-dim); border: 1px solid var(--line); }

/* Hero CTA note (shown under the Sign in button on invite-only home). */
.hero-cta-note {
    display: block;
    margin-top: 12px;
}

.status-line {
    margin-top: 12px;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--r);
}
.status-line.success {
    color: var(--green);
    background: rgba(31, 155, 91, 0.12);
    border: 1px solid var(--green);
}
.status-line.error {
    color: var(--red);
    background: var(--accent-glow);
    border: 1px solid var(--accent);
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(7, 9, 15, 0.7);
    backdrop-filter: blur(8px);
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 24px;
}
.modal[hidden] { display: none; }
[hidden] { display: none !important; }
.modal-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

/* Section subheading inside a modal card — separates "Affiliation" and
   "Physical" groups in the athlete form without needing a divider line. */
.modal-subhead {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-mute);
    font-weight: 500;
    margin: 20px 0 4px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

/* 3-up row for age / height / weight. Stacks on narrow screens. */
.field-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.field-row label {
    margin-top: 12px; /* keep same spacing as a solo label would have */
}
@media (max-width: 480px) {
    .field-row { grid-template-columns: 1fr; gap: 0; }
}
.modal-card h2 {
    font-family: var(--display);
    font-size: 32px;
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-bottom: 16px;
}
.modal-card label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    font-weight: 600;
    margin: 12px 0 6px;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 12px 20px;
    font-size: 14px;
    z-index: 100;
    animation: toast-in 0.25s ease-out;
}
.toast.success { border-color: var(--green); color: var(--green); }
.toast.error   { border-color: var(--accent); color: var(--accent); }
@keyframes toast-in {
    from { transform: translate(-50%, 20px); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
}

/* =============================================================
   Responsive
   ============================================================= */
/* =============================================================
   Responsive — tablets and phones
   ============================================================= */

/* ---- Tablets (≤900px) ----------------------------------------------------- */
@media (max-width: 900px) {
    /* Topbar — hamburger replaces inline links */
    .topbar {
        padding: 10px 16px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        height: auto;
        min-height: 56px;
        gap: 12px;
    }
    .nav-toggle {
        display: flex;
    }
    .topbar-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--bg-1);
        border-bottom: 1px solid var(--line);
        padding: 12px 16px 16px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        gap: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
    .topbar.nav-open .topbar-menu { display: flex; }
    .topbar-links {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin-left: 0;
        width: 100%;
    }
    .topbar-links a {
        padding: 12px 14px;
        font-size: 15px;
        border-radius: var(--r);
    }
    .topbar-links a.active {
        box-shadow: inset 3px 0 0 var(--red);
    }
    .topbar-user {
        margin-left: 0;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        width: 100%;
        justify-content: space-between;
    }
    .user-name { display: inline; }

    /* Studio — stage on top, sidebar below */
    .studio {
        grid-template-columns: 1fr;
        grid-template-areas: "stage" "side";
        overflow: visible;
    }
    .studio-side {
        height: auto;
        max-height: none;
        border-right: none;
        border-top: 1px solid var(--line);
    }
    .studio-stage {
        height: 60vh;
        min-height: 360px;
    }
    @supports (height: 60dvh) {
        .studio-stage { height: 60dvh; }
    }

    /* Page padding */
    .page { padding: 24px 16px; }
    .page-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 24px;
        padding-bottom: 16px;
    }
    .page-head h1, .page h1 { font-size: 42px; }

    /* Marketing landing */
    .feature-grid { grid-template-columns: 1fr; }
    .marketing-nav { margin-bottom: 40px; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .primary-btn,
    .hero-cta .ghost-btn { width: 100%; text-align: center; }

    /* Athlete + session grids — single col earlier */
    .athlete-grid,
    .session-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

/* ---- Phones (≤640px) ------------------------------------------------------ */
@media (max-width: 640px) {
    body { font-size: 14px; }

    /* iOS Safari zooms in when an input has font-size <16px and gets focus.
       Force 16px on form fields to keep the layout stable. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
    }

    .topbar { padding: 10px 12px; }
    .brand-name { font-size: 14px; }

    /* Studio — stage takes a comfortable portion of the viewport.
       Use dvh (dynamic viewport) where available so the iOS URL bar
       collapse doesn't shift the layout; fall back to vh otherwise. */
    .studio-stage { height: 55vh; min-height: 320px; }
    @supports (height: 55dvh) {
        .studio-stage { height: 55dvh; }
    }

    /* Sidebar sections — tighter padding, safe-area on the bottom one */
    .side-section { padding: 14px 16px; }
    .side-section h2 { font-size: 22px; }
    .studio-side > .side-section:last-child {
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    /* Single-column grids on phones */
    .athlete-grid,
    .session-grid { grid-template-columns: 1fr; }

    /* Hero — smaller, more compact */
    .hero { padding: 60px 16px 40px; }
    .hero-content { padding: 0; }
    .hero-title { font-size: clamp(40px, 11vw, 56px); margin-bottom: 20px; }
    .hero-sub { font-size: 15px; margin-bottom: 28px; }
    .hero-cta { margin-bottom: 48px; }

    /* Page heading sizing */
    .page-head h1, .page h1 { font-size: 34px; }
    .page-actions { flex-wrap: wrap; }
    .page-actions .primary-btn,
    .page-actions .ghost-btn { flex: 1; min-width: 0; }

    /* Auth cards (login/register) — full-width, with safe-area side padding */
    .auth-card { padding: 28px 20px; }
    .auth-shell {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    /* Timeline — compact controls */
    .timeline { padding: 10px 14px; }
    .tl-controls { gap: 6px; flex-wrap: wrap; }
    .icon-btn { width: 34px; height: 34px; font-size: 13px; }
    #timeRead { min-width: 64px; font-size: 12px; margin-left: 4px; }
    .speed-select { width: 100px; margin-left: auto; }
    #speedRead { min-width: 48px; font-size: 12px; }

    /* Larger range slider thumbs for touch */
    .tl-track input[type="range"] { height: 8px; }
    .tl-track input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--red);
        cursor: pointer;
    }
    .tl-track input[type="range"]::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border: none;
        border-radius: 50%;
        background: var(--red);
        cursor: pointer;
    }
    /* Speed slider — keep its themed track but bump the thumb for touch */
    .speed-select::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -9px; }
    .speed-select::-moz-range-thumb { width: 20px; height: 20px; }

    /* Drawing tool grid — 3 cols stays usable on narrow screens */
    .tool-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .tool-btn { font-size: 12px; padding: 8px 4px; }

    /* Modal & save card — full-width with smaller padding */
    .modal { padding: 12px; }
    .modal-card { padding: 22px 18px; }
    .save-card { padding: 22px 18px; max-width: none; }
    .save-actions { gap: 8px; }

    /* Live metrics rows — slightly tighter */
    .live-metrics .metric-row { padding: 6px 0; font-size: 13px; }

    /* Buttons — bigger tap targets */
    .primary-btn, .ghost-btn, .danger-btn {
        padding: 11px 16px;
        min-height: 44px;
    }
    .primary-btn.full, .ghost-btn.full, .danger-btn.full { width: 100%; }

    /* Toggle row — bigger touch target */
    .toggle-row { padding: 6px 0; }
    .toggle-row input[type="checkbox"] { width: 20px; height: 20px; }

    /* iOS form-field default styling — let our theme through */
    input, select, textarea { -webkit-appearance: none; appearance: none; }
}

/* ---- Tiny phones (≤380px) ------------------------------------------------- */
@media (max-width: 380px) {
    .brand-name { display: none; }
    .tool-grid { grid-template-columns: repeat(2, 1fr); }
    .speed-select { width: 80px; }
}