/* Full-screen A6 workspace: scene first, furniture in a collapsible bottom drawer. */
:root { --ink:#1C1917; --muted:#6F6A62; --line:#EDE8DF; --accent:#20382f; --valid:#4C5B3C; --invalid:#a0443b; --paper:#F5F2EC; font:14px/1.5 'Noto Sans TC','PingFang TC',sans-serif; color:var(--ink); background:#fff; }
* { box-sizing:border-box; }
html { width:100%; height:100%; overflow:hidden; }
body { margin:0; width:100%; height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
[hidden] { display:none!important; }
h1,h2,p { margin:0; }
a { color:var(--accent); text-decoration:none; }
button,select,input { font:inherit; color:inherit; min-height:44px; border:1px solid #DFD9CE; border-radius:8px; padding:8px 12px; background:#fff; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
button,summary { cursor:pointer; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible,#stage:focus-visible { outline:3px solid #20382f; outline-offset:2px; }
.primary { color:#fff; background:var(--accent); border-color:var(--accent); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
[data-touch-hint] { display:none; }
.quiet,.field-label { color:var(--muted); font-size:12px; }

/* One header row. Budget editing stays inside a native disclosure. */
.topbar { position:relative; z-index:6; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; min-height:70px; padding:calc(8px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left)); border-bottom:1px solid var(--line); background:#fff; }
.back-link { justify-self:start; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 4px; font-size:15px; white-space:nowrap; }
.back-link>span { font-size:19px; }
.project-name { font:600 19px/1.2 'Noto Serif TC','Songti TC',serif; letter-spacing:.04em; }
.budget-summary { display:flex; justify-content:flex-end; align-items:center; gap:8px; min-width:0; font-size:12px; }
.budget-label { flex-shrink:0; color:var(--muted); }
.budget-editor { position:relative; min-width:0; }
.budget-amounts { display:flex; align-items:center; gap:5px; min-height:44px; min-width:0; list-style:none; white-space:nowrap; font-size:13px; font-variant-numeric:tabular-nums; }
.budget-amounts::-webkit-details-marker,.inspector-summary::-webkit-details-marker { display:none; }
.budget-amounts strong { flex-shrink:0; font-weight:500; }
#budget-limit { min-width:0; overflow:hidden; text-overflow:ellipsis; border-bottom:1px dashed #C9C2B5; }
.budget-popover { position:absolute; top:calc(100% + 8px); right:0; z-index:1; width:min(260px,calc(100vw - 24px)); padding:18px; display:grid; gap:10px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 10px 30px #1c19171f; }
.budget-popover input { width:100%; min-width:0; }
.budget-progress-row { display:flex; align-items:center; gap:12px; }
.budget-track { flex:1; height:5px; border-radius:3px; overflow:hidden; background:var(--line); }
#budget-progress { width:0; height:100%; background:var(--accent); }
#budget-percent { font-size:12px; font-variant-numeric:tabular-nums; }
#budget-unknown { font-size:11px; color:var(--invalid); }

/* Controls occupy their own row and never overlap the stage. */
.workspace { display:grid; grid-template-rows:minmax(0,1fr) auto; min-width:0; min-height:0; overflow:hidden; }
.drawing { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; min-width:0; min-height:0; overflow:hidden; }
.drawing-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:8px 16px; border-bottom:1px solid var(--line); background:#fff; }
.mode-tabs { display:flex; flex-shrink:0; overflow:hidden; border:1px solid #DFD9CE; border-radius:9px; }
.mode-tabs button { min-width:54px; min-height:42px; padding:8px 14px; border:0; border-radius:0; font-size:12px; color:var(--muted); }
.mode-tabs button[aria-pressed=true] { color:#fff; background:var(--accent); }
.room-control { display:flex; align-items:center; gap:8px; min-width:0; font-size:12px; color:var(--muted); }
.room-control select { width:128px; min-width:0; padding:8px; font-size:12px; color:var(--ink); }
#section-note { font-size:10px; font-weight:400; color:var(--muted); }
/* Fit leaves the glass controls clear; zoomed models may extend behind them. */
.scene-sheet { position:relative; min-width:0; min-height:0; background:#f4f2ee; }
#stage { position:relative; width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; touch-action:none; background:#f4f2ee; cursor:crosshair; }
.view-pad { position:absolute; z-index:2; right:12px; bottom:12px; display:grid; grid-template:repeat(3,44px) auto / repeat(3,44px); gap:4px; color:#65685e; }
.view-pad button { width:44px; height:44px; padding:10px; border:1px solid #ffffffb3; border-radius:10px; background:linear-gradient(145deg,#ffffff80,#e7e9e036); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:inset 1px 1px 2px #ffffffed,inset -1px -1px 2px #20382f38,2px 4px 9px #20382f21; transition:transform 180ms cubic-bezier(.2,.8,.3,1.4),box-shadow 180ms ease,background-color 180ms ease; }
.view-pad button:active { transform:translateY(2px) scale(.94); background-color:#20382f40; box-shadow:inset 2px 3px 6px #20382f47,inset -1px -1px 3px #ffffffdb,0 1px 2px #20382f1a; transition-duration:60ms; }
.view-pad svg { display:block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 0 #fff); }
#zoom-in { grid-area:1/2; }
#view-left { grid-area:2/1; }
#fit { grid-area:2/2; }
#view-right { grid-area:2/3; }
#zoom-out { grid-area:3/2; }
#view-label { grid-area:4/1/5/4; padding-top:3px; text-align:center; font-size:10px; line-height:1.4; color:var(--muted); }
@media(prefers-reduced-motion:reduce) { .view-pad button { transition:none; } }
#stage canvas,#overlay { position:absolute; inset:0; display:block; width:100%; height:100%; }
#overlay { pointer-events:none; overflow:hidden; }
#overlay path,#overlay polygon { vector-effect:non-scaling-stroke; }
#overlay .selection-outline { stroke:none; stroke-dasharray:none; }
#loading { position:absolute; inset:0; display:grid; place-items:center; padding:24px; color:var(--muted); background:#f5f2ece8; }
.selection-tools { position:absolute; z-index:3; width:156px; height:92px; pointer-events:none; }
.selection-tools button { position:absolute; width:44px; height:44px; min-height:44px; padding:0; border:1px solid #E7E1D6; border-radius:50%; background:#fff; color:#4A453E; box-shadow:0 3px 10px #1c191738; pointer-events:auto; font-size:23px; display:grid; place-items:center; }
#arc-left { left:0; bottom:0; }
#arc-delete { left:56px; top:0; color:#80685e; }
#arc-right { right:0; bottom:0; }
#arc-delete svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#placement-status { font-size:11px; line-height:1.4; color:var(--valid); overflow-wrap:anywhere; }
#placement-status.invalid { color:var(--invalid); }
.canvas-feedback { flex:1 1 240px; min-width:0; }
#arc-place { flex-shrink:0; min-width:72px; font-size:12px; }
.drawing-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:2px 16px; padding:5px 16px; min-height:28px; border-top:1px solid var(--line); background:#fff; font-size:11px; line-height:1.5; }
#notice { flex:1 1 260px; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#notice.error { color:var(--invalid); }
.input-hint { color:#8A857C; font-size:10px; }

/* Drawer bar stays visible; open content takes no more than 42% of the viewport. */
.furniture-drawer { position:relative; z-index:5; min-width:0; padding-bottom:env(safe-area-inset-bottom); border-top:1px solid var(--line); background:#fff; }
.drawer-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; padding:8px 16px; }
.drawer-toggle { flex-shrink:0; min-width:140px; border-color:var(--accent); color:var(--accent); font-size:13px; font-weight:500; }
.drawer-toggle[aria-expanded=true] { background:var(--paper); }
.drawer-bar-hint { flex:1; color:var(--muted); font-size:12px; }
#drawer-content { max-height:min(42dvh,300px); overflow:auto; overscroll-behavior:contain; border-top:1px solid var(--line); }
.category-rail { display:flex; align-items:center; gap:4px; overflow-x:auto; overscroll-behavior-x:contain; touch-action:pan-x; padding:4px 16px; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.category-rail button,.category-rail a { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px 12px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:12px; white-space:nowrap; }
.category-rail button[aria-pressed=true] { color:var(--accent); background:#EFEDE4; }
.category-rail button>span { font-size:16px; }
.category-rail a { margin-left:auto; color:var(--ink); }
.designer-mark { width:26px; height:26px; display:grid; place-items:center; border-radius:5px; background:var(--ink); }
.designer-mark img { display:block; width:18px; height:auto; }
.library { min-width:0; }
.library-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 16px; padding:8px 16px 4px; }
.library-heading h2 { font-size:12px; font-weight:500; }
#catalogue-count { margin-left:4px; font-size:11px; font-weight:400; color:var(--muted); }
.catalogue-note { font-size:10px; color:#8A857C; }
.catalogue { display:flex; flex-wrap:nowrap; align-items:stretch; gap:12px; overflow-x:auto; overflow-y:hidden; padding:6px 16px 12px; touch-action:pan-x; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#CBC5B9 transparent; }
.furniture-card { flex:0 0 148px; width:148px; min-width:0; padding:8px; border:1px solid #DFD9CE; border-radius:10px; text-align:left; background:#fff; touch-action:pan-x; user-select:none; -webkit-touch-callout:none; }
.furniture-card img { display:block; width:100%; height:82px; object-fit:contain; background:#fff; pointer-events:none; -webkit-user-drag:none; }
.furniture-card>span { display:block; padding-top:6px; }
.card-title,.card-title strong,.card-price,.card-dimensions { display:block; }
.card-title strong { font-size:12px; line-height:1.4; font-weight:500; }
.card-title small { display:none; }
.card-price { margin-top:4px; font-size:12px; color:#57534E; }
.card-dimensions { margin-top:3px; font-size:10px; color:var(--muted); }
.furniture-card[aria-pressed=true] { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.furniture-card[aria-disabled=true] { opacity:.5; }
.furniture-card[aria-disabled=true]::after { content:attr(data-reason); display:block; margin-top:5px; font-size:10px; color:var(--invalid); }
.category-empty { padding:16px; color:var(--muted); font-size:12px; }
.furniture-list { margin:0 16px 8px; font-size:11px; color:var(--muted); }
.furniture-list summary { min-height:30px; display:flex; align-items:center; }
.furniture-list ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:6px; list-style:none; margin:6px 0 0; padding:0; }
.furniture-list button { width:100%; text-align:left; font-size:11px; }
.furniture-list button[aria-disabled=true] { color:var(--muted); }

/* Optional item information opens above the bar and scrolls within the viewport. */
.inspector { position:relative; flex-shrink:0; }
.inspector-summary { display:flex; align-items:center; gap:10px; min-height:44px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; list-style:none; font-size:12px; }
.inspector-summary::after { content:'⌃'; color:var(--muted); }
.inspector[open]>.inspector-summary { color:var(--accent); background:var(--paper); border-color:#CBC5B9; }
.inspector[open]>.inspector-summary::after { content:'⌄'; }
#count { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.inspector-panel { position:absolute; right:0; bottom:calc(100% + 12px); width:min(620px,calc(100vw - 24px)); max-height:min(54dvh,calc(100dvh - 136px)); overflow:auto; overscroll-behavior:contain; padding:20px; border:1px solid #DFD9CE; border-radius:14px; background:#fff; box-shadow:0 -6px 28px #1c191724; }
.furniture-drawer:has(#drawer-content:not([hidden])) .inspector-panel { max-height:max(80px,min(54dvh,calc(58dvh - 136px))); }
.inspector h2 { font:600 16px/1.4 'Noto Serif TC','Songti TC',serif; overflow-wrap:anywhere; }
#empty-selection { display:grid; gap:8px; }
#empty-selection p { font-size:12px; color:var(--muted); }
#selection { display:grid; grid-template-columns:96px minmax(0,1fr); align-items:start; gap:14px 18px; }
#selection>* { min-width:0; }
.selected-image { width:96px; height:96px; object-fit:contain; background:#fff; }
.eyebrow { margin-bottom:3px; font-size:11px; color:var(--muted); }
.selected-price { margin-top:4px; font-size:15px; font-variant-numeric:tabular-nums; }
#asset-status { margin-top:6px; font-size:11px; line-height:1.4; color:var(--muted); overflow-wrap:anywhere; }
#asset-status.error { color:var(--invalid); }
.dimensions { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:12px 28px; margin:0; }
.dimensions dt { color:var(--muted); font-size:11px; }
.dimensions dd { margin:2px 0 0; font-size:12px; }
.selection-options { grid-column:1/-1; }
.variants { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 12px; }
.swatch { width:44px; height:44px; min-height:44px; flex:0 0 44px; padding:0; border-radius:50%; background:var(--swatch); }
.swatch[aria-checked=true] { outline:2px solid var(--accent); outline-offset:2px; }
#lock-status { font-size:11px; color:var(--muted); }
.placement-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.placement-actions button { flex:1; font-size:12px; }
.room-status { margin-top:14px; color:var(--muted); font-size:10px; line-height:1.6; }
.placed-details { margin-top:14px; border-top:1px solid var(--line); font-size:12px; }
.placed-details summary { min-height:44px; padding:12px 0; }
.placed-heading { display:flex; justify-content:flex-end; }
.placed-heading button { font-size:11px; }
#placed { display:grid; gap:4px; padding:0; margin:8px 0; list-style:none; }
#placed button { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:left; font-size:12px; }
#placed button[aria-current=true] { color:var(--accent); background:var(--paper); }
#placed small { color:var(--muted); font-size:10px; }
.inspector-actions { display:flex; justify-content:flex-end; margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
#restart { color:#80685e; font-size:12px; }
#idle-dialog { width:min(430px,calc(100vw - 32px)); padding:28px; border:1px solid var(--line); border-radius:14px; color:var(--ink); }
#idle-dialog::backdrop { background:#1c191780; }
#idle-dialog h2 { font:600 22px/1.4 'Noto Serif TC','Songti TC',serif; }
#idle-dialog p { margin:16px 0; color:var(--muted); }

/* On Mac and iPad, reserve a narrow side column so details never cover the scene. */
@media(min-width:701px) {
 .workspace:has(.inspector[open]) .drawing { margin-right:304px; }
 .inspector { position:static; }
 .inspector-panel { right:0; bottom:100%; width:304px; height:calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height:calc(100dvh - 120px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding:16px; border-radius:0; border-right:0; box-shadow:none; }
 #selection { grid-template-columns:76px minmax(0,1fr); gap:12px; }
 .selected-image { width:76px; height:76px; }
}

@media(hover:hover) {
 button:hover:not(:disabled),.back-link:hover { border-color:var(--accent); color:var(--accent); }
 .primary:hover:not(:disabled) { color:#fff; background:#20382f; box-shadow:inset 0 0 0 1px #ffffff80; }
 .mode-tabs button[aria-pressed=true]:hover { color:#fff; }
 .furniture-card:hover:not(:disabled) { background:#fff; }
}
@media(max-width:900px), (pointer:coarse) {
 .drawing { grid-template-rows:auto minmax(0,1fr) auto auto; }
 .scene-sheet { display:grid; grid-template-rows:minmax(0,1fr) auto; }
 #stage { height:auto; }
 .view-pad { position:static; justify-self:center; grid-template:44px / repeat(5,44px); gap:10px; padding:8px; }
 #view-left { grid-area:1/1; }
 #zoom-out { grid-area:1/2; }
 #fit { grid-area:1/3; }
 #zoom-in { grid-area:1/4; }
 #view-right { grid-area:1/5; }
 #view-label { display:none; }
 .selection-tools { position:static; width:auto; height:auto; display:flex; align-items:center; justify-content:center; gap:16px; padding:6px; border-top:1px solid var(--line); background:#fff; pointer-events:auto; }
 .selection-tools button { position:static; flex:0 0 44px; box-shadow:none; }
 #drawer-content { max-height:min(300px,max(100px,calc(100dvh - 470px))); }
 [data-keyboard-hint] { display:none; }
 [data-touch-hint] { display:inline; }
 .drawing-footer { gap:1px 12px; }
}
@media(max-width:700px) {
 .topbar { gap:6px; padding-inline:12px; }
 .project-name { font-size:19px; }
 .budget-summary { gap:4px; font-size:10px; }
 .budget-amounts { gap:3px; font-size:10px; }
 .drawing-toolbar { gap:6px 8px; padding:6px 12px; }
 .mode-tabs button { min-width:48px; padding:8px 10px; }
 .room-control { margin-left:auto; }
 .room-control>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .room-control select { width:124px; }
 #section-note { display:none; }
 .drawing-footer { padding:4px 12px; }
 #notice { font-size:10px; }
 .canvas-feedback { flex-basis:180px; }
 .drawing-footer .input-hint { flex-basis:100%; }
 .input-hint { font-size:10px; }
 .drawer-bar { min-height:56px; gap:8px; padding:6px 12px; }
 .drawer-toggle { min-width:112px; font-size:12px; }
 .drawer-bar-hint { display:none; }
 .inspector-summary { gap:7px; padding:8px; font-size:11px; }
 .category-rail { padding-inline:12px; }
 .category-rail button,.category-rail a { padding-inline:10px; }
 .library-heading { padding-inline:12px; }
 .catalogue-note { display:none; }
 .catalogue { gap:10px; padding-inline:12px; }
 .furniture-card { flex-basis:132px; width:132px; }
 .furniture-card img { height:72px; }
 .furniture-list { margin-inline:12px; }
 .inspector-panel { padding:16px; }
 #selection { grid-template-columns:76px minmax(0,1fr); gap:12px; }
 .selected-image { width:76px; height:76px; }
 .inspector h2 { font-size:15px; }
 .selected-price { font-size:14px; }
}
@media(max-height:640px) {
 #drawer-content { max-height:min(32dvh,max(80px,calc(100dvh - 400px))); }
 .furniture-card img { height:60px; }
 .category-rail { padding-block:0; }
 .drawing-footer { padding-block:3px; }
 .view-pad { right:8px; bottom:8px; }
 #view-label { display:none; }
}
@media(max-height:480px) {
 .workspace { overflow:auto; grid-template-rows:minmax(340px,1fr) auto; }
}