/* ══════════════════════════════════════════════════════════════════════════════════════════════
   pn-tearsheet-modules-20260927.css — DIRECTION B, "TEAR-SHEET" (CEO-chosen, 2026-09-27)
   v3 — CEO rulings applied in order, this file reflects the LATEST of each:
     v1: Direction B, Inter 900 (never the Bodoni-italic serif clause), orange/cobalt/yellow blocks.
     v2 legibility pass: TEAM/SEASON contrast bugs found + fixed (see §CONTRAST BUGS FIXED below).
     v3 (THIS FILE) — TWO rulings, both applied:
       (a) "black text on a blue background is illegible… design so basic… add depth, gradient,
           texture." → every block now carries a two-stop gradient, a grain/noise overlay, an inner
           top highlight and a drop shadow (see §DEPTH RECIPE). Ink law made explicit and automated:
           dark, saturated blocks (cobalt/emerald) ALWAYS take white/paper text; light, warm blocks
           (gold/paper) ALWAYS take dark ink. No exceptions, checked by tools/contrast in handback.
       (b) "orange is ONLY for actions and buttons. No orange blocks, panels or cards anywhere."
           → the colour law is REMAPPED (this supersedes the v1 mapping in the header above):
             COBALT  = money + information   (cash, valuation, book of business, Financials panels)
             EMERALD = progress + good news  (reputation, Season "where you stand", met requirements)
             GOLD    = warnings ONLY         (runway, exposure, at-risk, unmet reqs, "needs you most")
             PAPER   = neutral reading panels
             ORANGE  = buttons / CTAs / links / the active-tab marker — NEVER a block background.
           Verified by tools/no_orange_blocks_check.mjs (walks this file's own rules; see handback).

   Direction B's form is unchanged: no neutral card at all — a full-bleed colour block *is* the
   card, framed in a 3px ink line, bordered mono eyebrow tab top-left. Headlines: Inter 900,
   sentence case. No serif anywhere.

   ── CONTRAST BUGS FIXED THIS PASS (found by the DOM-walking WCAG audit, ratio math in handback):
     · `.pnsp-k` was a BARE, unscoped selector shared by the Season "AGENCY VALUE" eyebrow (inside
       a colour block, wanted dark/light ink) AND the bottom stats-strip labels ("Pitches won" etc,
       sat on the plain dark page). One rule painted both — the stats strip went invisible. Now
       scoped to `.pnsp-stand .pnsp-k` / `.pnsp-board .pnsp-k` only; the stats strip is untouched.
     · `.tt-card` (used inside the Team squad card once its ground went light) inherited its
       ORIGINAL dark-theme text colours (white name, pale-grey labels/quote, light stat values) —
       invisible on the new light ground. Now blanket-forced to ink inside the card, with AA-dark
       status colours carved out for the FM-style talent grades and the warn/glad callouts.
     · `.do-now .dn-ico`/`.help-chip` inherited `color:inherit` from the card, which (a) killed the
       calm state's green tick (turned it the same ink as the card, reading as a filled dark box
       because the icon's own tinted circle background was untouched) and (b) made the `?` help
       chip's white glyph invisible on the new light ground. Both now get an explicit, AA-checked
       ink-on-tint treatment instead of inheriting.

   SUPERSESSION: loads AFTER pn-blockcolour-20260927.css. A single `:not(#pn-ds-never)` ID-level
   escalation (pn-ds.css's own trick) was measured LOSING to pn-ds.css on `.pv-kpi` specifically —
   binary-searched by disabling stylesheets one at a time until the exact rule that beat it was
   isolated (pn-ds.css itself carries more than one such escalation on overlapping selectors, so a
   single extra ID tier was not always enough). Every selector below instead stacks THREE harmless
   `:not(#id)` clauses against IDs that never exist on this page — each adds one ID-tier of
   specificity with zero visual effect — which measured as an outright, unconditional win against
   every competing rule in the cascade, verified the same way (computed `background-image` on the
   real KPI/valuation/book elements, not asserted).

   OWNERSHIP / DO NOT TOUCH: #pn-pub, .pn-tipsy*, duff.html, pn-pilot-season*, pn-feedback*, and
   pn-tearsheet-popups-20260927.css (a separate agent's pop-up file) are untouched by this sheet.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── the four blocks (post-remap) ─────────────────────────────────────────────────────────── */
  --tbm-cobalt-a:  #2a4fc4; --tbm-cobalt-b:  #12245e; --tbm-cobalt-ink: #f8f9ff; /* money + info */
  --tbm-emerald-a: #1fa37a; --tbm-emerald-b: #0b5e45; --tbm-emerald-ink:#f2fbf7; /* progress + good news */
  --tbm-gold-a:    #ffd24a; --tbm-gold-b:    #f0a500; --tbm-gold-ink:  #1d1103; /* warnings only */
  --tbm-paper-a:   #f8f4ea; --tbm-paper-b:   #ece3d1; --tbm-paper-ink: #1d1103; /* neutral reading */
  /* orange is BUTTONS/CTAs/links/active-tab ONLY — never a panel background below */
  --tbm-btn:       #f97316; --tbm-btn-hi: #ff9142; --tbm-btn-ink: #1d0d02;
  /* ink frame — the 3px line every block is drawn in, regardless of fill */
  --tbm-frame:  #0b1c30;
  --tbm-hair:   rgba(11,28,48,.16);
  /* neutral tear-sheet ground (rails/sub-panels inside a block; NOT a coloured block itself) */
  --tbm-ground: #edeff6;
  --tbm-ground2:#e2e5ef;
  /* dimmed tints, for a nested chip that must carry warning meaning inside a different block */
  --tbm-gold-dim:   rgba(240,165,0,.16);
  --tbm-cobalt-dim: rgba(42,79,196,.10);
  /* grain: one feTurbulence data-URI, reused as a low-opacity overlay layer on every block —
     the depth/texture the CEO asked for, without a network request or a new library */
  --tbm-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  /* type — Inter 900 headline (never serif), Instrument Sans body, JetBrains Mono data */
  --tbm-display: 'Inter', system-ui, sans-serif;
  --tbm-body:    'Instrument Sans', 'Inter', system-ui, sans-serif;
  --tbm-mono:    'JetBrains Mono', ui-monospace, monospace;
  /* ── §DEPTH RECIPE — the one shadow/highlight stack every block below shares ────────────────── */
  --tbm-depth: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -22px 34px -22px rgba(0,0,0,.32), 0 20px 34px -16px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.28);
}
/* the three gradient block fills, each layered: top-left specular highlight + grain + the 2-stop
   brand gradient — this is what makes a "flat fill" read as a physical panel, not a colour swatch */
.tbm-fill-cobalt{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.32), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-cobalt-a), var(--tbm-cobalt-b));
  background-blend-mode: normal, overlay, normal;
}
.tbm-fill-emerald{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.30), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-emerald-a), var(--tbm-emerald-b));
  background-blend-mode: normal, overlay, normal;
}
.tbm-fill-gold{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.55), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-gold-a), var(--tbm-gold-b));
  background-blend-mode: normal, overlay, normal;
}
.tbm-fill-paper{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.6), transparent 55%), var(--tbm-noise), linear-gradient(160deg, var(--tbm-paper-a), var(--tbm-paper-b));
  background-blend-mode: normal, soft-light, normal;
}
/* halftone dot corner — Direction B's one texture device */
.tbm-dots::after{
  content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 64px;
  background-image: radial-gradient(currentColor 1.1px, transparent 1.1px);
  background-size: 7px 7px; opacity: .14; pointer-events: none; mix-blend-mode: multiply;
}
/* embossed numerals — weight + a soft dual-tone shadow, never hurts computed `color` contrast */
.tbm-num-emboss{ text-shadow: 0 1px 0 rgba(255,255,255,.22), 0 -1px 1px rgba(0,0,0,.28); }
.tbm-num-emboss.on-dark{ text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 -1px 0 rgba(255,255,255,.14); }

