/* ══════════════════════════════════════════════════════════════════════════════════════════
   MASTHEAD + LEADERSHIP BOARD — CEO feedback #19, 13 Sep 2026 (light theme, desktop, verbatim):
   "Sloppy design — League and P position should be one 'Leadership Board' button with a trophy
   icon attached. Other illegible design aspects." Four crops, four fixes:

   1. The ☰ burger: a pale rounded square on the cream masthead, no fill at all (0 L* separation
      from the bar, measured) — "barely a control".
   2. The P10 rank chip and the League pill: two separate pills, each only ~6.3 L* apart from the
      cream `.appbar` fill (measured against the rendered pixels, not the token) — below the
      "reads as a control" bar. THE MERGE ITSELF (one #pnfcRankChip button, trophy + rank) is
      built in pn-floor-chrome.js; pn-league.js's own pill is retired. This sheet gives the
      merged control (and every other masthead pill) real separation.
   3. The pitch window titlebar ("FATHOM BREWING · PITCH"): style-01.css's `.mac-tb-title{color:
      rgba(234,241,251,.62)!important}` is the DARK-theme ink, correct on a dark titlebar — but
      `.pn-fwin`'s own titlebar goes CREAM in light theme (pn-final-20260820.css's alternation
      block) while nothing scopes `.mac-tb-title`'s ink to that swap, because the existing light
      override is keyed to `.pn-window--light` (a different, class-gated window family the pitch
      window never carries). Measured: 1.1:1 in light before this fix.
   4. The identity chip (crest · "clicktag" · "JON · RAINMAKER"): pixel-sampled AA-clean already
      (7.0–14.5:1, see design/masthead-board-2026-09-13/report.json) — the "washed" read was the
      controls around it having no fill, not this chip's own ink. Given one small bespoke touch
      (a tinted crest disc) so it reads as a unit rather than bare text next to now-solid pills.

   Proof: design/masthead-board-2026-09-13/ (render.mjs, contrast.mjs, report.json, contrast.json).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 0 · control-fill tokens, one per theme, sized to clear an 8 L* gap from `.appbar`'s own
   `--grouped` fill (measured: --card alone is only ~6.3 L* from --grouped in light, ~6.8 in dark —
   too close to read as a separate surface). Dark uses the existing --card-2 token (13 L* clear).
   Light needed a value between --sep and a plain darken of --card; #D2CAB0 measures 10.4 L* clear
   of --grouped (#EBE7DD) while keeping --label/--label2 ink at 10.9:1 / 5.28:1 on it — both AA. ── */
:root{ --tb-pill-fill: var(--card-2); --tb-pill-border: color-mix(in srgb, var(--label) 22%, transparent); }
:root[data-theme="light"]{ --tb-pill-fill: #D2CAB0; --tb-pill-border: color-mix(in srgb, var(--label) 20%, transparent); }

/* ── 1 · EVERY masthead pill/circle takes the same real fill — burger, the Leadership Board
   control, Desk, mail. (.store already carries its own accent-tint fill, already ≥8 L* from the
   bar by design — untouched.) ── */
/* #pnBurger (an ID) rather than `.appbar .burger`: `body[data-view="office"] button:not(.primary)
   :not(...30 more classes)...{background:var(--rust-card)!important}` (style-01.css ~7238) is a
   generic office-view button reset that matches the burger too (it excludes classes, not this
   one) — same !important, and its ~30-deep :not() chain still specificity-loses to nothing but an
   ID, which no class/attribute/pseudo-class combination can ever outrank. Measured: without the
   ID, the burger's fill computed as transparent (rgba(0,0,0,0)) — that generic rule was winning,
   which is the ROOT CAUSE of CEO crop #1 ("barely a control"), not a missing rule of my own. */
html body #pnBurger,
html body .appbar .mailbtn,
html body .appbar .guide,
html body #pnfcRankChip.pnfc-board-btn,
html body #pnfcDeskBtn.pnfc-act{
  background: var(--tb-pill-fill) !important;
  border-color: var(--tb-pill-border) !important;
}
html body #pnBurger:hover,
html body .appbar .mailbtn:hover,
html body .appbar .guide:hover,
html body #pnfcRankChip.pnfc-board-btn:hover,
html body #pnfcDeskBtn.pnfc-act:hover{
  border-color: var(--acc, #F97316) !important;
}
/* burger/mail are icon-only circles — the icon stroke/fill needs to be the theme's own strong
   ink, not whatever it inherited from a transparent-background rule tuned for no fill at all. */
