/*
 * Navorina data visualization — DS canon (design-system: Chart, Gauge, Meter, Sparkline, Donut).
 * Plot is clean: no dotted or tinted background, no grid, no crosshair, no edge fades.
 * Page CSS keeps only layout of the card head and the colour of its own series.
 */

body.dash-page {
  --nv-chart-blue: var(--dash-chart-blue);
  --nv-chart-violet: var(--dash-chart-violet);
  --nv-chart-green: var(--dash-chart-green);
  --nv-chart-orange: var(--dash-chart-orange);
  --nv-chart-red: var(--dash-chart-red);
  --nv-chart-teal: var(--dash-chart-teal);
  --nv-chart-neutral: color-mix(in srgb, var(--dash-text) 42%, transparent);
  --nv-chart-track: var(--color-well-hover);
}

body.dash-page .nv-chart { --nv-chart-inset: 20px; }
body.dash-page .nv-chart.nv-chart--padded { --nv-chart-inset: 0px; }

/* ── Chart ── */

body.dash-page .nv-chart__title {
  margin: 0;
  color: var(--dash-text);
  font-size: var(--nv-type-title-3-size);
  font-weight: var(--nv-type-title-3-weight);
  letter-spacing: var(--nv-type-title-3-tracking);
  line-height: var(--nv-type-title-3-line);
}

body.dash-page .nv-chart__sub {
  margin: 4px 0 0;
  color: var(--dash-text-subtle);
  font-size: var(--nv-type-footnote-size);
  letter-spacing: var(--nv-type-footnote-tracking);
  line-height: var(--nv-type-footnote-line);
}

body.dash-page .nv-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 12px var(--nv-chart-inset, 20px) 0;
  list-style: none;
}

body.dash-page .nv-chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--dash-text-muted);
  font-size: var(--nv-type-footnote-size);
  letter-spacing: var(--nv-type-footnote-tracking);
  line-height: var(--nv-type-footnote-line);
}

body.dash-page :is(.nv-chart-legend__dot, .nv-chart-tooltip__swatch) {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
}

body.dash-page :is(.nv-chart-legend__dot, .nv-chart-tooltip__swatch):is(.nv-chart-legend__dot--blue, .nv-chart-tooltip__swatch--blue) { background: var(--nv-chart-blue); }
body.dash-page :is(.nv-chart-legend__dot, .nv-chart-tooltip__swatch):is(.nv-chart-legend__dot--violet, .nv-chart-tooltip__swatch--violet) { background: var(--nv-chart-violet); }
body.dash-page :is(.nv-chart-legend__dot, .nv-chart-tooltip__swatch):is(.nv-chart-legend__dot--green, .nv-chart-tooltip__swatch--green) { background: var(--nv-chart-green); }
body.dash-page :is(.nv-chart-legend__dot, .nv-chart-tooltip__swatch):is(.nv-chart-legend__dot--orange, .nv-chart-tooltip__swatch--orange) { background: var(--nv-chart-orange); }
body.dash-page :is(.nv-chart-legend__dot, .nv-chart-tooltip__swatch):is(.nv-chart-legend__dot--red, .nv-chart-tooltip__swatch--red) { background: var(--nv-chart-red); }
body.dash-page :is(.nv-chart-legend__dot, .nv-chart-tooltip__swatch):is(.nv-chart-legend__dot--neutral, .nv-chart-tooltip__swatch--neutral) { background: var(--nv-chart-neutral); }

body.dash-page :is(.nv-chart__body, .dash-ix-chart-wrap) {
  position: relative;
  height: 224px;
  margin: 12px var(--nv-chart-inset, 20px) 0;
  padding: 0;
  border-radius: 12px;
  background: none;
  overflow: visible;
}

body.dash-page :is(.nv-chart__body, .dash-ix-chart-wrap)::before,
body.dash-page :is(.nv-chart__body, .dash-ix-chart-wrap)::after {
  content: none;
}

body.dash-page .dash-ix-chart__plot {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  outline: none;
}

body.dash-page .dash-ix-chart__plot:focus-visible {
  box-shadow: 0 0 0 2px var(--dash-focus-ring, color-mix(in srgb, var(--dash-text) 40%, transparent));
}

body.dash-page .dash-ix-chart__svg {
  overflow: visible;
}

body.dash-page .dash-ix-chart__line {
  vector-effect: non-scaling-stroke;
}

body.dash-page :is(.dash-ix-chart__grid, .dash-ix-chart__crosshair) {
  display: none;
}

body.dash-page .nv-chart-tooltip {
  position: absolute;
  min-width: 164px;
  padding: 12px 14px;
  border: none;
  border-radius: 14px;
  background: var(--dash-tooltip-bg);
  box-shadow: var(--dash-tooltip-shadow);
  color: var(--dash-text);
  font-size: var(--nv-type-footnote-size);
  letter-spacing: var(--nv-type-footnote-tracking);
  pointer-events: none;
}

body.dash-page .nv-chart-tooltip__date {
  margin: 0 0 8px;
  color: var(--dash-text);
  font-size: var(--nv-type-footnote-size);
  letter-spacing: var(--nv-type-footnote-tracking);
  font-weight: var(--nv-type-weight-semibold);
}

