/* ============================================================================
   AOA TEST CENTER — SESSION BAR v2  ·  "The Instrument Bezel"
   Shared cross-screen chrome. Drop-in replacement for the v1 .session-bar.
   Header-only upgrade: more FUNCTION + better HIERARCHY + MODE-AWARENESS.
   Inherits every token from test-center-system.css. Introduces no new color,
   font, or radius. Orange stays a scalpel.

   Anatomy (one row, three zones, mode-aware) + the Approach Rail beneath:
     LEFT    exit / pause control (ink, never orange) + optional tiny AOA mark
     CENTER  quiet muted context (cert · area in Study; cert only in Mock)
     RIGHT   the live-data cluster (protagonist) + one session menu (⋯)
     RAIL    the promoted progress line — a segmented, tappable instrument
   ========================================================================== */

/* ----------------------------------------------------------------------------
   THE BAR
   -------------------------------------------------------------------------- */
.sbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface);
  /* the rail forms the bottom edge — no separate border needed */
}
.sbar__row {
  display: flex; align-items: center;
  height: 56px;                         /* desktop ceiling */
  padding: 0 clamp(12px, 3vw, 24px);
  gap: var(--s-4);
}

/* ── LEFT zone ───────────────────────────────────────────────────────────── */
.sbar__left { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.sbar__mark {                            /* tiny ink wordmark — kept only while balanced */
  font-family: var(--font-display); font-weight: 700; font-size: 0.86rem;
  letter-spacing: 0.10em; color: var(--ink); text-transform: uppercase;
}
.sbar__rule { width: 1px; height: 22px; background: var(--line); }

/* Exit / Pause (Study) · End exam (Mock). Icon-first. Touch target fills bar height. */
.sbar__exit {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 40px; min-height: 40px; padding: 0 var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--muted);
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.07em; cursor: pointer;
  transition: color var(--glance) var(--ease-calm),
              border-color var(--glance) var(--ease-calm),
              background var(--glance) var(--ease-calm);
}
.sbar__exit svg { width: 16px; height: 16px; flex: none; }
.sbar__exit:hover { color: var(--ink); border-color: var(--muted); background: var(--paper); }
.sbar__exit__label { white-space: nowrap; }

/* ── CENTER zone — quiet context, muted, never a pill, never orange ───────── */
.sbar__context {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sbar__context b { color: var(--body-text); font-weight: 500; }

/* ── RIGHT zone — the live-data cluster (protagonist) + session menu ──────── */
.sbar__cluster { display: flex; align-items: center; gap: var(--s-5); flex: none; }

/* Countdown timer (Mock) — the load-bearing instrument. Calm, never blinks. */
.sbar__timer {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--font-mono); color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.sbar__timer svg { width: 15px; height: 15px; align-self: center; color: var(--muted);
  transition: color var(--brief) var(--ease-calm); }
.sbar__timer__val { font-size: 1.32rem; font-weight: 500; letter-spacing: 0.02em;
  transition: color var(--brief) var(--ease-calm); }
.sbar__timer__cap { font-size: 0.64rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); transition: color var(--brief) var(--ease-calm); }
/* Final ~5 minutes: the timer earns the screen's one orange thing. No blink/pulse.
   The digits + cap are TEXT on the white bar → --orange-text (AA); the inline
   clock icon matches them so the instrument reads as one piece. */
.sbar--final5 .sbar__timer__val,
.sbar--final5 .sbar__timer svg { color: var(--orange-text); }
.sbar--final5 .sbar__timer__cap { color: var(--orange-text); }

