/* UI kit · radar, Pareto and vibration trend. */
/* Radar: recessive rings and spokes, thin outlined areas. */
.kit-radar {
  display: grid;
  justify-items: center;
  margin: 0;
}
.kit-radar svg {
  width: min(100%, 300px);
  overflow: visible;
}
.kit-radar .ring,
.kit-radar .axis {
  fill: none;
  stroke: var(--hud-border);
}
.kit-radar text {
  fill: var(--hud-muted);
  font-size: 9px;
  text-anchor: middle;
  dominant-baseline: middle;
}
.kit-radar .area {
  fill: var(--c);
  fill-opacity: 0.14;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linejoin: round;
}
.kit-radar ul,
.kit-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 13px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  color: var(--hud-muted);
  font-size: 12px;
}
.kit-radar li::before,
.kit-legend li::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 2px;
  background: var(--c, var(--hud-muted));
  vertical-align: -1px;
}

/* Pareto: grey bars, accent for the vital few, cumulative line on the same percent axis. */
.kit-pareto {
  margin: 0;
}
.kit-pareto svg {
  width: 100%;
  overflow: visible;
}
.kit-pareto .grid {
  stroke: var(--hud-border);
}
.kit-pareto .rule80 {
  stroke: var(--hud-muted);
  stroke-dasharray: 4 3;
}
.kit-pareto .tick,
.kit-pareto .cat {
  fill: var(--hud-muted);
  font-size: 10px;
}
.kit-pareto .tick {
  text-anchor: end;
}
.kit-pareto .cat {
  text-anchor: middle;
}
.kit-pareto rect.vital {
  fill: var(--accent);
}
.kit-pareto rect.rest {
  fill: var(--surface-sunk, #cfd3d9);
  stroke: var(--hud-border);
}
.kit-pareto polyline {
  fill: none;
  stroke: var(--hud-text);
  stroke-width: 2;
}
.kit-pareto circle {
  fill: var(--hud-text);
  stroke: var(--surface, #fff);
  stroke-width: 2;
}
.kit-legend .vital {
  --c: var(--accent);
}
.kit-legend .rest {
  --c: var(--surface-sunk, #cfd3d9);
}
.kit-legend .cum {
  --c: var(--hud-text);
}

/* Vibration trend: alert and danger zones, thin line, status with icon and text. */
.kit-vibration {
  display: grid;
  gap: 6px;
  margin: 0;
}
.kit-vibration figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.kit-vibration figcaption span {
  color: var(--hud-muted);
  font-variant-numeric: tabular-nums;
}
.kit-vibration em {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  margin-left: auto;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  background: var(--ok-soft);
  color: var(--ok);
}
.kit-vibration[data-level='alerta'] em {
  background: var(--warn-soft);
  color: var(--warn);
}
.kit-vibration[data-level='critico'] em {
  background: var(--bad-soft);
  color: var(--bad);
}
.kit-vibration > svg {
  width: 100%;
  height: 110px;
}
.kit-vibration .zone-alert {
  fill: rgb(250 162 27 / 0.12);
}
.kit-vibration .zone-danger {
  fill: rgb(255 90 82 / 0.12);
}
.kit-vibration .lim {
  stroke: var(--warn);
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}
.kit-vibration .lim.danger {
  stroke: var(--bad);
}
.kit-vibration polyline {
  fill: none;
  stroke: var(--hud-text);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.kit-vibration small {
  color: var(--hud-muted);
}