/* learn-review.css - the mistakes pages, the flashcards and the Mistakes / Cards due today panel (learn-review.js).
   Site tokens only (brainlag.css, learn.css), so light and dark follow the theme. Calm: no confetti, one small tick
   that draws itself for a fixed mistake, a card that turns over (or simply changes, with reduced motion). */

/* ---- lists */
.lr-scope{display:flex;flex-wrap:wrap;gap:6px 20px;margin:-4px 0 18px;font-size:15.5px}
.lr-scope a{color:var(--ink-2);font-weight:600;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.lr-scope a:hover{color:var(--study-ink)}
.lr-scope a[aria-current]{color:var(--study-ink);border-bottom-color:var(--study)}
.lr-page h2.lr-course,.lr-panel h3.lr-course{font-size:22px;margin:30px 0 4px}
.lr-unit{font:600 19px/1.3 var(--f-display);margin:22px 0 2px;color:var(--ink)}
h2.lr-unit{font-size:21px}
.lr-topic{margin:10px 0 6px;color:var(--ink-3);font-size:14.5px;font-weight:600}
.lr-mlist{list-style:none;margin:0;padding:0}
.lr-mlist > li{display:grid;gap:3px;padding:12px 4px}
.lr-mlist .t{font:600 17.5px/1.3 var(--f-display);color:var(--ink)}
.lr-mlist .m{color:var(--ink-3);font-size:14.5px}
.lr-mlist .say{color:var(--ink-2);font-size:15.5px;line-height:1.45;max-width:66ch}
.lr-mlist .st{display:flex;align-items:center;gap:7px;color:var(--ink-2);font-size:14.5px;margin-top:2px}
.lr-mlist.is-fixed > li{grid-template-columns:22px minmax(0,1fr);column-gap:10px;align-items:start}
.lr-mlist.is-fixed .lr-tick{grid-row:span 2;margin-top:2px}
.lr-mlist.is-fixed .t{font-size:16.5px;color:var(--ink-2)}
.lr-fixed-h{margin:34px 0 4px}
.lr-note{color:var(--ink-3);font-size:15px;line-height:1.5;margin:6px 0 12px;max-width:62ch}
.lr-later{margin-top:18px}
.lr-empty{display:flex;gap:18px;align-items:center;margin:18px 0 8px;max-width:620px}
.lr-empty .ln-noodle{flex:none;width:88px;height:91px}
.lr-empty p{margin:0;color:var(--ink-2);line-height:1.5}
.lr-empty b{display:block;color:var(--ink);font:600 19px/1.3 var(--f-display);margin-bottom:2px}

/* ---- the small tick for a fixed mistake */
.lr-tick{flex:none;width:20px;height:20px}
.lr-tick circle{fill:var(--ln-right-bg);stroke:var(--ln-right);stroke-width:1.6}
.lr-tick path{fill:none;stroke:var(--ln-right);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lr-fixednow{display:inline-flex;align-items:center;gap:8px;margin:14px auto 0;color:var(--ln-right);font-weight:700}
.lr-fixednow .lr-tick{width:24px;height:24px}
.lr-fixednow.go .lr-tick path{stroke-dasharray:1;stroke-dashoffset:1;animation:lrTick .42s .35s cubic-bezier(.22,1,.36,1) forwards}
.lr-fixednow.go .lr-tick circle{transform-origin:50% 50%;animation:lrPop .3s .2s cubic-bezier(.22,1,.36,1) both}
@keyframes lrTick{to{stroke-dashoffset:0}}
@keyframes lrPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* ---- flashcards: the deck pages */
.lr-today{font-size:19px;color:var(--ink-2);margin:4px 0 6px}
.lr-today b{font:700 30px/1 var(--f-display);color:var(--study-ink);margin-right:4px}
/* each deck a card on the card surface with a visible edge and lift, in both themes (owner, 11 Oct): the title, its
   count, Start or Practise on the right; under it the lesson it comes from and a calm Plus line */
.lr-decks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px}
.lr-dk{background:var(--surface);border:2px solid var(--rule-2);border-radius:18px;box-shadow:0 4px 0 var(--rule-2)}
.lr-deck{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:4px;align-items:center;width:100%;margin:0;padding:20px 22px 12px;border:0;border-radius:16px 16px 0 0;background:none;text-align:left;white-space:normal;color:var(--ink);cursor:pointer;font:inherit}
.lr-deck.is-plus{text-decoration:none}
.lr-deck.is-plus .go{color:var(--ink-3)}
.lr-ptag{display:inline-block;padding:0 7px;border:2px solid var(--rule-2);border-radius:6px;color:var(--ink-2);font-weight:700;font-size:12.5px;line-height:1.15;vertical-align:1px}
.lr-deck .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lr-deck .t{grid-column:1;font:600 19px/1.25 var(--f-display)}
.lr-deck .m{grid-column:1;color:var(--ink-3);font-size:14.5px}
.lr-deck .go{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;gap:4px;color:var(--study-ink);font-weight:700;font-size:16px}
.lr-deck .go svg{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.lr-deck:hover .t{color:var(--study-ink)}
.lr-deck:focus-visible{outline:3px solid var(--study);outline-offset:2px}
.lr-dk-x{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;padding:0 22px 18px;font-size:14.5px;color:var(--ink-3)}
.lr-dk-x:empty{padding-bottom:8px}
.lr-dk-x a{color:var(--study-ink);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.lr-note a{color:var(--study-ink);font-weight:700}

/* ---- flashcards: one card, turned over in 3D */
.lr-run{padding-top:4px}
.lr-run > h1.lr-h{font:600 15.5px/1.3 var(--f-body);color:var(--ink-3);margin:6px 0 14px;text-align:center}
.lr-card{perspective:1400px;max-width:580px;margin:0 auto;cursor:pointer;outline:none;border-radius:22px}
.lr-card:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--study) 40%,transparent)}
.lr-in{display:grid;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.2,.5,1)}
.lr-card.is-flipped .lr-in{transform:rotateY(180deg)}
.lr-face{grid-area:1/1;min-height:250px;display:grid;align-content:center;justify-items:center;gap:12px;padding:30px 26px;text-align:center;
  background:var(--surface);border:2px solid var(--rule-2);border-radius:22px;box-shadow:0 6px 0 var(--rule-2);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lr-back{transform:rotateY(180deg)}
.lr-f{margin:0;font:600 clamp(21px,4.4vw,26px)/1.35 var(--f-display);color:var(--ink);max-width:30ch}
.lr-qs{margin:0;color:var(--ink-3);font-size:15px;line-height:1.4;max-width:46ch}
.lr-b{margin:0;font:500 clamp(18px,3.8vw,21px)/1.5 var(--f-body);color:var(--ink);max-width:40ch}
.lr-from{text-align:center;color:var(--ink-3);font-size:14.5px;margin:18px auto 0;max-width:46ch}
/* before the answer: recall first; a practice run says so; the one-time nudge for flipping straight away */
.lr-recall{text-align:center;color:var(--ink-2);font-size:16px;font-weight:600;margin:16px auto 0;max-width:46ch}
.lr-prac{text-align:center;color:var(--ink-2);font-size:15px;margin:-6px auto 12px;max-width:46ch}
.lr-nudge{max-width:46ch;margin:16px auto 0;padding:12px 16px;border-radius:12px;background:var(--sunk);color:var(--ink);font-size:15.5px;font-weight:600;text-align:center}
/* the rating keys: a separate chip after each label, on a mouse and keyboard only */
.lr-kbd{display:none}
@media (hover:hover) and (pointer:fine){
  .lp-actions .lr-kbd{display:inline-block;margin-left:10px;min-width:1.6em;padding:1px 6px;border:2px solid currentColor;border-radius:6px;font:700 12.5px/1.3 var(--f-body);opacity:.75;vertical-align:1px}
}
.lp-actions .lr-mean{flex:1 0 100%;margin:2px 0 0;text-align:center;text-wrap:balance;color:var(--ink-3);font-size:14px;line-height:1.4}
.lp-actions .lr-mean b{color:var(--ink-2)}
/* desktop: the run's buttons and the meanings line centred under the card, the card's width; phones keep the full width */
@media (min-width:700px){
  .lp-foot:has(.lr-flip) .lp-actions{max-width:580px;justify-content:center}
  .lp-foot:has(.lr-flip) .lp-actions .lp-btn{flex:1 1 0;min-width:0}
}
.lp-actions .lr-g0,.lp-actions .lr-g3{min-width:120px}
@media (max-width:699px){.lp-actions .lr-g0,.lp-actions .lr-g2,.lp-actions .lr-g3,.lp-actions .lr-flip{min-width:0;padding:0 10px}.lp-actions:has(.lr-g2) .lp-btn{flex:1 1 0}}
@media (min-width:700px){.lp-actions .lr-flip{min-width:120px}}
.lr-end .lr-noodle{width:88px;height:91px}
.lr-after{margin:20px 0 0;text-align:center}

/* reduced motion: the card changes face without turning */
@media (prefers-reduced-motion:reduce){
  .lr-in{transition:none}.lr-card.is-flipped .lr-in{transform:none}.lr-back{transform:none;visibility:hidden}
  .lr-card.is-flipped .lr-front{visibility:hidden}.lr-card.is-flipped .lr-back{visibility:visible}
  .lr-fixednow.go .lr-tick path,.lr-fixednow.go .lr-tick circle{animation:none;stroke-dashoffset:0}
}
:root[data-motion="off"] .lr-in{transition:none}
:root[data-motion="off"] .lr-card.is-flipped .lr-in{transform:none}
:root[data-motion="off"] .lr-back{transform:none;visibility:hidden}
:root[data-motion="off"] .lr-card.is-flipped .lr-front{visibility:hidden}
:root[data-motion="off"] .lr-card.is-flipped .lr-back{visibility:visible}

/* ---- the panel: Mistakes and Cards due today, side by side (course pages, My learning) */
.lr-panel{margin:48px 0 0}
.lr-cols{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:0 48px}
@media (max-width:820px){.lr-cols{grid-template-columns:1fr}.lr-cols > [data-part="cards"]{margin-top:32px}}
.lr-panel h2{margin:22px 0 8px}
.lr-panel .lr-unit{font-size:17.5px;margin:16px 0 2px}
.lr-count{margin:0 0 6px;color:var(--ink-2);font-size:16.5px}
.lr-count b{color:var(--ink);font-weight:700}
.lr-empty-t{margin:0 0 4px;font:600 18px/1.3 var(--f-display);color:var(--ink)}
.lr-more{margin:10px 0 0}.lr-more a{color:var(--study-ink);font-weight:700}
.lr-fixed{display:flex;align-items:center;gap:8px;margin:14px 0 0;color:var(--ink-2);font-size:15px}
.lr-acts{margin:18px 0 0;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.lr-acts a:not(.lr-go){color:var(--study-ink);font-weight:700}
.lr-go{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:14px;background:var(--study-btn);color:var(--on-study-btn);font-weight:700;font-size:16.5px;
  text-decoration:none;box-shadow:0 4px 0 var(--study-btn-lip);transition:background .15s cubic-bezier(.22,1,.36,1)}
.lr-go:hover{background:var(--study-btn-hover);color:var(--on-study-btn)}
.lr-go:active{transform:translateY(4px);box-shadow:0 0 0 var(--ln-lip,#08707a);transition-duration:0s}
.lr-go[hidden]{display:none}
.lr-n{margin:2px 0 0;min-height:44px}
.lr-n b{font:700 44px/1 var(--f-display);color:var(--study-ink)}
.lr-n + .lr-sub{margin:4px 0 0;color:var(--ink-2);font-size:15.5px;min-height:1.4em}
@media (prefers-reduced-motion:reduce){.lr-go{transition:none}.lr-go:active{transform:none}}

/* mixed practice, under Mistakes and Cards on a course page (practice-panel.php) */
.lr-mixed{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:16px 0 0}
.lr-mixed span{color:var(--ink-2);max-width:52ch}

/* ---- the mistakes review (October 2026 redesign; handoff-2026-10-06/review/mistakes/DESIGN.md) */
/* the review icon: a white glyph on a purple (--play) tile; --play passes 3:1 on both themes' paper and under white */
.lr-ico{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--play);color:#fff}
.lr-ico.sm{width:30px;height:30px;border-radius:9px}
.lr-ico.lg{width:60px;height:60px;border-radius:18px}
.lr-h1{display:flex;align-items:center;gap:14px}
.lr-panel h2.lr-h1{gap:10px}
.lr-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 10px;max-width:620px}
.lr-stat{margin:0;display:grid;gap:2px;padding:14px 16px;border-radius:18px;background:var(--sunk)}
.lr-stat b{font:700 clamp(30px,6vw,40px)/1 var(--f-display);color:var(--ink)}
.lr-stat span{color:var(--ink-2);font-size:15px;line-height:1.3}
.lr-stat.is-go b{color:var(--study-ink)}
.lr-stat.is-ok b{color:var(--ln-right)}
@media (max-width:420px){.lr-sum{gap:8px}.lr-stat{padding:12px 10px}.lr-stat span{font-size:13.5px}}
.lr-page h2.lr-course .lr-c{display:block;font:500 15px/1.4 var(--f-body);color:var(--ink-3);margin-top:2px}
.lr-topic{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.lr-topic a{color:var(--study-ink);font-weight:700;font-size:14.5px}
.lr-mlist > li.lr-item{padding:14px 4px 16px}
.lr-mlist .st .lr-dots{flex:none}
.lr-dots{display:inline-flex;gap:4px}
.lr-dots i{width:10px;height:10px;border-radius:50%;background:var(--rule-2)}
.lr-dots i.on{background:var(--ln-right)}
.lr-item.is-ready .st{color:var(--study-ink);font-weight:600}
.lr-tag{color:var(--play-ink);font-size:14.5px;font-weight:600}
.lr-acts2{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:2px}
.lr-lk{background:none;border:0;padding:6px 0;color:var(--study-ink);font:700 15px var(--f-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lr-lk:focus-visible,.lr-wb:focus-visible{outline:3px solid var(--study);outline-offset:2px;border-radius:8px}
.lr-qv{margin:8px 0 0;padding:16px 18px;border-radius:18px;background:var(--sunk);max-width:68ch}
.lr-qv[hidden]{display:none}
.lr-qv-h{margin:0 0 8px;color:var(--ink-3);font-size:14px;font-weight:600}
.lr-qv-stem p,.lr-qv-p p{margin:0 0 8px}
.lr-qv-part{display:flex;flex-wrap:wrap;gap:0 8px}
.lr-qv-part .pl{font-weight:700;color:var(--ink-2)}
.lr-qv-p{flex:1 1 0;min-width:0}
.lr-qv-ch{list-style:none;margin:2px 0 10px;padding:0;flex-basis:100%;display:grid;gap:6px}
.lr-qv-ch li{display:flex;align-items:center;gap:10px;color:var(--ink-2)}
.lr-qv-ch li.is-right{color:var(--ink);font-weight:700}
.lr-qv-ch li.is-yours{color:var(--ink)}
.lr-qv-yo{margin-left:10px;font-size:13.5px;font-weight:600;color:var(--ink-3)}   /* the option the learner chose (learn.js withPick), named in words, no colour alone */
.lr-qv-o{flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--rule-2)}
.lr-qv-a{flex-basis:100%;margin:2px 0 10px;font-weight:700;font-size:17.5px;color:var(--ink)}
.lr-qv-a span{display:block;font:600 13.5px var(--f-body);color:var(--ln-right)}
.lr-qv-why{margin:8px 0 4px}
.lr-qv-why b{display:block;font-size:14px;color:var(--ink-3)}
.lr-qv-why p{margin:2px 0 0;color:var(--ink)}
.lr-qv-sol{margin:8px 0 0}
.lr-qv-sol summary{cursor:pointer;color:var(--study-ink);font-weight:700;padding:6px 0}
.lr-qv-sol ol{margin:6px 0 0;padding-left:22px;display:grid;gap:4px}
.lr-qv .sr,.lr-end .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lr-why{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:14px 0 0}
.lr-why p{margin:0;flex-basis:100%;color:var(--ink-2);font-weight:600;font-size:15px}
.lr-wb{min-height:44px;padding:0 16px;border-radius:12px;border:2px solid var(--rule-2);background:var(--surface);color:var(--ink);font:700 15px var(--f-body);cursor:pointer}
.lr-wb:hover{border-color:var(--play)}
.lr-wb[aria-pressed="true"]{border-color:var(--play);background:var(--play-tint);color:var(--play-ink)}
.lr-gap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:12px 0 0}
.lr-gap span{color:var(--ink-2);font-size:15px}
.lr-gap .lr-go{min-height:44px;font-size:15.5px}
.lr-empty .lr-ico{margin:0;align-self:flex-start}
/* the end of a review: one big rounded tick that draws itself once for what was cleared (no confetti) */
.lr-cele{display:flex;align-items:center;justify-content:center;gap:16px;margin:22px auto 6px;text-align:left}
.lr-cele p{margin:0;display:grid;gap:2px}
.lr-cele b{font:700 clamp(24px,5vw,30px)/1.1 var(--f-display);color:var(--ln-right)}
.lr-cele span{color:var(--ink-2);max-width:34ch}
.lr-bigtick{flex:none;width:64px;height:64px}
.lr-bigtick circle{fill:var(--ln-right-bg);stroke:var(--ln-right);stroke-width:4}
.lr-bigtick path{fill:none;stroke:var(--ln-right);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.lr-cele.go .lr-bigtick circle{transform-origin:50% 50%;animation:lrPop .42s .25s cubic-bezier(.34,1.56,.64,1) both}
.lr-cele.go .lr-bigtick path{stroke-dasharray:1;stroke-dashoffset:1;animation:lrTick .5s .55s cubic-bezier(.22,1,.36,1) forwards}
.lr-ny{margin:26px auto 0;max-width:560px;text-align:left}
.lr-ny h2{font-size:21px;margin:0 0 2px}
.lr-ny .lr-why{margin-top:8px}
@media (prefers-reduced-motion:reduce){.lr-cele.go .lr-bigtick path,.lr-cele.go .lr-bigtick circle{animation:none;stroke-dashoffset:0}}
:root[data-motion="off"] .lr-cele.go .lr-bigtick path,:root[data-motion="off"] .lr-cele.go .lr-bigtick circle{animation:none;stroke-dashoffset:0}
/* one unit only (?unit=, from a course page's "N to review"): what is shown, and the way back to everything */
.lr-only{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:-4px 0 18px;color:var(--ink-2);font-size:15.5px}
.lr-only b{color:var(--ink)}
.lr-only a{color:var(--study-ink);font-weight:700}