/* Position counter — the typographic protagonist + the door into the Navigator. */
.sbar__counter {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 40px; padding: 0 var(--s-2) 0 var(--s-3);
  border: none; background: transparent; cursor: pointer;
  border-radius: var(--r-md);
  transition: background var(--glance) var(--ease-calm);
}
.sbar__counter:hover { background: var(--paper); }
.sbar__counter__nums { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 1px; }
.sbar__counter__pos { font-size: 1.35rem; font-weight: 500; color: var(--ink); line-height: 1; }
.sbar__counter__tot { font-size: 0.86rem; font-weight: 500; color: var(--muted); }
.sbar__counter__grid { color: var(--muted); display: inline-flex; transition: color var(--glance) var(--ease-calm); }
.sbar__counter:hover .sbar__counter__grid { color: var(--ink); }

/* Per-area mastery dot (Study) — a quiet status, never a percentage, never a verdict.
   Hue + word so it never relies on color alone. */
.sbar__mastery { display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.10em; color: var(--muted); }
.sbar__mastery__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--guess); flex: none; }
.sbar__mastery.is-strong   .sbar__mastery__dot { background: var(--success); }
.sbar__mastery.is-building .sbar__mastery__dot { background: var(--caution); }
.sbar__mastery.is-weak     .sbar__mastery__dot { background: var(--guess); }

/* Flagged count (Mock) — surfaces only when > 0. Flag glyph is ink (orange stays on the rail). */
.sbar__flags { display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.86rem; font-weight: 500; color: var(--body-text);
  font-variant-numeric: tabular-nums; }
.sbar__flags svg { width: 15px; height: 15px; color: var(--muted); }

/* Session menu — the "tuck" valve. One kebab absorbing the old "?". */
.sbar__menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted); cursor: pointer; flex: none;
  transition: color var(--glance) var(--ease-calm), border-color var(--glance) var(--ease-calm),
              background var(--glance) var(--ease-calm);
}
.sbar__menu:hover { color: var(--ink); border-color: var(--muted); background: var(--paper); }
.sbar__menu[aria-expanded="true"] { color: var(--ink); border-color: var(--muted); background: var(--paper); }

/* Mark-this-question — study mode only. Replaces the orphan kebab. Toggles
   state.marks[position]; the rail's flag notch and Marked Review pick it up. */
.sbar__mark-q {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted); cursor: pointer; flex: none;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: .04em; text-transform: uppercase;
  transition: color var(--glance) var(--ease-calm), border-color var(--glance) var(--ease-calm),
              background var(--glance) var(--ease-calm);
}
.sbar__mark-q svg { width: 16px; height: 16px; flex: none; }
.sbar__mark-q:hover { color: var(--ink); border-color: var(--muted); background: var(--paper); }
.sbar__mark-q.is-on { color: var(--orange-text); border-color: var(--orange); background: var(--paper); } /* "MARKED" is text → AA; border keeps brand */
.sbar__mark-q.is-on:hover { color: var(--orange-text); border-color: var(--orange-hover); } /* border carries the hover cue; text stays AA */
.sbar__mark-q__label { white-space: nowrap; }

/* ----------------------------------------------------------------------------
   THE APPROACH RAIL — the signature instrument. Lives in the hairline.
   Each question = one discrete tick. State encoded by VALUE + HEIGHT/SHAPE,
   never hue alone (colorblind-safe). One orange marker = current position.
   -------------------------------------------------------------------------- */
