/* ==========================================================================
   meridian — module composites
   Larger patterns assembled from components.css: the home hero and week strip,
   module tiles, stat cards, the chat and exam layouts, the syllabus tree and
   reader, and the placeholder surfaces.

   These live in the theme (not the app) on purpose: the class names are the
   contract, so another theme can restyle every screen without the pages
   changing at all.
   ========================================================================== */

/* ══ HOME — HERO ═══════════════════════════════════════════════════════════ */

.lx-hero {
  padding: var(--lx-s-12) 0 var(--lx-s-10);
  max-width: 40ch;
}

.lx-hero__greeting {
  margin-top: var(--lx-s-3);
  /* The one serif moment in the interface. */
  font-size: clamp(2.25rem, 6vw, var(--lx-fs-3xl));
}

.lx-hero__sub {
  margin-top: var(--lx-s-4);
  color: var(--lx-t3);
  font-size: var(--lx-fs-base);
}

/* ── Week strip ─────────────────────────────────────────────────────────────
   Seven days at a glance. Reads or it doesn't; no legend, no axis. */

.lx-week {
  display: flex;
  gap: var(--lx-s-5);
  margin-top: var(--lx-s-8);
  padding: 0;
  list-style: none;
}

.lx-week__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lx-s-3);
}

.lx-week__letter {
  font-family: var(--lx-f-mono);
  font-size: var(--lx-fs-micro);
  letter-spacing: 0.1em;
  color: var(--lx-t4);
  transition: color var(--lx-t-base) var(--lx-ease);
}

.lx-week__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--lx-r-full);
  background: var(--lx-fill-active);
  transition:
    background var(--lx-t-base) var(--lx-ease),
    transform var(--lx-t-base) var(--lx-ease);
}

/* Volume is carried by weight and opacity rather than by hue, so the strip
   stays legible for colour-blind users and in both modes. */
.lx-week__dot[data-level="1"] { background: var(--lx-accent); opacity: 0.4; transform: scale(1.15); }
.lx-week__dot[data-level="2"] { background: var(--lx-accent); opacity: 0.7; transform: scale(1.4); }
.lx-week__dot[data-level="3"] { background: var(--lx-accent); opacity: 1;   transform: scale(1.7); }

.lx-week__day.is-today .lx-week__letter { color: var(--lx-t1); font-weight: 500; }
.lx-week__day.is-today .lx-week__dot {
  box-shadow: 0 0 0 4px var(--lx-accent-soft);
}

/* ══ SECTION HEADINGS ══════════════════════════════════════════════════════ */

.lx-section__title {
  display: flex;
  align-items: center;
  gap: var(--lx-s-3);
  font-family: var(--lx-f-mono);
  font-size: var(--lx-fs-micro);
  font-weight: 500;
  letter-spacing: var(--lx-ls-label);
  text-transform: uppercase;
  color: var(--lx-t3);
}
.lx-section__title .lx-icon { color: var(--lx-accent); }

/* ══ HOME — CONTINUE ═══════════════════════════════════════════════════════ */

.lx-continue {
  display: flex;
  align-items: center;
  gap: var(--lx-s-5);
}

.lx-continue__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--lx-r-md);
  background: var(--lx-accent-soft);
  color: var(--lx-accent);
}

.lx-continue__body { flex: 1 1 auto; min-width: 0; }

.lx-continue__title {
  display: block;
  margin-top: var(--lx-s-2);
  font-size: var(--lx-fs-md);
  font-weight: 500;
  letter-spacing: var(--lx-ls-title);
  color: var(--lx-t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lx-continue__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--lx-fs-sm);
  color: var(--lx-t3);
}

.lx-continue__bar { display: block; margin-top: var(--lx-s-3); max-width: 260px; }

.lx-continue__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-s-2);
  flex: none;
  padding: 0 var(--lx-s-2);
  font-size: var(--lx-fs-sm);
  font-weight: 500;
  color: var(--lx-t1);
}
.lx-continue__cta .lx-icon { transition: transform var(--lx-t-base) var(--lx-ease); }
.lx-continue:hover .lx-continue__cta .lx-icon { transform: translateX(3px); }

