/* 17-learn.css — the new Learn (interactive exercise) page.
 *
 * Page-scoped (loaded only by learn/subject.html and learn/lesson.html). The lesson
 * page also links 16-code.css for the shared .code-* step scaffold (steps / Continue
 * / prose); this file adds the subject-page accordion and the exercise widgets (.lx-*).
 * Theme: the site cyan accent, to stay optically close to the Know page. */

:root {
  --lx-accent: 34, 211, 238;   /* cyan-400 */
  --lx-pass: 16, 185, 129;     /* emerald */
  --lx-fail: 244, 63, 94;      /* rose */
}

/* ============================ Subject page: accordion ============================ */

/* Transparent topic container (a bordered frame, no background lightening). */
.lx-topic { overflow: hidden; }
.lx-topic-summary:hover { background: rgba(255, 255, 255, 0.02); }
.lx-topic[open] .lx-chevron { transform: rotate(90deg); }

.lx-topic-num {
  background: rgba(var(--lx-accent), 0.14);
  color: rgb(var(--lx-accent));
}
.lx-topic-count { font-variant-numeric: tabular-nums; }
.lx-sub-num { color: rgba(var(--lx-accent), 0.85); }

/* Lesson row: a flat, full-width list item (no inner box) — hover reveals it. */
.lx-lesson-link {
  border-radius: 0.6rem;
  transition: background 0.12s ease;
}
.lx-lesson-link:hover { background: rgba(var(--lx-accent), 0.08); }
.lx-lesson-link:focus-visible { outline: 2px solid rgba(var(--lx-accent), 0.55); outline-offset: 2px; }
.lx-lesson-badge {
  background: rgba(var(--lx-accent), 0.14);
  color: rgb(var(--lx-accent));
}

/* Flat one-row-per-leaf list. A single-lesson leaf and a coming-soon leaf share this
   rail (number · title · affordance) so titles align into one column; the grouped
   .lx-sub / .lx-lesson-link markup is kept only for the rare >1-lesson / topic_level
   branches. */
.lx-leaf-num {
  min-width: 1.6rem;             /* fixed column so the widest leaf ("10.1") stays aligned */
  flex-shrink: 0;
  color: rgba(var(--lx-accent), 0.85);
  font-variant-numeric: tabular-nums;
}

/* Subtopic rows sit slightly inset from the topic header — a quiet hierarchy indent.
   Applied to the whole row (margin, not padding) so its rounded hover highlight shifts
   in with the number rather than opening a left gutter. */
.lx-leaf { margin-left: 1.5rem; }

/* Ready leaf — the call-to-action: an accent chevron pulls the few real lessons
   forward out of the dim coming-soon tail. */
.lx-leaf--ready { border-radius: 0.6rem; transition: background 0.12s ease; }
.lx-leaf--ready .lx-leaf-go { color: rgb(var(--lx-accent)); transition: transform 0.12s ease; }
.lx-leaf--ready:hover { background: rgba(var(--lx-accent), 0.09); }
.lx-leaf--ready:hover .lx-leaf-go { transform: translateX(2px); }
.lx-leaf--ready:focus-visible { outline: 2px solid rgba(var(--lx-accent), 0.55); outline-offset: 2px; }

/* Coming-soon leaf: present but inactive. */
.lx-leaf--soon { opacity: 0.8; }
.lx-leaf--soon .lx-leaf-num { color: rgba(var(--lx-accent), 0.5); }

/* Recede a fully-unbuilt topic so the one with live lessons is the anchor (mirrors the
   landing page's dim "Coming soon" subjects); lit border on the open (live) topic. */
