/* ===== T8 charts ===== */
/* All color values reference tokens.css variables only.
   Zero hardcoded hex or rgb values anywhere in this file. */

/* ----------------------------------------------------------------
   #charts container: vertical stack with section rhythm
   ---------------------------------------------------------------- */

#charts {
  display: flex;
  flex-direction: column;
  gap: var(--d-gap-tiles);
}

/* ----------------------------------------------------------------
   .chart: individual chart card
   Matches .tile surface/border/radius style for visual consistency.
   ---------------------------------------------------------------- */

.chart {
  background: rgb(var(--c-surface));
  border: var(--border-w) solid rgb(var(--c-border));
  border-radius: var(--radius);
  padding: var(--d-card-y) var(--d-content);
  overflow: hidden;
}

/* SVG fills its container; viewBox handles the aspect ratio */
.chart svg {
  display: block;
  width: 100%;
  height: auto;
}

/* "no data" fallback: quiet mono line */
.chart-no-data {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgb(var(--c-faint));
  margin: 0;
  padding: var(--d-card-y) 0;
}

/* ----------------------------------------------------------------
   SVG text classes -- font-family + fill via CSS custom properties,
   applied to SVG elements via class="..." attribute.
   ---------------------------------------------------------------- */

/* Chart titles: serif, ink-weight */
.chart-title {
  font-family: var(--font-serif);
  font-weight: 600;
  fill: rgb(var(--c-fg));
}

/* Axis labels (x and y tick values): mono, muted */
.chart-axis-label {
  font-family: var(--font-mono);
  fill: rgb(var(--c-muted));
}

/* Small auxiliary notes (clip note, total count): mono, faint */
.chart-note {
  font-family: var(--font-mono);
  fill: rgb(var(--c-faint));
}

/* Category row labels: serif, ink */
.chart-cat-label {
  font-family: var(--font-serif);
  fill: rgb(var(--c-fg));
}

/* Count readouts right of bars: mono, muted */
.chart-count {
  font-family: var(--font-mono);
  fill: rgb(var(--c-muted));
}

/* Availability legend text: mono, muted */
.chart-legend-label {
  font-family: var(--font-mono);
  fill: rgb(var(--c-muted));
}

/* ----------------------------------------------------------------
   SVG shape classes -- fill and stroke via token variables.
   ---------------------------------------------------------------- */

/* Histogram bars: solid slate fill, no stroke. A scaled 1px stroke renders
   unevenly at the SVG's ~1.7x zoom (fractional device-px edges); fill-only
   removes the failure mode and reads as an ink mass, not an outlined box. */
.chart-hist-bar {
  fill: rgb(var(--c-accent) / 0.65);
}

/* Baseline and axis lines: border color, no fill */
.chart-baseline {
  stroke: rgb(var(--c-border));
  stroke-width: 1px;
  shape-rendering: crispEdges;
  fill: none;
}

/* Faint guide lines and row separators */
.chart-tick {
  stroke: rgb(var(--c-faint));
  stroke-width: 1px;
  stroke-dasharray: 2 3;
  opacity: 0.45;
  fill: none;
}

/* Category horizontal bars: solid slate fill, no stroke (see hist bars). */
.chart-cat-bar {
  fill: rgb(var(--c-accent) / 0.55);
}

/* ----------------------------------------------------------------
   Availability segment fills -- semantic status tokens ONLY.
   Rule 5: these colors carry status meaning, never used decoratively.
   ---------------------------------------------------------------- */

.chart-seg--ok    { fill: rgb(var(--c-ok));    }   /* in_stock    */
.chart-seg--muted { fill: rgb(var(--c-muted)); }   /* out_of_stock */
.chart-seg--warn  { fill: rgb(var(--c-warn));  }   /* preorder    */
.chart-seg--faint { fill: rgb(var(--c-faint)); }   /* unknown     */

/* Legend dot fills (circle elements) -- match segment colors */
.chart-legend-dot--ok    { fill: rgb(var(--c-ok));    }
.chart-legend-dot--muted { fill: rgb(var(--c-muted)); }
.chart-legend-dot--warn  { fill: rgb(var(--c-warn));  }
.chart-legend-dot--faint { fill: rgb(var(--c-faint)); }

/* ----------------------------------------------------------------
   Responsive: charts scale via SVG viewBox automatically.
   At 390px the card padding is reduced for tighter fit.
   ---------------------------------------------------------------- */

@media (max-width: 899px) {
  .chart {
    padding: var(--d-card-y) 16px;
  }
}

@media (max-width: 479px) {
  .chart {
    padding: 12px 12px;
  }
}