/* ==========================================================================
   AIVENT · scene.css (C · 3D ja joonised)
   Avaploki õhuteede paneel (#ohuteed), AIROBOTi seadmepaneel, SVG-varuvaate olekud.
   Kasutab site.css tokeneid (varuväärtustega). Õhuteede värvid on siin :root-is ja
   samad mis app/data/model-v5.json presentation.colors (värv = funktsioon, mitte temperatuur).
   Värviloogika EN 16798-3 järgi: ODA välisõhk roheline, SUP sissepuhe sinine, ETA väljatõmme kollane/oranž,
   EHA heitõhk pruun; köögikubu (eraldi kanal) punane, siirdõhk hall. scene.js kirjutab samad väärtused
   mudeli `colors` järgi ka käitusajal (html style), seega mudel on allikas.
   ========================================================================== */

:root {
  --flow-sup: #1b78d0;
  --flow-eta: #e3a01a;
  --flow-oda: #1f9d55;
  --flow-eha: #8a5a2b;
  --flow-transfer: #647386;
  --flow-hood: #c8362f;
  /* Tekst õhutee värvil (koodisildid, sammunumbrid): taust + tint rolli kaupa, kontrast ≥ 4,5:1 (WCAG 1.4.3).
     Heledamad toonid (ETA, ODA) ei kanna valget teksti 80 % navy-segul; scene.js arvutab samad väärtused mudeli
     värvidest käitusajal uuesti ja kirjutab need html-ile. */
  --flow-sup-tagbg: #1a6ab5;
  --flow-sup-ink: #ffffff;
  --flow-eta-tagbg: #e3a01a;
  --flow-eta-ink: #16324a;
  --flow-oda-tagbg: #1d8553;
  --flow-oda-ink: #ffffff;
  --flow-eha-tagbg: #735231;
  --flow-eha-ink: #ffffff;
  --flow-transfer-tagbg: #54667a;
  --flow-transfer-ink: #ffffff;
  --flow-hood-tagbg: #a43534;
  --flow-hood-ink: #ffffff;
}

/* hidden-atribuut peidab alati (ka siis, kui komponendil on oma display). */
.scene-panel [hidden],
.unit-panel [hidden] { display: none !important; }

/* JavaScriptita ei näidata juhtnuppe, mis vajavad skripti. */
@media (scripting: none) {
  .scene-js { display: none !important; }
}

/* --------------------------------------------------------------- paneel */
.scene-panel {
  --sp-pad: clamp(0.875rem, 0.55rem + 1.1vw, 1.375rem);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--c-line, #dde6ee);
  border-radius: var(--radius-l, 22px);
  background:
    radial-gradient(120% 70% at 50% 0%, #ffffff 0%, rgb(255 255 255 / 0) 70%),
    linear-gradient(168deg, #ffffff 0%, var(--c-soft, #f2f6f9) 58%, var(--c-soft-2, #e9f1f7) 100%);
  box-shadow: var(--shadow-2, 0 2px 6px rgb(11 42 76 / 0.05), 0 24px 56px -22px rgb(11 42 76 / 0.26));
  color: var(--c-ink, #1b3146);
  font-family: var(--font-sans, Arial, Helvetica, "Liberation Sans", sans-serif);
  overflow: hidden;
  isolation: isolate;
}

.scene-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: var(--sp-pad) var(--sp-pad) 0;
}
.scene-panel__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--c-blue, #0a6db3);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.3;
  text-transform: uppercase;
}
.scene-panel__tag::before {
  content: "";
  width: 1.4rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--flow-sup), var(--flow-oda));
}

