/* ============================================================================
   AOA TEST CENTER — ENDORSEMENT WORKFLOW (screen 11)
   The most consequential surface in the product: a prepared student earns a
   real CFI's written-test endorsement. The platform auto-detects eligibility;
   the student requests; a Certificated Flight Instructor reviews the evidence
   and SIGNS — recorded with attribution and an endorsement reference. (The old
   signed-document preview + download chrome was removed in W1; the CFI's
   signature is the artifact, not a generated PDF.)

   TRUST & CLARITY above all. Never cheerful, never gamified, never implies the
   software issues the endorsement — a human CFI signs, always. The moment of
   issuance is calm and dignified: no confetti, no fanfare. Honoring the weight
   of it IS the design.

   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) comes from marked-review.css; the green-depth
   ramp (--g1…--g10) used in the CFI evidence snapshot comes from mastery-map.css;
   the charcoal pull-quote tray (.takeaway) is reused verbatim. NO new tokens,
   NO new colors, NO new component variants.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   SCREEN SHELL — reuse .mr-screen. position:relative so the confirm sheet can
   overlay ABSOLUTE inside the artboard (never escapes the frame). The reading
   column runs a touch narrower (~680px) — this is a focused, serious column.
   -------------------------------------------------------------------------- */
.en-screen { position: relative; }
.en-screen .session-bar { border-bottom: 1px solid var(--line); }
.en-screen.mr-screen .mr-screen__body { max-width: 680px; }
.en-screen .session-bar {
  padding-inline: calc(max(0px, (100% - 680px)) / 2 + clamp(20px, 4vw, 32px));
}
.en-bar-cluster { display: flex; align-items: center; gap: var(--s-2); }

/* ----------------------------------------------------------------------------
   HEADER — eyebrow → heading → mentor subhead.
   -------------------------------------------------------------------------- */
.en-head { margin-bottom: clamp(24px, 4vw, 34px); }
.en-eyebrow { margin-bottom: var(--s-3); }
.en-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height: 1.07; letter-spacing: 0.005em; color: var(--ink);
}
.en-subhead {
  margin-top: var(--s-3);
  font-size: clamp(1rem, 1.6vw, 1.08rem); line-height: 1.55;
  color: var(--muted); text-wrap: pretty; max-width: 56ch;
}
.en-subhead b { color: var(--ink); font-weight: 500; }

/* ----------------------------------------------------------------------------
   1. ELIGIBILITY TRACKER — a calm, official checklist of the path to the
   endorsement. Every criterion carries a WORD (Met / In progress) + an icon
   + (where relevant) a count — never color alone.
   -------------------------------------------------------------------------- */
.en-elig { margin-top: clamp(24px, 4vw, 32px); }
.en-elig__label {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-4);
}
.en-elig__note {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
}

