/* WallMock room product & placement inspector (wm-inspector/1). Every rule is scoped under .wmi; no global selectors, no global tokens.
   It reads the Studio's tokens with fallbacks (--paper, --surface, --sunk, --line, --line-strong, --ink, --ink-2, --muted, --accent,
   --accent-ink, --accent-soft, --focus, --warn(-soft), --bad(-soft), --ok, --sans, --display, --r, --r-sm, --tap) and the Studio's motion
   tokens --t-fast / --t / --ease (the craft pass's names). No token additions are needed; every token has a fallback here. */
.wmi {
  --wmi-bg: var(--surface, #fff); --wmi-paper: var(--paper, #f7f6f2); --wmi-sunk: var(--sunk, #efede7);
  --wmi-line: var(--line, #e7e4dc); --wmi-line-strong: var(--line-strong, #d3cec3);
  --wmi-ink: var(--ink, #141816); --wmi-ink-2: var(--ink-2, #4b524e); --wmi-muted: var(--muted, #6f7772);
  --wmi-accent: var(--accent, #1f3b2d); --wmi-accent-ink: var(--accent-ink, #fff); --wmi-accent-soft: var(--accent-soft, #e8f0e9);
  --wmi-focus: var(--focus, #2d6a4f); --wmi-warn: var(--warn, #7a4b12); --wmi-warn-soft: var(--warn-soft, #f8ecd9);
  --wmi-bad: var(--bad, #8a2a1d); --wmi-bad-soft: var(--bad-soft, #f6e1dc); --wmi-ok: var(--ok, #25613f);
  --wmi-r: var(--r, 10px); --wmi-r-sm: var(--r-sm, 7px); --wmi-tap: var(--tap, 44px);
  --wmi-fast: var(--t-fast, 180ms); --wmi-mid: var(--t, 260ms); --wmi-ease: var(--ease, cubic-bezier(.2, .7, .2, 1));
  --wmi-pad: 24px;
  font: 400 15px/1.45 var(--sans, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Arial, sans-serif);
  color: var(--wmi-ink); -webkit-font-smoothing: antialiased; height: 100%; min-height: 0;
}
.wmi *, .wmi *::before, .wmi *::after { box-sizing: border-box; }
.wmi :where(h2, h3, p, fieldset, legend, figure) { margin: 0; padding: 0; border: 0; }
.wmi :where(button, input, select) { font: inherit; color: inherit; }
.wmi .wmi-sr { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; pointer-events: none; }
.wmi .wmi-ico { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wmi :focus-visible { outline: 3px solid var(--wmi-focus); outline-offset: 2px; border-radius: 8px; }

/* ---- shell (desktop panel) ---- */
.wmi-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--wmi-bg); container: wmi / inline-size; }
.wmi-shell.is-panel { border-left: 1px solid var(--wmi-line); }
.wmi-head { display: flex; align-items: flex-start; gap: 10px; padding: 18px var(--wmi-pad) 10px calc(var(--wmi-pad) - 10px); }
.wmi-titles { min-width: 0; flex: 1; padding-top: 6px; }
.wmi-title { font: 650 1.3rem/1.2 var(--display, inherit); letter-spacing: -.021em; color: var(--wmi-ink); text-wrap: balance; }
.wmi-sub { display: flex; align-items: center; gap: 2px; margin-top: 2px; font-size: .86rem; color: var(--wmi-muted); }
.wmi-scope { margin: 0 var(--wmi-pad) 8px; padding: 10px 12px; border-radius: var(--wmi-r-sm); background: var(--wmi-paper); color: var(--wmi-ink-2); font-size: .86rem; animation: wmi-in var(--wmi-mid) var(--wmi-ease); }
.wmi-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 2px var(--wmi-pad) 28px; outline: none; }
.wmi-body.is-locked { opacity: .55; transition: opacity var(--wmi-mid) var(--wmi-ease); cursor: progress; }
.wmi-state:focus { outline: none; }
.wmi-state:focus-visible { outline: 3px solid var(--wmi-focus); outline-offset: 2px; border-radius: 6px; }
.wmi-state.is-busy .wmi-dot, .wmi-state.is-busy.is-dirty .wmi-dot { background: var(--wmi-accent); box-shadow: none; animation: wmi-pulse 1.1s ease-in-out infinite; }
.wmi-shown { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--wmi-line); font-size: .8rem; color: var(--wmi-muted); }

/* ---- buttons ---- */
.wmi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--wmi-tap); padding: 0 16px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--wmi-accent); font-weight: 600; font-size: .93rem; line-height: 1.2; cursor: pointer; white-space: nowrap;
  transition: background-color var(--wmi-fast) var(--wmi-ease), border-color var(--wmi-fast) var(--wmi-ease), color var(--wmi-fast) var(--wmi-ease), transform var(--wmi-fast) var(--wmi-ease), box-shadow var(--wmi-fast) var(--wmi-ease); }