.tbm-tab{
  display:inline-flex; align-items:center; gap:6px;
  border:1.5px solid currentColor; border-radius:2px;
  padding:4px 9px;
  font:800 10.5px/1 var(--tbm-mono);
  letter-spacing:.1em; text-transform:uppercase;
  background:transparent;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   1 · THE FLOOR
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 1a · AGENCY VALUATION hero — COBALT (money). White/paper text throughout, no exceptions. ──── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.32), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-cobalt-a), var(--tbm-cobalt-b)) !important;
  background-blend-mode: normal, overlay, normal !important;
  border: 3px solid var(--tbm-frame) !important;
  border-radius: 3px !important;
  box-shadow: var(--tbm-depth) !important;
  height: auto !important;
  align-self: start !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox::after{
  content: "";
  position: absolute; top: 0; right: 0; width: 64px; height: 64px;
  background-image: radial-gradient(#fff 1.1px, transparent 1.1px);
  background-size: 7px 7px;
  opacity: .14;
  pointer-events: none;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox > .row{
  background: transparent !important;
  margin: 0 !important;
  padding: 18px 20px 4px !important;
  align-items: center !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .pv-hero-lbl{
  color: var(--tbm-cobalt-ink) !important;
  opacity: .92 !important;
  font: 800 11px/1 var(--tbm-mono) !important;
  letter-spacing: .1em !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .pv-live{ background: #6ad3ff !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .mvc-num--hero{
  color: var(--tbm-cobalt-ink) !important;
  font: 900 clamp(40px,6vw,64px)/.92 var(--tbm-display) !important;
  letter-spacing: -0.02em !important;
  margin-top: 6px !important;
  padding: 0 20px !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 -1px 0 rgba(255,255,255,.10) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .mvc-num--hero .cur{ font-size: .55em !important; opacity: .85; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .pv-pill{
  background: rgba(255,255,255,.12) !important;
  color: var(--tbm-cobalt-ink) !important;
  border: 1.5px solid rgba(255,255,255,.6) !important;
  font: 800 11px/1 var(--tbm-mono) !important;
  padding: 6px 10px !important;
  border-radius: 2px !important;
  white-space: nowrap !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .pv-hero-delta{
  display: flex !important; align-items: baseline !important; gap: 8px !important;
  padding: 12px 20px !important;
  background: rgba(0,0,0,.16) !important;
  border-top: 2px solid rgba(255,255,255,.28) !important;
  margin: 14px 0 0 !important;
  white-space: nowrap !important; overflow: hidden !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .pv-hd-k{
  color: var(--tbm-cobalt-ink) !important; opacity: .8 !important;
  font: 800 11px/1 var(--tbm-mono) !important; letter-spacing: .08em !important;
  text-transform: uppercase !important; flex: 0 0 auto;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .pv-hd-v{
  color: var(--tbm-cobalt-ink) !important;
  font: 700 13.5px/1.3 var(--tbm-body) !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
}
@media (max-width: 480px){
  html body .pv-herochartbox .pv-hero-delta{ white-space: normal !important; }
  html body .pv-herochartbox .pv-hd-v{ white-space: normal !important; text-overflow: clip !important; }
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .pv-herochart-wrap{ padding: 14px 20px 12px !important; margin: 0 !important; min-height: 0 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .pv-herochart,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .pv-herochart--seed{ width: 100% !important; height: 40px !important; display: block !important; overflow: visible !important; }
/* faint gridlines behind the line — a "premium" chart floor, drawn as a repeating background
   on the WRAP behind the (transparent-bg) svg, never touching the SVG's own markup */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .pv-herochart-wrap{
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.10) 0, rgba(255,255,255,.10) 1px, transparent 1px, transparent 20%) !important;
}
/* the endpoint dot gets a glow + the area fill (already a real SVG gradient, authored in
   script-01.js's pvHeroChart()) is left alone — that gradient already exists, untouched */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochart circle:last-of-type,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochart--seed circle:last-of-type{
  filter: drop-shadow(0 0 5px rgba(255,255,255,.85)) drop-shadow(0 0 10px rgba(106,211,255,.65));
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .pv-seed-note{
  margin: 0 !important; padding: 10px 20px 16px !important;
  border-top: 1px solid rgba(255,255,255,.22) !important;
  color: var(--tbm-cobalt-ink) !important; opacity: .85 !important;
  font: 500 12.5px/1.4 var(--tbm-body) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .pv-seed-note b{ color: #fff !important; opacity: 1 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox .pv-distress{ margin: 0 20px 12px !important; }

/* ── 1b · KPI TILES. CASH+VALUATION = cobalt (money). REPUTATION = emerald (progress/good news,
   explicitly named). RUNWAY = gold, ALWAYS (warning, named explicitly). ───────────────────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.30), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-cobalt-a), var(--tbm-cobalt-b)) !important;
  background-blend-mode: normal, overlay, normal !important;
  border: 3px solid var(--tbm-frame) !important;
  border-radius: 3px !important;
  color: var(--tbm-cobalt-ink) !important;
  box-shadow: var(--tbm-depth) !important;
  position: relative;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi.pv-kpi-ring{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.28), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-emerald-a), var(--tbm-emerald-b)) !important;
  background-blend-mode: normal, overlay, normal !important;
  color: var(--tbm-emerald-ink) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi:nth-of-type(4),
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi:last-of-type{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.55), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-gold-a), var(--tbm-gold-b)) !important;
  background-blend-mode: normal, overlay, normal !important;
  color: var(--tbm-gold-ink) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi .pn-eyebrow{
  font: 800 10.5px/1 var(--tbm-mono) !important; letter-spacing: .1em !important;
  color: inherit !important; opacity: .82 !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi .pn-ic{ color: inherit !important; opacity: .78 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi .pn-stat-val{
  font: 900 clamp(24px,2.6vw,32px)/1 var(--tbm-display) !important;
  color: inherit !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi:not(.pv-kpi-ring):not(:nth-of-type(4)) .pn-stat-val{ text-shadow: 0 1px 0 rgba(0,0,0,.32), 0 -1px 0 rgba(255,255,255,.08); }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi .pv-kpi-foot,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi .mvc-trend{ color: inherit !important; opacity: .82 !important; font-weight: 700 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi .pv-ringc b,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi .pv-ringc span{ color: inherit !important; }
/* ring track + progress arc: a soft glow disc behind the ring fakes a gradient stroke without
   touching the SVG (the real stroke stays solid var(--p), which the ring's OWN inline style sets) */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pv-ringwrap{ position: relative; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pv-ringwrap::before{
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 68%);
  filter: blur(5px); pointer-events: none;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pv-ringwrap svg circle:last-of-type{
  filter: drop-shadow(0 0 4px rgba(255,255,255,.7));
}
/* runway pips — gradient fill via rx rounding + per-pip tint (CSS geometry props on SVG-adjacent
   <i> divs are plain block elements, so a real linear-gradient background works directly) */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi .pv-segs i{
  background: linear-gradient(180deg, rgba(29,17,3,.28), rgba(29,17,3,.5)) !important;
  border-radius: 2px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-kpi-row .pn-card.pv-kpi .pv-segs i[style*="good"]{
  background: linear-gradient(180deg, #3a2200, #1d1103) !important;
}

/* ── 1c · "NEEDS YOU MOST" URGENCY (.fl-things/.fl-thing) — GOLD is warning-only; critical items
   get the full gold block, watch items sit on the neutral PAPER reading panel. ─────────────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-things{ display: flex !important; flex-direction: column !important; gap: 10px !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.6), transparent 55%), var(--tbm-noise), linear-gradient(160deg, var(--tbm-paper-a), var(--tbm-paper-b)) !important;
  background-blend-mode: normal, soft-light, normal !important;
  border: 3px solid var(--tbm-frame) !important;
  border-radius: 3px !important;
  box-shadow: var(--tbm-depth) !important;
  padding: 14px 16px !important;
  display: flex !important; align-items: center !important; gap: 12px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing.fl-thing--crit{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.55), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-gold-a), var(--tbm-gold-b)) !important;
  background-blend-mode: normal, overlay, normal !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing.fl-thing--crit .fl-thing__ico{ color: var(--tbm-gold-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing.fl-thing--crit .fl-thing__t b{ color: var(--tbm-gold-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing.fl-thing--crit .fl-thing__t i{ color: var(--tbm-gold-ink) !important; opacity: .78 !important; font-style: normal; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing.fl-thing--watch .fl-thing__ico{ color: var(--tbm-frame) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing.fl-thing--watch .fl-thing__t b{ color: var(--tbm-frame) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing.fl-thing--watch .fl-thing__t i{ color: var(--tbm-frame) !important; opacity: .7 !important; font-style: normal; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing .fl-thing__t b{ font: 800 14px/1.25 var(--tbm-display) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing .rag{
  font: 800 10px/1 var(--tbm-mono) !important; letter-spacing: .09em !important; text-transform: uppercase !important;
  padding: 4px 8px !important; border-radius: 2px !important; border: 1.5px solid currentColor !important;
  background: transparent !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing.fl-thing--crit .rag{ color: var(--tbm-gold-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing.fl-thing--watch .rag{ color: var(--tbm-frame) !important; }
/* CTA — a real button: orange is allowed and correct here */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing .fl-thing__do{
  background: linear-gradient(180deg, var(--tbm-btn-hi), var(--tbm-btn)) !important; color: var(--tbm-btn-ink) !important;
  font: 800 12px/1 var(--tbm-body) !important; border-radius: 3px !important; min-height: 40px !important;
  box-shadow: 0 3px 8px rgba(249,115,22,.35), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
/* the End Week band — a neutral paper panel; the button inside it is the CTA and stays orange */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-week{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.6), transparent 55%), var(--tbm-noise), linear-gradient(160deg, var(--tbm-paper-a), var(--tbm-paper-b)) !important;
  background-blend-mode: normal, soft-light, normal !important;
  border: 3px solid var(--tbm-frame) !important; border-radius: 3px !important;
  box-shadow: var(--tbm-depth) !important;
  color: var(--tbm-paper-ink) !important; padding: 14px 16px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-week .fl-week__t b{ color: var(--tbm-paper-ink) !important; font: 800 14px/1.2 var(--tbm-display) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-week .fl-week__t i{ color: var(--tbm-paper-ink) !important; opacity: .72 !important; font-style: normal; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-week .fl-week__do{
  background: linear-gradient(180deg, var(--tbm-btn-hi), var(--tbm-btn)) !important; color: var(--tbm-btn-ink) !important; border-radius: 3px !important;
  box-shadow: 0 3px 8px rgba(249,115,22,.35), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* ── 1c-ii · THE PRIORITY CARD (.do-now) — critical = gold (warning); calm/on-track = paper. ────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .do-now{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.55), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-gold-a), var(--tbm-gold-b)) !important;
  background-blend-mode: normal, overlay, normal !important;
  border: 3px solid var(--tbm-frame) !important;
  border-radius: 3px !important;
  box-shadow: var(--tbm-depth) !important;
  color: var(--tbm-gold-ink) !important;
  display: flex !important; align-items: center !important; gap: 14px !important;
  padding: 16px 18px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .do-now.calm{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.6), transparent 55%), var(--tbm-noise), linear-gradient(160deg, var(--tbm-paper-a), var(--tbm-paper-b)) !important;
  background-blend-mode: normal, soft-light, normal !important;
  color: var(--tbm-paper-ink) !important;
}
/* the icon needs its OWN explicit ink — `color:inherit` previously fought the calm-state green
   tick and made both states read as a filled dark box (the "black square" the CEO flagged) */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .do-now .dn-ico{
  background: rgba(29,17,3,.14) !important; color: var(--tbm-gold-ink) !important;
  border-radius: 10px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .do-now.calm .dn-ico{
  background: rgba(29,17,3,.10) !important; color: var(--tbm-paper-ink) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .do-now .dn-ico svg{ width: 20px !important; height: 20px !important; display: block !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .do-now .dn-eyebrow{
  font: 800 11px/1 var(--tbm-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important;
  color: inherit !important; opacity: .85 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important;
}
/* the `?` help chip: an explicit ink-on-tint circle, not inherited white-on-white */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .do-now .help-chip{
  background: rgba(29,17,3,.16) !important; color: inherit !important; border-color: transparent !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .do-now .dn-text{
  font: 900 16px/1.25 var(--tbm-display) !important; color: inherit !important; display: block !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .do-now .dn-text small{
  display: block !important; font: 500 12.5px/1.4 var(--tbm-body) !important; opacity: .85 !important; margin-top: 2px !important;
  color: inherit !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .do-now .dn-act{
  background: var(--tbm-frame) !important; color: #fff !important; border-radius: 3px !important;
  font: 800 12.5px/1 var(--tbm-body) !important; min-height: 40px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .do-now .dn-shimmer{ display: none !important; }

/* ── 1d · WAHWAHS INVITE CARD — own approved gold material, untouched; type/frame only. ─────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-ww-invite-card{
  border: 3px solid var(--tbm-frame) !important;
  border-radius: 3px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-ww-invite-card *{ font-family: var(--tbm-body) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-ww-invite-card h2, html body .pn-ww-invite-card h3,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-ww-invite-card b, html body .pn-ww-invite-card strong{ font-family: var(--tbm-display) !important; font-weight: 900 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-ww-invite-cta{ font-family: var(--tbm-body) !important; font-weight: 800 !important; border-radius: 3px !important; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   2 · CLIENTS — THE BOOK OF BUSINESS + ACCOUNT CARDS. Cobalt = money + information.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.6), transparent 55%), var(--tbm-noise), linear-gradient(160deg, var(--tbm-paper-a), var(--tbm-paper-b)) !important;
  background-blend-mode: normal, soft-light, normal !important;
  border: 3px solid var(--tbm-frame) !important;
  border-radius: 3px !important;
  box-shadow: var(--tbm-depth) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1.15fr 1fr !important;
  gap: 0 !important;
  overflow: hidden !important;
}
@media (max-width: 760px){ html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book{ grid-template-columns: 1fr !important; } }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-hero{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.30), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-cobalt-a), var(--tbm-cobalt-b)) !important;
  background-blend-mode: normal, overlay, normal !important;
  color: var(--tbm-cobalt-ink) !important;
  padding: 28px 24px !important;
  display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 6px !important;
  position: relative;
}
/* FOUND ON REVIEW: pn-blockcolour-20260927.css still carries `.s2-book .s2-bk-hero, .s2-book
   .s2-bk-hero *{ -webkit-text-fill-color: #180a02 !important }` from the old orange-block system.
   `-webkit-text-fill-color`, where set, is what Chromium/WebKit actually PAINTS the glyph with —
   it wins over `color` regardless of which one has higher specificity or comes later, so every
   child here was rendering dark ink even though `color` correctly computed to white. Blanket
   override, both properties, every descendant. */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-hero,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-hero *{
  -webkit-text-fill-color: var(--tbm-cobalt-ink) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-hero::after{
  content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 64px;
  background-image: radial-gradient(#fff 1.1px, transparent 1.1px); background-size: 7px 7px; opacity: .14; pointer-events: none;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-eyebrow{
  color: var(--tbm-cobalt-ink) !important; opacity: .88 !important;
  font: 800 11px/1 var(--tbm-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-big, html body .s2-book .s2-bk-big *{
  color: var(--tbm-cobalt-ink) !important;
  -webkit-text-fill-color: var(--tbm-cobalt-ink) !important;
  background-image: none !important;
  font: 900 clamp(40px,5vw,64px)/.92 var(--tbm-display) !important;
  letter-spacing: -0.02em !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 -1px 0 rgba(255,255,255,.10) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-big .cur, html body .s2-book .s2-bk-big em{ font-size: .5em !important; opacity: .85 !important; font-style: normal !important; }
/* CEO: "£60k a week in fees…" was dark-on-blue — this IS .s2-bk-sub; forced white, explicitly */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-sub{
  color: var(--tbm-cobalt-ink) !important; opacity: .92 !important;
  font: 500 13.5px/1.4 var(--tbm-body) !important; max-width: 34ch;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-rail{ background: transparent !important; display: flex !important; flex-direction: column !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-row{
  display: grid !important; grid-template-columns: 1fr auto !important; grid-template-rows: auto auto !important;
  align-items: baseline !important; gap: 2px 12px !important; padding: 14px 22px !important;
  border-top: 1px solid var(--tbm-hair) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-row:first-child{ border-top: 0 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-k{
  grid-column: 1; grid-row: 1; color: var(--tbm-paper-ink) !important; opacity: .62 !important;
  font: 800 11px/1 var(--tbm-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-v{ grid-column: 2; grid-row: 1 / span 2; color: var(--tbm-paper-ink) !important; font: 900 28px/1 var(--tbm-display) !important; align-self: center; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-s{ grid-column: 1; grid-row: 2; color: var(--tbm-paper-ink) !important; opacity: .64 !important; font: 500 12.5px/1.3 var(--tbm-body) !important; }
/* exposure/warning — the ONE place this module turns gold, per the mapping law */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-row.is-bad .s2-bk-v,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book.has-exposure .s2-bk-row:last-child .s2-bk-v{ color: #8a4a00 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book.has-exposure .s2-bk-row:last-child{
  background: var(--tbm-gold-dim) !important; border-left: 4px solid var(--tbm-gold-b) !important; padding-left: 18px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-alert{
  grid-column: 1 / -1;
  background-image: linear-gradient(150deg, var(--tbm-gold-a), var(--tbm-gold-b)) !important;
  color: var(--tbm-gold-ink) !important;
  margin: 0 !important; padding: 12px 22px !important; font: 500 13.5px/1.4 var(--tbm-body) !important; border-radius: 0 !important;
  border-top: 3px solid var(--tbm-frame) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .s2-bk-alert b{ color: var(--tbm-gold-ink) !important; font-weight: 800 !important; }
/* .tac-eyebrow is a GENERIC section-header label reused all over the Clients view, most of it on
   the plain dark page, not inside a block of ours — a blanket dark-ink override here painted those
   invisible (the same class of bug as the .pnsp-k fix elsewhere in this file). Not touched. */

/* ── account cards (.s2-cli) — a neutral paper frame; the STATUS pill carries the semantic colour:
   WARM = emerald (good news), STEADY = cobalt (information), AT RISK = gold (warning). ──────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli{
  border: 3px solid var(--tbm-frame) !important;
  border-radius: 3px !important;
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.6), transparent 55%), var(--tbm-noise), linear-gradient(160deg, var(--tbm-paper-a), var(--tbm-paper-b)) !important;
  background-blend-mode: normal, soft-light, normal !important;
  box-shadow: var(--tbm-depth) !important;
  overflow: hidden !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-cli-status{
  background: linear-gradient(150deg, var(--tbm-emerald-a), var(--tbm-emerald-b)) !important; color: var(--tbm-emerald-ink) !important;
  border: 0 !important; border-radius: 2px !important;
  font: 800 10.5px/1 var(--tbm-mono) !important; letter-spacing: .08em !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-cli-status.warn{ background: linear-gradient(150deg, var(--tbm-cobalt-a), var(--tbm-cobalt-b)) !important; color: var(--tbm-cobalt-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli.at-risk .s2-cli-status{ background: linear-gradient(150deg, var(--tbm-gold-a), var(--tbm-gold-b)) !important; color: var(--tbm-gold-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-cli-sector{
  font: 800 10px/1 var(--tbm-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important;
  border: 1.5px solid #fff !important; border-radius: 2px !important; padding: 4px 8px !important; background: transparent !important; color: #fff !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-cli-open{ background: linear-gradient(150deg, var(--tbm-cobalt-a), var(--tbm-cobalt-b)) !important; color: var(--tbm-cobalt-ink) !important; border-radius: 2px !important; font: 800 12px/1 var(--tbm-body) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-cli-body{ background: transparent !important; }
/* BLANKET INK FORCE — same fault class as the Team card (see its header note): the account
   card's body content inherited dark-theme light/white text (the currency symbol `.cur`, the
   reason score `<b>`, the loyalty direction label) which is invisible on the new paper ground. */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-cli-body,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-cli-body *{ color: var(--tbm-paper-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-cli-fee{ font: 900 24px/1 var(--tbm-display) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-cli-fee em{ font: 500 11px/1 var(--tbm-body) !important; opacity: .6; font-style: normal; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-cli-reason{ font: 500 11.5px/1.3 var(--tbm-body) !important; opacity: .7; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-loy-head{ font: 800 11px/1 var(--tbm-mono) !important; letter-spacing: .07em !important; text-transform: uppercase !important; opacity: .7; }
/* loyalty direction arrow — AA-dark semantic colours, carved out of the blanket */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-loy-dir.up{ color: #0f7a3f !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-loy-dir.dn{ color: #a3271f !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-loy-dir.fl{ opacity: .6 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-cli .s2-cli-alert{
  background: linear-gradient(150deg, var(--tbm-gold-a), var(--tbm-gold-b)) !important; color: var(--tbm-gold-ink) !important; border-radius: 2px !important;
  font: 500 12.5px/1.4 var(--tbm-body) !important; border: 1.5px solid var(--tbm-frame) !important;
}

/* ── the "share of retained book" segmented chart — pn-tearsheet-charts-20260927.js builds ONE
   stacked, gradient, per-account segmented bar + legend into the book-of-business rail. ────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .tbm-rev{ grid-column: 1 / -1; padding: 16px 22px 18px; border-top: 1px solid var(--tbm-hair); }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .tbm-rev-hd{
  display: flex !important; justify-content: space-between !important; align-items: baseline !important;
  font: 800 10.5px/1 var(--tbm-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important;
  color: var(--tbm-paper-ink) !important; opacity: .62 !important; margin-bottom: 8px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .tbm-rev-track{
  display: flex !important; height: 14px !important; border-radius: 4px !important; overflow: hidden !important;
  background: var(--tbm-ground2) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.18) !important;
}
/* FOUND ON REVIEW: `width: 0 !important` here permanently overrode the inline `seg.style.width`
   pn-tearsheet-charts-20260927.js sets to fill each segment — an `!important` stylesheet rule
   always beats a non-important inline style regardless of specificity, so the JS was correctly
   computing and setting "32%" etc. (confirmed via DOM inspection) while the browser painted every
   segment at zero width. No `width` set here at all now; the element's own inline style is the
   only source of truth for it, exactly as the JS intends. */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .tbm-rev-seg{
  height: 100% !important; position: relative !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 5px rgba(0,0,0,.2) !important;
}
@media (prefers-reduced-motion: no-preference){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .tbm-rev-seg{ transition: width .8s cubic-bezier(.22,1,.36,1); }
}
@media (prefers-reduced-motion: reduce){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .tbm-rev-seg{ transition: none !important; }
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .tbm-rev-legend{ display: flex !important; flex-wrap: wrap !important; gap: 10px 16px !important; margin-top: 10px !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .tbm-rev-li{ display: inline-flex !important; align-items: center !important; gap: 6px !important; font: 600 11.5px/1 var(--tbm-body) !important; color: var(--tbm-paper-ink) !important; opacity: .85; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .tbm-rev-sw{ width: 10px !important; height: 10px !important; border-radius: 2px !important; display: inline-block !important; flex: 0 0 auto; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s2-book .tbm-rev-li b{ font: 800 11.5px/1 var(--tbm-mono) !important; opacity: .7; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   3a · TEAM HUB — squad cards + the starting-team window. EMERALD = progress (the roster IS the
   agency's performance). Blanket ink-forces the inherited dark-theme .tt-card text (see header).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.6), transparent 55%), var(--tbm-noise), linear-gradient(160deg, var(--tbm-paper-a), var(--tbm-paper-b)) !important;
  background-blend-mode: normal, soft-light, normal !important;
  border: 3px solid var(--tbm-frame) !important;
  border-radius: 3px !important;
  box-shadow: var(--tbm-depth) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-cardtop{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.28), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-emerald-a), var(--tbm-emerald-b)) !important;
  background-blend-mode: normal, overlay, normal !important;
  color: var(--tbm-emerald-ink) !important;
  border-bottom: 2px solid var(--tbm-frame) !important; padding: 8px 12px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-rank{
  font: 800 10.5px/1 var(--tbm-mono) !important; letter-spacing: .09em !important; color: var(--tbm-emerald-ink) !important; font-style: normal;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card.is-capt .sqd-cardtop{ background: var(--tbm-frame) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card.is-capt .sqd-rank{ color: #fff !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-cond{
  border: 1.5px solid currentColor !important; border-radius: 2px !important; padding: 3px 7px !important;
  font: 800 10px/1 var(--tbm-mono) !important; letter-spacing: .08em !important; font-style: normal;
  color: var(--tbm-emerald-ink) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-foot{ background: transparent !important; }
/* ── BLANKET INK FORCE inside the card body: the inherited dark-theme .tt-card/.sqd-* text was
   white/pale-grey, invisible on the new light ground. Force ink, then carve out AA-dark status
   colours for the few elements that must stay semantic (grade, warn/glad, chips). ─────────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-foot,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-foot *,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-card,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-card *{
  color: var(--tbm-paper-ink) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-name{ font-weight: 900 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-role{ opacity: .68 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-k{ opacity: .58 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-flavor{ opacity: .68 !important; font-style: italic !important; }
/* the OVR rating badge — a data callout, not a navigation "block": emerald (progress), not orange.
   `, .tt-ovr *` is required: the blanket ink-force above targets the EM child DIRECTLY (a universal
   selector still counts as a direct, non-inherited match), and a direct match always beats an
   inherited value regardless of specificity — inheriting emerald-ink from .tt-ovr was not enough. */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-ovr,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-ovr *{
  background: linear-gradient(150deg, var(--tbm-emerald-a), var(--tbm-emerald-b)) !important; color: var(--tbm-emerald-ink) !important;
}
/* the arch/age/ceiling chips sit on the dark photo mug, not the card's paper ground — same
   direct-match exemption, kept white regardless of the blanket ink force. */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-chip,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-chip *{
  color: #fff !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-terms{
  background: rgba(11,28,48,.08) !important; color: var(--tbm-paper-ink) !important; opacity: .8 !important; border-radius: 2px !important;
}
/* FM-style grade colours — AA-dark variants of the existing hi/mid/lo semantic palette */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-v--hi{ color: #0f7a3f !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-v--mid{ color: #8a5209 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-v--lo{ color: #c0392b !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-bar{ background: rgba(11,28,48,.12) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-warn{ background: rgba(192,57,43,.12) !important; color: #a3271f !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .tt-glad{ background: rgba(15,122,63,.12) !important; color: #0c6633 !important; }
/* the meter row (MRL/STM/TNS) — same blanket-then-carve-out */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-m{ color: var(--tbm-paper-ink) !important; opacity: .58 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-m i{ font: 800 10px/1 var(--tbm-mono) !important; opacity: .78; color: var(--tbm-paper-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-m b{ font: 800 13px/1 var(--tbm-display) !important; color: var(--tbm-paper-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-m.is-good b{ color: #0f7a3f !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-m.is-bad b{ color: #c0392b !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-mt{ background: rgba(11,28,48,.12) !important; }
/* TRAIN UP = a real action button → orange is correct here */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-train{
  background: linear-gradient(180deg, var(--tbm-btn-hi), var(--tbm-btn)) !important; color: var(--tbm-btn-ink) !important; border-radius: 3px !important; font: 800 11.5px/1 var(--tbm-body) !important;
  box-shadow: 0 3px 8px rgba(249,115,22,.3), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-train em{ color: var(--tbm-btn-ink) !important; opacity: .82; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .scout-card.squad.sqd-card .sqd-letgo{ background: transparent !important; border: 1.5px solid var(--tbm-frame) !important; color: var(--tbm-frame) !important; border-radius: 3px !important; }

/* the starting-team onboarding window — same emerald progress identity */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .meetteam-stage{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.6), transparent 55%), var(--tbm-noise), linear-gradient(160deg, var(--tbm-paper-a), var(--tbm-paper-b)) !important;
  background-blend-mode: normal, soft-light, normal !important;
  border: 3px solid var(--tbm-frame) !important;
  border-radius: 3px !important;
  box-shadow: var(--tbm-depth) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .meetteam-stage .mt-title{ color: var(--tbm-paper-ink) !important; font: 900 clamp(26px,3.4vw,38px)/1.04 var(--tbm-display) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .meetteam-stage .mt-sub, html body .meetteam-stage .mt-toggle-cap{ color: var(--tbm-paper-ink) !important; opacity: .68 !important; font-family: var(--tbm-body) !important; max-width: 62ch; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .teamsheet .ts-ceo{
  background-image: linear-gradient(150deg, var(--tbm-emerald-a), var(--tbm-emerald-b)) !important; color: var(--tbm-emerald-ink) !important;
  border: 3px solid var(--tbm-frame) !important; border-radius: 3px !important; padding: 10px 16px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .teamsheet .ts-ceo b{ font: 900 17px/1 var(--tbm-display) !important; color: var(--tbm-emerald-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .teamsheet .ts-ceo span{ font: 500 13px/1 var(--tbm-body) !important; color: var(--tbm-emerald-ink) !important; opacity: .82 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .teamsheet .ts-row{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.6), transparent 55%), var(--tbm-noise), linear-gradient(160deg, var(--tbm-paper-a), var(--tbm-paper-b)) !important;
  background-blend-mode: normal, soft-light, normal !important;
  border: 3px solid var(--tbm-frame) !important; border-radius: 3px !important; overflow: hidden !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .teamsheet .ts-dept{
  font: 800 12.5px/1 var(--tbm-mono) !important; letter-spacing: .1em !important; color: var(--tbm-paper-ink) !important;
  background: rgba(31,163,122,.16) !important; border-bottom: 2px solid var(--tbm-frame) !important; padding: 11px 16px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .teamsheet .ts-avg{ color: var(--tbm-paper-ink) !important; opacity: .6 !important; font-family: var(--tbm-body) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .teamsheet .ts-flag{ font: 800 11px/1 var(--tbm-mono) !important; letter-spacing: .07em !important; border-radius: 2px !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .teamsheet .ts-flag.under{ background: linear-gradient(150deg, var(--tbm-gold-a), var(--tbm-gold-b)) !important; color: var(--tbm-gold-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .teamsheet .ts-flag.over{ background: linear-gradient(150deg, var(--tbm-emerald-a), var(--tbm-emerald-b)) !important; color: var(--tbm-emerald-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .teamsheet .ts-chip{
  background: #fff !important; border: 1.5px solid var(--tbm-frame) !important; border-radius: 999px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .teamsheet .ts-chip b{ color: var(--tbm-paper-ink) !important; font-family: var(--tbm-body) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .teamsheet .ts-chip em{ color: #0b5e45 !important; font: 800 13.5px/1 var(--tbm-mono) !important; font-style: normal; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .meetteam-stage .mt-go{
  background: linear-gradient(180deg, var(--tbm-btn-hi), var(--tbm-btn)) !important; color: var(--tbm-btn-ink) !important; border-radius: 3px !important; font: 800 14px/1 var(--tbm-body) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   3b · SEASON PAGE (.pnsp-*) — stand = EMERALD (progress, named explicitly). board = COBALT
   (information). Unmet requirements get a nested GOLD chip. Clock = PAPER (neutral reading).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.30), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-emerald-a), var(--tbm-emerald-b)) !important;
  background-blend-mode: normal, overlay, normal !important;
  color: var(--tbm-emerald-ink) !important;
  border: 3px solid var(--tbm-frame) !important; border-radius: 3px !important; padding: 22px 24px !important;
  box-shadow: var(--tbm-depth) !important;
  position: relative;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand::after{
  content: ""; position: absolute; top: 0; right: 0; width: 64px; height: 64px;
  background-image: radial-gradient(#fff 1.1px, transparent 1.1px); background-size: 7px 7px; opacity: .14; pointer-events: none;
}
/* blanket: everything inside the stand block is white/paper unless carved out below */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand *{ color: var(--tbm-emerald-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-h{ font: 900 clamp(22px,2.6vw,30px)/1.05 var(--tbm-display) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-acc{ text-decoration: underline; text-underline-offset: 3px; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-k{ font: 800 11px/1 var(--tbm-mono) !important; letter-spacing: .1em !important; opacity: .82 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-value-n{ font: 900 clamp(34px,4vw,52px)/1 var(--tbm-display) !important; text-shadow: 0 1px 0 rgba(0,0,0,.32), 0 -1px 0 rgba(255,255,255,.08) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-value-s{ font: 500 12.5px/1.3 var(--tbm-body) !important; opacity: .85 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-step-n{ font: 800 13px/1 var(--tbm-mono) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-step-s{ font: 500 12.5px/1.2 var(--tbm-body) !important; opacity: .78 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-step-dot{ background: #fff !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-need{ border-top-color: rgba(255,255,255,.28) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-req{ background: transparent !important; border-bottom: 1px solid rgba(255,255,255,.22) !important; }
/* met requirement — stays white/paper, tick included (per the newest ruling: white on this dark
   saturated block, always; no green, no dark ink) */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-req.is-pass .pnsp-req-name,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-req.is-pass .pnsp-req-v{ color: #fff !important; opacity: 1 !important; }
/* unmet requirement — the ONE nested warning chip inside this block: solid gold, dark ink */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-req:not(.is-pass){
  background: linear-gradient(150deg, var(--tbm-gold-a), var(--tbm-gold-b)) !important;
  border-radius: 2px !important; padding: 8px 10px !important; margin: 2px 0 !important; border-bottom: 0 !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-req:not(.is-pass) .pnsp-req-name,
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-req:not(.is-pass) .pnsp-req-v{ color: var(--tbm-gold-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-req-bar{ background: rgba(255,255,255,.28) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-stand .pnsp-req.is-pass .pnsp-req-bar i{ background: #fff !important; }

html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-board{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.28), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-cobalt-a), var(--tbm-cobalt-b)) !important;
  background-blend-mode: normal, overlay, normal !important;
  color: var(--tbm-cobalt-ink) !important;
  border: 3px solid var(--tbm-frame) !important; border-radius: 3px !important; padding: 22px 24px !important;
  box-shadow: var(--tbm-depth) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-board .pnsp-h{ color: var(--tbm-cobalt-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-board .pnsp-acc{ color: var(--tbm-cobalt-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-board .pnsp-p{ color: var(--tbm-cobalt-ink) !important; opacity: .88; font-family: var(--tbm-body) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-board .pnsp-k{ color: var(--tbm-cobalt-ink) !important; opacity: .8 !important; }

html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-clock{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.6), transparent 55%), var(--tbm-noise), linear-gradient(160deg, var(--tbm-paper-a), var(--tbm-paper-b)) !important;
  background-blend-mode: normal, soft-light, normal !important;
  border: 3px solid var(--tbm-frame) !important; border-radius: 3px !important; padding: 16px 20px !important;
  box-shadow: var(--tbm-depth) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-eye{ font: 800 10.5px/1 var(--tbm-mono) !important; letter-spacing: .1em !important; color: var(--tbm-paper-ink) !important; opacity: .62 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-lede{ font: 900 clamp(18px,2.2vw,24px)/1.2 var(--tbm-display) !important; color: var(--tbm-paper-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-clock .pnsp-acc{ color: #0b5e45 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-bar{ background: rgba(11,28,48,.14) !important; border-radius: 2px; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-bar > i{ background: linear-gradient(150deg, var(--tbm-emerald-a), var(--tbm-emerald-b)) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-tick.is-done{ background: var(--tbm-emerald-b) !important; }
/* Week 1 / Finale foot labels — were too-light blue-grey on the paper block; darkened for AA */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-clock-foot{ color: rgba(29,17,3,.62) !important; font-weight: 700 !important; }
/* stage-ladder labels — bumped per the CEO's note ("too small") */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-step-n{ font-size: 13px !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-step-s{ font-size: 12.5px !important; }
@media (max-width: 760px){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-step-n{ font-size: 12.5px !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnsp-step-s{ font-size: 11.5px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   3c · FINANCIALS ROOM — summary tiles (.s1-panel). COBALT = money. The "what the street knows"
   read panel (.s1-read) is a neutral reading panel → PAPER, dark ink.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.6), transparent 55%), var(--tbm-noise), linear-gradient(160deg, var(--tbm-paper-a), var(--tbm-paper-b)) !important;
  background-blend-mode: normal, soft-light, normal !important;
  border: 3px solid var(--tbm-frame) !important;
  border-radius: 3px !important;
  color: var(--tbm-paper-ink) !important;
  box-shadow: var(--tbm-depth) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel.s1-panel--accent:not(.s1-read){
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.28), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-cobalt-a), var(--tbm-cobalt-b)) !important;
  background-blend-mode: normal, overlay, normal !important;
  color: var(--tbm-cobalt-ink) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel.s1-panel--accent.s1-read{
  color: var(--tbm-paper-ink) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel .s1-eye{ font: 800 10.5px/1 var(--tbm-mono) !important; letter-spacing: .1em !important; opacity: .72; color: inherit !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel .val{ font: 900 clamp(24px,2.8vw,36px)/1 var(--tbm-display) !important; color: inherit !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-donut-total, html body .s1-cfo-net{ font-family: var(--tbm-display) !important; font-weight: 900 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-donut-legend, html body .s1-donut-sub{ font-family: var(--tbm-body) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel .band-warn{ color: #8a4a00 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .s1-panel .band-bad{ color: #a3271f !important; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   3d · VAULT / STORE — photographic hero art is kept; a cobalt info tab, paper frame ground.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-look-card{
  border: 3px solid var(--tbm-frame) !important;
  border-radius: 3px !important;
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.6), transparent 55%), var(--tbm-noise), linear-gradient(160deg, var(--tbm-paper-a), var(--tbm-paper-b)) !important;
  background-blend-mode: normal, soft-light, normal !important;
  box-shadow: var(--tbm-depth) !important;
  overflow: hidden !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-look-card .pn-look-tag{
  background: linear-gradient(150deg, var(--tbm-cobalt-a), var(--tbm-cobalt-b)) !important; color: var(--tbm-cobalt-ink) !important;
  border-radius: 2px !important; font: 800 10px/1 var(--tbm-mono) !important; letter-spacing: .08em !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-look-card .pn-look-name{ font: 900 15px/1.2 var(--tbm-display) !important; color: var(--tbm-paper-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-look-card .pn-look-price{ font: 800 13px/1 var(--tbm-mono) !important; color: var(--tbm-paper-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-look-card .pn-look-cta{
  background: linear-gradient(180deg, var(--tbm-btn-hi), var(--tbm-btn)) !important; color: var(--tbm-btn-ink) !important; border-radius: 3px !important; font: 800 12px/1 var(--tbm-body) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-spend-hero{
  border: 3px solid var(--tbm-frame) !important; border-radius: 3px !important; overflow: hidden !important;
  box-shadow: var(--tbm-depth) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   4 · PITCH BRIEF WINDOW + "THE CLIENT IS WAITING." pre-room.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-win{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.6), transparent 55%), var(--tbm-noise), linear-gradient(160deg, var(--tbm-paper-a), var(--tbm-paper-b)) !important;
  background-blend-mode: normal, soft-light, normal !important;
  border: 3px solid var(--tbm-frame) !important; border-radius: 3px !important; color: var(--tbm-paper-ink) !important;
  box-shadow: var(--tbm-depth) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-hero{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.28), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-cobalt-a), var(--tbm-cobalt-b)) !important;
  background-blend-mode: normal, overlay, normal !important;
  color: var(--tbm-cobalt-ink) !important; min-height: 160px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-stamp{
  background: rgba(255,255,255,.14) !important; color: var(--tbm-cobalt-ink) !important; border: 1.5px solid rgba(255,255,255,.6) !important;
  border-radius: 2px !important; font: 800 11px/1 var(--tbm-mono) !important; letter-spacing: .1em !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-hd{ font: 900 clamp(26px,3vw,36px)/1.02 var(--tbm-display) !important; color: var(--tbm-cobalt-ink) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps{ background: var(--tbm-ground2) !important; border: 1px solid var(--tbm-hair) !important; border-radius: 2px !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b{ font: 700 11px/1 var(--tbm-mono) !important; color: var(--tbm-frame) !important; opacity: .55; }
/* the CURRENT stage marker — this IS "the active-tab marker" the colour law names: orange, correctly */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b.on{
  background: linear-gradient(180deg, var(--tbm-btn-hi), var(--tbm-btn)) !important; color: var(--tbm-btn-ink) !important; font-weight: 800 !important; opacity: 1; border-radius: 2px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-steps b.done{ color: var(--tbm-frame) !important; opacity: .78; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-ask{
  background: var(--tbm-cobalt-dim) !important; border-left: 4px solid var(--tbm-cobalt-b) !important; border-radius: 2px !important; padding: 18px 20px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-ask .pn-stamp > b{ color: var(--tbm-cobalt-b) !important; font: 800 12px/1 var(--tbm-mono) !important; letter-spacing: .08em !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-ask-line{ font: 900 clamp(20px,2.4vw,28px)/1.15 var(--tbm-display) !important; color: var(--tbm-frame) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-rule i{ font: 800 11px/1 var(--tbm-mono) !important; letter-spacing: .08em !important; color: var(--tbm-frame) !important; opacity: .6; font-style: normal; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-bg{ color: var(--tbm-frame) !important; opacity: .68; font-family: var(--tbm-body) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-term{ background: var(--tbm-ground2) !important; border-radius: 2px !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-term > i{ color: var(--tbm-frame) !important; opacity: .6; font: 800 11px/1 var(--tbm-mono) !important; font-style: normal; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-term > b{ color: var(--tbm-frame) !important; font-family: var(--tbm-display) !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-foot{ background: transparent !important; border-top: 2px solid var(--tbm-frame) !important; }
/* the primary CTA — orange is correct: it is a button */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .lg-btn--primary{
  background: linear-gradient(180deg, var(--tbm-btn-hi), var(--tbm-btn)) !important; color: var(--tbm-btn-ink) !important; border-radius: 3px !important; font: 800 13.5px/1 var(--tbm-body) !important;
}
/* the SECONDARY action ("Just pitch it") — a real button too, but visually quieter: a neutral
   ink-outline, not a second colour block competing with the primary orange */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat .pnp2-ctrl--fast{
  background: transparent !important; border: 1.5px solid var(--tbm-frame) !important; color: var(--tbm-frame) !important; border-radius: 3px !important; font: 800 12.5px/1 var(--tbm-mono) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body #pnp2-beat [data-p2closectrl]{ background: transparent !important; border: 1.5px solid var(--tbm-frame) !important; color: var(--tbm-frame) !important; border-radius: 3px !important; }

/* THE CLIENT IS WAITING — pre-room, cobalt information block */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-preroom .pitch-bgstrip-bleed{ display: none !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-preroom .pn-preroom-head{
  background-image: radial-gradient(130% 150% at 12% -18%, rgba(255,255,255,.28), transparent 55%), var(--tbm-noise), linear-gradient(150deg, var(--tbm-cobalt-a), var(--tbm-cobalt-b)) !important;
  background-blend-mode: normal, overlay, normal !important;
  border: 3px solid var(--tbm-frame) !important; border-radius: 3px !important; padding: 22px 26px !important;
  box-shadow: var(--tbm-depth) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-preroom .pn-preroom-kick{
  display: inline-flex !important; background: rgba(255,255,255,.14) !important; color: var(--tbm-cobalt-ink) !important;
  border: 1.5px solid rgba(255,255,255,.6) !important; padding: 5px 10px !important; border-radius: 2px !important;
  font: 800 11px/1 var(--tbm-mono) !important; letter-spacing: .09em !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-preroom .pn-preroom-h:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2){
  font: 900 clamp(28px,4vw,44px)/1.04 var(--tbm-display) !important;
  color: var(--tbm-cobalt-ink) !important; margin-top: 10px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-preroom .pn-preroom-sub{ color: var(--tbm-cobalt-ink) !important; opacity: .88 !important; font-family: var(--tbm-body) !important; margin-top: 6px !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-preroom .pn-lap-stage{
  background: var(--tbm-frame) !important; border: 3px solid var(--tbm-frame) !important; border-radius: 8px !important;
  padding: 28px 20px 22px !important; margin-top: 18px !important;
}
/* the connecting indicator is status, not a CTA — a quiet ink chip, not a colour block */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-preroom .pn-preroom-cta{ background: rgba(11,28,48,.9) !important; border: 3px solid var(--tbm-frame) !important; border-radius: 2px !important; padding: 12px 18px !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-preroom .ppc-label{ font: 800 12px/1 var(--tbm-mono) !important; letter-spacing: .06em !important; color: #fff !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-preroom .ppc-dot{ background: #fff !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-preroom .ppc-ell i{ background: #fff !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-preroom #bail.pn-btn--ghost{
  background: #fff !important; color: var(--tbm-frame) !important; border: 1.5px solid var(--tbm-frame) !important;
  font-weight: 800 !important; min-height: 40px !important; border-radius: 3px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pn-preroom #bail.pn-btn--ghost:hover{ background: #fff !important; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   5 · CHARTS ANIMATE + PREMIUM DETAIL. Reuses the game's OWN reveal system (pn-motion.js adds
   `.pn-shown` via IntersectionObserver; the pieces below had no existing motion — see the file's
   earlier revision notes). Depth added via drop-shadow glow + rx rounding, CSS-only.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox:not(.pn-shown) .pv-herochart,
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox:not(.pn-shown) .pv-herochart--seed{ clip-path: inset(0 100% 0 0); }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox.pn-shown .pv-herochart,
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox.pn-shown .pv-herochart--seed{
    clip-path: inset(0 0% 0 0); transition: clip-path .85s cubic-bezier(.22,1,.36,1);
  }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox:not(.pn-shown) .pv-herochart circle,
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox:not(.pn-shown) .pv-herochart--seed circle{
    opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center;
  }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox.pn-shown .pv-herochart circle,
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochartbox.pn-shown .pv-herochart--seed circle{
    opacity: 1; transform: scale(1); transform-box: fill-box; transform-origin: center;
    transition: opacity .4s ease .75s, transform .5s cubic-bezier(.34,1.56,.64,1) .75s;
  }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi:not(.pn-shown) .mvc-spk rect{ transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .mvc-spk rect{
    transform: scaleY(1); transform-box: fill-box; transform-origin: bottom; rx: 1.5px;
    transition: transform .5s cubic-bezier(.22,1,.36,1);
  }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .mvc-spk rect:nth-child(1){ transition-delay: .02s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .mvc-spk rect:nth-child(2){ transition-delay: .06s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .mvc-spk rect:nth-child(3){ transition-delay: .10s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .mvc-spk rect:nth-child(4){ transition-delay: .14s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .mvc-spk rect:nth-child(5){ transition-delay: .18s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .mvc-spk rect:nth-child(6){ transition-delay: .22s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .mvc-spk rect:nth-child(7){ transition-delay: .26s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .mvc-spk rect:nth-child(8){ transition-delay: .30s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .mvc-spk rect:nth-child(n+9){ transition-delay: .34s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi:not(.pn-shown) .pv-ringwrap svg{ opacity: 0; transform: scale(.72); transform-origin: center; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-ringwrap svg{
    opacity: 1; transform: scale(1); transform-origin: center;
    transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
  }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi:not(.pn-shown) .pv-segs i{ transform: scaleY(0); transform-origin: bottom; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-segs i{ transform: scaleY(1); transform-origin: bottom; transition: transform .38s cubic-bezier(.22,1,.36,1); }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-segs i:nth-child(1){ transition-delay: .02s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-segs i:nth-child(2){ transition-delay: .05s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-segs i:nth-child(3){ transition-delay: .08s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-segs i:nth-child(4){ transition-delay: .11s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-segs i:nth-child(5){ transition-delay: .14s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-segs i:nth-child(6){ transition-delay: .17s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-segs i:nth-child(7){ transition-delay: .20s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-segs i:nth-child(8){ transition-delay: .23s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-segs i:nth-child(9){ transition-delay: .26s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-segs i:nth-child(10){ transition-delay: .29s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-segs i:nth-child(11){ transition-delay: .32s; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-kpi.pn-shown .pv-segs i:nth-child(n+12){ transition-delay: .35s; }
}
@media (prefers-reduced-motion: reduce){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochart, html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochart--seed,
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochart circle, html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-herochart--seed circle,
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .mvc-spk rect, html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-ringwrap svg,
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pv-segs i{
    transition: none !important; clip-path: none !important; transform: none !important; opacity: 1 !important;
  }
}

/* ── PHONE: the urgency card and the End-week band stack (2026-09-27 lead QA) ─────────────────────
   At 390px the title, the WATCH chip and the button shared one row and the title wrapped to six
   lines in a 60px column. Below 600px the title takes the full row; chip + action drop beneath it. */
@media (max-width: 600px){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing{ flex-wrap: wrap !important; row-gap: 10px !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing .fl-thing__t{ flex: 1 1 calc(100% - 56px) !important; min-width: 0 !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing .fl-thing__do{ margin-left: auto !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-week{ flex-wrap: wrap !important; row-gap: 10px !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-week > :first-child{ flex: 1 1 100% !important; min-width: 0 !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-week .fl-week__do{ margin-left: auto !important; }
}

/* ── ACTIONS SIT RIGHT (CEO 2026-09-27: "these buttons should be right aligned") ──────────────────
   The title column takes the free space, so the WATCH chip and the action button always sit hard
   against the card's right edge, whatever the title length. Same for the End-week band. */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing .fl-thing__t{ flex: 1 1 auto !important; min-width: 0 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing .rag{ margin-left: auto !important; flex: 0 0 auto !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing .fl-thing__do{ flex: 0 0 auto !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-week > :first-child{ flex: 1 1 auto !important; min-width: 0 !important; }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-week .fl-week__do{ margin-left: auto !important; flex: 0 0 auto !important; }
@media (max-width: 600px){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing .fl-thing__t{ flex: 1 1 calc(100% - 56px) !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-thing .rag{ margin-left: 0 !important; }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .fl-week > :first-child{ flex: 1 1 100% !important; }
}