/* ============================================================================
   AOA TEST CENTER — MILESTONES (screen 09)
   The reward surface — quiet pride, not kitsch. An Achievements grid + an
   OPT-IN, pseudonymous Leaderboard. Built last on purpose: the restrained
   system (01–08) is locked, so this can't drift into Duolingo gamification.

   Screen-level composition ONLY. Every color, font, radius, shadow and motion
   value is inherited from test-center-system.css. The screen shell (.mr-screen
   / .mr-screen__body), the empty-state composition, and the mastery-color
   family come from marked-review.css; the two tabs reuse the .mode-segment /
   .mode-pill segmented control from cert-picker.css. NO new tokens, NO new
   colors, NO new component variants.

   Discipline carried over: orange is a scalpel (selection only), a goal is a
   GOAL never a tease, whitespace is generous, motion is named and calm.
   The dignity is the reward — NO confetti, NO points, NO streaks, NO levels.
   ========================================================================== */

.ms-screen .session-bar { border-bottom: 1px solid var(--line); }

/* White surface, never cream — per Chris 2026-06-02. The .mr-screen shell
   already uses --surface (white); this guards the screen + its body so this
   milestones view can never inherit the warm --paper page tone. */
.ms-screen,
.ms-screen .mr-screen__body { background: var(--surface); }

/* ----------------------------------------------------------------------------
   HEADER — eyebrow → heading → mentor subhead, then the two-tab segment.
   -------------------------------------------------------------------------- */
.ms-head { margin-bottom: clamp(20px, 3vw, 28px); }
.ms-eyebrow { margin-bottom: var(--s-3); }
.ms-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1.06; letter-spacing: 0.005em; color: var(--ink);
}
.ms-subhead {
  margin-top: var(--s-3);
  font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.55;
  color: var(--muted); text-wrap: pretty; max-width: 56ch;
}
.ms-subhead b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

/* The tablist reuses .mode-segment / .mode-pill verbatim (cert-picker.css). */
.ms-tabs { margin-bottom: clamp(22px, 3vw, 32px); }

/* ----------------------------------------------------------------------------
   AIRMANSHIP INDEX CARD — a compact entry to the full Leaderboard screen. The
   viewer's own rank + Index, with a "View leaderboard" cue. Paid-tier only:
   free/guest viewers (or the API's {locked:true}) get the BLURRED locked tease
   instead — never real names or numbers. One orange accent (the leading mark);
   the value/Index numbers are JetBrains Mono tabular; labels are Oswald. No new
   tokens or colors — all inherited from test-center-system.css.
   -------------------------------------------------------------------------- */
