/* Workspace design pass — hand-written, loaded after the generated workspace.css.
   Canvas-first layout: the model owns the frame and every control floats over it,
   so the space itself reads first and the tools stay out of the geometry. */

.ws{--ws-float:rgba(255,255,255,.94);--ws-float-line:rgba(33,29,25,.09);
    --ws-float-shadow:0 10px 30px rgba(35,30,24,.13);--ws-radius:14px}
.ws .workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:18px;align-items:start;padding:0}
@media (max-width:1080px){.ws .workspace-grid{grid-template-columns:1fr}}

/* ---- Stage ---------------------------------------------------------------- */
.ws .ws-stage{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#faf8f4,#eceae4);box-shadow:0 18px 50px rgba(35,30,24,.07)}
.ws .ws-stage .viewer{height:var(--ws-stage-h,clamp(460px,calc(100vh - 250px),1040px));border:0;background:transparent}
.ws .ws-rail{max-height:var(--ws-stage-h,clamp(460px,calc(100vh - 250px),1040px));overflow:auto}
.ws .ws-stage .viewer-help{pointer-events:none;position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  background:var(--ws-float);border:1px solid var(--ws-float-line);border-radius:999px;
  padding:6px 14px;font-size:11px;color:var(--muted);box-shadow:var(--ws-float-shadow);white-space:nowrap}
.ws .ws-stage .plotly-viewer{width:100%;height:100%}

.ws .ws-float{position:absolute;z-index:4;display:flex;align-items:center;gap:6px;
  background:var(--ws-float);border:1px solid var(--ws-float-line);border-radius:999px;
  padding:5px;box-shadow:var(--ws-float-shadow);backdrop-filter:blur(8px)}
.ws .ws-float button{border:0;background:transparent;cursor:pointer;color:var(--ink);
  height:32px;min-width:32px;padding:0 10px;border-radius:999px;font-size:13px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.ws .ws-float button:hover{background:rgba(97,127,128,.13)}
.ws .ws-float button.active{background:var(--accent);color:#fff}
.ws .ws-zoom{left:16px;top:16px}
/* Expanded: the model takes the whole window, controls ride along with it. */
.ws .ws-stage.is-expanded{position:fixed;inset:10px;z-index:70;border-radius:18px;
  background:linear-gradient(180deg,#faf8f4,#eceae4);box-shadow:0 40px 120px rgba(28,24,20,.32)}
.ws .ws-stage.is-expanded .viewer{height:100%}
body.ws-expanded{overflow:hidden}
.ws .ws-zoom .ws-zoom-level{font-size:11px;color:var(--muted);min-width:42px;text-align:center;
  font-variant-numeric:tabular-nums}
.ws .ws-viewtoggle{right:16px;top:16px;padding:4px;gap:2px}
.ws .ws-viewtoggle button{min-width:46px;font-size:12px;letter-spacing:.02em}

/* Vertical icon rail, the way the reference stacks its room tools. */
.ws .ws-toolrail{position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:4;
  display:flex;flex-direction:column;gap:6px;background:var(--ws-float);
  border:1px solid var(--ws-float-line);border-radius:999px;padding:7px;box-shadow:var(--ws-float-shadow)}
.ws .ws-toolrail button{position:relative;width:40px;height:40px;border:0;border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:background .15s,color .15s}
.ws .ws-toolrail button:hover{background:rgba(97,127,128,.14)}
.ws .ws-toolrail button.active{background:var(--accent);color:#fff}
.ws .ws-toolrail button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.ws .ws-toolrail button::after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);
  top:50%;transform:translateY(-50%);background:var(--dark);color:#f7f4ee;font-size:11px;
  padding:5px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s}
.ws .ws-toolrail button:hover::after{opacity:1}

.ws .ws-actionbar{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);z-index:4;
  display:flex;gap:8px;background:var(--dark);border-radius:999px;padding:7px;
  box-shadow:0 16px 40px rgba(28,24,20,.28)}
.ws .ws-actionbar button{border:0;background:transparent;color:#f4f1ea;font-size:12px;
  padding:9px 15px;border-radius:999px;cursor:pointer;transition:background .15s}
.ws .ws-actionbar button:hover{background:rgba(255,255,255,.14)}
.ws .ws-actionbar button.primary{background:var(--accent);color:#fff}
.ws .runtime-status{position:absolute;left:16px;right:auto;bottom:16px;width:auto;z-index:4;background:var(--accent-dark);
  color:#f4f1ea;font-size:11px;padding:6px 12px;border-radius:999px;opacity:0;transition:opacity .18s}
.ws .runtime-status.visible{opacity:1}
.ws .annotation-mode,.ws .floorplan-mode-badge,.ws .view-badge{display:none}

/* ---- Properties rail ------------------------------------------------------ */
.ws .ws-rail{display:flex;flex-direction:column;gap:12px;border:1px solid var(--line);
  border-radius:18px;background:var(--white);padding:14px;box-shadow:0 14px 40px rgba(35,30,24,.06)}
.ws .ws-rail-tabs{display:flex;gap:16px;border-bottom:1px solid var(--line);padding-bottom:9px}
.ws .ws-rail-tabs b{font-weight:inherit}
.ws .ws-rail-tabs button,.ws .ws-rail-tabs b{border:0;background:transparent;padding:0 0 4px;font-size:12px;
  color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.ws .ws-rail-tabs button.active,.ws .ws-rail-tabs b.active{color:var(--ink);border-bottom-color:var(--accent)}
.ws .ws-section{border-bottom:1px solid var(--line)}
.ws .ws-section:last-of-type{border-bottom:0}
.ws .ws-section>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;padding:11px 2px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.ws .ws-section>summary::-webkit-details-marker{display:none}
.ws .ws-section>summary::after{content:'+';font-size:15px;color:var(--muted);letter-spacing:0}
.ws .ws-section[open]>summary::after{content:'–'}
.ws .ws-section-body{padding:0 2px 13px}

.ws .ws-chips{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ws .ws-chip{border:1px solid var(--line);border-radius:9px;padding:8px 10px;display:flex;
  align-items:baseline;justify-content:space-between;gap:6px;background:var(--paper-2)}
.ws .ws-chip b{font-size:13px;font-weight:500;color:var(--ink)}
.ws .ws-chip span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* Sits directly under the quantities, because it is about them. Quiet enough
   not to shout over the space, sharp enough that nobody quotes off a number
   without reading it. */
.ws .ws-limits{border:1px solid var(--line);border-left:2px solid var(--ink);border-radius:9px;
  background:var(--paper-2);padding:9px 11px;display:grid;gap:6px}
.ws .ws-limits p{margin:0;font-size:11px;line-height:1.5;color:var(--muted)}

.ws .surface-picker{display:grid;grid-template-columns:1fr;gap:5px;max-height:232px;overflow:auto;margin:0}
.ws .surface-picker button{display:flex;align-items:center;justify-content:space-between;gap:9px;
  width:100%;border:1px solid var(--line);border-radius:9px;background:var(--white);
  padding:8px 10px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.ws .surface-picker button:hover{border-color:var(--accent)}
.ws .surface-picker button.active{background:#dfeceb;border-color:var(--accent)}
.ws .surface-picker .wall-picker-main{display:flex;align-items:center;gap:9px;font-weight:400;min-width:0}
.ws .surface-picker .wall-key{width:22px;height:22px;border-radius:6px;background:var(--paper-3);
  color:var(--accent-dark);display:grid;place-items:center;font-size:11px;flex:none}
.ws .surface-picker button.active .wall-key{background:var(--accent);color:#fff}
.ws .surface-picker .wall-picker-name{font-size:12px;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ws .surface-picker .wall-picker-area{font-size:11px;color:var(--muted);flex:none}
.ws .surface-picker .wall-picker-area small{display:block;font-size:9px;line-height:1.1;text-align:right}

.ws .surface-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ws .surface-actions button{border:1px solid var(--line);border-radius:9px;background:var(--white);
  padding:9px 10px;cursor:pointer;text-align:left}
.ws .surface-actions button.active{background:#dfeceb;border-color:var(--accent)}
.ws .surface-actions b{display:block;font-size:12px;font-weight:500}
.ws .surface-actions span{font-size:10px;color:var(--muted)}
.ws .text-action{border:0;background:transparent;color:var(--accent-dark);font-size:11px;cursor:pointer}

.ws .quantity-total{display:flex;align-items:baseline;justify-content:space-between;
  padding:11px 0 9px;border-bottom:1px solid var(--line)}
.ws .quantity-total span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ws .quantity-total strong{font-size:22px;font-weight:400}
.ws .selected-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.ws .selected-chip{min-width:20px;width:auto;padding:0 3px;box-sizing:border-box;height:20px;border-radius:6px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:10px}
.ws .selected-row b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws .selected-row span{color:var(--muted)}
.ws .surface-line{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:11px;color:var(--muted)}
.ws .surface-line b{font-weight:400;color:var(--ink)}
.ws .empty-summary{padding:14px 0;font-size:12px;color:var(--muted)}
.ws .mini-controls{display:flex;flex-wrap:wrap;gap:6px}
.ws .mini-controls button{border:1px solid var(--line);border-radius:999px;background:var(--white);
  padding:6px 11px;font-size:11px;cursor:pointer}
.ws .mini-controls button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.ws .single-disclaimer{font-size:10px;color:var(--muted);padding-top:4px}

/* Services + fit-out reuse the stage; their rails stay plain cards. */
.ws .ws-rail .service-row{display:grid;grid-template-columns:118px 1fr;gap:8px;padding:7px 0;
  border-bottom:1px solid var(--line);font-size:11px}
.ws .ws-rail .service-row b{font-weight:400;color:var(--muted)}
.ws .ws-legend{display:flex;flex-wrap:wrap;gap:6px}
.ws .ws-legend button{display:flex;align-items:center;gap:6px;border:1px solid var(--line);
  border-radius:999px;background:var(--white);padding:6px 11px;font-size:11px;cursor:pointer}
.ws .ws-legend button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.ws .ws-legend i{width:8px;height:8px;border-radius:50%;background:currentColor;display:block}
.ws .ws-rail h3{font-size:17px;margin:0 0 4px}
.ws .ws-rail p{font-size:12px;color:var(--muted);margin:0}

/* ---- Motion ---------------------------------------------------------------
   One curve, two speeds: quick for a control answering a click, considered for
   anything that changes what you are looking at. */
.ws{--ws-fast:150ms;--ws-slow:380ms;--ws-curve:cubic-bezier(.22,.72,.2,1)}
.ws .ws-float button,.ws .ws-toolrail button,.ws .ws-actionbar button,
.ws .surface-picker button,.ws .surface-actions button,.ws .mini-controls button,
.ws .ws-legend button,.ws .ws-rail-tabs button{
  transition:background var(--ws-fast) var(--ws-curve),color var(--ws-fast) var(--ws-curve),
             border-color var(--ws-fast) var(--ws-curve),transform var(--ws-fast) var(--ws-curve),
             box-shadow var(--ws-fast) var(--ws-curve)}
.ws .ws-float button:hover,.ws .ws-toolrail button:hover{transform:translateY(-1px)}
.ws .ws-float button:active,.ws .ws-toolrail button:active,.ws .ws-actionbar button:active{transform:scale(.94)}
.ws .surface-picker button:hover,.ws .surface-actions button:hover{transform:translateX(2px)}
.ws .ws-actionbar button:hover{transform:translateY(-1px)}
.ws .ws-float,.ws .ws-toolrail,.ws .ws-actionbar{
  transition:box-shadow var(--ws-slow) var(--ws-curve),transform var(--ws-slow) var(--ws-curve)}
.ws .ws-stage{transition:box-shadow var(--ws-slow) var(--ws-curve)}
.ws .ws-toolrail button::after{transition:opacity var(--ws-fast) var(--ws-curve),transform var(--ws-fast) var(--ws-curve);transform:translate(-4px,-50%)}
.ws .ws-toolrail button:hover::after{transform:translate(0,-50%)}

/* Panels and readouts arrive rather than appear. */
@keyframes ws-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ws .ws-section[open] .ws-section-body,.ws .select-summary>*,.ws .ws-chips,
.ws .service-meta,.ws .ws-rail h3,.ws .ws-rail>p{animation:ws-rise var(--ws-slow) var(--ws-curve) both}
.ws .quantity-total strong{font-variant-numeric:tabular-nums}
.ws .ws-section>summary::after{transition:transform var(--ws-fast) var(--ws-curve)}
.ws .ws-section[open]>summary::after{transform:rotate(180deg)}
.ws .runtime-status{transition:opacity var(--ws-slow) var(--ws-curve),transform var(--ws-slow) var(--ws-curve);transform:translateY(4px)}
.ws .runtime-status.visible{transform:none}
.ws .ws-stage.is-expanded{animation:ws-rise var(--ws-slow) var(--ws-curve) both}

@media (prefers-reduced-motion:reduce){
  .ws *,.ws *::after{animation:none!important;transition-duration:.01ms!important}
}

/* ---- Type and contrast -----------------------------------------------------
   Poppins carries the numbers and labels, in the rail and in the model, so the
   readings look like one instrument. The muted greys were too pale against
   paper, so every secondary tone is darkened a step. */
.ws{font-family:'Poppins',Inter,system-ui,sans-serif;--ws-muted:#5f574d;--ws-dim:#6d6459}
.ws .ws-chip b,.ws .quantity-total strong,.ws .surface-picker .wall-picker-area,
.ws .ws-zoom-level,.ws .selected-row span{font-variant-numeric:tabular-nums}
.ws .ws-chip span,.ws .ws-section>summary,.ws .quantity-total span{color:var(--ws-muted)}
.ws .surface-picker .wall-picker-area,.ws .surface-line,.ws .ws-rail p,
.ws .single-disclaimer,.ws .empty-summary,.ws .ws-stage .viewer-help{color:var(--ws-dim)}
.ws .surface-line b,.ws .selected-row b{color:var(--ink)}
.ws .surface-picker .wall-key{background:#e0d8cb;color:#2c4344;font-weight:500}
.ws .surface-picker button.active{background:#d7e8e7;border-color:var(--accent-dark)}
.ws .surface-picker button.active .wall-key{background:var(--accent-dark);color:#fff}
.ws .selected-chip{background:var(--accent-dark)}
.ws .ws-rail-tabs button.active{color:var(--ink);font-weight:500}

/* Quotes sit under the quantities they are built from, not over the model. */
.ws .ws-quote-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}
.ws .ws-quote-actions button{border:1px solid var(--line);border-radius:9px;background:var(--white);
  padding:9px 6px;font-size:11px;color:var(--ink);cursor:pointer}
.ws .ws-quote-actions button:hover{border-color:var(--accent);background:#eef4f3}
.ws .ws-float-divider{width:1px;height:20px;background:var(--ws-float-line);margin:0 3px}

/* ---- Dark view ------------------------------------------------------------
   The plan inverts to white linework on navy; the chrome follows it so the
   controls do not glare against the drawing. */
.ws .ws-stage.is-dark{background:linear-gradient(180deg,#13243f,#0d1a2f);border-color:#1d3055}
.ws .ws-stage.is-dark .ws-float,.ws .ws-stage.is-dark .ws-toolrail{
  background:rgba(17,31,54,.88);border-color:rgba(255,255,255,.14);color:#eaf1ff;
  box-shadow:0 12px 34px rgba(4,10,20,.45)}
.ws .ws-stage.is-dark .ws-float button,.ws .ws-stage.is-dark .ws-toolrail button{color:#eaf1ff}
.ws .ws-stage.is-dark .ws-float button:hover,
.ws .ws-stage.is-dark .ws-toolrail button:hover{background:rgba(255,255,255,.14)}
.ws .ws-stage.is-dark .ws-float button.active,
.ws .ws-stage.is-dark .ws-toolrail button.active{background:#5aa9b0;color:#06121f}
.ws .ws-stage.is-dark .ws-zoom-level{color:#bccce6}
.ws .ws-stage.is-dark .viewer-help{background:rgba(17,31,54,.86);border-color:rgba(255,255,255,.14);color:#c6d4ec}
.ws .ws-stage.is-dark .runtime-status{background:#5aa9b0;color:#06121f}
.ws .ws-stage.is-dark .ws-toolrail button::after{background:#eaf1ff;color:#0d1a2f}

/* ---- Type, second pass -----------------------------------------------------
   Every number is Poppins with tabular figures at one scale, so a reading looks
   the same wherever it appears; the serif is kept for headings alone. The
   micro-labels were 9–10px, which is below comfortable for letter-spaced caps. */
.ws .quantity-total strong,.ws .ws-chip b,.ws .selected-row span,
.ws .surface-picker .wall-picker-area,.ws .surface-actions span,.ws .ws-zoom-level{
  font-family:'Poppins',Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums}
.ws .quantity-total{align-items:center;padding:13px 0 11px}
.ws .quantity-total strong{font-size:27px;font-weight:500;letter-spacing:-.015em;line-height:1}
.ws .quantity-total span{font-size:10px;letter-spacing:.15em}
.ws .ws-chip{padding:9px 11px}
.ws .ws-chip b{font-size:14px;font-weight:500}
.ws .ws-chip span{font-size:10px;letter-spacing:.09em}
.ws .ws-section>summary{font-size:11px;letter-spacing:.14em;padding:12px 2px}
.ws .ws-rail h3.serif{font-size:19px;letter-spacing:-.02em;margin:0 0 5px}
.ws .ws-rail p{font-size:12.5px;line-height:1.55}

/* The wall list scans as a column: name left, area right, both on one baseline. */
.ws .surface-picker button{display:grid;grid-template-columns:22px minmax(0,1fr) auto;
  align-items:center;gap:10px;padding:9px 11px}
.ws .surface-picker .wall-picker-main{display:contents}
.ws .surface-picker .wall-picker-name{font-size:12.5px}
.ws .surface-picker .wall-picker-area{font-size:11.5px;min-width:62px;text-align:right}
.ws .surface-actions b{font-size:12.5px}
.ws .surface-actions span{font-size:11px}
.ws .selected-row{padding:8px 0;font-size:12.5px}
.ws .surface-line{font-size:11.5px;padding:7px 0}
.ws .single-disclaimer{font-size:10.5px;line-height:1.5}
.ws .ws-rail-tabs button{font-size:12.5px}
.ws .mini-controls button,.ws .ws-legend button,.ws .ws-quote-actions button{font-size:11.5px}
.ws .ws-stage .viewer-help{font-size:11.5px}

/* ---- The reading on the model ----------------------------------------------
   Plotly's 3D text has no plate behind it, so a measurement could land on a wall
   and vanish. It is drawn as a chip over the canvas instead, positioned from the
   scene's own camera. */
.ws .ws-measure-label{position:absolute;z-index:5;transform:translate(-50%,-50%);
  background:var(--dark);color:#f6f3ec;font-family:'Poppins',Inter,system-ui,sans-serif;
  font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  padding:5px 10px;border-radius:999px;pointer-events:none;white-space:nowrap;
  box-shadow:0 6px 18px rgba(28,24,20,.28);opacity:0;transition:opacity .18s var(--ws-curve)}
.ws .ws-measure-label.visible{opacity:1}
.ws .ws-stage.is-dark .ws-measure-label{background:#e8f6f7;color:#0d1a2f;box-shadow:0 6px 18px rgba(4,10,20,.5)}

/* A tab arrives rather than appears. */
@keyframes ws-stage-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ws .ws-stage,.ws .ws-rail{animation:ws-stage-in .34s var(--ws-curve) both}
.ws .ws-rail{animation-delay:.04s}
/* While the page opens (portal.mjs adds html.ws-opening) the stage and rail are simply there: the arrival is for tab switches. */
html.ws-opening .ws .ws-stage,html.ws-opening .ws .ws-rail,html.ws-opening .ws .ws-stage.is-expanded,
html.ws-opening .ws .ws-section[open] .ws-section-body,html.ws-opening .ws .select-summary>*,html.ws-opening .ws .ws-chips,
html.ws-opening .ws .service-meta,html.ws-opening .ws .ws-rail h3,html.ws-opening .ws .ws-rail>p,
html.ws-opening .ws .tab-panel.active{animation-duration:0s!important;animation-delay:0s!important}

/* ---- Service layers --------------------------------------------------------
   Each trade carries its own colour, and the chip shows the same dot as the
   model does. The count is part of the chip: knowing there are three of a thing
   is most of what the layer is telling you. */
.ws .ws-legend{display:flex;flex-wrap:wrap;gap:6px}
.ws .ws-legend button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:999px;background:var(--white);padding:7px 11px;font-size:11.5px;color:var(--ink);
  cursor:pointer;transition:border-color .16s,background .16s,box-shadow .16s}
.ws .ws-legend button:hover{border-color:var(--dot,var(--accent));background:#f6f3ee}
.ws .ws-legend button i{width:9px;height:9px;border-radius:50%;background:var(--dot,#8d857a);
  display:block;flex:none;box-shadow:0 0 0 2px #ffffff}
.ws .ws-legend button.active{border-color:var(--dot,var(--accent-dark));
  box-shadow:inset 0 0 0 1px var(--dot,var(--accent-dark));background:#f4f1ea}
.ws .ws-legend-count{font-variant-numeric:tabular-nums;font-size:10.5px;color:var(--ws-dim);
  margin-left:1px}
.ws .ws-legend button.active .ws-legend-count{color:var(--ink)}

/* The jump buttons are the same key in list form. */
.ws .mini-controls button{display:inline-flex;align-items:center;gap:7px}
.ws .mini-controls button i{width:8px;height:8px;border-radius:50%;background:var(--dot,#8d857a);
  display:block;flex:none}

.ws .ws-stage.is-dark ~ .ws-rail .ws-legend button,
.ws-rail .ws-legend button{background:var(--white)}

/* The capture a model came from, and the path it came through. */
.ws .ws-capture-picker{display:grid;gap:6px}
.ws .ws-capture-picker button{display:grid;gap:2px;text-align:left;border:1px solid var(--line);
  border-radius:9px;background:var(--white);padding:9px 11px;cursor:pointer;
  transition:border-color .16s,background .16s}
.ws .ws-capture-picker button:hover{border-color:var(--accent)}
.ws .ws-capture-picker button.active{background:#dfeceb;border-color:var(--accent-dark)}
.ws .ws-capture-picker b{font-size:12.5px;font-weight:500}
.ws .ws-capture-picker span{font-size:10.5px;color:var(--ws-dim)}
.ws .ws-absent{font-size:12px;color:var(--ws-dim);margin:0;line-height:1.55}

/* ---- Services drawings -----------------------------------------------------
   Bringing a drawing in is the one place in the workspace where someone can be
   confidently wrong, so the flow states what it found rather than ticking. */
.ws .ws-drop{display:grid;gap:3px;border:1px dashed var(--line-strong);border-radius:11px;
  padding:14px 13px;cursor:pointer;background:var(--paper-2);transition:border-color .16s,background .16s}
.ws .ws-drop:hover,.ws .ws-drop.over{border-color:var(--accent);background:#eef4f3}
.ws .ws-drop b{font-size:12.5px;font-weight:500}
.ws .ws-drop span{font-size:11px;color:var(--ws-dim);line-height:1.5}

.ws .ws-sheets{display:grid;gap:8px;margin-bottom:10px}
.ws .ws-sheet{border:1px solid var(--line);border-radius:10px;padding:10px 11px;background:var(--white)}
.ws .ws-sheet.unaligned{border-style:dashed;background:var(--paper-2)}
.ws .ws-sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ws .ws-sheet-head b{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws .ws-sheet-head span{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ws-muted)}
.ws .ws-sheet p{font-size:11px;color:var(--ws-dim);margin:4px 0 8px}
.ws .ws-sheet-actions{display:flex;flex-wrap:wrap;gap:6px}
.ws .ws-sheet-actions button{border:1px solid var(--line);border-radius:999px;background:var(--white);
  padding:5px 10px;font-size:11px;cursor:pointer}
.ws .ws-sheet-actions button:hover{border-color:var(--accent)}
.ws .ws-sheet-opacity{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:10.5px;color:var(--ws-dim)}
.ws .ws-sheet-opacity input{flex:1;accent-color:var(--accent-dark)}

/* The alignment dialog sits over the stage, beside the plan it is lining up to. */
.ws .ws-align{position:absolute;inset:14px;z-index:8;display:flex;flex-direction:column;
  background:rgba(250,248,244,.97);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 30px 80px rgba(35,30,24,.22);overflow:hidden;
  animation:ws-rise .28s var(--ws-curve) both}
.ws .ws-stage.is-dark .ws-align{background:rgba(16,28,49,.97);border-color:#284166;color:#eaf1ff}
.ws .ws-align header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:14px 16px;border-bottom:1px solid var(--line)}
.ws .ws-align header b{display:block;font-size:13.5px;font-weight:500}
.ws .ws-align header span{display:block;font-size:11.5px;color:var(--ws-dim);margin-top:2px}
.ws .ws-align header button{border:0;background:transparent;font-size:15px;color:var(--ws-dim);cursor:pointer}
.ws .ws-align-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:14px;padding:14px 16px;min-height:0}
/* The whole sheet, not a scrolling window onto it: the two corners being asked
   for are usually the far ones, and a reader should not have to go looking. */
.ws .ws-align-canvas{position:relative;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--line);border-radius:10px;background:#fff;padding:6px}
.ws .ws-align-canvas img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;cursor:crosshair}

.ws .ws-align-pin{position:absolute;transform:translate(-50%,-50%);width:22px;height:22px;border-radius:50%;
  background:#3b0510;color:#f7f1ee;display:grid;place-items:center;font-size:11px;
  box-shadow:0 2px 8px rgba(59,5,16,.4)}
.ws .ws-align-body aside{display:grid;gap:10px;align-content:start;font-size:11.5px}
.ws .ws-align-body label{display:grid;gap:4px;color:var(--ws-muted)}
.ws .ws-align-body select,.ws .ws-align-body input[type=text]{border:1px solid var(--line);border-radius:8px;
  padding:7px 9px;font:inherit;font-size:12px;background:var(--white);color:var(--ink)}
.ws .ws-optional{font-size:10px;color:var(--ws-dim);text-transform:none;letter-spacing:0}
.ws .ws-align-help{font-size:11px;color:var(--ws-dim);line-height:1.55;margin:0}
.ws .ws-align-body aside button{border:1px solid var(--line);border-radius:999px;background:var(--white);
  padding:7px 12px;font-size:11.5px;cursor:pointer}
.ws .ws-align-waiting{grid-column:1/-1;display:grid;gap:8px;align-content:center;justify-items:start;
  padding:18px;max-width:420px}
.ws .ws-align-waiting b{font-size:14px}
.ws .ws-align-waiting span{font-size:12px;color:var(--ws-dim);line-height:1.6}
.ws .ws-align-pair{font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--ws-muted)}
.ws .ws-align-waiting button{border:1px solid var(--line);border-radius:999px;background:var(--white);
  padding:7px 13px;font-size:11.5px;cursor:pointer;margin-top:6px}

/* What the fit found — stated, never tucked behind a tick. */
.ws .ws-verdict{position:absolute;right:16px;bottom:16px;z-index:7;max-width:330px;
  background:var(--white);border:1px solid var(--line);border-radius:12px;padding:13px 14px;
  box-shadow:0 18px 44px rgba(35,30,24,.18);animation:ws-rise .3s var(--ws-curve) both}
.ws .ws-verdict.has-problems{border-color:#b2513f}
.ws .ws-verdict b{display:block;font-size:12.5px;font-weight:500;margin-bottom:6px}
.ws .ws-verdict p{font-size:11.5px;color:var(--ws-dim);margin:0 0 5px;line-height:1.5}
.ws .ws-verdict p.problem{color:#8f3a2b}
.ws .ws-verdict-actions{display:flex;gap:7px;margin-top:9px}
.ws .ws-verdict-actions button{border:1px solid var(--line);border-radius:999px;background:var(--white);
  padding:6px 12px;font-size:11.5px;cursor:pointer}
.ws .ws-verdict-actions button:last-child{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}

@media(max-width:900px){.ws .ws-align-body{grid-template-columns:1fr}}

/* Step two is clicking the plan, so the dialog shrinks to a card in the corner
   and stops covering the thing it is asking you to click. */
/* While it is asking for clicks ON the plan, the card becomes a bar across the
   top: a corner card sat over the bottom-left corner of the plan, which is one
   of the corners it was asking the reader to click. */
.ws .ws-align.awaiting-plan{inset:auto 12px 12px 12px;width:auto;flex-direction:row;
  align-items:center;gap:14px;border-radius:14px;box-shadow:0 14px 34px rgba(35,30,24,.16);
  padding:4px 4px 4px 0}
.ws .ws-align.awaiting-plan header{padding:10px 0 10px 14px;border-bottom:0;flex:1 1 auto}
.ws .ws-align.awaiting-plan .ws-align-body{grid-template-columns:1fr;padding:0 12px 0 0;
  flex:0 1 auto;min-width:0}
.ws .ws-align.awaiting-plan .ws-align-waiting{padding:0;max-width:none;justify-items:end;
  text-align:right;gap:4px}
.ws .ws-align.awaiting-plan .ws-align-waiting b{display:none}
.ws .ws-align.awaiting-plan .ws-align-waiting span{max-width:52ch}
/* The standing hint and the step bar would sit on top of each other. */
.ws .ws-stage:has(.ws-align.awaiting-plan) .viewer-help{opacity:0}
.ws .ws-align.awaiting-plan .ws-align-waiting button{margin-top:2px}
@media(max-width:760px){
  .ws .ws-align.awaiting-plan{flex-direction:column;align-items:stretch}
  .ws .ws-align.awaiting-plan .ws-align-waiting{justify-items:start;text-align:left}
}

/* A row for a point that came off a drawing says so on the row itself: the
   difference between marked and observed must survive being skim-read. */
.ws #serviceJump .mini-controls{display:grid;gap:5px}
.ws #serviceJump button{display:flex;align-items:center;gap:8px;text-align:left;width:100%}
.ws #serviceJump .ws-from-drawing{margin-left:auto;font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ws-dim);white-space:nowrap}
.ws #serviceJump .ws-point-where{font-size:10px;color:var(--ws-dim);white-space:nowrap}

/* Marking adds records to the space, so the mode stays on screen the whole time
   it is on, with the way out and the way back in reach. */
.ws .ws-marking{position:absolute;left:12px;right:12px;bottom:12px;z-index:7;display:flex;
  align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 14px;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 34px rgba(35,30,24,.16);animation:ws-rise .24s var(--ws-curve) both}
.ws .ws-stage.is-dark .ws-marking{background:rgba(16,28,49,.97);border-color:#284166;color:#eaf1ff}
.ws .ws-marking b{display:block;font-size:12.5px;font-weight:500}
.ws .ws-marking span{display:block;font-size:11px;color:var(--ws-dim);margin-top:2px}
.ws .ws-marking-actions{display:flex;gap:7px;flex:0 0 auto}
.ws .ws-marking-actions button{border:1px solid var(--line);border-radius:999px;background:var(--white);
  padding:6px 12px;font-size:11.5px;cursor:pointer}
.ws .ws-marking-actions button:last-child{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.ws .ws-stage:has(.ws-marking) .viewer-help{opacity:0}

/* ---- Walls: what is on the far side ----------------------------------------
   The tag is the control as well as the label, because the state it shows is
   the thing a reader most often needs to change. The row selects the wall; the
   tag says what is behind it. Both live inside .surface-picker, whose own
   button rules would otherwise lay the tag out as a second wall row. */
.ws .wall-counts{font-size:11px;color:var(--ws-dim);margin:0 0 9px;line-height:1.5}
.ws .wall-note{font-size:10.5px;color:var(--ws-dim);line-height:1.55;margin:10px 0 0}

.ws .surface-picker .wall-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;border:1px solid var(--line);border-radius:9px;overflow:hidden;
  background:rgba(255,255,255,.42);transition:border-color .16s,background .16s}
.ws .surface-picker .wall-row:hover{border-color:var(--accent);background:rgba(255,255,255,.68)}
.ws .surface-picker .wall-row.active{background:#dfeceb;border-color:var(--accent)}
.ws .surface-picker .wall-row.active .wall-key{background:var(--accent);color:#fff}

.ws .surface-picker .wall-row .wall-pick{display:flex;align-items:center;justify-content:space-between;
  gap:9px;width:100%;min-width:0;border:0;border-radius:0;background:transparent;
  padding:9px 10px;min-height:44px}
.ws .surface-picker .wall-row .wall-pick:hover{border:0;background:transparent}

.ws .surface-picker .wall-row .wall-exposure{display:flex;align-items:center;gap:5px;
  border:0;border-left:1px solid var(--line);border-radius:0;background:transparent;
  padding:0 11px;min-height:44px;min-width:0;font-size:9.5px;letter-spacing:.07em;
  text-transform:uppercase;white-space:nowrap;cursor:pointer;color:var(--ws-muted)}
.ws .surface-picker .wall-row .wall-exposure:hover{background:rgba(255,255,255,.75);border-left-color:var(--accent)}
.ws .surface-picker .wall-row .wall-exposure.internal{color:#2f6f96}
.ws .surface-picker .wall-row .wall-exposure.external{color:#7d5f36}
.ws .surface-picker .wall-row .wall-exposure .from-sheet{width:5px;height:5px;border-radius:50%;
  background:currentColor;flex:0 0 auto;opacity:.9}

.ws .ws-stage.is-dark ~ * .wall-row,.ws .is-dark .wall-row{background:rgba(255,255,255,.05)}

/* Three columns, so the name sits against its key instead of drifting to the
   middle of whatever space the row has left over. */
.ws .surface-picker .wall-row .wall-pick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:9px;text-align:left}
.ws .surface-picker .wall-row .wall-pick > b{display:contents}
.ws .surface-picker .wall-row .wall-picker-name{justify-self:start;text-align:left}
.ws .surface-picker .wall-row .wall-picker-area{justify-self:end}
/* Room for eight walls before it scrolls, and air under it for the note. */
.ws #wallPicker{max-height:300px}

/* Build from a plan. The stage is a drawing, not a model: white paper, the
   traced lines in the page's own ink, and the calibration in a markup red so a
   measurement never reads as another wall. */
/* The same height every other stage gets. Without it the canvas wrapper's
   flex:1 has nothing to fill and the drawing collapses to nothing. */
.ws .build-stage{display:flex;flex-direction:column;background:var(--paper-2);position:relative;
  height:var(--ws-stage-h,clamp(460px,calc(100vh - 250px),1040px))}
.ws .build-canvas-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  background:repeating-conic-gradient(var(--paper-2) 0% 25%, var(--paper) 0% 50%) 50%/22px 22px}
.ws .build-canvas-wrap canvas{display:block;max-width:100%;max-height:100%;cursor:crosshair}
.ws .build-say{position:static;margin:0;padding:9px 13px;border-top:1px solid var(--line);
  background:var(--paper);color:var(--ink);font-size:12px;line-height:1.45;pointer-events:none}

/* The label sits on its own line and the controls wrap under it. A row that
   lays label, input and unit side by side fits a 332px rail and nothing
   narrower — and when it overflowed, the button that sets the scale went off
   the right edge of the panel with no scrollbar to say so. Nothing in this
   rail may ever be unreachable. */
.ws .build-field{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:11px;color:var(--muted);margin-top:10px}
.ws .build-field>span:first-child{flex:1 0 100%;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase}
.ws .build-field input{flex:1 1 90px;min-width:0;border:1px solid var(--line);border-radius:8px;
  padding:8px 9px;font:inherit;font-size:12px;color:var(--ink);background:var(--white)}
.ws .build-field input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

.ws .build-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ws .build-fact{border:1px solid var(--line);border-radius:9px;padding:7px 9px;background:var(--paper-2)}
.ws .build-fact b{display:block;font-size:13px;font-weight:500;color:var(--ink)}
.ws .build-fact span{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.ws .build-none,.ws .build-note,.ws .build-problem{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--muted)}
.ws .build-problem{color:var(--ink);border-left:2px solid var(--accent);padding-left:8px}
.ws .build-link{margin-top:9px;background:none;border:0;padding:0;font:inherit;font-size:11px;
  color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ws .build-go{width:100%;margin-top:9px}

.ws .ws-drop.over{border-style:solid;background:var(--paper-2)}

.ws .build-form{display:grid;gap:0;margin-top:9px}
.ws .build-field select{border:1px solid var(--line);border-radius:8px;padding:7px 6px;
  font:inherit;font-size:12px;color:var(--ink);background:var(--white);flex:none;width:62px}
.ws .build-field .build-unit{flex:none;font-size:11px;color:var(--muted)}
/* The action is a full-width button under the row, never a thing competing for
   horizontal space with a text link. */
.ws .build-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.ws .build-row .build-link{flex:1 1 auto}
.ws .build-small{flex:1 1 100%;padding:9px 13px;font-size:12px}
/* Both button states, with their own colours.

   `.btn` paints `color: var(--surface)`, and inside the workspace --surface
   resolves to the same value as --ink: a dark label on a dark fill, invisible
   in every enabled button in this rail. Inheriting a colour token that another
   stylesheet owns is how that happened, so these buttons state both ends of
   the contrast themselves and depend on nothing. */
.ws .build-small,.ws .build-go{background:var(--ink);color:#fff;border:1px solid var(--ink)}
.ws .build-small:hover:not(:disabled),.ws .build-go:hover:not(:disabled){background:#45382d}
.ws .build-small:disabled,.ws .build-go:disabled{opacity:1;cursor:not-allowed;
  background:var(--paper-2);color:var(--ink);border:1px dashed var(--line);box-shadow:none}

/* A field the step needs, outlined so it is obvious WHICH one is missing —
   a disabled button only says that something is. */
.ws .build-field.needs input{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent)}
.ws .build-field.needs>span:first-child{color:var(--accent)}
.ws .build-hint{flex:1 0 100%;font-size:10px;line-height:1.5;color:var(--accent)}
.ws .build-hint:empty{display:none}
.ws .build-sub{margin:14px 0 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ws .build-run{display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid var(--line);border-radius:9px;padding:7px 10px;margin-top:6px;
  font-size:11px;color:var(--ink);background:var(--paper-2)}
.ws .build-run button{border:0;background:none;padding:0;font:inherit;font-size:11px;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ws .build-run button:hover{color:var(--ink)}
.ws .build-link[aria-pressed="true"]{color:var(--accent-dark);text-decoration-thickness:2px}
.ws .build-stage .ws-zoom{z-index:5}
.ws .build-canvas-wrap{touch-action:none}

/* Last line of defence: a rail that cannot overflow, whatever is put in it. */
.ws .ws-rail,.ws .ws-rail *{min-width:0;max-width:100%}
.ws .ws-rail{overflow-x:hidden;overflow-wrap:anywhere}

/* A step that is waiting on you, and a step that is done. The button stays
   live either way: a disabled control eats the click and explains nothing,
   which is exactly what "I pressed Build and nothing happened" feels like. */
.ws .btn.waiting{background:var(--paper-2);color:var(--ink);
  border:1px dashed var(--line);box-shadow:none}
.ws .btn.waiting:hover{background:var(--accent-tint);border-color:var(--accent)}
.ws .ws-section>summary.done{color:var(--accent-dark)}
.ws .ws-section>summary.done::before{content:'✓';margin-right:7px;font-size:11px;letter-spacing:0}
.ws .build-explain{margin:0 0 4px;font-size:11px;line-height:1.6;color:var(--muted)}

/* Which thing you are drawing. A segmented control rather than a dropdown: the
   choice changes what the next click does, so it has to be visible. */
.ws .build-tools{display:flex;gap:6px;margin-top:10px}
.ws .build-tools button{flex:1 1 0;border:1px solid var(--line);background:var(--white);
  border-radius:999px;padding:8px 10px;font:inherit;font-size:11px;color:var(--ink);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.ws .build-tools button:hover{border-color:var(--accent)}
.ws .build-tools button.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- the Furnish lens ---------------------------------------------------
   Reuses the Build lens's stage, canvas and field styles: one builder, two
   things it does. What is new here is the catalogue rail, which has to show a
   few hundred items without becoming a wall of text, and the claim panel,
   which is the sentence a reader is entitled to. */
.ws .furnish-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:8px 13px;border-bottom:1px solid var(--line);background:var(--white)}
.ws .furnish-bar .build-link{margin-top:0}
.ws .furnish-bar .build-link[aria-disabled="true"]{color:var(--muted)}
.ws .furnish-count{margin-left:auto;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.ws .build-canvas-wrap canvas#furnishCanvas{cursor:default}
.ws #furnishCanvas:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.ws .furnish-chips{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0 2px}
.ws .furnish-chips button{border:1px solid var(--line);background:var(--white);
  border-radius:999px;padding:4px 10px;font:inherit;font-size:10.5px;color:var(--muted);
  cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.ws .furnish-chips button:hover{border-color:var(--accent);color:var(--ink)}
.ws .furnish-chips button.active{background:var(--accent);border-color:var(--accent);color:#fff}
.ws .furnish-chips button i{font-style:normal;font-size:9px;opacity:.7}

.ws .furnish-cards{display:grid;gap:5px;margin-top:9px;max-height:320px;overflow-y:auto;
  padding-right:3px}
.ws .furnish-cards button{display:block;width:100%;text-align:left;cursor:grab;
  border:1px solid var(--line);border-radius:10px;background:var(--white);padding:7px 10px;font:inherit}
.ws .furnish-cards button:hover{border-color:var(--accent)}
.ws .furnish-cards button.armed{border-color:var(--accent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent)}
.ws .furnish-cards button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ws .furnish-cards b{display:block;font-size:12px;font-weight:500;color:var(--ink);line-height:1.35}
.ws .furnish-cards span{display:block;font-size:10.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.ws .furnish-cards i{display:block;font-style:normal;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:2px}

.ws .furnish-claim{border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:9px;padding:9px 11px;background:var(--paper-2);display:grid;gap:3px}
.ws .furnish-claim b{font-size:13px;font-weight:500;color:var(--ink)}
.ws .furnish-claim span{font-size:11px;color:var(--ink);font-variant-numeric:tabular-nums}
.ws .furnish-claim em{font-style:normal;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-dark,var(--accent))}
.ws .furnish-claim em.exact{color:var(--ink)}
.ws .furnish-claim small{font-size:10.5px;line-height:1.5;color:var(--muted)}
.ws .furnish-claim a{font-size:10.5px;color:var(--accent-dark,var(--accent))}

.ws .furnish-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:11px}
.ws .furnish-actions button{flex:1 1 auto;border:1px solid var(--line);background:var(--white);
  color:var(--ink);border-radius:999px;padding:6px 11px;font:inherit;font-size:11px;cursor:pointer}
.ws .furnish-actions button:hover{border-color:var(--accent);color:var(--accent-dark,var(--accent))}
.ws .furnish-array{margin-top:9px;border-top:1px solid var(--line);padding-top:4px}

.ws .furnish-schedule{width:100%;border-collapse:collapse;margin-top:9px;font-size:11px}
.ws .furnish-schedule th,.ws .furnish-schedule td{text-align:left;padding:5px 6px 5px 0;
  border-bottom:1px solid var(--line);vertical-align:top;font-weight:400;color:var(--ink)}
.ws .furnish-schedule thead th{font-size:9px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted)}
.ws .furnish-schedule tbody th{font-weight:500}
.ws .furnish-schedule td:nth-child(2){font-variant-numeric:tabular-nums;width:2.5em}
.ws .furnish-schedule td:last-child{color:var(--muted)}
.ws .furnish-stage .build-canvas-wrap{background:var(--paper-2)}
.ws .furnish-stage .build-canvas-wrap canvas{cursor:default}
/* The zoom pill sat on top of the undo bar and hid half its labels. */
.ws .furnish-stage .ws-zoom{top:auto;bottom:54px}
/* A select with no flex basis collapses to the width of one character. */
.ws .ws-rail .build-field select{flex:1 1 100%;width:100%}
.ws .furnish-cards{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:7px 3px 7px 0}
.ws .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The walls a detector proposed: a proposal, styled as one. */
.ws .build-found{margin-top:10px;border:1px solid var(--line);border-left:2px solid var(--accent);
  border-radius:9px;padding:9px 11px;background:var(--paper-2)}
.ws .build-found .build-sub{margin-top:0}
.ws .build-found .build-note{margin:5px 0 0}
.ws .build-found .build-explain{margin-top:8px}
.ws .build-note.build-anchored{color:var(--ink);border-left:2px solid var(--accent);padding-left:8px}

/* Try a layout ------------------------------------------------------------
   Catalogue on the left, the floor in the middle, what you have selected on
   the right. Sized in three columns so the floor keeps the space: it is the
   thing being decided on, and the panels beside it are there to serve it. */
/* The row is pinned to the container, not grown to fit the tallest column.
   Left to size itself, the grid takes the height of the catalogue — forty
   cards — and the 3D canvas stretches with it: measured at 1536 x 10240, which
   renders the room as a sliver and asks the browser for forty megapixels. */
/* A definite height, not 100% of a parent that has none.
   Inside the workspace the lens sits in a container that grows to fit its
   contents, so `height:100%` resolves to auto, the grid row takes the height
   of the catalogue — forty cards — and the panel runs off the bottom of the
   screen. It has to be told how tall it is, and the only thing that knows is
   the window: the whole floor, the catalogue and the inspector are meant to be
   on screen together, which is the entire point of the arrangement. */
/* Four columns, two of which are usually nothing.
   The 3D property IS the product, so the interface frames it rather than
   squeezing it: a folded panel becomes a narrow rail and the canvas takes
   what it gave up. Nothing is made smaller to achieve that — what is not
   being used is put away. */
.lay{display:grid;grid-template-rows:minmax(0,1fr);
  grid-template-columns:302px 0 minmax(0,1fr) 0 330px;
  height:var(--lay-fit,clamp(560px,calc(100vh - 100px),1200px));
  background:var(--paper);color:var(--ink)}
/* Only a panel somebody folds or unfolds slides (fold() in layout-lens.mjs
   marks it). A change of view, or the first layout, lands in one frame: an
   animated grid moves the canvas on every frame of it, and the 3D view is
   redrawn a frame behind each time, which reads as the room lurching. */
.lay[data-folding]{transition:grid-template-columns .22s ease}
@media (prefers-reduced-motion:reduce){.lay[data-folding]{transition:none}}
.lay[data-library="shut"]{grid-template-columns:0 56px minmax(0,1fr) 0 330px}
.lay[data-inspect="shut"]{grid-template-columns:302px 0 minmax(0,1fr) 56px 0}
.lay[data-library="shut"][data-inspect="shut"]{
  grid-template-columns:0 56px minmax(0,1fr) 56px 0}
/* Every panel is pinned to its own column. A hidden grid item is taken OUT of
   the flow, so hiding a rail slid the canvas into the rail's column and the
   inspector into the canvas's — the whole room disappeared into nought pixels.
   Pinned, a column can be empty without moving anything beside it. */
.lay-catalogue{grid-column:1}
.lay-rail-left{grid-column:2}
.lay-stage{grid-column:3}
.lay-rail-right{grid-column:4}
.lay-inspect{grid-column:5}
.lay[data-library="shut"] .lay-catalogue,
.lay[data-inspect="shut"] .lay-inspect{display:none}
.lay .lay-rail{display:none}
.lay[data-library="shut"] .lay-rail-left,
.lay[data-inspect="shut"] .lay-rail-right{display:flex}

.lay-rail{flex-direction:column;align-items:center;gap:8px;padding:14px 6px;
  background:var(--surface);border-right:1px solid var(--line);overflow:hidden}
.lay-rail-right{border-right:0;border-left:1px solid var(--line)}
.lay-rail>div{display:flex;flex-direction:column;gap:6px;width:100%}
.lay-rail button[data-category]{width:100%;border:1px solid var(--line);background:var(--paper);
  border-radius:9px;padding:8px 0;font-size:11px;color:var(--ink)}
.lay-rail button[data-category].on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.lay-rail-chip{writing-mode:vertical-rl;font-size:11px;color:var(--muted);
  max-height:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lay-fold{border:1px solid var(--line);background:var(--paper);border-radius:8px;
  width:24px;height:24px;line-height:1;color:var(--muted);padding:0;flex:none}
.lay-fold:hover{border-color:var(--accent);color:var(--ink)}
.lay>*{min-height:0;min-width:0}
.lay button{cursor:pointer}

/* The library gets the height, because the things in it are what somebody is
   here to look at. A display heading two lines deep took a third of the panel
   and told nobody anything they did not already know. */
.lay-catalogue{padding:18px 18px 14px;border-right:1px solid var(--line);
  background:var(--surface);display:flex;flex-direction:column;gap:12px;overflow:hidden}
.lay-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.lay-title{font:400 22px/1 var(--serif);letter-spacing:-.02em;margin:0}
.lay-count{font-size:11px;color:var(--muted);white-space:nowrap}
.lay-find{position:relative;display:block}
.lay-find:before{content:'⌕';position:absolute;left:12px;top:4px;font-size:20px;color:var(--muted)}
.lay-find input{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--line);
  border-radius:24px;background:var(--paper);color:var(--ink);font-size:13px}
/* One row that scrolls, not three that wrap: wrapped chips push the shelves
   down the panel and take the room from the things they are filtering. */
.lay-chips{display:flex;gap:2px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;
  scroll-snap-type:x proximity;margin:0 -4px}
.lay-chips button{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:56px;
  border:0;border-radius:8px;background:none;padding:7px 4px 6px;font-size:11px;line-height:1.2;
  color:var(--muted);white-space:nowrap;scroll-snap-align:start;transition:background .15s,color .15s}
.lay-chips button svg{display:block;color:var(--ink);opacity:.7}
.lay-chips button:hover{background:var(--paper);color:var(--ink)}
.lay-chips button.on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
.lay-chips button.on svg{opacity:1}
.lay-chips button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Makers and sources are names: one quiet select, not a wall of pills. */
.lay-source{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.lay-source select{flex:1;min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink);font:inherit;font-size:12.5px;padding:6px 8px}
.lay-source.on select{border-color:var(--ink)}
/* Colour: one line of small round swatches under the categories. They are in the
   tools that slide away on scroll, so a row costs the cards nothing. */
.lay-colours{display:flex;align-items:center;gap:8px;padding:0 2px}
.lay-colours[hidden]{display:none}
.lay-colour{flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);padding:0;
  background:var(--swatch,transparent);cursor:pointer;box-shadow:0 1px 2px #221d1822;
  transition:transform .15s,box-shadow .15s,opacity .15s}
.lay-colour:hover{transform:scale(1.12)}
.lay-colour.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.lay-colour.off{opacity:.28;cursor:default}
.lay-colour.off:hover{transform:none}
@media (pointer:coarse){.lay-colours{gap:10px}.lay-colour{width:26px;height:26px}}

.lay-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow-y:auto;
  padding-right:4px;align-content:start;flex:1;min-height:0}
.lay-card{border:1px solid var(--line);background:var(--paper);border-radius:12px;
  padding:8px 8px 10px;display:flex;flex-direction:column;gap:4px;text-align:left;
  transition:border-color .16s,box-shadow .16s}
.lay-card:hover{border-color:var(--accent);box-shadow:0 4px 14px #221d1814}
/* The picture first and given real room. A thumbnail small enough to be a
   stamp makes a task chair and a lounge chair the same grey blob, and the
   library stops being something you can browse. */
.lay-card-shot{display:block;background:var(--surface);border-radius:8px;padding:4px}
.lay-card img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:contain}
/* Two lines, then stop. Supplier feeds write the whole spec into the name. */
.lay-card-name{font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.lay-card-size{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
/* A decor piece's size is typical, not measured: the card says so, in words. */
.lay-card-basis{font-size:10px;line-height:1.3;color:var(--muted)}
.lay-empty,.lay-omission{font-size:11px;color:var(--muted);margin:0}

.lay-stage{position:relative;min-width:0;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}
.lay-canvas{position:relative;flex:1;min-height:0}
.lay-canvas canvas{display:block;width:100%;height:100%}
/* Into or out of a walk with less motion asked for: the old view fading over the new one (layout-lens crossfade). */
.lay-fade{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:1;transition:opacity .24s ease}
.lay-notes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* The box drawn on the plan to pick everything inside it. */
.lay-marquee{position:absolute;pointer-events:none;z-index:2;border:1px solid var(--accent,#7e1523);
  background:#7e15231a;border-radius:6px}
.lay-marquee[hidden]{display:none}
.lay-note{position:absolute;transform:translate(-50%,-50%);background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:4px 10px;font-size:11px;white-space:nowrap;
  box-shadow:0 2px 10px #221d1814}
.lay-note-size{border-color:var(--red);color:var(--red)}
/* A door or window the scanner did not measure: a quiet tag, not a warning. */
/* (Added): a blue dot on the opening's bottom-right corner, the pill pinned beside it (Katie, 30 Oct). */
.lay-note.lay-note-added{display:inline-flex;align-items:center;gap:5px;transform:translate(-4px,-50%);font-size:10.5px;padding:1px 7px 1px 0;color:#6f645a;background:rgba(255,255,255,.92);box-shadow:none;pointer-events:auto}
.lay-added-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--plan-blue,#2f6db5);box-shadow:0 0 0 2px #fff}

.lay-bar{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;
  align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);
  border-radius:30px;padding:7px 12px;box-shadow:0 6px 24px #221d181f;
  /* Never wider than the room it sits in: a narrow one takes a second row
     (scrolling it would clip the finish and walls menus that open from it). */
  max-width:calc(100% - 24px);width:max-content;flex-wrap:wrap;justify-content:center}
.lay-view{display:flex;gap:4px}
.lay-view button,.lay-icon{border:0;background:transparent;border-radius:20px;padding:7px 14px;
  font-size:12px;color:var(--muted)}
.lay-view button.on{background:var(--ink);color:var(--surface)}
.lay-icon{color:var(--ink)}
.lay-icon:disabled{opacity:.35;cursor:default}
.lay-sep{width:1px;height:20px;background:var(--line)}

.lay-inspect{padding:26px 24px;border-left:1px solid var(--line);background:var(--surface);
  display:flex;flex-direction:column;gap:20px;overflow-y:auto}
.lay-share{min-height:40px;padding:10px 18px;border-radius:9px;background:var(--brand);color:var(--on-brand);
  border-color:var(--brand);font-size:12px;gap:8px}
.lay-share:hover{background:var(--brand-dark);border-color:var(--brand-dark)}

.lay-panel{border:1px solid var(--line);border-radius:14px;padding:22px;background:var(--paper)}
.lay-panel h3{font:400 26px/1.1 var(--serif);margin:0 0 14px;overflow-wrap:anywhere}
.lay-panel h4{font:500 12px/1 var(--sans);letter-spacing:.02em;margin:20px 0 12px;color:var(--ink)}
.lay-hero{display:block;width:100%;height:auto;aspect-ratio:11/7;object-fit:contain;margin-bottom:6px}
.lay-dim{display:grid;grid-template-columns:62px 1fr 28px;align-items:center;gap:10px;
  margin-bottom:9px;font-size:13px;color:var(--muted)}
.lay-dim input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);color:var(--ink);font-size:14px;text-align:left}
.lay-dim span{font-size:12px;color:var(--muted)}
.lay-source,.lay-claim{font-size:11px;color:var(--muted);margin:12px 0 0;line-height:1.6}
.lay-acts{display:flex;justify-content:space-between;gap:8px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line)}
.lay-acts button{flex:1;border:0;background:transparent;font-size:12px;color:var(--ink);
  padding:10px 4px;border-radius:9px}
.lay-acts button:hover{background:var(--surface)}
.lay-panel-empty p{font-size:13px;margin:0}

/* Narrower screens keep the room beside its panels, the panels slimmer; the
   stacked layout this had (rows) lost to the folded-panel column rules above,
   which are more specific, and left the room with an empty band 320 px deep
   under it. Only a phone stacks: library, room, then the inspector. */
@media(max-width:1100px){
  .lay{grid-template-columns:260px 0 minmax(0,1fr) 0 290px}
  .lay[data-library="shut"]{grid-template-columns:0 56px minmax(0,1fr) 0 290px}
  .lay[data-inspect="shut"]{grid-template-columns:260px 0 minmax(0,1fr) 56px 0}
  .lay[data-library="shut"][data-inspect="shut"]{grid-template-columns:0 56px minmax(0,1fr) 56px 0}
}
@media(max-width:760px){
  .lay,.lay[data-library],.lay[data-inspect],.lay[data-library][data-inspect]{
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(420px,70vh) auto;height:auto}
  .lay-catalogue,.lay-stage,.lay-inspect{grid-column:1}
  .lay-catalogue{grid-row:1}
  .lay-stage{grid-row:2}
  .lay-inspect{grid-row:3}
  /* A folded panel's rail lies across the top or the foot, its buttons in a row. */
  .lay-rail-left,.lay-rail-right{grid-column:1;flex-direction:row;flex-wrap:wrap;padding:8px 12px;border:0;border-bottom:1px solid var(--line)}
  .lay-rail-left{grid-row:1}
  .lay-rail-right{grid-row:3}
  .lay-rail>div{flex-direction:row;flex-wrap:wrap;width:auto}
  .lay-rail button[data-category]{width:auto}
  .lay-rail-chip{writing-mode:horizontal-tb}
  .lay-catalogue,.lay-inspect{border:0;border-bottom:1px solid var(--line);max-height:340px}
  .lay-cards{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* Finishes, and the room's own surfaces */
.lay-swatches{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.lay-swatch{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  background:var(--swatch,transparent);padding:0}
.lay-swatch.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.lay-floor-state{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:14px 0 10px}
.lay-floor-state strong{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.lay-floor-back{min-height:32px;padding:4px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}
.lay-floor-back:hover{border-color:var(--ink)}
.lay-swatch-none{position:relative;background:var(--surface)}
.lay-swatch-none:after{content:'';position:absolute;inset:6px;border-top:1px solid var(--muted);
  transform:rotate(-45deg)}
.lay-surfaces{border-top:1px solid var(--line);padding-top:12px;flex:none}
.lay-surfaces summary{font-size:12px;cursor:pointer;color:var(--ink);margin-bottom:8px}
.lay-surfaces h4{font:500 11px/1 var(--sans);letter-spacing:.02em;margin:12px 0 8px;color:var(--muted)}
.lay-acts-row{border:0;padding-top:0;margin-top:8px}
.lay-acts-row button{border:1px solid var(--line);border-radius:9px}
.lay-panel kbd{font:inherit;border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  background:var(--surface)}

/* Grouped toolbar: a menu rather than every option laid out at once */
.lay-menu{position:relative}
.lay-menu .lay-icon{display:inline-flex;align-items:center;gap:6px}
.lay-menu i{font-style:normal;font-size:9px;color:var(--muted)}
.lay-pop{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:5px;
  display:flex;flex-direction:column;gap:2px;min-width:132px;
  box-shadow:0 8px 28px #221d1826;z-index:5}
.lay-pop button{border:0;background:transparent;border-radius:8px;padding:8px 12px;
  font-size:12px;text-align:left;color:var(--ink);white-space:nowrap}
.lay-pop button:hover{background:var(--paper)}
.lay-pop button.on{background:var(--ink);color:var(--surface)}

/* Time of day: the view bar's sun menu (daylight-panel.mjs) */
.lay-menu .lay-icon.on{color:var(--accent)}
.lay .lay-pop.lay-sun{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:352px;max-width:calc(100vw - 24px);
  padding:14px 16px 12px;left:auto;right:-24px;transform:none;max-height:min(600px,calc(100vh - 330px));min-height:240px;overflow:auto;white-space:normal}
.lay-sun .lay-sun-head{display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:-14px;margin:-14px -16px 0;padding:12px 16px 8px;background:inherit;z-index:1}
.lay-sun .lay-sun-head b{font:600 13px/1.2 var(--sans)}
.lay-sun-block{display:flex;flex-direction:column;gap:6px}
.lay-sun-label{display:flex;align-items:baseline;justify-content:space-between;font:500 11px/1.2 var(--sans);letter-spacing:.02em;color:var(--muted)}
.lay-sun-label output{font:600 12px/1.2 var(--sans);color:var(--ink);letter-spacing:0}
.lay-sun input[type=range]{width:100%;accent-color:var(--accent);margin:2px 0}
.lay-sun-ticks{display:flex;justify-content:space-between;font:400 10px/1 var(--sans);color:var(--muted);margin-top:-2px}
.lay-sun .lay-sun-chips{display:flex;flex-wrap:wrap;gap:5px}
.workspace-layout .lay-pop.lay-sun .lay-sun-chips button,.workspace-layout .lay-pop.lay-sun .lay-sun-switch,.workspace-layout .lay-pop.lay-sun .lay-sun-clear{
  min-height:30px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;font:500 12px/1.2 var(--sans);text-align:center;white-space:nowrap}
.workspace-layout .lay-pop.lay-sun .lay-sun-switch{min-width:52px}
.workspace-layout .lay-pop.lay-sun .lay-sun-clear{min-height:26px;padding:2px 9px;font-size:11px}
.lay-sun select,.lay-sun input[type=date]{width:100%;min-height:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink);font:400 12.5px/1.2 var(--sans);padding:4px 8px}
.lay-sun-twin{flex-direction:row;gap:14px;align-items:flex-start}
.lay-sun-col{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.lay-sun-compass{flex:0 0 112px;align-items:center}
.lay-sun-compass .lay-sun-label{align-self:stretch}
.lay-sun-fact{margin:0;font:400 11.5px/1.35 var(--sans);color:var(--muted)}
.lay-sun-dial{width:96px;height:96px;border-radius:50%;cursor:grab;touch-action:none;outline-offset:2px}
.lay-sun-dial:active{cursor:grabbing}
.lay-sun-dial:focus-visible{outline:2px solid var(--accent)}
.lay-sun-dial-svg{width:100%;height:100%;display:block}
.lay-sun-dial .ring{fill:var(--paper);stroke:var(--line);stroke-width:1.5}
.lay-sun-dial .ticks line{stroke:var(--muted);stroke-width:1;opacity:.55}
.lay-sun-dial .room{fill:none;stroke:var(--muted);stroke-width:1.2;opacity:.6}
.lay-sun-dial .top{font:500 6px var(--sans);fill:var(--muted);opacity:.8}
.lay-sun-dial .arrow{fill:var(--accent)}
.lay-sun-dial .n{font:700 9px var(--sans);fill:var(--accent)}
.lay-sun-dial.unset .needle{opacity:.28}
.lay-sun-dial.unset .arrow{stroke:var(--muted);stroke-dasharray:3 2;fill:none}
.lay-sun-dial.unset .n{fill:var(--muted)}
.lay-sun-northrow{display:flex;align-items:center;gap:6px;font:500 11px/1.2 var(--sans)}
.lay-sun-northrow output{color:var(--ink)}
.lay-sun-assumed{margin:0;padding:7px 9px;border-radius:8px;background:#fbf0d9;color:#5b4410;font:500 12px/1.35 var(--sans)}
.lay-sun-assumed[hidden]{display:none}
.lay-sun-scene{margin:0;font:400 12px/1.4 var(--sans);color:var(--ink)}
.lay-sun-scene[hidden]{display:none}
.lay-sun-note{margin:0;font:400 11px/1.4 var(--sans);color:var(--muted)}
.lay-sun.is-off .lay-sun-block{opacity:.55}
.workspace-layout .lay-pop.lay-sun button.on{background:var(--menu-selected,var(--ink));color:#fff;border-color:transparent}
.lay[data-dark] .lay-pop.lay-sun{background:#2a0a0f;border-color:#4a1a22;color:#faf6f0}
.lay[data-dark] .lay-sun-label,.lay[data-dark] .lay-sun-ticks,.lay[data-dark] .lay-sun-fact,.lay[data-dark] .lay-sun-note{color:#dcc9c3}
.lay[data-dark] .lay-sun-label output,.lay[data-dark] .lay-sun-scene,.lay[data-dark] .lay-sun-northrow output{color:#faf6f0}
.lay[data-dark] .lay-sun select,.lay[data-dark] .lay-sun input[type=date]{background:#1e0609;border-color:#4a1a22;color:#faf6f0;color-scheme:dark}
.workspace-layout .lay[data-dark] .lay-pop.lay-sun button{color:#faf6f0;border-color:#4a1a22}
.workspace-layout .lay[data-dark] .lay-pop.lay-sun button:hover{background:#3c1219}
.workspace-layout .lay[data-dark] .lay-pop.lay-sun button.on{background:#faf6f0;color:#2a0a0f}
.lay[data-dark] .lay-sun-dial .ring{fill:#1e0609;stroke:#4a1a22}
.lay[data-dark] .lay-sun-dial .arrow{fill:#ffb78a}.lay[data-dark] .lay-sun-dial .n{fill:#ffb78a}
.lay[data-dark] .lay-sun-dial .ticks line,.lay[data-dark] .lay-sun-dial .room,.lay[data-dark] .lay-sun-dial .top{stroke:#dcc9c3;fill:none}
.lay[data-dark] .lay-sun-dial .top{fill:#dcc9c3;stroke:none}
.lay[data-dark] .lay-sun-assumed{background:#3a2f14;color:#f4dfa8}
.lay-render .lay-render-sun{display:block;flex-basis:100%;font-size:11.5px}

/* Progressive disclosure in the inspector */
.lay-more{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
.lay-more summary{font-size:11.5px;color:var(--muted);cursor:pointer}
.lay-more p{margin:8px 0 0}

/* Furnish: placement, measurement and the contextual controls ----------------
   Three placement states and the blue of a guide, used on the floor, in the
   labels and in the inspector alike, so a colour means one thing everywhere. */
.lay{--plan-blue:#2f6db5;--plan-tight:#b7790b;--plan-bad:#c2362b}
.lay-dragging,.lay-dragging *{cursor:grabbing!important}
.lay-hint{font-size:11px;color:var(--muted);margin:0;flex:none}
.lay-demo-note{font-size:11px;line-height:1.35;color:var(--muted);margin:0;padding:2px 4px 6px;flex:none}
.lay-demo-note[hidden]{display:none}
.lay-demo-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lay-card{touch-action:none;user-select:none}
.lay-card img{pointer-events:none}
.lay-card-size em{font-style:normal;color:var(--plan-blue);margin-left:4px}
.lay-replacing{font-size:12px;line-height:1.5;padding:10px 12px;border-radius:10px;
  background:var(--paper);border:1px solid var(--plan-blue);color:var(--ink)}
.lay-replacing button{border:0;background:transparent;color:var(--plan-blue);
  text-decoration:underline;padding:0;font-size:12px}

.lay-lines{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.lay-dim-line{stroke:var(--ink);stroke-width:1.2;opacity:.7}
.lay-dim-line.lay-tight{stroke:var(--plan-tight);opacity:1}
/* Live clearances while a piece is dragged: thin, so they never hide the piece. */
.lay-dim-line.lay-live-gap{stroke-width:1;opacity:.85}
.lay-note-gap{font-size:11px;padding:1px 5px}
.lay-guide,.lay-guide-gap,.lay-guide-size{stroke:var(--accent,#7e1523);stroke-width:1;opacity:.8;fill:none}
/* A pale halo under each, as under the selection's outline, so a guide reads on a dark floor as on a light one. */
.lay-guide-halo{stroke:#f6e9ea;stroke-width:3;opacity:.55;fill:none}
.lay-note-guide{border-color:var(--accent,#7e1523);color:var(--accent,#7e1523);font-size:10.5px;padding:0 5px}
/* The sill and head of a window, or the head of a door, written beside it while it is in hand: the selection's soft accent. */
.lay-note-sill{border-color:var(--accent,#7e1523);color:var(--accent,#7e1523);font-size:11px;padding:1px 6px;white-space:nowrap}
.lay-pin{stroke:var(--plan-blue);stroke-width:1.6;opacity:1}
.lay-live{stroke:var(--plan-blue);stroke-width:1.6;stroke-dasharray:4 3;opacity:1}
/* Where a measuring point lands: a ring on a corner, a dot on an edge or held
   plumb, a small hollow mark where it caught nothing and is exactly the click. */
.lay-snap{fill:var(--plan-blue);stroke:#fff;stroke-width:1.5}
.lay-snap-corner{fill:#fff;stroke:var(--plan-blue);stroke-width:2.5}
.lay-snap-square{fill:var(--plan-blue);stroke:#fff;stroke-width:2}
.lay-snap-surface{fill:none;stroke:var(--plan-blue);stroke-width:1.5}
.lay-note{font-variant-numeric:tabular-nums}
.lay-note-tight{border-color:var(--plan-tight);color:var(--plan-tight)}
.lay-note-invalid{border-color:var(--plan-bad);color:#fff;background:var(--plan-bad)}
.lay-note-snap,.lay-note-pin{border-color:var(--plan-blue);color:var(--plan-blue)}
.lay-note-angle{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:500}

/* The few actions that belong on the object itself, over the object. */
.lay-float{position:absolute;display:flex;flex-wrap:wrap;gap:2px;
  padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 6px 20px #221d1824;z-index:3}
.lay-float button{width:32px;height:32px;border:0;border-radius:8px;background:transparent;
  color:var(--ink);display:grid;place-items:center;padding:0}
.lay-float button:hover{background:var(--paper)}
.lay-float button:focus-visible{outline:2px solid var(--plan-blue);outline-offset:1px}
.lay-float svg{width:18px;height:18px}
.lay-float .lay-turn{cursor:grab;color:var(--plan-blue)}
.lay-float .lay-turn:active{cursor:grabbing}
.lay-float.is-locked button{opacity:.35;pointer-events:none}
.lay-float-lock{display:grid;place-items:center;width:28px;color:var(--muted)}
/* Align and distribute (P2 item 11): a button on the bar by a group opens the nine actions, and which line they use. */
.lay-float .lay-arrange-btn[hidden]{display:none}
.lay-float .lay-align-menu{width:292px;min-width:0;padding:6px 4px 4px;gap:6px}
.lay-float .lay-align-menu .lay-acts-icons{grid-template-columns:repeat(3,minmax(0,1fr))}
.lay-float .lay-align-menu .lay-arrange-to button{max-width:100%;white-space:normal}
.lay-float .lay-align-menu .lay-acts{margin:0;padding:0;border:0}
.lay-float .lay-align-menu .lay-acts button{width:auto;height:auto}
.lay-float .lay-align-menu .lay-acts-icons button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 2px 7px;text-align:center}
.lay-arrange-to{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:11.5px;margin:2px 0 8px;color:var(--muted)}
.lay-arrange-to span{margin-right:2px}
.lay-float .lay-arrange-to button,.lay-arrange-to button{width:auto;height:auto;border:1px solid var(--line);border-radius:999px;padding:3px 9px;
  font-size:11.5px;background:transparent;color:var(--ink);text-align:left;line-height:1.35}
.lay-arrange-to button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.lay-arrange button{font-size:11px}
.lay-panel-group .lay-arrange{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.lay-float-lock svg{width:16px;height:16px}

.lay-toast{position:absolute;left:50%;top:auto;bottom:86px;transform:translate(-50%,8px);max-width:min(560px,80%);
  padding:9px 16px;border-radius:20px;background:var(--ink);color:var(--surface);font-size:12.5px;
  line-height:1.4;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:6}
.lay-toast.on{opacity:1;transform:translate(-50%,0)}
.lay-toast{white-space:pre-line}
/* A message steps in front of the gesture hint, which waits until it has gone (both sit above the bar). The toast is
   over the hint (z 6 over 5) and the hint goes at once: fading for .6s over the same spot, it hid the message (7 Nov). */
.lay-stage:has(.lay-toast.on) .lay-hint{opacity:0;pointer-events:none;transition:none}
/* A new message while one is up: a small lift, so the change is seen and not read as the old sentence. */
.lay-toast.on.renew{animation:lay-toast-renew .32s cubic-bezier(.2,.7,.2,1)}
@keyframes lay-toast-renew{0%{transform:translate(-50%,6px) scale(.97);opacity:.55}100%{transform:translate(-50%,0) scale(1);opacity:1}}
/* How to move around: a small see-through chip, bottom left, that opens into
   the key on hover or keyboard focus and folds away again. */
.lay-keys{position:absolute;left:16px;bottom:22px;z-index:4;padding:6px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 72%,transparent);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:11.5px;color:var(--ink);opacity:.8;
  cursor:help;transition:opacity .15s,border-radius .15s,padding .15s}
.lay-keys[hidden]{display:none}
.lay-keys-head{display:flex;align-items:baseline;gap:6px}
.lay-keys-head b{font-weight:500;font-size:11.5px}
.lay-keys-head span{color:var(--muted);font-size:11px}
.lay-keys-head span::before{content:'· '}
.lay-keys ul{display:none;list-style:none;margin:8px 0 2px;padding:0;gap:5px;width:220px}
.lay-keys:hover,.lay-keys:focus-within,.lay-keys:focus{opacity:1;border-radius:12px;padding:10px 12px 8px;
  background:var(--surface);border-color:var(--line);box-shadow:0 6px 20px rgba(40,30,20,.08);outline:none}
.lay-keys:hover ul,.lay-keys:focus-within ul,.lay-keys:focus ul,.lay-keys.open ul{display:grid}
.lay-keys.open{opacity:1;border-radius:12px;padding:10px 12px 8px;background:var(--surface);border-color:var(--line);
  box-shadow:0 6px 20px rgba(40,30,20,.08)}
.lay-keys-head .lay-keys-close{margin-left:auto;border:0;background:transparent;color:var(--muted);
  font-size:15px;line-height:1;padding:0 2px;cursor:pointer}
.lay-keys-head .lay-keys-close:hover{color:var(--ink)}
.lay-keys{max-height:calc(100% - 140px);overflow:auto}
.lay-keys li{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:baseline;line-height:1.35}
.lay-key{display:inline-block;min-width:74px;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  font-size:10.5px;font-weight:500;white-space:nowrap;text-align:center}
.lay-keys li span:last-child{color:var(--muted)}
@media (max-width:760px){.lay-keys{display:none}}
.lay-icon-keys{display:inline-flex;align-items:center;justify-content:center}
.lay-icon-keys svg{width:18px;height:18px}
.lay-sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;width:min(640px,calc(100% - 32px));
  max-height:calc(100% - 32px);overflow:auto;padding:16px 18px 18px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);color:var(--ink);box-shadow:0 18px 48px rgba(0,0,0,.14);font-size:12px}
.lay-sheet[hidden]{display:none}
.lay-sheet-head{display:flex;align-items:center;margin-bottom:12px}
.lay-sheet-head b{font-weight:500;font-size:14px}
.lay-sheet-head .lay-keys-close{margin-left:auto;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.lay-sheet-head .lay-keys-close:hover{color:var(--ink)}
.lay-sheet-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 22px}
.lay-sheet h4{margin:0 0 6px;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.lay-sheet ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.lay-sheet li{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:baseline;line-height:1.35}
.lay-sheet li span:last-child{color:var(--muted)}
.lay-toast[data-tone="bad"]{background:var(--plan-bad)}
.lay-eye{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:4;white-space:nowrap;
  display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:22px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 20px #221d1824;font-size:12.5px}
.lay-eye button{border:0;border-radius:16px;background:var(--ink);color:var(--surface);
  padding:7px 14px;font-size:12px}
.lay-eye[hidden],.lay-float[hidden]{display:none}
.lay-icon.on{background:var(--ink);color:var(--surface)}

/* The inspector: what you can change about what you selected. */
.lay-panel h4 span{font-weight:400;color:var(--muted);margin-left:6px}
.lay-state{margin:0 0 4px;font-size:12px;line-height:1.5;padding:9px 12px;border-radius:10px;
  display:flex;flex-direction:column;gap:2px}
.lay-state b{font-weight:500}
.lay-state[data-state="valid"]{color:var(--green);background:transparent;padding:0;display:block}
.lay-state[data-state="valid"]:before{content:'';display:inline-block;width:7px;height:7px;
  border-radius:50%;background:currentColor;margin-right:7px;vertical-align:1px}
.lay-state[data-state="tight"]{background:#b7790b14;color:var(--plan-tight);border:1px solid #b7790b55}
.lay-state[data-state="invalid"]{background:#c2362b12;color:var(--plan-bad);border:1px solid #c2362b55}
.lay-options{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.lay-options button{border:1px solid var(--line);background:var(--surface);border-radius:18px;
  padding:6px 11px;font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}
.lay-options button:hover:not(:disabled){border-color:var(--plan-blue)}
.lay-options button.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.lay-option-fact{font-size:13px;color:var(--ink);margin:14px 0 4px}
.lay-option-fact span{font-size:11px;color:var(--muted);margin-right:6px}
.lay-elsewhere{font-size:12px;line-height:1.5;color:var(--muted)}
.lay-option-fact a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.lay-unsold{opacity:.38}
.lay-sku{font-size:12px;line-height:1.5;color:var(--muted);margin:2px 0 4px}
.lay-sku b{color:var(--ink);font-weight:500}
.lay-options button:disabled{opacity:.4;cursor:default}
.lay-angles{gap:4px}
.lay-angles button{padding:5px 7px;font-size:11px}
.lay-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:10px}
.lay-trio label,.lay-single{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted);
  position:relative}
.lay-trio input,.lay-single input{width:100%;padding:9px 22px 9px 9px;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);color:var(--ink);font-size:13px;
  font-variant-numeric:tabular-nums}
.lay-trio input:disabled,.lay-single input:disabled{opacity:.5}
.lay-trio span,.lay-single span{position:absolute;right:9px;bottom:10px;font-size:11px}
.lay-single{max-width:140px}
.lay-acts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.lay-acts-grid button{border:1px solid var(--line);border-radius:9px;padding:9px 4px}
.lay-acts-grid button:disabled{opacity:.4;cursor:default}
.lay-acts-grid button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.lay-wide{width:100%;margin-top:12px;border:1px solid var(--plan-blue);background:transparent;
  color:var(--plan-blue);border-radius:9px;padding:10px;font-size:12.5px}
.lay-wide:hover{background:#2f6db510}
.lay-facts{font-size:12.5px;color:var(--muted);margin:-6px 0 14px;line-height:1.5}
.lay-figures{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:10px 22px;margin:0 0 6px}
.lay-figures div{display:flex;flex-direction:column;gap:3px}
.lay-figures dt{font-size:11px;color:var(--muted);white-space:nowrap}
.lay-figures dd{margin:0;font:400 17px/1.1 var(--serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.lay-issues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lay-issues button[data-pick]{width:100%;text-align:left;border:1px solid var(--line);border-radius:9px;
  background:var(--surface);padding:8px 10px;display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--ink)}
.lay-issues button[data-state="invalid"] span{color:var(--plan-bad)}
.lay-issues button[data-state="tight"] span{color:var(--plan-tight)}
.lay-issues button b{font-weight:500}
/* In this room: every piece on the floor by name, above the panel. Compact:
   one line a row, the list scrolls rather than pushing the panel down. */
.lay-room{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:2px 6px}
.lay-room summary{cursor:pointer;font:500 12px/1 var(--sans);padding:10px 6px;color:var(--ink);
  display:flex;justify-content:space-between;list-style:none}
.lay-room summary::-webkit-details-marker{display:none}
.lay-room summary span{font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.lay-room ul{list-style:none;margin:0 0 4px;padding:0;max-height:176px;overflow-y:auto;
  display:flex;flex-direction:column;gap:1px}
.lay-room li button{width:100%;min-height:28px;text-align:left;border:0;background:transparent;
  border-radius:7px;padding:5px 8px;display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;font-size:12px;color:var(--ink)}
.lay-room li button b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lay-room li button span{font-size:11px;color:var(--muted);white-space:nowrap}
.lay-room li button:hover,.lay-room li button:focus-visible{background:var(--surface)}
.lay-room li button{user-select:none;-webkit-user-select:none}
/* A picked piece is the app's accent everywhere: its outline in the room, its row in the list, the box that picks it. */
.lay-room li button.on{background:var(--accent-tint,#f6e9ea);box-shadow:inset 0 0 0 1px var(--accent,#7e1523)}
.lay-added{display:inline-block;margin-right:6px;padding:2px 7px;border-radius:999px;font:500 10px/1.3 var(--sans);
  font-style:normal;letter-spacing:.02em;white-space:nowrap;color:var(--accent,#7e1523);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#7e1523) 45%,transparent)}
.lay-panel h3 .lay-added{margin:0 0 0 10px;vertical-align:middle;position:relative;top:-2px}
.lay-added:last-child{margin-right:0}
.lay-pin-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;
  font-variant-numeric:tabular-nums}
.lay-pin-row button{border:0;background:transparent;color:var(--muted);font-size:11.5px;text-decoration:underline}
@media (prefers-reduced-motion: reduce){.lay-toast{transition:none}.lay-toast.on.renew{animation:none}}

/* The building, pulled apart ------------------------------------------------
   The floor selector sits top left, over the model: Building, then every
   floor top down, the way a section reads. */
.lay-levels{position:absolute;left:16px;top:16px;z-index:3;display:flex;flex-direction:column;
  align-items:flex-start;gap:8px}
.lay-levels[hidden]{display:none}
.lay-levels .lay-view{flex-direction:column;align-items:stretch;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;padding:5px;box-shadow:0 6px 20px #221d181a}
.lay-levels .lay-view button{text-align:left;border-radius:11px;padding:7px 14px;white-space:nowrap}
.lay-levels .lay-view button:first-child{margin-bottom:3px}
.lay-levels .lay-view button:hover:not(.on){background:var(--paper);color:var(--ink)}
.lay-below{border:1px solid var(--line);background:var(--surface);border-radius:14px;
  padding:6px 12px;font-size:11.5px;color:var(--ink);box-shadow:0 4px 14px #221d1814}
.lay-below[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.lay-floors{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.lay-floors button{width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);padding:10px 12px;display:flex;flex-direction:column;gap:3px;color:var(--ink)}
.lay-floors button b{font-weight:500;font-size:13px}
.lay-floors button span{font-size:11.5px;color:var(--muted)}
.lay-floors button:hover,.lay-floors button.on{border-color:var(--plan-blue);box-shadow:0 0 0 1px var(--plan-blue)}

/* The inspector, trimmed: three actions, the rest under More. */
.lay-acts-icons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.lay-panel-group .lay-acts-icons{grid-template-columns:repeat(3,minmax(0,1fr))}
.lay-acts-icons button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px 8px;
  border:1px solid transparent;border-radius:10px;font-size:10.5px;line-height:1.1;color:var(--ink)}
.lay-acts-icons button:hover:not(:disabled){background:var(--surface);border-color:var(--line)}
.lay-acts-icons svg{width:20px;height:20px}
.lay-acts-icons button:disabled{opacity:.35;cursor:default}
.lay-acts-icons button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.lay-acts-icons .lay-act-danger{color:var(--red)}
.lay-custom{margin-top:2px}
.lay-custom summary{font-size:11.5px;color:var(--muted);cursor:pointer;margin-bottom:8px}
.lay-clear{max-width:none;margin-top:10px}
.lay-clear input{max-width:140px}
.lay-clear span{left:112px;right:auto}
.lay-link{border:0;background:transparent;padding:0;margin-top:12px;font-size:12px;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px}
.lay-link:disabled{opacity:.4;cursor:default}
.lay-hero{object-fit:contain;aspect-ratio:5/4}

/* The lens's part of the top bar: undo and redo, in front of Save and Share. */
.lay-top{display:flex;align-items:center;gap:6px;flex-shrink:0}
.lay-top-btn{display:inline-grid;place-items:center;width:34px;height:34px;border:0;border-radius:10px;
  background:transparent;color:var(--ink)}
.lay-top-btn:hover:not(:disabled){background:#e9e3da}
.lay-top-btn:disabled{opacity:.3;cursor:default}
.lay-top svg{width:18px;height:18px}
.lay-top-sep{width:1px;height:20px;background:var(--line);margin:0 6px}
.lay-inspect-head{display:flex;justify-content:flex-start}

.lay-stage:focus{outline:none}
.lay-stage:focus-visible{outline:2px solid var(--plan-blue);outline-offset:-2px}

/* Quarter turns, under the turn handle. */
.lay-turn-menu{flex-basis:100%;display:flex;flex-direction:column;gap:2px;padding-top:4px;margin-top:2px;
  border-top:1px solid var(--line)}
.lay-turn-menu[hidden]{display:none}
.lay-float .lay-turn-menu button{width:auto;height:auto;display:block;text-align:left;padding:7px 10px;
  font-size:12px;border-radius:8px;white-space:nowrap}
.lay-note{opacity:.94}

.lay-menu .lay-icon{white-space:nowrap}

/* Finishes: tabs by material, textured round swatches, names on hover. */
.lay-finish-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px}
.lay-finish-tabs button{border:1px solid var(--line);background:transparent;border-radius:14px;padding:4px 10px;
  font-size:11px;color:var(--muted)}
.lay-format-toggle{display:inline-flex;gap:0;margin:10px 0 2px;border:1px solid var(--line);border-radius:14px;padding:2px}
.lay-format-toggle button{border:0;background:transparent;border-radius:12px;padding:4px 12px;font:inherit;font-size:12px;color:inherit;cursor:pointer}
.lay-format-toggle button.on{background:var(--ink);color:var(--surface)}
.lay-finish-tabs button.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.lay-swatches{gap:8px}
.lay-swatch{width:32px;height:32px;position:relative;background:var(--swatch-img,none) center/cover,var(--swatch,transparent);
  box-shadow:0 1px 2px #221d1822}
/* A tinted scan (carpet, plaster): its light and shade, in the finish's colour. */
.lay-swatch[data-tinted]{background-blend-mode:multiply}
.lay-swatch:hover{transform:scale(1.08)}
.lay-swatch[data-label]:hover::after,.lay-swatch[data-label]:focus-visible::after{content:attr(data-label);position:absolute;
  left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:var(--surface);
  font-size:11px;line-height:1.3;padding:4px 8px;border-radius:6px;pointer-events:none;z-index:6}
.lay-custom-colour{display:flex;align-items:center;gap:8px;margin:4px 0 6px;font-size:11.5px;color:var(--muted)}
.lay-custom-colour label{display:flex;align-items:center;gap:6px}
.lay-custom-colour input[type=color]{width:28px;height:28px;border:1px solid var(--line);border-radius:50%;padding:0;
  background:transparent;cursor:pointer}
.lay-custom-colour input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.lay-custom-colour input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.lay-custom-colour select{border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:11.5px;padding:3px 6px}

/* The Space tab: the same view as Furnish, without the library, with the
   Space panel where the inspector goes. */
.lay[data-lens="space"]{grid-template-columns:0 0 minmax(0,1fr) 0 360px}
.lay[data-lens="space"][data-inspect="shut"]{grid-template-columns:0 0 minmax(0,1fr) 56px 0}
.lay[data-lens="space"] .lay-catalogue,.lay[data-lens="space"] .lay-rail-left{display:none}
.lay[data-lens="space"] .lay-inspect{gap:12px}
.lay[data-lens="space"] .ws-rail{border:0;border-radius:0;padding:0;background:none;box-shadow:none;
  max-height:none;overflow:visible}
/* Modify's Show deleted walls, or a version viewed there: what is deleted is a dashed sky blue, nothing like the picked wall's plan blue. */
.lay{--ghost-blue:#0ea5e9}
.lay-ghost{fill:#0ea5e91f;stroke:var(--ghost-blue);stroke-width:1.8;stroke-dasharray:7 5;stroke-linejoin:round}
.lay-ghost.on{fill:#0ea5e947;stroke-width:3;stroke-dasharray:none}
.lay-ghost-area{fill:#0ea5e90d}
.lay-ghost-flat{stroke-width:4;stroke-dasharray:9 6}
.lay-ghost-flat.on{stroke-width:6}
.lay-ghost-changed{stroke:#7e1523;stroke-width:3;stroke-linecap:round}
.lay-note.lay-note-ghost{background:var(--ghost-blue);border-color:var(--ghost-blue);color:#04283d;font-weight:600;min-width:26px;text-align:center}
.lay-note.lay-note-ghost.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ghost-blue)}
.lay-note.lay-note-changed{background:#fff;border-color:#7e1523;color:#7e1523;font-weight:500}
.lay-note-wall{min-width:26px;text-align:center;font-weight:500;border-color:var(--ink);color:var(--ink)}
.lay-note-wall.on{background:var(--plan-blue);border-color:var(--plan-blue);color:#fff}
.lay-note-dim{color:var(--muted)}
/* A hole through the floor, named: STAIRS, LIFT. */
.lay-note-void{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:600;font-size:10.5px;letter-spacing:.1em;pointer-events:none}
@media(max-width:1080px){.lay[data-lens="space"]{grid-template-columns:0 0 minmax(0,1fr) 0 300px}}
.ws .ws-limits summary{cursor:pointer;font-size:12px;color:var(--ink)}
.ws .ws-limits details[open] summary{margin-bottom:8px}

/* ---- the Space panel, in Furnish's inspector language ----------------------
   Scoped to the shared 3D view, so every rule here outranks the older
   `.ws …` panel styles it replaces without touching them. */
.lay[data-lens="space"] .lay-space-rail{display:flex;flex-direction:column;gap:14px}
.lay[data-lens="space"] .lay-space-rail .lay-panel>h4:first-child{margin-top:0}
.lay[data-lens="space"] .lay-space-rail .lay-panel h4 span{font-weight:400;color:var(--muted);margin-left:6px}
/* Each figure as wide as it reads: in equal thirds of a narrow panel, "229.45 m²" ran into the height beside it. */
.lay[data-lens="space"] .lay-space-rail .lay-figures{grid-template-columns:repeat(3,auto);justify-content:start;column-gap:22px;row-gap:12px}
.lay[data-lens="space"] .lay-space-rail .lay-chips{flex-wrap:wrap;overflow:visible}
.lay[data-lens="space"] .lay-space-rail .lay-chips button.active{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* The quantities: one big figure, then the rows a trade reads. */
.lay[data-lens="space"] .select-summary:empty{display:none}
.lay[data-lens="space"] .select-summary{margin-top:4px}
.lay[data-lens="space"] .quantity-total{display:flex;flex-direction:column;gap:4px;margin:0 0 14px;
  padding:0;border:0;background:none}
.lay[data-lens="space"] .quantity-total span{font-size:11px;color:var(--muted);letter-spacing:0;text-transform:none}
.lay[data-lens="space"] .quantity-total strong{font:400 34px/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.lay[data-lens="space"] .select-summary .ws-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}
.lay[data-lens="space"] .select-summary .ws-chip{display:flex;flex-direction:column-reverse;gap:3px;padding:0;
  border:0;background:none;box-shadow:none;min-height:0}
.lay[data-lens="space"] .select-summary .ws-chip b{font:400 17px/1.1 var(--serif);font-variant-numeric:tabular-nums}
.lay[data-lens="space"] .select-summary .ws-chip span{font-size:11px;color:var(--muted);letter-spacing:0;text-transform:none}
.lay[data-lens="space"] .selected-list{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;max-height:220px;overflow:auto}
.lay[data-lens="space"] .selected-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:12.5px}
.lay[data-lens="space"] .selected-row b{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lay[data-lens="space"] .selected-row>span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.lay[data-lens="space"] .selected-chip{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;
  border-radius:11px;background:var(--plan-blue);color:#fff;font-size:11px;font-weight:500}
.lay[data-lens="space"] .quantity-breakdown{margin:0 0 10px;padding:0;border:0;background:none}
.lay[data-lens="space"] .surface-line{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-top:1px solid var(--line);font-size:12.5px}
.lay[data-lens="space"] .surface-line b{font-weight:400;color:var(--muted)}
.lay[data-lens="space"] .surface-line span{font-variant-numeric:tabular-nums;color:var(--ink)}
.lay[data-lens="space"] .quantity-breakdown .surface-line:last-child span{font-weight:500}

/* Quotes: Furnish's outlined buttons. */
.lay[data-lens="space"] .lay-quote h4{margin-top:18px}
.lay[data-lens="space"] .ws-quote-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}
.lay[data-lens="space"] .ws-quote-actions button{border:1px solid var(--line);border-radius:9px;background:var(--surface);
  padding:9px 4px;font-size:12px;color:var(--ink)}
.lay[data-lens="space"] .ws-quote-actions button:hover{border-color:var(--ink)}

/* Walls and captures: Furnish's list rows. Written against the whole row, so
   they outrank the older panel's own row rules rather than tie with them. */
.lay[data-lens="space"] .lay-space-rail .surface-picker{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;margin:0}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;border:1px solid var(--line);border-radius:9px;
  background:var(--surface)}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row:hover{border-color:var(--ink);background:var(--surface)}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row.active{border-color:var(--plan-blue);background:var(--surface);box-shadow:inset 0 0 0 1px var(--plan-blue)}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row .wall-pick{grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:8px 8px 8px 10px;min-height:40px;
  font-size:12.5px;color:var(--ink)}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row .wall-key{display:inline-grid;place-items:center;min-width:24px;width:auto;height:22px;padding:0 6px;border-radius:11px;
  border:1px solid var(--ink);background:none;color:var(--ink);font-size:11px;font-weight:500}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row.active .wall-key{background:var(--plan-blue);border-color:var(--plan-blue);color:#fff}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row .wall-picker-name{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row .wall-picker-area{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:0}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row .wall-exposure{margin:0 6px 0 0;min-height:0;padding:4px 10px;border:1px solid var(--line);border-radius:20px;
  background:var(--paper);font-size:10.5px;letter-spacing:0;text-transform:none;color:var(--muted)}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row .wall-exposure:hover{border-color:var(--ink);background:var(--paper)}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row .wall-exposure.internal,.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row .wall-exposure.external{color:var(--ink);border-color:var(--ink)}
.lay[data-lens="space"] .lay-space-rail .lay-panel h3{font:400 26px/1.1 var(--serif);margin:0 0 10px;letter-spacing:-.01em}
.lay[data-lens="space"] .lay-space-rail p.lay-facts{font-size:12.5px;margin:0 0 14px}
.lay[data-lens="space"] .ws-capture-picker{display:flex;flex-direction:column;gap:6px}
.lay[data-lens="space"] .ws-capture-picker button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;
  text-align:left;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);box-shadow:none}
.lay[data-lens="space"] .ws-capture-picker button b{font-weight:500;font-size:12.5px;color:var(--ink)}
.lay[data-lens="space"] .ws-capture-picker button span{font-size:11px;color:var(--muted)}
.lay[data-lens="space"] .ws-capture-picker button.active{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--surface)}
.lay[data-lens="space"] .ws-limits{margin:10px 0 0;padding:10px 0 0;border:0;border-top:1px solid var(--line);background:none;
  font-size:11.5px;color:var(--muted)}
.lay[data-lens="space"] .ws-limits summary{font-size:11.5px;color:var(--muted)}
.lay[data-lens="space"] .ws-limits p{font-size:11px;line-height:1.55;margin:8px 0 0}
/* Air conditioning: the volume in the quotes' own form, each floor on the building, what it leaves out. */
.ws-volume .ws-volume-floors{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px;font-size:11.5px;color:var(--muted)}
.ws-volume .ws-volume-floors li{display:flex;justify-content:space-between;gap:8px;font-variant-numeric:tabular-nums}
.ws-volume .ws-volume-floors li span:first-child{color:var(--ink)}
.ws-volume details{margin-top:8px;font-size:11.5px;color:var(--muted)}
.ws-volume summary{cursor:pointer}
.ws-volume details p{margin:6px 0 0;font-size:11px;line-height:1.5}
/* The capture's checks: counted in one line, the ones for a person listed by floor. */
.ws-checks{margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.ws-checks summary{cursor:pointer;font-size:11.5px;color:var(--muted)}
.ws-checks .ws-check-floor{margin:12px 0 4px;font-size:11px;font-weight:600;color:var(--ink);letter-spacing:.02em}
/* The windows' type, answered from the photos: two selects under one line. */
.ws-windows p{margin:8px 0 0;font-size:11px;line-height:1.5}
.ws-windows label{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:8px;margin:8px 0 0;font-size:11.5px;color:var(--ink)}
.ws-windows select{font:inherit;font-size:11.5px;padding:5px 6px;border:1px solid var(--line);border-radius:8px;background:var(--paper,#fff);color:var(--ink)}
.ws-windows .ws-window-detail{color:var(--muted)}
.ws-windows .ws-window-bars{margin:8px 0 0;font-size:11px;color:var(--muted)}
.ws-windows .ws-window-bars summary{cursor:pointer}
.ws-windows .ws-window-bars ul{margin:6px 0 0;padding-left:16px;display:grid;gap:4px;line-height:1.45}
.ws-windows .ws-window-bars b{font-weight:500;color:var(--ink)}
.ws-check{display:grid;grid-template-columns:auto 1fr;column-gap:8px;row-gap:2px;padding:6px 0;border-bottom:1px solid var(--line)}
.ws-check b{font-weight:500;font-size:11.5px;color:var(--ink)}
.ws-check span:not(.ws-check-pill){grid-column:2;font-size:11px;line-height:1.45}
.ws-check-pill{grid-row:span 3;align-self:start;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 6px;border-radius:999px;border:1px solid currentColor}
.ws-check-fail .ws-check-pill{color:var(--plan-bad,#b3261e)}
.ws-check-review .ws-check-pill{color:var(--plan-tight,#a0660a)}
.ws-check-unknown .ws-check-pill{color:var(--muted)}
.lay[data-lens="space"] .lay-space-rail .select-summary .quantity-total{align-items:flex-start;text-align:left;
  border:0;padding:0;background:none}
.lay[data-lens="space"] .lay-space-rail .select-summary{border:0;padding:0;background:none}

/* Services and Fit-out panels beside the shared view. */
.lay[data-lens="space"] .lay-space-rail .service-row{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-top:1px solid var(--line);font-size:12.5px;line-height:1.45;grid-template-columns:none}
.lay[data-lens="space"] .lay-space-rail .service-row b{flex:0 0 38%;font-weight:400;color:var(--muted);font-size:12px;
  letter-spacing:0;text-transform:none}
.lay[data-lens="space"] .lay-space-rail .service-row span{text-align:right;color:var(--ink)}
.lay[data-lens="space"] .lay-space-rail .ws-legend button,
.lay[data-lens="space"] .lay-space-rail .mini-controls button{display:inline-flex;align-items:center;gap:6px;flex:none;
  border:1px solid var(--line);background:var(--paper);border-radius:20px;padding:7px 12px;font-size:12px;
  color:var(--ink);box-shadow:none}
.lay[data-lens="space"] .lay-space-rail .ws-legend button.active,
.lay[data-lens="space"] .lay-space-rail .mini-controls button.active{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.lay[data-lens="space"] .lay-space-rail .ws-legend button i,
.lay[data-lens="space"] .lay-space-rail .mini-controls button i{width:8px;height:8px;border-radius:50%;background:var(--dot,var(--muted))}
.lay[data-lens="space"] .lay-space-rail .ws-legend-count{font-size:10px;color:inherit;opacity:.7}
.lay[data-lens="space"] .lay-space-rail .ws-absent{font-size:12.5px;color:var(--muted);line-height:1.55}
.lay[data-lens="space"] .lay-space-rail .ws-drop{display:grid;gap:4px;margin-top:10px;padding:14px;border:1px dashed var(--line);
  border-radius:12px;background:var(--surface);cursor:pointer;font-size:12px;color:var(--muted)}
.lay[data-lens="space"] .lay-space-rail .ws-drop b{font-weight:500;color:var(--ink);font-size:12.5px}
.lay[data-lens="space"] .lay-space-rail .ws-drop:hover,.lay[data-lens="space"] .lay-space-rail .ws-drop.over{border-color:var(--ink)}
.lay[data-lens="space"] .lay-space-rail>.lay-source{margin:0 4px}
.lay-note-mark{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:500}

/* Wall rows: the letter, a name somebody may give it, the area, the tag —
   one line, nothing clipped. */
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row.wall-row-named{display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px 6px 6px 8px;
  min-height:0;overflow:visible;cursor:pointer}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-key{cursor:pointer;flex:none}
.lay[data-lens="space"] .lay-space-rail .wall-name-input{min-width:0;width:100%;border:1px solid transparent;border-radius:7px;
  background:transparent;padding:5px 7px;font:inherit;font-size:12.5px;color:var(--ink)}
.lay[data-lens="space"] .lay-space-rail .wall-name-input::placeholder{color:var(--muted);opacity:.55}
.lay[data-lens="space"] .lay-space-rail .wall-name-input:hover{border-color:var(--line)}
.lay[data-lens="space"] .lay-space-rail .wall-name-input:focus{border-color:var(--ink);background:var(--paper);outline:none}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-picker-area{white-space:nowrap}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row-named .wall-exposure{margin:0;padding:4px 9px;white-space:nowrap}
.lay-wall-name{width:100%;margin:-4px 0 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);
  padding:8px 10px;font:inherit;font-size:13px;color:var(--ink)}
.lay-wall-name::placeholder{color:var(--muted);opacity:.55}

/* The view group: 2D or 3D, stacked floors, light or dark — on every tab. */
.lay-viewbar{position:absolute;right:16px;top:16px;z-index:3;display:flex;align-items:center;gap:6px;
  padding:5px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 6px 24px #221d181a}
.lay-viewbar .lay-view-switch{display:flex;gap:2px}
.lay-viewbar .lay-view-switch button{border:0;border-radius:10px;padding:7px 14px;font-size:12.5px;font-weight:500;
  background:transparent;color:var(--muted)}
.lay-viewbar .lay-view-switch button.on{background:var(--ink);color:var(--surface)}
.lay-viewbar-btn{border:0;border-radius:10px;padding:7px 12px;font-size:12.5px;background:transparent;color:var(--ink)}
.lay-viewbar-btn[hidden]{display:none}
.lay-viewbar-btn.on{background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.lay-viewbar-btn:hover{background:var(--paper)}
.lay-theme{font-size:15px;line-height:1;padding:6px 10px}
/* Zoom: small − / readout / + / Fit in the corner, and on the plan a scale bar over it. The readout is against Fit (Fit is 100%). */
.lay-zoom{position:absolute;right:16px;top:76px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.lay-zoom>*{pointer-events:auto}
.lay-zoom-row{display:flex;align-items:center;gap:2px;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 6px 24px #221d181a}
.lay-zoom-row button{border:0;border-radius:10px;min-width:32px;height:32px;padding:0 8px;font-size:16px;line-height:1;background:transparent;color:var(--ink);cursor:pointer}
.lay-zoom-row button:hover{background:var(--paper)}
.lay-zoom-row button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.lay-zoom-row .lay-zoom-level{min-width:52px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.lay-zoom-row .lay-zoom-fit svg{width:16px;height:16px;display:block;margin:auto}
.lay-scale{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none}
.lay-scale[hidden]{display:none}
.lay-scale i{display:block;height:6px;border:1.5px solid var(--ink);border-top:0;opacity:.75}
.lay[data-dark] .lay-zoom-row{background:#fff;border-color:#E7DCD5}
.lay[data-dark] .lay-zoom-row button{color:#36252A}
.lay[data-dark] .lay-scale{color:#dcc9c3}
.lay[data-dark] .lay-scale i{border-color:#faf6f0}
@media (max-width:760px){.lay-zoom{top:112px;right:10px}}
/* Dark: the stage and what floats over it go deep navy with the model. */
.lay[data-dark] .lay-stage{background:#1e0609}
.lay[data-dark] .lay-viewbar,.lay[data-dark] .lay-bar,.lay[data-dark] .lay-levels .lay-view{background:#2a0a0f;border-color:#4a1a22;color:#faf6f0}
.lay[data-dark] .lay-bar .lay-icon,.lay[data-dark] .lay-viewbar-btn{color:#faf6f0}
.lay[data-dark] .lay-viewbar .lay-view-switch button.on{background:#faf6f0;color:#2a0a0f}
.lay[data-dark] .lay-viewbar-btn.on,.lay[data-dark] .lay-viewbar-btn:hover{background:#3c1219}
.lay[data-dark] .lay-note{background:#2a0a0f;border-color:#4a1a22;color:#faf6f0}
.lay[data-dark] .lay-dim-line{stroke:#faf6f0}
.lay[data-lens="space"] .lay-space-rail .surface-picker>.wall-row{flex:none}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row-named .wall-key{display:inline-grid;place-items:center;
  width:auto;min-width:26px;height:24px;min-height:0;padding:0 7px;grid-template-columns:none;border-radius:12px;
  border:1px solid var(--ink);background:none;color:var(--ink);font-size:11px;font-weight:500;white-space:nowrap}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row-named.active .wall-key{background:var(--plan-blue);border-color:var(--plan-blue);color:#fff}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row-named .wall-exposure{display:inline-flex;grid-template-columns:none;
  min-height:0;height:auto}
.lay[data-lens="space"] .lay-space-rail .wall-floor{flex:none;margin:8px 2px 0;font-size:11px;color:var(--muted)}
.lay[data-lens="space"] .lay-space-rail .wall-floor:first-child{margin-top:0}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row.wall-row-named{
  grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"key name name" ". area tag";row-gap:2px}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-key{grid-area:key}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-name-input{grid-area:name}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-picker-area{grid-area:area;padding-left:7px;font-size:11.5px}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-exposure{grid-area:tag;justify-self:end}
.lay[data-dark] .lay-below{background:#2a0a0f;border-color:#4a1a22;color:#faf6f0}

/* A measurement is an annotation you can pick up: blue when chosen, and a
   small Delete beside it. */
.lay-lines .lay-pin-on{stroke:var(--plan-blue);stroke-width:3;opacity:1}
.lay-note-pin-on{background:var(--plan-blue);border-color:var(--plan-blue);color:#fff}
.lay-pin-delete{pointer-events:auto;cursor:pointer;border:1px solid var(--plan-bad);color:var(--plan-bad);
  background:var(--surface);font-size:11px;padding:3px 10px}
.lay-pin-delete:hover{background:var(--plan-bad);color:#fff}

/* Wall rows, one line each: [A] name ........ side · 50.11 m² */
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row.wall-row-named{
  grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:none;align-items:center;
  gap:8px;padding:4px 10px 4px 6px;min-height:34px}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-key,
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-name-input,
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-picker-area{grid-area:auto}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-name-input{padding:3px 6px;border-radius:6px;
  background:transparent;cursor:text}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-name-input:not(:focus){border-color:transparent}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-picker-area{padding-left:0;font-size:12px;white-space:nowrap}
.lay[data-lens="space"] .lay-space-rail .wall-face{font-size:10.5px;color:var(--plan-blue);white-space:nowrap}
.lay[data-lens="space"] .lay-space-rail .wall-face:empty{display:none}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row-named.active{background:#2f6db514}

/* The painting and flooring quote: select, finish, total, export. */
.lay[data-lens="space"] .lay-space-rail .wall-sides{display:inline-flex;gap:3px}
.lay[data-lens="space"] .lay-space-rail .wall-sides button{width:22px;height:22px;padding:0;border-radius:6px;
  border:1px solid var(--line);background:var(--surface);font-size:10.5px;color:var(--muted);box-shadow:none;cursor:pointer}
.lay[data-lens="space"] .lay-space-rail .wall-sides button:hover{border-color:var(--plan-blue);color:var(--plan-blue)}
.lay[data-lens="space"] .lay-space-rail .wall-sides button.on{background:var(--plan-blue);border-color:var(--plan-blue);color:#fff}
.lay[data-lens="space"] .lay-space-rail .sel-headline{margin:0 0 10px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.lay[data-lens="space"] .lay-space-rail .sel-headline b{font-weight:600;color:var(--ink)}
.lay[data-lens="space"] .lay-space-rail .selected-row b{display:flex;flex-direction:column;gap:1px;min-width:0}
.lay[data-lens="space"] .lay-space-rail .selected-finish{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;
  font-weight:400;color:var(--muted)}
.lay[data-lens="space"] .lay-space-rail .fin-dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;
  background:var(--dot,var(--muted));box-shadow:inset 0 0 0 1px #0000001f}
.lay[data-lens="space"] .lay-space-rail .finish-apply{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:12px}
.lay[data-lens="space"] .lay-space-rail .finish-apply[hidden]{display:none}
.lay[data-lens="space"] .lay-space-rail .finish-apply h4{display:flex;justify-content:space-between;margin:0 0 7px}
.lay[data-lens="space"] .lay-space-rail .finish-apply h4 span{font-weight:400;color:var(--muted)}
.lay[data-lens="space"] .lay-space-rail .finish-swatches{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lay[data-lens="space"] .lay-space-rail .fin-swatch{position:relative;width:26px;height:26px;padding:0;border-radius:50%;
  border:1px solid #00000022;background:var(--dot,#ccc);box-shadow:none;cursor:pointer;overflow:hidden}
.lay[data-lens="space"] .lay-space-rail .fin-swatch:hover{transform:scale(1.08)}
.lay[data-lens="space"] .lay-space-rail .fin-swatch.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--plan-blue)}
.lay[data-lens="space"] .lay-space-rail .fin-custom{background:conic-gradient(#c2362b,#d9a441,#7c9a5c,#2f6db5,#7a4f9a,#c2362b)}
.lay[data-lens="space"] .lay-space-rail .fin-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.lay[data-lens="space"] .lay-space-rail .fin-clear{border:1px solid var(--line);background:var(--surface);border-radius:20px;
  padding:4px 10px;font-size:11.5px;color:var(--muted);box-shadow:none;cursor:pointer}
.lay[data-lens="space"] .lay-space-rail .finish-now{margin:6px 0 0;font-size:11.5px;color:var(--muted)}
.lay[data-lens="space"] .lay-space-rail .fin-swatch[data-tip]:hover::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);
  transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:var(--surface);font-size:11px;padding:3px 7px;border-radius:5px;pointer-events:none}
.lay[data-lens="space"] .lay-space-rail .finish-swatches{overflow:visible}
.lay[data-lens="space"] .lay-space-rail .quote-trade{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 6px}
.lay[data-lens="space"] .lay-space-rail .quote-trade:first-child{margin-top:0}
.lay[data-lens="space"] .lay-space-rail .quote-trade span{font-weight:400;font-size:11.5px;color:var(--muted);text-transform:none;letter-spacing:0}
.lay[data-lens="space"] .lay-space-rail .quote-group{border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:0 0 6px}
.lay[data-lens="space"] .lay-space-rail .quote-group summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:8px;
  align-items:center;padding:9px 11px;cursor:pointer;list-style:none;font-size:12.5px}
.lay[data-lens="space"] .lay-space-rail .quote-group summary::-webkit-details-marker{display:none}
.lay[data-lens="space"] .lay-space-rail .quote-group summary b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lay[data-lens="space"] .lay-space-rail .quote-group summary span{font-size:11px;color:var(--muted)}
.lay[data-lens="space"] .lay-space-rail .quote-group summary strong{font-weight:600;font-variant-numeric:tabular-nums}
.lay[data-lens="space"] .lay-space-rail .quote-lines{padding:0 11px 6px;border-top:1px solid var(--line)}
.lay[data-lens="space"] .lay-space-rail .quote-lines .surface-line{font-size:11.5px;padding:5px 0}
.lay[data-lens="space"] .lay-space-rail .quote-lines .quote-sub{padding-top:0;border-top:0}
.lay[data-lens="space"] .lay-space-rail .quote-lines .quote-sub b{font-size:10.5px;color:var(--muted);font-weight:400}
.lay[data-lens="space"] .lay-space-rail .quote-waste{margin:0 11px 8px;font-size:11.5px}
.lay[data-lens="space"] .lay-space-rail .quote-waste-pick{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin:10px 0 0;font-size:12px;color:var(--muted)}
.lay[data-lens="space"] .lay-space-rail .quote-waste-pick .lay-chips button{padding:4px 9px;font-size:11.5px}
.lay[data-lens="space"] .lay-space-rail .quote-pdf{width:100%;margin-top:14px}
.lay[data-lens="space"] .lay-space-rail .quote-pdf{display:flex;align-items:center;justify-content:center;min-height:40px;
  padding:10px 18px;border-radius:9px;border:1px solid var(--brand);background:var(--brand);color:var(--on-brand);font-size:12.5px;
  font-weight:500;cursor:pointer;box-shadow:none}
.lay[data-lens="space"] .lay-space-rail .quote-pdf:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.lay[data-lens="space"] .lay-space-rail .finish-actions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.lay[data-lens="space"] .lay-space-rail .quote-add{border:1px solid var(--ink);background:var(--ink);color:var(--surface);
  border-radius:20px;padding:6px 13px;font-size:12px;font-weight:500;box-shadow:none;cursor:pointer}
.lay[data-lens="space"] .lay-space-rail .quote-add:hover{filter:brightness(1.15)}
.lay[data-lens="space"] .lay-space-rail .finish-optional{margin-top:10px}
.lay[data-lens="space"] .lay-space-rail .finish-optional summary{cursor:pointer;font-size:12px;color:var(--ink);list-style:none}
.lay[data-lens="space"] .lay-space-rail .finish-optional summary::-webkit-details-marker{display:none}
.lay[data-lens="space"] .lay-space-rail .finish-optional summary::before{content:'+ ';color:var(--muted)}
.lay[data-lens="space"] .lay-space-rail .finish-optional[open] summary::before{content:'– '}
.lay[data-lens="space"] .lay-space-rail .finish-optional summary span{color:var(--muted);font-size:11px}
.lay[data-lens="space"] .lay-space-rail .finish-optional .finish-swatches{margin-top:8px}
.lay[data-lens="space"] .lay-space-rail .finish-now{margin:2px 0 0}
.lay[data-lens="space"] .lay-space-rail .lay-quote-panel .quantity-total{margin-bottom:10px}
.lay[data-lens="space"] .lay-space-rail .quote-order{margin:-4px 0 10px;font-size:12px;color:var(--muted)}
.lay[data-lens="space"] .lay-space-rail .lay-quote-panel .quantity-total{align-items:flex-start;text-align:left;border:0;padding:0;background:none}
.lay[data-lens="space"] .lay-space-rail .quote-clear{display:block;width:100%;margin-top:8px;padding:8px 12px;border:1px solid var(--line);
  border-radius:9px;background:transparent;color:var(--muted);font-size:12px;box-shadow:none;cursor:pointer}
.lay[data-lens="space"] .lay-space-rail .quote-clear:hover{border-color:var(--plan-bad);color:var(--plan-bad)}

/* A phone: the floor list sits under the view switch rather than on top of
   it, and the tool bar wraps within the screen instead of running off both
   edges. */
@media(max-width:760px){
  .lay-viewbar{top:10px;right:10px}
  .lay-levels{top:64px;left:10px}
  .lay-bar{bottom:10px;border-radius:18px;gap:4px 8px}
}

/* How to move, said on arrival: a soft line that slides up just above the
   tool bar, and fades away again once somebody moves. Quiet, never a panel. */
.lay-hint{position:absolute;bottom:88px;left:50%;transform:translate(-50%,10px);z-index:5;display:flex;align-items:center;
  gap:16px;padding:7px 16px;border-radius:999px;background:rgba(250,246,240,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(48,9,22,.08);
  font-size:12px;color:var(--muted);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.lay-hint.on{opacity:1;transform:translate(-50%,0)}
.lay-hint span{display:inline-flex;align-items:center;gap:6px}
.lay-hint svg{width:14px;height:14px;color:var(--muted);flex:none}
.lay-hint kbd{font:500 11px/1 var(--sans);padding:3px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--paper)}
.lay[data-dark] .lay-hint{background:rgba(42,10,15,.72);border-color:rgba(250,246,240,.12);color:#e8dcd6}
.lay[data-dark] .lay-hint svg{color:#e8dcd6}
@media (max-width:760px){.lay-hint{gap:10px;padding:6px 12px;font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.lay-hint{transition:opacity .3s ease;transform:translate(-50%,0)}}
/* Trim and joinery in the painting quote: a tick, the item with how it is known beneath, its quantity. */
.ws .trim-line{align-items:flex-start;gap:8px;cursor:pointer}
.ws .trim-line input{margin:2px 0 0;flex:none;accent-color:var(--ink,#2b2724)}
.ws .trim-line b{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.ws .trim-line small{font-weight:400;font-size:10.5px;line-height:1.35;color:var(--muted)}
.ws .trim-line span{flex:none;white-space:nowrap}
.ws .trim-group summary span{margin-left:auto}

/* Render: the view as a photograph, sharpening over the stage. */
.lay-render{position:absolute;inset:12px;z-index:30;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:16px;background:var(--paper);box-shadow:0 12px 40px rgba(20,16,12,.22)}
.lay-render-frame{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px;background:#eceae6}
.lay-render-frame canvas{max-width:100%;max-height:100%;width:auto!important;height:auto!important;object-fit:contain}
.lay-render-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lay-render-state{flex:1;font-size:12.5px;color:var(--ink)}
.lay-render a.lay-viewbar-btn{text-decoration:none;box-shadow:inset 0 0 0 1px var(--ink)}
.lay-render a[hidden],.lay-render button[hidden]{display:none}

.lay-render-options{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px}.lay-render-options label{display:flex;align-items:center;gap:6px}.lay-render-options select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid #cdbeb5;border-radius:8px;padding:7px}.lay-render-options span{color:var(--muted);margin-left:auto}
/* Portal image: shown once a still is ready, in the options' own look (portal-image.mjs). */
.lay-render-portal[hidden]{display:none}
/* The property assistant must not cover render progress or Stop/Close. */
body:has(.lay-render) .property-chat{visibility:hidden;pointer-events:none}

/* Library: search and categories sit over the top of the shelf and slide away
   while it is scrolled down, so the cards get the whole height; scrolling up,
   or reaching the top, brings them back. Moved, never resized: nothing reflows. */
.lay-shelf{position:relative;flex:1;min-height:0;overflow:hidden}
.lay-tools{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;flex-direction:column;gap:12px;
  padding-bottom:10px;background:var(--surface);transition:transform .2s ease,opacity .2s ease;will-change:transform}
.lay-shelf.lay-tools-away .lay-tools{transform:translateY(calc(-100% - 2px));opacity:0;pointer-events:none}
.lay-shelf .lay-cards{height:100%;padding-top:var(--lay-tools-h,96px);scroll-padding-top:var(--lay-tools-h,96px)}
@media (prefers-reduced-motion:reduce){.lay-tools{transition:none}}

/* A card waiting for its picture: a quiet tile with the soft patch of floor
   every picture stands on — never the empty box the piece is drawn in. */
.lay-card-shot img{transition:opacity .25s ease}
.lay-card-wait{background:radial-gradient(ellipse 42% 12% at 50% 78%,#e4ded3 0 60%,transparent 100%),var(--surface)}
.lay-card-wait img{opacity:0}

/* A card can be picked up and carried onto the floor. On a touch screen the
   shelf still scrolls up and down; a sideways pull lifts the card. */
.lay-card{cursor:grab;touch-action:pan-y}
.lay-dragging,.lay-dragging *{cursor:grabbing!important}
.lay-card-nopic{position:relative}
.lay-card-nopic:after{content:'No picture yet';position:absolute;inset:auto 0 12px;text-align:center;
  font-size:10.5px;color:var(--muted)}

/* The Tiles tab: filters, swatches that are the tile as laid at a true scale, then the lay. */
.lay-tiles{margin-top:2px}
.lay-tiles .lay-tile-chips{display:flex;flex-direction:column;gap:6px;margin:2px 0 10px}
.lay-tiles .lay-tile-chiprow{display:flex;flex-wrap:wrap;gap:5px}
.lay-tiles .lay-tile-chip{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:2px 9px;font:inherit;
  font-size:11px;line-height:1.5;color:inherit;cursor:pointer}
.lay-tiles .lay-tile-chip:hover{border-color:var(--plan-blue)}
.lay-tiles .lay-tile-chip.on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.lay-tiles .lay-tile-colours{gap:6px;margin-top:2px}
.lay-tiles .lay-tile-dot,.lay-tiles .lay-tile-grout{position:relative;width:20px;height:20px;min-width:0;border-radius:50%;border:1px solid var(--line);
  padding:0;background:var(--swatch,transparent);cursor:pointer}
.lay-tiles .lay-tile-grout{width:24px;height:24px}
.lay-tiles .lay-tile-grout.matched{background:conic-gradient(#d9d3c8 0 50%,#a39d93 0)}
.lay-tiles .lay-tile-dot.on,.lay-tiles .lay-tile-grout.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.lay-tiles .lay-tile-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;max-height:236px;overflow:auto;padding:3px}
.lay-tiles .lay-tile-swatch{position:relative;width:44px;height:44px;min-width:0;border-radius:7px;border:1px solid var(--line);padding:0;cursor:pointer;
  background:var(--swatch-img,none) center/cover,var(--swatch,transparent);box-shadow:0 1px 2px #221d1822}
.lay-tiles .lay-tile-swatch:hover{transform:scale(1.06)}
.lay-tiles .lay-tile-swatch.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.lay-tiles [data-label]:hover::after,.lay-tiles .lay-tile-swatch:focus-visible::after{content:attr(data-label);position:absolute;
  left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;background:var(--ink);color:var(--surface);
  font-size:11px;line-height:1.3;padding:4px 8px;border-radius:6px;pointer-events:none;z-index:6}
.lay-tiles .lay-tile-controls{border-top:1px solid var(--line);margin-top:6px;padding-top:4px}
.lay-tiles .lay-tile-controls .lay-single{max-width:none;margin:8px 0}
.lay-tiles .lay-tile-controls select,.lay-tiles .lay-tile-controls input[type=number]{border:1px solid var(--line);border-radius:8px;
  background:var(--surface);color:inherit;font:inherit;font-size:12px;padding:5px 8px}
.lay-tiles .lay-tile-controls .lay-tile-num{flex-direction:row;align-items:center;gap:8px}
.lay-tiles .lay-tile-controls .lay-tile-num input{width:92px;padding-right:8px}
.lay-tiles .lay-tile-grouts{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 8px}

/* A finish that is no longer offered: the closest current one, one button. */
.lay-closest-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 10px;font-size:12px}
.lay-closest-row span{color:var(--ink)}
.lay-panel .lay-closest-row .lay-closest{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:3px 12px;
  font:inherit;font-size:11.5px;color:inherit;cursor:pointer;white-space:nowrap}
.lay-panel .lay-closest-row .lay-closest:hover{border-color:var(--plan-blue)}

/* Standing views: the one the camera is in stays pressed until it is orbited away. */
.lay-viewbar .lay-view-presets button{border-radius:10px;font-size:12.5px;font-weight:500}
.lay-viewbar .lay-view-presets button.on{background:var(--ink);color:var(--surface)}
/* Dark is the brand's burgundy; every label on it at least 4.5:1 (#e8dcd6 on #2a0a0f is ~13:1). */
.lay[data-dark] .lay-viewbar .lay-view button,.lay[data-dark] .lay-viewbar .lay-view-switch button{color:#e8dcd6}
.lay[data-dark] .lay-viewbar .lay-view button.on,.lay[data-dark] .lay-viewbar .lay-view-switch button.on{background:#faf6f0;color:#2a0a0f}
.lay[data-dark] .lay-viewbar .lay-view button:hover:not(.on){background:#3c1219}
.lay[data-dark] .lay-bar .lay-icon.on{background:#faf6f0;color:#2a0a0f}
.lay[data-dark] .lay-sep{background:#4a1a22}
.lay[data-dark] .lay-pop{background:#2a0a0f;border-color:#4a1a22;color:#faf6f0}
/* Every dark menu, in the portal, the listing and the embed: light text, a darker hover (not the paper one). */
.lay[data-dark] .lay-pop button{color:#faf6f0}
.lay[data-dark] .lay-pop button:not(.on):hover{background:#3c1219}
/* Controls holds the shortcuts too: one button, the keyboard drawn on it. */
#layHelp{display:inline-flex;align-items:center;gap:6px}
#layHelp svg{width:16px;height:16px}
.lay-keys-all{display:block;margin:8px 0 0;border:0;background:transparent;padding:4px 0;font:inherit;font-size:12px;color:inherit;text-decoration:underline;cursor:pointer}
.lay-keys-all kbd{font:inherit;border:1px solid currentColor;border-radius:4px;padding:0 4px;margin-left:4px;text-decoration:none}
/* Right click on a wall. */
.lay-ctx{position:absolute;z-index:40;min-width:180px;display:flex;flex-direction:column;padding:5px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);box-shadow:0 10px 30px #221d1826}
.lay-ctx[hidden]{display:none}
.lay-ctx button{border:0;background:transparent;text-align:left;padding:8px 10px;border-radius:8px;font:inherit;font-size:12.5px;color:var(--ink);
  display:flex;justify-content:space-between;gap:12px;cursor:pointer}
.lay-ctx button small{color:var(--muted)}
.lay-ctx button:hover,.lay-ctx button:focus-visible{background:var(--paper)}
.lay-ctx button[aria-disabled="true"]{opacity:.45;cursor:default}
.lay[data-dark] .lay-ctx{background:#2a0a0f;border-color:#4a1a22}
.lay[data-dark] .lay-ctx button{color:#faf6f0}.lay[data-dark] .lay-ctx button small{color:#dcc9c3}
.lay[data-dark] .lay-ctx button:hover,.lay[data-dark] .lay-ctx button:focus-visible{background:#3c1219}
/* The photo just taken, with its download. */
.lay-photo{position:absolute;left:16px;top:16px;z-index:35;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 8px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 10px 30px #221d1826;font-size:12.5px;color:var(--ink);max-width:min(460px,calc(100% - 32px))}
.lay-photo[hidden]{display:none}
.lay-photo img{width:72px;height:48px;object-fit:cover;border-radius:8px;flex:none}
.lay-photo span{flex:1}
.lay-photo a.lay-viewbar-btn{text-decoration:none;box-shadow:inset 0 0 0 1px var(--ink)}
.lay-photo[data-tone="bad"] span{color:var(--red,#B42318)}
.lay[data-dark] .lay-photo{background:#2a0a0f;border-color:#4a1a22;color:#faf6f0}
.lay[data-dark] .lay-photo a.lay-viewbar-btn{box-shadow:inset 0 0 0 1px #faf6f0;color:#faf6f0}
/* Render: a close in the corner, always there, whatever the render is doing. */
.lay-render{padding-top:14px}
.lay-render-x{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.lay-render-x:hover{background:var(--paper)}
.lay-render-options{padding-right:44px}
/* The stage can run below the window: progress, Stop, Cancel and Close sit at the top, always in sight. */
.lay-render-bar{order:-1;padding-right:44px}
.lay[data-dark] .lay-render{background:#2a0a0f;color:#faf6f0}
.lay[data-dark] .lay-render-state,.lay[data-dark] .lay-render-options{color:#faf6f0}
.lay[data-dark] .lay-render-options span{color:#dcc9c3}
.lay[data-dark] .lay-render-options select{background:#1e0609;color:#faf6f0;border-color:#4a1a22}
.lay[data-dark] .lay-render .lay-viewbar-btn{box-shadow:inset 0 0 0 1px #6a3a42}
.lay[data-dark] .lay-render-frame{background:#1e0609}
.lay[data-dark] .lay-render-x{background:#2a0a0f;color:#faf6f0;border-color:#6a3a42}
/* A phone: the view group wraps inside the stage instead of running off its left edge. */
@media (max-width:560px){
  .lay-viewbar{left:10px;right:10px;flex-wrap:wrap;justify-content:flex-end;max-width:none}
  .lay-viewbar .lay-view-presets button{padding:7px 9px;white-space:nowrap}
  .lay-zoom{top:118px}
}
/* Clear the room: every placed piece, or the objects the scan detected (both undoable). */
.lay-room-menu{position:relative;margin-left:auto}
.lay-room-more{width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--muted);font-size:16px;
  line-height:1;cursor:pointer}
.lay-room-more:hover,.lay-room-more[aria-expanded="true"]{background:var(--paper);color:var(--ink)}
.lay-room-tools{position:absolute;right:0;top:calc(100% + 4px);z-index:6;display:flex;flex-direction:column;
  min-width:190px;padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.lay-room-tools[hidden]{display:none}
.lay-room-tools button{border:0;border-radius:6px;background:none;padding:8px 10px;text-align:left;color:var(--ink);
  font:inherit;font-size:13px;cursor:pointer}
.lay-room-tools button:hover:not(:disabled),.lay-room-tools button:focus-visible{background:var(--paper)}
.lay-room-tools button:disabled{color:var(--muted);opacity:.6;cursor:default}
/* How to move: always the light panel, like the rail beside it, in light and dark alike. */
.workspace-layout .lay .lay-keys,.workspace-layout .lay .lay-keys.open{background:#fffdfb;border:1px solid var(--line);color:#36252a;box-shadow:0 6px 24px #221d1814}
.workspace-layout .lay .lay-keys :is(.lay-keys-head b,.lay-key,.lay-keys-all){color:#36252a}
.workspace-layout .lay .lay-keys :is(.lay-keys-head span,li span:last-child,.lay-keys-close){color:#64535a}
.workspace-layout .lay .lay-key{border-color:var(--line)}
/* Space rail, tidied: heading + figure + one action per card; the
   explanations sit behind an info tip (hover, focus or tap). */
.lay[data-lens="space"] .lay-space-rail .lay-panel{padding:18px 20px}
.lay[data-lens="space"] .lay-space-rail .lay-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.lay[data-lens="space"] .lay-space-rail .lay-head h3,.lay[data-lens="space"] .lay-space-rail .lay-head h4{margin:0}
.lay[data-lens="space"] .lay-space-rail .lay-panel h4{font-size:13px;font-weight:600;letter-spacing:0}
.lay[data-lens="space"] .lay-space-rail .lay-panel h3{font-size:24px}
.lay[data-lens="space"] .lay-space-rail .lay-head+.lay-head,.lay[data-lens="space"] .lay-space-rail .lay-panel>*+.lay-head{margin-top:16px}
.lay[data-lens="space"] .lay-space-rail .lay-empty{margin:0;font-size:12.5px;color:var(--muted)}
.lay[data-lens="space"] .lay-space-rail .lay-working{margin:4px 0 0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.lay[data-lens="space"] .lay-space-rail .quantity-total strong,.lay[data-lens="space"] .lay-space-rail .lay-figures dd,
.lay[data-lens="space"] .lay-space-rail .surface-line span,.lay[data-lens="space"] .lay-space-rail .selected-row>span,
.lay[data-lens="space"] .lay-space-rail .quote-order{font-variant-numeric:tabular-nums lining-nums}
.lay[data-lens="space"] .lay-space-rail .quote-order b{font-weight:600;color:var(--ink)}
.lay[data-lens="space"] .lay-space-rail .quote-clear{margin-top:6px}
.info-tip{position:relative;display:inline-flex;flex:none}
.info-tip-btn{position:relative;display:inline-grid;place-items:center;width:20px;height:20px;min-height:0;padding:0;border:1px solid var(--line);
  border-radius:50%;background:transparent;color:var(--muted);font:italic 600 12px/1 Georgia,serif;cursor:help}
.info-tip-btn::before{content:"";position:absolute;inset:-10px}
.info-tip-btn:hover,.info-tip-btn[aria-expanded="true"]{border-color:var(--ink);color:var(--ink)}
.info-tip-btn:focus-visible{outline:2px solid var(--brand,#4F0E18);outline-offset:2px}
.info-tip-text{position:absolute;right:-4px;top:calc(100% + 8px);z-index:40;display:none;gap:6px;width:max-content;max-width:min(250px,78vw);
  padding:9px 11px;border-radius:9px;background:#221d18;color:#FAF6F0;font:400 12px/1.45 var(--sans);letter-spacing:0;text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.18);visibility:hidden;opacity:0;transition:opacity .12s ease,visibility .12s;pointer-events:none}
.info-tip-text:empty{display:none}
.info-tip:hover .info-tip-text,.info-tip-btn:focus-visible+.info-tip-text,.info-tip-btn[aria-expanded="true"]+.info-tip-text{display:grid;visibility:visible;opacity:1}
.ws .ws-rail .info-tip-text,.lay .info-tip-text{max-width:min(250px,78vw);width:max-content}

/* Katie's phone viewer: the room first, selected-surface details beneath it,
   with full quotes opened deliberately. Desktop keeps its existing inspector. */
.space-phone-quotes{display:none}
.space-quote-sheet{padding:0;border:1px solid var(--line);border-radius:28px 28px 0 0;
  background:var(--surface);color:var(--ink);width:min(100%,620px);max-width:100%;
  max-height:85dvh;margin:auto auto 0;overscroll-behavior:contain}
.space-quote-sheet::backdrop{background:#180c1080}
.space-quote-sheet>header{position:sticky;top:0;z-index:2;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:16px 20px;background:var(--surface);border-bottom:1px solid var(--line)}
.space-quote-sheet>header h3{margin:0;font:400 26px/1.2 var(--serif)}
.space-quote-sheet>header button{min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:var(--paper);color:var(--ink);font:inherit}
.space-quote-sheet [data-phone-quote-body]{padding:16px 20px max(20px,env(safe-area-inset-bottom))}
.space-quote-sheet .lay-panel{border:0;padding:0!important;background:none}
@media(max-width:760px){
  .lay[data-lens="space"],.lay[data-lens="space"][data-library][data-inspect]{
    grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(340px,52svh) auto;height:auto}
  .lay[data-lens="space"] .lay-stage{grid-column:1;grid-row:1;min-width:0}
  .lay[data-lens="space"] .lay-inspect{grid-column:1;grid-row:2;max-height:none;padding:16px 20px 24px;overflow:visible}
  .lay[data-lens="space"] .lay-rail-right{grid-column:1;grid-row:2}
  .lay[data-lens="space"] .lay-space-rail{gap:12px}
  .space-phone-quotes{display:flex;gap:8px}
  .space-phone-quotes button{flex:1;min-height:44px;padding:10px;border:1px solid var(--line);
    border-radius:10px;background:var(--surface);color:var(--ink);font:500 15px/1.3 var(--sans)}
  .lay-space-rail>[data-quote-panel]{display:none}
  .lay[data-lens="space"] .lay-space-rail .lay-panel{padding:16px;background:var(--surface);border-radius:16px}
  .lay[data-lens="space"] .lay-space-rail :is(button,select,input:not([type="color"])){min-height:44px}
  .lay[data-lens="space"] .lay-space-rail :is(.lay-facts,.lay-empty,.lay-working,.quote-summary,.surface-line,.selected-row){font-size:15px;line-height:1.5}
  .lay[data-lens="space"] .lay-space-rail .lay-head h4{font-size:17px}
  .lay[data-lens="space"] .lay-space-rail .info-tip-btn{min-width:44px;min-height:44px}
  .lay[data-lens="space"] .lay-space-rail .info-tip-btn::before{inset:0}
}

/* A phone's tool bar (Katie, 7 Nov): no More, every tool its own icon, one tap each, Greenery and light/dark with them. */
.lay .lay-bar .lay-icon.lay-phone-only{display:none}
@media(max-width:760px){
  .lay .lay-bar .lay-icon.lay-phone-only{display:inline-flex}
  /* On the plan, All measurements stands beside Measure with its name: the floor plan with every figure, one tap away. */
  .lay .lay-bar #layDims:not([hidden]){display:inline-flex;width:auto;padding:0 12px 0 10px;gap:6px;white-space:nowrap}
  .lay .lay-bar #layDims .lay-lbl{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  /* The strings carry the scale: the scale bar would sit on top of them. */
  .lay #layScale.lay-dims-on{display:none}
  .lay .lay-bar{max-width:calc(100% - 24px);width:max-content;gap:4px;padding:6px;border-radius:16px}
  .lay .lay-bar button{min-height:44px}
  .lay .lay-bar #layHelp{display:none}
  /* Quiet and in brand: burgundy icons on ivory, in light and dark alike. A dark preference kept from a desktop visit
     used to open the phone with ivory icons on a white bar (Katie, 7 Nov); the bar's Dark button now turns it back. */
  .lay .lay-stage :is(.lay-bar,.lay-viewbar):is(.lay-bar,.lay-viewbar):is(.lay-bar,.lay-viewbar){background:#faf6f0f2;border-color:#e4d8d3}
  .lay .lay-stage :is(.lay-bar,.lay-viewbar) :is(.lay-icon,.lay-viewbar-btn):is(.lay-icon,.lay-viewbar-btn):is(.lay-icon,.lay-viewbar-btn):not(.on){color:#300916;background:transparent}
  .lay .lay-stage :is(.lay-bar,.lay-viewbar) :is(.lay-icon,.lay-viewbar-btn):is(.lay-icon,.lay-viewbar-btn).on{background:#300916;color:#faf6f0}
  .lay-viewbar .lay-view-presets button{min-height:44px}
  .lay-viewbar .lay-view-switch button{min-height:44px}
  .lay[data-lens="space"] .lay-space-rail .space-quote-sheet{max-width:100vw}
}
.lay .lay-space-rail .space-quote-sheet>header h3{font:400 26px/1.2 var(--serif);margin:0}
.lay .space-quote-sheet [data-quote-panel]>.lay-head h4{display:none}
.lay .space-quote-sheet [data-quote-panel]>.lay-head{justify-content:flex-end;margin:0}
.lay .space-quote-sheet .quote-group summary{font-size:15px;line-height:1.4;min-height:44px}

/* The "?" beside a figure (figures.mjs): smaller, set in the line it explains. */
.figure-tip{margin-left:5px;vertical-align:-2px}
.figure-tip .info-tip-btn{width:15px;height:15px;font:600 10px/1 var(--sans);font-style:normal}
.figure-tip .info-tip-text{left:-8px;right:auto;width:max-content;max-width:min(240px,78vw);font:400 12px/1.45 var(--sans);
  letter-spacing:0;text-transform:none;white-space:normal;
  /* Set inside rows whose own span rules would otherwise recolour it: a tip is always readable. */
  color:#FAF6F0!important;text-align:left!important}
/* How to move, folded: one compact pill with a ? — click opens the panel. */
.workspace-layout .lay .lay-keys:not(.open){border-radius:999px;padding:6px 8px 6px 12px;cursor:pointer;opacity:1}
.lay-keys:not(.open) .lay-keys-head{align-items:center;gap:8px}
.lay-keys-q{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid currentColor;font-style:normal;font-size:11px;font-weight:600;line-height:1}
.lay-keys-head .lay-keys-mode::before{content:'· '}

/* Dark mode: the floating chrome is the brand blush with burgundy ink, so it reads off the dark room. */
.workspace-layout .lay[data-dark] :is(.lay-viewbar,.lay-bar,.lay-zoom-row,.lay-levels .lay-view,.lay-pop,.lay-pop.lay-sun){background:#f5dfe5;border-color:#d9afbb;color:#4f0e18}
.workspace-layout .lay[data-dark] :is(.lay-viewbar,.lay-bar,.lay-zoom-row,.lay-pop) :is(button,.lay-icon,.lay-viewbar-btn,a){color:#4f0e18}
.workspace-layout .lay[data-dark] :is(.lay-viewbar,.lay-bar,.lay-zoom-row,.lay-pop) :is(button,.lay-icon,.lay-viewbar-btn):hover:not(.on){background:#ebcbd4}
.workspace-layout .lay[data-dark] :is(.lay-viewbar,.lay-bar,.lay-pop) :is(button.on,.lay-icon.on,.lay-viewbar-btn.on,[aria-pressed="true"].on){background:#4f0e18;color:#faf6f0;box-shadow:none}
.workspace-layout .lay[data-dark] :is(.lay-viewbar,.lay-bar,.lay-zoom-row) i{color:#7a3a46}
.workspace-layout .lay[data-dark] :is(.lay-sep,.lay-float-divider){background:#d9afbb}
.workspace-layout .lay[data-dark] .lay-pop.lay-sun :is(.lay-sun-label,.lay-sun-ticks,.lay-sun-fact,.lay-sun-note,.lay-sun-label output,.lay-sun-scene,.lay-sun-northrow output){color:#4f0e18}
.workspace-layout .lay[data-dark] .lay-pop.lay-sun :is(select,input[type=date]){background:#fffdfb;border-color:#d9afbb;color:#4f0e18;color-scheme:light}
.workspace-layout .lay[data-dark] .lay-sun-dial .ring{fill:#fffdfb;stroke:#d9afbb}
.workspace-layout .lay[data-dark] :is(.lay-sun-dial .ticks line,.lay-sun-dial .room){stroke:#7a3a46}
.workspace-layout .lay[data-dark] .lay-sun-dial .top{fill:#7a3a46}

/* ---- Viewer chrome v3: the model owns the middle. One group top-left (how you
   look: 2D | 3D, and where you stand), one quiet group top-right (light/dark,
   Render), zoom as a slim map-style stack bottom-right. On a phone the overlay
   shrinks to 2D | 3D and a ⋯ sheet; pinch zooms; the toolbar is one row. ---- */
.lay-viewmain{position:absolute;left:14px;top:14px;z-index:4;display:flex;align-items:center;gap:2px;
  padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 6px 24px #221d181f}
.lay-viewmain .lay-view-switch{display:flex;gap:2px}
.lay-viewmain .lay-view-switch button{border:0;border-radius:10px;height:32px;padding:0 14px;font-size:13px;font-weight:600;background:transparent;color:var(--muted)}
.lay-viewmain .lay-view-switch button.on{background:var(--ink);color:var(--surface)}
.lay-viewpick{position:relative;display:flex;margin-left:4px;padding-left:4px;border-left:1px solid var(--line)}
.lay-viewpick[hidden]{display:none}
.lay-viewpick-btn{display:inline-flex;align-items:center;gap:6px;height:32px;border:0;border-radius:10px;padding:0 10px;font-size:13px;background:transparent;color:var(--ink);cursor:pointer}
.lay-viewpick-btn:hover{background:var(--paper)}
.lay-viewpick-btn svg{width:15px;height:15px}
.lay-viewpick-btn i{font-style:normal;font-size:9px;color:var(--muted)}
.lay-viewpick .lay-view-presets{position:absolute;top:calc(100% + 8px);left:0;display:none;flex-direction:column;gap:2px;
  min-width:140px;padding:5px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 10px 30px #221d1826}
.lay-viewpick .lay-view-presets::before{content:'';position:absolute;left:0;right:0;top:-10px;height:10px}
.lay-viewpick:hover .lay-view-presets,.lay-viewpick:focus-within .lay-view-presets,.lay-viewpick.open .lay-view-presets{display:flex}
.lay-viewpick .lay-view-presets button{text-align:left;border:0;border-radius:8px;padding:8px 10px;font-size:13px;background:transparent;color:var(--ink)}
.lay-viewpick .lay-view-presets button:hover{background:var(--paper)}
.lay-viewpick .lay-view-presets button.on{background:var(--ink);color:var(--surface)}
/* Top right: two quiet controls. */
.lay-viewbar{top:14px;right:14px;padding:4px;gap:2px}
.lay-viewbar .lay-render-btn{font-weight:600}
.lay-viewbar .lay-more{display:none}
/* Zoom: a slim vertical stack, bottom right, like a map. */
.lay-zoom{left:auto;right:14px;top:auto;bottom:22px;align-items:flex-end}
.lay-zoom .lay-zoom-row{flex-direction:column;gap:0;padding:3px;border-radius:12px}
.lay-zoom .lay-zoom-row button{min-width:34px;width:34px;height:32px;padding:0}
.lay-zoom #layZoomIn{order:1}.lay-zoom #layZoomLevel{order:2;font-size:10.5px}.lay-zoom #layZoomOut{order:3}
.lay-zoom #layZoomFit{order:4;border-top:1px solid var(--line);border-radius:0 0 9px 9px}
.lay-more-sheet[hidden]{display:none}
.lay-more-seg{display:flex;gap:0;padding:3px;border:1px solid var(--line);border-radius:12px}
.workspace-layout .lay .lay-more-seg button{border:0;border-radius:9px;min-height:40px}
.workspace-layout .lay .lay-more-seg button.on{background:#4f0e18;color:#faf6f0;border-color:#4f0e18}
.workspace-layout .lay[data-dark] .lay-more-seg{border-color:#d9afbb}
/* Dark: the same blush as the bars below, lifted off the dark room. */
.workspace-layout .lay[data-dark] :is(.lay-viewmain,.lay-viewpick .lay-view-presets,.lay-zoom-row,.lay-more-sheet){background:#f5dfe5;border-color:#d9afbb}
.workspace-layout .lay[data-dark] :is(.lay-viewmain,.lay-viewpick .lay-view-presets,.lay-viewbar,.lay-zoom-row,.lay-bar,.lay-more-sheet){box-shadow:0 0 0 1px #faf6f033,0 8px 28px #00000080}
.workspace-layout .lay[data-dark] :is(.lay-viewmain,.lay-zoom-row,.lay-more-sheet) :is(button,i){color:#4f0e18}
.workspace-layout .lay[data-dark] :is(.lay-viewmain button.on,.lay-viewpick .lay-view-presets button.on,.lay-more-sheet button.on){background:#4f0e18;color:#faf6f0}
.workspace-layout .lay[data-dark] :is(.lay-viewpick,.lay-zoom #layZoomFit){border-color:#d9afbb}
.workspace-layout .lay[data-dark] :is(.lay-viewpick-btn:hover,.lay-zoom-row button:hover){background:#ecc9d3}
.lay-bar .lay-icon svg{width:16px;height:16px;flex:none}
.lay-bar{flex-wrap:nowrap;max-width:calc(100% - 140px);white-space:nowrap}
.lay-bar>*{flex:none}
/* Toggles are icons with tooltips; the menus keep their words, since their value is the label. */
.lay-bar :is(#layFrame,#laySnap,#layIds,#layLights) .lay-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lay-bar :is(#layFrame,#layMeasure,#laySnap,#layIds,#layDims,#layLights){min-width:36px;justify-content:center}
.lay-bar .lay-icon{gap:6px}
/* Phone: the room keeps the screen. */
@media (max-width:600px){
  .lay-viewmain{left:10px;top:10px;padding:3px}
  .lay-viewmain .lay-view-switch button{height:30px;padding:0 12px}
  .lay-viewpick,.lay-zoom,.lay-keys{display:none !important}
  .lay-viewbar{top:10px;right:10px;left:auto !important;bottom:auto !important;width:auto;min-height:0;height:auto;padding:3px;flex-wrap:nowrap}
  .lay-viewbar>:not(.lay-more,.lay-full-btn){display:none !important}
  .lay-viewbar .lay-more{margin:0;display:inline-flex;align-items:center;justify-content:center;width:36px;height:30px;padding:0}
  .lay-viewbar .lay-more svg{width:18px;height:18px}
  .lay-more-sheet{position:absolute;left:8px;right:8px;bottom:8px;z-index:8;display:flex;flex-direction:column;gap:8px;padding:14px;
    border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 -8px 32px #221d1833}
  .lay-more-head{margin:0;font-size:13px;color:var(--muted)}
  .lay-more-row{display:flex;gap:6px}
  .lay-more-sheet button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:1px solid var(--line);border-radius:10px;background:transparent;font-size:14px;color:var(--ink)}
  .lay-more-sheet button svg{width:16px;height:16px}
  .lay-more-sheet button.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}
  .lay-more-sheet .lay-more-render{background:var(--ink);color:var(--surface);border-color:var(--ink);font-weight:600}
  .workspace-layout .lay[data-dark] .lay-more-sheet .lay-more-render{background:#4f0e18;color:#faf6f0}
  /* One row, icons first, scrolls sideways with soft edges; never wraps. */
  .lay-bar{left:8px;right:8px;bottom:8px;transform:none;max-width:none;width:auto;flex-wrap:nowrap !important;justify-content:flex-start;
    overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px 10px;gap:2px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 14px),transparent)}
  .lay-bar::-webkit-scrollbar{display:none}
  /* Soft edges only when it scrolls; when every tool fits, the bar hugs them, with crisp ends. */
  .lay-bar:not([data-scrolls]){right:auto;max-width:calc(100% - 16px);-webkit-mask-image:none;mask-image:none}
  .lay-bar>*{flex:none}
  .lay-bar .lay-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lay-bar .lay-icon{min-width:40px;height:40px;padding:0 8px;justify-content:center}
  .lay-bar .lay-icon i{display:none}
  /* An open menu lifts the clipping so it can stand above the row. */
  .lay-bar:has(.lay-pop:not([hidden])){overflow:visible;-webkit-mask-image:none;mask-image:none}
  .lay-bar .lay-menu{position:static}
  .lay-bar .lay-pop{position:absolute;left:0;right:0;width:auto;min-width:0;bottom:calc(100% + 8px);top:auto;transform:none;max-height:60vh;overflow:auto}
}
/* Dark: the daylight panel is blush like every other menu, so its chips and switch take burgundy ink (about 12:1). */
.workspace-layout .lay[data-dark] .lay-pop.lay-sun button:not(.on){color:#4f0e18;border-color:#c99aa8;background:transparent;opacity:1}
.workspace-layout .lay[data-dark] .lay-pop.lay-sun button:not(.on):hover{background:#ebcbd4}
.workspace-layout .lay[data-dark] .lay-pop.lay-sun button.on{background:#4f0e18;color:#faf6f0;border-color:#4f0e18}
.workspace-layout .lay[data-dark] .lay-pop.lay-sun button:disabled{color:#6e3a46;opacity:1}
/* Phone: toolbar menus rise as a bottom sheet over the stage, and the row stays put. */
@media (max-width:600px){
  .lay-bar:has(.lay-pop:not([hidden])){overflow-x:auto;-webkit-mask-image:none;mask-image:none;transform:none;filter:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .workspace-layout .lay .lay-bar .lay-pop,.workspace-layout .lay .lay-bar .lay-pop.lay-sun{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;min-width:0;max-height:70vh;overflow:auto;
    transform:none;margin:0;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));z-index:60;box-shadow:0 -12px 40px #221d1840}
  .workspace-layout .lay .lay-bar .lay-pop:not(.lay-sun) button{min-height:44px;font-size:15px}
}
/* "Off" is said in words and a dashed edge, not by fading the text below 4.5:1. */
.lay .lay-sun.is-off .lay-sun-block{opacity:1}
.lay .lay-sun.is-off .lay-sun-chips button{border-style:dashed}
/* ---- A phone: the room first, one sheet under it ---------------------------
   One pattern for Space and Furnish. The room takes the top ~58% of the
   screen so the model is the first thing seen (Furnish used to put the
   library above it and push the room below the fold). Directly under the room
   sits one sheet: the folded-panel buttons as its header row, then whichever
   panel is open, scrolling with the page. Layout containers only; the
   viewer's floating chrome (view bar, zoom, tool bar) is left to #663. */
@media(max-width:760px){
  .lay,.lay[data-library],.lay[data-inspect],.lay[data-library][data-inspect]{
    grid-template-rows:minmax(320px,58dvh) auto auto auto;max-width:100%;min-width:0}
  .lay-stage{grid-row:1;min-height:0;height:auto;min-width:0}
  .lay-rail-left{grid-row:2}
  .lay-rail-right{grid-row:3}
  .lay-rail-left,.lay-rail-right{border-top:1px solid var(--line);border-bottom:0;gap:8px}
  .lay-catalogue,.lay-inspect{grid-row:4;max-height:none;overflow:visible;min-width:0;
    border:0;border-top:1px solid var(--line);
    padding:20px max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .lay-rail button,.lay-rail button[data-shelf]{min-height:44px}
}
/* Readability floor on a phone: panel body text 16px, small labels 13px.
   The panel's own rules run 10-12.5px at higher specificity, hence the
   !important; scoped to this query only. The library's filter chips
   (.lay-chips) are left to their own change. */
@media(max-width:600px){
  .lay-inspect :is(p,li,dd,dt,label,summary,span,b,strong,em,a,div,td,th,input,select,textarea,button),
  .lay-catalogue :is(p,li,label,input,select,.lay-card-name){font-size:16px!important;line-height:1.5}
  .lay-inspect :is(h4,h5,small,i,kbd,.hint,.muted),
  .lay-catalogue :is(h4,small,.lay-card-size,.lay-card-basis,.hint){font-size:13px!important;letter-spacing:0;text-transform:none}
  .lay-rail button{font-size:14px}
}
/* Library cards on a phone: at the 16px floor a name or size broke onto two
   lines. Names sit on one line at 14px; sizes at 12px are never cut (a
   measurement shown in part is wrong), and the basis keeps one line. */
@media(max-width:600px){
  .lay-catalogue .lay-card-name{font-size:14px!important;line-height:1.3;-webkit-line-clamp:1;line-clamp:1}
  .lay-catalogue .lay-card-size{font-size:12px!important;line-height:1.3;}
  .lay-catalogue .lay-card-basis{font-size:11.5px!important;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;line-clamp:1;overflow:hidden}
}
/* ---- Overlap fixes (27 Oct) ---- */
/* Clear furniture in plain sight in the library head; the ⋯ keeps the scanned-object choice too. */
.lay-head .lay-clear-btn{margin-left:auto;border:0;background:none;padding:4px 6px;border-radius:8px;font:500 12px/1.2 var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);cursor:pointer;white-space:nowrap}
.lay-head .lay-clear-btn:hover{background:var(--paper)}
.lay-head .lay-clear-btn:disabled{color:var(--muted);text-decoration:none;cursor:default}
.lay-head .lay-clear-btn+.lay-room-menu{margin-left:0}
/* Scanned objects: a quiet chip under 2D | 3D, with the count and what a click does. */
.lay-scan-chip{position:absolute;left:14px;top:62px;z-index:4;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 6px 0 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:500 12px/1 var(--sans);cursor:pointer;box-shadow:0 4px 16px #221d1814}
.lay-scan-chip[hidden]{display:none}
.lay-scan-chip b{font-weight:600;padding:5px 8px;border-radius:7px;background:var(--paper)}
.lay-scan-chip:hover b{background:var(--ink);color:var(--surface)}
.lay-scan-chip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.workspace-layout .lay[data-dark] .lay-scan-chip{background:#f5dfe5;border-color:#d9afbb;color:#4f0e18;box-shadow:0 0 0 1px #faf6f033,0 8px 28px #00000080}
.workspace-layout .lay[data-dark] .lay-scan-chip b{background:#ecc9d3;color:#4f0e18}
/* Zoom and "How to move" sit level with the tool bar (Katie, 28 Oct), and the zoom
   steps up only where Ask Inscena's round button shares the corner. */
.lay-zoom{bottom:22px}
body:has(#capture-chat .chat-launcher) .lay[data-inspect="shut"] .lay-zoom{bottom:92px}
/* "In this room" waits at the foot of the inspector, under the piece's own panel. */
.lay-inspect>#layRoom:not(:empty){margin-top:auto}
/* A piece's size, said once under its name. */
.lay-panel .lay-dims{margin:-8px 0 12px;font-size:13px;color:var(--muted)}
@media (max-width:600px){.lay-scan-chip{left:10px;top:66px;height:28px}}
/* ---- Folded library rail: one column of 44px squares, pictograms only; the name is the tooltip and the label. ---- */
.lay-rail-left{width:60px;padding:12px 8px;gap:6px}
.lay-rail-left>div{align-items:center}
.lay-rail-left :is(.lay-fold,button[data-category],.furnish-ai-entry .btn){width:44px;height:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;flex:none}
.lay-rail-left button[data-category]{border:1px solid transparent;background:transparent;color:var(--ink)}
.lay-rail-left button[data-category]:hover{background:var(--paper);border-color:var(--line)}
.lay-rail-left button[data-category].on{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.lay-rail-left button[data-category] svg{width:22px;height:22px}
.lay-rail-left .lay-fold .lay-rail-label{display:none}
.lay-rail-left .furnish-ai-entry{margin-top:auto;padding:8px 0 0;border-top:1px solid var(--line);width:100%;display:flex;justify-content:center}
.lay-rail-left .furnish-ai-entry .btn{font-size:0;gap:0}
.lay-rail-left .furnish-ai-entry .btn:disabled{opacity:1;background:var(--paper);border:1px solid var(--line);color:var(--muted);cursor:help}
.lay-rail-left :is(button,.btn):focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Wall faces stay usable beside a narrow name field, including on phones. */
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row.wall-row-named{
  grid-template-columns:44px minmax(0,1fr) auto;gap:6px;padding:6px;
}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row-named .wall-key{grid-column:1;grid-row:1;width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-name-input{grid-column:2;grid-row:1;min-height:44px}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-picker-area{grid-column:3;grid-row:1;text-align:right}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-sides{grid-column:2 / -1;grid-row:2;gap:6px;flex-wrap:wrap}
.lay[data-lens="space"] .lay-space-rail .wall-sides button{display:inline-flex;align-items:center;justify-content:center;
  width:auto;height:44px;min-height:44px;min-width:64px;padding:0 12px;font-size:12px;line-height:1;border-radius:8px}
.lay[data-lens="space"] .lay-space-rail .wall-sides button.on{color:#fff;background:var(--plan-blue)}
.lay[data-lens="space"] .lay-space-rail .wall-sides button:focus-visible{outline:2px solid var(--plan-blue);outline-offset:2px}
/* Saved dimensions are direct remove controls; live measurements stay passive. */
.lay-notes .lay-pin-remove{display:inline-flex;align-items:center;gap:6px;pointer-events:none;cursor:default;
  min-height:44px;min-width:44px;padding:4px 10px;border:1px solid var(--plan-blue);border-radius:20px;
  background:var(--surface);color:var(--plan-blue);font:inherit;font-size:12px;line-height:1.2;white-space:nowrap;
  transition:color .12s ease,border-color .12s ease,background-color .12s ease}
.lay-notes .lay-pin-cross{position:relative;pointer-events:auto;cursor:pointer;padding:0;border:0;background:none;color:inherit;font-size:18px;line-height:1;opacity:.6}
.lay-notes .lay-pin-cross::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.lay-notes .lay-pin-cross:hover,.lay-notes .lay-pin-cross:focus-visible{color:var(--plan-bad);opacity:1}
.lay-notes .lay-pin-cross:focus-visible{outline:2px solid var(--plan-bad);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){.lay-notes .lay-pin-remove{transition:none}}

/* Spatial ceiling evidence stays labelled while the inspection layer is open. */
.lay-ceiling-note{position:absolute;top:76px;left:16px;z-index:5;max-width:min(290px,calc(100% - 32px));padding:10px 14px;border:1px solid #dacdc6;border-radius:12px;background:#fffaf4;color:#4b2633;font:12px/1.5 var(--font-body,sans-serif);pointer-events:none}
.lay-ceiling-note[hidden]{display:none}
@media(max-width:600px){.lay-ceiling-note{top:116px;font-size:11px;max-width:230px}}

/* Show all measurements: chained dimension strings outside the 2D plan (plan-dimensions.mjs). */
.lay-lines .lay-pd-line,.lay-lines .lay-pd-tick{stroke:#300916;stroke-width:1.2}
.lay-lines .lay-pd-tick{stroke-width:1.6}
.lay-lines .lay-pd-ext{stroke:#300916;stroke-width:.8;opacity:.55}
.lay-lines .lay-pd-text{fill:#300916;font:600 14px/1 var(--font-body,Arial,sans-serif);paint-order:stroke;stroke:#faf6f0;stroke-width:4px;stroke-linejoin:round;font-variant-numeric:tabular-nums}
.lay-lines .lay-pd-open{fill:#6b5a55}
.lay-pd-note{position:absolute;left:16px;top:64px;z-index:5;padding:6px 10px;border-radius:10px;background:#fffaf4;color:#4b2633;font:12px/1.4 var(--font-body,sans-serif);pointer-events:none}
.lay[data-dark] .lay-lines .lay-pd-line,.lay[data-dark] .lay-lines .lay-pd-tick,.lay[data-dark] .lay-lines .lay-pd-ext{stroke:#faf6f0}
.lay[data-dark] .lay-lines .lay-pd-text{fill:#faf6f0;stroke:#1d1416}
.lay[data-dark] .lay-lines .lay-pd-open{fill:#d9cbc6}
.lay[data-dark] .lay-pd-note{background:#2a1d20;color:#faf6f0}
@media(max-width:600px){.lay-lines .lay-pd-text{font-size:13px}}
@media(max-width:600px){.lay-pd-note{font-size:11px;padding:4px 8px}}
/* Walls drawn from the tidied runs while measurements are on (stored walls untouched). */

.lay-pd-note .info-tip{pointer-events:auto}
.lay-pd-raw{pointer-events:auto;margin-left:8px;padding:2px 8px;border:0;border-radius:8px;background:#300916;color:#faf6f0;font:inherit;cursor:pointer}
.lay-pd-dropped{stroke:#c8a2ad;stroke-width:3;stroke-dasharray:6 5}

/* Every control over the model reads as a button: the ones that are not
   switched on still carry a thin outline (Render, light/dark, View). */
.lay-viewbar{gap:6px}
.lay .lay-viewbar .lay-viewbar-btn:not(.lay-more),.lay .lay-viewpick-btn{box-shadow:inset 0 0 0 1px rgba(48,9,22,.2)}
.lay .lay-viewbar .lay-viewbar-btn:not(.lay-more):hover,.lay .lay-viewpick-btn:hover{box-shadow:inset 0 0 0 1px rgba(48,9,22,.45)}
.lay .lay-viewbar .lay-viewbar-btn.on{box-shadow:inset 0 0 0 1px var(--ink)}
.lay .lay-viewmain{gap:6px}
.lay[data-dark] .lay-viewbar .lay-viewbar-btn:not(.lay-more),.lay[data-dark] .lay-viewpick-btn{box-shadow:inset 0 0 0 1px rgba(250,246,240,.28)}

/* Select surfaces and the walls list (Katie, 28 Oct): three clear buttons
   that say what they pick, a quiet Clear beside the heading, and walls as one
   tidy list — letter, name if given, area. The whole row selects. */
.lay[data-lens="space"] .lay-space-rail .lay-select-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.lay[data-lens="space"] .lay-space-rail .lay-select-clear{border:0;background:none;padding:2px 0;min-height:0;font-size:12px;
  color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lay[data-lens="space"] .lay-space-rail .lay-select-clear:hover{color:var(--ink)}
.lay[data-lens="space"] .lay-space-rail .lay-select-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 16px}
.lay[data-lens="space"] .lay-space-rail .lay-select-chips button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-width:0;min-height:58px;padding:9px 6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  color:var(--ink);font-size:12px;font-weight:500;line-height:1.1;cursor:pointer;box-shadow:none;transform:none;transition:border-color .15s,background .15s}
.lay[data-lens="space"] .lay-space-rail .lay-select-chips button svg{width:20px;height:20px;display:block;opacity:.8}
.lay[data-lens="space"] .lay-space-rail .lay-select-chips button:hover{border-color:var(--ink)}
.lay[data-lens="space"] .lay-space-rail .lay-select-chips button.active{border-color:var(--plan-blue);background:var(--plan-blue);color:#fff}
.lay[data-lens="space"] .lay-space-rail .lay-select-chips button.active svg{opacity:1}
.lay[data-lens="space"] .lay-space-rail .lay-select-chips button.is-missing{color:var(--muted);border-style:dashed}
.lay[data-lens="space"] .lay-space-rail .lay-select-chips button:focus-visible,
.lay[data-lens="space"] .lay-space-rail .lay-select-clear:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lay[data-lens="space"] .lay-space-rail .lay-walls-head{margin-bottom:8px}
.lay[data-lens="space"] .lay-space-rail .surface-picker{gap:0;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  max-height:320px;overflow:auto}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row.wall-row-named{grid-template-columns:26px minmax(0,1fr) auto;
  grid-template-areas:none;align-items:center;gap:10px;min-height:44px;padding:0 12px 0 10px;margin:0;
  border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;cursor:pointer}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row.wall-row-named:last-child{border-bottom:0}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row.wall-row-named:hover{background:var(--paper)}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row-named .wall-key{grid-column:1;grid-row:1;width:26px;min-width:26px;
  height:26px;min-height:0;padding:0;display:inline-grid;grid-template-columns:none;place-items:center;justify-content:center;text-align:center;border:0;border-radius:7px;background:var(--paper);color:var(--ink);font-size:11.5px;font-weight:600}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row-named:hover .wall-key{background:var(--line)}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-name-input{grid-column:2;grid-row:1;min-height:0;height:30px;
  padding:0 6px;margin-left:-6px;border:1px solid transparent;border-radius:6px;background:transparent;font-size:13px;cursor:text}
/* The name field says nothing until you reach for it. */
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-name-input::placeholder{color:var(--muted);opacity:0;transition:opacity .15s}
.lay[data-lens="space"] .lay-space-rail .wall-row-named:hover .wall-name-input::placeholder,
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-name-input:focus::placeholder{opacity:.6}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-name-input:focus{border-color:var(--ink);background:var(--surface)}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-picker-area{grid-column:3;grid-row:1;padding:0;text-align:right;
  font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-sides{grid-column:2 / -1;grid-row:2;margin:0 0 8px}
.lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-sides button{height:30px;min-height:30px;border:1px solid var(--line);background:var(--surface)}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row-named.active{background:#2f6db50f;box-shadow:inset 3px 0 0 var(--plan-blue)}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row-named.active .wall-key{background:var(--plan-blue);color:#fff}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-row-named.active .wall-picker-area{color:var(--ink)}
.lay[data-lens="space"] .lay-space-rail .surface-picker .wall-floor{margin:0;padding:10px 12px 4px;border-bottom:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){
  .lay[data-lens="space"] .lay-space-rail .lay-select-chips button,
  .lay[data-lens="space"] .lay-space-rail .wall-row-named .wall-name-input::placeholder{transition:none}}

/* Quote buttons: the portal's one primary button — dark brand, full width.
   The same in the listing and in the workspace. */
.lay[data-lens="space"] .lay-space-rail .finish-actions{flex-direction:column;align-items:stretch}
.lay[data-lens="space"] .lay-space-rail .quote-add,
.lay[data-lens="space"] .lay-space-rail .quote-pdf{display:flex;align-items:center;justify-content:center;width:100%;min-height:42px;
  padding:10px 18px;border:1px solid #300916;border-radius:10px;background:#300916;color:var(--on-brand,#faf6f0);
  font-size:13px;font-weight:500;filter:none;box-shadow:none;cursor:pointer}
.lay[data-lens="space"] .lay-space-rail .quote-add:hover,
.lay[data-lens="space"] .lay-space-rail .quote-pdf:hover{background:#4f0e18;border-color:#4f0e18;filter:none}
.lay[data-lens="space"] .lay-space-rail .fin-clear{width:100%;min-height:38px;border-radius:10px}
/* A menu opened from the bar takes the hint's place. */
.lay:has(.lay-bar .lay-pop:not([hidden])) #layHint{opacity:0;pointer-events:none}
/* A figure that changed glows once — it never counts through wrong values. */
@keyframes ws-figure-new{from{background:#2f6db526}to{background:transparent}}
.is-new{animation:ws-figure-new .7s ease-out;border-radius:4px}
@media (prefers-reduced-motion:reduce){.is-new{animation:none}}

/* The one line that says what to do next, beside the model. */
.lay-select-hint{margin:6px 0 0;color:var(--muted);font:400 13px/1.45 var(--sans)}
/* "How to move" on a narrow stage: just its "?", level with the bar; it opens as usual. */
.lay-keys.lay-keys-tight{padding:6px}
.lay-keys.lay-keys-tight .lay-keys-head>b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Measuring hint and active tools (Katie, 29 Oct): a quiet white card, not a black slab, and the
   on-state a neat rounded square the size of the button, not a tall pill. */
.lay .lay-toast{background:#fff;color:#36252A;border:1px solid #E7DCD5;border-radius:12px;padding:8px 14px;font-size:13px;line-height:1.45;box-shadow:0 6px 20px rgba(48,9,22,.10);max-width:min(420px,80%)}
.lay .lay-toast[data-tone="bad"]{background:#fff;color:#9B1C1C;border-color:#F0C9C9}
.lay .lay-bar .lay-icon.on,.workspace-layout .lay .lay-bar :is(button.on,.lay-icon.on){background:#300916;color:#FAF6F0;border-radius:10px;height:36px;min-width:36px;box-shadow:none}
/* One "Get a quote" card (Katie, 29 Oct): a plain row per job, what it covers, and one Add button. */
.lay-quote-one .quote-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid #E3D6CC}
.lay-quote-one .lay-head+.quote-row{border-top:0;padding-top:4px}
.lay-quote-one .quote-row b{display:block;font-size:14px;font-weight:600;color:#36252A}
.lay-quote-one .quote-row span{display:block;font-size:12.5px;color:#7A6A70;margin-top:2px}
.lay-quote-one .quote-row-add{flex:none;min-width:84px;height:34px;padding:0 14px;border-radius:9px;border:1px solid #300916;background:#300916;color:#FAF6F0;font:600 13px inherit;cursor:pointer}
.lay-quote-one .quote-row-add:hover{background:#4F0E18}
.lay-quote-one .quote-row-add.in{background:#fff;color:#300916;border-color:#D9C7CB}
.lay-quote-one .quote-summary:empty{display:none}
.lay-quote-one .quote-summary .lay-empty{display:none}
.lay-quote-one .quote-summary{margin:0 0 8px}
.lay-quote-one .quote-pick{border-top:1px solid #E3D6CC;padding-top:10px;margin-top:2px}
.lay-quote-one .quote-pick summary{cursor:pointer;font-size:13px;color:#705A62;list-style:none}
.lay-quote-one .quote-pick summary::after{content:" ▾"}
.lay-quote-one .quote-pick[open] summary{margin-bottom:8px}
.lay-quote-one .quote-pick .lay-select-clear{margin-top:8px}
.lay-space-rail .lay-panel[hidden]{display:none}
/* A long figure (Floor area withheld) wraps under its label instead of running into the next one. */
.lay[data-lens="space"] .lay-space-rail .lay-figures{grid-template-columns:repeat(3,minmax(0,auto))}
.lay[data-lens="space"] .lay-space-rail .lay-figures>div{min-width:0}
.lay[data-lens="space"] .lay-space-rail .lay-figures dd{white-space:normal;overflow-wrap:anywhere}
.lay-quote-one .quote-summary{background:#F7F1EC;border-radius:10px;padding:10px 12px}
.lay-quote-one .quantity-total strong{font-size:18px}
.lay-quote-one .quantity-total span{font-size:12.5px}
.lay-quote-one .quote-pdf,.lay-quote-one .quote-clear{height:32px;min-height:0;font-size:12.5px;margin-top:8px}
.lay[data-lens="space"] .lay-space-rail .lay-quote-one .quantity-total strong{font-size:20px;line-height:1.2}
.lay[data-lens="space"] .lay-space-rail .lay-quote-one :is(.quote-pdf,.quote-clear){height:32px;min-height:0;padding:0 12px;font-size:12.5px}
.lay-quote-one .quote-summary:has(>.lay-empty:only-child){display:none}

/* Measurements, as the reel draws them (brand lines): burgundy on a white halo, ivory ends ringed in
   burgundy, the reading on an ivory pill in burgundy. One look in the portal, /view and the embed. */
.lay{--measure:#4F0E18;--measure-ivory:#FAF6F0}
.lay-measure line{stroke-linecap:round}
.lay-measure-halo{stroke:rgba(255,255,255,.9);stroke-width:5.5}
.lay-measure-line{stroke:var(--measure);stroke-width:2.5}
.lay-measure-end{fill:var(--measure-ivory);stroke:var(--measure);stroke-width:2}
.lay-measure.lay-pin-on .lay-measure-line{stroke-width:3.5}
.lay-notes .lay-note-pin{background:var(--measure-ivory);border-color:transparent;color:var(--measure);font-weight:600;
  border-radius:999px;padding:3px 11px;box-shadow:0 3px 12px rgba(40,10,15,.22)}
.lay-notes .lay-note-pin-on{background:var(--measure);color:var(--measure-ivory)}
/* How far a measured point sits from the nearest corner, dotted to that corner; and the right angle a
   square measurement keeps with its starting wall (Evan, 3 Nov). */
.lay-near-line{stroke:var(--measure);stroke-width:2;stroke-dasharray:2 4;stroke-linecap:round}
.lay-near-corner{fill:#fff;stroke:var(--measure);stroke-width:1.5}
.lay-right-angle-halo{fill:none;stroke:rgba(255,255,255,.9);stroke-width:4.5}
.lay-right-angle{fill:none;stroke:var(--measure);stroke-width:2;stroke-dasharray:3.5 2.5;stroke-linejoin:miter}
.lay-notes .lay-note-near{background:#fff;border-color:#E7DCD5;color:#36252A;font-size:11px;padding:2px 8px;border-radius:999px}
.lay[data-dark] .lay-notes .lay-note-pin{background:var(--measure-ivory);border-color:transparent;color:var(--measure)}
/* Arrival guide (Katie, 30 Oct): readable at a glance — a white card in ink, not faint grey type. */
.lay .lay-hint{background:#fff;color:#36252A;border:1px solid #E7DCD5;border-radius:12px;padding:9px 16px;gap:18px;font-size:13px;font-weight:500;box-shadow:0 6px 20px rgba(48,9,22,.10)}
.lay .lay-hint svg{width:16px;height:16px;color:#4F0E18}

/* Keep ceiling visibility discoverable beside wall visibility, including touch. */
.lay-ceiling-control{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lay-ceiling-control[hidden]{display:none}
.lay-ceiling-control svg{width:18px;height:18px;flex:none}
/* Ceiling and openings (renderCeilingFacts): two figures, then short lists in the quote rows' rhythm. */
.lay-ceiling-panel .ws-ceiling-figures{grid-template-columns:repeat(2,minmax(0,1fr));margin:14px 0 0}
.lay-ceiling-panel .ws-ceiling-sub{margin:10px 0 6px;font-size:13px;line-height:1.45;color:var(--muted)}
.lay-ceiling-panel .ws-ceiling-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:16px 0 2px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink)}
.lay-ceiling-panel .ws-ceiling-head small{font-size:11.5px;font-weight:400;color:var(--muted)}
.lay-ceiling-panel .ws-ceiling-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.lay-ceiling-panel .ws-ceiling-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px;font-variant-numeric:tabular-nums}
.lay-ceiling-panel .ws-ceiling-list li:last-child{border-bottom:0}
.lay-ceiling-panel .ws-ceiling-list b{font-weight:500;color:var(--muted);white-space:nowrap}
.lay-ceiling-panel .ws-ceiling-list span{color:var(--ink);text-align:right}
.lay-ceiling-panel .ws-ceiling-dxf{display:block;width:100%;margin-top:8px;padding:8px;border:0;background:none;color:var(--muted,#705A62);font:inherit;font-size:13px;cursor:not-allowed}
/* Walking (layout-lens.mjs enterWalk, walk-mode.mjs): what the keys do, and on a touch screen a pad to hold. */
.lay-walk{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:12px;
  max-width:calc(100% - 32px);padding:8px 8px 8px 16px;border-radius:22px;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 6px 20px #221d1824;font-size:12.5px}
.lay-walk[hidden]{display:none}
/* Walking, the view switch and the scan chip step aside (a view switch would end the walk anyway) and the walk bar takes
   their corner, clear of the Render group on the right; never over either. */
.lay-walking .lay-viewmain,.lay-walking #layScanChip{display:none!important}
.lay-walking .lay-walk{left:14px;top:14px;transform:none;max-width:calc(100% - 280px)}
@media (max-width:560px){.lay-walking .lay-walk{left:10px;top:70px;max-width:calc(100% - 20px)}}
.lay-walk-text{display:flex;flex-direction:column;gap:2px;min-width:0}
/* The how-to wraps between its parts, never inside one ('Esc' left without 'stop'). */
.lay-walk-part{white-space:nowrap}
.lay-walk small{color:var(--muted,#6b625d);font-size:11.5px}
.lay-walk kbd{display:inline-block;min-width:16px;padding:1px 4px;margin:0 1px;border:1px solid var(--line);border-radius:4px;font:600 11px/1.3 inherit;text-align:center;background:var(--bg,#faf7f2)}
.lay-walk>button.lay-walk-backdrop{background:transparent;color:var(--ink);border:1px solid var(--line)}
.lay-walk>button.lay-walk-backdrop[aria-pressed=true]{border-color:var(--ink)}
/* The greenery backdrop is illustrative: a quiet tag under the Render group while it shows. */
.lay-viewbar .lay-backdrop-btn[aria-pressed=true]{background:var(--ink);color:var(--surface)}
.lay-backdrop-note{position:absolute;right:14px;top:60px;z-index:4;padding:3px 10px;border-radius:12px;background:#ffffffcc;color:#4a423d;font-size:11px;pointer-events:none}
.lay-backdrop-note[hidden]{display:none}
@media (max-width:560px){.lay-backdrop-note{right:auto;top:auto;left:50%;bottom:76px;transform:translateX(-50%)}}
.lay-walk>button{border:0;border-radius:16px;background:var(--ink);color:var(--surface);padding:7px 14px;font-size:12px;white-space:nowrap}
/* First person (layout-lens.mjs walkReticle): the pointer while the mouse is locked to the view. A dot to look with, a crosshair to
   measure with, a ring over a piece that can be picked up, a filled ring while one is carried. White with a dark edge, so it reads on any surface. */
.lay-reticle{position:absolute;left:50%;top:50%;width:0;height:0;z-index:3;pointer-events:none}
.lay-reticle[hidden]{display:none}
.lay-looking #layFloat{display:none!important}
.lay-reticle i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #0009,0 1px 3px #0006}
.lay-reticle b{position:absolute;left:0;top:18px;transform:translateX(-50%);white-space:nowrap;font:600 11.5px/1.2 inherit;color:#fff;
  text-shadow:0 0 3px #000,0 1px 2px #000a}
.lay-reticle[data-mode=measure] i{left:-13px;top:-13px;width:26px;height:26px;border-radius:0;background:
  linear-gradient(#fff,#fff) center/2px 100% no-repeat,linear-gradient(#fff,#fff) center/100% 2px no-repeat;box-shadow:none;
  filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1.5px #000c) drop-shadow(0 1px 2px #0008)}
.lay-reticle[data-mode=piece] i{left:-10px;top:-10px;width:20px;height:20px;background:none;border:2px solid #fff;box-sizing:border-box}
.lay-reticle[data-mode=hold] i{left:-10px;top:-10px;width:20px;height:20px;background:#ffffff80;border:2px solid #fff;box-sizing:border-box}
/* The tool wheel, right-click while walking: over the view, never taking the pointer (the lens reads the mouse itself). */
.lay-wheel{position:absolute;left:50%;top:50%;width:340px;height:340px;margin:-170px 0 0 -170px;z-index:5;pointer-events:none;color:#fff;
  font:500 12px/1.2 Archivo,system-ui,sans-serif;animation:lay-wheel-in .12s ease-out}
.lay-wheel[hidden]{display:none}
/* The Walk button dragged onto the floor: the figure on the pointer, hanging until it is over somewhere to stand. */
#layWalk{touch-action:none}
.lay-peg{position:fixed;left:-20px;top:-34px;z-index:2147483001;width:40px;height:40px;display:grid;place-items:center;pointer-events:none;
  border-radius:50%;background:#fff;color:#a3949a;box-shadow:0 2px 10px #0005}
.lay-peg svg{width:24px;height:24px;transform:rotate(-16deg);transition:transform .12s}
.lay-peg.on{background:var(--brand,#5a1a2b);color:#fff}
.lay-peg.on svg{transform:none}
@media (prefers-reduced-motion:reduce){.lay-peg svg{transition:none}}
@keyframes lay-wheel-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lay-wheel{animation:none}}
.lay-wheel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lay-wheel>svg path{fill:#1c0b10d9;stroke:#ffffff26;stroke-width:1;transition:fill .08s}
.lay-wheel>svg path.on{fill:var(--brand,#5a1a2b);stroke:#ffffff80}
.lay-wheel>svg path.off{fill:#1c0b1099}
.lay-wheel span{position:absolute;left:50%;top:50%;width:92px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.lay-wheel span svg{position:static;width:22px;height:22px}
.lay-wheel span b{font-weight:500}
.lay-wheel span.off{opacity:.45}
.lay-wheel em{position:absolute;left:50%;top:50%;width:104px;height:104px;display:grid;place-items:center;padding:12px;box-sizing:border-box;border-radius:50%;transform:translate(-50%,-50%);text-align:center;font-style:normal;font-size:11px;background:#1c0b10d9;color:#ffffffd9}
/* Full screen (layout-lens.mjs fullView): the stage pinned over the page, the page held still beneath it. A phone gets
   the button in place of View options, whose standing views, look and Render it did not need (Evan, 3 Nov). */
.lay-full-btn{display:none}
.lay-full-btn svg{width:18px;height:18px}
.lay-full .lay-full-btn{display:inline-flex}
/* A phone on its side is wider than the phone layout: it keeps View options, and gets full screen beside it. */
@media (pointer:coarse) and (max-height:600px){.lay-viewbar .lay-full-btn{display:inline-flex}}
@media (max-width:600px){
  .lay-viewbar .lay-more{display:none!important}
  .lay-viewbar .lay-full-btn{margin:0;display:inline-flex;align-items:center;justify-content:center;width:36px;height:30px;padding:0}
}
/* Stretched, and on top: a phone's stage stands align-self:start (sticky under the header), which kept a pinned stage
   only as tall as its picture, under the library sheet (z 6 vs 11), 12 Nov. */
.lay-full .lay-stage{position:fixed!important;inset:0!important;z-index:2147483000!important;align-self:stretch!important;justify-self:stretch!important;width:auto!important;height:auto!important;
  min-height:0!important;max-height:none!important;margin:0!important;border-radius:0!important;background:var(--bg,#f5f1ea)}
html.lay-full-page,html.lay-full-page body{overflow:hidden!important;overscroll-behavior:none}
/* Spin (layout-lens.mjs spinShow): the model alone, full screen, turning. Every tool, label and hint steps aside; one quiet
   Stop spinning shows while the pointer moves and fades when it rests, with the cursor. */
.lay-spin-stop{display:none}
.lay-spin-show .lay-stage>:not(#layCanvas,.lay-spin-stop),.lay-spin-show #layCanvas>:not(canvas){display:none!important}
.lay-spin-show .lay-spin-stop{display:block;position:absolute;right:calc(20px + env(safe-area-inset-right));bottom:calc(20px + env(safe-area-inset-bottom));z-index:6;
  min-height:40px;padding:0 18px;border:1px solid rgba(48,9,22,.14);border-radius:999px;background:rgba(250,246,240,.86);color:#300916;
  font:500 13px/1 inherit;cursor:pointer;opacity:1;transition:opacity .6s ease;touch-action:manipulation;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lay-spin-show.lay-spin-idle .lay-spin-stop{opacity:0}
.lay-spin-show.lay-spin-idle .lay-stage{cursor:none}
.lay-spin-show .lay-stage canvas{cursor:inherit!important}
.lay[data-dark] .lay-spin-stop{background:rgba(42,10,15,.82);border-color:rgba(250,246,240,.14);color:#f3e9e4}
@media (hover:hover){.lay-spin-stop:hover{opacity:1!important;background:#faf6f0}}
/* Just after the stage takes or gives back the screen: taps reach only the stage, never page chrome that moved under the finger. */
html.lay-settling body :not(.lay-stage,.lay-stage *){pointer-events:none!important}
/* Walking with a finger (walkTouch): the space's name and Done along the top, the stick above a small toolbar, the Inscena
   mark across from the stick. The zoom, hints and view switch step aside; so do the tools that mean nothing at eye level. */
.lay-stick,.lay-walk-mark{display:none}
.lay-touch-walk :is(.lay-zoom,#layKeys,#layHint,.lay-viewbar){display:none!important}
.lay-touch-walk .lay-bar :is(#layFrame,#layCamera,.lay-sep){display:none!important}
.lay-touch-walk .lay-bar{left:50%;right:auto;bottom:calc(10px + env(safe-area-inset-bottom));transform:translateX(-50%);width:auto;max-width:calc(100% - 20px);gap:2px;padding:4px;border-radius:16px;z-index:5;justify-content:center}
.lay-touch-walk .lay-walk-mark{display:block;position:absolute;right:calc(16px + env(safe-area-inset-right));bottom:calc(88px + env(safe-area-inset-bottom));z-index:4;opacity:.62;pointer-events:none;line-height:0}
.lay-walk-point{display:none}
/* Measure's own Undo and Clear all (layout-lens.mjs measureBar): placed under the 2D | 3D | Walk switch while Measure is on. */
.lay-measure-tools{position:absolute;left:14px;top:66px;z-index:4;display:flex;align-items:center;gap:2px;padding:4px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 6px 24px #221d181f}
.lay-measure-tools[hidden]{display:none}
.lay-measure-tools button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;min-width:44px;padding:0 12px;
  border:0;border-radius:10px;background:transparent;color:var(--ink);font:600 13px/1 inherit;cursor:pointer;touch-action:manipulation}
.lay-measure-tools button+button{border-left:1px solid var(--line);border-radius:0 10px 10px 0}
@media (hover:hover){.lay-measure-tools button:hover:not(:disabled){background:var(--paper,#f4efe9)}}
.lay-measure-tools button:disabled{color:var(--muted);opacity:.5;cursor:default}
.lay-measure-tools svg{width:16px;height:16px;flex:none}
/* A finger gets a 44 px target. */
@media (pointer:coarse),(max-width:700px){.lay-measure-tools button{min-height:44px;padding:0 14px;font-size:14px}}
/* Measuring on a phone: small and quiet in the top right corner, beside the full-screen button. */
@media (pointer:coarse) and (max-width:700px),(pointer:coarse) and (max-height:600px){
 .lay-measure-tools{left:auto!important;right:10px;padding:0;gap:0;background:rgba(250,246,240,.82);border:1px solid rgba(48,9,22,.12);border-radius:10px;box-shadow:none}
 .lay-measure-tools button{min-height:32px;min-width:36px;padding:0 9px;font-size:12px;font-weight:500;position:relative}
 .lay-measure-tools button::after{content:"";position:absolute;inset:-6px 0}
 .lay-measure-tools svg{width:14px;height:14px}
 .lay-measure-tools #layMeasureUndo span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
.lay[data-measuring] :has(>[data-learn]){display:none}
.lay-measure-tip{position:absolute;left:50%;bottom:92px;z-index:4;transform:translateX(-50%);max-width:80%;padding:3px 9px;border-radius:999px;background:rgba(250,246,240,.86);color:#300916;font-size:12px;line-height:16px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s}
.lay-measure-tip.on{opacity:1}
.lay-loupe{position:absolute;left:0;top:0;z-index:6;width:116px;height:116px;border-radius:50%;box-shadow:0 0 0 2px #FAF6F0,0 0 0 3px rgba(48,9,22,.35),0 6px 18px rgba(48,9,22,.28);pointer-events:none}
.lay-loupe[hidden]{display:none}
.lay[data-dark] .lay-measure-tools{background:rgba(42,10,15,.82);border-color:rgba(250,246,240,.14)}
.lay[data-dark] .lay-measure-tools button{color:#f3e9e4}
.lay[data-dark] .lay-measure-tools button+button{border-left-color:rgba(250,246,240,.14)}
.lay-touch-walk .lay-walk-point:not([hidden]){display:block;position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(128px + env(safe-area-inset-bottom));z-index:5;min-height:50px;padding:0 20px;border:0;border-radius:999px;background:var(--brand,#5a1a2b);color:#fff;font:600 15px/1 inherit;box-shadow:0 4px 18px #221d1838;touch-action:manipulation}
.lay-touch-walk .lay-walk-point:active{transform:scale(.96)}
.lay-walk-mark img{display:block;width:auto;height:22px;filter:drop-shadow(0 1px 3px #221d1866)}
/* The stick, homed (Katie, 7 Nov): smaller, in the bottom-left corner, and the tool bar beside it on its baseline, never over it. */
.lay-touch-walk .lay-stick{display:block;position:absolute;left:calc(12px + env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:5;width:88px;height:88px;border-radius:50%;background:#faf6f04d;border:1.5px solid #faf6f0d9;
  box-shadow:0 4px 16px #3009162e,inset 0 0 0 1px #30091614;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);touch-action:none}
.lay-stick i{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:#faf6f0;
  box-shadow:0 2px 8px #30091640,inset 0 0 0 1px #30091626;transition:transform .16s ease-out;pointer-events:none}
.lay-stick.held i{transition:none}
.lay-touch-walk .lay .lay-bar.lay-bar.lay-bar{left:calc(12px + 88px + 10px + env(safe-area-inset-left));right:auto;bottom:calc(12px + env(safe-area-inset-bottom));
  transform:none;margin:0;width:max-content;max-width:calc(100% - 122px - env(safe-area-inset-left) - env(safe-area-inset-right));
  justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
/* Walking, Done ends the walk and Plain / Greenery sits up top with it: their bar twins step aside, so four tools fit beside the stick at 320. */
.lay-touch-walk .lay-bar :is(#layWalk,#layBarBackdrop,#layBarTheme){display:none!important}
/* Zoomed in by a pinch on the walk: how far, and one tap back (walkLens). */
.lay-walk-zoom{display:none}
.lay-touch-walk .lay-walk-zoom:not([hidden]){display:block;position:absolute;left:50%;top:calc(72px + env(safe-area-inset-top));transform:translateX(-50%);z-index:5;
  min-height:36px;padding:0 14px;border:1px solid #e4d8d3;border-radius:999px;background:#faf6f0eb;color:#300916;font:600 13px/1 inherit;
  box-shadow:0 2px 10px #30091614;touch-action:manipulation}
.lay-touch-walk .lay-walk-zoom::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.lay-touch-walk .lay-walk{left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top));
  transform:none;max-width:none;padding:6px 6px 6px 14px;gap:8px;font-size:13px}
.lay-touch-walk .lay-walk-text>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.lay-walk-name{font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lay-walk-tip{animation:layWalkTip .4s ease 6s forwards;overflow:hidden;max-height:18px}
@keyframes layWalkTip{to{opacity:0;max-height:0}}
@media (prefers-reduced-motion:reduce){.lay-walk-tip{animation-duration:.01s}}

/* ---- Walk on a phone, v2 (Katie, 7 Nov: "the word plain feels non intuitive ... the inscena logo looks a bit random ...
   shouldn't it have the 2D 3D buttons somewhere?"). One control everywhere on a phone: 2D | 3D | Walk, top-left, as in the
   dollhouse; walking, Walk is on and 3D is the way out. No card, no name (the page has it), no Plain, no mark: the leaf
   beside the stick is the outside view, and what to do is one quiet pill, fading. Burgundy on ivory, the stick's shadow. */
.lay-viewmain .lay-view-switch .lay-view-walk{display:none}
@media(max-width:700px){
  .lay-viewmain .lay-view-switch .lay-view-walk{display:inline-block}
  .lay-viewmain .lay-view-switch button.on{background:#300916;color:#faf6f0}
  /* The pill has Walk: the bar's own Walk icon would be the same thing twice, and its slot lets every tool fit at 320. */
  .lay .lay-bar #layWalk{display:none!important}
}
.lay-phone-walk.lay-walking .lay-stage .lay-viewmain{display:flex!important;top:calc(10px + env(safe-area-inset-top));left:calc(10px + env(safe-area-inset-left));z-index:6;
  background:#faf6f0f2;border-color:#e4d8d3;box-shadow:0 4px 16px #3009162e}
.lay-phone-walk.lay-walking .lay-viewmain .lay-viewpick{display:none!important}
.lay-phone-walk.lay-walking .lay-viewmain .lay-view-switch button:not(.on){color:#300916}
.lay-phone-walk .lay-walk.lay-walk{left:50%;right:auto;top:calc(62px + env(safe-area-inset-top));transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);
  padding:0;gap:0;border:0;background:none;box-shadow:none;pointer-events:none}
.lay-walk-pill{display:block;padding:9px 14px;border:1px solid #e4d8d3;border-radius:999px;background:#faf6f0eb;color:#300916;
  font:500 13px/1.3 var(--sans,inherit);text-align:center;box-shadow:0 4px 16px #3009162e;white-space:normal}
.lay-walk-fade{animation:layWalkFade .4s ease forwards}
@keyframes layWalkFade{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.lay-walk-fade{animation-duration:.01s}}
.lay-phone-walk.lay-touch-walk .lay-bar #layBarBackdrop{display:inline-flex!important}
.lay-phone-walk .lay-bar #layCeilingToggle{display:none!important}
.lay-phone-walk .lay-walk-zoom.lay-walk-zoom:not([hidden]){left:auto;right:calc(10px + env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top));transform:none;
  min-height:38px;box-shadow:0 4px 16px #3009162e}
/* No mark on a phone walk: the page around it says whose it is. An embed sits on someone else's page, so there the
   wordmark stays, small, on the pill's row in the top-right corner (it steps aside while the zoom chip is up). */
.lay-phone-walk .lay-walk-mark{display:none}
.is-embed-listing .lay-phone-walk .lay-walk-mark{display:block;top:calc(22px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));bottom:auto;opacity:.7}
.is-embed-listing .lay-phone-walk .lay-walk-mark img{height:14px;filter:none}
.is-embed-listing .lay-phone-walk:has(.lay-walk-zoom:not([hidden])) .lay-walk-mark{display:none}

/* Modify's Delete an area: a blue dotted shape on the floor, glowing once it is closed and held selected. */
.lay-trimming{cursor:crosshair!important}
.lay-trim{fill:#0ea5e91f;stroke:var(--ghost-blue);stroke-width:3;stroke-dasharray:.1 8;stroke-linecap:round;stroke-linejoin:round}
.lay-trim-held{fill:#0ea5e92e;filter:drop-shadow(0 0 5px #0ea5e9) drop-shadow(0 0 12px #0ea5e999);animation:lay-trim-glow 1.6s ease-in-out infinite}
.lay-trim-refused{fill:#64748b1f;stroke:#64748b}
.lay-trim-open{stroke:none;fill:#0ea5e914}
.lay-trim-edge{stroke:var(--ghost-blue);stroke-width:3;stroke-dasharray:.1 8;stroke-linecap:round}
.lay-trim-corner{fill:#fff;stroke:var(--ghost-blue);stroke-width:2}
.lay-trim-corner.on{fill:var(--ghost-blue)}
.lay-trim-snap{fill:none;stroke:var(--ghost-blue);stroke-width:2}
.lay-trim-guide{stroke:var(--ghost-blue);stroke-width:1;opacity:.75}
.lay-note.lay-note-trim{background:var(--ghost-blue);border-color:var(--ghost-blue);color:#04283d;font-weight:600}
@keyframes lay-trim-glow{50%{filter:drop-shadow(0 0 2px #0ea5e9) drop-shadow(0 0 5px #0ea5e966)}}
@media(prefers-reduced-motion:reduce){.lay-trim-held{animation:none}}

/* Spin the plan: a dial above the zoom, on the plan only; 44 px, turned by finger or mouse. */
.lay-plan-turn{width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:#4f0e18;cursor:grab;touch-action:none;box-shadow:0 6px 24px #221d181a}
.lay-plan-turn[hidden]{display:none}
.lay-plan-turn:active{cursor:grabbing}
.lay-plan-turn:focus-visible{outline:2px solid #4f0e18;outline-offset:2px}
.lay-plan-turn svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.lay-plan-ring{stroke:#d9c7cb}
.lay-plan-home{transform-box:view-box;transform-origin:22px 22px;transform:rotate(var(--plan-home,0deg));stroke-width:2.4}
.lay-plan-arrows{opacity:.72}
/* A phone has no zoom cluster (it pinches), so on the plan the dial stands alone at the top right of the stage. */
@media (max-width:760px){
 .lay .lay-zoom:has(.lay-plan-turn:not([hidden])){display:flex!important;top:68px;right:10px;bottom:auto}
 .lay .lay-zoom:has(.lay-plan-turn:not([hidden])) .lay-zoom-row{display:none}
}
/* With a recorded north the dial is the compass: the needle replaces the arrows and turns with the plan. */
.lay-plan-north{transform-box:view-box;transform-origin:22px 22px;transform:rotate(var(--plan-north,0deg));stroke:none;fill:#4f0e18}
.lay-plan-south{fill:#d9c7cb}
.lay-plan-north text{font:700 9px/1 var(--sans,Arial,sans-serif);fill:#4f0e18;stroke:none}
.lay-plan-turn.has-north .lay-plan-arrows,.lay-plan-turn.has-north .lay-plan-home{display:none}
.lay-tool-hint{pointer-events:none}
/* Your own image in an artwork (art-image.mjs): the photo as the frame shows it, and its choices. */
.lay-art{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.lay-art .lay-wide{margin-top:0;display:flex;align-items:center;justify-content:center;gap:7px}
.lay-art .lay-wide svg{width:17px;height:17px}
.lay-art .lay-options{margin-bottom:0}
.lay-art .lay-link{align-self:flex-start;margin-top:0}
.lay-art .lay-source{margin:0}

.lay-art-clash{border:1px solid #b7790b55;background:#b7790b10;border-radius:9px;padding:9px 10px}
.lay-art-clash p{margin:0 0 8px;font-size:12.5px;line-height:1.45;color:var(--ink)}
.lay-art-input{display:none}
.lay-stage.lay-art-drop{outline:2px dashed var(--accent,#7e1523);outline-offset:-6px}
/* A refused typed value: the reason sits under the row of boxes it came from (neutral, not an error red). */
.lay-refused{margin:4px 0 8px;padding:6px 8px;border-left:2px solid var(--ink,#300916);font-size:12px;line-height:1.35;color:var(--ink,#300916);background:color-mix(in srgb,var(--ink,#300916) 6%,transparent);border-radius:0 6px 6px 0}