/*
 * Charts, with no charting library. A library would weigh more than the entire rest of the front
 * end and would invite chart types this data does not support: a smoothed line over a series whose
 * whole point is discontinuity, an area fill implying a quantity where there is a ratio.
 *
 * Everything with a continuous x-axis is server-rendered inline SVG. Everything that is a set of
 * magnitudes is CSS boxes with inline widths — the CSP permits inline style and blocks inline
 * script, which is exactly the right way round for this.
 */
.fig {
  margin: var(--s5) 0;
  padding: var(--s4);
}

.fig__head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

.fig__ticker { font-size: 17px; font-weight: 600; color: var(--fg); }

.fig svg { width: 100%; height: auto; display: block; }

.fig__ground { fill: var(--panel-deep); }

/* The stall bands. Drawn first and full height: a long stall is a wide band you see before you read
   anything. Windows past the headline bar are stronger, so the six-hour threshold is visible
   without a legend. */
.fig__stall { fill: var(--frozen); fill-opacity: 0.10; }
.fig__stall--long { fill-opacity: 0.20; }

.fig__zero { stroke: var(--fg-5); stroke-width: 1; }
.fig__guide { stroke: var(--fg-5); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.6; }
.fig__tick { fill: var(--fg-3); font: 500 9px var(--font-mono); letter-spacing: 0.08em; }

/* The line's colour reports feed state, so the state needs no legend. */
.fig__line { stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.fig__line--fresh { stroke: var(--live); }
.fig__line--stalled { stroke: var(--frozen); }

.fig__note {
  margin: var(--s3) 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: var(--measure);
}

.fig__empty {
  padding: var(--s5) var(--s4);
  border: var(--hair) dashed var(--panel-rule);
  text-align: center;
}

.fig__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  align-items: center;
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: var(--hair) solid var(--panel-rule);
}

.fig__perma { color: var(--fg-3); }

/* Narrow: the same viewBox, thicker strokes so the line survives the scale, and fewer guides. A
   chart gets SIMPLER at narrow widths, never smaller. */
@media (max-width: 720px) {
  .fig { padding: var(--s3); }
  .fig__line { stroke-width: 2.5; }
  .fig__tick { font-size: 11px; }
}

/*
 * THE SECOND SERIES: time since the oracle published. PRD §6 asks for both on one chart.
 *
 * Drawn at low contrast against the bottom of the frame, on its OWN scale. Age is hours and
 * divergence is basis points; sharing an axis would mean inventing a conversion between them, and
 * any such conversion claims that N bps is the same amount of bad as N hours. It is context for the
 * divergence line above it, so it must never out-shout it.
 */
.fig__age {
  stroke: var(--on-panel-4);
  stroke-width: 1;
  stroke-linejoin: miter;
}