/* ==========================================================================
   Home: the house map (features/house). Colours are variables, so each world draws the same house its own way.
   ========================================================================== */
:root {
  --hm-paper: #f7f2ea; --hm-ink: #3a3129; --hm-wall: #2f2a26;
  --hm-wood: #e3cba8; --hm-wood-line: #c9ad86; --hm-wood-grain: #d6bd98;
  --hm-tile: #eef0ee; --hm-tile-line: #cfd5d2; --hm-tile-shine: #ffffff;
  --hm-carpet: #d9cfc2; --hm-carpet-dot: #c6baa9;
  --hm-rug-a: #efe3d0; --hm-rug-b: #c79a78; --hm-rug-border: #a97c5a; --hm-rug-dark: #4a4d57; --hm-rug-dark-2: #5c606b;
  --hm-coir: #c8a978; --hm-coir-line: #a78a5c;
  --hm-counter: #f4f1ec; --hm-hob: #26262a; --hm-hob-ring: #7b7b82; --hm-metal: #9aa0a6; --hm-metal-light: #d7dbde;
  --hm-wood-furn: #b88d62; --hm-wood-dark: #7a5638; --hm-fabric: #8f9aa8; --hm-fabric-2: #a6b0bd; --hm-throw: #d8b5a0;
  --hm-accent: #e0a458; --hm-accent-2: #7d9d8c; --hm-linen: #fbf8f2; --hm-pillow: #ffffff; --hm-duvet: #e9eef3;
  --hm-lamp: #f6e3a8; --hm-screen: #1f2328; --hm-porcelain: #fbfbfa; --hm-water: #cfe3ea; --hm-glass: #a9cbd6; --hm-glass-dark: #5b6f78;
  --hm-glass-sealed: #c2c8cb; --hm-glass-sealed-line: #8d9299; --hm-towel: #e8c7b5; --hm-cardboard: #caa472; --hm-tape: #e6d2a6; --hm-cup: #ffffff; --hm-tea: #b07a4a;
  --hm-book-1: #9c4a3c; --hm-book-2: #3f5f7a; --hm-book-3: #c7a449; --hm-book-4: #4f7a5a;
  --hm-shoe-1: #3b3b3b; --hm-shoe-2: #8a6a4a; --hm-shoe-3: #c9c3bb; --hm-coat-1: #5f7390; --hm-coat-2: #a0584a; --hm-coat-3: #d4c7a8;
  --hm-printer: #3a3d42; --hm-printer-bed: #1f2124; --hm-printer-grid: #55595f; --hm-filament: #3fa6a0;
  --hm-vr: rgba(90, 140, 220, 0.08); --hm-vr-line: #6f95d6; --hm-bat: #e3c893; --hm-bat-grip: #333; --hm-ball: #b93a32; --hm-headset: #f2f2f2;
  --hm-robot: #f4f4f4; --hm-stair: #eadfcd; --hm-pot: #c86f48; --hm-leaf: #3f7f3a; --hm-leaf-light: #8cc46c; --hm-leaf-edge: #2d5e2a;
  --hm-glow: #f3c65f; --hm-fade: rgba(255, 244, 214, 0.18); --hm-dust: rgba(120, 120, 128, 0.28); --hm-dust-speck: rgba(80, 80, 88, 0.35);
  --hm-select: #7c5cff; --hm-label: #2a231e; --hm-label-halo: rgba(255, 255, 255, 0.85);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-world="estate"]) {
    --hm-paper: #1d1a22; --hm-ink: #1a171d; --hm-wall: #e8e2ef;
    --hm-wood: #5a4a3c; --hm-wood-line: #4a3c30; --hm-wood-grain: #524436; --hm-tile: #3b3f44; --hm-tile-line: #30343a; --hm-tile-shine: #4a4f55;
    --hm-carpet: #4a443e; --hm-carpet-dot: #3d3833; --hm-stair: #4d443b; --hm-counter: #d9d4cc;
    --hm-label: #f5f1f8; --hm-label-halo: rgba(20, 18, 24, 0.85); --hm-glow: #ffd36b; --hm-fade: rgba(255, 230, 170, 0.08);
    --hm-dust: rgba(10, 10, 14, 0.45); --hm-dust-speck: rgba(200, 200, 210, 0.25); --hm-glass: #4d7f92; --hm-glass-sealed: #4a4f55; --hm-glass-sealed-line: #6b7076;
  }
}
/* The Estate: an architect's drawing in ink on warm paper; by lamplight in dark mode */
html[data-world="estate"] {
  --hm-paper: #efe5d1; --hm-ink: #2a231e; --hm-wall: #2a231e;
  --hm-wood: #e2cfa9; --hm-wood-line: #c3aa7e; --hm-wood-grain: #d4bd93; --hm-tile: #ece3d0; --hm-tile-line: #c9b99a; --hm-tile-shine: #f7f0e1;
  --hm-carpet: #d7c3a3; --hm-carpet-dot: #bfa982; --hm-stair: #e0cfae; --hm-counter: #f2eadb;
  --hm-glow: #e9b85a; --hm-select: #7c2d25; --hm-label: #2a231e; --hm-label-halo: rgba(243, 235, 219, 0.9);
}
@media (prefers-color-scheme: dark) {
  html[data-world="estate"] {
    --hm-paper: #221e19; --hm-ink: #15120e; --hm-wall: #eee5d2;
    --hm-wood: #5b4a37; --hm-wood-line: #4a3c2c; --hm-wood-grain: #544431; --hm-tile: #4a4438; --hm-tile-line: #3b362c; --hm-tile-shine: #575043;
    --hm-carpet: #4e4436; --hm-carpet-dot: #423a2e; --hm-stair: #4b4033; --hm-counter: #d8ccb5;
    --hm-glow: #f4c76c; --hm-select: #e0937f; --hm-label: #eee5d2; --hm-label-halo: rgba(28, 26, 22, 0.88);
    --hm-fade: rgba(255, 220, 150, 0.07); --hm-dust: rgba(8, 7, 5, 0.5); --hm-dust-speck: rgba(238, 229, 210, 0.2);
  }
}

