/* PMP Reps — the redesigned learn surface.
   Would land in static/html-theme/marketing/learn.css (replacing the .itto-* block).
   Tokens only: design-system/tokens.css + reps-tokens.css. No app.css dependency. */

.reps{max-width:1440px;margin:0 auto;padding:var(--space-6) var(--space-6) var(--space-16);font-family:var(--font-body);color:var(--color-text-body)}
.reps *,.reps *::before,.reps *::after{box-sizing:border-box}

/* ── masthead ───────────────────────────────────────────────────────── */
.reps-mast{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}
.reps-mast-l{min-width:0}
.reps-back{display:inline-block;font-size:var(--fs-body-sm);color:var(--color-text-muted);text-decoration:none;margin-bottom:var(--space-1)}
.reps-back:hover{color:var(--color-text-heading)}
.reps-title{font-family:var(--font-sans);font-size:var(--fs-h1);font-weight:var(--fw-h1);line-height:var(--lh-h1);color:var(--color-text-heading);margin:0;letter-spacing:-0.02em}
.reps-title span{color:var(--color-primary)}
.reps-deck-tag{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;margin-left:var(--space-2);vertical-align:middle;font-family:var(--font-mono);font-size:var(--fs-badge);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-primary);background:var(--color-primary-subtle);border-radius:var(--radius-full);padding:4px 10px}
.reps-sub{font-size:var(--fs-body-sm);color:var(--color-text-muted);margin:var(--space-1) 0 0;max-width:52ch}

/* ── journey bar ────────────────────────────────────────────────────── */
.reps-journey{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-xs);margin-bottom:var(--space-5)}
.reps-j-item{display:flex;align-items:center;gap:var(--space-2);min-height:32px;flex:0 0 auto}
.reps-j-sep{width:1px;align-self:stretch;background:var(--color-border);margin:0 var(--space-1)}
.reps-j-spacer{flex:1}

.reps-streak{display:flex;align-items:center;gap:7px;background:var(--reps-streak-surface);border-radius:var(--radius-full);padding:5px 12px 5px 9px}
.reps-streak svg{width:16px;height:16px;color:var(--reps-streak);flex:0 0 auto}
.reps-streak-n{font-family:var(--font-sans);font-weight:700;font-size:15px;color:var(--reps-streak);font-variant-numeric:tabular-nums;line-height:1}
.reps-streak-l{font-size:var(--fs-badge);color:var(--reps-streak);opacity:.85;text-transform:uppercase;letter-spacing:.04em}
.reps-freeze{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-badge);font-weight:600;color:var(--reps-streak-frozen)}
.reps-freeze svg{width:12px;height:12px}

.reps-ring{position:relative;width:40px;height:40px;flex:0 0 auto}
.reps-ring svg{transform:rotate(-90deg);display:block}
.reps-ring-track{fill:none;stroke:var(--reps-ring-track);stroke-width:3.5}
.reps-ring-fill{fill:none;stroke:var(--reps-ring-fill);stroke-width:3.5;stroke-linecap:round;transition:stroke-dasharray var(--motion-slow) var(--ease-out)}
.reps-ring.is-done .reps-ring-fill{stroke:var(--reps-ring-done)}
.reps-ring-n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:11px;font-weight:700;color:var(--color-text-heading);font-variant-numeric:tabular-nums}
.reps-ring.is-done .reps-ring-n{color:var(--reps-ring-done)}
.reps-j-label{font-size:var(--fs-badge);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted);line-height:1.3;white-space:nowrap}
.reps-j-value{font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--color-text-heading);line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}

.reps-xp{min-width:132px}
.reps-xp-track{height:5px;border-radius:var(--radius-full);background:var(--color-border);overflow:hidden;margin-top:4px}
.reps-xp-fill{height:100%;background:var(--reps-xp);border-radius:inherit;transition:width var(--motion-slow) var(--ease-out)}

