/* Live Safety Loop: the old site's diagram, restyled to graphite + amber and corrected to the
   PLC's real behaviour (independent lamps, K3 + safety contactor, square-wave heartbeat on X0.5). */

.scene-shell {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground-2);
  overflow: hidden;
}
.scene-top {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.scene-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}
.scene-tabs::-webkit-scrollbar { display: none; }
.scene-tab {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--ink-2);
  border-right: 1px solid var(--line);
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.scene-tab b { font-family: var(--mono); font-weight: 400; font-size: 12px; color: var(--ink-3); }
.scene-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--amber); }
.scene-tab[aria-selected="true"] b { color: var(--amber); }
@media (hover: hover) and (pointer: fine) { .scene-tab:hover { color: var(--ink); } }
.scene-play {
  flex: none;
  padding: 0 18px;
  font-size: 14px;
  color: var(--ink-2);
  border-left: 1px solid var(--line);
}
@media (hover: hover) and (pointer: fine) { .scene-play:hover { color: var(--ink); } }

.scene-stage { padding: 8px 8px 0; background: var(--ground); }
.scene { display: block; width: 100%; height: auto; }

.scene-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.scene-caption { padding: 22px 24px 24px; }
.scene-caption h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.025em; margin: 6px 0 8px; }
.scene-caption p { color: var(--ink-2); font-size: 15.5px; min-height: 72px; max-width: 58ch; }
.scene-progress { height: 2px; margin-top: 16px; background: var(--line); }
.scene-progress i { display: block; height: 100%; width: 0; background: var(--amber); }
.scene-status {
  border-left: 1px solid var(--line);
  padding: 18px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  align-content: center;
}
.sc-st { display: grid; gap: 2px; font-size: 14px; }
.sc-st-k { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
.sc-st-v { color: var(--ink); font-weight: 500; }
.sc-st[data-level="warning"] .sc-st-v { color: var(--amber); }
.sc-st[data-level="stop"] .sc-st-v { color: var(--stop); }
.sc-st[data-level="run"] .sc-st-v { color: var(--run); }
.sc-st[data-level="muted"] .sc-st-v { color: var(--ink-2); }

/* ---- SVG ---- */
.scene text { font-family: var(--mono); }
.sc-zone { fill: #5d5d58; font-size: 11px; letter-spacing: .18em; }
.sc-label { fill: #8a8a84; font-size: 11px; letter-spacing: .06em; }
.sc-mid { text-anchor: middle; }
.sc-mini { fill: #75756f; font-size: 8.5px; letter-spacing: .06em; }
.sc-strong { fill: #a3a3a0; }
.sc-mod { fill: #232323; stroke: rgba(255,255,255,.1); }
.sc-cable { fill: none; stroke: #2a2a2a; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
#scene[data-k3="on"] .sc-cable-pwr { stroke: #24402e; }
#scene[data-hb="lost"] .sc-cable-hb { stroke: #4a2426; }

.sc-pod-frame { fill: #1f1f1f; stroke: rgba(255,255,255,.1); transition: stroke .3s; }
.sc-pod-name { fill: #a3a3a0; font-size: 9.5px; letter-spacing: .06em; }
.sc-bar { fill: #6f6f6c; }
.sc-pod-led { fill: #4a4a45; transition: fill .2s; }

.sc-bb { fill: none; stroke: #f5b400; stroke-width: 1.5; }
.sc-tagbg { fill: #161616; stroke: rgba(245,180,0,.6); }
.sc-tag { fill: #f5b400; font-size: 8.5px; letter-spacing: .04em; }
.sc-tag-bad { display: none; }
.sc-detect, .sc-scan { transition: opacity .3s; }
.sc-helmet { transition: transform .8s var(--ease-in-out); }

.sc-lamp { fill: #262626; transition: fill .15s linear; }
.sc-wave { fill: none; stroke: #f5b400; stroke-width: 2; stroke-linecap: round; opacity: 0; }

.sc-led-ai, .sc-led-gw, .sc-led-sr { fill: #8a8a84; transition: fill .2s; }
.sc-led-run { fill: var(--run); transition: fill .2s; }
.sc-led-fault { fill: #333; transition: fill .2s; }
.sc-port { fill: #141414; stroke: rgba(255,255,255,.14); }
.sc-port-led { fill: #333; }
.sc-port-led.on { fill: #8a8a84; }
.sc-port-led.act { fill: #c9c9c4; }
.sc-io { fill: #333; }
.sc-io.on { fill: #8a8a84; }
.sc-io.on-g { fill: var(--run); }
.sc-io.on-a { fill: var(--amber); }
.sc-io.on-r { fill: var(--stop); }
.sc-relay-body { fill: #232323; stroke: rgba(255,255,255,.12); }
.sc-relay-led { fill: var(--run); }
.sc-relay-open { display: none; }

.sc-hbwave { fill: none; stroke: #f5b400; stroke-width: 1.6; stroke-linejoin: miter; }
.sc-hbflat { stroke: var(--stop); stroke-width: 1.6; opacity: 0; }
.sc-hmi-status { fill: #ececea; font-size: 15px; letter-spacing: .04em; }
.sc-hmi-sub { fill: #8a8a84; font-size: 9.5px; }
.sc-gauge-num { fill: #ececea; font-size: 58px; letter-spacing: -2px; transition: fill .2s; }
.sc-ev1 { fill: #ececea; font-size: 9px; }
.sc-ev2 { fill: #75756f; font-size: 9px; }
.sc-reset-lamp { transition: fill .2s; }

.pk .h { opacity: .2; }
.pk-data .c, .pk-data .h { fill: #bdbdb8; }
.pk-power .c, .pk-power .h { fill: var(--run); }
.pk-hb .c, .pk-hb .h { fill: var(--amber); }
.pk-alarm .c, .pk-alarm .h { fill: var(--stop); }
.pk-warn .c, .pk-warn .h { fill: var(--amber); }

@keyframes sc-blink { 50% { opacity: .15; } }
@keyframes sc-wave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* ---- state ---- */
#scene[data-ppe="missing"] .sc-helmet { transform: translate(34px, 82px); }
#scene[data-ppe="missing"] .sc-tag-ok { display: none; }
#scene[data-ppe="missing"] .sc-tag-bad { display: inline; }
#scene[data-ppe="missing"] .sc-bb-helmet { stroke-dasharray: 4 3; }
#scene[data-hb="lost"] .sc-detect, #scene[data-hb="lost"] .sc-scan { opacity: 0; }

#scene[data-gas="high"] #sc-pod-gas .sc-pod-frame { stroke: rgba(245,180,0,.8); }
#scene[data-gas="high"] #sc-pod-gas .sc-pod-led,
#scene[data-gas="high"] #sc-pod-gas .sc-bar { fill: var(--amber); }

#scene[data-lg="on"] .sc-lamp-g, #scene[data-lg="blink"] .sc-lamp-g { fill: var(--run); }
#scene[data-lg="blink"] .sc-lamp-g { animation: sc-blink 1s steps(1, end) infinite; }
#scene[data-la="on"] .sc-lamp-a { fill: var(--amber); }
#scene[data-lr="on"] .sc-lamp-r { fill: var(--stop); }
#scene[data-buzzer="on"] .sc-wave { animation: sc-wave 1s ease-out infinite; }
#scene[data-buzzer="on"] .sc-wave:nth-of-type(2) { animation-delay: .25s; }

#scene[data-k3="off"] .sc-relay-closed.k3 { display: none; }
#scene[data-k3="off"] .sc-relay-open.k3 { display: inline; }
#scene[data-k3="off"] .sc-relay-led.k3 { fill: #333; }
#scene[data-line="stop"] .sc-led-run { fill: #333; }
#scene[data-lr="on"] .sc-led-fault { fill: var(--stop); }

#scene[data-hb="lost"] .sc-led-ai { fill: var(--stop); }
#scene[data-hb="lost"] .sc-hbwave { opacity: 0; }
#scene[data-hb="lost"] .sc-hbflat { opacity: 1; }
#scene[data-hb="lost"] .sc-hmi-status, #scene[data-hb="fault"] .sc-hmi-status { fill: var(--stop); }
#scene[data-hb="fault"] .sc-hbwave { stroke: #8a8a84; }
#scene[data-reset="blink"] .sc-reset-lamp { fill: #ececea; animation: sc-blink 1s steps(1, end) infinite; }

#scene[data-sev="warning"] .sc-gauge-num { fill: var(--amber); }
#scene[data-sev="stop"] .sc-gauge-num { fill: var(--amber); }

.scene-shell.is-paused .scene * { animation-play-state: paused !important; }

@media (max-width: 900px) {
  .scene-bottom { grid-template-columns: 1fr; }
  .scene-status { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .scene text { display: none; }
  .scene-stage { padding: 4px 0 0; }
  .scene-caption { padding: 18px 16px; }
  .scene-caption p { min-height: 0; }
  .scene-status { padding: 16px; }
  .scene-tab { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  #sc-packets { display: none; }
}