.lx-topic--empty { opacity: 0.6; }
.lx-topic--empty .lx-topic-num { background: rgba(255, 255, 255, 0.05); color: #94a3b8; }
.lx-topic[open] { border-color: rgba(var(--lx-accent), 0.18); }

/* Tiny per-topic progress meter beside the "available / total" count. */
.lx-topic-meter {
  display: inline-block; width: 2.5rem; height: 4px;
  border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden;
}
.lx-topic-meter-fill { display: block; height: 100%; border-radius: 999px; background: rgb(var(--lx-accent)); }

@media (prefers-reduced-motion: reduce) {
  .lx-leaf--ready, .lx-leaf--ready .lx-leaf-go { transition: none; }
  .lx-leaf--ready:hover .lx-leaf-go { transform: none; }
}

/* ===================== Lesson page: steps + nav ===================== */

.lx-lesson { padding-bottom: 1.5rem; }

/* Prose reads directly on the dark background — NO box (boxes lighten the bg and
   hurt readability). */
.lx-prose > :first-child { margin-top: 0; }
.lx-prose > :last-child { margin-bottom: 0; }

/* Prose font matches the Code lessons exactly — text-lg / leading-8 (18px / 32px,
   Outfit) is set on the .lx-prose div in the template, so do NOT set a font-size
   here (it would override the shared size and make Learn smaller than /code). */
/* List markers sit INSIDE the content rail (padding, not a negative-hanging margin),
   so the bullet dots never poke out left of the headings + figure cards. */
.lx-prose :is(ul, ol) { margin: 0.7rem 0; padding-left: 1.3em; list-style-position: outside; }
.lx-prose li { margin: 0.45rem 0; padding-left: 0.15em; }

/* Lesson images: a mounted figure card — matte mat, padded, softly shadowed, so a
   figure reads as a deliberate panel rather than a photo floating on the dark page.
   Convention (matches handouts): an image on its own line, optionally followed by a
   lone *italic* caption line. */
/* A figure (image + optional caption), wrapped by render_learn_md. The figure is
   left-aligned (shares the text rail); the caption is centred UNDER the image.
   Self-drawn diagrams (PNG) fill the column; photos (JPG) shrink to the image so
   the caption centres under the photo, not the whole column. */
.lx-figure { margin: 1.15rem 0; }
.lx-figure:has(img[src$=".png"]) { width: 100%; }
.lx-figure:has(img[src$=".jpg"]),
.lx-figure:has(img[src$=".jpeg"]) { width: fit-content; max-width: 100%; }
.lx-figure img {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;                     /* the image IS the box — fills it edge-to-edge */
  border-radius: 0.85rem;         /* rounded to match the box corners */
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: #0b1020;            /* matte shows only behind transparent diagrams */
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.30);
}
/* Diagrams fill the column with their aspect ratio LOCKED. height:auto + max-height:none
   override the inherited `.code-prose img { max-height: 18rem }`, which otherwise caps
   the height while width:100% forces the width — squashing the diagram (stretched). */
.lx-figure img[src$=".png"] { width: 100%; height: auto; max-height: none; }
.lx-figure img[src$=".jpg"], .lx-figure img[src$=".jpeg"] { max-height: 16rem; }
.lx-figure figcaption {
  text-align: center;
  color: #8b9bb0;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.4;
  margin-top: 0.3rem;
}

/* Exercise step: a light cyan-bordered frame to say "your turn" — NO background
   fill, so the text stays as readable as the prose. */
.code-step.lx-exercise {
  border: 1px solid rgba(var(--lx-accent), 0.28);
  border-radius: 0.9rem;
  padding: 1.15rem 1.35rem;
  background: transparent;
}

