/* ==================================================================
   Chart styling. Every colour a chart uses is a role declared here, in
   both themes, so light and dark swap in one place and no chart can use
   a colour that was never validated.

   Validated with the data-viz validator (validate_palette.js):
   - categorical s1..s5, light on #f6f9ff: band, chroma, CVD (worst
     adjacent dE 9.1), normal-vision (22.9) PASS; s3/s4 under 3:1 -> relief
     by direct labels and the table under every chart.
   - categorical s1..s5, dark on #121826: all PASS (CVD 8.4, NV 19.8,
     contrast all >= 3:1).
   - ordinal o1..o5 (one blue), --ordinal, light on #f6f9ff and dark on
     #121826: monotone L, adjacent dL >= 0.06, pale end 2.03:1 / 2.77:1.
   Do not substitute a hex without re-running it on both surfaces.
   ================================================================== */
#bpx{
  /* the soft blue a chart panel sits on */
  --bpc-surface:#f6f9ff;

  --bpc-s1:#4e6ef2;   /* blue — the portal's own, slot 1 */
  --bpc-s2:#e0789a;   /* orange */
  --bpc-s3:#5a46b8;   /* aqua */
  --bpc-s4:#1f9e8f;   /* yellow */
  --bpc-s5:#b8324f;   /* violet */

  /* ordinal: one blue, pale to deep, for things in an order */
  --bpc-o1:#b8c3fb; --bpc-o2:#8d9df6; --bpc-o3:#6680f0; --bpc-o4:#4a62dc; --bpc-o5:#3445b0;
  --bpc-track:#e6eafd;  /* a meter's unfilled track: a paler step of the same blue */

  /* diverging: blue against orange either side of a gray */
  --bpc-pos2:#3445b0; --bpc-pos1:#8d9df6;
  --bpc-mid:#9aa6b6;
  --bpc-neg1:#eba3b8; --bpc-neg2:#b8324f;

  --bpc-other:#9aa6b6;
  --bpc-warn:#b45309;
  --bpc-grid:#e4eaf4;
  --bpc-axis:#c9d3e3;
  --bpc-good-t:#0f7a3d; --bpc-good-b:#e3f5ea;
  --bpc-bad-t:#b3392f;  --bpc-bad-b:#fdecea;
}
#bpx.bpx-dark{
  --bpc-surface:#121826;
  --bpc-s1:#5577f0; --bpc-s2:#d9668c; --bpc-s3:#7d6ae0; --bpc-s4:#1f9e8f; --bpc-s5:#d44a64;
  /* the ramp flips its anchor on dark: more is lighter */
  --bpc-o1:#3445b0; --bpc-o2:#4a62dc; --bpc-o3:#6f87f2; --bpc-o4:#9dabf7; --bpc-o5:#cbd3fc;
  --bpc-track:#1c2a47;
  --bpc-pos2:#9dabf7; --bpc-pos1:#4a62dc;
  --bpc-mid:#6d7887;
  --bpc-neg1:#b8324f; --bpc-neg2:#eba3b8;
  --bpc-other:#6d7887;
  --bpc-warn:#e0a555;
  --bpc-grid:#222c3d;
  --bpc-axis:#34415a;
  --bpc-good-t:#5fe39a; --bpc-good-b:#12301f;
  --bpc-bad-t:#ff8a80;  --bpc-bad-b:#3a1717;
}

/* soft light-blue panels wherever a chart lives */
#bpx:not(.bpx-dark) .bpx-panel:has(.bpc:not(.bpc-empty)),
#bpx:not(.bpx-dark) .db-st{background:var(--bpc-surface) !important;border-color:#e2e9f7 !important}

#bpx .bpc{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
#bpx .bpc-cap{display:flex;flex-direction:column;gap:2px;padding:0}
#bpx .bpc-t{font-size:14px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
#bpx .bpc-lead{font-size:12.5px;color:var(--grey);line-height:1.45}

/* legend: present whenever there is more than one series. The key mirrors
   the mark — a swatch for bars, a short line for lines, a dot for dots. */
#bpx .bpc-legend{display:flex;gap:14px;flex-wrap:wrap}
#bpx .bpc-key{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--grey)}
#bpx .bpc-key i{width:10px;height:10px;border-radius:3px;flex:none}
#bpx .bpc-key.ln i{width:14px;height:2px;border-radius:2px}
#bpx .bpc-key.dot i{border-radius:50%}
#bpx .bpc-key i.tl-done{background:var(--bpc-s1)}
#bpx .bpc-key i.tl-todo{background:var(--bpc-surface);box-shadow:inset 0 0 0 2px var(--bpc-o2)}
#bpx .bpc-key i.tl-late{background:var(--bpc-warn)}
#bpx .bpc-key i.tl-today{background:var(--grey)}

