/* ============================================================
   The Studio (public/js/studio.js): the environments made here for
   clients, shaped wall by wall. On the house stylesheet (temple.css) and
   the planner's bigger type and targets (planner.css): a dark room, the
   brass accent for "this is the one", glass panes, nothing behind a
   hover.
   ============================================================ */

/* ---------- /studio: every one made here ---------- */
.studiopage .studio-head{justify-content:space-between;align-items:flex-start;gap:18px}
.studiopage .studio-title{flex:1 1 420px;min-width:0}
.studiopage .note{color:var(--paper-dim);font-size:.92rem}
.studio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.studiocard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass-strong);overflow:hidden}
.studiocard.changed{border-color:rgba(201,174,124,.6)}
.studiocard.failed{border-color:rgba(231,154,143,.45)}
.studiocard .open{all:unset;display:flex;flex-direction:column;flex:1;cursor:pointer}
.studiocard .open:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.studiocard .open:hover{background:rgba(236,236,232,.05)}
.studio-poster{display:grid;place-items:center;aspect-ratio:1400/622;background:#000;overflow:hidden}
.studio-poster img{width:100%;height:100%;object-fit:cover;display:block}
.studio-poster .none{color:var(--paper-dim);font-family:var(--serif);font-style:normal;font-size:1.15rem}
.studiocard .body{display:grid;gap:4px;padding:14px 18px 16px}
.studiocard h3{font-size:1.0625rem;margin:0 0 2px;overflow-wrap:anywhere}
.studiocard .meta{color:var(--paper-dim);font-size:.95rem}
.studiocard .tags{display:flex;flex-wrap:wrap;gap:6px 10px;margin:4px 0 2px}
.chip.status.making{border-color:var(--paper-dim);color:var(--paper)}
.chip.status.changed{border-color:var(--accent);color:var(--accent);background:rgba(201,174,124,.12)}
.chip.status.ready{border-color:rgba(236,236,232,.45);color:var(--paper)}
.studio-empty{display:grid;justify-items:center;gap:6px;text-align:center;padding:44px 28px}
.studio-empty p{margin:0;max-width:60ch;font-family:var(--sans);font-size:1.05rem;line-height:1.5}
.studio-empty p.big{font-family:var(--serif);font-size:1.25rem}
.studio-empty b{color:var(--accent);font-weight:600}
.studio-empty .btn{margin-top:14px}

/* ---------- /studio/<id>: the room on the left, the walls on the right ---------- */
.studiopage.one{max-width:1480px}
.studio-back{margin-bottom:18px}
.studio-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(380px,1fr);gap:28px;align-items:start}
.studio-roomcol{display:grid;gap:12px;min-width:0;position:sticky;top:calc(var(--topbar,81px) + 14px)}
.studio-roomcol .note{margin:0}
.studio-views button{min-width:96px}
.studio-side{display:grid;gap:22px;min-width:0}
.studio-namebox h1{margin:0;font-size:clamp(1.9rem,3.4vw,2.6rem);overflow-wrap:anywhere}
.studio-name{align-items:baseline;gap:10px 16px}
.studio-namebox .meta{margin:6px 0 0;color:var(--paper-dim);font-size:1.05rem}
.studio-status .tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.studio-status .note{margin:0}
.studio-status .lib-making.big{margin-top:0}
.studio-failed{padding:14px 18px;border:1px solid rgba(231,154,143,.6);border-radius:var(--r-md);background:rgba(231,154,143,.10)}
.studio-failed p{margin:0 0 8px}
.studio-walls h2,.studio-wallpanel h2{font-size:1.25rem;margin:0 0 4px}
.studio-walls .help{color:var(--paper-dim);margin:0 0 12px;font-size:1rem}

/* The five walls as the guide lays them: the back wall at the top (upside down), the left and right
   walls on their sides of the ceiling, the ceiling in the middle (its top toward the back of the
   room), the front wall at the bottom. Each picture is turned as the guide turns it. */
