/* Shared build-progress overlay — the SAME step-based "Building your app" screen
   used by the Finished module, so every SPA page (Designer, Tables, Fields, Events,
   Workspace…) shows one consistent build experience. Kept in lockstep with
   modules/Finished/Views/styles.css (.fx-bl-*). Theme-token driven. */
.fx-buildlock {
    position: fixed; inset: 0; z-index: 20000; display: none;
    align-items: center; justify-content: center; padding: 1.2rem;
    background: color-mix(in srgb, var(--pp-app-bg, #0b1020) 74%, transparent);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    animation: fxbl-fade .22s ease both;
}
.fx-buildlock.on { display: flex; }
@keyframes fxbl-fade { from { opacity: 0; } to { opacity: 1; } }
.fx-bl-card {
    width: min(94vw, 470px); background: var(--pp-surface, #fff);
    border: 1px solid var(--pp-border, #e6e9f0); border-radius: 20px;
    padding: 2rem 1.9rem 1.7rem; text-align: center;
    box-shadow: 0 34px 90px color-mix(in srgb, var(--pp-shadow-color, #0b1020) 45%, transparent);
    animation: fxbl-rise .3s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fxbl-rise { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.fx-bl-orb { position: relative; width: 76px; height: 76px; margin: 0 auto .95rem; }
.fx-bl-orb::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--pp-accent, #4f46e5), color-mix(in srgb, var(--pp-accent,#4f46e5) 12%, transparent) 55%, var(--pp-accent, #4f46e5));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
    animation: fxbl-spin 1.1s linear infinite;
}
.fx-bl-orb > i {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 1.7rem; color: var(--pp-accent, #4f46e5);
    animation: fxbl-pulse 1.6s ease-in-out infinite;
}
@keyframes fxbl-spin { to { transform: rotate(360deg); } }
@keyframes fxbl-pulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
.fx-bl-title { font-weight: 800; font-size: 1.18rem; margin: 0 0 .15rem; color: var(--pp-text, #172033); letter-spacing: -.01em; }
.fx-bl-msg { color: var(--pp-text-muted, #64748b); font-size: .9rem; min-height: 1.25em; margin: 0 0 1.15rem;
    transition: opacity .18s; }
.fx-bl-msg.swap { opacity: 0; }
.fx-bl-steps { list-style: none; margin: 0 0 1.2rem; padding: 0; text-align: left; display: grid; gap: .5rem; }
.fx-bl-step { display: flex; align-items: center; gap: .6rem; font-size: .86rem; color: var(--pp-text-muted, #64748b); transition: color .2s; }
.fx-bl-step .dot { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center;
    border: 2px solid var(--pp-border-strong, var(--pp-border, #cbd5e1)); font-size: .66rem; color: transparent; transition: all .25s; }
.fx-bl-step.active { color: var(--pp-text, #172033); font-weight: 650; }
.fx-bl-step.active .dot { border-color: var(--pp-accent, #4f46e5);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pp-accent,#4f46e5) 16%, transparent); }
.fx-bl-step.active .dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pp-accent, #4f46e5); animation: fxbl-pulse 1s ease-in-out infinite; }
.fx-bl-step.done { color: var(--pp-text, #172033); }
.fx-bl-step.done .dot { border-color: #16a34a; background: #16a34a; color: #fff; }
.fx-bl-step.done .dot::after { content: "\2713"; font-size: .72rem; font-weight: 700; }
.fx-bl-step.fail .dot { border-color: #dc2626; background: #dc2626; color: #fff; }
.fx-bl-step.fail .dot::after { content: "\00d7"; font-weight: 800; }
.fx-bl-bar { height: 6px; border-radius: 99px; background: var(--pp-surface-muted, #eef1f6); overflow: hidden; position: relative; }
.fx-bl-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 99px;
    background: var(--pp-accent, #4f46e5); animation: fxbl-slide 1.25s ease-in-out infinite; }
.fx-bl-bar.done::before { animation: none; width: 100%; background: #16a34a; }
.fx-bl-bar.fail::before { animation: none; width: 100%; background: #dc2626; }
@keyframes fxbl-slide { 0% { left: -42%; } 100% { left: 102%; } }
.fx-bl-foot { margin: .95rem 0 0; font-size: .76rem; color: var(--pp-text-muted, #94a3b8); }
.fx-bl-close { margin-top: 1rem; display: none; }
.fx-buildlock.finished .fx-bl-close { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
    .fx-buildlock, .fx-bl-card { animation: none; }
    .fx-bl-orb::before, .fx-bl-orb > i, .fx-bl-bar::before, .fx-bl-step.active .dot::after { animation: none; }
}