.en-crit { list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.en-crit__item {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: start; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.en-crit__item--met { border-color: rgba(44,122,75,0.32); background: var(--success-soft); }

/* The marker — a circular icon container. Met = calm green check; in-progress
   = a quiet ring. Color is never the only signal (the state word is below). */
.en-crit__marker {
  flex: none; grid-row: span 2;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--muted);
}
.en-crit__item--met .en-crit__marker {
  border-color: var(--success); background: var(--surface); color: var(--success);
}
.en-crit__body { min-width: 0; }
.en-crit__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0.005em; color: var(--ink); line-height: 1.25;
}
.en-crit__detail {
  margin-top: 3px;
  font-size: 0.9rem; line-height: 1.5; color: var(--muted); text-wrap: pretty;
}
.en-crit__detail b { color: var(--body-text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* The state word — the non-color carrier. Right-aligned, small, instrument. */
.en-crit__state {
  grid-column: 3; grid-row: 1 / span 2; align-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
  white-space: nowrap;
}
.en-crit__state--met { color: var(--success); }
.en-crit__state svg { flex: none; }

/* In-progress count — a thin meter under the detail (a count, never a score). */
.en-crit__meter {
  grid-column: 2; margin-top: var(--s-3);
  height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden;
}
.en-crit__meter-fill {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: var(--orange);
  transition: width var(--breath) var(--ease-cinematic);
}

/* ----------------------------------------------------------------------------
   2. REQUEST — once eligible, ONE primary action. Until then, the button is
   disabled with a plain "here's what's left" line (never shaming).
   -------------------------------------------------------------------------- */
.en-request {
  margin-top: clamp(26px, 4vw, 36px); padding-top: clamp(22px, 3vw, 28px);
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4);
}
.en-request__cta { white-space: nowrap; }
/* Disabled = a calm, legible "not yet" — neutral, not a dead gray ghost. */
.en-request__cta[disabled] {
  opacity: 1; background: var(--line); color: var(--muted); box-shadow: none;
  pointer-events: none;
}
.en-request__cta[disabled] svg { display: none; }
.en-request__left {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: 0.96rem; line-height: 1.5; color: var(--body-text); text-wrap: pretty;
}
.en-request__left svg { flex: none; color: var(--muted); margin-top: 2px; }
.en-request__left b { color: var(--ink); font-weight: 600; }
.en-request__ready {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--success);
}
.en-request__ready svg { flex: none; }
/* Post-submit confirmation — a normal block paragraph (NOT the flex __left,
   which columnized the sentence into "Jordan / A. / Hale"). Chris, 2026-05-30. */
.en-confirm-note { display: block; font-size: 0.96rem; line-height: 1.55; color: var(--body-text); text-wrap: pretty; max-width: 60ch; }
.en-confirm-note b { color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------------------------
   3. CONFIRM SHEET — a brief, serious confirm. Absolutely positioned inside the
   screen so it stays in the artboard. Reuses the overlay backdrop + panel DNA.
   -------------------------------------------------------------------------- */
.en-sheet-scrim {
  /* fixed (was absolute) so the confirmation sheet tracks the viewport and can't be
     clipped/scrolled-away inside the tall en-screen on a phone; z-100 sits above the
     sticky appbar (z-70). */
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  padding: var(--s-6);
  background: rgba(22,19,18,0.55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.en-sheet-scrim.is-open { display: flex; animation: fade-in var(--brief) var(--ease-calm); }
.en-sheet {
  width: 100%; max-width: 520px; max-height: calc(100dvh - 2 * var(--s-6));
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-elevated);
  animation: callout-lift var(--beat) var(--ease-cinematic) both;
  overflow: hidden;
}
.en-sheet__head {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-6) var(--s-6) var(--s-4);
}
.en-sheet__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  line-height: 1.18; color: var(--ink); letter-spacing: 0.005em;
}
.en-sheet__body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--s-6) var(--s-5); }
.en-sheet__lede {
  font-size: 1rem; line-height: 1.55; color: var(--body-text); text-wrap: pretty;
}
.en-sheet__lede b { color: var(--ink); font-weight: 600; }
/* The plain facts — what it is, who signs, how long. Icon + line each. */
.en-sheet__facts { list-style: none; display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-5); }
.en-sheet__fact { display: flex; align-items: flex-start; gap: var(--s-3); }
.en-sheet__fact svg { flex: none; color: var(--orange); margin-top: 2px; }
.en-sheet__fact-text { font-size: 0.94rem; line-height: 1.5; color: var(--body-text); text-wrap: pretty; }
.en-sheet__fact-text b { color: var(--ink); font-weight: 600; }