body.dash-page .nv-chart-tooltip__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0;
  font-size: var(--nv-type-footnote-size);
  letter-spacing: var(--nv-type-footnote-tracking);
}

body.dash-page .nv-chart-tooltip__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--dash-text-muted);
}

body.dash-page .nv-chart-tooltip__val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

body.dash-page .nv-chart-tooltip__change {
  margin: 8px 0 0;
  color: var(--dash-text-subtle);
  font-size: var(--nv-type-footnote-size);
  letter-spacing: var(--nv-type-footnote-tracking);
}

body.dash-page .nv-chart__axis-labels {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px var(--nv-chart-inset, 20px) 18px;
  color: var(--dash-text-subtle);
  font-size: var(--nv-type-caption-size);
  letter-spacing: var(--nv-type-caption-tracking);
  font-variant-numeric: tabular-nums;
  line-height: var(--nv-type-caption-line);
}

body.dash-page .nv-chart__axis-labels--bands {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  padding-inline: calc(var(--nv-chart-inset, 20px) + 12px);
  text-align: center;
}

@media (max-width: 640px) {
  body.dash-page .nv-chart:not(.nv-chart--padded) { --nv-chart-inset: 12px; }
  body.dash-page :is(.nv-chart__body, .dash-ix-chart-wrap) { height: 180px; }
}

/* ── Gauge ── */

body.dash-page .nv-gauge {
  --nv-gauge-tone: var(--color-success);
  display: grid;
  justify-items: center;
  gap: 12px;
  min-width: 0;
}

body.dash-page .nv-gauge[data-nv-gauge-tone="watch"] { --nv-gauge-tone: var(--color-warning); }
body.dash-page .nv-gauge:is([data-nv-gauge-tone="over"], [data-nv-gauge-tone="gap"]) { --nv-gauge-tone: var(--color-error); }
body.dash-page .nv-gauge[data-nv-gauge-tone="neutral"] { --nv-gauge-tone: var(--dash-text); }
body.dash-page .nv-gauge[data-nv-gauge-tone="empty"] { --nv-gauge-tone: var(--dash-text-subtle); }

body.dash-page .nv-gauge__dial {
  position: relative;
  width: min(100%, 220px);
  aspect-ratio: 200 / 124;
}

body.dash-page .nv-gauge__host,
body.dash-page .nv-gauge__svg {
  display: block;
  width: 100%;
  height: 100%;
}

body.dash-page .nv-gauge__ticks--track { fill: var(--nv-chart-track); }
body.dash-page .nv-gauge__ticks--fill { fill: var(--nv-gauge-tone); }

body.dash-page .nv-gauge__readout {
  position: absolute;
  bottom: 6%;
  left: 50%;
  display: grid;
  justify-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}

body.dash-page .nv-gauge__value {
  color: var(--dash-text);
  font-size: 28px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

body.dash-page .nv-gauge__unit {
  margin-top: 4px;
  color: var(--dash-text-subtle);
  font-size: var(--nv-type-caption-size);
  font-weight: var(--nv-type-caption-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.dash-page .nv-gauge__copy {
  min-width: 0;
  text-align: center;
}

body.dash-page .nv-gauge__status {
  margin: 0;
  color: var(--nv-gauge-tone);
  font-size: var(--nv-type-body-size);
  letter-spacing: var(--nv-type-body-tracking);
  font-weight: var(--nv-type-weight-semibold);
  line-height: var(--nv-type-body-line);
}

body.dash-page .nv-gauge[data-nv-gauge-tone="empty"] .nv-gauge__status { color: var(--dash-text-muted); }

body.dash-page .nv-gauge__text {
  margin: 4px 0 0;
  color: var(--dash-text-subtle);
  font-size: var(--nv-type-callout-size);
  letter-spacing: var(--nv-type-callout-tracking);
  line-height: var(--nv-type-callout-line);
  text-wrap: balance;
}

/*
 * ── Meter ── fill, 4 px gap, then the rest of the track.
 * Size and colours sit in a zero-specificity scope so page tones still apply;
 * the segment mechanics win over page track rules.
 * --nv-meter-value is set by js/command-palette.js from the fill width.
 */

:where(body.dash-page) .nv-meter {
  --nv-meter-tone: var(--nv-chart-blue);
  width: 100%;
  height: 8px;
  border-radius: 999px;
}

:where(body.dash-page) .nv-meter--compact { height: 6px; }

body.dash-page .nv-meter {
  position: relative;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

body.dash-page .nv-meter::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--nv-meter-value, 0%) + var(--nv-meter-gap, 4px));
  inset-inline-end: 0;
  border-radius: inherit;
  background: var(--nv-chart-track);
  pointer-events: none;
}

:where(body.dash-page) :is(.nv-meter--success, .nv-meter__fill--success) { --nv-meter-tone: var(--color-success); }
:where(body.dash-page) :is(.nv-meter--warning, .nv-meter__fill--warning) { --nv-meter-tone: var(--color-warning); }
:where(body.dash-page) :is(.nv-meter--error, .nv-meter__fill--error) { --nv-meter-tone: var(--color-error); }

:where(body.dash-page) .nv-meter__fill {
  display: block;
  max-width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--nv-meter-tone);
}

