/* ═══════════════════════════════════════════════════════════
   The Gym — drill console
   Everything here is scoped to gym.html. It borrows the tokens
   from core.css; nothing is redefined that parts.css already
   gives us (buttons, cards, dock, tiers).
   ═══════════════════════════════════════════════════════════ */

/* ── masthead ───────────────────────────────────────────── */
.mast{position:relative;padding:clamp(126px,16vh,190px) 0 clamp(28px,4vw,52px);overflow:hidden}
.mast .h1{margin:26px 0 0;max-width:20ch}
.mast .lede{margin-top:24px;max-width:62ch}

/* ═══════════════════════════════════════════════════════════
   CONSOLE — the drill runs in here. Fixed height so the stage
   never jumps between drills; every drill paints into .cstage.
   ═══════════════════════════════════════════════════════════ */
.console{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(180deg,rgba(20,20,30,.92),rgba(8,8,13,.96));
  border:1px solid var(--bd-2);
  box-shadow:0 70px 160px -60px rgba(91,63,224,.7),
             0 0 0 1px rgba(255,255,255,.035) inset;
  scroll-margin-top:96px;
}
.console::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(124,92,255,.16),transparent 62%);
}
.console>*{position:relative;z-index:1}

/* header bar */
.cbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px clamp(16px,2vw,22px);border-bottom:1px solid var(--bd)}
.cbar .lights{display:flex;gap:6px;flex:0 0 auto}
.cbar .lights i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.13)}
.cbar .cname{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-2);margin-left:6px}
.cbar .cname b{color:var(--fg);font-weight:500}
.cbar .cstep{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--v-lt);padding:6px 11px;border-radius:999px;
  border:1px solid rgba(124,92,255,.35);background:rgba(124,92,255,.12)}
.cbar .chud{margin-left:auto;display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;
  font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.cbar .chud b{color:var(--fg);font-weight:500;font-size:13px;letter-spacing:-.01em}
.cbar .chud span{display:flex;align-items:baseline;gap:7px}
.cbar .cx{flex:0 0 auto}

/* stage */
.cstage{
  position:relative;min-height:clamp(380px,50vh,540px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,2vw,24px);padding:clamp(20px,3vw,36px);text-align:center;
}
.cstage .say{font-size:14.5px;line-height:1.6;color:var(--fg-2);max-width:52ch}
.cstage .say b{color:var(--fg);font-weight:530}
.cstage .big{font:500 clamp(44px,7vw,92px)/1 var(--mono);letter-spacing:-.04em;color:var(--fg)}
.cstage .huge{font-size:clamp(64px,11vw,132px);font-weight:590;letter-spacing:-.05em;line-height:1}

/* footer controls */
.cfoot{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;
  padding:14px clamp(16px,2vw,22px);border-top:1px solid var(--bd);background:rgba(0,0,0,.24);
  min-height:70px}
.cfoot .grow{flex:1 1 auto}
.cfoot .note{font-size:12.5px;color:var(--fg-3);line-height:1.5}
.cfoot kbd{font:500 11px/1 var(--mono);background:var(--surf-2);border:1px solid var(--bd-2);
  border-bottom-width:2px;border-radius:6px;padding:4px 7px;color:var(--fg)}

/* a labelled control (slider / select) in the footer */
.ctl{display:flex;align-items:center;gap:10px;
  font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3)}
.ctl select{appearance:none;background:var(--surf-2);border:1px solid var(--bd-2);color:var(--fg);
  border-radius:999px;padding:9px 30px 9px 14px;font:500 12.5px/1 var(--mono);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-2) 50%),
                   linear-gradient(135deg,var(--fg-2) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.ctl input[type=range]{width:clamp(110px,16vw,190px);accent-color:var(--v);height:22px}
.ctl output{font:500 12.5px/1 var(--mono);color:var(--c-lt);min-width:66px}

/* ── idle state: the drill picker ───────────────────────── */
.picker{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;text-align:left}
.dtile{
  position:relative;display:flex;flex-direction:column;gap:9px;padding:20px;
  border-radius:var(--r);border:1px solid var(--bd);background:var(--surf);
  transition:.32s var(--e);cursor:pointer;
}
.dtile:hover{background:var(--surf-2);border-color:var(--bd-3);transform:translateY(-2px)}
.dtile .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  border:1px solid var(--bd);color:var(--v-lt)}
.dtile .ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.dtile h4{font-size:16px;letter-spacing:-.02em}
.dtile p{font-size:12.8px;line-height:1.55;color:var(--fg-3)}
.dtile .mt{margin-top:auto;padding-top:10px;display:flex;justify-content:space-between;gap:10px;
  font:500 9.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.dtile .mt b{color:var(--c-lt);font-weight:500}
@media (max-width:900px){.picker{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.picker{grid-template-columns:1fr}}

/* ── countdown ──────────────────────────────────────────── */
.count{font:500 clamp(80px,14vw,160px)/1 var(--mono);letter-spacing:-.05em;color:var(--v-lt);
  animation:cpop .9s var(--e)}
@keyframes cpop{from{opacity:0;transform:scale(.6)}60%{opacity:1}to{opacity:.65;transform:scale(1)}}

/* ── drill: schulte grid ────────────────────────────────── */
.schulte{display:grid;gap:7px;width:min(100%,clamp(280px,42vh,420px))}
.sq{aspect-ratio:1;display:grid;place-items:center;border-radius:10px;
  border:1px solid var(--bd);background:var(--surf);
  font:500 clamp(15px,2.6vh,22px)/1 var(--mono);color:var(--fg-2);
  transition:background .18s,color .18s,border-color .18s,transform .18s var(--e)}
.sq:hover{background:var(--surf-2);color:var(--fg)}
.sq.hit{background:rgba(180,255,57,.12);border-color:rgba(180,255,57,.4);color:var(--lime);
  transform:scale(.94)}
.sq.bad{background:rgba(251,113,133,.16);border-color:rgba(251,113,133,.5);color:var(--rose)}
.schulte-wrap{position:relative;display:grid;place-items:center}
.fixdot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--v-lt);
  box-shadow:0 0 18px 3px rgba(124,92,255,.7);pointer-events:none;z-index:2}

