/* ═══════════════════════════════════════════════════════════════════════════════
   PN — BUTTON GEOMETRY UNIFICATION  (Rita, 2026-08-19)
   ───────────────────────────────────────────────────────────────────────────────
   CEO ask: "unify and consolidate the button treatment across the game." The neon
   sweeps fixed the ACCENT discipline (one pink CTA per view). This sheet fixes the
   STYLE discipline — shape, radius, height, padding rhythm, states — so every
   in-game action button reads as ONE family rather than per-view improvisation.

   MEASURED divergence this corrects (getComputedStyle across the 4 merged neon
   hub-views, tools/button_audit.mjs):
     radius  : 2 · 6 · 8 · 10 · 12 · 18px all in play          → ONE: 12px (--v4-r-ctl)
     height  : 34 · 40 · 44 · 48 · 51px                        → ONE floor: 44px
     padding : 0/14 · 0/17 · 0/18 · 11/11 · 8/13 · 9/10 …      → ONE rhythm: 8/17
     focus   : mixed 2px accent, offsets 2/3px                 → ONE ring: 2px acc /2px

   THIS IS GEOMETRY ONLY. `!important` is used strictly on shape properties
   (border-radius, min-height, focus outline) so it wins the per-view cascade
   WITHOUT touching any fill, colour, semantic (danger/invest/fire), the .lg-btn
   liquid-glass primary, or the one-pink-CTA-per-view accent discipline. Label
   case and font-family stay as authored (mono-tactical vs sentence carries type
   hierarchy per the SST).

   Scope: `html body[data-view] .content .hub-view :is(…)` — high enough to beat the
   per-view component sheets (pn-squad-dossier's `html body[data-view="office"] .sqd-train`
   at (0,2,2), the v4 rules, s2-styles). It is NOT high enough to beat the office
   `button:not(…)` catch-alls in style-01.css, whose ~20 `:not()` clauses give them
   ~(0,20,1); those buttons keep the 12px radius because the catch-alls EXCLUDE them by
   class (the sanctioned "system classes escape the catch-all" pattern, SST §5e) — this
   sheet added `.pnv4-go/.mini-cta/.dn-cta/.sf-invest/.sf-fire/.s2-cli-cta/.fl-thing__do/
   .fl-week__do` to those exclusion lists. Loaded genuinely last.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── AA CONTRAST · the one primary CTA · both directions of SST §5f ──────────────────
   MEASURED FAULT (getComputedStyle, real game): the accent-filled primaries painted
   near-WHITE ink and failed AA in every theme — .pnv4-go--now 3.23 (neon) / 2.58 / 2.58,
   .lg-btn--primary 2.58 (midnight). The design INTENDS near-black (--v4-acc-ink #07080C)
   but the cosmetic accent layer won the cascade and painted white. Pure white on the
   bright accent (#FF2E88 / #F97316) can only reach ~2.6–3.2:1 — it CANNOT pass without
   dulling the brand accent, so near-black is the only route (≈5.9:1 on pink, ≈7:1 on orange).
   Light theme is the OTHER direction of the same law: .lg-btn--primary/.nbo-cta fills darken
   to burnt-orange (#b4380d) where WHITE is the AA-correct ink (5.98:1). .pnv4-go--now keeps
   its BRIGHT fill in light too, so it stays near-black there. Every value below is measured. */
html body[data-view]:not(.mvc-light) .content .hub-view :is(
  .pnv4-go--now, .lg-btn--primary, .nbo-cta
):not(:disabled){
  color: #07080C !important;
}
html body.mvc-light[data-view] .content .hub-view :is(
  .lg-btn--primary, .nbo-cta
):not(:disabled){
  color: #ffffff !important;
}
html body.mvc-light[data-view] .content .hub-view .pnv4-go--now:not(:disabled){
  color: #07080C !important;   /* bright fill in light too → near-black stays correct */
}

/* ── B4 · the active sub-tab reads as a real active state (neon) ─────────────────────
   MEASURED: `.s2-htab.on` was light-slate-on-light-slate at 1.23:1 in neon (the rail-on
   token collapsed). The alternation law (SST §5f) says an active rail segment is carried
   by the ACCENT with inverted ink — not a tone-on-tone tint. Near-black on the neon accent
   (#FF2E88) ≈ 6:1. Dark themes only; light theme's rail-on already inverts correctly. */