html body #pnBurger svg,
html body .appbar .mailbtn svg{ color: var(--label) !important; }
html body #pnBurger svg *,
html body .appbar .mailbtn svg *{ stroke: currentColor; }

/* ── 2 · THE LEADERSHIP BOARD CONTROL — trophy + label + rank + movement, one pill, replacing
   the rank chip + League pill pair. Built by pn-floor-chrome.js's rankChipHTML(); this is its
   shape. Trophy is inline SVG (house orange) rather than the webp — at 18px inside a 40px pill
   the webp's drop-shadow/bevel muddied into a grey blob on the porcelain pill fill (rendered and
   compared side-by-side, design/masthead-board-2026-09-13/trophy_compare.png); the flat two-tone
   SVG reads crisp at this size and takes the accent ink like every other in-bar glyph. ── */
html body #pnfcRankChip.pnfc-board-btn{
  display:inline-flex; align-items:center; gap:7px;
  font-family: var(--pn-type-mono, var(--mono)); font-weight:800; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
  font-feature-settings:'tnum' 1;
  color: var(--label);
}
html body #pnfcRankChip .pnfc-board-trophy{ color: var(--acc, #F97316); flex:none; }
html body #pnfcRankChip .pnfc-board-lbl{ color: var(--label); }
html body #pnfcRankChip .pnfc-board-lbl--short{ display:none; }
/* the rank figure takes --label, not raw --acc: SST/pn-type-numerals-20260913.css's own standing
   rule — "the brand orange is 2.9:1 on the porcelain panel, type NEVER uses raw --accent" —
   measured here too (pixel-sampled 3.6:1 on this pill's own fill, below AA; --label measures
   clear, same token every other masthead figure already uses). */
html body #pnfcRankChip .pnfc-pos{
  font-weight:900; font-size:12.5px; color: var(--label);
  border-left: 1px solid var(--tb-pill-border); padding-left:7px; margin-left:1px;
}
html body #pnfcRankChip .pnfc-mv{ display:inline-flex; align-items:center; gap:1px; font-weight:800; }
html body #pnfcRankChip .pnfc-mv.up{ color:#1a8f5f; }
html body[data-theme="light"] #pnfcRankChip .pnfc-mv.up{ color:#146b3f; }
html body #pnfcRankChip .pnfc-mv.down{ color:#e0473a; }
html body[data-theme="light"] #pnfcRankChip .pnfc-mv.down{ color:#a6231f; }
html body #pnfcRankChip .pnfc-mv.flat{ opacity:.55; }

/* phone width — short label ("BOARD · P10"), never a bare icon and never a second control */
@media (max-width:480px){
  html body #pnfcRankChip .pnfc-board-lbl--full{ display:none; }
  html body #pnfcRankChip .pnfc-board-lbl--short{ display:inline; }
  html body #pnfcRankChip.pnfc-board-btn{ padding:0 9px; gap:5px; font-size:10px; }
  html body #pnfcRankChip .pnfc-pos{ padding-left:5px; }
}
/* ── real 390 budget check (design/masthead-board-2026-09-13/report.json): at ≤480px the
   `.appbar`'s fixed members (crest·ring·BANK·Store·Board·≡) plus the 14px inter-group gap add up
   to MORE than a 390 device frame with "BOARD" still spelled out — measured 423px content in a
   390 box, pushing the burger off-frame (unreachable, not just visually tight). One more step
   below 400px: keep the trophy + rank + movement (the control's whole job — identify it, tap it),
   drop the word "BOARD" itself. Still ONE control, still never a bare icon — P10 stays printed. */