.reps-boxes{display:flex;align-items:flex-end;gap:4px;height:34px}
.reps-bx{width:15px;display:flex;flex-direction:column;align-items:center;gap:3px}
.reps-bx-track{width:100%;height:26px;background:var(--color-surface-raised);border-radius:var(--radius-sm);display:flex;align-items:flex-end;overflow:hidden}
.reps-bx-fill{width:100%;border-radius:var(--radius-sm);transition:height var(--motion-slow) var(--ease-out)}
.reps-bx-1 .reps-bx-fill{background:var(--reps-box-1)}.reps-bx-2 .reps-bx-fill{background:var(--reps-box-2)}.reps-bx-3 .reps-bx-fill{background:var(--reps-box-3)}.reps-bx-4 .reps-bx-fill{background:var(--reps-box-4)}.reps-bx-5 .reps-bx-fill{background:var(--reps-box-5)}
.reps-bx-l{font-size:9px;color:var(--color-text-muted);line-height:1}
.reps-bx-5 .reps-bx-l{color:var(--reps-mastered)}
.reps-bx.is-bump .reps-bx-fill{animation:repsBump var(--reps-burst) var(--reps-ease-spring)}
@keyframes repsBump{0%{transform:scaleY(.82)}100%{transform:scaleY(1)}}

.reps-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-card);color:var(--color-text-muted);cursor:pointer;padding:0;transition:color var(--motion-fast),border-color var(--motion-fast)}
.reps-iconbtn:hover{color:var(--color-text-heading);border-color:var(--color-border-strong)}
.reps-iconbtn svg{width:17px;height:17px}
.reps-iconbtn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.reps-iconbtn.is-on{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-primary-subtle)}
.reps-sound-nudge{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:var(--fs-body-sm);font-weight:600;color:var(--color-primary);background:var(--color-primary-subtle);border:1px solid transparent;border-radius:var(--radius-full);padding:6px 12px;cursor:pointer}
.reps-sound-nudge svg{width:14px;height:14px}
.reps-sound-nudge:hover{border-color:var(--color-primary)}
/* While the inviting nudge is on screen the plain mute icon would be a duplicate. */
.reps-journey.has-nudge .reps-iconbtn-sound{display:none}

/* ── stage ──────────────────────────────────────────────────────────── */
.reps-stage{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:var(--space-5);align-items:start}

/* ── arena ──────────────────────────────────────────────────────────── */
.reps-arena{min-width:0}
.reps-card{background:var(--color-surface-card);border:1px solid var(--color-border-strong);border-radius:var(--radius-2xl);box-shadow:var(--shadow-md);padding:var(--space-6)}
.reps-card.is-in{animation:repsIn var(--reps-card-in) var(--ease-out)}
.reps-card.is-out-got{animation:repsOutGot var(--reps-card-out) var(--ease-in) forwards}
.reps-card.is-out-almost{animation:repsOutAlmost var(--reps-card-out) var(--ease-in) forwards}
.reps-card.is-out-missed{animation:repsOutMissed var(--reps-card-out) var(--ease-in) forwards}
@keyframes repsIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@keyframes repsOutGot{to{opacity:0;transform:translate(26px,-22px) scale(.97)}}
@keyframes repsOutAlmost{to{opacity:0;transform:scale(.97)}}
@keyframes repsOutMissed{to{opacity:0;transform:translateY(24px) scale(.97)}}

.reps-card-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-5)}
.reps-crumb{font-size:var(--fs-badge);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);white-space:nowrap}
.reps-crumb b{color:var(--color-text-body);font-weight:600}
.reps-boxpill{font-size:var(--fs-badge);font-weight:700;color:var(--color-primary);background:var(--color-primary-subtle);border-radius:var(--radius-full);padding:3px 10px;white-space:nowrap}

.reps-ask{font-size:var(--fs-body-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-3);text-align:center}
.reps-prompt{font-family:var(--font-sans);font-size:clamp(22px,2.6vw,32px);font-weight:600;line-height:1.25;color:var(--color-text-heading);text-align:center;text-wrap:balance;margin:0 auto;max-width:24ch;letter-spacing:-0.02em}
.reps-cue{font-family:var(--font-sans);font-size:clamp(17px,2vw,22px);font-weight:500;line-height:1.4;color:var(--color-text-heading);text-align:center;text-wrap:pretty;margin:0 auto;max-width:40ch}
.reps-front{padding:var(--space-6) 0 var(--space-7)}
.reps-reveal{display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}
.reps-kbd{font-family:var(--font-mono);font-size:11px;color:var(--color-text-placeholder)}
.reps-kbd kbd{font-family:inherit;background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:1px 5px;color:var(--color-text-muted)}

