/* DARIY charts — shared dataviz chrome (pairs with /charts.js).
 * Consumes the canonical tokens (site.css vocabulary); numbers in --mono. */

.dv-fig { min-width: 0; }
.dv-fig-head { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; }
.dv-fig-titles { min-width: 0; }
.dv-fig-title { font-family: var(--mono); font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); }
.dv-fig-sub { font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.dv-fig-tools { margin-left: auto; flex: 0 0 auto; display: flex; gap: 8px; }
.dv-tbl-toggle { background: transparent; border: 1px solid var(--line2); color: var(--faint);
  border-radius: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  padding: 3px 8px; cursor: pointer; }
.dv-tbl-toggle:hover { color: var(--text); border-color: var(--accent); }
.dv-tbl-toggle.on { color: var(--accent); border-color: var(--accent); }

.dv-fig-body { overflow-x: auto; }
.dv-svg { width: 100%; height: auto; display: block; min-width: 480px; }
.dv-svg:focus-visible, .dv-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* chart furniture — recessive, solid hairlines */
.dv-gridline { stroke: var(--line); stroke-width: 1; }
.dv-axis { stroke: var(--line2); stroke-width: 1; }
.dv-crosshair { stroke: var(--line2); stroke-width: 1; }
.dv-tick { fill: var(--muted); font-family: var(--mono); font-size: 10.5px;
  font-variant-numeric: tabular-nums; }
.dv-cat { fill: var(--text); font-family: var(--ui, "Inter", sans-serif); font-size: 12px; }
/* text wears text tokens, never the series color */
.dv-dlabel { fill: var(--text); font-family: var(--mono); font-size: 11px; font-weight: 600; }

.dv-bar, .dv-cell { transition: filter .12s ease; }
.dv-bar.lift, .dv-cell:hover { filter: brightness(1.22); }
.dv-hit { cursor: default; }

/* legend — always present for ≥2 series */
.dv-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -6px 0 12px; }
.dv-legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); }
.dv-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.dv-legend-line { width: 14px; height: 3px; border-radius: 2px; flex: 0 0 auto; }

/* tooltip — enhances, never gates; values lead, labels follow */
.dv-tip { position: fixed; display: none; z-index: 200; pointer-events: none;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px;
  padding: 9px 12px; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.45); max-width: 280px; }
.dv-tip-title { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin-bottom: 6px; }
.dv-tip-row { display: flex; align-items: center; gap: 8px; padding: 1.5px 0; }
.dv-tip-key { width: 12px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.dv-tip-val { font-family: var(--mono); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.dv-tip-name { color: var(--muted); }

/* table view — the WCAG-clean twin of every chart */
.dv-tblwrap { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.dv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dv-table th { position: sticky; top: 0; background: var(--panel2); text-align: left;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 600; padding: 8px 10px; }
.dv-table th + th, .dv-table td + td { text-align: right; }
.dv-table td { padding: 7px 10px; border-top: 1px solid var(--line); color: var(--text); }
.dv-table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* stat tile — label · value · delta · sparkline */
.dv-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.dv-stat-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.dv-stat-value { font-family: var(--mono); font-size: 28px; font-weight: 700; color: var(--ink); line-height: 1.1; margin-top: 8px; }
.dv-stat-value small { font-size: 15px; color: var(--faint); font-weight: 600; }
.dv-stat-value.live::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); margin-left: 8px; vertical-align: 6px; animation: dvpulse 2.2s ease-in-out infinite; }
@keyframes dvpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.dv-stat-delta { font-family: var(--mono); font-size: 11px; margin-top: 7px; }
.dv-stat-delta.good { color: var(--ok); }
.dv-stat-delta.bad { color: var(--live); }
.dv-spark { display: block; margin-top: 10px; width: 100%; max-width: 150px; height: auto; }

/* meter — ratio against a limit; unfilled track is a step of the same ground */
.dv-meter { min-width: 0; }
.dv-meter-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.dv-meter-label { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.dv-meter-val { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.dv-meter-track { height: 8px; border-radius: 5px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; }
.dv-meter-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width .25s ease; }

@media (prefers-reduced-motion: reduce) {
  .dv-stat-value.live::after { animation: none; }
  .dv-bar, .dv-cell, .dv-meter-fill { transition: none; }
}
@media (max-width: 860px) {
  .dv-svg { min-width: 520px; }
}