/* ══════════════════════════════════════════════════════════════════════════════════════════════
   UP THE DUFF — the room, recomposed  (pn-pub-20260914.css)   · loads LAST, after every pub sheet

   CEO Jon, 14 Sep 2026, one crop of the pub: "so much disconnected, poor design everywhere."
   He is right, and the faults are nameable. Measured on the shipped build before touching it:

     1. NOBODY HAS A FACE. Every person in the room — your own floor, your client contacts, a
        rival's Creative Director — was a two-letter monogram in a 40px BRAND-ORANGE square. Nine
        orange squares down one screen, which spends the one accent nine times and tells you
        nothing. The portraits existed the whole time (`ensureCard(st).card.mug`, `rvContact().img`).
     2. THE PRIMARY ACTION LOOKED DISABLED. "SIT DOWN · 1 TIME" was a full-width PALE CREAM slab
        set in tracked mono — the exact visual grammar this game uses for a read-only field. The
        one thing Marlowe's card asks you to do read as the one thing you could not do.
     3. FOUR WAYS TO SAY "A NUMBER OUT OF 100". MORALE/TENSION were mono text, LOYALTY was mono
        text, INTEREST was mono text, RAPPORT was a 4px orange hairline with its figure underneath.
     4. THE COPY WAS A SPEC SHEET. "(12 ◈ + £45 tab + 2 Time)" sat inline in the scene-setting
        paragraph — a price list in the middle of a piece of fiction, two screens away from the
        control that spends it.
     5. THE SAME PERSON, TWICE. "Elin Kruse · Marketing Lead" appeared as the contact for two
        different clients. That one is a JS bug, fixed at source in script-01.js (`pnAssignContacts`)
        and proved by qa/pub_regulars_unique.js — not a styling matter, listed here because it is
        the single most visible thing in Jon's crop.

   THE COMPOSITION, under the 13/14 Sep house language (DECISIONS_LOG, last four entries):
     · section eyebrows in mono (var(--mono)), tracked, on a hairline;
     · headlines and display numerals in the cabinet face (var(--pn-type-face), 900/800/700);
     · body in IS;
     · SOLID OBJECTS IN A COLUMN — and the corollary that kept this off the "AI panel" list: the
       cast is NOT a grid of identical bordered tiles. THE FLOOR and WHO'S IN TONIGHT are each ONE
       slab with hairline-divided rows inside it — people along a bar, not nine boxes. The single
       boxed object on the screen is Marlowe's, which is why it reads as the hero;
     · the primary button's ink is PINNED per surface and measured, never inherited.

   THEME (UX_RULES §5, the seam restated, not invented here): the pub is EVENING, always — a
   deliberately pinned-dark interior, recorded as a designed seam since 2026-08-15. Nothing in
   here reads a --mvc-* token, so porcelain and neon-onyx paint the same room. What changes vs
   the old sheet is that every ink is re-measured on ITS OWN ground rather than on the one ground
   the 15 Aug sheet assumed:

     ink                 on #0d0906   on #17100a (slab)   on #1f1710 (row hover)
     #f6efdf headline      17.31           16.44                15.43
     #f2ead8 body          16.56           15.73                14.76
     #cdbfa8 muted         10.97           10.42                 9.77
     #ffb27a accent ink    11.24           10.67                10.02
     #ffd9c2 warm ink      15.07           14.31                13.43
     #9fd39f good          11.61           11.03                10.34
   and on the fills:
     #ffffff on #c2410c (the primary) = 5.18:1     #0d0906 on #f97316 (track/hover) = 7.02:1
   #f97316 is a FILL here and never ink (6.7:1 as ink is fine, but the house rule since
   pn-type-numerals-20260913 is that type never takes the raw accent — #ffb27a is the ink twin).

   CASCADE (the reason for every `#pn-pub` prefix below). `pn-button-unify-20260819.css` paints
   buttons at (0,5,2) with !important, and style-01.css's office catch-alls
   (`body[data-view="office"] button:not(…×30)…{background:var(--rust-card)!important}`) reach
   ~(0,20,1) — and the pub overlay lives on a body that still carries data-view="office". An ID
   selector outranks both on the first component of specificity regardless of how long their
   :not() chains get, so every rule here is anchored on `#pn-pub` and the two primaries are
   additionally anchored on their own ids (`#pnpub-sit`, `#pnpub-end`). Fills and inks carry
   !important so an !important catch-all cannot win on a tie. MEASURED, not assumed —
   design/pub-2026-09-14/measure.json carries the getComputedStyle readings for both buttons in
   both themes at both widths.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

#pn-pub{
  --pnp-ground:#0d0906;
  --pnp-slab:#17100a;
  --pnp-slab2:#1f1710;
  --pnp-ink:#f6efdf;
  --pnp-body:#f2ead8;
  --pnp-ink2:#cdbfa8;
  --pnp-warm:#ffd9c2;
  --pnp-acc:#f97316;          /* FILL only */
  --pnp-acc-ink:#ffb27a;      /* the ink twin of the accent */
  --pnp-good:#9fd39f;
  --pnp-pri:#c2410c;          /* the house primary, deepened until white ink passes AA (5.18:1) */
  --pnp-pri-hi:#d4500f;
  --pnp-line:rgba(214,166,96,.20);
  --pnp-line2:rgba(214,166,96,.12);
  background:var(--pnp-ground) !important;
  color:var(--pnp-body) !important;
}