/* ══ MODULE TILES ══════════════════════════════════════════════════════════ */

.lx-modgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: var(--lx-s-3);
}
.lx-modgrid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.lx-mod {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--lx-s-2);
  min-height: 168px;
  padding: var(--lx-s-5);
}

.lx-mod__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--lx-s-3);
  border-radius: var(--lx-r-md);
  background: var(--lx-fill);
  color: var(--lx-accent);
  transition: background var(--lx-t-base) var(--lx-ease);
}
.lx-mod:hover .lx-mod__icon { background: var(--lx-accent-soft); }

.lx-mod .lx-card__desc { margin-top: auto; }

.lx-mod__go {
  position: absolute;
  top: var(--lx-s-5);
  right: var(--lx-s-5);
  color: var(--lx-t4);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition:
    opacity var(--lx-t-base) var(--lx-ease),
    transform var(--lx-t-base) var(--lx-ease),
    color var(--lx-t-base) var(--lx-ease);
}
.lx-mod:hover .lx-mod__go,
.lx-mod:focus-visible .lx-mod__go {
  opacity: 1;
  transform: none;
  color: var(--lx-t1);
}

/* A tile for a surface that exists but isn't working yet — visibly quieter,
   so it reads as a plan rather than as a broken feature. */
.lx-mod--soon { min-height: 148px; }
.lx-mod--soon .lx-mod__icon { color: var(--lx-t3); }
.lx-mod--soon .lx-card__title { color: var(--lx-t2); }

/* ══ STATS ═════════════════════════════════════════════════════════════════ */

.lx-statgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: var(--lx-s-3);
}

.lx-stat {
  display: flex;
  align-items: center;
  gap: var(--lx-s-4);
}

.lx-stat__glyph {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--lx-r-full);
  background: var(--lx-fill);
  color: var(--lx-accent);
}

.lx-stat__body { min-width: 0; }

.lx-stat__value {
  font-size: var(--lx-fs-xl);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: var(--lx-ls-title);
  color: var(--lx-t1);
}

.lx-stat__meta {
  margin-top: 2px;
  font-size: var(--lx-fs-xs);
  color: var(--lx-t3);
}

.lx-stat .lx-label { margin-top: 2px; }

/* ══ TWO-PANE MODULE LAYOUT ════════════════════════════════════════════════
   Shared by Study Chat (sessions | conversation) and Syllabus (tree | reader).
   The aside collapses to an overlay drawer below 900px rather than stacking,
   because on a phone a list and a reader are two screens, not one column. */

.lx-split {
  display: flex;
  height: 100%;
  min-height: 0;
}

.lx-split__aside {
  display: flex;
  flex-direction: column;
  width: 300px;
  flex: none;
  min-height: 0;
  border-right: 1px solid var(--lx-line-soft);
}

.lx-split__main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

.lx-split__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--lx-s-2);
  padding: var(--lx-s-4);
  border-bottom: 1px solid var(--lx-line-soft);
}

.lx-split__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--lx-s-3);
}

@media (max-width: 899px) {
  .lx-split__aside {
    position: fixed;
    top: 0; left: 0;
    z-index: var(--lx-z-sheet);
    width: min(320px, 86vw);
    height: var(--real-vh, 100vh);
    background: var(--lx-glass-strong);
    -webkit-backdrop-filter: var(--lx-glass-blur);
    backdrop-filter: var(--lx-glass-blur);
    box-shadow: var(--lx-shadow-overlay);
    transform: translateX(-100%);
    transition: transform var(--lx-t-slow) var(--lx-ease-out);
  }
  .lx-split__aside.is-open { transform: none; }
}

/* ── Search-select dropdown menu (Integrated's subject picker) ───────────── */

.lx-combo {
  position: absolute;
  top: calc(100% + var(--lx-s-2));
  left: 0; right: 0;
  max-height: 240px;
  overflow-y: auto;
  z-index: var(--lx-z-overlay);
  background: var(--lx-glass-strong);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--lx-glass-border);
  border-radius: var(--lx-r-md);
  box-shadow: var(--lx-shadow-overlay);
  padding: var(--lx-s-1);
}
.lx-combo__item {
  display: block; width: 100%; text-align: left;
  padding: var(--lx-s-2) var(--lx-s-3);
  border-radius: var(--lx-r-sm);
  font-size: var(--lx-fs-sm);
  color: var(--lx-t2);
}
.lx-combo__item:hover { background: var(--lx-fill); color: var(--lx-t1); }
.lx-combo__empty { padding: var(--lx-s-3); font-size: var(--lx-fs-xs); color: var(--lx-t4); text-align: center; }