.studio-guide{display:grid;grid-template-columns:minmax(64px,.42fr) minmax(0,1fr) minmax(64px,.42fr);grid-template-areas:". back ." "left ceiling right" ". front .";gap:6px;max-width:440px}
.studio-wall{position:relative;display:block;min-width:0;min-height:var(--tap);padding:0;border:1px solid var(--line);border-radius:10px;background:#000;color:var(--paper);overflow:hidden;cursor:pointer;font:inherit;transition:border-color .2s,box-shadow .2s}
/* The back wall is so low on the guide that at its own shape it would be too small a target: as high as a
   finger needs, as wide as the ceiling (its picture cut to fit). */
.studio-wall[data-wall="back"]{grid-area:back;height:60px}
.studio-wall[data-wall="left"]{grid-area:left}
.studio-wall[data-wall="ceiling"]{grid-area:ceiling;aspect-ratio:2700/4000}
.studio-wall[data-wall="right"]{grid-area:right}
.studio-wall[data-wall="front"]{grid-area:front;aspect-ratio:2700/1200}
.studio-wall:hover{border-color:rgba(236,236,232,.55)}
.studio-wall:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.studio-wall.on{border:2px solid var(--accent);box-shadow:none}
.studio-wall .pic{position:absolute;inset:0;display:grid;place-items:center;container-type:size;overflow:hidden}
.studio-wall .pic img{position:absolute;left:50%;top:50%;width:100%;height:100%;object-fit:cover;transform:translate(-50%,-50%);display:block;pointer-events:none}
.studio-wall[data-wall="back"] .pic img{transform:translate(-50%,-50%) rotate(180deg)}
.studio-wall[data-wall="left"] .pic img{width:100cqh;height:100cqw;transform:translate(-50%,-50%) rotate(90deg)}
.studio-wall[data-wall="right"] .pic img{width:100cqh;height:100cqw;transform:translate(-50%,-50%) rotate(-90deg)}
.studio-wall .blank{padding:4px 6px;color:var(--paper-dim);font-size:.82rem;line-height:1.25;text-align:center}
.studio-wall .label{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 4px 4px;font-size:.82rem;font-weight:600;line-height:1.15;text-align:center;background:linear-gradient(to top,rgba(0,0,0,.78),transparent);pointer-events:none}
.studio-wall[data-wall="back"] .label{padding-top:6px;background:rgba(0,0,0,.5)}
.studio-wall.on .label{color:var(--accent)}
.dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--paper-dim)}
.dot.drawn{background:transparent;border:2px solid rgba(236,236,232,.75)}
.dot.changed{background:var(--accent)}
.dot.drawing{background:var(--accent);animation:studio-pulse 1.4s ease-in-out infinite}
@keyframes studio-pulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.studio-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;color:var(--paper-dim);font-size:.88rem}
.studio-legend span{display:inline-flex;align-items:center;gap:7px}

/* The wall chosen: its picture the right way up, its takes, its words. */
.studio-wallpanel{display:grid;gap:12px;padding:20px 22px 22px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass-strong);backdrop-filter:blur(var(--glass-blur-strong))}
.studio-wallpanel h3{font-size:1.0625rem;margin:6px 0 0}
.studio-panelhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.studio-panelhead .where{color:var(--paper-dim);font-family:var(--serif);font-style:normal;font-size:1.15rem}
.studio-big{display:grid;gap:10px}
.studio-figure{position:relative;margin:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-md);background:#000;overflow:hidden}
.studio-figure img{display:block;width:100%;height:auto;max-height:46vh;object-fit:contain;image-orientation:none}
.studio-figure.ceiling img{width:auto;max-width:100%}
.studio-figure figcaption{position:absolute;left:10px;top:10px;display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);background:rgba(14,14,16,.78);backdrop-filter:blur(6px);font-size:.95rem}
.studio-figure figcaption .chip{font-size:.8rem}
.studio-use{gap:10px 16px}
.studio-use .note{margin:0}
.studio-none{display:grid;place-items:center;min-height:140px;border:1px dashed var(--line);border-radius:var(--r-md);color:var(--paper-dim);font-family:var(--serif);font-style:normal;font-size:1.2rem}
.studio-takes{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.studio-take{flex:none;display:grid;gap:6px;width:150px;padding:6px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass);color:var(--paper);cursor:pointer;font:inherit;text-align:left;transition:border-color .2s,background .2s}
.studio-take:hover{border-color:rgba(236,236,232,.5)}
.studio-take.on{border-color:var(--accent);background:rgba(201,174,124,.14)}
.studio-take .thumb{display:grid;place-items:center;height:72px;border-radius:7px;background:#000;overflow:hidden}
.studio-take .thumb img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.studio-take .cap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:.92rem;font-weight:600}
.studio-take .cap .chip{font-size:.74rem;padding:3px 8px;font-weight:500}
.studio-take.coming{cursor:default;border-style:dashed}
.studio-words textarea{min-height:120px;font-size:1.08rem;line-height:1.45;font-family:var(--sans)}
.studio-words .note{margin:8px 0 0}
.studio-acts{display:grid;gap:10px}
.studio-acts .row{gap:10px 14px}
.studio-acts p{margin:0}
.studio-acts .error{min-height:0}
.studio-drawing{color:var(--paper);font-size:1rem}

/* The walls changed: a bar that stays in sight until they are put together. */
.studio-bar{position:sticky;bottom:14px;z-index:5;display:grid;gap:10px;padding:16px 20px;border:1px solid var(--accent);border-radius:var(--r-lg);background:rgba(21,21,23,.94);backdrop-filter:blur(12px);box-shadow:0 18px 50px -20px rgba(0,0,0,.9),0 0 30px -12px var(--accent)}
.studio-bar p{margin:0;font-size:1.02rem;line-height:1.45}
.studio-bar .error{min-height:0}
.studio-bar .btn{justify-self:start}
.studio-bar .lib-making.big{margin:0}
.studio-madefrom{margin:0}

/* Step 3's row for a map made for the client (app.js madeRow) carries "Open in the Studio" too: its
   buttons wrap within the pictures' column rather than run off its side. */
.droprow.wide > .row{flex:1 1 auto;min-width:0}

