/* ============================================================================
   AOA TEST CENTER — MASTERY MAP (screen 10)
   "Your journey to the checkride" — the full where-do-I-stand / what's-left /
   what-do-I-do-next map for ONE certificate.

   Screen-level composition ONLY. Every font, radius, shadow, spacing and motion
   value is inherited from test-center-system.css. The screen shell
   (.mr-screen / .mr-screen__body) and the question-preview card (.mr-card,
   reused VERBATIM) come from marked-review.css.

   ── THE ONE THING THIS FILE ADDS: the GREEN-DEPTH ramp. ──
   The brief locks mastery on this page to GREEN DEPTH — ten shades, palest =
   just-started, deepest = mastered. No red/amber alarm states here. Rather than
   introduce ten new brand colors, every shade is DERIVED from the system's
   --success green via color-mix(): palest is success lifted toward white,
   deepest is success deepened toward ink. Zero free-standing color values.
   Color is NEVER the sole carrier — every shade is always paired with the % and
   a word.

   Discipline carried over: orange stays a scalpel (the single Start action +
   selection only), whitespace is generous, motion is named and calm, progress
   never alarms.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   GREEN-DEPTH RAMP — 10 steps, all derived from var(--success). g1 palest →
   g10 deepest. --on-g* is the legible ink for text laid ON that shade.
   -------------------------------------------------------------------------- */
