/* ==========================================================================
   WOD Generator — mobile-first, dark, thumb-friendly
   ========================================================================== */

:root {
    /* Tells the browser this is a dark page, so its own scrollbars, search
       boxes and number inputs are drawn dark too. Without it the picker's
       scrollbar came out as a white strip down the side of the list. */
    color-scheme: dark;
    --bg: #0c0c0c;
    --surface: rgba(255, 255, 255, 0.045);
    --surface-hi: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.11);
    --text: #f8f8f8;
    --text-soft: rgba(248, 248, 248, 0.6);
    --text-muted: rgba(248, 248, 248, 0.38);
    --accent: #4F8EF7;
    --good: #48d18a;
    --avg: #f2c14e;
    --slow: #f08a4b;
    --over: #ef5f5f;
    --amrap: #c07bf5;
    --tabata: #ff8a80;
    --emom: #5ad1c8;
    --warm: #f2c14e;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace;
    --radius: 18px;
    --radius-sm: 12px;
    --topbar-h: 54px;      /* measured and overwritten at runtime */
}

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

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

.wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 24px 16px 8px;
}

/* --- top bar -------------------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px calc(8px) ;
    padding-top: calc(8px + env(safe-area-inset-top));
    background: rgba(12, 12, 12, 0.92);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 20;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* The artwork is 1920x360 with the wordmark in its left third; the wrapper
   crops the empty right-hand side rather than padding the bar out with air. */
/* The wordmark occupies x≈75–755 of the 1920-wide artwork, so at height H the
   content runs from 0.21H to 2.10H. The offset and width below are those
   numbers — change the height and they still frame it exactly. */
.brand {
    flex: 0 0 auto;
    width: 80px;
    height: 40px;
    overflow: hidden;
}

.brand-logo {
    height: 40px;
    width: auto;
    max-width: none;
    display: block;
    margin-left: -8px;
}

.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* Back to blauwtoffie.nl. Quiet on purpose: it is a way out, not an action. */
.home-link {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 34px;
    padding: 0 9px 0 6px;
    color: var(--text-soft);
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
}

.home-link img { width: 20px; height: 20px; display: block; }

/* Under 360px the bar runs out of width, so the link is just the chevron. */
@media (max-width: 359px) {
    .topbar-left { gap: 6px; }
    .home-link img { display: none; }
}

.topbar-actions { display: flex; align-items: center; gap: 7px; }

.top-btn {
    padding: 9px 13px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text-soft);
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.top-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Blue rolls the dice, green goes. Dark text on the green: white on #48d18a
   lands around 1.9:1, which is unreadable, while the page background gives
   about 11:1. The blue keeps white at roughly 3:1, fine for bold text. */
.top-generate {
    color: #fff;
    background: var(--accent);
    border-color: transparent;
}

.top-start {
    color: var(--bg);
    background: var(--good);
    border-color: transparent;
}

.top-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--text-soft);
}

/* Generate lives in the fixed bottom bar on a phone, and up here in landscape
   where there is no bottom bar. Exactly one is ever shown. */
.top-generate { display: none; }

/* The run and the results own the whole screen. */
body[data-screen="run"] .topbar,
body[data-screen="done"] .topbar { display: none; }

/* --- settings modal ------------------------------------------------------- */

.set-group { margin-top: 20px; }
.set-group:first-of-type { margin-top: 14px; }

.set-group h3 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.set-note { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }
.set-note.is-warn { color: var(--avg); }

.set-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.set-field { display: flex; flex-direction: column; gap: 4px; }

.set-field > span:first-child {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
}