/* Full legal name — the name printed on the endorsement. Serious, required. */
.en-sheet__field { margin-top: var(--s-5); }
.en-sheet__field-label {
  display: block; margin-bottom: var(--s-2);
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.en-sheet__input {
  width: 100%; min-height: 48px; padding: 0 var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--ink);
  transition: border-color var(--glance) var(--ease-calm), box-shadow var(--glance) var(--ease-calm);
}
.en-sheet__input:focus { outline: none; border-color: var(--orange); box-shadow: var(--focus-ring); }
.en-sheet__input::placeholder { color: var(--guess); }
.en-sheet__help {
  margin-top: var(--s-2);
  font-size: 0.84rem; line-height: 1.5; color: var(--muted); text-wrap: pretty;
}
.en-sheet__help b { color: var(--body-text); font-weight: 600; }

/* Attestation — a real legal confirm before the name flows onto the document. */
.en-sheet__attest {
  display: flex; align-items: flex-start; gap: var(--s-3);
  width: 100%; margin-top: var(--s-5); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  cursor: pointer; text-align: left;
  transition: border-color var(--glance) var(--ease-calm), background var(--glance) var(--ease-calm);
}
.en-sheet__attest:hover { border-color: var(--orange); }
.en-sheet__attest-box {
  flex: none; margin-top: 1px;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid var(--line); background: var(--surface);
  display: flex; align-items: center; justify-content: center; color: #fff;
  transition: background var(--glance) var(--ease-calm), border-color var(--glance) var(--ease-calm);
}
.en-sheet__attest[aria-pressed="true"] { border-color: rgba(244,115,33,0.4); background: var(--orange-soft); }
.en-sheet__attest[aria-pressed="true"] .en-sheet__attest-box { background: var(--orange); border-color: var(--orange); }
.en-sheet__attest[aria-pressed="false"] .en-sheet__attest-box svg { display: none; }
.en-sheet__attest-text { font-size: 0.9rem; line-height: 1.5; color: var(--body-text); text-wrap: pretty; }
/* The submit stays plainly disabled until name + attestation are present. */
.en-sheet__foot .btn-primary[disabled] {
  opacity: 1; background: var(--line); color: var(--muted); box-shadow: none; pointer-events: none;
}
.en-sheet__foot .btn-primary[disabled] svg { display: none; }
.en-sheet__foot {
  flex: none;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3);
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--line); background: var(--paper);
}
.en-sheet__cancel {
  min-height: 48px; padding: 0 var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--body-text); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.88rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: border-color var(--glance) var(--ease-calm), color var(--glance) var(--ease-calm);
}
.en-sheet__cancel:hover { border-color: var(--orange); color: var(--orange-text); } /* label is text → AA; border keeps brand */

/* ----------------------------------------------------------------------------
   4. STATUS TIMELINE — a calm vertical ordered list. Requested → In CFI review
   → Signed. The current step is marked (aria-current + a ring). The final step
   carries the endorsement reference. The "not yet" state is respectful.
   -------------------------------------------------------------------------- */
.en-status__intro {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: clamp(22px, 3vw, 30px);
}
.en-status__pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--font-display); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  white-space: nowrap;
}
.en-status__pill--review { color: var(--orange-text); border-color: rgba(244,115,33,0.35); background: var(--orange-soft); } /* text on tint → AA role */
.en-status__pill--signed { color: var(--success); border-color: rgba(44,122,75,0.32); background: var(--success-soft); }
.en-status__pill--notyet { color: var(--caution); border-color: rgba(196,123,31,0.32); background: var(--caution-soft); }
.en-status__pill svg { flex: none; }
.en-status__ref {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted);
  letter-spacing: 0.02em;
}

.en-timeline { list-style: none; position: relative; padding-left: 0; counter-reset: none; }
.en-tstep {
  position: relative;
  display: grid; grid-template-columns: 34px 1fr; gap: var(--s-5);
  padding-bottom: var(--s-8);
}
.en-tstep:last-child { padding-bottom: 0; }
/* The connecting rail runs BETWEEN dots — starts just below this dot and stops
   just above the next, so it never crosses or enters a marker. */
