/* PTA Study Lab — learning engine UI (OWNER: learning-science engineer).
 * Flashcards + review page, quiz, checklist / partner check-off, cases, sequence drill.
 * Uses css/tokens.css names and the shell's components (.btn, .chip, .icon-btn, .segmented, .switch, .select).
 * Everything here is prefixed .lx- so it never collides with other renderers.
 */

/* ── Shared ───────────────────────────────────────────────────────────── */
.lx { --lx-gap: var(--space-4); position: relative; display: flex; flex-direction: column; gap: var(--lx-gap); }
.lx > * { margin-block: 0; }
.lx-title { margin-bottom: var(--space-2); }
.lx-intro { color: var(--text); }
.lx-intro > :last-child { margin-bottom: 0; }
.lx-empty { color: var(--text-muted); }
.lx-muted, .lx .lx-muted { color: var(--text-muted); }
.lx-center { text-align: center; margin-inline: auto; }
.lx-ok { color: var(--success); }
.lx-bad { color: var(--danger); }
.lx [hidden] { display: none !important; }

.lx-enter { opacity: 0; transform: translateY(10px); }
.lx-enter, .lx-enter-done { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.lx-q, .lx-interstitial, .lx-results, .lx-prompt, .lx-ready, .lx-empty-state, .lx-finish, .lx-rv__session {
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lx-pop { animation: lx-pop var(--dur-slow) var(--ease) both; }
@keyframes lx-pop { 0% { opacity: 0; transform: translateY(6px) scale(.98); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }

.lx-progress {
  position: relative; height: 6px; flex: 1; min-width: 60px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.lx-progress__fill {
  position: absolute; inset: 0; border-radius: inherit; background: var(--primary);
  transform-origin: left center; transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease);
}
.lx-progress--flush { border-radius: 0; height: 4px; flex: none; }

.lx-kbd-hint { display: none; margin: 0; text-align: center; color: var(--text-muted); font-size: var(--step--1); }
@media (hover: hover) and (pointer: fine) { .lx-kbd-hint { display: block; } }

.lx-ico, .lx .icon { flex: none; }
.lx .btn .icon { width: 20px; height: 20px; }
@media (pointer: coarse) { .lx .btn-sm, .lx-partner .btn-sm { min-height: var(--tap); } }

/* Banner (success / problem) */
.lx-banner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.lx-banner p { margin: 2px 0 0; color: var(--text); font-size: .95rem; }
.lx-banner b { font-size: 1.04rem; }
.lx-banner__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--success); color: #fff;
}
.lx-banner--bad { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 35%, transparent); }
.lx-banner--bad .lx-banner__icon { background: var(--warning); color: var(--surface); }
.lx-banner .btn { grid-column: auto; }
@media (max-width: 520px) { .lx-banner { grid-template-columns: auto 1fr; } .lx-banner > .btn { grid-column: 1 / -1; justify-self: stretch; } }

/* Stats */
.lx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: var(--space-2); margin: 0; }
.lx-stats > div { background: var(--surface-2); border-radius: var(--radius); padding: var(--space-3); text-align: center; }
.lx-stats dt { font-size: var(--step--1); color: var(--text-muted); font-weight: 700; }
.lx-stats dd { margin: 2px 0 0; font-size: var(--step-2); font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.1; }
@media (max-width: 599px) { .lx-stats > div { padding: var(--space-2); } .lx-stats dd { font-size: var(--step-1); white-space: nowrap; } }   /* "First try 11 of 13" wrapped to 3 lines */
.lx-stats--center { max-width: 520px; margin-inline: auto; }
.lx-stats dd.lx-stats__sub { font-size: var(--step--1); font-weight: 650; color: var(--text-muted); margin-top: 2px; }

/* Tally of grades */
.lx-tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); max-width: 440px; margin-inline: auto; }
.lx-tally__item { display: grid; justify-items: center; padding: var(--space-2) var(--space-1); border-radius: var(--radius-sm); background: var(--lx-tone-soft); }
.lx-tally__item b { font-size: var(--step-2); line-height: 1.1; color: var(--lx-tone); font-variant-numeric: tabular-nums; }
.lx-tally__item span { font-size: var(--step--1); font-weight: 700; color: var(--text-muted); }
.lx-tally__item--again, .lx-grade--again { --lx-tone: var(--danger); --lx-tone-soft: var(--danger-soft); }
.lx-tally__item--hard, .lx-grade--hard { --lx-tone: var(--warning); --lx-tone-soft: var(--warning-soft); }
.lx-tally__item--good, .lx-grade--good { --lx-tone: var(--success); --lx-tone-soft: var(--success-soft); }
.lx-tally__item--easy, .lx-grade--easy { --lx-tone: var(--info); --lx-tone-soft: var(--info-soft); }

/* Done panel (flashcards) */
.lx-done, .lx-finish {
  display: grid; justify-items: center; text-align: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
}
.lx-done:focus, .lx-finish:focus { outline: none; }
.lx-done > *, .lx-finish > * { margin: 0; }
.lx-done__badge {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--success-soft); color: var(--success);
  animation: lx-pop var(--dur-slow) var(--ease) both;
}
.lx-done__badge .icon, .lx-done__badge svg { width: 34px; height: 34px; stroke-width: 2.6; }
.lx-done__title, .lx-finish__title { font-size: var(--step-3); }
.lx-done__lead, .lx-finish__lead { font-size: var(--step-1); color: var(--text); max-width: 34ch; }
.lx-done__note, .lx-finish__next { color: var(--text-muted); max-width: 46ch; }
.lx-done__actions, .lx-finish__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }

/* ── Flashcards ───────────────────────────────────────────────────────── */
/* QA: no wrap — the counts wrap inside their own box instead of pushing the buttons to a new row
   (the row used to jump in height after the first grade, when "· 1 learning" appeared). */
.lx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: nowrap; }
.lx-fc__meta { flex: 1 1 12ch; min-width: 0; margin: 0; color: var(--text-muted); font-size: var(--step--1); font-weight: 700; }
.lx-toolbar__btns { flex: none; }
.lx-toolbar__btns { display: flex; gap: var(--space-1); margin-left: auto; }
.lx-toolbar__btns .btn[aria-pressed="true"] { --btn-bg: var(--primary-soft); --btn-fg: var(--primary-strong); }
.lx-fc__host { margin-top: calc(var(--space-3) - var(--lx-gap)) !important; }
.lx-fc > .lx-toolbar, .lx-fc > .lx-intro, .lx-fc > .lx-title { width: 100%; max-width: 680px; margin-inline: auto; }

