/* 83 Fortunes Ridge Dr, level by level (#12): the stacking model's own
   tokens and parts, over the anatomy kit's light theme (static/css/iso.css).
   The firm's teal is the one lit accent; the cut tops of the walls are dark,
   the way the floor plans draw walls; everything else stays the kit's
   paper greys. */
.house-model.iso[data-theme="light"] {
  --anatomy-page: #ffffff;
  --anatomy-card: #ffffff;
  --anatomy-text: #444b49;
  --anatomy-strong: #181b1a;
  --anatomy-muted: #5b6361;
  --anatomy-lit: #008066;
  --anatomy-lit-top: #e3f1ed;
  --anatomy-lit-shade: #d3e8e1;
  --house-cut: #2f3836;
  --house-floor: #f6f4ee;
  --house-deck: #efeae0;
  --house-well: #dfe5e3;
  --house-glass: #dcefe9;
  --house-room: rgba(0, 128, 102, 0.16);
}
.house-model .iso-plate { box-shadow: 0 0 0 1px var(--line, #cfddd9); border-radius: 14px; }
.house-model .iso-svg { display: block; width: 100%; height: auto; }
.house-model .cut > .iso-top { fill: var(--house-cut); }
.house-model .floor > .iso-top { fill: var(--house-floor); }
.house-model .deck > .iso-top { fill: var(--house-deck); }
.house-model .hearth > .iso-top { fill: #c9c6bd; }
.house-model .glass > .iso-fill,
.house-model .glass > .iso-top,
.house-model .glass > .iso-shade { fill: var(--house-glass); }
.house-model .well { fill: var(--house-well); stroke: none; }
.house-model .room { fill: transparent; stroke: none; cursor: pointer; }
.house-model .room[data-on] { fill: var(--house-room); stroke: var(--anatomy-lit); stroke-width: 0.9; }
.house-model .brass > .iso-top { fill: #f3ecd9; }
.house-model .brass > .iso-shade[data-shade="0"] { fill: #ddd2b4; }
.house-model .brass > .iso-shade[data-shade="1"] { fill: #e5dbc0; }
.house-model .brass > .iso-shade[data-shade="2"] { fill: #ece3cc; }
.house-model .brass > .iso-shade[data-shade="3"] { fill: #f1e9d6; }
/* only rooms and trays answer the pointer */
.house-model .iso-svg * { pointer-events: none; }
.house-model .iso-svg .room,
.house-model .iso-svg .board > .iso-fill { pointer-events: visiblePainted; }
/* a picked level: its board edge goes teal; the others step back */
.house-model .tray { transition: opacity 0.35s ease; }
.house-model svg[data-focus] .tray:not([data-on]) { opacity: 0.5; }
.house-model .tray[data-on] .board > .iso-edge { stroke: var(--anatomy-lit); stroke-width: 1.2; }
.house-model .house-stage { outline: none; cursor: pointer; touch-action: pan-y; }
.house-model .house-stage:focus-visible { outline: 1px solid var(--anatomy-muted); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .house-model .tray { transition: none; } }

/* the page around the model */
.page-hero--house { padding-bottom: 2rem; }
.house-section { padding: 0 0 var(--space, 4rem); background: linear-gradient(var(--mist, #e7efed) 0 6rem, var(--snow, #fff) 6rem); }
.house-section .wrap { max-width: 50rem; }
.house-model .iso-figure { margin: 0; }
.house-model .iso-legend { margin-top: .9rem; font-size: .875rem; color: var(--gray, #444b49); }
.house-levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.house-level { padding: 1.25rem 1.25rem 1.15rem; background: var(--snow, #fff); border-radius: var(--r-card, 20px); display: flex; flex-direction: column; }
.house-level h3 { margin-bottom: .2rem; }
.house-level .kicker { margin-bottom: .2rem; }
.house-rooms { list-style: none; margin: .5rem 0 1rem; padding: 0; }
.house-rooms li { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line, #cfddd9); }
.house-rooms .room-name { font-weight: 600; }
.house-rooms .room-size { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--gray, #444b49); white-space: nowrap; }
.house-rooms .unlabelled .room-size { font-style: italic; }
.house-rooms .room-show { border: 1px solid var(--teal, #008066); background: none; color: var(--teal-ink, #006b55); border-radius: 999px; padding: .15rem .6rem; font: 600 .8125rem/1.4 inherit; cursor: pointer; min-height: 32px; }
.house-rooms .room-show[aria-pressed="true"] { background: var(--teal, #008066); color: #fff; }
.house-level .btn--small { margin-top: auto; align-self: flex-start; }
.house-levels [hidden] { display: none !important; }