/* ── List rows inside an aside ───────────────────────────────────────────── */

.lx-listrow {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--lx-s-3);
  border-radius: var(--lx-r-md);
  color: var(--lx-t2);
  transition: background var(--lx-t-fast) var(--lx-ease), color var(--lx-t-fast) var(--lx-ease);
}
.lx-listrow:hover { background: var(--lx-fill); color: var(--lx-t1); text-decoration: none; }
.lx-listrow.is-active { background: var(--lx-glass-strong); color: var(--lx-t1); box-shadow: var(--lx-glass-inset); }

.lx-listrow__title {
  display: block;
  font-size: var(--lx-fs-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lx-listrow__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--lx-fs-xs);
  color: var(--lx-t4);
}

/* ══ CHAT ══════════════════════════════════════════════════════════════════ */

.lx-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.lx-chat__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--lx-s-6) var(--lx-s-4) var(--lx-s-4);
}

.lx-chat__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--lx-s-6);
}

.lx-msg { display: flex; gap: var(--lx-s-3); }
.lx-msg--me { flex-direction: row-reverse; }

.lx-msg__body {
  max-width: 82%;
  padding: var(--lx-s-3) var(--lx-s-4);
  border-radius: var(--lx-r-lg);
  font-size: var(--lx-fs-base);
  line-height: var(--lx-lh-body);
}

/* The user's own turn is the solid one; the assistant's is glass, so the eye
   can separate them without either being visually louder. */
.lx-msg--me .lx-msg__body {
  background: var(--lx-t1);
  color: var(--lx-t-inv);
  border-bottom-right-radius: var(--lx-r-sm);
}
.lx-msg--ai .lx-msg__body {
  background: var(--lx-glass);
  -webkit-backdrop-filter: var(--lx-glass-blur-sm);
  backdrop-filter: var(--lx-glass-blur-sm);
  border: 1px solid var(--lx-glass-border);
  border-bottom-left-radius: var(--lx-r-sm);
  color: var(--lx-t1);
}

.lx-msg__avatar {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  margin-top: 2px;
  border-radius: var(--lx-r-full);
  background: var(--lx-accent-soft);
  color: var(--lx-accent);
}

.lx-msg__meta {
  margin-top: var(--lx-s-2);
  font-size: var(--lx-fs-xs);
  color: var(--lx-t4);
}

/* Typing indicator */
.lx-typing { display: inline-flex; gap: 4px; align-items: center; padding: var(--lx-s-1) 0; }
.lx-typing span {
  width: 5px; height: 5px;
  border-radius: var(--lx-r-full);
  background: var(--lx-t4);
  animation: lx-bounce 1.2s var(--lx-ease) infinite;
}
.lx-typing span:nth-child(2) { animation-delay: 0.15s; }
.lx-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes lx-bounce { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ── Composer ───────────────────────────────────────────────────────────────
   The floating glass pill from the reference material, pinned to the bottom
   of the conversation rather than to the viewport. */

.lx-composer {
  flex: none;
  padding: var(--lx-s-3) var(--lx-s-4) var(--lx-s-5);
}

.lx-composer__inner {
  display: flex;
  align-items: flex-end;
  gap: var(--lx-s-2);
  max-width: 760px;
  margin: 0 auto;
  padding: var(--lx-s-2) var(--lx-s-2) var(--lx-s-2) var(--lx-s-4);
  border-radius: var(--lx-r-xl);
}

.lx-composer__input {
  flex: 1 1 auto;
  min-height: 40px;
  max-height: 180px;
  padding: var(--lx-s-2) 0;
  background: none;
  border: none;
  color: var(--lx-t1);
  font-size: var(--lx-fs-base);
  line-height: var(--lx-lh-body);
  resize: none;
  overflow-y: auto;
}
.lx-composer__input:focus { outline: none; }

.lx-composer__send {
  width: 38px; height: 38px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--lx-r-full);
  background: var(--lx-t1);
  color: var(--lx-t-inv);
  transition: opacity var(--lx-t-fast) var(--lx-ease);
}
.lx-composer__send:disabled { opacity: 0.3; pointer-events: none; }

