/* Area: inspector (S05 inspector panel, S07 asset detail, S08 compare, S09 restore, S10 viewer, S20/S21 editor host).
   Owned by the inspector screen agent. Loaded on every page by base.html. Page rules are scoped under
   .pg-inspector; the panel, its popovers and the upload modal also appear on other areas' pages (the
   pack grid's #inspector, #modal), so those are scoped under the area's own .xi-* classes instead.
   Shared classes from components.css (.history .hl .hcard .vpick .vp .big .bp .look .flag .menu …) are reused. */

/* ---------- model-viewer and its fallback (panel, stage, compare, viewer) ---------- */
.xi-mv-wrap,.xi-preview,.pg-inspector .stage,.pg-inspector .bp .th{position:relative}
model-viewer.xw-mv{width:100%;height:100%;background:transparent}
.mv-fallback{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;text-align:center;color:var(--text-2);font-size:12px}
.mv-fallback[hidden]{display:none}
/* RS4: a rigged version's clip picker (over the model-viewer, bottom right of the frame) and the Rigged badge */
.mv-clips{position:absolute;right:10px;top:10px;z-index:3;display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font:500 11px var(--mono);color:var(--text-2)}
.mv-clips[hidden]{display:none}
.mv-clips select{max-width:160px}
.xi-rigged{color:var(--lime);border-color:var(--lime-line);background:var(--lime-soft)}
.mv-fallback img{max-height:62%;max-width:90%;object-fit:contain;padding:0}
.mv-fallback span{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;background:var(--overlay);border:1px solid var(--overlay-line);border-radius:var(--radius-badge);padding:3px 8px}
.mv-fallback a{color:var(--lime);text-decoration:underline;text-underline-offset:2px}
.xw-mv-failed > model-viewer{visibility:hidden}

/* ---------- Popovers (restore confirm, discard confirm) ---------- */
.menu.xi-pop{width:min(320px,calc(100vw - 32px));padding:12px;gap:10px;white-space:normal}
.xi-pop form{display:flex;flex-direction:column;gap:10px}
.xi-pop .q{font-size:12.5px;color:var(--text-2);line-height:1.5}
.xi-pop .q b{color:var(--text);font-weight:600}
.xi-pop p.muted{font-size:11.5px}
.xi-alert{padding:9px 12px;font-size:12.5px;color:var(--text-2)}
.xi-alert .ic{width:24px;height:24px}
/* An editor closed under its tab (Sprite Editor, Texture Studio, Audio Workbench; _closed_banner.html): the banner
   sits in the page flow above the editor, never over it (review 6: fixed under the top bar it covered the toolbar,
   Export maps included). While it shows, the main column stacks it and the editor, and the editor keeps the rest of
   the height, so every control stays where it was, only lower, and none is under the banner. An editor wider than a
   phone scrolls sideways under it: the banner keeps to the left edge of the column (sticky left), never off screen. */
