/* Scene cell, its state key and the status tags pinned to the 3D units. Tag positions are set
   in JS (scene-tags.js + tag-layout.js); each tag layer is a zero-size origin at the cell corner. */
.scene { position: absolute; inset: 0 0 var(--key-h) 0; }
.scene canvas { display: block; width: 100%; height: 100%; }
.scene-note { position: absolute; inset: auto var(--gutter) 50% var(--gutter); text-align: center; color: var(--ink-2); margin: 0; }
.tags { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tag { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.tag[hidden] { display: none; }
.tag__btn {
  pointer-events: auto; position: absolute; left: 0; top: 0; will-change: transform;
  display: grid; grid-template-columns: auto auto; gap: 1px 10px; align-items: baseline;
  padding: 6px 10px 7px; border: 0; border-radius: var(--radius); cursor: pointer; white-space: nowrap; text-align: left;
  background: var(--glass); box-shadow: inset 3px 0 0 var(--tone), 0 0 0 1px var(--rule-strong);
}
.tag__btn:hover { background: var(--glass-hover); }
.tag__name { font: 700 16px/1.1 var(--font-cond); }
.tag__value { font: 600 16px/1.1 var(--font-cond); justify-self: end; }
.tag__value small { font-size: 12px; color: var(--ink-2); font-weight: 500; }
.tag__state { grid-column: 1 / -1; font-size: 12px; color: var(--tone); font-weight: 600; }
.tag__stem { position: absolute; left: 0; top: 0; width: 1px; transform-origin: 0 0; background: var(--tone); opacity: 0.8; }
.tag__dot { position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 2px var(--bg); }
.tag.is-selected .tag__btn { box-shadow: inset 3px 0 0 var(--tone), 0 0 0 2px var(--select); }
.tag.is-dim { opacity: 0.4; }
.tag.state-alarm .tag__dot, .tag.state-estop .tag__dot { animation: alarm-dot 1.1s ease-in-out infinite alternate; }
@keyframes alarm-dot { to { box-shadow: 0 0 0 6px color-mix(in srgb, var(--st-alarm) 25%, transparent); } }

/* Phones: short tags (name and pressure); the state stays in the tag color and in the rail. */
@media (max-width: 559px) {
  .tag__btn { grid-template-columns: auto auto; gap: 0 6px; padding: 4px 7px 4px 9px; }
  .tag__name, .tag__value { font-size: 14px; }
  .tag__value small { display: none; }
  .tag__state { display: none; }
}

/* The state key has its own strip under the canvas, so the 3D labels can never cover it. */
.scene-cell { --key-h: 30px; }
.app.is-detail .scene-cell { --key-h: 0px; }
@media (max-width: 559px) { .scene-cell { --key-h: 46px; } }
.states-key { position: absolute; left: var(--gutter); bottom: 0; height: var(--key-h); align-content: center; max-width: calc(100% - 2 * var(--gutter)); pointer-events: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--ink-2); }
/* The key sits above the leader wires (z-index 2) on its own small chips, so a wire passes behind a
   label instead of striking through it. */
.states-key { z-index: 3; gap: 4px 6px; }
.states-key li { display: flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: var(--bg); box-shadow: 0 0 0 1px var(--rule); }
.states-key i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.app.is-detail .states-key { display: none; }
@media (min-width: 960px) { .states-key { left: 32px; } }
@media (prefers-reduced-motion: reduce) { .tag.state-alarm .tag__dot { animation: none; } }

.tag.is-offline .tag__btn { box-shadow: inset 3px 0 0 var(--tone), 0 0 0 1px var(--rule); color: var(--ink-2); }
.tag.is-offline .tag__value { font: 500 13px/1.1 var(--font); color: var(--ink-2); }
.tag.is-offline .tag__dot { background: var(--bg); box-shadow: inset 0 0 0 2px var(--tone), 0 0 0 2px var(--bg); }