@import url('fonts/fonts.css');

/* ===========================================================================
   River Eden Catchment — "recording instrument"

   Aesthetic direction: scientific chart recorders and hydrological survey
   equipment. Machined near-black surfaces, engraved hairlines, corner
   registration marks, label plates, and one dominant readout.

   The organising discipline: CHROME IS ACHROMATIC. Every grey here is a
   warm-neutral step of the same machined surface. Colour is spent only where
   it carries meaning — alarm state and series identity — so the data is the
   only thing on the page that glows. No decorative colour anywhere.
   =========================================================================== */

:root {
  color-scheme: dark;

  /* --- machined surface (achromatic, faintly warm) --- */
  --void:        #080908;
  --panel:       #101210;
  --panel-2:     #171a17;
  --inset:       #0c0e0c;
  --rule:        #1e211e;
  --rule-strong: #2c302c;
  --bezel:       #262a26;

  /* --- ink --- */
  --bone:        #e9e7df;   /* warm white, never pure #fff */
  --ink-2:       #a6a89f;
  --ink-3:       #6f726b;
  --ink-4:       #474a45;   /* registration marks, faintest chrome */

  /* --- status: reserved, never used for series identity --- */
  --good:        #0ca30c;
  --warning:     #fab219;
  --serious:     #ec835a;
  --critical:    #d03b3b;

  /* --- categorical series (validated against this surface) --- */
  --s1: #3987e5;  --s2: #d95926;  --s3: #199e70;  --s4: #c98500;
  --s5: #d55181;  --s6: #008300;  --s7: #9085e9;  --s8: #e66767;

  /* --- chart tokens --- */
  --chart-ground: #0c0e0c;
  --chart-grid:   #1a1d1a;
  --chart-axis:   #33372f;

  /* --- type --- */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --gutter: 26px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

/* Machined ground: a fine engraved grid plus a whisper of noise, so large
   dark areas read as a surface rather than as empty space. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    repeating-linear-gradient(0deg,   rgba(255,255,255,0.014) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg,  rgba(255,255,255,0.014) 0 1px, transparent 1px 34px);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 var(--gutter) 90px;
}

/* --- shared type utilities ------------------------------------------------ */

.eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ===========================================================================
   Nameplate
   =========================================================================== */

.masthead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 30px 0 16px;
  border-bottom: 1px solid var(--rule-strong);
}

.nameplate { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }

.nameplate h1 {
  margin: 0;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1;
}

.nameplate .sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}

.masthead-status { display: flex; align-items: center; gap: 14px; }

/* --- status pill ---------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border: 1px solid var(--rule-strong);
  background: var(--panel);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dot.live { background: var(--good); box-shadow: 0 0 7px var(--good); }
.dot.warn { background: var(--warning); box-shadow: 0 0 7px var(--warning); }
.dot.err  { background: var(--critical); box-shadow: 0 0 7px var(--critical); }

.clock {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}

/* ===========================================================================
   Primary readout — the one number the page exists to deliver
   =========================================================================== */

.readout {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(320px, 1.15fr);
  gap: 44px;
  align-items: start;
  padding: 44px 0 40px;
  border-bottom: 1px solid var(--rule);
}

.readout-figure { display: flex; align-items: flex-start; gap: 14px; }

.readout-value {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(64px, 10vw, 112px);
  line-height: 0.84;
  letter-spacing: -0.055em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}

.readout-unit {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-3);
  padding-top: 8px;
  letter-spacing: -0.01em;
}

.readout-value.na {
  font-size: clamp(26px, 3.5vw, 38px);
  color: var(--ink-3);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.readout-caption { margin-top: 18px; max-width: 30ch; }
.readout-caption .lede {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 0 0 5px;
}
.readout-caption .meta {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.045em;
  color: var(--ink-3);
  margin: 0;
}

.readout-body { padding-top: 6px; }
.readout-body p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}
.readout-body p strong { color: var(--bone); font-weight: 500; }
.readout-body .n {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}

/* secondary readouts, divided by engraved rules rather than boxed */
.readout-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 4px;
  border-top: 1px solid var(--rule);
}
.readout-strip .item {
  flex: 1 1 130px;
  padding: 15px 20px 4px 0;
  margin-right: 20px;
  border-right: 1px solid var(--rule);
}
.readout-strip .item:last-child { border-right: 0; }
.readout-strip .k { display: block; margin-bottom: 7px; }
.readout-strip .v {
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.readout-strip .v small {
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-left: 3px;
}
.readout-strip .v.na { font-size: 13px; color: var(--ink-3); letter-spacing: 0; }

/* ===========================================================================
   Annunciator — a control-room alarm panel: a grid of legend windows,
   lit when in alarm and dark when healthy. Reads at a glance from across
   a room, which a stack of text banners does not.
   =========================================================================== */

.annunciator {
  display: grid;
  /* Wider columns leave at most one empty cell on the final row for a
     13-gauge network, rather than a conspicuous run of them. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2px;
  margin: 0 0 8px;
  /* Ground the grid in the panel colour, not the rule colour: unfilled cells
     on the last row must read as empty panel, not as a grey block. */
  background: transparent;
}

.legend-window {
  position: relative;
  background: var(--inset);
  border: 1px solid var(--rule);
  padding: 11px 12px 10px;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.legend-window .lw-name {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.3;
}
.legend-window .lw-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.legend-window .lw-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
}
.legend-window .lw-state {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.11em;
  color: var(--ink-4);
}

/* Lit states. The left edge is the lamp; the wash is what makes it read as
   backlit glass rather than a coloured border. */
.legend-window::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--ink-4);
}
.legend-window.lit .lw-name { color: var(--bone); }
.legend-window.lit .lw-val  { color: var(--bone); }