.rail {
  display: flex; align-items: flex-end; gap: 2px;
  height: 12px; padding: 0 clamp(12px, 3vw, 24px) 1px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.rail__seg {
  position: relative; flex: 1 1 0; min-width: 0;
  height: 12px; padding: 0; border: none; background: transparent; cursor: pointer;
  display: flex; align-items: flex-end;
}
.rail__bar {
  width: 100%; border-radius: 1.5px; background: var(--line);
  height: 3px;                                   /* unanswered = faint short tick */
  transition: height 120ms var(--ease-decisive), background 120ms var(--ease-calm);
}
/* Study: correctness IS information */
.rail__seg.is-correct .rail__bar { height: 12px; background: var(--ink); }     /* tall, dark  */
.rail__seg.is-wrong   .rail__bar { height: 6px;  background: var(--guess); }    /* short, muted */
/* Mock: correctness hidden — answered reads as a single neutral tick */
.rail__seg.is-answered .rail__bar { height: 10px; background: #6f6863; }
/* Flag = small orange notch above the tick (shape cue, sits clear of fills) */
.rail__seg.is-flagged::after {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 1.5px var(--surface);
}
/* Current = the single orange marker — taller, ringed, the one orange thing on the strip */
.rail__seg.is-current .rail__bar { background: var(--orange); height: 12px; }
.rail__seg.is-current::before {
  content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  width: 4px; height: 16px; background: var(--orange); border-radius: 2px;
  box-shadow: 0 0 0 2px var(--surface);
}
.rail__seg:hover .rail__bar { background: var(--orange-hover); }
.rail__seg.is-correct:hover .rail__bar,
.rail__seg.is-answered:hover .rail__bar { opacity: 0.78; }
.rail__seg:focus-visible { outline: none; }
.rail__seg:focus-visible .rail__bar { box-shadow: var(--focus-ring); }

/* ----------------------------------------------------------------------------
   COMPACT (phone ≤ ~520px) — collapse, never grow. Never two rows.
   Triage: left exit icon · center single live datum · right session kebab.
   Every glyph keeps a ≥44px touch target even as the bar stays visually slim.
   -------------------------------------------------------------------------- */
.sbar--compact .sbar__row { height: 48px; gap: var(--s-2); padding: 0 var(--s-3); }
.sbar--compact .sbar__mark,
.sbar--compact .sbar__rule,
.sbar--compact .sbar__exit__label,
.sbar--compact .sbar__context,
.sbar--compact .sbar__mastery,
.sbar--compact .sbar__flags { display: none; }
.sbar--compact .sbar__exit { width: 44px; height: 44px; padding: 0; justify-content: center; }
.sbar--compact .sbar__primary { flex: 1 1 auto; display: flex; justify-content: center; }
.sbar--compact .sbar__cluster { gap: var(--s-2); }
.sbar--compact .sbar__counter,
.sbar--compact .sbar__menu,
.sbar--compact .sbar__mark-q { height: 44px; }
.sbar--compact .sbar__counter { padding: 0 var(--s-2); }
.sbar--compact .sbar__menu { width: 44px; }
.sbar--compact .sbar__mark-q__label { display: none; }
.sbar--compact .sbar__mark-q { width: 44px; padding: 0; justify-content: center; }
.sbar--compact .rail { height: 11px; }
.sbar--compact .sbar__counter__grid { display: none; }      /* center datum stays purely a value on phone */

/* ----------------------------------------------------------------------------
   SESSION MENU POPOVER
   -------------------------------------------------------------------------- */
.sbmenu {
  position: fixed; z-index: 80; min-width: 226px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-elevated); padding: var(--s-2);
  display: none;
}
.sbmenu.is-open { display: block; animation: callout-lift var(--brief) var(--ease-cinematic) both; }
.sbmenu__item {
  display: flex; align-items: center; gap: var(--s-3); width: 100%;
  padding: var(--s-3) var(--s-3); border: none; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 0.92rem; color: var(--body-text);
  transition: background var(--glance) var(--ease-calm);
}
.sbmenu__item:hover { background: var(--paper); }
.sbmenu__item svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.sbmenu__sep { height: 1px; background: var(--line); margin: var(--s-2) var(--s-1); }
.sbmenu__item--desktop {}   /* keyboard shortcuts — hidden on phone */

/* ----------------------------------------------------------------------------
   QUESTION NAVIGATOR — opened FROM the header (counter / rail), never in it.
   Bottom sheet on phone, centered panel on larger widths.
   States: answered (filled + check) · flagged (outline + flag) · unanswered (ring).
   Color + glyph, never color alone.
   -------------------------------------------------------------------------- */
.nav-scrim {
  position: fixed; inset: 0; z-index: 70; background: rgba(22,19,18,0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  display: none;
}
.nav-scrim.is-open { display: block; animation: fade-in var(--brief) var(--ease-calm); }

.nav-sheet {
  position: fixed; z-index: 71; left: 0; right: 0; bottom: 0;
  background: var(--surface); border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl);
  box-shadow: var(--shadow-elevated); padding: var(--s-4) clamp(16px,4vw,24px) calc(var(--s-6) + env(safe-area-inset-bottom));
  max-height: 86vh; overflow-y: auto;
  transform: translateY(100%); transition: transform var(--beat) var(--ease-cinematic);
}
.nav-scrim.is-open .nav-sheet { transform: translateY(0); }
@media (min-width: 760px) {                 /* desktop: centered popover panel */
  .nav-sheet {
    left: 50%; right: auto; bottom: auto; top: 84px; transform: translate(-50%, -8px);
    width: min(560px, 92vw); border-radius: var(--r-xl); opacity: 0;
    transition: transform var(--brief) var(--ease-cinematic), opacity var(--brief) var(--ease-calm);
  }
  .nav-scrim.is-open .nav-sheet { transform: translate(-50%, 0); opacity: 1; }
}
/* The "Jump to" app menu (NOT the question navigator) was a low, content-hugging sheet —
   it sat ~60% up the screen with a big dim gap above, looking like it didn't fit. On
   mobile, open it as a taller, natural panel (~84vh) and pin the utility "Switch
   certificate" row to the bottom so the space reads as an intentional primary/utility
   split, not a void. (Chris 2026-06-08.) */
@media (max-width: 759px) {
  .nav-sheet--app { min-height: 84vh; display: flex; flex-direction: column; }
  .nav-sheet--app .asheet__divider { margin-top: auto; }
}
.nav-sheet__handle { width: 40px; height: 4px; border-radius: 999px; background: var(--line);
  margin: 0 auto var(--s-4); }
@media (min-width: 760px) { .nav-sheet__handle { display: none; } }
.nav-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); }
.nav-sheet__title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); white-space: nowrap; }
.nav-sheet__close {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  color: var(--muted); cursor: pointer;
}
.nav-sheet__close:hover { color: var(--ink); border-color: var(--muted); }

