/* pn-pitch-beats-20260914.css — BEAT 3 (SQUAD & REHEARSAL) READS IN BOTH THEMES; THE DOCKET
   RAIL RECOMPOSED.
   =============================================================================================
   CEO, 14 Sep 2026, three crops:
     · pitch window, beat 3 of 5 (light): "What is this page/design? Bad design, illegible content"
       — measured on a booted window: selected squad rows printed the name in rgb(255,255,255) on
       the cream row; the rehearsal choices were glass buttons taking dark-theme ink (#edf1fa) on
       the light window; nothing on the beat said what you were doing.
     · the docket rail: "poor design" — a "0 TIME" pill floating inside the CTA, the BUILD DETAIL
       summary ellipsised, the head clipped under the sticky titlebar.

   1 · BEAT 3. One intro line per section (markup, pn-pitch2 beatSquadReh). Squad rows own their
       ink in both themes; the selected state is an accent spine + tint, the name never re-inks.
       The rehearsal choices are OPTION CARDS (`.pnp2-opt`): own ink, the modifier as a chip.
       The Back control takes the window's own secondary ink in light.
   2 · THE DOCKET. The cost leaves the button and leads the line under it. The build-detail
       summary wraps under its label instead of truncating. Terms wrap at narrow widths. The rail
       sticks below the titlebar with real clearance.
   Loads LAST. pn-pitch2 injects its rules inline (a <style> at the head, low specificity) and
   pn-final uses `html body …{!important}`; rules here are `html body .pnp2-win …` and
   `html body .pn-fwin …` with !important where a fight was measured.
   ============================================================================================= */

/* ── 1 · BEAT 3 ────────────────────────────────────────────────────────────────────────────── */
html body .pnp2-win{
  --p2-ink:#EEF3FB; --p2-ink-dim:#AEB8C7; --p2-card:rgba(255,255,255,.05); --p2-card-2:rgba(255,255,255,.09);
  --p2-line:rgba(255,255,255,.14); --p2-acc:#F97316; --p2-acc-ink:#07080C; --p2-tint:rgba(249,115,22,.14);
}
html body .pnp2-win.lg-light{
  --p2-ink:#1B1A17; --p2-ink-dim:#5E574C; --p2-card:#FFFFFF; --p2-card-2:#F7F3EC;
  --p2-line:rgba(27,26,23,.14); --p2-acc:#B4380D; --p2-acc-ink:#FFFFFF; --p2-tint:rgba(180,56,13,.09);
}
html body .pnp2-win .pnp2-copy--intro{
  margin:2px 0 12px !important; padding-left:0 !important; border-left:0 !important;
  font:400 14.5px/1.5 IS,ui-sans-serif,system-ui,sans-serif !important; color:var(--p2-ink) !important; opacity:.86; max-width:60ch;
}
/* the squad rows: their own ink, both themes; selection = spine + tint, never a re-ink */
html body #pnp2-beat .pnp2-sq{
  background:var(--p2-card) !important; background-image:none !important; border:1px solid var(--p2-line) !important; border-left:3px solid transparent !important;
  border-radius:6px !important; padding:10px 14px 10px 12px !important; color:var(--p2-ink) !important;
}
html body #pnp2-beat .pnp2-sq.on{ background:var(--p2-tint) !important; background-image:none !important; border-color:var(--p2-line) !important; border-left-color:var(--p2-acc) !important; }
html body .pnp2-win .pnp2-sq .nm b,
html body .pnp2-win .pnp2-sq.on .nm b{ color:var(--p2-ink) !important; font:800 14px/1.15 IS,ui-sans-serif,system-ui,sans-serif !important; }
html body .pnp2-win .pnp2-sq .nm span{ color:var(--p2-ink-dim) !important; opacity:1 !important; }
html body .pnp2-win .pnp2-sq .ovr{ color:var(--p2-ink) !important; font-family:var(--pn-type-face) !important; font-weight:900 !important; font-size:17px !important; font-variant-numeric:tabular-nums; }
html body .pnp2-win .pnp2-sq.on .ovr{ color:var(--p2-acc) !important; }
html body .pnp2-win .pnp2-sq:focus-visible{ outline:2px solid var(--p2-acc); outline-offset:2px; }
html body .pnp2-win .pnp2-modline{ color:var(--p2-ink) !important; opacity:1 !important; font:800 11px/1.5 var(--mono),ui-monospace,monospace !important; letter-spacing:.14em !important; text-transform:uppercase; }
/* the rehearsal choices as option cards */
html body .pnp2-win .pnp2-reh{ gap:8px !important; }
html body #pnp2-beat .pnp2-opt{
  /* anchored on the window's id: style-01 paints every pitch-view <button> through a
     `body[data-view="pitch"] button:not(…)×N` chain (!important) that no class stack out-ranks —
     probed in the CSSOM. The scrim's id beats it outright. */
  background:var(--p2-card) !important; background-image:none !important;
  border:1px solid var(--p2-line) !important; border-left:3px solid var(--p2-acc) !important; color:var(--p2-ink) !important;
  box-shadow:none !important; border-radius:6px !important; min-height:0 !important;
}
html body .pnp2-win .pnp2-opt{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:14px; width:100%;
  padding:12px 14px 12px 16px; text-align:left; cursor:pointer;
  background:var(--p2-card); color:var(--p2-ink); border:1px solid var(--p2-line); border-left:3px solid var(--p2-acc); border-radius:6px;
  font:inherit; transition:background .15s ease, transform .15s ease;
}
html body #pnp2-beat .pnp2-opt:hover{ background:var(--p2-card-2) !important; transform:translateY(-1px); }
html body .pnp2-win .pnp2-opt:focus-visible{ outline:2px solid var(--p2-acc); outline-offset:2px; }
html body .pnp2-win .pnp2-opt[disabled]{ opacity:.45; cursor:default; transform:none; }
html body #pnp2-beat .pnp2-opt--wing{ border-left-color:var(--p2-ink-dim) !important; }
html body .pnp2-win .pnp2-opt-t{ display:block; min-width:0; }
html body .pnp2-win .pnp2-opt-t b{ display:block; font:800 14.5px/1.2 IS,ui-sans-serif,system-ui,sans-serif; color:var(--p2-ink); }
html body .pnp2-win .pnp2-opt-t em{ display:block; margin-top:3px; font:400 12.5px/1.4 IS,ui-sans-serif,system-ui,sans-serif; font-style:normal; color:var(--p2-ink-dim); }
html body .pnp2-win .pnp2-opt-mod{
  flex:none; white-space:nowrap; padding:6px 10px; border-radius:999px;
  background:var(--p2-acc); color:var(--p2-acc-ink);
  font:800 10.5px/1 var(--mono),ui-monospace,monospace; font-style:normal; letter-spacing:.08em; font-variant-numeric:tabular-nums;
}
html body .pnp2-win .pnp2-opt-mod.is-var{ background:transparent; color:var(--p2-ink); border:1px solid var(--p2-line); }
/* the Back control: the window's own secondary ink in light (it was taking the dark glass pair) */
html body #pnp2-beat .lg-light .lg-btn--secondary, html body #pnp2-beat .pnp2-win.lg-light .lg-btn--secondary{
  color:var(--p2-ink) !important; background:rgba(27,26,23,.06) !important; border-color:rgba(27,26,23,.2) !important;
}
html body .pnp2-win.lg-light .lg-btn--secondary:hover{ color:var(--p2-ink) !important; background:rgba(27,26,23,.10) !important; }
@media (max-width:560px){
  html body .pnp2-win .pnp2-opt{ grid-template-columns:1fr; row-gap:8px; }
  html body .pnp2-win .pnp2-opt-mod{ justify-self:start; }
}