.set-input {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 11px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.set-input input, .set-input select {
    flex: 1;
    min-width: 0;
    font-family: var(--mono);
    font-size: 15px;
    color: var(--text);
    background: none;
    border: none;
    outline: none;
}

.set-input select { font-family: var(--font); }
.set-input option { background: #141414; }
.set-input i { font-style: normal; font-size: 12px; color: var(--text-muted); }

.set-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.set-row--wrap { flex-wrap: wrap; }

.ghost-btn {
    padding: 9px 13px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-soft);
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.equip-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

.equip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.equip-item.is-on { border-color: rgba(79, 142, 247, 0.45); background: rgba(79, 142, 247, 0.07); }
.equip-item input { accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 auto; }
.equip-name { flex: 1; min-width: 0; }

.equip-count {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-muted);
}

.ghost-btn[hidden] { display: none; }
.ghost-btn.is-off { color: var(--text-muted); }
.ghost-btn.is-danger { color: var(--over); border-color: rgba(239, 95, 95, 0.35); }

/* --- cards ---------------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 14px;
}

/* --- stopwatch ------------------------------------------------------------ */

.sw-btn, .timer-btn {
    min-width: 84px;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.sw-btn.is-running, .timer-btn.is-running {
    background: rgba(79, 142, 247, 0.18);
    border-color: rgba(79, 142, 247, 0.5);
    color: var(--accent);
}

.sw-reset, .timer-reset {
    width: 44px;
    height: 44px;
    font-size: 18px;
    color: var(--text-soft);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

/* --- blocks --------------------------------------------------------------- */

.block {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.block.is-done {
    opacity: 0.42;
    background: rgba(72, 209, 138, 0.06);
    border-color: rgba(72, 209, 138, 0.25);
}

.block.is-done .block-title {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

/* Once it's done you no longer need telling how to do it — dropping these
   keeps a finished block shorter than it was, so the split line can never
   push a landscape tile past the bottom of its cell. */
.block.is-done .block-meta,
.block.is-done .block-how,
.block.is-done .block-note { display: none; }

/* Transparent on a phone — the wrapper only earns its keep in the landscape
   grid, where it anchors the bottom group. Here the children flow as before. */

/* How long that block actually took, against its own benchmark. */
.block-split {
    margin-top: 9px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--band, var(--text-muted));
}

.block-split:empty { display: none; }

.block-split[data-band="good"] { --band: var(--good); }
.block-split[data-band="avg"]  { --band: var(--avg); }
.block-split[data-band="slow"] { --band: var(--slow); }
.block-split[data-band="over"] { --band: var(--over); }

.block-split[data-band="none"] {
    --band: var(--text-muted);
    font-family: var(--font);
    font-weight: 400;
}

/* --- footer clock --------------------------------------------------------- */
/* Shares .timer so the rule, spacing and height match the AMRAP and Tabata
   rows exactly. Every card carries one, so the footers line up whatever the
   block's format — and a finished timed block swaps its timer for this. */

.timer-clock { align-items: baseline; }

.timer-clock .timer-display { color: var(--band, var(--text-muted)); }

.clock-label {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--band, var(--text-muted));
}

.timer-clock[data-band="idle"] { --band: var(--text-muted); }
.timer-clock[data-band="good"] { --band: var(--good); }
.timer-clock[data-band="avg"]  { --band: var(--avg); }
.timer-clock[data-band="slow"] { --band: var(--slow); }
.timer-clock[data-band="over"] { --band: var(--over); }

/* A card shows exactly one footer row: its timer while it's live, the clock
   once it's ticked off or if it never had a timer. */
.block.has-timer:not(.is-done) .timer-clock { display: none; }
.block.has-timer.is-done .timer { display: none; }
.block.has-timer.is-done .timer-clock { display: flex; }

.block.is-active {
    border-color: rgba(79, 142, 247, 0.42);
    background: rgba(79, 142, 247, 0.045);
}

/* Tapping a card before the clock is running gets a nudge, not silence. */
@keyframes nudge {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

.block.needs-start { animation: nudge 0.42s ease; }

@keyframes wantsPress {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 142, 247, 0); }
    50% { box-shadow: 0 0 0 5px rgba(79, 142, 247, 0.35); }
}

.sw-btn.wants-press {
    animation: wantsPress 0.6s ease 2;
    border-color: rgba(79, 142, 247, 0.6);
    color: var(--accent);
}

/* Opacity on the parent would dim the split too — keep it readable. */
.block.is-done { opacity: 1; }

.block.is-done .block-head,
.block.is-done .block-title,

.block-head {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px 9px;
}

.tag-amrap {
    color: var(--amrap);
    border-color: rgba(192, 123, 245, 0.45);
    background: rgba(192, 123, 245, 0.12);
}

.tag-tabata {
    color: var(--tabata);
    border-color: rgba(255, 138, 128, 0.45);
    background: rgba(255, 138, 128, 0.12);
    letter-spacing: 0.04em;
}

.block-note {
    font-size: 12px;
    line-height: 1.45;
    color: var(--tabata);
    margin-top: 9px;
}

.block-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.block-detail {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 3px;
}

.block-how {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-soft);
    margin-top: 8px;
}

/* Equipment + muscles. Stacked on a phone; side by side in a wide landscape
   tile, where pairing them on one line buys back a whole row of height. */
.block-muscles {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted);
    margin-top: 5px;
    padding-left: 9px;
    border-left: 2px solid rgba(79, 142, 247, 0.45);
}

/* --- per-block AMRAP timer ------------------------------------------------ */

.timer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.timer-display {
    flex: 1;
    font-family: var(--mono);
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--amrap);
}

.timer.is-done .timer-display {
    color: var(--over);
    animation: flash 0.9s ease-in-out 4;
}

@keyframes flash { 50% { opacity: 0.25; } }