/* answer face */
.reps-back-face{border-top:1px solid var(--color-border);margin-top:var(--space-2);padding-top:var(--space-5);animation:repsFlip var(--reps-flip) var(--ease-out)}
@keyframes repsFlip{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.reps-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:var(--space-2)}
.reps-node{border-radius:var(--radius-lg);padding:var(--space-3);border:1px solid}
.reps-node-h{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:var(--fs-badge);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.reps-node-h svg{width:14px;height:14px;flex:0 0 auto}
.reps-node-b{font-size:var(--fs-body-sm);line-height:1.5;color:var(--color-text-body)}
.reps-n-in{background:var(--reps-input-surface);border-color:var(--reps-input-border)}.reps-n-in .reps-node-h{color:var(--reps-input-text)}
.reps-n-tt{background:var(--reps-tool-surface);border-color:var(--reps-tool-border)}.reps-n-tt .reps-node-h{color:var(--reps-tool-text)}
.reps-n-out{background:var(--reps-output-surface);border-color:var(--reps-output-border)}.reps-n-out .reps-node-h{color:var(--reps-output-text)}
.reps-arrow{display:flex;align-items:center;color:var(--color-text-placeholder)}
.reps-arrow svg{width:16px;height:16px}
.reps-answer{text-align:center;padding:var(--space-3) 0}
.reps-answer-name{font-family:var(--font-sans);font-size:clamp(20px,2.4vw,28px);font-weight:600;color:var(--color-text-heading);letter-spacing:-0.02em;text-wrap:balance}
.reps-answer-sub{font-size:var(--fs-body-sm);color:var(--color-text-muted);margin-top:6px}

.reps-suggest{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4);padding:var(--space-2) var(--space-3);background:var(--color-surface-raised);border:1px dashed var(--color-border-strong);border-radius:var(--radius-lg);font-size:var(--fs-body-sm)}
.reps-suggest-l{font-size:var(--fs-badge);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-primary);flex:0 0 auto;white-space:nowrap}
.reps-suggest-w{flex:1;min-width:0;color:var(--color-text-body)}
.reps-suggest a{color:var(--color-primary);font-weight:600;text-decoration:none;white-space:nowrap}
.reps-suggest a:hover{text-decoration:underline}

/* grade */
.reps-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);margin-top:var(--space-5)}
.reps-gbtn{position:relative;overflow:hidden;min-height:var(--tap-target-min);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:var(--radius-lg);border:1px solid;cursor:pointer;font-family:var(--font-body);font-size:15px;font-weight:600;transition:transform var(--motion-fast) var(--ease-out),background var(--motion-fast)}
.reps-gbtn:active{transform:scale(.98)}
.reps-gbtn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.reps-gbtn small{font-family:var(--font-mono);white-space:nowrap;font-size:10px;font-weight:500;opacity:.75;letter-spacing:.04em}
.reps-g-missed{background:var(--reps-missed-surface);border-color:var(--reps-missed-border);color:var(--reps-missed-text)}
.reps-g-almost{background:var(--reps-almost-surface);border-color:var(--reps-almost-border);color:var(--reps-almost-text)}
.reps-g-got{background:var(--reps-got-surface);border-color:var(--reps-got-border);color:var(--reps-got-text)}
.reps-g-missed:hover{background:color-mix(in srgb,var(--reps-missed-strong) 18%,var(--reps-missed-surface))}
.reps-g-almost:hover{background:color-mix(in srgb,var(--reps-almost-strong) 18%,var(--reps-almost-surface))}
.reps-g-got:hover{background:color-mix(in srgb,var(--reps-got-strong) 18%,var(--reps-got-surface))}
.reps-gbtn::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(1);pointer-events:none}
.reps-gbtn:active::after{animation:repsRipple var(--reps-burst) var(--ease-out)}
.reps-g-missed:active::after{background:var(--reps-missed-strong)}
.reps-g-almost:active::after{background:var(--reps-almost-strong)}
.reps-g-got:active::after{background:var(--reps-got-strong)}
@keyframes repsRipple{0%{opacity:.35;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(28)}}

