/* tuftecharts.css — theme tokens and chart styles for tuftecharts.js.
 *
 * Token pattern: complete light palette on bare :root; dark redefines
 * tokens only, guarded so an explicit light choice beats a dark OS;
 * an explicit dark stamp wins in the other direction. Style components
 * through tokens only. */

:root {
  --tc-ground: #fbfaf3;
  --tc-ink: #201c14;
  --tc-ink-2: #6e6552;
  --tc-accent: #a82e21;
  --tc-band: #e7e2d2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tc-ground: #1c1915;
    --tc-ink: #e9e4d4;
    --tc-ink-2: #a39a85;
    --tc-accent: #e0725c;
    --tc-band: #333026;
  }
}

:root[data-theme="dark"] {
  --tc-ground: #1c1915;
  --tc-ink: #e9e4d4;
  --tc-ink-2: #a39a85;
  --tc-accent: #e0725c;
  --tc-band: #333026;
}

.tc-chart {
  display: block;
  max-width: 100%;
  height: auto;
  color: var(--tc-ink);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.tc-chart text {
  fill: currentColor;
  font-size: 12px;
}

.tc-endpoint-label { fill: var(--tc-accent); font-size: 12px; }
.tc-tick-label, .tc-cat-label { fill: var(--tc-ink-2); }
.tc-col-head { fill: var(--tc-ink-2); letter-spacing: 0.08em; }
.tc-slope-label { font-size: 12px; }
.tc-uncertainty-band {
  fill: var(--tc-band);
  fill-opacity: 0.72;
}
.tc-uncertainty-boundary {
  stroke: var(--tc-ink-2);
  vector-effect: non-scaling-stroke;
}
.tc-uncertainty-label { fill: var(--tc-ink-2); }

@media (forced-colors: active) {
  .tc-uncertainty-band { fill: Canvas; fill-opacity: 0.35; }
  .tc-uncertainty-boundary { stroke: CanvasText; }
}

/* the white grid is the ground color cutting through the bars */
.tc-white-grid { stroke: var(--tc-ground); }

.tc-sparkline { vertical-align: middle; }
.tc-spark-band { fill: var(--tc-band); }
.tc-spark-end { fill: var(--tc-accent); }

.tc-multiples {
  display: grid;
  grid-template-columns: repeat(var(--tc-columns, 4), minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  color: var(--tc-ink);
  background: transparent;
}

.tc-multiple-title {
  font-size: 11px;
  color: var(--tc-ink-2);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
}

.tc-disclosure {
  grid-column: 1 / -1;
  font-size: 12px;
  font-style: italic;
  color: var(--tc-accent);
}

/* Amount/change/distribution family forms. Theme tokens only. */
.tc-dot-guide { stroke: var(--tc-band); stroke-width: 1.4; }
.tc-reference { stroke: var(--tc-accent); stroke-width: 1.2; }
.tc-reference-label { fill: var(--tc-accent); font-size: 11px; }
.tc-interval-span, .tc-interval-bound,
.tc-interval-estimate { vector-effect: non-scaling-stroke; }
.tc-zero-rule { stroke: var(--tc-ink); stroke-width: 0.9; }
.tc-bullet-band { fill: var(--tc-ink-2); }
.tc-bullet-target { stroke: var(--tc-accent); stroke-width: 2.4; }
.tc-waterfall-anchor { fill: var(--tc-ink); }
.tc-waterfall-rise { fill: var(--tc-ink-2); }
.tc-waterfall-fall { fill: var(--tc-accent); fill-opacity: 0.85; }
.tc-waterfall-link { stroke: var(--tc-ink-2); stroke-width: 0.7; stroke-dasharray: 2 2; }
.tc-index-line, .tc-bump-line { fill: none; }
.tc-strip-point { fill: var(--tc-ink); fill-opacity: 0.78; }
.tc-strip-median { stroke: var(--tc-accent); stroke-width: 1.6; }
.tc-ecdf-line { fill: none; vector-effect: non-scaling-stroke; }
.tc-ecdf-leader { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tc-axis { stroke: var(--tc-ink-2); stroke-width: 0.8; }
.tc-axis-label { fill: var(--tc-ink-2); }
.tc-stem-row { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

@media (forced-colors: active) {
  .tc-bullet-target, .tc-reference,
  .tc-interval-span, .tc-interval-bound { stroke: CanvasText; }
  .tc-reference-label, .tc-direct-label { fill: CanvasText; }
  .tc-interval-estimate { fill: CanvasText; stroke: Canvas; }
  .tc-waterfall-anchor, .tc-waterfall-rise, .tc-waterfall-fall {
    fill: CanvasText;
  }
  .tc-index-line, .tc-bump-line, .tc-ecdf-line, .tc-ecdf-leader,
  .tc-strip-median, .tc-axis { stroke: CanvasText; }
  .tc-strip-point { fill: CanvasText; }
  .tc-direct-label { fill: CanvasText; }
  .tc-bump-line ~ circle { fill: CanvasText; }
}