.en-tstep::before {
  content: ""; position: absolute; left: 16px; top: 40px; bottom: 4px; width: 2px;
  background: var(--line);
}
.en-tstep:last-child::before { display: none; }
.en-tstep--done::before { background: var(--success); }

/* The marker dot. */
.en-tdot {
  grid-column: 1; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line); background: var(--surface); color: var(--muted);
  z-index: 1;
}
.en-tstep--done .en-tdot { border-color: var(--success); background: var(--surface); color: var(--success); }
.en-tstep--current .en-tdot {
  border-color: var(--orange); background: var(--orange-soft); color: var(--orange);
  box-shadow: var(--focus-ring);
}
.en-tstep--notyet .en-tdot { border-color: var(--caution); background: var(--caution-soft); color: var(--caution); }
.en-tstep--pending .en-tdot { border-style: dashed; }

.en-tbody { grid-column: 2; min-width: 0; padding-top: 4px; }
.en-tstep__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.12rem;
  letter-spacing: 0.005em; color: var(--ink); line-height: 1.2;
}
.en-tstep--pending .en-tstep__title { color: var(--muted); }
.en-tstep__date {
  margin-top: 3px;
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted);
  letter-spacing: 0.02em;
}
.en-tstep__note {
  margin-top: var(--s-3);
  font-size: 0.96rem; line-height: 1.55; color: var(--body-text); text-wrap: pretty; max-width: 52ch;
}
.en-tstep__note b { color: var(--ink); font-weight: 600; }
.en-tstep__current-tag {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-2);
  font-family: var(--font-display); font-weight: 600; font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange-text); /* "current step" is text → AA role */
}

/* The dignified issuance reveal — a quiet card the signed step lifts in. */
.en-issued {
  margin-top: var(--s-4);
  border: 1px solid rgba(44,122,75,0.3); border-radius: var(--r-lg);
  background: var(--success-soft);
  padding: var(--s-5);
}
.en-issued__by {
  display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-4); padding-bottom: var(--s-4);
  border-bottom: 1px solid rgba(44,122,75,0.22);
}
.en-issued__avatar {
  flex: none; width: 42px; height: 42px; border-radius: var(--r-pill);
  overflow: hidden; background: var(--surface); border: 1px solid var(--line);
}
.en-issued__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.en-issued__who { min-width: 0; }
.en-issued__name { font-family: var(--font-display); font-weight: 600; font-size: 0.96rem; color: var(--ink); }
.en-issued__role { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.02em; }
.en-issued__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.en-issued .btn-primary { text-decoration: none; }
.en-doclink {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: none; border: none; padding: var(--s-2) 0; cursor: pointer; text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  transition: color var(--glance) var(--ease-calm);
}
.en-doclink:hover { color: var(--orange-text); } /* hover label is text → AA role */
.en-doclink svg { flex: none; }

/* "Not yet" — the respectful state. A CFI note + the areas to drill. Never
   "denied / failed". Framed as "not yet". */
.en-notyet {
  margin-top: var(--s-4);
  border: 1px solid var(--line); border-left: 4px solid var(--caution);
  border-radius: var(--r-lg); background: var(--surface);
  padding: var(--s-5);
}
.en-notyet__by { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.en-notyet__avatar {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-pill);
  overflow: hidden; background: var(--surface); border: 1px solid var(--line);
}
.en-notyet__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.en-notyet__name { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.en-notyet__role { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); letter-spacing: 0.02em; }
.en-notyet__quote {
  font-size: 0.98rem; line-height: 1.6; color: var(--body-text); text-wrap: pretty;
  font-style: italic;
}
.en-notyet__next { margin-top: var(--s-4); }
.en-notyet__next-label {
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--s-2);
}
.en-areachips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-4); }
.en-areachip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 30px; padding: 0 var(--s-3); border-radius: var(--r-pill);
  border: 1px solid rgba(196,123,31,0.32); background: var(--caution-soft);
  font-family: var(--font-body); font-weight: 500; font-size: 0.84rem; color: var(--caution);
}
.en-areachip__dot { flex: none; width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--caution); }
.en-notyet .btn-primary { text-decoration: none; }