/* ── the frame ─────────────────────────────────────────────────────────────────────────────── */
#pn-pub .pnpub-frame{ max-width:780px; padding-bottom:72px; }

/* ── masthead ──────────────────────────────────────────────────────────────────────────────── */
/* The neon sign keeps its orange and its glow (Jon: the masthead is fine) and moves onto the
   cabinet face, because "a headline is a headline everywhere" and this is the room's headline.
   The italic came from the retired IS display treatment the 12 Sep cabinet ruling replaced. */
#pn-pub .pnpub-head{ align-items:center; padding-bottom:16px; border-bottom:1px solid var(--pnp-line); }
#pn-pub .pnpub-sign{
  font-family:var(--pn-type-face) !important;
  font-style:normal !important; font-weight:900 !important;
  font-size:clamp(32px,7.6vw,58px); line-height:.88; letter-spacing:-.045em;
  color:var(--pnp-warm);
}
#pn-pub .pnpub-sign b{ color:#ffb27a; }
#pn-pub .pnpub-sub{
  font-family:var(--mono,JB,ui-monospace,monospace) !important;
  margin-top:9px; font-size:9px; letter-spacing:.26em; color:var(--pnp-ink2);
}
/* LEAVE — a quiet ghost that is still a real control (Law 1: quiet ≠ invisible). */
#pn-pub .pnpub-leave{
  min-height:44px; padding:11px 15px;
  background:rgba(246,239,223,.07) !important; color:var(--pnp-warm) !important;
  border:1px solid rgba(246,239,223,.34) !important; border-radius:2px !important;
  font-family:var(--mono,JB,ui-monospace,monospace) !important;
  font-size:10px; font-weight:700; letter-spacing:.18em;
}
#pn-pub .pnpub-leave:hover{ background:rgba(246,239,223,.16) !important; border-color:var(--pnp-acc-ink) !important; }
#pn-pub .pnpub-leave:focus-visible{ outline:2px solid var(--pnp-acc-ink) !important; outline-offset:2px; }

/* ── the opening: prose, then ONE object that states the week's budget ─────────────────────── */
#pn-pub .pnpub-intro{
  font-family:IS,ui-sans-serif,system-ui,sans-serif;
  max-width:62ch; margin:18px 0 16px;
  font-size:14.5px; line-height:1.6; color:var(--pnp-body);
}
/* "3 nights left in you this week" was a small orange mono line that read as a system message.
   It is the week's entire budget, so it is an OBJECT: the figure in the cabinet face at display
   size, the sentence in IS beside it, one accent rule down the left. */
#pn-pub .pnpub-cap{
  display:flex; align-items:baseline; gap:12px;
  margin:0 0 8px; padding:10px 0 10px 14px;
  border-left:3px solid var(--pnp-acc);
  font-family:IS,ui-sans-serif,system-ui,sans-serif !important;
  font-size:13.5px; font-weight:400; letter-spacing:0; text-transform:none;
  color:var(--pnp-body);
}
#pn-pub .pnpub-cap b{
  font-family:var(--pn-type-face) !important;
  font-weight:800; font-size:34px; line-height:.9; letter-spacing:-.03em;
  color:var(--pnp-warm); font-variant-numeric:tabular-nums;
}

/* ── section eyebrows — mono, tracked, on a hairline ───────────────────────────────────────── */
#pn-pub .pnpub-sec{ margin:30px 0 12px; gap:14px; }
#pn-pub .pnpub-sec span{
  font-family:var(--mono,JB,ui-monospace,monospace) !important;
  font-size:10px; font-weight:700; letter-spacing:.3em; color:var(--pnp-ink2) !important;
}
#pn-pub .pnpub-sec-mar span,
#pn-pub .pnpub-sec-str span{ color:var(--pnp-acc-ink) !important; }
#pn-pub .pnpub-sec i{ background:var(--pnp-line); }
#pn-pub .pnpub-sec-note{
  font-family:IS,ui-sans-serif,system-ui,sans-serif;
  margin:0 0 12px; font-size:12.5px; line-height:1.55; font-style:normal; color:var(--pnp-ink2);
}

