/*
 * NFI chart library and dashboards (docs/ui/README.md section 11). System fonts, no external resources.
 *
 * Palette (validated by ChartPaletteTest, the six data-visualisation checks):
 *  - categorical --viz-s1..s8, assigned in this fixed order, never cycled: blue, orange, aqua, yellow, magenta,
 *    green, violet, red. Adjacent slots stay apart under simulated protanopia and deuteranopia (OKLab delta E x100
 *    >= 8) and for full colour vision (>= 15). Slots 3, 4 and 5 are below 3:1 against the light surface: every
 *    chart therefore carries direct labels or the data table (the "relief" the checks require);
 *  - sequential --viz-seq-1..7: one hue (blue), light to dark, monotone lightness, for magnitude;
 *  - diverging --viz-div-*: blue and red arms around a neutral grey midpoint, for above/below a reference;
 *  - status --viz-good/--viz-warning/--viz-serious/--viz-critical: reserved meaning, always with an icon and a
 *    word (never colour alone).
 * Light and dark are both selected steps (the dark column is not an automatic inversion); the dark theme follows
 * the operating system (prefers-color-scheme) unless <html data-theme> says otherwise, like app.css.
 * Print and forced-colors mode switch bar and area fills to hatch patterns so identity never rests on colour.
 */

:root {
  --viz-s1: #2a78d6;
  --viz-s2: #eb6834;
  --viz-s3: #1baf7a;
  --viz-s4: #eda100;
  --viz-s5: #e87ba4;
  --viz-s6: #008300;
  --viz-s7: #4a3aa7;
  --viz-s8: #e34948;
  --viz-seq-1: #cde2fb;
  --viz-seq-2: #9ec5f4;
  --viz-seq-3: #6da7ec;
  --viz-seq-4: #3987e5;
  --viz-seq-5: #256abf;
  --viz-seq-6: #184f95;
  --viz-seq-7: #0d366b;
  --viz-div-neg-3: #1c5cab;
  --viz-div-neg-2: #5598e7;
  --viz-div-neg-1: #9ec5f4;
  --viz-div-mid: #f0efec;
  --viz-div-pos-1: #f4b1ae;
  --viz-div-pos-2: #e66767;
  --viz-div-pos-3: #b52f2f;
  --viz-good: #0ca30c;
  --viz-warning: #fab219;
  --viz-serious: #ec835a;
  --viz-critical: #d03b3b;
  --viz-surface: #ffffff;
  --viz-grid: #e5e7eb;
  --viz-axis: #9aa1ab;
  --viz-ref-target-color: #1f2937;
  --viz-ref-baseline-color: #5b6470;
  --viz-deemph-color: #9aa3ae;
  --viz-lead-color: #b45309;
  --viz-hover: rgba(42, 120, 214, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --viz-s1: #3987e5;
    --viz-s2: #d95926;
    --viz-s3: #199e70;
    --viz-s4: #c98500;
    --viz-s5: #d55181;
    --viz-s6: #008300;
    --viz-s7: #9085e9;
    --viz-s8: #e66767;
    --viz-seq-1: #0d366b;
    --viz-seq-2: #184f95;
    --viz-seq-3: #256abf;
    --viz-seq-4: #3987e5;
    --viz-seq-5: #6da7ec;
    --viz-seq-6: #9ec5f4;
    --viz-seq-7: #cde2fb;
    --viz-div-neg-3: #9ec5f4;
    --viz-div-neg-2: #5598e7;
    --viz-div-neg-1: #1c5cab;
    --viz-div-mid: #383835;
    --viz-div-pos-1: #8f2a2a;
    --viz-div-pos-2: #e66767;
    --viz-div-pos-3: #f4b1ae;
    --viz-surface: #1b1f24;
    --viz-grid: #2c333b;
    --viz-axis: #58616c;
    --viz-ref-target-color: #e5e7eb;
    --viz-ref-baseline-color: #a9b1bc;
    --viz-deemph-color: #6b7480;
    --viz-lead-color: #fbbf24;
    --viz-hover: rgba(57, 135, 229, 0.14);
  }
}
:root[data-theme="dark"] {
  --viz-s1: #3987e5;
  --viz-s2: #d95926;
  --viz-s3: #199e70;
  --viz-s4: #c98500;
  --viz-s5: #d55181;
  --viz-s6: #008300;
  --viz-s7: #9085e9;
  --viz-s8: #e66767;
  --viz-seq-1: #0d366b;
  --viz-seq-2: #184f95;
  --viz-seq-3: #256abf;
  --viz-seq-4: #3987e5;
  --viz-seq-5: #6da7ec;
  --viz-seq-6: #9ec5f4;
  --viz-seq-7: #cde2fb;
  --viz-div-neg-3: #9ec5f4;
  --viz-div-neg-2: #5598e7;
  --viz-div-neg-1: #1c5cab;
  --viz-div-mid: #383835;
  --viz-div-pos-1: #8f2a2a;
  --viz-div-pos-2: #e66767;
  --viz-div-pos-3: #f4b1ae;
  --viz-surface: #1b1f24;
  --viz-grid: #2c333b;
  --viz-axis: #58616c;
  --viz-ref-target-color: #e5e7eb;
  --viz-ref-baseline-color: #a9b1bc;
  --viz-deemph-color: #6b7480;
  --viz-lead-color: #fbbf24;
  --viz-hover: rgba(57, 135, 229, 0.14);
}