/* ============================================================================
   PART 2 — CFI REVIEW QUEUE (instructor work surface). Desktop-first, but the
   queue rows stack and the evidence becomes a scrollable sheet on tablet/phone.
   Wider screen shell: a two-pane work tool.
   ========================================================================== */
.en-cfi.mr-screen .mr-screen__body { max-width: 1080px; }
.en-cfi .session-bar {
  padding-inline: clamp(20px, 4vw, 32px);
}
.en-cfi__head { margin-bottom: clamp(20px, 3vw, 28px); }
.en-cfi__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; color: var(--ink);
}
.en-cfi__sub {
  margin-top: var(--s-2);
  font-size: 0.98rem; line-height: 1.5; color: var(--muted); text-wrap: pretty;
}
.en-cfi__sub b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* The instructor's own identity pill (so it's clear WHO signs). */
.pill--cfi { color: var(--ink); border-color: var(--line); }

/* Tabs: Pending queue / Issued record (reuses .mode-segment / .mode-pill). */
.en-cfi__tabs { margin-bottom: clamp(18px, 3vw, 24px); }

/* The two-pane layout. */
.en-work { display: grid; grid-template-columns: 320px 1fr; gap: clamp(20px, 3vw, 28px); align-items: start; }

/* QUEUE — a list of pending requests. */
.en-queue__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);
}
.en-queue { display: flex; flex-direction: column; gap: var(--s-2); }
.en-qrow {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--brief) var(--ease-calm),
              background var(--brief) var(--ease-calm), box-shadow var(--brief) var(--ease-calm);
}
.en-qrow:hover { border-color: var(--orange); background: var(--orange-soft); }
.en-qrow.is-active {
  border-color: var(--orange); background: var(--orange-soft); box-shadow: var(--focus-ring);
}
.en-qrow__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.en-qrow__name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--ink); letter-spacing: 0.005em; }
.en-qrow__date { font-family: var(--font-mono); font-size: 0.68rem; color: var(--muted); white-space: nowrap; }
.en-qrow__meta { margin-top: 4px; font-size: 0.82rem; color: var(--muted); }
/* Confidence cue — a calm "ready" read, never a guarantee. */
.en-qrow__cue {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-3);
  font-family: var(--font-display); font-weight: 600; font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--success);
}
.en-qrow__cue svg { flex: none; }
.en-qrow__cue--review { color: var(--caution); }

/* DETAIL — the evidence panel. */
.en-detail {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: var(--shadow-card);
  overflow: hidden;
}
.en-detail__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-5);
  flex-wrap: wrap;
  padding: clamp(20px, 3vw, 28px); border-bottom: 1px solid var(--line);
}
.en-detail__who { min-width: 0; }
.en-detail__applicant {
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem;
  color: var(--ink); letter-spacing: 0.005em; line-height: 1.15;
}
.en-detail__sub {
  margin-top: var(--s-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); letter-spacing: 0.02em;
}
.en-detail__sub .sep { color: var(--line); }
.en-detail__cue {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; 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.68rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--success); white-space: nowrap;
}
.en-detail__cue svg { flex: none; }

.en-detail__body { padding: clamp(20px, 3vw, 28px); }
.en-ev { margin-bottom: clamp(22px, 3vw, 30px); }
.en-ev:last-child { margin-bottom: 0; }
.en-ev__label {
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--orange-text); /* evidence label is text → AA role */
  margin-bottom: var(--s-3);
}

