/* Decoration editing shares the garage's typography and scene-aware palette. */
#home-panel:has(.decoration-studio) .dialog-header{margin-bottom:18px}
#home-panel:has(.decoration-studio) .dialog-header h2{font-size:25px;letter-spacing:-.7px;margin-top:7px}
.decoration-studio{padding-bottom:12px}
.decoration-studio button,.decoration-studio a{font:inherit;color:var(--text);text-decoration:none}
.decoration-studio button{cursor:pointer}
.decoration-studio svg:not(.deco-art){width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;flex-shrink:0}
.decoration-studio button:disabled{opacity:.45;cursor:default}
.deco-scene{width:100%;display:flex;align-items:center;gap:8px;min-height:106px;padding:8px 12px 8px 4px;background:linear-gradient(120deg,var(--ui-card-a),var(--ui-card-d));border:0;border-radius:4px;text-align:left}
.deco-scene>.deco-art{width:98px;flex-shrink:0}
.deco-scene>span{min-width:0;flex:1}
.deco-scene small,.deco-scene em{display:block;font-size:10px;color:var(--muted);font-style:normal;line-height:1.6}
.deco-scene strong{display:block;font-size:18px;letter-spacing:-.4px;margin:4px 0}
.deco-section-heading{display:flex;align-items:center;justify-content:space-between;margin:25px 0 10px}
.deco-section-heading h3{font-size:14px;font-weight:650;margin:0;letter-spacing:.3px}
.deco-section-heading>small{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
#deco-visibility{display:flex;align-items:center;gap:7px;padding:0;min-height:30px;font-size:10px;color:var(--muted);background:none;border:0}
#deco-visibility i{width:26px;height:15px;border-radius:12px;background:var(--ui-border);position:relative}
#deco-visibility i:after{content:'';position:absolute;left:3px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--panel);transition:transform .15s}
#deco-visibility[aria-checked=true] i{background:var(--accent-text)}
#deco-visibility[aria-checked=true] i:after{transform:translateX(11px)}
.deco-prop{width:100%;display:flex;align-items:center;gap:12px;min-height:65px;padding:5px 4px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;text-align:left}
.deco-small-art{width:49px;height:49px;background:var(--ui-card-a);border-radius:3px}
.deco-small-art .deco-art{width:49px;height:49px}
.deco-prop>span:nth-child(2){flex:1;min-width:0}
.deco-prop small{display:block;font-size:10px;color:var(--muted);margin-bottom:4px}
.deco-prop strong{font-size:12px;font-weight:550}
.deco-prop>svg{color:var(--muted)}
.deco-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.deco-role{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:10px 12px 11px;min-height:119px;border:1px solid var(--ui-card-border);border-radius:4px;background:linear-gradient(120deg,var(--ui-card-a),var(--ui-card-d));text-align:left}
.deco-slot-number{font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.deco-role-art{align-self:flex-end;width:69px;height:58px;margin-top:-11px;margin-bottom:4px}
.deco-role-art svg{width:69px;height:63px}
.deco-role strong{font-size:12px;font-weight:550}
.deco-role>small:last-child{font-size:10px;color:var(--muted);margin-top:4px}
.deco-caption{font-size:10px;color:var(--muted);margin:10px 0 19px;line-height:1.7}
.deco-more{width:100%;display:flex;align-items:center;gap:8px;padding:13px 0;min-height:44px;border:0;border-top:1px solid var(--line);background:none;font-size:12px!important;text-align:left}
.deco-more small{margin-left:auto;color:var(--muted);font-size:10px}
.deco-rules{border-top:1px solid var(--line);color:var(--muted);font-size:11px}
.deco-rules summary{display:flex;justify-content:space-between;align-items:center;min-height:45px;cursor:pointer;list-style:none}
.deco-rules summary::-webkit-details-marker{display:none}
.deco-rules summary>span:last-child{display:flex;align-items:center;gap:9px}
.deco-rules summary svg{width:12px!important;transform:rotate(90deg)}
.deco-rules[open] summary svg{transform:rotate(-90deg)}
.deco-rules p{line-height:1.9;margin:0 0 12px}
.deco-intro{margin:0 0 22px;font-size:12px;line-height:1.8;color:var(--muted)}
.deco-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.deco-option{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:174px;text-align:left;padding:12px;border:1px solid var(--ui-card-border);border-radius:4px;background:linear-gradient(120deg,var(--ui-card-a),var(--ui-card-d))}
.deco-option .deco-art{align-self:center;width:100%;height:103px;margin-bottom:8px}
.deco-option strong{font-size:12px;font-weight:600}
.deco-option small{font-size:10px;color:var(--muted);line-height:1.7;margin-top:5px}
.deco-check{position:absolute;top:9px;right:10px;font-size:12px;color:var(--accent-text);visibility:hidden}
.deco-option[aria-pressed=true]{border-color:var(--accent);background:var(--ui-selected)}
.deco-option[aria-pressed=true] .deco-check{visibility:visible}
.deco-picker-footer{margin-top:21px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:12px}
#deco-feedback{font-size:10px;color:var(--muted);line-height:1.6;flex:1}
.deco-inspect{border:0;background:none;min-height:44px;padding:0;font-size:12px!important;color:var(--accent-text)!important}
.deco-inspect span{margin-left:12px}

@media(hover:hover){.deco-prop:hover,.deco-more:hover{background:var(--ui-hover)}.deco-scene:hover,.deco-role:hover,.deco-option:not(:disabled):hover{border-color:var(--accent);filter:brightness(.98)}}
@media(max-width:760px){.deco-scene>.deco-art{width:78px}.deco-scene em{font-size:9px}.deco-options{gap:8px}.deco-option{padding:10px}}
.deco-scene>.deco-art{height:82px;stroke:none}
.deco-art{stroke:none}

/* Flat place workspace: category and placement stay on the same page. */
#place-section .category-heading{padding-bottom:20px}

.deco-slot-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:16px}
.deco-slot-tabs button{flex:1;white-space:nowrap;min-height:38px;padding:6px;border:1px solid var(--line);border-radius:3px;background:transparent;font-size:11px}
.deco-slot-tabs button[aria-pressed=true]{background:var(--ui-selected);border-color:var(--accent)}
#place-content .deco-section-heading{margin-top:0}
.deco-current{font-size:11px;color:var(--muted);margin-bottom:14px;line-height:1.7}
.deco-current strong{font-weight:550;color:var(--text)}
#place-content .deco-option{min-height:139px;padding:10px;align-items:center;justify-content:center;text-align:center}
.deco-option img{width:100%;height:95px;object-fit:contain;display:block;margin-bottom:8px}
.deco-placeholder{display:grid;place-items:center;width:100%;height:95px;font-size:30px;color:var(--muted);margin-bottom:8px}

.home-scene-preview{position:absolute;inset:0;z-index:10;background:#e8e7e1}
.home-scene-preview iframe{width:100%;height:100%;border:0}
.home-preview-caption{position:absolute;left:28px;top:24px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 16px;background:#faf8efec;border:1px solid #c8b99c;color:#29362f;max-width:calc(100% - 56px)}
.home-preview-caption strong{font-size:20px}.home-preview-caption span{font-size:11px;color:#647168}
.home-preview-caption button{border:0;background:transparent;color:#77572f;min-height:36px;font-size:12px}
.home-scene-preview>[role=status]{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#faf8efec;padding:14px;font-size:13px}
#home-stage[data-scene-preview=true]>.scene-identity,#home-stage[data-scene-preview=true]>#visitor-markers,#home-stage[data-scene-preview=true]>.scene-tools{visibility:hidden}
.management[data-view=root][data-category=place] .rail-scroll{display:flex;overflow:hidden;padding-bottom:12px}
.management[data-view=root][data-category=place] #category-pages,#place-section:not([hidden]),#place-content,#place-content .decoration-studio,#deco-category-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0}
#place-section .category-heading,.deco-tabs,.deco-section-heading,.deco-slot-tabs,.deco-current,.deco-picker-footer,.deco-caption,.deco-intro{flex-shrink:0}
#place-content .deco-options,#place-content .deco-scene-list{overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#b9b9a77d transparent}
#place-content .deco-options{align-content:start;padding:2px}
#place-content .deco-picker-footer{margin-top:12px;padding-top:8px}
.decoration-studio .deco-option .deco-default-character{width:100%;height:95px;stroke:none;margin-bottom:8px}

/* The same cards and tabs as My Collection; only the surrounding rail differs. */
#place-content .collection-tabs{margin:0 0 16px;border-bottom-color:var(--line)}
#place-content .collection-tabs button{color:var(--muted);font-size:13px;min-height:44px}
#place-content .collection-tabs button[aria-pressed=true]{color:var(--accent-text);border-bottom-color:var(--accent)}
#place-content .deco-options,#place-content .deco-scene-list{display:flex;flex-direction:column;gap:6px;padding:2px;flex:1}
#place-content .deco-clear{flex-shrink:0;min-height:42px;border:1px dashed var(--line);background:transparent;color:var(--muted);font:inherit;font-size:11px}
#place-content .deco-clear[aria-pressed=true]{border-color:var(--accent)}

/* Explicit save applies all three categories without a second confirmation layer. */
#place-section .category-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
#place-section .category-heading h2{margin:0}
#place-section #save-appearance{flex:none;min-height:36px;min-width:70px;width:auto;padding:8px 17px;font-size:12px;font-weight:600;line-height:1.2;border-radius:4px;background:#f4c928;color:#26352e;border:1px solid #dcb208}
#save-appearance:disabled{opacity:.6;cursor:default}
/* The next iframe stays hidden until its first rendered frame. Keep the
   exposed loading surface consistent with the dark garage for every scene. */
.home-appearance-world{position:absolute;inset:0;z-index:2;background:#101114 radial-gradient(ellipse at 57% 45%,#24232b 0%,#17181d 45%,#101114 85%);color-scheme:dark}
.home-appearance-world iframe{width:100%;height:100%;border:0;display:block;background:#101114;color-scheme:dark}
.appearance-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:8px;align-items:center;margin:0;padding:0;background:none;color:#b9b5c5;font-size:12px}
.appearance-loading i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:appearance-dots 1.2s ease-in-out infinite}
.appearance-loading i:nth-child(2){animation-delay:.15s}.appearance-loading i:nth-child(3){animation-delay:.3s}
.appearance-loading.is-error{width:max-content;max-width:80%;text-align:center}
@keyframes appearance-dots{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media(prefers-reduced-motion:reduce){.appearance-loading i{animation:none;opacity:.7}}
#home-stage[data-appearance-scene] #visitor-markers{visibility:hidden;pointer-events:none}
#home-stage[data-appearance-scene]>.scene-identity,#home-stage[data-appearance-scene]>.scene-tools,#home-stage[data-appearance-scene]>.scene-dispatch,#home-stage[data-appearance-scene]>.scene-income,#home-stage[data-appearance-scene]>.return-overview{z-index:3}
#home-stage[data-appearance-tone=night]{--hud-ink:#ecf3ef;--hud-action:#f3d690;--hud-secondary:#b3c5c2;--hud-hover:#f4d77b;--hud-rule:#e5e9db44}
#home-stage[data-appearance-tone=night]>.scene-identity{color:#ecf3ef;text-shadow:0 2px 12px #0008}

body:has(#home-stage[data-appearance-tone=night]) #sidebar-toggle{color:#ecf3ef}

.decoration-studio button[data-placed-at]:disabled{cursor:not-allowed;opacity:.6}

/* Keep the embedded scene inside its viewport, below persistent page controls. */
.home-appearance-world{contain:layout paint;overflow:clip}
.home-appearance-world iframe{position:absolute;inset:0;min-width:0;min-height:0}
#home-stage>.decoration-loading-card{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);width:min(330px,calc(100% - 32px));padding:20px 22px;background:var(--panel,#f8f6ef);color:var(--text);border:1px solid var(--line);border-radius:4px;box-shadow:0 12px 40px #0002;pointer-events:none}
.decoration-loading-card .loading-top{display:flex;gap:10px;align-items:center;font-size:12px}
.decoration-loading-card .loading-top strong{font-weight:500}
.decoration-loading-card .loading-value{margin-left:auto;white-space:nowrap;font-size:11px;color:var(--accent-text)}
.decoration-loading-card .spinner{width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--accent-text);border-radius:50%;animation:appearance-spinner 1s linear infinite;flex-shrink:0}
.decoration-loading-card progress{appearance:none;display:block;width:100%;height:3px;border:0;margin-top:16px;background:var(--line);accent-color:var(--accent-text)}
.decoration-loading-card progress::-webkit-progress-bar{background:var(--line)}
.decoration-loading-card progress::-webkit-progress-value{background:var(--accent-text)}
.decoration-loading-card progress::-moz-progress-bar{background:var(--accent-text)}
.decoration-loading-card p{font-size:11px;color:var(--muted);margin:10px 0 0;line-height:1.6}
@keyframes appearance-spinner{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.decoration-loading-card .spinner{animation:none}}
/* Only the management rail scrolls. Focusing a rebuilt picker must not pan the page. */
html:has(body[data-mode="home"]),body[data-mode="home"]{overflow:clip}

/* Resolve saved scene before exposing the default alley or its title. */
#home-stage[data-appearance-pending] #scene-canvas,
#home-stage[data-appearance-pending] .scene-identity,
#home-stage[data-appearance-pending] #visitor-markers,
#home-stage[data-appearance-scene] #scene-canvas{visibility:hidden;pointer-events:none}
#home-stage[data-appearance-scene]>.scene-loading{display:none}
