/*
  Paint Studio (paint.html). Model centre stage, the rooms deck on the left, the color deck on the right.
  The surfaces and swatches carry the user's paint colors as --c (set inline from data); nothing here recolors them.
*/
.app { --stage-min: 360px; --col-rooms: 280px; --col-paint: 360px; --pad-w: var(--s-7); height: 100%; display: grid; grid-template-columns: var(--col-rooms) minmax(0, 1fr) var(--col-paint); grid-template-rows: auto minmax(0, 1fr); }
html, body { height: 100%; }

/* panel headings are small labels, not headlines */
.app h2 { margin: var(--s-5) var(--s-4) var(--s-2); font: var(--fw-regular) var(--fs-2xs)/1.4 var(--font-ui); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-3); text-wrap: wrap; }

/* top bar */
.top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); padding: var(--s-2) var(--s-4); min-height: calc(var(--s-8) - var(--s-2)); border-bottom: var(--bw) solid var(--line); background: var(--surface-1); }
.brand { display: flex; flex-direction: column; gap: 0; font: var(--fw-medium) var(--fs-xl)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--text); }
.brand small { font: var(--fs-xs)/1.4 var(--font-mono); color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; }
.scheme { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-left: auto; }
.scheme label { font: var(--fw-regular) var(--fs-2xs)/1.4 var(--font-ui); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-3); margin-right: var(--s-1); }
.scheme select { width: auto; min-width: 12rem; }
.scheme .vr { align-self: stretch; width: var(--bw); margin: var(--s-1) var(--s-1); background: var(--line); }
.status { font-size: var(--fs-xs); color: var(--text-2); min-width: 7.5rem; letter-spacing: 0.02em; }
.status::before { content: ''; display: inline-block; width: var(--s-1); height: var(--s-1); margin-right: var(--s-2); vertical-align: middle; border-radius: var(--r-full); background: var(--st-idle); }
.status.ok { color: var(--st-done); } .status.ok::before { background: var(--st-done); }
.status.warn { color: var(--brass-bright); } .status.warn::before { background: var(--brass-bright); box-shadow: var(--glow-dot); }