.wmi-btn:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.98); }
.wmi-btn.is-primary { background: var(--wmi-accent); color: var(--wmi-accent-ink); padding: 0 22px; box-shadow: 0 1px 2px rgba(20, 24, 22, .12); }
.wmi-btn.is-primary:hover:not(:disabled):not([aria-disabled="true"]) { background: color-mix(in oklab, var(--wmi-accent) 88%, black); }
.wmi-btn.is-secondary { background: var(--wmi-bg); color: var(--wmi-ink); border-color: var(--wmi-line-strong); }
.wmi-btn.is-secondary:hover:not(:disabled), .wmi-btn.is-quiet:hover:not(:disabled) { background: var(--wmi-sunk); }
.wmi-btn.is-secondary.is-on { background: var(--wmi-accent-soft); border-color: color-mix(in oklab, var(--wmi-accent) 45%, transparent); color: var(--wmi-accent); }
.wmi-btn.is-quiet { padding: 0 12px; }
.wmi-btn.is-danger { color: var(--wmi-bad); }
.wmi-btn.is-danger-fill { background: var(--wmi-bad); color: #fff; }
.wmi-btn:disabled, .wmi-btn[aria-disabled="true"] { cursor: not-allowed; }
.wmi-btn.is-primary:disabled, .wmi-btn.is-primary[aria-disabled="true"] { background: var(--wmi-sunk); color: color-mix(in oklab, var(--wmi-muted) 85%, black); box-shadow: none; }
.wmi-btn.is-quiet:disabled, .wmi-btn.is-secondary:disabled, .wmi-btn.is-quiet[aria-disabled="true"] { color: color-mix(in oklab, var(--wmi-muted) 80%, white); }
.wmi-btn.is-quiet[aria-disabled="true"]:hover { background: transparent; }
.wmi-icon-btn { display: inline-grid; place-items: center; width: var(--wmi-tap); height: var(--wmi-tap); flex: none; border: 0; border-radius: 999px; background: transparent; color: var(--wmi-ink-2); cursor: pointer;
  transition: background-color var(--wmi-fast) var(--wmi-ease), color var(--wmi-fast) var(--wmi-ease); }
.wmi-icon-btn:hover { background: var(--wmi-sunk); color: var(--wmi-ink); }
.wmi-icon-btn.is-mini { width: var(--wmi-tap); height: var(--wmi-tap); margin: -13px -6px -13px -4px; }
.wmi-link { border: 0; background: none; padding: 10px 0 10px 10px; min-height: var(--wmi-tap); color: var(--wmi-accent); font-weight: 600; font-size: .86rem; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color var(--wmi-fast) var(--wmi-ease); }
.wmi-link:hover { text-decoration-color: currentColor; }
.wmi-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wmi-row.is-end { justify-content: flex-end; }

/* ---- product tabs ---- */
.wmi-tabs-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 4px; }
.wmi-tabs { display: contents; }
.wmi-tab { display: inline-flex; align-items: center; gap: 8px; min-height: var(--wmi-tap); max-width: 100%; padding: 0 14px 0 10px; border: 1px solid var(--wmi-line); border-radius: 999px; background: var(--wmi-bg); color: var(--wmi-ink-2);
  font-size: .9rem; font-weight: 550; white-space: nowrap; cursor: pointer;
  transition: background-color var(--wmi-fast) var(--wmi-ease), border-color var(--wmi-fast) var(--wmi-ease), color var(--wmi-fast) var(--wmi-ease), box-shadow var(--wmi-fast) var(--wmi-ease); }
