/* Time Bomb HQ - charts (site/ui/charts.js). Colours are the theme's tokens from styles.css:
   gold for the business's own numbers, blue for other sellers' (comparable boards). */

/* ---------- sparkline ----------
   (Named "sparkline", not "spark": styles.css has a .spark already - the glowing 7px dot
   beside the brand name - and a chart drawn with that class shrank to the dot.) */
.sparkline{display:inline-block;vertical-align:middle;overflow:visible;flex:none}
.sparkline-path{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sparkline-area{stroke:none;opacity:.14}
.sparkline--gold .sparkline-path{stroke:var(--gold-2)} .sparkline--gold .sparkline-area,.sparkline--gold .sparkline-dot{fill:var(--gold-2)}
.sparkline--blue .sparkline-path{stroke:var(--blue-2)} .sparkline--blue .sparkline-area,.sparkline--blue .sparkline-dot{fill:var(--blue-2)}
.sparkline--muted .sparkline-path{stroke:var(--muted)} .sparkline--muted .sparkline-area,.sparkline--muted .sparkline-dot{fill:var(--muted)}
.sparkline--none line{stroke:var(--line-strong);stroke-width:1.4;stroke-dasharray:3 4;stroke-linecap:round}

/* ---------- bar chart + scatter plot ---------- */
.chart{display:block;width:100%;height:auto;max-width:980px;font-family:var(--font)}
.chart-grid{stroke:var(--line);stroke-width:1}
.chart-grid--faint{stroke:rgba(30,45,87,.5)}
.chart-grid--zero{stroke:var(--line-strong)}
.chart-tick{fill:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}
.chart-axis-label{fill:var(--faint);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.chart-label{fill:var(--text);font-size:12.5px;font-weight:600}
.chart-value{fill:var(--gold-2);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.chart-bar{transition:opacity var(--t)}
.chart-bar--gold{fill:var(--gold)}
.chart-bar--blue{fill:var(--blue)}
.chart-bar--ok{fill:var(--ok)}
.chart-bar--danger{fill:var(--danger)}
.chart-row:hover .chart-bar{opacity:.82}
/* too few shows behind a bar to lean on it: hatched, grey, and its words say so */
.chart-row.is-muted .chart-label{fill:var(--faint);font-weight:500}
.chart-row.is-muted .chart-value{fill:var(--faint);font-weight:500;font-style:italic}
.hatch-bg{fill:rgba(148,164,201,.10)}
.hatch-line{stroke:rgba(148,164,201,.45);stroke-width:2}

.chart-dots circle{stroke-width:1.5;transition:r var(--t-fast)}
.chart-dots--blue circle{fill:rgba(63,127,224,.42);stroke:var(--blue-2)}
.chart-dots--gold circle{fill:rgba(229,181,68,.85);stroke:var(--gold-2)}
.chart-dots--ok circle{fill:rgba(119,217,174,.6);stroke:var(--ok)}
.chart-dots--danger circle{fill:rgba(255,138,138,.6);stroke:var(--danger)}
.chart-dots circle:hover{stroke-width:2.5}

.chart-legend{display:flex;gap:var(--s-5);flex-wrap:wrap;list-style:none;margin:var(--s-3) 0 0;padding:0;font-size:var(--fs-xs);color:var(--muted)}
.chart-legend li{display:inline-flex;align-items:center;gap:var(--s-2)}
.chart-key{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--gold-2);background:rgba(229,181,68,.85)}
.chart-key--blue{border-color:var(--blue-2);background:rgba(63,127,224,.42)}
.chart-key--ok{border-color:var(--ok);background:rgba(119,217,174,.6)}
.chart-key--danger{border-color:var(--danger);background:rgba(255,138,138,.6)}
.chart-key--muted{border-color:rgba(148,164,201,.6);background:rgba(148,164,201,.15);border-radius:3px}

/* a chart that has nothing to draw yet: says why, in the chart's own space */
.chart-empty{
  display:grid;place-items:center;min-height:180px;padding:var(--s-6);text-align:center;
  border:1px dashed var(--line-strong);border-radius:var(--r-md);color:var(--muted);font-size:var(--fs-sm);
}
.chart-empty b{display:block;margin-bottom:4px;color:var(--text);font-size:var(--fs-md)}

@media (prefers-reduced-motion:reduce){.chart-bar,.chart-dots circle{transition:none}}