.lx-composer__hint {
  max-width: 760px;
  margin: var(--lx-s-2) auto 0;
  font-size: var(--lx-fs-xs);
  color: var(--lx-t4);
  text-align: center;
}

/* ── Chat first-run ─────────────────────────────────────────────────────── */

.lx-chatintro { padding: var(--lx-s-10) 0 var(--lx-s-4); }

.lx-chatintro__title {
  margin-top: var(--lx-s-3);
  font-size: clamp(2rem, 5vw, 3rem);
}

.lx-chatintro__sub { margin-top: var(--lx-s-4); color: var(--lx-t3); }

.lx-chatintro__prompts {
  display: flex;
  flex-direction: column;
  gap: var(--lx-s-2);
  margin-top: var(--lx-s-8);
}

.lx-prompt {
  display: flex;
  align-items: center;
  gap: var(--lx-s-4);
  width: 100%;
  padding: var(--lx-s-4) var(--lx-s-5);
  border-radius: var(--lx-r-md);
  text-align: left;
  font-size: var(--lx-fs-sm);
  color: var(--lx-t2);
  transition:
    border-color var(--lx-t-base) var(--lx-ease),
    color var(--lx-t-base) var(--lx-ease),
    transform var(--lx-t-base) var(--lx-ease);
}
.lx-prompt:hover {
  border-color: var(--lx-glass-border-strong);
  color: var(--lx-t1);
  transform: translateY(-1px);
}
.lx-prompt__text { flex: 1 1 auto; }
.lx-prompt .lx-icon { color: var(--lx-t4); }

/* ── Message content ────────────────────────────────────────────────────── */

.lx-msg__body > *:first-child { margin-top: 0; }
.lx-msg__body > * + * { margin-top: var(--lx-s-3); }
.lx-msg__body h2, .lx-msg__body h3, .lx-msg__body h4 {
  margin-top: var(--lx-s-5);
  font-size: var(--lx-fs-base);
  font-weight: 500;
  color: var(--lx-t1);
}
.lx-msg__body ul, .lx-msg__body ol { padding-left: var(--lx-s-5); }
.lx-msg__body li + li { margin-top: var(--lx-s-1); }
.lx-msg__body strong { font-weight: 500; }
.lx-msg__body code {
  font-family: var(--lx-f-mono);
  font-size: 0.88em;
  padding: 0.1em 0.36em;
  border-radius: var(--lx-r-sm);
  background: var(--lx-fill);
}
.lx-msg--me .lx-msg__body code { background: rgba(255, 255, 255, 0.16); }

.lx-code {
  overflow-x: auto;
  padding: var(--lx-s-4);
  border-radius: var(--lx-r-md);
  background: var(--lx-bg-sunk);
  border: 1px solid var(--lx-line-soft);
  font-family: var(--lx-f-mono);
  font-size: var(--lx-fs-xs);
  line-height: 1.6;
}
.lx-code code { background: none; padding: 0; }

.lx-msg__error {
  display: flex;
  align-items: center;
  gap: var(--lx-s-2);
  color: var(--lx-danger);
  font-size: var(--lx-fs-sm);
}

/* ── Composer extras ────────────────────────────────────────────────────── */

.lx-composer__modes {
  display: flex;
  margin: 0 auto var(--lx-s-3);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.lx-composer__modes::-webkit-scrollbar { display: none; }

.lx-composer__stop { background: var(--lx-danger); color: #fff; }

/* ── Split drawer scrim (narrow viewports only) ─────────────────────────── */

.lx-split__scrim {
  position: fixed;
  inset: 0;
  z-index: calc(var(--lx-z-sheet) - 1);
  display: none;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lx-t-base) var(--lx-ease);
}
.lx-split__scrim.is-open { opacity: 1; pointer-events: auto; }

.lx-only-narrow { display: none; }

@media (max-width: 899px) {
  .lx-split__scrim { display: block; }
  .lx-only-narrow { display: inline-flex; }
  .lx-chatintro { padding-top: var(--lx-s-6); }
}

/* ══ EXAM ══════════════════════════════════════════════════════════════════
   Focus mode: during an attempt the shell chrome recedes so only the question
   remains. This is the reference's timer screen, applied to assessment. */

.lx-exam { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.lx-exam__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--lx-s-4);
  padding: var(--lx-s-4) var(--lx-s-6);
}