/* ══ THE HERO OBJECT — MARLOWE'S CORNER TABLE ══════════════════════════════════════════════════
   She is a principal (design/marlowe/CHARACTER_CANON.md): her portrait, her name and her voice
   are canon and are not touched here — the still is the same file, her lines are the same lines,
   her register is the same register. What changes is SCALE and HIERARCHY. She is the only boxed
   object in the room, the only 128px portrait, the only thing carrying the house primary. Her
   coldness survives: no hover lift, a flatter slab than the room, one severity spine, no glow. */
#pn-pub .pnpub-mar{
  padding:20px 20px 20px 23px;
  background:linear-gradient(180deg,#1a120b 0%,#120c07 100%);
  border:1px solid rgba(214,166,96,.30);
}
#pn-pub .pnpub-mar::before{ width:4px; background:var(--pnp-acc-ink); }
#pn-pub .pnpub-mar.is-recovery::before{ background:var(--pnp-good); }

#pn-pub .pnpub-mar-who{ align-items:flex-start; gap:18px; }
#pn-pub .pnpub-mar-face{
  width:128px; height:128px;          /* was 72 — she is the hero object, so she is the big one */
  border:1px solid rgba(214,166,96,.34);
  filter:grayscale(.3) contrast(1.06);
}
#pn-pub .pnpub-mar-id{ padding-top:2px; }
/* her name in the cabinet face at 700, the tier this system gives a window/card headline */
#pn-pub .pnpub-mar-id b{
  font-family:var(--pn-type-face) !important;
  font-weight:700 !important; font-size:clamp(23px,2.6vw,30px) !important;
  line-height:1.03; letter-spacing:-.02em; color:var(--pnp-ink) !important;
}
#pn-pub .pnpub-mar-id em{
  font-family:var(--mono,JB,ui-monospace,monospace) !important;
  margin-top:7px; font-size:9.5px; letter-spacing:.2em; color:var(--pnp-ink2);
}
/* the severity flag is a CHIP — an object with a fill, not a floating mono string */
#pn-pub .pnpub-mar-flag{
  margin-top:11px; padding:5px 9px;
  background:rgba(255,178,122,.13); border:1px solid rgba(255,178,122,.4); border-radius:2px;
  font-family:var(--mono,JB,ui-monospace,monospace) !important;
  font-size:9.5px; letter-spacing:.16em; color:var(--pnp-acc-ink);
}
#pn-pub .pnpub-mar.is-recovery .pnpub-mar-flag{
  background:rgba(159,211,159,.12); border-color:rgba(159,211,159,.4); color:var(--pnp-good);
}
#pn-pub .pnpub-mar-open,
#pn-pub .pnpub-mar-close{ font-family:IS,ui-sans-serif,system-ui,sans-serif; color:var(--pnp-body); }
#pn-pub .pnpub-mar-open{ margin-top:16px; font-size:15px; line-height:1.6; }
#pn-pub .pnpub-mar-note{
  font-family:IS,ui-sans-serif,system-ui,sans-serif;
  margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--pnp-ink2);
}
/* the ledger: mono keys, cabinet-face figures — the numeral treatment the rest of the game uses */
#pn-pub .pnpub-mar-row dt{
  font-family:var(--mono,JB,ui-monospace,monospace) !important;
  font-size:9.5px; letter-spacing:.18em; color:var(--pnp-ink2);
}
#pn-pub .pnpub-mar-row dd{
  font-family:var(--pn-type-face) !important;
  font-weight:800 !important; font-size:16px; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; color:var(--pnp-ink) !important;
}
#pn-pub .pnpub-mar-row dd.is-neg{ color:var(--pnp-acc-ink) !important; }
#pn-pub .pnpub-mar-row dd.is-pos{ color:var(--pnp-good) !important; }
#pn-pub .pnpub-corner-empty{
  font-family:IS,ui-sans-serif,system-ui,sans-serif;
  border-left:2px solid var(--pnp-line); font-size:13px; color:var(--pnp-ink2);
}