.wmi-tab:hover { border-color: var(--wmi-line-strong); color: var(--wmi-ink); }
.wmi-tab.is-on { background: var(--wmi-ink); border-color: var(--wmi-ink); color: #fff; box-shadow: 0 4px 12px -6px rgba(20, 24, 22, .45); }
.wmi-tab.is-warn:not(.is-on) { border-color: color-mix(in oklab, var(--wmi-warn) 45%, transparent); background: var(--wmi-warn-soft); }
.wmi-tab-dot { width: 18px; height: 18px; border-radius: 5px; background: var(--sw, var(--wmi-sunk)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.wmi-tab-dot.is-canvas { background: linear-gradient(135deg, #efe7da, #d6c9b6); }
.wmi-tab.is-on .wmi-tab-dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.wmi-tab-n { font-variant-numeric: tabular-nums; opacity: .6; font-size: .8rem; }
.wmi-tab-t { overflow: hidden; text-overflow: ellipsis; }
.wmi-add { display: inline-flex; align-items: center; gap: 6px; min-height: var(--wmi-tap); padding: 0 14px 0 11px; border: 1px dashed var(--wmi-line-strong); border-radius: 999px; background: transparent;
  color: var(--wmi-accent); font-size: .9rem; font-weight: 600; cursor: pointer; transition: background-color var(--wmi-fast) var(--wmi-ease), border-color var(--wmi-fast) var(--wmi-ease); }
.wmi-add:hover { background: var(--wmi-accent-soft); border-color: color-mix(in oklab, var(--wmi-accent) 40%, transparent); border-style: solid; }
.wmi-count { font-size: .78rem; font-weight: 500; color: var(--wmi-muted); font-variant-numeric: tabular-nums; }
.wmi-count.is-full { padding: 0 6px; flex: none; }

/* ---- sections ---- */
.wmi-product { animation: wmi-in var(--wmi-mid) var(--wmi-ease); }
.wmi-sec { padding: 18px 0 20px; }
.wmi-sec + .wmi-sec { border-top: 1px solid var(--wmi-line); }
.wmi-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; margin-bottom: 12px; }
.wmi-sec-head h3 { font: 650 1rem/1.2 var(--display, inherit); letter-spacing: -.012em; color: var(--wmi-ink); }
.wmi-field { display: block; margin-top: 16px; min-width: 0; }
.wmi-field.is-grow { flex: 1; margin-top: 0; }
.wmi-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: .88rem; font-weight: 600; color: var(--wmi-ink); }
.wmi-hint { font-size: .83rem; color: var(--wmi-muted); margin-top: 8px; }
.wmi-note { margin-top: 12px; padding: 10px 12px; border-radius: var(--wmi-r-sm); background: var(--wmi-paper); color: var(--wmi-ink-2); font-size: .86rem; animation: wmi-in var(--wmi-mid) var(--wmi-ease); }
.wmi-note.is-warn { background: var(--wmi-warn-soft); color: var(--wmi-warn); }
.wmi-note.is-bad { background: var(--wmi-bad-soft); color: var(--wmi-bad); display: grid; gap: 10px; justify-items: start; }

/* ---- material swatches ---- */
.wmi-sw-group { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 8px; }
.wmi-sw { position: relative; display: grid; gap: 5px; justify-items: stretch; align-content: start; cursor: pointer; min-width: 0; }
.wmi-sw-art { position: relative; display: block; aspect-ratio: 1; border-radius: 11px; background: var(--wmi-paper); box-shadow: inset 0 0 0 1px var(--wmi-line);
  transition: box-shadow var(--wmi-fast) var(--wmi-ease), transform var(--wmi-fast) var(--wmi-ease), background-color var(--wmi-fast) var(--wmi-ease); }
.wmi-sw:hover .wmi-sw-art { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--wmi-line-strong), 0 6px 14px -10px rgba(20, 24, 22, .35); }
/* the frame: a moulding in the profile's own colour and material around a small canvas, at the product's frame thickness */
.wmi-sw-art::before { content: ""; position: absolute; inset: 17%; border-radius: 2px; background: var(--sw, #888);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .18), 0 7px 12px -7px rgba(20, 24, 22, .55); }
.wmi-sw-art.is-wood::before { background: repeating-linear-gradient(97deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px, rgba(255, 255, 255, .06) 3px 4px, transparent 4px 7px), var(--sw, #8a6a4a); }
.wmi-sw-art.is-metal::before { background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 38%, rgba(0, 0, 0, .16) 62%, rgba(255, 255, 255, .3) 86%), var(--sw, #b9bcc0); }
.wmi-sw-art.is-painted::before { background: var(--sw, #1b1b1b); }
.wmi-sw-canvas { position: absolute; inset: calc(17% + var(--fpw, 6px)); border-radius: 1px; background: linear-gradient(160deg, #f3ece0 0%, #e6dac7 55%, #d7c7ae 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05); transition: inset var(--wmi-mid) var(--wmi-ease); }
.wmi-sw-art.fp-slim { --fpw: 3px; } .wmi-sw-art.fp-medium { --fpw: 5px; } .wmi-sw-art.fp-bold { --fpw: 7px; }
/* a stretched canvas: no moulding, the painting's wrapped edge shows its depth */
.wmi-sw-art.is-canvas::before { display: none; }
.wmi-sw-art.is-canvas .wmi-sw-canvas { inset: 20% 22% 24% 20%; box-shadow: 3px 3px 0 #cdbfa9, 3px 3px 1px 1px rgba(0, 0, 0, .06), 0 10px 14px -8px rgba(20, 24, 22, .5); }
.wmi-sw-tick { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: var(--wmi-accent); color: #fff;
  box-shadow: 0 0 0 2px var(--wmi-bg); opacity: 0; transform: scale(.6); transition: opacity var(--wmi-fast) var(--wmi-ease), transform var(--wmi-fast) var(--wmi-ease); }
.wmi-sw-tick .wmi-ico { stroke-width: 2.2; }
.wmi-sw.is-on .wmi-sw-art { box-shadow: inset 0 0 0 2px var(--wmi-accent), 0 8px 18px -12px rgba(20, 24, 22, .5); background: var(--wmi-bg); }
.wmi-sw.is-on .wmi-sw-tick { opacity: 1; transform: scale(1); }
.wmi-sw input:focus-visible ~ .wmi-sw-art { outline: 3px solid var(--wmi-focus); outline-offset: 3px; }
.wmi-sw-name { font-size: .76rem; font-weight: 600; line-height: 1.15; color: var(--wmi-ink); text-align: center; text-wrap: balance; }
.wmi-sw-meta { margin-top: -3px; font-size: .68rem; line-height: 1.2; color: var(--wmi-muted); text-align: center; }
.wmi-sw.is-on .wmi-sw-name { color: var(--wmi-accent); }

/* ---- segmented choices ---- */
.wmi-seg { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 12px; background: var(--wmi-sunk); }
.wmi-seg-opt { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--wmi-tap); padding: 0 8px; border-radius: 9px; color: var(--wmi-ink-2);
  font-size: .86rem; font-weight: 550; text-align: center; line-height: 1.15; cursor: pointer;
  transition: background-color var(--wmi-fast) var(--wmi-ease), box-shadow var(--wmi-fast) var(--wmi-ease), color var(--wmi-fast) var(--wmi-ease); }
.wmi-seg-opt:hover { color: var(--wmi-ink); }
.wmi-seg-opt.is-on { background: var(--wmi-bg); color: var(--wmi-ink); font-weight: 650; box-shadow: 0 1px 2px rgba(20, 24, 22, .1), 0 2px 8px -3px rgba(20, 24, 22, .16); }
.wmi-seg-opt:has(input:focus-visible) { outline: 3px solid var(--wmi-focus); outline-offset: 1px; }
.wmi-seg.has-glyph .wmi-seg-opt { flex-direction: column; gap: 4px; padding: 7px 4px 6px; min-height: 58px; font-size: .8rem; }
.wmi-fp-glyph { display: block; width: 20px; height: 20px; border-radius: 2px; border: var(--g, 3px) solid currentColor; opacity: .75; }
.wmi-fp-glyph.fp-slim { --g: 2px; } .wmi-fp-glyph.fp-medium { --g: 3.5px; } .wmi-fp-glyph.fp-bold { --g: 5px; }
.wmi-seg-opt.is-on .wmi-fp-glyph, .wmi-seg-opt.is-on .wmi-ico { opacity: 1; color: var(--wmi-accent); }
.wmi-seg-opt .wmi-ico { width: 20px; height: 20px; opacity: .75; }

/* ---- size ---- */
.wmi-pill { padding: 2px 9px; border-radius: 999px; background: var(--wmi-sunk); font-size: .8rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--wmi-ink); }
.wmi-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--wmi-tap); margin: -6px 0 2px; background: transparent; cursor: pointer; --fill: var(--wmi-accent); }
.wmi-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--fill) calc(var(--v, 1) * 100%), var(--wmi-line-strong) calc(var(--v, 1) * 100%)); }
.wmi-range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--wmi-line-strong); }
.wmi-range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--fill); }
.wmi-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 999px; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(20, 24, 22, .12), 0 2px 6px rgba(20, 24, 22, .25); transition: transform var(--wmi-fast) var(--wmi-ease); }
.wmi-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 999px; background: #fff; border: 0; box-shadow: 0 0 0 1px rgba(20, 24, 22, .12), 0 2px 6px rgba(20, 24, 22, .25); }
.wmi-range:active::-webkit-slider-thumb { transform: scale(1.1); }
.wmi-range:focus-visible { outline: none; }
.wmi-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--wmi-bg), 0 0 0 6px var(--wmi-focus); }
.wmi-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--wmi-bg), 0 0 0 6px var(--wmi-focus); }
.wmi-scale + .wmi-row { margin-top: 14px; }