:root {
  --g1:  color-mix(in oklab, var(--success) 10%, #ffffff);
  --g2:  color-mix(in oklab, var(--success) 20%, #ffffff);
  --g3:  color-mix(in oklab, var(--success) 31%, #ffffff);
  --g4:  color-mix(in oklab, var(--success) 43%, #ffffff);
  --g5:  color-mix(in oklab, var(--success) 56%, #ffffff);
  --g6:  color-mix(in oklab, var(--success) 70%, #ffffff);
  --g7:  color-mix(in oklab, var(--success) 84%, #ffffff);
  --g8:  color-mix(in oklab, var(--success) 100%, #ffffff);
  --g9:  color-mix(in oklab, var(--success) 88%, var(--ink));
  --g10: color-mix(in oklab, var(--success) 70%, var(--ink));
  /* Pale shades read their text in deep green ink; deep shades read in paper. */
  --on-pale: color-mix(in oklab, var(--success) 80%, var(--ink));
  --on-deep: #f4f1ec;
}

/* ----------------------------------------------------------------------------
   SCREEN SHELL — reuse .mr-screen; the column runs a touch wider (~860px) than
   the reading screens because the journey bar wants room to breathe.
   -------------------------------------------------------------------------- */
.mm-screen .session-bar { border-bottom: 1px solid var(--line); }
.mm-screen .mr-screen__body,
.mm-screen.mr-screen .mr-screen__body { max-width: 860px; }

.mm-bar-cluster { display: flex; align-items: center; gap: var(--s-2); }

/* The cert switcher — looks like the inherited cert pill, acts as a button. */
.mm-cert {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 30px; padding: 0 var(--s-2) 0 var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); cursor: pointer;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--body-text);
  transition: border-color var(--glance) var(--ease-calm), background var(--glance) var(--ease-calm);
}
.mm-cert:hover { border-color: var(--orange); background: var(--orange-soft); }
.mm-cert svg { color: var(--muted); transition: transform var(--brief) var(--ease-decisive); }
.mm-cert[aria-expanded="true"] svg { transform: rotate(180deg); }
.mm-cert[aria-expanded="true"] { border-color: var(--orange); }

.mm-certwrap { position: relative; }
.mm-certmenu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  min-width: 188px; padding: var(--s-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-elevated);
  display: flex; flex-direction: column; gap: 2px;
  animation: callout-lift var(--brief) var(--ease-cinematic) both;
}
.mm-certmenu__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border: none; border-radius: var(--r-sm);
  background: none; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-weight: 500; font-size: 0.92rem; color: var(--ink);
  transition: background var(--glance) var(--ease-calm);
}
.mm-certmenu__item:hover { background: var(--orange-soft); }
.mm-certmenu__item[aria-current="true"] { color: var(--orange-text); } /* menu text → AA role */
.mm-certmenu__pct {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   1. READINESS HEADER — the north-star number. Eyebrow → big mono % + trend,
   then a one-line mentor read. Cert switcher sits top-right.
   -------------------------------------------------------------------------- */
.mm-head { margin-bottom: clamp(26px, 4vw, 38px); }
.mm-head__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-5); margin-bottom: var(--s-5);
}
.mm-eyebrow { margin-bottom: var(--s-3); }
.mm-readiness { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.mm-ready__pct {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(3rem, 9vw, 4.6rem); line-height: 0.92; letter-spacing: -0.02em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.mm-ready__label {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.08; color: var(--ink);
  letter-spacing: 0.005em;
}
.mm-ready__sub {
  display: block; margin-top: 4px;
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* Trend token — calm, never an alarm. */
.mm-trend {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  border: 1px solid rgba(44,122,75,0.32); background: var(--success-soft);
  font-family: var(--font-display); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--success);
  white-space: nowrap;
}
.mm-trend--holding { border-color: var(--line); background: var(--paper); color: var(--muted); }
.mm-trend svg { flex: none; }

/* Mentor read — the one-line interpretation of the number. */
.mm-read {
  font-size: clamp(1.02rem, 1.7vw, 1.16rem); line-height: 1.5;
  color: var(--body-text); text-wrap: pretty; max-width: 60ch;
}
.mm-read b { color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------------------------
   2. THE JOURNEY BAR (hero) — full-width green-depth instrument. Each subject
   is a band; width ∝ question count; sorted deepest-on-the-left. Hover/focus
   lifts ONE band into a taller pill with its name + % inside (no cinch-down —
   neighbors keep their width). Click drills into that subject below.
   -------------------------------------------------------------------------- */
.mm-journey { margin-bottom: clamp(30px, 4vw, 44px); }
.mm-journey__caption {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-3);
}
.mm-journey__title {
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--orange-text); /* label text → AA role */
}
.mm-journey__hint { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.02em; }

/* The track. Extra top room so the lifted pill grows UP without nudging layout. */
.mm-track {
  position: relative;
  display: flex; gap: 3px;
  height: 46px; padding-top: 44px;
  box-sizing: content-box;
}
.mm-band {
  position: relative;
  align-self: stretch;
  min-width: 14px;
  border: none; padding: 0; margin: 0; cursor: pointer;
  border-radius: 3px;
  background: var(--bg, var(--g5));
  overflow: visible;
  transition: height var(--brief) var(--ease-cinematic),
              transform var(--brief) var(--ease-cinematic),
              box-shadow var(--brief) var(--ease-calm),
              opacity var(--beat) var(--ease-cinematic);
}
.mm-band:first-child { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.mm-band:last-child  { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
/* Pale bands get a hairline so they don't vanish on white. */
.mm-band--light { box-shadow: inset 0 0 0 1px rgba(44,122,75,0.18); }

/* On-load reveal — bands wipe up from flat. */
.mm-band { transform-origin: bottom; }
.mm-track:not(.is-in) .mm-band { opacity: 0; transform: scaleY(0.4); }

/* The lifted pill — grows taller from the bottom, rounds fully, floats its
   name + % inside. Anchored at the track's bottom so neighbors never cinch. */
.mm-band__pop {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 2px; padding: var(--s-3) var(--s-3) var(--s-2);
  border-radius: var(--r-md);
  background: var(--bg, var(--g5));
  opacity: 0; pointer-events: none;
  transition: height var(--brief) var(--ease-cinematic),
              opacity var(--glance) var(--ease-calm),
              box-shadow var(--brief) var(--ease-calm);
  overflow: hidden;
}
.mm-band:hover .mm-band__pop,
.mm-band:focus-visible .mm-band__pop,
.mm-band.is-active .mm-band__pop {
  height: calc(100% + 44px);
  opacity: 1;
  box-shadow: var(--shadow-elevated);
  z-index: 5;
}
.mm-band:focus-visible { outline: none; }
.mm-band:focus-visible .mm-band__pop { box-shadow: var(--shadow-elevated), var(--focus-ring); }
.mm-band__pct {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.82rem;
  font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--ink-on, var(--on-pale)); white-space: nowrap;
}
.mm-band__name {
  font-family: var(--font-display); font-weight: 600; font-size: 0.74rem;
  line-height: 1.12; letter-spacing: 0.01em; color: var(--ink-on, var(--on-pale));
  white-space: normal;
}
.mm-band--dark { --ink-on: var(--on-deep); }
.mm-band--light { --ink-on: var(--on-pale); }

/* A legend tying shade → meaning, since color is never alone. */
.mm-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3);
  margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.mm-legend__ramp { display: flex; gap: 2px; }
.mm-legend__sw { width: 16px; height: 9px; border-radius: 2px; }
.mm-legend__sw--pale { box-shadow: inset 0 0 0 1px rgba(44,122,75,0.2); }

/* ----------------------------------------------------------------------------
   2b. DOCK-MAGNIFY JOURNEY — the grouped variant. Instead of ~25 thin ACS bands,
   the strip renders ONE band per knowledge DOMAIN (9 for Private). With so few
   segments there's room for a macOS-dock interaction: hovering/focusing a domain
   grows it and reveals its short label inline, while neighbors progressively
   shrink with distance from the hovered one. JS sets each band's --w (flex-grow)
   from a Gaussian falloff; CSS just transitions flex-grow smoothly on a token.
   Returns to even on mouse-leave / blur. Calm — no bounce, no cinch-to-zero.
   -------------------------------------------------------------------------- */
.mm-track--dock { gap: var(--s-2); align-items: flex-end; padding-top: 22px; }
.mm-track--dock .mm-band {
  flex: var(--w, 1) 1 0;
  min-width: 10px;
  /* anchor to the track bottom so the magnified band's `height` lifts it UP
     (align-self:stretch would otherwise pin the cross-size and ignore height). */
  align-self: flex-end;
  height: 100%;
  /* flex-grow (width) is the dock magnify; height lifts the focused band a touch */
  transition: flex-grow var(--brief) var(--ease-cinematic),
              height var(--brief) var(--ease-cinematic),
              box-shadow var(--brief) var(--ease-calm),
              opacity var(--beat) var(--ease-cinematic);
}
/* The short domain label, tucked inside the band — hidden until the band is the
   magnified one (it only fits once the dock has grown it wide enough). */
.mm-band__label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s-2);
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.74rem; line-height: 1.1; letter-spacing: 0.01em;
  color: var(--ink-on, var(--on-pale));
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(2px);
  transition: opacity var(--glance) var(--ease-calm), transform var(--glance) var(--ease-cinematic);
  pointer-events: none;
}
.mm-band.is-magnified { height: calc(100% + 10px); box-shadow: var(--shadow-card); z-index: 4; }
.mm-band.is-magnified .mm-band__label { opacity: 1; transform: none; }
.mm-track--dock .mm-band:focus-visible { outline: none; }
.mm-track--dock .mm-band.is-magnified:focus-visible { box-shadow: var(--shadow-card), var(--focus-ring); }
/* In the dock variant the floating pop is retired — the inline label carries the
   name, so the magnified band needs nothing growing UP out of the track. */
.mm-track--dock .mm-band__pop { display: none; }

/* Reduced-motion: no width/height jumps — the dock collapses to a plain reveal.
   JS skips the falloff math too (token guard), so every band keeps flex:1 and we
   simply surface the label on the focused/hovered one. */
@media (prefers-reduced-motion: reduce) {
  .mm-track--dock .mm-band { flex: 1 1 0 !important; height: 100% !important; transition: none; }
  .mm-band.is-magnified { height: 100% !important; }
  .mm-band__label { transition: none; }
}

/* ----------------------------------------------------------------------------
   3. SUBJECT → SUB-TOPIC DRILL-DOWN — a calm vertical list grouped by hairlines
   (not nested cards). Subject rows are buttons (aria-expanded). Expanding
   reveals ACS sub-topics, also as lines.
   -------------------------------------------------------------------------- */
.mm-subjects { margin-bottom: clamp(30px, 4vw, 44px); }
.mm-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-2);
}
.mm-section-head__title {
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--orange-text); /* label text → AA role */
}
.mm-section-head__note { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.02em; }