/* Mock-exam evidence rows. */
.en-mocks { display: flex; flex-direction: column; gap: var(--s-2); }
.en-mock {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.en-mock__chk { flex: none; color: var(--success); display: flex; }
.en-mock__main { min-width: 0; }
.en-mock__title { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.en-mock__date { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.02em; margin-top: 2px; }
.en-mock__score {
  font-family: var(--font-mono); font-weight: 500; font-size: 1.05rem; color: var(--success);
  font-variant-numeric: tabular-nums;
}

/* A plain fact row (ground school, day-one ready). */
.en-fact-row {
  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);
}
.en-fact-row + .en-fact-row { margin-top: var(--s-2); }
.en-fact-row__chk { flex: none; color: var(--success); display: flex; }
.en-fact-row__text { flex: 1; min-width: 0; font-size: 0.92rem; color: var(--ink); }
.en-fact-row__text b { font-weight: 600; }
.en-fact-row__meta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); white-space: nowrap; }

/* Mastery Map snapshot — the green-depth strip, at a glance. Color never alone:
   the readiness % sits beside it and a labeled per-area list reads below. */
.en-mm { }
.en-mm__top {
  display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-3);
}
.en-mm__pct {
  font-family: var(--font-mono); font-weight: 500; font-size: 1.6rem; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.en-mm__pct-label { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.en-mm__strip { display: flex; gap: 3px; height: 30px; }
.en-mm__band {
  flex: 1; border-radius: 3px; background: var(--bg, var(--g5));
}
.en-mm__band--light { box-shadow: inset 0 0 0 1px rgba(44,122,75,0.2); }
.en-mm__band:first-child { border-top-left-radius: var(--r-sm); border-bottom-left-radius: var(--r-sm); }
.en-mm__band:last-child { border-top-right-radius: var(--r-sm); border-bottom-right-radius: var(--r-sm); }
.en-mm__legend {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-5); margin-top: var(--s-4);
}
.en-mm__area {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 0.86rem; color: var(--body-text);
}
.en-mm__area-dot { flex: none; width: 14px; height: 14px; border-radius: var(--r-pill); background: var(--bg, var(--g5)); }
.en-mm__area-dot--light { box-shadow: inset 0 0 0 1px rgba(44,122,75,0.25); }
.en-mm__area-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.en-mm__area-pct { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ACTIONS — Approve & sign (primary) + Ask for more practice (reversible). */
.en-actions {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: clamp(18px, 3vw, 24px) clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line); background: var(--paper);
}
.en-actions .btn-primary { white-space: nowrap; }
.en-actions__sign svg { flex: none; }
.en-btn-secondary {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--body-text); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.88rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: border-color var(--glance) var(--ease-calm), color var(--glance) var(--ease-calm),
              background var(--glance) var(--ease-calm);
}
.en-btn-secondary:hover { border-color: var(--caution); color: var(--caution); background: var(--caution-soft); }
.en-btn-secondary svg { flex: none; }
.en-actions__note {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.02em;
}

