/* New plant model page: the 3D view owns the whole window. */
:root {
  --hud-bg: rgb(255 255 255 / 0.9);
  --hud-border: rgb(20 40 50 / 0.14);
  --hud-text: #17242b;
  --hud-muted: #5b6770;
  --page-bg: #cfdde3;
  /* One palette for everything floating over the 3D view: the top bar's navy as tinted glass,
     its amber tab marker as the only accent (also the 3D selection outline), and the same
     status colours as the 3D beacons. */
  --glass: rgb(11 42 66 / 0.82);
  --glass-solid: rgb(9 34 54 / 0.94);
  --glass-line: rgb(255 255 255 / 0.12);
  --on-glass: #eef4f8;
  --on-glass-muted: #a9bccb;
  --accent: #f5b335;
  --state-running: #34c47c;
  --state-stopped: #8a9aa6;
  --state-warning: #f2b134;
  --state-alarm: #ff5a52;
  /* Chart series (SVG strokes and legend keys). */
  --chart-1: #2f7fd0;
  --chart-2: #e0782f;
  --chart-3: #2fa36b;
  --chart-4: #9b59b6;
  --chart-5: #c0392b;
  --chart-6: #16a2b8;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--page-bg);
  color: var(--hud-text);
  font:
    13px/1.4 system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
}
.plant {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
#plant {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#plant.ready {
  opacity: 1;
}
.status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--hud-muted);
}
.readout {
  position: absolute;
  right: 16px;
  bottom: 60px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 12px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--glass-line);
  border-radius: 8px;
  background: var(--glass);
  backdrop-filter: blur(6px);
  color: var(--on-glass);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.readout dt {
  color: var(--on-glass-muted);
}
.readout dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.readout button {
  grid-column: 1 / -1;
  min-height: 26px;
  margin-top: 4px;
  border: 1px solid var(--glass-line);
  border-radius: 6px;
  background: rgb(255 255 255 / 0.08);
  color: var(--on-glass);
  font: inherit;
  cursor: pointer;
}

/* Keyboard focus on every overlay control: the single amber accent. */
.equipment-rail button:focus-visible,
.rail-flyout button:focus-visible,
.unit-card button:focus-visible,
.view-controls button:focus-visible,
.readout button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}