/* ============================================================
   LeanScale Design System — CHARTS  (v2.0)
   Requires: ls-foundations.css

   Cross-cutting. Load this anywhere data is drawn — dashboards,
   decks, studies, reports. The point is that a bar chart on slide 4
   and the same measure on the dashboard are the SAME COLOR.

   THE ONE RULE
   Series colors are assigned in order, always. Series 1 is always
   --chart-1. Never hand-pick a color because it "looks better here"
   — that is how two views of the same number end up different.
   ============================================================ */

:root {
  /* ---------- Categorical series ----------
     Ordered for adjacency contrast: hue family alternates so
     neighbouring series never blur together. Use 1→n in order.
     Beyond 6 series, stop using color — switch to small multiples
     or a sorted bar chart. */
  --chart-1: #642585;   /* brand purple      — always the primary series */
  --chart-2: #6FAF3E;   /* leaf green        — the lime, made legible at size */
  --chart-3: #D9AFD0;   /* dusty rose        */
  --chart-4: #4A1A66;   /* deep aubergine    */
  --chart-5: #A861CC;   /* violet            */
  --chart-6: #B0568F;   /* magenta           */
  --chart-7: #8FBF7A;   /* soft green        */
  --chart-8: #9A8BA0;   /* muted gray-purple — reserve for "Other" */

  /* ---------- Sequential ramp ----------
     Heatmaps, choropleths, intensity. Light → dark = low → high. */
  --cell-0: #FBF8FC;
  --cell-1: #EFE2F5;
  --cell-2: #DCC2E8;
  --cell-3: #BE8ED6;
  --cell-4: #8E4AAF;
  --cell-5: #4A1A66;

  /* ---------- Diverging ramp ----------
     Variance to goal, sentiment, over/under. Green = good,
     magenta = bad. Never red/green — it fails colorblind readers
     and it isn't ours. */
  --div-neg-2: #8E2F4F;
  --div-neg-1: #C98BA6;
  --div-zero:  #EFE9F2;
  --div-pos-1: #A8CE8E;
  --div-pos-2: #4A8A2E;

  /* ---------- Chart furniture ---------- */
  --chart-grid: rgba(100, 37, 133, 0.09);
  --chart-axis: rgba(100, 37, 133, 0.20);
  --chart-track: #F0E8F4;         /* unfilled bar track */
  --chart-label: var(--m-ink-faint);
  --chart-ink: var(--m-ink);
}

/* Dark-field overrides — put .chart-on-dark on the figure. */
.chart-on-dark {
  --chart-grid: rgba(251, 248, 252, 0.10);
  --chart-axis: rgba(251, 248, 252, 0.22);
  --chart-track: rgba(251, 248, 252, 0.10);
  --chart-label: rgba(251, 248, 252, 0.55);
  --chart-ink: var(--ls-off-white);
  --chart-1: #C79BDE;   /* light-on-dark needs the ramp inverted */
  --chart-2: #C7F59B;
  --chart-3: #D9AFD0;
  --chart-4: #8E4AAF;
}

/* Series helpers — put .s1…s8 on a bar, dot, swatch or path. */
.s1 { --c: var(--chart-1); } .s2 { --c: var(--chart-2); }
.s3 { --c: var(--chart-3); } .s4 { --c: var(--chart-4); }
.s5 { --c: var(--chart-5); } .s6 { --c: var(--chart-6); }
.s7 { --c: var(--chart-7); } .s8 { --c: var(--chart-8); }
.s1,.s2,.s3,.s4,.s5,.s6,.s7,.s8 { background: var(--c); }
svg .s1, svg .s2, svg .s3, svg .s4,
svg .s5, svg .s6, svg .s7, svg .s8 { background: none; fill: var(--c); }

/* ============================================================
   FIGURE — the wrapper every chart lives in.
   ============================================================ */
.ls-fig {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 22px 24px 18px;
  box-shadow: var(--shadow-sm);
}
.ls-fig-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ls-fig-title { font-size: 15px; font-weight: var(--fw-bold); letter-spacing: -0.015em; color: var(--chart-ink); }
.ls-fig-sub { font-size: 12px; color: var(--chart-label); margin-top: 3px; line-height: 1.45; }
/* Every chart states its source. Non-negotiable on anything external. */
.ls-fig-src { margin-top: 14px; font-size: 10.5px; color: var(--chart-label); letter-spacing: 0.01em; }

/* Legend */
.ls-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; }
.ls-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--chart-label); font-weight: var(--fw-medium); }
.ls-legend i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ============================================================
   BAR — vertical. Heights set inline as a %.
   <div class="ls-bars"><div class="ls-barcol">
     <i class="ls-bar s1" style="height:72%"></i><span>Q1</span>
   </div></div>
   ============================================================ */
.ls-bars { display: flex; align-items: flex-end; gap: 12px; height: 200px; }
.ls-barcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 8px; }
.ls-barcol > i {
  display: block; width: 100%; max-width: 54px; border-radius: 7px 7px 3px 3px;
  background: var(--c, var(--chart-1)); position: relative;
  transition: filter var(--dur) var(--ease);
}
.ls-barcol:hover > i { filter: brightness(1.08); }
.ls-barcol > span { font-size: 11px; color: var(--chart-label); font-weight: var(--fw-medium); }
.ls-barcol > b { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--chart-ink); }

