/* =========================================================
   dash-charts.css: data display. The SVG charts (LineChart, BarChart, HBarChart, Sparkline),
   Funnel, CohortTable, JsonViewer and CodeBlock. Series colours are --c1..--c8 (tokens.css):
   a chart names its series by number (.s1 …), or by the datum (.hue-N, .element-N, .rarity-N).
   ========================================================= */

.chart{position:relative;width:100%;min-width:0;}
.chart svg{display:block;width:100%;height:auto;overflow:visible;}
.chart .grid-line{stroke:var(--line-soft);stroke-width:1;shape-rendering:crispEdges;}
.chart .axis-line{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges;}
.chart .tick-label{fill:var(--muted);font-family:var(--font-mono);font-size:10px;}
.chart .val-label{fill:var(--ink-2);font-family:var(--font-mono);font-size:10px;}
.chart .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.chart .area{opacity:0.1;}
.chart .pt{stroke:var(--surface);stroke-width:1.5;}
.chart .hit{fill:transparent;}
.chart .hit:hover{fill:var(--ink);fill-opacity:0.05;}
.chart .bar{shape-rendering:crispEdges;transition:opacity var(--t-fast);}
.chart .bar:hover{opacity:0.8;}
.chart .dim{opacity:0.35;}
.chart-legend{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--ink-2);}
.chart-legend span{display:inline-flex;align-items:center;gap:6px;}
.chart-legend i{display:inline-block;width:12px;height:4px;border-radius:2px;background:currentColor;}
.chart-empty{display:grid;place-items:center;min-height:120px;color:var(--muted);font-size:var(--fs-sm);border:1px dashed var(--line);border-radius:var(--r-md);}

/* Series: stroke for lines, fill for bars and dots; the same class colours the legend key. */
.s1{--s:var(--c1);} .s2{--s:var(--c2);} .s3{--s:var(--c3);} .s4{--s:var(--c4);}
.s5{--s:var(--c5);} .s6{--s:var(--c6);} .s7{--s:var(--c7);} .s8{--s:var(--c8);}
.chart .line{stroke:var(--s,var(--c1));}
.chart .area,.chart .bar,.chart .pt{fill:var(--s,var(--c1));}
.chart .bar.hue-0,.chart .bar.hue-1,.chart .bar.hue-2,.chart .bar.hue-3,.chart .bar.hue-4,.chart .bar.hue-5,.chart .bar.hue-6,.chart .bar.hue-7,.chart .bar.hue-8,.chart .bar.hue-9,
.chart .bar.element-0,.chart .bar.element-1,.chart .bar.element-2,
.chart .bar.rarity-0,.chart .bar.rarity-1,.chart .bar.rarity-2,.chart .bar.rarity-3,.chart .bar.rarity-4,.chart .bar.rarity-5,.chart .bar.rarity-6,.chart .bar.rarity-7,.chart .bar.rarity-8{fill:var(--chip);}
.chart-legend .s1,.chart-legend .s2,.chart-legend .s3,.chart-legend .s4,.chart-legend .s5,.chart-legend .s6,.chart-legend .s7,.chart-legend .s8{color:var(--ink-2);}
.chart-legend span i{background:var(--s,var(--c1));}

/* Horizontal bars (HBarChart): label, bar, value in rows; plain HTML so labels wrap. */
.hbars{display:flex;flex-direction:column;gap:6px;}
.hbar{display:grid;grid-template-columns:minmax(90px,38%) minmax(0,1fr) auto;gap:var(--sp-2);align-items:center;font-size:var(--fs-sm);}
.hbar .hbar-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);}
.hbar .hbar-track{display:block;height:14px;border-radius:var(--r-xs);background:var(--soft);overflow:hidden;}
.hbar .hbar-fill{display:block;height:100%;border-radius:var(--r-xs);background:var(--s,var(--c1));min-width:2px;}
.hbar .hbar-fill.hue-0,.hbar .hbar-fill.hue-1,.hbar .hbar-fill.hue-2,.hbar .hbar-fill.hue-3,.hbar .hbar-fill.hue-4,.hbar .hbar-fill.hue-5,.hbar .hbar-fill.hue-6,
.hbar .hbar-fill.hue-7,.hbar .hbar-fill.hue-8,.hbar .hbar-fill.hue-9,.hbar .hbar-fill.element-0,.hbar .hbar-fill.element-1,.hbar .hbar-fill.element-2,
.hbar .hbar-fill.rarity-0,.hbar .hbar-fill.rarity-1,.hbar .hbar-fill.rarity-2,.hbar .hbar-fill.rarity-3,.hbar .hbar-fill.rarity-4,.hbar .hbar-fill.rarity-5,
.hbar .hbar-fill.rarity-6,.hbar .hbar-fill.rarity-7,.hbar .hbar-fill.rarity-8{background:var(--chip);}
.hbar .hbar-value{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink-2);white-space:nowrap;text-align:right;min-width:48px;}
.hbar .hbar-value small{color:var(--muted);margin-left:4px;}
.hbar.dim{opacity:0.45;}