/* ── drill: flash span ──────────────────────────────────── */
.cross{font:400 44px/1 var(--mono);color:var(--fg-4)}
.flashline{font:500 clamp(20px,3.4vw,34px)/1.3 var(--mono);letter-spacing:-.02em;color:var(--fg);
  max-width:22ch}
.maskline{font:500 clamp(20px,3.4vw,34px)/1.3 var(--mono);color:var(--fg-4);letter-spacing:.1em}
.choices{display:grid;gap:8px;width:min(100%,520px)}
.choice{padding:14px 18px;border-radius:12px;border:1px solid var(--bd);background:var(--surf);
  font:500 15px/1.35 var(--mono);letter-spacing:-.015em;color:var(--fg-2);text-align:left;
  transition:.22s var(--e)}
.choice:hover{background:var(--surf-2);border-color:var(--bd-3);color:var(--fg)}
.choice.ok{background:rgba(180,255,57,.13);border-color:rgba(180,255,57,.45);color:var(--lime)}
.choice.no{background:rgba(251,113,133,.13);border-color:rgba(251,113,133,.45);color:var(--rose)}

/* ── drill: chunk columns ───────────────────────────────── */
.chunkgrid{display:grid;gap:6px 14px;width:100%;max-width:900px;text-align:left}
.ck{padding:10px 12px;border-radius:9px;font-size:clamp(16px,2vw,22px);line-height:1.35;
  color:var(--fg-4);transition:color .12s,background .12s;text-align:center}
.ck.done{color:var(--fg-3)}
.ck.on{color:var(--fg);background:rgba(124,92,255,.16);
  box-shadow:inset 0 0 0 1px rgba(124,92,255,.35)}

/* ── drill: sweep (regression lock) ─────────────────────── */
.sweep{width:100%;max-width:64ch;text-align:left;font-size:clamp(16px,1.85vw,20px);
  line-height:2.05;color:var(--fg-2);position:relative}
.sweep w{position:relative;z-index:1;
  transition:opacity .5s var(--e),filter .5s var(--e),color .2s}
.sweep w.gone{opacity:.1;filter:blur(1.4px)}
.sweep w.now{color:var(--fg)}
.sweep .band{position:absolute;left:-10px;right:-10px;top:0;height:0;border-radius:8px;
  background:linear-gradient(90deg,rgba(124,92,255,.2),rgba(34,211,238,.09));
  box-shadow:inset 0 0 0 1px rgba(124,92,255,.28);
  transition:top .18s var(--e),height .18s var(--e);pointer-events:none;z-index:0}

