/* The room plan, ported from Direction B into Direction A.
   B's geometry and its five zones are kept, because that is the piece the client
   liked. Everything visual is redrawn in A's tokens: paper panel, hairline rules,
   sage at rest, ochre when live, DM Mono labels. No colour is baked into the SVG
   any more, so the whole thing themes from CSS.
   Additive to a4.css. Scoped under .plan so a4 is untouched. */

.plan{display:grid;gap:clamp(24px,3.4vw,46px);align-items:start;
  margin-top:clamp(34px,4.4vw,56px)}
@media(min-width:940px){.plan{grid-template-columns:1.25fr .75fr}}

/* --------------------------------------------------------------- the panel */
.plan-fig{margin:0;background:#FDFBF8;border:1px solid var(--rule);
  border-radius:var(--r);padding:clamp(14px,2vw,22px)}
.plan-svg{width:100%;height:auto;display:block}

.plan-wall{fill:none;stroke:var(--ink);stroke-width:1.4}
/* masks the wall where the door opens, so it must match the panel exactly */
.plan-door-gap{stroke:#FDFBF8;stroke-width:3}
.plan-swing{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:3 3}
.plan-in{stroke:var(--ochre);stroke-width:1.4;fill:none}
.plan-in-label{font-family:var(--mono);font-size:9px;letter-spacing:.08em;
  fill:var(--ochre)}

/* ---------------------------------------------------------------- the zones */
.zone{cursor:pointer}
.zone .z{fill:var(--paper-2);stroke:var(--rule);stroke-width:1;
  transition:fill .3s ease,stroke .3s ease}
.zone:hover .z,.zone.on .z{fill:var(--ochre-2);stroke:var(--ochre)}
.zone text{font-family:var(--mono);font-size:9px;letter-spacing:.09em;
  fill:var(--ink-3);transition:fill .3s ease;pointer-events:none}
.zone:hover text,.zone.on text{fill:#8E5219}
.zone-dot{fill:var(--ochre);opacity:0;transition:opacity .3s ease}
.zone.on .zone-dot{opacity:1}
@media (prefers-reduced-motion:reduce){
  .zone .z,.zone text,.zone-dot{transition:none}}

/* ----------------------------------------------------------------- the list */
.zone-list{display:grid;gap:0;border-top:1px solid var(--rule)}
.zone-btn{display:grid;grid-template-columns:28px 1fr;gap:14px;
  padding:16px 0;text-align:left;background:none;border:0;
  border-bottom:1px solid var(--rule);cursor:pointer;color:inherit;
  font-family:var(--sans);width:100%}
.zone-btn .num{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;
  color:var(--sage);padding-top:3px;transition:color .3s ease}
.zone-btn b{display:block;font-size:16px;font-weight:600;color:var(--ink);
  transition:color .3s ease}
.zone-btn .say{display:block;font-size:14.5px;line-height:1.5;color:var(--ink-3);
  margin-top:5px;max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.22,.7,.3,1)}
.zone-btn.on .say{max-height:120px}
.zone-btn.on .num{color:var(--ochre)}
.zone-btn.on b{color:#8E5219}
.zone-btn:focus-visible{outline:2px solid var(--sage);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .zone-btn .say{max-height:none;transition:none}
  .zone-btn .num,.zone-btn b{transition:none}}

.plan-note{font-size:var(--t-small);color:var(--ink-3);margin:18px 0 0;max-width:40ch}