.lx-exam__progress { flex: 1 1 auto; }

.lx-exam__timer {
  display: inline-flex;
  align-items: center;
  gap: var(--lx-s-2);
  font-family: var(--lx-f-mono);
  font-size: var(--lx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--lx-t2);
}

.lx-exam__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--lx-s-6);
  /* A short question sits in the middle of the screen rather than clinging to
     the top of a mostly empty page. `safe` keeps a long one scrollable from
     its first line instead of centring it out of reach. */
  display: grid;
  align-content: safe center;
}

.lx-exam__q {
  max-width: 720px;
  margin: 0 auto;
}

.lx-exam__stem {
  font-size: var(--lx-fs-md);
  line-height: var(--lx-lh-snug);
  color: var(--lx-t1);
}

.lx-options {
  display: flex;
  flex-direction: column;
  gap: var(--lx-s-3);
  margin-top: var(--lx-s-8);
}

.lx-option {
  display: flex;
  align-items: flex-start;
  gap: var(--lx-s-4);
  width: 100%;
  padding: var(--lx-s-4) var(--lx-s-5);
  border-radius: var(--lx-r-md);
  text-align: left;
  color: var(--lx-t2);
  transition:
    background var(--lx-t-fast) var(--lx-ease),
    border-color var(--lx-t-fast) var(--lx-ease),
    color var(--lx-t-fast) var(--lx-ease);
}
.lx-option:hover { border-color: var(--lx-glass-border-strong); color: var(--lx-t1); }

.lx-option__key {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  flex: none;
  border-radius: var(--lx-r-full);
  border: 1px solid var(--lx-line);
  font-family: var(--lx-f-mono);
  font-size: var(--lx-fs-micro);
  color: var(--lx-t3);
}

.lx-option.is-selected { border-color: var(--lx-t1); color: var(--lx-t1); }
.lx-option.is-selected .lx-option__key { background: var(--lx-t1); color: var(--lx-t-inv); border-color: transparent; }

/* Marked states are signalled by an icon and a border, never by colour alone */
.lx-option.is-correct { border-color: var(--lx-success); color: var(--lx-t1); background: var(--lx-success-soft); }
.lx-option.is-correct .lx-option__key { background: var(--lx-success); color: var(--lx-t-inv); border-color: transparent; }
.lx-option.is-wrong { border-color: var(--lx-danger); background: var(--lx-danger-soft); }
.lx-option.is-wrong .lx-option__key { background: var(--lx-danger); color: var(--lx-t-inv); border-color: transparent; }

.lx-exam__foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lx-s-4);
  padding: var(--lx-s-4) var(--lx-s-6) var(--lx-s-6);
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.lx-explain {
  margin-top: var(--lx-s-6);
  padding: var(--lx-s-5);
  border-radius: var(--lx-r-md);
  font-size: var(--lx-fs-sm);
  line-height: var(--lx-lh-body);
  color: var(--lx-t2);
}
.lx-explain .lx-label { margin-bottom: var(--lx-s-2); }

/* ══ SYLLABUS TREE ═════════════════════════════════════════════════════════ */

.lx-tree { display: flex; flex-direction: column; gap: 2px; }

.lx-tree__node {
  display: flex;
  align-items: center;
  gap: var(--lx-s-2);
  width: 100%;
  padding: var(--lx-s-2) var(--lx-s-3);
  border-radius: var(--lx-r-sm);
  text-align: left;
  font-size: var(--lx-fs-sm);
  color: var(--lx-t2);
  transition: background var(--lx-t-fast) var(--lx-ease), color var(--lx-t-fast) var(--lx-ease);
}
.lx-tree__node:hover { background: var(--lx-fill); color: var(--lx-t1); }
.lx-tree__node.is-active { background: var(--lx-glass-strong); color: var(--lx-t1); font-weight: 500; }

