/* ═══════════════════════════════════════════════════════════════════════════
   DRAWN — the parts every drawn picture of the house is made of.

   [Decided — Rafael, 2026-09-29] The website's drawings are to be unified:
   "how can they be more seamless into everything, more complete, but at the
   same time minimalistic". Until today each drawing on Home carried its own
   classes and its own colours (.ln-* for the robot, .l-* for the watching
   scene, raw hex in the hero), so no two agreed on what a room, a wall cut or
   the robot looks like.

   [Proposed — Claude, 2026-09-29] One set, taken from the two drawings Rafael
   likes best: the watching scene's parts and the hero's sky. Every drawing
   wears .drawn on its <svg> and draws with these classes only.

     THE SCALE   1 unit = 8 mm unless a drawing says otherwise, so the storey
                 (3 072) is 384, the robot (640) 80 and a box (480) 60.
     THE RULES   hidden tech is dark titanium, what a person meets is bright
                 [Decided — Rafael, 2026-09-27]; boxes are light; the hearth is
                 only ever light — a sensor, the crown, a status — never a
                 surface. Nature (sky, grass, trees) may skip the tokens
                 [Decided — Rafael, 2026-09-26].
     THE FRAME   a whole house stands full width on its section's own ground;
                 a crop — part of the house — sits in the container with the
                 system's --radius-s. The earth is always the section's ground,
                 so a drawing never ends on a strip of its own.
     THE LABEL   .d-tag, the pill from the watching scene, at most three or
                 four in a drawing. No hairline captions.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE SKY — the hero's dusk by night, the day sky by day ───────────────── */
.drawn .d-s1 { stop-color: #121016; }
.drawn .d-s2 { stop-color: #2b2632; }
.drawn .d-s3 { stop-color: #6a4b3e; }
.drawn .d-s4 { stop-color: #b8744f; }
[data-theme="light"] .drawn .d-s1 { stop-color: #8fb1cd; }
[data-theme="light"] .drawn .d-s2 { stop-color: #b3cadb; }
[data-theme="light"] .drawn .d-s3 { stop-color: #dbe5e8; }
[data-theme="light"] .drawn .d-s4 { stop-color: #f1ece2; }
.drawn .d-star { fill: #f1ece2; opacity: .7; }
[data-theme="light"] .drawn .d-star { display: none; }

/* ── NATURE ─────────────────────────────────────────────────────────────── */
/* the section's own ground: the page's by default, a section on another
   ground names it with --d-ground (a well section: var(--well-bg)) */
.drawn .d-earth { fill: var(--d-ground, var(--theme-bg)); }
.drawn .d-grass { fill: #55603f; }
.drawn .d-tree  { fill: #3f4a31; }
.drawn .d-trunk { fill: var(--timber-bright); }

/* ── THE HOUSE, CUT ─────────────────────────────────────────────────────── */
.drawn .d-cut   { fill: var(--creme-dark); }     /* walls and slabs where the cut goes through */
.drawn .d-room  { fill: var(--creme-light); }    /* a lit room's back wall */
.drawn .d-roof  { fill: var(--timber-light); }
.drawn .d-glass { fill: var(--titanium-dark); opacity: .55; }
.drawn .d-milk  { fill: var(--creme-base); }     /* glass switched to frosted */
.drawn .d-furn  { fill: var(--titanium-light); }
.drawn .d-person { fill: var(--titanium-dark); }

/* ── THE TECH, HIDDEN — dark titanium ───────────────────────────────────── */
.drawn .d-tunnel { fill: var(--timber-base); }    /* the robot's tunnel in the top MU, the chase down to a hub */
.drawn .d-void   { fill: var(--timber-dark); }    /* a shaft, the inside of a wall */
.drawn .d-rail   { fill: var(--titanium-light); }
.drawn .d-grid   { fill: var(--titanium-bright); } /* the storage grid — aluminium, bright */
.drawn .d-crown  { fill: var(--creme-bright); }

/* ── THE MOVING PARTS ───────────────────────────────────────────────────── */
.drawn .d-robot     { fill: var(--titanium-dark); }
.drawn .d-robot-top { fill: var(--titanium-bright); }
.drawn .d-box       { fill: var(--creme-bright); stroke: var(--creme-dark); stroke-width: 1; }
.drawn .d-tape      { stroke: var(--titanium-bright); stroke-width: 1.5; }

/* ── LIGHT — the hearth, only ever as light ─────────────────────────────── */
.drawn .d-eye  { fill: var(--hearth-bright); }   /* a sensor in the crown */
.drawn .d-led  { fill: var(--hearth-light); }
.drawn .d-seen { fill: none; stroke: var(--titanium-bright); stroke-width: 2.2; }   /* what the house sees: corner marks */

/* ── THE TAG — the one label a drawing carries ──────────────────────────── */
.drawn .d-tag rect   { fill: rgba(var(--timber-dark-rgb), .85); }
.drawn .d-tag circle { fill: var(--hearth-bright); }
/* The font shorthand resets font-feature-settings, so the tag sets the Inter switches again
   (token file, THE BODY FACE). [Derived — from basalt/decisions.md, "The body face"] */
.drawn .d-tag text   { font: 500 13px var(--font-ui); font-feature-settings: var(--inter-switches); letter-spacing: var(--tracking-label); fill: var(--creme-bright); }
/* THE BARE TAG [Proposed — Claude, 2026-09-30; Rafael on the pills: "they just don't look good … without the
   background at all?"]: the dot and the words, no pill, set where the ground is already dark — a ceiling's
   band, the lawn at night. On a light ground the words take the timber. */
.drawn .d-tag.bare rect { display: none; }
.drawn .d-tag.bare text { font-size: 15px; }
[data-theme="light"] .drawn .d-tag.bare.on-light text { fill: var(--timber-base); }

/* ── THE CROP FRAME ─────────────────────────────────────────────────────── */
.drawn-crop { position: relative; border-radius: var(--radius-s); overflow: hidden; }
.drawn-crop > svg { display: block; width: 100%; height: auto; }