/* cz-hud — anéis, arcos e marcações vetoriais (SVG gerado por cz-hud.js)
   Uso: <div class="cz-hud" data-value="72" data-max="100" data-label="Capacidade" data-unit="%"></div>
   Escala com o contêiner; o valor central continua legível em qualquer tamanho. */

.cz-hud {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1;
  margin-inline: auto;
  container-type: inline-size;
}
.cz-hud svg { width: 100%; height: 100%; overflow: visible; }

.cz-hud__track { fill: none; stroke: var(--cz-border-faint); }
.cz-hud__arc {
  fill: none;
  stroke: var(--cz-cyan);
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cz-cyan) 70%, transparent));
  transition: stroke-dashoffset 1.2s var(--cz-ease-out);
}
.cz-hud__arc--violet { stroke: var(--cz-violet-soft); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cz-violet) 70%, transparent)); }
.cz-hud__ring { fill: none; stroke: var(--cz-border); }
.cz-hud__ring--dashed { stroke-dasharray: 2 6; }
.cz-hud__ticks { fill: none; stroke: var(--cz-cyan); opacity: 0.55; }
.cz-hud__ticks--major { stroke: var(--cz-cyan-soft); opacity: 0.9; }
.cz-hud__marker { fill: var(--cz-orange); }

.cz-hud__spin { transform-origin: 50% 50%; animation: cz-hud-spin 40s linear infinite; }
.cz-hud__spin--reverse { animation-duration: 70s; animation-direction: reverse; }
@keyframes cz-hud-spin { to { transform: rotate(360deg); } }

.cz-hud__readout {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
}
.cz-hud__value {
  font-family: var(--cz-font-display);
  font-size: clamp(1.75rem, 18cqi, 3.5rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--cz-text-strong);
  text-shadow: var(--cz-text-glow);
}
.cz-hud__unit { font-size: 0.45em; color: var(--cz-cyan); margin-left: 2px; }
.cz-hud__label {
  max-width: 60cqi;
  font-family: var(--cz-font-mono);
  font-size: clamp(0.625rem, 3.6cqi, 0.8rem);
  letter-spacing: var(--cz-tracking-label);
  text-transform: uppercase;
  color: var(--cz-muted);
}
.cz-hud__sub { font-family: var(--cz-font-mono); font-size: clamp(0.625rem, 3.2cqi, 0.75rem); color: var(--cz-faint); }

@media (prefers-reduced-motion: reduce) {
  .cz-hud__spin { animation: none; }
  .cz-hud__arc { transition: none; }
}