/* ============================================================================
   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); }

/* ----------------------------------------------------------------------------
   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; }