/* Playground Demo — demo.css
   1. Card-body styles that Playground's modules inject from JavaScript
      (production-path.js, ideas-path.js, text-source-cards.js,
      localise-path.js, generate-tray.js), rewritten as plain CSS.
   2. Demo-only additions: the locked composer, the contact widget, the
      modal, toast, and the read-only variants of the cards. */

/* ═══ 1. card bodies (verbatim from the modules) ═══ */

/* text-source card (Brief) */
.pg-doc-text { width:100%; height:130px; resize:none; box-sizing:border-box; padding:8px;
  border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-2);
  color:var(--ink); font-size:11px; line-height:1.5; font-family:var(--font-mono); overflow-y:auto; }
.pg-doc-upload-wrap { margin-top:8px; }
.pg-doc-btn-row { display:flex; gap:8px; flex-wrap:wrap; }
.pg-node-header.has-doc { cursor:pointer; }

/* idea / script cards */
.pg-idea-pillrow { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:8px; }
.pg-idea-pill { display:inline-flex; align-items:center; padding:2px 9px; border-radius:var(--r-pill);
  background:var(--surface-3); color:var(--ink-2); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; }
.pg-idea-pillrow .pg-idea-pill { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.pg-idea-summary { font-size:12px; color:var(--ink); line-height:1.5; margin-bottom:6px; }
.pg-idea-brief { font-size:11.5px; color:var(--ink-3); line-height:1.5; margin-bottom:10px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pg-node-header.pg-idea-expandable { cursor:pointer; }
.pg-ideasgen-footer { display:flex; align-items:center; gap:8px; flex:1; }

/* production cards */
.pg-prod-tray { flex:1; min-width:0; display:flex; flex-direction:column; }
.pg-prod-fields { display:flex; flex-wrap:wrap; gap:8px; }
.pg-prod-field { flex:1 1 100px; min-width:0; }
.pg-prod-field.is-wide { flex-basis:100%; }
.pg-prod-field-label { display:block; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--ink-3); margin-bottom:3px; }
.pg-prod-input { width:100%; box-sizing:border-box; }
.pg-prod-check { display:flex; align-items:center; gap:6px; margin-top:8px; font-size:11px;
  font-weight:500; letter-spacing:0; text-transform:none; color:var(--ink-3); cursor:pointer; }
.pg-prod-check input { width:13px; height:13px; accent-color:var(--brand); cursor:pointer; }
.pg-prod-run { width:100%; margin-top:8px; }
.pg-prod-media { position:relative; border-radius:var(--r-sm); overflow:hidden;
  background:var(--surface-4); aspect-ratio:16/9; }
.pg-prod-media.is-portrait { aspect-ratio:1; }
.pg-prod-media.is-empty { background:repeating-linear-gradient(45deg, var(--surface-3),
  var(--surface-3) 5px, var(--surface-4) 5px, var(--surface-4) 10px);
  display:flex; align-items:center; justify-content:center; }
.pg-prod-media img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.pg-prod-media video { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.pg-prod-media video:fullscreen { object-fit:contain; background:#000; }
.pg-prod-media video:-webkit-full-screen { object-fit:contain; background:#000; }
.pg-prod-noimg { font-size:11px; color:var(--ink-3); }
.pg-prod-sub { margin-top:6px; font-size:10.5px; color:var(--ink-3); font-family:var(--font-mono);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pg-prod-sub:empty { display:none; }
.pg-prod-rows { margin-top:2px; }
.pg-prod-row { display:flex; gap:8px; align-items:baseline; padding:3px 0; font-size:11px; color:var(--ink-3); }
.pg-prod-row + .pg-prod-row { border-top:1px solid var(--border); }
.pg-prod-row .v { flex:1; min-width:0; text-align:right; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pg-prod-block { display:flex; gap:7px; align-items:center; padding:4px 0; font-size:11px; color:var(--ink-2); }
.pg-prod-block + .pg-prod-block { border-top:1px solid var(--border); }
.pg-prod-block .n { font-family:var(--font-mono); font-size:10px; color:var(--ink-3); }
.pg-prod-block .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pg-prod-actions { display:flex; gap:6px; margin-top:8px; }
.pg-prod-actions .pg-node-btn { flex:1; }
.pg-fmt-presets { margin-top:2px; }
.pg-fmt-presets .pg-prod-check { flex:1 1 calc(50% - 8px); margin-top:4px; }
.pg-fmt-chips { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.pg-fmt-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 7px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border); font-size:10.5px; font-family:var(--font-mono); color:var(--ink-2); }
.pg-prod-editor-actions { display:flex; gap:6px; flex:1; min-width:0; flex-wrap:wrap; }
.pg-prod-editor-actions .pg-node-btn { flex:1; min-width:0; padding:0 8px; white-space:nowrap; }
.pg-prod-editor-actions a.pg-node-btn { text-decoration:none; }
.pg-prod-editor-actions .pg-review-open { flex-basis:100%; }
.pg-node-btn.is-disabled { opacity:.5; pointer-events:none; }

/* localise card */
.pg-loc-section { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
  color:var(--ink-3); margin:10px 0 4px; }
.pg-loc-section:first-child { margin-top:0; }
.pg-loc-blurb { font-size:11px; color:var(--ink-3); margin-top:5px; line-height:1.35; }
.pg-loc-quick { margin-top:2px; }
.pg-loc-quick .pg-prod-check { flex:1 1 calc(50% - 8px); margin-top:4px; }
.pg-loc-row { display:flex; gap:6px; margin-top:6px; align-items:center; }
.pg-loc-row .pg-select, .pg-loc-row .pg-input { flex:1; min-width:0; }

/* generate tray status + expand overlay */
.pg-tray-status { margin-top:2px; }
.pg-expand-overlay { position:fixed; top:50%; left:50%; width:var(--pgo-w, 56vw); height:var(--pgo-h, 70vh);
  transform:translate(-50%,-50%) scale(0.94); opacity:0; pointer-events:none;
  background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--pgo-accent, var(--ink-3));
  border-radius:var(--r-lg); box-shadow:var(--sh-4); z-index:200; overflow:hidden; display:flex; flex-direction:column;
  transition:transform 320ms cubic-bezier(0.22,1,0.36,1), opacity 200ms linear; }
.pg-expand-overlay.open { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
.pg-expand-overlay[hidden] { display:none; }   /* the flex above would otherwise beat the attribute */
.pg-expand-overlay-head { display:flex; align-items:center; gap:10px; padding:14px 18px;
  border-bottom:1px solid var(--border); flex:0 0 auto; flex-wrap:wrap; }
.pg-expand-overlay-head b { color:var(--ink); font-size:15px; }
.pg-expand-overlay-head a { margin-left:auto; color:var(--brand); text-decoration:none; font-size:11px; }
.pg-expand-overlay-close { margin-left:auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border-strong); border-radius:var(--r); background:var(--surface); color:var(--ink-2); cursor:pointer; }
.pg-expand-overlay-close:hover { color:var(--red-ink); border-color:#F3B7A4; background:var(--red-tint); }
.pg-expand-overlay-close svg { width:14px; height:14px; display:block; }
.pg-expand-overlay:focus { outline:none; }
.pg-expand-overlay:focus-visible { box-shadow:var(--sh-4), 0 0 0 3px var(--brand-tint); }
.pg-expand-overlay-head a:hover { text-decoration:underline; }
.pg-expand-overlay-chips { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pg-expand-overlay-body { flex:1 1 auto; min-height:0; overflow:auto; padding:16px 18px; }
.pg-expand-overlay-section { margin-bottom:16px; }
.pg-expand-overlay-section:last-child { margin-bottom:0; }
.pg-expand-overlay-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  color:var(--ink-3); margin-bottom:4px; }
.pg-expand-overlay-section p { margin:0; font-size:13px; line-height:1.6; color:var(--ink-2); white-space:pre-wrap; }

/* ═══ 2. demo additions ═══ */

/* The app never ships a dark theme; the demo keeps the same single palette. */
html, body { height:100%; }
body { overflow:hidden; }
.main { position:relative; padding:0; }

/* The app's select recipe (index.html:487-495): no native arrow, its own chevron. */
select.pg-select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7385' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; padding-right:26px;
}

.pg-prod-check.is-native input { cursor:default; }
.pg-prod-check.is-native { color:var(--ink-2); }

/* Script overlay: one block per scene */
.dm-scene { padding:12px 0; border-top:1px solid var(--border); }
.dm-scene:first-of-type { border-top:0; padding-top:0; }
.dm-scene-head { display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.dm-scene-num { font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--brand-ink); }
.dm-scene-loc { font-size:12px; color:var(--ink-3); }
.dm-scene-secs { margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-3); }
.dm-scene p { margin:0 0 6px; font-size:13px; line-height:1.6; color:var(--ink-2); white-space:pre-wrap; }
.dm-scene .dm-vo { color:var(--ink); font-style:italic; }
.dm-line { display:flex; gap:10px; font-size:13px; line-height:1.6; color:var(--ink-2); }
.dm-line b { flex:0 0 auto; min-width:72px; font-weight:600; color:var(--ink); }

/* Locked controls: the chatbox and "+ New" exist but cannot be used. */
.is-locked, .is-locked * { cursor:url('/static/img/lock.svg') 12 12, not-allowed !important; }
.is-locked > * { pointer-events:none; }
.lc-stage.is-locked .lc-composer, .lc-stage.is-locked .lc-pills, .lc-stage.is-locked .lc-input-row { pointer-events:none; }
.lc-stage .lc-center-wrap { pointer-events:auto; }
.lc-stage.docked .lc-ph, .lc-stage.docked .lc-clip-btn, .lc-stage.docked .lc-send-wrap { opacity:.6; }
.lc-stage:not(.docked) .lc-ph, .lc-stage:not(.docked) .lc-send { pointer-events:none; }
.lc-stage:not(.docked) .lc-send { opacity:.6; background:var(--border-strong); }
.pg-nav-newproj.is-locked:hover { color:var(--ink-2); }

/* The landing composer sits over the main pane; while a project is open the
   whole stage is a fixed layer so the docked bar floats over the canvas. */
.lc-stage { position:fixed; inset:0; z-index:20; pointer-events:none; }
.lc-stage .lc-center-wrap { pointer-events:auto; }
.lc-stage:not(.docked) .lc-center-wrap { left:calc(var(--pg-nav-w) + (100vw - var(--pg-nav-w)) / 2); }

/* A link styled as a card button is a button, not a link */
a.pg-node-btn, a.pg-node-btn:hover { text-decoration:none; }

/* The rail's width is the one variable everything positions against: the
   canvas's usable rect (shell.js), the HUD, the composer. The collapse
   button toggles a class on <html> rather than writing the variable inline,
   so the narrow-screen rule in §5 (a drawer, width 0) can still win. */
:root.is-nav-collapsed { --pg-nav-w: 60px; }

/* Narrow screens: §5 at the end of this file. */

/* The docked pill is centred on the canvas but never over the HUD (200px wide, 22px in). */
.lc-stage.docked .lc-center-wrap {
  left:max(calc(var(--pg-nav-w) + 22px + 200px + 16px + min(190px, 23vw)), calc(var(--pg-nav-w) + (100vw - var(--pg-nav-w)) / 2));
}
@media (max-width: 640px) { .lc-stage.docked .lc-center-wrap { display:none; } }

/* Motion off when asked */
@media (prefers-reduced-motion: reduce) {
  .pg-expand-overlay, .lc-center-wrap, .lc-composer, .pg-node, .pg-nav { transition:none !important; }
}

/* Keyboard focus on a card header is as visible as on a button */
.pg-node-header:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; }

/* Touch: the icon buttons under a comment and the HUD grow to a finger */
@media (hover: none) and (pointer: coarse) {
  .pg-hud-btn { width:34px; height:34px; }
  .pg-nav-row { padding:10px 8px; }
}

/* Contact — floating button and modal */
.dm-contact-fab { position:fixed; right:22px; bottom:22px; z-index:40; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink-2); box-shadow:var(--sh-3);
  display:flex; align-items:center; justify-content:center; transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.dm-contact-fab:hover { color:var(--brand-ink); border-color:var(--brand); background:var(--brand-tint-2); }
.dm-contact-fab svg { width:20px; height:20px; display:block; }
.pg-shell.is-open ~ .dm-contact-fab { bottom:22px; }
.pg-minimap { bottom:80px; }

.dm-modal-overlay { position:fixed; inset:0; z-index:300; display:none; background:rgba(17,19,24,0.34);
  backdrop-filter:blur(2px); align-items:center; justify-content:center; }
.dm-modal-overlay.show { display:flex; }
.dm-modal { width:440px; max-width:calc(100vw - 32px); max-height:calc(100vh - 40px); overflow:auto; box-sizing:border-box;
  padding:24px 26px; background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--brand);
  border-radius:var(--r-lg); box-shadow:var(--sh-4); }
.dm-modal h3 { margin:0 0 6px; font-size:16px; }
.dm-modal .pg-modal-sub { margin:0 0 16px; }
.dm-modal textarea, .dm-modal input[type="text"], .dm-modal input[type="email"] { width:100%; box-sizing:border-box;
  padding:9px 11px; font:inherit; font-size:13px; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r); transition:border-color var(--t-fast), background var(--t-fast); }