@media (max-width:1000px){
  .studio-layout{grid-template-columns:minmax(0,1fr)}
  .studio-roomcol{position:static}
  .studio-guide{max-width:380px}
}
@media (max-width:600px){
  .studio-grid{grid-template-columns:minmax(0,1fr)}
  .studio-wallpanel{padding:16px}
  .studio-take{width:128px}
}
@media (prefers-reduced-motion:reduce){.dot.drawing{animation:none}}

/* The type scale (DESIGN.md) for the cards and rows here. */
.studiocard .body{padding:14px 16px 16px}
.studiocard .meta{font-size:.8125rem}
.studiocard .open:hover{background:var(--surface-2)}

/* ---------- the Workbench (studio.js, 21 Oct 2026): the tools, a box drawn on the picture, moving takes ---------- */
.studio-tools{display:grid;gap:6px;margin:0 0 12px}
.studio-tools .note{margin:0;font-size:.8125rem}
.studio-figure{position:relative}
.studio-figure.drawing img{cursor:crosshair}
.studio-region{position:absolute;inset:0;cursor:crosshair;touch-action:none}
.studio-region .rbox{position:absolute;border:2px solid var(--accent);background:rgba(201,174,124,.14);box-shadow:0 0 0 9999px rgba(0,0,0,.28);pointer-events:none;border-radius:3px}
.studio-moving h3{margin:14px 0 8px}
.studio-take.moving{width:220px}
.studio-take.moving video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;border-radius:8px}
.studio-take.moving .mwords{display:block;font-size:.75rem;color:var(--paper-dim);line-height:1.35;margin:4px 0 6px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.studio-movingbar{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface-2)}
.studio-movingbar p{margin:0;font-size:.875rem}
.studio-bar:has(.studio-movingbar:only-child){background:transparent;border-color:transparent;padding:0}
.studio-acts .toggle{margin-top:8px}

/* ---------- the Workbench's two halves (21 Oct 2026): the room as wide as she drags it ---------- */
.studio-layout{grid-template-columns:minmax(360px,var(--bench-left,1.35fr)) 14px minmax(340px,1fr);gap:0 10px}
.studio-split{align-self:stretch;position:sticky;top:calc(var(--topbar,57px) + 14px);height:calc(100vh - var(--topbar,57px) - 40px);cursor:col-resize;border-radius:7px;display:grid;place-items:center;touch-action:none}
.studio-split::before{content:"";width:3px;height:44px;border-radius:2px;background:var(--line-strong);transition:background .15s,height .15s}
.studio-split:hover::before{background:var(--paper-dim);height:64px}
.studio-pick{margin:0;padding:28px 18px;border:1px dashed var(--line-strong);border-radius:var(--r-md);color:var(--paper-dim);font-size:.9375rem;text-align:center}
@media (max-width:1000px){.studio-layout{grid-template-columns:minmax(0,1fr)}.studio-split{display:none}}

