/*
  Plan Editor (editor.html). The plan is drawn like an engraved drafting sheet: ivory lines on obsidian, brass for what is selected or suggested.
  Room colors in the plan and the list are identifiers set by the script (hsl), not paint; they are only quietened (--room-saturate).
*/
:root {
  /* the plan's drawing colors, as tokens */
  --wall: var(--text-2); --wall-ext: var(--text); --open: var(--bg);
  --removed: var(--st-failed); --new: var(--st-done); --snap: var(--brass-highlight);
  --grid: var(--line); --grid-major: var(--line-strong);
}
.app { --stage-min: 380px; --col-steps: 272px; --col-insp: 304px; --room-saturate: 0.45; height: 100%; display: grid; grid-template-columns: var(--col-steps) minmax(0, 1fr) var(--col-insp); grid-template-rows: auto minmax(0, 1fr) auto; }
html, body { height: 100%; margin: 0; }

.app h2 { margin: var(--s-5) var(--s-4) var(--s-2); font: var(--fw-regular) var(--fs-2xs)/1.4 var(--font-ui); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-3); text-wrap: wrap; }

/* top bar */
.top { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-4); min-height: calc(var(--s-8) - var(--s-2)); border-bottom: var(--bw) solid var(--line); background: var(--surface-1); }
.brand { display: flex; flex-direction: column; margin-right: var(--s-2); font: var(--fw-medium) var(--fs-xl)/var(--lh-snug) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--text); }
.brand small { font: var(--fs-xs)/1.4 var(--font-mono); color: var(--text-3); letter-spacing: 0.04em; text-transform: uppercase; }
.group .btn { padding: 0 var(--s-3); }
.group { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
.tools { display: flex; max-width: 100%; border: var(--bw) solid var(--line-strong); border-radius: var(--r-sm); overflow-x: auto; scrollbar-width: none; background: var(--surface-1); }
.tools button { display: grid; justify-items: center; gap: 0; min-height: var(--ctl); padding: var(--s-1) var(--s-2); border: 0; border-right: var(--bw) solid var(--line); background: transparent; color: var(--text); font-size: var(--fs-xs); line-height: 1.3; flex: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.tools button:last-child { border-right: 0; }
.tools button:hover { background: var(--surface-2); color: var(--brass-bright); }
.tools button kbd { padding: 0; border: 0; background: none; font: var(--fs-2xs) var(--font-mono); color: var(--text-3); }
.tools button[aria-pressed='true'] { background: var(--surface-3); color: var(--brass-bright); }
.tools button[aria-pressed='true'] kbd { color: var(--text-2); }
.tools button:focus-visible { outline-offset: calc(-1 * var(--s-1)); }

/* left: steps, blueprint, floors, rooms, fixtures */
.side { background: var(--surface-1); overflow: auto; padding: var(--s-1) 0 var(--s-6); }
.side.left { border-right: var(--bw) solid var(--line); }
.side.right { border-left: var(--bw) solid var(--line); }
ol.steps { list-style: none; margin: 0; padding: 0 var(--s-2); counter-reset: step; }
ol.steps li { counter-increment: step; }
.step { position: relative; width: 100%; display: grid; grid-template-columns: var(--s-5) 1fr; gap: var(--s-1) var(--s-3); padding: var(--s-2); border: var(--bw) solid transparent; border-radius: var(--r-sm); background: transparent; text-align: left; color: var(--text); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.step:hover { background: var(--surface-2); }
.step::before { content: counter(step); grid-row: span 2; width: var(--s-5); height: var(--s-5); border-radius: var(--r-full); display: grid; place-items: center; font: var(--fw-medium) var(--fs-xs) var(--font-mono); border: var(--bw) solid var(--line-strong); color: var(--text-2); }
.step.done::before { content: ''; border-color: var(--st-done); background: var(--st-done-wash); }
.step.done::after { content: ''; position: absolute; left: calc(var(--s-2) + var(--bw) + var(--s-1) + var(--s-1) / 2 + var(--bw)); top: calc(var(--s-2) + var(--bw) + var(--s-2)); width: var(--s-2); height: var(--s-1); border-left: calc(1.5 * var(--bw)) solid var(--st-done); border-bottom: calc(1.5 * var(--bw)) solid var(--st-done); transform: rotate(-45deg); }
.step.cur { background: var(--surface-2); border-color: var(--line-brass); }
.step.cur::before { border-color: var(--brass); color: var(--brass-bright); }
.step b { font-weight: var(--fw-medium); font-size: var(--fs-sm); align-self: center; }
.step span { font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); grid-column: 2; text-wrap: pretty; }
.step:not(.cur) span { display: none; }
.under { margin: var(--s-1) var(--s-4) 0; padding: var(--s-3); border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--surface-2); display: grid; gap: var(--s-3); font-size: var(--fs-xs); color: var(--text-2); }
.under .row2 { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: var(--s-2); }
.under .note { font-size: var(--fs-xs); }
.under .name { font: var(--fs-xs) var(--font-mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.under .actions .btn { min-height: var(--ctl-sm); padding: 0 var(--s-3); font-size: var(--fs-xs); }
.roomlist { padding: 0 var(--s-2); display: grid; gap: var(--s-1); }
.roomlist .actions .btn, .actions .btn { min-height: var(--ctl-sm); padding: 0 var(--s-3); font-size: var(--fs-xs); }
.roomrow { display: grid; grid-template-columns: var(--s-3) 1fr auto; gap: var(--s-2); align-items: center; padding: var(--s-1) var(--s-2); min-height: var(--ctl-sm); border: var(--bw) solid transparent; border-radius: var(--r-sm); background: transparent; text-align: left; font-size: var(--fs-sm); color: var(--text); transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.roomrow:hover { background: var(--surface-2); }
.roomrow.on { background: var(--brass-wash-2); border-color: var(--line-brass); }
.roomrow i { width: var(--s-3); height: var(--s-3); border-radius: var(--r-xs); background: var(--c); filter: saturate(var(--room-saturate)); }
.roomrow small { font: var(--fs-xs) var(--font-mono); color: var(--text-2); }
.roomlist .empty, .side > .empty { padding: 0 var(--s-4); }
.side > .empty { margin: var(--s-3) 0 0; }
.roomlist .empty { padding: 0 var(--s-2); }
.roomlist + .actions, .side > .actions { padding: var(--s-2) var(--s-4) 0; }

/* stage: the plan */
.stage { position: relative; min-height: 0; background: var(--stage); display: grid; grid-template-columns: minmax(0, 1fr); }
.stage.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.planwrap { position: relative; min-height: 0; min-width: 0; }
#plan { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; }
#plan.t-select, #plan.t-trace { cursor: default; } #plan.t-pan, #plan.panning { cursor: grabbing; }
#plan.t-wall, #plan.t-split, #plan.t-scale, #plan.t-room, #plan.t-door, #plan.t-window, #plan.t-cased, #plan.t-fixture { cursor: crosshair; }
#plan.t-move { cursor: move; }
#lRooms { filter: saturate(var(--room-saturate)); }
.p3 { position: relative; min-height: 0; border-left: var(--bw) solid var(--line); background: var(--stage); }
.p3 canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.p3 .msg { position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--header-veil); backdrop-filter: blur(var(--blur)); border: var(--bw) solid var(--line); font-size: var(--fs-xs); color: var(--text-2); white-space: pre-line; }
.p3 .tag { position: absolute; left: var(--s-3); top: var(--s-3); padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--header-veil); border: var(--bw) solid var(--line); font: var(--fw-regular) var(--fs-2xs)/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-2); }
.hint { position: absolute; z-index: var(--z-raised); left: 50%; bottom: var(--s-4); transform: translateX(-50%); max-width: calc(100% - 2 * var(--s-3)); padding: var(--s-2) var(--s-4); border-radius: var(--r-md); background: var(--header-veil); backdrop-filter: blur(var(--blur)); border: var(--bw) solid var(--line); font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); text-align: center; pointer-events: none; text-wrap: balance; }
.hint kbd, .welcome kbd { font: var(--fs-2xs) var(--font-mono); color: var(--text); }
.zoom { position: absolute; z-index: var(--z-raised); right: var(--s-3); top: var(--s-3); display: grid; gap: var(--s-1); }
.zoom button { display: grid; place-items: center; width: var(--ctl); height: var(--ctl); padding: 0; border: var(--bw) solid var(--line-strong); border-radius: var(--r-sm); background: var(--header-veil); backdrop-filter: blur(var(--blur)); color: var(--text); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.zoom button:hover { border-color: var(--brass); color: var(--brass-bright); }
@media (pointer: coarse) { .zoom button { width: var(--tap); height: var(--tap); } }
.welcome { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s-4); pointer-events: none; }
.welcome .card { pointer-events: auto; width: min(32rem, 100%); display: grid; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-lg); background: var(--surface-1); border: var(--bw) solid var(--line-strong); }
.welcome .card h2 { margin: 0; font: var(--fw-regular) var(--fs-2xl)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-tight); color: var(--text); text-transform: none; }
.welcome p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.6; text-wrap: pretty; }
.welcome p:last-child { color: var(--text-3); font-size: var(--fs-xs); }
.welcome .group .btn { min-height: var(--ctl); }
.toast { top: var(--s-4); }

