/* Button opts in */
.btn[data-busy] {
    position: relative;
    display: inline-grid; /* overlay layout */
    grid-template-areas: "stack";
    place-items: center; /* centers children */
}

    /* Both label & spinner share the same grid cell */
    .btn[data-busy] .btn-label,
    .btn[data-busy] .btn-spinner {
        grid-area: stack;
    }

/* Hide label while busy, but keep its width (no jump) */
.btn[aria-busy="true"] .btn-label {
    visibility: hidden;
    opacity: 0;
}

/* Spinner container (no fixed size, no margins) */
.btn[data-busy] .btn-spinner {
    display: none; /* shown via aria-busy */
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    position: static !important; /* grid does the centering */
    line-height: normal !important;
    vertical-align: baseline !important;
}

/* Show spinner while busy (grid centers it) */
.btn[aria-busy="true"] .btn-spinner {
    display: block;
}

.btn .btn-spinner .spin {
    display: block; /* not inline */
    box-sizing: border-box;
    width: 1em; /* ties to button font-size */
    aspect-ratio: 1 / 1; /* stays perfectly square */
    border: 2px solid currentColor; /* fixed px width = consistent arc */
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion:reduce) {
    .btn[data-busy] .btn-spinner .spin {
        animation: none;
    }
}