.nav-filters { display: flex; gap: var(--s-2); margin-bottom: var(--s-5); flex-wrap: wrap; }
.navf {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface);
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); cursor: pointer;
  transition: color var(--glance) var(--ease-calm), border-color var(--glance) var(--ease-calm),
              background var(--glance) var(--ease-calm);
}
.navf b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.navf:hover { border-color: var(--muted); color: var(--ink); }
.navf.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.navf.is-active b { color: #fff; }

.nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: var(--s-3); }
.nav-cell {
  position: relative; aspect-ratio: 1; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.92rem; color: var(--muted);
  transition: border-color var(--glance) var(--ease-calm), transform var(--tap) var(--ease-decisive);
}
.nav-cell:hover { transform: translateY(-1px); border-color: var(--muted); }
.nav-cell.is-answered { background: var(--ink); border-color: var(--ink); color: #fff; }
.nav-cell.is-answered .nav-cell__check { display: block; }
.nav-cell.is-flagged { border-color: var(--orange); color: var(--ink); background: var(--orange-soft); }
.nav-cell.is-flagged .nav-cell__flag { display: block; }
.nav-cell.is-current { box-shadow: var(--focus-ring); border-color: var(--orange); }
.nav-cell__check, .nav-cell__flag {
  display: none; position: absolute; top: 3px; right: 4px; width: 11px; height: 11px;
}
.nav-cell__check { color: var(--success); }
.nav-cell.is-answered .nav-cell__check { color: #fff; }
.nav-cell__flag { color: var(--orange); }
.nav-cell[hidden] { display: none; }

.nav-foot { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.nav-foot__summary { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); }
.nav-foot__summary b { color: var(--ink); font-weight: 500; }
.nav-foot[hidden] { display: none; }
.nav-foot .btn-primary { min-height: 44px; }

/* ----------------------------------------------------------------------------
   TEST-DAY BRIEF — a quiet full-bleed panel before the Mock clock starts.
   Inherited tokens only; instructor voice (placeholder copy).
   -------------------------------------------------------------------------- */
.brief {
  position: relative; overflow: hidden;
  background: var(--ink); color: #f3efe9; border-radius: var(--r-xl);
  padding: clamp(28px, 5vw, 52px);
}
.brief::before {            /* faint instrument glow, well under the grain ceiling */
  content: ""; position: absolute; top: -40%; right: -10%; width: 60%; height: 160%;
  background: radial-gradient(closest-side, rgba(244,115,33,0.12), transparent 70%);
  pointer-events: none;
}
.brief__eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--orange); }
.brief__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3.2vw, 2rem);
  line-height: 1.12; color: #fff; margin: var(--s-3) 0 var(--s-4); letter-spacing: 0.01em; }
