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

/* ────────────────────────────────────────────────────────────────────────────────────────────────
   THE FIX (CEO, days-long #1 demand — "wheres my iPad experience"; "content under the ipad frame,
   its cluttered, no clear space, a car crash"):
   The old #pn-folio-frame drew a 15px graphite BORDER as a fixed overlay ON TOP of a full-bleed page,
   so content crashed under the bezel and it read as "a webpage with a border". Now the game gets the
   SAME treatment the login/holding screens already nail (.pn-stage room → .pn-tablet device →
   .pn-screen app, in account.js):

     • On DESKTOP, <html> becomes the noir agency ROOM and <body> becomes the DEVICE SCREEN — a
       centred, letterboxed slab with a real graphite bezel drawn OUTSIDE the screen (a ring shadow),
       the app INSIDE it, and the room visible around it.
     • <body> carries `transform`, so it is the CONTAINING BLOCK for every position:fixed descendant.
       The topbar, the PN/OS dock, modals, tooltips — and anything appended at runtime — ALL anchor to
       the SCREEN and can never escape it. (JS-positioned popups are translated into the screen frame
       via pnScreenBox().) This is the hard part that made every prior attempt fail.
     • A generous SAFE-AREA (the existing #app / topbar gutters + the dock inset + the rounded-screen
       clip) keeps content clear of the bezel + rounded corners on all four edges — real clear space.
     • Real tablet/phone widths (<=1024px OR a coarse pointer) go FULL-BLEED, edge-to-edge — a phone
       renders no iPad-around-the-app. Mirrors account.js's own full-bleed breakpoint exactly.
   Preserves everything that works: light+Miami, chamfer corners, the PN/OS dock, semantics, no emoji,
   AA both themes, dark theme. Nothing per-view is restyled — this is pure shell + safe-area.
   ──────────────────────────────────────────────────────────────────────────────────────────────── */