/* ══ THE HOUSE PRIMARY ═════════════════════════════════════════════════════════════════════════
   Orange fill, WHITE label, IS 800 — the house primary, and the exact opposite of the pale-cream
   mono field it replaces. The fill is #c2410c rather than the raw #f97316 for one measured
   reason: white on #f97316 is 2.80:1 and cannot pass AA at any weight, which is the same finding
   pn-button-unify-20260819.css recorded when it had to invert the game's accent primaries. The
   two honest routes are "bright fill + near-black ink" or "deepened fill + white ink"; the brief
   asks for a white label, so the fill deepens. 5.18:1 — measured, not asserted.
   The cost rides as a CHIP after the label, never as the label: "SIT DOWN" is what you are doing,
   "1 TIME" is what it costs, and the two are not the same sentence. */
#pn-pub .pnpub-primary,
#pn-pub button.pnpub-primary,
#pn-pub #pnpub-sit,
#pn-pub #pnpub-end,
#pn-pub .pnpub-mar-sit{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; margin:18px 0 0; min-height:52px; padding:13px 18px; box-sizing:border-box;
  background:var(--pnp-pri) !important; color:#ffffff !important;
  border:0 !important; border-radius:2px !important; cursor:pointer;
  font-family:IS,ui-sans-serif,system-ui,sans-serif !important;
  letter-spacing:0 !important; text-transform:none !important;
  transition:background .18s;
}
#pn-pub .pnpub-primary b{
  font-family:IS,ui-sans-serif,system-ui,sans-serif !important;
  font-size:15px; font-weight:800; letter-spacing:.01em; color:#ffffff !important;
}
#pn-pub .pnpub-primary .pnpub-cost{
  padding:4px 9px; border-radius:2px;
  background:rgba(13,9,6,.30); border:1px solid rgba(255,255,255,.34);
  font-family:var(--mono,JB,ui-monospace,monospace) !important;
  font-size:9.5px; font-weight:700; letter-spacing:.16em; color:#ffffff !important;
}
#pn-pub .pnpub-primary:hover,
#pn-pub #pnpub-sit:hover,
#pn-pub #pnpub-end:hover{ background:var(--pnp-pri-hi) !important; }
#pn-pub .pnpub-primary:focus-visible{ outline:2px solid var(--pnp-warm) !important; outline-offset:3px; }
#pn-pub #pnpub-end{ margin-top:16px; }

/* ══ THE CAST — one slab, people along it, hairlines between ═══════════════════════════════════
   NOT a grid of tiles. Each person is a row inside one object: portrait flush left, name in the
   cabinet face, role in IS, their meters as tracks, and the action as a secondary pill on the
   right. Rows are unequal by content (a rival with no revealed card has no track and sits
   shorter) — the layout answers the data rather than forcing every row to the same height. */
#pn-pub .pnpub-grid{
  display:flex; flex-direction:column; gap:0;
  background:var(--pnp-slab); border:1px solid var(--pnp-line); border-radius:2px;
  overflow:hidden;
}
#pn-pub .pnpub-comp{
  align-items:center; gap:14px; min-height:88px; padding:14px 16px;
  background:transparent !important; color:var(--pnp-body) !important;
  border:0 !important; border-bottom:1px solid var(--pnp-line2) !important; border-radius:0 !important;
  transition:background .16s;
}
#pn-pub .pnpub-grid .pnpub-comp:last-child{ border-bottom:0 !important; }
#pn-pub .pnpub-comp:hover{ background:var(--pnp-slab2) !important; transform:none; }
#pn-pub .pnpub-comp:focus-visible{ outline:2px solid var(--pnp-acc-ink) !important; outline-offset:-2px; }
#pn-pub .pnpub-comp.is-spent{ opacity:1; }
#pn-pub .pnpub-comp.is-spent .pnpub-mug{ filter:grayscale(1) brightness(.72); }
#pn-pub .pnpub-comp.is-spent .pnpub-comp-b b{ color:var(--pnp-ink2) !important; }

/* THE PORTRAIT. The initials slab sits underneath as the honest fallback — dark ink on a bone
   slab (15.1:1), never another orange square. bind() removes the <img> if the file 404s, which
   simply uncovers what is already there. */
