/* ============================================================================
   SCREEN: leaderboard — the Airmanship Index board. Screen-level composition
   ONLY. Every color, font, radius, shadow and motion value is inherited from
   test-center-system.css; the TABLE + the viewer's own-row treatment + the
   mobile stacked rows / bottom bar are REUSED from milestones.css (.ms-table /
   .ms-trow / .ms-trow--you / .ms-lrow / .ms-youbar); the locked tease reuses
   freemium-lock.css (.fz-*). This sheet adds only the leaderboard-specific
   pieces: the header, the segmented WINDOW toggle, the "why this rank"
   breakdown mini-bars, and the quiet opt-out foot.

   Discipline carried over: orange is a SCALPEL — the single accent is the
   viewer's own row (inherited from .ms-trow--you). Orange as TEXT always uses
   --orange-text (#b8500a, AA), NEVER --orange (#f47321, fails AA on white).
   Numbers are JetBrains Mono with tabular-nums; labels are Oswald. Motion is
   named (--beat / --breath) and collapses under reduced-motion. NO new colors.
   ========================================================================== */

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

/* White surface, never cream — mirrors the milestones guard. */
.lb-screen,
.lb-screen .mr-screen__body { background: var(--surface); }

/* ----------------------------------------------------------------------------
   HEADER — eyebrow → heading → mentor subhead.
   -------------------------------------------------------------------------- */
.lb-head { margin-bottom: clamp(18px, 3vw, 26px); }
.lb-eyebrow { margin-bottom: var(--s-3); }
.lb-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);
}
.lb-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: 60ch;
}
.lb-subhead b { color: var(--ink); font-weight: 500; }

/* ----------------------------------------------------------------------------
   TOOLBAR — the WINDOW segmented control + a quiet "how this is measured" note.
   The segment leans on the same restraint as .mode-segment: a hairline pill
   track, the active pill carries the surface + a soft shadow (NOT orange — the
   orange scalpel is reserved for the viewer's own row).
   -------------------------------------------------------------------------- */
.lb-toolbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  margin-bottom: clamp(20px, 3vw, 28px);
}
.lb-segment {
  display: inline-flex; gap: 2px;
  padding: 3px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--paper);
}
.lb-seg {
  appearance: none; border: none; cursor: pointer;
  padding: var(--s-2) var(--s-5);
  border-radius: var(--r-pill); background: transparent;
  font-family: var(--font-display); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.04em; color: var(--muted);
  transition: color var(--glance) var(--ease-calm),
              background var(--glance) var(--ease-calm),
              box-shadow var(--glance) var(--ease-calm);
}
.lb-seg:hover { color: var(--ink); }
.lb-seg.is-on {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-card);
}
.lb-seg:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.lb-help {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: none; border: none; cursor: pointer; padding: var(--s-2) 0;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em;
  color: var(--muted);
  transition: color var(--glance) var(--ease-calm);
}
.lb-help:hover { color: var(--orange-text); }   /* hover label is text → AA role */
.lb-help svg { flex: none; }
.lb-help:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: var(--r-sm); }
.lb-help-note {
  flex-basis: 100%;
  font-size: 0.86rem; line-height: 1.55; color: var(--muted);
  text-wrap: pretty; max-width: 64ch;
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--line); background: var(--paper);
  border-radius: var(--r-md);
}
.lb-help-note b { color: var(--ink); font-weight: 600; }

/* ----------------------------------------------------------------------------
   BOARD HEAD — title + the viewer's own one-line summary (mirrors
   .ms-board__head, but leaderboard-namespaced so it can't drift).
   -------------------------------------------------------------------------- */
.lb-board__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5);
}
.lb-board__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem;
  color: var(--ink); letter-spacing: 0.005em;
}
.lb-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;
}
.lb-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;
}
.lb-board__you-sum b { color: var(--orange-text); font-weight: 600; }  /* number is text → AA role */

/* The Index column reads as a clean mono number (tabular). The .ms-metric base
   already does this; this just drops the trailing "%" affordance some other
   boards use — the Index is a 0–100 score, not a percent, so no unit glyph. */
.lb-board .ms-metric { letter-spacing: 0.01em; }

/* ----------------------------------------------------------------------------
   "WHY THIS RANK" — the expandable breakdown. A quiet text trigger; four
   labeled mini-bars (mastery / mock / accuracy / effort). Transparency, not a
   black box. The bars fill calmly once (--breath) and never loop.
   -------------------------------------------------------------------------- */
.lb-whybtn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-2);
  background: none; border: none; padding: var(--s-1) 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted);
  transition: color var(--glance) var(--ease-calm);
}
.lb-whybtn:hover { color: var(--orange-text); }   /* text role → AA */
.lb-whybtn svg { flex: none; }
.lb-whybtn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: var(--r-sm); }
.lb-whybtn--full { width: 100%; justify-content: center; padding: var(--s-3); }

/* The breakdown drawer sits in a full-width row under the own row (desktop) or
   inline (mobile). Reset the table cell padding so the drawer can breathe. */
.lb-whyrow td { padding: 0 !important; border: none !important; background: var(--orange-soft); }
.lb-why {
  padding: var(--s-5) var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--line);
}
.lb-why-mobile { margin-top: var(--s-3); }
.lb-why-mobile .lb-why {
  border: 1px solid rgba(244,115,33,0.28); border-radius: var(--r-lg);
  background: var(--orange-soft); margin-top: var(--s-2);
}
.lb-why__lede {
  margin: 0 0 var(--s-4);
  font-size: 0.92rem; line-height: 1.55; color: var(--body-text);
  text-wrap: pretty; max-width: 60ch;
}
.lb-why__lede b { color: var(--orange-text); font-weight: 700; font-variant-numeric: tabular-nums; }  /* the Index number → AA text role */
.lb-why__bars {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-6);
}

