/* Supervision page. Readouts sit on the light working area; the annunciator,
   the fault lab and the terminal are graphite control surfaces. */

/* Annunciator: one window per monitored condition, lit only when abnormal. */
.annunciator { border-top: 1px solid var(--line); }
.annunciator__inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 26px 28px 30px;
  display: grid;
  grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.verdict__label { font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); }
.verdict__state {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  font-size: clamp(2.25rem, 3.2vw, var(--text-display));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.verdict__state.is-idle { color: var(--ink-2); }
.verdict__state.is-warn { color: var(--warn); }
.verdict__state.is-alarm { color: var(--alarm); }
.verdict__state.is-warn::before,
.verdict__state.is-alarm::before { content: ""; flex: none; }
.verdict__state.is-warn::before { border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 23px solid currentColor; }
.verdict__state.is-alarm::before { width: 19px; height: 19px; margin: 0 4px; background: currentColor; transform: rotate(45deg); }
.verdict__lines { display: grid; gap: 2px; margin-top: 12px; color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; }
.verdict__lines li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.verdict__meta { display: grid; gap: 4px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--text-sm); }
.verdict__meta strong { color: var(--ink-2); font-weight: 600; }

.board { display: grid; gap: 10px; }
.board__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; }
.board__host { color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.board__tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.board__wait { color: var(--ink-3); font-size: var(--text-sm); }
.tile {
  display: grid;
  gap: 2px;
  min-width: 136px;
  max-width: 220px;
  padding: 8px 12px 9px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  transition: background-color 240ms var(--ease-out), border-color 240ms var(--ease-out);
}
.tile__name { color: var(--ink-2); font-size: var(--text-sm); font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile__value { color: var(--ink-3); font-size: var(--text-sm); line-height: 1.25; }
.tile.is-warn { border-color: var(--warn); background: var(--warn); }
.tile.is-alarm { border-color: var(--alarm); background: var(--alarm); }
.tile.is-warn > *, .tile.is-alarm > * { color: var(--on-lit); }

/* Fleet: one instrument strip per host. */
.fleet { border-top: 1px solid var(--line-strong); }
.fleet-wait { display: flex; align-items: center; gap: 10px; padding: 22px 0; color: var(--ink-2); }
.host {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 32px;
  margin: 0 -16px;
  padding: 22px 16px 24px;
  border-bottom: 1px solid var(--line);
}
.host.is-alarm { background: var(--alarm-wash); }
.host__id { display: flex; align-items: baseline; gap: 12px; }
.host__id .glyph { transform: translateY(-2px); }
.host__id .glyph--alarm { transform: translateY(-2px) rotate(45deg); }
.host__name { font-size: var(--text-md); font-weight: 700; overflow-wrap: anywhere; }
.host__role { margin-top: 2px; color: var(--ink-3); font-size: var(--text-sm); }
.host__error { align-self: center; color: var(--alarm-ink); font-weight: 600; }
.host__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(230px, 1.2fr); gap: 36px; }

.metric { display: grid; gap: 8px; align-content: start; min-width: 0; }
.metric__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.metric__value { color: var(--ink); font-size: var(--text-lg); font-weight: 600; line-height: 1; white-space: nowrap; }
.metric__value small { color: var(--ink-3); font-size: var(--text-sm); font-weight: 500; }
.metric__value--na { color: var(--ink-3); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500; }
.metric__foot { color: var(--ink-3); font-size: var(--text-micro); }
:is(.metric, .disk, .services).is-warn .metric__value { color: var(--warn-ink); }
:is(.metric, .disk, .services).is-alarm .metric__value { color: var(--alarm-ink); }

/* Sparklines read like a chart recorder: newest sample on the right edge. */
.spark { display: block; width: 100%; height: 34px; overflow: visible; }
.spark__area { fill: color-mix(in oklch, var(--ink) 7%, transparent); }
.spark__line { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark__limit { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.spark__pen { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.metric.is-warn .spark__pen { stroke: var(--warn-ink); }
.metric.is-alarm .spark__pen { stroke: var(--alarm); }
.metric.is-warn .spark__line { stroke: var(--warn-ink); }
.metric.is-alarm .spark__line,
.metric.is-alarm .spark__limit { stroke: var(--alarm); }
.metric.is-alarm .spark__area { fill: color-mix(in oklch, var(--alarm) 14%, transparent); }

.label__path { font-family: var(--font-mono); letter-spacing: 0; text-transform: none; }
.metric--disks { gap: 16px; }
.disk { display: grid; gap: 8px; }
.meter { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; height: 14px; }
.meter__cell { border-radius: 1px; background: var(--sunken); }
.meter__cell.is-lit { background: var(--ink-2); }
.meter__cell.is-warn { background: var(--warn); }
.meter__cell.is-alarm { background: var(--alarm); }

.services { display: grid; gap: 12px; align-content: start; min-width: 0; }
.services ul { display: grid; gap: 6px; }
.service { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 3.75rem; align-items: center; column-gap: 10px; font-size: var(--text-sm); }
.service__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service__role { color: var(--ink-3); font-size: var(--text-micro); }
.service__state { color: var(--ink-2); text-align: right; }
.service.is-warn .service__state { color: var(--warn-ink); font-weight: 700; }
.service.is-alarm :is(.service__name, .service__state) { color: var(--alarm-ink); font-weight: 700; }

/* Incidents and the fault lab share the lower half of the page. */
.ops { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; margin-top: 48px; }
.ops > .section + .section { margin-top: 0; }

.incident-list { border-top: 1px solid var(--line-strong); }
.incident { padding: 18px 0 20px; border-bottom: 1px solid var(--line); }
.incident__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.incident__kind { font-size: var(--text-base); font-weight: 700; }
.incident__host { color: var(--ink-2); font-size: var(--text-sm); }
.incident__id { margin-left: auto; color: var(--ink-3); font-size: var(--text-micro); text-decoration: none; }
.incident__id:hover { color: var(--ink); text-decoration: underline; }

.incident .rail { margin-top: 16px; }

.journal__title { margin-top: 32px; margin-bottom: 10px; font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); }
.journal { max-height: 420px; overflow-y: auto; border-top: 1px solid var(--line-strong); scrollbar-width: thin; }
.step {
  display: grid;
  grid-template-columns: 4.5rem 10px minmax(0, 1.5fr) minmax(0, 0.8fr) 5rem minmax(0, 2fr);
  align-items: baseline;
  column-gap: 12px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
}
.step .glyph { align-self: center; }
.step__time, .step__host { color: var(--ink-3); }
.step__what { display: grid; min-width: 0; }
.step__name { font-weight: 600; }
.step__type { color: var(--ink-3); font-size: var(--text-micro); }
.step__state { color: var(--ink-2); }
.step.is-failure .step__state { color: var(--alarm-ink); font-weight: 700; }
.step__details { color: var(--ink-3); font-size: var(--text-micro); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Fault lab: a graphite control panel, apart from the readouts. */
.lab { display: grid; gap: 20px; padding: 22px; border-radius: var(--radius-lg); }
.lab__head p { margin-top: 6px; color: var(--ink-2); font-size: var(--text-sm); }
.lab__mode { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-block: 1px solid var(--line); }
.lab__mode-name { font-size: var(--text-sm); font-weight: 700; }
.lab__mode p { margin-top: 2px; color: var(--ink-3); font-size: var(--text-sm); }
.switch { display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 4px 0; border: 0; background: none; cursor: pointer; }
.switch__track { position: relative; width: 36px; height: 20px; border-radius: 10px; background: var(--line-strong); transition: background-color 200ms var(--ease-out); }
.switch__knob { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-2); transition: transform 200ms var(--ease-out), background-color 200ms var(--ease-out); }
.switch[aria-checked="true"] .switch__track { background: var(--ink); }
.switch[aria-checked="true"] .switch__knob { transform: translateX(16px); background: var(--on-ink); }
.switch__text { min-width: 5.5rem; font-size: var(--text-sm); font-weight: 600; text-align: left; }

.faults { display: grid; gap: 4px; }
.fault { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 0; }
.fault + .fault { border-top: 1px solid var(--line); }
.fault__code { display: grid; place-items: center; height: 28px; border: 1px solid var(--line-strong); border-radius: 3px; color: var(--ink-2); font-size: var(--text-micro); font-weight: 700; letter-spacing: 0.04em; }
.fault h3 { font-size: var(--text-sm); font-weight: 700; }
.fault p { margin-top: 2px; color: var(--ink-3); font-size: var(--text-micro); line-height: 1.45; }

.lab__unlock { display: grid; justify-items: start; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.lab__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lab__unlock p { color: var(--ink-3); font-size: var(--text-micro); }

.result { padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.result.is-alarm { border-color: var(--alarm); background: var(--alarm-wash); }
.result__head { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-sm); }
.result__head .num { color: var(--ink-3); font-size: var(--text-micro); }
.result__list { display: grid; gap: 6px; margin-top: 10px; }
.result__list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; font-size: var(--text-micro); }
.result__detail { grid-column: 2 / -1; color: var(--ink-3); overflow-wrap: anywhere; }
.result__state { grid-column: 3; grid-row: 1; color: var(--ink-2); }
.result__list li.is-alarm .result__state { color: var(--alarm-ink); font-weight: 700; }

.console { margin-top: 48px; }

@media (max-width: 1199px) {
  .host__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; }
  .ops { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; }
}
@media (max-width: 1023px) {
  .annunciator__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ops { grid-template-columns: minmax(0, 1fr); }
  .host { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .step { grid-template-columns: 4.5rem 10px minmax(0, 1fr) 5rem; }
  .step__host, .step__details { display: none; }
}
@media (max-width: 599px) {
  .annunciator__inner { padding: 20px 16px 24px; }
  .board__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tile { min-width: 0; flex: 1 1 128px; }
  .host__metrics { grid-template-columns: minmax(0, 1fr); }
  .incident__id { margin-left: 0; }
  .step { grid-template-columns: 4.25rem 10px minmax(0, 1fr); }
  .step__state { display: none; }
  .lab { padding: 18px 16px; }
}