/* ── drill: rsvp ────────────────────────────────────────── */
.rsvp{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.rword{font:500 clamp(38px,6.4vw,80px)/1 var(--mono);letter-spacing:-.04em;white-space:nowrap;
  color:rgba(246,245,242,.62)}
.rword em{font-style:normal;color:var(--amber);text-shadow:0 0 30px rgba(255,176,32,.5)}
.rrail{position:relative;width:min(100%,520px);height:1px;background:var(--bd-2)}
.rrail i{position:absolute;top:-5px;left:50%;transform:translateX(-50%);width:1px;height:11px;
  background:var(--v-lt)}
.beat{width:64px;height:64px;border-radius:50%;border:1px solid var(--bd-2);display:grid;
  place-items:center;color:var(--fg-3);font:500 10px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;transition:transform .1s linear,border-color .1s,color .1s}
.beat.pulse{transform:scale(1.14);border-color:var(--v);color:var(--v-lt);
  box-shadow:0 0 34px -8px rgba(124,92,255,.9)}
.beat.hit{border-color:var(--lime);color:var(--lime)}

/* ── comprehension check ────────────────────────────────── */
.check{width:100%;max-width:660px;text-align:left}
.check .qh{font-size:14.5px;line-height:1.6;color:var(--fg-2);margin-bottom:18px}
.check .qh b{color:var(--fg);font-weight:530}
.qitem{padding:14px 0;border-top:1px solid var(--bd)}
.qitem:first-of-type{border-top:0;padding-top:0}
.qitem>b{display:block;font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);margin-bottom:10px}
.qopts{display:flex;gap:7px;flex-wrap:wrap}
.qopts button{padding:9px 14px;border-radius:999px;border:1px solid var(--bd);background:var(--surf);
  color:var(--fg-2);font-size:13.5px;transition:.22s var(--e)}
.qopts button:hover{border-color:var(--bd-3);color:var(--fg)}
.qopts button.sel{background:var(--fg);color:#0A0A0D;border-color:var(--fg)}
.qopts button.ok{background:rgba(180,255,57,.14);border-color:rgba(180,255,57,.45);color:var(--lime)}
.qopts button.no{background:rgba(251,113,133,.14);border-color:rgba(251,113,133,.45);color:var(--rose)}

/* ── result card ────────────────────────────────────────── */
.res{width:100%;max-width:620px;display:flex;flex-direction:column;align-items:center;gap:16px}
.res .kicker{letter-spacing:.2em}
.res .score{font-size:clamp(56px,9vw,104px);font-weight:590;letter-spacing:-.05em;line-height:1;
  color:var(--fg)}
.res .score small{font-size:.3em;font-weight:400;letter-spacing:-.01em;color:var(--fg-3);
  margin-left:.35em}
.res .pb{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#0A0A0D;
  background:var(--grad);padding:8px 13px;border-radius:999px}
.res .sub{font-size:14.5px;line-height:1.62;color:var(--fg-2);max-width:50ch}
.res .sub b{color:var(--fg);font-weight:530}
.res .rr{display:flex;gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:var(--r);
  overflow:hidden;width:100%;margin-top:4px}
.res .rr div{flex:1;background:var(--bg-1);padding:16px 14px}
.res .rr b{display:block;font-size:22px;font-weight:560;letter-spacing:-.03em;color:var(--fg)}
.res .rr span{display:block;margin-top:7px;font:500 9px/1.3 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3)}
.res .acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* ═══════════ your numbers ═══════════ */
.bests{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bd);
  border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden}
.bests .b{background:var(--bg-1);padding:clamp(20px,2.4vw,28px)}
.bests .b .lb{font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3)}
.bests .b b{display:block;margin-top:14px;font-size:clamp(26px,3vw,38px);font-weight:590;
  letter-spacing:-.04em;color:var(--fg)}
.bests .b b.none{color:var(--fg-4)}
.bests .b em{display:block;margin-top:8px;font-style:normal;font-size:12.5px;color:var(--fg-3)}
@media (max-width:760px){.bests{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.bests{grid-template-columns:1fr}}

.loglist{margin-top:14px;border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surf)}
.lrow{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;
  padding:14px clamp(16px,2vw,22px);border-top:1px solid var(--bd)}
.lrow:first-child{border-top:0}
.lrow .t{font-size:14.5px;color:var(--fg)}
.lrow .t em{display:block;margin-top:4px;font-style:normal;font-size:12.5px;color:var(--fg-3)}
.lrow b{font:500 14px/1 var(--mono);color:var(--c-lt)}
.lrow .ago{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);
  min-width:74px;text-align:right}
.logempty{padding:clamp(26px,3vw,38px);text-align:center;color:var(--fg-3);font-size:14.5px;line-height:1.6}

/* streak strip */
.streak{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin-bottom:14px;
  padding:16px 20px;border-radius:var(--r);border:1px solid var(--bd);background:var(--surf)}
.streak .dots{display:flex;gap:5px}
.streak .dots i{width:15px;height:15px;border-radius:4px;background:var(--surf-3);
  border:1px solid var(--bd)}
.streak .dots i.on{background:var(--grad);border-color:transparent;
  box-shadow:0 0 16px -4px rgba(124,92,255,.9)}
.streak p{font-size:13.5px;color:var(--fg-2);line-height:1.5;flex:1;min-width:220px}
.streak p b{color:var(--fg);font-weight:530}