/* ---------------------------------------------------------------- colour roles (a class sets --viz-color) */
.viz-s1 { --viz-color: var(--viz-s1); }
.viz-s2 { --viz-color: var(--viz-s2); }
.viz-s3 { --viz-color: var(--viz-s3); }
.viz-s4 { --viz-color: var(--viz-s4); }
.viz-s5 { --viz-color: var(--viz-s5); }
.viz-s6 { --viz-color: var(--viz-s6); }
.viz-s7 { --viz-color: var(--viz-s7); }
.viz-s8 { --viz-color: var(--viz-s8); }
.viz-deemph { --viz-color: var(--viz-deemph-color); }
.viz-lead { --viz-color: var(--viz-lead-color); }
.viz-ref-target { --viz-color: var(--viz-ref-target-color); }
.viz-ref-baseline { --viz-color: var(--viz-ref-baseline-color); }
.viz-good { --viz-color: var(--viz-good); }
.viz-warning { --viz-color: var(--viz-warning); }
.viz-serious { --viz-color: var(--viz-serious); }
.viz-critical { --viz-color: var(--viz-critical); }

/* ---------------------------------------------------------------- the chart frame */
.viz { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin: 0;
  padding: 0.85rem 1rem 1rem; min-width: 0; break-inside: avoid; }
.viz-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 1rem; }
.viz-title { font-size: 1.02rem; margin: 0; }
.viz-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.viz-summary { margin: 0.35rem 0 0.6rem; max-width: 72ch; color: var(--text); }
.viz-description { margin: -0.3rem 0 0.6rem; max-width: 72ch; color: var(--muted); font-size: 0.88rem; }
.viz-plot { position: relative; min-width: 0; }
.viz-empty { color: var(--muted); border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--surface-alt); padding: 0.9rem 1rem; margin: 0.3rem 0 0; }
.viz-empty-mark { font-weight: 700; margin-right: 0.3rem; }
.viz-table { margin-top: 0.6rem; }
.viz-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.55rem 0 0; padding: 0;
  font-size: 0.88rem; }