.lx-study { display: grid; gap: var(--space-3); max-width: 680px; margin-inline: auto; }
.lx-study__top { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; }
.lx-study__count { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: var(--step--1); min-width: 4.5ch; }
.lx-study__top .btn { margin-right: calc(-1 * var(--space-2)); }

.lx-study__stage { perspective: 1800px; }
.lx-flip {
  position: relative; cursor: pointer; -webkit-user-select: none; user-select: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lx-flip.is-flipped { cursor: default; -webkit-user-select: text; user-select: text; }
.lx-flip.lx-enter { opacity: 0; transform: translateY(14px) scale(.985); }
.lx-flip.lx-leave { opacity: 0; transition-duration: 200ms; }
.lx-flip.lx-leave--again { transform: translateX(-28px) rotate(-1.5deg); }
.lx-flip.lx-leave--hard { transform: translateY(18px); }
.lx-flip.lx-leave--good, .lx-flip.lx-leave--easy { transform: translateX(28px) rotate(1.5deg); }
.lx-flip__inner {
  display: grid; transform-style: preserve-3d;
  transition: transform var(--dur-slow) cubic-bezier(.3, .9, .3, 1.08);
}
.lx-flip.is-flipped .lx-flip__inner { transform: rotateY(180deg); }
.lx-face {
  grid-area: 1 / 1; position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  min-height: clamp(280px, 46vh, 440px);
  padding: var(--space-4) var(--space-5) var(--space-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.lx-face--front { visibility: visible; transition: visibility 0s linear calc(var(--dur-slow) / 2); }
.lx-face--back { transform: rotateY(180deg); visibility: hidden; transition: visibility 0s linear calc(var(--dur-slow) / 2);
  background: linear-gradient(var(--primary), var(--primary)) top / 100% 5px no-repeat, var(--surface); }
.lx-flip.is-flipped .lx-face--front { visibility: hidden; pointer-events: none; }
.lx-flip.is-flipped .lx-face--back { visibility: visible; }
.lx-flip:not(.is-flipped) .lx-face--back { pointer-events: none; }
.lx-flip:not(.is-flipped):hover .lx-face--front { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.lx-flip:not(.is-flipped):active .lx-flip__inner { transform: scale(.985); transition-duration: var(--dur-fast); }

.lx-face__eyebrow { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-height: 28px; padding-right: 40px; }
.lx-face__side { font-size: var(--step--1); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.lx-face--back .lx-face__side { color: var(--primary); }
.lx-face__eyebrow .chip { min-height: 24px; font-size: .76rem; }
.lx-face__q { margin: var(--space-2) 0 0; padding-bottom: var(--space-2); border-bottom: 1px dashed var(--border); font-size: .88rem; line-height: 1.4; color: var(--text-muted); }
.lx-face__q b, .lx-face__q strong { background: none; font-weight: 700; }
.lx-face__speak { position: absolute; top: 6px; right: 6px; color: var(--text-muted); }
.lx-face__content { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.lx-face--front .lx-face__content { justify-content: center; align-items: center; text-align: center; }
.lx-face--front .lx-face__body {
  font-family: var(--font-display); font-optical-sizing: auto; font-weight: 560;
  font-size: var(--step-3); line-height: 1.18; letter-spacing: -0.01em; text-wrap: balance; max-width: 22ch;
}
.lx-face--front .lx-face__body:has(ul, ol, p + p) { font-family: var(--font-body); font-size: var(--step-1); font-weight: 600; max-width: 40ch; text-align: left; }
.lx-face--back .lx-face__body { font-size: var(--step-1); line-height: 1.45; }
.lx-face__body > :last-child { margin-bottom: 0; }
.lx-face__body p, .lx-face__body ul, .lx-face__body ol { max-width: 52ch; }
.lx-face__body b, .lx-face__body strong { color: var(--text); }
.lx-face__visual { width: 100%; max-width: 440px; align-self: center; }
.lx-face__visual .visual-stage { background: var(--ill-bg); border-radius: var(--radius); overflow: hidden; }
.lx-face--front .lx-face__visual { max-height: 42vh; }
.lx-face__tap {
  display: inline-flex; align-items: center; gap: 6px; align-self: center;
  color: var(--text-muted); font-size: var(--step--1); font-weight: 700;
}
.lx-face__tap .icon { width: 16px; height: 16px; }

.lx-study__ask { margin: 0 auto; min-height: 1.4em; text-align: center; color: var(--text-muted); font-weight: 700; font-size: var(--step--1); visibility: hidden; }
.lx-study__ask.is-on { visibility: visible; }
.lx-study__actions { min-height: 66px; display: grid; align-items: stretch; }
.lx-study__actions[data-state="ask"] .btn { min-height: 62px; font-size: 1.08rem; }

.lx-grades { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); animation: lx-pop var(--dur) var(--ease) both; }
.lx-grade {
  display: grid; place-content: center; justify-items: center; gap: 1px;
  min-height: 62px; padding: 6px 4px; border-radius: var(--radius);
  background: var(--lx-tone-soft); color: var(--text);
  border: 1.5px solid color-mix(in srgb, var(--lx-tone) 38%, transparent);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--lx-tone) 30%, transparent);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  touch-action: manipulation;
}
.lx-grade:hover { background: color-mix(in srgb, var(--lx-tone-soft) 80%, var(--lx-tone)); }
.lx-grade:active { transform: translateY(2px) scale(.97); box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--lx-tone) 30%, transparent); }
.lx-grade__label { font-weight: 800; font-size: 1rem; color: var(--lx-tone); }
.lx-grade__hint { font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; min-height: 1.2em; }
:root[data-theme="dark"] .lx-grade__label { color: var(--lx-tone); }

/* ── Review page ──────────────────────────────────────────────────────── */
.lx-rv { max-width: 720px; margin-inline: auto; }
.lx-rv__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.lx-rv__head .eyebrow { margin-bottom: var(--space-1); }
.lx-rv__title { margin: 0; }
.lx-streak {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 40px; padding: 4px 14px 4px 10px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  font-size: var(--step--1); color: var(--text-muted); font-weight: 700;
}
.lx-streak b { font-size: 1.2rem; color: var(--text); font-variant-numeric: tabular-nums; }
.lx-streak .icon { color: var(--text-muted); }
.lx-streak.is-today { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.lx-streak.is-today .icon { color: var(--accent); fill: color-mix(in srgb, var(--accent) 30%, transparent); }
@media (max-width: 420px) { .lx-streak span { display: none; } .lx-streak { padding-right: 12px; } }

.lx-rv__controls { display: grid; gap: var(--space-3); }
.lx-rv__modes { max-width: 420px; }
.lx-rv__modes button .icon { width: 18px; height: 18px; }
.lx-rv__filter { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); }
.lx-rv__filterlabel { font-weight: 700; color: var(--text-muted); font-size: var(--step--1); }
.lx-rv__filter .select { font-weight: 650; }
@media (min-width: 720px) { .lx-rv__controls { grid-template-columns: auto 1fr; align-items: center; } }

.lx-skel { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.lx-skel span { height: 18px; border-radius: 9px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: lx-shimmer 1.2s linear infinite; }
.lx-skel span:nth-child(1) { width: 60%; height: 44px; }
.lx-skel span:nth-child(3) { width: 40%; }
@keyframes lx-shimmer { to { background-position: -200% 0; } }

.lx-ready { display: grid; gap: var(--space-4); padding: var(--space-5); }
.lx-ready > * { margin: 0; }
.lx-ready__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent-soft); color: var(--accent); }
.lx-ready__title { font-size: var(--step-2); }
.lx-ready__meta { color: var(--text-muted); font-weight: 650; text-align: center; }
.lx-ready__note { color: var(--text-muted); font-size: .95rem; }
.lx-ready__pick { display: flex; align-items: center; gap: var(--space-2); color: var(--primary); font-weight: 700; }
.lx-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.lx-num { display: grid; justify-items: center; padding: var(--space-3) var(--space-2); border-radius: var(--radius); background: var(--surface-2); }
.lx-num b { font-family: var(--font-display); font-size: var(--step-4); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.lx-num span { font-size: var(--step--1); font-weight: 750; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.lx-num--due b { color: var(--primary); }
.lx-num--learn b { color: var(--warning); }
.lx-num--new b { color: var(--info); }

.lx-how { border-top: 1px solid var(--border); padding-top: var(--space-3); color: var(--text-muted); }
.lx-how summary { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-weight: 700; font-size: .95rem; min-height: var(--tap); list-style: none; }
.lx-how summary::-webkit-details-marker { display: none; }
.lx-how[open] summary { color: var(--text); }
.lx-how ul { margin: var(--space-2) 0 0; font-size: .95rem; }
.lx-how li b { color: var(--text); }

.lx-empty-state { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) var(--space-4); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.lx-empty-state > * { margin: 0; }
.lx-empty-state p { max-width: 42ch; color: var(--text-muted); }
.lx-empty-state__art { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); }
.lx-empty-state.is-ok .lx-empty-state__art { background: var(--success-soft); color: var(--success); }
.lx-empty-state__title { font-size: var(--step-2); }
.lx-empty-state__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.lx-empty-state .lx-how { justify-self: stretch; text-align: left; margin-top: var(--space-3); }

.lx-rv__sessionlabel { margin: 0 0 var(--space-2); display: flex; justify-content: center; }
.lx-finish__flame { position: relative; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--surface-2); color: var(--text-muted); }
.lx-finish__flame.is-lit { background: var(--accent-soft); color: var(--accent); animation: lx-pop var(--dur-slow) var(--ease) both; }
.lx-finish__flame.is-lit svg { fill: color-mix(in srgb, var(--accent) 25%, transparent); }
.lx-finish__flame b { position: absolute; bottom: -6px; right: -6px; min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0 8px; border-radius: 18px; background: var(--accent); color: var(--accent-contrast); font-size: 1.05rem; border: 3px solid var(--surface); }
.lx-finish__flame:not(.is-lit) b { background: var(--text-muted); }
.lx-finish__streak { font-weight: 750; color: var(--accent); }