@media (max-width:400px){
  html body #pnfcRankChip .pnfc-board-lbl--short{ display:none; }
  html body #pnfcRankChip.pnfc-board-btn{ padding:0 8px; gap:4px; }
}

/* ── 3 · THE IDENTITY CHIP — one bespoke touch: the crest sits on its own tinted disc so it
   reads as a unit next to the now-solid pills, instead of a bare stroke icon floating on the
   bar. Text ink (`.who b`/`.who i`) is untouched — already AA-clean, pixel-sampled (see header). */
html body .appbar .agency .crest{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background: var(--tb-pill-fill);
  border: 1px solid var(--tb-pill-border);
}

/* ── 4 · THE WINDOW TITLEBAR — CEO crop #3. `.mac-tb-title`'s base ink (style-01.css, pale
   blue-white) is correct for a DARK titlebar; `.pn-fwin` goes cream in light theme but nothing
   scoped the title's ink to that swap. Reuses `--rsp-ink`, the ink `.pn-fwin` already defines for
   itself in light theme (pn-final-20260820.css) — the same token the response rail's own text
   already uses, so the titlebar and the window it belongs to always agree. Scoped to `.pn-fwin`
   only: `.pn-window--light`'s own light variant (a class-gated skin, not a body-theme swap) is
   untouched, and the dark theme's pale ink on `.pn-fwin` is untouched. ── */
html body.mvc-light .pn-fwin .mac-tb-title{ color: var(--rsp-ink, #1c1611) !important; }

/* ── 3 · CEO #20 (13 Sep, after the first pass): "burger menu still not centred and this pill
   looks too weak graphically." The burger's glyph was an inline SVG riding the button's line box
   (baseline gap under it) — centred by flex with a zero line box. The Board control stops being
   a pale mono pill and becomes the one SLAB in the bar: the theme's ink as fill, the label in the
   cabinet face, the trophy in gold at 20px, the rank as an accent badge with its own AA ink. ── */
html body #pnBurger{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important; line-height:0 !important; width:40px; height:40px;
}
html body #pnBurger svg{ display:block; margin:0; }

html body #pnfcRankChip.pnfc-board-btn.pnfc-board-btn{
  gap:9px; padding:0 14px 0 10px; min-height:40px; border-radius:10px;
  font-family: var(--pn-type-face) !important;
  font-weight:800 !important; font-size:12.5px !important; letter-spacing:.06em !important;
  background:#161513 !important; border:1px solid #161513 !important; color:#F4EFE6 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 2px 10px -6px rgba(0,0,0,.6);
}
html:not([data-theme="light"]) body #pnfcRankChip.pnfc-board-btn.pnfc-board-btn{
  background:#EEF2F7 !important; border-color:#EEF2F7 !important; color:#0B0D12 !important;
}
html body #pnfcRankChip.pnfc-board-btn:hover{ filter:brightness(1.12); border-color:inherit !important; }
html body #pnfcRankChip .pnfc-board-lbl{ color:inherit !important; }
html body #pnfcRankChip .pnfc-board-trophy{ color:#D9A441 !important; width:20px; height:20px; }
html body #pnfcRankChip .pnfc-pos{
  border-left:0 !important; margin-left:2px; padding:3px 8px !important; border-radius:6px;
  background:#B4380D; color:#FFFFFF !important; font-size:12px !important; letter-spacing:.04em;
}
html:not([data-theme="light"]) body #pnfcRankChip .pnfc-pos{ background:#F97316; color:#07080C !important; }
html body #pnfcRankChip .pnfc-mv{ margin-left:2px; }
html body #pnfcRankChip .pnfc-mv.flat{ opacity:.7; }
html body[data-theme="light"] #pnfcRankChip .pnfc-mv.up{ color:#7BE0A8; }
html body[data-theme="light"] #pnfcRankChip .pnfc-mv.down{ color:#FF8A7A; }