/* INSIGHTS (js/tuhi/insights.js) and MEMBER INSIGHTS & SAFETY (L1) (js/tuhi/member-insights.js) — the analytics charts.
   Built on the console's tokens (tuhi-shell.css: --surface, --bd, --fg, --mut …) and its db-* components. The chart colours are the
   dataviz reference palette, validated (scripts/validate_palette.js) against this console's surfaces: slot 1 blue, slot 2 orange,
   slot 3 aqua — adjacent CVD ΔE ≥ 9.2 in both themes; light aqua is under 3:1, so every chart has a legend and a data-table view.
   Errors use the reserved status "critical" red and are always named (legend + tooltip), never colour alone.
   Dark is its own selected steps (html.tuhi), not a flip; light is html.tuhi.light. */
html.tuhi .ins-root{
  --ins-s1:#3987e5; --ins-s2:#d95926; --ins-s3:#199e70; --ins-crit:#e66767;
  --ins-grid:#2a3550; --ins-axis:#3a4766; --ins-surf:var(--surface,#171f31); --ins-zero:#202a41;
  --ins-h1:#104281; --ins-h2:#184f95; --ins-h3:#1c5cab; --ins-h4:#256abf; --ins-h5:#3987e5; --ins-h6:#6da7ec; --ins-h7:#9ec5f4;
  --ins-up-bad:#f87171; --ins-up-good:#4ade80;
}
html.tuhi.light .ins-root{
  --ins-s1:#2a78d6; --ins-s2:#eb6834; --ins-s3:#1baf7a; --ins-crit:#d03b3b;
  --ins-grid:#e4e7ec; --ins-axis:#d0d5dd; --ins-surf:var(--surface,#ffffff); --ins-zero:#f2f4f7;
  --ins-h1:#cde2fb; --ins-h2:#9ec5f4; --ins-h3:#6da7ec; --ins-h4:#3987e5; --ins-h5:#256abf; --ins-h6:#184f95; --ins-h7:#0d366b;
  --ins-up-bad:#b42318; --ins-up-good:#067647;
}
.ins-root{ position:relative; }
.ins-root .db-panel{ margin-bottom:14px; }
.ins-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; margin:0 0 14px; }
.ins-seg{ display:inline-flex; max-width:100%; overflow-x:auto; border:1px solid var(--bd); border-radius:9px; overflow:hidden; background:var(--surface); }
.ins-seg button{ border:0; background:transparent; color:var(--fg-2); font:inherit; font-size:12.5px; padding:6px 12px; cursor:pointer; border-right:1px solid var(--bd-soft); white-space:nowrap; flex:none; }
.ins-seg button:last-child{ border-right:0; }
.ins-seg button[aria-pressed="true"]{ background:var(--acc-soft); color:var(--acc-fg,var(--fg)); font-weight:600; }
.ins-seg button:focus-visible{ outline:2px solid var(--acc); outline-offset:-2px; }
.ins-note{ font-size:12px; color:var(--mut); margin:0 0 12px; line-height:1.5; }
.ins-loading{ opacity:.55; transition:opacity .15s; }