/* ── Quiz ─────────────────────────────────────────────────────────────── */
.lx-quiz { max-width: 720px; }
.lx-quiz__top { display: grid; gap: var(--space-2); }
.lx-quiz__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.lx-quiz__count { font-weight: 750; color: var(--text-muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; margin-right: auto; }
.lx-q.lx-enter, .lx-interstitial.lx-enter, .lx-results.lx-enter { opacity: 0; transform: translateX(16px); }
.lx-q { display: grid; gap: var(--space-3); }
.lx-q__prompt { font-size: var(--step-1); font-weight: 650; line-height: 1.4; }
.lx-q__prompt:focus { outline: none; }
.lx-q__prompt > :last-child { margin-bottom: 0; }
.lx-q__visual { max-width: 480px; }
.lx-q__visual .visual-stage { background: var(--ill-bg); border-radius: var(--radius); overflow: hidden; }
.lx-q__hint { margin: 0; font-size: var(--step--1); font-weight: 750; letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; }
.lx-choices { display: grid; gap: var(--space-2); }
.lx-choices--tf { grid-template-columns: 1fr 1fr; }
.lx-choice {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3);
  min-height: 56px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-3);
  border-radius: var(--radius); border: 1.5px solid var(--border-strong); background: var(--surface);
  cursor: pointer; line-height: 1.35;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  touch-action: manipulation;
}
.lx-choice:hover { border-color: var(--primary); }
.lx-choice:active { transform: scale(.985); }
.lx-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lx-choice:has(.lx-choice__input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.lx-choice__key {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--surface-2); color: var(--text-muted); font-weight: 800; font-size: .9rem;
  border: 1.5px solid var(--border);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lx-choices--multi .lx-choice__key { border-radius: 8px; }
.lx-choice__text > :last-child { margin-bottom: 0; }
.lx-choice__mark { display: grid; justify-items: end; min-width: 24px; }
.lx-choice__note { font-size: .74rem; font-weight: 800; color: var(--success); white-space: nowrap; }
.lx-choice:has(.lx-choice__input:checked):not(.is-correct, .is-wrong, .is-missed) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary) inset; }
.lx-choice:has(.lx-choice__input:checked):not(.is-correct, .is-wrong, .is-missed) .lx-choice__key { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); }
.lx-choices--tf .lx-choice { grid-template-columns: auto 1fr auto; font-weight: 750; font-size: 1.05rem; min-height: 64px; }
.lx-choice:has(.lx-choice__input:disabled) { cursor: default; transform: none; }
.lx-choice.is-correct { border-color: var(--success); background: var(--success-soft); box-shadow: 0 0 0 1px var(--success) inset; }
.lx-choice.is-correct .lx-choice__key { background: var(--success); border-color: var(--success); color: #fff; }
.lx-choice.is-correct .lx-choice__mark { color: var(--success); }
.lx-choice.is-wrong { border-color: var(--danger); background: var(--danger-soft); box-shadow: 0 0 0 1px var(--danger) inset; animation: lx-shake 360ms var(--ease) both; }
.lx-choice.is-wrong .lx-choice__key { background: var(--danger); border-color: var(--danger); color: #fff; }
.lx-choice.is-wrong .lx-choice__mark { color: var(--danger); }
.lx-choice.is-missed { border-style: dashed; border-color: var(--success); background: color-mix(in srgb, var(--success-soft) 50%, var(--surface)); }
.lx-choice.is-missed .lx-choice__mark { color: var(--success); }
.lx-choice.is-dim { opacity: .55; }
:root[data-theme="dark"] .lx-choice.is-correct .lx-choice__key, :root[data-theme="dark"] .lx-choice.is-wrong .lx-choice__key { color: var(--bg); }
@keyframes lx-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.lx-feedback { border-radius: var(--radius); padding: var(--space-3) var(--space-4); background: var(--surface-2); border-left: 5px solid var(--text-muted); }
.lx-feedback--ok { background: var(--success-soft); border-left-color: var(--success); }
.lx-feedback--bad { background: var(--danger-soft); border-left-color: var(--danger); }
.lx-feedback__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: 1.08rem; }
.lx-feedback__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--success); }
.lx-feedback--bad .lx-feedback__icon { background: var(--danger); }
.lx-feedback__icon .icon { width: 18px; height: 18px; }
.lx-feedback__aside { margin-left: auto; font-size: var(--step--1); color: var(--text-muted); font-weight: 650; }
.lx-feedback__answer { margin: var(--space-2) 0 0; }
.lx-feedback__body { margin-top: var(--space-2); }
.lx-feedback__body > :last-child { margin-bottom: 0; }
:root[data-theme="dark"] .lx-feedback__icon { color: var(--bg); }

