/* ══════════════════════════════════════════════════════════════════════════════════════════════ pn-ink-sweep-20260927.css — LIGHT PANELS TAKE DARK INK (CEO 2026-09-27, verbatim: "your light panels have light type"). Direction B moved many panels to a light paper/cream/gold ground, but their text still carried the dark-theme light colours (often via `color` AND `-webkit-text-fill-color` from pn-ds.css's `html:not(#pn-ds-never)` ID escalation). This sheet is the sweep: found by a DOM-walking WCAG audit (every visible text node, effective fill colour vs the pixels actually behind it, at 1440×900 and 390×844), fixed with specific selectors, re-audited to zero light-ground failures. Ink law applied here: · on any light / paper / cream / white / gold ground → ink #140a04, secondary #3d3226 (≥7:1) · semantic figures on light grounds → good #0b6b4a · warn #8a5a00 · bad #b42318 (all AA on cream) · cobalt / emerald blocks keep white ink (a few too-dim labels there are lifted to near-white) · orange buttons keep their dark ink (`--ds-on-accent`); cobalt/emerald keep white · both `color` and `-webkit-text-fill-color` are set; SVG text gets `fill` too. §9 (added, CEO "always rounded pills" / "follow the button rules you have"): every ACTION button is the documented pill — UX_RULES §1 + GAME_DESIGN_STATE `.btn` family + STYLE_SOURCE_OF_TRUTH §5h.4. Specificity: html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body … (three ID tiers, same as pn-tearsheet-modules; five for §9) and loaded LAST in play.html (and in duff.html, whose room is a same-origin iframe the play.html cascade cannot reach) so it wins ties. Audit + screenshots: scratchpad inksweep/ (walk.mjs, contrast_before.json, contrast_after.json). ══════════════════════════════════════════════════════════════════════════════════════════════ */ :root{ --ink-x: #140a04; /* primary ink on light */ --ink-x2: #3d3226; /* secondary ink on light (≥7:1 on paper) */ --ink-good: #0b6b4a; --ink-warn: #8a5a00; --ink-bad: #b42318; --ink-onblue: #f8f9ff; /* white ink on cobalt/emerald */ --ink-onblue2: #dde5ff;/* secondary white on cobalt (≥4.5 across the gradient) */ /* STYLE_SOURCE_OF_TRUTH §5h.1: text-bearing emerald starts at #188062 — the old #1fa37a top stop measured ~3.2:1 with white (2.2:1 under the specular highlight). Token re-pointed, recipe kept. */ --tbm-emerald-a: #188062; } /* ══════════════════════════════════════════════════════════════════════════════════════════════ 1 · THE FINANCIALS (#__cfoView) — paper panels = .s1-panel without --accent ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* the room's own tokens, re-pointed to dark ink inside paper panels: every var(--s1-ink/…) child (death note, bar labels, legend, donut centre, ranked rows) follows */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel:not(.s1-panel--accent){ --s1-ink: #140a04; --s1-ink2: #3d3226; --s1-muted: #3d3226; --s1-good: #0b6b4a; --s1-warn: #8a5a00; --s1-bad: #b42318; --s1-grid: rgba(20,10,4,.14); } /* every text-bearing element inside a paper panel: primary ink (buttons excluded) */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel:not(.s1-panel--accent) :where(div,span,p,b,strong,em,small,i,li,h1,h2,h3,h4,h5,label,sub,sup):not(:where(button, button *, .pn-btn, .pn-btn *)){ color: var(--ink-x) !important; -webkit-text-fill-color: var(--ink-x) !important; } /* secondary copy on paper */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel:not(.s1-panel--accent) :is(.s1-rb-sub,.s1-donut-sub,.s1-bar-lbl,.s1-flat-note,.s1-leg,.s1-eye,.s1-ph-sub,.s1-ph-r,.s1-death-note,.s1-death-sub,.muted,.small,p,small), html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel:not(.s1-panel--accent) .s1-rb-v > span:not(:first-child){ color: var(--ink-x2) !important; -webkit-text-fill-color: var(--ink-x2) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel:not(.s1-panel--accent) .s1-eye{ opacity: 1 !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel:not(.s1-panel--accent) .s1-death-note b{ color: var(--ink-x) !important; -webkit-text-fill-color: var(--ink-x) !important; } /* semantic figures on paper: dark variants */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel:not(.s1-panel--accent) :is(.s1-good,.pos,.is-good,.good), html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel:not(.s1-panel--accent) :is(.s1-good,.pos,.is-good,.good) *{ color: var(--ink-good) !important; -webkit-text-fill-color: var(--ink-good) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel:not(.s1-panel--accent) :is(.s1-warn,.warn,.is-warn), html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel:not(.s1-panel--accent) :is(.s1-warn,.warn,.is-warn) *{ color: var(--ink-warn) !important; -webkit-text-fill-color: var(--ink-warn) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel:not(.s1-panel--accent) :is(.s1-bad,.neg,.bad,.is-bad), html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel:not(.s1-panel--accent) :is(.s1-bad,.neg,.bad,.is-bad) *{ color: var(--ink-bad) !important; -webkit-text-fill-color: var(--ink-bad) !important; } /* SVG labels inside paper panels */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel:not(.s1-panel--accent) :is(text,tspan){ fill: var(--ink-x2) !important; color: var(--ink-x2) !important; } /* the CFO note's money-in / money-out bars: a bright green and a coral fill, so the figure on them takes dark ink (white on #3ddc84 was 1.8:1) */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-cfo-bar :is(b, b *){ color: var(--ink-x) !important; -webkit-text-fill-color: var(--ink-x) !important; text-shadow: none !important; } /* cobalt panels keep white ink — lift the dim-grey chart axes, lever tags and footnote to near-white so they clear AA across the whole cobalt gradient */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel.s1-panel--accent:not(.s1-read) :is(.c-ax-y,.c-ax-x,.pnrb-ax,.c-lbl):not(.death):not(.c-now-lbl){ fill: var(--ink-onblue2) !important; color: var(--ink-onblue2) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel.s1-panel--accent:not(.s1-read) :is(.s1-scn-tag,.pnrb-now-k,.pnrb-now-v,.s1-flat-note,.pnrb-chip,.s1-eye,p){ color: var(--ink-onblue) !important; -webkit-text-fill-color: var(--ink-onblue) !important; opacity: 1 !important; } /* ══════════════════════════════════════════════════════════════════════════════════════════════ 2 · THE TEAM — squad cards (.scout-card.squad.sqd-card) sit on paper. The tear-sheet pass forced ink but then faded labels with opacity .45–.58 (→ 2.3–4.3:1) and used lighter status colours. ══════════════════════════════════════════════════════════════════════════════════════════════ */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card :is(.tt-k,.tt-role,.tt-terms,.tt-flavor,.sqd-m,.sqd-m i){ opacity: 1 !important; color: var(--ink-x2) !important; -webkit-text-fill-color: var(--ink-x2) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-m b{ opacity: 1 !important; color: var(--ink-x) !important; -webkit-text-fill-color: var(--ink-x) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card :is(.tt-v--hi,.sqd-m.is-good b){ color: var(--ink-good) !important; -webkit-text-fill-color: var(--ink-good) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card :is(.tt-v--mid,.sqd-m.is-warn b){ color: var(--ink-warn) !important; -webkit-text-fill-color: var(--ink-warn) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card :is(.tt-v--lo,.sqd-m.is-bad b){ color: var(--ink-bad) !important; -webkit-text-fill-color: var(--ink-bad) !important; } /* ══════════════════════════════════════════════════════════════════════════════════════════════ 3 · CLIENTS — book-of-business revenue legend + the loyalty "— steady" read, both on paper and both faded (opacity .42–.7) below AA. ══════════════════════════════════════════════════════════════════════════════════════════════ */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .tbm-rev-li, html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .tbm-rev-li b{ opacity: 1 !important; color: var(--ink-x) !important; -webkit-text-fill-color: var(--ink-x) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-loy-dir.fl{ opacity: 1 !important; color: var(--ink-x) !important; -webkit-text-fill-color: var(--ink-x) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-loy-dir.up{ color: var(--ink-good) !important; -webkit-text-fill-color: var(--ink-good) !important; opacity: 1 !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-loy-dir.dn{ color: var(--ink-bad) !important; -webkit-text-fill-color: var(--ink-bad) !important; opacity: 1 !important; } /* ══════════════════════════════════════════════════════════════════════════════════════════════ 4 · THE VAULT — look cards are paper; the featured look sits on a bright photograph. ══════════════════════════════════════════════════════════════════════════════════════════════ */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-look-card :is(.pn-look-blurb, .pn-look-body p){ opacity: 1 !important; color: var(--ink-x2) !important; -webkit-text-fill-color: var(--ink-x2) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-look-card .pn-look-see, html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-look-card .pn-look-see *{ opacity: 1 !important; color: var(--ink-x) !important; -webkit-text-fill-color: var(--ink-x) !important; } /* the price sits ON the artwork (dark or bright, per look) — give it its own paper chip */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-look-card .pn-look-price{ background: var(--tbm-paper-a, #f8f4ea) !important; color: var(--ink-x) !important; -webkit-text-fill-color: var(--ink-x) !important; padding: 4px 9px !important; border-radius: 999px !important; opacity: 1 !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-look-card .pn-look-price *{ color: var(--ink-x) !important; -webkit-text-fill-color: var(--ink-x) !important; } /* featured look: white type over a bright penthouse photo → a real scrim under the copy */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #store-looks-sec .pn-look-hero .pn-hero-scrim{ background: linear-gradient(90deg, rgba(6,8,12,.88) 0%, rgba(6,8,12,.74) 50%, rgba(6,8,12,.5) 100%) !important; opacity: 1 !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #store-looks-sec .pn-look-hero :is(.pn-eyebrow, .pn-display, .pn-body){ color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: 1 !important; } /* the app-bar countdown turns brown in the Vault view (a light-theme leftover) — dark-on-dark */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnpsAppbarCd .pnps-cd-txt{ color: #a9b8cc !important; -webkit-text-fill-color: #a9b8cc !important; opacity: 1 !important; } /* ══════════════════════════════════════════════════════════════════════════════════════════════ 5 · DARK GROUNDS — the handful of dark-ground failures the same walk found. White stays white; these are dimmed labels (opacity .56–.92) or light-theme semantic greens left on dark cards. Text-bearing cobalt/emerald blocks: the specular highlight is toned from .28–.30 to .08 so white ink clears AA at the top-left where the eyebrows sit (recipe unchanged: highlight + grain + two-stop gradient + frame + depth). Emerald top stop is #188062 per §5h.1 (see :root). ══════════════════════════════════════════════════════════════════════════════════════════════ */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body :is(.pv-herochartbox, .mvc-kpi-row .pn-card.pv-kpi:not(.pv-kpi-ring):not(:nth-of-type(4)):not(:last-of-type), .s1-panel.s1-panel--accent:not(.s1-read), .s2-book .s2-bk-hero){ background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.08), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-cobalt-a), var(--tbm-cobalt-b)) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body :is(.mvc-kpi-row .pn-card.pv-kpi.pv-kpi-ring, .pnsp-stand){ /* text-bearing emerald measured WITH its grain: #188062 + grain read ~4.2:1 under 11px labels, so these two blocks start one step deeper (#13704f), same hue, same recipe */ background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.06), transparent 55%), var(--tbm-noise), linear-gradient(150deg, #13704f, var(--tbm-emerald-b)) !important; background-blend-mode: normal, soft-light, normal !important; /* grain via soft-light: overlay lifted the emerald midtone past AA */ } /* the reputation ring's number sits on a soft glow in the ring's centre — seat it on a dark disc */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi.pv-kpi-ring .pv-ringc{ background: radial-gradient(circle, rgba(4,52,38,.62) 0 58%, rgba(4,52,38,0) 70%) !important; border-radius: 50% !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi .pv-kpi-foot{ opacity: 1 !important; } /* Team: the "not yours yet" market band is greyscaled as a whole (pn-final-20260820), and a child's filter:none cannot undo a parent filter — so its own Sign / Book / "Set it with the CFO" buttons rendered grey at ~4:1. Grey the CARDS (portraits + stats), not the band, so the actions keep their real colour — which is what that sheet's own comment says it wanted. */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .tm-band--market{ filter: none !important; opacity: 1 !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .tm-band--market :is(.scout-card, .s2-poach-card) > .tt-card{ filter: grayscale(1) brightness(.95) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .tm-band--market :is(.scout-card, .s2-poach-card) .tt-ovr, html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .tm-band--market :is(.scout-card, .s2-poach-card) .tt-ovr *{ color: #000 !important; -webkit-text-fill-color: #000 !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .tm-rule > span{ opacity: 1 !important; color: #a9b8cc !important; -webkit-text-fill-color: #a9b8cc !important; } /* squad card rank chip: the text-bearing emerald per §5h.1 */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-rank{ background: linear-gradient(150deg, #13704f, #0b5e45) !important; color: #f2fbf7 !important; -webkit-text-fill-color: #f2fbf7 !important; opacity: 1 !important; padding: 3px 7px !important; border-radius: 2px !important; } /* Floor pipeline bars: sectors with nothing in them are dimmed to .4 — .6 still reads as "dim" and clears AA for the sector name */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-barchart .pv-pbar.dim{ opacity: .6 !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-barchart .pv-pbar.dim :is(.pv-pbar-top, .pv-pbar-nm, .pv-pbar-nm small){ opacity: 1 !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-barchart .pv-pbar.dim .pv-pbar-nm small{ color: #eef3fa !important; -webkit-text-fill-color: #eef3fa !important; } /* The Guide index: the selected tab is a lighter cobalt tint under white type → a darker step */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnGd-root .pnGd-idxItem.is-on, html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnGd-root .pnGd-idxItem[aria-selected="true"]{ background: rgba(5,12,40,.34) !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnGd-root .pnGd-idxItem.is-on :is(.pnGd-idxH, .pnGd-idxK){ opacity: 1 !important; color: #f8f9ff !important; -webkit-text-fill-color: #f8f9ff !important; } /* dimmed labels inside cobalt / emerald blocks → full-strength block ink */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body :is(.pv-herochartbox .pv-hero-lbl, .mvc-kpi-row .pn-card.pv-kpi .pn-eyebrow, .mvc-kpi-row .pn-card.pv-kpi .mvc-trend, .s2-book .s2-bk-hero .s2-eyebrow, .pnsp-stand .pnsp-k, .pnsp-stand .pnsp-value-s, .pnsp-stand .pnsp-step-s, .pnsp-stand .pnsp-step-n, .pnsp-stand .pnsp-step, #pnGd-root .pnGd-idxItem.is-on .pnGd-idxK){ opacity: 1 !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi:not(:nth-of-type(4)):not(:last-of-type) .mvc-trend{ color: var(--ink-onblue) !important; -webkit-text-fill-color: var(--ink-onblue) !important; } /* semantic figures ON cobalt: light variants (the dark AA-on-cream ones are for paper only) */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel.s1-panel--accent:not(.s1-read) :is(.s1-bad, .s1-bad *, .bad, .neg){ color: #ffb1a6 !important; -webkit-text-fill-color: #ffb1a6 !important; fill: #ffb1a6 !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel.s1-panel--accent:not(.s1-read) :is(.s1-good, .s1-good *, .good, .pos){ color: #8ff5bf !important; -webkit-text-fill-color: #8ff5bf !important; fill: #8ff5bf !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel.s1-panel--accent:not(.s1-read) :is(.s1-warn, .s1-warn *, .warn){ color: #ffd98a !important; -webkit-text-fill-color: #ffd98a !important; fill: #ffd98a !important; } /* light-theme good-green (#1f7a3a) left on DARK cards: New-business fit reads, the brief bar and the dossier "Happy" pill → the dark-theme good green */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body :is(.nbo-card .nbo-fit-v.good, .nbo-brief-bar .nbo-bb-v.good, .nbo-brief-bar .nbo-bb-v.good *, .dossier-card .pill.good){ color: #3ddc84 !important; -webkit-text-fill-color: #3ddc84 !important; } /* a sector-conflict opportunity is shown blocked at opacity .72 — but it still carries the reason ("CONFLICT", fit read, fee), so it needs to read: .92 keeps it visibly set back; the light-theme red on its dark card becomes the dark-theme red. The disabled CTA itself stays muted (inactive). */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .nbo-card.is-conflict{ opacity: .92 !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .nbo-card .nbo-fit-v.bad{ color: #ff8a7a !important; -webkit-text-fill-color: #ff8a7a !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .nbo-card.is-conflict :is(.nbo-fit-meta, .nbo-fit-meta b, .nbo-fit-k, .nbo-sector, .nbo-fee em){ color: #a9b8cc !important; -webkit-text-fill-color: #a9b8cc !important; } /* the RFI row's FEE label (opacity .45 on the dark stream) */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .rfi-row .rfi-budget > span{ opacity: 1 !important; color: #a9b8cc !important; -webkit-text-fill-color: #a9b8cc !important; } /* The Duff's drinker tiles: ivory names over a photograph — a smoked-glass scrim under the caption (the Duff's own world, §5h.7: no blocks, just a darker glass under the type) */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .drinkers .dr .lay{ background: linear-gradient(to top, rgba(10,7,4,.9) 0%, rgba(10,7,4,.72) 60%, rgba(10,7,4,.0) 100%) !important; } /* The Duff help sheet's "How to play" badge: orange on dark brown → the Duff's lighter brass-orange */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-helpsheet .hcrown .badge{ color: #ffb27a !important; -webkit-text-fill-color: #ffb27a !important; } /* ══════════════════════════════════════════════════════════════════════════════════════════════ 9 · BUTTONS — CEO 2026-09-27: "watch your button treatment — always rounded pills" and "you already have button rules, just follow them". This applies the DOCUMENTED law, nothing new: · design/UX_RULES.md §1 — UI type only (no display/condensed faces, no mono letter-spaced caps in pills), no letter-spacing distortion, sane padding, icon/arrow clearance; ink on a brand- orange fill is `--ds-on-accent`, never white; secondaries pass AA. · design/GAME_DESIGN_STATE.md — the one primary / one secondary treatment, min-height 44px, and (CEO) the shape is always a fully rounded pill. Tokens are pn-ds.css's own (--ds-accent, --ds-on-accent, --ds-ink, --ds-body, --ds-r-pill). Scoped by ACTION-button classes only. Card-sized clickable tiles (desk options, pitch options, answer/role/city tiles, anything *card*), inputs and nav-rail items are NOT touched. Specificity: FIVE never-real ID tiers — the newest sheets set square radii at three IDs plus a context id (#pnp2-beat …), so four is not always enough. ══════════════════════════════════════════════════════════════════════════════════════════════ */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2):not(#pn-ink-x3):not(#pn-ink-x4) body :is( .pn-btn, .lg-btn, .nbo-cta, .pnv4-go, .pnlw-go, .pnp2-ctrl, [data-p2closectrl], .go, .s1-btn-ghost, .s1-btn-send, .s1-mrl-cta, .s1-close, .mini-cta, .pn-si-cta, .pn-ww-invite-cta, .pn-preroom-cta, .mt-go, .pnsp-claim, .s2-cli-cta, .poach-cta, .sea-promo-cta, .wr-cta, .wr-bs-cta, .ce-cta, .ws-cta, .np-cta, .grp-next-cta, .pn-ready-go, .pn-afford-go, .pnpub-topup, .pnpub-recap-go, .pnpub-bump-go, .pnfc-end-btn, .pnfc-move-go, .pn-vb-back, .t100-cta, .vc-btn, .ww-btn, .pnpay-btn, .tb-buy, .rl-act-go, .duff-topup-btn, .pnfc-x, .pn-room-ovl__x, #store-back, #vv-topup-btn, #vv-cart, #rv-skip, #duffGo, #duffTopUp, #advanceHero ):not(.pnfc-opt):not(.pnp2-opt):not(.pnp2-sq):not(.ansbtn):not(.rolebtn):not(.city-btn):not([class*="card"]):not(input){ border-radius: var(--ds-r-pill, 999px) !important; min-height: 44px !important; padding-left: max(20px, .9em) !important; padding-right: max(20px, .9em) !important; font-family: var(--ds-body, 'Instrument Sans', Inter, system-ui, sans-serif) !important; letter-spacing: normal !important; text-transform: none !important; clip-path: none !important; -webkit-clip-path: none !important; } /* the label spans inside must not carry their own mono/caps either */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2):not(#pn-ink-x3):not(#pn-ink-x4) body :is( .pn-btn, .lg-btn, .nbo-cta, .pnv4-go, .pnlw-go, .pnp2-ctrl, [data-p2closectrl], #vv-topup-btn, #vv-cart, #rv-skip, #duffGo ):not(.pnfc-opt):not(.pnp2-opt):not([class*="card"]) :is(span, b, em, strong):not(.vv-badge){ font-family: inherit !important; letter-spacing: normal !important; text-transform: none !important; } /* small buttons keep a smaller inset, still clear of the curve */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2):not(#pn-ink-x3):not(#pn-ink-x4) body :is(.pn-btn--sm, .lg-btn--sm):not(.pnfc-opt):not([class*="card"]){ padding-left: 18px !important; padding-right: 18px !important; } /* the Duff's drink price chip and the scroll-for-more style inline pills: pill, but compact */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2):not(#pn-ink-x3):not(#pn-ink-x4) body .dr .buy{ border-radius: var(--ds-r-pill, 999px) !important; padding-left: 14px !important; padding-right: 14px !important; font-family: var(--ds-body, 'Instrument Sans', Inter, system-ui, sans-serif) !important; letter-spacing: normal !important; text-transform: none !important; } /* PRIMARY — the one filled treatment: brand accent + the theme's on-accent ink (UX_RULES §1). No gradient/bevel/glow (pn-ds binding ruling #4). Covers the pitch footer's "Move to …", the Floor's "Read the brief" / "End week", the Vault "Top up", pop-up primaries and the Duff round. */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2):not(#pn-ink-x3):not(#pn-ink-x4) body :is( .pn-btn--primary, .lg-btn--primary, .pnv4-go--now, .nbo-cta, .go--now, .pnsp-claim, #vv-topup-btn, #duffGo, #duffTopUp, #advanceHero ):not(.pnfc-opt):not(.pnp2-opt):not([class*="card"]):not(:disabled):not(.off){ background: var(--ds-accent, #f97316) !important; background-image: none !important; color: var(--ds-on-accent, #14060d) !important; -webkit-text-fill-color: var(--ds-on-accent, #14060d) !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important; font-weight: 800 !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2):not(#pn-ink-x3):not(#pn-ink-x4) body :is( .pn-btn--primary, .lg-btn--primary, .pnv4-go--now, .nbo-cta, .go--now, .pnsp-claim, #vv-topup-btn, #duffGo, #duffTopUp, #advanceHero ):not(.pnfc-opt):not(.pnp2-opt):not([class*="card"]):not(:disabled):not(.off) *{ color: var(--ds-on-accent, #14060d) !important; -webkit-text-fill-color: var(--ds-on-accent, #14060d) !important; } /* SECONDARY on the dark Vault hero — Basket: the documented outline (transparent + 1px ink edge) */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2):not(#pn-ink-x3):not(#pn-ink-x4) body .pn-vb-hero #vv-cart{ background: transparent !important; background-image: none !important; box-shadow: none !important; border: 1px solid color-mix(in srgb, var(--ds-ink, #eef3fa) 55%, transparent) !important; color: var(--ds-ink, #eef3fa) !important; -webkit-text-fill-color: var(--ds-ink, #eef3fa) !important; font-weight: 700 !important; } /* the pitch footer secondaries (Back / Just pitch it / Close) keep the war-room's AA-checked colours but lose the mono caps: UI type, weight 700, normal tracking */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2):not(#pn-ink-x3):not(#pn-ink-x4) body #pnp2-beat .pnp2-foot :is(.lg-btn--secondary, .pnp2-ctrl, .pnp2-ctrl--fast, [data-p2closectrl]){ font: 700 14px/1 var(--ds-body, 'Instrument Sans', Inter, system-ui, sans-serif) !important; } /* labels that arrive UPPERCASE in the markup (pn-pitch2.js ctrlBarHTML: "JUST PITCH IT →", "CLOSE", "BACK TO THE FLOOR"; s2-js.js: "MANAGE CLIENT ▸"): sentence case in CSS — lowercase the run, capitalise the first letter. ::first-letter needs a block box, so these go block/inline-block and centre by line-height instead of flex (border 2px → 40px line box inside the 44px pill). */ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2):not(#pn-ink-x3):not(#pn-ink-x4):not(#pn-ink-x5):not(#pn-ink-x6) body #pnp2-beat .pnp2-foot .pnp2-ctrl, html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2):not(#pn-ink-x3):not(#pn-ink-x4):not(#pn-ink-x5):not(#pn-ink-x6) body #pnp2-ctrlbar-final-probe .pnp2-ctrl{ display: block !important; text-transform: lowercase !important; line-height: 40px !important; padding-top: 0 !important; padding-bottom: 0 !important; text-align: center !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2):not(#pn-ink-x3):not(#pn-ink-x4):not(#pn-ink-x5):not(#pn-ink-x6) body .s2-cli-open.pn-btn{ display: inline-block !important; text-transform: lowercase !important; line-height: 42px !important; padding-top: 0 !important; padding-bottom: 0 !important; text-align: center !important; white-space: nowrap !important; } html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2):not(#pn-ink-x3):not(#pn-ink-x4):not(#pn-ink-x5):not(#pn-ink-x6) body :is(#pnp2-beat .pnp2-foot .pnp2-ctrl, #pnp2-ctrlbar-final-probe .pnp2-ctrl, .s2-cli-open.pn-btn)::first-letter{ text-transform: uppercase !important; }