/* ============================================================================
   Runtime metric strip and charts.

   A separate stylesheet rather than more of style.css, which is already well
   past the repository's 500-line file budget (see SESSION.md). New styles stay
   isolated until that split happens, so this file is additive and self-
   contained: it defines its own tokens and reuses style.css's theme variables
   for everything else.

   The series palette lives here and nowhere else. metrics-chart.js sets only
   data-series-index and never a colour, exactly as fleet-monitor.js sets only
   data-tone -- so a chart cannot drift from the theme that paints it.
   ============================================================================ */

:root {
  /* Six series, distinguishable in both themes and for the common forms of
     colour vision deficiency: the pairs that appear together on one card
     (average/max, rx/tx) differ in lightness as well as hue. */
  --series-1: #2e7d8f;
  --series-2: #d98b3a;
  --series-3: #5a4fcf;
  --series-4: #2e7d4f;
  --series-5: #a8503a;
  --series-6: #7a6f9b;
  --metric-grid: #ece9e4;
  --metric-limit: #a8503a;
  --metric-band: rgba(107, 104, 100, 0.1);
  --metric-reboot: rgba(168, 80, 58, 0.55);
}

:root[data-theme="dark"] {
  --series-1: #56b6c9;
  --series-2: #e8a961;
  --series-3: #8d84e8;
  --series-4: #5fbe86;
  --series-5: #d97a60;
  --series-6: #a79bd0;
  --metric-grid: #2f2e36;
  --metric-limit: #d97a60;
  --metric-band: rgba(236, 234, 228, 0.08);
  --metric-reboot: rgba(217, 122, 96, 0.6);
}

/* ---------------------------------------------------------------------------
   The one-line resource strip
   --------------------------------------------------------------------------- */

.resource-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  font-size: 0.8125rem;
}

.resource-reading {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  white-space: nowrap;
}