/* ---- disclosure + numbers ---- */
.wmi-more { margin-top: 16px; border-top: 1px solid var(--wmi-line); }
.wmi-more > summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--wmi-tap); list-style: none; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--wmi-ink-2); }
.wmi-more > summary::-webkit-details-marker { display: none; }
.wmi-more > summary .wmi-ico { transition: transform var(--wmi-mid) var(--wmi-ease); color: var(--wmi-muted); }
.wmi-more[open] > summary .wmi-ico { transform: rotate(180deg); }
.wmi-more[open] > :not(summary) { animation: wmi-in var(--wmi-mid) var(--wmi-ease); }
.wmi-num-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 4px 0 2px; }
.wmi-num-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wmi-num .wmi-label { margin-bottom: 6px; font-size: .82rem; }
.wmi-range-note { font-weight: 500; color: var(--wmi-muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.wmi-num-box { display: flex; align-items: center; min-height: var(--wmi-tap); border-radius: var(--wmi-r-sm); background: var(--wmi-bg); box-shadow: inset 0 0 0 1px var(--wmi-line-strong); transition: box-shadow var(--wmi-fast) var(--wmi-ease); }
.wmi-num-box:focus-within { box-shadow: inset 0 0 0 2px var(--wmi-focus); }
.wmi-num-box input { flex: 1; min-width: 0; width: 100%; height: var(--wmi-tap); padding: 0 4px 0 12px; border: 0; background: transparent; font-variant-numeric: tabular-nums; outline: none; }
.wmi-num-box input::placeholder { color: var(--wmi-muted); }
.wmi-unit { padding-right: 12px; color: var(--wmi-muted); font-size: .82rem; }
.wmi-input { width: 100%; min-height: var(--wmi-tap); padding: 0 12px; border: 0; border-radius: var(--wmi-r-sm); background: var(--wmi-bg); box-shadow: inset 0 0 0 1px var(--wmi-line-strong); }
.wmi-input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--wmi-focus); }