.lx-tree__chevron { transition: transform var(--lx-t-base) var(--lx-ease); color: var(--lx-t4); }
.lx-tree__node[aria-expanded="true"] .lx-tree__chevron { transform: rotate(90deg); }

.lx-tree__children {
  margin-left: var(--lx-s-4);
  padding-left: var(--lx-s-3);
  border-left: 1px solid var(--lx-line-soft);
}

.lx-tree__count {
  margin-left: auto;
  font-family: var(--lx-f-mono);
  font-size: var(--lx-fs-micro);
  color: var(--lx-t4);
}

/* ══ READER ════════════════════════════════════════════════════════════════ */

.lx-reader {
  max-width: var(--lx-measure);
  margin: 0 auto;
  padding: var(--lx-s-10) var(--lx-s-6) var(--lx-s-24);
}

.lx-reader__head { margin-bottom: var(--lx-s-8); }

.lx-reader__title {
  font-size: var(--lx-fs-xl);
  font-weight: 500;
  letter-spacing: var(--lx-ls-title);
}

.lx-reader__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lx-s-2);
  margin-top: var(--lx-s-4);
}

.lx-prose { color: var(--lx-t2); line-height: 1.7; }
.lx-prose h2, .lx-prose h3 { color: var(--lx-t1); margin: var(--lx-s-8) 0 var(--lx-s-3); }
.lx-prose h2:first-child, .lx-prose h3:first-child { margin-top: 0; }
.lx-prose p { margin: var(--lx-s-4) 0; }
.lx-prose strong { color: var(--lx-t1); font-weight: 500; }
.lx-prose em { font-style: italic; color: var(--lx-t1); }
.lx-prose ul { margin: var(--lx-s-4) 0; padding-left: var(--lx-s-5); display: grid; gap: var(--lx-s-2); }
.lx-prose li { padding-left: var(--lx-s-1); }
.lx-prose hr { border: none; border-top: 1px solid var(--lx-line); margin: var(--lx-s-8) 0; }
.lx-prose h4 { color: var(--lx-t1); font-size: var(--lx-fs-md); font-weight: 500; margin: var(--lx-s-6) 0 var(--lx-s-2); }
.lx-prose table {
  width: 100%; border-collapse: collapse; margin: var(--lx-s-5) 0;
  font-size: var(--lx-fs-sm); display: block; overflow-x: auto;
  white-space: nowrap;
}
.lx-prose th, .lx-prose td {
  text-align: left; padding: var(--lx-s-2) var(--lx-s-3);
  border-bottom: 1px solid var(--lx-line);
}
.lx-prose th { color: var(--lx-t1); font-weight: 500; }
.lx-prose td { color: var(--lx-t2); }
.lx-prose blockquote {
  margin: var(--lx-s-5) 0; padding: var(--lx-s-1) var(--lx-s-5);
  border-left: 2px solid var(--lx-accent); color: var(--lx-t2); font-style: italic;
}
.lx-prose blockquote strong { font-style: normal; }

/* ══ PLACEHOLDER SURFACES ══════════════════════════════════════════════════
   Feed / Gigs / Profile: designed, navigable, and honest about not being
   built yet. A real layout behind a clear notice beats a blank page — it
   shows the intended shape without pretending to work. */

.lx-soon { max-width: 720px; margin: 0 auto; padding: var(--lx-s-16) 0 var(--lx-s-24); }

.lx-soon__glyph {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  border-radius: var(--lx-r-xl);
  background: var(--lx-glass);
  border: 1px solid var(--lx-glass-border);
  color: var(--lx-accent);
  box-shadow: var(--lx-glass-inset);
}

.lx-soon__title {
  margin-top: var(--lx-s-6);
  font-family: var(--lx-f-display);
  font-size: var(--lx-fs-2xl);
  font-weight: 400;
  letter-spacing: var(--lx-ls-hero);
}