/* ── 2 · THE DOCKET ────────────────────────────────────────────────────────────────────────── */
/* the rail clears the sticky titlebar with real air (the head's eyebrow was clipping under it) */
@media (min-width:1101px){
  html body .pn-fwin .wr-rail{ top:82px !important; }
}
html body .pn-fwin .wr-bs-head{ padding:18px 18px 16px !important; }
html body .pn-fwin .wr-bs-head .wr-bs-brand{ font-family:var(--pn-type-face) !important; font-weight:900 !important; font-size:22px !important; letter-spacing:-.02em !important; line-height:1.05 !important; margin:4px 0 4px !important; }
@media (max-width:760px){ html body[data-view="pitch"] .pn-fwin .wr-bs-head{ padding:14px 16px 12px !important; } }
html body .pn-fwin .wr-bs-facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)) !important; gap:10px 14px !important; margin-top:12px !important; }
html body .pn-fwin .wr-bs-facts dt{ font:800 9px/1 var(--mono),ui-monospace,monospace !important; letter-spacing:.18em !important; text-transform:uppercase; opacity:.72; margin-bottom:5px !important; }
html body .pn-fwin .wr-bs-facts dd{ margin:0 !important; font:800 13px/1.2 var(--mono),ui-monospace,monospace !important; letter-spacing:.02em !important; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* the CTA is one object: the verb and the arrow, centred, nothing riding inside it */
@media (min-width:1024px){
  html body .wr-bs-cta.pn-btn{ flex-direction:row !important; align-items:center !important; justify-content:center !important; min-height:58px; padding:12px 20px; gap:0; }
  html body .wr-bs-cta-label{ font-family:var(--pn-type-face) !important; font-weight:800; font-size:18px; }
}
html body .pn-fwin .wr-bs-dock-note{ margin:10px 0 0 !important; font:400 12.5px/1.45 IS,ui-sans-serif,system-ui,sans-serif !important; opacity:.92; }
html body .wr-bs-dock-cost{ font-weight:800; font-variant-numeric:tabular-nums; }
/* the build-detail disclosure: label row, summary UNDER it at full width — never ellipsised */
html body .pn-fwin .wr-more > summary{
  display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; align-items:center; row-gap:4px; column-gap:12px;
  padding:12px 18px 12px !important; min-height:0 !important;
}
html body .pn-fwin .wr-more .wr-more-k{ grid-column:1; grid-row:1; font:800 10px/1 var(--mono),ui-monospace,monospace !important; letter-spacing:.2em !important; text-transform:uppercase; }
html body .pn-fwin .wr-more .wr-more-cue{ grid-column:2; grid-row:1; margin-left:0 !important; }
html body .pn-fwin .wr-more .wr-more-sub{
  grid-column:1 / -1; grid-row:2; display:block !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important;
  font:500 11.5px/1.45 IS,ui-sans-serif,system-ui,sans-serif !important; letter-spacing:0 !important; text-transform:none !important; opacity:.8;
}
@media (max-width:430px){ html body .pn-fwin .wr-more .wr-more-sub{ display:block !important; } }
/* phone: the fixed dock keeps its two rows; the cost simply leads the helper line */
@media (max-width:760px){
  html body[data-view="pitch"] .wr-bs-dock-note{ font-size:11px !important; margin:0 !important; }
  html body[data-view="pitch"] .pn-fwin .wr-bs-facts{ display:none !important; }
}

/* the beat headlines take the window's own ink — in dark the second h2 ("Where do the last two
   hours go?") measured dark navy on the dark window (rendered, not assumed) */
html body #pnp2-beat .pnp2-hd{ color:var(--p2-ink) !important; }
html body #pnp2-beat .pnp2-ey{ color:var(--p2-acc) !important; }