/* ASK-FOR-MORE-PRACTICE — the note prompt. Reversible, clearly labeled. */
.en-ask {
  padding: clamp(18px, 3vw, 24px) clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line); background: var(--caution-soft);
}
.en-ask__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink);
  letter-spacing: 0.005em; margin-bottom: var(--s-2);
}
.en-ask__hint { font-size: 0.9rem; line-height: 1.5; color: var(--body-text); margin-bottom: var(--s-4); text-wrap: pretty; }
.en-ask__field-label, .en-ask__flag-label {
  font-family: var(--font-mono); font-size: 0.66rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--s-2);
}
.en-ask__textarea {
  width: 100%; min-height: 96px; resize: vertical;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  font-family: var(--font-body); font-size: 0.96rem; line-height: 1.55; color: var(--ink);
  transition: border-color var(--glance) var(--ease-calm), box-shadow var(--glance) var(--ease-calm);
}
.en-ask__textarea:focus { outline: none; border-color: var(--orange); box-shadow: var(--focus-ring); }
.en-ask__textarea::placeholder { color: var(--guess); }
.en-ask__flags { margin-top: var(--s-4); }
.en-ask__flagrow { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.en-flag-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 36px; padding: 0 var(--s-3); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: 0.84rem; color: var(--body-text);
  transition: border-color var(--glance) var(--ease-calm), background var(--glance) var(--ease-calm),
              color var(--glance) var(--ease-calm);
}
.en-flag-toggle__box {
  flex: none; width: 15px; height: 15px; border-radius: 4px;
  border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.en-flag-toggle[aria-pressed="true"] {
  border-color: var(--caution); background: var(--caution-soft); color: var(--caution);
}
.en-flag-toggle[aria-pressed="true"] .en-flag-toggle__box { background: var(--caution); border-color: var(--caution); }
.en-flag-toggle[aria-pressed="false"] .en-flag-toggle__box svg { display: none; }
.en-ask__foot { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-5); }
.en-ask__send {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border: none; border-radius: var(--r-md); background: var(--caution); color: #fff; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.88rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: opacity var(--glance) var(--ease-calm);
}
.en-ask__send:hover { opacity: 0.92; }
.en-ask__send[disabled] { opacity: 0.5; cursor: not-allowed; }
.en-ask__cancel {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  transition: color var(--glance) var(--ease-calm);
}
.en-ask__cancel:hover { color: var(--ink); }

/* APPROVE CONFIRM — a small inline confirm before signing (a real confirm). */
.en-confirm {
  padding: clamp(18px, 3vw, 24px) clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--line); background: var(--paper);
}
.en-confirm__title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin-bottom: var(--s-2); }
.en-confirm__text { font-size: 0.92rem; line-height: 1.55; color: var(--body-text); margin-bottom: var(--s-4); text-wrap: pretty; }
.en-confirm__text b { color: var(--ink); font-weight: 600; }
.en-confirm__foot { display: flex; align-items: center; gap: var(--s-3); }
.en-confirm .btn-primary { white-space: nowrap; }

/* SIGNED CONFIRMATION — after the CFI signs, a calm, dignified result. */
.en-signed-result {
  padding: clamp(24px, 4vw, 36px) clamp(20px, 3vw, 28px);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4);
  animation: callout-lift var(--beat) var(--ease-cinematic) both;
}
.en-signed-result__mark {
  width: 48px; height: 48px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--success); background: var(--success-soft); border: 1.5px solid rgba(44,122,75,0.32);
}
.en-signed-result__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--ink); letter-spacing: 0.005em; }
.en-signed-result__text { font-size: 0.98rem; line-height: 1.55; color: var(--body-text); text-wrap: pretty; max-width: 48ch; }
.en-signed-result__text b { color: var(--ink); font-weight: 600; }
.en-signed-result__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-1); }
.en-signed-result .btn-primary { text-decoration: none; }

/* ISSUED RECORD — a searchable record of signed endorsements (CFI's files). */
.en-issued-rec { }
.en-search {
  display: flex; align-items: center; gap: var(--s-3);
  height: 46px; padding: 0 var(--s-4); margin-bottom: var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.en-search svg { flex: none; color: var(--muted); }
.en-search input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: var(--font-body); font-size: 0.96rem; color: var(--ink);
}
.en-search input::placeholder { color: var(--guess); }
.en-rec-table { width: 100%; border-collapse: collapse; }
.en-rec-table thead th {
  text-align: left; padding: 0 var(--s-4) var(--s-3); border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-weight: 500; font-size: 0.64rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
}
.en-rec-table tbody td {
  padding: var(--s-4); border-bottom: 1px solid var(--line); vertical-align: middle;
}
.en-rec__name { font-family: var(--font-display); font-weight: 600; font-size: 0.96rem; color: var(--ink); }
.en-rec__cert { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); }
.en-rec__date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--body-text); font-variant-numeric: tabular-nums; }
.en-rec__col-action { text-align: right; }
.en-rec__view {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: none; border: none; padding: var(--s-2) 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); /* link label is text → AA role */
  transition: color var(--glance) var(--ease-calm);
}
.en-rec__view:hover { color: var(--ink); } /* orange-text links DEEPEN on hover (AA in every state) */
.en-rec__view svg { flex: none; }

