/* Dashboard charts — the real ones, with axes, hover and drill-down.
 *
 * EVERY CLASS IS PREFIXED fhv- because the CSS-collision gate fails the build
 * on any page rule that shadows a global one, and a chart toolkit loaded into
 * a console alongside styles.css is the easiest way to collide by accident.
 *
 * TOKENS ARE THIS CONSOLE'S OWN. index.html loads styles.css, not product.css,
 * and the two use different names — the first cut of this file referenced
 * --ink/--line/--toast-bg, none of which exist here, so the tooltip rendered
 * as white-on-white. Every var() below therefore carries a literal fallback:
 * a chart that silently loses its colours is worse than one that never had
 * them, because nothing on the page says it is broken.
 *
 * THE PALETTE WAS VALIDATED, NOT CHOSEN BY EYE.
 * Three categorical slots, checked across ALL pairs (every series is on screen
 * together) for lightness band, chroma floor, colour-vision separation and
 * contrast against the chart surface — light and dark validated separately.
 *
 *   slot 1  Windows endpoints   light #3f63a8   dark #5580cc
 *   slot 2  Firewall & VPN      light #cc6410   dark #d4741f
 *   slot 3  Microsoft 365       light #c0257d   dark #d84a90
 *
 * Dark is a SELECTED set, not a lightened flip: four hues could not be
 * separated under deuteranopia inside the narrower dark lightness band, so the
 * estate's three real ingest sources get one slot each and there is
 * deliberately no fourth.
 *
 * This replaces --series-1/2/3 for chart marks, which were navy, GREY and a
 * second navy: the grey sits under the chroma floor (it reads as "no data")
 * and the two navies are indistinguishable under deuteranopia. Those tokens
 * are left alone for everything else that uses them.
 *
 * Light slot1<->slot3 lands at protan dE 7.9 — inside the 6-8 band that is
 * legal ONLY with secondary encoding, which is why every series here also
 * carries a direct label in the legend and a 2px surface gap between stacked
 * segments. Do not remove either without re-running the validator.
 *
 * Severity is NOT in this palette. P1..P4 mean good/bad, so they use the
 * reserved status tokens this console already holds at AA.
 */

