/* ── nd-chart.css — charts people build (js/core/charts/nd-chart.js) ─────────
   Colours are the --ndc-* tokens in tokens.css (dark by default, light under
   [data-theme="light"]). Nothing here names a colour directly.
   Mark specs: 1px hairline grid, bars ≤ 24px with 4px rounded ends (drawn in
   the JS), 2px lines, 8px markers with a 2px card-coloured ring. */

.ndc {
  margin: 0;
  color: var(--ndc-ink);
  font-family: var(--face, "Sora", system-ui, -apple-system, sans-serif);
}
.ndc-plot { position: relative; }
.ndc-svg { display: block; overflow: visible; }
.ndc-svg text { font-family: var(--num, "Inter", system-ui, sans-serif); font-size: 11px; font-variant-numeric: tabular-nums; }
.ndc-tick, .ndc-xl { fill: var(--ndc-muted); }
.ndc-cat { fill: var(--ndc-ink-2); font-size: 12px; }
.ndc-val { fill: var(--ndc-ink); font-weight: 600; }
.ndc-gl { stroke: var(--ndc-grid); stroke-width: 1; shape-rendering: crispEdges; }
.ndc-ax { stroke: var(--ndc-axis); stroke-width: 1; shape-rendering: crispEdges; }

.ndc-bar { transition: opacity .15s ease; }
.ndc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ndc-dot { stroke: var(--ndc-surface); stroke-width: 2; transition: opacity .15s ease; }
.ndc-cross { stroke: var(--ndc-axis); stroke-width: 1; opacity: 0; shape-rendering: crispEdges; pointer-events: none; }
.ndc-cross.on { opacity: 1; }
.ndc-hit { fill: transparent; cursor: default; outline: none; }
.ndc-hit:focus-visible { stroke: var(--ndc-1); stroke-width: 2; }
.ndc-svg.dim .ndc-bar:not(.hi) { opacity: .4; }
.ndc-svg.dim .ndc-seg:not(.hi) { opacity: .35; }
.ndc-dot.hi { r: 5; }

/* Bars rise from the baseline, left to right, capped at 12 steps so a year of
   months is readable in well under a second. */
@media (prefers-reduced-motion: no-preference) {
  .ndc[data-type="bar"] .ndc-bar,
  .ndc[data-type="stacked"] .ndc-bar,
  .ndc[data-type="hbar"] .ndc-bar {
    animation: ndc-rise .42s cubic-bezier(.16, 1, .3, 1) backwards;
    animation-delay: calc(var(--i, 0) * 22ms);
    transform-box: fill-box;
    transform-origin: 50% 100%;
  }
  .ndc[data-type="hbar"] .ndc-bar { transform-origin: 0 50%; animation-name: ndc-grow; }
  .ndc[data-type="line"] .ndc-line { animation: ndc-fade .35s ease backwards; }
}
@keyframes ndc-rise { from { transform: scaleY(0); } }
@keyframes ndc-grow { from { transform: scaleX(0); } }
@keyframes ndc-fade { from { opacity: 0; } }

/* ── Legend ───────────────────────────────────────────────────────────── */
.ndc-lgd { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.ndc-lgd-i { display: inline-flex; align-items: center; gap: var(--sp-1_5); font-size: 12px; color: var(--ndc-ink-2); }
.ndc-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ndc-sw-line { height: 2px; width: 14px; border-radius: 1px; }

/* ── Donut ────────────────────────────────────────────────────────────── */
.ndc-donut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.ndc-donut-ring { position: relative; width: 168px; height: 168px; flex: none; }
.ndc-track { stroke: var(--ndc-grid); }
.ndc-seg { transition: opacity .15s ease; }
.ndc-donut-c {
  position: absolute; inset: var(--sp-0); display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none; text-align: center;
}
.ndc-donut-v { font-family: var(--num, "Inter", system-ui, sans-serif); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.ndc-donut-c span { font-size: 11px; color: var(--ndc-muted); }
.ndc-dl { display: grid; gap: var(--sp-0_5); flex: 1 1 220px; min-width: 0; }
.ndc-dl-i {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1_5) var(--sp-2); border: 0; border-radius: 6px; background: none;
  color: var(--ndc-ink); font: inherit; font-size: 12.5px; text-align: left; cursor: default;
}
.ndc-dl-i:hover, .ndc-dl-i.hi, .ndc-dl-i:focus-visible { background: var(--ndc-grid); outline: none; }
.ndc-dl-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndc-dl-v { font-family: var(--num, "Inter", system-ui, sans-serif); font-weight: 600; font-variant-numeric: tabular-nums; }
.ndc-dl-p { font-family: var(--num, "Inter", system-ui, sans-serif); color: var(--ndc-muted); font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: right; }

/* ── One number ───────────────────────────────────────────────────────── */
.ndc-kpi { padding: var(--sp-4) var(--sp-0); }
.ndc-kpi-v { font-family: var(--num, "Inter", system-ui, sans-serif); font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }

/* ── Empty ────────────────────────────────────────────────────────────── */
.ndc-empty {
  display: grid; place-items: center; min-height: 180px; padding: var(--sp-6);
  border: 1px dashed var(--ndc-axis); border-radius: 8px;
  color: var(--ndc-muted); font-size: 13px; text-align: center;
}
.ndc-note { margin: var(--sp-2) var(--sp-0) var(--sp-0); font-size: 11.5px; color: var(--ndc-muted); }

/* ── Table: visually hidden unless chosen, always there for screen readers ── */
.ndc-tablewrap:not(.on) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.ndc-table.on { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ndc-table caption { text-align: left; font-weight: 600; padding-bottom: var(--sp-2); }
.ndc-table.on caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ndc-table th, .ndc-table td { padding: var(--sp-1_5) var(--sp-2); border-bottom: 1px solid var(--ndc-grid); text-align: left; font-weight: 400; }
.ndc-table thead th { color: var(--ndc-muted); font-weight: 500; font-size: 11.5px; }
.ndc-table .num { text-align: right; font-family: var(--num, "Inter", system-ui, sans-serif); font-variant-numeric: tabular-nums; }
.ndc-table tfoot th, .ndc-table tfoot td { font-weight: 600; border-bottom: 0; }

/* ── Tooltip (on <body>) ──────────────────────────────────────────────── */
.ndc-tip {
  position: fixed; z-index: 1000; pointer-events: none; opacity: 0;
  min-width: 140px; max-width: 280px; padding: var(--sp-2) var(--sp-2_5);
  border: 1px solid var(--ndc-tip-edge); border-radius: 8px; background: var(--ndc-tip-bg);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .35);
  color: var(--ndc-ink); font-family: var(--face, "Sora", system-ui, sans-serif);
  transform: translate(0, -100%); transition: opacity .12s ease;
}
.ndc-tip.on { opacity: 1; }
.ndc-tip-h { margin-bottom: var(--sp-1); font-size: 11.5px; color: var(--ndc-muted); }
.ndc-tip-r { display: flex; align-items: center; gap: var(--sp-2); white-space: nowrap; font-size: 12px; line-height: 1.6; }
.ndc-tip-v { font-family: var(--num, "Inter", system-ui, sans-serif); font-weight: 600; font-variant-numeric: tabular-nums; }
.ndc-tip-n { color: var(--ndc-ink-2); overflow: hidden; text-overflow: ellipsis; }
.ndc-key { width: 12px; height: 2px; border-radius: 1px; flex: none; }