/* --- Tabata timer --------------------------------------------------------- */

.timer-tabata .timer-display {
    flex: 0 0 auto;
    min-width: 78px;
}

.tabata-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.tabata-phase {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.11em;
    color: var(--phase, var(--text-soft));
}

.tabata-round {
    font-size: 11px;
    color: var(--text-muted);
}

.timer-tabata[data-phase="work"] { --phase: var(--tabata); }
.timer-tabata[data-phase="rest"] { --phase: var(--good); }
.timer-tabata[data-phase="done"] { --phase: var(--text-muted); }

.timer-tabata[data-phase="work"] .timer-display { color: var(--tabata); }
.timer-tabata[data-phase="rest"] .timer-display { color: var(--good); }
.timer-tabata[data-phase="done"] .timer-display { color: var(--over); }

/* --- lock -------------------------------------------------------------- */

.lock {
    padding: 2px 6px;
    font-size: 15px;
    line-height: 1;
    background: transparent;
    border: none;
    border-radius: 8px;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.lock[aria-pressed="true"] { opacity: 1; }

.block.is-locked {
    border-color: rgba(79, 142, 247, 0.5);
    background: rgba(79, 142, 247, 0.06);
}

/* --- results panels ------------------------------------------------------- */

.done-panel { margin-top: 18px; }

.done-panel h3 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.done-hint { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--text-muted); }

.effort-list { list-style: none; margin-top: 10px; }

.effort-list li {
    display: grid;
    gap: 10px;
    align-items: baseline;
    padding: 9px 12px;
    margin-bottom: 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--band, var(--text-muted));
    border-radius: var(--radius-sm);
}

.effort-list li { grid-template-columns: auto 1fr auto; }

.e-label { font-size: 13px; font-weight: 600; }
.e-hr { font-size: 12px; color: var(--text-muted); text-align: right; }

.e-kcal {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 52px;
    text-align: right;
}

/* --- session actions ------------------------------------------------------ */

.session-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.session-btn {
    flex: 1;
    padding: 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-soft);
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.music-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
}

.music-row[hidden] { display: none; }
.music-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.session-btn[hidden] { display: none; }
.session-btn.is-off { color: var(--text-muted); }

/* --- modals --------------------------------------------------------------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.modal[hidden] { display: none; }

.modal-card {
    width: 100%;
    max-width: 520px;
    max-height: 86vh;
    max-height: 86dvh;
    overflow-y: auto;
    padding: 20px;
    background: var(--bg-surface, #141414);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.modal-card h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }

.modal-sub {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-muted);
}

.modal-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.modal-done, .modal-secondary {
    flex: 1;
    padding: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.modal-done { color: #fff; background: var(--accent); border: none; }

.modal-secondary {
    flex: 0 0 auto;
    color: var(--text-soft);
    background: transparent;
    border: 1px solid var(--border);
}

.modal-secondary[hidden] { display: none; }

/* --- statistics ----------------------------------------------------------- */

.modal-card--wide { max-width: 640px; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 14px;
}