.dm-modal textarea { min-height:140px; resize:vertical; line-height:1.5; }
.dm-modal textarea.is-mono { font-family:var(--font-mono); font-size:11.5px; min-height:260px; }
.dm-modal textarea:focus, .dm-modal input:focus { outline:none; border-color:var(--brand); background:var(--surface); }
.dm-modal .pg-field { margin-bottom:12px; }
.dm-modal .pg-modal-error { min-height:16px; margin:2px 0 8px; }
.dm-modal .pg-modal-actions { margin-top:6px; }

/* Contact form: the email goes red when it is missing or malformed on send;
   the message box carries the composer's send arrow in its bottom-right. */
.dm-modal .dm-contact-email.is-invalid input { border-color:var(--red); background:var(--red-tint); }
.dm-modal .dm-contact-email.is-invalid input:focus { border-color:var(--red-ink); }
.dm-field-hint { display:none; margin-top:6px; font-size:12px; line-height:1.4; color:var(--red-ink); }
.dm-contact-email.is-invalid .dm-field-hint { display:block; }
.dm-contact-box { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r);
  transition:border-color var(--t-fast), background var(--t-fast); }
.dm-contact-box:focus-within { border-color:var(--brand); background:var(--surface); }
.dm-modal .dm-contact-box textarea, .dm-modal .dm-contact-box textarea:focus { display:block; min-height:110px;
  padding:10px 11px 4px; border:0; border-radius:0; background:transparent; resize:none; }