.lx-quiz__actions { min-height: 58px; }
.lx-quiz__twin { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.lx-quiz__twin > .btn-primary { flex: 1 1 220px; }
@media (max-width: 959px) {
  .lx-quiz__actions, .lx-study__actions, .lx-seq__actions:has(.btn-primary:not(:disabled)) {
    position: sticky; bottom: calc(env(safe-area-inset-bottom) + var(--space-3)); z-index: 5;
  }
  .lx-quiz__actions::before, .lx-seq__actions:has(.btn-primary:not(:disabled))::before {
    content: ''; position: absolute; inset: -14px -16px -16px; z-index: -1;
    background: linear-gradient(transparent, var(--bg) 40%); pointer-events: none;
  }
  /* A disabled "Check" (nothing picked yet) stays in the flow instead of floating over the last choices. */
  .lx-quiz__actions:has(> .btn-primary:disabled:only-child) { position: static; }
  .lx-quiz__actions:has(> .btn-primary:disabled:only-child)::before { display: none; }
  /* Pages that keep the tab bar (review, atlas, home…): sit the sticky buttons above it, not under it. */
  body:not([data-route="section"]) :is(.lx-quiz__actions, .lx-study__actions, .lx-seq__actions:has(.btn-primary:not(:disabled))) {
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-2));
  }
}

.lx-interstitial { display: grid; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--info-soft); }
.lx-interstitial > * { margin: 0; }
.lx-interstitial:focus { outline: none; }
.lx-interstitial__title { font-size: var(--step-2); }

.lx-results { display: grid; gap: var(--space-4); }
.lx-results:focus { outline: none; }
.lx-results__hero { display: flex; align-items: center; gap: var(--space-4); }
.lx-results__title { font-size: var(--step-2); margin-bottom: var(--space-1); }
.lx-results__lead { color: var(--text-muted); margin: 0; }
.lx-ring {
  --p: 0; --c: var(--primary);
  position: relative; flex: none; width: 112px; height: 112px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 360deg), color-mix(in srgb, var(--text) 10%, transparent) 0);
  display: grid; place-items: center;
}
.lx-ring::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--bg); }
.lx-ring.is-pass { --c: var(--success); }
.lx-ring.is-fail { --c: var(--warning); }
.lx-ring__num { position: relative; font-family: var(--font-display); font-size: var(--step-3); font-weight: 650; font-variant-numeric: tabular-nums lining-nums; }
.lx-review-missed h4 { margin-bottom: var(--space-2); }
.lx-missed { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: var(--space-2); }
.lx-missed summary { padding: var(--space-3) var(--space-4); cursor: pointer; font-weight: 650; list-style: none; display: flex; gap: var(--space-2); }
.lx-missed summary::-webkit-details-marker { display: none; }
.lx-missed summary::before { content: '›'; font-weight: 800; color: var(--text-muted); transition: transform var(--dur-fast) var(--ease); }
.lx-missed[open] summary::before { transform: rotate(90deg); }
.lx-missed summary > span { flex: 1; min-width: 0; }
.lx-missed summary > span > :last-child { margin-bottom: 0; }
.lx-missed__ans, .lx-missed__exp { padding: 0 var(--space-4); }
.lx-missed__ans { color: var(--success); }
.lx-missed__exp { padding-bottom: var(--space-3); color: var(--text); }