body.dash-page .nv-meter__fill {
  position: relative;
  z-index: 1;
}

/* ── Sparkline ── */

:where(body.dash-page) .nv-spark {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body.dash-page .nv-spark__line {
  fill: none;
  stroke: var(--nv-chart-neutral);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

body.dash-page .nv-spark__line--blue { stroke: var(--nv-chart-blue); }
body.dash-page .nv-spark__line--violet { stroke: var(--nv-chart-violet); }
body.dash-page .nv-spark__line--green { stroke: var(--nv-chart-green); }
body.dash-page .nv-spark__line--orange { stroke: var(--nv-chart-orange); }
body.dash-page .nv-spark__line--red { stroke: var(--nv-chart-red); }
body.dash-page .nv-spark__line--neutral { stroke: var(--nv-chart-neutral); }

@media (prefers-reduced-motion: reduce) {
  body.dash-page :is(.dash-ix-chart__bar, .dash-ix-chart__dot, .nv-chart-tooltip) { transition: none; }
}

/* Chart skeleton: while a plot has not drawn yet it shows a calm placeholder
   of three grid lines and one soft wave, so the island never reads as broken.
   It disappears on its own as soon as the renderer fills the plot. */
body.dash-page :is(.dash-ix-chart__plot, .nv-chart__plot, .nv-o-chart__plot):not(:has(*)) {
  position: relative;
  min-block-size: 180px;
  border-radius: 12px;
  background:
    linear-gradient(to bottom, transparent calc(25% - 0.5px), var(--nv-table-bone, var(--color-well)) calc(25% - 0.5px), var(--nv-table-bone, var(--color-well)) calc(25% + 0.5px), transparent calc(25% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--nv-table-bone, var(--color-well)) calc(50% - 0.5px), var(--nv-table-bone, var(--color-well)) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(75% - 0.5px), var(--nv-table-bone, var(--color-well)) calc(75% - 0.5px), var(--nv-table-bone, var(--color-well)) calc(75% + 0.5px), transparent calc(75% + 0.5px));
}

body.dash-page :is(.dash-ix-chart__plot, .nv-chart__plot, .nv-o-chart__plot):not(:has(*))::after {
  content: "";
  position: absolute;
  inset: 12% 0 8%;
  background: var(--nv-table-bone, var(--color-well));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 82 C60 76 90 60 140 58 S230 40 280 30 S360 14 400 8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 82 C60 76 90 60 140 58 S230 40 280 30 S360 14 400 8' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: nv-chart-skeleton-pulse 1.4s ease-in-out infinite alternate;
}

@keyframes nv-chart-skeleton-pulse {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

/* Gauge skeleton: until the renderer fills the dial host, the whole track of
   21 ticks pulses in bone and the readout and copy keep their line boxes as
   pills, so the island never shows a bare number over an empty dial. */
body.dash-page .nv-gauge__host:empty {
  background: var(--nv-table-bone, var(--color-well));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 8 200 124'%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-108.00 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-97.20 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-86.40 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-75.60 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-64.80 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-54.00 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-43.20 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-32.40 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-21.60 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-10.80 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(0.00 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(10.80 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(21.60 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(32.40 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(43.20 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(54.00 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(64.80 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(75.60 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(86.40 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(97.20 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(108.00 100 100)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 8 200 124'%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-108.00 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-97.20 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-86.40 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-75.60 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-64.80 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-54.00 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-43.20 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-32.40 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-21.60 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(-10.80 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(0.00 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(10.80 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(21.60 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(32.40 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(43.20 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(54.00 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(64.80 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(75.60 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(86.40 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(97.20 100 100)'/%3E%3Crect x='98' y='14' width='4' height='18' rx='2' transform='rotate(108.00 100 100)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: nv-chart-skeleton-pulse 1.4s ease-in-out infinite alternate;
}

body.dash-page .nv-gauge:has(.nv-gauge__host:empty) :is(.nv-gauge__value, .nv-gauge__unit, .nv-gauge__status) {
  color: transparent !important;
  border-radius: 999px;
  background: var(--nv-table-bone, var(--color-well));
  animation: nv-chart-skeleton-pulse 1.2s ease-in-out infinite alternate;
}

body.dash-page .nv-gauge:has(.nv-gauge__host:empty) .nv-gauge__text {
  color: transparent !important;
  border-radius: 6px;
  background: repeating-linear-gradient(to bottom, transparent 0 4px, var(--nv-table-bone, var(--color-well)) 4px 14px, transparent 14px 1.4em);
  animation: nv-chart-skeleton-pulse 1.2s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  body.dash-page .nv-gauge__host:empty,
  body.dash-page .nv-gauge:has(.nv-gauge__host:empty) :is(.nv-gauge__value, .nv-gauge__unit, .nv-gauge__status, .nv-gauge__text) { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.dash-page :is(.dash-ix-chart__plot, .nv-chart__plot, .nv-o-chart__plot):not(:has(*))::after { animation: none; opacity: 0.7; }
}