.mm-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mm-subject { border-bottom: 1px solid var(--line); }

/* The row header — a full-width button. */
.mm-srow {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  align-items: center; gap: var(--s-4);
  width: 100%; padding: var(--s-4) var(--s-2);
  border: none; background: none; cursor: pointer; text-align: left;
  transition: background var(--glance) var(--ease-calm);
}
.mm-srow:hover { background: var(--paper); }
.mm-srow:focus-visible { outline: none; background: var(--paper); box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
.mm-srow__caret { color: var(--muted); display: flex; transition: transform var(--brief) var(--ease-decisive); }
.mm-subject.is-open .mm-srow__caret { transform: rotate(90deg); color: var(--orange); }

.mm-srow__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mm-srow__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.005em; color: var(--ink);
}
.mm-srow__state {
  font-size: 0.84rem; line-height: 1.4; color: var(--muted); text-wrap: pretty;
}
.mm-srow__state--win { color: var(--success); font-weight: 500; }

/* The green-depth chip — shade + %, the % is the second, non-color carrier. */
.mm-chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 30px; padding: 0 var(--s-3) 0 6px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--font-mono); font-weight: 500; font-size: 0.82rem;
  color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap;
  justify-self: end;
}
.mm-chip__dot {
  flex: none; width: 18px; height: 18px; border-radius: var(--r-pill);
  background: var(--bg, var(--g5));
}
.mm-chip__dot--light { box-shadow: inset 0 0 0 1px rgba(44,122,75,0.25); }
.mm-chip--mini { height: 26px; font-size: 0.76rem; padding: 0 var(--s-2) 0 5px; }
.mm-chip--mini .mm-chip__dot { width: 14px; height: 14px; }