/* ── Checklist ────────────────────────────────────────────────────────── */
.lx-launch {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4); align-items: center;
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--primary-soft), color-mix(in srgb, var(--primary-soft) 40%, var(--surface)));
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
}
.lx-launch__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--primary); color: var(--primary-contrast); }
.lx-launch__title { font-size: var(--step-1); margin: 0 0 2px; }
.lx-launch__body p { margin: 0; font-size: .95rem; }
.lx-launch > .btn { grid-column: 1 / -1; }
@media (min-width: 640px) { .lx-launch { grid-template-columns: auto 1fr auto; } .lx-launch > .btn { grid-column: auto; } }
.lx-cl__last { margin-top: var(--space-2) !important; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--text-muted); font-size: var(--step--1) !important; }
.lx-cl__last:empty { display: none; }
.lx-pill { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: var(--radius-pill); font-size: .74rem; font-weight: 850; letter-spacing: .06em; }
.lx-pill--ok { background: var(--success); color: #fff; }
.lx-pill--bad { background: var(--danger); color: #fff; }
:root[data-theme="dark"] .lx-pill--ok, :root[data-theme="dark"] .lx-pill--bad { color: var(--bg); }

.lx-badge { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; padding: 1px 8px 1px 6px; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; line-height: 1.6; }
.lx-badge--critical { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.lx-badge .icon { width: 14px; height: 14px; }
.lx-cl__legend { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--step--1); color: var(--text-muted); margin: 0; }
.lx-cl__legend > span:last-child { flex: 1 1 200px; }
.lx-cl__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.lx-cl__title { font-size: var(--step-1); margin: 0; }
.lx-cl__count { font-weight: 750; color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: var(--step--1); }
.lx-cl__list { list-style: none; padding: 0; margin: calc(var(--space-2) - var(--lx-gap)) 0 0 !important; max-width: none; display: grid; gap: var(--space-2); counter-reset: none; }
.lx-cl__item { margin: 0; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.lx-cl__item.is-critical { box-shadow: inset 4px 0 0 var(--danger); }
.lx-cl__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }   /* minmax: long unbreakable words no longer push the page sideways (design QA) */
.lx-cl__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lx-cl__label { display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: var(--space-2) var(--space-3); padding: var(--space-3); cursor: pointer; min-height: 56px; touch-action: manipulation; }
.lx-cl__box {
  display: grid; place-items: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 8px;
  border: 2px solid var(--border-strong); background: var(--surface); color: transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lx-cl__box .icon { width: 20px; height: 20px; transform: scale(.4); transition: transform var(--dur) cubic-bezier(.3, 1.6, .5, 1); }
.lx-cl__label:active .lx-cl__box { transform: scale(.9); }
.lx-cl__num { font-weight: 800; color: var(--text-muted); min-width: 1.6em; font-variant-numeric: tabular-nums; padding-top: 2px; }
.lx-cl__text { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); padding-top: 2px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.lx-cl__label { min-width: 0; }
.lx-cl__input:checked + .lx-cl__label .lx-cl__box { background: var(--success); border-color: var(--success); color: #fff; }
.lx-cl__input:checked + .lx-cl__label .lx-cl__box .icon { transform: scale(1); }
.lx-cl__input:checked + .lx-cl__label .lx-cl__text > span:first-child { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--text-muted) 60%, transparent); }
.lx-cl__input:focus-visible + .lx-cl__label { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: var(--radius); }
.lx-cl__item.is-checked { background: color-mix(in srgb, var(--success-soft) 45%, var(--surface)); }
.lx-cl__more { display: inline-flex; align-items: center; gap: 2px; min-height: var(--tap); padding: 0 var(--space-3); margin-right: var(--space-1); border-radius: var(--radius-pill); color: var(--primary); font-weight: 750; font-size: .9rem; }
.lx-cl__more:hover { background: var(--surface-2); }
.lx-cl__more .icon { transition: transform var(--dur) var(--ease); }
.lx-cl__more[aria-expanded="true"] .icon { transform: rotate(180deg); }
.lx-cl__detail { padding: 0 var(--space-4) var(--space-3) calc(var(--space-3) + 28px + 1.6em + var(--space-3) * 2); color: var(--text-muted); font-size: .95rem; }
.lx-cl__detail > :last-child { margin-bottom: 0; }
@media (max-width: 520px) { .lx-cl__detail { padding-left: var(--space-4); } }
.lx-cl__foot { display: flex; justify-content: flex-end; margin-top: calc(var(--space-2) - var(--lx-gap)) !important; }

/* Partner overlay */
.lx-noscroll, .lx-noscroll body { overflow: hidden; }
.lx-partner {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg); color: var(--text);
  display: flex; justify-content: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  font-size: calc(var(--step-0) * 1.08);
}
.lx-partner.is-open { opacity: 1; transform: none; }
.lx-partner__panel { width: 100%; max-width: 760px; display: flex; flex-direction: column; min-height: 0; height: 100%; }
.lx-partner__bar {
  display: flex; align-items: center; gap: var(--space-2); flex: none;
  padding: calc(env(safe-area-inset-top) + var(--space-2)) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.lx-partner__bar .eyebrow { margin: 0 auto 0 var(--space-2); }
.lx-partner__bar:not(.lx-partner__bar--run) .lx-partner__close { order: 2; }
.lx-partner__status { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-width: 0; }
.lx-partner__clock { font-family: var(--font-mono); font-weight: 700; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.lx-partner__clock.is-near { color: var(--warning); }
.lx-partner__clock.is-over { color: var(--danger); animation: lx-blink 1s steps(2, start) infinite; }
@keyframes lx-blink { to { opacity: .45; } }
.lx-partner__counts { display: flex; gap: var(--space-3); font-weight: 800; font-size: .92rem; font-variant-numeric: tabular-nums; }
.lx-partner__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: var(--space-4) var(--space-3) calc(env(safe-area-inset-bottom) + var(--space-6)); }
.lx-partner__setup { flex: 1; overflow-y: auto; padding: var(--space-5) var(--space-4) calc(env(safe-area-inset-bottom) + var(--space-5)); display: flex; flex-direction: column; gap: var(--space-4); }
.lx-partner__setup > * { margin: 0; }
.lx-partner__title { font-size: var(--step-4); }
.lx-partner__lead { font-size: var(--step-1); font-weight: 700; color: var(--primary); }
.lx-howto { padding-left: 1.4em; display: grid; gap: var(--space-2); font-size: var(--step-1); line-height: 1.4; max-width: none; }
.lx-howto li { margin: 0; }
.lx-howto .lx-muted { font-size: var(--step-0); }
.lx-partner__opts { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.lx-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; font-weight: 700; cursor: pointer; }
.lx-opt .select { width: auto; min-width: 150px; }
.lx-partner__setup > .btn { margin-top: auto; }

.lx-plist { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--space-3); }
.lx-pi {
  margin: 0; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--surface);
  border: 2px solid var(--border); scroll-margin-top: var(--space-4);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), opacity var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lx-pi.is-critical { border-left-width: 6px; border-left-color: var(--danger); }