/* ---- placement status ---- */
.wmi-status { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 12px 0 4px; border-top: 1px solid var(--wmi-line); font-size: .86rem; color: var(--wmi-ink-2); }
.wmi-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: var(--wmi-muted); transition: background-color var(--wmi-fast) var(--wmi-ease); }
.wmi-status.is-ok .wmi-dot { background: var(--wmi-ok); }
.wmi-status.is-error { color: var(--wmi-bad); }
.wmi-status.is-error .wmi-dot { background: var(--wmi-bad); }
.wmi-status.is-checking .wmi-dot { animation: wmi-pulse 1.1s ease-in-out infinite; }

/* ---- wall + confirmations + empty ---- */
.wmi-wall { padding-top: 6px; }
.wmi-products-h { margin: 0 0 8px; padding-top: 18px; border-top: 1px solid var(--wmi-line); }
.wmi-confirm { margin: 0 0 12px; padding: 14px; border-radius: var(--wmi-r); background: var(--wmi-bg); box-shadow: inset 0 0 0 1px var(--wmi-line-strong), 0 12px 28px -18px rgba(20, 24, 22, .45); display: grid; gap: 12px; font-size: .9rem; animation: wmi-rise var(--wmi-mid) var(--wmi-ease); }
.wmi-body .wmi-confirm { margin-top: 12px; }
.wmi-empty { display: grid; gap: 12px; justify-items: start; padding: 20px 0; color: var(--wmi-muted); }