.lx-soon__lead {
  margin-top: var(--lx-s-4);
  max-width: 52ch;
  font-size: var(--lx-fs-md);
  line-height: var(--lx-lh-snug);
  color: var(--lx-t3);
}

.lx-soon__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--lx-s-3);
  margin-top: var(--lx-s-10);
  list-style: none;
}

.lx-soon__item {
  display: flex;
  gap: var(--lx-s-3);
  padding: var(--lx-s-4);
  border-radius: var(--lx-r-md);
}
.lx-soon__item .lx-icon { color: var(--lx-t4); margin-top: 2px; }
.lx-soon__item strong { display: block; font-weight: 500; font-size: var(--lx-fs-sm); color: var(--lx-t1); }
.lx-soon__item span { font-size: var(--lx-fs-xs); color: var(--lx-t3); line-height: var(--lx-lh-snug); }

/* ══ FORMS IN OVERLAYS ═════════════════════════════════════════════════════
   The exam-setup modals are the only long forms in the interface. The body
   scrolls inside the modal so the heading and the submit button stay put on a
   short screen. */

.lx-form {
  display: flex;
  flex-direction: column;
  gap: var(--lx-s-5);
}

.lx-modal .lx-form {
  flex: 1 1 auto;
  min-height: 0;
  /* Room for the focus ring, which would otherwise be clipped by the scroll
     container on the first and last field. */
  padding: 2px;
  margin: -2px;
}

.lx-form .lx-field__label .lx-faint { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ══ WRITING SURFACES ══════════════════════════════════════════════════════
   Descriptive answers and clinical case sheets. Long-form input gets a calm,
   near-borderless field — the page is already a sheet of paper. */

.lx-writer__head { display: flex; flex-direction: column; gap: var(--lx-s-2); }

.lx-writer { margin-top: var(--lx-s-6); }

.lx-writer__input {
  width: 100%;
  min-height: 44vh;
  padding: var(--lx-s-6);
  font-size: var(--lx-fs-base);
  line-height: var(--lx-lh-loose);
  resize: vertical;
}

.lx-writer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lx-s-4);
  margin-top: var(--lx-s-4);
}

.lx-writer__count { font-size: var(--lx-fs-xs); color: var(--lx-t4); }

.lx-casetext { margin-top: var(--lx-s-6); }

/* Generated cases and submitted answers keep their own line breaks; nothing
   in them is markup, so they are printed verbatim rather than parsed. */
/* Holds lightly-marked-up text (paragraphs + <strong>) rather than a single
   pre-wrapped block, because generated case text and answers reliably carry
   ** emphasis and blank-line paragraphs even when a prompt asks for plain
   text — printing that literally reads as broken, not as "no markup used". */
.lx-pre {
  margin-top: var(--lx-s-3);
  font-size: var(--lx-fs-sm);
  line-height: var(--lx-lh-loose);
  color: var(--lx-t2);
}
.lx-pre p + p { margin-top: var(--lx-s-4); }
.lx-pre strong { color: var(--lx-t1); font-weight: 500; }

.lx-bullets { padding-left: var(--lx-s-5); color: var(--lx-t2); font-size: var(--lx-fs-sm); }
.lx-bullets li { line-height: var(--lx-lh-body); }
.lx-bullets li + li { margin-top: var(--lx-s-2); }

/* ══ RESULTS ═══════════════════════════════════════════════════════════════ */

.lx-statgrid--3 { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }

.lx-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lx-s-3);
  margin-top: var(--lx-s-12);
}

.lx-review { display: flex; flex-direction: column; gap: var(--lx-s-2); }

.lx-review__item { border-radius: var(--lx-r-md); overflow: hidden; }

.lx-review__summary {
  display: flex;
  align-items: flex-start;
  gap: var(--lx-s-3);
  padding: var(--lx-s-4) var(--lx-s-5);
  font-size: var(--lx-fs-sm);
  line-height: var(--lx-lh-snug);
  color: var(--lx-t2);
  cursor: pointer;
  list-style: none;
}
.lx-review__summary::-webkit-details-marker { display: none; }
.lx-review__summary:hover { color: var(--lx-t1); }
.lx-review__summary > .lx-icon:last-child {
  margin-top: 1px;
  color: var(--lx-t4);
  transition: transform var(--lx-t-fast) var(--lx-ease);
}
.lx-review__item[open] .lx-review__summary > .lx-icon:last-child { transform: rotate(180deg); }