.resource-reading-label {
  color: var(--text-muted);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.resource-reading-value {
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Tones follow the same vocabulary as .status-pill: a reading with no
   denominator stays idle and never alarms. */
.resource-reading[data-tone="warn"] .resource-reading-value {
  color: var(--warning-text);
}

.resource-reading[data-tone="bad"] .resource-reading-value {
  color: var(--danger);
}

.resource-reading[data-tone="idle"] .resource-reading-value {
  color: var(--text-muted);
}

/* ==========================================================================
   Resource panel -- the bar rendering of the same readings
   ==========================================================================
   Used where a card is read slowly rather than scanned, so the eye finds the
   tight resource from the bar before the number is read. Tones are the same
   vocabulary as .resource-reading above; a gauge with no denominator gets an
   empty track rather than a filled guess, and the track is still drawn so the
   rows stay aligned. */

.resource-panel {
  flex: 1 1 13rem;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: var(--surface-raised, transparent);
}

.resource-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.resource-panel-title {
  color: var(--text-muted);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.resource-panel-subtitle {
  color: var(--text-faint);
  font-size: 0.625rem;
  white-space: nowrap;
}

.resource-panel-body {
  display: grid;
  gap: 0.3rem;
}

/* Three columns rather than flex: the label and figure widths are fixed so
   every bar in a panel starts and ends at the same x, which is what makes two
   panels side by side comparable at a glance. */
.resource-bar {
  display: grid;
  grid-template-columns: 2.25rem 1fr 3rem;
  align-items: center;
  gap: 0.5rem;
}

.resource-bar-label {
  color: var(--text-muted);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.resource-bar-track {
  position: relative;
  height: 0.3125rem;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.resource-bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 240ms ease;
}

.resource-bar-fill[data-tone="warn"] {
  background: var(--warning-text);
}

.resource-bar-fill[data-tone="bad"] {
  background: var(--danger);
}

.resource-bar-fill[data-tone="idle"] {
  background: var(--text-faint);
}

.resource-bar-value {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.resource-bar[data-tone="warn"] .resource-bar-value {
  color: var(--warning-text);
}

.resource-bar[data-tone="bad"] .resource-bar-value {
  color: var(--danger);
}

.resource-bar[data-tone="idle"] .resource-bar-value {
  color: var(--text-muted);
}

/* Side by side while there is room, stacked once the card narrows. */
.resource-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* Expiry, for a page that is rendered once and then left open.

   The panels are *removed*, not dimmed. Dimming was the first attempt and it
   does not do the job: the exact figures stay readable, and opacity conveys
   nothing whatsoever to a screen reader, so an assistive-technology user would
   go on being read stale numbers with no indication they had gone out of date.
   `display: none` takes them out of the accessibility tree along with the
   layout, which is what "do not present stale readings as current" actually
   requires.

   `[data-expired]` is set by the shell's countdown, so a page whose JavaScript
   never runs keeps showing what it rendered -- the pre-existing behaviour,
   not a worse one. */

.resource-expiry-note {
  display: none;
  flex-basis: 100%;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.6875rem;
}

.resource-panels[data-expired] .resource-expiry-note {
  display: block;
}

.resource-panels[data-expired] .resource-panel {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .resource-bar-fill {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Chart cards
   --------------------------------------------------------------------------- */

.metric-grid-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .metric-grid-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.metric-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  padding: 1rem 1.125rem 0.75rem;
  /* The tooltip is positioned against this box. */
  position: relative;
}

.metric-card-title {
  color: var(--text-muted);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: uppercase;
}

.metric-card-value {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
  margin: 0.25rem 0 0.75rem;
}

.metric-card-hint {
  color: var(--text-faint);
  font-size: 0.75rem;
  margin: 0.25rem 0 0;
}

.metric-plot {
  position: relative;
  /* The SVG is drawn on a fixed viewBox and stretched to the card width, so the
     height is fixed here rather than by aspect ratio. */
  height: 160px;
}

.metric-chart {
  display: block;
  height: 100%;
  width: 100%;
}

.metric-gridline {
  stroke: var(--metric-grid);
  stroke-width: 1;
}

.metric-axis-label {
  fill: var(--text-faint);
  font-size: 11px;
}

/* Bars and lines take their colour from the series index alone. */
.metric-bar[data-series-index="0"],
.metric-line[data-series-index="0"] {
  fill: var(--series-1);
  stroke: var(--series-1);
}

.metric-bar[data-series-index="1"],
.metric-line[data-series-index="1"] {
  fill: var(--series-2);
  stroke: var(--series-2);
}

.metric-bar[data-series-index="2"],
.metric-line[data-series-index="2"] {
  fill: var(--series-3);
  stroke: var(--series-3);
}

.metric-bar[data-series-index="3"],
.metric-line[data-series-index="3"] {
  fill: var(--series-4);
  stroke: var(--series-4);
}

.metric-bar[data-series-index="4"],
.metric-line[data-series-index="4"] {
  fill: var(--series-5);
  stroke: var(--series-5);
}

.metric-bar[data-series-index="5"],
.metric-line[data-series-index="5"] {
  fill: var(--series-6);
  stroke: var(--series-6);
}

.metric-line {
  fill: none;
  stroke-width: 1.75;
  /* The viewBox is stretched to the card width, so an unscaled stroke would
     thicken horizontally. */
  vector-effect: non-scaling-stroke;
}

/* The container's memory ceiling, drawn only where a host actually enforced
   it. */
.metric-limit {
  stroke: var(--metric-limit);
  stroke-dasharray: 4 4;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* A span served by a host the project has since left. Shaded rather than
   plotted: those samples describe a different machine. */
.metric-boundary {
  fill: var(--metric-band);
}

.metric-reboot {
  stroke: var(--metric-reboot);
  stroke-dasharray: 2 3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.metric-crosshair {
  stroke: var(--border-strong);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* ---------------------------------------------------------------------------
   Legend, tooltip, range picker
   --------------------------------------------------------------------------- */

.metric-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
  justify-content: center;
  margin-top: 0.5rem;
}

.metric-legend-item {
  align-items: center;
  color: var(--text-muted);
  display: inline-flex;
  font-size: 0.75rem;
  gap: 0.375rem;
}

.metric-legend-item::before {
  border-radius: 2px;
  content: "";
  height: 8px;
  width: 8px;
}

.metric-legend-item[data-series-index="0"]::before { background: var(--series-1); }
.metric-legend-item[data-series-index="1"]::before { background: var(--series-2); }
.metric-legend-item[data-series-index="2"]::before { background: var(--series-3); }
.metric-legend-item[data-series-index="3"]::before { background: var(--series-4); }
.metric-legend-item[data-series-index="4"]::before { background: var(--series-5); }
.metric-legend-item[data-series-index="5"]::before { background: var(--series-6); }

.metric-tooltip {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow);
  font-size: 0.75rem;
  min-width: 13rem;
  padding: 0.5rem 0.625rem;
  pointer-events: none;
  position: absolute;
  top: 0.5rem;
  z-index: 5;
}

.metric-tooltip[hidden] {
  display: none;
}

/* The viewer's own zone, named because an operator correlating a spike against
   a log line has to know which clock they are reading. */
.metric-tooltip-zone {
  color: var(--text-faint);
  font-size: 0.6875rem;
}

.metric-tooltip-instant {
  color: var(--text);
  font-family: var(--font-mono);
  margin-bottom: 0.375rem;
}

.metric-tooltip-row {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.metric-tooltip-key {
  align-items: center;
  color: var(--text-soft);
  display: inline-flex;
  gap: 0.375rem;
}

.metric-tooltip-key::before {
  border-radius: 2px;
  content: "";
  height: 7px;
  width: 7px;
}

.metric-tooltip-key[data-series-index="0"]::before { background: var(--series-1); }
.metric-tooltip-key[data-series-index="1"]::before { background: var(--series-2); }
.metric-tooltip-key[data-series-index="2"]::before { background: var(--series-3); }
.metric-tooltip-key[data-series-index="3"]::before { background: var(--series-4); }
.metric-tooltip-key[data-series-index="4"]::before { background: var(--series-5); }
.metric-tooltip-key[data-series-index="5"]::before { background: var(--series-6); }

.metric-tooltip-value {
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.metric-tooltip-share {
  color: var(--text-faint);
}

/* Only additive cards get this row: CPU average and CPU max are two views of
   one quantity, and their sum would describe nothing. */
.metric-tooltip-total {
  border-top: 1px solid var(--border-soft);
  color: var(--text);
  display: flex;
  font-family: var(--font-mono);
  justify-content: space-between;
  margin-top: 0.375rem;
  padding-top: 0.375rem;
}

.metric-range {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.metric-range button {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
}

.metric-range button[aria-pressed="true"] {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--text);
}

[data-metrics-loading] .metric-plot {
  opacity: 0.55;
}

.metric-empty {
  color: var(--text-faint);
  font-size: 0.8125rem;
  padding: 2.5rem 0;
  text-align: center;
}

.metric-empty[hidden] {
  display: none;
}

/* A pill that navigates. Inherits every .status-pill rule; this only restores
   the affordances an anchor loses when styled as one. */
.status-pill-link {
  cursor: pointer;
  text-decoration: none;
}

.status-pill-link:hover {
  text-decoration: underline;
}

/* The fleet row's resource cell reuses `.status-pill` because that is what the
   live monitor knows how to patch — it owns both the value slot and the
   `-detail` slot. But a forty-character strip inside pill chrome reads as a
   badge that has outgrown itself, so the chrome is dropped here while the tone
   is kept as the text colour. */
.status-pill[data-cell="resources"] {
  background: none;
  color: var(--text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  padding: 0;
}

.status-pill[data-cell="resources"][data-tone="warn"] {
  background: none;
  color: var(--warning-text);
}

.status-pill[data-cell="resources"][data-tone="bad"] {
  background: none;
  color: var(--danger);
}

.status-pill[data-cell="resources"][data-tone="idle"] {
  background: none;
  color: var(--text-muted);
}