/* ============================================================================
   Risk Score Gauge — the sizing contract for js/components/risk-score-gauge.js
   ============================================================================

   ⛔ THIS FILE IS LINKED FROM BOTH APP SHELLS ON PURPOSE. IT IS NOT A PAGE
   STYLESHEET AND MUST NOT BECOME ONE.

   `RiskScoreGauge.render()` emits `<svg viewBox="0 0 <size> <height>">` with NO
   width/height attributes, so the element has an intrinsic ratio and no
   intrinsic size. A block container therefore stretches it to 100% of the
   available width and derives the height from the ratio — the `size` the caller
   passes only sets the viewBox coordinate system, never the rendered pixels.
   Without a rule capping it, `config: { size: 180 }` is inert and the gauge
   grows to whatever the card is.

   That is exactly what it did. These rules lived in `dashboard-v2.css`, which is
   linked from NEITHER shell — it reaches a page only when a widget names it in
   its catalog `styles:` array. Eleven of the sixteen call sites that render this
   gauge never did, so on any route that loaded none of the five that do, the cap
   was simply absent. On KRI Overview (`kri-health-gauge` declares
   `/css/unified-kri.css`, which never mentions this component) the 180px gauge
   rendered at ~707x719px, filling its card, setting the height of the whole
   grid row and leaving the 180px donut beside it stranded above ~600px of empty
   card. The defect was in the CSS's REACH, not its content — so the fix is to
   put it where reach is not a per-widget decision, and the rules below are
   otherwise byte-for-byte what dashboard-v2.css carried.

   Consequently: never re-declare `.risk-score-gauge` sizing in a page
   stylesheet. Page-scoped needs are expressed by overriding the token —
   `--gauge-max-width` — on a more specific selector, which is what
   `widget-catalog.css` (260px/280px previews) and `unified-responses-redesign.css`
   already do. */

:root {
    --gauge-max-width: 220px;
}

.risk-score-gauge {
    width: 100%;
    max-width: var(--gauge-max-width, 220px);
    margin: 0 auto;
}

.risk-score-gauge svg {
    width: 100%;
    height: auto;
    overflow: visible;
    display: block;
    font-family: var(--font-family, Inter, system-ui, sans-serif);
}

/* The arc's stroke colour is set as an SVG presentation attribute from the
   score's risk band (risk-score-gauge.js#RISK_LEVELS), so there are deliberately
   no colour rules here. `fill: none` is also an attribute; `transform-origin`
   is not, and animateGauge() needs it. */
.risk-score-gauge .gauge-fill {
    fill: none;
    transform-origin: center;
}

.risk-score-gauge .gauge-target-label {
    text-align: center;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}

@media (max-width: 480px) {
    .risk-score-gauge {
        --gauge-max-width: 160px;
    }
}