.ms-lbcard {
  display: flex; align-items: center; gap: var(--s-4);
  width: 100%; text-align: left;
  margin-bottom: clamp(20px, 3vw, 28px);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color var(--glance) var(--ease-calm),
              box-shadow var(--glance) var(--ease-calm),
              transform var(--glance) var(--ease-calm);
}
.ms-lbcard:hover { border-color: rgba(244,115,33,0.4); box-shadow: 0 4px 14px rgba(22,19,18,0.08); }
.ms-lbcard:active { transform: translateY(1px); }
.ms-lbcard:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* The leading mark — the single orange scalpel on this card. */
.ms-lbcard__mark {
  flex: none;
  width: 42px; height: 42px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange-text); background: var(--orange-soft);
  border: 1px solid rgba(244,115,33,0.24);
}
.ms-lbcard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ms-lbcard__eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.ms-lbcard__value {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: 1.04rem;
  color: var(--ink); letter-spacing: 0.005em;
}
.ms-lbcard__rank {
  font-family: var(--font-mono); font-weight: 600; font-size: 1.1rem;
  color: var(--orange-text); font-variant-numeric: tabular-nums;  /* rank is text → AA role */
}
.ms-lbcard__of { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ms-lbcard__soon { font-size: 0.92rem; font-weight: 500; color: var(--muted); }

/* The Index chip — a quiet 0–100 number, mono + tabular. */
.ms-lbcard__idx {
  flex: none; display: flex; flex-direction: column; align-items: center;
  padding: 0 var(--s-3);
}
.ms-lbcard__idxnum {
  font-family: var(--font-mono); font-weight: 600; font-size: 1.32rem;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.ms-lbcard__idxlbl {
  margin-top: 3px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.56rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
}
.ms-lbcard__cta {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  transition: color var(--glance) var(--ease-calm);
}
.ms-lbcard:hover .ms-lbcard__cta { color: var(--orange-text); }  /* text role → AA */
.ms-lbcard__cta svg { flex: none; }

/* ── LOCKED TEASE — the free/guest card. A blurred decorative bar band sits
      behind a calm lock + unlock CTA. Real names/numbers are NEVER rendered
      here (nothing is fetched for a locked viewer). A GOAL, not a dare. ────── */
.ms-lbcard--locked {
  position: relative; display: block; cursor: default;
  overflow: hidden;
  padding: 0;
}
.ms-lbcard--locked:hover { border-color: var(--line); box-shadow: var(--shadow-card); }
.ms-lbcard__teasebars {
  display: flex; align-items: flex-end; gap: var(--s-3);
  height: 64px; padding: var(--s-4) var(--s-5);
  filter: blur(5px); opacity: 0.5;
  -webkit-user-select: none; user-select: none; pointer-events: none;
}
.ms-lbcard__teasebar {
  flex: 1; border-radius: var(--r-sm); background: var(--line);
}
.ms-lbcard__teasebar:nth-child(1) { height: 60%; }
.ms-lbcard__teasebar:nth-child(2) { height: 100%; }
.ms-lbcard__teasebar:nth-child(3) { height: 78%; }
.ms-lbcard__lockover {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(90deg, rgba(255,255,255,0.82), rgba(255,255,255,0.96) 40%);
}
.ms-lbcard__lockico {
  flex: none;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); background: var(--paper); border: 1px solid var(--line);
}
.ms-lbcard__lockcopy { flex: 1; min-width: 0; }
.ms-lbcard__locktitle {
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  color: var(--ink); letter-spacing: 0.005em; line-height: 1.25;
}
.ms-lbcard__locksub {
  margin-top: 2px;
  font-size: 0.8rem; line-height: 1.4; color: var(--muted); text-wrap: pretty;
}
.ms-lbcard__unlock {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: none; border: none; cursor: pointer; padding: var(--s-2) 0;
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--orange-text);  /* text role → AA */
  transition: color var(--glance) var(--ease-calm);
}
.ms-lbcard__unlock:hover { color: var(--ink); }
.ms-lbcard__unlock:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: var(--r-sm); }
.ms-lbcard__unlock svg { flex: none; }

/* Phone: the locked tease's CTA wraps under the copy so nothing crowds. */
@media (max-width: 640px) {
  .ms-lbcard__lockover { flex-wrap: wrap; gap: var(--s-3); }
  .ms-lbcard__cta { display: none; }   /* the whole card is tappable; drop the cue on narrow */
}

/* ----------------------------------------------------------------------------
   ACHIEVEMENTS — a PROGRESS TRACK, not a grid. A single continuous line runs
   through every milestone stop; the portion up to the last earned stop is
   filled green (checked-off), the rest is the muted not-yet rail. Recognition
   for real progress, not participation trophies.
     EARNED  = filled-green node + strong check + date + one quiet line.
     NOT-YET = muted outline node + lock + the criterion, stated as a goal.
   Brand: orange stays the single scalpel accent for this view (the primary
   CTA / selection elsewhere); EARNED reads in the system's calm success green.
   -------------------------------------------------------------------------- */
.ms-track { position: relative; }

/* The continuous track line — runs horizontally behind the row of stops,
   centered on the medal nodes (node is 58px tall → center at 29px). It starts
   at the first stop's center and ends at the last stop's center: each of the
   --ms-total columns is (100/total)% wide, so a node center sits 50/total% in
   from its column edge. */
.ms-track__line {
  position: absolute;
  left: calc(50% / var(--ms-total, 8));
  right: calc(50% / var(--ms-total, 8));
  top: 29px;
  height: 3px; border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
/* The earned portion of the line — green, grows left→right to the last earned
   stop. --ms-fill is 0..1 (set inline from JS). Reveals once, calmly. */
.ms-track__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--ms-fill, 0) * 100%);
  background: var(--success);
  border-radius: var(--r-pill);
  transform-origin: left center;
  transition: width var(--breath, 720ms) var(--ease-cinematic);
}

/* The row of stops sits ON the line. */
.ms-track__stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--ms-total, 8), 1fr);
  gap: var(--s-4);
}

