/*
 * HouseChalk - the room, as it stands.
 *
 * Lifted out of 10-now, 11-the-house and 19-now-the-week on 2026-09-01, where
 * it had been copied inline three times. The desktop shell's subject column
 * (docs/superpowers/specs/2026-09-01-desktop-shell-design.md) is the region
 * this occupies, and a region cannot be specified against a component that
 * exists three times.
 *
 * THE SURFACES ARE TOKENS, NOT LITERALS. Every `i` reads a --r-* custom
 * property declared in hc.css, light and dark, so the drawing re-keys with the
 * theme rather than being redrawn for it. A page tints one room by overriding
 * those properties inline; it never sets a color here.
 *
 * THE .draw.house VARIANT DID NOT COME WITH IT. 19-now-the-week draws a house
 * from outside - .sky, .ground, .mass, .roof, .door, .win - under the same
 * class prefix. It is a different subject that shares a name, and it stays
 * inline on that page rather than putting a second drawing in a file named for
 * the first.
 *
 * THE OTHER IMPLEMENTATION IS LEFT ALONE. 09-first-run and
 * 43-deciding-against-the-picture draw the same room from an SVG sprite
 * (`<use href="#hc-kitchen">`) inside .art. That is a second implementation of
 * one idea and it should not survive, but collapsing the two is a drawing
 * decision, not a plumbing one. This file only stops .draw being copied again.
 */

.draw { aspect-ratio: 4 / 3; position: relative; overflow: hidden; border-radius: var(--r-sm); }
.draw i { position: absolute; display: block; }

.draw .ceiling { top: 0; left: 0; right: 0; height: 22%; background: var(--r-ceiling); }
.draw .counter { bottom: 42%; left: 8%; width: 38%; height: 4%; background: var(--r-counter); }
.draw .floor   { bottom: 0; left: 0; right: 0; height: 20%; background: var(--r-floor); }
.draw .island  { bottom: 20%; right: 10%; width: 34%; height: 18%; background: var(--r-island); border-radius: 2px; }
.draw .itop    { bottom: 38%; right: 10%; width: 34%; height: 4%; background: var(--r-counter); }
.draw .lower   { bottom: 20%; left: 8%; width: 38%; height: 22%; background: var(--r-cabinet-lower); border-radius: 2px; }
.draw .splash  { top: 48%; left: 8%; width: 38%; height: 10%; background: var(--r-backsplash); }
.draw .upper   { top: 26%; left: 8%; width: 38%; height: 20%; background: var(--r-cabinet-upper); border-radius: 2px; }
.draw .wall    { inset: 0; background: var(--r-wall); }