.lx-pi.is-current { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent), var(--shadow-lg); }
.lx-pi.is-current.is-critical { border-left-color: var(--danger); }
.lx-pi.is-yes { background: color-mix(in srgb, var(--success-soft) 70%, var(--surface)); border-color: color-mix(in srgb, var(--success) 50%, transparent); }
.lx-pi.is-no { background: color-mix(in srgb, var(--danger-soft) 70%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.lx-pi.is-yes:not(.is-current), .lx-pi.is-no:not(.is-current) { box-shadow: none; }
.lx-pi__top { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); }
.lx-pi__num {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--surface-2); font-weight: 850; font-variant-numeric: tabular-nums; font-size: 1rem;
}
.lx-pi.is-yes .lx-pi__num { background: var(--success); color: #fff; }
.lx-pi.is-no .lx-pi__num { background: var(--danger); color: #fff; }
.lx-pi__body { display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.lx-pi__body .lx-badge { justify-self: start; }
.lx-pi__text { margin: 0; font-size: var(--step-2); font-weight: 700; line-height: 1.25; }
.lx-pi__detail { color: var(--text-muted); font-size: var(--step-0); line-height: 1.4; }
.lx-pi__detail > :last-child { margin-bottom: 0; }
.lx-pi__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); }
.lx-mark {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 60px; border-radius: var(--radius); font-weight: 850; font-size: 1.12rem;
  border: 2px solid var(--border-strong); background: var(--surface); color: var(--text);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  touch-action: manipulation;
}
.lx-mark .icon { width: 26px; height: 26px; }
.lx-mark:active { transform: scale(.95); }
.lx-mark--yes { color: var(--success); border-color: color-mix(in srgb, var(--success) 50%, transparent); }
.lx-mark--no { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.lx-mark--yes[aria-pressed="true"] { background: var(--success); border-color: var(--success); color: #fff; animation: lx-press var(--dur) var(--ease); }
.lx-mark--no[aria-pressed="true"] { background: var(--danger); border-color: var(--danger); color: #fff; animation: lx-press var(--dur) var(--ease); }
:root[data-theme="dark"] .lx-mark[aria-pressed="true"], :root[data-theme="dark"] .lx-pi.is-yes .lx-pi__num, :root[data-theme="dark"] .lx-pi.is-no .lx-pi__num { color: var(--bg); }
@keyframes lx-press { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }
.lx-partner__end { margin-top: var(--space-5); }
.lx-partner__end--twin { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 560px) { .lx-partner__end--twin { grid-template-columns: 2fr 1fr; } }

.lx-confirm { position: absolute; inset: 0; z-index: 2; display: grid; place-items: end center; padding: var(--space-4); background: color-mix(in srgb, #000 40%, transparent); animation: lx-fade var(--dur) var(--ease) both; }
@media (min-width: 640px) { .lx-confirm { place-items: center; } }
.lx-confirm__card { width: 100%; max-width: 440px; padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); animation: lx-pop var(--dur) var(--ease) both; margin-bottom: env(safe-area-inset-bottom); }
.lx-confirm__card h3 { font-size: var(--step-2); }
.lx-confirm__card p { color: var(--text-muted); }
.lx-confirm__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-4); }
.lx-confirm__btns .btn { white-space: normal; min-height: 52px; line-height: 1.2; }
@keyframes lx-fade { from { opacity: 0; } }

.lx-verdict { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-5) var(--space-4) var(--space-4); text-align: center; }
.lx-verdict__icon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; color: #fff; background: var(--success); box-shadow: 0 0 0 10px var(--success-soft); margin-bottom: var(--space-3); }
.lx-verdict__icon .icon { width: 46px; height: 46px; }
.lx-verdict.is-fail .lx-verdict__icon { background: var(--danger); box-shadow: 0 0 0 10px var(--danger-soft); }
.lx-verdict__word { margin: 0; font-family: var(--font-display); font-size: var(--step-5); letter-spacing: .04em; color: var(--success); }
.lx-verdict.is-fail .lx-verdict__word { color: var(--danger); font-size: var(--step-3); letter-spacing: .02em; }
.lx-verdict__why { margin: 0; font-weight: 700; font-size: var(--step-1); }
.lx-verdict__next { margin: var(--space-2) auto 0; max-width: 34ch; font-size: .95rem; font-weight: 600; color: var(--text-muted); }
:root[data-theme="dark"] .lx-verdict__icon { color: var(--bg); }
.lx-missed-block { margin-top: var(--space-5); }
.lx-missed-block h3 { font-size: var(--step-1); font-family: var(--font-body); font-weight: 800; }
.lx-missed-list { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--space-2); }
.lx-missed-item { margin: 0; padding: var(--space-3); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.lx-missed-item.is-critical { border-left: 5px solid var(--danger); }
.lx-missed-item__head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-1) var(--space-3); }
.lx-missed-item__head .lx-pi__num { width: 30px; height: 30px; font-size: .9rem; background: var(--danger-soft); color: var(--danger); }
.lx-missed-item__head .lx-badge { grid-column: 2; justify-self: start; }
.lx-missed-item__detail { margin: var(--space-2) 0 0 calc(30px + var(--space-3)); color: var(--text-muted); }
.lx-missed-item__detail > :last-child { margin-bottom: 0; }
.lx-history { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.lx-history li { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.lx-history li > :nth-child(2) { font-weight: 800; min-width: 3.5ch; }

/* ── Cases ────────────────────────────────────────────────────────────── */
.lx-cases__how { color: var(--text-muted); font-size: .95rem; margin: 0; }
.lx-cases__how b { color: var(--text); }
.lx-tabs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: 2px; margin-inline: -2px; }
.lx-tabs::-webkit-scrollbar { display: none; }
.lx-tab {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--radius-pill);
  background: var(--surface); border: 1.5px solid var(--border-strong); font-weight: 750; color: var(--text-muted);
}
.lx-tab[aria-selected="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.lx-tab__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .35; }
.lx-tab.is-done .lx-tab__dot { background: var(--success); opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 30%, transparent); }
.lx-case { display: grid; gap: var(--space-4); }
.lx-case__head > * { margin: 0; }
.lx-case__head .eyebrow { margin-bottom: var(--space-1); }
.lx-case__title { font-size: var(--step-2); }
.lx-case__title:focus { outline: none; }
.lx-case__setup {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: inset 4px 0 0 var(--info);
}
.lx-case__chart { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--info-soft); color: var(--info); }
.lx-case__setuptext > :last-child { margin-bottom: 0; }
.lx-case__prompts { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--space-3); }
.lx-prompt { margin: 0; padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); display: grid; gap: var(--space-3); box-shadow: var(--shadow); }
.lx-prompt.lx-enter { opacity: 0; transform: translateY(12px); }
.lx-prompt.is-done { box-shadow: none; }
.lx-prompt__q { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); font-weight: 650; font-size: var(--step-1); line-height: 1.35; }
.lx-prompt__q > div > :last-child { margin-bottom: 0; }
.lx-prompt__q:focus { outline: none; }
.lx-prompt__num { display: grid; place-items: center; min-width: 38px; height: 30px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-strong); font-size: .85rem; font-weight: 850; }
.lx-prompt__commit { display: grid; gap: var(--space-2); }
.lx-prompt__commit .btn { justify-self: start; }
.lx-prompt__label { font-weight: 700; font-size: var(--step--1); color: var(--text-muted); }
.lx-input {
  width: 100%; min-height: var(--tap); padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-2);
  line-height: 1.45; resize: vertical;
}
.lx-input:focus { background: var(--surface); border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.lx-input--area { min-height: 68px; field-sizing: content; max-height: 240px; }
.lx-prompt__reveal { display: grid; gap: var(--space-3); }
.lx-prompt__reveal .eyebrow { margin-bottom: var(--space-1); }
.lx-yours { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface-2); }
.lx-yours > * { margin: 0; }
.lx-yours__text { white-space: pre-wrap; }
.lx-model { padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--success-soft); border-left: 5px solid var(--success); }
.lx-model .eyebrow { color: var(--success); }
.lx-model__body > :last-child { margin-bottom: 0; }
.lx-selfrate__ask { margin: 0; font-weight: 750; font-size: var(--step--1); color: var(--text-muted); }
.lx-selfrate { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.lx-rate { min-height: 48px; border-radius: var(--radius); border: 1.5px solid var(--border-strong); background: var(--surface); font-weight: 750; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); touch-action: manipulation; }
.lx-rate:active { transform: scale(.96); }
.lx-rate--nailed { --t: var(--success); --ts: var(--success-soft); }
.lx-rate--partly { --t: var(--warning); --ts: var(--warning-soft); }
.lx-rate--missed { --t: var(--danger); --ts: var(--danger-soft); }
.lx-rate:hover { border-color: var(--t); }
.lx-rate[aria-pressed="true"] { background: var(--ts); border-color: var(--t); color: var(--t); box-shadow: 0 0 0 1px var(--t) inset; }
.lx-prompt.is-done[data-rated] .lx-rate[aria-pressed="false"] { opacity: .6; }
.lx-case__summary { display: grid; gap: var(--space-3); }
.lx-case__next { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ── Sequence ─────────────────────────────────────────────────────────── */
.lx-seq__how { margin: 0; color: var(--text-muted); }
.lx-seq__how b { color: var(--text); }
.lx-seq__board { display: grid; gap: var(--space-4); }
@media (min-width: 900px) {
  .lx-seq__board { grid-template-columns: 1fr 1fr; align-items: start; }
  .lx-seq__col { position: sticky; top: var(--space-4); }
  .lx-seq__col--answer { order: 2; }
}
.lx-seq__col { border-radius: var(--radius-lg); padding: var(--space-3); transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.lx-seq__col--answer { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.lx-seq__col--pool { background: var(--surface-2); }
.lx-seq__col.is-over { box-shadow: 0 0 0 3px var(--primary) inset; }
.lx-seq__col--pool.is-empty { padding-block: var(--space-2); }
@media (pointer: coarse) { .lx-seq__col--pool.is-empty { display: none; } }   /* touch: nothing to drag back into, so no empty box (student QA) */
.lx-seq__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin: 0 var(--space-1) var(--space-2); font-family: var(--font-body); font-size: var(--step--1); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.lx-seq__tally { font-variant-numeric: tabular-nums; letter-spacing: 0; }
.lx-seq__list { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--space-2); }
.lx-tile { position: relative; margin: 0; display: flex; align-items: stretch; border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--border-strong); box-shadow: 0 1px 0 var(--border); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.lx-tile__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); min-height: 54px; padding: var(--space-2) var(--space-3); text-align: left; border-radius: inherit; line-height: 1.3; touch-action: manipulation; }
.lx-tile__main:active { transform: scale(.985); }
.lx-tile__main:disabled { cursor: default; transform: none; color: inherit; }
.lx-tile__text { flex: 1; min-width: 0; font-weight: 600; }
.lx-tile__num { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: var(--primary-contrast); font-weight: 850; font-size: .9rem; font-variant-numeric: tabular-nums; }
.lx-tile--pool { cursor: grab; }
.lx-tile--pool .lx-tile__main::after { content: '+'; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--primary); font-weight: 700; font-size: 1.3rem; background: var(--primary-soft); }
.lx-tile--pool:hover { border-color: var(--primary); }
.lx-tile--placed { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.lx-tile--slot { border-style: dashed; background: transparent; box-shadow: none; color: var(--text-muted); align-items: center; gap: var(--space-3); min-height: 54px; padding: var(--space-2) var(--space-3); }
.lx-tile--slot .lx-tile__num { background: transparent; color: var(--text-muted); border: 2px dashed var(--border-strong); }
.lx-tile--slot .lx-tile__text { font-weight: 650; font-style: italic; }
.lx-tile__nudge { display: flex; flex: none; align-items: stretch; border-left: 1px solid var(--border); }
.lx-nudge { display: grid; place-items: center; width: 40px; min-height: 44px; color: var(--text-muted); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.lx-nudge:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.lx-nudge:hover { background: var(--surface-2); color: var(--primary); }
.lx-nudge:disabled { opacity: .25; cursor: default; background: none; }
.lx-nudge .icon { width: 20px; height: 20px; }
.lx-tile.is-dragging { opacity: .35; }
.lx-tile.is-hint { border-color: var(--warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 40%, transparent); }
.lx-tile.is-hint .lx-tile__num { background: var(--warning); color: var(--surface); }
.lx-tile.is-ok { border-color: var(--success); background: color-mix(in srgb, var(--success-soft) 70%, var(--surface)); }
.lx-tile.is-ok .lx-tile__num { background: var(--success); color: #fff; }
.lx-tile.is-bad { border-color: var(--danger); background: color-mix(in srgb, var(--danger-soft) 75%, var(--surface)); animation: lx-shake 360ms var(--ease) both; }
.lx-tile.is-bad .lx-tile__num { background: var(--danger); color: #fff; }
.lx-tile__mark { flex: none; display: grid; place-items: center; }
.lx-tile.is-ok .lx-tile__mark { color: var(--success); }
.lx-tile.is-bad .lx-tile__mark { color: var(--danger); }
:root[data-theme="dark"] .lx-tile.is-ok .lx-tile__num, :root[data-theme="dark"] .lx-tile.is-bad .lx-tile__num { color: var(--bg); }
.lx-seq__drop { height: 4px; margin: -3px 0 !important; border-radius: 2px; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.lx-seq__allin { margin: 0; padding: var(--space-2); text-align: center; color: var(--text-muted); font-weight: 700; font-size: var(--step--1); }
.lx-seq__allin:empty { display: none; }
.lx-seq__actions { display: flex; gap: var(--space-2); align-items: center; }
.lx-seq__actions .btn-primary { flex: 1; min-height: 52px; }
.lx-seq__result { display: grid; gap: var(--space-3); }
.lx-seq__result:empty { display: none; }
.lx-seq__after { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.lx-seq__answerkey { border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.lx-seq__answerkey summary { padding: var(--space-3) var(--space-4); cursor: pointer; font-weight: 750; color: var(--primary); min-height: var(--tap); }
.lx-seq__key { list-style: none; margin: 0; padding: 0 var(--space-3) var(--space-3); max-width: none; display: grid; gap: 6px; }
.lx-seq__key li { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center; padding: 6px var(--space-2); border-radius: var(--radius-sm); }
.lx-seq__key li.is-moved { background: var(--warning-soft); font-weight: 700; }
.lx-seq__keynum { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); font-weight: 800; font-size: .85rem; }

/* ── Reduced motion ───────────────────────────────────────────────────── */
:root.reduce-motion .lx-flip__inner, :root.reduce-motion .lx-flip.is-flipped .lx-flip__inner { transform: none !important; transition: none !important; }
:root.reduce-motion .lx-face--back { transform: none; }
:root.reduce-motion .lx-face, :root.reduce-motion .lx-flip { transition: none !important; }
:root.reduce-motion .lx-enter { transform: none !important; }
:root.reduce-motion .lx-flip.lx-leave { transform: none !important; }
:root.reduce-motion .lx-pop, :root.reduce-motion .lx-grades, :root.reduce-motion .lx-choice.is-wrong, :root.reduce-motion .lx-tile.is-bad,
:root.reduce-motion .lx-mark, :root.reduce-motion .lx-done__badge, :root.reduce-motion .lx-finish__flame, :root.reduce-motion .lx-partner__clock.is-over { animation: none !important; }
:root.reduce-motion .lx-partner { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lx-flip__inner, .lx-flip.is-flipped .lx-flip__inner { transform: none !important; transition: none !important; }
  .lx-face--back { transform: none; }
  .lx-face, .lx-flip { transition: none !important; }
  .lx-enter, .lx-flip.lx-leave, .lx-partner { transform: none !important; }
  .lx-pop, .lx-grades, .lx-choice.is-wrong, .lx-tile.is-bad, .lx-mark, .lx-done__badge, .lx-finish__flame, .lx-partner__clock.is-over, .lx-skel span { animation: none !important; }
}

/* Same dark-only fixes when the theme is "Auto" and the device is in dark mode (QA: these were missing). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lx-grade__label { color: var(--lx-tone); }
  :root:not([data-theme="light"]) .lx-choice.is-correct .lx-choice__key, :root:not([data-theme="light"]) .lx-choice.is-wrong .lx-choice__key { color: var(--bg); }
  :root:not([data-theme="light"]) .lx-feedback__icon { color: var(--bg); }
  :root:not([data-theme="light"]) .lx-pill--ok, :root:not([data-theme="light"]) .lx-pill--bad { color: var(--bg); }
  :root:not([data-theme="light"]) .lx-mark[aria-pressed="true"], :root:not([data-theme="light"]) .lx-pi.is-yes .lx-pi__num, :root:not([data-theme="light"]) .lx-pi.is-no .lx-pi__num { color: var(--bg); }
  :root:not([data-theme="light"]) .lx-verdict__icon { color: var(--bg); }
  :root:not([data-theme="light"]) .lx-tile.is-ok .lx-tile__num, :root:not([data-theme="light"]) .lx-tile.is-bad .lx-tile__num { color: var(--bg); }
}

/* Cram: "Include the muscle O/I/N/A cards" (module/unit crams whose modules have muscles sections). */
.lx-rv__inc label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3); border-radius: var(--radius); background: var(--surface-2); cursor: pointer; }
.lx-rv__inc input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--primary); }
.lx-rv__inc span { display: flex; flex-direction: column; gap: 2px; }
.lx-rv__inc small { font-size: .88rem; color: var(--text-muted); line-height: 1.4; }
.lx-rv__inc[hidden] { display: none; }