.banner.err.xi-closed{position:sticky;left:0;z-index:5;flex:none;flex-wrap:wrap;margin:0;border-radius:0;border-width:0 0 1px;padding:8px 12px;gap:6px 10px;font-size:13px;background:linear-gradient(90deg,rgba(255,107,107,.2),rgba(255,107,107,.1)),var(--panel)}
.xi-closed .ic{width:26px;height:26px}
.xi-closed .grow{flex:1;min-width:160px;margin:0;color:var(--text);line-height:1.45}
.xi-closed .r{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.focused-main:has(> .xi-closed:not([hidden])){display:flex;flex-direction:column}
.focused-main:has(> .xi-closed:not([hidden])) > :is(.sp-editor,.aw){flex:1 1 0;min-height:0;height:auto}
.focused-main:has(> .xi-closed:not([hidden])) > .spe{flex:1 1 auto;height:auto}

/* ---------- Inspector panel as the stage (S05; inside #inspector on any page; SHELL-SPEC §6) ----------
   Header (.colbar.xi-sbar), the big view (.stageview.xi-sv, its overlays), the footer (.stageft.xi-sft:
   versions strip, facts, actions), then the scrolling body (.colbody.xi-sbody). */
.xi-sbar{flex:none;container-type:inline-size}
/* A narrow stage keeps the Texture Studio tile and drops its words (the title still says it). */
@container (max-width:560px){
  .xi-sbar .xi-tslbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .xi-sbar .xi-tsbtn{padding:0 9px}
}
/* A phone sheet: name and buttons on the first row, the Model | Concept | Textures switch under them. */
@container (max-width:420px){
  .xi-sbar .xi-kinds{order:5;width:100%}
  .xi-sbar .xi-kinds > *{flex:1;justify-content:center}
}
.xi-sbar .sheet-close{align-self:center;flex:none}
.xi-who{display:flex;flex-direction:column;justify-content:center;gap:1px;flex:1 1 150px;min-width:0;min-height:32px}
.xi-who h2{line-height:1.2}
.xi-sbar .seg,.xi-sv .seg{flex:none}
.xi-sbar .seg > a,.xi-sbar .seg > span,.xi-sv .seg > a{height:26px;padding:0 10px}
.xi-sbar .seg > .off{color:var(--faint);cursor:default}
.xi-sbar .btn .xi-tile{width:16px;height:16px;font-size:7.5px}
.xi-panel{display:flex;flex-direction:column;min-width:0;flex:1 0 auto}
.xi-panel > .alert-slot,.xi-panel > .banner,.xi-editbar{margin:12px 16px 0}
.xi-editbar{padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-panel);background:var(--panel)}
.xi-panel > .xi-sv{flex:none;height:clamp(300px,calc(100dvh - 230px),860px);min-height:0}
.xi-sv .frame{position:relative}
.xi-sv .frame > .xi-video{width:100%;height:100%;object-fit:contain;background:#000}
.xi-sv.xi-noversion .frame{background:var(--planned-stripes)}
.xi-sv .frame > .noprev{padding:12px;text-align:center}
.xi-sv .xi-gen{color:var(--violet-text)}
.xi-sv .ov.tl{right:16px;align-items:flex-start}
.xi-sv .ov.bl{right:104px}
.xi-sv .ov.br{gap:4px}
.xi-sv .ov .icon-btn{background:var(--overlay);border-color:var(--overlay-line);color:var(--text)}
.xi-sv .ov .seg{background:var(--overlay);backdrop-filter:blur(4px)}
.xi-sv .ov .status{backdrop-filter:blur(4px)}
.xi-sv .xi-stale{white-space:normal}
/* The look block (it polls while checking) rides on the view as chips: one line each, flowing with the
   status pill (the block itself stays in the DOM as the poll target). */
.xi-sv .xi-look{display:contents}
.xi-sv .xi-look .look-ok,.xi-sv .xi-look .flag,.xi-sv .xi-look .look{padding:4px 10px 4px 5px;gap:8px;border-radius:var(--radius-ctl);backdrop-filter:blur(6px);min-width:0;max-width:100%;flex-wrap:nowrap}
.xi-sv .xi-look .look{background:var(--overlay)}
.xi-sv .xi-look .look-ok .ic{width:18px;height:18px}
.xi-sv .xi-look .flag .pv{display:none}
.xi-sv .xi-look .flag .grow,.xi-sv .xi-look .look-ok > div,.xi-sv .xi-look .look .grow{min-width:0}
.xi-sv .xi-look .look-ok > div,.xi-sv .xi-look .flag .grow{display:flex;align-items:baseline;gap:8px}
.xi-sv .xi-look .look-ok .d,.xi-sv .xi-look .flag .d,.xi-sv .xi-look .look .d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.xi-sft{flex:none}
.xi-strip{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.xi-ver{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--panel);color:var(--text-2);text-decoration:none;min-width:0;max-width:190px}
.xi-ver:hover{border-color:var(--line-2);color:var(--text)}
.xi-ver.on{border-color:var(--lime-line);box-shadow:0 0 0 1px var(--lime-line);color:var(--text)}
.xi-ver .th{width:32px;height:32px;border-radius:var(--radius-seg);overflow:hidden;display:grid;place-items:center;background:var(--thumb-warm);color:var(--muted);flex:none}
.xi-ver .th img{width:100%;height:100%;object-fit:cover}
.xi-ver .th .i{width:14px;height:14px}
.xi-ver .tx{min-width:0}
.xi-ver b{display:block;font:600 11.5px var(--mono);color:inherit}
.xi-ver small{display:block;font:500 10.5px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xi-vmore{padding:0 12px;min-height:42px;font:600 11.5px var(--mono)}
.xi-facts{display:flex;gap:4px 14px;flex-wrap:wrap;font:500 11.5px var(--mono);color:var(--muted);min-width:0}
.xi-facts i{font-style:normal;color:var(--text-2)}
.xi-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.xi-acts .xi-cell{display:contents}
.xi-acts .xi-more .menu{min-width:250px}
.xi-sbody{display:flex;flex-direction:column;gap:18px}
.xi-sbody > section{display:flex;flex-direction:column;min-width:0}
/* The idle stage (_stage_idle.html, .stageempty). */
.xi-idle .ic{width:42px;height:42px;border-radius:var(--radius-panel);background:var(--raised-2);color:var(--text-2);display:grid;place-items:center;justify-self:center}
.xi-idle .ic .i{width:20px;height:20px}
.xi-idle h3{font-size:15px;color:var(--text);max-width:34ch}
.xi-idle p{font-size:12.5px;max-width:40ch}
.xi-stale-approval{margin-top:-6px}
.xi-stale-approval .status{white-space:normal}
.xi-inline{display:flex;flex-direction:column;gap:8px}
.xi-inline .help,.xi-inline .fld .help{font-size:11.5px;color:var(--muted)}
.xi-look{display:flex;flex-direction:column;gap:6px;min-width:0}
.xi-look:empty{display:none}
.xi-look .look{flex-wrap:wrap}
.xi-look .look .d{min-width:0;overflow:hidden;text-overflow:ellipsis}
.xi-look .flag .grow{min-width:0}
.xi-look .flag .xi-pv-ic{display:grid;place-items:center;color:var(--warn)}
.xi-look .xi-exc .status{flex:none}
.xi-look .look .r{flex:none}
.xi-fix{display:flex;gap:6px;flex-wrap:wrap}
.xi-fix .btn{flex:1 1 0;min-width:0}
.xi-history{min-width:0}
.xi-history .history{margin:0;padding:0}
.xi-hrow{min-width:0}
.xi-history .history .d{max-width:100%}
.xi-all{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:12px;color:var(--text-2)}
.xi-all:hover{color:var(--lime)}
.xi-none{font-size:12px}
.xi-tile{width:18px;height:18px;border-radius:5px;display:inline-grid;place-items:center;font:700 8.5px var(--head);flex:none;letter-spacing:0}
.xi-tags{display:flex;flex-direction:column;gap:6px}
.xi-tags .tags{align-items:center}
.xi-tags .tag{padding-right:4px;gap:3px}
.xi-tag-x{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;color:var(--muted)}
.xi-tag-x:hover{color:var(--text);background:var(--raised-2)}
.xi-tag-x .i{width:9px;height:9px}
.xi-tag-add{display:inline-flex;flex-direction:column;gap:6px}
.xi-tag-add > summary.tag{list-style:none}
.xi-tag-add[open] > summary{color:var(--text);border-color:var(--lime-line)}
.xi-tag-form{display:flex;gap:6px;align-items:center}
.xi-tag-form .inp{height:28px;font-size:12px;width:150px}
.xi-provline{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;color:var(--muted);padding-top:2px;border-top:1px solid var(--line);padding-top:12px}
.xi-provline b{color:var(--text-2);font-weight:500}
/* The provenance line is the way into "Rights & AI": a quiet button, dashed (muted) while rights are Unknown or
   reference-only, with a "Add rights" / "Change" affordance at the end. */
.xi-provbtn{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:inherit;text-decoration:none;border-radius:var(--radius-box);padding:2px 6px;margin:-2px -6px;cursor:pointer}
.xi-provbtn:hover,.xi-provbtn:focus-visible{background:var(--raised);outline:none}
.xi-provbtn.dashed{border:1px dashed var(--line)}
.xi-provbtn .xi-provset{font-size:11px;color:var(--lime);font-weight:600}
.xi-provbtn.dashed .xi-provset{color:var(--warn)}
.xi-rights-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.xi-rightsform fieldset[disabled] .l{color:var(--muted)}
.xi-fixture-line{font:500 10.5px var(--mono);color:var(--muted)}
.xi-libnote{font-size:12px}

/* ---------- Work column headers (detail, compare, viewer): .colbar ---------- */
/* Positioned, so absolutely placed bits (.sr-only labels) scroll with their column instead of the page. */
.xi-dbody,.xi-viewer,.xi-compare,.xi-sbody{position:relative}
.pg-inspector .colbar h1{flex:0 1 auto}
.pg-inspector .colbar .crumb{flex:0 1 auto}
.pg-inspector .colbar .chip{max-width:200px;flex:0 1 auto}
.pg-inspector .colbar .chip .ellipsis{max-width:150px}
.pg-inspector .colbar .icon-btn,.pg-inspector .colbar .btn,.pg-inspector .colbar form{flex:none}
.pg-inspector .xi-who .pass{color:var(--pass)}
.pg-inspector .colbody > .banner{margin-bottom:12px}
.pg-inspector .xi-stale-approval{margin:0 0 12px}

/* ---------- S07 asset detail: work = history transcript + Facts, stage = viewer + version picker ---------- */
.xi-tabs{flex:none}
.xi-tabs > label{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--radius-seg);color:var(--muted);font-weight:500;cursor:pointer;white-space:nowrap}
.xi-tabs > label:hover{color:var(--text)}
.xi-tabs > input:checked + label{background:var(--raised-2);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.xi-tabs > input:focus-visible + label{outline:2px solid var(--lime);outline-offset:1px}
.pg-inspector-detail #center:has(#xi-dtab-facts:checked) .xi-dhist,
.pg-inspector-detail #center:not(:has(#xi-dtab-facts:checked)) .xi-dfacts{display:none}
.xi-showstage{display:none}
.xi-dfacts{display:flex;flex-direction:column;gap:16px;min-width:0}
.xi-what .row{padding:4px 0;border-bottom:1px solid var(--line);align-items:center}
.xi-what .row:last-child{border-bottom:0}
.xi-what .row > :last-child .status{font-family:var(--ui)}
.xi-dhist .hl li{padding-bottom:14px}
.xi-dhist .hcard{background:var(--panel)}
.hcard .xi-hchip{display:inline-flex;margin-top:8px;max-width:100%}
.xi-stagealert:not(:empty){margin:12px 16px 0}
.xi-dsv .ov.tl{right:16px}
.xi-dsv .ov.bl{right:auto}
.xi-dsv .ov.bl .menu{min-width:300px}
.xi-dsv .ov.br{left:auto;max-width:calc(100% - 180px);justify-content:flex-end}
.xi-fileline{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 11px var(--mono);color:var(--text-2);background:var(--overlay);border:1px solid var(--overlay-line);padding:3px 8px;border-radius:var(--radius-badge)}
.xi-ver.xi-parent{border-style:dashed;background:transparent}
.xi-ver .tagai{vertical-align:1px}
.xi-stage-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:var(--planned-stripes)}
.xi-stage-empty p{max-width:52ch;font-size:12.5px}
.xi-stage-empty .row{justify-content:center}
.xi-job{width:min(360px,100%);text-align:left}
.xi-hhead{display:flex;align-items:baseline;gap:8px;margin-bottom:12px}
.xi-hhead h3{font-size:16px}
.xi-hhead .muted{font-size:12.5px}
.xi-history .hl{margin:0;padding:0}
.xi-history .hcard .top b{font-size:13px}
.xi-history .hcard .kvs a{color:var(--text-2);text-decoration:underline dotted;text-underline-offset:2px}
.xi-history .hcard .kvs a:hover{color:var(--lime)}
.xi-pill{margin-left:0}
.xi-badges{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;align-items:center}
.xi-derived{margin-left:0}
.xi-arch{font-style:normal;color:var(--warn)}
.hl li.xi-viewing .hcard{border-color:var(--violet-line)}
.hl li.xi-viewing .node{border-color:var(--violet)}
.xi-collapsed{min-width:0}
.xi-collapsed > summary{display:block;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--raised);color:var(--text-2);font-size:12.5px}
.xi-collapsed > summary .v{font:500 11px var(--mono);color:var(--muted)}
.xi-collapsed > summary:hover{border-color:var(--line-2)}
.xi-collapsed[open] > summary{margin-bottom:6px}
.xi-provbox .prov .row{padding:4px 0;border-bottom:1px solid var(--line)}
.xi-provbox .prov .row:last-of-type{border-bottom:0}
.xi-provbox .xi-fixture-line{margin-top:8px}