.legend-window.LOW::before { background: var(--s1); box-shadow: 0 0 10px var(--s1); }
.legend-window.LOW { background: linear-gradient(100deg, rgba(57,135,229,0.13), transparent 62%), var(--inset); }
.legend-window.LOW .lw-state { color: var(--s1); }

.legend-window.HIGH::before { background: var(--warning); box-shadow: 0 0 10px var(--warning); }
.legend-window.HIGH { background: linear-gradient(100deg, rgba(250,178,25,0.15), transparent 62%), var(--inset); }
.legend-window.HIGH .lw-state { color: var(--warning); }

.legend-window.HIGH_HIGH::before { background: var(--serious); box-shadow: 0 0 12px var(--serious); }
.legend-window.HIGH_HIGH { background: linear-gradient(100deg, rgba(236,131,90,0.18), transparent 62%), var(--inset); }
.legend-window.HIGH_HIGH .lw-state { color: var(--serious); }

.legend-window.CRITICAL::before { background: var(--critical); box-shadow: 0 0 14px var(--critical); }
.legend-window.CRITICAL { background: linear-gradient(100deg, rgba(208,59,59,0.2), transparent 62%), var(--inset); }
.legend-window.CRITICAL .lw-state { color: var(--critical); }

.legend-window.NORMAL::before { background: #1d3f1d; }
.legend-window.NORMAL .lw-state { color: var(--good); }

.legend-window.UNKNOWN .lw-state,
.legend-window.BADQ .lw-state { color: var(--ink-4); }
.legend-window.BADQ { opacity: 0.55; }

.annunciator-foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 34px;
}

/* ===========================================================================
   Instrument panels
   =========================================================================== */

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  margin-bottom: 26px;
}

/* Corner registration marks — the survey-plate signature. Drawn with
   background gradients so they cost no extra elements. */
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
  opacity: 0.85;
}
.panel::before {
  top: 6px; left: 6px;
  border-top: 1px solid var(--ink-4);
  border-left: 1px solid var(--ink-4);
}
.panel::after {
  bottom: 6px; right: 6px;
  border-bottom: 1px solid var(--ink-4);
  border-right: 1px solid var(--ink-4);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 15px 22px 14px;
  border-bottom: 1px solid var(--rule);
}

.panel-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.014em;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* the engraved index number beside each panel title */
.panel-head h2::before {
  content: attr(data-index);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  border: 1px solid var(--rule-strong);
  padding: 2px 6px;
}

.panel-head .hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-align: right;
}

.panel-body { padding: 22px; }
.panel-body.flush { padding: 0; }

/* ===========================================================================
   Filter row
   =========================================================================== */

.filterbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 0 22px;
}

.seg { display: inline-flex; border: 1px solid var(--rule-strong); }

.seg button {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--rule-strong);
  background: var(--panel);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 7px 15px;
  cursor: pointer;
  transition: background 140ms, color 140ms;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--panel-2); color: var(--bone); }
.seg button[aria-pressed="true"] { background: var(--bone); color: var(--void); font-weight: 600; }
.seg button:focus-visible { outline: 2px solid var(--s1); outline-offset: 2px; }

.filter-note {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  color: var(--ink-3);
}

/* ===========================================================================
   Schematic — full-bleed spine
   =========================================================================== */

.spine {
  position: relative;
  margin: 0 0 26px;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  background:
    linear-gradient(180deg, var(--panel) 0%, var(--inset) 55%, var(--panel) 100%);
}

.spine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 15px 22px 12px;
}
.spine-head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.014em;
}
.spine-head .hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.schematic-wrap { overflow-x: auto; padding: 0 22px 6px; }
.schematic { min-width: 1000px; display: block; }

