/* aeo-audit: aeo-gauge — animated CSS-only score gauge for the dashboard.
 * Tokens: --aeo-gauge-color (defaults to --bg-primary), --aeo-gauge-size (default 180px).
 * Animates the conic-gradient fill via @property --aeo-p so the move is interpolatable.
 * Respects prefers-reduced-motion.
 */

@property --aeo-p {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.aeo-gauge {
    --aeo-p: 0;
    --aeo-gauge-size: 180px;
    --aeo-gauge-color: var(--bg-primary);
    width: var(--aeo-gauge-size);
    height: var(--aeo-gauge-size);
    position: relative;
}
.aeo-gauge::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: conic-gradient(var(--aeo-gauge-color) calc(var(--aeo-p) * 1%), rgb(229 231 235) 0);
    transition: --aeo-p 900ms cubic-bezier(.2, .8, .2, 1);
}
.dark .aeo-gauge::before {
    background: conic-gradient(var(--aeo-gauge-color) calc(var(--aeo-p) * 1%), rgb(75 85 99) 0);
}
.aeo-gauge::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 9999px;
    background-color: #ffffff;
}
.dark .aeo-gauge::after { background-color: rgb(23 23 23); }
.aeo-gauge__num {
    /* Round 11 — z-index lifts the centered text ABOVE .aeo-gauge::after.
     * Without it, ::after (the white inner circle) paints last (source order)
     * and silently covers the text. Latent bug since the gauge was first
     * built; surfaced after D-092's data swap because the user expected to
     * SEE the AIV score change inside the ring. */
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    line-height: 1.1;
}
.aeo-gauge__score {
    /* Round 11 — bumped 1.875rem → 2.5rem so the AIV score reads as the
     * dominant visual element above the fold (D-092 acceptance criterion). */
    font-size: 2.5rem;
    color: var(--txt-strong);
}
.dark .aeo-gauge__score { color: #ffffff; }
.aeo-gauge__label {
    font-size: 0.75rem;
    color: rgb(107 114 128);
    font-weight: 500;
    margin-top: 0.25rem;
}

/* Score-band colour helpers — apply on the wrapper to colour the gauge */
.aeo-gauge--great { --aeo-gauge-color: #16a34a; }
.aeo-gauge--good  { --aeo-gauge-color: var(--bg-primary); }
.aeo-gauge--ok    { --aeo-gauge-color: #d97706; }
.aeo-gauge--bad   { --aeo-gauge-color: #dc2626; }

@media (prefers-reduced-motion: reduce) {
    .aeo-gauge::before { transition: none; }
}