/* ==========================================================================
   Interactive building — "where the twenty points live"
   Zone-selectable cross-section. Works on hover, click, keyboard and touch.
   ========================================================================== */

/* --- STATUS SEMANTICS -----------------------------------------------------
   These four colours mean status and NOTHING else. No green buttons, no
   amber links, no red headings anywhere on the site. The moment one of them
   does double duty, every live indicator stops meaning anything. */
:root{
  --st-ok:      #36ab80;
  --st-warn:    #e0a33c;
  --st-alarm:   #ef5f4a;
  --st-offline: #8a9ca5;   /* comms lost is grey, never red */
}

.zones{
  display:grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: clamp(24px,3vw,48px);
  align-items:center;
}
@media (max-width:900px){ .zones{ grid-template-columns:1fr; gap:26px; } }

.zones-fig{ margin:0; position:relative; }
.zones-fig svg{ width:100%; height:auto; display:block; overflow:visible; }

/* a zone is a button drawn in SVG */
.zone{ cursor:pointer; }
.zone .zone-hit{
  fill:transparent;
  transition:fill 200ms var(--ease-soft, ease);
}
.zone:hover .zone-hit,
.zone:focus-visible .zone-hit{ fill:rgba(226,86,29,.07); }
.zone.is-active .zone-hit{ fill:rgba(226,86,29,.12); }
.zone:focus{ outline:none; }
.zone:focus-visible .zone-frame{ stroke:var(--ember); stroke-width:2; }

.zone-frame{
  fill:none; stroke:#2f3541; stroke-width:1;
  transition:stroke 200ms var(--ease-soft, ease);
}
.zone:hover .zone-frame{ stroke:#4a5260; }
.zone.is-active .zone-frame{ stroke:var(--ember); }

.zone-tag{
  font-family:var(--mono); font-size:13px; letter-spacing:1.3px;
  fill:#8a93a2; transition:fill 200ms var(--ease-soft, ease);
}
.zone:hover .zone-tag,
.zone.is-active .zone-tag{ fill:var(--ember-2); }

.zone-n{
  font-family:var(--display); font-size:14px; font-weight:600;
  fill:#9ba5b4; transition:fill 200ms var(--ease-soft, ease);
}
.zone.is-active .zone-n{ fill:#fff; }

/* --- the readout panel --------------------------------------------------- */
.zones-read{
  background:var(--night-2); border:1px solid var(--night-line);
  border-radius:var(--r); overflow:hidden;
}
.zones-read-h{
  padding:16px 20px; border-bottom:1px solid var(--night-line);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  background:var(--night-3);
}
.zones-read-h h3{ margin:0; font-size:1.02rem; color:#fff; }
.zones-read-h .cnt{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ember-2); white-space:nowrap;
}
.zones-list{ list-style:none; margin:0; padding:6px 0; max-height:330px; overflow-y:auto; }
.zones-list li{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:10px 20px; font-size:.9rem; color:#c3cad6;
  border-bottom:1px solid rgba(39,44,54,.6);
}
.zones-list li:last-child{ border-bottom:0; }
.zones-list .num{
  font-family:var(--mono); font-size:0.78rem; color:#6d7686; min-width:18px;
}
.zones-list .mode{
  font-family:var(--mono); font-size:0.78rem; letter-spacing:.03em;
  color:#8a93a2; text-align:right; white-space:nowrap; line-height:1.35;
}
.zones-hint{
  padding:12px 20px; border-top:1px solid var(--night-line);
  font-family:var(--mono); font-size:0.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:#6d7686;
}

/* staged entry so the list does not just swap */
.zones-list li{ animation:zrow 320ms var(--ease-out, ease) both; }
@keyframes zrow{ from{ opacity:0; transform:translateY(5px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion: reduce){
  .zones-list li{ animation:none; }
  .zone .zone-hit,.zone-frame,.zone-tag,.zone-n{ transition:none; }
}

/* SVG text is multiplied by the viewBox scale, so the attribute value only
   means something alongside the rendered width. Measured curve:

     viewport 1440 -> 633px rendered, scale 1.13
     viewport 1000 ->  517px,         scale 0.92   (narrowest two-column case)
     viewport  900-640 -> 560px,      scale 1.00   (one column, capped)
     viewport  527 ->  479px,         scale 0.855
     viewport  375 ->  327px,         scale 0.584

   Base 13/14px therefore lands between 12.0 and 14.7px everywhere down to
   640, and the steps below hold the floor as the scale falls away. */
@media (max-width:640px){
  .zone-tag{ font-size:15px; letter-spacing:1.5px; }
  .zone-n{ font-size:16px; }
}
@media (max-width:520px){
  .zone-tag{ font-size:17px; letter-spacing:1.7px; }
  .zone-n{ font-size:18px; }
}
@media (max-width:430px){
  /* scale bottoms out at 0.584 here, so 22 -> 12.8px rendered */
  .zone-tag{ font-size:22px; letter-spacing:2.1px; }
  .zone-n{ font-size:23px; }
}