/* Standalone numeric score component. Both sizes use identical geometry. */
.oej-gauge {
  --gauge-ink: #14304a; --gauge-muted: #526476; --gauge-track: #e5ddd3;
  position: relative; width: 100%; max-width: 260px; aspect-ratio: 300 / 260;
  container-type: inline-size; color: var(--gauge-ink); flex-shrink: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.oej-gauge--compact { max-width: 168px; }
.oej-gauge svg { display: block; width: 100%; height: auto; }
.oej-gauge__track, .oej-gauge__value { fill: none; stroke-width: 20; stroke-linecap: butt; }
.oej-gauge__track { stroke: var(--gauge-track); }
.oej-gauge__band { fill: none; stroke-width: 7; }
.oej-gauge__text { position: absolute; top: 55.77%; left: 23%; width: 54%; transform: translateY(-50%); text-align: center; }
.oej-gauge__reading { display: flex; align-items: baseline; justify-content: center; gap: 1cqi; white-space: nowrap; }
.oej-gauge__score { font-size: 20cqi; line-height: 1.05; font-weight: 750; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.oej-gauge__denominator { font-size: 6cqi; color: var(--gauge-muted); }
.oej-gauge__name { display: block; font-size: 7.2cqi; font-weight: 600; line-height: 1.4; margin-top: 3cqi; white-space: nowrap; }
.oej-gauge[data-score='none'] .oej-gauge__name, .oej-gauge[data-band='none'] .oej-gauge__name { font-size: 8.4cqi; margin: 0; }
.oej-gauge[data-score='none'] .oej-gauge__track, .oej-gauge[data-band='none'] .oej-gauge__track { stroke-width: 2; stroke-dasharray: 4 6; }
.cover-sheet .oej-gauge, .print-sheet .oej-gauge { --gauge-ink: #14304a; --gauge-muted: #526476; --gauge-track: #e5ddd3; }
@media print {
  .oej-gauge { --gauge-ink: #111 !important; --gauge-muted: #444 !important; --gauge-track: #e5e5e5 !important; break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
@media (forced-colors: active) {
  .oej-gauge { --gauge-ink: CanvasText !important; --gauge-muted: CanvasText !important; --gauge-track: GrayText !important; }
  .oej-gauge__band { stroke: CanvasText; }
  .oej-gauge__value { stroke: Highlight; }
}
@media (prefers-reduced-motion: reduce) { .oej-gauge, .oej-gauge * { animation: none !important; transition: none !important; } }