/* ============================================================
   BAR — horizontal. Best for ranked categories (>5 items).
   ============================================================ */
.ls-hbars { display: flex; flex-direction: column; gap: 11px; }
.ls-hbar-row { display: grid; grid-template-columns: 150px 1fr 56px; align-items: center; gap: 12px; }
.ls-hbar-label { font-size: 12.5px; color: var(--chart-ink); font-weight: var(--fw-medium); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-hbar-track { height: 22px; background: var(--chart-track); border-radius: 6px; overflow: hidden; }
.ls-hbar { display: block; height: 100%; border-radius: 6px; background: var(--c, var(--chart-1)); }
.ls-hbar-val { font-size: 12.5px; font-weight: var(--fw-bold); color: var(--chart-ink); }

/* ============================================================
   STACKED 100% — composition. Max 5 segments.
   ============================================================ */
.ls-stack { display: flex; height: 26px; border-radius: 7px; overflow: hidden; background: var(--chart-track); }
.ls-stack > i { display: block; height: 100%; background: var(--c, var(--chart-1)); transition: filter var(--dur) var(--ease); }
.ls-stack > i:hover { filter: brightness(1.1); }

/* ============================================================
   METER — one value against a target. The dashboard workhorse.
   ============================================================ */
.ls-meter { position: relative; height: 10px; background: var(--chart-track); border-radius: var(--radius-pill); overflow: visible; }
.ls-meter > i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--c, var(--chart-1)); }
/* Goal tick — set left:% inline. */
.ls-meter > u {
  position: absolute; top: -4px; width: 2px; height: 18px;
  background: var(--m-ink); border-radius: 1px; opacity: 0.55;
}
.ls-meter-pos > i { background: var(--status-positive); }
.ls-meter-warn > i { background: var(--status-warning); }
.ls-meter-crit > i { background: var(--status-critical); }

/* ============================================================
   HEATMAP — c0…c5 map to the sequential ramp.
   ============================================================ */
.ls-heat { display: grid; gap: 3px; }
.ls-heat-cell {
  aspect-ratio: 1; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--fw-semibold); color: var(--chart-ink);
  transition: transform var(--dur) var(--ease);
}
.ls-heat-cell:hover { transform: scale(1.08); }
.c0 { background: var(--cell-0); } .c1 { background: var(--cell-1); }
.c2 { background: var(--cell-2); } .c3 { background: var(--cell-3); }
.c4 { background: var(--cell-4); color: var(--ls-off-white); }
.c5 { background: var(--cell-5); color: var(--ls-off-white); }

/* ============================================================
   SPARKLINE — inline trend. Give the <path> class .ls-spark.
   ============================================================ */
.ls-spark { fill: none; stroke: var(--c, var(--chart-1)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ls-spark-area { fill: var(--c, var(--chart-1)); opacity: 0.12; stroke: none; }
.ls-spark-dot { fill: var(--c, var(--chart-1)); }

/* ============================================================
   SVG axes & gridlines
   ============================================================ */
.ls-axis { stroke: var(--chart-axis); stroke-width: 1; }
.ls-gridline { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.ls-axis-label { fill: var(--chart-label); font-size: 11px; font-family: var(--font-sans); font-weight: 500; }
.ls-datalabel { fill: var(--chart-ink); font-size: 11.5px; font-family: var(--font-sans); font-weight: 700; }
/* A dashed goal line reads as a target, never as a series. */
.ls-goal-line { stroke: var(--m-ink); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.5; }

/* ============================================================
   DELTA — the up/down chip next to a number.
   ============================================================ */
.ls-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.ls-delta-up   { color: var(--status-positive); }
.ls-delta-down { color: var(--status-warning); }
.ls-delta-flat { color: var(--chart-label); }
.ls-delta-up::before   { content: "▲"; font-size: 8px; }
.ls-delta-down::before { content: "▼"; font-size: 8px; }
.ls-delta-flat::before { content: "—"; font-size: 9px; }

/* ============================================================
   TOOLTIP
   ============================================================ */
.ls-tip {
  position: absolute; z-index: 80; pointer-events: none;
  background: var(--m-ink); color: var(--ls-off-white);
  font-size: 12px; line-height: 1.45; padding: 9px 12px;
  border-radius: var(--radius-xs); box-shadow: var(--shadow-md);
  white-space: nowrap;
}
.ls-tip b { color: var(--ls-lime); font-weight: var(--fw-bold); }

/* ============================================================
   EMPTY / LOADING
   A chart with no data says so. It never renders an empty axis.
   ============================================================ */
.ls-fig-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 160px; text-align: center;
  color: var(--chart-label); font-size: 13px;
}
.ls-fig-empty b { font-size: 14px; color: var(--fg-secondary); font-weight: var(--fw-semibold); }
@keyframes lsShimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
.ls-skeleton {
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--m-surface-2) 0%, var(--m-surface-3) 50%, var(--m-surface-2) 100%);
  background-size: 800px 100%; animation: lsShimmer 1.4s linear infinite;
}