/* Circular progress — i2t3 component styles
 * Pure CSS radial gauge via conic-gradient (no JS chart plugin, no SVG math).
 * The percentage is fed in as the --i2t3-cp-pct custom property; the ring colour
 * is the element's currentColor (set by a Bootstrap text-* class). A radial
 * mask punches the centre out of the conic disc so it becomes a true ring
 * (transparent hole — works on any background, fixes the white inner circle on
 * dark / coloured bands). The centre content (__value) is a sibling of the
 * masked ring, so it stays fully visible inside the hole.
 *
 * Diameter + ring thickness are ported from Karma's easyPieChart presets
 * (chartSize 145/175/225/250px, lineWidth 3/8/10/15px) into CSS size variants.
 */

.i2t3-circularprogress__gauge {
    /* md defaults (overridden by size variants below) */
    --i2t3-cp-size: 14rem;       /* ~225px */
    --i2t3-cp-thickness: .65rem; /* ~10px  */
    --i2t3-cp-track: #ccc;       /* Karma trackColor #CCC */
    position: relative;
    width: var(--i2t3-cp-size);
    height: var(--i2t3-cp-size);
    margin: 0 auto;
}

/* Size variants — diameter + ring thickness */
.i2t3-circularprogress--xs .i2t3-circularprogress__gauge {
    --i2t3-cp-size: 9rem;        /* ~145px */
    --i2t3-cp-thickness: .2rem;  /* ~3px   */
}
.i2t3-circularprogress--sm .i2t3-circularprogress__gauge {
    --i2t3-cp-size: 11rem;       /* ~175px */
    --i2t3-cp-thickness: .5rem;  /* ~8px   */
}
.i2t3-circularprogress--md .i2t3-circularprogress__gauge {
    --i2t3-cp-size: 14rem;       /* ~225px */
    --i2t3-cp-thickness: .65rem; /* ~10px  */
}
.i2t3-circularprogress--lg .i2t3-circularprogress__gauge {
    --i2t3-cp-size: 15.6rem;     /* ~250px */
    --i2t3-cp-thickness: .95rem; /* ~15px  */
}

/* The ring itself: a coloured conic disc with the centre masked transparent. */
.i2t3-circularprogress__circle {
    /* default = full target (no-JS / @property-unsupported fallback) */
    --i2t3-cp-pct: var(--i2t3-cp-target, 0);
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(currentColor calc(var(--i2t3-cp-pct, 0) * 1%), var(--i2t3-cp-track) 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--i2t3-cp-thickness)), #000 calc(100% - var(--i2t3-cp-thickness)));
            mask: radial-gradient(farthest-side, #0000 calc(100% - var(--i2t3-cp-thickness)), #000 calc(100% - var(--i2t3-cp-thickness)));
}

/* Centre content — sibling of the masked ring, sits in the transparent hole. */
.i2t3-circularprogress__value {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1;
    color: #212529;
    line-height: 1.1;
    text-align: center;
    pointer-events: none;
}

.i2t3-circularprogress__center-pct {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
}

/* title mode: bold label above the percentage, both centred in the ring */
.i2t3-circularprogress__center-title {
    display: block;
    font-weight: 600;
    font-size: 1.125rem;
}
.i2t3-circularprogress--xs .i2t3-circularprogress__center-title,
.i2t3-circularprogress--sm .i2t3-circularprogress__center-title {
    font-size: .875rem;
}
.i2t3-circularprogress--lg .i2t3-circularprogress__center-title {
    font-size: 1.25rem;
}
.i2t3-circularprogress--xs .i2t3-circularprogress__center-pct,
.i2t3-circularprogress--sm .i2t3-circularprogress__center-pct {
    font-size: 1rem;
}

/* Center icon — inherits the ring colour */
.i2t3-circularprogress__icon {
    color: currentColor;
    font-size: 2.375rem; /* Karma .only-icon: 38px */
    line-height: 1;
}
.i2t3-circularprogress--xs .i2t3-circularprogress__icon,
.i2t3-circularprogress--sm .i2t3-circularprogress__icon {
    font-size: 1.75rem;
}

.i2t3-circularprogress__title {
    font-weight: 600;
}

.i2t3-circularprogress__headline {
    font-weight: 700;
    margin-bottom: .25rem;
}

.i2t3-circularprogress__description {
    padding-inline: 1rem;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * Build-up animation: the ring grows from 0% to its target percentage when it
 * scrolls into view. The shared scroll-reveal script adds .is-revealed on the
 * .i2t3-animate gauge (which also runs the global opacity/zoom-in reveal); we
 * then animate the ring's --i2t3-cp-pct from 0 to the target supplied inline
 * as --i2t3-cp-target. Registering the property with @property allows the
 * custom property to be transitioned. Where @property is unsupported the ring
 * renders its final state instantly.
 * ------------------------------------------------------------------------- */
@property --i2t3-cp-pct {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .i2t3-circularprogress__gauge.i2t3-animate .i2t3-circularprogress__circle {
        --i2t3-cp-pct: 0;
        transition: --i2t3-cp-pct 1.2s ease-out;
    }
    .i2t3-circularprogress__gauge.i2t3-animate.is-revealed .i2t3-circularprogress__circle {
        --i2t3-cp-pct: var(--i2t3-cp-target, 0);
    }
}