/* Data Hall AI operator workspace — scoped, additive, zero-build. */
:root {
  --rz-ops-line: var(--bd, #1a2030);
  --rz-ops-line-strong: var(--bd2, #2a3148);
  --rz-ops-surface: var(--bg2, #0f1420);
  --rz-ops-surface-raised: var(--bg3, #161c2b);
  --rz-ops-text: var(--t1, #e2e5ea);
  --rz-ops-muted: var(--t3, #9aa3af);
  --rz-ops-cyan: var(--c, #06b6d4);
  --rz-ops-green: var(--g, #22c55e);
  --rz-ops-amber: var(--o, #f59e0b);
  --rz-ops-red: var(--r, #ef4444);
  --rz-ops-blue: var(--b, #3b82f6);
  --rz-ops-focus: var(--rz-accent-signal, var(--o, #f59e0b));
  --rz-ops-line-active: 1.4px;
  --rz-ops-space-1: 4px;
  --rz-ops-space-2: 8px;
  --rz-ops-space-3: 12px;
  --rz-ops-space-4: 16px;
  --rz-ops-z-overlay: 100;
}

.mn,
.pn,
.pn > *,
.ep,
.ep > * {
  min-width: 0;
}

.pn svg,
.ep svg {
  max-width: 100%;
  height: auto;
}

.rz-ops-section {
  background: var(--rz-ops-surface);
  border: 1px solid var(--rz-ops-line);
  border-radius: 4px;
  font-feature-settings: "zero" 1;
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--rz-ops-space-2);
  padding: var(--rz-ops-space-3);
}

.rz-ops-section__head {
  align-items: flex-start;
  border-bottom: 1px solid var(--rz-ops-line);
  display: flex;
  gap: var(--rz-ops-space-3);
  justify-content: space-between;
  margin: 0 0 var(--rz-ops-space-3);
  padding: 0 0 var(--rz-ops-space-2);
}

.rz-ops-section__head h3 {
  color: var(--rz-ops-text);
  font: 600 12px/1.35 "IBM Plex Sans", sans-serif;
  margin: 0;
}

.rz-ops-eyebrow,
.rz-ops-caption,
.rz-ops-help {
  color: var(--rz-ops-muted);
  font: 500 9px/1.5 "JetBrains Mono", monospace;
  letter-spacing: .03em;
}

.rz-ops-eyebrow {
  color: var(--rz-ops-cyan);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.rz-ops-grid {
  display: grid;
  gap: var(--rz-ops-space-2);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.rz-ops-field {
  display: flex;
  flex-direction: column;
  gap: var(--rz-ops-space-1);
  grid-column: span 2;
  min-width: 0;
}

.rz-ops-field--wide { grid-column: span 4; }
.rz-ops-field--full { grid-column: 1 / -1; }

.rz-ops-field label,
.rz-ops-legend {
  color: var(--rz-ops-muted);
  font: 600 9px/1.35 "JetBrains Mono", monospace;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.rz-ops-field input,
.rz-ops-field select,
.rz-ops-field textarea,
.rz-ops-select {
  background: var(--rz-ops-surface-raised);
  border: 1px solid var(--rz-ops-line-strong);
  border-radius: 3px;
  color: var(--rz-ops-text);
  font: 500 11px/1.35 "JetBrains Mono", monospace;
  min-height: 40px;
  min-width: 0;
  padding: 7px 8px;
  width: 100%;
}

.rz-ops-field input:focus-visible,
.rz-ops-field select:focus-visible,
.rz-ops-field textarea:focus-visible,
.rz-ops-select:focus-visible,
.rz-ops-button:focus-visible,
.rz-ops-row:focus-visible {
  outline: 2px solid var(--rz-ops-focus);
  outline-offset: 2px;
}

.rz-ops-actions {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rz-ops-space-2);
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.rz-ops-button {
  align-items: center;
  background: var(--rz-ops-surface-raised);
  border: 1px solid var(--rz-ops-line-strong);
  border-radius: 3px;
  color: var(--rz-ops-text);
  cursor: pointer;
  display: inline-flex;
  font: 600 10px/1 "JetBrains Mono", monospace;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
}

.rz-ops-button:hover { border-color: var(--rz-ops-cyan); color: var(--rz-ops-cyan); }
.rz-ops-button--primary { border-color: var(--rz-ops-cyan); color: var(--rz-ops-cyan); }
.rz-ops-button--warn { border-color: var(--rz-ops-amber); color: var(--rz-ops-amber); }

.rz-ops-summary {
  display: grid;
  gap: var(--rz-ops-space-1);
  grid-template-columns: repeat(6, minmax(110px, 1fr));
  margin: var(--rz-ops-space-3) 0;
}

.rz-ops-metric {
  background: var(--rz-ops-surface-raised);
  border-left: var(--rz-ops-line-active) solid var(--rz-ops-line-strong);
  min-width: 0;
  padding: var(--rz-ops-space-2);
}

.rz-ops-metric[data-tone="ok"] { border-left-color: var(--rz-ops-green); }
.rz-ops-metric[data-tone="warn"] { border-left-color: var(--rz-ops-amber); }
.rz-ops-metric[data-tone="critical"] { border-left-color: var(--rz-ops-red); }

.rz-ops-metric__label {
  color: var(--rz-ops-muted);
  font: 600 8px/1.35 "JetBrains Mono", monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.rz-ops-metric__value {
  color: var(--rz-ops-text);
  font: 700 14px/1.35 "JetBrains Mono", monospace;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-variant-numeric: tabular-nums slashed-zero;
  overflow-wrap: anywhere;
}

.rz-ops-table-wrap {
  border: 1px solid var(--rz-ops-line);
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.rz-ops-table {
  border-collapse: collapse;
  font-feature-settings: "tnum" 1, "zero" 1;
  font: 500 10px/1.4 "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums slashed-zero;
  min-width: 920px;
  width: 100%;
}

.rz-ops-table th,
.rz-ops-table td {
  border-bottom: 1px solid var(--rz-ops-line);
  padding: 8px 9px;
  text-align: left;
  vertical-align: top;
}

.rz-ops-table th {
  background: var(--rz-ops-surface-raised);
  color: var(--rz-ops-muted);
  font-size: 8px;
  letter-spacing: .06em;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

#platformComparison th:nth-child(n+4),
#platformComparison td:nth-child(n+4),
#p-fire .rz-ops-table th:nth-child(1),
#p-fire .rz-ops-table td:nth-child(1),
#p-fire .rz-ops-table th:nth-child(3),
#p-fire .rz-ops-table td:nth-child(3) { text-align: right; }

.rz-ops-table tbody tr { cursor: default; }
.rz-ops-table tbody tr.rz-ops-row { cursor: pointer; }
.rz-ops-table tbody tr:hover { background: rgba(6, 182, 212, .045); }
.rz-ops-table tbody tr[aria-selected="true"] { background: rgba(6, 182, 212, .08); }

.rz-ops-status {
  border: 1px solid currentColor;
  border-radius: 2px;
  display: inline-flex;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.rz-ops-status--critical { color: var(--rz-ops-red); }
.rz-ops-status--warning { color: var(--rz-ops-amber); }
.rz-ops-status--normal { color: var(--rz-ops-green); }
.rz-ops-status--info { color: var(--rz-ops-cyan); }

.rz-ops-detail {
  background: var(--rz-ops-surface-raised);
  border: 1px solid var(--rz-ops-line);
  margin-top: var(--rz-ops-space-2);
  min-height: 72px;
  padding: var(--rz-ops-space-3);
}

.rz-ops-detail dl {
  display: grid;
  gap: 5px 10px;
  grid-template-columns: minmax(100px, 160px) minmax(0, 1fr);
  margin: 0;
}

.rz-ops-detail dt { color: var(--rz-ops-muted); }
.rz-ops-detail dd { color: var(--rz-ops-text); margin: 0; overflow-wrap: anywhere; }

.rz-ops-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--rz-ops-space-2);
  justify-content: space-between;
  margin-bottom: var(--rz-ops-space-2);
}

.rz-ops-toolbar__group {
  align-items: center;
  display: flex;
  flex: 1 1 320px;
  flex-wrap: wrap;
  gap: var(--rz-ops-space-2);
}

.rz-ops-toolbar .rz-ops-select { max-width: 310px; }

.rz-ops-timeline {
  color: var(--rz-ops-muted);
  display: grid;
  font: 500 9px/1.45 "JetBrains Mono", monospace;
  gap: 4px;
  margin: 6px 0 0;
  padding-left: 20px;
}

#fireCauseEffectBody tr[aria-selected="true"] {
  background: rgba(245, 158, 11, .08);
  box-shadow: inset var(--rz-ops-line-active) 0 0 var(--rz-ops-amber);
}

#alarmDetail:focus {
  outline: 2px solid var(--rz-ops-focus);
  outline-offset: 2px;
}

.rz-ops-flow-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rz-ops-space-2);
}

.rz-ops-flow-legend span {
  align-items: center;
  color: var(--rz-ops-muted);
  display: inline-flex;
  font: 500 9px/1.4 "JetBrains Mono", monospace;
  gap: 5px;
}

.rz-ops-flow-legend i { background: currentColor; display: inline-block; height: 1px; width: 22px; }
.rz-ops-flow-legend .feed-a { color: var(--rz-ops-blue); }
.rz-ops-flow-legend .feed-b { color: var(--rz-ops-green); }
.rz-ops-flow-legend .generator { color: var(--rz-ops-amber); }
.rz-ops-flow-legend .off { color: var(--rz-ops-muted); }

#p-elec [data-rz-line] {
  animation: none !important;
}

#p-elec [data-rz-line].rz-flow-active {
  animation: rzOpsPowerFlow 1.4s linear infinite !important;
  stroke-dasharray: 9 5 !important;
  stroke-width: var(--rz-ops-line-active) !important;
  opacity: .95 !important;
}

/* v2.18.0 — `rz-flow-partial` has been toggled by operator-ui.js since the state machine landed
   and never had a rule, so a path carrying load with its redundancy LOST rendered identically to a
   healthy 2N path. That is the one distinction an operator needs from this drawing.
   It keeps its feed colour — identity must never borrow the alarm palette — and is separated by
   TEXTURE and weight instead: a short, fast dash reads as "flowing, but no longer redundant". */
#p-elec [data-rz-line].rz-flow-partial {
  animation: rzOpsPowerFlow 1.4s linear infinite !important;
  /* period 7 divides the keyframe's 28-unit travel exactly 4 times, so this cycle closes too */
  stroke-dasharray: 4 3 !important;
  stroke-width: var(--rz-ops-line-active) !important;
  opacity: .6 !important;
}

#p-elec [data-rz-line].rz-flow-inactive {
  animation: none !important;
  opacity: .18 !important;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  stroke: var(--rz-ops-muted) !important;
}

.ai-dashboard-grid,
.ai-kpi-strip {
  min-width: 0;
}

.ai-dashboard-image,
.ai-dashboard-rail {
  min-width: 0;
}

@keyframes rzOpsPowerFlow {
  from { stroke-dashoffset: 28; }
  to { stroke-dashoffset: 0; }
}

.rz-ops-platform-grid {
  display: grid;
  gap: var(--rz-ops-space-2);
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
}

.rz-ops-note {
  border-left: var(--rz-ops-line-active) solid var(--rz-ops-amber);
  color: var(--rz-ops-muted);
  font: 500 9px/1.55 "JetBrains Mono", monospace;
  margin-top: var(--rz-ops-space-2);
  padding: 6px 8px;
}

@media (max-width: 1180px) {
  .rz-ops-field { grid-column: span 3; }
  .rz-ops-field--wide { grid-column: span 6; }
  .rz-ops-actions { grid-column: 1 / -1; }
  .rz-ops-summary { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
}

@media (max-width: 1024px) {
  .dh-sidetog {
    align-items: center;
    background: var(--rz-ops-surface-raised);
    border: 1px solid var(--rz-ops-line-strong);
    border-radius: 3px;
    color: var(--rz-ops-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 40px;
    font: 600 14px/1 "JetBrains Mono", monospace;
    height: 40px;
    justify-content: center;
    margin-left: auto;
    width: 40px;
  }
  .dh-sidetog:hover,
  .dh-sidetog:focus-visible {
    border-color: var(--rz-ops-cyan);
    color: var(--rz-ops-cyan);
  }
  .side .dh-head {
    align-items: center !important;
    min-height: 40px;
  }
  .wrap.side-collapsed .side {
    max-height: 60px;
    min-height: 60px;
    overflow: hidden;
  }
  .wrap.side-collapsed .side > :not(.dh-head) {
    display: none !important;
  }
}

@media (max-width: 800px) {
  html,
  body { overflow: hidden; }
  .hdr {
    gap: 3px !important;
    height: auto;
    min-height: 44px;
    padding: 4px 6px !important;
    position: relative;
    flex-wrap: wrap;
  }
  .hdr > div:first-child {
    flex: 0 0 100%;
    flex-wrap: nowrap !important;
    height: 44px;
    max-width: 100%;
    max-height: 44px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
    width: 100%;
  }
  .hdr h1 {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    max-width: none;
    min-width: max-content;
    order: 0;
    white-space: nowrap;
  }
  .hdr [data-rz-telemetry-banner-slot] {
    flex: 0 0 230px;
    max-width: 230px;
    order: -2;
  }
  /* auth.js relocates the live PRD/Manual anchors above the access gate and
     leaves these same-size slots in the header. Keep the contract slots ahead
     of the telemetry banner so their fixed anchors remain inside the initial
     mobile viewport instead of landing beyond the horizontal scroll edge. */
  .hdr-main > .rz-public-contract-slot {
    flex: 0 0 auto;
    order: -3;
  }
  .hdr-r {
    flex: 0 0 100%;
    flex-wrap: nowrap !important;
    height: 44px;
    max-width: 100%;
    max-height: 44px;
    min-width: 0;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-color: var(--rz-ops-focus) var(--rz-ops-line);
    scrollbar-width: thin;
    width: 100%;
  }
  .tabs {
    flex-wrap: nowrap;
    height: 44px;
    min-height: 44px;
    top: 0;
  }
  .tabs::-webkit-scrollbar,
  .hdr-r::-webkit-scrollbar { height: 3px; }
  .tabs::-webkit-scrollbar-track,
  .hdr-r::-webkit-scrollbar-track { background: var(--rz-ops-surface); }
  .tabs::-webkit-scrollbar-thumb,
  .hdr-r::-webkit-scrollbar-thumb { background: var(--rz-ops-line-strong); border-radius: 0; }
  .tabs button { flex: 0 0 auto; min-height: 36px; }
  .wrap { min-height: 0; }
  .ai-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ai-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    height: auto !important;
  }
  .ai-dashboard-image { min-height: 320px; }
  .ai-dashboard-rail { overflow: visible !important; }
  .rz-ops-section { padding: var(--rz-ops-space-2); }
  .rz-ops-section__head { flex-direction: column; }
  .rz-ops-field,
  .rz-ops-field--wide { grid-column: span 6; }
  .rz-ops-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .rz-ops-platform-grid { grid-template-columns: 1fr; }
  .rz-ops-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #p-fire .rz-ops-table-wrap::before {
    background: var(--rz-ops-surface-raised);
    border-bottom: 1px solid var(--rz-ops-line);
    color: var(--rz-ops-focus);
    content: "Scroll horizontally \2192";
    display: block;
    font: 600 9px/1.4 "JetBrains Mono", monospace;
    left: 0;
    letter-spacing: .06em;
    padding: 6px 9px;
    position: sticky;
    text-transform: uppercase;
    width: max-content;
    z-index: 4;
  }
  #p-fire .rz-ops-table-wrap { scroll-margin-top: 52px; }
  #p-fire .rz-ops-table th:first-child,
  #p-fire .rz-ops-table td:first-child {
    background: var(--rz-ops-surface);
    border-right: 1px solid var(--rz-ops-line-strong);
    left: 0;
    position: sticky;
    z-index: 2;
  }
  #p-fire .rz-ops-table th:first-child {
    background: var(--rz-ops-surface-raised);
    z-index: 3;
  }
  #fireCauseEffectBody tr[aria-selected="true"] td:first-child {
    background: rgba(245, 158, 11, .12);
  }
}

@media (max-width: 480px) {
  .rz-ops-field,
  .rz-ops-field--wide { grid-column: 1 / -1; }
  .rz-ops-field input,
  .rz-ops-field select,
  .rz-ops-field textarea,
  .rz-ops-select { font-size: 16px; min-height: 44px; }
  .rz-ops-button { min-height: 44px; }
  .rz-ops-actions .rz-ops-button { flex: 1 1 calc(50% - var(--rz-ops-space-1)); }
  .rz-ops-summary { grid-template-columns: 1fr; }
  .rz-ops-detail dl { grid-template-columns: 1fr; }
  .rz-ops-detail dd { margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Kept as two rules, not one selector list: tools/test-rz-design-studio.mjs asserts the
     `.rz-flow-active { animation: none !important;` shape verbatim, and a gate that pins a shape
     is a gate that must be honoured rather than reworded around. */
  #p-elec [data-rz-line].rz-flow-active { animation: none !important; stroke-dashoffset: 0 !important; }
  #p-elec [data-rz-line].rz-flow-partial { animation: none !important; stroke-dashoffset: 0 !important; }
}

/* ── v2.1.0 Track A §A3 — traceability marks inside SVG diagrams ────────────
   A hooked value inside a mimic is a control: pointer, not the zoom wrapper's grab
   cursor, and a focus ring drawn IN the SVG (a CSS outline is clipped by the viewport).
   The mark itself is a 2.2-unit circle coloured by evidence class (js/rz-evidence.js);
   it is not text, so neither the legibility floor nor the collision loop sees it. */
.svg-zi .rz-basis, .rz-basis { cursor: pointer; pointer-events: all; }
.rz-basis text { pointer-events: all; }
.rz-basis:hover text { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 1.5px; }
.rz-basis:hover .rz-basis-mark, .rz-basis:focus .rz-basis-mark, .rz-basis:focus-visible .rz-basis-mark { r: 3; stroke: var(--c, #67e8f9); stroke-width: 0.9; }
.rz-basis:focus { outline: none; }
.rz-basis-legend text { letter-spacing: .04em; }
.rz-inspector-basis .rz-basis-record { font-size: 12px; }
.rz-inspector-basis .rz-basis-record b { color: #fff; }

/* A3 — HTML cells that carry a registry hook show the evidence dot the drawings use */
.cd td[data-basis-param]{cursor:pointer}
.cd td[data-basis-param]::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;margin-left:5px;vertical-align:middle;background:var(--rz-ev,#8fa2b8)}
.cd td[data-basis-param]:hover{text-decoration:underline dotted}


/* ------------------------------------------------------------------------
 * Track A §A6 — the Fire & Safety workstation (v2.3.0)
 * ---------------------------------------------------------------------- */
.fire-tabs { display: flex; gap: 2px; padding: 4px 6px; background: var(--bg3); border: 1px solid var(--bd); border-radius: 4px; margin-bottom: 6px; }
.fire-tabs .ft { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 500; padding: 5px 12px; border: 1px solid transparent; border-bottom: 2px solid transparent; background: transparent; color: var(--t3); cursor: pointer; border-radius: 3px; transition: color .15s, border-color .15s; }
.fire-tabs .ft:hover { color: var(--t2); }
.fire-tabs .ft.on { color: var(--o); border-bottom-color: var(--o); }
.fire-tabs .ft:focus-visible { outline: 2px solid var(--c, #67e8f9); outline-offset: 1px; }
#p-fire .fp { display: none; }
#p-fire .fp.on { display: block; }
.rz-fire-summary { grid-template-columns: repeat(8, minmax(96px, 1fr)); margin: 0 0 var(--rz-ops-space-2); }
.rz-fire-summary .rz-ops-metric__value { font-size: 12px; }
.rz-fire-sub { display: block; color: var(--rz-ops-muted); font: 500 9px/1.3 "JetBrains Mono", monospace; letter-spacing: .02em; }
.rz-fire-table tbody tr[data-rz-equipment] { cursor: pointer; }
.rz-fire-table tbody tr[data-rz-equipment]:hover { background: rgba(56, 189, 248, 0.06); }
.rz-fire-table tbody tr[data-rz-equipment]:focus-visible { outline: 2px solid var(--c, #67e8f9); outline-offset: -2px; }
.rz-fire-table tbody tr.rz-equipment-selected { background: rgba(56, 189, 248, 0.10); }
.rz-fire-table tbody tr[data-state="isolated"] td[data-col="iso"] { color: var(--o); }
.rz-fire-table .rz-fire-addr { font-family: "JetBrains Mono", monospace; white-space: nowrap; }
.rz-fire-table .rz-fire-q { color: var(--rz-ops-muted); }
.rz-fire-table-wrap { max-height: 60vh; }
.rz-fire-log li { padding: 3px 0; border-bottom: 1px solid var(--bd); font-size: 11px; }
.rz-fire-zones { display: grid; gap: var(--rz-ops-space-1); grid-template-columns: repeat(4, minmax(150px, 1fr)); }
.rz-fire-tile { background: var(--rz-ops-surface-raised); border: 1px solid var(--bd); border-left: 3px solid var(--rz-ops-green); padding: var(--rz-ops-space-2); cursor: pointer; min-width: 0; }
.rz-fire-tile[data-state="isolated"] { border-left-color: var(--rz-ops-amber); }
.rz-fire-tile[data-state="impaired"], .rz-fire-tile[data-state="confirmed"], .rz-fire-tile[data-state="suppression_armed"], .rz-fire-tile[data-state="discharged"], .rz-fire-tile[data-state="lockout"], .rz-fire-tile[data-state="epo_active"], .rz-fire-tile[data-state="leak_wet"] { border-left-color: var(--rz-ops-red); }
.rz-fire-tile[data-state="prealarm"] { border-left-color: var(--rz-ops-amber); }
.rz-fire-tile:hover { background: rgba(56, 189, 248, 0.06); }
.rz-fire-tile:focus-visible { outline: 2px solid var(--c, #67e8f9); outline-offset: 1px; }
.rz-fire-tile.rz-equipment-selected { background: rgba(56, 189, 248, 0.10); }
.rz-fire-tile__id { font: 700 11px/1.3 "JetBrains Mono", monospace; color: var(--rz-ops-text); }
.rz-fire-tile__means { color: var(--rz-ops-muted); font-size: 10px; margin: 3px 0; overflow-wrap: anywhere; }
.rz-fire-tile__state { display: flex; flex-wrap: wrap; gap: 3px; }
.rz-fire-badge { font: 600 9px/1.3 "JetBrains Mono", monospace; letter-spacing: .04em; padding: 1px 6px; border: 1px solid; border-radius: 2px; }
.rz-fire-badge.is-ok { color: var(--rz-ops-green); border-color: rgba(34, 197, 94, 0.35); }
.rz-fire-badge.is-warn { color: var(--rz-ops-amber); border-color: rgba(245, 158, 11, 0.4); }
.rz-fire-badge.is-crit { color: var(--rz-ops-red); border-color: rgba(239, 68, 68, 0.45); }
.rz-fire-banner[hidden] { display: none; }
.rz-fire-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border-bottom: 1px solid var(--bd); font: 500 11px/1.4 "JetBrains Mono", monospace; background: rgba(245, 158, 11, 0.10); color: var(--o); }
.rz-fire-banner[data-tone="critical"] { background: rgba(239, 68, 68, 0.14); color: var(--r); }
.rz-fire-banner strong { letter-spacing: .06em; }
.rz-fire-banner__btn { margin-left: auto; font: inherit; font-size: 10px; padding: 3px 10px; border: 1px solid currentColor; border-radius: 3px; background: transparent; color: inherit; cursor: pointer; min-height: 28px; }
.rz-fire-banner__btn:focus-visible { outline: 2px solid var(--c, #67e8f9); outline-offset: 1px; }
.rz-fire-elapsed { align-self: center; font: 600 10px/1.4 "JetBrains Mono", monospace; color: var(--rz-ops-muted); padding: 0 8px; }
#fireCauseEffectBody [data-fire-status][data-state="due"] { color: var(--rz-ops-green); font-weight: 600; }
#fireCauseEffectBody [data-fire-status][data-state="pending"] { color: var(--rz-ops-amber); }
#fireCauseEffectBody [data-fire-status][data-state="blocked"] { color: var(--rz-ops-red); font-weight: 600; }
.fire-iso { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(600px, 94vw); max-height: 90vh; overflow: auto; display: none; z-index: 1002; background: var(--bg2); border: 1px solid var(--bd); border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
.fire-iso.show { display: block; }
.fire-iso-hdr { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--bd); }
.fire-iso-hdr h4 { margin: 0; font: 600 12px/1.3 "JetBrains Mono", monospace; color: var(--t1); flex: 1; }
.fire-iso-hdr .mode { font: 600 9px/1.3 "JetBrains Mono", monospace; letter-spacing: .06em; color: var(--o); border: 1px solid rgba(245, 158, 11, 0.4); padding: 2px 8px; border-radius: 3px; }
.fire-iso-close { background: transparent; border: 1px solid var(--bd); color: var(--t2); width: 28px; height: 28px; border-radius: 3px; cursor: pointer; font-size: 16px; line-height: 1; }
.fire-iso-body { padding: 10px 12px 12px; display: grid; gap: var(--rz-ops-space-2); }
.fire-iso-point { margin: 0; }
.fire-iso-consequence[data-state="impair"] { border-left: 3px solid var(--rz-ops-red); color: var(--rz-ops-text); }
.fire-iso-consequence[data-state="refused"] { border-left: 3px solid var(--rz-ops-red); color: var(--rz-ops-red); }
.fire-iso-consequence[data-state="ok"] { border-left: 3px solid var(--rz-ops-green); }
.fire-iso-ack { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; color: var(--rz-ops-text); }
.fire-iso-ack input { margin-top: 2px; }
/* the operator-ui alarm-row action button and cell never had a rule */
.rz-ops-button--compact { padding: 2px 8px; min-height: 24px; font-size: 10px; }
.rz-ops-actions-cell { white-space: nowrap; }
@media (max-width: 1024px) {
  .rz-fire-summary { grid-template-columns: repeat(4, minmax(96px, 1fr)); }
  .rz-fire-zones { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}
@media (max-width: 767px) {
  .rz-fire-summary { grid-template-columns: repeat(2, minmax(96px, 1fr)); }
  .rz-fire-zones { grid-template-columns: 1fr; }
  .fire-tabs { overflow-x: auto; }
  .fire-tabs .ft { min-height: 44px; }
  .rz-fire-banner__btn { min-height: 44px; }
}

/* ============================================================================
 * v2.15.0 — ONE MODAL SYSTEM (owner comment 3: "modals: type, proportion, animation")
 * ----------------------------------------------------------------------------
 * Measured across the eleven centred HMI panels before this block:
 *   proportion — five widths (760 / 780 / 800 / 820 / 960 px) and two max-heights
 *                (88 vh, 90 vh), so no two panels framed their content alike;
 *   type       — each panel sized its own header and status pill;
 *   surface    — nine of eleven painted a linear-gradient wash behind the content
 *                and carried an 8 px radius with a full-perimeter accent border;
 *   animation  — computed animation-name was `none` on all eleven. Every panel
 *                snapped from display:none to display:block with no entrance.
 *
 * TYPE is now declared rather than accidental. There are two, and only two:
 *   PANEL  — a centred equipment read-out. Eleven of them. 820 px, or 960 px where
 *            the mimic inside genuinely needs the extra column (#irCduHmi).
 *   DIALOG — a centred short form the operator must complete. One: #fireIsoDialog.
 *            600 px, because a four-field form set 820 px wide reads as a panel
 *            with a hole in it.
 * Both share every other token, so the two widths are the whole difference.
 *
 * #bodDrawer (a 560 px full-height right drawer) and #sldMimic (a full-screen
 * overlay) carry .dh-modal-host for the focus trap but are not modals, so the
 * system does not reach them. They are excluded by id on every rule below.
 *
 * Surface follows the instrument language: opaque ground, one 1 px hairline, 4 px
 * radius, one elevation, and system identity carried by a 2 px top rail instead of
 * a coloured box. Blur stays on the dim layer (.dh-scrim), never on the panel.
 * ==========================================================================*/

/* --- proportion + surface ------------------------------------------------- */
.dh-modal-host:not(#bodDrawer):not(#sldMimic) {
  width: var(--dhm-w, 820px);
  max-width: min(92vw, var(--dhm-w, 820px));
  max-height: 90vh;
  background: var(--bg1);
  background-image: none;
  border: 1px solid var(--bd2);
  border-top: 2px solid var(--dhm-accent, var(--t3));
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#irCduHmi { --dhm-w: 960px; }   /* PANEL, wide: the in-rack mimic needs the column */
#fireIsoDialog { --dhm-w: 600px; }  /* DIALOG */

/* system identity — the rail, not the whole box */
#cduHmi, #chHmi, #ctHmiModal, #crahHmi, #irCduHmi, #eqHmi { --dhm-accent: var(--c); }
#rackModal, #corrHmi { --dhm-accent: var(--g); }
#netModal { --dhm-accent: var(--b); }
#bmsModal { --dhm-accent: var(--p); }
#batHmi   { --dhm-accent: var(--o); }
#fireIsoDialog { --dhm-accent: var(--r); }

/* --- type ----------------------------------------------------------------- */
.dh-modal-host:not(#bodDrawer):not(#sldMimic) { font-variant-numeric: tabular-nums slashed-zero; }
.dh-modal-host:not(#bodDrawer):not(#sldMimic) > [class$="-hdr"] {
  padding: 10px 14px;
  gap: 10px;
  background: var(--bg1);
  background-image: none;
  border-bottom: 1px solid var(--bd2);
}
.dh-modal-host:not(#bodDrawer):not(#sldMimic) > [class$="-hdr"] h3,
.dh-modal-host:not(#bodDrawer):not(#sldMimic) > [class$="-hdr"] h4 {
  margin: 0;
  font: 600 12px/1.35 "JetBrains Mono", monospace;
  letter-spacing: .02em;
}
.dh-modal-host:not(#bodDrawer):not(#sldMimic) > [class$="-hdr"] .mode {
  font: 600 9px/1 "JetBrains Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: transparent;
  border: 1px solid var(--bd2);
}
.dh-modal-host:not(#bodDrawer):not(#sldMimic) > [class$="-body"] { padding: 12px 14px; }

/* --- animation ------------------------------------------------------------ */
/* One entrance, 160 ms. PANELs are positioned by their opener with inline
   left/top, so they can carry a translate. #fireIsoDialog centres itself with
   translate(-50%,-50%) and would be thrown off-centre by a second transform, so
   the DIALOG fades only. */
@keyframes dhmRise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes dhmFade { from { opacity: 0; } to { opacity: 1; } }
.dh-modal-host:not(#bodDrawer):not(#sldMimic):not(#fireIsoDialog).show {
  animation: dhmRise .16s cubic-bezier(.2, .8, .2, 1) both;
}
#fireIsoDialog.show { animation: dhmFade .16s ease-out both; }
.dh-scrim.show { animation: dhmFade .16s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .dh-modal-host:not(#bodDrawer):not(#sldMimic):not(#fireIsoDialog).show,
  #fireIsoDialog.show,
  .dh-scrim.show { animation: none; }
}