.ms-stop {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  text-align: center; min-width: 0;
}

/* The node — the medal that sits on the track line. Earned/not-yet state lives
   here, and it never relies on color alone (a strong check / a lock back it). */
.ms-stop__node {
  position: relative; flex: none;
}
.ms-stop__body {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  min-width: 0;
}

/* The medal — a circular icon container (the system's iconography pattern). */
.ms-medal {
  position: relative; flex: none;
  width: 58px; height: 58px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
}
/* EARNED — filled green, the obvious checked-off state. */
.ms-medal--earned {
  color: #fff;
  background:
    radial-gradient(circle at 50% 34%, #3a9560, var(--success) 78%);
  border: 1.5px solid var(--success);
  box-shadow: 0 4px 14px rgba(44,122,75,0.28), 0 1px 0 rgba(255,255,255,0.25) inset;
}
.ms-medal--locked {
  color: var(--guess);
  background: var(--surface);
  border: 1.5px dashed var(--line);
}
/* The strong check — a filled green disc with a white tick, pinned to the node.
   This is the unmistakable "checked off" mark Chris asked for. */
.ms-stop__check {
  position: absolute; right: -3px; bottom: -3px;
  width: 24px; height: 24px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--success); color: #fff;
  border: 2.5px solid var(--surface);
  box-shadow: 0 2px 6px rgba(44,122,75,0.32);
}
.ms-stop__check svg { stroke-width: 2.4; }
.ms-medal__lock {
  position: absolute; right: -4px; bottom: -4px;
  width: 22px; height: 22px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--muted);
}

/* State row — never color-alone: an icon + a word carry earned / locked. */
.ms-badge__state {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.ms-badge__state svg { flex: none; }
.ms-badge__state--earned { color: var(--success); }
.ms-badge__state--locked { color: var(--muted); }
.ms-badge__date {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem;
  text-transform: none; letter-spacing: 0.02em; color: var(--muted);
}

.ms-badge__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.06rem;
  letter-spacing: 0.005em; color: var(--ink); line-height: 1.2;
}
.ms-stop--locked .ms-badge__title { color: var(--body-text); }

.ms-badge__meaning,
.ms-badge__crit {
  font-size: 0.9rem; line-height: 1.5; color: var(--muted); text-wrap: pretty;
  margin: 0;
}
.ms-badge__crit-label {
  display: block; margin-bottom: 4px;
  font-family: var(--font-mono); font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--guess);
}

/* ----------------------------------------------------------------------------
   NEW-STUDENT EMPTY — calm mentor voice, never shaming. Reuses .mr-empty DNA.
   -------------------------------------------------------------------------- */
.ms-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-5); padding: clamp(36px, 6vw, 64px) var(--s-6);
}
.ms-empty__medal {
  width: 64px; height: 64px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange); background: var(--orange-soft);
  border: 1px solid rgba(244,115,33,0.28);
}
.ms-empty__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  color: var(--ink); letter-spacing: 0.005em;
}
.ms-empty__body { max-width: 44ch; font-size: 1rem; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.ms-empty .btn-primary { text-decoration: none; }

/* ----------------------------------------------------------------------------
   LEADERBOARD — OPT-IN PANEL (default). Privacy-first: NO data is shown until
   the student opts in. Explains what it is, the pseudonymity promise, and the
   single clear join CTA.
   -------------------------------------------------------------------------- */
.ms-optin {
  max-width: 620px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s-5);
  padding: clamp(28px, 5vw, 52px) clamp(20px, 4vw, 40px);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--paper);
}
.ms-optin__icon {
  width: 64px; height: 64px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--orange); background: var(--orange-soft);
  border: 1px solid rgba(244,115,33,0.28);
}
.ms-optin__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem;
  color: var(--ink); letter-spacing: 0.005em;
}
.ms-optin__lede {
  max-width: 50ch; font-size: 1.02rem; line-height: 1.6;
  color: var(--muted); text-wrap: pretty;
}
.ms-optin__points {
  list-style: none; width: 100%; max-width: 44ch;
  display: flex; flex-direction: column; gap: var(--s-3); text-align: left;
  padding: var(--s-4) 0;
}
.ms-optin__points li {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: 0.96rem; line-height: 1.5; color: var(--body-text);
}
.ms-optin__points li svg { flex: none; color: var(--orange); margin-top: 2px; }
.ms-optin__points b { color: var(--ink); font-weight: 600; }
.ms-optin .btn-primary { text-decoration: none; }
.ms-optin__fine {
  max-width: 48ch;
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.6;
  color: var(--muted); letter-spacing: 0.01em;
}

