/*
  Floor plan (floorplan.html): a drawn sheet of the house with its paintable surfaces. The sheet is dark like the rest of the interface:
  ivory walls on a surface tone. The room-type fills are neutral tones; the wood floor and the surface map (hsl per surface) are data and stay as drawn.
*/
:root {
  /* the sheet's colors, as tokens (the script's inline styles still read these names) */
  --paper: var(--bg); --card: var(--surface-1); --rule: var(--line-strong); --wall: var(--text);
  --open: var(--brass-wash-3); --bed: var(--surface-2); --clos: var(--surface-3); --wet: var(--line-strong); --util: var(--brass-wash-1);
  --cabB: var(--brass-deep); --cabW: var(--text-2); --app: var(--text-3-app);
  --red: var(--st-failed); --green: var(--st-done);
  /* text on the drawing is sized in the drawing's own units (the SVG scales as a whole) */
  --dt-room: 12.5px; --dt-sub: 10px; --dt-dim: 11px; --dt-tiny: 8px; --dt-surf: 7px; --dt-small: 9.5px; --dt-badge: 12px;
}
.wrap { width: min(100% - 2 * var(--gutter), var(--w-wide)); margin: 0 auto; padding: var(--s-6) 0 var(--s-8); }
header { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); align-items: flex-end; justify-content: space-between; margin-bottom: var(--s-5); }
h1 { margin: 0 0 var(--s-1); font-size: var(--fs-2xl); line-height: var(--lh-snug); }
.sub { color: var(--text-2); font-size: var(--fs-sm); }
header .seg button { min-height: var(--ctl); padding: 0 var(--s-4); }
.plan { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r-lg); padding: var(--s-2); overflow-x: auto; }
.plan { --sheet-min: 760px; }
.plan svg { display: block; width: 100%; min-width: var(--sheet-min); height: auto; max-width: none; }

/* svg styling */
.paper { fill: var(--card); }
.f-open { fill: var(--open); } .f-bed { fill: var(--bed); } .f-clos { fill: var(--clos); } .f-wet { fill: var(--wet); } .f-util { fill: var(--util); }
.wall { fill: var(--wall); }
.wall.removed { fill: var(--st-failed-wash); stroke: var(--red); stroke-width: 1.4; stroke-dasharray: 5 3; }
.win { fill: var(--card); stroke: var(--wall); stroke-width: 1; }
.panel { fill: var(--card); stroke: var(--wall); stroke-width: 0.9; stroke-dasharray: 3 2; }
.glass { stroke: var(--wall); stroke-width: 0.8; }
.leaf { stroke: var(--wall); stroke-width: 2.2; stroke-linecap: round; }
.swing { fill: none; stroke: var(--text-3); stroke-width: 0.9; }
.fx { stroke: var(--wall); stroke-width: 0.9; }
.cabB { fill: var(--cabB); } .cabW { fill: var(--cabW); } .app { fill: var(--app); } .counter { fill: var(--card); stroke: var(--wall); }
.fxt { fill: none; stroke: var(--wall); stroke-width: 0.9; }
.fxfill { fill: var(--card); stroke: var(--wall); stroke-width: 0.9; }
.dashed { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 3; }
.hair { stroke: var(--wall); stroke-width: 0.7; fill: none; }
.removed-fx .fx, .removed-fx .fxt, .removed-fx .fxfill, .removed-fx .dashed, .removed-fx .hair { stroke: var(--red); stroke-dasharray: 5 3; }
.removed-fx .fxfill, .removed-fx .fx { fill: var(--st-failed-wash); }
.removed-fx text { fill: var(--st-failed-text); }
.added-fx text { fill: var(--green); }
.room { font-size: var(--dt-room); font-weight: var(--fw-semibold); letter-spacing: 0.07em; fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--card); stroke-width: 0; }
.rsub { font-size: var(--dt-sub); fill: var(--text-2); text-anchor: middle; letter-spacing: 0.03em; paint-order: stroke; stroke: var(--bg); stroke-width: var(--bw-2); stroke-linejoin: round; }
text[style*='#fff'] { fill: var(--text) !important; }
/* the floor view puts the room names on the wood: dark lettering with an ivory halo, as before */
svg.lvp .room, svg.lvp .rsub { fill: var(--bg); paint-order: stroke; stroke: var(--text); stroke-opacity: 0.6; stroke-width: var(--bw-3); stroke-linejoin: round; }
svg.lvp .dashed { stroke: var(--bg); }
.surf { stroke: var(--card); stroke-width: 0.6; cursor: help; }
.surf.hot { stroke: var(--text); stroke-width: 2.5; }
.surft { font-size: var(--dt-surf); font-weight: var(--fw-semibold); fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--card); stroke-width: calc(2.5 * var(--bw)); }
.small { font-size: var(--dt-small); }
.dim { stroke: var(--text-3); stroke-width: 1; fill: none; }
.dimt { font-size: var(--dt-dim); fill: var(--text); text-anchor: middle; font-weight: var(--fw-medium); font-family: var(--font-mono); }
.dimbg { fill: var(--card); }
.callout circle { fill: var(--st-failed-text); stroke: var(--card); stroke-width: 1.5; }
.callout text { fill: var(--bg); font-size: var(--dt-badge); font-weight: var(--fw-semibold); text-anchor: middle; font-family: var(--font-mono); }
.tiny { font-size: var(--dt-tiny); fill: var(--text-3); letter-spacing: 0.05em; }

