/*!
 * roadaro-stats.css — Roadaro shared stats / visualization kit (v1)
 * Pairs with roadaro-stats.js. No build step, no framework, no CDN.
 *
 * TOKENS
 *   Everything is expressed through --rs-* custom properties so a page can
 *   retheme the kit without touching this file. Surface/ink/border tokens
 *   CONSUME the page's own Roadaro tokens (--w / --bg / --border / --t / --t2 /
 *   --t3 / --navy / --gold) and only fall back to the validated defaults when a
 *   page does not define them — so a kit card always matches the cards beside it.
 *
 * PALETTE (validated in light AND dark — do not invent colours)
 *   CATEGORICAL (series identity, fixed order, never cycled, never recoloured
 *   by rank):  1 #1f8fb0 · 2 #7a5af0 · 3 #c2701a · 4 #3f7fd6 · 5 #b0468c.
 *   A 6th+ series folds into "Other" (--rs-cat-other, a muted ink) — the kit
 *   never generates a hue.
 *   STATUS is RESERVED and never reused as a series colour:
 *   good #1a7a40 · warning #c8901a · critical #dc1e28. Deltas always ship an
 *   arrow glyph + text, so they never depend on colour alone.
 *   SEQUENTIAL (magnitude only): a single teal hue ramp, light -> dark,
 *   anchored on #1f8fb0. Used by the goal-card progress fill.
 *
 * MARKS: 2px lines, 4px rounded data-ends on bars anchored to the baseline,
 * >=8px hit targets, 2px surface gap between adjacent/stacked fills, hairline
 * recessive grid + axes, text always in ink tokens (never a series colour).
 */