/* ----------------------------------------------------------------------------
   LEADERBOARD — OPTED-IN TABLE. A clean, real table. Leaders celebrated at the
   top; the student's own row highlighted and ALWAYS visible in context near
   its neighbors — never shaming the bottom, never "you're behind N people".
   -------------------------------------------------------------------------- */
.ms-board__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5);
}
.ms-board__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
  color: var(--ink); letter-spacing: 0.005em;
}
.ms-board__note {
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}
.ms-board__you-sum {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted);
  letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ms-board__you-sum b { color: var(--orange-text); font-weight: 600; } /* number is text → AA role */

.ms-table { width: 100%; border-collapse: collapse; }
.ms-table thead th {
  text-align: left;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  padding: 0 var(--s-4) var(--s-3); border-bottom: 1px solid var(--line);
}
.ms-col-rank   { width: 66px; text-align: center !important; }
.ms-col-metric { text-align: right !important; white-space: nowrap; }

.ms-trow td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.ms-rank {
  display: block; text-align: center;
  font-family: var(--font-mono); font-size: 0.88rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ms-trow--lead .ms-rank { color: var(--ink); font-weight: 500; }
.ms-handle {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display); font-weight: 600; font-size: 0.98rem;
  letter-spacing: 0.01em; color: var(--ink);
}
.ms-metric {
  display: block; text-align: right;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.92rem;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* The student's own row — the single orange selection focus on this surface. */
.ms-trow--you td { background: var(--orange-soft); border-color: rgba(244,115,33,0.28); }
.ms-trow--you td:first-child { box-shadow: inset 3px 0 0 var(--orange); }
.ms-trow--you .ms-rank { color: var(--orange-text); font-weight: 600; } /* rank number is text → AA role */
.ms-you-tag {
  font-family: var(--font-display); font-weight: 600; font-size: 0.58rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); /* navy on orange — AA (audit) */
  background: var(--orange); border-radius: var(--r-sm); padding: 2px 7px;
}

/* Group labels + the honest "…" gap between leaders and the student's stretch. */
.ms-trlabel td { border: none; padding: var(--s-5) var(--s-4) var(--s-2); }
.ms-trlabel--first td { padding-top: 0; }
.ms-grouplabel {
  font-family: var(--font-display); font-weight: 600; font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
}
.ms-trgap td {
  border: none; text-align: center; padding: var(--s-2) 0;
  color: var(--line); font-family: var(--font-mono); letter-spacing: 0.4em;
  font-size: 0.9rem;
}

.ms-board__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
}
.ms-board__handle { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.01em; }
.ms-board__handle b { color: var(--ink); font-weight: 500; }
.ms-linkbtn {
  background: none; border: none; padding: var(--s-1) 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  transition: color var(--glance) var(--ease-calm);
}
.ms-linkbtn:hover { color: var(--orange-text); } /* hover label is text → AA role */
.ms-board__foot-right { display: inline-flex; align-items: center; gap: var(--s-5); }

/* ----------------------------------------------------------------------------
   MOTION — inherited & restrained. Badges + rows reveal once (callout.lift /
   checklist.cascade), then settle. No perpetual motion, no shimmer, no burst.
   prefers-reduced-motion collapses all (handled by the token layer + JS step).
   -------------------------------------------------------------------------- */
.ms-reveal { opacity: 0; transform: translateY(12px); }
.ms-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--beat) var(--ease-cinematic),
              transform var(--beat) var(--ease-cinematic);
}

/* aria-live announcer — visually hidden. */
.ms-sr,
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ----------------------------------------------------------------------------
   MICROCOPY DECK — the AOA-voice copy for this surface (team review). Reuses
   the Marked Review copy-deck composition (.mr-copy …) verbatim.
   -------------------------------------------------------------------------- */
.ms-copy { padding: clamp(28px, 4vw, 40px); }

/* ============================================================================
   MOBILE (~390px) — co-primary. Driven by an explicit .ms--mobile class so the
   layout renders correctly inside a fixed-width artboard (container, not media).
   ========================================================================== */