.lb-bar { min-width: 0; }
.lb-bar__top {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.lb-bar__label {
  font-family: var(--font-display); font-weight: 600; font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink);
}
.lb-bar__weight {
  font-family: var(--font-mono); font-size: 0.64rem; color: var(--muted);
  letter-spacing: 0.02em; white-space: nowrap;
}
.lb-bar__val {
  margin-left: auto;
  font-family: var(--font-mono); font-weight: 600; font-size: 0.92rem;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.lb-bar__track {
  position: relative; height: 7px; border-radius: var(--r-pill);
  background: var(--line); overflow: hidden;
}
.lb-bar__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: calc(var(--lb-fill, 0) * 100%);
  /* the calm success green (the system's "ready" tone) — a fill is decorative,
     never text, so the brand fill color is fine here. */
  background: var(--success);
  border-radius: var(--r-pill);
  transform-origin: left center;
  animation: lbBarFill var(--breath, 720ms) var(--ease-cinematic) both;
}
@keyframes lbBarFill {
  from { width: 0; }
  to   { width: calc(var(--lb-fill, 0) * 100%); }
}
.lb-bar__hint {
  margin-top: var(--s-2);
  font-size: 0.78rem; line-height: 1.45; color: var(--muted); text-wrap: pretty;
}

/* ----------------------------------------------------------------------------
   FOOT — the quiet opt-out / opt-in line. A text link, mentor-toned, no guilt.
   -------------------------------------------------------------------------- */
.lb-foot {
  display: flex; align-items: center; gap: var(--s-3) var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
}
.lb-foot__note { font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted); letter-spacing: 0.01em; }
.lb-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);
}
.lb-linkbtn:hover { color: var(--orange-text); }   /* text role → AA */
.lb-linkbtn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: var(--r-sm); }
.lb-linkbtn:disabled { opacity: 0.5; cursor: default; }

/* ----------------------------------------------------------------------------
   EMPTY / RETRY — calm, mentor voice (reuses .ms-empty composition).
   -------------------------------------------------------------------------- */
.lb-empty__mark {
  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);
}
.lb-retry {
  max-width: 460px; margin: clamp(28px, 6vw, 56px) auto;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-4);
  text-align: center;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--line); border-left: 3px solid var(--caution);
  border-radius: var(--r-xl); background: var(--surface);
  box-shadow: var(--shadow-card);
}
.lb-retry p { font-size: 0.98rem; line-height: 1.5; color: var(--body-text); margin: 0; }
.lb-retry .btn-primary { text-decoration: none; }

/* The locked tease just hosts the inherited .fz-lock card; give it room. */
.lb-locked { margin-top: var(--s-4); }

/* ----------------------------------------------------------------------------
   MOTION — rows + bars reveal once, then settle (same .ms-reveal contract as
   milestones). prefers-reduced-motion collapses all of it.
   -------------------------------------------------------------------------- */
.lb-screen .ms-reveal { opacity: 0; transform: translateY(12px); }
.lb-screen .ms-reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--beat) var(--ease-cinematic),
              transform var(--beat) var(--ease-cinematic);
}
@media (prefers-reduced-motion: reduce) {
  .lb-bar__fill { animation: none; }
}

/* ============================================================================
   MOBILE (≤640px) — co-primary. Header + window toggle pinned to the top
   (.lb-stickytop); the board scrolls beneath; the viewer's rank pins to the
   bottom bar (.ms-youbar, inherited from milestones.css). Mirrors the
   .ms--mobile scaffolding so the two screens feel identical on a phone.
   ========================================================================== */
.lb--mobile.mr-screen { height: 100%; display: flex; flex-direction: column; }
.lb--mobile .mr-screen__body {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  padding: 0; max-width: none; overflow: hidden;
}
.lb--mobile .lb-stickytop {
  flex: none;
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.lb--mobile .lb-head { margin-bottom: var(--s-4); }
.lb--mobile .lb-title { font-size: 1.5rem; }
.lb--mobile .lb-subhead { font-size: 0.95rem; }
.lb--mobile .lb-toolbar { margin-bottom: 0; gap: var(--s-3); }
.lb--mobile .lb-segment { flex: 1; }
.lb--mobile .lb-seg { flex: 1; text-align: center; padding: var(--s-2) var(--s-3); }

.lb--mobile .lb-mobilebody {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.lb--mobile .ms-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--s-5);
}
.lb--mobile .ms-empty,
.lb--mobile .lb-retry { padding: var(--s-6) var(--s-5); }
.lb--mobile .lb-locked { padding: var(--s-5); }

/* A quieter own-bar when the viewer has opted out (no rank to show). */
.ms-youbar--quiet { background: var(--ink); }
.lb-linkbtn--bar {
  color: var(--orange-hover);   /* on the dark bar, the lighter orange reads (AA on ink) */
}
.lb-linkbtn--bar:hover { color: #fff; }

/* On a narrow phone the two breakdown columns fold to one. */
@media (max-width: 640px) {
  .lb-why__bars { grid-template-columns: 1fr; gap: var(--s-4); }
  .lb-board__head { gap: var(--s-2); }
}