/* 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. */

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   FIX D — CLEAN SCREEN BACKDROP + THE HERO FILM IN ITS OWN MODULE.
   CEO: "the agency picture as the background of the ipad, WITH the overlying video is too much — use the
   video in a module of its own." The office SCREEN was the busy agency photo (penthouse-bg + the worn
   Miami office photo) AND a film played over it in the hero = two competing images + the 'washed' feel.
   Now the SCREEN gets a CALM, controlled premium surface (no photo bleeding behind everything), and the
   hero FILM stays inside its bounded .pn-vibe-row module (a defined card with real elevation).
   Theme-scoped so ONYX→PORCELAIN still visibly repaints the surface (Theme Law §5).
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
/* DARK office screen — a deep-navy premium surface with REAL tonal range (CEO 2026-07-20, bug #6:
   "overall too dark" — the in-iPad content read as a near-black void). Lifted off pure-black: a broad
   overhead light pool + a soft grounding glow give the canvas depth and life, floor raised from #05090f
   (L≈3) to #0c1524 (L≈7) and crown to #17223a (L≈12) — premium noir, not an oppressive void. No photo. */
body[data-view="office"] #penthouse-bg{
  background:
    radial-gradient(130% 100% at 50% -14%, rgba(52,74,116,.62) 0%, rgba(26,40,66,.30) 40%, rgba(12,20,34,.10) 66%, transparent 80%),
    radial-gradient(120% 80% at 50% 116%, rgba(34,50,80,.34) 0%, transparent 60%),
    linear-gradient(180deg, #17223a 0%, #111a2c 50%, #0c1524 100%) !important;
  background-size:cover,cover,cover !important; background-position:center !important; background-repeat:no-repeat !important;
  filter:none !important; opacity:1 !important;
}
/* LIGHT office screen — a premium WARM BONE surface with paper grain (CEO 2026-07-23: warm beige, not
   cool blue; add texture). Grain = fine SVG turbulence at low opacity over a warm 3-stop gradient. */
