/* 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}
.lr-decks{margin-top:12px}
.lr-deck{display:grid;gap:3px;width:100%;padding:16px 4px;border:0;background:none;text-align:left;color:var(--ink);cursor:pointer;font:inherit}
.lr-deck .t{font:600 19px/1.25 var(--f-display)}
.lr-deck .m{color:var(--ink-3);font-size:14.5px}
.lr-deck:hover .t{color:var(--study-ink)}
.lr-deck:focus-visible{outline:3px solid var(--study);outline-offset:2px;border-radius:8px}

/* ---- 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}
.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{min-width:0;padding:0 10px}}
.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}