/* Securelyn Intel chart library styles. Colours come from --c1..--c8, --sev-*, --primary with fallbacks; text uses currentColor so it
   follows whatever the page sets. No inline styles are needed: series colour is a class (.s1-.s8, .sev-*), intensity is .hm0-.hm5. */

.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* A hidden data table ignores width: 1px while it is a table, so the page could scroll sideways on a phone; as a block it stays 1px. */
table.sr-only { display: block; }
.chart { position: relative; }

.chart, .kpi, .chart-empty {
  --ch-accent: var(--primary, #22d3ee);
  --ch-heat: var(--c1, #22d3ee);
  --ch-line: color-mix(in srgb, currentColor 14%, transparent);
  --ch-soft: color-mix(in srgb, currentColor 8%, transparent);
}
.s1 { --ink: var(--c1, #22d3ee); } .s2 { --ink: var(--c2, #a78bfa); } .s3 { --ink: var(--c3, #f59e0b); } .s4 { --ink: var(--c4, #34d399); }
.s5 { --ink: var(--c5, #f472b6); } .s6 { --ink: var(--c6, #60a5fa); } .s7 { --ink: var(--c7, #fb7185); } .s8 { --ink: var(--c8, #a3e635); }
.sev-critical { --ink: var(--sev-critical, #ef4444); } .sev-high { --ink: var(--sev-high, #f97316); }
.sev-medium { --ink: var(--sev-medium, #eab308); } .sev-low { --ink: var(--sev-low, #22c55e); }
.s-other { --ink: #64748b; }

/* figure */
.chart { position: relative; margin: 0; min-width: 0; color: inherit; }
.chart-title { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; margin: 0 0 0.5rem; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-scroll { overflow-x: auto; padding-bottom: 0.25rem; }
.chart-calendar .chart-svg { min-width: 600px; }
.chart text { font-family: inherit; fill: currentColor; }
.chart .ax { font-size: 11px; fill-opacity: 0.66; }
.chart .ax.lab { fill-opacity: 0.85; }
.chart .val { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart .val.c { font-size: 11px; }
.chart .grid { stroke: var(--ch-line); stroke-width: 1; }
.chart .grid.zero { stroke: color-mix(in srgb, currentColor 30%, transparent); }
.chart .trk, .chart .track { fill: var(--ch-soft); stroke: var(--ch-soft); }
.chart .trk { stroke: none; }
.chart .track { fill: none; }
.chart .f { fill: var(--ink, var(--c1, #22d3ee)); }
.chart .k { stroke: var(--ink, var(--c1, #22d3ee)); }
.chart .hit { pointer-events: all; }
.chart .tip-text, .chart .tip-bg { pointer-events: none; }

/* focus + hover */
.chart [data-tip], .chart-svg[tabindex] { outline: none; cursor: default; }
.chart [data-tip]:focus-visible, .chart-svg[tabindex]:focus-visible { outline: 2px solid var(--ch-accent); outline-offset: 2px; border-radius: 3px; }
.chart .col:hover .bar, .chart .col:focus .bar, .chart .row:hover .bar, .chart .row:focus .bar, .chart .rowlink:hover .bar, .chart .rowlink:focus .bar { filter: brightness(1.18); }
.chart .seg:hover, .chart .seg:focus { stroke-width: 28; }
.chart .cell:hover, .chart .cell:focus { stroke: currentColor; stroke-width: 1.5; }
.chart .rowlink { cursor: pointer; text-decoration: none; }
.chart .rowlink:hover .lab, .chart .rowlink:focus .lab { text-decoration: underline; }
.chart .arc:hover, .chart .arc:focus { stroke-width: 19; }

/* donut + gauge centre */
.chart .c-val { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart .g-val { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart .c-lab { font-size: 11px; fill-opacity: 0.7; }
.chart-donut { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 0.5rem 1.25rem; align-items: center; }
.chart-donut .chart-title { grid-column: 1 / -1; margin-bottom: 0; }
.chart-gauge { max-width: 260px; }
@media (max-width: 480px) { .chart-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; } .chart-donut .chart-legend { justify-self: stretch; } }

/* area */
.chart .line { stroke-linecap: round; stroke-linejoin: round; }
.chart .fillarea { fill-opacity: 0.18; stroke: none; }
.chart .fillarea.light { fill-opacity: 0.08; }
.chart .fillarea.band { fill-opacity: 0.5; }
.chart .xhair { stroke: color-mix(in srgb, currentColor 40%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .cross { opacity: 0; pointer-events: none; }
.chart .cross.on { opacity: 1; }
.chart .dot { stroke: var(--card, #0f172a); stroke-width: 2; }

/* heat */
.chart .hm0 { fill: currentColor; fill-opacity: 0.07; }
.chart .hm1 { fill: var(--ch-heat); fill-opacity: 0.22; } .chart .hm2 { fill: var(--ch-heat); fill-opacity: 0.4; }
.chart .hm3 { fill: var(--ch-heat); fill-opacity: 0.6; } .chart .hm4 { fill: var(--ch-heat); fill-opacity: 0.8; }
.chart .hm5 { fill: var(--ch-heat); fill-opacity: 1; }

/* legend */
.chart-legend { list-style: none; margin: 0.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.8125rem; }
.chart-donut .chart-legend { flex-direction: column; flex-wrap: nowrap; margin: 0; gap: 0.5rem; }
.chart-legend li { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.chart-legend .lg-label { min-width: 0; overflow-wrap: anywhere; }
.chart-legend .lg-val { margin-left: auto; opacity: 0.7; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 0.5rem; }
.sw { flex: none; display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; background: var(--ink, var(--c1, #22d3ee)); }
.chart-legend.ramp { align-items: center; gap: 0.25rem; opacity: 0.85; }
.chart-legend.ramp > span:first-child { margin-right: 0.25rem; } .chart-legend.ramp > span:last-child { margin-left: 0.25rem; }
.sw.hm0 { background: color-mix(in srgb, currentColor 8%, transparent); }
.sw.hm1 { background: color-mix(in srgb, var(--ch-heat) 22%, transparent); } .sw.hm2 { background: color-mix(in srgb, var(--ch-heat) 40%, transparent); }
.sw.hm3 { background: color-mix(in srgb, var(--ch-heat) 60%, transparent); } .sw.hm4 { background: color-mix(in srgb, var(--ch-heat) 80%, transparent); }
.sw.hm5 { background: var(--ch-heat); }

/* tooltip (an svg group moved with a transform attribute) */
.chart-tip { opacity: 0; pointer-events: none; }
.chart-tip.on { opacity: 1; }
.chart .tip-bg { fill: #0f172a; fill-opacity: 0.96; stroke: #475569; stroke-width: 1; }
.chart .tip-text { font-size: 12px; fill: #f8fafc; fill-opacity: 1; font-variant-numeric: tabular-nums; }
.chart .tip-head { font-weight: 600; }

/* KPI */
.kpi { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.kpi-label { font-size: 0.8125rem; opacity: 0.72; }
.kpi-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.kpi-value { font-size: 1.875rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kpi-spark { width: 5.5rem; flex: none; }
.kpi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; font-size: 0.8125rem; }
.kpi-delta { display: inline-flex; gap: 0.25rem; align-items: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi-delta > span[aria-hidden] { font-size: 0.65rem; }
.kpi-delta.tone-good { color: var(--sev-low, #22c55e); } .kpi-delta.tone-bad { color: var(--sev-critical, #ef4444); }
.kpi-sub { opacity: 0.68; }
.spark { display: block; width: 100%; height: 2rem; overflow: visible; }
.spark-line { fill: none; stroke: var(--ink, var(--c1, #22d3ee)); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.spark-area { fill: var(--ink, var(--c1, #22d3ee)); fill-opacity: 0.12; stroke: none; }

/* empty */
.chart-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; padding: 1.5rem 1rem; border: 1px dashed var(--border, color-mix(in srgb, currentColor 25%, transparent)); border-radius: 10px; }
.chart-empty .empty-ico { width: 2rem; height: 2rem; opacity: 0.5; }
.chart-empty .empty-title { font-size: 0.9375rem; }
.chart-empty .empty-msg { margin: 0; font-size: 0.8125rem; opacity: 0.72; max-width: 28ch; }

/* load animation (CSS only, disabled for reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .chart .grow { transform-box: fill-box; transform-origin: 50% 100%; animation: ch-grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .chart .grow-x { transform-box: fill-box; transform-origin: 0 50%; animation: ch-grow-x 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .chart .draw { stroke-dasharray: 1; animation: ch-draw 0.9s ease-out both; }
  .chart .fillarea { animation: ch-fade 0.9s ease-out both; }
  .chart .seg, .chart .arc { animation: ch-fade 0.7s ease-out both; }
  .chart .arc { animation: ch-sweep 0.8s ease-out both; }
  .chart .cell { animation: ch-fade 0.5s ease-out both; }
  .chart .seg, .chart .arc, .chart .cell { transition: stroke-width 0.15s ease; }
  .chart .cross { transition: opacity 0.12s; }
}
@keyframes ch-grow { from { transform: scaleY(0); } }
@keyframes ch-grow-x { from { transform: scaleX(0); } }
@keyframes ch-draw { from { stroke-dashoffset: 1; } }
@keyframes ch-fade { from { opacity: 0; } }
@keyframes ch-sweep { from { stroke-dashoffset: 100; } }

@media (forced-colors: active) {
  .chart .f, .chart .k { forced-color-adjust: none; }
  .chart .bar, .chart .cell { stroke: CanvasText; stroke-width: 1; }
}

/* Visual QA: keep chart text between ~10px and ~15px at any panel width */
.chart-hbar .chart-svg { max-width: 38rem; }
.chart-heatmap .chart-svg { max-width: 52rem; }
.chart-donut { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; }
.chart-donut .chart-title { flex: 1 0 100%; }
.chart-donut > .chart-svg, .chart-donut > svg { flex: 0 1 12rem; max-width: 12rem; }
.chart-donut .chart-legend { flex: 1 1 12rem; min-width: min(100%, 12rem); }
@media (max-width: 30rem) {
  .chart-area .ax, .chart-vbar .ax, .chart-histogram .ax { font-size: 15px; }
  .chart-area .val, .chart-vbar .val, .chart-histogram .val { font-size: 15px; }
  .chart-hbar .ax.lab { font-size: 13px; } .chart-hbar .val { font-size: 14px; }
  .chart-heatmap .ax { font-size: 13px; }
}