/*
 * charts.css — styling for the widgets in assets/js/charts.js.
 *
 * Everything ink-coloured is currentColor so the charts follow the page's
 * text colour. Only the series hues and the mark "surface ring" are real
 * values, and they swap under a dark theme.
 *
 * Series hues are the validated categorical slots 1 and 2 (blue / orange):
 * adjacent-pair CVD ΔE 24.7 light, 26.8 dark; both ≥ 3:1 on their surface.
 */

.chart {
  --chart-s1: #2a78d6;
  --chart-s2: #eb6834;
  --chart-surface: #fdfdfd;
  position: relative;
  margin: 1.8em 0;
  padding: 0;
}

/* The site is light-only today, so the dark steps are opt-in: they apply when
   the page declares a dark theme, never merely because the OS is dark (that
   would put dark-tuned hues on a light page). */
:root[data-theme="dark"] .chart {
  --chart-s1: #3987e5;
  --chart-s2: #d95926;
  --chart-surface: #1a1a19;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .chart {
    --chart-s1: #3987e5;
    --chart-s2: #d95926;
    --chart-surface: #1a1a19;
  }
}

.chart-title {
  margin: 0 0 0.5em;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.chart figcaption {
  margin-top: 0.5em;
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.7;
}

.chart figcaption .chart-note { display: block; }
.chart figcaption .chart-source { display: block; }

.chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---- shared SVG marks ---- */

.chart-grid { stroke: currentColor; stroke-opacity: 0.13; stroke-width: 1; }
.chart-hit { fill: transparent; }

.chart-tick,
.chart-axis-label,
.chart-row-label,
.chart-value,
.chart-pt-label {
  fill: currentColor;
  font-family: inherit;
}

.chart-tick { font-size: 12px; opacity: 0.6; }
.chart-axis-label { font-size: 12px; opacity: 0.75; font-weight: 600; }
.chart-row-label { font-size: 14px; }
.chart-value { font-size: 13px; opacity: 0.85; font-variant-numeric: tabular-nums; }
.chart-pt-label { font-size: 12px; opacity: 0.8; }

.chart-bar.s1, .chart-bite.s1, .chart-dot.s1, .chart-swatch.s1 { fill: var(--chart-s1); background: var(--chart-s1); }
.chart-bar.s2, .chart-bite.s2, .chart-dot.s2, .chart-swatch.s2 { fill: var(--chart-s2); background: var(--chart-s2); }

/* 2px surface ring so overlapping dots stay countable */
.chart-dot { stroke: var(--chart-surface); stroke-width: 2; }
.chart-track { fill: currentColor; fill-opacity: 0.1; }
.chart-bite { fill-opacity: 0.9; }

/* Hover is the only state change: dim the rest, keep the hovered mark solid. */
.chart-svg.is-hover .chart-bar:not(.is-hi),
.chart-svg.is-hover .chart-pt:not(.is-hi) { opacity: 0.35; }
.chart-svg .chart-bar,
.chart-svg .chart-pt { transition: opacity 0.12s ease; }
.chart-pt.is-hi .chart-dot { stroke-width: 3; }

/* ---- legend ---- */

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1.1em;
  margin: 0 0 0.5em;
  font-size: 0.85rem;
}
.chart-key { display: inline-flex; align-items: center; gap: 0.4em; }
.chart-swatch {
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  border-radius: 2px;
}

/* ---- tooltip ---- */

.chart-tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -125%);
  max-width: 22em;
  padding: 0.4em 0.6em;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: var(--chart-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: nowrap;
}
.chart-tip[hidden] { display: none; }
.chart-tip-head { font-weight: 600; }

/* ---- sortable table ---- */

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

.chart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.chart-table th,
.chart-table td {
  padding: 0.35em 0.6em;
  border-bottom: 1px solid currentColor;
  border-color: rgba(128, 128, 128, 0.3);
  text-align: left;
}
.chart-table td.num,
.chart-table thead th.num { text-align: right; }
.chart-table thead th {
  padding: 0;
  border-bottom-width: 2px;
  white-space: nowrap;
}
.chart-table thead th button {
  width: 100%;
  padding: 0.35em 0.6em;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: inherit;
  cursor: pointer;
}
.chart-table thead th button:hover,
.chart-table thead th button:focus-visible { background: rgba(128, 128, 128, 0.14); }
.chart-arrow { margin-left: 0.35em; opacity: 0.45; font-size: 0.85em; }
.chart-table thead th[aria-sort="ascending"] .chart-arrow,
.chart-table thead th[aria-sort="descending"] .chart-arrow { opacity: 1; }
.chart-table tbody th { font-weight: 600; }
.chart-table tbody tr:hover { background: rgba(128, 128, 128, 0.1); }
.chart-table td.is-sorted,
.chart-table tbody th.is-sorted { background: rgba(128, 128, 128, 0.07); }

/* ---- slider ---- */

.chart-control {
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex-wrap: wrap;
  margin-bottom: 0.4em;
  font-size: 0.9rem;
}
.chart-control label { font-weight: 600; }
.chart-control input[type="range"] {
  flex: 1 1 16em;
  min-width: 12em;
  accent-color: var(--chart-s1);
}
.chart-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-bottom: 0.5em;
}
.chart-presets button {
  padding: 0.2em 0.6em;
  border: 1px solid rgba(128, 128, 128, 0.5);
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.chart-presets button:hover,
.chart-presets button:focus-visible { border-color: var(--chart-s1); }
.chart-readout {
  margin: 0 0 0.6em;
  font-size: 0.95rem;
  line-height: 1.45;
}

/* ---- no motion beyond the hover highlight; drop that too on request ---- */

@media (prefers-reduced-motion: reduce) {
  .chart *, .chart *::before, .chart *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .chart-tip, .chart-presets, .chart-control input { display: none; }
  .chart-svg.is-hover .chart-bar:not(.is-hi) { opacity: 1; }
}