/* Extracted from play.html by tools/split_play.py — INFRA.
   Linked at the SAME position the <style> block occupied: this sheet's cascade order
   is load-bearing, including several deliberate late overrides. */

  /* accent-as-type: the brand orange is 2.9:1 on the porcelain panel, so type NEVER uses raw --accent.
     Two hand-measured inks instead — one per ground. Raw --accent stays a FILL (spine, meter, rule). */
  .pnac{ --pnac-p-ink:#ffb27f; --pnac-scrim:rgba(4,7,12,.88); }
  body.mvc-light .pnac{ --pnac-p-ink:#9a3d05; --pnac-scrim:rgba(26,18,10,.72); }
  /* SEMANTIC CHIPS — measured, per theme. The dark reds/greens are BRIGHT (salmon #ff6a55 is 2.8:1
     under white), the light ones are DEEP (#1f8a4c is 4.3:1 under white and 3.9:1 as ink) — neither
     survives a single ink. Dark theme = saturated fill + near-black ink; light theme = a pale tint of
     the same semantic + its own deep ink, which also keeps the legacy
     `…v-clients .s2-cli-status{color:#06111d !important}` pin legible instead of fighting it. */
  .pnac,.s2-cli,.s2-camp{ --chip-good:#3fd68f; --chip-warn:#ffb86b; --chip-bad:#ff6a55; --chip-ink:#06111d; }
  body.mvc-light .pnac,body.mvc-light .s2-cli,body.mvc-light .s2-camp{
    --chip-good:#cfe9d8; --chip-warn:#f7e2c2; --chip-bad:#f8d6d0; --chip-ink:#2a1109; }
  /* the same fix on the account CARD's status chip + the campaign due tag (same page, same defect) */
  .s2-cli-status{ background:var(--chip-good); color:var(--chip-ink); }
  .s2-cli-status.warn{ background:var(--chip-warn); } .s2-cli-status.bad{ background:var(--chip-bad); color:var(--chip-ink); }
  .s2-camp-due{ background:var(--chip-good); color:var(--chip-ink); }
  .s2-camp.amber .s2-camp-due{ background:var(--chip-warn); } .s2-camp.red .s2-camp-due{ background:var(--chip-bad); color:var(--chip-ink); }

  /* ══════════ TYPE ROLES — OWNED BY THIS COMPONENT (2026-07-31 rebuild) ══════════
     Every type declaration below names its role explicitly instead of inheriting. That is the
     defence against the office-view element catch-alls that flattened this file's hierarchy
     (see the TYPE CATCH-ALL note at the office skin). Three roles, real contrast:
       DISPLAY = Inter 900 italic uppercase (SST §2 display voice) — the file name, once.
       DATA    = Inter 900 upright, tabular — every number.
       LABEL   = JetBrains Mono 900 uppercase wide-tracked (SST motif 8) — every section head,
                 stamp, flag and unit. Both faces are self-hosted, so no CDN can take them away. */
  .pnac{ --pnac-disp:'Inter',system-ui,sans-serif; --pnac-sans:'Inter',system-ui,sans-serif;
         --pnac-mono:var(--mono),ui-monospace,monospace;
         /* ONE spacing scale for the whole file — 4-based, no ad-hoc values */
         --pnac-1:4px; --pnac-2:8px; --pnac-3:12px; --pnac-4:16px; --pnac-5:24px; --pnac-6:32px;
         --pnac-sec:30px;                       /* the vertical rhythm between numbered sections */
         --pnac-gut:clamp(16px,2.4vw,30px); }
  .pnac{ position:fixed; inset:0; z-index:10090; display:flex; align-items:center; justify-content:center;
    padding:20px; font-family:var(--pnac-sans); }
  .pnac-scrim{ position:absolute; inset:0; background:var(--pnac-scrim);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); animation:pnacFade .2s ease both; }
  .pnac-win{ position:relative; z-index:2; width:min(1140px,94vw); max-height:90vh; display:flex; flex-direction:column;
    background:var(--s2-panel,linear-gradient(178deg,#101a28,#0a0f18)); color:var(--s2-ink,#eef4fc);
    border:1px solid var(--s2-hair,rgba(140,170,210,.2)); border-radius:4px; overflow:hidden;
    box-shadow:0 54px 140px -34px rgba(0,0,0,.86); animation:pnacRise .34s cubic-bezier(.2,.8,.25,1) both; }
  @keyframes pnacFade{ from{opacity:0} to{opacity:1} }
  @keyframes pnacRise{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
  @media (prefers-reduced-motion:reduce){ .pnac-scrim,.pnac-win{ animation:none } }

  /* ── STICKY HEADER (top close ✕ + the mac dot, per FINDER-WINDOW LAW) ──
     The identity band carries the account's own SECTOR STILL, graded under a hard scrim — the same
     photographic identity the card wears, so the file and the card are visibly the same object.
     Ink here is PINNED LIGHT in both themes (the s2 doctrine for type over imagery). */
  .pnac-head{ position:relative; flex:none; background:var(--s2-slab,#0b1c30) center/cover no-repeat;
    border-bottom:1px solid var(--s2-hair,rgba(140,170,210,.2)); }
  .pnac-head::before{ content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(100deg,rgba(6,10,17,.95) 38%,rgba(6,10,17,.74) 72%,rgba(6,10,17,.55)); }
  .pnac-head>*{ position:relative; z-index:1; }
  .pnac-head>.lg-titlebar{ margin:0; padding:9px 14px;
    --lg-tb-bg:rgba(0,0,0,.28); --lg-tb-border:rgba(255,255,255,.14); --lg-tb-ink:rgba(255,255,255,.72); }
  /* the identity band is a GRID, not a flex row: mark · name-stack · status · close. The meta line
     runs under the name inside its own cell, so a long brand name grows the stack instead of
     wrapping the status chip onto a stranded second row (Layout Law §3). */
  .pnac-id{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center;
    gap:var(--pnac-2) var(--pnac-4); padding:var(--pnac-4) var(--pnac-gut) calc(var(--pnac-4) + 2px); }
  .pnac-head .pnac-name{ color:#fff !important; text-shadow:0 2px 14px rgba(0,0,0,.65); }
  .pnac-head .pnac-eye,.pnac-head .pnac-meta{ color:rgba(255,255,255,.82) !important; }
  .pnac-head .pnac-mark{ background:rgba(0,0,0,.45); }
  .pnac .pnac-head .pnac-x{ --mvc-fg:#fff; --mvc-fg-70:rgba(255,255,255,.82);
    color:#fff; border-color:rgba(255,255,255,.5); background:rgba(0,0,0,.4); }
  .pnac .pnac-head .pnac-x:hover{ color:#fff; border-color:var(--accent,#f97316); background:rgba(0,0,0,.6); }
  .pnac-mark{ flex:none; width:56px; height:56px; display:flex; align-items:center; justify-content:center;
    font-family:var(--pnac-disp); font-weight:900; font-style:italic; font-size:18px; letter-spacing:-.03em;
    color:#fff; background:var(--s2-slab,#0b1c30);
    border:1px solid rgba(255,255,255,.16); clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%); }
  .pnac-idt{ min-width:0; }
  .pnac-eye{ display:block; font-family:var(--pnac-mono); font-size:9px; font-weight:800; letter-spacing:.24em;
    text-transform:uppercase; color:var(--s2-dim,#93a6bd); }
  /* THE ONE LOUD TYPOGRAPHIC MOMENT — the display voice (Inter 900 italic uppercase, SST §2), sized
     with conviction so the file name outranks every number on the screen. It was 21px and lost to a
     19px stat. Declared face + weight + case here, so no view-level catch-all can restate it. */
  .pnac-name{ margin:2px 0 3px; font-family:var(--pnac-disp) !important; font-size:clamp(25px,3.3vw,42px) !important;
    font-weight:900 !important; font-style:italic !important; text-transform:uppercase !important;
    letter-spacing:-.035em !important; line-height:.92 !important; text-wrap:balance;
    color:var(--s2-ink,#eef4fc) !important; }
  .pnac-meta{ display:block; font-family:var(--pnac-mono); font-size:9.5px; font-weight:700; letter-spacing:.13em;
    text-transform:uppercase; color:var(--s2-dim,#93a6bd); }
  .pnac-status{ flex:none; font-family:var(--pnac-mono); font-size:10px; font-weight:900; letter-spacing:.12em;
    color:var(--chip-ink); background:var(--chip-good); padding:6px 11px; border-radius:1px; align-self:center; }
  .pnac-status.is-warn{ background:var(--chip-warn); } .pnac-status.is-bad{ background:var(--chip-bad); }
  .pnac .pnac-x{ flex:none; gap:8px; }

  /* ── SCROLL BODY ── */
  .pnac-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:var(--pnac-5) var(--pnac-gut) var(--pnac-6); }
  /* SECTION HEAD — the mono tactical label (SST motif 8). The index is a filed stamp, not a prefix:
     it sits in its own accent-ruled slab so "01" and the label never optically merge. */
  .pnac-h{ display:flex; align-items:center; gap:var(--pnac-3); margin:0 0 var(--pnac-3);
    font-family:var(--pnac-mono) !important; font-size:10px !important; font-weight:900 !important;
    letter-spacing:.22em !important; text-transform:uppercase !important; font-style:normal !important;
    color:var(--s2-ink,#eef4fc) !important; }
  /* accent-fill ink law (SST §5f corollary): the light theme's deep burnt-orange takes WHITE ink,
     the dark theme's bright orange takes near-black. Measured both ways, never one ink for both. */
  .pnac-h .n{ font-family:var(--pnac-mono); font-size:9px; font-weight:900; letter-spacing:.1em;
    color:#07080c; background:var(--accent,#f97316); padding:3px 6px; border-radius:1px; }
  body.mvc-light .pnac-h .n{ color:#fff; }
  .pnac-h::after{ content:""; flex:1 1 auto; height:2px; background:var(--s2-hair,rgba(140,170,210,.2)); }
  /* the rail is ANNOTATION, not file body — an accent tick instead of a filed number, so the two
     columns are typographically different objects rather than the same header repeated six times */
  .pnac-h--rail::before{ content:""; width:18px; height:2px; background:var(--accent,#f97316); flex:none; }

  /* ══ HERO — the ONE loud object: loyalty as a machined instrument strip ══
     ALTERNATION LAW (SST §5f): an instrument strip is chrome. On a LIGHT file it goes DARK; on a
     DARK file it goes to the machined pale slate. Same shared --rail-* token set as .s2-htabs /
     .s2-scrub / the floor rhythm — this strip is the same object, not a new one. */
  body.mvc-light .pnac-hero{
    --rail-bg:linear-gradient(180deg,#132743,#0b1c30); --rail-ink:#e9f0fb;
    --rail-ink-dim:rgba(233,240,251,.68); --rail-hair:rgba(233,240,251,.18); --rail-edge:rgba(0,0,0,.5);
    --rail-lift:0 1px 0 rgba(233,240,251,.1) inset,0 18px 34px -22px rgba(9,16,28,.85);
    --rail-track:rgba(233,240,251,.14); }
  body:not(.mvc-light) .pnac-hero{
    --rail-bg:linear-gradient(180deg,#e3e9f2,#d3dbe7); --rail-ink:#0b1c30;
    --rail-ink-dim:rgba(11,28,48,.76); --rail-hair:rgba(11,28,48,.2); --rail-edge:rgba(6,11,20,.7);
    --rail-lift:0 1px 0 rgba(255,255,255,.85) inset,0 18px 36px -20px rgba(0,0,0,.75);
    --rail-track:rgba(11,28,48,.14); }
  .pnac-hero{ position:relative; background:var(--rail-bg); color:var(--rail-ink);
    border:1px solid var(--rail-edge); border-left:4px solid var(--accent,#f97316);
    box-shadow:var(--rail-lift);
    padding:var(--pnac-5) var(--pnac-5) 0; display:grid; gap:0 var(--pnac-6);
    grid-template-columns:auto minmax(220px,1fr); grid-template-areas:"num meter" "facts facts";
    clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%); }
  .pnac-loy{ grid-area:num; }
  .pnac-loyk{ display:block; font-family:var(--pnac-mono); font-size:9px; font-weight:900; letter-spacing:.24em;
    text-transform:uppercase; color:var(--rail-ink-dim); margin-bottom:var(--pnac-2); }
  .pnac-loyval{ display:flex; align-items:flex-end; gap:var(--pnac-3); }
  .pnac-loyn{ font-family:var(--pnac-sans); font-size:clamp(58px,8vw,92px); font-weight:900; letter-spacing:-.055em;
    line-height:.78; font-variant-numeric:tabular-nums; color:var(--rail-ink); }
  .pnac-loyn sub{ font-family:var(--pnac-mono); font-size:.2em; font-weight:800; letter-spacing:.1em;
    vertical-align:baseline; color:var(--rail-ink-dim); }
  .pnac-dir{ font-family:var(--pnac-mono); font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
    padding-bottom:var(--pnac-2); white-space:nowrap; }
  .pnac-dir.is-up{ color:var(--rail-good,#12703d); } .pnac-dir.is-dn{ color:var(--rail-bad,#b0261a); }
  .pnac-dir.is-fl{ color:var(--rail-ink-dim); }
  body.mvc-light .pnac-dir.is-up{ color:#3ddc84; } body.mvc-light .pnac-dir.is-dn{ color:#ff8a72; }
  .pnac-meter{ grid-area:meter; position:relative; align-self:center; margin:var(--pnac-5) 0 0; }
  .pnac-track{ position:relative; height:18px; background:var(--rail-track);
    border:1px solid var(--rail-hair); overflow:hidden; }
  .pnac-track i{ display:block; height:100%; width:0; transition:width .82s cubic-bezier(.2,.8,.25,1);
    background:linear-gradient(90deg,#1f9d5a,#3fd68f); }
  .pnac-meter.is-warn .pnac-track i{ background:linear-gradient(90deg,#a86a17,#ffb86b); }
  .pnac-meter.is-bad .pnac-track i{ background:linear-gradient(90deg,#8c2f24,#ff6a55); }
  .pnac-meter.is-on .pnac-track i{ width:var(--fill,0%); }
  @media (prefers-reduced-motion:reduce){ .pnac-track i{ transition:none } }
  /* the bespoke bit: a ruled annotation at 40 — the line the sim actually uses for re-pitch risk.
     It hangs BELOW the track on its own baseline so it can never collide with the scale ends. */
  /* height is EXPLICIT (track 18px + 7px of overhang each end). `bottom:-7px` measured against
     .pnac-meter, which also contains the scale row, so the tick used to run down through
     "THEY WALK". A tick is an annotation on the track, not on the block. */
  .pnac-mark40{ position:absolute; left:40%; top:-7px; height:32px; width:2px; background:var(--rail-ink); opacity:.6; }
  /* the annotation hangs ABOVE the track and the scale ends sit BELOW it — three separate baselines,
     so the tick label can never land on the scale row or on the ledger rule beneath it */
  .pnac-mark40::after{ content:"RE-PITCH LINE · 40"; position:absolute; left:7px; bottom:calc(100% + 3px); white-space:nowrap;
    font-family:var(--pnac-mono); font-size:8px; font-weight:800; letter-spacing:.14em; color:var(--rail-ink-dim); }
  .pnac-scale{ display:flex; justify-content:space-between; margin-top:var(--pnac-3); font-family:var(--pnac-mono);
    font-size:8.5px; font-weight:800; letter-spacing:.16em; color:var(--rail-ink-dim); }
  /* the four facts are a LEDGER across the foot of the instrument — ruled cells, not a floating 2×2 */
  .pnac-facts{ grid-area:facts; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
    margin-top:var(--pnac-5); border-top:1px solid var(--rail-hair); }
  .pnac-fact{ padding:var(--pnac-4) var(--pnac-5) var(--pnac-5); border-left:1px solid var(--rail-hair); min-width:0; }
  .pnac-fact:first-child{ border-left:0; padding-left:0; }
  .pnac-fact b{ display:block; font-family:var(--pnac-sans); font-size:24px; font-weight:900; letter-spacing:-.035em;
    font-variant-numeric:tabular-nums; color:var(--rail-ink); line-height:1; }
  .pnac-fact span{ display:block; margin-top:var(--pnac-2); font-family:var(--pnac-mono); font-size:8.5px; font-weight:800;
    letter-spacing:.16em; text-transform:uppercase; color:var(--rail-ink-dim); }
  .pnac-fact.is-bad b{ color:#ff6a55; }
  body.mvc-light .pnac-fact.is-bad b{ color:#ff8a72; }

  /* the asymmetric body: a wide read column and a narrow people rail, separated by a real column
     rule (an editorial rule, not a second card) */
  /* stretch, not start: the rail's column rule must run the FULL height of the band. Left to
     `start` it stopped where the contacts ledger ended and left an orphaned line hanging in the
     middle of the page (UX_RULES §3 — stray fragments are kill-on-sight). */
  .pnac-grid{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:0 var(--pnac-6);
    margin-top:var(--pnac-sec); align-items:stretch; }
  .pnac-col{ display:flex; flex-direction:column; gap:var(--pnac-sec); min-width:0; }
  .pnac-grid>aside.pnac-col{ padding-left:var(--pnac-6); border-left:1px solid var(--s2-hair,rgba(140,170,210,.2)); }

  /* WORD ON THE STREET — a pull quote, not a card */
  .pnac-street{ position:relative; padding:2px 0 0 var(--pnac-5); border-left:3px solid var(--accent,#f97316); }
  .pnac-street p{ margin:0; font-family:var(--pnac-sans); font-size:clamp(16px,1.6vw,20px); line-height:1.42;
    font-weight:600; letter-spacing:-.014em; color:var(--s2-ink,#eef4fc); text-wrap:balance; max-width:44ch; }
  .pnac-street .coach{ margin-top:var(--pnac-3); font-size:13.5px; font-weight:500; line-height:1.55; color:var(--s2-dim,#726757); }
  body:not(.mvc-light) .pnac-street .coach{ color:#b6c6da; }
  .pnac-street .src{ display:block; margin-top:var(--pnac-3); font-family:var(--pnac-mono); font-size:8.5px; font-weight:800;
    letter-spacing:.18em; text-transform:uppercase; color:var(--pnac-p-ink); }

  /* LATEST ACTIVITY — a ruled tape, mono stamps left, flags in a FIXED right column so the
     right edge is a straight line instead of four ragged chips */
  .pnac-tape{ display:flex; flex-direction:column; }
  .pnac-row{ display:grid; grid-template-columns:82px minmax(0,1fr) 96px; gap:var(--pnac-3); align-items:baseline;
    padding:var(--pnac-3) 0; border-bottom:1px solid var(--s2-hair-2,rgba(140,170,210,.12)); }
  .pnac-row:last-child{ border-bottom:0; }
  .pnac-stamp{ font-family:var(--pnac-mono); font-size:9px; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; color:var(--s2-dim,#93a6bd); }
  .pnac-row b{ font-family:var(--pnac-sans); font-size:14px; font-weight:800; letter-spacing:-.01em; color:var(--s2-ink,#eef4fc); }
  .pnac-row i{ display:block; font-style:normal; font-size:12.5px; line-height:1.45; color:var(--s2-dim,#93a6bd); margin-top:3px; }
  .pnac-flag{ justify-self:end; font-family:var(--pnac-mono); font-size:8.5px; font-weight:900; letter-spacing:.1em; white-space:nowrap;
    padding:3px 7px; border-radius:1px; background:var(--s2-hair-2,rgba(140,170,210,.12)); color:var(--s2-ink,#eef4fc); }
  .pnac-flag.is-good{ background:var(--chip-good); color:var(--chip-ink); }
  .pnac-flag.is-warn{ background:var(--chip-warn); color:var(--chip-ink); }
  .pnac-flag.is-bad{ background:var(--chip-bad); color:var(--chip-ink); }

  /* SWOT — a four-column LEDGER ruled by hairlines, not four uniform bordered cards. (The card wall
     is the AI-panel tell UX_RULES §12 bans; the semantic colour now lives in each column's tick.) */
  .pnac-swotsec{ margin-top:var(--pnac-sec); }
  .pnac-swot{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0;
    border-top:1px solid var(--s2-hair,rgba(140,170,210,.2)); }
  @media(min-width:940px){ .pnac-swot{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
  @media(max-width:560px){ .pnac-swot{ grid-template-columns:1fr; } }
  .pnac-quad{ padding:var(--pnac-4) var(--pnac-5) var(--pnac-5); border-left:1px solid var(--s2-hair-2,rgba(140,170,210,.12)); min-width:0; }
  .pnac-quad:first-child{ border-left:0; padding-left:0; }
  @media(max-width:939px){ .pnac-quad:nth-child(3){ border-left:0; padding-left:0; } }
  @media(max-width:560px){ .pnac-quad{ border-left:0; padding-left:0;
      border-top:1px solid var(--s2-hair-2,rgba(140,170,210,.12)); } .pnac-quad:first-child{ border-top:0; } }
  .pnac-quad h5{ display:flex; align-items:center; gap:var(--pnac-2); margin:0 0 var(--pnac-3);
    font-family:var(--pnac-mono) !important; font-size:9px !important; font-weight:900 !important; letter-spacing:.2em !important;
    text-transform:uppercase !important; color:var(--s2-dim,#93a6bd) !important; }
  .pnac-quad h5::before{ content:""; width:12px; height:3px; flex:none; background:var(--s2-dim,#93a6bd); }
  .pnac-quad.is-s h5::before{ background:var(--s2-good,#3fd68f); }
  .pnac-quad.is-w h5::before{ background:var(--s2-warn,#ffb86b); }
  .pnac-quad.is-o h5::before{ background:var(--accent,#f97316); }
  .pnac-quad.is-t h5::before{ background:var(--s2-bad,#ff6a55); }
  .pnac-quad ul{ margin:0; padding-left:14px; }
  .pnac-quad li{ margin:0 0 var(--pnac-2); font-size:12.8px; line-height:1.5; color:var(--s2-ink,#eef4fc); }
  .pnac-quad li:last-child{ margin-bottom:0; }
  .pnac-quad li::marker{ color:var(--accent,#f97316); }

  /* KEY CONTACTS — a people ledger, one flush initial slab per row */
  .pnac-ppl{ display:flex; flex-direction:column; gap:0; }
  .pnac-p{ display:grid; grid-template-columns:36px minmax(0,1fr); gap:var(--pnac-3); padding:var(--pnac-4) 0;
    border-bottom:1px solid var(--s2-hair-2,rgba(140,170,210,.12)); }
  .pnac-p:first-child{ padding-top:2px; } .pnac-p:last-child{ border-bottom:0; padding-bottom:0; }
  .pnac-pi{ width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    font-family:var(--pnac-disp); font-weight:900; font-style:italic;
    font-size:12.5px; color:#fff; background:var(--s2-slab,#0b1c30); border:1px solid rgba(255,255,255,.14);
    clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%); }
  .pnac-pn{ display:flex; align-items:baseline; gap:var(--pnac-2); flex-wrap:wrap; }
  .pnac-pn b{ font-family:var(--pnac-sans); font-size:14.5px; font-weight:800; letter-spacing:-.015em; color:var(--s2-ink,#eef4fc); }
  .pnac-tag{ font-family:var(--pnac-mono); font-size:8px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
    color:var(--pnac-p-ink); border:1px solid currentColor; padding:2px 5px; border-radius:1px; }
  .pnac-pt{ display:block; font-family:var(--pnac-mono); font-size:9px; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; color:var(--s2-dim,#93a6bd); margin:var(--pnac-1) 0 var(--pnac-2); }
  .pnac-pr{ margin:0; font-size:12.6px; line-height:1.5; color:var(--s2-ink,#eef4fc); opacity:.92; }

  /* APPETITE FOR AWARDS — promoted out of the narrow rail into a FULL-WIDTH instrument strip.
     An axis wants width; squeezed into a 300px rail it collided with its own end labels and left
     the read column with a dead 140px foot. Verdict left, axis + prose right. */
  .pnac-awards{ margin-top:var(--pnac-sec); }
  .pnac-awgrid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.7fr); gap:var(--pnac-5) var(--pnac-6);
    align-items:start; }
  .pnac-axwrap{ position:relative; }
  .pnac-axlab{ display:block; margin:0 0 var(--pnac-4); font-family:var(--pnac-sans); font-size:clamp(19px,2.1vw,26px);
    font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:-.03em; line-height:1;
    color:var(--s2-ink,#eef4fc); }
  .pnac-axis{ position:relative; height:4px; background:linear-gradient(90deg,var(--s2-hair,rgba(140,170,210,.2)),var(--accent,#f97316)); }
  .pnac-axis b{ position:absolute; top:50%; left:var(--at,50%); width:14px; height:14px; transform:translate(-50%,-50%) rotate(45deg);
    background:var(--s2-ink,#eef4fc); border:2px solid var(--s2-panel-solid,#0e1723); }
  .pnac-ends{ display:flex; justify-content:space-between; margin-top:var(--pnac-3); font-family:var(--pnac-mono); font-size:8.5px;
    font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--s2-dim,#93a6bd); }
  .pnac-awtxt{ margin:0; font-size:13.5px; line-height:1.6; color:var(--s2-ink,#eef4fc); max-width:62ch; }
  .pnac-buys{ margin-top:var(--pnac-4); padding-top:var(--pnac-3); border-top:1px solid var(--s2-hair-2,rgba(140,170,210,.12));
    font-family:var(--pnac-mono); font-size:9px; font-weight:800; letter-spacing:.14em;
    text-transform:uppercase; color:var(--s2-dim,#93a6bd); }
  .pnac-buys b{ color:var(--pnac-p-ink); }

  /* ── BOTTOM ACTION BAR ──
     ALTERNATION LAW (SST §5f): this is chrome, so it inverts against the file. On a LIGHT file it is
     a dark slab with light ink; on a DARK file the machined pale slate. That is also what kills the
     beige-button-on-beige defect the CEO caught twice — the buttons here are explicitly inked
     against the rail, never left to a tonal outline on the same tone. */
  body.mvc-light .pnac-foot{
    --rail-bg:linear-gradient(180deg,#132743,#0b1c30); --rail-ink:#e9f0fb;
    --rail-ink-dim:rgba(233,240,251,.68); --rail-hair:rgba(233,240,251,.2); --rail-on:#f97316; --rail-on-ink:#0b1c30; }
  body:not(.mvc-light) .pnac-foot{
    --rail-bg:linear-gradient(180deg,#e3e9f2,#d3dbe7); --rail-ink:#0b1c30;
    --rail-ink-dim:rgba(11,28,48,.76); --rail-hair:rgba(11,28,48,.22); --rail-on:#b4380d; --rail-on-ink:#fff; }
  .pnac-foot{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--pnac-3); flex-wrap:wrap;
    padding:var(--pnac-3) var(--pnac-gut); background:var(--rail-bg); color:var(--rail-ink);
    border-top:1px solid var(--rail-hair); }
  .pnac-foot .lbl{ font-family:var(--pnac-mono); font-size:8.5px; font-weight:800; letter-spacing:.18em;
    text-transform:uppercase; color:var(--rail-ink-dim); }
  .pnac-foot .acts{ display:flex; gap:var(--pnac-3); flex-wrap:wrap; margin-left:auto; }
  /* the two footer controls are inked against the RAIL, not the page — components own their skin,
     no broad `button` catch-all involved (the [CEO-05] law). */
  .pnac-foot .pn-btn{ font-family:var(--pnac-sans); }
  .pnac-foot .pn-btn--primary{ background:var(--rail-on) !important; color:var(--rail-on-ink) !important;
    border-color:var(--rail-on) !important; }
  .pnac-foot .pn-btn--secondary,.pnac-foot .pn-btn--ghost{ background:transparent !important;
    color:var(--rail-ink) !important; border:1px solid var(--rail-hair) !important; }
  .pnac-foot .pn-btn--secondary:hover{ border-color:var(--rail-on) !important; }
  /* "quiet" ≠ invisible (UX_RULES §1): the spent dinner action stays a legible statement of fact */
  .pnac-foot .pn-btn[disabled]{ opacity:1; color:var(--rail-ink-dim) !important; }

  /* ═══════ THE BOOK — the Clients page headline plate (replaces four identical stat blobs) ═══════
     One object, three levels of hierarchy: the run-rate is the headline, the rail is supporting
     ledger, and the exposure line only exists when there IS exposure. */
  .s2-book{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(240px,1fr); gap:0;
    background:var(--s2-panel,linear-gradient(178deg,#101a28,#0a0f18)); border:1px solid var(--s2-hair,rgba(140,170,210,.2));
    border-left:3px solid var(--accent,#f97316); border-radius:2px; margin-top:4px;
    clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%); }
  .s2-book.has-exposure{ border-left-color:var(--s2-bad,#ff6a55); }
  .s2-bk-hero{ padding:16px 20px 18px; display:flex; flex-direction:column; gap:4px; min-width:0; }
  .s2-bk-big{ font-size:clamp(38px,6vw,62px); font-weight:900; letter-spacing:-.05em; line-height:.92;
    font-variant-numeric:tabular-nums; color:var(--s2-ink,#eef4fc); margin-top:6px; }
  .s2-bk-big .cur{ font-size:.42em; font-weight:800; vertical-align:.42em; margin-right:2px; color:var(--accent,#f97316); }
  .s2-bk-big em{ font-style:normal; font-size:.46em; font-weight:800; letter-spacing:-.02em; }
  .s2-bk-sub{ font-size:13px; line-height:1.5; color:var(--s2-dim,#93a6bd); max-width:46ch; margin-top:6px; }
  .s2-bk-rail{ display:flex; flex-direction:column; justify-content:center; padding:12px 20px 12px 0; min-width:0; }
  /* CEO-38: every row was its OWN grid, so the value column width varied per row — a ragged numeral
     edge. A fixed value column puts all three numerals on one shared right edge, tabular, same baseline. */
  .s2-bk-row{ display:grid; grid-template-columns:1fr 76px; align-items:baseline; gap:4px 12px;
    padding:9px 0 9px 16px; border-top:1px solid var(--s2-hair-2,rgba(140,170,210,.12)); border-left:2px solid transparent; }
  .s2-bk-row:first-child{ border-top:0; }
  .s2-bk-row.is-good{ border-left-color:var(--s2-good,#3fd68f); }
  .s2-bk-row.is-warn{ border-left-color:var(--s2-warn,#ffb86b); }
  .s2-bk-row.is-bad{ border-left-color:var(--s2-bad,#ff6a55); }
  .s2-bk-k{ font-family:var(--mono),monospace; font-size:8.5px; font-weight:800; letter-spacing:.2em;
    text-transform:uppercase; color:var(--s2-dim,#93a6bd); }
  .s2-bk-v{ font-size:22px; font-weight:900; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
    color:var(--s2-ink,#eef4fc); line-height:1; text-align:right; }
  .s2-bk-row.is-bad .s2-bk-v{ color:var(--s2-bad,#ff6a55); }
  .s2-bk-s{ grid-column:1/-1; font-size:11.5px; line-height:1.4; color:var(--s2-dim,#93a6bd); }
  .s2-bk-alert{ grid-column:1/-1; margin:0; padding:11px 20px 13px; font-size:12.8px; line-height:1.5;
    color:var(--s2-ink,#eef4fc); background:color-mix(in srgb,var(--s2-bad,#ff6a55) 14%,transparent);
    border-top:1px solid color-mix(in srgb,var(--s2-bad,#ff6a55) 40%,transparent); }
  .s2-bk-alert b{ font-weight:900; }
  @media(max-width:760px){
    .s2-book{ grid-template-columns:1fr; }
    .s2-bk-rail{ padding:0 20px 14px; } .s2-bk-row:first-child{ border-top:1px solid var(--s2-hair-2,rgba(140,170,210,.12)); }
  }

  /* ═══════ ACTIVE CAMPAIGNS — the affordance the CEO couldn't find ═══════ */
  .s2-camp{ cursor:pointer; }
  .s2-camp:hover{ border-color:color-mix(in srgb,var(--accent,#f97316) 55%, transparent); }
  .s2-camp-play{ position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%);
    width:34px; height:34px; display:flex; align-items:center; justify-content:center; font-size:12px;
    color:#160a02; background:var(--accent,#f97316); box-shadow:0 6px 18px rgba(0,0,0,.5);
    clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%); transition:transform .16s; }
  .s2-camp:hover .s2-camp-play{ transform:translate(-50%,-50%) scale(1.12); }
  .s2-camp-foot .s2-clip{ flex:1 1 auto; justify-content:center; }
  .s2-clip .s2-clip-ar{ margin-left:auto; padding-left:10px; font-size:11px; }

  /* Cards take their CONTENT's height — an at-risk account carries an alert and is taller than a warm
     one. A stretched grid left a ~100px void under the healthy cards; a ragged foot is the honest
     shape of the book (UX_RULES §3: no dead half-screens). */
  .s2-cli-board{ align-items:start; }
  /* the card's own affordance — the tape now says the card opens */
  .s2-cli{ cursor:pointer; }
  .s2-cli .s2-cli-open{ position:absolute; left:12px; bottom:52px; z-index:4; padding:0; border:0; background:none;
    font-family:var(--mono),monospace; font-size:8.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
    color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.9); cursor:pointer; transition:opacity .16s; min-height:0; border-radius:0; }
  .s2-cli-banner:hover .s2-cli-open{ opacity:0; }   /* the reel takes the frame on hover, as the tape did */
  .s2-cli .s2-cli-open:focus-visible{ outline:2px solid var(--accent,#f97316); outline-offset:3px; opacity:1; }

  @media(max-width:980px){
    .pnac{ padding:0; }
    .pnac-win{ width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; border-left:0; border-right:0; }
    /* the instrument stacks: number over meter, ledger stays a 2×2 of ruled cells */
    .pnac-hero{ grid-template-columns:1fr; grid-template-areas:"num" "meter" "facts"; }
    .pnac-meter{ margin-top:var(--pnac-5); }
    .pnac-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pnac-fact:nth-child(3){ border-left:0; padding-left:0; }
    .pnac-fact:nth-child(n+3){ border-top:1px solid var(--rail-hair); }
    /* the rail becomes a section, so its column rule turns into a top rule */
    .pnac-grid{ grid-template-columns:1fr; gap:var(--pnac-sec) 0; }
    .pnac-grid>aside.pnac-col{ padding-left:0; border-left:0; padding-top:var(--pnac-5);
      border-top:1px solid var(--s2-hair,rgba(140,170,210,.2)); }
    .pnac-awgrid{ grid-template-columns:1fr; }
  }
  @media(max-width:560px){
    .pnac-scroll{ padding:var(--pnac-4) var(--pnac-4) var(--pnac-6); }
    /* phone: the identity band drops to two rows — mark+name, then status+close */
    .pnac-id{ grid-template-columns:auto minmax(0,1fr); }
    .pnac-status{ grid-column:1; justify-self:start; } .pnac-x{ grid-column:2; justify-self:end; }
    .pnac-mark{ width:44px; height:44px; font-size:15px; }
    /* the ledger stays 2×2 on the phone — one column turned four numbers into 450px of scroll */
    .pnac-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pnac-fact{ padding:var(--pnac-3) var(--pnac-4) var(--pnac-4); }
    .pnac-fact:nth-child(odd){ border-left:0; padding-left:0; }
    .pnac-hero{ padding:var(--pnac-4) var(--pnac-4) 0; }
    .pnac-foot{ padding:var(--pnac-3) var(--pnac-4); }
    .pnac-foot .acts{ width:100%; margin-left:0; } .pnac-foot .acts .pn-btn{ flex:1 1 auto; }
    /* phone: the mono stamp is wider than any sane first column, so the tape becomes stamp-over-entry */
    .pnac-row{ grid-template-columns:minmax(0,1fr) auto; align-items:start; }
    .pnac-row .pnac-stamp{ grid-column:1/-1; margin-bottom:3px; }
  }
  /* NO-OCCLUSION (Layout Law): the hero's clip-path corner and the last section's rules exceed their
     layout box, so scroller padding alone does not clear them — the last child carries real margin. */
  .pnac-scroll>*:last-child{ margin-bottom:var(--pnac-5); }