/* ═══════════════════════════════════════════════════════════════════════════════
   pn-livework-20260927.css — THE FLOOR · "Live work." as a grid of tear-sheet job cards
   CEO 2026-09-27: "this shitty page" / "those rollovers are all screwed".
   What was wrong: the in-production jobs were drawn as a skewed isometric folder FAN
   (style-01.css .perf-iso .mvc-stack/.mvc-fold, skewY(-8deg) + ±116px offsets). The folders
   overlapped their own titles ("Out-of-Category…", "Brand Relaunch", "War room — live" on top of
   one another), the index tabs floated off the cards, and the hover re-fanned the stack so the
   target moved out from under the pointer.
   Now (markup: perfIsoStackHTML() in script-01.js — the old .mvc-stack/.mvc-fold classes are no
   longer emitted, so none of the fan rules can match): a flat responsive grid, one Direction B
   tear-sheet block per job. No rotation, no skew, no overlap.
     · 3 columns on desktop, 2 on mid widths, 1 on phones.
     · Block colour = status. EMERALD in the room now (progress) · GOLD due within 2 weeks or late
       (warning) · COBALT due later (info) · PAPER not yet pitched (reading). Emerald uses the
       §5h text-bearing stop #188062 (#1fa37a fails AA with white). Orange is never a block: only
       the "Open" pill (§5h.4: rounded, 44px min, UI type, dark ink) and the focus ring.
     · Every block: two-stop gradient, feTurbulence grain at 8%, inset top highlight, layered shadow.
     · Inter 900 headlines, JetBrains Mono data. No serif.
     · Ink law: white ink on cobalt/emerald, dark ink on gold/paper — `color` AND
       `-webkit-text-fill-color` set on every text node (pn-ds.css sets fill colour on some nodes).
     · Hover: 4px lift + deeper shadow, 180ms. Load: cards rise in, bars grow. Reduced motion: none.
   Specificity: every selector carries three never-matching :not(#id) clauses, as in
   pn-tearsheet-modules-20260927.css, because pn-ds.css escalates with ID-level :not() tricks.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root{
  --pnlw-frame:#0b1c30;
  --pnlw-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --pnlw-depth:inset 0 1px 0 rgba(255,255,255,.34), inset 0 -18px 30px -22px rgba(0,0,0,.30), 0 14px 26px -16px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.24);
  --pnlw-depth-hi:inset 0 1px 0 rgba(255,255,255,.40), inset 0 -18px 30px -22px rgba(0,0,0,.30), 0 26px 40px -18px rgba(0,0,0,.62), 0 6px 14px rgba(0,0,0,.28);
}

/* ── the section spans the full content row, so three cards have room ──────────────────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .perf-iso.pnlw{
  grid-column:1 / -1 !important;
  margin:22px 0 6px !important;
  min-width:0 !important;
}
/* the Floor's two-column module grid: let the next half-width module (the vitals card) backfill
   the slot beside the pipeline instead of leaving a hole where the section used to sit */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .hub-view:has(> .perf-iso.pnlw){
  grid-auto-flow:row dense !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .perf-iso.pnlw .perf-iso-h2{
  font-family:'Inter',system-ui,sans-serif !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  font-style:normal !important;
}

/* ── THE GRID ─────────────────────────────────────────────────────────────────────────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px !important;
  margin:16px 0 0 !important;
  padding:0 !important;
  transform:none !important;
  height:auto !important;
}
@media (max-width:1100px){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:640px){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-grid{grid-template-columns:minmax(0,1fr) !important;gap:14px !important}
}

/* ── THE CARD (a real <button>: the whole block is the hit target) ─────────────────────────── */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card{
  --ink:#f6f8ff;
  --ink-2:rgba(246,248,255,.86);
  --chip-bg:rgba(0,10,40,.22);
  --track:rgba(255,255,255,.24);
  --ga:#2a4fc4; --gb:#12245e;
  appearance:none !important; -webkit-appearance:none !important;
  position:relative !important; isolation:isolate;
  display:grid !important;
  grid-template-rows:auto auto 1fr auto auto !important;
  align-content:start !important;
  gap:10px !important;
  min-width:0 !important; width:100% !important; min-height:212px !important; height:auto !important;
  margin:0 !important; padding:18px 20px 16px !important;
  text-align:left !important;
  font:inherit !important;
  color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;
  border:3px solid var(--pnlw-frame) !important;
  border-radius:4px !important;
  /* lightest stop parked in the TOP-RIGHT corner, where no type sits (see ink law above) */
  background:radial-gradient(120% 140% at 10% -20%,var(--hl,rgba(255,255,255,.10)),transparent 55%),linear-gradient(212deg,var(--ga) 0%,var(--gb) var(--stop,62%)) !important;
  box-shadow:var(--pnlw-depth) !important;
  filter:none !important; backdrop-filter:none !important;
  overflow:hidden !important;
  cursor:pointer !important;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease !important;
  animation:pnlw-rise .42s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * 70ms);
}
/* the grain, as its own 8% layer so it never shifts the ink/ground contrast by more than a hair */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card::before{
  content:"" !important; position:absolute !important; inset:0 !important; z-index:-1 !important;
  background:var(--pnlw-noise) 0 0/160px 160px !important;
  opacity:.08 !important; mix-blend-mode:overlay; pointer-events:none !important;
  transform:none !important; border:0 !important; width:auto !important; height:auto !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card::after{content:none !important}

/* status → block colour */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card.is-room{ --ga:#188062; --gb:#0b5e45; --ink:#ffffff; --ink-2:rgba(255,255,255,.92); --chip-bg:rgba(0,30,20,.24) }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card.is-later{ --ga:#2a4fc4; --gb:#12245e }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card.is-soon{
  --ga:#ffd24a; --gb:#f0a500; --ink:#140a04; --ink-2:#3a2505; --hl:rgba(255,255,255,.34);
  --chip-bg:rgba(29,17,3,.10); --track:rgba(29,17,3,.20);
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card.is-open{
  --ga:#f3efe6; --gb:#e6ddca; --ink:#140a04; --ink-2:#3d3226; --hl:rgba(255,255,255,.5);
  --chip-bg:rgba(29,17,3,.08); --track:rgba(29,17,3,.16);
}

/* every text node carries the card's ink — colour AND fill colour, no inheritance games */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card *{
  color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;
  text-shadow:none !important; font-style:normal !important;
  min-width:0; max-width:100%;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-client{
  display:block !important; justify-self:start !important;
  font:800 11px/1.2 'JetBrains Mono',ui-monospace,monospace !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
  padding-right:28px !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-title{
  display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:2 !important;
  overflow:hidden !important;
  font:900 23px/1.08 'Inter',system-ui,sans-serif !important;
  letter-spacing:-.02em !important;
  word-break:normal !important; overflow-wrap:anywhere;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-chip{
  justify-self:start !important; align-self:end !important;
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  padding:5px 10px 5px 9px !important;
  border:1.5px solid var(--ink) !important; border-radius:3px !important;
  background:var(--chip-bg) !important;
  font:800 11px/1 'JetBrains Mono',ui-monospace,monospace !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  white-space:nowrap !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-chip::before{
  content:"" !important; width:7px !important; height:7px !important; border-radius:50% !important;
  background:var(--ink) !important; flex:none !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card.is-room .pnlw-chip::before{
  animation:pnlw-pulse 1.6s ease-in-out infinite;
}

/* progress: a real number + a bar */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-prog{
  display:grid !important; gap:7px !important;
  padding-top:10px !important;
  border-top:1px solid var(--track) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-nums{
  display:flex !important; align-items:baseline !important; gap:8px !important; min-width:0 !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-num{
  font:900 20px/1 'Inter',system-ui,sans-serif !important;
  font-variant-numeric:tabular-nums !important; letter-spacing:-.01em !important;
  white-space:nowrap !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-meta{
  font:600 12.5px/1.2 'Instrument Sans','Inter',system-ui,sans-serif !important;
  color:var(--ink-2) !important; -webkit-text-fill-color:var(--ink-2) !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-bar{
  display:block !important; position:relative !important;
  height:8px !important; border-radius:4px !important; overflow:hidden !important;
  background:var(--track) !important;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-bar > i{
  position:absolute !important; left:0 !important; top:0 !important; bottom:0 !important;
  width:var(--pct,0%) !important; border-radius:4px !important;
  background:var(--ink) !important;
  transform-origin:left center !important;
  animation:pnlw-grow .8s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * 70ms + 180ms);
}
/* the card's visible action — §5h.4 pill: orange fill, dark ink, UI type, ≥44px, right-aligned */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card .pnlw-go{
  justify-self:end !important; align-self:end !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  min-height:44px !important; padding:0 20px !important; margin-top:2px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#ff9142,#f97316) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 4px 10px -4px rgba(0,0,0,.45) !important;
  color:var(--ds-on-accent,#1d0d02) !important; -webkit-text-fill-color:var(--ds-on-accent,#1d0d02) !important;
  font:700 14px/1 'Inter',system-ui,sans-serif !important;
  letter-spacing:0 !important; text-transform:none !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}

/* hover / focus — a gentle lift, nothing rotates, nothing re-stacks */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:var(--pnlw-depth-hi) !important;
  background:radial-gradient(120% 140% at 10% -20%,var(--hl,rgba(255,255,255,.10)),transparent 55%),linear-gradient(212deg,var(--ga) 0%,var(--gb) var(--stop,62%)) !important;
}
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card:hover .pnlw-go{ transform:translateX(2px) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 16px -6px rgba(0,0,0,.5) !important }
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card:active{ transform:translateY(-1px) !important }
/* orange = the active marker only: the keyboard focus ring */
html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card:focus-visible{
  outline:3px solid #f97316 !important; outline-offset:3px !important;
}

@keyframes pnlw-rise{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes pnlw-grow{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes pnlw-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

@media (max-width:640px){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card{min-height:0 !important;padding:16px 18px 14px !important}
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-title{font-size:21px !important}
}

@media (prefers-reduced-motion:reduce){
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card,
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card .pnlw-bar > i,
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card .pnlw-chip::before,
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card .pnlw-go{
    animation:none !important; transition:none !important;
  }
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card:hover,
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card:active,
  html:not(#pn-ds-never):not(#pn-tbm-x1):not(#pn-tbm-x2) body .pnlw-card:hover .pnlw-go{ transform:none !important }
}