.house-grid { display: flex; flex-direction: column; gap: var(--s3); }
.house-map { display: flex; flex-direction: column; gap: var(--s2); }
.floor-tabs, .style-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.floor-tabs .chip { position: relative; }
.floor-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.style-switch { justify-content: center; }
.house-stage { position: relative; border-radius: var(--r-lg); background: var(--hm-paper); box-shadow: var(--shadow-1); overflow: hidden; }
.house-stage.is-plan { padding: var(--s2); }
/*
 * A whole floor has to fit on the screen at once (Srija, 18 Sept 2026, on what bothered her about the map).
 * The plan is much taller than it is wide, so at phone width it used to run to about 550 px and you could
 * only ever see the top half of a floor without scrolling — which defeats the point of an overview. Capping
 * the height lets the SVG scale itself down to fit, so the floor arrives whole.
 */
.hm-plan { display: block; width: 100%; height: auto; max-height: min(54vh, 560px); }
.hm-room { cursor: pointer; transition: fill 0.4s ease; outline: none; }
.hm-room:hover, .hm-room:focus-visible { fill: rgba(124, 92, 255, 0.08) !important; }
.hm-selected { pointer-events: none; animation: hm-pulse 2.4s ease-in-out infinite; }
@keyframes hm-pulse { 50% { stroke-opacity: 0.45; } }
.hm-name { font: 700 25px var(--font); fill: var(--hm-label); paint-order: stroke; stroke: var(--hm-label-halo); stroke-width: 6px; stroke-linejoin: round; }
.hm-state { font: 600 17px var(--font); fill: var(--hm-label); opacity: 0.75; paint-order: stroke; stroke: var(--hm-label-halo); stroke-width: 4px; stroke-linejoin: round; }
.hm-label.lvl-new .hm-state { opacity: 0.5; }
.hm-small { font: 600 15px var(--font); fill: var(--hm-ink); opacity: 0.7; }
.hm-guess { font-style: italic; }
html[data-world="estate"] .hm-name { font-family: "Cormorant Garamond", Georgia, serif; font-size: 29px; }
html[data-world="estate"] .hm-state, html[data-world="estate"] .hm-small { font-family: 'IM Fell English SC', 'EB Garamond', Georgia, serif; letter-spacing: 0.04em; }
@media (prefers-reduced-motion: reduce) { .hm-selected { animation: none; } }

/* The doll's house: the same floor tilted, with its walls raised in thin layers */
.house-stage.is-cutaway { aspect-ratio: 1 / 1.05; max-height: min(54vh, 560px); perspective: 1600px; display: grid; place-items: center; }
.hm-3d { position: relative; width: 70%; aspect-ratio: 0.62; transform-style: preserve-3d; transform: rotateX(52deg) rotateZ(-34deg); }
.hm-layer { position: absolute; inset: 0; transform: translateZ(var(--z, 0)); transform-style: preserve-3d; }
.hm-layer svg { width: 100%; height: 100%; display: block; }
.hm-layer.is-wall, .hm-layer.is-top { pointer-events: none; }
.hm-layer.is-floor { filter: drop-shadow(0 18px 18px rgba(40, 28, 16, 0.25)); }