.brief__lede { font-family: var(--font-body); font-size: 1.04rem; line-height: 1.6; color: #cfc8c1;
  max-width: 56ch; }
.brief__list { display: grid; gap: var(--s-3); margin: var(--s-6) 0 var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.brief__item { display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-4); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-lg);
  background: rgba(255,255,255,0.03); }
.brief__item svg { width: 18px; height: 18px; color: var(--orange); flex: none; margin-top: 2px; }
.brief__item__name { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: #fff; }
.brief__item__desc { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.5; color: #b9b2ac; margin-top: 3px; }
.brief__foot { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.brief__rule { font-family: var(--font-mono); font-size: 0.74rem; color: #8c857f; letter-spacing: 0.03em; }
.brief .btn-primary { background: var(--orange); white-space: nowrap; }
.brief .btn-primary:hover { background: var(--orange-hover); }

/* Menu sheet — GRID (fast default: aim + tap) + LIST toggle. (Chris 2026-06-05) */
.asheet__head-actions { display: inline-flex; align-items: center; gap: 8px; }
.amenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--line, #e6e3e0); border-radius: var(--r-md, 9px); background: var(--surface, #fff); color: var(--muted, #6b6663); cursor: pointer; flex: none; }
.amenu-toggle:hover { color: var(--orange, #f47321); border-color: var(--orange, #f47321); }
.amenu-body--grid .amenu-listmode { display: none; }
.amenu-body--list .amenu-grid { display: none; }
/* Grid view = a hierarchical launchpad: Dashboard hero (full-width) → everyday
   tools (vertical rows) → a "when you're ready" finish line (3-wide). */
.amenu-grid { display: block; padding: 8px 0 4px; }
/* Dashboard hero — the home base. Full-width, branded ink card so it reads first. */
.amenu-hero { display: flex; align-items: center; gap: 13px; width: 100%; padding: 15px 16px; background: var(--ink, #161312); border: 1px solid var(--ink, #161312); border-radius: var(--r-lg, 14px); cursor: pointer; text-align: left; color: #f5efe2; font-family: var(--font-display, sans-serif); font-weight: 600; font-size: 1rem; letter-spacing: .01em; transition: transform .08s ease, box-shadow .12s ease; }
.amenu-hero:hover { box-shadow: 0 4px 14px rgba(22,19,18,.18); }
.amenu-hero:active { transform: scale(.99); }
.amenu-hero.is-current { box-shadow: 0 0 0 2px var(--orange, #f47321); }
.amenu-hero__ico { color: var(--orange, #f47321); display: inline-flex; flex: none; }
.amenu-hero__lbl { flex: 1 1 auto; }
.amenu-hero__hint { font-family: var(--font-mono, monospace); font-weight: 500; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(245,239,226,.55); flex: none; }
/* Everyday tools — vertical full-width rows. */
.amenu-tools { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.amenu-rowtile { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; background: var(--surface, #fff); border: 1px solid var(--line, #e6e3e0); border-radius: var(--r-md, 12px); cursor: pointer; text-align: left; color: var(--ink, #161312); font-family: var(--font-display, sans-serif); font-weight: 600; font-size: .92rem; transition: border-color .12s ease, background .12s ease, transform .08s ease; }
.amenu-rowtile:hover { border-color: var(--orange, #f47321); background: var(--orange-soft, rgba(244,115,33,.06)); }
.amenu-rowtile:active { transform: scale(.99); }
.amenu-rowtile.is-current { border-color: var(--orange, #f47321); background: var(--orange-soft, rgba(244,115,33,.09)); }
.amenu-rowtile__ico { color: var(--orange, #f47321); display: inline-flex; width: 22px; justify-content: center; flex: none; }
/* "When you're ready" — the finish-line divider label. */
.amenu-section-label { display: flex; align-items: center; gap: 10px; margin: 16px 2px 9px; font-family: var(--font-display, sans-serif); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; color: var(--muted, #6b6663); }
.amenu-section-label::before, .amenu-section-label::after { content: ""; height: 1px; flex: 1; background: var(--line, #ece6db); }
/* Everyday actions — big tactile CARD tiles, 3-wide (Chris redesign 2026-06-05). */
.amenu-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
/* Search the bank, inline — type + Enter seeds the Search screen's query. */
.amenu-search { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 12px 14px; background: var(--surface, #fff); border: 1px solid var(--line, #e6e3e0); border-radius: var(--r-md, 12px); }
.amenu-search:focus-within { border-color: var(--orange, #f47321); box-shadow: 0 0 0 3px rgba(244,115,33,.12); }
.amenu-search__ico { color: var(--orange, #f47321); display: inline-flex; flex: none; }
.amenu-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none; font-family: var(--font-body, sans-serif); font-size: .95rem; color: var(--ink, #161312); }
.amenu-search__input::placeholder { color: var(--muted, #6b6663); }
.amenu-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Finish line — Milestones · Mock Exam · Endorsement as full-width rows. */
.amenu-finish { display: flex; flex-direction: column; gap: 8px; }
.amenu-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 16px 8px; min-height: 86px; background: var(--surface, #fff); border: 1px solid var(--line, #e6e3e0); border-radius: var(--r-md, 12px); cursor: pointer; text-align: center; color: var(--ink, #161312); font-family: var(--font-display, sans-serif); font-weight: 600; font-size: .8rem; line-height: 1.18; transition: border-color .12s ease, background .12s ease, transform .08s ease; }
.amenu-tile:hover { border-color: var(--orange, #f47321); background: var(--orange-soft, rgba(244,115,33,.06)); }
.amenu-tile:active { transform: scale(.97); }
.amenu-tile.is-current { border-color: var(--orange, #f47321); background: var(--orange-soft, rgba(244,115,33,.09)); }
.amenu-tile__ico { color: var(--orange, #f47321); display: inline-flex; }
.amenu-secondary { margin-top: 2px; }
/* "For instructors" — deliberately subtle, pinned to the bottom of the menu (Chris). */
.amenu-cfi { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line, #e6e3e0); }
.amenu-cfi__lbl { display: block; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted, #6b6663); padding: 0 0 5px 4px; }
.arow--quiet { font-size: 0.86rem; color: var(--muted, #6b6663); }
.arow--quiet .arow__icon { opacity: 0.7; }

/* Touch-target floor on phones — several Navigator/Menu controls were 34–36px, under
   the ~44px tap minimum. This file loads after test-center-system.css, so .btn-icon
   (defined there) is overridden at equal specificity. */
@media (max-width: 640px) {
  .navf { height: 44px; }
  .nav-sheet__close, .amenu-toggle, .btn-icon { width: 44px; height: 44px; }
}