#pn-pub .pnpub-mug{
  position:relative; flex:0 0 auto; width:64px; height:64px; overflow:hidden;
  background:#e7dcc6; border:1px solid rgba(214,166,96,.28); border-radius:2px;
}
#pn-pub .pnpub-mug-ini{
  position:absolute; inset:0; display:grid; place-items:center; font-style:normal;
  font-family:var(--pn-type-face) !important;
  font-weight:900; font-size:20px; letter-spacing:-.02em; color:#1a110a;
}
#pn-pub .pnpub-mug img{
  position:relative; z-index:1; display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 18%;
  filter:grayscale(.42) contrast(1.08);
}
#pn-pub .pnpub-comp-b{ gap:3px; }
#pn-pub .pnpub-comp-b b{
  font-family:var(--pn-type-face) !important;
  font-weight:700 !important; font-size:16px; letter-spacing:-.015em; line-height:1.15;
  color:var(--pnp-ink) !important;
}
#pn-pub .pnpub-comp-b em{
  font-family:IS,ui-sans-serif,system-ui,sans-serif !important;
  font-size:12px; line-height:1.35; color:var(--pnp-ink2);
}
#pn-pub .pnpub-comp-note{
  font-style:normal; font-family:var(--mono,JB,ui-monospace,monospace) !important;
  font-size:9px; font-weight:700; letter-spacing:.16em; color:var(--pnp-acc-ink); margin-top:2px;
}

/* PINT — the secondary. A real pill with a border and AA ink, inverting to the accent on hover.
   It is a span, not a nested <button>: the whole row IS the control (one 88px target, which is
   also how it clears 44px on a phone without a second tap zone competing with it). */
#pn-pub .pnpub-comp-go{
  align-self:center; padding:9px 12px; min-height:36px; display:grid; place-items:center;
  border:1px solid rgba(255,178,122,.45); border-radius:2px;
  font-family:var(--mono,JB,ui-monospace,monospace) !important;
  font-size:9.5px; font-weight:700; letter-spacing:.14em; color:var(--pnp-acc-ink);
  transition:background .16s, color .16s, border-color .16s;
}
#pn-pub .pnpub-comp:hover .pnpub-comp-go{
  background:var(--pnp-acc); border-color:var(--pnp-acc); color:#0d0906;   /* 7.02:1 */
}
#pn-pub .pnpub-comp.is-spent .pnpub-comp-go{
  border-color:var(--pnp-line); color:var(--pnp-ink2); background:transparent;
}

/* ── the tracks — ONE shape for every 0–100 in the room ────────────────────────────────────── */
#pn-pub .pnpub-tracks{ display:flex; flex-direction:column; gap:5px; margin-top:7px; max-width:300px; }
#pn-pub .pnpub-trk{ display:grid; grid-template-columns:74px 1fr 30px; align-items:center; gap:8px; }
#pn-pub .pnpub-trk-k{
  font-style:normal; font-family:var(--mono,JB,ui-monospace,monospace) !important;
  font-size:8.5px; font-weight:700; letter-spacing:.14em; color:var(--pnp-ink2);
}
#pn-pub .pnpub-trk-bar{
  display:block; height:8px; background:rgba(214,166,96,.16);
  border-radius:1px; overflow:hidden;
}
#pn-pub .pnpub-trk-bar u{ display:block; height:100%; background:var(--pnp-acc); text-decoration:none; }
#pn-pub .pnpub-trk.is-inv .pnpub-trk-bar u{ background:#c2410c; }   /* TENSION: high is the bad end */
#pn-pub .pnpub-trk.is-rap .pnpub-trk-bar u{ background:var(--pnp-warm); }
/* !important on the weight: measured at 700 on the first pass — pn-type-numerals-20260913.css
   reasserts a numeral weight game-wide, and a tie on specificity goes to the later sheet only
   when both are !important. The numeral tier here has to match the ledger's `dd` (800) or the
   room has two different-weight numerals saying the same kind of thing. */
#pn-pub .pnpub-trk-n{
  font-style:normal; font-family:var(--pn-type-face) !important;
  font-weight:800 !important; font-size:13px; letter-spacing:-.01em; text-align:right;
  font-variant-numeric:tabular-nums; color:var(--pnp-ink) !important;
}

/* ── THE BAR — the stranger keeps the accent spine that marks a new face ───────────────────── */
#pn-pub .pnpub-str-arrive,
#pn-pub .pnpub-str-empty,
#pn-pub .pnpub-str-note{ font-family:IS,ui-sans-serif,system-ui,sans-serif; font-style:normal; }
#pn-pub .pnpub-str-arrive{ font-size:14px; color:var(--pnp-body); border-left:2px solid var(--pnp-acc); }
#pn-pub .pnpub-str-empty{ font-size:13px; color:var(--pnp-ink2); border-left:2px solid var(--pnp-line); }
#pn-pub .pnpub-str-note{ font-size:12.5px; color:var(--pnp-ink2); max-width:62ch; }
#pn-pub .pnpub-grid-str{ border-color:rgba(249,115,22,.42); }