/* ---------- Mark up (21 Oct 2026): red strokes and words on the wall's picture, and over the room ---------- */
.studio-marks{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none;overflow:visible}
.studio-marks polyline{fill:none;stroke:#ff2d2d;stroke-linecap:round;stroke-linejoin:round}
.studio-marks text{fill:#ff2d2d;font-weight:700;font-family:system-ui,sans-serif;dominant-baseline:middle;paint-order:stroke;stroke:rgba(0,0,0,.6);stroke-linejoin:round}
.studio-marks-room{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.studio-marks-room.on{pointer-events:auto;cursor:crosshair;touch-action:none}
.studio-roomcol .room-people{z-index:3}
.studio-markbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.studio-markbar .seg-big{margin:0}
.studio-markbar .seg-big button{min-height:32px;padding:0 12px;font-size:.8125rem}
.studio-markbar .note{flex:1 1 220px;margin:0;font-size:.8125rem}

/* ---------- Several walls (21 Oct 2026): picking them, the picked ones, and their panel ---------- */
.studio-pickbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px}
.studio-pickbar .note{flex:1 1 200px;margin:0;font-size:.8125rem;color:var(--paper-dim)}
.studio-pickbar .btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.studio-wall.picked{border:2px dashed var(--accent)}
.studio-wall.picked .label{color:var(--accent)}
.studio-wall .tick{position:absolute;top:4px;right:4px;z-index:1;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#0e0e10;font-size:.75rem;font-weight:700;line-height:1}
.studio-multiwalls{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 12px}
.studio-multiwall{position:relative;display:grid;gap:6px;width:132px;padding:6px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--glass)}
.studio-multiwall .thumb{display:grid;place-items:center;height:64px;border-radius:7px;background:#000;overflow:hidden}
.studio-multiwall .thumb img{width:100%;height:100%;object-fit:contain;display:block}
.studio-multiwall .thumb .blank{color:var(--paper-dim);font-size:.75rem}
.studio-multiwall .cap{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:.8125rem;font-weight:600}
.studio-multiwall .cap .chip{font-size:.7rem}
.studio-multiwall .x{position:absolute;top:2px;right:2px;width:22px;height:22px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:var(--paper);font-size:.75rem;cursor:pointer}
.studio-multiwall .x:hover{background:var(--accent);color:#0e0e10}
.studio-multiwall.now{border-color:var(--accent)}
.studio-multiwall.done .thumb{outline:1px solid rgba(201,174,124,.5)}
.studio-multiwall.failed{border-color:rgba(255,120,120,.6)}
.studio-multiwall.skipped,.studio-multiwall.waiting{opacity:.7}
.studio-words .toggle{display:flex;align-items:center;gap:8px;margin:0 0 8px}

/* ---------- The bench as she sizes it (22 Oct 2026): the room's corner drags it bigger, wider and taller at
   once; the line beside it, wider. The empty bench: the room with the test pattern, and two ways to start. ---------- */
.studio-layout.tall .studio-roomcol .stage{aspect-ratio:auto;height:var(--bench-h)}
.stage-grip{position:absolute;right:0;bottom:0;z-index:4;width:30px;height:30px;padding:0;border:0;border-top-left-radius:10px;background:rgba(14,14,16,.72);cursor:nwse-resize;touch-action:none;opacity:.75;transition:opacity .15s,background .15s}
.stage-grip::before{content:"";position:absolute;right:7px;bottom:7px;width:12px;height:12px;background:linear-gradient(135deg,transparent 0 44%,var(--paper-dim) 44% 52%,transparent 52% 66%,var(--paper-dim) 66% 74%,transparent 74%)}
.stage-grip:hover,.stage-grip:focus-visible{opacity:1;background:rgba(14,14,16,.9)}
.stage-grip:hover::before{background:linear-gradient(135deg,transparent 0 44%,var(--accent) 44% 52%,transparent 52% 66%,var(--accent) 66% 74%,transparent 74%)}
.studio-split::before{width:4px;height:56px;background:var(--line-strong)}
.studio-split::after{content:"⋮";position:absolute;color:var(--paper-dim);font-size:.9rem;pointer-events:none}

.bench-blank{align-content:start}
.bench-open{display:grid;gap:10px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.bench-open h2{font-size:1.25rem;margin:0}
.bench-open .help{margin:0;color:var(--paper-dim)}
.bench-open .btn.primary{justify-self:start}
.bench-open .row{display:flex;justify-content:flex-start}
dialog.bench-sheet{width:min(1100px,calc(100vw - 32px));max-width:none;height:min(820px,calc(100vh - 48px));display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:10px;padding:18px 20px}
dialog.bench-sheet:not([open]){display:none}
.bench-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bench-sheet-head h2{margin:0}
.bench-sheet .note{margin:0}
.bench-sheet-list{overflow:auto;display:grid;gap:12px;align-content:start;padding-right:4px}

/* ---------- What a run or the seam pass made, in the room now: keep it, blend its seams, or go back (22 Oct 2026) ---------- */
.studio-result{display:grid;gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--accent);border-radius:var(--r-md);background:rgba(201,174,124,.10)}
.studio-result p{margin:0;font-size:.9375rem}
.studio-result .row{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- The seams, under the name (22 Oct 2026): whether the walls in use are blended, the pass as it runs (each
   join a chip; the join just painted laid over the room a moment), and before and after in the room, join by join ---------- */
.studio-seamsbox:empty{display:none}
.studio-seamsbox .studio-result{margin:0}
.studio-seams{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.studio-seams.running{border-color:var(--accent);background:rgba(201,174,124,.08)}
.studio-seams.done{border-color:rgba(201,174,124,.45)}
.studio-seams p{margin:0;font-size:.9375rem}
.studio-seams .note{color:var(--paper-dim)}
.studio-seams .row{display:flex;flex-wrap:wrap;gap:8px}
.studio-seams .toggle{display:flex;align-items:center;gap:8px;margin:0;font-size:.875rem;color:var(--paper-dim)}
.seam-joins{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.seam-joins li{padding:3px 9px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:.75rem;color:var(--paper-dim);white-space:nowrap}
.seam-joins li.now{border-color:var(--accent);color:var(--paper);background:rgba(201,174,124,.16)}
.seam-joins li.done{border-color:rgba(201,174,124,.5);color:var(--paper)}
.seam-joins li.failed{border-color:rgba(231,154,143,.6);color:rgba(231,154,143,.95)}
.seam-compare{align-items:center;gap:10px 16px}
.seam-step{display:flex;align-items:center;gap:8px;font-size:.875rem}
.seam-step .btn.sm{min-width:36px;padding:0 10px}

/* While she walks round the room with the keys (22 Oct 2026): the keys, said under it. */
.studio-flyhint{margin:-4px 0 0;color:var(--accent);font-size:.875rem}
.studio-flyhint[hidden]{display:none}

/* The panorama fork (23 Oct 2026): the same place made again as one panorama, under the status. */
.studio-again{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px}
.studio-again .note{flex:1 1 260px;margin:0;font-size:.875rem}

/* "More detail" (23 Oct 2026): the wall refined again in tiles; lit when the wall measures under the house's bar. */
.studio-more{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.studio-more.under{border-color:rgba(201,174,124,.5)}
.studio-more .row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.studio-more .note{margin:0;font-size:.875rem}

/* ============================================================
   The Studio as a workspace (30 Oct 2026): one screen, four regions, no page scroll. The top: the way back,
   the name, chips, cost, jobs, Export, the one loud button. Under it: the outline (left), the stage with its
   filmstrip (middle), the inspector (right). Tokens from temple.css; the rules from DESIGN.md.
   ============================================================ */
.studiopage.one:has(.studio-shell){max-width:none;padding:0 16px 12px}
.studio-shell{display:grid;grid-template-rows:auto minmax(0,1fr);height:calc(100vh - var(--topbar,57px) - 12px);min-height:560px;gap:8px}
.studio-top{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 0;flex-wrap:wrap}
.studio-top .crumb{flex:none}
.studio-top .studio-title{all:unset;cursor:text;min-width:0;max-width:30vw}
.studio-top .studio-title h1{margin:0;font-size:1.25rem;font-weight:500;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-top .studio-title:hover h1{color:var(--accent)}
.studio-top .studio-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.studio-top .grow{flex:1}
.studio-top .chip.dim{color:var(--paper-dim);border-color:var(--line)}
.studio-top .chip.brass{color:var(--accent);border-color:rgba(201,174,124,.5)}
.studio-top .chip .dot{width:8px;height:8px;margin-right:2px}
.studio-menu{position:relative;display:block}
.studio-menu > summary{list-style:none;cursor:pointer;display:inline-flex}
.studio-menu > summary::-webkit-details-marker{display:none}
.studio-menu .menu-body{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:grid;gap:6px;min-width:240px;padding:10px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface-2);box-shadow:0 18px 50px -20px rgba(0,0,0,.9)}
.studio-menu .menu-body .btn{justify-content:flex-start}
.studio-versions .menu-body{left:0;right:auto;min-width:360px}
.collage-files{display:flex;flex-wrap:wrap;gap:8px 14px}
.studio-top .studio-versions .versions .sechead h2{font-size:.9375rem}
.studio-save{display:flex;align-items:center;gap:8px}
.chip.warn{border-color:rgba(227,136,123,.6);color:var(--danger)}
.chip.tiny{min-height:0;padding:1px 6px;font-size:.6875rem;margin-left:6px}
.chip.brass{color:var(--accent);border-color:rgba(201,174,124,.5)}

.studio-work{display:grid;grid-template-columns:224px minmax(0,1fr) 372px;gap:10px;min-height:0}
.studio-outline,.studio-insp{min-height:0;overflow:auto;scrollbar-width:thin;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:12px}
.studio-outline{display:flex;flex-direction:column;gap:16px}
.studio-outsec h3{margin:0 0 6px;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim);display:flex;justify-content:space-between;align-items:baseline}
.studio-outsec h3 .keys{letter-spacing:0;text-transform:none;font-weight:500;color:var(--paper-dim);opacity:.7}
.studio-outsec.grow{margin-top:auto}
.studio-rows{display:grid;gap:2px}
.studio-row{all:unset;display:grid;grid-template-columns:44px minmax(0,1fr) auto 18px;align-items:center;gap:8px;padding:5px 6px;border-radius:8px;cursor:pointer;color:var(--paper);font:inherit}
.studio-row:hover{background:var(--surface-2)}
.studio-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.studio-row.on{background:var(--surface-3)}
.studio-row.picked{box-shadow:inset 0 0 0 1px var(--accent)}
.studio-row.dropping{background:rgba(201,174,124,.16);box-shadow:inset 0 0 0 1px var(--accent)}
.studio-stagewrap.dropping{outline:2px dashed var(--accent);outline-offset:-3px}
.face-tile[draggable="true"]{cursor:grab}
.face-tile[draggable="true"]:active{cursor:grabbing}
.studio-row .th{display:block;height:26px;border-radius:4px;background:#000;overflow:hidden;container-type:size}
.studio-row .th img{width:100%;height:100%;object-fit:cover;display:block}
.studio-row .th.ceiling{width:28px;justify-self:start}
.studio-row .th.blank{background:repeating-linear-gradient(45deg,#333 0 6px,#1b1b1e 6px 12px)}
.studio-insp.bench-blank{gap:14px}
.studio-insp.bench-blank .bench-open{padding:14px 14px 16px}
.studio-insp.bench-blank .bench-open h2{font-size:1rem}
.studio-insp.bench-blank .bench-open .help{font-size:.8125rem}
.studio-top .studio-title:not(button){min-width:0}
.studio-row .nm{display:flex;align-items:center;gap:6px;font-size:.875rem;font-weight:500;min-width:0}
.studio-row .nm .dot{width:7px;height:7px}
.studio-row .st{font-size:.75rem;color:var(--paper-dim);white-space:nowrap}
.studio-row kbd{font:inherit;font-size:.6875rem;color:var(--paper-dim);border:1px solid var(--line-strong);border-radius:4px;padding:0 4px;line-height:16px;text-align:center}
.studio-sources{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.studio-source{all:unset;position:relative;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--surface-3);border:1px solid var(--line);cursor:pointer}
.studio-source img{width:100%;height:100%;object-fit:cover;display:block}
.studio-source span{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;font-size:.625rem;color:var(--paper-dim);background:rgba(14,14,16,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-source.add{display:grid;place-items:center;color:var(--paper-dim);border-style:dashed;font-size:1.25rem}
.studio-source:hover{border-color:var(--line-strong)}
.studio-job{display:grid;gap:6px;padding:8px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font-size:.8125rem;margin-bottom:6px}
.studio-job p{margin:0}
.studio-job.quiet{border:0;background:transparent;color:var(--paper-dim);padding:0}
.studio-job .lib-bar{height:3px}
.studio-job .chip{justify-self:start;font-size:.6875rem;min-height:0;padding:2px 7px}

.studio-stagecol{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px;min-width:0;min-height:0}
.studio-stagewrap{position:relative;min-height:0;display:grid;container-type:size;border:1px solid var(--line);border-radius:var(--r-lg);background:#000;overflow:hidden}
.studio-stagewrap > *{grid-area:1/1}
.studio-stagewrap > [hidden]{display:none!important}
.studio-stagewrap .studio-roomcol.off{visibility:hidden;pointer-events:none}
.studio-stagewrap .studio-roomcol{position:static;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:0;min-height:0}
.studio-stagewrap .studio-roomcol .stage{position:relative;aspect-ratio:auto;height:100%;min-height:0;border-radius:0}
.studio-stagewrap .studio-roomcol .stage iframe{width:100%;height:100%}
.studio-stagewrap .studio-views{margin:0;padding:8px 10px;background:var(--surface);border-top:1px solid var(--line);flex-wrap:wrap}
.studio-stagewrap .studio-views button{min-width:0;min-height:30px;padding:0 10px;font-size:.8125rem}
.studio-stagewrap .studio-flyhint{margin:0;padding:4px 12px 8px;background:var(--surface)}
.studio-modes{position:absolute;z-index:6;top:10px;left:10px;margin:0;padding:3px;background:rgba(14,14,16,.82);border:1px solid var(--line-strong);border-radius:9px;backdrop-filter:blur(6px);align-self:start;justify-self:start}
.studio-modes button{min-height:28px;padding:0 10px;font-size:.8125rem}
.studio-stagewrap .studio-guide{width:min(100cqw - 32px,(100cqh - 68px) * 4580 / 6400);max-width:none;height:auto;aspect-ratio:4580/6400;align-self:center;justify-self:center;margin:52px 16px 16px;padding:0;gap:4px;grid-template-columns:940fr 2700fr 940fr;grid-template-rows:600fr 4000fr 1200fr;box-sizing:border-box;background:var(--ink)}
.studio-stagewrap .studio-guide .studio-wall[data-wall="ceiling"]{aspect-ratio:auto;min-height:0}
.studio-stagewrap .studio-guide .studio-wall[data-wall="front"]{aspect-ratio:auto;max-height:none;min-height:0}
.studio-stagewrap .studio-guide .studio-wall[data-wall="back"]{height:auto;min-height:0}
.studio-surfacestage{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:10px 12px 10px;background:var(--ink);min-height:0}
.studio-surfacestage .studio-stagehead{display:flex;align-items:center;gap:8px;padding-left:200px;min-height:32px;font-size:.875rem}
.studio-surfacestage .studio-stagehead .grow{flex:1}
.studio-surfacestage .studio-figure{min-height:0;height:100%;display:grid;place-items:center;background:#000}
.studio-surfacestage .studio-figure img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.studio-surfacestage .studio-figure.ceiling img{height:100%}
.studio-surfacestage .studio-use{padding:0 2px}
.studio-seltools{display:flex;align-items:center;gap:8px}
.studio-seltools .seg-big.small button{min-height:28px;padding:0 10px;font-size:.8125rem}
.studio-seltools .note{margin:0;font-size:.8125rem}
.studio-seltools kbd,.studio-pick kbd{font:inherit;font-size:.6875rem;border:1px solid var(--line-strong);border-radius:4px;padding:0 4px}
/* The selection on the picture: an SVG over it; the shade dims what is outside; while drawing, a crosshair. */
.studio-region{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.studio-region.drawing{pointer-events:auto;cursor:crosshair;touch-action:none}
.studio-region .shade{fill:rgba(0,0,0,.42)}
.studio-region .sel{fill:rgba(201,174,124,.16);stroke:var(--accent);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.studio-region .sel.bounds{fill:none;stroke-dasharray:8 6}
.studio-region .brush polyline{fill:none;stroke:rgba(201,174,124,.5);stroke-linecap:round;stroke-linejoin:round}
.studio-brushwidth{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--paper-dim)}
.studio-brushwidth input{width:90px;accent-color:var(--accent)}
.studio-figure img{max-height:none}
.studio-film{display:grid;gap:6px;padding:8px 10px 10px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);min-height:0}
.studio-film .studio-takes{padding:2px}
.studio-film .studio-take{width:132px;padding:5px;gap:4px;position:relative;align-content:start}
.studio-film .studio-take .thumb{height:58px}
.studio-film .studio-take.inuse{border-color:rgba(201,174,124,.55)}
.studio-film .studio-take.on{background:var(--surface-3);border-color:var(--accent)}
.studio-film .studio-take.hover{border-color:var(--paper-dim)}
.studio-film .studio-take .onchip{position:absolute;top:9px;left:9px;font-size:.625rem;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--accent);color:#1a160e}
.studio-film .studio-take .cap{display:grid;gap:0;font-size:.75rem}
.studio-film .studio-take .cap .prov{font-weight:400;color:var(--paper-dim);font-size:.6875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-film .studio-take.add{display:grid;place-items:center;align-content:center;text-align:center;border-style:dashed;color:var(--paper-dim);font-size:.75rem;cursor:pointer}
.studio-film .studio-take.add b{font-size:1.25rem;font-weight:300;color:var(--paper);line-height:1}
.studio-film .studio-take.add:disabled{opacity:.5;cursor:default}
.studio-film .studio-pick.slim{padding:8px 4px;border:0;text-align:left;font-size:.8125rem}
.studio-movingrow .studio-moving h3{margin:6px 0 6px;font-size:.8125rem}

.studio-insp{display:flex;flex-direction:column;gap:12px}
.studio-insphead .crumb-label{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim)}
.studio-insphead h2{margin:2px 0 0;font-size:1.25rem;font-weight:500}
.studio-insphead h2 .where{color:var(--paper-dim);font-weight:400;font-size:.9375rem}
.studio-insphead .note{margin:4px 0 0;font-size:.8125rem}
.studio-insp .studio-on .note{margin:0;font-size:.8125rem;line-height:1.45}
.studio-shape{gap:6px;align-items:center}
.studio-verbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.studio-verb{all:unset;display:grid;gap:2px;padding:8px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2);cursor:pointer;color:var(--paper);font:inherit;min-width:0}
.studio-verb b{font-size:.8125rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-verb span{font-size:.6875rem;color:var(--paper-dim);line-height:1.3}
.studio-verb:hover{border-color:var(--line-strong)}
.studio-verb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.studio-verb[aria-pressed="true"]{border-color:var(--accent);background:rgba(201,174,124,.12)}
.studio-verb:disabled{opacity:.45;cursor:default}
.studio-insp .studio-tools{margin:0}
.studio-insp h3{font-size:.8125rem;font-weight:600;margin:2px 0 0}
.studio-insp .studio-words textarea{min-height:88px;font-size:.9375rem}
.studio-insp .studio-acts .btn.lg{min-height:40px;font-size:.9375rem}
.studio-insp .studio-status .lib-making.big{margin:0}
.studio-insp .studio-ledger{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.studio-insp .studio-ledger .row{align-items:baseline;gap:6px}
.studio-insp .studio-ledger b{font-size:1.125rem;font-weight:600}
.studio-insp .studio-ledger .note{margin:4px 0 0;font-size:.8125rem}
.studio-insp .studio-again{margin-top:6px}
.studio-insp .studio-seams,.studio-insp .studio-draft,.studio-insp .studio-failed{font-size:.875rem}
.studio-insp .studio-pickbar{margin:0}
.studio-insp .lib-madefrom summary{font-size:.875rem}
.studio-insp .studio-movingbar{margin-bottom:8px}

@media (max-width:1100px){.studio-work{grid-template-columns:200px minmax(0,1fr) 330px}}
@media (max-width:1000px){
  .studio-shell{height:auto;min-height:0}
  .studio-work{grid-template-columns:minmax(0,1fr)}
  .studio-outline{order:2;flex-direction:row;flex-wrap:wrap}
  .studio-outline .studio-outsec{flex:1 1 240px}
  .studio-outline .studio-sources{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));max-width:320px}
  .studio-stagecol{order:1}
  .studio-stagewrap{min-height:56vw}
  .studio-insp{order:3}
  .studio-surfacestage .studio-stagehead{padding-left:0;padding-top:40px}
}

/* ---------- the New environment sheet (new-environment.js, 30 Oct 2026): who, start from, how to draw it ---------- */
dialog.newenv{width:min(1180px,calc(100vw - 32px));max-width:none;height:min(860px,calc(100vh - 48px));display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;padding:20px 22px}
dialog.newenv:not([open]){display:none}
.newenv-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.newenv-head h2{margin:0}
.newenv-body{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:22px;min-height:0}
.newenv-aside{display:grid;align-content:start;gap:4px;min-width:0;overflow:auto;padding-right:4px}
.newenv-aside .field{margin-bottom:12px}
.newenv-starts{display:grid;gap:4px}
.newenv-starts button{all:unset;box-sizing:border-box;display:grid;gap:2px;padding:10px 12px;border-radius:8px;border:1px solid transparent;cursor:pointer}
.newenv-starts button:hover{background:var(--surface-2)}
.newenv-starts button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.newenv-starts button[aria-checked="true"]{border-color:var(--accent);background:var(--surface-3)}
.newenv-starts .nm{font-weight:600;font-size:.9375rem}
.newenv-starts .ln{font-size:.78rem;color:var(--paper-dim);line-height:1.4}
.newenv-panel{min-width:0;overflow:auto;padding:2px 6px 8px 2px}
.newenv-form{display:grid;gap:4px;max-width:720px}
.newenv-form.wide{max-width:none}
.newenv-form .field{margin-bottom:12px}
.newenv-form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.newenv-form .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-start}
.newenv-form .row.between{justify-content:space-between;align-items:flex-start;gap:8px 16px}
.newenv-ph{margin-bottom:12px}
.newenv-ph h3{font-size:1.25rem;margin:0 0 4px}
.newenv-ph .note{margin:0;font-size:.9rem;line-height:1.5}
.newenv-form .error:empty{display:none}
.newenv-form .link{all:unset;cursor:pointer;color:var(--accent);font-size:.875rem;text-decoration:underline;text-underline-offset:3px}
.newenv-form .link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.newenv-how{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.newenv-how .rec{margin:0;font-size:.9375rem;line-height:1.5;flex:1 1 320px}
.newenv-how .rec b{color:var(--paper)}
.newenv-how .rec .dim,.newenv-how .rec.dim{color:var(--paper-dim)}
.newenv-engines{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.newenv-engines.two{grid-template-columns:1fr 1fr;margin-bottom:12px}
.newenv-engines[hidden]{display:none}
.newenv-engines button[role=radio]{all:unset;box-sizing:border-box;display:grid;gap:4px;align-content:start;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;min-height:100%}
.newenv-engines button[role=radio]:hover{border-color:var(--line-strong)}
.newenv-engines button[role=radio]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.newenv-engines button[aria-checked="true"]{border-color:var(--accent);background:var(--surface-3)}
.newenv-engines .nm{font-weight:600;font-size:.9375rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.newenv-engines .tag{font-size:.7rem;font-weight:500;color:var(--accent);border:1px solid var(--accent);border-radius:var(--r-pill);padding:0 7px}
.newenv-engines .ln{font-size:.8125rem;color:var(--paper-dim);line-height:1.45}
.newenv-engines .mt{font-size:.75rem;color:var(--paper-dim);padding-top:6px;border-top:1px solid var(--line)}
.newenv-engines .btn.quiet{grid-column:1/-1;justify-self:start}
.newenv-dano{display:grid;gap:4px;margin-top:4px}
.newenv-dano[hidden]{display:none}
.newenv-grid{min-width:0}
.newenv-grid .lib-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.newenv .seg-big{margin-bottom:12px}
.newenv .seg-big button[aria-pressed="true"]{border-color:var(--accent);background:var(--surface-3);color:var(--paper)}
@media (max-width:860px){.newenv-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}.newenv-aside{overflow:visible}.newenv-starts{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.newenv-engines.two{grid-template-columns:1fr}.newenv-form .two{grid-template-columns:1fr}}

/* ---------- /studio, the front door (envstudio.js homePage, 30 Oct 2026) ---------- */
.envhero{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 28px;margin:0 0 36px}
.envhero > div{flex:1 1 480px;min-width:0}
.envhero h1{margin:0 0 8px}
.envhero .lead{margin:0;max-width:72ch}
.envhero .btn.lg{flex:0 0 auto;margin-top:6px}
.envhome .lately{margin:0 0 40px}
.envlinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-top:12px}
.envlink{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer}
.envlink:hover{border-color:var(--line-strong);background:var(--surface-2)}
.envlink:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.envlink .appicon{grid-row:1/3;color:var(--paper)}
.envlink .nm{font-weight:600;font-size:.9375rem}
.envlink .ln{font-size:.78rem;color:var(--paper-dim);line-height:1.4}
/* Advanced (the engine's knobs) and Compare (the front by two engines) in the New environment sheet */
.newenv-adv{border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px;background:var(--surface)}
.newenv-adv summary{cursor:pointer;font-size:.875rem;font-weight:500;min-height:28px;display:flex;align-items:center}
.newenv-adv > .note{margin:6px 0 10px;font-size:.8125rem}
.newenv-knobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px 18px;margin-bottom:8px}
.newenv-knob{display:grid;gap:4px}
.newenv-knob .kn{font-size:.8125rem;font-weight:500}
.newenv-knob .kd{color:var(--paper-dim);font-weight:400}
.newenv-knob .kh{font-size:.75rem;color:var(--paper-dim);line-height:1.4}
.newenv-knob .kv{display:grid;grid-template-columns:1fr 92px;gap:8px;align-items:center}
.newenv-knob .kv input[type=range]{width:100%;accent-color:var(--accent)}
.newenv-knob .kv input[type=number]{min-height:34px;padding:0 8px;font-size:.875rem}
.newenv-knob.check{grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.newenv-knob.check input{grid-row:1/3;accent-color:var(--accent);width:18px;height:18px}
.newenv-shownote{padding:8px 12px;border:1px solid rgba(201,174,124,.45);border-radius:var(--r-md);background:rgba(201,174,124,.08)}
.newenv-shownote[hidden]{display:none}
.newenv-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:8px 0 14px}
.cmp-col{display:grid;gap:8px;align-content:start;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.cmp-col.ready{border-color:var(--line-strong)}
.cmp-head{font-size:.9375rem}
.cmp-head .dim{color:var(--paper-dim)}
.cmp-pic{aspect-ratio:2700/1200;background:#000;border-radius:8px;overflow:hidden;display:grid;place-items:center}
.cmp-pic img{width:100%;height:100%;object-fit:contain;display:block}
.cmp-pic .wait{color:var(--paper-dim);font-size:.875rem;padding:12px;text-align:center}
.cmp-col .note{margin:0;font-size:.8125rem}