/* room-cad-workbench.css - Other Rooms 3D workbench (ROOM_3D_WORKBENCH_LATTICE.md, 2026-09-29).
   A stylesheet, not inline styles: the /remodel-preview Content-Security-Policy allows style-src 'self' only, so an
   injected <style> or a style="" attribute is blocked (seen in the browser console, 2026-09-30). */

/* Other Rooms has seven steps now. The narrow-screen rule `.room-studio .kitchen-progress` gives six columns, which
   wrapped step 7 onto its own row; this selector is more specific, so it wins at every width. */
.room-studio .kitchen-progress[aria-label="Other Rooms progress"] { grid-template-columns: repeat(7, minmax(58px, 1fr)); }

.room-cad-viewport { min-height: 360px; }
.cad3d-context-delete-menu {
  background: #fff;
  border: 1px solid #789080;
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  max-width: min(320px, calc(100vw - 16px));
  min-width: 220px;
  padding: 10px;
  position: fixed;
  z-index: 2147483646;
}
.cad3d-context-delete-menu[hidden] { display: none; }
.cad3d-context-delete-menu strong { color: #123d28; overflow-wrap: anywhere; }
.cad3d-context-delete-menu button {
  background: #8f1d14;
  border: 1px solid #6f120d;
  border-radius: 7px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  min-height: 42px;
  padding: 8px 12px;
  text-align: left;
}
.cad3d-context-delete-menu button:focus-visible { outline: 3px solid #f5c518; outline-offset: 2px; }
/* FULL-SCREEN ROOM WORKBENCH (2026-10-12). In ordinary page flow this wrapper is visually neutral. In full screen the
   real 3D canvas fills the screen and the SAME controls become one movable, resizable palette. Nothing is copied, which
   keeps one set of event handlers and one geometry authority. */
.room-cad-fullscreen-palette { box-sizing: border-box; min-width: 0; }
.room-cad-fullscreen-palette-header, .room-cad-fullscreen-palette-resize, .room-cad-fullscreen-viewer-controls { display: none; }
.room-cad-fullscreen-palette-content { min-width: 0; }
/* The Room 3D AI is one dock inside the viewport module. It can change sides or become one icon without entering the
   global module grid, so the room and its assistant cannot be separated by tool reordering. */
.room-cad-view-module .room-cad-ai-dock {
  box-sizing: border-box;
  margin: 10px 0 0;
  min-width: 0;
  position: relative;
  width: 100%;
}
.room-cad-view-module .room-cad-ai-dock[data-room-cad-ai-dock-position="above"] { margin: 0 0 10px; }
.room-cad-ai-position {
  min-height: 34px;
  border: 1px solid #486657;
  background: #fff;
  color: #183d2a;
  padding: 5px 8px;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}
.room-cad-ai-position:hover, .room-cad-ai-position:focus-visible { background: #f2c84b; color: #17130a; }
.room-cad-view-module .room-cad-ai-dock[data-collapsed="true"] {
  align-self: end;
  display: grid;
  justify-self: end;
  margin: 8px 0;
  padding: 4px;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  background: transparent;
}
.room-cad-view-module .room-cad-ai-dock[data-collapsed="true"] > header { display: grid; place-items: center; }
.room-cad-view-module .room-cad-ai-dock[data-collapsed="true"] > header > :first-child,
.room-cad-view-module .room-cad-ai-dock[data-collapsed="true"] .kitchen-cad-hermes-provider > :not([data-room-cad-ai-dock-toggle]) { display: none; }
.room-cad-view-module .room-cad-ai-dock[data-collapsed="true"] .kitchen-cad-hermes-provider { display: grid; place-items: center; }
.room-cad-view-module .room-cad-ai-toggle {
  border-radius: 50%;
  box-shadow: 0 7px 20px rgba(7, 39, 25, .24);
}
.room-cad-view-module .room-cad-ai-dock[data-collapsed="true"] .room-cad-ai-toggle {
  width: 48px;
  height: 48px;
  border: 2px solid #f2c84b;
  background: #123d28;
  color: #fff;
  font-size: 13px;
  letter-spacing: .03em;
}
.room-cad-view-module.is-room-cad-fullscreen {
  background: #07160f;
  border: 0;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
  max-height: none;
  max-width: none;
  overflow: hidden;
  padding: 0;
  width: 100%;
}
html.has-room-cad-fullscreen { overflow: hidden; }
/* The class is also a standards-compliant CSS fallback for browsers that refuse the native Fullscreen API. */
.room-cad-view-module.is-room-cad-fullscreen:not(:fullscreen) { inset: 0; position: fixed; z-index: 2147483000; }
.room-cad-view-module.is-room-cad-fullscreen > :is(.workbench-module-grab, .room-cad-module-toggle, .workbench-module-arrows) { display: none !important; }
[data-room-cad-controls][data-workbench-reorder] > .room-cad-view-module.is-room-cad-fullscreen > .room-cad-module-body {
  display: block;
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.room-cad-view-module.is-room-cad-fullscreen .room-cad-viewport {
  border: 0;
  border-radius: 0;
  height: 100%;
  inset: 0;
  max-height: none;
  min-height: 0;
  position: absolute !important;
  width: 100%;
}
.room-cad-view-module.is-room-cad-fullscreen .room-cad-ai-dock {
  left: 12px;
  margin: 0;
  max-height: min(46%, 430px);
  overflow: auto;
  position: absolute;
  width: min(560px, calc(100% - 24px));
  z-index: 90;
}
.room-cad-view-module.is-room-cad-fullscreen .room-cad-ai-dock[data-room-cad-ai-dock-position="above"] { top: 12px; }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-ai-dock[data-room-cad-ai-dock-position="below"] { bottom: 12px; }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-ai-dock[data-collapsed="true"] {
  left: auto;
  right: 12px;
  width: 54px;
  height: 54px;
  overflow: visible;
}
.room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-palette {
  background: rgba(248, 250, 248, .97);
  border: 1px solid #8da095;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .38);
  container-type: inline-size;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: calc(100% - 16px);
  max-width: calc(100% - 16px);
  min-height: 180px;
  min-width: min(280px, calc(100% - 16px));
  overflow: hidden;
  position: absolute;
  resize: both;
  z-index: 80;
}
.room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-palette-header {
  align-items: center;
  background: #123d28;
  color: #fff;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 50px;
  padding: 6px;
}
.room-cad-fullscreen-palette-drag {
  align-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: move;
  display: flex;
  font: inherit;
  gap: 8px;
  min-height: 42px;
  min-width: 0;
  padding: 6px 8px;
  text-align: left;
  touch-action: none;
}
.room-cad-fullscreen-palette-drag:focus-visible, .room-cad-fullscreen-palette-resize:focus-visible { outline: 3px solid #f2c84b; outline-offset: -3px; }
.room-cad-fullscreen-palette-drag span { font-size: 1.4rem; line-height: 1; }
.room-cad-fullscreen-palette-drag strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-palette-header .button { min-height: 40px; padding: 7px 10px; white-space: nowrap; }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-viewer-controls {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
  padding: 8px 10px 0;
}
.room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-palette-content {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 10px 28px;
}
.room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-viewer-controls :is(.cad3d-measurement-hud, .cad3d-navigation-pad, .cad3d-opening-measures, .cad3d-object-clearances) {
  box-sizing: border-box;
  inset: auto;
  margin: 0;
  max-width: none;
  position: static;
  transform: none;
  width: 100%;
}

.room-cad-view-module .cad3d-object-clearances {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 26;
  width: min(290px, calc(100% - 24px));
  max-height: min(48%, 330px);
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid rgba(125, 211, 252, .78);
  border-radius: 10px;
  background: rgba(2, 18, 13, .92);
  color: #f4fff9;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
  font-size: .78rem;
  line-height: 1.28;
  pointer-events: none;
}
.room-cad-view-module .cad3d-object-clearances[hidden] { display: none; }
.room-cad-view-module .cad3d-object-clearances strong,
.room-cad-view-module .cad3d-object-clearances > span { display: block; overflow-wrap: anywhere; }
.room-cad-view-module .cad3d-object-clearances > span { margin-top: 2px; color: #bae6fd; font-size: .72rem; }
.room-cad-view-module .cad3d-object-clearances dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; margin: 7px 0 0; }
.room-cad-view-module .cad3d-object-clearances dt { overflow-wrap: anywhere; }
.room-cad-view-module .cad3d-object-clearances dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-viewer-controls .cad3d-measurement-hud { display: flex; }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-viewer-controls .cad3d-navigation-pad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
}
.room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-viewer-controls .cad3d-navigation-pad :is(button, [data-cad3d-nav="recenter"], [data-cad3d-nav="focus-object"]) { grid-column: auto; min-width: 0; }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-toolbar { align-items: stretch; }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-toolbar > :is(.button, .room-cad-inline) { flex: 1 1 128px; min-width: 0; }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-toolbar-gap { display: none; }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-toolbar-note { flex: 1 0 100%; }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-wall-strip { grid-template-columns: minmax(0, 1fr) auto; }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-wall-strip-heading { grid-column: 1 / -1; }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-wall-construction-fields { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-palette-resize {
  align-items: end;
  background: transparent;
  border: 0;
  bottom: 2px;
  color: #123d28;
  cursor: nwse-resize;
  display: flex;
  font-size: 1.35rem;
  height: 38px;
  justify-content: end;
  padding: 5px;
  position: absolute;
  right: 2px;
  touch-action: none;
  width: 38px;
}
.room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-palette[data-palette-gesture] { user-select: none; }
@container (max-width: 360px) {
  .room-cad-fullscreen-palette-header { grid-template-columns: minmax(0, 1fr) auto; }
  .room-cad-fullscreen-palette-header [data-room-cad-palette-reset] { display: none; }
  .room-cad-fullscreen-palette-content .room-cad-toolbar > :is(.button, .room-cad-inline) { flex-basis: 100%; }
}
@media (max-width: 700px) {
  .room-cad-ai-position { min-height: 44px; }
  .room-cad-view-module .room-cad-ai-dock > header { align-items: center; }
  .room-cad-view-module .room-cad-ai-dock > header .kitchen-cad-hermes-provider { flex-wrap: wrap; }
  .room-cad-view-module.is-room-cad-fullscreen .room-cad-ai-dock { max-height: 42%; }
  .room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-palette { border-radius: 9px; min-width: min(220px, calc(100% - 16px)); }
  .room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-palette-header { grid-template-columns: minmax(0, 1fr) auto; }
  .room-cad-view-module.is-room-cad-fullscreen .room-cad-fullscreen-palette-header [data-room-cad-palette-reset] { display: none; }
}
/* PANEL ORDER (2026-10-12): collapsed Room 3D modules are equal-size tiles. `auto-fill` deliberately preserves the
   empty tracks on the last row, so its last tile is the same width as every tile above it. DOM order remains visual,
   focus and screen-reader order (never use dense packing here). An open module spans the entire grid and keeps the
   full-width control layout it had before this compact navigation was introduced. */
.room-cad-controls[data-workbench-reorder] { display: grid; gap: 12px; margin: 14px 0; }
[data-room-cad-controls][data-workbench-reorder="room-3d"] {
  align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
[data-room-cad-controls][data-workbench-reorder="room-3d"] > [data-workbench-module] { box-sizing: border-box; min-width: 0; }
[data-room-cad-controls][data-workbench-reorder="room-3d"] > [data-workbench-module].is-workbench-module-open { grid-column: 1 / -1; }
[data-room-cad-controls][data-workbench-reorder="room-3d"] > [data-workbench-module]:not(.is-workbench-module-open) {
  background: transparent;
  border: 0;
  height: 54px;
  min-height: 54px;
  padding: 0;
}
.room-cad-module-body > .room-cad-panel { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.room-cad-module-body > .room-cad-panel > :is(.room-cad-hint, .room-cad-buttons, .room-cad-nudge, .room-cad-wall-buttons, .room-cad-inline) { grid-column: 1 / -1; }
.room-cad-module-body > .room-cad-panel > button { justify-self: start; }
.room-cad-inventory-module { border: 1px solid #d6dccf; border-radius: 10px; padding: 12px; }
.room-cad-inventory-module h5 { margin: 0 0 8px; }
/* the 3D view's measurement bar sits inside the viewport container, one level below the module, so the kitchen's
   `[data-workbench-module="viewport"] > .cad3d-measurement-hud` offset does not reach it; the same offset here keeps the
   viewport's grab handle clear of the bar */
.room-cad-view-module .cad3d-measurement-hud { box-sizing: border-box; flex-wrap: wrap; left: 54px; max-width: calc(100% - 64px); }
@media (max-width: 700px) { .room-cad-view-module .cad3d-measurement-hud { left: 60px; max-width: calc(100% - 68px); } }
.room-cad-panel { border: 1px solid #d6dccf; border-radius: 10px; display: grid; gap: 8px; margin: 0; padding: 12px; }
.room-cad-panel legend { font-weight: 700; padding: 0 4px; }
.room-cad-panel label { display: grid; font-size: .9rem; gap: 4px; }
.room-cad-panel input, .room-cad-panel select, .room-cad-panel textarea { min-height: 40px; }
.room-cad-views { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.room-cad-list { display: grid; gap: 6px; list-style: none; margin: 0 0 12px; padding: 0; }
.room-cad-list li { align-items: center; border: 1px solid #e1e5dc; border-radius: 8px; display: flex; gap: 10px; justify-content: space-between; padding: 8px 10px; }
.room-cad-list li[aria-current="true"] { border-color: #1f6b45; box-shadow: 0 0 0 2px rgba(31, 107, 69, .18); }
.room-cad-list button { min-height: 36px; }
[data-room-cad-status][data-tone="error"] { color: #9b1c1c; }

/* ROOM 3D PARITY (ROOM_3D_CAPABILITY_LATTICE.md, 2026-09-30): the kitchen-capability controls */
.room-cad-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.room-cad-toolbar-gap { flex: 1 1 12px; }
/* v12 UPSTAIRS: the floor switch - the lit button is the floor every tool works on */
.room-cad-floor-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 2px solid #1d6b3c; border-radius: 8px; }
.room-cad-floor-switch[hidden] { display: none; }
.room-cad-floor-switch .button { min-height: 32px; padding: 4px 10px; }
.room-cad-wall-strip { align-items: center; background: #f8faf8; border: 1px solid #aebbb2; border-radius: 10px; box-sizing: border-box; display: grid; gap: 8px 12px; grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto; margin: 0 0 12px; padding: 9px 10px; width: 100%; }
.room-cad-wall-strip-heading { display: grid; gap: 1px; min-width: 0; }
.room-cad-wall-strip-heading span { color: #4b5a50; font-size: .76rem; line-height: 1.25; }
.room-cad-wall-chips { align-items: center; display: flex; gap: 6px; min-width: 0; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.room-cad-wall-chip { align-items: center; background: #fff; border: 1px solid #9aa79d; border-radius: 999px; color: #123d28; cursor: pointer; display: inline-flex; flex: 0 0 auto; font: 700 .78rem/1 system-ui, sans-serif; gap: 6px; min-height: 34px; padding: 6px 10px; }
.room-cad-wall-chip:hover { background: #f1f8f3; }
.room-cad-wall-chip[aria-selected="true"] { background: #fff8df; border-color: #d97706; box-shadow: inset 0 0 0 1px #d97706; color: #7c2d12; }
.room-cad-wall-chip:focus-visible { outline: 3px solid rgba(31, 107, 69, .3); outline-offset: 2px; }
.room-cad-wall-chip-icon { border: 2px solid currentColor; border-radius: 2px; box-sizing: border-box; display: inline-block; height: 15px; position: relative; width: 20px; }
.room-cad-wall-chip-icon::after { background: currentColor; content: ""; height: 2px; left: 3px; position: absolute; right: 3px; top: 5px; }
.room-cad-wall-delete { min-height: 38px; white-space: nowrap; }
.room-cad-wall-delete:not(:disabled) { border-color: #b42318; color: #8a1c13; }
.room-cad-wall-strip-empty { color: #4b5a50; font-size: .82rem; white-space: nowrap; }
.room-cad-wall-construction { background: #f8faf8; border: 1px solid #aebbb2; border-radius: 10px; box-sizing: border-box; display: grid; gap: 10px; margin: 0 0 12px; min-height: 154px; padding: 12px; width: 100%; }
.room-cad-wall-construction[data-state="preview"] { border-color: #f97316; box-shadow: inset 0 0 0 1px rgba(249, 115, 22, .25); }
.room-cad-wall-construction-heading { align-items: start; display: grid; gap: 4px; grid-template-columns: minmax(88px, auto) minmax(0, 1fr); }
.room-cad-wall-construction-heading span { color: #4b5a50; min-height: 2.7em; }
.room-cad-wall-construction-fields { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(128px, 1fr)); }
.room-cad-wall-construction-fields label { display: grid; font-size: .85rem; gap: 4px; min-width: 0; }
.room-cad-wall-construction-fields :is(input, select, output) { align-items: center; background: #fff; border: 1px solid #9aa79d; border-radius: 6px; box-sizing: border-box; display: flex; font: inherit; min-height: 44px; min-width: 0; padding: 8px 10px; width: 100%; }
.room-cad-wall-construction-actions .button { min-height: 44px; }
.room-cad-construction-costs { background: #f7faf7; border: 1px solid #b8c7bc; border-radius: 9px; grid-column: 1 / -1; min-width: 0; padding: 10px; }
.room-cad-construction-costs > summary { cursor: pointer; font-size: 1rem; padding: 4px 0 8px; }
.room-cad-construction-costs h4 { margin: 14px 0 6px; }
.room-cad-construction-cost-actions, .room-cad-construction-cost-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.room-cad-construction-cost-actions label, .room-cad-construction-cost-grid label { display: grid; gap: 4px; min-width: 0; }
.room-cad-construction-price-grid { display: grid; gap: 6px; }
.room-cad-construction-price { align-items: center; background: #fff; border: 1px solid #d4ddd6; border-radius: 7px; display: grid; gap: 8px; grid-template-columns: minmax(180px, 1fr) minmax(150px, auto); padding: 8px; }
.room-cad-construction-price small { color: #4b5a50; display: block; margin-top: 2px; }
.room-cad-construction-price-entry { align-items: center; display: grid; gap: 5px; grid-template-columns: auto minmax(88px, 120px) auto; }
.room-cad-construction-price-entry input { min-width: 0; width: 100%; }
.room-cad-construction-cost-output { display: grid; gap: 10px; margin-top: 12px; min-width: 0; }
.room-cad-construction-cost-summary { background: #eef7f0; border-left: 4px solid #1f6b45; padding: 8px 10px; }
.room-cad-construction-cost-summary[data-complete="false"] { background: #fff8e8; border-left-color: #b26b00; }
.room-cad-construction-cost-summary p { margin: 3px 0; }
.room-cad-table-scroll { max-width: 100%; overflow-x: auto; }
.room-cad-inline { align-items: center; display: inline-flex; gap: 6px; }
.room-cad-inline select { min-height: 40px; }
.room-cad-wall-buttons, .room-cad-buttons, .room-cad-nudge { display: flex; flex-wrap: wrap; gap: 6px; }
.room-cad-wall-buttons [aria-pressed="true"], .room-cad-toolbar [aria-pressed="true"], .room-cad-buttons [aria-pressed="true"] { border-color: #1f6b45; box-shadow: inset 0 0 0 2px #1f6b45; }
.room-cad-hint { color: #4b5a50; font-size: .85rem; margin: 0; }
.room-cad-triple { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.room-cad-panel input:disabled, .room-cad-panel select:disabled { opacity: .55; }
.room-cad-asset-grid { display: grid; gap: 10px; grid-column: 1 / -1; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); max-height: 620px; overflow: auto; padding: 2px; }
.room-cad-asset-pager { align-items: center; display: flex; gap: 10px; grid-column: 1 / -1; justify-content: center; }
.room-cad-asset-pager[hidden] { display: none; }
.room-cad-asset-pager .room-cad-hint { margin: 0; min-width: 7rem; text-align: center; }
.room-cad-asset-card { background: #fff; border: 1px solid #c7d2ca; border-radius: 9px; display: grid; gap: 7px; min-width: 0; padding: 9px; }
.room-cad-asset-card[data-selected="true"] { background: #f1f8f3; border-color: #1f6b45; box-shadow: inset 0 0 0 1px #1f6b45; }
.room-cad-asset-card > img, .room-cad-asset-placeholder { align-items: center; aspect-ratio: 4 / 3; background: #f4f6f2; border-radius: 6px; display: flex; justify-content: center; object-fit: contain; overflow: hidden; width: 100%; }
.room-cad-asset-card > img[data-thumbnail-state="loading"], .room-cad-asset-card > img[data-thumbnail-state="queued"] { filter: saturate(.7); opacity: .72; }
.room-cad-asset-card > img[data-thumbnail-state="ready"] { opacity: 1; transition: opacity .15s ease; }
.room-cad-asset-card > img[data-thumbnail-state="error"] { border: 2px solid #b42318; }
.room-cad-asset-placeholder { color: #5c6c61; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-align: center; }
.room-cad-asset-card > strong { color: #123d28; line-height: 1.2; }
.room-cad-asset-card > small, .room-cad-asset-card > span { color: #4b5a50; font-size: .78rem; }
.room-cad-panel .room-cad-asset-pick { align-items: center; display: flex; font-weight: 800; gap: 8px; }
.room-cad-panel .room-cad-asset-pick input { flex: 0 0 auto; height: 22px; min-height: 22px; width: 22px; }
.room-cad-panel .room-cad-asset-quantity { align-items: center; display: grid; grid-template-columns: 1fr 70px; margin-top: auto; }
.room-cad-panel .room-cad-asset-quantity input { min-width: 0; width: 100%; }
.room-cad-asset-batch { align-items: center; background: #f1f8f3; border: 1px solid #9ab9a4; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 10px; grid-column: 1 / -1; justify-content: space-between; padding: 10px 12px; }
.room-cad-asset-batch[hidden] { display: none; }
.room-cad-inventory { display: grid; gap: 6px; margin: 0 0 10px; }
.room-cad-inventory .cad-shape-inventory-row { align-items: center; border: 1px solid #e1e5dc; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 8px; }
.room-cad-inventory .cad-shape-inventory-row[data-selected="true"] { border-color: #1f6b45; }
.room-cad-inventory .cad-shape-inventory-row[data-item-kind] { align-items: stretch; background: #fff; padding: 10px; }
.room-cad-inventory .cad-shape-inventory-row[data-item-kind]::before { color: #4b5a50; content: attr(data-item-kind); flex: 0 0 100%; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.room-cad-inventory-actions { display: flex; flex: 0 0 100%; flex-wrap: wrap; gap: 6px; }
.room-cad-inventory-actions .button { flex: 1 1 130px; min-height: 42px; }
.room-cad-tape-tray { background: #f8faf8; border: 1px solid #aebbb2; border-radius: 8px; margin-top: 10px; }
.room-cad-tape-tray > summary { align-items: center; color: #123d28; cursor: pointer; display: flex; font-weight: 800; gap: 8px; padding: 12px 14px; }
.room-cad-tape-tray > summary strong { background: #123d28; border-radius: 999px; color: #fff; margin-left: auto; min-width: 28px; padding: 2px 8px; text-align: center; }
.room-cad-tape-items { display: grid; gap: 8px; padding: 0 12px 12px; }
.room-cad-tape-item { align-items: stretch; background: #fff; border: 1px solid #c7d2ca; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; padding: 8px; }
.room-cad-tape-item[aria-current="true"] { background: #fff8df; border: 2px solid #f59e0b; }
.room-cad-tape-focus { align-items: center; background: transparent; border: 0; color: #123d28; cursor: pointer; display: flex; font: inherit; gap: 12px; justify-content: space-between; min-height: 44px; text-align: left; }
.room-cad-tape-focus strong { white-space: nowrap; }
.room-cad-tape-item [data-room-cad-tape-delete] { min-height: 44px; }
.room-cad-view-module [data-cad3d-tape-readout] { background: rgba(255, 248, 223, .98); border: 1px solid #f59e0b; border-radius: 6px; color: #7c4a03; flex: 1 0 100%; order: 20; padding: 6px 10px; text-align: center; }
.room-cad-view-module [data-cad3d-tape-readout][hidden] { display: none; }
.room-cad-view-module :is([data-cad3d-nav="focus-object"], [data-cad3d-nav="measure-tape"]) { min-height: 44px; }
/* FLOOR PLAN (FLOOR_PLAN_BUILDER_LATTICE.md F3): the floor summary - every room's inside size, how the rooms connect */
.room-cad-floor-module { border: 1px solid #d6dccf; border-radius: 10px; box-sizing: border-box; max-width: 100%; min-width: 0; padding: 12px; width: 100%; }
.room-cad-floor-module h5 { margin: 0 0 8px; }
.room-cad-floor h6 { color: #4b5a50; font-size: .8rem; letter-spacing: .04em; margin: 10px 0 4px; text-transform: uppercase; }
.room-cad-floor ul { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.room-cad-floor li { border: 1px solid #e1e5dc; border-radius: 8px; font-size: .9rem; padding: 6px 10px; }
.room-cad-floor [data-tone="error"] { color: #9b1c1c; }
.room-cad-profile-chart { background: #fbfcf8; border: 1px solid #d6dccf; border-radius: 8px; box-sizing: border-box; color: #203b2b; grid-column: 1 / -1; height: auto; max-height: 280px; min-height: 180px; width: 100%; }
.room-cad-profile-chart text { fill: currentColor; font: 600 18px system-ui, sans-serif; }
.room-cad-measurements { box-sizing: border-box; max-width: 100%; min-width: 0; overflow-x: auto; width: 100%; }
.room-cad-measurement-grid { display: grid; gap: 6px 18px; grid-template-columns: minmax(140px, 1fr) auto; margin: 10px 0; }
.room-cad-measurement-grid strong { text-align: right; }
.room-cad-measurements table { border-collapse: collapse; min-width: 520px; width: 100%; }
.room-cad-measurements :is(th, td) { border-bottom: 1px solid #d6dccf; padding: 7px 9px; text-align: right; }
.room-cad-measurements :is(th, td):first-child { text-align: left; }
@media (max-width: 700px) {
  .room-cad-module-body > .room-cad-panel { grid-template-columns: 1fr; }
  .room-cad-panel :is(button, input, select, textarea) { min-height: 44px; }
  .room-cad-measurement-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .room-cad-tape-item { grid-template-columns: 1fr; }
  .room-cad-wall-construction { min-height: 0; }
  .room-cad-wall-construction-heading, .room-cad-wall-construction-fields { grid-template-columns: 1fr; }
  .room-cad-wall-construction-heading span { min-height: 0; }
  .room-cad-wall-construction-actions .button { flex: 1 1 calc(50% - 6px); min-height: 44px; }
  .room-cad-construction-price { align-items: stretch; grid-template-columns: 1fr; }
  .room-cad-construction-price-entry { grid-template-columns: auto minmax(0, 1fr) auto; }
  .room-cad-wall-strip { grid-template-columns: minmax(0, 1fr) auto; }
  .room-cad-wall-strip-heading { grid-column: 1 / -1; }
  .room-cad-wall-chips { min-height: 42px; }
  .room-cad-wall-chip, .room-cad-wall-delete { min-height: 44px; }
  .room-cad-tape-tray > summary, .room-cad-tape-focus, .room-cad-tape-item [data-room-cad-tape-delete] { min-height: 44px; }
  .room-cad-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 520px; }
  .room-cad-asset-card { padding: 7px; }
  .room-cad-panel .room-cad-asset-quantity { grid-template-columns: 1fr 58px; }
}
/* WALL TOPS (2026-10-03; owner: interior walls that follow the ceiling, and wall-top height points): the room's switch
   beside the ceiling profile, and each interior wall's own top in its edit form. Fits a 375 px screen with no sideways
   scroll: every field shrinks (min-width 0) and the point rows stack two fields to a line. */
.room-cad-module-body > .room-cad-panel > :is(.room-cad-check, .room-cad-wall-top) { grid-column: 1 / -1; }
.room-cad-panel .room-cad-check { align-items: center; display: flex; gap: 10px; }
.room-cad-panel .room-cad-check input[type="checkbox"] { flex: 0 0 auto; height: 22px; margin: 0; min-height: 22px; width: 22px; }
.room-cad-wall-top { border: 1px solid #e1e5dc; border-radius: 8px; box-sizing: border-box; display: grid; gap: 8px; min-width: 0; padding: 10px; }
.room-cad-wall-top[hidden], .room-cad-wall-top [hidden] { display: none; }
.room-cad-wall-top :is(input, select) { box-sizing: border-box; min-width: 0; width: 100%; }
.room-cad-wall-top-ends { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.room-cad-wall-top-custom { display: grid; gap: 8px; min-width: 0; }
.room-cad-wall-top-custom > button { justify-self: start; }
.room-cad-wall-top-points { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.room-cad-wall-top-points li { align-items: end; border: 1px solid #e1e5dc; border-radius: 8px; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; padding: 8px; }
.room-cad-wall-top-points li > strong { grid-column: 1 / -1; font-size: .85rem; }
.room-cad-wall-top-points .button { min-height: 40px; min-width: 0; white-space: normal; }
.room-cad-wall-top-add { align-items: end; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
.room-cad-wall-top-card { flex: 0 0 100%; }
/* WALL SNAP (Addendum B, 2026-10-03): "Join to Wall 2 (gap ...)" in an interior wall's edit form */
.room-cad-wall-join .button { min-height: 44px; min-width: 0; white-space: normal; }
/* SPACE PREVIEW (Addendum C, 2026-10-03): "Preview on grid" in the Adjoining spaces form, and its verdict */
.room-cad-space-preview-toggle { min-height: 44px; }
.room-cad-space-preview-verdict[data-state="valid"] { color: #166534; font-weight: 600; }
.room-cad-space-preview-verdict[data-state="invalid"] { color: #9b1c1c; font-weight: 600; }
.room-cad-space-preview-verdict[data-state="moved"] { color: #92400e; font-weight: 600; }
/* VERIFIER D5 (2026-10-03): on a narrow plan the Draw wall panel docks along the bottom, leaving the drawing tappable.
   The plan sets its panel position inline, so the docked position has to win with !important. */
.room-cad-plan [data-cad-plan-panel][data-compact="true"] { bottom: 34px !important; left: 8px !important; max-height: 34% !important; padding: 6px 8px !important; right: 8px !important; top: auto !important; width: auto !important; }
.room-cad-plan [data-cad-plan-panel][data-compact="true"] .button { min-height: 40px; padding: 4px 10px; }
/* SURFACE MATERIALS (SURFACE_MATERIALS_LATTICE.md, forge 1): the Surfaces and materials panel and the crop overlay. No
   inline styles anywhere (CSP style-src 'self'): the crop rectangle is SVG attributes, its look is here. */
.room-cad-surfaces-module { box-sizing: border-box; max-width: 100%; min-width: 0; width: 100%; }
.room-cad-surfaces-module > .room-cad-module-body > .room-cad-panel { box-sizing: border-box; max-width: 100%; min-width: 0; }
/* anneal 1 (adversary BP1): a long product name in a select or a card never widens the panel past a 375 px phone */
.room-cad-surfaces-module > .room-cad-module-body > .room-cad-panel > *, .room-cad-surfaces-module [data-room-cad-surface-panel] > * { min-width: 0; }
.room-cad-surfaces-module select { box-sizing: border-box; max-width: 100%; min-width: 0; width: 100%; }
.room-cad-surfaces-module > .room-cad-module-body > .room-cad-panel > :is(.room-cad-surface-card, .room-cad-surface-sources, [data-room-cad-surface-panel], .room-cad-surface-size, .room-cad-surface-band, .room-cad-surface-list, h6) { grid-column: 1 / -1; }
.room-cad-surfaces-module h6 { color: #4b5a50; font-size: .8rem; letter-spacing: .04em; margin: 6px 0 0; text-transform: uppercase; }
.room-cad-surface-card { background: #f8faf8; border: 1px solid #d6dccf; border-radius: 8px; box-sizing: border-box; font-size: .9rem; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 8px 10px; }
.room-cad-surface-card p { margin: 0 0 6px; }
.room-cad-surface-card [data-tone="warning"] { color: #8a4b00; }
.room-cad-surface-layers { display: grid; gap: 6px; list-style: none; margin: 6px 0 0; padding: 0; }
.room-cad-surface-layers button[aria-pressed="true"] { font-weight: 800; text-decoration: underline; }
.room-cad-surface-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.room-cad-surface-sources [role="tab"] { background: #fff; border: 1px solid #aebbb2; border-radius: 999px; color: #123d28; cursor: pointer; font: inherit; min-height: 36px; padding: 6px 12px; }
.room-cad-surface-sources [role="tab"][aria-selected="true"] { border-color: #1f6b45; box-shadow: inset 0 0 0 2px #1f6b45; }
.room-cad-surface-sources [role="tab"]:disabled { cursor: not-allowed; opacity: .6; }
.room-cad-surfaces-module [data-room-cad-surface-panel] { display: grid; gap: 8px; min-width: 0; }
.room-cad-surfaces-module :is([data-room-cad-surface-panel], .room-cad-surface-band)[hidden] { display: none; }
.room-cad-surface-size, .room-cad-surface-band { border: 1px solid #e1e5dc; border-radius: 8px; box-sizing: border-box; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 0; min-width: 0; padding: 8px; }
.room-cad-surface-size legend { font-size: .85rem; font-weight: 700; }
.room-cad-surface-size label, .room-cad-surface-band label { min-width: 0; }
.room-cad-surface-size input, .room-cad-surface-band input { box-sizing: border-box; min-width: 0; width: 100%; }
.room-cad-surface-pair { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; }
.room-cad-surface-pair input { box-sizing: border-box; min-width: 0; width: 100%; }
.room-cad-surfaces-module input[type="checkbox"] { height: 24px; min-height: 24px; min-width: 24px; width: 24px; }
.room-cad-surfaces-module input[type="file"] { box-sizing: border-box; max-width: 100%; min-width: 0; }
.room-cad-surfaces-module .link-button { min-height: 24px; min-width: 24px; }
.room-cad-surface-list { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.room-cad-surface-list li { border: 1px solid #e1e5dc; border-radius: 8px; font-size: .9rem; overflow-wrap: anywhere; padding: 6px 10px; }
/* CROP 2 (2026-10-04): the crop editor fills the screen - tools, the zoomable picture, a live preview of what is kept */
.surface-crop { background: rgba(15, 23, 42, .95); box-sizing: border-box; color: #f8fafc; display: grid; gap: 8px; grid-template-rows: auto auto minmax(0, 1fr) auto auto; inset: 0; overflow: auto; padding: 12px; position: fixed; z-index: 20030; } /* above the site header (20000): an intentional full-screen editor */
.surface-crop-hint, .surface-crop-status { font-size: .9rem; margin: 0; }
.surface-crop-status[data-tone="error"] { color: #fecaca; }
.surface-crop-tools { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
.surface-crop-tools .button { min-height: 36px; min-width: 36px; padding: 4px 10px; }
.surface-crop-tools [aria-pressed="true"] { box-shadow: inset 0 0 0 2px #facc15; font-weight: 800; }
.surface-crop-zoom { font-size: .85rem; min-width: 44px; text-align: center; }
.surface-crop-tools .surface-crop-square { align-items: center; display: flex; gap: 6px; min-height: 36px; }
.surface-crop-tools .surface-crop-square input { flex: 0 0 24px; height: 24px; margin: 0; min-height: 24px; width: 24px; }
.surface-crop-main { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) 260px; min-height: 0; }
.surface-crop-stage { align-items: center; display: flex; justify-content: center; min-height: 240px; min-width: 0; overflow: hidden; }
.surface-crop-source { display: none; }
.surface-crop-svg { background: #0b1220; cursor: crosshair; display: block; max-height: 100%; max-width: 100%; touch-action: none; user-select: none; }
.surface-crop-svg.is-panning { cursor: grab; }
.surface-crop-svg [hidden] { display: none; }
.surface-crop-shade { fill: rgba(0, 0, 0, .55); pointer-events: none; }
.surface-crop-rect { cursor: move; fill: transparent; stroke: #facc15; stroke-width: 2; }
.surface-crop-rect:focus { outline: none; stroke: #38bdf8; stroke-width: 3; }
.surface-crop-handle { cursor: pointer; fill: #facc15; stroke: #0b1220; stroke-width: 1; }
.surface-crop-quad { cursor: move; fill: transparent; stroke: #facc15; stroke-width: 2; }
.surface-crop-grid { fill: none; pointer-events: none; stroke: rgba(250, 204, 21, .6); stroke-dasharray: 4 4; stroke-width: 1; }
.surface-crop-corner { cursor: pointer; fill: rgba(250, 204, 21, .35); stroke: #facc15; stroke-width: 2; }
.surface-crop-corner:focus { outline: none; stroke: #38bdf8; stroke-width: 3; }
.surface-crop-side { align-content: start; display: grid; gap: 6px; min-width: 0; }
.surface-crop-preview-title { font-size: .85rem; font-weight: 700; margin: 0; }
.surface-crop-preview { background: #0b1220; border: 1px solid #475569; height: 180px; justify-self: start; max-width: 100%; object-fit: contain; width: 240px; }
.surface-crop-size { font-size: .85rem; margin: 0; }
.surface-crop-size[data-tone="warning"] { color: #fde68a; }
.surface-crop-size[data-tone="error"] { color: #fecaca; }
.surface-crop-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.surface-crop-fields[hidden], .surface-crop-square[hidden] { display: none; }
.surface-crop-fields label { display: grid; flex: 1 1 70px; font-size: .85rem; gap: 2px; min-width: 0; }
.surface-crop-fields input { box-sizing: border-box; min-height: 32px; width: 100%; }
.surface-crop-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.surface-crop-buttons .button { flex: 1 1 120px; min-height: 40px; }
@media (max-width: 700px) {
  .room-cad-surface-sources [role="tab"] { min-height: 44px; }
  .surface-crop-fields input, .surface-crop-buttons .button, .surface-crop-tools .button { min-height: 44px; }
  .surface-crop { gap: 6px; padding: 8px; }
  .surface-crop-hint { font-size: .8rem; }
  .surface-crop-tools { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .surface-crop-tools .button { flex: 0 0 auto; }
  .surface-crop-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(180px, 1fr) auto; }
  .surface-crop-side { align-items: start; grid-template-columns: 96px minmax(0, 1fr); }
  .surface-crop-preview-title { grid-column: 1 / -1; }
  .surface-crop-preview { height: 96px; width: 96px; }
  .surface-crop-fields { grid-column: 1 / -1; }
  .surface-crop-fields label { flex: 1 1 60px; }
  /* Use this crop and Cancel stay on screen however tall the editor is */
  .surface-crop-buttons { background: rgba(15, 23, 42, .98); bottom: -8px; padding: 6px 0 8px; position: sticky; }
}
/* SURFACE MATERIALS forge 2: the Home Depot list, the price entry and summary, the ChatGPT confirm, the Square crop box */
.surface-catalog { box-sizing: border-box; display: grid; gap: 8px; max-width: 100%; min-width: 0; }
.surface-catalog-controls { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); min-width: 0; }
.surface-catalog-controls label { display: grid; gap: 2px; min-width: 0; }
.surface-catalog-controls :is(select, input, .button) { box-sizing: border-box; max-width: 100%; min-height: 24px; min-width: 0; width: 100%; }
.surface-catalog-results { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); list-style: none; margin: 0; min-width: 0; padding: 0; }
.surface-catalog-item { background: #fff; border: 1px solid #d6dccf; border-radius: 8px; box-sizing: border-box; color: #12261b; cursor: pointer; display: grid; font: inherit; font-size: .85rem; gap: 4px; min-height: 44px; overflow-wrap: anywhere; padding: 6px; text-align: left; width: 100%; }
.surface-catalog-item img { aspect-ratio: 1; height: auto; object-fit: cover; width: 100%; }
.surface-catalog-item [data-tone="warning"] { color: #8a4b00; }
.surface-catalog-name { font-weight: 700; }
.surface-catalog [data-surface-catalog-more] { min-height: 24px; }
.surface-catalog [data-surface-catalog-note][data-tone="error"] { color: #8a1c1c; }
.room-cad-surfaces-module > .room-cad-module-body > .room-cad-panel > :is(.room-cad-surface-price, .room-cad-surface-price-summary) { grid-column: 1 / -1; }
.room-cad-surface-price { border: 1px solid #e1e5dc; border-radius: 8px; box-sizing: border-box; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 0; max-width: 100%; min-width: 0; padding: 8px; }
.room-cad-surface-price[hidden], .room-cad-surface-price [hidden] { display: none; }
.room-cad-surface-price legend { font-size: .85rem; font-weight: 700; }
.room-cad-surface-price label { display: grid; gap: 2px; min-width: 0; }
.room-cad-surface-price :is(input, select, .button) { box-sizing: border-box; max-width: 100%; min-height: 24px; min-width: 0; width: 100%; }
.room-cad-surface-price :is(.room-cad-buttons, .room-cad-hint) { grid-column: 1 / -1; }
.room-cad-surface-price .room-cad-buttons:empty { display: none; }
.room-cad-surface-price [aria-pressed="true"] { box-shadow: inset 0 0 0 2px #1f6b45; font-weight: 700; }
.room-cad-surface-price-needed { border-left: 4px solid #8a4b00; color: #8a4b00; margin: 4px 0 0; padding-left: 8px; }
.room-cad-surface-price-line { margin: 4px 0 0; }
.room-cad-surface-price-summary { margin: 0; overflow-wrap: anywhere; }
.room-cad-surface-price-summary .link-button { min-height: 24px; min-width: 24px; }
/* TEAR-OUT and PAINT (2026-10-03): the surface's Tear out and Paint forms and the room's Tear-out summary; a 375 px phone
   never scrolls sideways (every field shrinks) */
.room-cad-surfaces-module > .room-cad-module-body > .room-cad-panel > :is(.room-cad-surface-tearout, .room-cad-surface-paint, .room-cad-surface-tearout-summary, [data-room-cad-surface-tearout-remove-orphans]) { grid-column: 1 / -1; }
:is(.room-cad-surface-tearout, .room-cad-surface-paint) { border: 1px solid #e1e5dc; border-radius: 8px; box-sizing: border-box; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 0; max-width: 100%; min-width: 0; padding: 8px; }
:is(.room-cad-surface-tearout, .room-cad-surface-paint)[hidden], :is(.room-cad-surface-tearout, .room-cad-surface-paint) [hidden] { display: none; }
:is(.room-cad-surface-tearout, .room-cad-surface-paint) legend { font-size: .85rem; font-weight: 700; }
:is(.room-cad-surface-tearout, .room-cad-surface-paint) label { display: grid; gap: 2px; min-width: 0; }
:is(.room-cad-surface-tearout, .room-cad-surface-paint) :is(input, select, .button) { box-sizing: border-box; max-width: 100%; min-height: 24px; min-width: 0; width: 100%; }
:is(.room-cad-surface-tearout, .room-cad-surface-paint) :is(.room-cad-buttons, .room-cad-hint) { grid-column: 1 / -1; }
.room-cad-surface-tearout [data-tone="warning"], .room-cad-surface-tearout-summary [data-tone="warning"] { border-left: 4px solid #8a4b00; color: #8a4b00; padding-left: 8px; }
.room-cad-surface-tearout-summary { min-width: 0; overflow-wrap: anywhere; }
.room-cad-surface-tearout-summary p { margin: 4px 0 0; }
.room-cad-surface-tearout-summary .link-button { min-height: 24px; min-width: 24px; }
.room-cad-paint-chip-picker { border: 1px solid #cbd8ce; border-radius: 8px; box-sizing: border-box; grid-column: 1 / -1; max-width: 100%; min-width: 0; padding: 8px; }
.room-cad-paint-chip-picker summary { cursor: pointer; font-weight: 800; min-height: 32px; }
.room-cad-paint-chip-picker[open] { display: grid; gap: 8px; }
.room-cad-paint-chip-picker label { display: grid; gap: 2px; min-width: 0; }
.room-cad-paint-chip-picker input { box-sizing: border-box; min-height: 40px; min-width: 0; width: 100%; }
/* The desktop 3D viewport leaves the control rail about 190px wide. A 112px minimum forced every chip into one long
   vertical strip there even though the mobile rail could show two. Keep the cards readable while allowing two across in
   the narrow desktop rail; the mobile rule below still pins the touch layout to exactly two columns. */
.room-cad-paint-chip-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); max-height: 430px; min-width: 0; overflow: auto; padding: 2px; }
.room-cad-paint-chip { align-content: start; background: #fff; border: 2px solid #d6dccf; border-radius: 8px; color: #12261b; cursor: pointer; display: grid; font: inherit; gap: 5px; min-height: 44px; min-width: 0; padding: 5px; text-align: left; }
.room-cad-paint-chip[aria-selected="true"] { border-color: #1f6b45; box-shadow: inset 0 0 0 2px #1f6b45; }
.room-cad-paint-chip img { aspect-ratio: 1; border-radius: 4px; height: auto; object-fit: cover; width: 100%; }
.room-cad-paint-chip span { display: grid; min-width: 0; overflow-wrap: anywhere; }
.room-cad-paint-chip small { color: #5f6d63; }
.room-cad-paint-current { align-items: center; display: flex; gap: 8px; }
.room-cad-paint-current img { border: 1px solid #aebbb2; border-radius: 4px; height: 56px; object-fit: cover; width: 56px; }
.room-cad-paint-current > span { display: grid; }
.room-cad-paint-methods { display: grid; gap: 8px; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.room-cad-paint-method { background: #fff; border: 2px solid #cbd8ce; border-radius: 8px; color: #12261b; cursor: pointer; display: grid; gap: 3px; min-height: 58px; min-width: 0; padding: 9px; text-align: left; }
.room-cad-paint-method[aria-pressed="true"] { background: #edf7f0; border-color: #1f6b45; box-shadow: inset 0 0 0 1px #1f6b45; }
.room-cad-paint-method span { color: #4b5a50; font-size: .82rem; }
.room-cad-paint-method-status { border-left: 3px solid #1f6b45; padding-left: 8px; }
.room-cad-paint-product { box-sizing: border-box; grid-column: 1 / -1; min-width: 0; }
.room-cad-paint-product[open] { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.room-cad-paint-product summary, .room-cad-paint-product > :is(.room-cad-buttons, .room-cad-hint) { grid-column: 1 / -1; }
.room-cad-surface-seam { display: grid; gap: 6px; }
.room-cad-surface-seam .button { min-height: 24px; }
[data-room-cad-surface-texture-check] { min-height: 24px; }
.surface-texture-confirm { background: rgba(15, 23, 42, .92); box-sizing: border-box; display: grid; inset: 0; overflow: auto; padding: 12px; place-items: center; position: fixed; z-index: 1000; }
.surface-texture-confirm-box { background: #fff; border-radius: 10px; box-sizing: border-box; color: #12261b; display: grid; gap: 10px; overflow-wrap: anywhere; padding: 16px; width: min(480px, 100%); }
.surface-texture-confirm-box :is(h4, p) { margin: 0; }
.surface-texture-consent { align-items: center; display: flex; gap: 8px; min-height: 24px; }
.surface-texture-consent input { flex: 0 0 24px; height: 24px; margin: 0; min-height: 24px; width: 24px; }
.surface-texture-confirm-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.surface-texture-confirm-buttons .button { flex: 1 1 140px; min-height: 24px; }
.surface-crop-fields .surface-crop-square { align-items: center; display: flex; flex: 1 1 100%; gap: 8px; }
.surface-crop-fields .surface-crop-square input { flex: 0 0 24px; height: 24px; margin: 0; min-height: 24px; width: 24px; }
@media (max-width: 700px) {
  .surface-catalog-controls :is(select, input, .button), .surface-catalog [data-surface-catalog-more], .room-cad-surface-price :is(input, select, .button), :is(.room-cad-surface-tearout, .room-cad-surface-paint) :is(input, select, .button), [data-room-cad-surface-tearout-remove-orphans], .room-cad-surface-seam .button, [data-room-cad-surface-texture-check], .surface-texture-confirm-buttons .button, .surface-texture-consent, .room-cad-paint-chip { min-height: 44px; }
  .room-cad-paint-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 55vh; }
  .room-cad-paint-methods { grid-template-columns: 1fr; }
}
/* CROP 2 / WHOLE SURFACE / COST (2026-10-04): the panel as five numbered steps; the progress box; the crop in use and this
   visit's crops; the three ways to put a crop on; the material cost. A 375 px phone never scrolls sideways. */
.room-cad-surfaces-module > .room-cad-module-body > .room-cad-panel > :is(.room-cad-surface-progress, .room-cad-surface-route-intro, .room-cad-steps, .room-cad-surface-list, h6, .button) { grid-column: 1 / -1; }
.room-cad-surface-progress { background: #eef6f0; border: 1px solid #b9d3c1; border-radius: 8px; box-sizing: border-box; font-size: .9rem; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 8px 10px; position: sticky; top: 0; z-index: 2; }
.room-cad-surface-progress p { margin: 0 0 4px; }
.room-cad-surface-progress[data-tone="busy"] { background: #fff8e6; border-color: #e5c06a; }
.room-cad-surface-progress[data-tone="done"] { background: #e9f7ee; border-color: #1f6b45; }
.room-cad-surface-progress[data-tone="error"] { background: #fdecec; border-color: #b42318; color: #7a1a12; }
.room-cad-surface-progress[data-tone="warning"] { background: #fff4e5; border-color: #8a4b00; color: #6b3a00; }
.room-cad-surface-progress-row { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 8px; }
.room-cad-surface-progress-row > div { flex: 1 1 180px; min-width: 0; }
.room-cad-surface-progress-row img { border: 1px solid #aebbb2; border-radius: 4px; height: 64px; object-fit: cover; width: 64px; }
.room-cad-surface-progress-row img[data-room-cad-surface-progress-result] { height: 64px; object-fit: contain; width: 112px; }
.room-cad-surface-progress progress { width: 100%; }
.room-cad-steps { counter-reset: none; display: grid; gap: 10px; list-style: none; margin: 0; min-width: 0; padding: 0; }
.room-cad-step { border: 1px solid #d6dccf; border-radius: 8px; box-sizing: border-box; display: grid; gap: 8px; max-width: 100%; min-width: 0; padding: 8px 10px; }
.room-cad-step[data-done] { border-color: #1f6b45; }
.room-cad-step > * { min-width: 0; }
.room-cad-step-title { align-items: center; display: flex; flex-wrap: wrap; font-weight: 800; gap: 6px; margin: 0; }
.room-cad-step-number { align-items: center; background: #123d28; border-radius: 999px; color: #fff; display: inline-flex; font-size: .8rem; height: 22px; justify-content: center; width: 22px; }
.room-cad-step[data-done] .room-cad-step-number { background: #1f6b45; }
.room-cad-step-route { border-top-width: 4px; }
.room-cad-step-route-paint { border-top-color: #1f6b45; }
.room-cad-step-route-material { border-top-color: #c78000; }
.room-cad-step-done { color: #1f6b45; font-size: .85rem; font-weight: 600; }
.room-cad-step-subtitle { font-size: .85rem; font-weight: 700; margin: 0; }
.room-cad-surface-crop-figure { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.room-cad-surface-crop-figure img { background: #f1f3ef; border: 1px solid #aebbb2; border-radius: 6px; max-height: 180px; max-width: min(100%, 220px); object-fit: contain; }
.room-cad-surface-crop-figure figcaption { flex: 1 1 160px; font-size: .9rem; min-width: 0; overflow-wrap: anywhere; }
.room-cad-surface-crops { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.room-cad-surface-crops li { align-items: center; display: grid; gap: 2px; justify-items: center; }
.room-cad-surface-crop-thumb { background: #fff; border: 2px solid #d6dccf; border-radius: 6px; cursor: pointer; height: 64px; padding: 2px; width: 64px; }
.room-cad-surface-crop-thumb[aria-pressed="true"] { border-color: #1f6b45; box-shadow: 0 0 0 2px #1f6b45; }
.room-cad-surface-crop-thumb img { height: 100%; object-fit: cover; width: 100%; }
.room-cad-surface-methods { display: grid; gap: 8px; }
.room-cad-surface-method { border: 1px solid #e1e5dc; border-radius: 8px; display: grid; gap: 4px; padding: 8px; }
.room-cad-surface-method .button { min-height: 40px; width: 100%; }
.room-cad-surface-method .room-cad-hint { margin: 0; }
.room-cad-surface-adjust { border: 1px solid #e1e5dc; border-radius: 8px; padding: 6px 8px; }
.room-cad-surface-adjust summary { cursor: pointer; font-size: .9rem; font-weight: 700; min-height: 24px; }
.room-cad-surface-adjust[open] { display: grid; gap: 8px; }
.room-cad-surface-kind { color: #4b5a50; font-size: .85rem; }
.room-cad-surface-layer-total { font-size: 1rem; margin: 4px 0; }
.room-cad-surface-layer-total strong { font-size: 1.1rem; }
.room-cad-surface-layer-total span { color: #4b5a50; font-size: .85rem; }
.room-cad-surface-layer-total[data-tone="warning"] { color: #8a4b00; }
.room-cad-surface-cost { background: #f8faf8; border: 1px solid #d6dccf; border-radius: 8px; box-sizing: border-box; display: grid; gap: 4px; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 8px 10px; }
.room-cad-surface-cost p { margin: 0; }
.room-cad-surface-cost-total { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.room-cad-surface-cost-total strong { color: #123d28; font-size: 1.4rem; }
.room-cad-surface-cost-formula { font-weight: 600; }
.room-cad-surface-cost-formula[data-tone="warning"] { color: #8a4b00; }
@media (min-width: 901px) {
  .room-cad-surfaces-module .room-cad-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .room-cad-surfaces-module .room-cad-step[data-room-cad-step="surface"], .room-cad-surfaces-module .room-cad-step[data-room-cad-step="cost"] { grid-column: 1 / -1; }
  .room-cad-surfaces-module .room-cad-step[data-room-cad-step="paint"] { grid-column: 1; grid-row: 2 / span 3; }
  .room-cad-surfaces-module .room-cad-step[data-room-cad-step="material"], .room-cad-surfaces-module .room-cad-step[data-room-cad-step="crop"], .room-cad-surfaces-module .room-cad-step[data-room-cad-step="cover"] { grid-column: 2; }
}
@media (max-width: 700px) {
  .room-cad-surface-method .button, .room-cad-surface-crop-figure + .room-cad-buttons .button, .room-cad-surface-adjust summary { min-height: 44px; }
  .room-cad-surface-crops .link-button { min-height: 44px; }
}
/* SAVED ROOMS (2026-10-04): a 3D room in the "Pick up where you left off" strip at the top - a 3D badge (it has no photo),
   and the room open now marked */
.remodel-account-bank-3d { align-items: center; background: #123d28; border: 1px solid #0b7044; color: #fff; display: flex; font-weight: 800; height: 108px; justify-content: center; letter-spacing: .04em; }
.remodel-account-bank-card[aria-current="true"] { border-color: #0b7044; box-shadow: inset 0 0 0 2px #0b7044; }
/* ROOM NAMES (2026-10-09): a saved 3D room can be named where the owner sees it in the top account bank. The open target
   stays a button of its own, so the rename form never nests interactive controls inside the open-room button. */
.room-account-bank-item { box-sizing: border-box; display: grid; flex: 0 0 176px; gap: 6px; min-width: 0; }
.room-account-bank-item .remodel-account-bank-card { box-sizing: border-box; flex: none; min-width: 0; width: 100%; }
.room-account-bank-rename { min-height: 36px; padding: 7px 9px; width: 100%; }
.room-account-bank-rename-form { background: #fff; border: 1px solid #b9c9bf; display: grid; gap: 7px; padding: 8px; }
.room-account-bank-rename-form[hidden] { display: none; }
.room-account-bank-rename-form label { display: grid; font-size: .75rem; font-weight: 800; gap: 4px; }
.room-account-bank-rename-form input { box-sizing: border-box; font: inherit; min-height: 40px; min-width: 0; padding: 7px; width: 100%; }
.room-account-bank-rename-actions { display: grid; gap: 5px; grid-template-columns: 1fr 1fr; }
.room-account-bank-rename-actions .button { min-height: 38px; padding: 6px; }
/* ROOM BID (2026-10-04): the Contractor bid panel - the lines the contractor prices, each link with Copy and Stop, and the
   contractor's answer as the completed estimate; a 375 px phone scrolls a wide table inside its card, never the page */
.room-cad-bid-module { box-sizing: border-box; max-width: 100%; min-width: 0; width: 100%; }
.room-cad-bid-module > .room-cad-panel > * { grid-column: 1 / -1; min-width: 0; }
.room-cad-bid-preview, .room-cad-bid-card { background: #f8faf8; border: 1px solid #d6dccf; border-radius: 8px; box-sizing: border-box; font-size: .9rem; max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; padding: 8px 10px; }
.room-cad-bid-preview p, .room-cad-bid-card p { margin: 4px 0; }
.room-cad-bid-list { display: grid; gap: 10px; }
.room-cad-bid-table { border-collapse: collapse; font-size: .85rem; margin: 6px 0; min-width: 100%; }
.room-cad-bid-table :is(th, td) { border-bottom: 1px solid #e1e5dc; padding: 4px 6px; text-align: left; vertical-align: top; }
.room-cad-bid-table td { white-space: nowrap; }
.room-cad-bid-table thead th { color: #4b5a50; font-size: .78rem; text-transform: uppercase; }
.room-cad-bid-table tfoot :is(th, td) { border-top: 2px solid #123d28; font-weight: 800; }
.room-cad-bid-table tr[data-tone="warning"] :is(th, td), .room-cad-bid-module [data-tone="warning"] { color: #8a4b00; }
.room-cad-bid-state { background: #e7ece8; border-radius: 999px; font-size: .78rem; font-weight: 700; padding: 2px 8px; }
.room-cad-bid-state[data-state="ANSWERED"] { background: #1f6b45; color: #fff; }
.room-cad-bid-state[data-state="REVOKED"], .room-cad-bid-state[data-state="EXPIRED"] { background: #f1e3d3; color: #6b3a00; }
.room-cad-bid-link { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.room-cad-bid-link input { box-sizing: border-box; flex: 1 1 220px; min-height: 40px; min-width: 0; }
.room-cad-bid-link .button, .room-cad-bid-module .room-cad-buttons .button { min-height: 40px; }

/* INSTALLED COST (2026-10-06): the owner's own labour rates, and the three money lines (material, labour, installed).
   Every grid below names its own columns and every child carries min-width: 0 - a grid with only implicit tracks is
   what let a wide nowrap child widen a whole panel once before (the kitchen crop blow-up), so none is used here. */
.room-cad-surface-labor { border: 1px solid #e1e5dc; border-radius: 8px; box-sizing: border-box; display: grid; gap: 6px; margin: 0; max-width: 100%; min-width: 0; padding: 8px; }
.room-cad-surface-labor legend { font-size: .85rem; font-weight: 700; }
.room-cad-surface-labor-rows { display: grid; gap: 4px; min-width: 0; }
.room-cad-surface-labor-row { align-items: center; display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 7rem); min-width: 0; }
.room-cad-surface-labor-row > span { font-size: .85rem; min-width: 0; overflow-wrap: anywhere; }
.room-cad-surface-labor-row small { color: #64705f; font-size: .75rem; }
.room-cad-surface-labor-row input { box-sizing: border-box; font-variant-numeric: tabular-nums; max-width: 100%; min-height: 32px; min-width: 0; text-align: right; }
.room-cad-surface-labor-status, .room-cad-surface-labor .room-cad-hint { grid-column: 1 / -1; min-width: 0; }
.room-cad-surface-installed { border-top: 1px solid #e1e5dc; display: grid; gap: 2px; margin-top: 6px; min-width: 0; padding-top: 6px; }
.room-cad-surface-installed-line { align-items: baseline; display: grid; gap: 8px; grid-template-columns: minmax(4rem, max-content) minmax(0, max-content) minmax(0, 1fr); min-width: 0; }
.room-cad-surface-installed-line > span:first-child { color: #4b5a50; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.room-cad-surface-installed-line strong { font-variant-numeric: tabular-nums; text-align: right; }
.room-cad-surface-per-sqft { color: #64705f; font-size: .8rem; min-width: 0; overflow-wrap: anywhere; }
.room-cad-surface-installed-line[data-room-cad-surface-installed-total] strong { font-size: 1.05rem; }
.room-cad-surface-installed .room-cad-hint { grid-column: 1 / -1; }
.room-cad-surface-installed-summary { font-size: .9rem; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .room-cad-surface-labor-row { grid-template-columns: minmax(0, 1fr) minmax(0, 5.5rem); } .room-cad-surface-installed-line { grid-template-columns: minmax(3.5rem, max-content) minmax(0, max-content); } .room-cad-surface-installed-line .room-cad-surface-per-sqft { grid-column: 1 / -1; } }

@media (max-width: 700px) { .room-cad-bid-link .button, .room-cad-bid-module .room-cad-buttons .button, .room-cad-bid-link input { min-height: 44px; } }

/* WINDOW AND DOOR (2026-10-06): its own material and its own price, per each, never in a square-foot denominator */
.room-cad-surface-opening { border: 1px solid #d6dccf; border-radius: 8px; box-sizing: border-box; display: grid; gap: 6px; margin: 0; max-width: 100%; min-width: 0; padding: 8px; }
.room-cad-surface-opening legend { font-size: .85rem; font-weight: 700; }
.room-cad-surface-opening-facts { font-size: .85rem; min-width: 0; overflow-wrap: anywhere; }
.room-cad-surface-opening label { display: grid; gap: 2px; min-width: 0; }
.room-cad-surface-opening input { box-sizing: border-box; max-width: 100%; min-height: 32px; min-width: 0; }
.room-cad-surface-opening :is(.room-cad-buttons, .room-cad-hint) { grid-column: 1 / -1; }
.room-cad-surface-opening .room-cad-buttons .button { min-height: 40px; }

/* FEEDBACK WHERE THE OWNER IS LOOKING (2026-10-06). Every surface action used to report to one status line BELOW all
   thirteen modules, so a button in module 12 looked dead. The note below sits inside the module; a pressed button shows a
   visible busy state until the work is done. */
.room-cad-surface-note { background: #eef4ee; border: 1px solid #cfe0d2; border-radius: 8px; box-sizing: border-box; font-size: .9rem; margin: 0 0 8px; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 8px 10px; }
.room-cad-surface-note[data-tone="error"] { background: #fdf1ef; border-color: #e8c3bd; color: #8a3226; }
.room-cad-surface-note[hidden] { display: none; }
.room-cad-panel [data-busy="true"] { background: #1f6b45 !important; border-color: #1f6b45 !important; color: #ffffff !important; cursor: progress; opacity: .85; }
.room-cad-panel [data-busy="true"]::after { content: " ..."; }
.room-cad-panel [data-busy="true"]:disabled { cursor: progress; }


/* THE WORDS A BUTTON SAYS, MADE VISIBLE (owner, 2026-10-06: "nothing ever tells me... no 'Working on it' indication").
   .room-cad-surface-note was referenced by the panel and styled nowhere in the release, so a working button said nothing
   anyone could see. .room-cad-working is the same sentence placed beside the button itself. */
.room-cad-surface-note { margin: 6px 0 0; padding: 6px 8px; border-left: 3px solid #2d6cdf; background: rgba(45,108,223,.08); font-size: .92em; }
.room-cad-surface-note[data-tone="error"] { border-left-color: #c0392b; background: rgba(192,57,43,.08); }
.room-cad-surface-note[data-tone="done"] { border-left-color: #1e8e3e; background: rgba(30,142,62,.08); }
.room-cad-working { margin: 8px 0 0; padding: 8px 10px; border-radius: 4px; background: rgba(45,108,223,.12); font-weight: 600; }
.room-cad-working[data-tone="error"] { background: rgba(192,57,43,.12); }
.room-cad-working[data-tone="done"] { background: rgba(30,142,62,.12); }
.room-cad-lead { font-weight: 600; }

/* TRIM (Release E, 2026-10-06): the room's floor line, one card per baseboard run and one line per casing, the whole
   sticks each run buys and the money - measurement and arithmetic only. The [hidden] rules are here ON PURPOSE: this
   sheet sets display:grid on these elements, and an author display rule overrides the browser's own [hidden] rule, so
   without them a hidden profile form or a hidden casing line would stay on screen (witnessed on this page's step list,
   where a step marked hidden is still visible). */
.room-cad-trim { display: grid; gap: 8px; grid-column: 1 / -1; min-width: 0; }
.room-cad-trim [hidden] { display: none; }
.room-cad-trim-measure { display: grid; gap: 4px; margin: 0; }
.room-cad-trim-measure p { margin: 0; }
.room-cad-trim-runs { display: grid; gap: 8px; }
.room-cad-trim-run { border: 1px solid #d6dccf; border-left: 4px solid #123d28; border-radius: 6px; box-sizing: border-box; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 6px 8px; }
.room-cad-trim-run p { margin: 0 0 4px; }
.room-cad-trim-run p:last-child { margin-bottom: 0; }
.room-cad-trim-total { font-weight: 700; margin: 0; }
.room-cad-trim-profile { border: 1px solid #d6dccf; border-radius: 8px; box-sizing: border-box; display: grid; gap: 6px; margin: 0; max-width: 100%; min-width: 0; padding: 8px; }
.room-cad-trim-profile legend { font-size: .85rem; font-weight: 700; }
.room-cad-trim-profile label { display: grid; gap: 2px; min-width: 0; }
.room-cad-trim-profile input, .room-cad-trim-profile select { box-sizing: border-box; max-width: 100%; min-height: 32px; min-width: 0; }
.room-cad-trim-profile :is(.room-cad-buttons, .room-cad-hint) { grid-column: 1 / -1; }
.room-cad-surface-casing { display: grid; gap: 4px; font-size: .85rem; margin: 0; overflow-wrap: anywhere; }
.room-cad-surface-casing[hidden] { display: none; }
.room-cad-surface-casing p { margin: 0; }
.room-cad-surface-opening [hidden] { display: none; }

/* RELEASE I (2026-10-06) - EVERY MODULE COLLAPSIBLE, AND EVERY ONE OF THEM STARTS COLLAPSED.
   The owner: "make every module collapsible and make it so that every module begins collapsed ... the collapsed version
   and the name of what it is, and also the arrows that allow you to move them up and down ... one at a time so it
   doesn't take up all the space on the page."

   WHAT THE HEADER IS MADE OF. The module's own children are, after room-module-collapse.mjs has run:
     [grab handle]  [this header button]  [the module's content, wrapped]  [the reorder arrows]
   Every selector below is scoped to the ROOM's column ([data-room-cad-controls][data-workbench-reorder]) so the kitchen's
   and the bathroom's own columns - which load this same stylesheet on the same page - keep their layout untouched.

   TWO RULES FROM roof-visualizer.css ARE DELIBERATELY OVERRIDDEN HERE, and both are about the collapsed header:
     1. "[data-workbench-module] > .workbench-module-grab + * { margin-top: 42px !important }" pushed a panel's first
        child below the absolutely-positioned grab handle. The header IS that first child now and a 42px gap above every
        collapsed module would defeat the whole point, so the header pins its own margin with a more specific selector.
     2. The up/down arrows sat at left: 54px, on top of where the module's name now is. They move to the right end of the
        header, and the name gives up exactly the room they need while they are shown. */
[data-room-cad-controls][data-workbench-reorder] > [data-workbench-module] > .room-cad-module-toggle[data-room-module-toggle] {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  margin: 0 !important;
  min-height: 54px;
  /* the reorder handle is absolutely positioned at left: 8px and is 38px wide (44px under 700px) */
  padding: 8px 12px 8px 58px;
  border: 1px solid #d6dccf;
  border-radius: 8px;
  background: #f6f8f4;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
[data-room-cad-controls][data-workbench-reorder="room-3d"] > [data-workbench-module]:not(.is-workbench-module-open) > .room-cad-module-toggle[data-room-module-toggle] {
  height: 54px;
  max-height: 54px;
}
[data-room-cad-controls][data-workbench-reorder] > [data-workbench-module] > .room-cad-module-toggle[data-room-module-toggle]:hover,
[data-room-cad-controls][data-workbench-reorder] > [data-workbench-module] > .room-cad-module-toggle[data-room-module-toggle]:focus-visible {
  border-color: #147a42;
  background: #eef3ef;
  outline: 2px solid #f2c84b;
  outline-offset: 2px;
}
.room-cad-module-chevron {
  border-bottom: 6px solid transparent;
  border-left: 7px solid currentColor;
  border-top: 6px solid transparent;
  flex: 0 0 auto;
  height: 0;
  transition: transform .12s ease;
  width: 0;
}
.room-cad-module-toggle[aria-expanded="true"] .room-cad-module-chevron { transform: rotate(90deg); }
.room-cad-module-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the collapsed content is HIDDEN FROM ASSISTIVE TECHNOLOGY, not merely clipped: no display rule of ours may beat this */
.room-cad-module-body[hidden] { display: none; }
[data-room-cad-controls][data-workbench-reorder] > [data-workbench-module] > .room-cad-module-body { margin-top: 8px; }
/* the up/down arrows keep every handler, id and keyboard contract workbench-module-reorder.mjs gave them; only where they
   SIT changes, so the order can still be changed without opening anything */
[data-room-cad-controls][data-workbench-reorder] > [data-workbench-module] > .workbench-module-arrows {
  left: auto;
  right: 8px;
}
/* while the arrows are shown, the name stops short of them (the arrows are 2 x 38px + gap + padding = 86px wide, 98px
   under 700px). :has() is unsupported on older browsers, where the name simply keeps its full width. */
[data-room-cad-controls][data-workbench-module]:has(> .workbench-module-arrows:not([hidden])) > .room-cad-module-toggle[data-room-module-toggle] {
  padding-right: 104px;
}
@media (max-width: 700px) {
  [data-room-cad-controls][data-workbench-reorder="room-3d"] > [data-workbench-module]:not(.is-workbench-module-open) {
    height: 62px;
    min-height: 62px;
  }
  [data-room-cad-controls][data-workbench-reorder] > [data-workbench-module] > .room-cad-module-toggle[data-room-module-toggle] {
    min-height: 62px;
    padding-left: 64px;
  }
  [data-room-cad-controls][data-workbench-reorder="room-3d"] > [data-workbench-module]:not(.is-workbench-module-open) > .room-cad-module-toggle[data-room-module-toggle] {
    height: 62px;
    max-height: 62px;
  }
  [data-room-cad-controls][data-workbench-module]:has(> .workbench-module-arrows:not([hidden])) > .room-cad-module-toggle[data-room-module-toggle] {
    padding-right: 116px;
  }
}

/* GROUPED ROOM TOOLS (2026-10-13). The viewport and five coherent tool groups are the only top-level modules. Each open
   group owns a responsive tile grid. Tools reorder only inside their group; groups reorder around the viewport. An open
   tool spans its group so its original full control surface is preserved. */
.room-cad-tool-group {
  background: #f9fbf8;
  border: 1px solid #cbd8ce;
  border-radius: 12px;
  box-sizing: border-box;
  min-width: 0;
  position: relative;
}
.room-cad-tool-group.is-workbench-module-open { padding: 8px; }
.room-cad-tool-group-description {
  color: #4d6154;
  font-size: .82rem;
  line-height: 1.35;
  margin: 0 0 8px;
}
.room-cad-tool-group-grid[data-workbench-reorder] {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));
  margin: 0;
  min-width: 0;
}
.room-cad-tool-group-grid[data-workbench-reorder] > [data-workbench-module] {
  box-sizing: border-box;
  min-width: 0;
  position: relative;
}
.room-cad-tool-group-grid[data-workbench-reorder] > [data-workbench-module].is-workbench-module-open { grid-column: 1 / -1; }
.room-cad-tool-group-grid[data-workbench-reorder] > [data-workbench-module]:not(.is-workbench-module-open) {
  background: transparent;
  border: 0;
  height: 92px;
  min-height: 92px;
  padding: 0;
}

/* Every collapsed header now carries a real SVG image. Long labels shrink inside the same tile rather than making one
   tile wider or taller than its neighbors. */
.room-cad-controls .room-cad-module-toggle[data-room-module-toggle] .room-cad-module-visual {
  background: #edf4ef;
  border: 1px solid #c9d9ce;
  border-radius: 7px;
  box-sizing: border-box;
  flex: 0 0 34px;
  height: 34px;
  object-fit: contain;
  padding: 4px;
  width: 34px;
}
.room-cad-controls .room-cad-module-toggle[data-label-density="compact"] .room-cad-module-label { font-size: .78rem; line-height: 1.12; }
.room-cad-controls .room-cad-module-toggle[data-label-density="tight"] .room-cad-module-label { font-size: .7rem; line-height: 1.08; }

/* Inner tools use the same proven collapse/reorder DOM contract as the former flat list. */
.room-cad-tool-group-grid[data-workbench-reorder] > [data-workbench-module] > .room-cad-module-toggle[data-room-module-toggle] {
  align-items: center;
  background: #fff;
  border: 1px solid #d6dccf;
  border-radius: 8px;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  font-weight: 700;
  gap: 4px 7px;
  grid-template-columns: auto 34px minmax(0, 1fr);
  height: 100%;
  margin: 0 !important;
  min-height: 54px;
  padding: 8px 8px 8px 50px;
  text-align: left;
  width: 100%;
}
.room-cad-tool-group-grid[data-workbench-reorder] > [data-workbench-module].is-workbench-module-open > .room-cad-module-toggle[data-room-module-toggle] {
  height: auto;
  min-height: 58px;
}
.room-cad-tool-group-grid[data-workbench-reorder] > [data-workbench-module] > .room-cad-module-toggle[data-room-module-toggle]:is(:hover, :focus-visible) {
  background: #eef3ef;
  border-color: #147a42;
  outline: 2px solid #f2c84b;
  outline-offset: 2px;
}
.room-cad-tool-group-grid .room-cad-module-label { overflow: hidden; text-overflow: ellipsis; white-space: normal; }
.room-cad-tool-group > .room-cad-module-toggle[data-room-module-toggle] .room-cad-module-label {
  overflow-wrap: anywhere;
  white-space: normal;
}
.room-cad-tool-group-grid[data-workbench-reorder] > [data-workbench-module] > .room-cad-module-body { margin-top: 8px; }
.room-cad-tool-group-grid[data-workbench-reorder] > [data-workbench-module] > .workbench-module-arrows { left: auto; right: 8px; }

/* The top-level group/viewport headers also show their representative image while retaining their drag target. */
[data-room-cad-controls][data-workbench-reorder="room-3d"] > [data-workbench-module]:not(.is-workbench-module-open) {
  height: 72px;
  min-height: 72px;
}
[data-room-cad-controls][data-workbench-reorder="room-3d"] > [data-workbench-module]:not(.is-workbench-module-open) > .room-cad-module-toggle[data-room-module-toggle] {
  height: 72px;
  max-height: 72px;
}

@media (max-width: 700px) {
  .room-cad-tool-group-grid[data-workbench-reorder] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-cad-tool-group-grid[data-workbench-reorder] > [data-workbench-module]:not(.is-workbench-module-open) { height: 100px; min-height: 100px; }
  .room-cad-tool-group-grid[data-workbench-reorder] > [data-workbench-module] > .room-cad-module-toggle[data-room-module-toggle] {
    grid-template-columns: auto 32px minmax(0, 1fr);
    min-height: 62px;
    padding-left: 56px;
  }
  .room-cad-controls .room-cad-module-toggle[data-room-module-toggle] .room-cad-module-visual { height: 32px; width: 32px; }
}


/* =====================================================================================================================
   TRIM'S OWN MODULE (Release J, 2026-10-06). The four questions are a plain vertical sequence: the size taps and the
   colour choices are rows that wrap, and nothing here changes a control's height or hit area from what the rest of this
   panel already uses. The chosen answer is styled from aria-pressed, which is the state the flow itself sets. */
.room-cad-trim-flow { display: grid; gap: 10px; min-width: 0; }
.room-cad-trim-module > .room-cad-module-body > .room-cad-panel > [data-room-cad-trim-flow-host] { grid-column: 1 / -1; min-width: 0; width: 100%; }
.room-cad-trim-flow-steps { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.room-cad-trim-size-row { display: grid; gap: 6px; min-width: 0; }
.room-cad-trim-size-row label { display: grid; gap: 2px; min-width: 0; }
.room-cad-trim-size-row input { box-sizing: border-box; max-width: 100%; min-height: 32px; min-width: 0; }
.room-cad-trim-sizes, .room-cad-trim-colours { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); min-width: 0; }
.room-cad-trim-sizes .button, .room-cad-trim-colours .button { min-width: 0; width: 100%; }
.room-cad-trim-sizes .button[aria-pressed="true"], .room-cad-trim-colours .button[aria-pressed="true"] { background: #123d28; border-color: #123d28; color: #fff; }
.room-cad-trim-flow .room-cad-step-subtitle { font-weight: 700; margin: 4px 0 0; }
@media (max-width: 700px) {
  .room-cad-trim-sizes, .room-cad-trim-colours { grid-template-columns: 1fr; }
}

@media (min-width: 901px) {
  .room-cad-trim-step-body[data-trim-step-body="size"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-cad-trim-step-body[data-trim-step-body="size"] > :not(.room-cad-trim-size-row) { grid-column: 1 / -1; }
}

/* =====================================================================================================================
   THE SEQUENCE (Release Q, 2026-10-07). The owner's complaint, verbatim: "I'm pushing the buttons but I'm not
   understanding that anything is happening ... now I should have a progress bar of what else I need to do to get the trim
   on the walls." Three things are styled here and nothing else changes: the progress bar, the ARMED mark every press
   leaves behind, and the three states a numbered step can be in.
   THE ARMED MARK IS STYLED FROM THE STATE THE FLOW SETS - data-armed and aria-pressed - so the styling can never drift
   from what a test reads. */
.room-cad-trim-progress { display: grid; gap: 4px; }
.room-cad-trim-progress-track { background: #e3e7dd; border-radius: 999px; display: block; height: 10px; overflow: hidden; width: 100%; }
.room-cad-trim-progress-fill { background: #123d28; display: block; height: 100%; transition: width .18s ease-out; width: 0; }
.room-cad-trim-progress-words { font-weight: 700; margin: 0; }
/* WHAT THE LAST PRESS SET, IN ONE LINE. It is always on screen: a press that leaves no line here is a press that looked
   like nothing happened, which is the defect this release exists to remove. */
.room-cad-trim-armed { background: #eef3ea; border-left: 4px solid #1f6b45; border-radius: 6px; margin: 0; padding: 6px 8px; }
.room-cad-trim-armed[data-armed="none"] { background: none; border-left-color: #d6dccf; color: #555; }
/* THE ARMED CONTROL. The same mark is on a size tap, a style tap, a yes/no button and a colour swatch. */
.room-cad-trim-flow .button[data-armed="true"], .room-cad-trim-flow .button.is-armed { background: #123d28; border-color: #123d28; color: #fff; box-shadow: inset 0 0 0 2px #ffffff40; }
.room-cad-trim-styles { display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); min-width: 0; }
.room-cad-trim-styles .button { align-items: center; display: inline-flex; gap: 6px; min-width: 0; width: 100%; }
.room-cad-trim-sketch { display: inline-block; height: 26px; width: 22px; }
.room-cad-trim-sketch path { fill: currentColor; opacity: .85; }
/* THE THREE STATES OF A STEP. "current" is the one he is on and is the only one with a marked border; "done" keeps its
   tick; "not-yet" is visibly not reached - its controls are not on screen at all (the flow sets hidden on the body), and
   the title says so rather than leaving him to guess. */
.room-cad-step[data-trim-step-state="current"] { border-color: #123d28; box-shadow: 0 0 0 1px #123d28 inset; }
.room-cad-step[data-trim-step-state="done"] { border-color: #1f6b45; }
.room-cad-step[data-trim-step-state="done"] .room-cad-step-number { background: #1f6b45; }
.room-cad-step[data-trim-step-state="not-yet"] { border-style: dashed; opacity: .55; }
.room-cad-step[data-trim-step-state="not-yet"] .room-cad-step-number { background: #8a938a; }
.room-cad-step[data-trim-step-state="not-yet"] .room-cad-step-title::after { content: " - not reached yet"; font-size: .8rem; font-weight: 600; }
.room-cad-trim-flow .room-cad-step-done { color: #1f6b45; font-size: .85rem; font-weight: 700; }
.room-cad-trim-step-body { display: grid; gap: 8px; min-width: 0; }
.room-cad-trim-step-body > * { min-width: 0; }
/* THE LATER SECTION: everything that is not part of the path, one press away and never deleted. */
.room-cad-trim-later { border-top: 1px solid #d6dccf; display: grid; gap: 8px; margin-top: 4px; padding-top: 8px; }
.room-cad-trim-later > summary { cursor: pointer; font-weight: 700; }
.room-cad-trim-later[open] > summary { margin-bottom: 8px; }
.room-cad-trim-later label { display: grid; gap: 2px; min-width: 0; }
.room-cad-trim-later input, .room-cad-trim-later select { box-sizing: border-box; max-width: 100%; min-height: 32px; min-width: 0; }
/* Wall panel visibility toolbar. These declarations were style="" attributes in room-cad-workbench.js;
   the /remodel-preview CSP is style-src 'self' with no unsafe-inline and no style-src-attr, so an attribute
   is refused and reported as a style-src-attr violation. Moved here verbatim, !important flags included. */
.room-cad-panel-visibility {
  align-self: stretch;
  background: #f8faf8;
  border: 1px solid #aebbb2;
  border-radius: 10px;
  box-sizing: border-box;
  display: block !important;
  flex: 0 0 100% !important;
  margin: 0 0 12px;
  max-width: 100%;
  min-width: 0;
  padding: 9px 10px;
  width: 100%;
}
.room-cad-panel-visibility-grid {
  display: grid !important;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-top: .75rem;
  min-width: 0;
  width: 100%;
}
.room-cad-panel-transparency-card {
  background: #fff;
  border: 1px solid #d3ddd6;
  border-radius: 8px;
  box-sizing: border-box;
  display: grid !important;
  gap: .65rem;
  min-width: 0;
  padding: .65rem;
}
.room-cad-panel-transparency-toggle {
  justify-self: stretch;
  min-width: 0;
  width: 100%;
}
.room-cad-panel-transparency-row {
  align-items: center;
  display: grid !important;
  gap: .4rem .75rem;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}
.room-cad-panel-transparency-range {
  grid-column: 1 / -1;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}


/* ---------------------------------------------------------------- T15 - THE PHONE'S DRAWING ON A WALL PHOTO
 * Unconditional, like the rest of this file: the row shows an outline count per photo in WORDS, and a "Show outlines"
 * toggle draws the shapes the phone recorded over the photo's own thumbnail. The thumbnail is contained, never cropped
 * to hide a shape at its edge, and the outline is an SVG in a 0..1 view box so a normalised corner lands exactly where
 * the phone drew it whatever size the thumbnail is. Nothing here is interactive: this panel reads, it does not confirm.
 */
.room-cad-capture-outline-count {
  display: block;
  margin-top: 4px;
  font-size: 0.85em;
  color: #33453a;
}

.room-cad-capture-thumb {
  position: relative;
  display: block;
  margin-top: 6px;
  max-width: 220px;
  border: 1px solid #cfd9cd;
  border-radius: 8px;
  background: #16241b;
  overflow: hidden;
}

.room-cad-capture-image {
  display: block;
  width: 100%;
  height: auto;
}

/* T17 / U1 - THE ONE LENGTH UNIT. The Wall photos module carries the same unit switch the phone's capture page does, so
 * the owner can flip it from either screen. It is a real 44 px target on every device, and its pressed state is the
 * room's own dimensionUnit (aria-pressed), never a second copy of it.
 */
.room-cad-buttons .room-cad-unit-toggle {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;
}

.room-cad-capture-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* T12ps - SKETCH THE PROPERTY (House plan module): six boxes, seven shapes, a row per section. A thumb-sized grid. */
.room-cad-module-body > .room-cad-panel > .room-cad-sketch { grid-column: 1 / -1; }
.room-cad-sketch { border-bottom: 1px solid #d6dccf; display: grid; gap: 8px; padding-bottom: 10px; }
.room-cad-sketch h5 { margin: 0; }
.room-cad-sketch-presets button, .room-cad-sketch-boxes button { min-height: 44px; }
.room-cad-sketch-boxes { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.room-cad-sketch-boxes [aria-pressed="true"], .room-cad-sketch-presets [aria-pressed="true"] { background: #edf7f0; border-color: #1f6b45; box-shadow: inset 0 0 0 2px #1f6b45; font-weight: 700; }
.room-cad-sketch-sections { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.room-cad-sketch-sections > li { border: 1px solid #d6dccf; border-radius: 8px; display: grid; gap: 6px; padding: 8px; }
.room-cad-sketch-sections .room-cad-buttons button { flex: 1 1 8rem; min-height: 44px; }
.room-cad-sketch-sections .room-cad-buttons [aria-pressed="true"] { background: #edf7f0; font-weight: 700; }
.room-openplan-import-launch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 18px;
  padding: 18px;
  border: 1px solid rgba(19, 77, 52, .22);
  border-radius: 18px;
  background: linear-gradient(135deg, #f3faf5 0%, #fffaf0 100%);
  box-shadow: 0 12px 28px rgba(15, 50, 34, .08);
}
.room-openplan-import-launch span,
.room-openplan-import-launch strong,
.room-openplan-import-launch p { display: block; }
.room-openplan-import-launch span { color: #8a5a12; font-size: .76rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.room-openplan-import-launch strong { margin-top: 3px; color: #123d2b; font-size: 1.08rem; }
.room-openplan-import-launch p { margin: 6px 0 0; max-width: 74ch; color: #52645b; line-height: 1.5; }
.room-openplan-import-launch .button { min-width: 220px; text-align: center; }
@media (max-width: 760px) {
  .room-openplan-import-launch { grid-template-columns: 1fr; }
  .room-openplan-import-launch .button { width: 100%; min-width: 0; }
}

/* CSP (style-src self): no inline style attributes in the workbench markup. .button sets its own display, so a hidden Estimate button
   is hidden here; the wall-photo thumbnails are sized here (their inline size was blocked and they rendered full size). */
[data-room-cad-estimator][hidden] { display: none; }
.room-cad-wall-photo img { max-width: 160px; max-height: 120px; display: block; }