/* ==========================================================================
   Data visualisation
   --------------------------------------------------------------------------
   Rules that are deliberate, not stylistic preference:

   - Marks are thin and the grid is a recessive hairline. The data is the only
     thing allowed to be loud.
   - Gridlines are SOLID. A dashed grid reads as "projection" or "threshold"
     when it is only a grid.
   - Text never wears the data colour. Values, names and ticks use ink tokens;
     identity comes from the coloured mark beside them.
   - Texture is opt-in. It appears for forced-colors, in print, and when the
     reader presses "Patterns" — never as decoration.
   ========================================================================== */

.viz {
  margin: 0;
  padding: clamp(1.1rem, 3vw, 2rem);
  border: var(--rule) solid var(--border);
  background: var(--viz-surface);
  box-shadow: var(--shadow-s);
}

.viz__caption { margin-block-end: var(--space-s); }

.viz__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--wonk-on);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--viz-ink);
  letter-spacing: var(--tracking-tight);
}

.viz__subtitle {
  margin-block-start: 0.4rem;
  max-width: 62ch;
  font-size: var(--step--1);
  color: var(--viz-ink-2);
}

/* ---- toolbar: legend on the left, controls on the right ------------------ */
.viz__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block-end: var(--space-s);
  padding-block-end: 0.8rem;
  border-bottom: 1px solid var(--viz-grid);
}

.viz__legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }

.viz__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--viz-ink-2);
}

.viz__swatch {
  width: 12px;
  height: 12px;
  flex: none;
}

.viz__legend-item.is-measured .viz__swatch { background: var(--viz-measured); }
.viz__legend-item.is-extrapolated .viz__swatch { background: var(--viz-extrapolated); }

.viz__controls { display: flex; gap: 0.4rem; }

.viz__toggle {
  padding: 0.34rem 0.7rem;
  border: var(--rule) solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--viz-ink-2);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}

.viz__toggle:hover { color: var(--viz-ink); border-color: var(--border-strong); }

.viz__toggle[aria-pressed="true"] {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: var(--accent);
}

/* ---- plot ---------------------------------------------------------------- */
.viz__plot { position: relative; }

/* Wide charts scroll inside their own container; the page body never does. */
.viz__svg { width: 100%; height: auto; min-width: 30rem; overflow: visible; }

@media (max-width: 40rem) {
  .viz__plot { overflow-x: auto; overflow-y: hidden; padding-block-end: 0.5rem; }
}

/* ---- chrome -------------------------------------------------------------- */
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; }
.viz-axis { stroke: var(--viz-axis); stroke-width: 1; }

.viz-tick {
  fill: var(--viz-muted);
  stroke: none;
  font-size: 11px;
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.viz-axis-title {
  fill: var(--viz-muted);
  stroke: none;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

/* ---- bars ---------------------------------------------------------------- */
.viz-bar { cursor: default; }

/* A full-row transparent rectangle, so a 38px bar still has a comfortable
   hover and focus target. */
.viz-bar__hit { fill: transparent; stroke: none; }

.viz-bar__fill {
  stroke: none;
  transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}

.viz-bar.is-measured .viz-bar__fill { fill: var(--viz-measured); }
.viz-bar.is-extrapolated .viz-bar__fill { fill: var(--viz-extrapolated); }

.viz-bar__name {
  fill: var(--viz-ink);
  stroke: none;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.viz-bar__value {
  fill: var(--viz-ink-2);
  stroke: none;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Hovering one bar dims the others rather than recolouring anything. */
.viz__bars:hover .viz-bar:not(:hover) .viz-bar__fill { opacity: 0.42; }
.viz-bar:hover .viz-bar__fill { filter: brightness(1.08); }

.viz-bar:focus-visible { outline: none; }
.viz-bar:focus-visible .viz-bar__fill {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- texture: opt-in only ------------------------------------------------ */
.viz-bar__texture { opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }

.viz.is-textured .viz-bar.is-extrapolated .viz-bar__texture { opacity: 1; }

/* ---- tooltip ------------------------------------------------------------- */
.viz__tooltip {
  position: absolute;
  z-index: 5;
  max-width: 20rem;
  padding: 0.6rem 0.8rem;
  border: var(--rule) solid var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-m);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ink-2);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-8px);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.viz__tooltip.is-visible { opacity: 1; }

.viz__tooltip-title { display: block; font-weight: 650; color: var(--ink); }

.viz__tooltip-value {
  display: block;
  margin-block: 0.15rem;
  font-size: var(--step-1);
  font-weight: 680;
  color: var(--ink);
}

.viz__tooltip-tag {
  display: inline-block;
  margin-block-end: 0.25rem;
  padding: 0.1rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.viz__tooltip-tag.is-measured {
  color: var(--viz-measured);
  background: color-mix(in oklab, var(--viz-measured) 15%, transparent);
}

.viz__tooltip-tag.is-extrapolated {
  color: var(--viz-extrapolated);
  background: color-mix(in oklab, var(--viz-extrapolated) 15%, transparent);
}

/* ---- table view: the WCAG-clean twin ------------------------------------- */
.viz__table { margin-block-start: var(--space-m); overflow-x: auto; }

.viz__table table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }

.viz__table th, .viz__table td {
  padding: 0.6rem 0.75rem;
  text-align: start;
  border-bottom: 1px solid var(--viz-grid);
  vertical-align: top;
}

.viz__table thead th {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--viz-muted);
}

.viz__table tbody th { font-weight: 650; color: var(--viz-ink); white-space: nowrap; }

.viz__table-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 450;
  color: var(--viz-muted);
}

/* Tabular figures belong here — these numbers align in a column. */
.viz__table-number { font-variant-numeric: tabular-nums; font-weight: 620; color: var(--viz-ink); }

.viz__table-note { color: var(--viz-ink-2); min-width: 18rem; }

/* ---- footnotes ----------------------------------------------------------- */
.viz__footnotes {
  margin-block-start: var(--space-m);
  padding-block-start: 0.8rem;
  border-top: 1px solid var(--viz-grid);
  display: grid;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--viz-muted);
}

/* ---- accessibility fallbacks --------------------------------------------
   Where hue cannot be relied on at all, texture switches itself on.        */
@media (forced-colors: active) {
  .viz-bar__fill { forced-color-adjust: none; fill: CanvasText; }
  .viz-bar.is-extrapolated .viz-bar__texture { opacity: 1; }
  .viz__swatch { forced-color-adjust: none; border: 1px solid CanvasText; }
}

@media print {
  .viz { border: 1px solid #000; box-shadow: none; }
  .viz__controls, .viz__tooltip { display: none; }
  .viz__table { display: block !important; }
  .viz-bar.is-extrapolated .viz-bar__texture { opacity: 1; }
}