.door-worktable{margin:28px 0 40px;padding:clamp(18px,3vw,38px);border:1px solid #8d849f;border-radius:20px;background:linear-gradient(130deg,#302d40,#142b33);color:#f4eedf;scroll-margin-top:120px}
@media(forced-colors:active){.door-choice input:checked+label{border:3px solid Highlight}.door-choice label,.door-worktable button{border:1px solid ButtonText}.door-stage{background:Canvas}}
.door-worktable [hidden]{display:none!important}.door-worktable h2{font:clamp(30px,4vw,48px)/1.1 Georgia,serif;margin:8px 0 12px}.door-worktable p{line-height:1.6}.door-worktable .door-intro{max-width:65ch;color:#d8d9df}
.door-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.9fr);gap:clamp(20px,4vw,48px);align-items:start;margin-top:24px}.door-stage{margin:0;position:sticky;top:24px;min-width:0}.door-art{width:100%;max-width:480px;margin:auto;box-shadow:0 24px 40px #0005;line-height:0;border-radius:5px;overflow:hidden}.door-art svg{display:block;width:100%;height:auto}.door-stage figcaption{font-size:14px;color:#ddd8e5;text-align:center;margin:12px 0;min-height:44px;line-height:1.5}
.door-controls fieldset{border:0;padding:0;margin:0 0 22px;min-width:0}.door-controls legend,.door-name-label{font-weight:700;margin-bottom:10px;font-size:17px}.door-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.door-choice{position:relative;min-width:0}.door-choice input{position:absolute;top:9px;left:9px;accent-color:#ccbae8;width:16px;height:16px}.door-choice label{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:93px;padding:25px 8px 10px;border:1px solid #8e899c;border-radius:10px;font-size:14px;text-align:center;background:#1b2732;cursor:pointer;color:#eee9f3;line-height:1.2}.door-choice input:checked+label{border-color:#d8c6ed;background:#4b405c;box-shadow:inset 0 0 0 1px #d8c6ed}.door-choice input:focus-visible+label{outline:3px solid #fff2bb;outline-offset:4px}.door-symbol{font:28px Georgia,serif;line-height:1}.door-swatch{width:28px;height:19px;border-radius:3px;border:1px solid #fff8;display:block}.door-oak{background:#986349}.door-blue{background:#385775}.door-ivory{background:#e8ddc6}.door-worktable input[type=text]{width:100%;box-sizing:border-box;background:#f7f0e1;color:#172d3b;border:2px solid #b7a7c9;border-radius:8px;font:18px/1.4 Georgia,serif;padding:12px;margin-top:8px}.door-worktable button:focus-visible,.door-worktable input[type=text]:focus-visible,.door-worktable a:focus-visible{outline:3px solid #fff2bb;outline-offset:4px}.door-worktable button{min-height:48px;padding:12px 18px;border:1px solid #d8c6ed;border-radius:9px;background:#d8c6ed;color:#192632;font:700 16px/1.3 system-ui;cursor:pointer}.door-worktable button:hover{background:#eee0fc}.door-worktable button:disabled{opacity:.65;cursor:wait}.door-worktable .door-secondary{background:transparent;color:#f2e9fa}.door-worktable .door-secondary:hover{background:#4b405c}.door-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 12px}.door-note{font-size:14px!important;color:#d4cedb!important}.door-finished{padding:12px 0}.door-finished h3{font:32px/1.2 Georgia,serif;margin:0 0 15px}.door-finished-summary{overflow-wrap:anywhere}.door-feedback{min-height:24px;font-size:14px;color:#f4e1b8}.door-worktable [tabindex='-1']:focus{outline:none}
@media(max-width:700px){.door-layout{display:block}.door-stage{position:sticky;top:0;z-index:3;background:#202b39;padding:10px 0 4px;border-bottom:1px solid #8d849f;margin-bottom:20px}.door-art{max-width:170px}.door-stage figcaption{min-height:0;font-size:12px;margin:8px 2px}.door-worktable{padding:16px;border-radius:14px}.door-choices{gap:6px}.door-choice label{font-size:13px}.door-actions button{flex:1 1 140px}.door-worktable h2{font-size:32px}.door-controls input,.door-worktable button{scroll-margin-top:270px}.door-worktable[data-finished] .door-art{max-width:270px}.door-worktable[data-finished] .door-stage{position:static}.door-worktable[data-finished] .door-layout{min-height:0!important}}
@media(prefers-reduced-motion:reduce){.door-worktable *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* R127: one actual working board. The original SVG, controls and download
   remain the same nodes. The container, not the browser, decides when the
   picture and material tray fit together beside the retained room view. */
.room-studios .door-worktable{container-type:inline-size;container-name:studio-board}
.rw-working[data-room-surface=studios] .door-worktable{background:repeating-linear-gradient(2deg,#493a32 0 3px,#443730 3px 8px);border:8px solid #342b29;border-radius:6px;box-shadow:inset 0 1px #bca58b66,0 8px 20px #0005;padding:clamp(12px,2vw,24px)}
.rw-working[data-room-surface=studios] .door-worktable>.campus-eyebrow{color:#dfc9b0}
.rw-working[data-room-surface=studios] .door-worktable>h2{font-size:clamp(28px,3vw,38px);margin-block:8px}
.rw-working[data-room-surface=studios] .door-intro{font-size:16px;line-height:1.55;color:#eee4d8;margin-block:12px}
.rw-working[data-room-surface=studios] .door-layout{gap:20px;margin-top:20px;align-items:start}
.rw-working[data-room-surface=studios] .door-stage{padding:14px 10px;background:linear-gradient(135deg,#242738,#171e2a);border:1px solid #9e8b7a;border-radius:3px;box-shadow:0 5px 12px #0005}
.rw-working[data-room-surface=studios] .door-stage .door-art{border:6px solid #92765d;border-bottom-width:16px;max-width:300px;box-shadow:0 3px #342920,0 10px 14px #0006}
.rw-working[data-room-surface=studios] .door-stage figcaption{color:#eee3d5;min-height:0;margin:12px 0 0;overflow-wrap:anywhere}
.rw-working[data-room-surface=studios] .door-controls{padding:16px;background:linear-gradient(130deg,#242633,#1b2230);border:1px solid #9e8b7a;border-top:5px solid #8f7868;box-shadow:0 5px 12px #0005}
.rw-working[data-room-surface=studios] .door-choice label{min-height:78px;box-sizing:border-box;padding:24px 6px 10px;border-color:#9e8b9e;border-bottom-width:3px;background:#252b3a}
.rw-working[data-room-surface=studios] .door-choice input:checked+label{background:#54435b;border-color:#e3c9ef;box-shadow:inset 0 0 0 1px #e3c9ef}
.rw-working[data-room-surface=studios] .door-choices{display:flex;flex-wrap:wrap;gap:8px}
.rw-working[data-room-surface=studios] .door-choice{flex:1 1 auto;max-width:100%}
.rw-working[data-room-surface=studios] .door-choice label{overflow-wrap:anywhere;min-width:70px}
.rw-working[data-room-surface=studios] .door-swatch{width:38px;height:24px;box-shadow:1px 3px #0007}
.rw-working[data-room-surface=studios] .door-oak{background:repeating-linear-gradient(88deg,#986349 0 3px,#a97350 3px 5px,#925d43 5px 8px)}
.rw-working[data-room-surface=studios] .door-name-label{display:block;line-height:1.5}
.rw-working[data-room-surface=studios] .door-finished{background:#eae3d5;color:#25303b;border-top:9px solid #8f7868;padding:22px;box-shadow:3px 5px #302a27;overflow-wrap:anywhere}
.rw-working[data-room-surface=studios] .door-finished .door-note{color:#4b5360!important}
.rw-working[data-room-surface=studios] .door-finished .campus-eyebrow{color:#5a4c64}
.rw-working[data-room-surface=studios] .door-finished .door-secondary{background:#263545;color:#f4eee3}
.rw-working[data-room-surface=studios] .door-worktable[data-finished] .door-stage{position:static}
@container studio-board (min-width:620px){
 .rw-working[data-room-surface=studios] .door-layout{grid-template-columns:minmax(0,.85fr) minmax(300px,1fr)}
 .rw-working[data-room-surface=studios] .door-stage{position:sticky;top:12px}
}
@container studio-board (max-width:619px){
 .rw-working[data-room-surface=studios] .door-layout{grid-template-columns:minmax(0,1fr)}
 .rw-working[data-room-surface=studios] .door-stage{display:flex;flex-wrap:wrap;gap:14px;align-items:center;position:static}
 .rw-working[data-room-surface=studios] .door-stage .door-art{max-width:100px;width:100%;border-width:4px;border-bottom-width:10px}
 .rw-working[data-room-surface=studios] .door-stage figcaption{margin:0;text-align:left;font-size:14px;line-height:1.5;flex:1 1 8em;min-width:0}
 .rw-working[data-room-surface=studios] .door-worktable[data-finished] .door-stage{display:block}
 .rw-working[data-room-surface=studios] .door-worktable[data-finished] .door-art{max-width:240px}
 .rw-working[data-room-surface=studios] .door-worktable[data-finished] figcaption{text-align:center;margin-top:12px}
}
@media(forced-colors:active){.rw-working[data-room-surface=studios] :is(.door-worktable,.door-stage,.door-controls,.door-finished,.door-choice label){background:Canvas;color:CanvasText;border-color:CanvasText;box-shadow:none}}

/* The live composition stays beside the choices on wide boards and above
   them on compact boards. Finished/download mode remains unpinned. */
.rw-working[data-room-surface=studios] .door-worktable[data-picture-pinned]:not([data-finished]) .door-stage{position:sticky;top:var(--picture-top,0px);z-index:2}
.rw-working[data-room-surface=studios] .door-worktable:not([data-picture-pinned]) .door-stage{position:static}
@container studio-board (max-width:300px){
 .rw-working[data-room-surface=studios] .door-worktable:not([data-finished]) .door-stage{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1fr);gap:10px}
 .rw-working[data-room-surface=studios] .door-worktable:not([data-finished]) .door-stage .door-art{max-width:80px}
}
@container studio-board (min-width:450px) and (max-width:619px){
 .rw-working[data-room-surface=studios] .door-worktable:not([data-finished]) .door-layout{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}
 .rw-working[data-room-surface=studios] .door-worktable:not([data-finished]) .door-stage{display:block}
 .rw-working[data-room-surface=studios] .door-worktable:not([data-finished]) .door-stage figcaption{margin-top:10px}
}