/* Shared preview controls and frame presentation for every collection. */
.preview-toolbar{display:flex;justify-content:space-between;align-items:center;padding:17px 24px;gap:15px}
.view-tabs{display:flex;gap:16px}
.view-tabs button{border:0;font-size:11px;padding:5px 0;border-bottom:1px solid transparent}
.view-tabs button[aria-pressed=true]{border-bottom-color:var(--ink)}
.preview-tools{display:flex;gap:5px;align-items:center}
.preview-tools button{width:27px;height:27px;border-radius:3px;font-size:17px;background:#f8f6ef}
.preview-tools output{font-size:10px;min-width:27px;text-align:center;color:var(--muted)}
.poster-frame{position:relative;z-index:2;display:flex;max-width:100%;max-height:100%;padding:10px;background:linear-gradient(100deg,#c1a776,#dbcca4 30%,#bfa779 70%,#d4c59f);box-shadow:1px 9px 22px #55503c26,0 0 0 1px #bbb29a;transition:transform .3s;transform-origin:center}
.poster-frame::before{content:'';position:absolute;inset:8px;box-shadow:inset 0 0 3px #48403570;pointer-events:none}
.poster-frame[data-frame=none]{padding:0;background:none;box-shadow:2px 8px 21px #55503c26}
.poster-frame[data-frame=white]{background:linear-gradient(100deg,#e2e0dc,#fff,#d5d3cf)}
.poster-frame[data-frame=black]{background:linear-gradient(100deg,#242424,#43413f,#181817)}
.poster-frame[data-frame=dark]{background:linear-gradient(100deg,#4d3223,#79513a,#3f291c)}
#wall-scene{display:none;position:absolute;inset:0;background:linear-gradient(#e5e1d5,#d8d2c3)}
.preview-stage[data-view=wall] #wall-scene{display:block}
.wall-moulding{position:absolute;top:12%;left:8%;right:8%;bottom:12%;border:3px solid #f2eee5;box-shadow:1px 2px 3px #81786144,inset 1px 1px 3px #81786122}
.room-console{position:absolute;bottom:0;left:19%;right:19%;height:20%;background:linear-gradient(#9d7d55 0 8%,#b8996e 8% 70%,#856845 70% 76%,transparent 76%);border-left:8px solid #917450;border-right:8px solid #917450;box-shadow:0 -3px 8px #84765018}
.room-vase{position:absolute;left:23%;bottom:20%;width:25px;height:48px;border-radius:4px 4px 12px 12px;background:#b89e80;box-shadow:3px 4px 4px #0001}
.preview-stage[data-view=wall] .poster-frame{transform:scale(.67) translateY(-7%)}
.preview-stage[data-view='3d']{perspective:1200px}
.preview-stage[data-view='3d'] .poster-frame{transform:rotateY(-23deg) rotateX(7deg);box-shadow:12px 5px 0 #a08e65,18px 23px 25px #30251e30}
.preview-stage[data-view='3d'] .poster-frame[data-frame=black]{box-shadow:12px 5px 0 #222,18px 23px 25px #30251e30}

.preview-toolbar{flex-wrap:wrap}
.preview-tools{margin-left:auto;flex-wrap:wrap}
.preview-zoom-group{display:flex;align-items:center;gap:4px;white-space:nowrap}
.preview-zoom-group+.preview-zoom-group{border-left:1px solid var(--line);padding-left:12px;margin-left:7px}
.preview-tool-label{font-size:10px;color:var(--muted);margin-right:4px}
.preview-tools #preview-zoom-level{min-width:38px;font-variant-numeric:tabular-nums}
.preview-tools #fit-preview{width:auto;padding:0 8px;font-size:10px}
.preview-stage:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.preview-stage[data-inspecting=true]{touch-action:none;cursor:grab}
.preview-stage[data-inspecting=true] .poster-frame{transition:none}
.preview-stage[data-inspecting=true] #poster,.preview-stage[data-inspecting=true] #poster svg,.preview-stage[data-inspecting=true] #poster svg *{cursor:grab!important}
.preview-stage[data-inspecting=true] #typography-canvas-tools,.preview-stage[data-inspecting=true] #typography-canvas-editor{display:none}
.preview-stage[data-inspection-dragging=true],.preview-stage[data-inspection-dragging=true] #poster svg *{cursor:grabbing!important}
.preview-inspection-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:6;padding:6px 12px;border:1px solid var(--line);border-radius:20px;background:var(--paper);color:var(--muted);box-shadow:0 2px 10px #0001;white-space:nowrap;font-size:10px;line-height:1.5;pointer-events:none}
.preview-tools button{border:1px solid var(--line)}
.preview-tools #expand-preview{width:auto;min-height:30px;height:auto;padding:5px 10px;margin-left:6px;font-size:11px;white-space:nowrap}
.preview-shortcut{display:none;font-size:10px;color:var(--muted)}
.poster-frame{flex-shrink:0}
.poster-frame #poster{width:100%;height:100%;line-height:0;box-shadow:none}
.poster-frame[data-frame=none]::before{display:none}
@media(max-width:1100px){.view-tabs{gap:10px}.view-tabs button{font-size:10px}}
@media(max-width:760px){.preview-toolbar{gap:5px}}
@media(max-width:480px){.preview-tools button{width:25px;height:25px}.view-tabs{gap:8px}.view-tabs button{font-size:9px}}
/* Expansion is a screen preference; artwork and export dimensions stay intact. */
@media screen{
 body.preview-expanded{overflow:hidden}
 body.preview-expanded>.site-header,body.preview-expanded>.workspace-toolbar,body.preview-expanded>.story-section,body.preview-expanded>.site-footer,body.preview-expanded .controls,body.preview-expanded .page-heading,body.preview-expanded .field-notes,body.preview-expanded .source-details,body.preview-expanded>footer{display:none}
 body.preview-expanded .preview-area,body.preview-expanded .artwork-workspace{position:fixed;inset:0;z-index:15;display:flex;flex-direction:column;border:0;border-radius:0;height:100vh;height:100dvh;max-height:100dvh;width:100%}
 body.preview-expanded .preview-toolbar{flex-shrink:0;padding:12px 20px}
 body.preview-expanded .preview-stage{flex:1 1 0;min-height:0;height:auto;max-height:none;padding:12px 20px}
 body.preview-expanded .poster-frame{transition:none}
 body.preview-expanded .preview-caption,body.preview-expanded .export-panel,body.preview-expanded .study-facts,body.preview-expanded .export-bar,body.preview-expanded .design-bar{display:none}
 body.preview-expanded .artwork-workspace>.workspace-toolbar{display:none}
 body.preview-expanded .poster-credits{display:flex;justify-content:center;flex-wrap:wrap;gap:2px 12px;flex-shrink:0;max-height:70px;overflow:auto;margin:4px 16px 8px}
 body.preview-expanded .poster-credits:empty{display:none}
 body.preview-expanded .data-status,body.preview-expanded .status-line{flex-shrink:0;padding:0 16px 8px}
 body.preview-expanded .preview-shortcut{display:inline}
}
@media(prefers-reduced-motion:reduce){.poster-frame{transition:none}}
@media(max-width:480px){.preview-zoom-group+.preview-zoom-group{padding-left:8px;margin-left:2px}.preview-tool-label{font-size:9px;margin-right:2px}.preview-tools{gap:5px}.preview-zoom-group{gap:3px}.preview-inspection-hint{font-size:9px}}
@media print{.poster-frame{scale:1!important;translate:0 0!important}.preview-inspection-hint{display:none!important}}