/* idle / done panels */
.reps-panel{background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-8) var(--space-6);text-align:center;box-shadow:var(--shadow-xs)}
.reps-panel h2{font-family:var(--font-sans);font-size:var(--fs-h2);font-weight:var(--fw-h2);color:var(--color-text-heading);margin:0 0 var(--space-2)}
.reps-panel p{font-size:var(--fs-body);color:var(--color-text-muted);margin:0 auto var(--space-5);max-width:44ch}
.reps-due{display:inline-flex;align-items:baseline;gap:8px;margin-bottom:var(--space-3)}
.reps-due-n{font-family:var(--font-sans);font-size:44px;font-weight:700;color:var(--color-primary);line-height:1;letter-spacing:-0.03em;font-variant-numeric:tabular-nums}
.reps-due-l{font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.reps-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;min-height:44px;padding:0 var(--space-6);border-radius:var(--radius-lg);border:1px solid transparent;font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;transition:background var(--motion-fast)}
.reps-btn-primary{background:var(--color-primary);color:#fff}
.reps-btn-primary:hover{background:var(--color-primary-hover)}
.reps-btn-ghost{background:transparent;color:var(--color-text-body);border-color:var(--color-border-strong)}
.reps-btn-ghost:hover{background:var(--color-surface-raised);color:var(--color-text-heading)}
.reps-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.reps-btn svg{width:16px;height:16px}
.reps-panel-actions{display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap}

/* speed round entry — a quiet secondary door, never the default */
.reps-speed-door{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-5);border-top:1px solid var(--color-border);text-align:left}
.reps-speed-door-t{flex:1;min-width:0}
.reps-speed-door-t strong{display:block;font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--color-text-heading)}
.reps-speed-door-t span{font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.reps-speed-badge{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);border:1px solid var(--color-border-strong);border-radius:var(--radius-full);padding:3px 8px}

/* session summary */
.reps-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);margin:0 0 var(--space-5)}
.reps-sum{background:var(--color-surface-raised);border-radius:var(--radius-lg);padding:var(--space-3)}
.reps-sum-n{font-family:var(--font-sans);font-size:26px;font-weight:700;color:var(--color-text-heading);line-height:1;font-variant-numeric:tabular-nums}
.reps-sum-l{font-size:var(--fs-badge);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;margin-top:5px}
.reps-sum.is-got .reps-sum-n{color:var(--reps-got-text)}
.reps-sum.is-almost .reps-sum-n{color:var(--reps-almost-text)}
.reps-sum.is-missed .reps-sum-n{color:var(--reps-missed-text)}
.reps-convert{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--color-border);font-size:var(--fs-body-sm);color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:wrap}
.reps-convert a{color:var(--color-primary);font-weight:600;text-decoration:none}
.reps-convert a:hover{text-decoration:underline}
.reps-synced{color:var(--reps-mastered);font-weight:600}

/* §16.13 — persistent sync chip (journey) + idle-screen streak nudge */
.reps-sync{font-size:var(--fs-body-sm);font-weight:600;text-decoration:none;white-space:nowrap;padding:5px 11px;border-radius:var(--radius-full);align-self:center}
.reps-sync:not(.is-synced){color:var(--color-primary);background:var(--color-primary-subtle)}
.reps-sync:not(.is-synced):hover{text-decoration:underline}
.reps-sync.is-synced{color:var(--reps-mastered);background:var(--reps-got-surface);cursor:default}
.reps-idle-nudge{margin-top:var(--space-3);font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.reps-idle-nudge a{color:var(--color-primary);font-weight:600;text-decoration:none}
.reps-idle-nudge a:hover{text-decoration:underline}
@media (max-width:700px){.reps-sync{display:none}}   /* the session-complete nudge covers mobile */

/* ── coach ──────────────────────────────────────────────────────────── */
.reps-coach{position:sticky;top:var(--space-4);background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:var(--radius-2xl);padding:var(--space-5);box-shadow:var(--shadow-xs)}
.reps-coach-h{display:flex;align-items:center;gap:8px;padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border);margin-bottom:var(--space-4)}
.reps-coach-h svg{width:16px;height:16px;color:var(--color-primary)}
.reps-coach-h span{font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--color-text-heading)}
.reps-coach-h em{margin-left:auto;font-style:normal;white-space:nowrap;font-size:var(--fs-badge);color:var(--color-text-placeholder);text-transform:uppercase;letter-spacing:.04em}
.reps-coach-teaser{text-align:center;padding:var(--space-6) var(--space-2)}
.reps-coach-teaser svg{width:30px;height:30px;color:var(--color-border-strong);margin-bottom:var(--space-3)}
.reps-coach-teaser p{font-size:var(--fs-body-sm);color:var(--color-text-muted);margin:0;line-height:1.6}
.reps-blk{margin-bottom:var(--space-4)}
.reps-blk-l{font-size:var(--fs-badge);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-placeholder);margin-bottom:5px}
.reps-blk-what{font-family:var(--font-sans);font-size:16px;font-weight:500;line-height:1.45;color:var(--color-text-heading);text-wrap:pretty}
.reps-blk p{font-size:var(--fs-body-sm);line-height:1.6;color:var(--color-text-body);margin:0;text-wrap:pretty}
.reps-hook{background:var(--color-primary-subtle);border-radius:var(--radius-lg);padding:var(--space-3)}
.reps-hook .reps-blk-l{color:var(--color-primary)}
.reps-hook p{color:var(--color-text-heading)}
.reps-chips{display:flex;flex-wrap:wrap;gap:6px}
.reps-chip{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--color-primary);background:var(--color-surface-raised);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:4px 10px;cursor:pointer}
.reps-chip:hover{background:var(--reps-term-hover);border-color:var(--color-primary)}
.reps-chip:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.reps-coach-link{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-body-sm);font-weight:600;color:var(--color-primary);text-decoration:none;margin-top:var(--space-1)}
.reps-coach-link:hover{text-decoration:underline}
.reps-sparse-note{font-size:var(--fs-badge);color:var(--color-text-placeholder);font-style:italic;margin-top:var(--space-3)}