/* Sparkline */
.spark{display:block;width:100%;height:28px;overflow:visible;}
.spark .line{fill:none;stroke:var(--s,var(--c1));stroke-width:1.75;stroke-linejoin:round;stroke-linecap:round;}
.spark .area{fill:var(--s,var(--c1));opacity:0.12;}
.spark .end{fill:var(--s,var(--c1));}

/* Funnel: one row per step, the bar narrowing, the share of the first step on the right. */
.funnel{display:flex;flex-direction:column;gap:5px;}
.funnel-row{display:grid;grid-template-columns:minmax(120px,34%) minmax(0,1fr) 110px;gap:var(--sp-3);align-items:center;font-size:var(--fs-sm);}
.funnel-row .funnel-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.funnel-row .funnel-label small{color:var(--muted);margin-left:4px;}
.funnel-row .funnel-track{display:block;position:relative;height:22px;}
.funnel-row .funnel-bar{display:block;height:100%;margin:0 auto;border-radius:var(--r-xs);background:var(--s,var(--c1));min-width:2px;}
.funnel-row .funnel-num{text-align:right;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--ink);white-space:nowrap;}
.funnel-row .funnel-num small{color:var(--muted);margin-left:4px;}
.funnel-row .funnel-drop{display:block;font-size:10px;color:var(--bad-ink);}
.funnel-row.dim{opacity:0.45;}

/* CohortTable: retention heat, the cell's share mixes blue into the surface. */
.cohort td.heat{text-align:right;font-family:var(--font-mono);font-size:var(--fs-xs);
  background:color-mix(in srgb,var(--blue) var(--heat,0%),var(--surface));color:var(--ink);}
.cohort td.heat.hot{color:var(--on-dark);}
.cohort td.heat.none{background:var(--surface);color:var(--muted);}
.cohort tfoot td.heat{font-weight:600;}

/* JsonViewer and CodeBlock */
.code{position:relative;margin:0;border-radius:var(--r-md);background:var(--rail-bg);color:var(--on-dark);overflow:hidden;}
.code-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:6px var(--sp-2) 6px var(--sp-3);border-bottom:1px solid var(--rail-line);
  font-family:var(--font-label);font-weight:600;font-size:var(--fs-2xs);letter-spacing:0.1em;text-transform:uppercase;color:var(--on-dark-2);}
.code pre{margin:0;padding:var(--sp-3);overflow:auto;max-height:560px;font-family:var(--font-mono);font-size:var(--fs-xs);line-height:1.6;white-space:pre;}
.code.wrap pre{white-space:pre-wrap;overflow-wrap:anywhere;}
.code .icon-btn{width:26px;height:26px;color:var(--on-dark-2);}
.code .icon-btn:hover{background:var(--rail-hover);color:var(--on-dark);}
.code.light{background:var(--page);color:var(--ink);border:1px solid var(--line);}
.code.light .code-head{border-bottom-color:var(--line);color:var(--muted);}
.json .j-key{color:var(--mm-yellow-300);}
.json .j-str{color:var(--mm-green-100);}
.json .j-num{color:var(--hue-4);}
.json .j-lit{color:var(--pink);}
.code.light .json .j-key,.code.light.json .j-key{color:var(--blue);}
.code.light .j-str{color:var(--good-ink);}
.code.light .j-num{color:var(--hue-2);}
.code.light .j-lit{color:var(--accent-ink);}