/* Right and wrong are marked by glyph first; the tint only reinforces it. */
.lx-review__mark {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex: none;
  margin-top: 1px;
  border-radius: var(--lx-r-full);
  background: var(--lx-success);
  color: var(--lx-t-inv);
}
.lx-review__item.is-miss .lx-review__mark { background: var(--lx-danger); }

.lx-review__body {
  padding: 0 var(--lx-s-5) var(--lx-s-5) calc(var(--lx-s-5) + 20px + var(--lx-s-3));
  font-size: var(--lx-fs-sm);
  line-height: var(--lx-lh-body);
  color: var(--lx-t2);
}
.lx-review__body .lx-label { margin-top: var(--lx-s-4); margin-bottom: var(--lx-s-1); }
.lx-review__body .lx-label:first-child { margin-top: 0; }
.lx-review__why { margin-top: var(--lx-s-3); color: var(--lx-t3); }

/* ══ EXAM ADDITIONS ════════════════════════════════════════════════════════ */

.lx-exam__count {
  flex: none;
  font-family: var(--lx-f-mono);
  font-size: var(--lx-fs-xs);
  color: var(--lx-t3);
}

/* Past the pace target: a colour and weight change, never a lockout — the
   attempt still has to be finished to be scored. */
.lx-exam__timer.is-over { color: var(--lx-warning); }
.lx-exam__timer.is-over::before { content: '+'; }

/* A missed question earns a marker on the explanation, so the two states are
   distinguishable when scrolled back to without re-reading the options. */
.lx-explain--miss { border-left: 2px solid var(--lx-danger); }
.lx-explain__list {
  margin-top: var(--lx-s-3);
  padding-left: var(--lx-s-5);
  color: var(--lx-t3);
}
.lx-explain__list li + li { margin-top: var(--lx-s-1); }

/* A wider list row: an icon, two lines of text and a trailing state. Used for
   attempt history, where the leading glyph carries the exam format. */
.lx-listrow--wide {
  display: flex;
  align-items: center;
  gap: var(--lx-s-4);
  padding: var(--lx-s-3) var(--lx-s-2);
}
.lx-listrow--wide + .lx-listrow--wide { border-top: 1px solid var(--lx-line-soft); }
.lx-listrow--wide > .lx-icon { color: var(--lx-t4); flex: none; }

.lx-listrow__icon {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--lx-r-full);
  background: var(--lx-fill);
  color: var(--lx-t3);
}

/* ══ CLINICAL DISCUSSION ═══════════════════════════════════════════════════
   A short viva — three exchanges — held inside a card rather than on its own
   screen, because it is the tail of the case, not a separate module. */

.lx-discussion {
  max-height: 52vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: var(--lx-s-4) 0;
  padding-right: var(--lx-s-2);
}

.lx-discussion__score {
  align-self: flex-end;
  margin-top: calc(var(--lx-s-2) * -1);
  color: var(--lx-accent);
}

/* ══ RESPONSIVE ════════════════════════════════════════════════════════════ */

@media (max-width: 899px) {
  .lx-writer__input { min-height: 40vh; padding: var(--lx-s-4); }
  .lx-discussion { max-height: none; }

  .lx-hero { padding: var(--lx-s-8) 0 var(--lx-s-8); }
  .lx-week { gap: var(--lx-s-4); justify-content: space-between; }

  .lx-continue { flex-wrap: wrap; }
  .lx-continue__cta { margin-left: auto; }

  .lx-exam__scroll, .lx-exam__bar { padding-left: var(--lx-s-4); padding-right: var(--lx-s-4); }
  .lx-reader { padding: var(--lx-s-6) var(--lx-s-4) var(--lx-s-20); }
  .lx-chat__scroll { padding: var(--lx-s-4) var(--lx-s-3); }
  .lx-composer { padding: var(--lx-s-2) var(--lx-s-3) var(--lx-s-4); }
}

@media (max-width: 600px) {
  .lx-continue__icon { display: none; }
  .lx-mod { min-height: 148px; }
}