/* ── THE HOUSE + the jukebox — same slab law, tightened ────────────────────────────────────── */
#pn-pub .pnpub-house{ display:flex; flex-direction:column; gap:0; background:var(--pnp-slab); border:1px solid var(--pnp-line); border-radius:2px; overflow:hidden; }
#pn-pub .pnpub-fixture{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px 16px;
  padding:16px; background:transparent !important; color:var(--pnp-body) !important;
  border:0 !important; border-bottom:1px solid var(--pnp-line2) !important; border-radius:0 !important;
}
#pn-pub .pnpub-house .pnpub-fixture:last-child{ border-bottom:0 !important; }
#pn-pub .pnpub-fixture:hover{ background:var(--pnp-slab2) !important; }
#pn-pub .pnpub-fx-k{
  grid-column:1; font-family:var(--mono,JB,ui-monospace,monospace) !important;
  font-size:8.5px; letter-spacing:.24em; color:var(--pnp-ink2);
}
#pn-pub .pnpub-fixture b{
  grid-column:1; font-family:var(--pn-type-face) !important;
  font-style:normal !important; font-weight:800 !important; font-size:21px;
  letter-spacing:-.025em; text-transform:none; margin:3px 0 0; color:var(--pnp-ink) !important;
}
#pn-pub .pnpub-fixture em{
  grid-column:1; font-family:IS,ui-sans-serif,system-ui,sans-serif !important;
  font-size:12px; line-height:1.45; color:var(--pnp-ink2); max-width:54ch;
}
#pn-pub .pnpub-fx-go{
  grid-column:2; grid-row:1 / span 3; align-self:center; margin:0;
  padding:9px 12px; min-height:36px; display:grid; place-items:center;
  border:1px solid rgba(255,178,122,.45); border-radius:2px;
  font-family:var(--mono,JB,ui-monospace,monospace) !important;
  font-size:9.5px; letter-spacing:.14em; color:var(--pnp-acc-ink);
  transition:background .16s, color .16s, border-color .16s;
}
#pn-pub .pnpub-fixture:hover .pnpub-fx-go{ background:var(--pnp-acc); border-color:var(--pnp-acc); color:#0d0906; }
#pn-pub .pnpub-juke{ gap:0; background:var(--pnp-slab); border:1px solid var(--pnp-line); border-radius:2px; overflow:hidden; }
#pn-pub .pnpub-track{
  background:transparent !important; border:0 !important;
  border-bottom:1px solid var(--pnp-line2) !important; border-radius:0 !important;
  min-height:48px; color:var(--pnp-body) !important;
}
#pn-pub .pnpub-track:hover{ background:var(--pnp-slab2) !important; }
#pn-pub .pnpub-track b{ font-family:IS,ui-sans-serif,system-ui,sans-serif !important; font-size:13px; font-weight:600; letter-spacing:0; color:var(--pnp-body); }
#pn-pub .pnpub-track .pj-st{ font-family:var(--mono,JB,ui-monospace,monospace) !important; font-size:9px; letter-spacing:.16em; color:var(--pnp-acc-ink); }
#pn-pub .pnpub-juke-note{
  font-family:IS,ui-sans-serif,system-ui,sans-serif; font-style:normal;
  margin:10px 0 0; font-size:12px; color:var(--pnp-ink2);
}