/* KPI tiles */
.ins-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:12px; margin-bottom:14px; }
.ins-kpi{ background:var(--surface); border:1px solid var(--bd); border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.ins-kpi-l{ font-size:12px; color:var(--mut); font-weight:600; }
.ins-kpi-v{ font-size:24px; font-weight:650; color:var(--fg); line-height:1.15; }
.ins-kpi-v small{ font-size:12px; color:var(--mut); font-weight:500; margin-left:4px; }
.ins-kpi-d{ font-size:12px; color:var(--mut); min-height:16px; }
.ins-kpi-d .up-bad, .ins-kpi-d .down-bad{ color:var(--ins-up-bad); font-weight:600; }
.ins-kpi-d .up-good, .ins-kpi-d .down-good{ color:var(--ins-up-good); font-weight:600; }
.ins-kpi-d .flat{ color:var(--fg-2); font-weight:600; }
.ins-spark{ display:block; width:100%; height:32px; margin-top:2px; }
.ins-spark polyline{ fill:none; stroke:var(--mut); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; opacity:.8; }
.ins-spark circle{ fill:var(--ins-s1); stroke:var(--ins-surf); stroke-width:2; }

/* chart cards */
.ins-grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:14px; }
.ins-grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:14px; }
.ins-card{ background:var(--surface); border:1px solid var(--bd); border-radius:12px; padding:14px 16px 10px; min-width:0; margin-bottom:14px; }
.ins-grid2 .ins-card, .ins-grid3 .ins-card{ margin-bottom:0; }
.ins-grid2, .ins-grid3{ margin-bottom:14px; }
.ins-ch{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.ins-ch h3{ margin:0; font-size:14px; font-weight:650; color:var(--fg); }
.ins-ch .ins-sub{ font-size:12px; color:var(--mut); }
.ins-legend{ display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--fg-2); }
.ins-legend i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.ins-legend i.ln{ width:14px; height:2px; border-radius:1px; vertical-align:3px; }
.ins-plot{ width:100%; min-height:40px; }
.ins-plot svg{ display:block; width:100%; height:auto; overflow:visible; }
.ins-plot text{ font-family:inherit; font-size:11px; fill:var(--mut); font-variant-numeric:tabular-nums; }
.ins-plot .g{ stroke:var(--ins-grid); stroke-width:1; shape-rendering:crispEdges; }
.ins-plot .ax{ stroke:var(--ins-axis); stroke-width:1; shape-rendering:crispEdges; }
.ins-plot .s1{ fill:var(--ins-s1); } .ins-plot .s2{ fill:var(--ins-s2); } .ins-plot .s3{ fill:var(--ins-s3); } .ins-plot .crit{ fill:var(--ins-crit); }
.ins-plot .l1{ fill:none; stroke:var(--ins-s1); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ins-plot .l2{ fill:none; stroke:var(--ins-s2); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ins-plot .a1{ fill:var(--ins-s1); opacity:.1; }
.ins-plot .dot1{ fill:var(--ins-s1); stroke:var(--ins-surf); stroke-width:2; } .ins-plot .dot2{ fill:var(--ins-s2); stroke:var(--ins-surf); stroke-width:2; }
.ins-plot .unheld{ fill:var(--ins-zero); opacity:.7; }
.ins-plot .hit{ fill:transparent; cursor:crosshair; }
.ins-plot .hit:hover, .ins-plot .hit:focus{ fill:var(--fg); opacity:.05; outline:none; }
.ins-plot .xh{ stroke:var(--mut); stroke-width:1; pointer-events:none; opacity:0; }
.ins-plot .xh.on{ opacity:.6; }
.ins-plot .mark:hover{ opacity:.85; }

/* ranked horizontal bars */
.ins-rank{ display:flex; flex-direction:column; gap:8px; }
.ins-rank-r{ display:grid; grid-template-columns:minmax(80px,38%) 1fr auto; gap:8px; align-items:center; font-size:12.5px; }
.ins-rank-k{ color:var(--fg-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ins-rank-t{ height:10px; background:var(--ins-zero); border-radius:0 4px 4px 0; overflow:hidden; }
.ins-rank-t b{ display:block; height:100%; background:var(--ins-s1); border-radius:0 4px 4px 0; min-width:2px; }
.ins-rank-v{ color:var(--fg); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.ins-rank-v small{ color:var(--mut); margin-left:4px; }

/* the weekday × hour heatmap */
.ins-heat{ display:grid; grid-template-columns:34px repeat(24,minmax(0,1fr)); gap:2px; max-width:900px; font-size:10.5px; color:var(--mut); }
.ins-heat span{ display:flex; align-items:center; justify-content:center; }
.ins-heat .c{ height:18px; border-radius:3px; background:var(--ins-zero); cursor:default; }
.ins-heat .c:focus{ outline:2px solid var(--acc); outline-offset:1px; }
.ins-heat .d{ justify-content:flex-start; }
.ins-heat-l{ display:flex; align-items:center; gap:3px; font-size:11px; color:var(--mut); margin-top:8px; }
.ins-heat-l i{ width:16px; height:10px; border-radius:2px; display:inline-block; }
.ins-q0{ background:var(--ins-zero) !important; } .ins-q1{ background:var(--ins-h1) !important; } .ins-q2{ background:var(--ins-h2) !important; }
.ins-q3{ background:var(--ins-h3) !important; } .ins-q4{ background:var(--ins-h4) !important; } .ins-q5{ background:var(--ins-h5) !important; }
.ins-q6{ background:var(--ins-h6) !important; } .ins-q7{ background:var(--ins-h7) !important; }

/* data table toggle */
.ins-tbl{ margin-top:8px; }
.ins-tbl > summary{ cursor:pointer; font-size:12px; color:var(--mut); }
.ins-tbl .tw{ overflow-x:auto; margin-top:6px; max-height:320px; overflow-y:auto; }
.ins-tbl table{ width:100%; border-collapse:collapse; font-size:12px; }
.ins-tbl th{ text-align:left; color:var(--mut); font-weight:600; padding:4px 6px; border-bottom:1px solid var(--bd); position:sticky; top:0; background:var(--surface); }
.ins-tbl td{ padding:4px 6px; border-bottom:1px solid var(--bd-soft); color:var(--fg); font-variant-numeric:tabular-nums; }
.ins-tbl td.n, .ins-tbl th.n{ text-align:right; }

/* the one tooltip */
.ins-tip{ position:fixed; z-index:60; pointer-events:none; background:var(--surface); color:var(--fg); border:1px solid var(--bd-strong); border-radius:8px;
  box-shadow:var(--shadow-md); padding:7px 10px; font-size:12px; line-height:1.45; min-width:120px; max-width:280px; }
.ins-tip .tt{ color:var(--mut); font-size:11.5px; margin-bottom:3px; }
.ins-tip .tr{ display:flex; align-items:center; gap:6px; }
.ins-tip .tr i{ display:inline-block; width:12px; height:2px; border-radius:1px; flex:none; }
.ins-tip .tr b{ font-variant-numeric:tabular-nums; }
.ins-tip .tr span{ color:var(--fg-2); }

/* MEMBER INSIGHTS & SAFETY (L1) */
.mi-q{ display:flex; flex-direction:column; gap:10px; }
.mi-ev{ border:1px solid var(--bd); border-radius:12px; padding:12px 14px; background:var(--surface); }
.mi-ev.urgent{ border-color:var(--err-bd); box-shadow:inset 3px 0 0 var(--err); }
.mi-ev-h{ display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin-bottom:6px; }
.mi-ev-h b{ font-size:14px; }
.mi-kv{ display:grid; grid-template-columns:max-content 1fr; gap:3px 12px; font-size:12.5px; margin:6px 0 8px; }
.mi-kv span{ color:var(--mut); }
.mi-kv b{ font-weight:500; color:var(--fg); overflow-wrap:anywhere; }
.mi-ev textarea{ width:100%; min-height:56px; box-sizing:border-box; }
.mi-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.mi-acts button{ height:30px; padding:0 12px; font-size:12.5px; }
.mi-down{ border:1px dashed var(--bd-strong); border-radius:12px; padding:14px; color:var(--fg-2); font-size:13px; background:var(--surface-2); }
.mi-down b{ color:var(--fg); }

@media (max-width:640px){
  .ins-kpi-v{ font-size:21px; }
  .ins-rank-r{ grid-template-columns:minmax(70px,34%) 1fr auto; font-size:12px; }
  .ins-heat{ grid-template-columns:26px repeat(24,minmax(0,1fr)); gap:1px; font-size:9px; }
  .mi-kv{ grid-template-columns:1fr; }
  .mi-kv span{ margin-top:4px; }
}