/* inline glossary term */
.reps-term{border-bottom:1.5px dotted var(--reps-term-underline);cursor:help;background:none;border-top:0;border-left:0;border-right:0;padding:0;font:inherit;color:inherit}
.reps-term:hover{background:var(--reps-term-hover)}
.reps-term:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:2px}
.reps-pop{position:fixed;z-index:var(--z-tooltip);transform:translateX(-50%);max-width:290px;background:var(--color-surface-card);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-3)}
.reps-pop-t{font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--color-text-heading)}
.reps-pop-x{font-size:var(--fs-badge);color:var(--color-primary);font-weight:600;margin:2px 0 6px}
.reps-pop-d{font-size:var(--fs-body-sm);line-height:1.55;color:var(--color-text-body);margin:0}

/* ── flash toast ────────────────────────────────────────────────────── */
.reps-flash{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:var(--z-toast);max-width:min(92vw,460px);padding:9px 18px;border-radius:var(--radius-full);font-size:var(--fs-body-sm);font-weight:700;text-align:center;box-shadow:var(--shadow-md);border:1px solid}
.reps-flash-got{background:var(--reps-got-surface);color:var(--reps-got-text);border-color:var(--reps-got-border)}
.reps-flash-almost{background:var(--reps-almost-surface);color:var(--reps-almost-text);border-color:var(--reps-almost-border)}
.reps-flash-missed{background:var(--reps-missed-surface);color:var(--reps-missed-text);border-color:var(--reps-missed-border)}

/* ── milestone ──────────────────────────────────────────────────────── */
.reps-milestone{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;background:var(--color-surface-overlay);pointer-events:none}
.reps-mile-card{background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);padding:var(--space-6) var(--space-8);text-align:center;animation:repsPop var(--reps-celebrate) var(--reps-ease-spring)}
@keyframes repsPop{0%{opacity:0;transform:scale(.86)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
.reps-mile-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-3);font-size:24px}
.reps-mile-mastered .reps-mile-ic{background:var(--reps-got-surface);color:var(--reps-mastered)}
.reps-mile-goal .reps-mile-ic{background:var(--color-primary-subtle);color:var(--color-primary)}
.reps-mile-level .reps-mile-ic{background:var(--reps-streak-surface);color:var(--reps-streak)}
.reps-mile-card h3{font-family:var(--font-sans);font-size:var(--fs-h2);font-weight:600;color:var(--color-text-heading);margin:0 0 4px}
.reps-mile-card p{font-size:var(--fs-body-sm);color:var(--color-text-muted);margin:0;max-width:32ch}