:root {
  /* ── categorical: series identity ─────────────────────────────────────── */
  --rs-cat-1: #1f8fb0;
  --rs-cat-2: #7a5af0;
  --rs-cat-3: #c2701a;
  --rs-cat-4: #3f7fd6;
  --rs-cat-5: #b0468c;
  --rs-cat-other: #7b8794;

  /* ── status: reserved, never a series colour ──────────────────────────── */
  --rs-good: #1a7a40;
  --rs-warn: #c8901a;
  --rs-crit: #dc1e28;

  /* ── sequential: magnitude, single teal hue light -> dark ─────────────── */
  --rs-seq-1: #e3f1f6;
  --rs-seq-2: #b3dbe7;
  --rs-seq-3: #6dbcd0;
  --rs-seq-4: #1f8fb0;
  --rs-seq-5: #135f76;

  /* ── surfaces + ink: prefer the host page's tokens ────────────────────── */
  --rs-surface: var(--w, #ffffff);
  --rs-page: var(--bg, #f3f4f8);
  --rs-border: var(--border, #dce0ea);
  --rs-ink: var(--t, #1a1a2e);
  --rs-ink-2: var(--t2, #556);
  --rs-ink-3: var(--t3, #8892a8);
  --rs-accent: var(--navy, #00394d);
  --rs-gold: var(--gold, #c8901a);

  /* ── recessive chrome ─────────────────────────────────────────────────── */
  --rs-grid: rgba(13, 39, 48, .09);
  --rs-axis: rgba(13, 39, 48, .18);
  --rs-tile-shadow: 0 1px 2px rgba(13, 39, 48, .04);
  --rs-tile-shadow-hover: 0 16px 32px -14px rgba(13, 39, 48, .22);
  --rs-chip-bg: rgba(13, 39, 48, .05);

  /* ── type ─────────────────────────────────────────────────────────────── */
  --rs-num: var(--serif, 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --rs-sans: var(--sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

  /* ── shape ────────────────────────────────────────────────────────────── */
  --rs-r-lg: 22px;
  --rs-r-md: 18px;
  --rs-r-sm: 12px;
}

[data-theme="dark"] {
  --rs-surface: var(--w, #1c2128);
  --rs-page: var(--bg, #0d1117);
  --rs-border: var(--border, #283039);
  --rs-ink: var(--t, #e7eef3);
  --rs-ink-2: var(--t2, #8b97a3);
  --rs-ink-3: var(--t3, #67727d);
  --rs-grid: rgba(231, 238, 243, .10);
  --rs-axis: rgba(231, 238, 243, .20);
  --rs-tile-shadow: none;
  --rs-tile-shadow-hover: 0 16px 32px -16px rgba(0, 0, 0, .7);
  --rs-chip-bg: rgba(231, 238, 243, .07);
  /* the validated dark categorical set is the same hue family, lifted slightly
     so a 2px line still clears a #0d1117..#1c2128 surface */
  --rs-cat-1: #35a9c9;
  --rs-cat-2: #9b82f5;
  --rs-cat-3: #d68f34;
  --rs-cat-4: #6098e0;
  --rs-cat-5: #c96aa6;
  --rs-cat-other: #8d99a6;
  --rs-good: #35a86a;
  --rs-warn: #dca62f;
  --rs-crit: #ef4f57;
  --rs-seq-1: #123945;
  --rs-seq-2: #17576b;
  --rs-seq-3: #1f8fb0;
  --rs-seq-4: #58bcd6;
  --rs-seq-5: #a8dfec;
}

/* ═══ shared bits ════════════════════════════════════════════════════════ */
.rs-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ═══ staggered reveal (TimelineAnimation feel) ══════════════════════════
   Gated on html.rs-js — a page that fails to load the JS never hides content. */
html.rs-js [data-rs-reveal] {
  opacity: 0;
  transform: translateY(14px);
  will-change: opacity, transform;
}
html.rs-js [data-rs-reveal].rs-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s cubic-bezier(.2, .7, .3, 1), transform .5s cubic-bezier(.2, .7, .3, 1);
}

/* ═══ KPI row ════════════════════════════════════════════════════════════ */
.rs-kpis {
  display: grid;
  grid-template-columns: repeat(var(--rs-cols, 4), minmax(0, 1fr));
  gap: 12px;
}
.rs-kpi {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-md);
  padding: 15px 16px 14px;
  color: inherit;
  text-decoration: none;
  box-shadow: var(--rs-tile-shadow);
  transition: transform .16s cubic-bezier(.2, .7, .3, 1), box-shadow .2s, border-color .16s;
}
a.rs-kpi:hover,
a.rs-kpi:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--rs-tile-shadow-hover);
  border-color: var(--rs-ink-3);
}
.rs-kpi:focus-visible { outline: 2px solid var(--rs-cat-1); outline-offset: 2px; }
/* status rail: never the only carrier of meaning — the chip/sub always says it in words */
.rs-kpi-rail {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rs-ink-3);
}
.rs-kpi-rail[data-status="good"] { background: var(--rs-good); }
.rs-kpi-rail[data-status="warning"] { background: var(--rs-warn); }
.rs-kpi-rail[data-status="critical"] { background: var(--rs-crit); }
.rs-kpi-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.rs-kpi-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--rs-ink-3); line-height: 1.3;
}
.rs-kpi-icon { color: var(--rs-ink-3); opacity: .65; font-size: 13px; line-height: 1; flex: none; }
.rs-kpi-value {
  font-family: var(--rs-num);
  font-size: 29px; font-weight: 700; line-height: 1;
  letter-spacing: -.025em;
  color: var(--rs-ink);
  font-variant-numeric: tabular-nums;
}
.rs-kpi-unit { font-size: 13px; font-weight: 600; color: var(--rs-ink-3); margin-left: 4px; letter-spacing: 0; }
.rs-kpi-sub { margin-top: 7px; font-size: 10px; font-weight: 600; color: var(--rs-ink-3); line-height: 1.4; }
.rs-kpi-spark { margin-top: 9px; height: 26px; }

/* delta chip — arrow glyph + text, colour is a reinforcement only */
.rs-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 7px; border-radius: 999px;
  background: var(--rs-chip-bg);
  font-size: 9.5px; font-weight: 800; letter-spacing: .01em;
  color: var(--rs-ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rs-chip[data-tone="good"] { color: var(--rs-good); }
.rs-chip[data-tone="bad"] { color: var(--rs-crit); }
.rs-chip-arrow { font-size: 8px; line-height: 1; }

/* ═══ goal card (the dark "primary goal" card among light cards) ═════════ */
.rs-goal {
  position: relative; overflow: hidden;
  border-radius: var(--rs-r-lg);
  padding: 22px 24px 20px;
  color: #eaf6f8;
  background: linear-gradient(135deg, #04262f 0%, #063a48 46%, #0a5364 100%);
  box-shadow: 0 22px 50px -18px rgba(3, 30, 40, .5), inset 0 1px 0 rgba(255, 255, 255, .07);
}
[data-theme="dark"] .rs-goal {
  background: linear-gradient(135deg, #06222b 0%, #062d38 50%, #08404e 100%);
  box-shadow: none;
  border: 1px solid var(--rs-border);
}
.rs-goal::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--rs-cat-1), var(--rs-gold));
  opacity: .9;
}
.rs-goal-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--rs-num);
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: #86d6df; margin-bottom: 10px;
}
.rs-goal-eyebrow::before {
  content: ""; width: 11px; height: 11px; border-radius: 3px;
  background: linear-gradient(135deg, #c8901a, #e6a417);
  box-shadow: 0 0 10px rgba(200, 144, 26, .6);
}
.rs-goal-title { font-family: var(--rs-num); font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 14px; }
.rs-goal-value {
  font-family: var(--rs-num); font-size: 34px; font-weight: 700; line-height: 1;
  letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums;
}
.rs-goal-target { font-size: 13px; font-weight: 600; color: #a9cfd6; margin-left: 7px; letter-spacing: 0; }
.rs-goal-track {
  margin-top: 15px; height: 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); overflow: hidden;
}
/* progress is driven by transform:scaleX (compositor-only) rather than width, so a
   long goal list never thrashes layout when several cards fill at once */
.rs-goal-fill {
  height: 100%; width: 100%; border-radius: 999px;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--rs-seq-3), var(--rs-seq-4));
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}
.rs-goal-foot {
  margin-top: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 10.5px; font-weight: 600; color: #a9cfd6;
}
.rs-goal-pct { font-family: var(--rs-num); font-size: 12px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* ═══ charts ═════════════════════════════════════════════════════════════ */
.rs-chart { margin: 0; display: block; }
.rs-chart-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.rs-chart-title {
  font-family: var(--rs-num); font-size: 12px; font-weight: 600;
  color: var(--rs-ink); letter-spacing: .01em;
}
.rs-chart-note { font-size: 9.5px; font-weight: 600; color: var(--rs-ink-3); margin-top: 3px; line-height: 1.4; }
.rs-btn {
  flex: none;
  font-family: var(--rs-sans);
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--rs-ink-2);
  background: var(--rs-page);
  border: 1px solid var(--rs-border);
  border-radius: 8px;
  padding: 5px 9px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rs-btn:hover { color: var(--rs-ink); border-color: var(--rs-ink-3); }
.rs-btn:focus-visible { outline: 2px solid var(--rs-cat-1); outline-offset: 2px; }

.rs-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; }
.rs-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--rs-ink-2); }
.rs-swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }

.rs-plot { position: relative; }
.rs-plot:focus-visible { outline: 2px solid var(--rs-cat-1); outline-offset: 3px; border-radius: 6px; }
.rs-plot svg { display: block; overflow: visible; }
.rs-axis-text { font-family: var(--rs-sans); font-size: 9px; font-weight: 600; fill: var(--rs-ink-3); }
.rs-series-label { font-family: var(--rs-sans); font-size: 9.5px; font-weight: 700; fill: var(--rs-ink-2); }
.rs-gridline { stroke: var(--rs-grid); stroke-width: 1; shape-rendering: crispEdges; }
.rs-baseline { stroke: var(--rs-axis); stroke-width: 1; shape-rendering: crispEdges; }
.rs-crosshair { stroke: var(--rs-axis); stroke-width: 1; stroke-dasharray: 3 3; }

.rs-tip {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 108px; max-width: 230px;
  background: var(--rs-surface);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-r-sm);
  box-shadow: 0 14px 34px -12px rgba(13, 39, 48, .32);
  padding: 8px 10px;
  font-family: var(--rs-sans); font-size: 10.5px; color: var(--rs-ink);
}
.rs-tip-x { font-weight: 700; color: var(--rs-ink); margin-bottom: 5px; font-size: 10px; }
.rs-tip-row { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.rs-tip-name { color: var(--rs-ink-2); font-weight: 600; }
.rs-tip-val { margin-left: auto; font-family: var(--rs-num); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rs-ink); }
.rs-tip-total { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--rs-border); }

.rs-table-wrap { overflow-x: auto; max-height: 260px; overflow-y: auto; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.rs-table caption { text-align: left; font-size: 9.5px; font-weight: 700; color: var(--rs-ink-3); padding-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; }
.rs-table th, .rs-table td { padding: 5px 8px; border-bottom: 1px solid var(--rs-border); text-align: right; white-space: nowrap; }
.rs-table th:first-child, .rs-table td:first-child { text-align: left; }
.rs-table thead th { position: sticky; top: 0; background: var(--rs-surface); color: var(--rs-ink-3); font-weight: 700; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
.rs-table td { color: var(--rs-ink); font-variant-numeric: tabular-nums; }

/* ═══ sparkline ══════════════════════════════════════════════════════════ */
.rs-spark { display: block; }

/* ═══ loading / empty / error ════════════════════════════════════════════ */
.rs-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
  min-height: 96px; padding: 18px 14px;
  border: 1px dashed var(--rs-border);
  border-radius: var(--rs-r-sm);
  color: var(--rs-ink-3);
}
.rs-state-title { font-size: 11px; font-weight: 700; color: var(--rs-ink-2); }
.rs-state-msg { font-size: 10px; line-height: 1.45; max-width: 34em; }
.rs-state[data-kind="error"] { border-color: var(--rs-crit); color: var(--rs-crit); }
.rs-state[data-kind="error"] .rs-state-title { color: var(--rs-crit); }
.rs-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--rs-border); border-top-color: var(--rs-cat-1);
  animation: rs-spin .8s linear infinite;
}
@keyframes rs-spin { to { transform: rotate(360deg); } }

/* ═══ responsive ═════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .rs-kpis { grid-template-columns: repeat(min(var(--rs-cols, 4), 3), minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rs-kpis { grid-template-columns: repeat(min(var(--rs-cols, 4), 2), minmax(0, 1fr)); }
  .rs-kpi-value { font-size: 25px; }
}
@media (max-width: 420px) {
  .rs-kpis { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ print — never let an un-revealed card print blank ══════════════════ */
@media print {
  html.rs-js [data-rs-reveal] { opacity: 1 !important; transform: none !important; }
  .rs-btn, .rs-tip { display: none !important; }
}

/* ═══ reduced motion — no reveal, no transitions ═════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html.rs-js [data-rs-reveal] { opacity: 1 !important; transform: none !important; }
  html.rs-js [data-rs-reveal].rs-in { transition: none !important; }
  .rs-kpi, a.rs-kpi:hover, a.rs-kpi:focus-visible { transition: none !important; transform: none !important; }
  .rs-goal-fill { transition: none !important; }
  .rs-btn { transition: none !important; }
  .rs-spinner { animation: none !important; }
}