/* ---------- S08 compare ---------- */
.xi-pickform{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.xi-pickform select.inp{width:auto;max-width:210px;height:32px;font-size:12.5px}
.pg-inspector-compare .big{margin-top:4px}
.pg-inspector-compare .bp{display:flex;flex-direction:column}
.pg-inspector-compare .bp .th{height:clamp(300px,calc(100dvh - 330px),620px)}
.pg-inspector-compare .bp.xi-cur{border-color:var(--lime-line)}
.xi-pane-h{border-top:0!important;border-bottom:1px solid var(--line);min-width:0}
.xi-pane-h .ellipsis{min-width:0;flex:0 1 auto}
.xi-pane-h .pill,.xi-pane-h .status{margin-left:0}
.xi-pane-f .push{flex:1}
.xi-raster img{padding:20px}
.xi-raster.px1{overflow:auto;display:grid;place-items:center}
.xi-raster.px1 img{width:auto;height:auto;max-width:none;object-fit:none;image-rendering:pixelated;padding:0}
.xi-cmp-tools{display:flex;justify-content:flex-end;margin-bottom:8px}
.xi-sync-note{display:flex;align-items:center;gap:6px;font-size:12px;margin-top:8px}
.xi-diff{margin-top:22px}
.xi-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-panel)}
.xi-difftable{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--panel)}
.xi-difftable th,.xi-difftable td{padding:8px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.xi-difftable tr:last-child th,.xi-difftable tr:last-child td{border-bottom:0}
.xi-difftable thead th{font:600 10.5px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
.xi-difftable tbody th{font:500 11px var(--mono);color:var(--muted);width:150px;white-space:nowrap}
.xi-difftable td{font:500 12px var(--mono);color:var(--text);overflow-wrap:anywhere}
.xi-difftable tr.chg td{background:var(--lime-soft)}
.xi-difftable tr.chg th{color:var(--lime)}

/* ---------- S10 viewer ---------- */
.pg-inspector-viewer .vw{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;height:clamp(420px,calc(100dvh - 230px),1000px)}
.pg-inspector .vp3{border-radius:var(--radius-panel);border:1px solid var(--line);position:relative;overflow:hidden;background:var(--viewer-bg);min-width:0;min-height:0}
.pg-inspector .vp3 .floor{position:absolute;left:-10%;right:-10%;bottom:-6%;height:46%;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;transform:perspective(500px) rotateX(62deg);transform-origin:bottom;opacity:.55;-webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%);pointer-events:none}
.pg-inspector .vp3.xi-ch-uv .floor,.pg-inspector .vp3.xi-ch-albedo .floor,.pg-inspector .vp3.xi-ch-normal .floor,.pg-inspector .vp3.xi-ch-roughness .floor,.pg-inspector .vp3.xi-ch-metallic .floor,.pg-inspector .vp3.xi-ch-height .floor,.pg-inspector .vp3.xi-ch-image .floor{display:none}
.xi-stage{position:absolute;inset:0;z-index:1}
.pg-inspector .chs{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:4;display:flex;gap:4px;padding:4px;border-radius:var(--radius-pop);background:rgba(12,14,20,.8);border:1px solid var(--line-2);backdrop-filter:blur(6px);max-width:calc(100% - 24px);overflow-x:auto}
.pg-inspector .chs a{height:30px;padding:0 12px;border-radius:var(--radius-ctl);display:inline-flex;align-items:center;gap:7px;color:var(--text-2);font-weight:500;white-space:nowrap;flex:none}
.pg-inspector .chs a:hover{color:var(--text);background:var(--raised)}
.pg-inspector .chs a i{width:9px;height:9px;border-radius:3px;display:block}
.pg-inspector .chs a.on{background:var(--lime);color:var(--lime-ink);font-weight:600}
.pg-inspector .chs a.on i{background:var(--lime-ink)!important}
.pg-inspector .chs a.off{opacity:.5}
.pg-inspector .hud{position:absolute;z-index:3;font:500 11px/1.6 var(--mono);color:var(--muted);pointer-events:none}
.pg-inspector .hud.tl{top:62px;left:16px}
.pg-inspector .hud.tr{top:62px;right:16px;text-align:right}
.pg-inspector .hud.gizmo{right:22px;bottom:78px}
.pg-inspector .hud .i{width:10px;height:10px;vertical-align:-1px;margin-right:4px}
.pg-inspector .hud .pass{color:var(--pass)}
.pg-inspector .tt{position:absolute;bottom:14px;left:14px;right:14px;z-index:4;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--radius);background:rgba(12,14,20,.8);border:1px solid var(--line-2);min-width:0}
.pg-inspector .tt .play{width:30px;height:30px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;flex:none}
.pg-inspector .tt .play .i{width:12px;height:12px}
.pg-inspector .tt .play[aria-pressed="false"]{background:var(--raised-2);color:var(--text)}
.pg-inspector .tt .bar{flex:1;min-width:60px;accent-color:var(--lime)}
.pg-inspector .tt .chip{height:26px;flex:none}
.pg-inspector .tt .chip.on{border-color:var(--line-2)}
.xi-angle{font-size:11px;color:var(--text-2);white-space:nowrap;min-width:104px}
.xi-maptools{justify-content:flex-start}
.xi-maptools .muted{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.xi-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
.xi-canvas:active{cursor:grabbing}
.xi-canvas-msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:12.5px;z-index:2;pointer-events:none;padding:24px;text-align:center}
.xi-canvas-msg[hidden]{display:none}
.xi-map{position:absolute;inset:92px 16px 70px;display:grid;place-items:center;overflow:auto}
.xi-map img{max-width:100%;max-height:100%;object-fit:contain;border:1px solid var(--line);border-radius:6px;background:repeating-conic-gradient(#1A1F2D 0 25%,#141824 0 50%) 0 0/16px 16px}
.xi-map.px1{place-items:start center}
.xi-map.px1 img{max-width:none;max-height:none;image-rendering:pixelated}
.xi-side{display:flex;flex-direction:column;gap:12px;min-width:0;overflow:auto}
.xi-side .panel{padding:14px 16px}
.xi-side .kv{padding:6px 0}
.xi-side .kv .v{overflow-wrap:anywhere}
.xi-note{font-size:11.5px;color:var(--text-2);display:flex;gap:6px;align-items:flex-start;margin-top:8px;line-height:1.45}
.xi-note .i{margin-top:2px;flex:none;color:var(--muted)}
.xi-sidebtns{display:grid;grid-template-columns:1fr;gap:6px}
.pg-inspector .strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-top:14px}
.pg-inspector .ct{border:1px solid var(--line);border-radius:var(--radius-box);overflow:hidden;background:var(--panel);display:block;min-width:0}
.pg-inspector .ct:hover{border-color:var(--line-2)}
.pg-inspector .ct .th{height:70px;background:#12151E;position:relative;overflow:hidden}
.pg-inspector .ct .th img{width:100%;height:100%;object-fit:contain;padding:4px}
.pg-inspector .ct .th .noprev{position:absolute;inset:0;justify-content:center}
.pg-inspector .ct .th canvas{position:absolute;inset:0;width:100%;height:100%}
.pg-inspector .ct .th canvas.drawn + .xi-mini-ic{display:none}
.pg-inspector .ct .m{padding:5px 9px;font-size:11.5px;display:flex;justify-content:space-between;gap:6px;min-width:0}
.pg-inspector .ct .m span{font:500 10px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-inspector .ct.on{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
.pg-inspector .ct.off{opacity:.5}

/* ---------- S20/S21 editor host (focused layout) ---------- */
.pg-inspector-editor .focused-main{padding:0}
.xi-tool{display:grid;grid-template-rows:46px minmax(0,1fr);height:calc(100dvh - var(--topbar-h));min-width:0}
.pg-inspector .tbar{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--panel);min-width:0;overflow:hidden;white-space:nowrap}
.pg-inspector .tbar .tn{display:flex;align-items:center;gap:8px;font:600 14px var(--head);flex:none}
.pg-inspector .tbar .ic{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font:700 10px var(--head)}
.pg-inspector .tbar .tag{flex:none}
.pg-inspector .tgrid{display:grid;grid-template-columns:260px minmax(0,1fr) 300px;min-height:0}
.pg-inspector .tl2,.pg-inspector .tr2{padding:14px;display:flex;flex-direction:column;gap:10px;overflow:auto;min-width:0}
.pg-inspector .tl2{border-right:1px solid var(--line)}
.pg-inspector .tr2{border-left:1px solid var(--line)}
.pg-inspector .tl2 .sec-h,.pg-inspector .tr2 .sec-h{margin:6px 0 0}
.pg-inspector .slot{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--panel);min-width:0}
.pg-inspector .slot .sq{width:40px;height:40px;border-radius:var(--radius-sm);overflow:hidden;flex:none;display:grid;place-items:center;background:var(--raised-2);color:var(--muted)}
.pg-inspector .slot .sq img{width:100%;height:100%;object-fit:cover}
.pg-inspector .slot.on{border-color:var(--lime);box-shadow:0 0 0 1px var(--lime)}
.pg-inspector .slot b{font-weight:600;font-size:12.5px;display:block}
.pg-inspector .slot small{font:500 10.5px var(--mono);color:var(--muted)}
.xi-lock{flex:none}
.xi-palette{display:flex;flex-wrap:wrap;gap:6px}
.xi-swatch{display:inline-flex;gap:6px;align-items:center;font-size:11px;color:var(--text-2);border:1px solid var(--line);border-radius:var(--radius-pill);padding:2px 9px 2px 3px;background:var(--panel)}
.xi-swatch i{width:14px;height:14px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.3)}
.pg-inspector .canvas{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:32px 24px 18px;background:radial-gradient(90% 90% at 50% 35%,#3A2E24 0%,#14110E 80%);overflow:auto;min-width:0}
.pg-inspector .canvas.ps{background:#0B0D13 radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/16px 16px}
.xi-hostcard{max-width:660px;width:100%;display:flex;flex-direction:column;gap:16px;background:rgba(20,24,36,.94);backdrop-filter:blur(4px)}
.xi-hc-h{align-items:flex-start;gap:14px}
.xi-hc-h h2{font-size:18px;line-height:1.25}
.xi-hc-h p{margin-top:4px}
.xi-bigtile{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font:700 15px var(--head);flex:none}
.xi-steps{list-style:none;display:flex;flex-direction:column;gap:10px;margin:0;padding:0}
.xi-steps li{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:var(--radius-box);background:var(--panel);flex-wrap:wrap;min-width:0}
.xi-steps .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 11px var(--mono);background:var(--raised-2);flex:none}
.xi-steps b{font-weight:600}
.xi-steps small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.xi-stageform{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.xi-file{height:auto!important;padding:6px!important;font-size:12px!important}
.xi-stageform .xi-file{flex:1 1 220px;min-width:0}
.xi-stageform select.inp{width:auto;height:32px}
.xi-staged ul{list-style:none;display:flex;flex-direction:column;gap:4px;margin:0;padding:0}
.xi-staged li{display:flex;gap:8px;align-items:center;font-size:12px;min-width:0;flex-wrap:wrap}
.xi-staged li.ok > .i{color:var(--pass)}
.xi-staged li.bad > .i{color:var(--fail)}
.pg-inspector .savebar{position:sticky;bottom:18px;margin-top:auto;display:flex;gap:10px;align-items:center;padding:10px 12px 10px 16px;border-radius:var(--radius-panel);background:var(--raised);border:1px solid var(--line-2);box-shadow:var(--shadow-pop);white-space:nowrap;z-index:5;max-width:100%;flex-wrap:wrap}
.pg-inspector .savebar .t2{overflow:hidden;text-overflow:ellipsis;min-width:0}
.pg-inspector .savebar form{margin:0}
.pg-inspector .mats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pg-inspector .mt{border:1px solid var(--line);border-radius:var(--radius-box);overflow:hidden;background:var(--panel);display:block;min-width:0}
.pg-inspector .mt img,.pg-inspector .mt .noprev{width:100%;height:78px;object-fit:cover;display:flex;align-items:center;justify-content:center}
.pg-inspector .mt .c{padding:5px 8px;font-size:11.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-inspector .mt:hover{border-color:var(--line-2)}
.xi-prevbox{height:180px;border:1px solid var(--line);border-radius:var(--radius);background:var(--stage-warm);display:grid;place-items:center;overflow:hidden}
.xi-prevbox img{width:100%;height:100%;object-fit:contain;padding:10px}
.xi-hostprov{margin-top:auto}
.xi-small{display:none}
.xi-hoststate{padding:48px 24px;display:grid;justify-items:center;align-content:start}
.xi-hoststate .empty{max-width:560px;width:100%}
.xi-hoststate .xi-wide-only,.xi-hoststate .xi-small{max-width:560px;width:100%}

/* ---------- Upload new version (#modal; any page) ---------- */
.xi-upload fieldset.fld{border:0;padding:0;margin:0;min-width:0}
.xi-upload legend.l{padding:0;margin-bottom:5px}
.xi-radios{display:grid;grid-template-columns:repeat(auto-fill,minmax(106px,1fr));gap:6px}
.xi-radios.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.xi-radios .opt{padding:8px 10px;align-items:center}
.xi-radios .opt small{display:block;font-size:10.5px}
.xi-radios .opt:has(input:checked){border-color:var(--lime-line);background:var(--lime-soft)}
.xi-confirm.err{border-color:var(--fail)}
.xi-upload .fld .msg{display:block}

/* ---------- Responsive (SHELL-SPEC §5) ---------- */
@media (max-width:1180px){
  .pg-inspector-viewer .vw{grid-template-columns:minmax(0,1fr);height:auto}
  .pg-inspector-viewer .vp3{height:520px}
  .xi-side{overflow:visible}
  .pg-inspector .tgrid{grid-template-columns:220px minmax(0,1fr)}
  .pg-inspector .tr2{display:none}
}
@media (max-width:979px){
  /* The stage is a sheet (SHELL-SPEC §5): the detail page's work column gets a button that opens it. */
  .xi-showstage{display:inline-flex}
  .xi-panel > .xi-sv{height:clamp(260px,52dvh,460px)}
  .xi-dsv{min-height:300px}
}
@media (max-width:900px){
  .pg-inspector-compare .big{grid-template-columns:minmax(0,1fr)}
  .pg-inspector-compare .big .vs{padding:6px 0}
  .pg-inspector-compare .bp .th{height:320px}
}
@media (max-width:767px){
  .pg-inspector-viewer .vp3{height:420px}
  .xi-dsv .ov.br .xi-fileline,.xi-vbar .chip,.xi-cbar .crumb{display:none}
  .xi-cbar .xi-pickform{width:100%}
  .pg-inspector .hud.tr,.pg-inspector .hud.gizmo{display:none}
  .pg-inspector .tt{gap:8px;padding:6px 8px}
  .xi-angle{display:none}
  .xi-pickform select.inp{max-width:140px}
  .xi-small{display:block;padding:24px 16px}
  .xi-hoststate .xi-small{padding:0}
  .xi-wide-only{display:none}
  .xi-tool{grid-template-rows:auto auto;height:auto}
  .pg-inspector .tgrid{display:none}
  .xi-hoststate{padding:24px 16px}
  .pg-inspector .tbar .tag{display:none}
  .xi-radios.three{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (pointer:coarse){
  .xi-tag-x{width:28px;height:28px}
  .pg-inspector .chs a{height:40px}
}

/* viewer notes added by the canvas island */
.pg-inspector .hud.xi-partial{left:16px;bottom:70px;color:var(--warn)}
.pg-inspector .hud.xi-solid{left:16px;bottom:70px;pointer-events:auto}
/* Transparency per material (Opaque / Cut-out / Blend) in the details panel */
.xi-matsec .xi-matform{display:grid;gap:6px}
.xi-matrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.xi-matrow .nm{min-width:0;flex:1 1 auto;color:var(--text-2)}
.xi-matrow .nm i{font-style:normal;color:var(--muted);font-size:11px}
.xi-matrow .inp{flex:0 0 auto;width:120px}
.xi-canvas-msg.xi-err{color:var(--text-2)}
.xi-look .xi-variants,.xi-look .xi-generating{border-color:var(--violet-line);background:linear-gradient(90deg,rgba(139,92,246,.10),rgba(139,92,246,.03))}
.xi-look .xi-variants{border-color:var(--lime-line);background:linear-gradient(90deg,rgba(199,255,77,.09),rgba(199,255,77,.02))}
.xi-look .xi-variants b{color:var(--lime);font-weight:600}
.xi-look .xi-generating b{color:var(--violet-text);font-weight:600}
.xi-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--violet);box-shadow:0 0 0 3px var(--violet-soft);animation:xw-pulse 1.6s ease-in-out infinite}
.xi-variants .xi-dot{background:var(--lime);box-shadow:0 0 0 3px var(--lime-soft);animation:none}
.xi-provbox .prov .row > :first-child{white-space:nowrap}
.xi-history .history .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xi-history .history .tool{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.pg-inspector .vp3.xi-ch-uv .hud.tl,.pg-inspector .vp3.xi-ch-uv .hud.tr{top:auto;bottom:14px}
/* model-viewer's own shadow styles are blocked by the CSP (see the inspector report), so its default
   AR button and progress bar are replaced by empty slots, and every 3D box clips its content. */
.pg-inspector .bp .th,.pg-inspector .vp3 .xi-stage{overflow:hidden}
.xi-mv-progress{display:none}

/* Edit image panel (ui/inspector/_image_edit.html) */
.xi-imgedit .xi-ie-sources { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.xi-imgedit .xi-ie-list { list-style: none; margin: 0; padding: 0; }
.xi-imgedit .xi-ie-src { display: flex; gap: 10px; align-items: center; }
.xi-imgedit .xi-ie-src .ic, .xi-imgedit .ref-opt .ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 6px; background: var(--surface-2, #1b1d22); }
.xi-imgedit .xi-ie-src .ic img, .xi-imgedit .ref-opt .ic img { width: 100%; height: 100%; object-fit: cover; }
.xi-imgedit .xi-ie-src small { display: block; color: var(--muted, #8b8f98); }
.xi-imgedit .xi-ie-pick .refs-menu { position: static; max-height: 240px; overflow: auto; }
.xi-imgedit .xi-ie-more summary { cursor: pointer; }
.xi-imgedit [hidden] { display: none !important; }

/* Audio assets: the waveform player (ui/inspector/_audio.html, islands/audio-player.js). */
.stageview .frame.xa-frame{aspect-ratio:auto;height:auto;width:min(88%,860px);max-width:none;padding:20px;place-items:stretch}
.xa-player{display:flex;flex-direction:column;gap:12px;width:100%;min-width:0}
.stageview .frame > .xa-player{width:min(92%,720px);justify-self:center;align-self:center}
.xa-wave{position:relative;height:180px;border-radius:10px;background:var(--canvas);box-shadow:0 0 0 1px var(--line)}
.xa-player.compact .xa-wave{height:120px}
.xa-canvas{display:block;width:100%;height:100%;cursor:pointer;border-radius:10px;touch-action:none}
.xa-canvas:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.xa-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px}
.xa-time{font-variant-numeric:tabular-nums;color:var(--violet-text)}
.xa-facts{font-size:11.5px}
.xa-more{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:12px}
.xa-exports{display:flex;gap:8px;flex-wrap:wrap}
.xa-loop{display:flex;gap:10px;align-items:end;flex-wrap:wrap;font-size:12px}
.xa-loop label{display:flex;flex-direction:column;gap:4px}
.xa-loop input{width:96px}
.xa-err{margin:0;font-size:12px}