.mm-srow__count {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
  justify-self: end; min-width: 64px; text-align: right;
}

/* Drill-down sub-topic panel — inherited disclosure. */
.mm-subtopics {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--beat) var(--ease-cinematic);
}
.mm-subject.is-open .mm-subtopics { grid-template-rows: 1fr; }
.mm-subtopics__inner { overflow: hidden; }
.mm-subject.is-open .mm-subtopics__inner { padding: 0 var(--s-2) var(--s-4) calc(18px + var(--s-4)); }

.mm-subtopic {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: var(--s-4);
  padding: var(--s-3) 0; border-top: 1px dashed var(--line);
}
.mm-subtopic:first-child { border-top: none; }
.mm-subtopic__name { font-size: 0.94rem; color: var(--ink); font-weight: 500; min-width: 0; text-wrap: pretty; }
.mm-subtopic__count {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; justify-self: end; min-width: 56px; text-align: right;
}

/* "Practice →" links — quiet on subjects, quieter on sub-topics. */
.mm-practice {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: none; border: none; padding: 2px 0; cursor: pointer; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange-text); /* "Practice →" is text → AA role */
  white-space: nowrap; justify-self: end;
  transition: color var(--glance) var(--ease-calm);
}
.mm-practice svg { transition: transform var(--brief) var(--ease-decisive); }
.mm-practice:hover { color: var(--ink); } /* orange-text links DEEPEN on hover (AA in every state) */
.mm-practice:hover svg { transform: translateX(3px); }
/* The subject-level practice link sits on its own line under the row on open. */
.mm-srow__practice { grid-column: 1 / -1; }

/* Highlight a subject when the journey bar drills into it. */
.mm-subject.is-targeted { background: var(--orange-soft); }
.mm-subject.is-targeted .mm-srow { background: transparent; }