html body[data-view]:not(.mvc-light) .content .hub-view .s2-htab.on{
  background: var(--accent, #f97316) !important;
  color: #07080C !important;
}
html body[data-view]:not(.mvc-light) .content .hub-view .s2-htab.on::after{
  background: #07080C !important;
}
/* the sub-tabs are a tap target too — 44px min touch height (was 36px). */
html body[data-view] .content .hub-view .s2-htab{
  min-height: 44px !important;
  display: inline-flex; align-items: center;
}

/* one control radius, one touch-height floor — every action button in the shell.
   Radius is a LITERAL 12px, not var(--v4-r-ctl): that token is itself overridden
   per-view (8px in the office scope, 12px elsewhere), which is part of what broke
   consistency. A literal makes the shape immune to that drift.
   `.s2-cli-open` is EXCLUDED — it is an intentional text-only reveal link (a `.pn-btn`
   by class only), not a slab; folding it in would turn a reveal affordance into a button. */
html body[data-view] .content .hub-view :is(
  .pn-btn, .lg-btn, .pnv4-go,
  .nbo-cta, .nbo-bb-cta,
  .s2-cli-cta, .mini-cta, .dn-cta,
  .sf-invest, .sf-fire, .sqd-train, .sqd-letgo,
  .fl-thing__do, .fl-week__do,
  .hub-advance, .sea-promo-cta,
  .perf-hero-cta .lg-btn
):not(.s2-cli-open){
  border-radius: 12px !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

/* one horizontal padding rhythm for the single-line action buttons. Two-line
   buttons (the squad TRAIN UP / LET GO with their mono sublabel) keep their
   vertical 8px and only get the horizontal rhythm — they grow past 44px on
   content, which min-height allows without clipping. */
html body[data-view] .content .hub-view :is(
  .pn-btn, .nbo-cta, .s2-cli-cta, .mini-cta, .dn-cta,
  .sf-invest, .sf-fire, .sqd-train, .sqd-letgo, .nbo-bb-cta, .fl-thing__do, .fl-week__do
):not(.s2-cli-open){
  padding-left: 17px !important;
  padding-right: 17px !important;
}
html body[data-view] .content .hub-view :is(.pn-btn, .nbo-cta, .s2-cli-cta, .mini-cta, .dn-cta, .fl-thing__do, .fl-week__do):not(.s2-cli-open){
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* the compact/icon members opt back out of the wide horizontal rhythm */
html body[data-view] .content .hub-view .pn-btn--icon{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ONE focus ring — inset-safe, accent, consistent offset. Replaces the
   2px/3px offset drift across the per-view sheets. */
html body[data-view] .content .hub-view :is(
  .pn-btn, .lg-btn, .pnv4-go,
  .nbo-cta, .nbo-bb-cta, .s2-cli-cta, .mini-cta, .dn-cta,
  .sf-invest, .sf-fire, .sqd-train, .sqd-letgo,
  .fl-thing__do, .fl-week__do, .hub-advance, .sea-promo-cta
):not(.s2-cli-open):focus-visible{
  outline: 2px solid var(--accent, var(--p2, #f97316)) !important;
  outline-offset: 2px !important;
}

/* ONE disabled state — a button that cannot be pressed reads the same everywhere. */
html body[data-view] .content .hub-view :is(
  .pn-btn, .lg-btn, .pnv4-go, .nbo-cta, .nbo-bb-cta, .s2-cli-cta, .mini-cta, .dn-cta,
  .sf-invest, .sf-fire, .sqd-train, .sqd-letgo
):is(:disabled, [aria-disabled="true"], .off){
  opacity: .5;
  cursor: not-allowed;
}

/* ── B5 · OPEN THE FILE reveal link — real hit target + AA ground ────────────────────
   It STAYS a text reveal (not a CTA slab — the card's own click is the CTA), but a tabbable
   control must have a ≥44px hit target and a measurable ground. It was a 9px-tall control
   whose white mono label sat straight on a photo banner (unreliable AA in midnight/platinum).
   Fix: a 44px min tap area and a LOW-KEY legibility scrim (not a solid accent fill — that is
   the "second pink tape" the design note at style-01.css:11124 forbids), so white passes AA on
   any banner in every theme. Higher specificity + !important to beat the neon background:none
   override. Position kept via negative offset so the visible text does not jump. */
html body[data-view] .content .hub-view[data-view="v-clients"] .s2-cli .s2-cli-open{
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 8px 11px !important;
  margin: -8px -11px !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(6,8,12,.30), rgba(6,8,12,.66)) !important;
  background-image: linear-gradient(180deg, rgba(6,8,12,.30), rgba(6,8,12,.66)) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.95) !important;
}