:root {
  --ink:        #16181c;
  --ink-soft:   #4a4f57;
  --ink-quiet:  #82888f;
  --rule:       #dcdee1;
  --rule-soft:  #ebecee;
  --paper:      #ffffff;
  --fan:        31, 95, 168;   /* the one saturated hue on the page */
  --warn:       #8a4b12;
  --warn-bg:    #fdf4e9;
  --err:        #8c2f2a;
  --err-bg:     #fbeceb;

  /* Wide enough to let the chart grow on a large monitor; prose blocks below
     carry their own tighter max-widths so line length stays readable. */
  --measure: 104rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: "tnum" 1;
}

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 4rem 2rem 5rem;
}

/* ---------- masthead ---------- */

.masthead { margin-bottom: 1rem; }

h1 {
  font-family: "Source Serif 4", serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.35rem;
}

.subtitle {
  margin: 0 0 1.5rem;
  color: var(--ink-quiet);
  font-size: 0.95rem;
}

.runline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.run-main {
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
}

/* Label stays quiet; the timestamp itself carries the emphasis. */
.run-label { font-weight: 400; }

.run-time { font-weight: 600; }

.run-age {
  font-size: 0.875rem;
  color: var(--ink-quiet);
}

.stale {
  margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  background: var(--warn-bg);
  border-left: 2px solid var(--warn);
  color: var(--warn);
  font-size: 0.875rem;
}

/* ---------- controls ---------- */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
  align-items: flex-end;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}

.control { display: flex; flex-direction: column; gap: 0.35rem; }

.control label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-quiet);
  font-weight: 500;
}

select, button {
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.4rem 0.55rem;
  line-height: 1.3;
}

select { min-width: 11rem; }

select:disabled {
  color: var(--ink-quiet);
  background: #f7f7f8;
}

button { cursor: pointer; }
button:hover { border-color: var(--ink-quiet); }

select:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.control--action { justify-content: flex-end; }

.station-meta {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* ---------- messages ---------- */

.error {
  margin: 1.5rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--err-bg);
  border-left: 2px solid var(--err);
  color: var(--err);
  font-size: 0.9375rem;
}

/* ---------- plot ---------- */

.plot-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: 2rem;
  margin-top: 2rem;
  align-items: start;
}

.chart { min-width: 0; }

/* Floor the chart width on desktop so it grows with the viewport but never
   shrinks much below its original size. Gated above the width where the floor
   plus the readout column would overflow the content column. */
@media (min-width: 1200px) {
  .chart { min-width: 880px; }
}

/* ---------- readout ---------- */

.readout {
  border-left: 1px solid var(--rule);
  padding-left: 1.25rem;
}

.readout-time {
  margin: 0 0 0.7rem;
  font-family: Inter, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
  min-height: 1.2em;
}

.readout-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.readout-table th,
.readout-table td {
  padding: 0.16rem 0;
  text-align: right;
}

.readout-table th:first-child,
.readout-table td:first-child { text-align: left; }

.readout-table thead th {
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-quiet);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule-soft);
}

.readout-table tbody td { color: var(--ink-soft); }
.readout-table tbody td:first-child { color: var(--ink-quiet); }

.readout-table tr.is-median td { color: var(--ink); font-weight: 600; }

/* uPlot overrides — keep the chrome quiet */
.uplot, .u-wrap { font-family: Inter, sans-serif !important; }

/* ---------- threshold probability ---------- */

.prob {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.prob-title {
  margin: 0 0 1rem;
  font-family: "Source Serif 4", serif;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.prob-hint {
  margin: -0.5rem 0 1.1rem;
  font-size: 0.8125rem;
  color: var(--ink-quiet);
}

.prob-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-end;
}

.prob-controls input[type="number"] {
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.4rem 0.55rem;
  line-height: 1.3;
  width: 8rem;
  font-variant-numeric: tabular-nums;
}

.prob-controls input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.prob-out {
  margin: 1.25rem 0 0;
  min-height: 1.5em;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.prob-out .prob-value {
  color: var(--ink);
  font-weight: 600;
}

.prob-out .prob-note {
  color: var(--ink-quiet);
  font-size: 0.8125rem;
}

/* ---------- colophon ---------- */

.colophon {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.description {
  margin: 0 0 1rem;
  max-width: 46rem;
  /* The payload text ends in a bare URL, which is one unbreakable token. */
  overflow-wrap: anywhere;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--ink-quiet);
}

.links { margin: 0; font-size: 0.8125rem; }

.links a { color: var(--ink-soft); text-decoration-color: var(--rule); }
.links a:hover { color: var(--ink); }

/* ---------- narrow ---------- */

@media (max-width: 800px) {
  main { padding: 2.5rem 1.25rem 3.5rem; }
  h1 { font-size: 1.5rem; }

  .plot-wrap { grid-template-columns: minmax(0, 1fr); }

  .readout {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: 1.25rem;
  }

  .control, select { width: 100%; }
  .control { flex: 1 1 100%; }
}