.viz-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.viz-legend-key { flex: 0 0 auto; }
.viz-tooltip { position: absolute; z-index: 5; pointer-events: none; min-width: 9rem; max-width: 19rem;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 0.4rem 0.6rem; font-size: 0.85rem; line-height: 1.35; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18); }
.viz-tip-title { font-weight: 700; margin: 0 0 0.25rem; }
.viz-tip-rows { display: grid; grid-template-columns: auto auto; gap: 0.1rem 0.9rem; margin: 0; }
.viz-tip-rows dt { color: var(--muted); display: flex; align-items: center; gap: 0.35rem; }
.viz-tip-rows dd { margin: 0; font-weight: 700; text-align: right; }
.viz-tip-note { margin: 0.3rem 0 0; color: var(--muted); overflow-wrap: anywhere; }
.viz-zoom { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.1rem 0 0.45rem; }
.viz-window-status { font-size: 0.85rem; color: var(--muted); margin: 0.35rem 0 0; }
.viz-pattern-host { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------------------------------------------------------- SVG marks: thin, recessive furniture */
.viz-svg { display: block; max-width: 100%; height: auto; overflow: visible; font-family: inherit; }
.viz-grid { stroke: var(--viz-grid); stroke-width: 1; shape-rendering: crispEdges; }
.viz-baseline { stroke: var(--viz-axis); stroke-width: 1; shape-rendering: crispEdges; }
.viz-tick { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.viz-cat-label, .viz-lane-label, .viz-axis-title { fill: var(--text); font-size: 12.5px; }
.viz-lead-row-label { font-weight: 600; }
.viz-value-label, .viz-end-label { fill: var(--text); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.viz-end-label { paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.viz-ref { fill: none; stroke: var(--viz-color); stroke-width: 1.5; }
.viz-ref.viz-ref-target { stroke-dasharray: 6 4; }
.viz-ref.viz-ref-baseline { stroke-dasharray: 2 3; }
.viz-ref-label { fill: var(--text); font-size: 11.5px; font-weight: 600; paint-order: stroke; stroke: var(--surface);
  stroke-width: 4px; stroke-linejoin: round; }
.viz-line { fill: none; stroke: var(--viz-color); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-area { fill: var(--viz-color); fill-opacity: 0.1; stroke: none; }
.viz-point { fill: var(--viz-color); stroke: var(--surface); stroke-width: 2; }
.viz-point-quiet { opacity: 0; }
.viz-point-quiet.viz-active, .viz-point-quiet:focus { opacity: 1; }
.viz-bar { fill: var(--viz-color); }
.viz-hit { fill: transparent; stroke: none; }
.viz-crosshair { stroke: var(--viz-axis); stroke-width: 1; pointer-events: none; }
.viz-mark { cursor: default; outline: none; }
.viz-mark[data-href] { cursor: pointer; }
.viz-mark.viz-active .viz-hit { fill: var(--viz-hover); }
.viz-mark:focus-visible .viz-hit { stroke: var(--focus); stroke-width: 2; }
.viz-point.viz-mark:focus-visible, .viz-point.viz-mark.viz-active { stroke: var(--focus); stroke-width: 3; }
path.viz-bar.viz-mark:focus-visible { stroke: var(--focus); stroke-width: 3; }
.viz-key-line { stroke: var(--viz-color); stroke-width: 2.5; stroke-linecap: round; }
.viz-key-line.viz-dash { stroke-dasharray: 5 3; stroke-linecap: butt; }
.viz-key-line.viz-dot { stroke-dasharray: 2 2; stroke-linecap: butt; }
.viz-key-fill { fill: var(--viz-color); }
.viz-lane { fill: transparent; }
.viz-lane-alt { fill: var(--surface-alt); }
.viz-lead-line { stroke: var(--viz-lead-color); stroke-width: 1; stroke-dasharray: 3 3; }
.viz-lead-mark { fill: var(--viz-lead-color); stroke: var(--surface); stroke-width: 1.5; }
.viz-lead-bang { fill: var(--surface); font-size: 9px; font-weight: 800; pointer-events: none; }
.viz-overview { fill: var(--surface-alt); stroke: var(--border); stroke-width: 1; }
.viz-overview-bar { fill: var(--viz-deemph-color); }
.viz-brush { fill: var(--viz-s1); fill-opacity: 0.14; stroke: var(--viz-s1); stroke-width: 1.5; cursor: ew-resize; }
.viz-donut { display: grid; grid-template-columns: max-content 1fr; column-gap: 1.5rem; align-items: center; }
.viz-donut > * { grid-column: 1 / -1; }
.viz-donut > .viz-plot { grid-column: 1; }
.viz-donut > .viz-legend { grid-column: 2; flex-direction: column; margin: 0; }
.viz-donut-total { fill: var(--text); font-size: 28px; font-weight: 700; }
.viz-donut-caption { fill: var(--muted); font-size: 12px; }
.viz-spark { flex: 0 0 auto; }
.viz-spark-line { fill: none; stroke: var(--viz-s1); stroke-width: 1.5; stroke-linejoin: round; }
.viz-spark-end { fill: var(--viz-s1); }
.viz-hatch-bg { fill: var(--viz-color); fill-opacity: 0.28; }
.viz-hatch-line { stroke: var(--text); stroke-opacity: 0.85; }

/* ---------------------------------------------------------------- stat tiles and status */
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; break-inside: avoid; }
.stat-label { font-size: 0.92rem; font-weight: 600; color: var(--muted); margin: 0; }
.stat-main { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.2rem 0.6rem; }
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1.1; margin: 0; white-space: nowrap; }
.stat-main .viz-spark { margin-left: auto; }
.stat-empty .stat-value { font-size: 1.1rem; font-weight: 600; color: var(--muted); }
.stat-sub { font-size: 0.86rem; color: var(--muted); margin: 0; }
.stat-flags { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.stat-flags:empty { display: none; }
.stat-delta { font-size: 0.86rem; }
.stat-delta-good { color: var(--success); }
.stat-delta-bad { color: var(--danger); }
.stat-delta-neutral { color: var(--muted); }
.stat-meaning { font-size: 0.88rem; margin: 0.15rem 0 0; }
.stat-meaning-label { font-weight: 700; }
.stat-link { margin: auto 0 0; padding-top: 0.2rem; font-size: 0.88rem; }
.viz-status { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; font-weight: 700;
  border: 1px solid currentColor; border-radius: 999px; padding: 0.05rem 0.55rem; white-space: nowrap; }
.viz-status-icon { font-weight: 800; }
.viz-status-good { color: var(--success); background: var(--success-bg); }
.viz-status-warning { color: var(--warning); background: var(--warning-bg); }
.viz-status-critical { color: var(--danger); background: var(--danger-bg); }
.viz-status-neutral { color: var(--muted); background: var(--surface-muted); }

/* ---------------------------------------------------------------- dashboards and the case summary */
.dash { display: grid; gap: 1.25rem; }
.dash-section { display: grid; gap: 0.8rem; }
.dash-section > .dash-section-head h2 { margin: 0; }
.dash-section-head p { margin: 0.2rem 0 0; color: var(--muted); max-width: 80ch; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr)); gap: 1rem; }
.dash-wide { grid-column: 1 / -1; }
.dash-note { font-size: 0.88rem; color: var(--muted); margin: 0; max-width: 90ch; }
.dash-method { font-size: 0.88rem; border-left: 4px solid var(--border-strong); padding: 0.3rem 0.8rem; margin: 0;
  background: var(--surface-alt); max-width: 90ch; }
.dash-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.glance-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.75rem; }
.glance-fact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.7rem 0.9rem; break-inside: avoid; }
.glance-fact h3 { font-size: 0.9rem; color: var(--muted); margin: 0 0 0.2rem; }
.glance-fact .glance-value { font-size: 1.35rem; font-weight: 700; margin: 0; }
.glance-fact p { margin: 0.2rem 0 0; font-size: 0.88rem; }
.custody-state { display: flex; gap: 0.6rem; align-items: flex-start; }
.custody-icon { font-size: 1.4rem; line-height: 1; font-weight: 800; }
.custody-ok { color: var(--success); }
.custody-bad { color: var(--danger); }
.custody-unknown { color: var(--muted); }
.kpi-trend { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.glance-report { margin: 0.4rem 0; }
.print-only { display: none; }
.briefing-header { display: none; }

/* ---------------------------------------------------------------- print: "Print or save as PDF" briefings */
@media print {
  :root, :root[data-theme="dark"] {
    --bg: #ffffff; --surface: #ffffff; --surface-alt: #f5f6f7; --surface-muted: #f5f6f7; --text: #111111;
    --muted: #444444; --border: #bbbbbb; --border-strong: #777777; --viz-grid: #dddddd; --viz-axis: #888888;
    --viz-ref-target-color: #111111; --viz-ref-baseline-color: #444444; --viz-lead-color: #92400e;
    --viz-s1: #2a78d6; --viz-s2: #eb6834; --viz-s3: #1baf7a; --viz-s4: #eda100; --viz-s5: #e87ba4; --viz-s6: #008300;
    --viz-s7: #4a3aa7; --viz-s8: #e34948; --success: #166534; --success-bg: #ffffff; --warning: #92400e;
    --warning-bg: #ffffff; --danger: #b91c1c; --danger-bg: #ffffff; --info: #1e40af; --info-bg: #ffffff;
    --ai: #6d28d9; --ai-bg: #ffffff; --ai-text: #4c1d95; --det: #0f766e; --det-bg: #ffffff; --det-text: #134e4a;
    --lead: #92400e; --lead-bg: #ffffff; color-scheme: light;
  }
  @page { margin: 14mm 12mm; }
  body { background: #ffffff; }
  .viz-table-toggle, .viz-zoom, .viz-tooltip, .viz-crosshair, .no-print, .case-header .chips a { display: none !important; }
  .print-only { display: block; }
  .briefing-header { display: block; border-bottom: 2px solid #111111; margin-bottom: 0.6rem; padding-bottom: 0.3rem; }
  .viz, .stat, .glance-fact, .section { break-inside: avoid; box-shadow: none; }
  .dash-tiles { grid-template-columns: repeat(3, 1fr); }
  .dash-charts { grid-template-columns: 1fr 1fr; }
  .dash-wide { grid-column: 1 / -1; }
  .viz-bar.viz-s1 { fill: url(#viz-hatch-1); }
  .viz-bar.viz-s2 { fill: url(#viz-hatch-2); }
  .viz-bar.viz-s3 { fill: url(#viz-hatch-3); }
  .viz-bar.viz-s4 { fill: url(#viz-hatch-4); }
  .viz-bar.viz-s5 { fill: url(#viz-hatch-5); }
  .viz-bar.viz-s6 { fill: url(#viz-hatch-6); }
  .viz-bar.viz-s7 { fill: url(#viz-hatch-7); }
  .viz-bar.viz-s8 { fill: url(#viz-hatch-8); }
  .viz-bar.viz-s1, .viz-bar.viz-s2, .viz-bar.viz-s3, .viz-bar.viz-s4, .viz-bar.viz-s5, .viz-bar.viz-s6,
  .viz-bar.viz-s7, .viz-bar.viz-s8 { stroke: var(--viz-color); stroke-width: 1; }
  .viz-status { border-width: 1px; }
  a { color: inherit; text-decoration: none; }
}

/* Windows high-contrast and other forced-colours modes: system colours, patterns for identity */
@media (forced-colors: active) {
  .viz-line, .viz-key-line, .viz-ref, .viz-spark-line { stroke: CanvasText; }
  .viz-point, .viz-key-fill, .viz-spark-end, .viz-lead-mark { fill: CanvasText; }
  .viz-bar.viz-s1 { fill: url(#viz-hatch-1); } .viz-bar.viz-s2 { fill: url(#viz-hatch-2); }
  .viz-bar.viz-s3 { fill: url(#viz-hatch-3); } .viz-bar.viz-s4 { fill: url(#viz-hatch-4); }
  .viz-bar.viz-s5 { fill: url(#viz-hatch-5); } .viz-bar.viz-s6 { fill: url(#viz-hatch-6); }
  .viz-bar.viz-s7 { fill: url(#viz-hatch-7); } .viz-bar.viz-s8 { fill: url(#viz-hatch-8); }
  .viz-bar { stroke: CanvasText; stroke-width: 1; }
  .viz-hatch-line { stroke: CanvasText; }
  .viz-hatch-bg { fill: Canvas; }
  .viz-tick, .viz-cat-label, .viz-value-label, .viz-end-label, .viz-ref-label, .viz-lane-label { fill: CanvasText; }
  .viz-mark:focus-visible .viz-hit { stroke: Highlight; }
}

@media (max-width: 40rem) {
  .stat-value { font-size: 1.7rem; }
  .viz { padding: 0.75rem 0.75rem 0.85rem; }
}