.dm-contact-foot { display:flex; justify-content:flex-end; padding:0 8px 8px; }
.dm-contact-privacy { margin-top:8px; font-size:12px; line-height:1.5; color:var(--ink-3); }
.dm-contact-privacy a { color:inherit; text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--border-strong); }
.dm-contact-privacy a:hover { color:var(--ink); text-decoration-color:currentColor; }
.dm-contact-send { transition:background var(--t-fast); }
.dm-modal-contact .dm-contact-box { margin-bottom:0; }
.dm-modal-contact .pg-modal-error { margin:10px 0 0; }
.dm-modal-contact .pg-modal-error:empty { display:none; }
.dm-modal-ok { text-align:center; padding:10px 0 4px; font-size:13.5px; color:var(--ink-2); line-height:1.6; }
.dm-modal-ok b { display:block; font-size:16px; color:var(--ink); margin-bottom:6px; }
.dm-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* HUD icons (the app sets these inline; the demo's CSP forbids inline styles) */
.pg-hud-ico { width:14px; height:14px; display:block; }

/* Toast */
.dm-toast { position:fixed; left:50%; bottom:88px; transform:translateX(-50%) translateY(8px); z-index:400;
  padding:8px 14px; border-radius:var(--r-pill); background:var(--ink); color:var(--ink-on-color); font-size:12.5px;
  font-weight:500; box-shadow:var(--sh-3); opacity:0; pointer-events:none; transition:opacity var(--t), transform var(--t); }
.dm-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Sidebar rows: no ⋯ menu in the demo */
.pg-nav-menu-btn { display:none; }
.pg-nav-row-btn { cursor:var(--cur-pointer); }
.pg-nav-row-sub { display:block; font-size:10.5px; color:var(--ink-3); font-family:var(--font-mono);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.pg-nav-row.is-current .pg-nav-row-sub { color:var(--brand-ink); }

/* Cards are readable slightly further out than in the app: the demo's
   trees are wide, and a visitor fits the whole thing to the screen first. */
.pg-node video, .pg-node img { user-select:none; }

/* ═══ 3. Media and Scenes cards ═══
   One card stands for a collection: its face is the first picture, a small
   "+N" says how much more is behind it, and a click anywhere opens the box
   with the pieces as sub-cards. */
.pg-node.dm-clickable { cursor:pointer; }
.pg-node.dm-clickable .pg-node-header { cursor:pointer; }
.pg-node.dm-clickable:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.pg-prod-media.dm-thumb img { cursor:pointer; transition:transform var(--t), filter var(--t); }
.pg-node.dm-clickable:hover .pg-prod-media.dm-thumb img { transform:scale(1.03); }
.pg-node.dm-clickable:hover .pg-prod-media.dm-thumb.is-empty { filter:brightness(0.97); }

/* Two cards peek out behind the face, so a stack reads as a stack. */
.dm-stack { position:relative; margin-top:8px; }
.dm-stack::before, .dm-stack::after { content:""; position:absolute; left:6px; right:6px; top:-4px; height:12px;
  border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--border); box-shadow:var(--sh-1); z-index:0; }
.dm-stack::after { left:12px; right:12px; top:-8px; opacity:.7; }
.dm-stack .pg-prod-media { position:relative; z-index:1; box-shadow:var(--sh-2); }
.dm-more { position:absolute; right:8px; bottom:8px; z-index:2; padding:3px 8px; border-radius:var(--r-pill);
  background:rgba(17,19,24,0.72); color:#fff; font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.2px; pointer-events:none; }
.dm-counts { white-space:normal; line-height:1.45; }

/* The box: a grid of sub-cards per kind of thing */
.dm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.dm-grid.is-square { grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); }
.dm-grid.is-audio { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); }
.dm-sub { display:flex; flex-direction:column; gap:8px; padding:8px; border-radius:var(--r); background:var(--surface-2);
  border:1px solid var(--border); min-width:0; }