/* ============================================================================
   (PART 3 — the endorsement-document PDF preview and its download chrome —
   was DELETED in the W3 cleanup, 2026-06-10. The doc() preview was removed
   from screens/endorsement.js in W1: no surface renders .en-doc / .en-docwrap
   anymore, and the product makes no promise of a downloadable signed PDF —
   the CFI's recorded signature + endorsement reference is the artifact.)
   ========================================================================== */

/* ----------------------------------------------------------------------------
   MOTION — inherited & restrained. Steps + criteria reveal once (callout.lift /
   stagger), then settle. The issuance reveal is calm. prefers-reduced-motion
   collapses all (token layer + JS guard).
   -------------------------------------------------------------------------- */
.en-reveal { opacity: 0; transform: translateY(12px); }
.en-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--beat) var(--ease-cinematic), transform var(--beat) var(--ease-cinematic);
}

.en-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 — reuses the Marked Review copy-deck composition (.mr-copy).
   -------------------------------------------------------------------------- */
.en-copy { padding: clamp(28px, 4vw, 40px); }

/* ============================================================================
   MOBILE (~390px) — co-primary for the student view; usable for the CFI tool.
   Driven by an explicit .en--mobile class so it renders inside a fixed-width
   artboard (container, not media query).
   ========================================================================== */
.en--mobile.mr-screen { height: 100%; display: flex; flex-direction: column; }
.en--mobile .mr-screen__body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 0; max-width: none; overflow: hidden;
}
.en--mobile .session-bar { padding-inline: var(--s-5); }
.en--mobile .en-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--s-5) var(--s-5) var(--s-6);
}
.en--mobile .en-head { margin-bottom: var(--s-5); }
.en--mobile .en-title { font-size: 1.6rem; }
.en--mobile .en-crit__item { padding: var(--s-4); }
.en--mobile .en-request { align-items: stretch; }
.en--mobile .en-request__cta { width: 100%; justify-content: center; }
.en--mobile .en-sheet { max-width: none; }

/* CFI on phone/tablet: queue stacks above the evidence; actions reachable. */
.en--mobile .en-work { grid-template-columns: 1fr; gap: var(--s-5); }
.en--mobile .en-mm__legend { grid-template-columns: 1fr; }

/* (The mobile doc-preview, pinch/zoom stage, zoom chrome and the Download
   button were deleted with PART 3 — see the W3 cleanup note above.) */

/* ----------------------------------------------------------------------------
   RESPONSIVE — guards the focus/preview view (artboards are fixed frames).
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .en-work { grid-template-columns: 1fr; }
  .en-mm__legend { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .en-actions { flex-direction: column; align-items: stretch; }
  .en-actions__note { margin-left: 0; }
}
/* The `.en--mobile` rules above are dead — endorsement.js never adds that class. Apply
   the layout-safe ones through a real media query (NOT the shell height/overflow rules,
   which would break scroll inside the Kajabi iframe). */
@media (max-width: 640px) {
  .en-request { align-items: stretch; }
  .en-request__cta { width: 100%; justify-content: center; }
}

/* ---- W1 honest-failure hold (2026-06-10) — eligibility fetch failed for a
   real student: calm card, no fabricated met-gate. ---- */
.en-hold { max-width: 430px; margin: 48px auto; padding: 28px 24px; background: #fff;
  border: 1px solid var(--line, #e8e2d8); border-radius: 12px; text-align: center; }
.en-hold__h { margin: 0 0 8px; font-size: 1.15rem; }
.en-hold__p { margin: 0 0 18px; color: var(--ink-soft, #5c564e); line-height: 1.5; }