/* 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 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 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; }
}