/* pwr_board.css — PWR learning-board synoptic (design-system port).
 * Visual language follows the Claude Design "PWR Reactor" project: dark #0a0e13
 * canvas, IBM Plex-style mono labels (system fallbacks —
 * no webfont dependency), cyan #4fe3ff accent.
 * stdPipeFlow / stdPipeFlowRev keyframes are injected by std_pipe.js itself.
 */

.pwr-board-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #0a0e13;
}

/* Fixed-aspect world canvas, scaled to fit the wrap (JS sets transform). */
.pwr-board-stage {
  position: absolute;
  left: 0; top: 0;
  width: 2400px; height: 1600px;
  transform-origin: 0 0;
  background-color: #0a0e13;
  font-family: ui-sans-serif, "Segoe UI", system-ui, sans-serif;
  isolation: isolate;
}

.pwr-board-stage, .pwr-board-stage * { box-sizing: border-box; }

.bd-mono { font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ---- tiles ---- */
.bd-tile { position: absolute; }
.bd-box-title {
  position: absolute; left: 10px; top: 7px; color: #6b8598;
  letter-spacing: 0.16em; white-space: nowrap;
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.bd-btn {
  width: 100%; height: 100%;
  background: #10161d;
  /* Inactive = grey; the authored item color (--bd-color) is the ACTIVE-state color. */
  border: 1px solid #2f3f4b; color: #7c93a4;
  letter-spacing: 0.12em; border-radius: 4px; cursor: pointer;
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
/* Momentary press feedback: flash to the active color. bd-pressed holds that cue
   for the duration of a press-and-hold (rod drive) even if the pointer drifts off
   the button, where the native :active would otherwise drop. */
.bd-btn:active,
.bd-btn.bd-pressed { transform: translateY(1px); border-color: var(--bd-color); color: var(--bd-color); }
.bd-btn:disabled { opacity: 0.45; cursor: not-allowed; color: #55636e; border-color: #26333d; }
/* Selected/engaged state: adopt the button's authored active color. */
.bd-btn.bd-active { background: #0c1a22; border-color: var(--bd-color); color: var(--bd-color); }
/* Warning state (yellow) — a caution independent of the authored active color. Reserved
   for genuine "needs attention" conditions on the green/yellow/red severity scale. */
.bd-btn.bd-warn { background: #3a2408; border-color: #ffd166; color: #ffd166; }
/* Informational/neutral state (grey) — a non-alarm condition the operator has deliberately
   set, e.g. reactor trips intentionally BLOCKED as part of a startup/shutdown lineup. Grey
   keeps it OFF the green(normal)/yellow(attention)/red(alarm) severity scale — it's a
   standing lineup note, not something wrong. */
.bd-btn.bd-info { background: #1b2229; border-color: #7c8b98; color: #b8c4cd; }
/* Count badge on a button (e.g. number of trips blocked). */
.bd-btn { position: relative; }
.bd-badge {
  position: absolute; top: -6px; right: -6px; min-width: 15px; height: 15px;
  padding: 0 3px; box-sizing: border-box; border-radius: 8px;
  background: #ffd166; color: #201400; border: 1px solid #10161d;
  font-size: 10px; line-height: 13px; font-weight: 700; text-align: center;
  letter-spacing: 0; pointer-events: none;
}
/* Grey badge on a neutral/info button (matches .bd-info, not the amber default). */
.bd-btn.bd-info .bd-badge { background: #8a99a6; color: #10161d; }

/* ---- scram ---- */
.bd-scram {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  border-radius: 10px; cursor: pointer;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55);
}
.bd-scram:active { transform: translateY(1px); }
@keyframes bdScramPulse {
  0%, 100% { box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55), 0 0 0 0 rgba(255, 180, 0, 0.55); }
  50%      { box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.55), 0 0 14px 3px rgba(255, 180, 0, 0.35); }
}

/* ---- number inputs ---- */
.bd-num-frame {
  display: flex; align-items: stretch;
  border: 1px solid #2a3a46; border-radius: 4px; overflow: hidden; background: #0b1119;
}
.bd-num-frame input {
  flex: 1; min-width: 0; background: transparent; border: none;
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 600; padding: 6px 8px; text-align: right; outline: none;
}
.bd-num-frame .bd-num-unit {
  display: flex; align-items: center; color: #7f96a8; align-self: center;
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  padding: 0 8px 0 0; white-space: nowrap;
}
.bd-num-steps { display: flex; flex-direction: column; border-left: 1px solid #2a3a46; flex: none; }
.bd-num-steps button {
  background: #10161d; border: none; color: #9fb3c4; font-size: 8px; line-height: 1;
  width: 20px; height: 14px; cursor: pointer; padding: 0;
}
.bd-num-steps button:first-child { border-bottom: 1px solid #2a3a46; }
.bd-num-steps button:hover { color: #e8f2f8; }

/* ---- hover affordance ----
   Every clickable control gets a cyan glow on mouse-over, matching the valve/PORV
   hover ring, so it's obvious at a glance what's actionable. The box-shadow ring sits
   OUTSIDE the button's own border, so state colors (active/warn/info) are preserved. */
.bd-btn:not(:disabled):hover,
.bd-pop button:not(:disabled):hover {
  box-shadow: 0 0 0 1px rgba(79, 227, 255, 0.55), 0 0 9px rgba(79, 227, 255, 0.32);
}
.bd-num-frame:hover {
  border-color: #4fe3ff;
  box-shadow: 0 0 0 1px rgba(79, 227, 255, 0.40), 0 0 8px rgba(79, 227, 255, 0.24);
}
.bd-scram:not(:disabled):hover { filter: drop-shadow(0 0 7px rgba(79, 227, 255, 0.50)); }

/* ---- value (right-anchored indication) / text ---- */
.bd-value {
  transform: translateX(-100%);
  padding: 2px; white-space: nowrap; font-weight: 600;
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.bd-value .bd-unit { color: #7f96a8; margin-left: -0.18em; }
.bd-text { padding: 2px 4px; letter-spacing: 0.06em; white-space: pre-wrap; }

/* ---- popover menus (TRIP BLOCKS etc.) ---- */
.bd-pop {
  position: absolute; z-index: 40; min-width: 240px;
  background: #0e1620; border: 1px solid #3a4c58; border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6); padding: 10px;
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
.bd-pop h4 {
  margin: 0 0 8px; color: #9fb3c4; font-size: 11px; letter-spacing: 0.16em; font-weight: 600;
}
.bd-pop .bd-pop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0;
}
.bd-pop .bd-pop-row .lbl { color: #9fb3c4; font-size: 11px; white-space: nowrap; }
.bd-pop .bd-pop-row .sub { color: #6b8598; font-size: 9px; }
.bd-pop button {
  background: #10161d; border: 1px solid #2a3a46; color: #6b8598; border-radius: 4px;
  font-family: inherit; font-size: 10px; letter-spacing: 0.1em; padding: 3px 10px; cursor: pointer;
}
.bd-pop button.bd-blocked { background: #3a2408; border-color: #ffd166; color: #ffd166; }
.bd-pop button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- maintenance tag (scenario prop over the AFW valve, TMI-2) ----
   A hung clearance tag that OCCLUDES the valve body, on a stalk to the valve stem
   above — so the operator literally cannot read the discharge-valve indication behind
   it, the way a real danger tag hangs on the handwheel. Centered over the ~50px tile. */
.bd-maint-tag {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%) rotate(-7deg);
  z-index: 8; white-space: nowrap; pointer-events: none;
  min-width: 40px; text-align: center;
  background: #b6892a; color: #1a1206; border: 1px solid #e8c46a; border-radius: 4px;
  font-size: 9px; letter-spacing: 0.1em; font-weight: 700; padding: 9px 7px 6px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}
/* string tying the tag up to the valve stem/handwheel above the tile */
.bd-maint-tag::before {
  content: ""; position: absolute; left: 50%; top: -13px; width: 1px; height: 14px;
  background: #e8c46a; transform: translateX(-50%);
}
/* grommet hole the string passes through */
.bd-maint-tag::after {
  content: ""; position: absolute; left: 50%; top: 3px; width: 4px; height: 4px;
  border-radius: 50%; border: 1px solid #1a1206; transform: translateX(-50%);
}

/* ---- paused overlay (spec: Pause freeze) ---- */
.pwr-board-paused {
  position: absolute; inset: 0; display: none; z-index: 60;
  align-items: center; justify-content: center; pointer-events: none;
}
.pwr-board-paused.on { display: flex; }
.pwr-paused-box {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: rgba(10, 14, 19, 0.82); border: 1px solid #3a4c58; border-radius: 10px;
  padding: 16px 34px 18px 40px;
}
.pwr-paused-main {
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 28px; letter-spacing: 0.3em; color: #e8f2f8;
}
.pwr-paused-sub {
  font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px; letter-spacing: 0.12em; color: #8fb3c7;
}
/* Freeze every board animation while paused */
.pwr-board-stage.bd-frozen *, .pwr-board-stage.bd-frozen *::before, .pwr-board-stage.bd-frozen *::after {
  animation-play-state: paused !important;
  transition: none !important;
}