/* the surface list and the notes */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: var(--s-4); margin-top: var(--s-4); }
.card { padding: var(--s-4) var(--s-5); overflow: visible; display: block; }
.card h2 { margin: 0 0 var(--s-3); font: var(--fw-semibold) var(--fs-md)/1.3 var(--font-ui); letter-spacing: 0; color: var(--text); text-wrap: wrap; }
.card h2 span { font-weight: var(--fw-regular); color: var(--text-2); font-family: var(--font-mono); font-size: var(--fs-xs); }
.card ol, .card ul { margin: 0; padding-left: var(--s-5); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-2); }
.card li { margin-bottom: var(--s-1); }
.card li::marker { color: var(--brass-dim); }
.card p { color: var(--text-2); }
.card ul.legend { list-style: none; padding: 0; }
.notes { display: contents; }
#surfList { margin-top: var(--s-4); }
#surfNote { margin: 0 0 var(--s-3); }
.group { display: flex; flex-wrap: wrap; gap: var(--s-2); max-width: 100%; }
.group .seg { min-width: 0; }
.sw { display: inline-block; width: var(--s-3); height: var(--s-3); border-radius: var(--r-xs); vertical-align: -0.1em; margin-right: var(--s-2); border: var(--bw) solid var(--line-strong); }
.sw.removed { background: var(--st-failed-wash); border-color: var(--st-failed); }
.badge { display: inline-flex; width: var(--s-4); height: var(--s-4); border-radius: var(--r-full); background: var(--st-failed-text); color: var(--bg); font: var(--fw-semibold) var(--fs-2xs) var(--font-mono); align-items: center; justify-content: center; margin-right: var(--s-2); }
.hide-in-changes { display: block; }
.surf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--s-4); }
.surf-room h3 { font: var(--fw-semibold) var(--fs-sm)/1.3 var(--font-ui); letter-spacing: 0; margin: 0 0 var(--s-2); display: flex; justify-content: space-between; color: var(--text); }
.surf-room h3 span { font: var(--fw-regular) var(--fs-xs) var(--font-mono); color: var(--text-2); }
.surf-room table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); color: var(--text-2); }
.surf-room td { padding: var(--s-1) var(--s-2); border-top: var(--bw) solid var(--line); }
.surf-room td.num { text-align: right; color: var(--text-2); white-space: nowrap; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.surf-room tr:hover { background: var(--surface-2); }
.surf-room tr:hover td { color: var(--text); }
@media (forced-colors: active) { .surf { forced-color-adjust: none; } }