/* ============================================================
   Feedwrk — data-viz & metrics layer. Token-driven; pairs with
   tokens.css + feedwrk-ui.css. Load after them.

   Charts obey the same discipline as the rest of the app:
   ONE primary series in voltage, muted slate for the rest,
   signals reserved for status, Inter + tabular numerals for
   labels. Add categorical hues ONLY when you truly have
   categories. Proposed (LEARNINGS L-053) for promotion into the
   core toolkit; lives in the handbook layer until accepted.
   ============================================================ */
:root{
  /* series palette — #1 is always voltage. Hues 2–6 borrow the (AA-checked)
     landing accents so categorical charts stay on-brand without inventing colour. */
  --chart-1:var(--voltage);   /* primary series */
  --chart-2:#1ec8ff;          /* azure   */
  --chart-3:#12b981;          /* emerald */
  --chart-4:#f5b820;          /* gold    */
  --chart-5:#8b5cf6;          /* violet  */
  --chart-6:#ff6b5e;          /* coral   */
  /* reserved series (Semrush/Intergalactic rule): Total, Other and N/A
     NEVER take a category hue — they get these neutrals. And the same
     entity keeps the same colour on every widget on the page. */
  --chart-total:var(--ink-2); /* summary/total line — neutral, can be dashed */
  --chart-other:var(--ink-4); /* "everything else" bucket */
  --chart-na:var(--ink-5);    /* missing / not applicable */
  --chart-grid:var(--rule);
  --chart-axis:var(--ink-3);  /* axis labels are small text — ink-3 grey floor (L-075) */
  --chart-track:var(--surface-sunken);
}

/* ---- stat strip: a row of metrics divided by hairlines (dashboard header) ---- */
.fw-statstrip{display:flex;flex-wrap:wrap;border:1px solid var(--rule);border-radius:var(--r-3);background:var(--surface);overflow:hidden}
.fw-statstrip .cell{flex:1;min-width:150px;padding:var(--s-5);border-right:1px solid var(--rule)}
.fw-statstrip .cell:last-child{border-right:0}
.fw-statstrip .label{font-size:12px;color:var(--ink-3)}
.fw-statstrip .val{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ink-1);margin-top:6px;font-variant-numeric:tabular-nums}
.fw-statstrip .delta{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;margin-top:4px}
.fw-statstrip .delta svg{width:12px;height:12px}
.fw-statstrip .delta.up{color:var(--signal-green)} .fw-statstrip .delta.down{color:var(--signal-red)}
.fw-statstrip .delta.flat{color:var(--ink-4)}

/* ---- sparkline (inline SVG) — scales proportionally, strokes stay crisp ---- */
.fw-spark{display:block;width:100%;height:auto;overflow:visible}
.fw-spark .line{fill:none;stroke:var(--chart-1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fw-spark .area{fill:var(--voltage-tint)}
.fw-spark .dot{fill:var(--chart-1)}

/* ---- bar chart (CSS, no dependency) ---- */
.fw-chart{border:1px solid var(--rule);border-radius:var(--r-3);background:var(--surface);padding:var(--s-5)}
.fw-chart .title{font-size:13.5px;font-weight:600;color:var(--ink-1)}
.fw-chart .sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.fw-bars{display:flex;gap:12px;margin-top:var(--s-4)}
.fw-bars .col{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.fw-bars .track{height:150px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.fw-bars .bar{width:100%;max-width:40px;border-radius:var(--r-1) var(--r-1) 0 0;background:var(--chart-1);transition:height var(--motion-slow) var(--ease-standard)}
.fw-bars .bar.is-muted{background:var(--surface-sunken)}
.fw-bars .bar.is-good{background:var(--signal-green)} .fw-bars .bar.is-warn{background:var(--signal-amber)} .fw-bars .bar.is-bad{background:var(--signal-red)}
.fw-bars .cap{font-size:11px;color:var(--ink-3);text-align:center;line-height:1.35;margin-top:8px}
.fw-bars .cap .v{display:block;color:var(--ink-1);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}

/* ---- line / area chart (inline SVG) — proportional scaling, non-scaling strokes ---- */
.fw-linechart{display:block;width:100%;height:auto;overflow:visible}
.fw-linechart .grid{stroke:var(--chart-grid);stroke-width:1;vector-effect:non-scaling-stroke}
.fw-linechart .axis{fill:var(--chart-axis);font-family:var(--font-sans);font-size:12px}
.fw-linechart .dot{fill:var(--chart-1)}
.fw-linechart .s1{fill:none;stroke:var(--chart-1);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fw-linechart .s2{fill:none;stroke:var(--ink-4);stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fw-linechart .fill1{fill:var(--voltage-tint);opacity:.55}

/* ---- donut / gauge (conic-gradient) ---- */
.fw-donut{position:relative;width:128px;height:128px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--chart-1) calc(var(--pct,72)*1%),var(--chart-track) 0)}
.fw-donut.is-good{background:conic-gradient(var(--signal-green) calc(var(--pct,72)*1%),var(--chart-track) 0)}
.fw-donut.is-warn{background:conic-gradient(var(--signal-amber) calc(var(--pct,72)*1%),var(--chart-track) 0)}
.fw-donut::before{content:"";position:absolute;inset:20px;border-radius:50%;background:var(--surface)}
.fw-donut .lbl{position:relative;font-size:24px;font-weight:700;color:var(--ink-1);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fw-donut .cap{position:relative;font-size:11px;color:var(--ink-3)}

/* ---- meter / progress-with-scale (health score) ---- */
.fw-meter{height:8px;border-radius:var(--r-pill);background:var(--chart-track);overflow:hidden}
.fw-meter span{display:block;height:100%;border-radius:var(--r-pill);background:var(--chart-1)}
.fw-meter span.is-good{background:var(--signal-green)} .fw-meter span.is-warn{background:var(--signal-amber)} .fw-meter span.is-bad{background:var(--signal-red)}

/* ---- legend ---- */
.fw-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--s-4)}
.fw-legend .it{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-3)}
.fw-legend .sw{width:10px;height:10px;border-radius:3px;flex:none}