.key {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 22px 16px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.key .item { display: inline-flex; align-items: center; gap: 7px; }
.key .swatch { width: 9px; height: 9px; flex: none; }
.key .swatch.line { height: 2px; width: 15px; }

/* ===========================================================================
   Charts
   =========================================================================== */

.chart-host { position: relative; }
.chart-host canvas { display: block; width: 100%; }

.tooltip {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  min-width: 168px;
  padding: 10px 12px;
  border: 1px solid var(--bezel);
  background: rgba(10,12,10,0.97);
  box-shadow: 0 10px 34px rgba(0,0,0,0.65);
  font-size: 12px;
  opacity: 0;
  transition: opacity 90ms;
}
.tooltip.on { opacity: 1; }
.tooltip .tt-time {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule);
}
.tooltip .tt-row { display: flex; align-items: center; gap: 9px; margin-top: 4px; }
.tooltip .tt-sw { width: 8px; height: 8px; flex: none; }
.tooltip .tt-name { color: var(--ink-2); flex: 1; white-space: nowrap; font-size: 11.5px; }
.tooltip .tt-val {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  color: var(--bone);
}

/* ===========================================================================
   Findings & caveats
   =========================================================================== */

.finding {
  padding: 15px 17px;
  border-left: 2px solid var(--ink-4);
  background: var(--inset);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.finding b, .finding strong { color: var(--bone); font-weight: 500; }
.finding .n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--bone);
}
.finding.ok { border-left-color: var(--good); }
.finding.warn { border-left-color: var(--warning); }

.caveat {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.62;
  color: var(--ink-3);
  padding-left: 13px;
  border-left: 1px solid var(--rule-strong);
}
.caveat .n { font-family: var(--mono); color: var(--ink-2); }

/* ===========================================================================
   Tables
   =========================================================================== */

.table-scroll { overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: 12.5px; }

table.data th, table.data td {
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
table.data thead th {
  position: sticky;
  top: 0;
  background: var(--panel-2);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
  z-index: 2;
}
table.data td.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
table.data td.tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--ink-4);
}
table.data tbody tr:hover { background: var(--panel-2); }
table.data tbody tr:last-child td { border-bottom: 0; }

/* status chips — glyph + label, never colour alone */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border: 1px solid var(--rule-strong);
  background: var(--inset);
  color: var(--ink-2);
}
.chip .glyph { font-weight: 600; }
.chip.NORMAL .glyph, .chip.GOOD .glyph { color: var(--good); }
.chip.LOW .glyph { color: var(--s1); }
.chip.HIGH .glyph, .chip.STALE .glyph { color: var(--warning); }
.chip.HIGH_HIGH .glyph { color: var(--serious); }
.chip.CRITICAL .glyph, .chip.BAD .glyph { color: var(--critical); }
.chip.UNKNOWN .glyph { color: var(--ink-4); }

/* band gauge — inline-block is load-bearing; an inline span drops width */
.band {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 92px;
  height: 8px;
  background: var(--inset);
  border: 1px solid var(--rule-strong);
}
.band i { position: absolute; inset: 0 auto 0 0; display: block; min-width: 2px; }
.band i.NORMAL { background: var(--good); }
.band i.LOW { background: var(--s1); }
.band i.HIGH { background: var(--warning); }
.band i.HIGH_HIGH { background: var(--serious); }
.band i.CRITICAL { background: var(--critical); }
.band::before, .band::after {
  content: "";
  position: absolute;
  top: -2px; bottom: -2px;
  width: 1px;
  background: var(--ink-4);
}
.band::before { left: 15%; }
.band::after  { left: 70%; }

.trend { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em; }
.trend.up { color: var(--warning); }
.trend.down { color: var(--s1); }
.trend.flat { color: var(--ink-4); }

/* ===========================================================================
   Layout — deliberately unequal columns
   =========================================================================== */

/* Mobile-first on purpose. Written the other way round, a modifier like
   .split.matrix-pair (0,2,0) outranks a plain .split rule inside a max-width
   media query (0,1,0) and silently defeats the collapse to one column. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  margin-bottom: 26px;
}
.split > .panel { margin-bottom: 0; }

@media (min-width: 1081px) {
  .split { grid-template-columns: 1.32fr 1fr; }   /* the response plot earns more room */

  /* The correlation matrix is a fixed-size grid; giving it the wide column
     just leaves dead space, so this pairing is weighted the other way. */
  .split.matrix-pair { grid-template-columns: 1fr 1.2fr; }
}

/* ===========================================================================
   Footer
   =========================================================================== */

.foot {
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-strong);
  display: grid;
  gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: var(--ink-4);
}
.foot a { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.foot a:hover { color: var(--bone); }

/* ===========================================================================
   Motion — one orchestrated load, then stillness
   =========================================================================== */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.reveal {
  opacity: 0;
  animation: rise 620ms cubic-bezier(0.22, 0.68, 0.28, 1) forwards;
  animation-delay: calc(var(--i, 0) * 72ms);
}

.stale { opacity: 0.45; transition: opacity 180ms; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; animation: none; }
  * { transition: none !important; }
}

/* ===========================================================================
   Responsive
   =========================================================================== */

@media (max-width: 860px) {
  :root { --gutter: 15px; }
  .readout { grid-template-columns: 1fr; gap: 26px; padding: 30px 0 26px; }
  .readout-strip .item { border-right: 0; flex-basis: 45%; }
  .nameplate h1 { font-size: 21px; }
  .panel-body { padding: 16px; }
}