/* ----------------------------------------------------------------------------
   4. WHAT TO DO NEXT — the recommended Smart Mix, pinned. One primary Start,
   one quiet "build a different session". A reused PreviewCard grounds it in a
   real question.
   -------------------------------------------------------------------------- */
.mm-next {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-left: 4px solid var(--orange);
  border-radius: var(--r-xl); background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: clamp(20px, 3vw, 28px);
  margin-bottom: clamp(30px, 4vw, 44px);
}
.mm-next__label { margin-bottom: var(--s-3); }
.mm-next__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
}
.mm-next__lede { min-width: 0; flex: 1 1 320px; }
.mm-next__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  line-height: 1.15; color: var(--ink); letter-spacing: 0.005em;
}
.mm-next__desc {
  margin-top: var(--s-2);
  font-size: 1rem; line-height: 1.5; color: var(--body-text); text-wrap: pretty; max-width: 52ch;
}
.mm-next__desc b { color: var(--ink); font-weight: 600; }
.mm-next__meta {
  display: flex; align-items: center; gap: var(--s-2) var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-3);
}
.mm-next__metaitem {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted);
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums;
}
.mm-next__metaitem svg { flex: none; color: var(--orange); }

.mm-next__cta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3); flex: none; }
.mm-next__alt {
  background: none; border: none; padding: 0; cursor: pointer; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: color var(--glance) var(--ease-calm);
}
.mm-next__alt:hover { color: var(--orange-text); } /* hover label is text → AA role */

/* The reused PreviewCard, framed as a peek of what's first up. */
.mm-next__preview { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.mm-next__preview-label {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--s-3);
}

/* ----------------------------------------------------------------------------
   5. READINESS OVER TIME — one quiet sparkline. No axis, no gridlines.
   -------------------------------------------------------------------------- */
.mm-spark {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 28px);
  flex-wrap: wrap;
  padding-top: var(--s-5); border-top: 1px solid var(--line);
}
.mm-spark__lede { flex: none; }
.mm-spark__title {
  font-family: var(--font-display); font-weight: 600; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.mm-spark__delta {
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--success);
  font-variant-numeric: tabular-nums;
}
.mm-spark__plot { flex: 1 1 200px; min-width: 160px; height: 44px; }
.mm-spark__plot svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* ----------------------------------------------------------------------------
   BRAND-NEW STUDENT — empty state. Not dead zeros: a calm "your map fills in".
   -------------------------------------------------------------------------- */
.mm-empty-track {
  display: flex; gap: 3px; height: 46px; margin-bottom: var(--s-4);
  border-radius: var(--r-sm); overflow: hidden;
}
.mm-empty-track__band {
  flex: 1;
  background: repeating-linear-gradient(
    135deg, var(--paper) 0 7px, var(--surface) 7px 14px);
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 3px;
}
.mm-empty-note {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--line); border-radius: var(--r-lg);
  background: var(--paper);
  font-size: 0.96rem; line-height: 1.5; color: var(--muted); text-wrap: pretty;
}
.mm-empty-note svg { flex: none; color: var(--orange); }

/* The new-student subject list reads "not started" rows — palest chip + prompt. */
.mm-subject--new .mm-srow { cursor: default; }
.mm-subject--new .mm-srow:hover { background: none; }

/* ----------------------------------------------------------------------------
   MOTION — Day-One Ready counts up once; subject list cascades once; bands wipe
   up once. All collapse under prefers-reduced-motion (token layer + JS guard).
   -------------------------------------------------------------------------- */
.mm-cascade { opacity: 0; transform: translateY(10px); }
.mm-cascade.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--beat) var(--ease-cinematic), transform var(--beat) var(--ease-cinematic);
}

.mm-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------------------
   MOBILE (~390px) — co-primary. Driven by an explicit .mm--mobile class so it
   renders correctly inside a fixed-width artboard. Readiness header stacks;
   journey bar stays full-width; subject list stacks; "What to do next" is
   sticky-bottom.
   -------------------------------------------------------------------------- */
