/**
 * Busy dialog
 * ===========
 * A blocking veil for operations that take tens of seconds — a withdrawal
 * spends ~7 s fetching the merkle path, ~3 s proving and ~12 s submitting,
 * and until it lands the page must not accept another click.
 *
 * The veil and the panel come from forge core (`.ds-overlay` / `.ds-dialog`,
 * served via /shared/css/toast.css) — this file adds only what core has no
 * opinion about: the title row, the note, the spinner and how a `.steps` list
 * sits inside a dialog. The panel hosts the live steps, so the person sees
 * which stage is running rather than an opaque spinner: "still fetching" is
 * reassuring, "please wait" is not.
 */

.busy {
    width: 100%;
    max-width: 30rem;
    max-height: 100%;
    overflow-y: auto;
}

.busy-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

/* Note under the title: how long this usually takes, and why leaving is a
   bad idea. Prose, not a label. */
.busy-note {
    margin-top: var(--space-3);
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--color-text-tertiary);
}

/* The steps list sits flush inside the dialog — the dialog is already a card,
   so the panel chrome from steps.css would be a box inside a box. */
.busy .steps {
    background: transparent;
    border: 0;
    padding: 0;
    margin-top: var(--space-5);
}

.busy-spinner {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 2px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: busy-spin .7s linear infinite;
}

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

/* Only shown once the operation failed — while it runs there is deliberately
   no way out, which is the point of the veil. */
.busy-close {
    display: none;
    margin-top: var(--space-5);
    width: 100%;
}

.busy.is-error .busy-spinner { display: none; }
.busy.is-error .busy-close { display: block; }

@media (prefers-reduced-motion: reduce) {
    .busy-spinner { animation-duration: 2s; }
}