/* =====================================================================
   Inferstrat — Static chart kit (hand-authored inline SVG)
   No JS charting lib. Series use the monochrome+status chart palette
   from prototype.css (--chart-1..6, --grid). Everything is crisp SVG.

   Usage: put <svg class="chart"> … </svg> and tag elements with the
   helper classes below. Colours come from CSS vars so light/dark works.
   ===================================================================== */

.chart { display: block; width: 100%; height: auto; overflow: visible; }
/* Charts with a width attribute (text-bearing ones) keep it, shrinking only to fit narrow containers. */
.chart[width] { width: auto; max-width: 100%; }
.chart text { font-family: "Geist", system-ui, sans-serif; fill: hsl(var(--muted-foreground)); }
.chart .axis-label { font-size: 10px; fill: hsl(var(--subtle-foreground)); }
.chart .axis-line { stroke: hsl(var(--border-strong)); stroke-width: 1; }
.chart .grid-line { stroke: hsl(var(--grid)); stroke-width: 1; }
.chart .grid-line.dashed { stroke-dasharray: 2 3; }
.chart .val-label { font-size: 10px; font-weight: 600; fill: hsl(var(--foreground)); }

/* series fills / strokes */
.s1 { fill: hsl(var(--chart-1)); } .stroke-1 { stroke: hsl(var(--chart-1)); }
.s2 { fill: hsl(var(--chart-2)); } .stroke-2 { stroke: hsl(var(--chart-2)); }
.s3 { fill: hsl(var(--chart-3)); } .stroke-3 { stroke: hsl(var(--chart-3)); }
.s4 { fill: hsl(var(--chart-4)); } .stroke-4 { stroke: hsl(var(--chart-4)); }
.s5 { fill: hsl(var(--chart-5)); } .stroke-5 { stroke: hsl(var(--chart-5)); }
.s6 { fill: hsl(var(--chart-6)); } .stroke-6 { stroke: hsl(var(--chart-6)); }
.s7 { fill: hsl(var(--chart-7)); } .stroke-7 { stroke: hsl(var(--chart-7)); }
.s8 { fill: hsl(var(--chart-8)); } .stroke-8 { stroke: hsl(var(--chart-8)); }
.sev-critical { fill: hsl(var(--sev-critical)); } .sev-high { fill: hsl(var(--sev-high)); }
.sev-medium { fill: hsl(var(--sev-medium)); } .sev-low { fill: hsl(var(--sev-low)); } .sev-info { fill: hsl(var(--sev-info)); }
.s-ink { fill: hsl(var(--ink)); } .stroke-ink { stroke: hsl(var(--ink)); }
.s-success { fill: hsl(var(--success)); } .s-warning { fill: hsl(var(--warning)); }
.s-danger { fill: hsl(var(--danger)); } .s-info { fill: hsl(var(--info)); }

