/* WciChart (INTEL-417 Charts & graphs, INTEL-362 reflow instead of scale).
   ip-b2b 2c36820 (pulled 2026-10-01):
     pages/analytics-report.css 1452-1460  .atx-svg, .atx-grid, .atx-axis, .atx-tick, .atx-tick--x,
                                           .atx-alabel, .atx-dot-lbl (the chart type every figure reads back)
     pages/analytics-report.css 1506       .atx-gauge-num (the donut well's number)
     pages/analytics-report.css 395-404    .att-legend, .att-legend-dots, .att-dot
     pages/analytics-report.css 418-421    the legend's narrow stack (there @container dash 560px)

   GLOBAL, not scoped: wci-chart.js writes the figure's DOM (Plotly's, or the donut's SVG) and reads these
   classes back off a probe it appends, neither of which a scoped sheet can reach.

   Class names are the design's own (REGISTRY rule 1). The text sizes are px in the browser now, not
   viewBox units: a figure is drawn at its measured width, so 11px is 11px at every size (INTEL-362). */

/* ── ported: pages/analytics-report.css 1452-1460 ─────────────────────── */
.atx-svg { display: block; width: 100%; height: auto; overflow: visible; }
.atx-grid { stroke: color-mix(in srgb, var(--border) 65%, transparent); stroke-width: 1; }
.atx-axis { stroke: var(--border); stroke-width: 1.25; }
.atx-tick { fill: var(--text-muted); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.atx-tick--x { font-size: 10.5px; }
.atx-alabel { fill: var(--text-subtle); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.atx-dot-lbl { fill: var(--text); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── ported: pages/analytics-report.css 1506 ──────────────────────────── */
.atx-gauge-num { fill: var(--text); font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── ported: pages/analytics-report.css 1506-1515 (the KPI dials), 1557-1567 (the donut strip),
   1582-1583 (the ring well); ip-b2b 626714d, pulled 2026-10-09. The tiles' width is set by wci-chart.js
   for the width it measures, so the design's flex basis and max-width are carried as the script's
   180 to 240px (dials) and 140 to 180px (meters) rather than here. ── */
.atx-gauges { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.atx-gauge { display: flex; flex-direction: column; align-items: center; }
.atx-gauge-track { fill: none; stroke: color-mix(in srgb, var(--border) 70%, var(--surface)); stroke-width: 14; stroke-linecap: round; }
html.dark .atx-gauge-track { stroke: rgba(255, 255, 255, 0.09); }
.atx-gauge-val { fill: none; stroke-width: 14; stroke-linecap: round; }
.atx-gauge-notch { stroke: var(--text); stroke-width: 2.5; opacity: .55; }
.atx-gauge-label { margin-top: 2px; font-size: 13px; font-weight: 800; color: var(--text); text-align: center; }
.atx-gauge-target { font-size: 11.5px; color: var(--text-subtle); font-weight: 600; }
.atx-donuts { display: flex; flex-wrap: wrap; justify-content: center; padding: 8px 0 4px; }
.atx-donut { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.atx-donut-lab { font-size: 13px; font-weight: 800; color: var(--text); text-align: center; }
.atx-donut-sub { font-size: 11.5px; color: var(--text-subtle); font-weight: 600; }

/* ── ported: pages/analytics-report.css 395-404, 418-421 ──────────────── */
.att-legend {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  margin-top: 18px; font-size: 12px; color: var(--text-subtle);
}
.att-legend-dots {
  grid-column: 2; display: flex; gap: 18px; flex-wrap: wrap;
  justify-content: center;
}
.att-legend-dots > span { display: flex; align-items: center; gap: 6px; }
.att-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
@container wci-chart (max-width: 560px) {
  .att-legend { grid-template-columns: 1fr; justify-items: start; gap: 12px; }
  .att-legend-dots { grid-column: 1; justify-content: flex-start; gap: 10px 14px; }
}

/* ===================== APP-OWNED ADDITIONS ===================== */

/* The query container the legend's narrow stack is keyed to: the chart's own width, never the window
   (the design keys it to its report column, .dash; a chat card has no such column). */
.wci-chart { container: wci-chart / inline-size; min-width: 0; }

/* The stage the script draws into. It reserves the figure's height as soon as the first frame lands,
   so a sweep never reshapes the card. */
.wci-chart-stage { position: relative; width: 100%; min-width: 0; cursor: pointer; }
/* The export (and its script-free saved HTML) draws each chart once: nothing to replay. */
[data-wci-charts="static"] .wci-chart-stage { cursor: default; }

/* The donut is drawn at min(width, 260px) and sits centred over its legend. */
.wci-chart--donut .wci-chart-stage { display: flex; justify-content: center; }
.wci-chart-donut { width: auto; max-width: 100%; }
.wci-chart-donut path { transition: opacity .15s ease; }
.wci-chart-donut path:hover { opacity: .86; }

/* A dial or meter tile is drawn at its measured width; the label under it may wrap, never the drawing. */
.wci-chart-tile { display: block; overflow: visible; }
.atx-gauge-label, .atx-donut-lab { max-width: 100%; overflow-wrap: anywhere; }

/* The rings and the polar chart are square and stop at the design's size (340px, 440px), centred in a wider
   stage, as the donut is. */
.wci-chart--rings .wci-chart-stage,
.wci-chart--polar .wci-chart-stage,
.wci-chart--radar .wci-chart-stage { display: flex; justify-content: center; }
.wci-chart-rings { width: auto; max-width: 100%; }
.wci-chart-rings path, .wci-chart-tile path { transition: opacity .15s ease; }
.wci-chart-rings path:hover, .wci-chart-tile path:hover { opacity: .86; }

/* A legend name that would run past the chart breaks with an ellipsis; the full name is the title. */
.wci-chart-legend .att-legend-dots > span { min-width: 0; max-width: 100%; }
.wci-chart-legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wci-chart-legend { margin-top: 12px; }

/* Plotly's hover card: the design's popover look (the radius and shadow Plotly cannot be told). */
.wci-chart .hoverlayer .hovertext path { filter: drop-shadow(0 4px 10px rgba(16, 24, 40, .12)); }

/* The probe wci-chart.js reads the chart type from; never seen. */
.wci-chart-probe { position: absolute; left: -9999px; top: 0; width: 10px; height: 10px; visibility: hidden; pointer-events: none; }

/* A printed chart is its final frame: no pointer. */
@media print {
  .wci-chart-stage { cursor: default; }
  /* One chart graphic is atomic on paper (assets/chart-and-report-design.md, Print / PDF: "protect atomic
     pieces (one chart graphic, a legend ...) with break-inside: avoid"). A page break through a drawn
     figure printed the Where to Focus scatter's top half on one page and its axis on the next. Only a chart
     that fits on a page (wci-chart.js sets the class, 960px or less): headless Chromium drops whatever
     overflows an unbreakable block taller than its page, so a long ranked list or a tall matrix must break. */
  .wci-chart--keep { break-inside: avoid; page-break-inside: avoid; }
}