.dm-sub .pg-prod-media { background:var(--surface-4); }
.dm-sub .pg-prod-media img { transition:filter var(--t-fast); }
.dm-sub .pg-prod-media img:hover { filter:brightness(1.06); }
.dm-sub-head { display:flex; flex-direction:column; gap:2px; min-width:0; padding:0 2px 2px; }
.dm-sub-name { min-width:0; font-size:12.5px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dm-sub-meta { font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* An audio sub-card keeps its length beside the name: there is no picture to sit under */
.dm-grid.is-audio .dm-sub-head { flex-direction:row; align-items:baseline; gap:8px; }
.dm-grid.is-audio .dm-sub-name { flex:1 1 auto; }
.dm-sub audio { width:100%; height:36px; display:block; }
.pg-expand-overlay-section + .pg-expand-overlay-section { margin-top:20px; }

/* Pictures opened from inside a box enlarge above it */
.lightbox { z-index:260; }

/* ═══ 4. Ports ═══
   One socket per side, sitting on the card's border: the input at the
   header, by the title (the header's own accent dot is gone, so two circles
   never sit side by side), the output the same distance up from the
   bottom-right corner. Nothing is added to the card for them — no rail, no
   labels — and a socket on the border never covers a button or a select,
   which end 14px in. --port-y is the socket's centre measured from the
   card's top (input) or bottom (output), --port-d its diameter, --port-edge
   the border's centre line; the far-zoom overview scales all three with
   its bigger header and thicker border. */
.pg-node { --port-y:23px; --port-d:11px; --port-edge:-0.5px; }
.pg-node > .pg-port { top:auto; margin-top:0; width:var(--port-d); height:var(--port-d); z-index:2; }
.pg-node > .pg-port-in { left:calc(var(--port-edge) - var(--port-d) / 2); top:calc(var(--port-y) - var(--port-d) / 2); }
.pg-node > .pg-port-out { right:calc(var(--port-edge) - var(--port-d) / 2); bottom:calc(var(--port-y) - var(--port-d) / 2); }
.pg-shell.pg-lod-far .pg-node:not(.is-unfolded) { --port-y:44px; --port-d:15px; --port-edge:-1px; }

/* ═══ 5. Narrow screens (≤ 900px) ═══
   Phones and portrait tablets. The rail is a drawer behind a pill at the
   top-left that names the open project; the canvas, the HUD and the
   composer have the whole width (--pg-nav-w is 0 here, and everything that
   positions against the rail reads that one variable). The pill, the scrim,
   the drawer's × and the Browse button do not exist on a desktop. */
.dm-menu, .dm-browse, .pg-nav-scrim, .pg-nav-close-btn { display:none; }

@media (max-width: 900px) {
  :root, :root.is-nav-collapsed { --pg-nav-w:0px; }

  /* The rail as a drawer: the same element with the same rows, kept off the
     left edge until the pill slides it in. visibility takes its rows out of
     the tab order while it is closed; the delay lets the slide-out finish. */
  .pg-nav, .pg-nav.is-collapsed {
    position:fixed; top:0; bottom:0; left:0; z-index:60;
    width:min(320px, 86vw); box-sizing:border-box;
    padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
    transform:translateX(-100%); visibility:hidden; box-shadow:none;
    transition:transform 280ms cubic-bezier(0.22,1,0.36,1), visibility 0s linear 280ms;
  }
  .pg-nav.is-open { transform:none; visibility:visible; box-shadow:var(--sh-4); transition-delay:0s; }
  .pg-nav-scrim { display:block; position:fixed; inset:0; z-index:59; background:rgba(17,19,24,0.34);
    opacity:0; pointer-events:none; transition:opacity 200ms linear; }
  .pg-nav-scrim.is-open { opacity:1; pointer-events:auto; }
  .pg-nav-collapse-btn { display:none; }
  .pg-nav-close-btn { display:inline-flex; }
  .pg-nav-close-btn svg { width:17px; height:17px; }
  .pg-nav-list { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  /* A rail collapsed on a desktop keeps its class when the window narrows;
     app.js drops it, and these make sure the drawer is whole even if not. */
  .pg-nav.is-collapsed .pg-nav-top { flex-direction:row; align-items:center; padding:16px 8.75px 12px 14px; }
  .pg-nav.is-collapsed .pg-nav-top-actions { flex-direction:row; }
  .pg-nav.is-collapsed .pg-nav-brand-label, .pg-nav.is-collapsed .pg-nav-newproj-label { display:inline; }
  .pg-nav.is-collapsed .pg-nav-search-btn { display:inline-flex; }
  .pg-nav.is-collapsed .pg-nav-search-row.is-open, .pg-nav.is-collapsed .pg-nav-divider,
  .pg-nav.is-collapsed .pg-nav-list { display:block; }
  .pg-nav.is-collapsed .pg-nav-newproj { justify-content:flex-start; margin:0 12px 10px; padding:9px 10px; }

  /* The pill: menu, brand star, and the site name or the open project */
  .dm-menu { display:flex; position:fixed; z-index:30;
    top:calc(14px + env(safe-area-inset-top)); left:calc(14px + env(safe-area-inset-left));
    max-width:calc(100vw - 78px - env(safe-area-inset-left) - env(safe-area-inset-right));
    align-items:center; gap:8px; height:36px; padding:0 14px 0 11px; box-sizing:border-box;
    border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface); box-shadow:var(--sh-1);
    color:var(--ink); font-family:var(--font); font-size:13px; font-weight:600; letter-spacing:-0.1px;
    cursor:var(--cur-pointer); user-select:none; -webkit-user-select:none; }
  .dm-menu-bars { width:18px; height:18px; flex:none; color:var(--ink-2); }
  .dm-menu-star { width:14px; height:14px; flex:none; color:var(--brand); }
  .dm-menu-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .dm-menu:active { transform:translateY(1px); box-shadow:none; }
  .dm-menu:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

  /* Landing: the composer has the width, the pills stay whole and wrap,
     and the productions are one tap away under it. */
  .lc-stage:not(.docked) .lc-center-wrap { top:42%; width:min(640px, calc(100vw - 32px)); }
  .lc-center-wrap h1 { font-size:26px; margin-bottom:20px; }
  .lc-pills { flex-wrap:wrap; }
  .lc-pillbtn { white-space:nowrap; }
  .dm-browse { display:inline-flex; margin-top:18px; height:36px; padding:0 18px; font-size:13px; border-radius:var(--r-pill); }
  .lc-stage.is-locked .dm-browse { cursor:var(--cur-pointer) !important; pointer-events:auto; }
  .lc-stage.docked .dm-browse { display:none; }

  /* Canvas chrome, clear of a phone's home indicator and notch */
  .pg-shell .pg-hud, .pg-shell.pg-nav-collapsed .pg-hud {
    left:calc(14px + env(safe-area-inset-left)); bottom:calc(36px + env(safe-area-inset-bottom)); }
  .pg-close { top:calc(14px + env(safe-area-inset-top)); right:calc(14px + env(safe-area-inset-right)); }
  .pg-minimap { display:none; }
  .dm-contact-fab { right:calc(14px + env(safe-area-inset-right)); bottom:calc(22px + env(safe-area-inset-bottom)); }
  .lc-stage.docked .lc-center-wrap { top:calc(100vh - 54px - env(safe-area-inset-bottom)); top:calc(100dvh - 54px - env(safe-area-inset-bottom)); }
  .dm-toast { bottom:calc(88px + env(safe-area-inset-bottom)); }

  /* Boxes and modals fill the screen; the box's × keeps its corner instead
     of wrapping under a long title. */
  .pg-expand-overlay { width:calc(100vw - 16px); height:calc(100vh - 16px); height:calc(100dvh - 16px); }
  .pg-expand-overlay-head { position:relative; padding:14px 56px 12px 16px; }
  .pg-expand-overlay-close { position:absolute; top:11px; right:12px; margin-left:0; }
  .pg-expand-overlay-body { padding:14px 16px; }
  .dm-grid.is-square { grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); }
  .dm-modal { max-height:calc(100dvh - 40px); padding:20px 18px; }
}
@media (max-width: 380px) {
  .lc-center-wrap h1 { font-size:22px; }
}