#bpx .bpc-plot{position:relative;min-width:0}
#bpx .bpc-plot svg{display:block;width:100%;overflow:visible}
#bpx .bpc-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
#bpx .bpc-area{stroke:none}
#bpx .bpc-end{stroke:var(--bpc-surface);stroke-width:2;vector-effect:non-scaling-stroke;transition:r .12s}
#bpx .bpc-plot.hov .bpc-end.on{r:5.5}
#bpx .bpc-endlab{fill:var(--ink);font-size:12px;font-weight:650;font-family:inherit}
#bpx .bpc-grid{stroke:var(--bpc-grid);stroke-width:1;vector-effect:non-scaling-stroke}
#bpx .bpc-base,#bpx .bpc-zero{stroke:var(--bpc-axis)}
#bpx .bpc-ax{fill:var(--grey);font-size:11px;font-family:inherit;font-variant-numeric:tabular-nums}
#bpx .bpc-cap-v{fill:var(--grey);font-size:11px;font-weight:600;font-family:inherit}
#bpx .bpc-hit{fill:transparent}
#bpx .bpc-cross{stroke:var(--bpc-axis);stroke-width:1;vector-effect:non-scaling-stroke}
#bpx svg .bpc-cross[hidden]{display:none}
#bpx .bpc-bar{transition:opacity .12s}
#bpx .bpc-plot.hov .bpc-bar{opacity:.45}
#bpx .bpc-plot.hov .bpc-bar.on{opacity:1}

/* tooltip: the value leads, the name follows; line keys, not boxes */
#bpx .bpc-tip{position:absolute;z-index:6;pointer-events:none;background:var(--card,#fff);
  border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:12px;
  box-shadow:0 8px 24px rgba(11,21,43,.14);min-width:120px;max-width:260px}
#bpx .bpc-tip b{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:3px}
#bpx .bpc-tip b.x{font-size:12px;font-weight:600;color:var(--grey)}
#bpx .bpc-tip span{display:flex;align-items:center;gap:6px;color:var(--grey);white-space:nowrap}
#bpx .bpc-tip i{width:10px;height:2px;border-radius:2px;flex:none}
#bpx .bpc-tip i.sw{width:8px;height:8px}
#bpx .bpc-tip em{font-style:normal;font-weight:700;color:var(--ink);margin-left:auto;padding-left:12px;font-variant-numeric:tabular-nums}
#bpx .bpc-tip span.note{margin-top:4px;padding-top:4px;border-top:1px solid var(--line-2,var(--line));font-weight:600;color:var(--ink)}

/* ranked rows — thin bar from a single baseline, 4px rounded at the data
   end, value written at the tip */
