@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/Archivo.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}

:root {
  --noc-bg: oklch(0.18 0.012 255);
  --noc-top: oklch(0.24 0.014 255);
  --noc-line: oklch(0.32 0.014 255);
  --noc-line-soft: oklch(0.26 0.014 255);
  --noc-amber: oklch(0.82 0.15 70);
  --noc-amber-ink: oklch(0.2 0.03 70);
  --noc-cyan: oklch(0.78 0.15 200);
  --noc-muted: oklch(0.72 0.008 250);
  --noc-faint: oklch(0.6 0.008 250);
  --noc-text: oklch(0.95 0.004 250);
  --noc-bottom: oklch(0.15 0.012 255);
  --noc-tab: oklch(0.26 0.014 255);
  --noc-tab-active: oklch(0.3 0.03 70);
  --noc-coast: oklch(0.25 0.014 255);
  --noc-coast-line: oklch(0.34 0.014 255);
}

html, body.noc {
  margin: 0;
  height: 100%;
  background: var(--noc-bg);
  color: var(--noc-text);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
}

body.noc {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.noc-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 64px;
  padding: 0 28px;
  background: var(--noc-top);
  border-bottom: 1px solid var(--noc-line);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--noc-muted);
}

.noc-brand {
  color: var(--noc-amber);
  font-weight: 600;
}

.noc-clock { margin-left: auto; }

.noc-link[data-fresh="true"] { color: var(--noc-cyan); }
.noc-link[data-fresh="false"] { color: var(--noc-amber); }

#noc-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.noc-banner {
  flex: none;
  padding: 10px 28px;
  background: oklch(0.22 0.02 70);
  color: var(--noc-amber);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.noc-split {
  flex: 1;
  min-height: 0;
  display: flex;
}

.noc-side {
  width: 38%;
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--noc-line);
}

.noc-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.noc-section, .noc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 24px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.noc-section {
  flex: none;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--noc-faint);
  border-bottom: 1px solid var(--noc-line);
}

.noc-row {
  font-size: 22px;
  border-bottom: 1px solid var(--noc-line-soft);
}

.noc-row.is-down {
  background: var(--noc-amber);
  color: var(--noc-amber-ink);
  font-weight: 600;
}

.noc-row.is-unacked {
  background: oklch(0.55 0.2 27);
  color: oklch(0.98 0.01 27);
  font-weight: 600;
}

.noc-row.is-acked {
  background: oklch(0.86 0.16 95);
  color: oklch(0.22 0.04 95);
  font-weight: 600;
}

.noc-sites { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto 112px; }
.noc-row-4 { grid-template-columns: 0.7fr 1.3fr 1.4fr auto; }

.noc-site {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.noc-row-spark {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.noc-row-spark .noc-sparkline {
  display: block;
  width: 112px;
  height: 22px;
}

.noc-row-spark .noc-spark-line {
  stroke: var(--noc-cyan);
  stroke-width: 1.75px;
  vector-effect: non-scaling-stroke;
}
.noc-row-spark .noc-spark-dot { fill: var(--noc-cyan); }

.noc-row.is-down .noc-spark-line,
.noc-row.is-unacked .noc-spark-line,
.noc-row.is-acked .noc-spark-line { stroke: currentColor; }

.noc-row.is-down .noc-spark-dot,
.noc-row.is-unacked .noc-spark-dot,
.noc-row.is-acked .noc-spark-dot { fill: currentColor; stroke: currentColor; }

.noc-spark-none {
  color: inherit;
  opacity: 0.55;
  font-size: 16px;
}

.noc-num { text-align: right; }

.noc-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.noc-empty {
  padding: 28px 24px;
  color: var(--noc-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 18px;
}

.noc-chips {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 16px 24px 0;
}

.noc-chip {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 16px;
  padding: 6px 10px;
  border: 1px solid var(--noc-line);
  color: var(--noc-muted);
}

.noc-chip.is-down {
  border-color: var(--noc-amber);
  color: var(--noc-amber);
}

.noc-chip.is-unacked {
  border-color: oklch(0.6 0.2 27);
  color: oklch(0.75 0.16 27);
}

.noc-chip.is-acked {
  border-color: oklch(0.8 0.16 95);
  color: oklch(0.86 0.14 95);
}

.noc-map {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 12px 20px 16px;
}

.noc-spark {
  position: absolute;
  right: 28px;
  bottom: 24px;
  width: 320px;
  padding: 12px 14px 10px;
  background: var(--noc-top);
  border: 1px solid var(--noc-line);
}

.noc-spark-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--noc-faint);
}

.noc-spark-value {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--noc-text);
}