/* rooms deck */
.rooms { background: var(--surface-1); border-right: var(--bw) solid var(--line); overflow: auto; padding-block: var(--s-1) var(--s-6); }
details.room { border-bottom: var(--bw) solid var(--line); }
details.room > summary { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-2); padding: var(--s-3) var(--s-4); cursor: pointer; transition: background var(--dur-fast) var(--ease); }
details.room > summary::-webkit-details-marker { display: none; }
details.room > summary:hover { background: var(--surface-2); }
details.room[open] > summary { background: var(--surface-2); }
details.room > summary:focus-visible { outline-offset: calc(-1 * var(--s-1)); }
.rname { font-weight: var(--fw-medium); font-size: var(--fs-md); color: var(--text); }
.rarea { font: var(--fs-xs) var(--font-mono); color: var(--text-2); font-variant-numeric: tabular-nums; align-self: center; }
.rlevel { font-weight: var(--fw-regular); color: var(--text-2); font-size: var(--fs-xs); margin-left: var(--s-1); }
.rdots { grid-column: 1 / -1; display: flex; gap: var(--s-1); flex-wrap: wrap; }
.rdots i { width: var(--s-3); height: var(--s-1); border-radius: var(--r-xs); background: var(--c); outline: var(--bw) solid var(--line-strong); outline-offset: calc(-1 * var(--bw)); }
.rbody { padding: var(--s-1) var(--s-2) var(--s-3); background: var(--surface-2); }
.ractions { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-1) var(--s-2) var(--s-3); }
.ractions .btn { min-height: var(--ctl-sm); padding: 0 var(--s-3); font-size: var(--fs-xs); }
.row { width: 100%; display: grid; grid-template-columns: var(--s-5) 1fr auto; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); border: var(--bw) solid transparent; border-radius: var(--r-sm); background: transparent; text-align: left; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.row:hover { background: var(--surface-3); }
.row.on { background: var(--brass-wash-2); border-color: var(--line-brass); }
.row .dot { width: var(--s-5); height: var(--s-4); border-radius: var(--r-xs); background: var(--c); outline: var(--bw) solid var(--line-strong); outline-offset: calc(-1 * var(--bw)); }
.row .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: var(--fs-sm); }
.row .lbl small { display: block; font-size: var(--fs-xs); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.row .sf { font: var(--fs-xs) var(--font-mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
details.parts { margin: 0 0 var(--s-1) var(--s-6); border-left: var(--bw) solid var(--line-strong); }
details.parts > summary { cursor: pointer; padding: var(--s-1) var(--s-2); font-size: var(--fs-xs); color: var(--text-2); list-style: none; }
details.parts > summary:hover { color: var(--text); }
details.parts > summary::-webkit-details-marker { display: none; }
details.parts > summary::before { content: ''; display: inline-block; width: var(--s-1); height: var(--s-1); margin-right: var(--s-2); vertical-align: 0.1em; border-right: calc(1.5 * var(--bw)) solid currentColor; border-bottom: calc(1.5 * var(--bw)) solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-fast) var(--ease); }
details.parts[open] > summary::before { transform: rotate(45deg); }
details.parts .row { padding-block: var(--s-1); }
details.parts .row .dot { width: var(--s-4); height: var(--s-4); }

/* stage: the frame around the 3D model. The canvas itself is the scene; only its surrounding is styled. */
.stage { position: relative; background: var(--stage); min-height: 0; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.controls { position: absolute; z-index: var(--z-raised); top: var(--s-3); left: var(--s-3); display: grid; gap: var(--s-2); justify-items: start; max-width: calc(100% - 2 * var(--s-3)); }
.viewbar { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.viewbar .btn { background: var(--header-veil); backdrop-filter: blur(var(--blur)); }
.viewbar .btn.primary { background: var(--brass); }
.viewbar .btn.primary:hover { background: var(--brass-bright); }
.viewbar .btn[aria-pressed='true']:not(.primary) { background: var(--surface-3); }
.lightbar { display: grid; gap: var(--s-2); padding: var(--s-3); background: var(--header-veil); backdrop-filter: blur(var(--blur)); border: var(--bw) solid var(--line); border-radius: var(--r-md); max-width: 24rem; }
.lightbar .seg button { padding: 0 var(--s-2); }
.exp { display: flex; align-items: center; gap: var(--s-3); font: var(--fw-regular) var(--fs-2xs)/1.4 var(--font-ui); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-2); }
.exp input { flex: 1; }
.lightnote { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); }
.lvseg { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; padding: var(--s-1) var(--s-2); border-radius: var(--r-md); background: var(--header-veil); backdrop-filter: blur(var(--blur)); border: var(--bw) solid var(--line); }
.lvseg .lvlabel { font: var(--fw-regular) var(--fs-2xs)/1.4 var(--font-ui); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-2); margin: 0 var(--s-1) 0 var(--s-2); }
.fov { display: inline-flex; align-items: center; gap: var(--s-3); cursor: default; }
.fov span { color: var(--text-2); }
.fov input { width: 5.5rem; }
.fov output { font-family: var(--font-mono); font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; color: var(--text); }
.toast { top: calc(var(--s-8) + var(--s-5)); }
.exportbox textarea { width: 100%; height: 12.5rem; resize: vertical; }
.crosshair { position: absolute; left: 50%; top: 50%; width: var(--s-5); height: var(--s-5); transform: translate(-50%, -50%); pointer-events: none; }
.crosshair::before, .crosshair::after { content: ''; position: absolute; background: var(--text); outline: var(--bw) solid var(--bg); }
.crosshair::before { left: calc(50% - var(--bw)); top: 0; width: calc(2 * var(--bw)); height: 100%; }
.crosshair::after { top: calc(50% - var(--bw)); left: 0; height: calc(2 * var(--bw)); width: 100%; }
.walkhint, .help, .hud, .ih-bar { background: var(--header-veil); backdrop-filter: blur(var(--blur)); border: var(--bw) solid var(--line); }
.walkhint { position: absolute; z-index: var(--z-raised); left: 50%; bottom: var(--s-4); transform: translateX(-50%); display: grid; gap: var(--s-1); justify-items: center; text-align: center; padding: var(--s-2) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-xs); max-width: calc(100% - 2 * var(--s-3)); }
.walkhint #walkMsg { font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--text); }
.walkhint .keys { color: var(--text-2); }
@media (hover: none) { .walkhint .keys { display: none; } }
.pad { position: absolute; z-index: var(--z-raised); left: var(--s-4); bottom: var(--s-4); display: grid; grid-template-columns: repeat(3, var(--pad-w)); grid-template-rows: repeat(2, var(--pad-w)); gap: var(--s-2); }
.pad button { display: grid; place-items: center; padding: 0; border: var(--bw) solid var(--line-strong); border-radius: var(--r-md); background: var(--header-veil); backdrop-filter: blur(var(--blur)); color: var(--text); touch-action: none; user-select: none; transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.pad button:active { border-color: var(--brass); color: var(--brass-bright); }
.pad [data-k='w'] { grid-column: 2; grid-row: 1; } .pad [data-k='a'] { grid-column: 1; grid-row: 2; }
.pad [data-k='s'] { grid-column: 2; grid-row: 2; } .pad [data-k='d'] { grid-column: 3; grid-row: 2; }
.hud { position: absolute; z-index: var(--z-raised); left: 50%; bottom: var(--s-4); transform: translateX(-50%); display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-md); max-width: calc(100% - 2 * var(--s-3)); }
.hud .where { font-weight: var(--fw-medium); padding: 0 var(--s-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.hud .btn.icon { min-width: var(--ctl); }
.help { position: absolute; z-index: var(--z-raised); bottom: calc(var(--s-8) + var(--s-1)); right: var(--s-3); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); border-radius: var(--r-md); padding: var(--s-2) var(--s-3); max-width: 17rem; }

/* walkthrough: the stage takes the whole page; everything else steps aside */
.app.immersive { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); }
.app.immersive > .top, .app.immersive > .rooms, .app.immersive > .paint,
.app.immersive .controls, .app.immersive .help, .app.immersive .hud { display: none !important; }
.app.immersive .stage { grid-column: 1; grid-row: 1; height: 100%; min-height: 0; }
.ihud { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-raised); }
.ihud > * { pointer-events: auto; }
.ih-bar { position: absolute; top: var(--s-3); left: var(--s-3); right: var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); }
.ih-where { display: grid; line-height: 1.1; padding-right: var(--s-2); }
.ih-where small { font: var(--fw-regular) var(--fs-2xs)/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-2); }
.ih-where span { font: var(--fw-medium) var(--fs-xl)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--text); }
.ih-field span { white-space: nowrap; }
.ih-field { display: flex; align-items: center; gap: var(--s-2); font: var(--fw-regular) var(--fs-2xs)/1.4 var(--font-ui); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-2); }
.ih-field select { max-width: 13rem; min-height: var(--ctl-sm); letter-spacing: var(--tracking-normal); text-transform: none; font-size: var(--fs-xs); }
.ih-light button { padding: 0 var(--s-3); }
.ih-spacer { flex: 1; }
.ih-prompt { position: absolute; z-index: var(--z-overlay); left: 50%; top: calc(50% + var(--s-5)); transform: translateX(-50%); display: grid; justify-items: center; gap: var(--s-1); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--scrim-strong); border: var(--bw) solid var(--line); color: var(--on-scrim); font-size: var(--fs-sm); font-weight: var(--fw-medium); pointer-events: none; text-align: center; white-space: nowrap; }
.ih-prompt small { font-weight: var(--fw-regular); font-size: var(--fs-xs); color: var(--on-scrim); }
.ih-picker { position: absolute; top: calc(var(--s-8) + var(--s-3)); right: var(--s-3); bottom: var(--s-3); width: min(24rem, calc(100% - 2 * var(--s-3))); display: grid; grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-4); background: var(--surface-2); border: var(--bw) solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-float); animation: arrive var(--dur) var(--ease) both; }
.ihp-head { display: grid; grid-template-columns: var(--s-7) 1fr auto; gap: var(--s-3); align-items: center; }
.ihp-x { display: grid; place-items: center; width: var(--ctl); height: var(--ctl); padding: 0; border: var(--bw) solid var(--line-strong); border-radius: var(--r-sm); background: transparent; color: var(--text-2); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ihp-x:hover { border-color: var(--brass); color: var(--brass-bright); }
.ihp-room { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--text); }
.ihp-chips { overflow: auto; min-height: 0; display: grid; gap: var(--s-2); align-content: start; }
.ihp-chips h2 { margin: var(--s-1) 0 0; color: var(--text-2); }
.ihp-foot { display: flex; justify-content: space-between; gap: var(--s-2); }
@media (pointer: coarse) { .ihp-x { width: var(--tap); height: var(--tap); } }