/* ── the night ─────────────────────────────────────────────────────────────────────────────── */
#pn-pub .pnpub-comp-head{ gap:16px; margin-bottom:18px; }
#pn-pub .pnpub-comp-head .pnpub-mug{ width:80px; height:80px; }
#pn-pub .pnpub-comp-head .pnpub-mug-ini{ font-size:26px; }
#pn-pub .pnpub-comp-head b{
  font-family:var(--pn-type-face) !important;
  font-weight:700 !important; font-size:clamp(21px,2.4vw,27px); letter-spacing:-.02em;
  color:var(--pnp-ink) !important;
}
#pn-pub .pnpub-comp-head em{ font-family:IS,ui-sans-serif,system-ui,sans-serif !important; font-size:12.5px; color:var(--pnp-ink2); margin-top:2px; }
#pn-pub .pnpub-topics{ grid-template-columns:1fr; gap:0; background:var(--pnp-slab); border:1px solid var(--pnp-line); border-radius:2px; overflow:hidden; }
#pn-pub .pnpub-topic{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 16px;
  padding:15px 16px; min-height:74px;
  background:transparent !important; color:var(--pnp-body) !important;
  border:0 !important; border-bottom:1px solid var(--pnp-line2) !important; border-radius:0 !important;
}
#pn-pub .pnpub-topics .pnpub-topic:last-child{ border-bottom:0 !important; }
#pn-pub .pnpub-topic:hover{ background:var(--pnp-slab2) !important; }
#pn-pub .pnpub-topic b{
  grid-column:1; font-family:var(--pn-type-face) !important;
  font-weight:800 !important; font-size:16px; letter-spacing:-.015em; color:var(--pnp-ink) !important;
}
#pn-pub .pnpub-topic em{
  grid-column:1; font-family:IS,ui-sans-serif,system-ui,sans-serif !important;
  font-size:12.5px; line-height:1.45; color:var(--pnp-ink2); margin-top:3px;
}
/* the price sits ON the control that spends it — the whole point of item 4 in the header */
#pn-pub .pnpub-topic .pnpub-cost{
  grid-column:2; grid-row:1 / span 2; align-self:center;
  padding:7px 10px; border:1px solid rgba(255,178,122,.4); border-radius:2px;
  background:rgba(255,178,122,.08);
  font-family:var(--mono,JB,ui-monospace,monospace) !important;
  font-size:9px; font-weight:700; letter-spacing:.12em; color:var(--pnp-acc-ink); white-space:nowrap;
}
#pn-pub .pnpub-topic.is-spent .pnpub-cost{ border-color:var(--pnp-line); color:var(--pnp-ink2); background:transparent; }
#pn-pub .pnpub-shout,
#pn-pub .pnpub-shout-law{
  font-family:IS,ui-sans-serif,system-ui,sans-serif !important;
  font-style:normal; font-size:12.5px; letter-spacing:0; color:var(--pnp-ink2);
}
#pn-pub .pnpub-last{
  font-family:var(--mono,JB,ui-monospace,monospace) !important;
  font-size:10.5px; letter-spacing:.2em; color:var(--pnp-acc-ink);
}
/* the rounds-drunk row. Caught on the night render: the six empty glasses were a .4-alpha
   hairline on a near-black ground and read as tofu rather than glassware, so an unsunk glass now
   carries a faint fill of its own as well as a brighter stroke — the difference between "drunk"
   and "not yet" stays the FILL COLOUR, which the aria-label states in words either way. */
#pn-pub .pnpub-glasses{ margin-bottom:18px; gap:8px; }
#pn-pub .pnpub-glass svg{ width:18px; height:24px; }
#pn-pub .pnpub-glass path{ fill:rgba(246,239,223,.07); stroke:rgba(246,239,223,.55); stroke-width:1.3; }
#pn-pub .pnpub-glass.is-sunk path{ fill:var(--pnp-acc); stroke:var(--pnp-warm); }
/* the night's empty feed line — a quiet piece of prose, not a bold system message */
#pn-pub .pnpub-empty{
  font-family:IS,ui-sans-serif,system-ui,sans-serif !important;
  font-weight:400 !important; font-style:normal; font-size:12.5px; color:var(--pnp-ink2);
}
#pn-pub .pnpub-nightfeed .pnpub-beat{ background:var(--pnp-slab); border-left:3px solid var(--pnp-acc); }
#pn-pub .pnpub-beat-k{ font-family:var(--mono,JB,ui-monospace,monospace) !important; font-size:8.5px; letter-spacing:.2em; color:var(--pnp-acc-ink); }
#pn-pub .pnpub-beat p{ font-family:IS,ui-sans-serif,system-ui,sans-serif; font-size:13px; color:var(--pnp-body); }
#pn-pub .pnpub-rapport-unlock{ background:rgba(249,115,22,.1); border-left:3px solid var(--pnp-acc); }
#pn-pub .pnpub-rapport-unlock p{ font-family:IS,ui-sans-serif,system-ui,sans-serif; color:var(--pnp-body); }