@media (min-width:1025px) and (pointer:fine){
  /* ── THE ROOM : the device sits on a FIXED LIGHT DESK — same in BOTH themes ──────────────────────
     CEO 2026-07-20 (FIX B): "when I switch to dark mode the overall background page should be light —
     we are only affecting in-ipad content." The ROOM/desk AROUND the device stays a calm light/neutral
     studio surface regardless of the app theme; only the SCREEN (the app content inside the device)
     flips light/dark. So the room bg is DECOUPLED from body.mvc-light — one fixed light desk, no photo,
     no dark takeover. A clean product-shot backdrop that lets the device read as a physical object. */
  html.pn-cased{
    height:100%; overflow:hidden; isolation:isolate;
    display:flex; align-items:center; justify-content:center;
    padding:clamp(20px,2.6vw,52px);
    background:
      radial-gradient(128% 108% at 50% 8%, #f4f0e9 0%, #e7e0d5 46%, #d4ccbe 78%, #c6bdad 100%),
      linear-gradient(180deg, rgba(255,255,255,.5), rgba(210,202,190,.35));
  }
  /* both themes keep the light desk — the theme only lives on the SCREEN, never the room (FIX B) */
  html.pn-cased:has(body.mvc-light){
    background:
      radial-gradient(128% 108% at 50% 8%, #f6f2ec 0%, #ebe4da 46%, #d9d1c4 78%, #cbc3b4 100%),
      linear-gradient(180deg, rgba(255,255,255,.55), rgba(214,206,194,.34));
  }

  /* The office/pitch views force html{height:auto!important;overflow:visible!important} (a document-
     scroll fix from BEFORE the device existed, ~line 6238). Re-assert the fixed-height clipping ROOM
     when cased, with higher specificity + !important, so <body> becomes the scroller (not the whole
     document) and fixed children stay pinned to the screen. */
  html.pn-cased:has(body.pn-folio){ height:100% !important; overflow:hidden !important; }

  /* ── THE DEVICE : <body> IS the screen. transform => containing block for ALL fixed children. ── */
  html.pn-cased body.pn-folio{
    /* !important beats the office/pitch document-scroll rule (~line 6239) which forces body to
       height:auto / overflow:visible / min-height:100% — my selector is more specific, but that rule
       is !important, so these must be too. This is what makes <body> a fixed-size SCROLLING screen. */
    position:relative; flex:none; margin:0 !important;
    width:min(1280px, 94vw) !important;
    height:min(884px, 92vh) !important;
    min-height:0 !important;
    border-radius:30px;
    /* BODY DOES NOT SCROLL. A position:fixed child of a *scrolling* transformed body scrolls WITH the
       content (it acts like absolute), which floated the dock away. So the SCREEN (body) is a
       non-scrolling flex column — topbar (flex none) + #app (the scroller) — and every fixed child
       (dock, modals, tooltips) stays truly pinned to the screen. */
    display:flex !important; flex-direction:column !important;
    overflow:hidden !important;
    transform:translateZ(0);              /* the whole trick: fixed descendants anchor to the SCREEN */
    isolation:isolate;
    /* graphite aluminium bezel = a ring OUTSIDE the screen + deep elevation cast into the room */
    box-shadow:
      0 0 0 13px #191b1f,                 /* the bezel body (graphite) */
      0 0 0 14px #060708,                 /* crisp dark outer contour */
      0 2px 0 15px rgba(255,255,255,.03), /* faint top aluminium light on the bezel */
      0 52px 122px -30px rgba(0,0,0,.82), /* soft cast shadow into the room */
      0 20px 46px -18px rgba(0,0,0,.6);
  }
  /* the topbar is the fixed command bar at the screen top (flex none, never scrolls). */
  html.pn-cased body.pn-folio > .topbar{ flex:0 0 auto !important; }
  /* #app IS the scroller — flex-fills the screen below the topbar and scrolls its own content, so the
     topbar + the fixed dock/modals stay pinned to the screen. Overrides the office document-scroll
     rule (~line 6244: #app height:auto/overflow:visible/min-height:calc(100vh-80px)). */
  html.pn-cased body.pn-folio > #app{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    overflow-y:auto !important; overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    scrollbar-width:none;               /* the screen reads like a real app surface (still scrolls) */
    /* CEO 2026-07-31 ("clients page… I cant access the campaign work" / "hiring page has bottom
       scroll lock too"): the scroller had no clearance for the FIXED 76px dock, so the last row of
       every hub tab scrolled to "the bottom" and still sat occluded under the bar. Clearance =
       dock + breathing room; scroll-padding keeps keyboard focus clear of it too. */
    padding-bottom:104px !important;
    scroll-padding-bottom:104px;
  }
  /* CEO 2026-07-31 ("still got content I can't scroll to see"): padding alone doesn't clear modules
     whose VISUAL box extends past their layout box — the tilted glass shards carry clip-path skews +
     10px offset shadows, so at max scroll their lower edge still sat ~50-70px under the fixed dock.
     Real margin on the last module (not padding on the scroller) guarantees the layout box — and
     therefore the scroll range — includes the overhang. */
  html.pn-cased body.pn-folio .hub-view.on > :last-child{ margin-bottom:72px !important; }
  html.pn-cased body.pn-folio > #app::-webkit-scrollbar{ width:0; height:0; }

  /* the office/penthouse backdrop + worn-world already anchor to <body> (fixed) → they fill the
     screen; round them so they follow the screen's clipped corners cleanly. */
  html.pn-cased #penthouse-bg,
  html.pn-cased #worn-world{ border-radius:30px; }

  /* Overlays are anchored to the SCREEN now — cap the big ones to the SCREEN (100% = body), never the
     viewport, so a modal/window can never spill past the device edges on a short/narrow desktop. */
  html.pn-cased body.pn-folio .pnos-win{
    width:min(960px, calc(100% - 52px));
    max-height:min(680px, calc(100% - 44px));
  }
}