/* --------------------------------------------------------------- lava */
.scene-stage { position: relative; }
.scene-host {
  position: relative;
  height: clamp(320px, 96vw, 480px);
  container-type: inline-size;
  overflow: hidden;
  /* Pehme taevas mudeli taga (lõuend on läbipaistev). */
  background:
    radial-gradient(90% 70% at 55% 30%, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, #eef4f9 0%, #f6f9fb 55%, rgb(246 249 251 / 0) 100%);
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 900px) {
  .scene-host { height: clamp(440px, 39vw, 560px); }
}

.scene-fallback {
  position: absolute;
  inset: 0.25rem clamp(0.4rem, 2cqw, 1.1rem) 0.5rem;
  transition: opacity var(--dur-3, 640ms) var(--ease-out, ease);
}
.scene-fallback > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.scene-host.is-3d .scene-fallback { opacity: 0; pointer-events: none; }
.scene-host.is-3d.is-settled .scene-fallback { visibility: hidden; }
/* Laadimisel SVG-joonis ei vilksata 3D eest: JS-iga peidus, nähtav ainult SVG-režiimis (is-svg: WebGL puudub/ebaõnnestus).
   Ilma JS-ita ilmub joonis väikese viivitusega, et JS jõuaks enne esimest vilksatust klassi .js panna. */
.scene-fallback { animation: scene-fb-in 0.4s ease 1.2s both; }
.js .scene-fallback { animation: none; opacity: 0; }
.js .scene-host.is-svg .scene-fallback { opacity: 1; }
@keyframes scene-fb-in { from { opacity: 0; } to { opacity: 1; } }
/* Varuvaate teade (mudel või joonis ei laadi): lühike eestikeelne tekst keset lava, mitte tühi ala. */
.scene-fallback--note {
  display: grid;
  place-items: center;
  text-align: center;
}
.scene-fallback__note {
  margin: 0;
  max-width: 30ch;
  padding: 0.65rem 1rem;
  border: 1px solid var(--c-line, #d9e1e8);
  border-radius: var(--radius-l, 12px);
  background: color-mix(in srgb, #fff 86%, transparent);
  color: var(--c-ink, #16324a);
  font-size: 0.95rem;
  line-height: 1.45;
}

.scene-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: grab;
  touch-action: pan-y;
  outline: none;
  transition: opacity var(--dur-3, 640ms) var(--ease-out, ease);
}
.scene-host.is-3d .scene-canvas,
.unit-host.is-3d .scene-canvas { opacity: 1; }
.scene-canvas.is-dragging { cursor: grabbing; }
.scene-canvas.is-pointing { cursor: pointer; }
.scene-canvas:focus-visible {
  outline: var(--focus-w, 2px) solid var(--c-focus, #0a6db3);
  outline-offset: calc(-1 * var(--focus-w, 2px) - 1px);
  border-radius: 6px;
}

.scene-loading {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem 0.4rem 0.65rem;
  transform: translateX(-50%);
  border: 1px solid var(--c-line, #dde6ee);
  border-radius: var(--radius-pill, 999px);
  background: rgb(255 255 255 / 0.92);
  box-shadow: var(--highlight, inset 0 1px 0 rgb(255 255 255 / 0.9)), var(--elev-2, 0 1px 1px rgb(11 42 76 / 0.05), 0 4px 8px -2px rgb(11 42 76 / 0.1), 0 14px 26px -14px rgb(11 42 76 / 0.28));
  color: var(--c-muted, #52677a);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.scene-loading__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--flow-sup);
  animation: scene-pulse 1.1s var(--ease-in-out, ease-in-out) infinite alternate;
}
.scene-loading--dark {
  border-color: rgb(255 255 255 / 0.14);
  background: rgb(10 32 54 / 0.85);
  color: var(--c-on-deep, #e3edf6);
}
@keyframes scene-pulse { from { opacity: 0.35; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

/* Suumi juhtnupp (ainult WebGL-vaates): + / −, püstine logaritmiline skaala (role=slider) ja tase. */
.scene-zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}
.scene-zoom[hidden] { display: none; }
.scene-zoom__scale {
  --zoom-pos: 24.1%;
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 6.25rem;
  border-radius: var(--radius-pill, 999px);
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.scene-zoom__scale:focus-visible { outline: var(--focus-w, 2px) solid var(--c-focus, #0a6db3); outline-offset: 2px; }
.scene-zoom__track {
  position: relative;
  width: 0.375rem;
  height: 100%;
  border-radius: var(--radius-pill, 999px);
  background: rgb(11 42 76 / 0.13);
  box-shadow: inset 0 1px 2px rgb(11 42 76 / 0.18), 0 1px 0 rgb(255 255 255 / 0.9);
}
.scene-zoom__ticks {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}
.scene-zoom__ticks i {
  display: block;
  width: 0.9rem;
  height: 1px;
  margin-left: -0.26rem;
  background: rgb(11 42 76 / 0.22);
}
.scene-zoom__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--zoom-pos);
  border-radius: var(--radius-pill, 999px);
  background: var(--c-navy, #0b2a4c);
  box-shadow: var(--highlight-on-dark, inset 0 1px 0 rgb(255 255 255 / 0.16));
}
.scene-zoom__thumb {
  position: absolute;
  left: 50%;
  bottom: var(--zoom-pos);
  width: 1.05rem;
  height: 1.05rem;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background: #fff;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0) 38%, rgb(11 42 76 / 0.045) 100%);
  box-shadow: var(--highlight, inset 0 1px 0 rgb(255 255 255 / 0.9)), 0 0 0 1px var(--edge, rgb(11 42 76 / 0.14)), var(--elev-2, 0 1px 1px rgb(11 42 76 / 0.05), 0 4px 8px -2px rgb(11 42 76 / 0.1), 0 14px 26px -14px rgb(11 42 76 / 0.28));
  transition: bottom var(--dur-1, 140ms) var(--ease-out, ease), box-shadow var(--dur-2, 260ms) var(--ease-out, ease);
}
.scene-zoom__scale:hover .scene-zoom__thumb { box-shadow: var(--highlight, inset 0 1px 0 rgb(255 255 255 / 0.9)), 0 0 0 1px var(--edge-strong, rgb(11 42 76 / 0.26)), var(--elev-3, 0 1px 2px rgb(11 42 76 / 0.06), 0 8px 18px -8px rgb(11 42 76 / 0.14), 0 30px 60px -26px rgb(11 42 76 / 0.32)); }
.scene-zoom__fill { transition: height var(--dur-1, 140ms) var(--ease-out, ease); }
.scene-zoom__value {
  min-width: 2.5rem;
  padding: 0.22rem 0.4rem;
  border-radius: var(--radius-pill, 999px);
  background: rgb(255 255 255 / 0.92);
  box-shadow: 0 0 0 1px var(--edge, rgb(11 42 76 / 0.14));
  color: var(--c-navy, #0b2a4c);
  font: 700 0.6875rem/1 var(--font-mono, Consolas, "Cascadia Mono", Menlo, monospace);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
}
.scene-zoom .scene-btn[aria-disabled="true"] { opacity: 0.5; cursor: default; transform: none; }
/* Vihje, kui ratas keriks lehte (lava pole aktiivne): lühike pill lava ülaservas. */
.scene-zoom-hint {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  z-index: 6;
  max-width: calc(100% - 1.5rem);
  padding: 0.45rem 0.85rem;
  transform: translate(-50%, -6px);
  border-radius: var(--radius-pill, 999px);
  background: rgb(11 42 76 / 0.88);
  box-shadow: var(--highlight-on-dark, inset 0 1px 0 rgb(255 255 255 / 0.16)), var(--elev-2, 0 1px 1px rgb(11 42 76 / 0.05), 0 4px 8px -2px rgb(11 42 76 / 0.1), 0 14px 26px -14px rgb(11 42 76 / 0.28));
  color: #fff;
  font: 700 0.75rem/1.25 var(--font-sans, Arial, Helvetica, sans-serif);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-2, 260ms) var(--ease-out, ease), transform var(--dur-2, 260ms) var(--ease-out, ease);
}
.scene-zoom-hint.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Õhu teekonna nupp lava vasakus alanurgas */
.scene-tour-btn {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  max-width: calc(100% - 4.75rem);
  padding: 0 1rem 0 0.4rem;
  border: 0;
  border-radius: var(--radius-pill, 999px);
  background: var(--c-navy, #0b2a4c);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0) 60%);
  box-shadow: var(--highlight-on-dark, inset 0 1px 0 rgb(255 255 255 / 0.16)), var(--elev-3, 0 1px 2px rgb(11 42 76 / 0.06), 0 8px 18px -8px rgb(11 42 76 / 0.14), 0 30px 60px -26px rgb(11 42 76 / 0.32));
  color: #fff;
  font: 700 0.8125rem/1.15 var(--font-sans, Arial, Helvetica, sans-serif);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-1, 140ms), transform var(--dur-2, 260ms) var(--ease-out, ease), box-shadow var(--dur-2, 260ms) var(--ease-out, ease);
}
.scene-tour-btn__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--flow-oda), var(--flow-sup));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.25);
}
.scene-tour-btn__ico svg { transform: translateX(1px); }
.scene-tour-btn:hover {
  background-color: var(--c-navy-2, #143e68);
  box-shadow: var(--highlight-on-dark, inset 0 1px 0 rgb(255 255 255 / 0.16)), var(--elev-4, 0 2px 4px rgb(11 42 76 / 0.06), 0 18px 36px -14px rgb(11 42 76 / 0.22), 0 50px 100px -36px rgb(11 42 76 / 0.42));
  transform: translateY(-1px);
}
.scene-tour-btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--highlight-on-dark, inset 0 1px 0 rgb(255 255 255 / 0.16)), var(--elev-1, 0 1px 1px rgb(11 42 76 / 0.05), 0 2px 4px -1px rgb(11 42 76 / 0.07), 0 6px 14px -8px rgb(11 42 76 / 0.14)); }
.scene-tour-btn:focus-visible { outline: var(--focus-w, 2px) solid var(--c-focus, #0a6db3); outline-offset: 3px; }

/* --------------------------------------------------------------- 3D sildid */
.scene-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
/* Juhtjooned: nihutatud silt → ankrupunkt (märgi oma õhutee värv, ruumisilt tume). */
.scene-leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.scene-leaders line {
  stroke: var(--c-navy, #0b2a4c);
  stroke-opacity: 0.5;
  stroke-width: 1;
}
.scene-label {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.7rem;
  margin: 0;
  padding: 0 0.7rem 0 0.55rem;
  border: 1px solid var(--edge, rgb(11 42 76 / 0.14));
  border-radius: var(--radius-pill, 999px);
  background: rgb(255 255 255 / 0.95);
  box-shadow: var(--highlight, inset 0 1px 0 rgb(255 255 255 / 0.9)), var(--elev-2, 0 1px 1px rgb(11 42 76 / 0.05), 0 4px 8px -2px rgb(11 42 76 / 0.1), 0 14px 26px -14px rgb(11 42 76 / 0.28));
  color: var(--c-navy, #0b2a4c);
  font: 700 0.75rem/1 var(--font-sans, Arial, Helvetica, sans-serif);
  -webkit-backdrop-filter: saturate(1.5) blur(6px);
  backdrop-filter: saturate(1.5) blur(6px);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  will-change: transform;
  transition: opacity var(--dur-2, 260ms) var(--ease-out, ease), background-color var(--dur-1, 140ms), color var(--dur-1, 140ms), box-shadow var(--dur-1, 140ms), border-color var(--dur-1, 140ms);
}
.scene-label::before {
  /* Puuteala vähemalt 40 px kõrge ilma silti suurendamata. */
  content: "";
  position: absolute;
  inset: -0.6rem -0.25rem;
}
.scene-label__dot {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--flow-transfer);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9);
}
.scene-label--supply .scene-label__dot { background: var(--flow-sup); }
.scene-label--extract .scene-label__dot { background: var(--flow-eta); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .scene-label:not([aria-pressed="true"]) { background: rgb(255 255 255 / 0.86); }
}
.scene-label:hover,
.scene-label.is-hover {
  border-color: var(--edge-strong, rgb(11 42 76 / 0.26));
  background: #fff;
  box-shadow: var(--highlight, inset 0 1px 0 rgb(255 255 255 / 0.9)), var(--elev-3, 0 1px 2px rgb(11 42 76 / 0.06), 0 8px 18px -8px rgb(11 42 76 / 0.14), 0 30px 60px -26px rgb(11 42 76 / 0.32));
}
.scene-label--supply.is-hover { border-color: var(--flow-sup); }
.scene-label--extract.is-hover { border-color: var(--flow-eta); }
.scene-label[aria-pressed="true"] {
  border-color: var(--c-navy, #0b2a4c);
  background: var(--c-navy, #0b2a4c);
  box-shadow: var(--highlight-on-dark, inset 0 1px 0 rgb(255 255 255 / 0.16)), var(--elev-2, 0 1px 1px rgb(11 42 76 / 0.05), 0 4px 8px -2px rgb(11 42 76 / 0.1), 0 14px 26px -14px rgb(11 42 76 / 0.28));
  color: #fff;
}
.scene-label:focus-visible {
  outline: var(--focus-w, 2px) solid var(--c-focus, #0a6db3);
  outline-offset: 2px;
}
.scene-label.is-off,
.scene-tag3d.is-off {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-2, 260ms) var(--ease-out, ease), visibility 0s linear var(--dur-2, 260ms);
}

.scene-tag3d {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  height: 1.3rem;
  padding: 0 0.45rem;
  border-radius: 6px;
  /* Tume toon valge teksti all: kontrast ≥ 4,5:1 kõigil õhuteede värvidel. */
  background: var(--tag-bg, var(--tag, var(--flow-transfer)));
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.85), 0 4px 10px -4px rgb(11 42 76 / 0.5);
  color: var(--tag-ink, #fff);
  font: 700 0.6875rem/1 var(--font-mono, Consolas, "Cascadia Mono", Menlo, monospace);
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
  transition: opacity var(--dur-2, 260ms) var(--ease-out, ease);
}

/* ==========================================================================
   B · DISAIN — JUHTNUPUD (premium, 05.11.2026). Märgitud plokk: .scene-btn*, .scene-seg*, .flow-dot*.
   Sama plokkide perekonda kuuluvad allpool märgitud „B · DISAIN“ plokid: .scene-room__select ning
   .scene-seg--dark + .unit-chip*. Lava, 3D siltide ja õhu teekonna reeglid on nendest väljas ja jäid muutmata.
   - Sügavus, servad ja raadiused tulevad site.css :root tokenitest (--elev-0…4, --highlight, --highlight-on-dark,
     --edge, --edge-strong, --radius-pill, --focus-w) — siin varuväärtustega, et paneel töötaks ka ilma site.css-ita.
   - Kõik varjud on sama kihtide arvuga (sisevalgus + serv + kolm välist kihti), et olekute vahel oleks sujuv üleminek.
   - Segmendi „pöial“: süvendatud rajal on valitud nupp (aria-pressed="true") tõstetud navy pill. Ankurpaigutust
     (anchor-name) toetavas brauseris libiseb üks ühine pöial (.scene-seg::before) valitud nupu alla; mujal kannab
     pöidla välimust nupp ise. Nupud jäävad aria-pressed lülititeks (mitte ARIA vahekaartideks).
   - Puuteseadmel on nupud vähemalt 44 px kõrged (pointer: coarse); fookusrõngas 2 px --c-focus (heledal 4,6–5,4:1).
   ========================================================================== */
.scene-btn {
  --sb-bg: #fff;
  --sb-fg: var(--c-navy, #0b2a4c);
  --sb-edge: var(--edge, rgb(11 42 76 / 0.14));
  --sb-sheen: linear-gradient(180deg, rgb(255 255 255 / 0) 38%, rgb(11 42 76 / 0.045) 100%);
  --sb-top: var(--highlight, inset 0 1px 0 rgb(255 255 255 / 0.9));
  --sb-elev: var(--elev-1, 0 1px 1px rgb(11 42 76 / 0.05), 0 2px 4px -1px rgb(11 42 76 / 0.07), 0 6px 14px -8px rgb(11 42 76 / 0.14));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 2.5rem;
  padding: 0 1rem;
  /* Läbipaistev piir: nähtav ainult kõrge kontrasti režiimis (forced-colors). */
  border: 1px solid transparent;
  border-radius: var(--radius-pill, 999px);
  background-color: var(--sb-bg);
  background-image: var(--sb-sheen);
  color: var(--sb-fg);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.1;
  box-shadow: var(--sb-top), 0 0 0 1px var(--sb-edge), var(--sb-elev);
  cursor: pointer;
  transition:
    background-color var(--dur-1, 140ms) var(--ease-out, ease),
    color var(--dur-1, 140ms) var(--ease-out, ease),
    box-shadow var(--dur-2, 260ms) var(--ease-out, ease),
    transform var(--dur-2, 260ms) var(--ease-out, ease);
}
.scene-btn:hover {
  --sb-edge: var(--edge-strong, rgb(11 42 76 / 0.26));
  --sb-elev: var(--elev-2, 0 1px 1px rgb(11 42 76 / 0.05), 0 4px 8px -2px rgb(11 42 76 / 0.1), 0 14px 26px -14px rgb(11 42 76 / 0.28));
  transform: translateY(-1px);
}
.scene-btn:active {
  --sb-top: inset 0 1px 2px rgb(11 42 76 / 0.16);
  --sb-elev: var(--elev-0, 0 0 0 0 rgb(11 42 76 / 0), 0 0 0 0 rgb(11 42 76 / 0), 0 0 0 0 rgb(11 42 76 / 0));
  transform: translateY(0) scale(0.97);
  transition-duration: var(--dur-1, 140ms);
}
.scene-btn:focus-visible { outline: var(--focus-w, 2px) solid var(--c-focus, #0a6db3); outline-offset: 2px; }
/* Lukustatud lüliti (aria-pressed="true": korrused lahti / liikumine peatatud): süvendatud, sinaka tooniga. */
.scene-btn[aria-pressed="true"] {
  --sb-bg: var(--c-blue-tint, #e6f1fa);
  --sb-edge: rgb(10 109 179 / 0.32);
  --sb-sheen: none;
  --sb-top: inset 0 1px 2px rgb(11 42 76 / 0.14);
  --sb-elev: var(--elev-0, 0 0 0 0 rgb(11 42 76 / 0), 0 0 0 0 rgb(11 42 76 / 0), 0 0 0 0 rgb(11 42 76 / 0));
}
.scene-btn[aria-pressed="true"]:hover { --sb-bg: #dbeaf7; --sb-edge: rgb(10 109 179 / 0.46); transform: none; }
.scene-btn:disabled,
.scene-btn[aria-disabled="true"] {
  --sb-edge: var(--edge, rgb(11 42 76 / 0.14));
  --sb-elev: var(--elev-0, 0 0 0 0 rgb(11 42 76 / 0), 0 0 0 0 rgb(11 42 76 / 0), 0 0 0 0 rgb(11 42 76 / 0));
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.scene-btn--icon { width: 2.5rem; padding: 0; border-radius: 50%; }
.scene-btn--primary {
  --sb-bg: var(--c-navy, #0b2a4c);
  --sb-fg: #fff;
  --sb-edge: var(--c-navy, #0b2a4c);
  --sb-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.12) 0%, rgb(255 255 255 / 0) 60%);
  --sb-top: var(--highlight-on-dark, inset 0 1px 0 rgb(255 255 255 / 0.16));
}
.scene-btn--primary:hover { --sb-bg: var(--c-navy-2, #143e68); --sb-edge: var(--c-navy-2, #143e68); }
.scene-btn--primary:active { --sb-top: inset 0 1px 2px rgb(0 0 0 / 0.28); }
.scene-btn--ghost {
  --sb-bg: rgb(255 255 255 / 0);
  --sb-fg: var(--c-muted, #52677a);
  --sb-edge: rgb(11 42 76 / 0);
  --sb-sheen: none;
  --sb-top: inset 0 1px 0 rgb(255 255 255 / 0);
  --sb-elev: var(--elev-0, 0 0 0 0 rgb(11 42 76 / 0), 0 0 0 0 rgb(11 42 76 / 0), 0 0 0 0 rgb(11 42 76 / 0));
}
.scene-btn--ghost:hover {
  --sb-bg: #fff;
  --sb-fg: var(--c-navy, #0b2a4c);
  --sb-edge: var(--edge, rgb(11 42 76 / 0.14));
  --sb-top: var(--highlight, inset 0 1px 0 rgb(255 255 255 / 0.9));
  --sb-elev: var(--elev-1, 0 1px 1px rgb(11 42 76 / 0.05), 0 2px 4px -1px rgb(11 42 76 / 0.07), 0 6px 14px -8px rgb(11 42 76 / 0.14));
}
.scene-btn__ico { flex: none; }
.scene-btn__ico--play { display: none; }
.scene-btn.is-paused .scene-btn__ico--play { display: block; }
.scene-btn.is-paused .scene-btn__ico--pause { display: none; }

/* Segmenteeritud valik (aria-pressed): süvendatud rada + tõstetud pöial. Rajal raadius = pöidla raadius + sisevahe,
   seega mitmerealine rada (≤560 px ruudustik) jääb ühtlase servaga. */
.scene-seg {
  --seg-h: 2.5rem;
  --seg-pad: 0.25rem;
  --seg-track: #e5ecf2;
  --seg-fg: var(--c-muted, #52677a);
  --seg-fg-hover: var(--c-navy, #0b2a4c);
  --seg-hover: rgb(255 255 255 / 0.7);
  --seg-hover-shadow: 0 1px 2px rgb(11 42 76 / 0.09);
  --seg-thumb: var(--c-navy, #0b2a4c);
  --seg-thumb-fg: #fff;
  --seg-thumb-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.14) 0%, rgb(255 255 255 / 0) 58%);
  --seg-thumb-shadow:
    var(--highlight-on-dark, inset 0 1px 0 rgb(255 255 255 / 0.16)),
    0 1px 1px rgb(11 42 76 / 0.22),
    0 3px 8px -2px rgb(11 42 76 / 0.3),
    0 10px 18px -10px rgb(11 42 76 / 0.55);
  --seg-dot-ring: var(--seg-track);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  min-width: 0;
  padding: var(--seg-pad);
  border-radius: calc(var(--seg-h) / 2 + var(--seg-pad));
  background-color: var(--seg-track);
  background-image: linear-gradient(180deg, rgb(11 42 76 / 0.045) 0%, rgb(11 42 76 / 0) 60%);
  box-shadow:
    inset 0 1px 2px rgb(11 42 76 / 0.13),
    inset 0 0 0 1px rgb(11 42 76 / 0.065),
    0 1px 0 rgb(255 255 255 / 0.9);
}
.scene-seg__btn {
  position: relative;
  z-index: 1;
  /* Kui rada murdub mitmele reale, täidavad nupud read ühtlaselt (ühel real kasvuruumi pole → mõju puudub). */
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: var(--seg-h);
  padding: 0 0.95rem;
  border: 1px solid transparent;
  border-radius: calc(var(--seg-h) / 2);
  background-color: transparent;
  background-image: none;
  color: var(--seg-fg);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--dur-2, 260ms) var(--ease-out, ease),
    background-color var(--dur-2, 260ms) var(--ease-out, ease),
    box-shadow var(--dur-2, 260ms) var(--ease-out, ease),
    transform var(--dur-1, 140ms) var(--ease-out, ease);
}
.scene-seg__btn:not([aria-pressed="true"]):not(:disabled):hover {
  color: var(--seg-fg-hover);
  background-color: var(--seg-hover);
  box-shadow: var(--seg-hover-shadow);
}
.scene-seg__btn:not(:disabled):active { transform: scale(0.97); }
.scene-seg__btn[aria-pressed="true"] {
  --seg-dot-ring: var(--seg-thumb);
  color: var(--seg-thumb-fg);
  background-color: var(--seg-thumb);
  background-image: var(--seg-thumb-sheen);
  box-shadow: var(--seg-thumb-shadow);
}
.scene-seg__btn:focus-visible { outline: var(--focus-w, 2px) solid var(--c-focus, #0a6db3); outline-offset: 2px; }
.scene-seg__btn:disabled { opacity: 0.5; cursor: not-allowed; }
.scene-seg__btn svg { flex: none; }
/* Libisev pöial: üks tõstetud pill raja sees, ankurdatud valitud nupule (valitud nupp ise jääb läbipaistvaks). */
@supports (anchor-name: --seg-thumb) {
  .scene-seg__btn[aria-pressed="true"] {
    anchor-name: --seg-thumb;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
  }
  .scene-seg::before {
    content: "";
    position: absolute;
    z-index: 0;
    position-anchor: --seg-thumb;
    top: anchor(top);
    right: anchor(right);
    bottom: anchor(bottom);
    left: anchor(left);
    border-radius: calc(var(--seg-h) / 2);
    background-color: var(--seg-thumb);
    background-image: var(--seg-thumb-sheen);
    box-shadow: var(--seg-thumb-shadow);
    pointer-events: none;
    transition: opacity var(--dur-1, 140ms) var(--ease-out, ease);
  }
  /* Libisemine ainult kasutaja valikul (kursor või fookus rajal); akna suuruse muutusel ja programmilisel lähtestusel
     asub pöial kohe õigesse kohta, ei „järgne“ ümberpaigutusele. */
  .scene-seg:is(:hover, :focus-within)::before {
    transition:
      top var(--dur-2, 260ms) var(--ease-out, ease),
      right var(--dur-2, 260ms) var(--ease-out, ease),
      bottom var(--dur-2, 260ms) var(--ease-out, ease),
      left var(--dur-2, 260ms) var(--ease-out, ease),
      opacity var(--dur-1, 140ms) var(--ease-out, ease);
  }
  /* Õhu teekonna ajal pole ükski filter valitud → pöial peidus; keelatud valiku pöial on tuhm. */
  .scene-seg:not(:has(> .scene-seg__btn[aria-pressed="true"]))::before { opacity: 0; }
  .scene-seg:has(> .scene-seg__btn[aria-pressed="true"]:disabled)::before { opacity: 0.5; }
}

/* Filtri täpid: õhutee värv; kattuv teine täpp eraldub raja/pöidla tooni rõngaga, pöidlal valge rõngaga. */
.flow-dot {
  flex: none;
  width: 0.5625rem;
  height: 0.5625rem;
  border-radius: 50%;
  background: var(--flow-transfer);
  box-shadow: inset 0 0 0 1px rgb(11 42 76 / 0.1);
}
.flow-dot + .flow-dot { margin-left: -0.3rem; box-shadow: 0 0 0 2px var(--seg-dot-ring, #fff), inset 0 0 0 1px rgb(11 42 76 / 0.1); }
.scene-seg__btn[aria-pressed="true"] .flow-dot { box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.92), inset 0 0 0 1px rgb(11 42 76 / 0.1); }
.flow-dot--sup { background: var(--flow-sup); }
.flow-dot--eta { background: var(--flow-eta); }
.flow-dot--oda { background: var(--flow-oda); }
.flow-dot--eha { background: var(--flow-eha); }

/* Kaheveeruline avaplokk (site.css 851–1150 px): paneel on kitsas, filtrid ei mahu ühte ritta → 2 × 2 ruudustik
   ning tööriistad kahes reas (vaate lüliti üleval, korrused + liikumine all), sama muster mis ≤560 px. */
@media (min-width: 851px) and (max-width: 1150px) {
  .scene-controls > .scene-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .scene-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .scene-tools .scene-seg--view { grid-column: 1 / -1; }
}
@media (pointer: coarse) {
  .scene-seg { --seg-h: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-btn,
  .scene-seg__btn,
  .scene-seg::before { transition: none !important; }
  .scene-btn:hover,
  .scene-btn:active,
  .scene-seg__btn:active { transform: none; }
}
@media (forced-colors: active) {
  .scene-seg { border: 1px solid CanvasText; }
  .scene-seg::before { display: none; }
  .scene-btn { border-color: ButtonText; }
}
/* ==== B · DISAIN — juhtnupud: põhiploki lõpp ==== */

.flow-swatch {
  flex: none;
  display: inline-block;
  width: 1.5rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--flow-transfer);
}
.flow-swatch--sup { background: var(--flow-sup); }
.flow-swatch--eta { background: var(--flow-eta); }
.flow-swatch--oda { background: var(--flow-oda); }
.flow-swatch--eha { background: var(--flow-eha); }
.flow-swatch--hood { background: var(--flow-hood); }
.flow-swatch--transfer {
  height: 0.1875rem;
  background: repeating-linear-gradient(90deg, var(--flow-transfer) 0 5px, transparent 5px 9px);
}

/* --------------------------------------------------------------- juhtrida */
.scene-hint {
  margin: 0.15rem var(--sp-pad) 0;
  color: var(--c-muted, #52677a);
  font-size: 0.75rem;
  line-height: 1.45;
  text-align: center;
}
.scene-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0.85rem var(--sp-pad) 0;
}
.scene-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.scene-seg--view .scene-seg__btn { padding: 0 0.7rem; }
.scene-room {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0.85rem var(--sp-pad) 0;
}
.scene-room__label {
  color: var(--c-navy, #0b2a4c);
  font-size: 0.8125rem;
  font-weight: 700;
}
.scene-room__field {
  position: relative;
  flex: 1 1 14rem;
  max-width: 22rem;
  min-width: 0;
}
.scene-room__field::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.9rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--c-navy, #0b2a4c);
  border-bottom: 2px solid var(--c-navy, #0b2a4c);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
/* ==== B · DISAIN — ruumivalik (märgitud plokk): sama tõstetud pill nagu .scene-btn ==== */
.scene-room__select {
  width: 100%;
  min-height: 2.5rem;
  padding: 0 2.5rem 0 1rem;
  border: 1px solid var(--edge, rgb(11 42 76 / 0.14));
  border-radius: var(--radius-pill, 999px);
  background-color: #fff;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0) 38%, rgb(11 42 76 / 0.04) 100%);
  box-shadow: var(--highlight, inset 0 1px 0 rgb(255 255 255 / 0.9)), var(--elev-1, 0 1px 1px rgb(11 42 76 / 0.05), 0 2px 4px -1px rgb(11 42 76 / 0.07), 0 6px 14px -8px rgb(11 42 76 / 0.14));
  color: var(--c-ink, #1b3146);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--dur-1, 140ms) var(--ease-out, ease), box-shadow var(--dur-2, 260ms) var(--ease-out, ease);
}
.scene-room__select:hover {
  border-color: var(--edge-strong, rgb(11 42 76 / 0.26));
  box-shadow: var(--highlight, inset 0 1px 0 rgb(255 255 255 / 0.9)), var(--elev-2, 0 1px 1px rgb(11 42 76 / 0.05), 0 4px 8px -2px rgb(11 42 76 / 0.1), 0 14px 26px -14px rgb(11 42 76 / 0.28));
}
.scene-room__select:focus-visible { outline: var(--focus-w, 2px) solid var(--c-focus, #0a6db3); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .scene-room__select { transition: none !important; } }
/* ==== B · DISAIN — ruumivalik: lõpp ==== */

/* --------------------------------------------------------------- selgitus ja õhu teekond */
.scene-inspector {
  position: relative;
  margin: 0.85rem var(--sp-pad) 0;
  padding: 0.95rem 1.05rem 1rem;
  border: 1px solid var(--c-line, #dde6ee);
  border-radius: var(--radius-m, 14px);
  background: #fff;
  box-shadow: var(--shadow-1, 0 1px 2px rgb(11 42 76 / 0.05));
  min-height: 7.25rem;
  transition: border-color var(--dur-2, 260ms) var(--ease-out, ease), box-shadow var(--dur-2, 260ms) var(--ease-out, ease);
}
.scene-panel.is-touring .scene-inspector {
  border-color: rgb(11 42 76 / 0.22);
  box-shadow: 0 1px 2px rgb(11 42 76 / 0.06), 0 14px 30px -18px rgb(11 42 76 / 0.45);
}
.scene-inspector__role {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
  color: var(--c-muted, #52677a);
  font-family: var(--font-mono, Consolas, "Cascadia Mono", Menlo, monospace);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.scene-inspector__role::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--role, var(--flow-transfer));
}
.scene-inspector__role[hidden] { display: none; }
.scene-inspector__title {
  color: var(--c-navy, #0b2a4c);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.scene-inspector__text {
  margin-top: 0.35rem;
  color: var(--c-muted, #52677a);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* Õhu teekonna juhtriba: lava alaosas (lava ja nupud on koos nähtavad ka 768 px kõrgusel ekraanil). */
.scene-stage { container: scene-stage / inline-size; }
.scene-tour-nav {
  position: absolute;
  left: 0.75rem;
  right: calc(0.75rem + 2.5rem + 0.6rem);
  bottom: 0.75rem;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "dots dots" "step buttons";
  align-items: center;
  gap: 0.3rem 0.6rem;
  padding: 0.45rem 0.45rem 0.45rem 0.85rem;
  border: 1px solid var(--edge, rgb(11 42 76 / 0.14));
  border-radius: 16px;
  background: rgb(255 255 255 / 0.95);
  box-shadow: var(--highlight, inset 0 1px 0 rgb(255 255 255 / 0.9)), var(--elev-3, 0 1px 2px rgb(11 42 76 / 0.06), 0 8px 18px -8px rgb(11 42 76 / 0.14), 0 30px 60px -26px rgb(11 42 76 / 0.32));
  -webkit-backdrop-filter: saturate(1.5) blur(8px);
  backdrop-filter: saturate(1.5) blur(8px);
}
.scene-tour-nav__dots {
  grid-area: dots;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.1rem 0 0;
  list-style: none;
}
.scene-tour-nav__dots li {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--c-line-strong, #bdccd9);
  transition: width var(--dur-2, 260ms) var(--ease-out, ease), background-color var(--dur-2, 260ms);
}
.scene-tour-nav__dots li.is-done { background: var(--dot, var(--flow-transfer)); opacity: 0.55; }
.scene-tour-nav__dots li.is-current { width: 1.2rem; background: var(--dot, var(--flow-transfer)); }
.scene-tour-nav__step {
  grid-area: step;
  min-width: 0;
  overflow: hidden;
  color: var(--c-navy, #0b2a4c);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.scene-tour-nav__count {
  margin-right: 0.35rem;
  color: var(--c-muted, #52677a);
  font-family: var(--font-mono, Consolas, "Cascadia Mono", Menlo, monospace);
  font-size: 0.75rem;
  font-weight: 400;
}
.scene-tour-nav__buttons {
  grid-area: buttons;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.scene-tour-nav__next { padding: 0 0.75rem 0 0.95rem; }
/* Kitsas lava: riba kogu laiuses, suum peidetakse teekonna ajaks, „Järgmine“ ainult noolena. */
@container scene-stage (max-width: 520px) {
  .scene-tour-nav { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; padding-left: 0.7rem; }
  /* Pikk sammu pealkiri kahel real, mitte kärbitult („Summutid, klapid,…“). */
  .scene-tour-nav__step { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: 0.8125rem; }
  .scene-panel.is-touring .scene-zoom { display: none; }
  .scene-zoom { right: 0.5rem; bottom: 0.5rem; gap: 0.3rem; }
  .scene-zoom__scale { height: 4.75rem; }
  .scene-zoom-hint { top: 0.5rem; font-size: 0.6875rem; }
}
@container scene-stage (max-width: 380px) {
  .scene-tour-nav__next { width: 2.5rem; padding: 0; }
  .scene-tour-nav__next .scene-btn__text { display: none; }
}
/* SVG-varuvaade: joonist ei saa ümber raamida, seega riba on vahetult joonise all (lava sees), mitte selle peal. */
.scene-panel.is-svg-view .scene-tour-nav {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0.35rem var(--sp-pad) 0;
}
/* Kitsal laval ka teekonna nupp joonise alla, et väike joonis ja selle sildid jääksid vabaks. */
@container scene-stage (max-width: 520px) {
  .scene-panel.is-svg-view .scene-tour-btn {
    position: relative;
    left: auto;
    bottom: auto;
    display: flex;
    width: fit-content;
    max-width: calc(100% - 2 * var(--sp-pad));
    margin: 0.35rem var(--sp-pad) 0;
  }
}

/* --------------------------------------------------------------- legend */
.scene-legend { margin: 0.9rem var(--sp-pad) 0; }
.scene-legend__title {
  margin-bottom: 0.5rem;
  color: var(--c-muted, #52677a);
  font-size: 0.75rem;
  font-weight: 700;
}
.scene-legend__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.scene-legend__item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  color: var(--c-muted, #52677a);
  font-size: 0.75rem;
  line-height: 1.4;
  transition: opacity var(--dur-2, 260ms) var(--ease-out, ease);
}
.scene-legend__item .flow-swatch { transform: translateY(-0.1rem); }
.scene-legend__item strong { color: var(--c-ink, #1b3146); font-weight: 700; }
.scene-legend__item.is-dim { opacity: 0.42; }

/* --------------------------------------------------------------- ruumid ja teekond tekstina */
.scene-rooms {
  margin: 0.9rem var(--sp-pad) 0;
  border-top: 1px solid var(--c-line, #dde6ee);
}
.scene-rooms__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--c-navy, #0b2a4c);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.scene-rooms__summary::-webkit-details-marker { display: none; }
.scene-rooms__summary::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-2, 260ms) var(--ease-out, ease);
}
.scene-rooms[open] > .scene-rooms__summary::before { transform: rotate(45deg); }
.scene-rooms__summary:focus-visible { outline: var(--focus-w, 2px) solid var(--c-focus, #0a6db3); outline-offset: 2px; border-radius: 4px; }
.scene-rooms__floor {
  margin: 0.35rem 0 0.4rem;
  color: var(--c-blue, #0a6db3);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.scene-rooms__list { display: grid; gap: 0.6rem; margin: 0 0 0.75rem; }
.scene-rooms__item { padding-left: 0.75rem; border-left: 3px solid var(--flow-transfer); }
.scene-rooms__item--supply { border-left-color: var(--flow-sup); }
.scene-rooms__item--extract { border-left-color: var(--flow-eta); }
/* Saun: sissepuhe ja väljatõmme (v5 vent = both) — kaks värvi; seade jääb halliks. */
.scene-rooms__item--both { border-left-color: var(--flow-sup); border-image: linear-gradient(180deg, var(--flow-sup) 50%, var(--flow-eta) 50%) 1; }
.scene-label--both .scene-label__dot { background: linear-gradient(135deg, var(--flow-sup) 50%, var(--flow-eta) 50%); }
.scene-label--both.is-hover { border-color: var(--flow-sup); }
.scene-rooms__item dt { color: var(--c-ink, #1b3146); font-size: 0.8125rem; font-weight: 700; }
.scene-rooms__role { margin-left: 0.35rem; color: var(--c-muted, #52677a); font-weight: 400; }
.scene-rooms__item dd { margin: 0.15rem 0 0; color: var(--c-muted, #52677a); font-size: 0.8125rem; line-height: 1.5; }
.scene-rooms__note { margin: 0 0 0.75rem; color: var(--c-muted, #52677a); font-size: 0.75rem; }
.scene-steps {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  padding: 0;
  list-style: none;
  counter-reset: scene-step;
}
.scene-steps__item {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding-left: 2.1rem;
  counter-increment: scene-step;
}
.scene-steps__item::before {
  content: counter(scene-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--step-bg, var(--step, var(--flow-transfer)));
  color: var(--step-ink, #fff);
  font-size: 0.6875rem;
  font-weight: 700;
}
.scene-steps__title { color: var(--c-ink, #1b3146); font-size: 0.8125rem; font-weight: 700; }
.scene-steps__text { color: var(--c-muted, #52677a); font-size: 0.8125rem; line-height: 1.5; }

.scene-disclaimer {
  margin: 0.6rem var(--sp-pad) var(--sp-pad);
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-line, #dde6ee);
  color: var(--c-muted, #52677a);
  font-size: 0.75rem;
  line-height: 1.5;
}
.scene-rooms + .scene-disclaimer { border-top: 0; padding-top: 0; }

/* --------------------------------------------------------------- SVG-varuvaate olekud */
.iso-diagram .iso-flow,
.iso-diagram .iso-label {
  transition: opacity var(--dur-2, 260ms) var(--ease-out, ease);
}
.iso-diagram .is-dim { opacity: 0.13; }
.iso-diagram .iso-zone-hi.is-active { opacity: 0.2; }
.iso-diagram .iso-label.is-dim { opacity: 0.55; }
.iso-diagram[data-interactive] .iso-label { cursor: pointer; }
.iso-diagram .iso-label:focus { outline: none; }
.iso-diagram .iso-label:focus-visible .iso-label-pill { stroke: var(--c-focus, #0a6db3); stroke-width: 3; stroke-opacity: 1; }
.iso-diagram .iso-label[aria-pressed="true"] .iso-label-pill { fill: var(--c-navy, #0b2a4c); fill-opacity: 1; stroke-opacity: 0; }
.iso-diagram .iso-label[aria-pressed="true"] text { fill: #fff; }
.iso-diagram .iso-label[aria-pressed="true"] .iso-label-dot { stroke: #fff; stroke-width: 1.5; }
.iso-diagram .iso-label-hit { pointer-events: none; }
.iso-diagram[data-interactive] .iso-label-hit { pointer-events: all; }
.scene-host.is-paused .iso-duct-move,
.scene-host.is-paused .iso-transfer-move { animation-play-state: paused; }

/* Ilma JS-ita: sildid suuremaks väiksel joonisel (JS-iga arvutab scene.js täpse skaala ja paigutuse). */
@container (max-width: 440px) { .iso-diagram { --iso-label-scale: 1.6; } }
@container (min-width: 441px) and (max-width: 600px) { .iso-diagram { --iso-label-scale: 1.25; } }
@container (min-width: 900px) { .iso-diagram { --iso-label-scale: 0.9; } }

/* --------------------------------------------------------------- AIROBOT */
.unit-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--radius-l, 22px);
  background:
    radial-gradient(85% 65% at 50% 38%, rgb(46 102 150 / 0.55) 0%, rgb(20 52 84 / 0.25) 55%, rgb(10 32 54 / 0) 100%),
    linear-gradient(170deg, var(--c-deep-2, #0f2c4a) 0%, var(--c-deep, #0a2036) 100%);
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.06);
  color: var(--c-on-deep, #e3edf6);
  font-family: var(--font-sans, Arial, Helvetica, "Liberation Sans", sans-serif);
  overflow: hidden;
  isolation: isolate;
}
.unit-host {
  position: relative;
  aspect-ratio: 4 / 3.15;
  min-height: 16rem;
  max-height: 31rem;
  overflow: hidden;
  border-radius: calc(var(--radius-l, 22px) - 8px);
  /* Stuudiotaust: pehme valgus seadme taga. */
  background: radial-gradient(60% 55% at 50% 42%, rgb(140 196 236 / 0.16) 0%, rgb(140 196 236 / 0) 70%);
  container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
}
.unit-photo {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 0.5rem;
  border-radius: inherit;
  background: radial-gradient(70% 60% at 50% 48%, rgb(255 255 255 / 0.96) 0%, rgb(232 240 247 / 0.9) 60%, rgb(214 227 238 / 0.85) 100%);
  transition: opacity var(--dur-3, 640ms) var(--ease-out, ease);
}
.unit-photo__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.unit-host .scene-canvas { border-radius: inherit; }
.unit-host.is-3d .unit-photo { opacity: 0; pointer-events: none; }
.unit-host.is-3d.is-photo .unit-photo { opacity: 1; pointer-events: auto; }
.unit-host.is-3d.is-photo .scene-canvas,
.unit-host.is-3d.is-photo .scene-labels { opacity: 0; pointer-events: none; }
.unit-host .scene-labels { transition: opacity var(--dur-3, 640ms) var(--ease-out, ease); }
.unit-host .scene-canvas:focus-visible { outline-color: var(--c-focus-on-deep, #7cc2f2); }

.unit-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
/* ==== B · DISAIN — tume segment (AIROBOTi paneel) ja korpuse värvi kiibid (märgitud plokk) ====
   Sama komponent nagu .scene-seg, ainult tokenid: süvendatud tume rada, valge tõstetud pöial (navy tekst 14,5:1),
   valimata nupp --c-on-deep-muted rajal ≈ 6,9:1. Kiibid #16191e / #eceff2 = tootja korpuse värvid (mitte bränd). */
.scene-seg--dark {
  --seg-track: rgb(255 255 255 / 0.06);
  --seg-fg: var(--c-on-deep-muted, #a9bed1);
  --seg-fg-hover: #fff;
  --seg-hover: rgb(255 255 255 / 0.09);
  --seg-hover-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  --seg-thumb: #fff;
  --seg-thumb-fg: var(--c-navy, #0b2a4c);
  --seg-thumb-sheen: linear-gradient(180deg, #ffffff 0%, #edf2f7 100%);
  --seg-thumb-shadow:
    inset 0 -1px 0 rgb(11 42 76 / 0.12),
    0 1px 1px rgb(0 0 0 / 0.28),
    0 3px 8px -2px rgb(0 0 0 / 0.38),
    0 10px 20px -10px rgb(0 0 0 / 0.7);
  --seg-dot-ring: #1b3249;
  background-image: none;
  box-shadow:
    inset 0 1px 3px rgb(0 0 0 / 0.42),
    inset 0 0 0 1px rgb(255 255 255 / 0.08),
    0 1px 0 rgb(255 255 255 / 0.05);
}
.scene-seg--dark .scene-seg__btn:focus-visible { outline-color: var(--c-focus-on-deep, #7cc2f2); }
.unit-chip {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3), 0 1px 2px rgb(0 0 0 / 0.35);
}
.unit-chip--black { background: radial-gradient(circle at 34% 30%, #4b525b 0%, #16191e 64%); }
.unit-chip--white {
  background: radial-gradient(circle at 34% 30%, #ffffff 0%, #eceff2 58%, #d3d9df 100%);
  box-shadow: inset 0 0 0 1px rgb(11 42 76 / 0.3), 0 1px 2px rgb(0 0 0 / 0.3);
}
/* ==== B · DISAIN — tume segment ja kiibid: lõpp ==== */

.unit-ports {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}
.unit-ports__title {
  margin-bottom: 0.55rem;
  color: var(--c-on-deep-accent, #8cc4ec);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.unit-ports__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.unit-ports__item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--c-on-deep-muted, #a9bed1);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.unit-ports__item .flow-swatch { width: 1.1rem; transform: translateY(-0.1rem); }
.unit-ports__item strong {
  color: #fff;
  font-family: var(--font-mono, Consolas, "Cascadia Mono", Menlo, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.unit-ports__note,
.unit-hint {
  margin-top: 0.7rem;
  color: var(--c-on-deep-muted, #a9bed1);
  font-size: 0.75rem;
  line-height: 1.5;
}
.unit-hint { text-align: center; }

.unit-tag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.5rem;
  padding: 0 0.55rem 0 0.42rem;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 999px;
  background: rgb(9 27 46 / 0.84);
  box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.7);
  color: #fff;
  font: 700 0.6875rem/1 var(--font-mono, Consolas, "Cascadia Mono", Menlo, monospace);
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
  transition: opacity var(--dur-2, 260ms) var(--ease-out, ease);
}
.unit-tag__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--tag, var(--flow-transfer));
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.2);
}
.unit-tag.is-off { opacity: 0; }

/* --------------------------------------------------------------- kitsad ekraanid */
@media (max-width: 560px) {
  .scene-controls { flex-direction: column; align-items: stretch; }
  .scene-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-seg__btn { padding: 0 0.5rem; white-space: normal; text-align: center; }
  .scene-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-tools .scene-seg--view { grid-column: 1 / -1; }
  .scene-tools .scene-btn { padding: 0 0.5rem; }
  .scene-room { align-items: stretch; flex-direction: column; }
  .scene-room__field { flex: none; max-width: none; }
  .scene-legend__list { grid-template-columns: minmax(0, 1fr); }
  .unit-controls { display: grid; grid-template-columns: minmax(0, 1fr); }
  .unit-controls .scene-seg { width: 100%; }
  .unit-ports__list { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 520px) {
  .scene-label { height: 1.5rem; gap: 0.3rem; padding: 0 0.5rem 0 0.4rem; font-size: 0.6875rem; }
  .scene-label__dot { width: 0.4rem; height: 0.4rem; }
  .scene-tag3d { height: 1.15rem; padding: 0 0.34rem; font-size: 0.625rem; }
  .scene-tour-btn { left: 0.5rem; bottom: 0.5rem; font-size: 0.75rem; }
}
@container (max-width: 360px) {
  .scene-label { height: 1.4rem; padding: 0 0.42rem 0 0.34rem; font-size: 0.625rem; }
}
@media (max-width: 380px) {
  .scene-seg__btn,
  .scene-tools .scene-btn { font-size: 0.75rem; }
  .scene-tools .scene-btn { gap: 0.35rem; }
}
@media (pointer: coarse) {
  .scene-btn,
  .scene-seg__btn,
  .scene-room__select,
  .scene-tour-btn { min-height: 2.75rem; }
  .scene-btn--icon { width: 2.75rem; }
  .scene-tour-nav__next { min-width: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-fallback,
  .scene-canvas,
  .scene-label,
  .scene-tag3d,
  .unit-tag,
  .unit-photo,
  .scene-legend__item,
  .scene-tour-btn,
  .scene-tour-nav__dots li,
  .scene-inspector,
  .scene-zoom__thumb,
  .scene-zoom__fill,
  .scene-zoom-hint,
  .iso-diagram .iso-flow,
  .iso-diagram .iso-label { transition: none !important; }
  .scene-tour-btn:hover,
  .scene-tour-btn:active { transform: none; }
  .scene-loading__dot { animation: none; }
}

@media (forced-colors: active) {
  .scene-label,
  .scene-tag3d,
  .unit-tag,
  .scene-zoom__value,
  .scene-zoom-hint,
  .scene-tour-btn { border: 1px solid CanvasText; }
  .scene-zoom__track { border: 1px solid CanvasText; }
  .scene-zoom__fill { background: Highlight; }
  .scene-zoom__thumb { border: 1px solid CanvasText; }
  .scene-seg__btn[aria-pressed="true"] { outline: 2px solid Highlight; }
  .scene-tour-nav__dots li.is-current { background: Highlight; }
}

@media print {
  .scene-canvas,
  .scene-labels,
  .scene-zoom,
  .scene-js,
  .scene-loading { display: none !important; }
  .scene-host.is-3d .scene-fallback { opacity: 1; visibility: visible; }
  .scene-fallback, .js .scene-fallback { animation: none; opacity: 1; } /* vähendatud liikumine: SVG on põhivaade */
}