.house-legend { display: flex; justify-content: center; gap: var(--s4); }
.house-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; box-shadow: inset 0 0 0 1px var(--line); }
.lg-fresh { background: color-mix(in srgb, var(--hm-glow) 60%, var(--hm-wood)); }
.lg-fading { background: var(--hm-wood); }
.lg-forgotten { background: color-mix(in srgb, #8a8a92 45%, var(--hm-wood)); }

.room-panel { display: flex; flex-direction: column; gap: var(--s3); }
.room-panel .list { box-shadow: none; border: 1px solid var(--line); }
.room-head { display: flex; align-items: flex-start; gap: var(--s2); }
.room-bar > span { background: var(--job-calm); }
.job-row { align-items: flex-start; }
.check-row { display: flex; align-items: center; gap: var(--s2); padding: 6px 0; font-size: 15px; }
.check-row input { width: 20px; height: 20px; accent-color: var(--job-calm); }
.house-setup { display: flex; flex-direction: column; gap: var(--s2); }
.house-setup-art { border-radius: var(--r-md); background: var(--hm-paper); padding: var(--s2); max-height: 320px; overflow: hidden; }
.house-setup-art .hm-room { pointer-events: none; }

@media (min-width: 720px) {
  .house-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
  .house-side { position: sticky; top: var(--s4); }
}
.hm-name.is-small { font-size: 18px; }

/* Doll's house walls: plaster sides, an ink line along the top */
:root { --hm-wall-side: #e4d6bf; --hm-wall-shade: #cbb99c; }
html[data-world="estate"] { --hm-wall-side: #e6d6b6; --hm-wall-shade: #c9b48c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-world="estate"]) { --hm-wall-side: #6a5f55; --hm-wall-shade: #544a41; }
  html[data-world="estate"] { --hm-wall-side: #6b5c47; --hm-wall-shade: #544836; }
}
.hm-layer.is-wall { --hm-wall: var(--hm-wall-shade); }
.hm-layer.is-wall:nth-child(n + 8) { --hm-wall: var(--hm-wall-side); }
.hm-layer.is-wall.is-cap { --hm-wall: var(--hm-ink); }
.house-stage.is-cutaway { aspect-ratio: 1 / 1; }
.hm-3d { width: 64%; transform: translateY(2%) rotateX(54deg) rotateZ(-36deg); }

/* Stairs from her photos: oak treads, white edges and sides, a dark wood handrail */
:root { --hm-oak: #caa27a; --hm-oak-grain: #b48a60; --hm-nosing: #f7f5f0; --hm-stair-side: #f3f1ec; --hm-handrail: #5a3322; }
@media (prefers-color-scheme: dark) { :root:not([data-world="estate"]) { --hm-oak: #8a6a4c; --hm-oak-grain: #74583e; --hm-nosing: #d8d2c8; --hm-stair-side: #bdb6ab; } html[data-world="estate"] { --hm-oak: #8a6a4c; --hm-oak-grain: #74583e; --hm-nosing: #d8ccb5; --hm-stair-side: #b8ab93; } }

/* Srija's room: dark wood floor (from her photo) */
:root { --hm-darkwood: #6b4a36; --hm-darkwood-line: #553927; --hm-darkwood-grain: #7a5741; }
@media (prefers-color-scheme: dark) { :root { --hm-darkwood: #4a3326; --hm-darkwood-line: #3a281d; --hm-darkwood-grain: #563c2d; } }

/* Stone tiles in the toilet and bathroom (from her photos) */
:root { --hm-stone: #a9a6a1; --hm-stone-line: #8f8c87; --hm-stone-fleck: #bdbab5; }
@media (prefers-color-scheme: dark) { :root { --hm-stone: #5e5b57; --hm-stone-line: #4b4945; --hm-stone-fleck: #6b6863; } }

/* Doll's house zoom on the tapped room */
.hm-3d { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hm-3d.is-zoomed { transform: translateY(2%) rotateX(54deg) rotateZ(-36deg) scale(2) translate(calc(50% - var(--ox)), calc(50% - var(--oy))); }
@media (prefers-reduced-motion: reduce) { .hm-3d { transition: none; } }

/* Attic floor boards */
:root { --hm-boards: #e8dcc3; --hm-boards-line: #cdbb98; }
@media (prefers-color-scheme: dark) { :root { --hm-boards: #574b3b; --hm-boards-line: #463c2f; } }


/* ---------- What's actually inside it (features/house/inside.js) ---------- */

.ins-lede { color: var(--muted); margin: 0 0 var(--s3); }
.ins-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.ins-piece {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3); border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--c, var(--line));
}
.ins-piece.tone-hot { --c: var(--job-hot); }
.ins-piece.tone-warm { --c: var(--job-warm); }
.ins-piece.tone-calm { --c: var(--job-calm); }
.ins-piece.tone-new { --c: var(--job-new); }
.ins-piece strong { display: block; }
.ins-piece .small { display: block; }
.ins-every { font-style: normal; }
.ins-every.is-own { font-weight: 600; color: var(--job-new); }
.ins-actions { margin-top: var(--s3); }
.ins-note { margin-top: var(--s3); }
.ins-link { text-decoration: underline; text-underline-offset: 2px; }

.ins-pick { list-style: none; margin: 0 0 var(--s2); padding: 0; display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.ins-pick-row { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--surface); border: 1px solid var(--line); }
.ins-pick-row strong { display: block; }
.ins-pick-row .small { display: block; }

/* ---------- "I did something" (features/house/did.js) ---------- */

.btn-did { width: 100%; margin-top: var(--s3); justify-content: center; }

/* ---------- General: the house itself, not a room (plan.js GENERAL_ID) ---------- */

.general-row { margin: var(--s3) 0 var(--s2); }
.general-chip {
  width: 100%; display: flex; align-items: center; gap: var(--s2);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  padding: var(--s3); border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
}
.general-chip.is-on { border-color: var(--job-calm); background: color-mix(in srgb, var(--job-calm) 8%, var(--surface)); }
.general-chip strong { display: block; }
.general-chip .small { display: block; }

/* ---------- Her kitchen, drawn (features/house/scene.js) ---------- */

.kx-lede { color: var(--muted); font-size: 14.5px; margin: 0 0 var(--s2); }
/*
 * The room reveals itself (Srija, 18 Sept 2026, from the kitchen-designer pictures she sent: a line drawing
 * wiping across into the finished photograph). The drawing is the BEFORE, her photo is the AFTER, and how
 * far the photo has come across is how much of the room she is keeping up.
 *
 * The drawing is drawn as INK: every fill is dropped and every edge becomes a line, which is what turns a
 * washed-out grey model into something that reads as a designer's plan. --reveal runs 0 to 1.
 */
.kx-room { position: relative; border-radius: var(--r-md); overflow: hidden; line-height: 0; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22); }
.kx-room.has-photo { --rw: calc(var(--reveal, 0) * 130%); background: #fbfaf7; }
.kx-room.has-photo .kx-svg * { fill: none !important; stroke: #3a3a3c !important; stroke-width: 1.3 !important; }
.kx-room.has-photo .kx-svg text { fill: #3a3a3c !important; stroke: none !important; }

/* Her photograph, wiping across from the right on the same diagonal the reference pictures use. */
.kx-real { position: absolute; inset: 0; pointer-events: none; transition: clip-path 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.kx-real img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kx-room.has-photo .kx-real {
  /* At nothing-done the whole photo sits off the right edge; at everything-kept it covers the room. */
  clip-path: polygon(calc(114% - var(--rw)) 0%, 150% 0%, 150% 100%, calc(100% - var(--rw)) 100%);
  filter: drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.95)) drop-shadow(-6px 0 14px rgba(255, 255, 255, 0.5));
}
@media (prefers-reduced-motion: reduce) { .kx-real { transition: none; } }
.kx-actions { display: flex; justify-content: flex-end; margin-top: var(--s2); }
.kx-svg { width: 100%; height: auto; display: block; }
.kx-hint { margin-top: var(--s2); }

.kx { cursor: pointer; }
.kx:hover { filter: brightness(1.08); }
.kx:focus-visible { outline: 2px solid var(--job-new); outline-offset: 1px; }
.kx-word { font-size: 17px; fill: #9aa0a4; font-family: var(--font); letter-spacing: 0.04em; }

/* How many jobs a thing is waiting on. Nothing is drawn when it is up to date. */
.kx-badge circle { fill: var(--job-hot); }
.kx-badge text { fill: #fff; font-size: 14px; font-weight: 700; font-family: var(--font); }

.kx-panel { margin-top: var(--s3); }
.kx-panel-head { display: flex; align-items: flex-start; gap: var(--s2); margin-bottom: var(--s2); }
.kx-panel-head h2 { margin: 0; }
.kx-job strong { display: block; }
.kx-job .small { display: block; }

.room-walk { display: inline-flex; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }