/* Chart layer · shared by the control room, home, compute and measures.
   Series colours are a validated trio (colour-vision safe as a set); state tones
   reuse the control-room palette and never stand alone (legend text + hatch). */
:root {
  --series-a: #1e8a5c;
  --series-b: #c2622f;
  --series-c: #4a6fb3;
  --chart-hatch: #8a978d;
  --chart-grid: #e3e8e0;
  --chart-axis: #5f6d64;
}
.chart {
  margin: 0;
  padding: 0;
  min-width: 0;
}
.chart-canvas {
  width: 100%;
}
.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-body, system-ui, sans-serif);
}
.chart-stacked,
.chart-meter {
  height: 34px;
}
.chart-hatch-line {
  stroke: var(--chart-hatch);
  stroke-width: 1.2;
}
.chart-unknown-fill {
  stroke: var(--chart-hatch);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.chart-track {
  stroke: var(--chart-grid);
  stroke-width: 2;
}
.chart-grid {
  stroke: var(--chart-grid);
  stroke-width: 1;
}
.chart-tick {
  stroke: var(--chart-hatch);
  stroke-width: 1;
}
.chart-axis {
  fill: var(--chart-axis);
  font-size: 12px;
}
.chart-value {
  fill: var(--ink, #243e33);
  font-size: 12px;
  font-weight: 600;
}
.chart-mark-label {
  fill: var(--ink, #243e33);
  font-size: 11px;
  font-weight: 600;
}
.chart-inline-label {
  font-size: 12px;
  font-weight: 700;
}
.chart-inline-label.on-fill {
  fill: #fff;
}
.chart-inline-label.on-hatch {
  fill: var(--ink, #243e33);
}

/* Tones: the same meaning as the control-room chips. Shape carries state too. */
.chart .tone-good {
  --t: var(--tone-good, #206242);
}
.chart .tone-warn {
  --t: var(--tone-warn, #7d4e1b);
}
.chart .tone-bad {
  --t: var(--tone-bad, #9b3a36);
}
.chart .tone-pending {
  --t: var(--tone-pending, #35596b);
}
.chart .tone-neutral {
  --t: var(--tone-neutral, #56655d);
}
.chart-mark {
  fill: #fff;
  stroke: var(--t, #56655d);
  stroke-width: 2;
}
.chart-slot:is(.is-done, .is-late, .is-failed) .chart-mark {
  fill: var(--t);
}
.chart-slot:is(.is-scheduled, .is-missing, .is-inaccessible, .is-unverified) .chart-mark {
  stroke-dasharray: 3 2;
}
.chart-slot.is-awaiting .chart-mark {
  stroke-width: 2.5;
}
.chart-receipt {
  fill: var(--t);
}
.chart-receipt-link {
  stroke: var(--t);
  stroke-width: 2;
  stroke-dasharray: 2 3;
}
.chart-seg {
  fill: var(--t, var(--series-a));
}
.chart-seg.series-a {
  fill: var(--series-a);
}
.chart-seg.series-b {
  fill: var(--series-b);
}
.chart-seg.series-c {
  fill: var(--series-c);
}
.chart-seg.is-hatched {
  stroke: var(--chart-hatch);
  stroke-width: 1;
}
.chart-partial-cap {
  stroke: none;
}
.chart-dot {
  fill: #fff;
  stroke: var(--series-c);
  stroke-width: 2.5;
}
.chart-dot-row.is-current .chart-dot {
  fill: var(--series-a);
  stroke: var(--series-a);
}
.chart-dot-stem {
  stroke: var(--chart-grid);
  stroke-width: 2;
}

/* The Now cursor: copper, like the timeline marker it replaces. */
.chart-now line {
  stroke: var(--copper, #965134);
  stroke-width: 2;
}
.chart-now text {
  fill: var(--copper, #965134);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
@keyframes chart-now-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
.chart-now line {
  animation: chart-now-breathe 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .chart-now line {
    animation: none;
  }
}

/* Legend, caption and the table twin. */
.chart-legend {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--muted, #637167);
}
.chart-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 2px solid var(--t, var(--chart-hatch));
  background: #fff;
  flex: none;
}
.chart-swatch.is-filled {
  background: var(--t, var(--series-a));
}
.chart-swatch.series-a {
  --t: var(--series-a);
}
.chart-swatch.series-b {
  --t: var(--series-b);
}
.chart-swatch.series-c {
  --t: var(--series-c);
}
.chart-swatch.is-dashed {
  border-style: dashed;
}
.chart-swatch.is-hatched {
  background: repeating-linear-gradient(45deg, #fff 0 3px, var(--chart-hatch) 3px 4px);
  border-color: var(--chart-hatch);
}
.chart-swatch.is-receipt {
  width: 6px;
  border-radius: 2px;
  background: var(--tone-good, #206242);
  border-color: var(--tone-good, #206242);
}
.chart figcaption {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted, #637167);
}
.chart-data {
  margin-top: 6px;
  font-size: 12px;
}
.chart-data summary {
  cursor: pointer;
  color: var(--muted, #637167);
}
.chart-data table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 12px;
}
.chart-data th,
.chart-data td {
  text-align: left;
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--line, #dce1d8);
  vertical-align: top;
}

/* Sparklines sit beside a number; the number stays the headline. */
.chart-spark {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  overflow: visible;
}
.chart-spark-line {
  fill: none;
  stroke: var(--series-a);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart-spark-dot {
  fill: var(--series-a);
}
.chart-spark.is-empty {
  color: var(--muted, #637167);
  font-size: 12px;
}

/* Placement helpers. */
.cr-today .chart-day {
  margin: 0 0 18px;
  padding: 14px 16px 10px;
  background: var(--cr-card, #fff);
  border: 1px solid var(--cr-line, #d9e0da);
  border-radius: 14px;
}
.home-today .chart-day {
  margin: 0 0 12px;
}
.cr-card .chart {
  margin: 12px 0 4px;
}
.cr-card .chart + .chart {
  margin-top: 18px;
}
.cr-compute-lanes .chart {
  margin: 8px 0 10px;
}
.compute-daily .chart {
  margin: 12px 0;
}
.health-live-charts {
  display: grid;
  gap: 14px;
}
.headline-value .chart-spark {
  margin-left: 10px;
}
@media (max-width: 600px) {
  .chart-mark-label {
    display: none;
  }
  .chart-legend {
    gap: 4px 12px;
    font-size: 11px;
  }
}