/* ── speed round ────────────────────────────────────────────────────── */
.reps-arena.is-speed .reps-card,.reps-arena.is-speed .reps-panel{background:var(--reps-speed-card);border-color:var(--reps-speed-border);color:var(--reps-speed-text)}
.reps-arena.is-speed .reps-prompt,.reps-arena.is-speed .reps-cue,.reps-arena.is-speed .reps-answer-name,.reps-arena.is-speed .reps-panel h2,.reps-arena.is-speed .reps-sum-n{color:var(--reps-speed-text)}
.reps-arena.is-speed .reps-ask,.reps-arena.is-speed .reps-crumb,.reps-arena.is-speed .reps-panel p,.reps-arena.is-speed .reps-answer-sub,.reps-arena.is-speed .reps-sum-l{color:var(--reps-speed-muted)}
.reps-arena.is-speed .reps-back-face{border-color:var(--reps-speed-border)}
.reps-arena.is-speed .reps-sum{background:color-mix(in srgb,#fff 7%,var(--reps-speed-card))}
.reps-arena.is-speed .reps-node-b{color:var(--reps-speed-text)}
.reps-speed-bar{display:flex;align-items:center;gap:var(--space-3);background:var(--reps-speed-surface);border:1px solid var(--reps-speed-border);border-bottom:0;border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;padding:var(--space-3) var(--space-4)}
.reps-speed-bar+.reps-card{border-radius:0 0 var(--radius-2xl) var(--radius-2xl);border-top:0}
.reps-speed-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--reps-speed-timer);flex:0 0 auto}
.reps-speed-tag svg{width:13px;height:13px}
.reps-speed-track{flex:1;height:5px;background:color-mix(in srgb,#fff 12%,var(--reps-speed-surface));border-radius:var(--radius-full);overflow:hidden}
.reps-speed-fill{height:100%;background:var(--reps-speed-timer);border-radius:inherit;transition:width 1s linear}
.reps-speed-fill.is-warn{background:var(--reps-speed-warn)}
.reps-speed-clock{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--reps-speed-text);font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:38px;text-align:right}
.reps-speed-score{font-family:var(--font-mono);font-size:11px;color:var(--reps-speed-muted);flex:0 0 auto}
.reps-arena.is-speed .reps-grade{grid-template-columns:1fr 1fr}
.reps-speed-hint{font-size:var(--fs-badge);color:var(--reps-speed-muted);text-align:center;margin-top:var(--space-3)}

/* ── settings ───────────────────────────────────────────────────────── */
.reps-sheet{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;background:var(--color-surface-overlay);padding:var(--space-4)}
.reps-sheet-card{width:100%;max-width:var(--container-modal);background:var(--color-surface-card);border:1px solid var(--color-border);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);padding:var(--space-5)}
.reps-sheet-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.reps-sheet-h h3{font-family:var(--font-sans);font-size:var(--fs-h3);font-weight:600;color:var(--color-text-heading);margin:0}
.reps-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--color-border-subtle)}
.reps-row:last-of-type{border-bottom:0}
.reps-row-t strong{display:block;font-size:14px;font-weight:600;color:var(--color-text-heading)}
.reps-row-t span{font-size:var(--fs-body-sm);color:var(--color-text-muted)}
.reps-seg{display:flex;gap:2px;background:var(--color-surface-raised);border-radius:var(--radius-md);padding:2px;flex:0 0 auto}
.reps-seg button{border:0;background:none;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--color-text-muted);padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer}
.reps-seg button.is-on{background:var(--color-surface-card);color:var(--color-primary);box-shadow:var(--shadow-xs)}
.reps-switch{position:relative;width:42px;height:24px;border-radius:var(--radius-full);border:0;background:var(--color-border-strong);cursor:pointer;flex:0 0 auto;transition:background var(--motion-fast)}
.reps-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--motion-fast) var(--ease-out)}
.reps-switch.is-on{background:var(--color-primary)}
.reps-switch.is-on::after{transform:translateX(18px)}
.reps-switch:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.reps-danger{color:var(--color-error-text);background:var(--color-error-surface);border:1px solid var(--color-error-border);border-radius:var(--radius-md);font-family:var(--font-body);font-size:13px;font-weight:600;padding:8px 14px;cursor:pointer}

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