/* ── PHONE (Law 3: one column, 44px targets, nothing horizontal at 390) ────────────────────── */
@media (max-width:480px){
  #pn-pub .pnpub-frame{ padding-left:14px; padding-right:14px; }
  #pn-pub .pnpub-head{ flex-direction:column; align-items:stretch; gap:14px; }
  #pn-pub .pnpub-leave{ align-self:flex-start; }
  #pn-pub .pnpub-sign{ font-size:clamp(30px,10vw,42px); }
  #pn-pub .pnpub-cap b{ font-size:29px; }

  /* she keeps the hero scale a phone can hold: the portrait goes full-width above her name
     rather than shrinking to a thumbnail — the one object that is allowed to take the screen */
  #pn-pub .pnpub-mar{ padding:16px 16px 16px 19px; }
  #pn-pub .pnpub-mar-who{ flex-direction:column; gap:14px; }
  #pn-pub .pnpub-mar-face{ width:100%; height:186px; object-position:50% 20%; }
  #pn-pub .pnpub-mar-id b{ font-size:24px; }

  /* MEASURED on the first 390 render, not pre-empted: leaving the row as a flex line kept the
     PINT pill on the right and squeezed the MORALE/TENSION bars to ~20px — a track that short is
     decoration, not a reading. The row becomes a two-row grid at phone width: portrait + text on
     the first row, the pill on its own row under the text, tracks at full width. */
  #pn-pub .pnpub-comp{
    display:grid; grid-template-columns:54px 1fr; grid-template-areas:"mug body" ". go";
    align-items:start; gap:10px 12px; padding:14px 13px;
  }
  #pn-pub .pnpub-mug{ grid-area:mug; width:54px; height:54px; }
  #pn-pub .pnpub-comp-b{ grid-area:body; }
  #pn-pub .pnpub-mug-ini{ font-size:17px; }
  #pn-pub .pnpub-comp-b b{ font-size:15px; white-space:normal; }
  #pn-pub .pnpub-comp-b em{ white-space:normal; }
  #pn-pub .pnpub-tracks{ max-width:none; }
  #pn-pub .pnpub-trk{ grid-template-columns:60px 1fr 26px; gap:8px; }
  #pn-pub .pnpub-comp-go{ grid-area:go; justify-self:start; min-height:40px; padding:11px 16px; }

  #pn-pub .pnpub-fixture,
  #pn-pub .pnpub-topic{ grid-template-columns:1fr; }
  #pn-pub .pnpub-fx-go,
  #pn-pub .pnpub-topic .pnpub-cost{ grid-column:1; grid-row:auto; justify-self:start; margin-top:10px; }
  #pn-pub .pnpub-fx-go{ min-height:44px; }
  #pn-pub .pnpub-primary{ flex-wrap:wrap; gap:9px; }
}

/* ── motion (Law 4) ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  #pn-pub *{ transition:none !important; animation:none !important; }
}

/* ── THE INVESTMENT, SHOWN (CEO 2026-09-26: "some kind of exchange and reflection that I'm
   investing my time and money on them"). One slab under the person: what every round has cost so
   far, added up, and what it has moved in them (from → to). Also the recap after the night. ── */
#pn-pub .pnpub-invest, #pn-pub .pnpub-recap{
  display:flex; flex-direction:column; gap:10px;
  margin:0 0 18px; padding:14px 16px; border-radius:12px;
  background:var(--pnp-slab); border:1px solid var(--pnp-line);
}
#pn-pub .pnpub-recap{ border-left:3px solid var(--pnp-acc); }
#pn-pub .pnpub-invest-k{
  font:700 10.5px/1 var(--mono),ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pnp-acc-ink);
}
#pn-pub .pnpub-recap p{ margin:0; font:500 14px/1.5 IS,ui-sans-serif,system-ui,sans-serif; color:var(--pnp-body); }
#pn-pub .pnpub-invest-row{ display:flex; flex-wrap:wrap; gap:8px 18px; font:500 14px/1.3 IS,ui-sans-serif,system-ui,sans-serif; color:var(--pnp-ink2); }
#pn-pub .pnpub-invest-row b{ font:800 20px/1 var(--pn-type-face),IS,sans-serif; color:var(--pnp-ink); font-variant-numeric:tabular-nums; margin-right:4px; }
#pn-pub .pnpub-invest-mv{ gap:8px; }
#pn-pub .pnpub-mv{
  display:inline-flex; align-items:baseline; gap:6px; padding:6px 10px; border-radius:999px;
  background:var(--pnp-slab2); border:1px solid var(--pnp-line2);
  font:600 13px/1 IS,ui-sans-serif,system-ui,sans-serif; color:var(--pnp-ink2); font-variant-numeric:tabular-nums;
}
#pn-pub .pnpub-mv b{ font:700 13px/1 IS,ui-sans-serif,system-ui,sans-serif; margin:0; color:var(--pnp-ink); }
#pn-pub .pnpub-mv i{ font-style:normal; }
#pn-pub .pnpub-mv.is-up{ border-color:rgba(159,211,159,.45); }
#pn-pub .pnpub-mv.is-up i{ color:var(--pnp-good); }
#pn-pub .pnpub-mv.is-down{ border-color:rgba(255,178,122,.45); }
#pn-pub .pnpub-mv.is-down i{ color:var(--pnp-acc-ink); }