/* Opt-in presentation only. Removing data-ui-theme restores all night styles. */
body[data-ui-theme=wood]{--ui-panel:#eddbb7;--ui-panel-alt:#e6cc9e;--ui-edge:#b29568;--ui-text:#33291f;--ui-muted:#66543d;--ui-selected:#bf9a60;color:var(--ui-text)}
body[data-ui-theme=wood] :is(.header,.editor-heading,.tools,.settings-panel,.price-dock,.toolbar,.view-controls,.edit-controls,.preview-modes,.card,.library-dialog,.save-project-dialog,#tutorial){background-color:var(--ui-panel);background-image:linear-gradient(120deg,#fff7,#fff2),var(--ui-wood-image,none);background-size:auto,240px 360px;border-color:var(--ui-edge);color:var(--ui-text);box-shadow:0 3px 10px #38271422,inset 0 1px #fff8;backdrop-filter:none}
body[data-ui-theme=wood] .header{background-image:linear-gradient(90deg,#fff5,#fff8),var(--ui-wood-image,none);border-bottom:1px solid var(--ui-edge)}
body[data-ui-theme=wood] :is(.brand,.brand-name,.brand-accent,.header nav a,.header nav button,.price-dock strong,.price-label,.price-dock small,.inspector-heading,.gallery-heading strong,.tools h2,.tools h3,.settings-panel summary){color:var(--ui-text)}
body[data-ui-theme=wood] .brand-accent{color:#795125}body[data-ui-theme=wood] .brand-logo-mark{filter:none!important}
body[data-ui-theme=wood].editor-active :is(.tools,.settings-panel) :is(label,legend,summary,h2,h3,strong){color:var(--ui-text)}
body[data-ui-theme=wood] :is(.small,.inspector-heading span,.tool-group-content p,.settings-panel small,.price-dock small){color:var(--ui-muted)}
body[data-ui-theme=wood] :is(button,.button,input,select,textarea,#font-picker>summary,.font-picker-menu){background-color:#f3e6cb;background-image:linear-gradient(130deg,#fff7,#fff1),var(--ui-wood-image,none);background-size:auto,240px 360px;color:var(--ui-text);border-color:var(--ui-edge);box-shadow:inset 0 1px #fff9,0 1px 2px #38271418;text-shadow:none}
body[data-ui-theme=wood].editor-active :is(button,.button,input,select,textarea){color:var(--ui-text)}
body[data-ui-theme=wood] :is(button,.button):hover{background-color:#e6cfa7;background-image:linear-gradient(#e9d1a7bb,#e9d1a788),var(--ui-wood-image,none);border-color:#8d6d40}
body[data-ui-theme=wood] :is(button,.button):focus-visible,body[data-ui-theme=wood] :is(input,select,summary):focus-visible{outline:2px solid #765329;outline-offset:2px}
body[data-ui-theme=wood] :is(input,select,textarea){background-image:linear-gradient(#fff9,#fff6),var(--ui-wood-image,none);accent-color:#765329}
body[data-ui-theme=wood] select option{color:#33291f;background:#f3e6cb}
body[data-ui-theme=wood] :is(button[aria-pressed=true],.creation-steps button[aria-selected=true],.object-accordion h3>button[aria-expanded=true],#font-specimens [aria-selected=true]){background-color:#d1ad73;background-image:linear-gradient(#d1ad73bb,#c7a26b88),var(--ui-wood-image,none);color:#302316!important;border-color:#795529!important;box-shadow:inset 0 -2px #795529,inset 0 1px #fff8}
body[data-ui-theme=wood] .tone-options label:has(:checked){background:#d7ba8c;color:#302316;border-color:#795529}
body[data-ui-theme=wood] :is(.editor-heading,.tool-group,.inspector-heading,.tools>.face-controls,.settings-panel .background-picker>summary,.project-actions,.operation-controls,.ambience-audio,#private-interface-controls){border-color:#a98b5c66}
body[data-ui-theme=wood] :is(.background-settings,.background-picker>summary,.inspector-body,.object-accordion [role=region]){background:transparent;color:var(--ui-text)}
body[data-ui-theme=wood] .tool-group>summary{color:var(--ui-text)}
body[data-ui-theme=wood] .editor-heading :is(button,a){color:var(--ui-text)}
body[data-ui-theme=wood] .face-controls [aria-pressed=true]{background:#d1ad73!important;color:#302316!important;border-color:#795529!important;box-shadow:inset 0 -2px #795529}
body[data-ui-theme=wood] :is(.status,.status.error){background:#f3e6cbee;color:#4b3523;text-shadow:none;border:1px solid #b29568}
body[data-ui-theme=wood] .danger{color:#8a2d20!important}
body[data-ui-theme=wood] :is(button:disabled,input:disabled,select:disabled){opacity:.48;box-shadow:none;cursor:default}
body[data-ui-theme=wood] .header nav{background-color:var(--ui-panel)}
body[data-ui-theme=wood] :is(.ambience-audio a,.card a){color:#674518}
body[data-ui-theme=wood] .font-picker-menu,body[data-ui-theme=wood] #font-picker>summary{color:var(--ui-text)}
body[data-ui-theme=wood] .library-dialog :is(h2,p,label){color:var(--ui-text)}
body[data-ui-theme=wood] .object-list button{color:var(--ui-text)}
body[data-ui-theme=wood] #tutorial :is(p,h2,summary,button){color:var(--ui-text)}

body[data-ui-theme=wood].editor-active :is(button,.button,input,select,textarea){background-color:#f3e6cb;background-image:linear-gradient(130deg,#fff7,#fff1),var(--ui-wood-image,none);background-size:auto,240px 360px;border-color:var(--ui-edge);box-shadow:inset 0 1px #fff9,0 1px 2px #38271418}
body[data-ui-theme=wood] :is(#undo,#redo,#reset-project,#zoom-in,#zoom-out,#fit,#basket-add,#restore,#tutorial-open,#fullscreen-toggle,#menu-toggle,#export-test-svg){background-color:#f3e6cb;background-image:linear-gradient(130deg,#fff7,#fff1),var(--ui-wood-image,none);background-size:auto,240px 360px;color:var(--ui-text);border-color:var(--ui-edge)}
body[data-ui-theme=wood].editor-active :is(button[aria-pressed=true],.creation-steps button[aria-selected=true],.object-accordion h3>button[aria-expanded=true],#font-specimens [aria-selected=true]){background-color:#d1ad73;background-image:linear-gradient(#d1ad73bb,#c7a26b88),var(--ui-wood-image,none);color:#302316!important;border-color:#795529!important;box-shadow:inset 0 -2px #795529}
body[data-ui-theme=wood].editor-active :is(button,.button):hover{background-color:#e6cfa7;background-image:linear-gradient(#e9d1a7bb,#e9d1a788),var(--ui-wood-image,none)}
body[data-ui-theme=wood]{background-color:#efe2c7}
body[data-ui-theme=wood] .header nav a[aria-current]{color:#674518;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* Thin plywood rims: static layered shadows, no filters or scene work. */
body[data-ui-theme=wood] :is(.tools,.settings-panel,.price-dock){border:1px solid #b0956c;box-shadow:inset 0 1px 1px #fff9,inset 1px 0 #fff4,0 1px 0 #d5be96,0 2px 0 #b69970,0 3px 0 #dbc7a5,0 4px 0 #a98b62,0 8px 14px #35251225}
body[data-ui-theme=wood].editor-active :is(.edit-controls,.view-controls){background-color:var(--ui-panel);background-image:linear-gradient(120deg,#fff6,#fff1),var(--ui-wood-image,none);background-size:auto,240px 360px;color:var(--ui-text);border:1px solid var(--ui-edge);box-shadow:inset 0 1px #fff9,0 1px 0 #c6aa7e,0 2px 0 #a98b62,0 5px 9px #35251220}
body[data-ui-theme=wood].editor-active :is(button,.button){box-shadow:inset 0 1px #fff9,inset 1px 0 #fff4,0 1px 0 #c8ad82,0 2px 0 #aa8b60,0 3px 5px #35251220}
body[data-ui-theme=wood].editor-active :is(input:not([type=checkbox]):not([type=radio]),select,textarea){box-shadow:inset 0 1px 3px #6b4d2528,0 1px #fff8;background-color:#f2e4c8}
body[data-ui-theme=wood].editor-active :is(button[aria-pressed=true],button[aria-selected=true],button:active){box-shadow:inset 0 1px 3px #6b4d2538,0 1px #fff7}
body[data-ui-theme=wood].editor-active :is(.view-controls output,#zoom-label,.view-controls button,.edit-controls button){color:#33291f!important;text-shadow:none}
body[data-ui-theme=wood] .header nav :is(a,button),body[data-ui-theme=wood].editor-active .header nav a{color:#33291f!important}
body[data-ui-theme=wood] .header nav a[aria-current],body[data-ui-theme=wood].editor-active .header nav a[aria-current]{color:#4e351b!important;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
body[data-ui-theme=wood].editor-active :is(.editor-heading,.creation-steps,.tools,.settings-panel,.price-dock) :is(label,legend,summary,output,small,.small){color:var(--ui-text)}
body[data-ui-theme=wood].editor-active :is(button:disabled,input:disabled,select:disabled){color:#665c4d;opacity:.65;box-shadow:inset 0 1px 2px #6b4d2518}

body[data-ui-theme=wood].editor-active .toolbar{background-color:var(--ui-panel)!important;background-image:linear-gradient(120deg,#fff6,#fff1),var(--ui-wood-image,none)!important;background-size:auto,240px 360px;border-color:var(--ui-edge)!important;box-shadow:inset 0 1px #fff9,0 2px 0 #ac9068,0 5px 9px #35251220!important}
body[data-ui-theme=wood].editor-active .toolbar :is(.edit-controls,.view-controls){border-color:#a98b5c88;color:var(--ui-text)}
body[data-ui-theme=wood].editor-active .music-speaker{color:var(--ui-text);background:transparent;box-shadow:none}

body[data-ui-theme=wood] .header #nav :is(a,button){text-shadow:0 1px #fff7,0 -.3px #785b3433}
@media(max-width:900px){body[data-ui-theme=wood] .header #nav.open{background:var(--ui-panel)!important;background-image:var(--ui-wood-image,none)!important}}

/* One floating top plaque: the header and step row meet without a second frame. */
body[data-ui-theme=wood]{--top-plaque-gap:10px;--top-plaque-inset:12px}
body[data-ui-theme=wood].editor-active[data-background=christmas]{background:#875328 url('./christmas-background.jpg') center/cover fixed}
body[data-ui-theme=wood].editor-active[data-background=forest]{background:#607b61 url('./mountains.svg') center/cover fixed}
body[data-ui-theme=wood].editor-active[data-background=white]{background:#fff}
body[data-ui-theme=wood].editor-active:is([data-background=grey],[data-background=grid]){background:#d9dfe5}
body[data-ui-theme=wood] .header{position:relative;z-index:12;margin:var(--top-plaque-gap) var(--top-plaque-inset) 0;border:1px solid var(--ui-edge);border-radius:18px;background-color:var(--ui-panel);background-image:linear-gradient(120deg,#fff5,#fff2),var(--ui-wood-image,none);background-size:auto,240px 360px;box-shadow:inset 0 1px #fff9,0 3px 0 #b39770,0 7px 14px #35251225}
body[data-ui-theme=wood].editor-active .header{border-bottom:0;border-radius:18px 18px 0 0;box-shadow:inset 0 1px #fff9}
body[data-ui-theme=wood].editor-active #main{height:calc(100dvh - var(--header-h) - var(--top-plaque-gap))}
body[data-ui-theme=wood].editor-active .editor-heading{position:relative;z-index:6;margin:0 var(--top-plaque-inset);border:1px solid var(--ui-edge);border-top:0;border-radius:0 0 18px 18px;background-color:var(--ui-panel);background-image:linear-gradient(120deg,#fff5,#fff2),var(--ui-wood-image,none);background-size:auto,240px 360px;background-position:0 0,0 calc(-1 * var(--header-h));box-shadow:0 1px 0 #d4bc96,0 3px 0 #ac8f65,0 7px 12px #35251225}
/* The outer wood rim clips nothing interactive; scrolling stays inset within it. */
body[data-ui-theme=wood].editor-active .settings-panel{overflow:hidden;padding:5px;border-radius:14px}
body[data-ui-theme=wood].editor-active .settings-panel>.background-picker{overflow-y:auto;overflow-x:hidden;max-height:calc(100dvh - var(--header-h) - 52px - 176px - var(--top-plaque-gap) - 12px);border-radius:9px;overscroll-behavior:contain}
body[data-ui-theme=wood].editor-active .tools{overflow:hidden;border-radius:14px}
body[data-ui-theme=wood].editor-active .inspector-body{margin-right:5px;overscroll-behavior:contain}
body[data-ui-theme=wood] :is(.inspector-body,.settings-panel>.background-picker){scrollbar-width:thin;scrollbar-color:#ac8f62 transparent}
body[data-ui-theme=wood] :is(.inspector-body,.settings-panel>.background-picker)::-webkit-scrollbar{width:7px;height:7px}
body[data-ui-theme=wood] :is(.inspector-body,.settings-panel>.background-picker)::-webkit-scrollbar-track{background:transparent;margin-block:8px}
body[data-ui-theme=wood] :is(.inspector-body,.settings-panel>.background-picker)::-webkit-scrollbar-thumb{background:#ac8f62;border:2px solid transparent;background-clip:padding-box;border-radius:8px}
body[data-ui-theme=wood] :is(.inspector-body,.settings-panel>.background-picker)::-webkit-scrollbar-corner{background:transparent}
@media(max-width:900px){
 body[data-ui-theme=wood]{--top-plaque-gap:7px;--top-plaque-inset:8px}
 body[data-ui-theme=wood] .header{border-radius:15px}
 body[data-ui-theme=wood].editor-active .header{border-radius:15px 15px 0 0;padding-left:8px;padding-right:8px}
 body[data-ui-theme=wood].editor-active .editor-heading{border-radius:0 0 15px 15px;padding-left:7px;padding-right:7px}
 body[data-ui-theme=wood].editor-active .settings-panel>.background-picker{max-height:max(120px,calc(60dvh - 200px))}
}
@media(max-width:900px) and (max-height:650px){body[data-ui-theme=wood].editor-active #main{height:auto}}
/* Keep the top margin inside the body so the ambience also covers the upper rim. */
body[data-ui-theme=wood].editor-active{display:flow-root}

body[data-ui-theme=wood].editor-active #step-finalize{color:#33291f!important}
body[data-ui-theme=wood].editor-active .creation-steps button{color:#33291f;text-shadow:none}
@media(min-width:901px){body[data-ui-theme=wood].editor-active .settings-panel>.background-picker{max-height:calc(var(--panel-centred-limit) - 12px)}}
