/* loading-overlay — @tokens: --space-xs, --surface, --z-overlay, --z-modal, --transition-base, --fs-50, --text-body */
/* Async-lock veil that covers a position:relative host (a card/section) and centers a composed
   .hzo-spinner. The host MUST be position:relative — or use the --fixed modifier for a
   full-viewport lock. Styles ONLY its own classes; never the composed .hzo-spinner. */
.hzo-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    background: color-mix(in srgb, var(--surface, #fff) 65%, transparent);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base) ease, visibility var(--transition-base) ease;
}
.hzo-loading-overlay.is-active {
    opacity: 1;
    visibility: visible;
}
.hzo-loading-overlay__label {
    font-size: var(--fs-50);
    color: var(--text-body, currentColor);
}

/* Full-viewport variant — pins to the viewport and stacks at modal level. */
.hzo-loading-overlay--fixed {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
}

@media (prefers-reduced-motion: reduce) {
    .hzo-loading-overlay { transition: none; }
}