.stat-cell {
    padding: 10px 8px;
    text-align: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.stat-cell-num {
    display: block;
    font-family: var(--mono);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.stat-cell-cap {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.spark {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 64px;
    margin-top: 10px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.spark-bar {
    flex: 1;
    min-width: 4px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(to top, rgba(79, 142, 247, 0.45), var(--accent));
}

.freq-list { list-style: none; margin-top: 10px; }

.freq-list li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.freq-list li:last-child { border-bottom: none; }
.freq-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.freq-n { flex: 0 0 auto; font-family: var(--mono); color: var(--text-muted); }

.log-list { margin-top: 14px; }

.log-entry {
    padding: 12px 13px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.log-entry header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 7px;
}

.log-date { font-size: 13px; font-weight: 600; }

.log-total {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.log-entry ul { list-style: none; }

.log-entry li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    font-size: 12.5px;
    color: var(--text-soft);
}

.log-move { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.log-split {
    flex: 0 0 auto;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--band, var(--text-muted));
}

/* --- start countdown ------------------------------------------------------ */

.countdown {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(12, 12, 12, 0.93);
    cursor: pointer;
}

.countdown[hidden] { display: none; }

.countdown-num {
    font-family: var(--mono);
    font-size: clamp(90px, 34vmin, 260px);
    font-weight: 700;
    line-height: 1;
    color: var(--accent);
    animation: pulse 1s ease-out infinite;
}

.countdown-num.is-go { color: var(--good); }

.countdown-hint {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

@keyframes pulse {
    0%   { transform: scale(0.86); opacity: 0.55; }
    35%  { transform: scale(1);    opacity: 1; }
    100% { transform: scale(1);    opacity: 1; }
}

/* --- settings ------------------------------------------------------------- */

.settings label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.kg-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kg-field input {
    width: 110px;
    padding: 10px 12px;
    font-family: var(--mono);
    font-size: 17px;
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.kg-field span { font-size: 14px; color: var(--text-soft); }

.kg-field .recent {
    flex: 1;
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

.kg-field .recent[hidden] { display: none; }

.recent-clear {
    padding: 7px 11px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
}

.recent-clear[hidden] { display: none; }

.note, .disclaimer {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

.note { margin-top: 8px; }

.disclaimer { padding: 4px 4px 12px; }

/* --- generate bar --------------------------------------------------------- */

.genbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--bg) 62%, rgba(12, 12, 12, 0));
}

.genbar button {
    display: block;
    width: 100%;
    max-width: 608px;
    margin: 0 auto;
    padding: 17px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}

.genbar button:active { transform: scale(0.985); }

.genbar button:disabled {
    opacity: 0.32;
    cursor: not-allowed;
    background: var(--surface-hi);
    color: var(--text-soft);
}

.genbar button:disabled:active { transform: none; }

/* ==========================================================================
   Tablet landscape — the whole WOD on one screen, no scrolling
   --------------------------------------------------------------------------
   Six tiles in a 3 x 2 grid: the summary plus all five blocks. Gated on width
   AND height so a phone held sideways keeps the normal stacked layout.

   Everything here is sized in multiples of --u so the type grows with the
   screen instead of sitting at the tight-case size. --u is 10px at the 680px
   minimum this layout supports, and rises to 13px on a 13" iPad — text is
   about a quarter larger there, which is the room that display actually has.
   Because both --u and the tile heights track viewport height, the fit ratio
   holds across the range; the min() guard stops type outgrowing a narrow
   viewport, and the clamp bounds stop it running away at either extreme.
   ========================================================================== */

@media (orientation: landscape) and (min-width: 900px) and (min-height: 680px) {

    .wrap {
        --u: clamp(10px, min(1.40vh, 1.03vw), 13px);      /* older Safari */
        --u: clamp(10px, min(1.40dvh, 1.03vw), 13px);
    }

    body { padding-bottom: 0; }

    /* The plan grid and the run are both exactly one screen tall, so neither
       should ever scroll. The results are a document — with three panels and
       five movements it is routinely taller than the display, so locking it
       here simply cut the bottom off. */
    body[data-screen="plan"],
    body[data-screen="run"] { overflow: hidden; }

    body[data-screen="done"] { overflow-y: auto; }

    /* The top bar now carries the title and the controls, so the grid is just
       the six tiles: the summary and the five blocks. */
    .wrap {
        max-width: none;
        height: calc(100vh - var(--topbar-h));
        height: calc(100dvh - var(--topbar-h));
        padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4)
                 calc(var(--u) * 1.2 + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        gap: calc(var(--u) * 0.8);
    }

    .block-split { margin-top: calc(var(--u) * 0.7); font-size: calc(var(--u) * 1.3); }

    /* Generate moves into the top bar; the fixed bottom bar would eat tile
       height it can't spare. */
    .genbar { display: none; }
    .top-generate { display: inline-block; }

    /* Six cells: the warm-up card, then the five blocks. */

    #blocks { display: contents; }     /* let the blocks be grid items themselves */

    .block {
        margin: 0;
        padding: calc(var(--u) * 0.6) calc(var(--u) * 1.3);
        overflow-y: auto;              /* ...a tile scrolls on its own if it must */
        display: flex;
        flex-direction: column;
    }

    /* The whole bottom group sinks to the card floor as one unit, with the
       benchmark row reordered last inside it. That puts Good/Average/Slower on
       the same line across every card, timer or no timer, and costs no height —
       reserving timer-sized padding in the untimed cards would have cost ~50px
       on the very cards that have the least room to give. */

    /* A full-height footer on every card costs ~50px that narrow tablets simply
       don't have, so the coaching cue goes here and comes back below once the
       columns are wide enough. The phone layout carries it in full either way. */
    .block-how { display: none; }

    .disclaimer { display: none; }

    /* margin-top stays auto (set above) so this anchors to the bottom. */

    .session-actions { margin-top: calc(var(--u) * 0.7); gap: calc(var(--u) * 0.6); }
    .session-btn { padding: calc(var(--u) * 0.7); font-size: calc(var(--u) * 1.15); }

    /* The summary card has no spare row here — the toggle is in the button row
       above, and volume is set once on the phone or on a roomier screen. */
    .music-row { display: none; }
    .lock { font-size: calc(var(--u) * 1.5); }

    .tag { font-size: calc(var(--u) * 1.08); padding: calc(var(--u) * 0.34) calc(var(--u) * 0.95); }
    .block-head { margin-bottom: 0; gap: calc(var(--u) * 0.6); }
    .block-title {
        font-size: calc(var(--u) * 2.9);
        line-height: 1.18;
        margin: calc(var(--u) * 0.6) 0 calc(var(--u) * 0.5);
    }

    /* Equipment and muscles share one line here. */
    .block-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: calc(var(--u) * 0.3) var(--u);
        margin-top: 0;                 /* the title owns the gap on both sides */
    }

    .block-detail { font-size: calc(var(--u) * 1.75); margin-top: 0; }

    .block-muscles {
        font-size: calc(var(--u) * 1.55);
        margin-top: 0;
        padding-left: calc(var(--u) * 0.8);
    }

    .block-how {
        font-size: calc(var(--u) * 1.8);
        line-height: 1.4;
        margin-top: calc(var(--u) * 0.6);
    }

    /* The pills are gone, so the height they used goes into type. Swept over
       5000 cards on two kit profiles: this is the largest set with room to
       spare. A bigger title wraps long names like "Assisted Pistol Squats" to
       two lines, so the title grows least and the cue and list the most. */
    /* The base list rule sits later in the file, so this needs the extra class
       to win rather than relying on source order. */
    .block .amrap-list li { font-size: calc(var(--u) * 1.9); }

    .block-note {
        font-size: calc(var(--u) * 1.25);
        line-height: 1.3;
        margin-top: calc(var(--u) * 0.5);
    }

    /* The block-foot wrapper owns the bottom anchoring; this is just clearance. */

    .timer {
        margin-top: calc(var(--u) * 0.6);
        padding-top: calc(var(--u) * 0.6);
        gap: calc(var(--u) * 0.8);
        /* Above the natural height of a button row, so every footer variant is
           driven by this number rather than by its own contents. That is what
           keeps clock and timer rows exactly equal. */
        min-height: calc(var(--u) * 5);
    }

    .timer-display { font-size: calc(var(--u) * 2.1); }
    .timer-tabata .timer-display { min-width: calc(var(--u) * 6.2); }
    .tabata-phase { font-size: calc(var(--u) * 1.2); }
    .tabata-round { font-size: calc(var(--u) * 1.1); }

    .sw-btn, .timer-btn {
        min-width: calc(var(--u) * 7);
        padding: calc(var(--u) * 0.8) calc(var(--u) * 1.2);
        font-size: calc(var(--u) * 1.4);
    }

    .sw-reset, .timer-reset {
        width: calc(var(--u) * 3.6);
        height: calc(var(--u) * 3.6);
        font-size: calc(var(--u) * 1.6);
    }
}

/* ==========================================================================
   Wide tablet landscape — the coaching cue comes back
   --------------------------------------------------------------------------
   Whether the cue fits is decided by column width, not height: wider columns
   wrap it into fewer lines. At 1024 wide it leaves zero headroom, at 1150 still
   zero, but from ~1170 there is room to spare even at the shortest viewport
   this layout supports. An 11" iPad in Safari lands at 1180x701.
   ========================================================================== */

@media (orientation: landscape) and (min-width: 1170px) and (min-height: 680px) {
    .block-how { display: block; }
}

/* ==========================================================================
   Big tablet landscape — spend the spare height on legibility
   --------------------------------------------------------------------------
   A 13" iPad has roughly 150px per tile that the compact treatment never uses.
   This tier grows the things you read from across the room — titles, benchmark
   numbers, timers — well past the ratios that a small iPad can afford, and
   opens up the spacing to match. Gated above 11" landscape so smaller tablets
   keep the tighter layout that has been verified to fit them.
   ========================================================================== */

@media (orientation: landscape) and (min-width: 1200px) and (min-height: 850px) {

    .wrap { gap: calc(var(--u) * 0.9); }

    .head h1 { font-size: calc(var(--u) * 2.2); }
    .sub { font-size: calc(var(--u) * 1.15); }

    /* Trimmed to fund the air around the exercise name, which is what you read
       from across the room; card padding is not. */
    .block { padding: calc(var(--u) * 0.62) calc(var(--u) * 1.45); }

    /* Numbers first: these never wrap, so height cost is exactly predictable. */
    .session-actions { margin-top: calc(var(--u) * 0.8); gap: calc(var(--u) * 0.7); }
    .session-btn { padding: calc(var(--u) * 0.85); font-size: calc(var(--u) * 1.3); }
    .lock { font-size: calc(var(--u) * 1.7); }

    /* Here there is room to keep the cue, so it comes back. The footer is
       trimmed a little to pay for it rather than the type shrinking. */
    .block-how { display: block; }

    .timer {
        margin-top: calc(var(--u) * 0.62);
        padding-top: calc(var(--u) * 0.62);
        min-height: calc(var(--u) * 4.9);   /* dominates every footer variant */
    }
    .clock-label { font-size: calc(var(--u) * 1.15); }
    .timer-display { font-size: calc(var(--u) * 2.5); }
    .timer-tabata .timer-display { min-width: calc(var(--u) * 7.4); }
    .tabata-phase { font-size: calc(var(--u) * 1.35); }
    .tabata-round { font-size: calc(var(--u) * 1.18); }
    .block-split { font-size: calc(var(--u) * 1.45); margin-top: calc(var(--u) * 0.8); }

    .sw-btn, .timer-btn {
        min-width: calc(var(--u) * 7.8);
        padding: calc(var(--u) * 0.72) calc(var(--u) * 1.3);
        font-size: calc(var(--u) * 1.5);
    }

    .sw-reset, .timer-reset {
        width: calc(var(--u) * 4);
        height: calc(var(--u) * 4);
        font-size: calc(var(--u) * 1.8);
    }

    /* Prose only nudged — every extra point risks another wrapped line, and a
       wrapped line costs far more height than the readability it buys. */
    .tag { font-size: calc(var(--u) * 1.18); padding: calc(var(--u) * 0.4) var(--u); }
    /* The exercise name is what you look for first, so it gets the size and the
       air. The surrounding gaps fold into its own margins rather than adding to
       them, which keeps the extra height down to a few pixels. */
    .block-head { margin-bottom: 0; }
    .block-title {
        font-size: calc(var(--u) * 3.05);
        line-height: 1.15;
        margin: calc(var(--u) * 0.95) 0 calc(var(--u) * 0.85);
    }
    .block-meta { margin-top: 0; }
    .block-detail { font-size: calc(var(--u) * 1.72); }
    .block-muscles { font-size: calc(var(--u) * 1.62); }
    .block-how { font-size: calc(var(--u) * 1.9); margin-top: calc(var(--u) * 0.5); }
    .block-note { font-size: calc(var(--u) * 1.35); margin-top: calc(var(--u) * 0.45); }
    .block .amrap-list li { font-size: calc(var(--u) * 2.0); }

    .genbar button { padding: calc(var(--u) * 1.5); font-size: calc(var(--u) * 1.65); }
    .kg-field input { font-size: calc(var(--u) * 1.65); padding: calc(var(--u) * 0.85) var(--u); }
    .settings label { font-size: calc(var(--u) * 1.18); }
}

/* ==========================================================================
   The run — one movement at a time
   --------------------------------------------------------------------------
   Two moods on purpose. The plan screen is calm and dense, read up close
   before you start. This one is loud and sized to be read from across the
   room, mid-set, without your glasses.
   ========================================================================== */

.screen[hidden] { display: none !important; }

/* The phone's fixed Generate bar reserves room at the foot of the body; neither
   of these screens has one, so the reservation would just add dead scroll. */
body[data-screen="run"] { overflow: hidden; padding-bottom: 0; }
body[data-screen="done"] { padding-bottom: 0; }
body[data-screen="run"] .genbar,
body[data-screen="done"] .genbar { display: none; }

.run { padding: 0; max-width: none; }

.run-view {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding: calc(14px + env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom));
    transition: background 0.35s ease;
    background:
        radial-gradient(120% 80% at 50% 0%, var(--glow, rgba(79, 142, 247, 0.22)), transparent 70%),
        var(--bg);
}

.run-view[data-kind="work"] { --glow: rgba(79, 142, 247, 0.30); --hue: var(--accent); }
.run-view[data-kind="rest"] { --glow: rgba(72, 209, 138, 0.22); --hue: var(--good); }
.run-view[data-kind="prep"] { --glow: rgba(192, 123, 245, 0.24); --hue: var(--amrap); }

/* top: where you are */

.segments { display: flex; gap: 3px; }

.seg {
    height: 5px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.12);
    transition: background 0.3s ease;
}

.seg.is-done { background: rgba(255, 255, 255, 0.42); }
.seg.is-now { background: var(--hue, var(--accent)); }

.segbar {
    height: 2px;
    margin-top: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    overflow: hidden;
}

.segbar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--hue, var(--accent));
    transition: width 0.25s linear;
}