/* line / area helpers */
.chart .line { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.chart .area { stroke: none; opacity: .12; }
.chart .dot { stroke: hsl(var(--panel)); stroke-width: 1.5; }
.chart .bar { shape-rendering: crispEdges; }

/* legend */
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.legend .sw { width: 9px; height: 9px; flex: none; }

/* sparkline (inline mini trend, e.g. inside KPI tiles or table cells) */
.spark { display: inline-block; width: 84px; height: 24px; vertical-align: middle; }
.spark .line { fill: none; stroke: hsl(var(--ink)); stroke-width: 1.5; }
.spark .area { fill: hsl(var(--ink)); opacity: .1; stroke: none; }
.spark.up .line { stroke: hsl(var(--success)); } .spark.up .area { fill: hsl(var(--success)); }
.spark.down .line { stroke: hsl(var(--danger)); } .spark.down .area { fill: hsl(var(--danger)); }

/* donut / gauge center label */
.donut-wrap { position: relative; display: inline-grid; place-items: center; }
.donut-center { position: absolute; text-align: center; }
.donut-center .v { font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.donut-center .k { font-size: 10.5px; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .04em; }
.chart .track-ring { fill: none; stroke: hsl(var(--track)); }

/* bullet / progress-bar chart row */
.bullet { display: grid; grid-template-columns: 120px 1fr 56px; gap: 12px; align-items: center; font-size: 12px; }
.bullet .track { height: 14px; background: hsl(var(--track)); position: relative; }
.bullet .fill { height: 100%; background: hsl(var(--ink)); }
.bullet .track .chart { height: 100%; overflow: hidden; }
.bullet .target { position: absolute; top: -2px; bottom: -2px; width: 2px; background: hsl(var(--danger)); }
.bullet .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* heatmap cell grid (e.g. best-time-to-post) */
.heat { display: grid; gap: 2px; }
.heat .cell { aspect-ratio: 1; min-height: 14px; background: hsl(var(--track)); }
.heat .h1 { background: hsl(var(--ink) / .12); } .heat .h2 { background: hsl(var(--ink) / .32); }
.heat .h3 { background: hsl(var(--ink) / .55); } .heat .h4 { background: hsl(var(--ink) / .78); }
.heat .h5 { background: hsl(var(--ink)); }

/* funnel rows */
.funnel { display: flex; flex-direction: column; gap: 4px; }
.funnel .frow { display: grid; grid-template-columns: 140px 1fr 90px; gap: 12px; align-items: center; font-size: 12px; }
.funnel .fbar { height: 26px; background: hsl(var(--chart-2)); display: flex; align-items: center; padding-left: 8px; color: hsl(var(--ink-foreground)); font-weight: 600; font-size: 11px; }
.funnel .frow:nth-child(1) .fbar { background: hsl(var(--chart-1)); }
.funnel .frow:nth-child(2) .fbar { background: hsl(var(--chart-2)); }
.funnel .frow:nth-child(3) .fbar { background: hsl(var(--chart-3)); }
.funnel .frow:nth-child(4) .fbar { background: hsl(var(--chart-4)); }
.funnel .frow:nth-child(5) .fbar { background: hsl(var(--chart-5)); }

/* =====================================================================
   Dashboards (M3): chart figures, "View data", heat cells, skeletons,
   KPI grid, filter bar, widgets, Graph Explorer and ⌘K search.
   Tokens only (hsl(var(--token))); radius 0; no shadows except drawers.
   ===================================================================== */
.chart-fig { margin: 0; }
.chart .ring { fill: none; }
.chart .stroke-1.ring, .chart .ring.stroke-1 { stroke: hsl(var(--chart-1)); }
.chart .ring.stroke-2 { stroke: hsl(var(--chart-2)); }
.chart .ring.stroke-3 { stroke: hsl(var(--chart-3)); }
.chart .ring.stroke-4 { stroke: hsl(var(--chart-4)); }
.chart .ring.stroke-5 { stroke: hsl(var(--chart-5)); }
.chart .ring.stroke-6 { stroke: hsl(var(--chart-6)); }
.chart .track-ring { stroke: hsl(var(--track)); }
.chart .track-bar { fill: hsl(var(--track)); }
.chart .s-ink { fill: hsl(var(--ink)); }
.chart .area.s1 { fill: hsl(var(--chart-1)); } .chart .area.s2 { fill: hsl(var(--chart-2)); }
.chart .area.s3 { fill: hsl(var(--chart-3)); }
.chart .dot.s-danger { fill: hsl(var(--danger)); }
.chart .sx { fill: hsl(var(--track)); } .sw.sx { background: hsl(var(--track)); }
.donut-md { width: 150px; }
.donut-wrap .chart { width: 150px; }

/* heat cells (SVG): hm0 = no value, hm1..hm5 = ink ramp */
.chart .hm0 { fill: hsl(var(--track)); }
.chart .hm1 { fill: hsl(var(--chart-1) / .14); } .chart .hm2 { fill: hsl(var(--chart-1) / .3); }
.chart .hm3 { fill: hsl(var(--chart-1) / .48); } .chart .hm4 { fill: hsl(var(--chart-1) / .7); }
.chart .hm5 { fill: hsl(var(--chart-1) / .92); }
.chart .hm-label { font-size: 10px; font-weight: 600; fill: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }
.chart .hm-label.on-dark { fill: hsl(var(--on-chart)); }

/* system diagram */
.chart.diagram .node rect { fill: hsl(var(--panel)); stroke: hsl(var(--border-strong)); stroke-width: 1; }
.chart.diagram .node.n-service rect { stroke: hsl(var(--ink)); }
.chart.diagram .node.n-datastore rect { fill: hsl(var(--panel-2)); }
.chart.diagram .node text { font-size: 11px; fill: hsl(var(--foreground)); }
.chart.diagram .edge { stroke: hsl(var(--border-strong)); stroke-width: 1.25; }
.chart.diagram .edge.e-persists_to { stroke: hsl(var(--chart-3)); }
.chart.diagram .edge.e-publishes, .chart.diagram .edge.e-consumes { stroke: hsl(var(--chart-5)); stroke-dasharray: 4 3; }
.chart .tier-label { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.diagram-scroll { overflow-x: auto; }

/* layered system architecture: bands (rows) × repos (columns) */
.arch-scroll { overflow-x: auto; }
/* every row is its own grid with identical tracks, so columns line up without knowing the repo count */
.arch-row { display: grid; grid-template-columns: 180px; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: 10px; }
.arch-row > * { min-width: 0; }
.arch-corner, .arch-col-head { padding: 0 2px 8px; border-bottom: 1px solid hsl(var(--border-strong)); align-self: end; }
.arch-col-head { font-weight: 640; font-size: 12.5px; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.arch-band-head { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; font-size: 12.5px;
  border-left: 3px solid hsl(var(--band)); background: hsl(var(--band) / .08); margin-top: 0; }
.arch-cell { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: hsl(var(--band) / .05);
  border-top: 1px solid hsl(var(--band) / .35); }
.arch-row.b-client { --band: var(--chart-6); } .arch-row.b-interface { --band: var(--chart-1); }
.arch-row.b-service { --band: var(--chart-2); } .arch-row.b-io { --band: var(--chart-3); }
.arch-flow-head, .arch-flow { height: 26px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: hsl(var(--muted-foreground)); }
.arch-flow-head { justify-content: flex-start; padding-left: 15px; font-style: italic; }
.arch-flow span { font-size: 15px; line-height: 1; color: hsl(var(--border-strong)); }
.arch-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 6px 8px; font-size: 12px;
  background: hsl(var(--panel)); border: 1px solid hsl(var(--border)); overflow-wrap: anywhere; }
.arch-item.t-service { border-color: hsl(var(--ink)); font-weight: 600; }
.arch-item.t-datastore { background: hsl(var(--panel-2)); }
.arch-item.t-channel { border-style: dashed; }
.arch-item.t-client { border-style: dotted; color: hsl(var(--muted-foreground)); }
.arch-item.arch-link { font-size: 11.5px; border-style: dashed; }
.arch-kind { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: hsl(var(--subtle-foreground)); }
.arch-shared { margin-left: auto; font-size: 10.5px; font-weight: 600; color: hsl(var(--chart-3)); white-space: nowrap; }
.chart.strip { height: 14px; width: auto; max-width: 100%; }
.swatch-svg { width: 100%; height: 36px; border: 1px solid hsl(var(--border)); display: block; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }

/* bullet row (SVG track) */
.bullet-row { display: grid; grid-template-columns: minmax(0, 130px) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.bullet-row .num { text-align: right; font-weight: 600; }
.bullet-row .view-data { grid-column: 1 / -1; }

/* "View data" disclosure */
.view-data { margin-top: 6px; font-size: 11.5px; }
.view-data > summary { cursor: pointer; color: hsl(var(--muted-foreground)); width: max-content; }
.view-data > summary:hover { color: hsl(var(--foreground)); }
.view-data .table-scroll { margin-top: 6px; border: 1px solid hsl(var(--border)); max-height: 280px; overflow: auto; }
table.data.compact tbody td { padding: 6px 10px; }
table.data.compact thead th { padding: 6px 10px; }

/* skeletons / loading */
.skel-line { height: 10px; margin: 6px 0; }
.skel-line.short { width: 40%; display: inline-block; }
.skel-v { height: 24px; width: 60%; margin-top: 8px; }
.skel-block { height: 120px; margin-top: 10px; }
.skel-stack { display: flex; flex-direction: column; }
[data-widget].htmx-request .panel-body, [data-widget].htmx-request .kpi-grid { opacity: .55; transition: opacity .15s; }

/* KPI grid + filter bar + widgets */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.kpi-spark { margin-top: 8px; }
.metric .k .badge { margin-left: auto; height: 16px; padding: 0 5px; font-size: 10px; }
.sticky-filters { position: sticky; top: var(--header-h); z-index: 20; background: hsl(var(--canvas)); }
.multi-select { position: relative; }
.multi-select > summary { list-style: none; display: flex; align-items: center; cursor: pointer; user-select: none;
  min-width: 180px; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.multi-select > summary::-webkit-details-marker { display: none; }
.multi-select[open] > summary { border-color: hsl(var(--ring)); }
.multi-select > summary:focus-visible { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 2px hsl(var(--ring) / .18); }
.multi-select-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 100%; max-width: 360px;
  max-height: 280px; overflow: auto; padding: 4px 0; background: hsl(var(--panel));
  border: 1px solid hsl(var(--border-strong)); box-shadow: var(--shadow-pop); }
.multi-select-opt { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.multi-select-opt:hover { background: hsl(var(--canvas)); }
.widget { min-width: 0; }
/* Panels keep their own height; a short panel no longer stretches to its row neighbour's. */
.widgets { align-items: start; }
.widget .panel-head { flex-wrap: wrap; }
.widget .panel-head .grow { flex-basis: 200px; }
.widget .panel-body { min-width: 0; overflow-wrap: break-word; }
.widget .panel-body .table-scroll, .widget .panel-body .diagram-scroll { max-width: 100%; overflow-x: auto; }
.info-tip { color: hsl(var(--subtle-foreground)); display: inline-flex; }
.plain { list-style: none; margin: 0; padding: 0; }
.gap-item { border-bottom: 1px solid hsl(var(--border)); padding-bottom: 8px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.card-grid > .card { min-width: 0; overflow-wrap: anywhere; }
.card-grid > .card .row { align-items: flex-start; }
.card-grid > .card .badge { height: auto; min-height: 20px; white-space: normal; }
.trace-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trace-item { border: 1px solid hsl(var(--border)); padding: 6px 8px; margin-bottom: 6px; }
.swimlane { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.lane-step { border: 1px solid hsl(var(--border-strong)); padding: 6px 10px; background: hsl(var(--panel)); position: relative; }
.lane-step + .lane-step::before { content: "→"; position: absolute; left: -12px; top: 6px; color: hsl(var(--muted-foreground)); }
.flow { border: 1px solid hsl(var(--border)); padding: 10px; }
.matrix .cell-on { font-weight: 650; }
.crud-on { font-weight: 700; margin-right: 3px; } .crud-off { color: hsl(var(--subtle-foreground)); margin-right: 3px; }
.inline-details > summary { cursor: pointer; color: hsl(var(--muted-foreground)); }
.accordion { border: 1px solid hsl(var(--border)); padding: 8px 10px; margin-bottom: 6px; }
.accordion.nested { margin: 6px 0 0 8px; }
.accordion > summary { cursor: pointer; }
.chip-on { color: hsl(var(--success-fg)); }
.link-btn { background: none; border: 0; padding: 0; color: hsl(var(--foreground)); text-decoration: underline; cursor: pointer; font: inherit; }
/* widget detail drawer: full file / finding lists, loaded on demand */
.drawer.drawer-wide { width: 920px; }
.drawer-wide .table-scroll { max-height: none; }
.mini-graph { height: 280px; border: 1px solid hsl(var(--border)); background: hsl(var(--panel)); }

/* Graph Explorer */
.graph-layout { display: grid; grid-template-columns: 1fr; gap: 14px; }
.graph-canvas { height: calc(100vh - 300px); min-height: 420px; background: hsl(var(--panel)); }
.drawer[hidden] { display: none; }
.drawer-body { padding: 16px; overflow-y: auto; flex: 1; }
.legend .sw.t-0 { background: hsl(var(--chart-1)); } .legend .sw.t-1 { background: hsl(var(--chart-2)); }
.legend .sw.t-2 { background: hsl(var(--chart-3)); } .legend .sw.t-3 { background: hsl(var(--chart-4)); }
.legend .sw.t-4 { background: hsl(var(--chart-5)); } .legend .sw.t-5 { background: hsl(var(--chart-6)); }
.legend .sw.t-6 { background: hsl(var(--chart-7)); } .legend .sw.t-7 { background: hsl(var(--chart-8)); }
.legend .sw.s1 { background: hsl(var(--chart-1)); } .legend .sw.s2 { background: hsl(var(--chart-2)); }
.legend .sw.s3 { background: hsl(var(--chart-3)); } .legend .sw.s4 { background: hsl(var(--chart-4)); }
.legend .sw.s5 { background: hsl(var(--chart-5)); } .legend .sw.s6 { background: hsl(var(--chart-6)); }

/* ⌘K search */
.search-wrap .topbar-search { cursor: text; }
.search-input { border: 0; background: transparent; outline: none; font: inherit; font-size: 12.5px; width: 100%; flex: 1; min-width: 0; color: hsl(var(--foreground)); }
.search-menu { width: 420px; max-height: 60vh; overflow-y: auto; }
.search-wrap:not(.open) .search-menu { display: none; }

/* =====================================================================
   Matte colour layer: extra series, severity, gauges, new chart types,
   KPI accents, insight callouts and Knowledge Explorer navigation.
   Hue stays data-coded: each accent maps to a series / severity / tone.
   ===================================================================== */
.chart .ring.stroke-7 { stroke: hsl(var(--chart-7)); } .chart .ring.stroke-8 { stroke: hsl(var(--chart-8)); }
.chart .ring.ring-good { stroke: hsl(var(--chart-2)); } .chart .ring.ring-fair { stroke: hsl(var(--chart-4)); }
.chart .ring.ring-poor { stroke: hsl(var(--chart-3)); } .chart .ring.ring-rest { stroke: hsl(var(--track)); }
.chart .ring.sev-critical { stroke: hsl(var(--sev-critical)); } .chart .ring.sev-high { stroke: hsl(var(--sev-high)); }
.chart .ring.sev-medium { stroke: hsl(var(--sev-medium)); } .chart .ring.sev-low { stroke: hsl(var(--sev-low)); }
.chart .ring.sev-info { stroke: hsl(var(--sev-info)); }
.chart .area.s4 { fill: hsl(var(--chart-4)); } .chart .area.s5 { fill: hsl(var(--chart-5)); }
.chart .area.s6 { fill: hsl(var(--chart-6)); }
.chart .area { opacity: .16; }
.chart .conv { font-weight: 500; fill: hsl(var(--muted-foreground)); }
.legend .sw.s7 { background: hsl(var(--chart-7)); } .legend .sw.s8 { background: hsl(var(--chart-8)); }
.sw.sev-critical { background: hsl(var(--sev-critical)); } .sw.sev-high { background: hsl(var(--sev-high)); }
.sw.sev-medium { background: hsl(var(--sev-medium)); } .sw.sev-low { background: hsl(var(--sev-low)); }
.sw.sev-info { background: hsl(var(--sev-info)); }

/* donut + legend list */
.donut-legend { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-legend > .chart-fig { flex: none; }
.legend-list { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.legend-list li { display: flex; align-items: center; gap: 8px; }
.legend-list .sw { width: 10px; height: 10px; flex: none; }
.legend-list .s1 { background: hsl(var(--chart-1)); } .legend-list .s2 { background: hsl(var(--chart-2)); }
.legend-list .s3 { background: hsl(var(--chart-3)); } .legend-list .s4 { background: hsl(var(--chart-4)); }
.legend-list .s5 { background: hsl(var(--chart-5)); } .legend-list .s6 { background: hsl(var(--chart-6)); }
.legend-list .s7 { background: hsl(var(--chart-7)); } .legend-list .s8 { background: hsl(var(--chart-8)); }
.legend-list .muted { min-width: 46px; text-align: right; }

/* proportion bar */
.split-bar .chart { height: 14px; }

/* radar */
.chart .radar-ring { fill: none; stroke: hsl(var(--grid)); stroke-width: 1; }
.chart .radar-area { fill: hsl(var(--chart-1) / .22); stroke: hsl(var(--chart-1)); stroke-width: 1.75; stroke-linejoin: round; }
.chart .radar-dot { fill: hsl(var(--chart-1)); stroke: hsl(var(--panel)); stroke-width: 1.5; }

/* treemap */
.chart .tm-cell { stroke: hsl(var(--panel)); stroke-width: 2; }
.chart .tm-label { font-size: 11px; font-weight: 600; fill: hsl(var(--on-chart)); }
.chart .tm-value { font-size: 10px; fill: hsl(var(--on-chart)); opacity: .85; font-variant-numeric: tabular-nums; }

/* KPI tiles: a data-coded accent rule + matte tint per tile, sparkline in the same hue */
.kpi-grid > .metric { border-top: 3px solid hsl(var(--tile, var(--chart-1))); background: hsl(var(--tile, var(--chart-1)) / .05); }
.kpi-grid > .metric:nth-child(8n+1) { --tile: var(--chart-1); } .kpi-grid > .metric:nth-child(8n+2) { --tile: var(--chart-3); }
.kpi-grid > .metric:nth-child(8n+3) { --tile: var(--chart-4); } .kpi-grid > .metric:nth-child(8n+4) { --tile: var(--chart-2); }
.kpi-grid > .metric:nth-child(8n+5) { --tile: var(--chart-5); } .kpi-grid > .metric:nth-child(8n+6) { --tile: var(--chart-6); }
.kpi-grid > .metric:nth-child(8n+7) { --tile: var(--chart-7); } .kpi-grid > .metric:nth-child(8n+8) { --tile: var(--chart-8); }
.kpi-grid > .metric .spark .line { stroke: hsl(var(--tile, var(--chart-1))); }
.kpi-grid > .metric .spark .area { fill: hsl(var(--tile, var(--chart-1))); opacity: .18; }
.kpi-mix { margin-top: 12px; padding: 12px 16px; border: 1px solid hsl(var(--border)); background: hsl(var(--panel)); }

/* widget titles carry a small series-coloured marker so panels are easy to tell apart */
.widgets > .widget .panel-title { display: flex; align-items: center; gap: 8px; }
.widgets > .widget .panel-title::before { content: ""; width: 8px; height: 8px; flex: none; background: hsl(var(--mk, var(--chart-1))); }
.widgets > .widget:nth-child(8n+2) { --mk: var(--chart-3); } .widgets > .widget:nth-child(8n+3) { --mk: var(--chart-2); }
.widgets > .widget:nth-child(8n+4) { --mk: var(--chart-4); } .widgets > .widget:nth-child(8n+5) { --mk: var(--chart-5); }
.widgets > .widget:nth-child(8n+6) { --mk: var(--chart-6); } .widgets > .widget:nth-child(8n+7) { --mk: var(--chart-7); }
.widgets > .widget:nth-child(8n+8) { --mk: var(--chart-8); }
.widget .panel-head { background: hsl(var(--panel-2)); }

/* insight callouts: derived, data-coded sentences above a widget's detail */
.insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 14px; }
.insight { border: 1px solid hsl(var(--border)); border-left: 3px solid hsl(var(--tone, var(--chart-1))); padding: 10px 12px;
  background: hsl(var(--tone, var(--chart-1)) / .06); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.insight .iv { font-size: 18px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.insight .ik { font-size: 11.5px; color: hsl(var(--muted-foreground)); }
.insight .id { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.tone-bad { --tone: var(--sev-critical); } .tone-warn { --tone: var(--sev-medium); }
.tone-good { --tone: var(--sev-low); } .tone-info { --tone: var(--chart-1); }

/* inline meters inside table cells */
.meter { display: inline-flex; align-items: center; gap: 8px; }
.meter svg { width: 70px; height: 6px; flex: none; }
.meter .track-bar { fill: hsl(var(--track)); }
.meter .fill-good { fill: hsl(var(--chart-2)); } .meter .fill-fair { fill: hsl(var(--chart-4)); }
.meter .fill-poor { fill: hsl(var(--chart-3)); }

/* severity-coded list items (gaps, risks) */
.sev-item { border-left: 3px solid hsl(var(--tone, var(--border-strong))); padding: 8px 10px; background: hsl(var(--tone, var(--border-strong)) / .05); }
.sev-item + .sev-item { margin-top: 8px; }
.sev-item.gap-item { border-bottom: 0; }

/* Knowledge Explorer: section tabs + "explore by area" cards */
.section-tabs { overflow-x: auto; margin-bottom: 16px; scrollbar-width: thin; }
.section-tabs a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.section-tabs a .icon-sm { opacity: .7; }
.section-tabs a.on .icon-sm { opacity: 1; color: hsl(var(--chart-1)); }
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.area-card { padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; border-top: 3px solid hsl(var(--tile, var(--chart-1))); }
.area-card .area-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center;
  background: hsl(var(--tile, var(--chart-1)) / .14); color: hsl(var(--tile, var(--chart-1))); }
.area-card .area-t, .area-card .area-d, .area-card .area-go { display: block; }
.area-card .area-t { font-weight: 640; font-size: 13px; color: hsl(var(--foreground)); }
.area-card .area-d { font-size: 11.5px; color: hsl(var(--muted-foreground)); margin-top: 2px; line-height: 1.45; }
.area-card .area-go { font-size: 11.5px; margin-top: 6px; color: hsl(var(--tile, var(--chart-1))); font-weight: 600; }
.area-grid > .area-card:nth-child(6n+1) { --tile: var(--chart-1); } .area-grid > .area-card:nth-child(6n+2) { --tile: var(--chart-2); }
.area-grid > .area-card:nth-child(6n+3) { --tile: var(--chart-3); } .area-grid > .area-card:nth-child(6n+4) { --tile: var(--chart-5); }
.area-grid > .area-card:nth-child(6n+5) { --tile: var(--chart-6); } .area-grid > .area-card:nth-child(6n+6) { --tile: var(--chart-4); }

@media (max-width: 960px) {
  .trace-cols { grid-template-columns: 1fr; }
  .search-menu { width: 92vw; }
}