/* ============================================================================
   APPROACH BAR — the one shell-owned navigation bar (Nav Plan 2026-05-31).
   Three zones: LEFT "ANGLE OF ATTACK Test Prep" wordmark (= Home) ·
   CENTER active Test Center name · RIGHT Menu button. (Cert switching now
   lives inside the Menu sheet, so the bar no longer carries a cert pill.)
   Sticky, 56px, same at every width. Hidden on focus/doorway frames via
   body[data-frame]. Reuses the navScrim/navSheet bottom-sheet for Menu + Cert.
   ========================================================================== */
#appbar {
  position: sticky; top: 0; z-index: 70;
  display: flex; align-items: center; gap: var(--s-3, 12px);
  height: 56px; padding: 0 clamp(12px, 3vw, 22px);
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--line, #e8e2d8);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
/* Hidden until the app has booted (no frame set yet) + during focus/doorway frames. */
body:not([data-frame]) #appbar { display: none; }
body[data-frame="suppressed"] #appbar,
body[data-frame="rail-only"]  #appbar,
body[data-frame="airlock"]    #appbar { display: none; }

/* On 'full' frames the Approach Bar REPLACES each screen's old per-screen
   .session-bar header — hide the redundant one (no JS change, no double header).
   This now covers mock-brief too (promoted to 'full' so students can navigate
   off the Mock flow). cert-picker (suppressed) keeps its own header since the
   Approach Bar is hidden there. The study Question Card uses .sbar, not .session-bar. */
body[data-frame="full"] #app .session-bar { display: none; }

/* Home — the "ANGLE OF ATTACK Test Prep" wordmark (left). */
.abar__home {
  display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0;
  border: 0; background: none; cursor: pointer; padding: 6px 4px 6px 0;
  border-radius: var(--r-sm, 6px);
}
.abar__wm {
  display: inline-flex; align-items: center; gap: .5em; min-width: 0;
  font-family: var(--font-display, sans-serif); font-weight: 700;
  font-size: clamp(.92rem, 2.4vw, 1.06rem); line-height: 1;
  text-transform: uppercase; letter-spacing: var(--tracking-wordmark, .08em);
  white-space: nowrap;
}
/* The "ANGLE OF ATTACK" wordmark is now the real AOA logo (orange SVG), not text.
   Cap-height-matched to the "Test Prep" sub so the lockup reads as one unit. */
.abar__logo {
  display: block; height: clamp(11px, 2.8vw, 14px); width: auto;
  flex: 0 0 auto; user-select: none; -webkit-user-drag: none;
}
.abar__wm__aoa { color: var(--orange, #f47321); }
.abar__wm__sub { color: var(--ink, #161312); font-size: .82em; opacity: .9; }
.abar__home:hover { opacity: .82; }
.abar__home:focus-visible { outline: 2px solid var(--orange, #f47321); outline-offset: 2px; }

/* Center — the active Test Center name (e.g. "Private Pilot Test Center"). */
.abar__center {
  /* True-center on the page — NOT within the flex gap between the differently-
     sized left wordmark and right Menu button (which pushed it off-center).
     Absolutely centered on the (full-bleed) appbar; the side zones flow around it. */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 56%; text-align: center;
  font-family: var(--font-display, sans-serif); font-weight: 600;
  font-size: clamp(.82rem, 2.2vw, .96rem); letter-spacing: .02em;
  color: var(--ink, #161312); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

/* Menu (More) button (right). */
.abar__more {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  margin-left: auto; /* push to the right edge (center label is now absolute) */
  height: 36px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--line, #e2dccf); border-radius: var(--r-md, 10px);
  background: var(--surface, #fff); color: var(--ink, #161312);
  font-family: var(--font-display, sans-serif); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.abar__more:hover { border-color: var(--ink, #161312); }
.abar__more:focus-visible { outline: 2px solid var(--orange, #f47321); outline-offset: 2px; }
.abar__more svg { color: var(--orange, #f47321); }

/* Mobile: drop the center Test-Center label + the Menu label; wordmark stays. */
@media (max-width: 560px) {
  .abar__center { display: none; }
  .abar__more__label { display: none; }
  .abar__more { padding: 0 10px; }
}

/* ── Sheet content: Menu (jump-to) + Cert switcher (reuses navSheet shell) ── */
.asheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.asheet__title { font-family: var(--font-display, sans-serif); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; color: var(--muted, #6b645d); }
.asheet__list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.arow {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 0; background: none; cursor: pointer; text-align: left;
  padding: 12px 12px; border-radius: var(--r-md, 10px);
  font-family: var(--font-body, sans-serif); font-size: .95rem; color: var(--ink, #161312);
}
.arow:hover { background: var(--orange-soft, rgba(244,115,33,.08)); }
.arow:focus-visible { outline: 2px solid var(--orange, #f47321); outline-offset: -2px; }
.arow.is-current { background: var(--orange-soft, rgba(244,115,33,.1)); font-weight: 600; }
.arow.is-current::after { content: "•"; color: var(--orange, #f47321); margin-left: auto; font-size: 1.4rem; line-height: 0; }
.arow__icon { display: inline-flex; width: 26px; justify-content: center; color: var(--orange, #f47321); flex: none; }
.arow__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--orange, #f47321); color: var(--ink, #161312); font-family: var(--font-mono, monospace); font-weight: 700; font-size: .68rem; }
.arow__lock { margin-left: auto; color: var(--muted, #9a948c); flex: none; }
.arow--locked { color: var(--muted, #9a948c); }
.arow--locked .arow__icon { color: var(--muted, #b9b2a8); }
.asheet__divider { height: 1px; background: var(--line, #ece6db); margin: 8px 4px; }
.asheet__certcode { display: inline-flex; min-width: 40px; padding: 2px 8px; border-radius: 6px; background: var(--ink, #161312); color: #f5efe2; font-family: var(--font-mono, monospace); font-weight: 700; font-size: .72rem; justify-content: center; flex: none; }