#bpx .bpc-rows{display:flex;flex-direction:column;gap:8px}
#bpx .bpc-row{display:grid;grid-template-columns:minmax(72px,32%) minmax(0,1fr) auto;gap:10px;align-items:center;outline:none;border-radius:6px}
#bpx .bpc-rl{font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bpx .bpc-rt{height:10px;position:relative;border-left:1px solid var(--bpc-axis)}
#bpx .bpc-rt i{display:block;height:100%;border-radius:0 4px 4px 0;transition:opacity .12s}
#bpx .bpc-rv{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
#bpx .bpc-rows:hover .bpc-rt i{opacity:.5}
#bpx .bpc-row:hover .bpc-rt i,#bpx .bpc-row:focus-visible .bpc-rt i{opacity:1}
#bpx .bpc-row:focus-visible{box-shadow:0 0 0 2px var(--bpc-o1)}
#bpx .bpc-row.mine .bpc-rl,#bpx .bpc-row.mine .bpc-rv{font-weight:750}
@media(max-width:520px){#bpx .bpc-row{grid-template-columns:minmax(64px,38%) minmax(0,1fr) auto}}

/* funnel: stepped bars, the rate against the stage before under the count */
#bpx .bpc-funnel .bpc-rt{height:22px;border-left:0}
#bpx .bpc-funnel .bpc-rt i{border-radius:4px}
#bpx .bpc-funnel .bpc-rv{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;min-width:48px}
#bpx .bpc-funnel .bpc-rv small{font-size:11px;font-weight:600;color:var(--grey)}

/* ---------- donut: the total in the hole, the detail beside it ---------- */
#bpx .bpc-donut{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
#bpx .bpc-ring{position:relative;flex:none;width:184px;height:184px}
#bpx .bpc-ring svg{display:block;width:184px;height:184px}
#bpx .bpc-ringbg{fill:none;stroke:var(--bpc-track)}
#bpx .bpc-slice{transition:opacity .13s,transform .13s;transform-origin:100px 100px}
#bpx .bpc-donut:hover .bpc-slice{opacity:.5}
#bpx .bpc-slice.on{opacity:1 !important;transform:scale(1.03)}
#bpx .bpc-hub{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none;text-align:center;padding:0 34px}
#bpx .bpc-hub b{font-size:22px;font-weight:750;letter-spacing:-.02em;color:var(--ink);line-height:1.15;font-variant-numeric:normal}
#bpx .bpc-hub span{font-size:11.5px;color:var(--grey);margin-top:3px;line-height:1.35}
#bpx .bpc-dlist{flex:1;min-width:180px;max-width:440px;display:flex;flex-direction:column;gap:2px}
#bpx .bpc-drow2{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;gap:10px;align-items:center;
  padding:6px 8px;border-radius:8px;font-size:12.5px}
#bpx .bpc-drow2.on{background:var(--bpc-track)}
#bpx .bpc-drow2 i{width:10px;height:10px;border-radius:3px}
#bpx .bpc-dname{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bpx .bpc-drow2 b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
#bpx .bpc-drow2 em{font-style:normal;color:var(--grey);font-variant-numeric:tabular-nums;min-width:34px;text-align:right}
@media(max-width:480px){
  #bpx .bpc-donut{gap:14px;justify-content:center}
  #bpx .bpc-dlist{min-width:100%}
}
@media(prefers-reduced-motion:reduce){#bpx .bpc-slice{transition:none}#bpx .bpc-slice.on{transform:none}}

/* ---------- diverging rows ---------- */
#bpx .bpc-drow .bpc-dt{position:relative;height:10px;border-left:0}
#bpx .bpc-drow .bpc-dt i{position:absolute;top:0;bottom:0}
#bpx .bpc-drow .bpc-dt i.r{border-radius:0 4px 4px 0}
#bpx .bpc-drow .bpc-dt i.l{border-radius:4px 0 0 4px}
#bpx .bpc-axis0{position:absolute;left:50%;top:-4px;bottom:-4px;width:1px;background:var(--bpc-axis);transform:translateX(-.5px)}
#bpx .bpc-dfoot{display:flex;justify-content:space-between;font-size:11.5px;color:var(--grey);
  border-top:1px solid var(--bpc-grid);padding-top:7px}

/* ---------- scatter ---------- */
#bpx .bpc-dot{stroke:var(--bpc-surface);stroke-width:2;vector-effect:non-scaling-stroke;transition:opacity .12s}
#bpx .bpc-plot:hover .bpc-dot{opacity:.7}
#bpx .bpc-dot.mine,#bpx .bpc-plot:hover .bpc-dot.mine{opacity:1}
#bpx .bpc-dotlab{fill:var(--ink);font-size:12px;font-weight:650;font-family:inherit}
#bpx .bpc-axname{fill:var(--grey-l,var(--grey));font-size:11px}

/* ---------- dumbbell ---------- */
#bpx .bpc-dbar{stroke:var(--bpc-track);stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke}
#bpx .bpc-dend{stroke:var(--bpc-surface);stroke-width:2;vector-effect:non-scaling-stroke}
#bpx .bpc-dbl{fill:var(--ink);font-size:12.5px}
#bpx .bpc-dgap{fill:var(--ink);font-size:12px;font-weight:700;font-family:inherit;font-variant-numeric:tabular-nums}