/* ── glossary drawer (§9 layer 2) ───────────────────────────────────── */
.reps-drawer-bg{position:fixed;inset:0;z-index:var(--z-modal);background:var(--color-surface-overlay);display:flex;justify-content:flex-end}
.reps-drawer{width:min(460px,100%);height:100%;display:flex;flex-direction:column;background:var(--color-surface-card);border-left:1px solid var(--color-border);box-shadow:var(--shadow-xl);animation:repsSlideIn var(--motion-slow) var(--ease-out)}
@keyframes repsSlideIn{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.reps-drawer-h{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border);flex:0 0 auto}
.reps-drawer-h h3{font-family:var(--font-sans);font-size:var(--fs-h3);font-weight:600;color:var(--color-text-heading);margin:0}
.reps-drawer-count{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);margin-right:auto;white-space:nowrap}
.reps-search{position:relative;flex:0 0 auto;padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--color-border-subtle)}
.reps-search svg{position:absolute;left:calc(var(--space-5) + 12px);top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--color-text-placeholder);pointer-events:none}
.reps-search input{width:100%;min-height:40px;padding:0 var(--space-3) 0 38px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface-page);color:var(--color-text-heading);font-family:var(--font-body);font-size:14px;-webkit-appearance:none;appearance:none}
.reps-search input::placeholder{color:var(--color-text-placeholder)}
.reps-search input:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}
.reps-drawer-body{flex:1;min-height:0;overflow-y:auto;padding:0 var(--space-5) var(--space-4)}
.reps-drawer-f{flex:0 0 auto;padding:var(--space-3) var(--space-5);border-top:1px solid var(--color-border);font-size:var(--fs-body-sm)}
.reps-drawer-f a{color:var(--color-primary);font-weight:600;text-decoration:none}
.reps-drawer-f a:hover{text-decoration:underline}

.reps-gloss-letter{position:sticky;top:0;z-index:1;background:var(--color-surface-card);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--color-primary);padding:var(--space-4) 0 var(--space-2);border-bottom:1px solid var(--color-border-subtle);margin-bottom:var(--space-2)}
.reps-gloss-item{padding:var(--space-2) 0 var(--space-3)}
.reps-gloss-t{font-family:var(--font-sans);font-size:15px;font-weight:600;color:var(--color-text-heading);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.reps-gloss-t span{font-family:var(--font-body);font-size:12.5px;font-weight:500;color:var(--color-primary)}
.reps-gloss-item p{font-size:var(--fs-body-sm);line-height:1.6;color:var(--color-text-body);margin:4px 0 0;text-wrap:pretty}
.reps-gloss-used{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.reps-gloss-used em{font-style:normal;white-space:nowrap;font-size:var(--fs-badge);text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-placeholder)}
.reps-gloss-used span{font-size:11.5px;color:var(--color-text-muted);background:var(--color-surface-raised);border-radius:var(--radius-full);padding:2px 9px}
.reps-gloss-empty{text-align:center;padding:var(--space-10) var(--space-4)}
.reps-gloss-empty svg{width:26px;height:26px;color:var(--color-border-strong);margin-bottom:var(--space-3)}
.reps-gloss-empty p{font-size:var(--fs-body);color:var(--color-text-body);margin:0}
.reps-gloss-empty .reps-sparse-note{margin-top:var(--space-2)}

@media (max-width:600px){
  .reps-drawer{width:100%;border-left:0;border-top:1px solid var(--color-border);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;height:88%;margin-top:auto;animation:repsSheetUp var(--motion-slow) var(--ease-out)}
  .reps-drawer-bg{align-items:flex-end}
  @keyframes repsSheetUp{from{transform:translateY(28px);opacity:.6}to{transform:none;opacity:1}}
}

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width:1023px){
  .reps{padding:var(--space-4) var(--space-4) var(--space-12)}
  .reps-stage{grid-template-columns:1fr}
  .reps-coach{position:static;order:2}
  .reps-journey{gap:var(--space-3);padding:var(--space-2) var(--space-3);overflow-x:auto;flex-wrap:nowrap}
  .reps-j-sep,.reps-boxes{display:none}
  .reps-xp{min-width:96px}
  .reps-title{font-size:var(--fs-h1-mobile)}
  .reps-flow{grid-template-columns:1fr;gap:var(--space-2)}
  .reps-arrow{justify-content:center;transform:rotate(90deg)}
  .reps-summary-grid{grid-template-columns:repeat(2,1fr)}
  .reps-card{padding:var(--space-4)}
  .reps-grade{position:sticky;bottom:var(--space-2);background:var(--color-surface-card);padding-top:var(--space-2)}
  /* The wide nudge cannot share the strip with the settings gear — mute falls back
     to its icon button, and the sound invitation moves into onboarding copy. */
  .reps-journey .reps-sound-nudge{display:none}
  .reps-journey.has-nudge .reps-iconbtn-sound{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
  .reps-card.is-in,.reps-card.is-out-got,.reps-card.is-out-almost,.reps-card.is-out-missed,.reps-back-face,.reps-mile-card,.reps-bx.is-bump .reps-bx-fill{animation:none}
  .reps-gbtn:active::after{animation:none}
}