/* ═══════════ drill index (editorial) ═══════════ */
.dgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.dgrid .card-b{display:flex;flex-direction:column}
.dgrid .hd{display:flex;align-items:center;gap:14px}
.dgrid .hd h3{font-size:19px;letter-spacing:-.024em}
.dgrid .hd .k{font:500 9.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--v-lt);display:block;margin-bottom:7px}
.dgrid p{margin-top:16px;font-size:14.5px;line-height:1.64;color:var(--fg-2)}
.dgrid .fq{margin-top:18px;padding-top:16px;border-top:1px solid var(--bd);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:500 10px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
.dgrid .fq b{color:var(--fg);font-weight:500}
.dgrid .btn{margin-top:18px;align-self:flex-start}
@media (max-width:820px){.dgrid{grid-template-columns:1fr}}

/* ═══════════ what the drills are reading ═══════════ */
.corpusbar{margin-top:14px;display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
  padding:15px 18px;border-radius:var(--r);border:1px solid var(--bd);background:var(--surf)}
.corpusbar.on{border-color:rgba(124,92,255,.34);background:rgba(124,92,255,.06)}
.corpusbar .st{font:500 9.5px/1.9 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-3);flex-shrink:0;padding-top:1px}
.corpusbar.on .st{color:var(--v-lt)}
.corpusbar p{margin:0;flex:1;min-width:260px;font-size:13.5px;line-height:1.62;color:var(--fg-2)}
.corpusbar b{color:var(--fg);font-weight:530}
.corpusbar a{color:var(--v-lt)}
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--v-lt);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.lnk:hover{color:var(--fg)}

/* ═══════════ the series board ═══════════ */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.scard{display:flex;flex-direction:column;border-radius:var(--r-lg);border:1px solid var(--bd);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  padding:24px 22px 26px;transition:border-color .3s var(--e),transform .3s var(--e)}
.scard:hover{border-color:var(--bd-2);transform:translateY(-2px)}
.scard.done{border-color:rgba(180,255,57,.28)}
.scard .hd{display:flex;align-items:center;gap:14px}
.scard .hd h3{font-size:19px;letter-spacing:-.024em;margin:0}
.scard .hd .k{font:500 9.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--v-lt);display:block;margin-bottom:7px}
.scard .tick{margin-left:auto;font:500 9.5px/1 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--lime);white-space:nowrap}
.scard>p{margin-top:16px;font-size:14.5px;line-height:1.64;color:var(--fg-2)}
.scard .pips{margin-top:18px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.scard .pips i{width:22px;height:5px;border-radius:3px;background:var(--surf-3);
  transition:background .3s var(--e)}
.scard .pips i.on{background:var(--grad-2)}
.scard .pips span{margin-left:6px;font:500 10px/1 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--fg-3)}
.scard .fq{margin-top:16px;padding-top:16px;border-top:1px solid var(--bd);
  display:flex;flex-direction:column;gap:8px;
  font:500 10px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--fg-3)}
.scard .fq b{color:var(--fg);font-weight:500;text-transform:none;letter-spacing:0;
  font-family:var(--sans);font-size:13px;line-height:1.5;display:block;margin-top:3px}
.scard .sacts{margin-top:auto;padding-top:18px;display:flex;gap:9px;flex-wrap:wrap;
  align-items:center}
.scard .lock{margin-top:auto;padding-top:18px;font-size:13px;line-height:1.6;color:var(--fg-3)}
@media (max-width:1000px){.sgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.sgrid{grid-template-columns:1fr}}

/* honest note */
.honest{border-radius:var(--r-xl);border:1px solid var(--bd);padding:clamp(26px,3.4vw,48px);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}
.honest p{margin-top:16px;font-size:15px;line-height:1.7;color:var(--fg-2);max-width:74ch}
.honest p:first-of-type{margin-top:0}
.honest strong{color:var(--fg);font-weight:530}

/* toast (shared shape with academy) */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:200;
  display:flex;align-items:center;gap:10px;padding:13px 20px;border-radius:999px;
  background:rgba(9,9,13,.94);border:1px solid var(--bd-2);backdrop-filter:blur(20px);
  font-size:14px;color:var(--fg);opacity:0;pointer-events:none;transition:.4s var(--e)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:16px;height:16px;stroke:var(--lime);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.toast.bad svg{stroke:var(--rose)}

/* account chip in the dock, same as academy/account pages */
.me{display:flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;border-radius:999px;
  border:1px solid var(--bd);background:var(--surf);font-size:13.5px;color:var(--fg-2)}
.me img,.me .ph{width:30px;height:30px;border-radius:50%;object-fit:cover;display:grid;
  place-items:center;background:var(--grad);color:#0A0A0D;font-size:13px;font-weight:600;
  font-style:normal}
.me:hover{border-color:var(--bd-3);color:var(--fg)}
@media (max-width:700px){.me span{display:none}}

@media (prefers-reduced-motion:reduce){
  .count,.res,.sweep w{animation:none;transition:none}
  .beat{transition:none}
}