/* =========================================================
   THE ROUND ROBIN — Dataviz Layer: Chart Tokens & Chrome
   Adds to (never replaces) colors_and_type.css.
   Full spec: CHART_STYLE.md
   Hex is hardcoded here on purpose — preview/*.html cards are
   self-contained and don't load colors_and_type.css.
   ========================================================= */

:root {
  /* Sequential — NON-SEED magnitude only (calibration density, generic
     heatmaps). Anything seed-related uses the 16-step --seed-* ramp in
     colors_and_type.css. See CHART_STYLE.md §3. */
  --dv-seq-1: #12335c;
  --dv-seq-2: #1c4270;
  --dv-seq-3: #2d5a91;
  --dv-seq-4: #4677b3;
  --dv-seq-5: #6c9ad0;
  --dv-seq-6: #9fc0e6;

  /* Categorical roles inside a chart */
  --dv-primary: #E8872B;     /* the model's own signal / featured subject (= --color-amber) */
  --dv-primary-alt: #FF7704; /* axis chrome + second featured series (= --color-orange) */
  --dv-comparison: #5C7A9E;  /* the other side of a comparison — neutral, not "bad" */
  --dv-grid: #14345c;
  --dv-grid-strong: #1a3a63;

  /* Chrome */
  --dv-title-color: #A9BED4;
  --dv-caption-color: #7C99B7;

  /* Motion */
  --dv-draw-duration: 0.6s; /* @kind other */
  --dv-bar-duration: 0.5s; /* @kind other */
  --dv-bar-stagger: 40ms; /* @kind other */
}

.trr-chart { position: relative; }

/* ── Header: category eyebrow → claim → caveat ──────────────
   The eyebrow keeps the card-label spec (Antonio 600 + amber tick).
   The CLAIM is the chart's argument, not its name. */
.trr-chart-eyebrow {
  font-family: 'Antonio', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--dv-title-color);
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
}
.trr-chart-eyebrow::before {
  content: '';
  width: 16px;
  height: 2px;
  background: #E8872B;
  flex-shrink: 0;
}
.trr-chart-claim {
  font-family: 'Antonio', sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: #F0F4F8;
  max-width: 640px;
  margin-bottom: 5px;
  text-wrap: pretty;
}
.trr-chart-caveat {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--dv-caption-color);
  max-width: 600px;
  margin-bottom: 13px;
  text-wrap: pretty;
}
.trr-chart-scope {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--dv-caption-color);
  border: 1px solid var(--dv-grid);
  border-radius: 3px;
  padding: 2px 7px;
  display: inline-block;
  margin: 0 0 13px;
}
/* A record-bearing chart with no scope is a policy violation — flagged, loudly. */
.trr-chart-scope-missing {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: #F0F4F8;
  background: rgba(139, 68, 68, 0.35);
  border: 1px solid #8B4444;
  border-radius: 3px;
  padding: 2px 7px;
  display: inline-block;
  margin: 0 0 13px;
}

/* ── Plot host ── */
.trr-chart-svg {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.trr-chart-svg svg { display: block; scroll-snap-align: start; outline: none; }
.trr-chart-svg svg:focus-visible { box-shadow: 0 0 0 1px #E8872B; }
.trr-chart-svg::-webkit-scrollbar { height: 4px; }
.trr-chart-svg::-webkit-scrollbar-thumb { background: var(--dv-grid-strong); border-radius: 2px; }

/* ── Tooltip (hover + tap, ≥44px targets on touch) ── */
.trr-tip {
  position: fixed;
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  background: #0A2444;
  border: 1px solid var(--dv-grid-strong);
  border-left: 2px solid #E8872B;
  border-radius: 4px;
  padding: 8px 11px;
  min-width: 116px;
}
.trr-tip[data-open="1"] { opacity: 1; }
.trr-tip-h {
  font-family: 'Antonio', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #F0F4F8;
  margin-bottom: 5px;
}
.trr-tip-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  color: #A9BED4;
  line-height: 1.7;
}
.trr-tip-row b { font-family: 'IBM Plex Mono', monospace; font-weight: 500; color: #F0F4F8; }
.trr-tip-note {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: #7C99B7;
  margin-top: 5px;
}

/* ── Data-table fallback (screen readers + anyone who wants numbers) ── */
.trr-data-toggle {
  font-family: 'Antonio', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A9BED4;
  background: #0A2444;
  border: 1px solid #14365F;
  border-radius: 6px;
  padding: 6px 13px;
  margin-top: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.trr-data-toggle:hover { border-color: #E8872B; color: #F0F4F8; }
.trr-data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  background: #061E3A;
  border: 1px solid var(--dv-grid);
  border-radius: 8px;
}
.trr-data-table th {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #7C99B7;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--dv-grid);
}
.trr-data-table td {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: #A9BED4;
  padding: 7px 12px;
  border-bottom: 1px solid var(--dv-grid);
}
.trr-data-table td:first-child { font-family: 'IBM Plex Sans', sans-serif; color: #F0F4F8; }
.trr-data-table tr:last-child td { border-bottom: none; }

/* ── Uncertainty legend chips (four kinds — see CHART_STYLE.md §4) ── */
.trr-u-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 11px;
}
.trr-u-key div {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10.5px;
  color: #7C99B7;
}
.trr-u-key i { width: 18px; height: 11px; flex-shrink: 0; display: block; }

/* ── Micro charts (table cells) ── */
.trr-micro { display: inline-block; vertical-align: middle; line-height: 0; }

.trr-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .trr-chart-svg *, .trr-tip { transition: none !important; animation: none !important; }
}