.noc-spark svg {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: 8px;
}

.noc-spark-line {
  fill: none;
  stroke: var(--noc-cyan);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.noc-spark-dot { fill: var(--noc-cyan); }

.noc-spark-empty {
  margin-top: 8px;
  height: 56px;
  display: flex;
  align-items: center;
  color: var(--noc-faint);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
}

.noc-map svg { width: 100%; height: 100%; }

.noc-coast {
  fill: none;
  stroke: oklch(0.7 0.02 250);
  stroke-width: 1.35;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.noc-map-credit {
  position: absolute;
  left: 28px;
  bottom: 18px;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--noc-faint);
}
.noc-axis { stroke: oklch(0.32 0.014 255); stroke-width: 2; }
.noc-dot { stroke: none; }
.noc-dot-in { fill: var(--noc-cyan); }
.noc-dot-out { fill: var(--noc-amber); }
.noc-pin-up { fill: oklch(0.78 0.14 145); }
.noc-pin-down { fill: var(--noc-amber); }
.noc-pin-acked { fill: oklch(0.86 0.16 95); }
.noc-pin-unacked { fill: oklch(0.6 0.2 27); }
.noc-pin-label {
  fill: oklch(0.88 0.006 250);
  font-size: 14px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.noc-totals {
  padding: 8px 0;
  color: var(--noc-muted);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 20px;
}

.noc-total {
  display: flex;
  justify-content: space-between;
  padding: 10px 24px;
}

.noc-pay {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 22px 24px 18px;
  background: var(--noc-top);
}

.noc-pay-label {
  letter-spacing: 0.06em;
  color: var(--noc-muted);
  font-size: 22px;
}

.noc-pay-value {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.noc-note {
  margin: 0;
  padding: 14px 24px 20px;
  color: var(--noc-faint);
  font-size: 14px;
  line-height: 1.4;
}

.noc-chart { padding: 16px 24px 20px; }
.noc-chart svg { flex: 1; width: 100%; min-height: 0; }

.noc-legend {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--noc-muted);
  margin-bottom: 12px;
}

.noc-swatch { width: 18px; height: 3px; }
.noc-swatch-in { background: var(--noc-cyan); margin-left: 12px; }
.noc-swatch-out { background: var(--noc-amber); margin-left: 12px; }
.noc-legend .noc-swatch-in { margin-left: 0; }

.noc-series { fill: none; stroke-width: 3; }
.noc-series-in { stroke: var(--noc-cyan); }
.noc-series-out { stroke: var(--noc-amber); }

.noc-alarms {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.noc-tabs {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 16px 28px 20px;
  background: var(--noc-bottom);
}

.noc-tab {
  appearance: none;
  text-align: left;
  cursor: pointer;
  color: var(--noc-text);
  background: var(--noc-tab);
  border: 0;
  border-top: 3px solid var(--noc-cyan);
  padding: 14px 16px;
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
}

.noc-tab-key {
  min-height: 1.1em;
}

.noc-tab-name { font-size: 24px; margin-top: 6px; }

.noc-tab[data-active="true"] {
  background: var(--noc-tab-active);
  border-top-color: var(--noc-amber);
}

.noc-tab[data-active="true"] .noc-tab-name {
  color: var(--noc-amber);
  font-weight: 600;
}