/* plan drawing. Walls are ivory; what is selected, suggested or being measured is brass; removed and new use the two status tones. */
.wall rect.body { fill: var(--wall); }
.wall.ext rect.body { fill: var(--wall-ext); }
.wall.removed rect.body { fill: var(--st-failed-wash); stroke: var(--st-failed); stroke-dasharray: 4 3; }
.wall.new rect.body { fill: var(--new); }
.hit { fill: transparent; }
.wall path.body { fill: none; stroke: var(--wall); }
.wall.ext path.body { stroke: var(--wall-ext); }
.wall.removed path.body { stroke: var(--st-failed); stroke-opacity: 0.6; stroke-dasharray: 4 3; }
.wall.new path.body { stroke: var(--new); }
.wall:hover path.body { filter: brightness(1.25); }
.ghostarc { stroke: var(--select); stroke-opacity: 0.35; pointer-events: none; }
#plan.traced .wall rect.body, #plan.traced .wall.ext rect.body { fill: var(--select); fill-opacity: 0.85; }   /* stand out on the blueprint */
.wall:hover rect.body, .opening:hover .shape { filter: brightness(1.25); }
.opening .gap { fill: transparent; }
.opening .shape { stroke: var(--wall); fill: none; }
.opening .win { fill: var(--open); fill-opacity: 0.55; stroke: var(--wall); }
.opening .leaf { stroke: var(--wall-ext); stroke-linecap: round; }
.opening .arc { stroke: var(--muted); fill: none; stroke-dasharray: 3 2; }
.opening .panel { fill: var(--open); stroke: var(--wall); stroke-dasharray: 3 2; }
.room rect { stroke: none; }
.roomlabel { font-family: var(--font-ui); font-weight: var(--fw-medium); fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--stage); stroke-linejoin: round; pointer-events: none; }
.roomlabel.sub { font-weight: var(--fw-regular); fill: var(--text-2); font-family: var(--font-mono); }
.fx { fill: none; stroke: var(--muted); stroke-dasharray: 2 2; pointer-events: none; }
.splitline { stroke: var(--select); stroke-dasharray: 6 4; }
.sel-outline { fill: none; stroke: var(--select); }
.handle { fill: var(--surface-3); stroke: var(--select); cursor: grab; }
.dim { font-family: var(--font-mono); font-weight: var(--fw-medium); fill: var(--brass-bright); text-anchor: middle; paint-order: stroke; stroke: var(--stage); stroke-linejoin: round; pointer-events: none; }
.ghost { fill: var(--select-soft); stroke: var(--select); stroke-dasharray: 4 3; pointer-events: none; }
.ghost.bad { fill: var(--st-failed-wash); stroke: var(--removed); }
.plabel text { fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--stage); stroke-linejoin: round; cursor: grab; }
.plabel.on text { fill: var(--brass-bright); }
.pdim line, .pdim text { stroke: var(--select); stroke-width: var(--bw); fill: none; vector-effect: non-scaling-stroke; }
.pdim text { fill: var(--brass-bright); stroke: none; text-anchor: middle; font-family: var(--font-mono); }
.pdim.on line { stroke-width: calc(2 * var(--bw)); }
.pstart circle { fill: var(--select); stroke: var(--stage); stroke-width: calc(1.5 * var(--bw)); vector-effect: non-scaling-stroke; }
.pstart line { stroke: var(--select); }
.pstart text { fill: var(--on-brass); pointer-events: none; }
.pstart.on circle:first-child { stroke: var(--text); }
.notecard { padding: var(--s-2); margin: var(--s-2) 0; border: var(--bw) solid var(--line); border-radius: var(--r-md); background: var(--surface-2); display: grid; gap: var(--s-2); }
#lBelow rect { fill: var(--muted); opacity: 0.22; pointer-events: none; }
#lBelow path { stroke: var(--muted); opacity: 0.22; pointer-events: none; }
#lBelow .stairghost { fill: none; stroke: var(--muted); stroke-dasharray: 3 2; opacity: 0.5; }
.pvoid rect { fill: var(--scrim); stroke: var(--select); stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.pvoid line { stroke: var(--select); opacity: 0.5; vector-effect: non-scaling-stroke; }
.pvoid text { fill: var(--brass-bright); font-family: var(--font-mono); pointer-events: none; }
.pvoid.on rect { stroke-width: calc(2 * var(--bw)); }
.snapmark { fill: none; stroke: var(--snap); pointer-events: none; }
.guide { stroke: var(--snap); stroke-dasharray: 2 3; pointer-events: none; }
.scalept { fill: var(--snap); pointer-events: none; }
/* suggested walls from the tracer: brass; a door gap is dashed, a window gap is dotted, an opening is a plain line */
.sugg .sbody { fill: var(--brass); fill-opacity: 0.55; stroke: var(--brass); stroke-width: 1; }
.sugg .shit { fill: transparent; }
.sugg:hover .sbody { fill-opacity: 0.8; }
.sugg.off .sbody { fill: none; stroke-dasharray: 3 3; stroke-opacity: 0.5; }
.sgap { fill: none; stroke: var(--brass-bright); stroke-width: 1.5; stroke-dasharray: 3 2; pointer-events: none; }
.sgap.window { stroke-dasharray: 1 3; stroke-linecap: round; } .sgap.cased { stroke-dasharray: none; }
#plan .sugg .sbody, #plan .sgap { vector-effect: non-scaling-stroke; }
/* fixtures */
.fxs .body { fill: var(--surface-3); fill-opacity: 0.9; stroke: var(--muted); stroke-width: 1; }
.fxs .front { stroke: var(--wall-ext); stroke-width: 3; stroke-linecap: round; pointer-events: none; }
.fxs.hi .body { fill: none; stroke-dasharray: 4 3; pointer-events: stroke; }
.fxs.thin .body { fill: var(--muted); stroke: none; }
.fxs.on .body { stroke: var(--select); stroke-width: 2; stroke-dasharray: none; }
.fxs:hover .body { stroke: var(--select); }
.fxlabel { fill: var(--muted); text-anchor: middle; font-family: var(--font-ui); font-weight: var(--fw-medium); pointer-events: none; }
.ghostfx { fill: var(--select-soft); stroke: var(--select); stroke-dasharray: 4 3; pointer-events: none; }
.ghostfx.bad { fill: var(--st-failed-wash); stroke: var(--removed); }
.front.ghostfx { fill: none; stroke: var(--select); stroke-dasharray: none; stroke-width: 3; }
.lib { display: grid; gap: var(--s-1); } .lib h4 { margin: var(--s-2) 0 0; font: var(--fw-regular) var(--fs-2xs)/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-3); }
.libgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1); }
.libgrid button { display: grid; gap: var(--s-1); text-align: left; padding: var(--s-2); border: var(--bw) solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-xs); line-height: 1.25; color: var(--text); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.libgrid button:hover { border-color: var(--brass); color: var(--brass-bright); }
.libgrid button small { font: var(--fs-xs) var(--font-mono); color: var(--text-2); }
.libgrid button[aria-pressed='true'] { background: var(--surface-3); border-color: var(--line-brass); color: var(--brass-bright); }
.insp .seg { width: 100%; } .insp .seg button { flex: 1; }
/* outlines keep the same on-screen width and dash at any zoom */
#plan .ghost, #plan .splitline, #plan .sel-outline, #plan .handle, #plan .snapmark, #plan .guide, #plan .fx, #plan .opening *, #plan .wall rect.body, #plan .nse, #plan .fxs .body, #plan .fxs .front { vector-effect: non-scaling-stroke; }