body.mvc-light[data-view="office"] #penthouse-bg{
  background:
    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 type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(130% 96% at 50% -14%, #fdfaf3 0%, #f2ebdd 44%, #e7ddca 100%),
    linear-gradient(180deg, #f2ecdf 0%, #e2d7c1 100%) !important;   /* warm bone, paper-grained */
  background-size:160px 160px, cover, cover !important;
  background-position:center !important; background-repeat:repeat,no-repeat,no-repeat !important;
  filter:none !important; opacity:1 !important;
}
/* kill every busy sublayer + the vignette wash so nothing photographic bleeds behind the dashboard */
body[data-view="office"] #penthouse-bg .photo,
body[data-view="office"] #penthouse-bg .video,
body[data-view="office"] #penthouse-bg .skyline,
body[data-view="office"] #penthouse-bg .wash,
body[data-view="office"] #penthouse-bg .halftone-bg,
body[data-view="office"] #penthouse-bg .grit-bg,
body[data-view="office"] #penthouse-bg .shard,
body[data-view="office"] #penthouse-bg #bgplate{ display:none !important; }
body[data-view="office"] #penthouse-bg::after{ background:none !important; }
/* the worn cosmetic office PHOTO no longer bleeds full-bleed behind everything — the Miami/etc. look
   still reads UNMISTAKABLY through the live accent recolour (nav/data/CTA) + the WEARING chip, but the
   backdrop stays the calm controlled surface (CEO: NOT the busy office photo). */
body[data-view="office"] #worn-world{ display:none !important; }

/* THE HERO FILM AS ITS OWN MODULE — a proper card with defined bounds + elevation on the clean backdrop */
body[data-view="office"] .pv-hero-row.pn-vibe-row{
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:0 22px 50px -26px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
body.mvc-light[data-view="office"] .pv-hero-row.pn-vibe-row{
  border:1px solid rgba(20,14,8,.16) !important;
  box-shadow:0 20px 44px -26px rgba(70,58,44,.4), inset 0 1px 0 rgba(255,255,255,.5) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   CEO 2026-07-20 (bug #5) — "too much space wasted at the top." ROOT: the section-nav rail is
   position:sticky with top:calc(--hud-h + 6px) — an offset sized to clear the FIXED topbar of the old
   full-page-scroll layout. In the cased shell the topbar is a flex SIBLING above #app (the scroller), so
   #app content never runs under it — that --hud-h (~66px) offset just shoved the nav rail ~70px DOWN,
   leaving a dead empty band under the topbar on the left. When cased, the nav only needs to clear its own
   6px inset. Also pin both real grid columns to row 1 (deterministic top-align) and trim the top inset so
   content starts tight below the opaque command bar (safe-area preserved).
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
html.pn-cased body[data-view="office"] .hub-nav{ top:6px !important; }
body[data-view="office"] .hud-main>.hub-nav{ grid-column:1 !important; grid-row:1 !important; align-self:start !important; }
body[data-view="office"] .hud-main>.hub-body{ grid-column:2 !important; grid-row:1 !important; align-self:start !important; }
html.pn-cased body[data-view="office"] #app{ padding-top:9px !important; }
html.pn-cased body[data-view="office"] .pv-hero-row{ padding-top:16px !important; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   FIX C — THE FEED RAIL IS RETIRED; THE WIRE OPENS FROM THE TOPBAR FEED BUTTON AS A RIGHT DRAWER.
   CEO: "the closed FEED state still looks shit and is wasting space — move it, add it as a button on the
   top alongside CFO/COO." The vertical edge rail (and its thin collapsed strip + vertical FEED tab) is
   gone — the gutter is reclaimed for content. The SAME feed panel now slides in from the right over
   content, toggled by #feedBtn (body.feed-open). Only the entry point moved.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
/* the vertical tab idiom is dead everywhere */
.feed-rail .fr-tab{ display:none !important; }
/* re-home the rail as a right drawer anchored to the SCREEN (fixed → the shell's <body> is the CB),
   seated between the topbar and the flush dock, hidden off the right edge until body.feed-open */
body[data-view="office"] .feed-rail,
body[data-view="office"] #app > .feed-rail,
body[data-view="office"] .feed-rail.closed{
  position:fixed !important; top:66px !important; right:0 !important; left:auto !important; bottom:84px !important;
  width:min(374px,86%) !important; height:auto !important; align-self:auto !important;
  z-index:290 !important; margin:0 !important; overflow:hidden !important;
  border:1px solid var(--fw-hair,rgba(150,162,184,.17)) !important; border-right:0 !important;
  border-radius:14px 0 0 14px !important;
  transform:translateX(102%) !important;
  transition:transform .26s cubic-bezier(.4,0,.2,1) !important;
  box-shadow:-28px 0 64px -22px rgba(0,0,0,.62) !important;
}
/* the open state must out-rank the #app-id base selector above (which carries an ID) → include #app */
body[data-view="office"].feed-open .feed-rail,
body[data-view="office"].feed-open #app > .feed-rail{ transform:none !important; }
body[data-view="office"] .feed-rail .fr-panel{ opacity:1 !important; pointer-events:auto !important; }
/* the floating theme toggle sits ABOVE the flush dock — never overlapping it (UX_RULES §6) */
body.pnos-dock-on .mvc-palfloat{ bottom:86px !important; }
/* the FEED topbar button lights when open + a small alert pip when the wire has news */
.tb-btn#feedBtn.is-on{ color:var(--accent,#f97316) !important; }
.tb-btn#feedBtn.tb-alert{ position:relative; }
.tb-btn#feedBtn.tb-alert::after{ content:""; position:absolute; top:5px; right:5px; width:6px; height:6px;
  border-radius:50%; background:#f97316; box-shadow:0 0 6px rgba(249,115,22,.8); }
@media (prefers-reduced-motion:reduce){
  body[data-view="office"] .feed-rail, body[data-view="office"] .feed-rail.closed{ transition:none !important; }
}
/* full-bleed widths (phone / coarse pointer): drawer clears the shorter topbar + flush dock */
@media (max-width:1024px),(pointer:coarse){
  body[data-view="office"] .feed-rail,
  body[data-view="office"] #app > .feed-rail,
  body[data-view="office"] .feed-rail.closed{ top:58px !important; bottom:64px !important; width:min(374px,92%) !important; }
}
/* ══════════════════════════════════════════════════════════════════════════════════════════════════
   CEO 2026-07-20 (bug #3) — THE WEARING CHIP is a real accent chip, NOT a dark empty text field.
   The office/pitch button catch-alls (both dark + light) were reskinning it to a flat rounded field
   (dark-on-dark / near-invisible ink) so it read as "a weird empty button that looks like a text field."
   These per-view selectors (specificity 0,3,2) out-rank every `.topbar button` reskin (≤0,2,2) WITHOUT
   !important-warring the catch-alls, restoring the accent fill + the JS-computed AA ink (--wc-ink).
   The base .wearing-chip rule already draws the CLIP chamfer + the WEARING dot/eyebrow/name.
   ══════════════════════════════════════════════════════════════════════════════════════════════════ */
body[data-view="office"] .topbar button.wearing-chip,
body[data-view="pitch"]  .topbar button.wearing-chip,
body[data-view="store"]  .topbar button.wearing-chip,
body[data-view="pass"]   .topbar button.wearing-chip{
  background:var(--accent,#f97316) !important;
  color:var(--wc-ink,#0b1c30) !important;
  border:1px solid rgba(0,0,0,.28) !important;
  border-radius:3px !important;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%) !important;
  height:32px !important; padding:0 13px 0 11px !important; backdrop-filter:none !important;
}
body[data-view="office"] .topbar button.wearing-chip:hover,
body[data-view="pitch"]  .topbar button.wearing-chip:hover,
body[data-view="store"]  .topbar button.wearing-chip:hover,
body[data-view="pass"]   .topbar button.wearing-chip:hover{
  background:var(--accent,#f97316) !important; border-color:rgba(0,0,0,.34) !important;
  filter:brightness(1.06) !important; color:var(--wc-ink,#0b1c30) !important;
}
/* the chip's dot + eyebrow + name inherit the AA-computed ink (never clobbered to a muted grey) */
body[data-view="office"] .topbar .wearing-chip .wc-name, body[data-view="pitch"] .topbar .wearing-chip .wc-name,
body[data-view="store"] .topbar .wearing-chip .wc-name, body[data-view="pass"] .topbar .wearing-chip .wc-name,
body[data-view="office"] .topbar .wearing-chip .wc-eye, body[data-view="pitch"] .topbar .wearing-chip .wc-eye,
body[data-view="store"] .topbar .wearing-chip .wc-eye, body[data-view="pass"] .topbar .wearing-chip .wc-eye{
  color:var(--wc-ink,#0b1c30) !important;
}