/* ==========================================================================
   Chart  (.pf-chart)
   A small, theme-aware inline-SVG line or bar chart for a case study — the
   "series over time" evidence a stat strip can't carry (weekly adoption, tag
   volume by day). The SVG holds geometry only; every colour comes from these
   classes, so the chart flips with the theme and never bakes a hex.

   Rules it follows (dataviz skill + this DS):
   - ONE series, one colour: --pf-chart-series (ink). Context series sit in
     --pf-chart-context (secondary ink) — the "emphasis" form. No legend for a
     single series; the __title names what is plotted. The wash under the line
     (__area) is --pf-chart-area, the series ink at 10% by default; a case-study
     page may set it to the study's own cover hue (v0.9.84, the renderer writes it
     inline from card.cover_to like the cover stops) so the chart carries the study's
     identity colour quietly. The wash is redundant to the line, so it carries no
     data; line, marks and text stay ink.
   - Pink appears ONLY as a thin annotation stroke (--pf-chart-annot: a launch
     line, a marker ring) — never a fill, never text (R5; pink on white is 2.3:1,
     below the 3:1 mark minimum, so it cannot carry data).
   - Text in the SVG wears text tokens, never the series colour.
   - Marks: 2px round-capped lines, ≥8px markers ringed in the surface colour,
     bars ≤24px with a 4px rounded data-end (author bars as <path>), area fills
     at 10% opacity, solid hairline grid, no dashed rules.
   - Direct labels only at endpoints / the extreme; the axis + the table twin
     carry the rest. Every chart ships a <details> table twin (__data) — the
     WCAG-clean equivalent, so no value is gated behind the picture.
   - Hover tooltips are deliberately NOT shipped (decided 2026-09-27): three or
     four static charts don't justify a JS layer; labels + the table carry it.

   Author the SVG at viewBox 560×280 (2:1) for the reading column, text at 12px
   viewBox units. Below --pf-chart-min-w the chart scrolls sideways inside
   __scroll (a focusable region) rather than shrinking its text to nothing;
   the table twin needs no scrolling. Sits in a figure as .pf-figure--chart
   (v0.9.82: on the gray stage like a table or a meter, the chart held to the reading measure).
   ========================================================================== */

.pf-chart {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-2);
  width: 100%;
}

/* What is plotted (e.g. "Weekly active accounts, Jul 2025 to Mar 2026").
   Small caps serif, secondary — a subtitle, not a heading; the figcaption
   carries the point the chart makes. */
.pf-chart__title {
  margin: 0;
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-small);
  line-height: var(--pf-lh-tight);
  text-transform: uppercase;
  letter-spacing: var(--pf-tracking-caps);
  color: var(--pf-ink-secondary);
}

/* Scroll region: only scrolls once the column is narrower than the SVG's
   min-width. Focusable (tabindex="0" in markup) so keyboard users can pan it;
   the ring comes from the global :focus-visible in reset.css (R7). */
.pf-chart__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.pf-chart__svg {
  display: block;
  width: 100%;
  min-width: var(--pf-chart-min-w, 30rem);
  height: auto;
  overflow: visible;
  font-family: var(--pf-font-body);
}

/* --- Chrome: recessive --- */
.pf-chart__grid {
  fill: none;
  stroke: var(--pf-chart-grid);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.pf-chart__axis {
  fill: none;
  stroke: var(--pf-chart-axis);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.pf-chart__tick {
  fill: var(--pf-chart-text);
  font-size: 12px;
  font-variant-numeric: tabular-nums;   /* ticks align vertically — the one place tabular belongs */
}
.pf-chart__label {
  fill: var(--pf-chart-text);
  font-size: 12px;
}

/* --- Marks: the data is the only loud thing --- */
.pf-chart__line {
  fill: none;
  stroke: var(--pf-chart-series);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.pf-chart__line--context {
  stroke: var(--pf-chart-context);
}
.pf-chart__area {
  fill: var(--pf-chart-area, var(--pf-chart-series));            /* v0.9.84: the study hue when set, else ink */
  fill-opacity: var(--pf-chart-area-opacity, 0.1);
  stroke: none;
}
.pf-chart__marker {
  fill: var(--pf-chart-series);
  stroke: var(--pf-surface);              /* the 2px surface ring */
  stroke-width: 2;
}
.pf-chart__marker--context {
  fill: var(--pf-chart-context);
}
.pf-chart__bar {
  fill: var(--pf-chart-series);
  stroke: none;
}
.pf-chart__bar--context {
  fill: var(--pf-chart-context);
}

/* Direct value label — ink, semibold, sparing (endpoint / extreme only). */
.pf-chart__value {
  fill: var(--pf-ink);
  font-size: 13px;
  font-weight: var(--pf-weight-strong);
}

/* Annotation: a thin pink hairline (a launch date, a threshold) + its label in
   secondary ink. The only pink on a chart, and only ever a stroke (R5). */
.pf-chart__annot {
  fill: none;
  stroke: var(--pf-chart-annot);
  stroke-width: 1;
  shape-rendering: crispEdges;
}
.pf-chart__annot-label {
  fill: var(--pf-chart-text);
  font-size: 12px;
}

/* --- Table twin: a native <details> so every value is readable without the
   picture. The summary is a quiet link-like control: ink, hairline underline,
   pink underline on hover (the DS link behaviour), the global focus ring. --- */
.pf-chart__data {
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-small);
  color: var(--pf-ink);
}
.pf-chart__data > summary {
  display: list-item;                      /* keep the native disclosure marker */
  cursor: pointer;
  width: max-content;
  max-width: 100%;
  color: var(--pf-ink);
  text-decoration: underline;
  text-decoration-color: var(--pf-hairline-strong);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--pf-dur) var(--pf-ease);
}
.pf-chart__data > summary:hover {
  text-decoration-color: var(--pf-accent);
}
.pf-chart__data > summary:focus-visible {
  text-decoration-color: var(--pf-accent);  /* + the global outline ring (R7) */
}
.pf-chart__data > summary:active {
  text-decoration-thickness: var(--pf-border-strong);
}
/* (A native <summary> has no disabled state — R11 state completeness n/a.) */

.pf-chart__table {
  width: 100%;
  margin-top: var(--pf-space-2);
  border-collapse: collapse;
}
.pf-chart__table th,
.pf-chart__table td {
  padding: var(--pf-space-1) var(--pf-space-2);
  text-align: left;
  border-bottom: var(--pf-border) solid var(--pf-hairline);
  font-weight: var(--pf-weight-body);
}
.pf-chart__table th {
  color: var(--pf-ink-secondary);
  font-size: var(--pf-text-small);
  text-transform: uppercase;
  letter-spacing: var(--pf-tracking-caps);
}
.pf-chart__table td.pf-chart__num,
.pf-chart__table th.pf-chart__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .pf-chart__data > summary {
    transition: none;
  }
}