/* ---------- progress ---------- */
#bpx .bpc-prog .bpc-cap{flex-direction:row;justify-content:space-between;align-items:baseline;gap:10px}
#bpx .bpc-ptrack{display:block;height:8px;border-radius:99px;background:var(--bpc-track);overflow:hidden}
#bpx .bpc-ptrack i{display:block;height:100%;border-radius:99px;transition:width .4s ease}
#bpx .bpc-pfoot{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--grey)}
#bpx .bpc-pfoot span:first-child{font-weight:700;color:var(--ink)}
@media(prefers-reduced-motion:reduce){#bpx .bpc-ptrack i{transition:none}}

/* ---------- gauge ---------- */
#bpx .bpc-gauge{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
#bpx .bpc-gsvg{width:220px !important;max-width:100%;height:auto;flex:none}
#bpx .bpc-gtrack{fill:none;stroke:var(--bpc-track);stroke-linecap:round}
#bpx .bpc-gfill{fill:none;stroke:var(--bpc-s1);stroke-linecap:round}
#bpx .bpc-gfill.warn{stroke:var(--bpc-warn)}
#bpx .bpc-gv{fill:var(--ink);font-size:34px;font-weight:700;letter-spacing:-.03em;font-family:inherit}
#bpx .bpc-gside{flex:1;min-width:150px;display:flex;flex-direction:column;gap:6px}
#bpx .bpc-gnum{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
#bpx .bpc-gnum small{font-size:13px;font-weight:500;color:var(--grey);letter-spacing:0}
#bpx .bpc-gnote{font-size:12.5px;color:var(--grey);line-height:1.45}

/* ---------- sparkline + delta chip ---------- */
#bpx .bpc-sparkwrap{margin-top:auto}
#bpx .bpc-spark{display:block;width:100%;height:48px}
#bpx .bpc-sl{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
#bpx .bpc-sdot-r{stroke:var(--bpc-surface);stroke-width:12;stroke-linecap:round;vector-effect:non-scaling-stroke}
#bpx .bpc-sdot{stroke-width:8;stroke-linecap:round;vector-effect:non-scaling-stroke}
#bpx .bpc-delta{display:inline-flex;align-items:center;font-size:11.5px;font-weight:650;border-radius:40px;padding:2px 8px;white-space:nowrap}
#bpx .bpc-delta.good{background:var(--bpc-good-b);color:var(--bpc-good-t)}
#bpx .bpc-delta.bad{background:var(--bpc-bad-b);color:var(--bpc-bad-t)}
#bpx .bpc-delta.flat{background:var(--bpc-track);color:var(--grey)}

/* ---------- timeline ---------- */
#bpx .bpc-tlline{stroke:var(--bpc-track);stroke-width:4;stroke-linecap:round}
#bpx .bpc-tldone{stroke:var(--bpc-s1);stroke-width:4;stroke-linecap:round}
#bpx .bpc-tltoday{stroke:var(--grey);stroke-width:1.5}
#bpx .bpc-tldot{stroke-width:2.5}
#bpx .bpc-tldot.done{fill:var(--bpc-s1);stroke:var(--bpc-surface)}
#bpx .bpc-tldot.todo{fill:var(--bpc-surface);stroke:var(--bpc-o2)}
#bpx .bpc-tldot.late{fill:var(--bpc-warn);stroke:var(--bpc-surface)}
#bpx .bpc-tlname{fill:var(--ink);font-size:12px;font-weight:600;font-family:inherit}

/* the numbers behind the picture — always available, never in the way */
#bpx .bpc-tbl{border-top:1px solid var(--bpc-grid);padding-top:8px}
#bpx .bpc-tbl summary{font-size:12px;color:var(--grey);cursor:pointer;list-style:none}
#bpx .bpc-tbl summary::-webkit-details-marker{display:none}
#bpx .bpc-tbl summary:before{content:'▸ ';font-size:10px}
#bpx .bpc-tbl[open] summary:before{content:'▾ '}
#bpx .bpc-tbl summary:hover{color:var(--blue)}
#bpx .bpc-tblwrap{overflow-x:auto;margin-top:8px}
#bpx .bpc-tbl table{width:100%;border-collapse:collapse;font-size:12px}
#bpx .bpc-tbl th,#bpx .bpc-tbl td{text-align:right;padding:5px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
#bpx .bpc-tbl thead th{color:var(--grey);font-weight:650}
#bpx .bpc-tbl tbody th{text-align:left;font-weight:600}
#bpx .bpc-tbl td{font-variant-numeric:tabular-nums}

#bpx .bpc-empty .bpc-none{border:1px dashed var(--line);border-radius:12px;padding:26px 16px;
  text-align:center;font-size:13px;color:var(--grey);background:var(--soft,#f4f6fa)}

#bpx .bpc-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:1000px){#bpx .bpc-two{grid-template-columns:minmax(0,1fr)}}