/* paint deck */
.paint { background: var(--surface-1); border-left: var(--bw) solid var(--line); overflow: auto; padding-block: var(--s-1) var(--s-6); }
.sel { margin: var(--s-1) var(--s-4) var(--s-3); padding: var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--surface-2); display: grid; gap: var(--s-3); }
.sel-head { display: grid; grid-template-columns: var(--s-7) 1fr; gap: var(--s-3); align-items: center; }
.bigchip { width: var(--s-7); height: var(--s-7); border-radius: var(--r-sm); background: var(--c); outline: var(--bw) solid var(--line-strong); outline-offset: calc(-1 * var(--bw)); }
.sel-title { font: var(--fw-semibold) var(--fs-md)/1.25 var(--font-ui); letter-spacing: 0; color: var(--text); text-wrap: balance; }
.sel-sub { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); }
.sel-sub code { font: var(--fs-xs) var(--font-mono); background: none; border: 0; padding: 0; color: var(--text); }
.sel .seg, .picker .seg, .ih-picker .seg { display: flex; }
.sel .seg button, .picker .seg button, .ih-picker .seg button { flex: 1; padding: 0 var(--s-1); }
.sel-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.sel-actions .btn { min-height: var(--ctl-sm); padding: 0 var(--s-3); font-size: var(--fs-xs); }
.sel-actions:empty { display: none; }
.picker { margin: 0 var(--s-4); display: grid; gap: var(--s-3); }
.search { width: 100%; }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: var(--s-2); }
#chipArea h2 { margin: var(--s-1) 0 var(--s-2); }
#chipArea > h2:not(:first-child) { margin-top: var(--s-4); }
.chip { position: relative; display: grid; grid-template-rows: var(--s-7) auto; padding: 0; border: var(--bw) solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); text-align: left; overflow: hidden; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.chip .sw { background: var(--c); background-image: var(--img, none); background-size: cover; background-position: center; border-bottom: var(--bw) solid var(--line); }
.chip .meta { padding: var(--s-1) var(--s-2) var(--s-2); display: grid; gap: var(--s-1); min-width: 0; }
.chip .nm { font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.3; color: var(--text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chip .cd { font: var(--fs-2xs) var(--font-mono); color: var(--text-2); letter-spacing: 0.02em; }
.chip:hover:not(:disabled) { border-color: var(--brass); transform: translateY(calc(-1 * var(--bw))); }
.chip.cur { border-color: var(--brass-bright); background: var(--brass-wash-3); }
.chip.cur .sw::after { content: ''; position: absolute; top: var(--s-1); right: var(--s-1); width: var(--s-4); height: var(--s-4); border-radius: var(--r-full); background: var(--brass-bright); }
.chip.cur .sw::before { content: ''; position: absolute; z-index: var(--z-raised); top: calc(var(--s-2) + var(--s-1) / 2); right: var(--s-2); width: var(--s-2); height: var(--s-1); border-left: calc(1.5 * var(--bw)) solid var(--on-brass); border-bottom: calc(1.5 * var(--bw)) solid var(--on-brass); transform: rotate(-45deg); }
.chip:disabled { cursor: not-allowed; }   /* never dim a swatch: it would misrepresent the color */
.custom { display: grid; grid-template-columns: var(--s-7) 1fr auto; gap: var(--s-2); align-items: center; }
.custom input[type='color'] { width: var(--s-7); }
.totals { margin: var(--s-4) var(--s-4) 0; }
.totals h2 { margin-left: 0; margin-right: 0; }
.totals table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.totals td { padding: var(--s-2) var(--s-1); border-top: var(--bw) solid var(--line); vertical-align: middle; color: var(--text); line-height: 1.5; }
.totals td small { color: var(--text-2); }
.totals td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.totals .dot { display: inline-block; width: var(--s-4); height: var(--s-3); border-radius: var(--r-xs); background: var(--c); outline: var(--bw) solid var(--line-strong); outline-offset: calc(-1 * var(--bw)); vertical-align: -0.1em; margin-right: var(--s-2); }
.totals .note, .picker .note { color: var(--text-2); font-size: var(--fs-xs); }
.totals .note { margin-top: var(--s-3); }

/* tablet and phone: one column */
@media (max-width: 1100px) { .app { --col-rooms: 250px; --col-paint: 320px; } }
@media (max-width: 860px) {
  html, body { height: auto; }
  .app { display: block; height: auto; }
  .stage { height: 62vh; min-height: var(--stage-min); }
  .rooms, .paint { border: 0; overflow: visible; }
  .paint { border-top: var(--bw) solid var(--line); }
  .help, .lightnote { display: none; }
  .scheme { margin-left: 0; }
  .scheme .vr { display: none; }
  .app.immersive { display: grid; height: 100%; }
  .app.immersive .stage { height: 100%; }
  html:has(.app.immersive), body:has(.app.immersive) { height: 100%; }
  .ih-picker { top: auto; height: 62%; }
  .ih-field span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .chip:hover { transform: none; } }
@media (forced-colors: active) {
  .row.on, .chip.cur { outline: var(--bw-2) solid Highlight; }
  .rdots i, .row .dot, .bigchip, .totals .dot { forced-color-adjust: none; }
  .chip .sw { forced-color-adjust: none; }
}