/* The score gauge (gauge.js). Colours are muted on purpose: a score is information, not an alarm. */

:root {
  --gauge-low: #c4644f;
  --gauge-mid: #d8a640;
  --gauge-high: #3e8a63;
  --gauge-track: #d5ddd8;
}

.gauge { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 280px; margin: 0 auto; }
.gauge svg { width: 100%; height: auto; display: block; overflow: visible; }
.gauge-band { fill: none; stroke-width: 16; stroke-linecap: round; }
.gauge-track { stroke: var(--gauge-track); }
.gauge-needle { fill: var(--ink, #17201c); }
.gauge-hub { fill: var(--ink, #17201c); }
.gauge-number { font: 700 44px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--ink, #17201c);
                text-anchor: middle; font-variant-numeric: tabular-nums; }
.gauge-out-of, .gauge-end { font: 12px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--muted, #55615b);
                            text-anchor: middle; }
.gauge-empty .gauge-number { fill: var(--muted, #55615b); }
.gauge-caption { margin-top: 6px; font-size: 14px; color: var(--muted, #55615b); text-align: center; }
.gauge-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--warn-tint, #fdf3dc);
              color: var(--warn, #8a5a00); font-weight: 700; font-size: 12px; letter-spacing: .02em; }

.gauge-small { max-width: 132px; margin: 0; }
.gauge-small .gauge-out-of, .gauge-small .gauge-end { display: none; }
.gauge-small .gauge-caption { font-size: 12px; margin-top: 2px; }