:root{
  --fhv-s1:#3f63a8; --fhv-s2:#cc6410; --fhv-s3:#c0257d;
  --fhv-surface:var(--surface-1,#fff);
  --fhv-grid:var(--grid,#e7eaf3);
  --fhv-axis:#8b93a3;
  --fhv-ghost:var(--surface-3,#e8edf7);
  --fhv-tip-bg:#10161f; --fhv-tip-ink:#fff;
}
:root[data-theme="dark"]{
  --fhv-s1:#5580cc; --fhv-s2:#d4741f; --fhv-s3:#d84a90;
  --fhv-axis:#7d879b;
  --fhv-tip-bg:#050a13;
}

/* ---- series fills, by slot. Colour follows the ENTITY, never its rank, so a
       filter that drops a series never repaints the survivors. ---- */
.fhv-f1{fill:var(--fhv-s1)} .fhv-f2{fill:var(--fhv-s2)} .fhv-f3{fill:var(--fhv-s3)}
.fhv-k1{background:var(--fhv-s1)} .fhv-k2{background:var(--fhv-s2)} .fhv-k3{background:var(--fhv-s3)}
.fhv-kp1{background:var(--critical,#c62f2d)} .fhv-kp2{background:var(--serious,#b1500a)}
.fhv-kp3{background:var(--warning,#8a5a0c)} .fhv-kp4{background:var(--muted,#5c636e)}

/* ---- frame ---- */
.fhv{position:relative;width:100%}
.fhv svg{display:block;width:100%;overflow:visible}
.fhv-grid line{stroke:var(--fhv-grid);stroke-width:1}
.fhv-base{stroke:var(--fhv-axis);stroke-width:1;opacity:.5}
.fhv-tick{fill:var(--muted,#5c636e);font-size:11px;font-family:var(--font,Inter,system-ui,sans-serif)}
.fhv-tick-y{text-anchor:end}
.fhv-tick-x{text-anchor:middle}

/* Data ends are rounded and anchored to the baseline; the 2px gap between
   stacked segments is the secondary encoding the palette check requires. */
.fhv-seg{stroke:var(--fhv-surface);stroke-width:2}
.fhv-col{cursor:pointer}
.fhv-col:focus-visible{outline:none}
.fhv-hit{fill:transparent}
.fhv-col:hover .fhv-hit,.fhv-col:focus-visible .fhv-hit{fill:var(--fhv-ghost)}

/* ---- tooltip ---- */
.fhv-tip{position:absolute;z-index:40;pointer-events:none;opacity:0;transform:translate(-50%,-100%);
  background:var(--fhv-tip-bg);color:var(--fhv-tip-ink);border-radius:8px;padding:9px 11px;
  font-size:12px;line-height:1.5;min-width:132px;box-shadow:0 8px 24px rgba(10,18,35,.34);
  transition:opacity .12s ease}
.fhv-tip.on{opacity:1}
.fhv-tip-h{font-weight:600;font-size:12px;margin-bottom:5px;opacity:.82}
.fhv-tip-r{display:flex;align-items:center;gap:7px;white-space:nowrap}
.fhv-tip-k{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.fhv-tip-n{flex:1 1 auto;opacity:.84}
.fhv-tip-v{font-weight:600;font-variant-numeric:tabular-nums}
.fhv-tip-f{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.2);
  font-size:11px;opacity:.72}

/* ---- legend. Always present for >=2 series, so identity is never colour
       alone; each entry is also a filter toggle. ---- */
.fhv-leg{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fhv-leg button{display:flex;align-items:center;gap:7px;background:none;
  border:1px solid var(--border,rgba(15,23,42,.1));
  border-radius:999px;padding:5px 11px;font-size:12px;color:var(--muted,#5c636e);font-weight:500}
.fhv-leg button:hover{background:var(--surface-3,#e8edf7);color:var(--text-primary,#0d1326)}
.fhv-leg button[aria-pressed="true"]{color:var(--text-primary,#0d1326);border-color:var(--accent,#2b4a86)}
.fhv-leg .fhv-sw{width:9px;height:9px;border-radius:2px;flex:0 0 9px}
.fhv-leg .fhv-n{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-primary,#0d1326)}
.fhv-leg button[aria-pressed="false"] .fhv-sw{opacity:.3}

/* ---- horizontal breakdown ---- */
.fhv-bd{display:flex;flex-direction:column;gap:2px}
.fhv-row{display:grid;grid-template-columns:132px 1fr 46px;align-items:center;gap:11px;
  width:100%;background:none;border:none;padding:7px 8px;border-radius:8px;text-align:left}
.fhv-row:hover{background:var(--surface-3,#e8edf7)}
.fhv-row[aria-pressed="true"]{background:var(--surface-2,#f6f8fc)}
.fhv-row-l{font-size:13px;color:var(--text-primary,#0d1326);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fhv-row-t{height:9px;border-radius:5px;background:var(--surface-3,#e8edf7);overflow:hidden}
.fhv-row-f{height:100%;border-radius:5px}
.fhv-row-v{font-size:13px;font-weight:600;color:var(--text-primary,#0d1326);
  text-align:right;font-variant-numeric:tabular-nums}

/* ---- sparkline tile ---- */
/* A spark is a shape, not a plot: no axis, but it carries its own mean as a
   reference and a marker on the last point, so it reads as "where did this end
   up" rather than as texture. The old ones had neither. */
.fhv-spark{height:34px}
.fhv-spark .fhv-sl{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fhv-spark .fhv-s1l{stroke:var(--fhv-s1)}
.fhv-spark .fhv-badl{stroke:var(--critical,#c62f2d)}
.fhv-spark .fhv-okl{stroke:var(--good,#0f7a5f)}
.fhv-spark .fhv-sb{stroke:var(--fhv-grid);stroke-width:1}
.fhv-spark .fhv-sd{r:2.5}
.fhv-spark .fhv-sd1{fill:var(--fhv-s1)}
.fhv-spark .fhv-sdbad{fill:var(--critical,#c62f2d)}
.fhv-spark .fhv-sdok{fill:var(--good,#0f7a5f)}

/* ---- empty ---- */
.fhv-empty{display:flex;align-items:center;justify-content:center;min-height:120px;
  color:var(--muted,#5c636e);font-size:13px;text-align:center;padding:16px;line-height:1.6}

/* ---- drill-down chip ----
   A filter that is not visible is a bug report waiting to happen: rows are
   missing and nothing on screen says why. This names what was applied, how
   much it removed, and how to undo it. */
.fhv-chip{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:22px;
  padding:11px 15px;border:1px solid var(--accent,#2b4a86);
  background:var(--surface-2,#f6f8fc);border-radius:10px}
.fhv-chip-l{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent,#2b4a86)}
.fhv-chip-v{font-size:14px;font-weight:600;color:var(--text-primary,#0d1326)}
.fhv-chip-n{font-size:12px;color:var(--muted,#5c636e);font-variant-numeric:tabular-nums}
.fhv-chip-x{margin-left:auto;background:var(--surface-1,#fff);
  border:1px solid var(--border,rgba(15,23,42,.1));border-radius:8px;
  padding:6px 12px;font-size:12px;font-weight:600;color:var(--text-primary,#0d1326)}
.fhv-chip-x:hover{background:var(--surface-3,#e8edf7)}