/**
 * gauge.css — Canonical styles for js/components/gauge.js's renderGauge().
 *
 * Consolidated here (Dashboard Experience V2, Roadmap Phase 0 Task 3) as the
 * architecturally correct home for a generic component's CSS — previously
 * only defined page-locally in css/pages/org-appraisals.css (~L868-894),
 * which duplicated this component's markup contract. That page's copy is
 * left untouched (out of scope, zero risk to the existing B2B surface);
 * this file is now the canonical definition for every new consumer.
 */

.ci-gauge {
  position: relative;
  width: 100%;
  text-align: center;
}

.ci-gauge__svg {
  width: 100%;
  height: auto;
  display: block;
}

.ci-gauge__score {
  font-size: var(--font-size-3xl, 2.25rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-top: calc(-1 * var(--space-8));
  font-variant-numeric: tabular-nums;
}

.ci-gauge__band {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
}