.interval-dropdown__panel {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    pointer-events: none;
    transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1), transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top right;
}

.interval-dropdown[data-open] .interval-dropdown__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Chevron */
.interval-dropdown[data-open] .interval-dropdown__chevron {
    transform: rotate(180deg);
}

.interval-dropdown__active-dot {
    opacity: 0;
}

.interval-dropdown__option[data-active] .interval-dropdown__active-dot {
    opacity: 1;
}

.interval-dropdown[data-open] .interval-dropdown__option {
    animation: optionFadeIn 140ms ease both;
}

    .interval-dropdown[data-open] .interval-dropdown__option:nth-child(1) {
        animation-delay: 20ms;
    }

    .interval-dropdown[data-open] .interval-dropdown__option:nth-child(2) {
        animation-delay: 50ms;
    }

    .interval-dropdown[data-open] .interval-dropdown__option:nth-child(3) {
        animation-delay: 80ms;
    }

    .interval-dropdown[data-open] .interval-dropdown__option:nth-child(4) {
        animation-delay: 110ms;
    }

    .interval-dropdown[data-open] .interval-dropdown__option:nth-child(5) {
        animation-delay: 140ms;
    }

@keyframes optionFadeIn {
    from {
        opacity: 0;
        transform: translateX(4px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.interval-countdown {
    /* Hidden by default; shown by JS setting [data-visible] */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    /* Slide + fade out → in */
    opacity: 0;
    transform: scale(0.7) translateX(-4px);
    pointer-events: none;
    transition: opacity 200ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .interval-countdown[data-visible] {
        opacity: 1;
        transform: scale(1) translateX(0);
        pointer-events: auto;
    }

/* SVG positioned to fill the badge */
.interval-countdown__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Background track ring */
.interval-countdown__ring-track {
    stroke: rgba(var(--divider));
    fill: none;
}

/* Animated progress arc */
.interval-countdown__ring-progress {
    stroke: rgba(var(--accent-primary));
    fill: none;
    /* dasharray / dashoffset set by JS */
    transition: stroke-dashoffset 0ms linear; /* JS drives this frame-by-frame */
    will-change: stroke-dashoffset;
}

/* Number label centered inside the ring */
.interval-countdown__number {
    position: relative; /* above the SVG */
    z-index: 1;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    color: rgba(var(--dark));
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    /* Prevent layout shift when digit width changes */
    min-width: 12px;
    text-align: center;
}

    /* Two-digit numbers (10+) – scale down slightly so they fit */
    .interval-countdown__number:has-text-length-ge-2,
    .interval-countdown[data-two-digit] .interval-countdown__number {
        font-size: 7.5px;
    }