/* inspector */
.insp { padding: 0 var(--s-4); display: grid; gap: var(--s-3); }
.insp h3 { margin: 0; font: var(--fw-semibold) var(--fs-md)/1.25 var(--font-ui); letter-spacing: 0; color: var(--text); }
.insp h3[style] { margin-top: var(--s-2); padding-top: var(--s-3); border-top: var(--bw) solid var(--line); font-size: var(--fs-sm); color: var(--text); }
.insp .sub { font-size: var(--fs-xs); color: var(--text-2); margin-top: calc(-1 * var(--s-2)); }
.field input.bad { border-color: var(--st-failed); }
.field input[type='color'] { height: var(--ctl); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-2); }
.actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chips { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.chips button { display: inline-flex; align-items: center; padding: 0 var(--s-3); min-height: var(--ctl-sm); border: var(--bw) solid var(--line-strong); border-radius: var(--r-full); background: transparent; color: var(--text-2); font: var(--fs-xs) var(--font-mono); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.chips button:hover { color: var(--brass-bright); border-color: var(--line-brass); }
.dimtab { width: 100%; }

/* status bar */
.status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); align-items: center; padding: var(--s-2) var(--s-4); border-top: var(--bw) solid var(--line); background: var(--surface-1); font: var(--fs-xs) var(--font-mono); color: var(--text-2); }
.status .problems { color: var(--brass-bright); background: none; border: 0; font: inherit; padding: 0; text-decoration: underline; text-decoration-color: var(--line-brass); text-underline-offset: 0.2em; }
.status .problems:hover { text-decoration-color: var(--brass-bright); }
.status .okay { color: var(--st-done); }

.dialog .box { width: min(30rem, 100%); }
.dialog textarea { height: 14rem; }

/* tablet and phone */
@media (max-width: 1100px) { .app { --col-steps: 236px; --col-insp: 270px; } .tools button { padding: var(--s-1) var(--s-2); } }
@media (max-width: 860px) {
  html, body { height: auto; }
  .app { display: block; }
  .stage { height: 70vh; min-height: var(--stage-min); }
  .stage.split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .p3 { border-left: 0; border-top: var(--bw) solid var(--line); }
  .side { border: 0 !important; border-top: var(--bw) solid var(--line) !important; }
}
@media (forced-colors: active) {
  .step.cur, .roomrow.on { outline: var(--bw-2) solid Highlight; }
  .tools button[aria-pressed='true'] { outline: var(--bw-2) solid Highlight; outline-offset: calc(-1 * var(--bw-2)); }
}