.run-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 9px;
    font-family: var(--mono);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* middle: the one thing that matters */

.run-mid {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    min-height: 0;
}

.phase {
    font-size: clamp(13px, 3.4vw, 18px);
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hue, var(--accent));
}

.clock {
    font-family: var(--mono);
    font-size: clamp(78px, 22vw, 190px);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--band, var(--text));
}

.clock.is-final { color: var(--hue, var(--accent)); animation: pop 1s ease-in-out infinite; }

@keyframes pop {
    0%, 100% { transform: scale(1); }
    18% { transform: scale(1.07); }
}

.move {
    font-size: clamp(24px, 6.4vw, 54px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin-top: 6px;
    text-wrap: balance;
}

/* On rest and prep the headline is the instruction, not a movement, so it
   takes the phase colour — you can tell at a glance whether you're working. */
.run-view[data-kind="rest"] .move,
.run-view[data-kind="prep"] .move {
    color: var(--hue);
    letter-spacing: 0.02em;
}

.cue {
    max-width: 30ch;
    margin-top: 10px;
    font-size: clamp(13px, 3.2vw, 18px);
    line-height: 1.4;
    color: var(--text-soft);
}

.setup-list { list-style: none; margin-top: 14px; }

.setup-list li {
    display: inline-block;
    margin: 4px;
    padding: 8px 14px;
    font-size: clamp(13px, 3.2vw, 17px);
    font-weight: 600;
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: 999px;
}

/* An explicit display beats the hidden attribute, so say it outright. */

.run-view.is-paused .clock { opacity: 0.4; }

/* bottom: controls, deliberately small so they don't compete */

.next {
    text-align: center;
    font-size: clamp(12px, 3vw, 15px);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.controls { display: flex; gap: 8px; margin-top: 10px; }

.ctrl {
    width: 62px;
    padding: 15px 0;
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-soft);
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.ctrl--wide { flex: 1; font-size: 16px; letter-spacing: 0.02em; }

/* On a self-paced block this button is the only way forward, so it stops
   looking like a secondary control. */
.ctrl--wide.is-go {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
}

.quit {
    display: block;
    width: 100%;
    margin-top: 9px;
    padding: 9px;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
}

/* ==========================================================================
   Results
   ========================================================================== */

/* Deliberately not .wrap — that becomes the three-column grid in landscape.
   Centring would be prettier when the content is short, but it puts the top
   out of reach once the panels make it taller than the screen. */
.done {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100dvh;
    max-width: 620px;
    margin: 0 auto;
    padding: 24px 18px calc(28px + env(safe-area-inset-bottom));
}

.eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

.done h1 { font-size: clamp(30px, 8vw, 46px); font-weight: 800; letter-spacing: -0.03em; margin-top: 4px; }

.stats { display: flex; gap: 10px; margin-top: 20px; }

.stat {
    flex: 1;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.stat-num {
    display: block;
    font-family: var(--mono);
    font-size: clamp(26px, 7vw, 38px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.stats--big .stat-num { font-size: clamp(32px, 9vw, 44px); }

.stat-cap {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.done-list { list-style: none; margin-top: 18px; }

.done-list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.done-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.done-move { font-size: 14px; font-weight: 600; }

.done-split {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.primary {
    display: block;
    width: 100%;
    margin-top: 22px;
    padding: 17px;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* --- AMRAP round list ------------------------------------------------------
   An AMRAP is its list of movements, so the card gives them the room the
   single-movement detail and how-to paragraph would otherwise take. The reps
   sit in a fixed-width column so the movement names line up down the card. */
.amrap-list {
    list-style: none;
    margin: 0.55em 0 0.5em;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
}

.amrap-list li {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    font-size: 1.02em;
    line-height: 1.25;
}

.amrap-list b {
    flex: 0 0 auto;
    min-width: 2.1em;
    text-align: right;
    font-family: var(--mono);
    font-weight: 700;
    color: var(--accent);
}

.amrap-list span {
    color: var(--text);
}

/* --- the run screen with a movement list -----------------------------------
   An AMRAP triplet shows its rounds as well as the clock, the movement name,
   the note and the three targets. That is two more rows than any other step,
   and at 1180x701 it pushed the targets down into the controls. The clock and
   the note give the height back, since the list is the instruction here and the
   clock is just a countdown you glance at. */
.run-view.has-list .clock {
    font-size: clamp(56px, 14vw, 120px);
}

.run-view.has-list .cue {
    max-width: 46ch;
    margin-top: 6px;
    font-size: clamp(12px, 2.6vw, 15px);
}

.run-view.has-list .move {
    font-size: clamp(26px, 6vw, 46px);
}

.run-view.has-list .setup-list {
    margin-top: 8px;
}

.run-view.has-list .setup-list li {
    margin: 3px;
    padding: 6px 12px;
}

/* --- what you can do -------------------------------------------------------
   Fifteen switches in one list is a wall. Grouped under where the demand comes
   from — the bell, the bar, the floor, the dumbbells — it reads as four short
   lists instead. */
.ability-group + .ability-group {
    margin-top: 14px;
}

.ability-group h4 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- first-visit setup ---------------------------------------------------- */

.setup-step {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.setup-body { margin-top: 12px; }
#setupNote { margin-top: 12px; }

/* --- yes / no questions --------------------------------------------------- */

.ask-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ability-group .ask-row:last-child { border-bottom: none; }
#abilityList { margin-top: 12px; }
.ask-q { font-size: 14px; line-height: 1.35; }

.ask-yn {
    flex: 0 0 auto;
    display: flex;
    padding: 3px;
    gap: 3px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.ask-yn button {
    min-width: 50px;
    padding: 7px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
}

.ask-yn button[aria-pressed="true"] { color: var(--text); background: var(--surface-hi); }
.ask-yn button[data-yes="1"][aria-pressed="true"] { color: #fff; background: var(--accent); }

/* --- which rung of the pattern --------------------------------------------
   The heavy versions of a movement still exist even when they are switched
   off, so the card names the next one up rather than pretending this is all
   there is. Sized well under the how-to line: it is a footnote, not a cue. */
.block-level {
    margin: 0.3em 0 0;
    font-size: 0.82em;
    line-height: 1.35;
    color: var(--text-muted);
}

.block-level b {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.92em;
    color: var(--text-soft);
}

.block-level[data-level="1"] b { color: var(--good); }
.block-level[data-level="3"] b { color: var(--over, var(--slow)); }

.block-level i {
    font-style: normal;
    opacity: 0.75;
}

/* --- the warm-up card -------------------------------------------------------
   Built like the other cards so it reads as part of the session. It has no
   lock or menu, but keeps an invisible lock so its title sits on the same
   line as the titles next to it. */

.tag-warm {
    color: var(--warm);
    border-color: rgba(242, 193, 78, 0.45);
    background: rgba(242, 193, 78, 0.12);
}

.block-warm { cursor: default; }
.block-warm .block-actions { visibility: hidden; }
.block-warm .block-note { color: var(--text-soft); }

/* --- EMOM tag -------------------------------------------------------------- */
.tag-emom {
    color: var(--emom);
    border-color: rgba(90, 209, 200, 0.45);
    background: rgba(90, 209, 200, 0.12);
}

/* --- card actions: the ⋯ button and its menu --------------------------------
   The ⋯ sits beside the lock, and the pair is what gets pushed to the right of
   the card head. The menu is one element placed next to whichever card opened
   it, so it never fights a card for room. */
.block-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 2px;
}

.more {
    padding: 0 7px 4px;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--text-soft);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.more:hover, .more:focus-visible { background: var(--surface-hi); color: var(--text); }

.card-menu {
    position: fixed;
    z-index: 45;
    min-width: 210px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface, #141414);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.card-menu[hidden] { display: none; }

.card-menu button {
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    color: var(--text);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.card-menu button:hover, .card-menu button:focus-visible { background: var(--surface-hi); }

/* --- the movement picker --------------------------------------------------- */
.pick-card { display: flex; flex-direction: column; }

.pick-formats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.pick-formats button {
    flex: 1 1 auto;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-soft);
    background: var(--surface-hi);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
}

.pick-formats button.is-on { color: #fff; background: var(--accent); border-color: transparent; }
.pick-formats button:disabled { opacity: 0.35; cursor: not-allowed; }

.pick-format-note { margin-top: 8px; min-height: 1.2em; }

.pick-search {
    width: 100%;
    margin-top: 12px;
    padding: 11px 13px;
    font-family: inherit;
    font-size: 16px;            /* 16px or iOS zooms the page when it is tapped */
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.pick-list {
    margin-top: 10px;
    max-height: 52vh;
    max-height: 52dvh;
    overflow-y: auto;
}

.pick-group + .pick-group { margin-top: 12px; }

.pick-group h4 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pick-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 13px;
    margin-bottom: 5px;
    font-family: inherit;
    text-align: left;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.pick-item:hover, .pick-item:focus-visible { background: var(--surface-hi); }
.pick-item.is-current { border-color: var(--accent); }
.pick-item:disabled { opacity: 0.4; cursor: not-allowed; }

.pick-name { font-size: 15px; font-weight: 600; }
.pick-name i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent); margin-left: 6px; }
.pick-detail { font-size: 13px; color: var(--text-muted); }

/* --- scrollbars -------------------------------------------------------------
   Thin and quiet, a pale thumb on no track, so a scrolling list looks like part
   of the card rather than a strip of browser chrome. The standard properties
   cover Chrome and Firefox; the -webkit- ones cover Safari. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border: 3px solid transparent;          /* inset the thumb from the edge */
    border-radius: 999px;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.34); }

/* A little room so the thumb never sits on the movement cards. */
.pick-list { padding-right: 6px; }