/* Step nav: Back (hides the last step) left, Continue right. */
.lx-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 1.6rem;
}
/* Back + Continue: icon-only circular buttons; Reset sits between them, smaller. */
.lx-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 999px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.lx-back:hover:not(:disabled) { color: #e2e8f0; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.18); }
.lx-back:disabled { opacity: 0; pointer-events: none; }   /* nothing to go back to on step 1 */
.lx-continue { width: 3rem; height: 3rem; padding: 0; gap: 0; justify-content: center; }   /* forward = primary CTA, bigger than Back */
.lx-continue:disabled { opacity: 0.4; cursor: default; }
.lx-back svg { width: 1.05rem; height: 1.05rem; }
.lx-continue svg { width: 1.3rem; height: 1.3rem; }
.lx-reset {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 999px;
  color: #7c8aa0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.lx-reset svg { width: 0.95rem; height: 0.95rem; }
.lx-reset:hover { color: #cbd5e1; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
.lx-reset:disabled { opacity: 0; pointer-events: none; }   /* nothing to reset on step 1 */

/* ============================ Lesson page: exercises ============================ */

.lx-practice-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(var(--lx-accent));
  margin-bottom: 0.5rem;
}
.lx-practice-ico { width: 0.95rem; height: 0.95rem; flex-shrink: 0; }
.lx-prompt :is(p, ul, ol) { margin: 0.25rem 0; }

/* Options (multiple-choice / multi-select / true-false) */
.lx-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.lx-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.lx-option:hover { border-color: rgba(var(--lx-accent), 0.4); background: rgba(var(--lx-accent), 0.05); }
.lx-option input { accent-color: rgb(var(--lx-accent)); flex-shrink: 0; }
.lx-option:has(input:checked) { border-color: rgba(var(--lx-accent), 0.7); background: rgba(var(--lx-accent), 0.1); }
.lx-option-label { color: #e2e8f0; }
.lx-option-label :is(p) { margin: 0; display: inline; }

/* Text + numeric inputs */
.lx-input {
  width: 100%;
  max-width: 22rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.6rem;
  background: #0b1020;
  color: #e2e8f0;
  font-size: 1rem;
}
.lx-input:focus { outline: none; border-color: rgba(var(--lx-accent), 0.7); box-shadow: 0 0 0 3px rgba(var(--lx-accent), 0.15); }
.lx-numeric { display: inline-flex; align-items: center; gap: 0.5rem; }
.lx-input-num { max-width: 9rem; }
.lx-unit { color: #94a3b8; font-size: 0.95rem; }

/* Match: drag a chip from the bank onto each row's slot (click/tap-to-place too). */
.lx-match { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.lx-match-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.02);
}
.lx-match-left { flex: 1; min-width: 0; color: #e2e8f0; }
.lx-match-left :is(p) { margin: 0; display: inline; }

/* drop slot on each row */
.lx-match-slot {
  flex-shrink: 0; min-width: 8.5rem; min-height: 2.3rem;
  display: flex; align-items: center; justify-content: center;
  padding: 0.2rem;
  border: 1px dashed rgba(255, 255, 255, 0.20);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.015);
  transition: border-color 0.12s, background 0.12s;
}
.lx-match-slot.lx-drop-over { border-color: rgba(var(--lx-accent), 0.75); background: rgba(var(--lx-accent), 0.12); }

/* the pool of unplaced chips */
.lx-match-bank {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 0.75rem; padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.015);
  min-height: 2.8rem;
}
.lx-match-bank.lx-drop-over { border-color: rgba(var(--lx-accent), 0.5); background: rgba(var(--lx-accent), 0.05); }

/* draggable chip */
.lx-match-chip {
  display: inline-flex; align-items: center; margin: 0;
  padding: 0.38rem 0.75rem;
  border: 1px solid rgba(var(--lx-accent), 0.4);
  border-radius: 999px;
  background: rgba(var(--lx-accent), 0.1);
  color: #e2e8f0; font-size: 0.92rem;
  cursor: grab; user-select: none;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.lx-match-chip :is(p) { margin: 0; display: inline; }
.lx-match-chip:hover { background: rgba(var(--lx-accent), 0.17); }
.lx-match-chip.lx-dragging { opacity: 0.45; cursor: grabbing; }
.lx-match-chip.lx-selected { border-color: rgba(var(--lx-accent), 0.9); background: rgba(var(--lx-accent), 0.24); box-shadow: 0 0 0 2px rgba(var(--lx-accent), 0.28); }

/* Order: a reorderable list with up/down controls */
.lx-order { list-style: none; margin: 0; padding: 0; counter-reset: lx-ord; display: flex; flex-direction: column; gap: 0.4rem; }
.lx-order-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.025);
  cursor: grab;
  transition: border-color 0.12s, box-shadow 0.12s, opacity 0.12s;
}
.lx-order-item.lx-dragging { opacity: 0.5; cursor: grabbing; border-color: rgba(var(--lx-accent), 0.6); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
.lx-order-item::before {
  counter-increment: lx-ord; content: counter(lx-ord);
  flex-shrink: 0; width: 1.5rem; height: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 0.4rem; font-size: 0.75rem; font-weight: 700;
  background: rgba(var(--lx-accent), 0.12); color: rgb(var(--lx-accent));
}
.lx-order-text { flex: 1; min-width: 0; color: #e2e8f0; }
.lx-order-text :is(p) { margin: 0; display: inline; }
.lx-order-controls { display: inline-flex; gap: 0.25rem; flex-shrink: 0; }
.lx-order-up, .lx-order-down {
  width: 1.8rem; height: 1.8rem; border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04); color: #cbd5e1; cursor: pointer;
  font-size: 0.7rem; line-height: 1;
}
.lx-order-up:hover, .lx-order-down:hover { border-color: rgba(var(--lx-accent), 0.5); color: #fff; }
.lx-order-up:disabled, .lx-order-down:disabled { opacity: 0.4; cursor: default; }

/* Check button */
.lx-check {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 1.1rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600;
  background: rgba(var(--lx-accent), 0.16);
  color: rgb(var(--lx-accent));
  border: 1px solid rgba(var(--lx-accent), 0.35);
  cursor: pointer; transition: background 0.12s ease;
}
.lx-check:hover { background: rgba(var(--lx-accent), 0.26); }
.lx-check:disabled { opacity: 0.5; cursor: default; }

/* Result + explanation */
.lx-result { font-size: 0.9rem; font-weight: 600; }
.lx-result-pass { color: rgb(var(--lx-pass)); }
.lx-result-fail { color: rgb(var(--lx-fail)); }
.lx-result-hint { color: #fcd34d; }
.lx-explain {
  border-left: 3px solid rgba(var(--lx-accent), 0.5);
  background: rgba(var(--lx-accent), 0.06);
  border-radius: 0 0.5rem 0.5rem 0;
  padding: 0.7rem 0.9rem;
  color: #cbd5e1; font-size: 0.92rem;
}
.lx-explain :is(p) { margin: 0.2rem 0; }

/* Completed exercise: a calm green frame + check mark on the badge area */
.lx-exercise.lx-done { border-color: rgba(var(--lx-pass), 0.4); }
.lx-exercise.lx-done .lx-practice-label { color: rgb(var(--lx-pass)); }
/* a finished exercise stops responding to drag / click */
.lx-exercise.lx-done :is(.lx-order-item, .lx-match-chip) { pointer-events: none; cursor: default; }
.lx-exercise.lx-done .lx-match-chip { border-color: rgba(var(--lx-pass), 0.5); background: rgba(var(--lx-pass), 0.12); }

/* ===================== Rich content: icons · callouts · grids ===================== */

/* Inline icon ({icon:NAME} → Lucide svg). Sized in em so it tracks the text, and
   coloured with the accent. --lx-accent is contextual, so an icon inside a callout
   inherits that callout's accent (amber / violet) while body icons stay cyan. */
.lx-ico {
  display: inline-block;
  width: 1.15em; height: 1.15em;
  vertical-align: -0.2em;
  flex-shrink: 0;
  color: rgb(var(--lx-accent));
}

/* A Lucide icon leading a step heading: cyan accent (inherits --lx-accent from
   :root), sized to the heading and centred on one line with the text. */
.lx-prose h2:has(.lx-ico) { display: flex; align-items: center; gap: 0.55rem; }
.lx-prose h2 .lx-ico { width: 1.05em; height: 1.05em; vertical-align: 0; }

/* Per-icon colour palette — a heading icon authored as {icon:NAME colour} gets an
   lx-ico--<colour> class; these override the default cyan (--lx-accent). */
.lx-ico--cyan { color: rgb(34, 211, 238); }
.lx-ico--sky { color: rgb(56, 189, 248); }
.lx-ico--blue { color: rgb(96, 165, 250); }
.lx-ico--indigo { color: rgb(129, 140, 248); }
.lx-ico--violet { color: rgb(167, 139, 250); }
.lx-ico--fuchsia { color: rgb(232, 121, 249); }
.lx-ico--pink { color: rgb(244, 114, 182); }
.lx-ico--rose { color: rgb(251, 113, 133); }
.lx-ico--orange { color: rgb(251, 146, 60); }
.lx-ico--amber { color: rgb(251, 191, 36); }
.lx-ico--yellow { color: rgb(250, 204, 21); }
.lx-ico--lime { color: rgb(163, 230, 53); }
.lx-ico--green { color: rgb(74, 222, 128); }
.lx-ico--emerald { color: rgb(52, 211, 153); }
.lx-ico--teal { color: rgb(45, 212, 191); }

/* Tick / cross marks ({✓}/{✗} → coloured by render_learn_md). */
.lx-yes { color: rgb(var(--lx-pass)); font-weight: 700; }
.lx-no { color: rgb(var(--lx-fail)); font-weight: 700; }

/* Callouts ({callout:key|warn|example} … {/callout}): a left-accent panel with a
   small labelled header. The accent colour is the only per-type difference. */
.lx-callout {
  margin: 1.1rem 0;
  padding: 0.9rem 1.05rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(var(--lx-accent), 0.45);   /* a full box, like the practice cards */
  background: rgba(var(--lx-accent), 0.07);
}
.lx-callout--key { --lx-accent: 34, 211, 238; }      /* cyan */
.lx-callout--warn { --lx-accent: 245, 158, 11; }     /* amber */
.lx-callout--example { --lx-accent: 167, 139, 250; } /* violet */
/* Header row: the icon and the label sit on ONE line, vertically centred together. */
.lx-callout-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.5rem; }
.lx-callout-head .lx-ico { flex-shrink: 0; width: 1.15rem; height: 1.15rem; color: rgb(var(--lx-accent)); }
.lx-callout-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgb(var(--lx-accent)); line-height: 1;
}
.lx-callout :is(p) { margin: 0.3rem 0; color: #d2dbe8; }
.lx-callout :is(p):first-of-type { margin-top: 0; }
.lx-callout :is(p):last-child { margin-bottom: 0; }
.lx-callout :is(ul, ol) { margin: 0.3rem 0; padding-left: 1.2rem; color: #d2dbe8; }

/* The five SI base units, authored as raw HTML — all five on ONE row, wrapping
   only on a narrow screen. */
.lx-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 1.1rem 0;
}
.lx-grid--two { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
@media (max-width: 600px) { .lx-grid { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); } }

.lx-unit-card {
  --lx-accent: 34, 211, 238;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 0.9rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.025);
  text-align: center;
}
.lx-unit-card .lx-ico { width: 1.7rem; height: 1.7rem; color: rgb(var(--lx-accent)); margin-bottom: 0.2rem; vertical-align: 0; }
.lx-unit-card .lx-unit-name { color: #93a3b6; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.lx-unit-card .lx-unit-sym { color: #fff; font-size: 1.2rem; font-weight: 700; }
.lx-unit-card .lx-unit-meas { color: #94a3b8; font-size: 0.74rem; }

/* Derived-units recap: a 2×2 grid of cards, each naming a unit, the quantity relation
   it comes from, and its form in SI base units — typeset with KaTeX (crisp + scalable)
   rather than a rasterised diagram. Authored as raw HTML in the lesson markdown. */
.lx-deriv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  margin: 1.15rem 0 0.3rem;
}
.lx-deriv-card {
  padding: 0.85rem 1rem 0.95rem;
  border: 1px solid rgba(103, 232, 249, 0.22);
  border-radius: 0.85rem;
  background: rgba(103, 232, 249, 0.045);
}
.lx-deriv-head { font-size: 0.86rem; color: #93a3b6; }
.lx-deriv-head b { margin-right: 0.2rem; font-size: 1.3rem; font-weight: 700; color: #67e8f9; }
.lx-deriv-from { margin-top: 0.5rem; font-size: 0.8rem; color: #8b9bb0; }
.lx-deriv-eq { margin-top: 0.3rem; color: #e8eef6; font-size: 1.02rem; line-height: 1; }
.lx-deriv-eq .katex { font-size: 1.05em; }
@media (max-width: 560px) { .lx-deriv { grid-template-columns: 1fr; } }

/* Estimate stat-cards — native icon cards (KaTeX values) in the same visual
   language as the base-unit cards; replaces a rasterised reference image. The
   widest fact (the human) spans the full row; the rest sit in a 2×2. */
.lx-estimates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin: 1.1rem 0 0.3rem;
}
.lx-est {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.72rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.025);
}
.lx-est--wide { grid-column: 1 / -1; }
.lx-est .lx-ico { flex: none; width: 1.7rem; height: 1.7rem; }
.lx-est-text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.lx-est-name { color: #93a3b6; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; }
.lx-est-val { color: #e8eef6; font-size: 0.96rem; }
@media (max-width: 560px) { .lx-estimates { grid-template-columns: 1fr; } }

/* Derived-unit "builder": equation → base units → named unit (native + KaTeX),
   replacing a rasterised flow diagram. Authored as raw HTML in the markdown. */
.lx-build { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.1rem 0 0.3rem; }
.lx-build-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.022);
}
.lx-build-eq {
  color: #c6d2e1; font-size: 0.88rem;
  padding: 0.16rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
}
.lx-build-base { color: #e8eef6; }
.lx-build-arrow { color: #67e8f9; font-weight: 700; }
.lx-build-unit {
  padding: 0.16rem 0.6rem;
  border: 1px solid rgba(103, 232, 249, 0.28);
  border-radius: 0.55rem;
  background: rgba(103, 232, 249, 0.06);
  color: #cfe9ef; font-size: 0.9rem; white-space: nowrap;
}
.lx-build-unit b { color: #67e8f9; font-size: 1.15rem; margin-right: 0.12rem; }

/* Markdown tables (truth tables, comparisons, trade-offs) on the dark page.
   commonmark renders a real <table>; these give it borders + a header accent and
   let a wide one scroll on narrow screens. Authored as plain markdown tables. */
.lx-prose table {
  border-collapse: collapse;
  margin: 1.1rem 0;
  font-size: 0.94rem;
  color: #cdd8e6;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}
.lx-prose th,
.lx-prose td {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.4rem 0.8rem;
  text-align: left;
  vertical-align: top;
}
.lx-prose th { background: rgba(103, 232, 249, 0.09); color: #e8eef6; font-weight: 600; }
.lx-prose tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }
.lx-prose table code { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .lx-lesson, .lx-option, .lx-check { transition: none; }
  .lx-lesson:hover { transform: none; }
}