/* ============================================================
   Vandelay Companies — KPI cards + Sparkline
   Active only inside .vc-design-context.
   ============================================================ */

/* ── KPI card ────────────────────────────────────────────── */
.vc-design-context .vc-kpi {
  background: var(--vc-surface);
  border: 1px solid var(--vc-rule);
  border-radius: var(--vc-r-lg);
  padding: var(--vc-space-5);
  font-family: var(--vc-sans);
  display: flex;
  flex-direction: column;
  gap: var(--vc-space-2);
  position: relative;
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.vc-design-context .vc-kpi--hover {
  cursor: pointer;
}
.vc-design-context .vc-kpi--hover:hover {
  border-color: var(--vc-rule-strong);
  box-shadow: var(--vc-shadow-md);
}

.vc-design-context .vc-kpi__label {
  font-family: var(--vc-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vc-ink-3);
  margin: 0;
}

.vc-design-context .vc-kpi__value {
  font-family: var(--vc-sans);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--vc-ink);
  margin: 0;
}

.vc-design-context .vc-kpi__delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--vc-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--vc-ink-3);
}
.vc-design-context .vc-kpi__delta--up    { color: var(--vc-positive); }
.vc-design-context .vc-kpi__delta--down  { color: var(--vc-negative); }
.vc-design-context .vc-kpi__delta--flat  { color: var(--vc-ink-3); }

.vc-design-context .vc-kpi__foot {
  font-size: 12px;
  color: var(--vc-ink-3);
  margin: 0;
}

.vc-design-context .vc-kpi__sparkline {
  margin-top: var(--vc-space-2);
}

/* Tone modifiers (left accent for status) */
.vc-design-context .vc-kpi--positive { border-left: 3px solid var(--vc-positive); }
.vc-design-context .vc-kpi--warning  { border-left: 3px solid var(--vc-warning);  }
.vc-design-context .vc-kpi--negative { border-left: 3px solid var(--vc-negative); }
.vc-design-context .vc-kpi--neutral  { border-left: 3px solid var(--vc-ink-4);    }

/* ── Sparkline (pure CSS bars) ───────────────────────────── */
.vc-design-context .vc-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
  width: 100%;
}

.vc-design-context .vc-sparkline__bar {
  flex: 1;
  background: var(--vc-navy-soft);
  border-radius: 1px;
  min-height: 1px;
  transition: background-color 0.12s ease;
}
.vc-design-context .vc-sparkline__bar--peak {
  background: var(--vc-navy);
}

/* Variant: line-style faux sparkline using a single SVG path inside */
.vc-design-context .vc-sparkline svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.vc-design-context .vc-sparkline svg path {
  fill: none;
  stroke: var(--vc-navy);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}