/* OnlyData shared responsive-chart styles — pairs with /assets/responsive-chart.js.
   Import on any page with a chart:  <link rel="stylesheet" href="/assets/responsive-chart.css">

   Rule of the house: a chart may scroll sideways on a DESKTOP (min-width is a
   fine way to keep a wide table honest), but never on a phone. On a phone the
   chart re-lays into a narrow viewBox and .chart-mobile drops the min-width, so
   the wrapper has nothing to hide. scripts/check-mobile-charts.mjs fails the
   build if a wrapper still scrolls at 375/390/393px. */

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

/* Phones: the chart was re-laid, so there is nothing left to scroll past. */
.chart-scroll svg.chart-mobile { min-width: 0; }

/* Numbered-marker key. Phone-only by default: on desktop the labels sit on the
   chart itself, so the key would be duplicate furniture. */
.chart-key { display: none; }
.chart-key .ck {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; line-height: 1.5; margin: 0 12px 6px 0;
  color: var(--text-secondary, #b6b6bf);
}
.chart-key .ck-cap { display: block; font-size: 11.5px; color: var(--text-tertiary, #71717a); margin-bottom: 6px; }
.chart-key .ck i {
  font-style: normal; font-size: 10.5px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #08100d; flex: none;
}

@media (max-width: 640px) {
  /* Give the chart back the card's side padding. At 375px a 20px gutter costs
     40 of 327 available pixels, which is a ~12% cut in every glyph on the
     chart — paid for nothing a phone reader wants. */
  .viz-card { padding: 16px 8px; }
  .viz-card h4, .viz-card .viz-sub, .viz-card .viz-note,
  .viz-card .legend, .viz-card .chart-key { padding: 0 4px; }
  .chart-key { display: block; margin-top: 10px; }
}

/* ---------------------------------------------------------------- responsive
   pair: a desktop snippet and a phone re-lay of the same graph, emitted
   together by scripts/graph-snippet.mjs renderResponsive(). Exactly one is
   displayed, so the chart gate only ever measures the layout a reader gets —
   a display:none <svg> has a zero bounding box and is skipped.

   Why two layouts rather than one that scales: an SVG font-size is in viewBox
   units, so a 7.5-unit label in a 640-unit box rendered into 343px reaches the
   eye at 4.0px. There is no font size that is both legible on a phone and
   proportionate on a desktop in the SAME viewBox. */
.viz-responsive > svg { display: block; width: 100%; height: auto; }
.viz-responsive > .viz-phone { display: none; }

@media (max-width: 640px) {
  .viz-responsive > .viz-desktop { display: none; }
  .viz-responsive > .viz-phone { display: block; }
}

/* Phone edge list emitted by renderPhone(). Real HTML, so long relationship
   lines wrap at the browser's own font size instead of being clipped by a
   260-unit viewBox. Hidden on desktop, where the edges are drawn on the graph. */
.viz-phone-edges { display: none; }
@media (max-width: 640px) {
  .viz-phone-edges { display: block; margin-top: 4px; }
  .viz-phone-edges .vpe-cap {
    display: block; font-family: 'Geist Mono', monospace; font-size: 11px;
    color: var(--text-tertiary, #71717a); margin-bottom: 5px;
  }
  .viz-phone-edges ul { list-style: none; margin: 0; padding: 0; }
  .viz-phone-edges li {
    font-family: 'Geist Mono', monospace; font-size: 12px; line-height: 1.5;
    margin: 0 0 5px;
    /* Hanging indent: a relationship that wraps reads as one item rather than
       as two, which is the whole reason the edge list is HTML and not SVG. */
    padding-left: 14px; text-indent: -14px;
  }
  .viz-phone-edges li span { color: var(--text-tertiary, #71717a); }
}