.ms--mobile.mr-screen { height: 100%; display: flex; flex-direction: column; }
.ms--mobile .mr-screen__body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 0; max-width: none; overflow: hidden;
}
/* Tabs stay reachable: header + tabs are pinned to the top. */
.ms--mobile .ms-stickytop {
  flex: none;
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.ms--mobile .ms-head { margin-bottom: var(--s-4); }
.ms--mobile .ms-title { font-size: 1.5rem; }
.ms--mobile .ms-tabs { margin-bottom: 0; }
.ms--mobile .mode-segment { gap: var(--s-2); }
.ms--mobile .mode-pill { flex: 1; justify-content: center; padding: 0 var(--s-3); }

.ms--mobile .ms-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--s-5);
}
.ms--mobile .ms-optin { padding: var(--s-6) var(--s-5); border: none; background: transparent; }

/* Leaderboard table becomes stacked rows on phone. */
.ms-lrow {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface);
}
.ms-lrow + .ms-lrow { margin-top: var(--s-2); }
.ms-lrow__rank {
  flex: none; width: 34px;
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: center;
}
.ms-lrow__handle {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: 0.94rem;
  color: var(--ink); letter-spacing: 0.01em;
}
.ms-lrow__handle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-lrow__metric {
  flex: none;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.88rem;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.ms-lrow--you { background: var(--orange-soft); border-color: rgba(244,115,33,0.32); border-left: 3px solid var(--orange); }
.ms-lrow--you .ms-lrow__rank { color: var(--orange-text); font-weight: 600; } /* rank number is text → AA role */
.ms-lgroup {
  font-family: var(--font-display); font-weight: 600; font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
  margin: var(--s-5) 0 var(--s-3);
}
.ms-lgroup:first-child { margin-top: 0; }
.ms-lgap { text-align: center; color: var(--line); font-family: var(--font-mono); letter-spacing: 0.4em; padding: var(--s-2) 0; }

/* The student's rank pinned to the bottom — always visible on phone. */
.ms-youbar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: #f3efe9;
  box-shadow: 0 -4px 16px rgba(22,19,18,0.12);
}
.ms-youbar__label {
  font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.ms-youbar__rank { font-family: var(--font-mono); font-size: 0.78rem; color: #b9b2ac; }
.ms-youbar__rank b { color: var(--orange-hover); font-weight: 600; }
.ms-youbar__metric { font-family: var(--font-mono); font-size: 0.9rem; color: #fff; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------------
   RESPONSIVE — the horizontal track is roomy but tight at 8-across. Below the
   desktop comfort width it folds to the same vertical track the phone uses, so
   each milestone keeps its breathing room. Guards the focus / preview view too
   (artboards are fixed frames).
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Fold the horizontal track to a vertical rail (same pattern as mobile). */
  .ms-track__line {
    left: 29px; right: auto; top: 0; bottom: 0;
    width: 3px; height: auto;
  }
  .ms-track__fill {
    left: 0; right: 0; top: 0; bottom: auto;
    width: 100%; height: calc(var(--ms-fill, 0) * 100%);
  }
  .ms-track__stops {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .ms-stop {
    flex-direction: row; align-items: flex-start; text-align: left;
    gap: var(--s-4);
  }
  .ms-stop__body { align-items: flex-start; text-align: left; }
}
@media (max-width: 640px) {
  .ms-board__head { gap: var(--s-2); }
}

/* ----------------------------------------------------------------------------
   VERTICAL TRACK — the phone DOM (.ms-track--vert) and the folded tablet view.
   A single rail runs down the left edge of the medal column; the earned portion
   fills green top→down.
   -------------------------------------------------------------------------- */
.ms-track--vert .ms-track__line {
  left: 29px; right: auto; top: 0; bottom: 0;
  width: 3px; height: auto;
}
.ms-track--vert .ms-track__fill {
  left: 0; right: 0; top: 0; bottom: auto;
  width: 100%; height: calc(var(--ms-fill, 0) * 100%);
}
.ms-track--vert .ms-track__stops {
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
.ms-track--vert .ms-stop {
  flex-direction: row; align-items: flex-start; text-align: left;
  gap: var(--s-4);
}
.ms-track--vert .ms-stop__body { align-items: flex-start; text-align: left; }