/* ---- footer: the one stable action area ---- */
.wmi-foot { flex: none; padding: 12px var(--wmi-pad) calc(12px + var(--wmi-foot-inset, env(safe-area-inset-bottom, 0px))); border-top: 1px solid var(--wmi-line); background: color-mix(in oklab, var(--wmi-bg) 94%, transparent); }
.wmi-foot > .wmi-note { margin: 0 0 10px; }
/* narrow (the usual inspector column, the phone): state + Discard, then one full-width Save; wide: one row */
.wmi-foot-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "state discard" "save save"; align-items: center; gap: 4px 8px; }
.wmi-foot-bar > .wmi-state { grid-area: state; } .wmi-foot-bar > [data-act="discard"] { grid-area: discard; } .wmi-foot-bar > [data-act="save"] { grid-area: save; width: 100%; }
@container wmi (min-width: 560px) { .wmi-foot-bar { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "state discard save"; } .wmi-foot-bar > [data-act="save"] { width: auto; } }
.wmi-state { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: .86rem; color: var(--wmi-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wmi-state.is-dirty { color: var(--wmi-ink); font-weight: 600; }
.wmi-state.is-dirty .wmi-dot { background: #c4861c; box-shadow: 0 0 0 3px rgba(196, 134, 28, .18); }
.wmi-state.is-saved { color: var(--wmi-ok); font-weight: 600; }
.wmi-state.is-saved .wmi-dot { background: var(--wmi-ok); animation: wmi-pop var(--wmi-mid) var(--wmi-ease); }

/* ---- phone: a bottom sheet over the live preview (peek / full) ---- */
/* hosts with a bottom tab bar set --wmi-sheet-offset (e.g. the Studio: calc(var(--tabbar) + env(safe-area-inset-bottom))) so the sheet
   and its Save rest above the navigation; without one the sheet reaches the screen edge and keeps the safe-area inset itself */
.wmi.wmi--sheet { position: fixed; inset: auto 0 var(--wmi-sheet-offset, 0px) 0; z-index: 40; height: auto; pointer-events: none; --wmi-pad: 18px; }
.wmi.wmi--sheet.wmi--full::before { content: ""; position: fixed; inset: 0; background: rgba(20, 24, 22, .32); pointer-events: auto; touch-action: none; animation: wmi-fade var(--wmi-mid) var(--wmi-ease); }
.wmi--sheet .wmi-shell { position: relative; pointer-events: auto; max-width: 720px; margin: 0 auto; max-height: min(50dvh, 460px); border-radius: 20px 20px 0 0; border: 0;
  box-shadow: 0 -1px 0 var(--wmi-line), 0 -18px 40px -24px rgba(20, 24, 22, .45); transform: translateY(var(--wmi-drag, 0px));
  transition: max-height var(--wmi-mid) var(--wmi-ease), transform var(--wmi-fast) var(--wmi-ease); animation: wmi-sheet-in 320ms var(--wmi-ease); }
.wmi--sheet.wmi--full .wmi-shell { max-height: calc(88dvh - var(--wmi-sheet-offset, 0px)); }
.wmi-grab { display: flex; justify-content: center; touch-action: none; cursor: grab; }
.wmi-handle { position: relative; width: 96px; height: var(--wmi-tap); margin-bottom: -12px; border: 0; background: transparent; cursor: grab; border-radius: 999px; touch-action: none; }
.wmi-handle::before { content: ""; position: absolute; left: 50%; top: 10px; width: 40px; height: 5px; margin-left: -20px; border-radius: 999px; background: var(--wmi-line-strong); transition: background-color var(--wmi-fast) var(--wmi-ease), width var(--wmi-fast) var(--wmi-ease); }
.wmi-handle:hover::before { background: var(--wmi-muted); }
.wmi--sheet .wmi-head { padding-top: 0; }
.wmi--sheet .wmi-title { font-size: 1.12rem; }
.wmi--sheet .wmi-sw-group { gap: 12px 7px; }
.wmi--sheet .wmi-foot-bar .wmi-btn.is-primary { padding: 0 18px; }

@container (max-width: 380px) { .wmi-state { font-size: .8rem; } }
@keyframes wmi-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes wmi-rise { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes wmi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wmi-pop { 0% { transform: scale(.4); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes wmi-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes wmi-sheet-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .wmi *, .wmi *::before, .wmi *::after, .wmi::before { transition-duration: 0ms !important; animation: none !important; }
}
@media (forced-colors: active) { .wmi-sw.is-on .wmi-sw-art, .wmi-seg-opt.is-on, .wmi-tab.is-on { outline: 2px solid CanvasText; } }

/* ---- product family + mat boards (1.1.0: framed prints) ---- */
.wmi-seg-opt { text-wrap: balance; }
.wmi [data-k="seg-family"] .wmi-seg-opt { padding: 6px 6px; font-size: .82rem; }
.wmi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wmi-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: var(--wmi-tap); padding: 0 13px 0 9px; border-radius: 999px; background: var(--wmi-bg);
  box-shadow: inset 0 0 0 1px var(--wmi-line-strong); font-size: .84rem; font-weight: 550; color: var(--wmi-ink-2); cursor: pointer;
  transition: box-shadow var(--wmi-fast) var(--wmi-ease), color var(--wmi-fast) var(--wmi-ease); }
.wmi-chip:hover { color: var(--wmi-ink); box-shadow: inset 0 0 0 1px var(--wmi-ink-2); }
.wmi-chip.is-on { color: var(--wmi-ink); font-weight: 650; box-shadow: inset 0 0 0 2px var(--wmi-accent); }
.wmi-chip:has(input:focus-visible) { outline: 3px solid var(--wmi-focus); outline-offset: 2px; }
.wmi-chip-sw { flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(20, 24, 22, .2); }
.wmi-chip-sw.is-empty { background: conic-gradient(from 30deg, #efe6d4, #b7c3bd, #45524b, #c9a98a, #efe6d4); }
.wmi-hex { display: block; margin-top: 10px; max-width: 13rem; }
.wmi-hex input { text-transform: uppercase; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@media (forced-colors: active) { .wmi-chip.is-on { outline: 2px solid CanvasText; } }
.wmi [data-k="sec-mat"] .wmi-num-grid { align-items: end; }
.wmi [data-k="sec-mat"] .wmi-num .wmi-label { flex-wrap: wrap; row-gap: 0; }
.wmi [data-k="sec-mat"] .wmi-range-note { white-space: nowrap; }
.wmi-note.is-warn[data-k="zone-outside"] { display: grid; gap: 10px; justify-items: start; } .wmi-note.is-warn[data-k="zone-outside"] p { margin: 0; }

/* 1.2.0: Canvas / Framed print, canvas style, visual mat styles, advanced lighting (owner simple frame workflow) */
.wmi-family { display: grid; gap: 12px; }
.wmi-seg.is-family .wmi-seg-opt { min-height: 46px; font-size: .95rem; }
.wmi-cs-glyph { display: block; width: 20px; height: 20px; border-radius: 2px; opacity: .75; background: linear-gradient(135deg, #b9aa92, #7d8a88); }
.wmi-cs-glyph.is-floating { box-shadow: 0 0 0 2px var(--wmi-bg), 0 0 0 4.5px currentColor; transform: scale(.78); }
.wmi-seg-opt.is-on .wmi-cs-glyph { opacity: 1; }
.wmi-mats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.wmi-mat { position: relative; display: grid; justify-items: center; gap: 6px; padding: 8px 4px 6px; border: 1.5px solid var(--wmi-line); border-radius: 12px; cursor: pointer; background: var(--wmi-bg); transition: border-color .16s ease, box-shadow .16s ease; }
.wmi-mat:hover { border-color: var(--wmi-ink-2); }
.wmi-mat.is-on { border-color: var(--wmi-accent); box-shadow: 0 0 0 1px var(--wmi-accent); }
.wmi-mat:has(input:focus-visible) { outline: 3px solid var(--wmi-focus); outline-offset: 1px; }
.wmi-mat-name { font-size: .78rem; font-weight: 600; color: var(--wmi-ink); text-align: center; }
.wmi-mat-art { position: relative; display: block; width: 52px; height: 64px; padding: 4px; background: var(--f); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 2px 5px -2px rgba(0,0,0,.35); }
.wmi-mat-art .m1 { display: block; width: 100%; height: 100%; padding: 7px; background: var(--m); box-shadow: inset 0 1px 2px rgba(0,0,0,.18); }
.wmi-mat-art .m2 { display: block; width: 100%; height: 100%; padding: 0; background: var(--m); }
.wmi-mat-art .art { display: block; width: 100%; height: 100%; background: linear-gradient(140deg, #c9b99c, #7e8b86 70%, #5d6a6b); box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
.wmi-mat-art.is-none .m1 { padding: 0; background: none; box-shadow: none; }
.wmi-mat-art.is-double .m2 { padding: 2px; background: var(--a); }
.wmi-mat-art.is-float .m1 { padding: 8px 9px; }
.wmi-mat-art.is-float .art { box-shadow: 1px 2px 3px rgba(0,0,0,.28); outline: 2px solid #fbfaf7; }
.wmi-chips .wmi-chip { min-height: 40px; }
.wmi-chip-sw { width: 20px; height: 20px; }
@media (max-width: 420px) { .wmi-mats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 1.3.0 frame-controls-1: Frame size (profile + width / floating gap / depth). Existing tokens only; each size is one row: its name, whether it
   is the profile's / custom / following the width, the exact mm, then the slider with its validated ends. */
.wmi-frame .wmi-sec-head .wmi-link { padding-left: 12px; }
.wmi-fp-sub { font-size: .7rem; font-weight: 500; color: var(--wmi-muted); line-height: 1.1; }
.wmi-seg-opt.is-on .wmi-fp-sub { color: var(--wmi-ink-2); }
.wmi-dim { margin-top: 14px; }
.wmi-dim + .wmi-dim { margin-top: 10px; }
.wmi-dim-head { display: flex; align-items: center; gap: 8px; }
.wmi-dim-label { font-size: .88rem; font-weight: 600; color: var(--wmi-ink); }
.wmi-tag { padding: 1px 8px; border-radius: 999px; background: var(--wmi-sunk); color: var(--wmi-muted); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.wmi-tag.is-own { background: var(--wmi-accent-soft); color: var(--wmi-accent); }
.wmi-tag.is-auto { background: var(--wmi-paper); color: var(--wmi-ink-2); box-shadow: inset 0 0 0 1px var(--wmi-line); }
.wmi-dim-box { margin-left: auto; width: 104px; flex: none; min-height: 38px; }
.wmi-dim-box input { height: 38px; padding-left: 10px; text-align: right; font-weight: 600; }
.wmi-dim-box input[aria-invalid="true"] { color: var(--wmi-bad); }
.wmi-dim-box:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--wmi-bad); }
/* one focus mark around the whole field (value and unit), also over the refused state, instead of an outline on the input alone */
.wmi-dim-box input:focus-visible { outline: none; }
.wmi-dim-box:has(input:focus-visible) { outline: 3px solid var(--wmi-focus); outline-offset: 2px; }
.wmi-dim-range { margin: 2px 0 0; }
.wmi-dim.is-own .wmi-dim-range { --fill: var(--wmi-accent); }
.wmi-dim:not(.is-own) .wmi-dim-range { --fill: color-mix(in oklab, var(--wmi-accent) 55%, var(--wmi-line-strong)); }
.wmi-dim-ends { display: flex; justify-content: space-between; margin-top: -4px; font-size: .72rem; color: var(--wmi-muted); font-variant-numeric: tabular-nums; }
.wmi-dim-err { margin-top: 6px; padding: 8px 10px; border-radius: var(--wmi-r-sm); background: var(--wmi-bad-soft); color: var(--wmi-bad); font-size: .82rem; animation: wmi-in var(--wmi-mid) var(--wmi-ease); }
@media (forced-colors: active) { .wmi-tag { border: 1px solid CanvasText; } .wmi-dim-box:has(input[aria-invalid="true"]) { outline: 2px solid Mark; } }
@media (prefers-reduced-motion: reduce) { .wmi-dim-err { animation: none; } }
/* composition-pilot-1: the open-reveal visual style opt-in (a checkbox row in the Frame size section) */
.wmi-style-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--wmi-line); border-radius: var(--wmi-r-sm); cursor: pointer; }
.wmi-style-opt.is-on { border-color: var(--wmi-accent); background: var(--wmi-accent-soft); }
.wmi-style-opt.is-off { cursor: not-allowed; opacity: .6; }
.wmi-style-opt input { margin: 3px 0 0; accent-color: var(--wmi-accent); inline-size: 16px; block-size: 16px; flex: none; }
.wmi-style-opt input:focus-visible { outline: 2px solid var(--wmi-accent); outline-offset: 2px; }
.wmi-style-opt > span { display: grid; gap: 2px; }
.wmi-style-opt strong { font-weight: 600; font-size: .93rem; }

/* ---- profile-ux-1: the mat's No mat / With mat pair, the effective default of a number, the Adjust dimensions drawer ---- */
.wmi-mats.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 260px; }
.wmi-num { display: grid; gap: 4px; }
.wmi-default { font-size: .78rem; color: var(--wmi-muted, #6b665e); }
.wmi-default .wmi-link { font-size: inherit; }
.wmi-dims { margin-top: 10px; }
.wmi-head-links { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; }