.mm--mobile.mr-screen { height: 100%; display: flex; flex-direction: column; }
.mm--mobile .mr-screen__body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 0; max-width: none; overflow: hidden;
}
.mm--mobile .mm-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--s-5) var(--s-5) var(--s-6);
}
.mm--mobile .mm-head { margin-bottom: var(--s-5); }
.mm--mobile .mm-head__top { flex-direction: column; gap: var(--s-4); }
.mm--mobile .mm-journey { margin-bottom: var(--s-6); }
.mm--mobile .mm-subjects { margin-bottom: var(--s-5); }
.mm--mobile .mm-track { height: 42px; }
/* The recommendation pins to the bottom. */
.mm--mobile .mm-next {
  flex: none; margin: 0; border-radius: 0;
  border-left: none; border-bottom: none;
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(22,19,18,0.07);
  padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
}
.mm--mobile .mm-next__head { flex-direction: column; gap: var(--s-3); }
.mm--mobile .mm-next__cta { align-items: stretch; width: 100%; }
.mm--mobile .mm-next__cta .btn-primary { width: 100%; justify-content: center; }
.mm--mobile .mm-next__alt { align-self: center; }
/* On phone the preview peek is dropped from the sticky panel to keep it light. */
.mm--mobile .mm-next__preview { display: none; }
.mm--mobile .mm-spark { padding-bottom: var(--s-2); }

/* ----------------------------------------------------------------------------
   RESPONSIVE — guards the focus/preview view (artboards are fixed frames).
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .mm-screen .mm-head__top { flex-direction: column; gap: var(--s-4); position: relative; }
  /* Stack the readiness hero on phones: the big % crammed "Day-One Ready" + the long
     "X% of the bank worked through" caption into the narrow space beside it, so it
     wrapped awkwardly and the message got lost. Vertical = each line gets full width.
     (Scoped to the LIVE @media breakpoint — mastery-map.js never adds .mm--mobile.) */
  .mm-screen .mm-readiness { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .mm-screen .mm-ready__pct { font-size: 3.4rem; line-height: 0.95; }
  .mm-screen .mm-ready__label { font-size: 1.55rem; }
  .mm-screen .mm-ready__sub { margin-top: 6px; letter-spacing: 0.06em; line-height: 1.45; }
  .mm-screen .mm-trend { margin-top: 4px; }
  /* Cert chip ("PAR ⌄") to the top-right corner (where it sits on desktop) instead of
     dangling below the stat — pulled out of the column flow so it doesn't split off
     from the "Improving" pill, and so the stacked readiness keeps full width. */
  .mm-screen .mm-bar-cluster { position: absolute; top: 0; right: 0; }
  .mm-screen .mm-eyebrow { padding-right: 72px; }   /* reserve room so the eyebrow never runs under the chip */
  .mm-srow { grid-template-columns: 18px 1fr auto; }
  .mm-srow__count { display: none; }
  .mm-subtopic { grid-template-columns: 1fr auto auto; }
  .mm-subtopic__count { display: none; }
  .mm-next__head { flex-direction: column; justify-content: flex-start; }
  /* In the column layout the head's main axis is vertical, so the lede's desktop
     `flex: 1 1 320px` (a 320px WIDTH basis) would become a 320px HEIGHT basis —
     forcing ~200px of dead space above the button. Size it to its content here. */
  .mm-next__lede { flex: 0 1 auto; }
  .mm-next__cta { align-items: stretch; width: 100%; }
  /* Full-width primary CTA must center its label (btn-primary is inline-flex with no
     justify-content), else "Start today's session →" jams to the left edge. Covers the
     dashboard Smart-Mix CTA too (same .mm-next markup). */
  .mm-next__cta .btn-primary { width: 100%; justify-content: center; }
  .mm-next__alt { align-self: center; }
  /* "Practice →" per-subtopic link is the primary action on a row — give it a real tap target. */
  .mm-practice { min-height: 44px; }
}

/* ----------------------------------------------------------------------------
   MICROCOPY DECK — reuses the Marked Review copy-deck composition (.mr-copy).
   -------------------------------------------------------------------------- */
.mm-copy { padding: clamp(28px, 4vw, 40px); }