/* THOR report-loading overlay — radial data-flow animation. Follows the app accent (var(--primary)). */
   Shell reuses the app's .modal-backdrop/.modal-dialog so it matches every other dialog. */

.rlo-backdrop { z-index: 1200; animation: rlo-fade .2s ease; }

.rlo-dialog { width: min(660px, 94vw); max-width: 660px; }
.rlo-header { justify-content: center; }
.rlo-body { text-align: center; }

.rlo-phase {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--on-surface, #1c1c1c);
}
.rlo-spin-icon { color: var(--primary); font-size: 28px; animation: rlo-rotate 1.5s linear infinite; }
.rlo-pulse-icon { color: var(--primary); font-size: 28px; animation: rlo-pulse 1.4s ease-in-out infinite; }

.rlo-dots { display: inline-flex; gap: 4px; }
.rlo-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); opacity: .3; animation: rlo-blink 1.2s infinite; }
.rlo-dots i:nth-child(2) { animation-delay: .2s; }
.rlo-dots i:nth-child(3) { animation-delay: .4s; }

/* ── Stage holds both scenes (cross-faded) ── */
.rlo-stage { position: relative; width: 520px; height: 520px; max-width: 100%; margin: 10px auto 8px; }
.rlo-scene { position: absolute; inset: 0; transition: opacity .5s ease, transform .5s ease; }
.rlo-scene-b { opacity: 0; transform: scale(.85); pointer-events: none; }
.rlo-stage-b .rlo-scene-a { opacity: 0; transform: scale(.85); pointer-events: none; }
.rlo-stage-b .rlo-scene-b { opacity: 1; transform: scale(1); }

/* ── Centre: the THOR report ── */
.rlo-center {
    position: absolute;
    left: 260px; top: 260px;
    width: 116px; height: 116px;
    margin: -58px 0 0 -58px;
    border-radius: 50%;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
    animation: rlo-pulse 2s ease-in-out infinite;
}
.rlo-center .material-symbols-outlined { color: #fff; font-size: 58px; }

/* ── Spokes (centre → factory) with inward-flowing packets ── */
.rlo-spoke {
    position: absolute;
    left: 260px; top: 260px;
    height: 2px;
    transform-origin: left center;
    z-index: 1;
}
.rlo-spoke-line { width: 100%; height: 100%; background: var(--outline-variant, #d8d8d8); border-radius: 2px; transition: background .4s ease; }
.rlo-loading .rlo-spoke-line { background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 15%, transparent), color-mix(in srgb, var(--primary) 55%, transparent)); }
.rlo-done .rlo-spoke-line { background: linear-gradient(90deg, color-mix(in srgb, var(--success) 25%, transparent), color-mix(in srgb, var(--success) 70%, transparent)); }
.rlo-failed .rlo-spoke-line { background: color-mix(in srgb, var(--error) 35%, transparent); }

.rlo-packet {
    position: absolute; top: -3px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0;
}
.rlo-loading .rlo-packet { animation: rlo-packet-in 1.1s linear infinite; }
.rlo-loading .rlo-packet2 { animation-delay: .55s; }

/* ── Factory nodes ── */
.rlo-fac {
    position: absolute;
    width: 58px; height: 58px;
    margin: -29px 0 0 -29px;
    border-radius: 0;
    background: var(--surface-container-high, #f0f0f0);
    border: 2px solid var(--outline-variant, #d8d8d8);
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    transition: background .4s ease, border-color .4s ease, transform .3s ease;
}
.rlo-fac-ico { font-size: 32px; color: var(--on-surface-variant, #888); transition: color .4s ease; }
.rlo-fac.rlo-loading { border-color: var(--primary); animation: rlo-pulse 1.3s ease-in-out infinite; }
.rlo-fac.rlo-loading .rlo-fac-ico { color: var(--primary); }
.rlo-fac.rlo-done { border-color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--surface-container-high, #f0f0f0)); }
.rlo-fac.rlo-done .rlo-fac-ico { color: var(--success); }
.rlo-fac.rlo-failed { border-color: var(--error); background: color-mix(in srgb, var(--error) 12%, var(--surface-container-high, #f0f0f0)); }
.rlo-fac.rlo-failed .rlo-fac-ico { color: var(--error); }

.rlo-fac-badge { position: absolute; right: -9px; top: -9px; font-size: 22px; background: var(--surface-container-lowest, #fff); border-radius: 50%; }
.rlo-badge-ok { color: var(--success); }
.rlo-badge-err { color: var(--error); }
.rlo-fac-name { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: .72rem; font-weight: 600; color: var(--on-surface-variant, #666); white-space: nowrap; }

/* ── Scene B: download / parse ── */
.rlo-dl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.rlo-dl-icon { font-size: 104px; color: var(--primary); animation: rlo-pulse 1.6s ease-in-out infinite; }
.rlo-dl-rain { position: absolute; top: -78px; left: 0; right: 0; height: 78px; display: flex; justify-content: center; gap: 12px; }
.rlo-dl-rain span { width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 70%, transparent); animation: rlo-rain 1s linear infinite; }
.rlo-dl-rain span:nth-child(2) { animation-delay: .2s; }
.rlo-dl-rain span:nth-child(3) { animation-delay: .4s; }
.rlo-dl-rain span:nth-child(4) { animation-delay: .6s; }
.rlo-dl-rain span:nth-child(5) { animation-delay: .8s; }
.rlo-dl-size { margin-top: 12px; font-size: 1.05rem; font-weight: 600; color: var(--on-surface, #1c1c1c); }

/* ── Scene B (building): a table assembling cell-by-cell ── */
.rlo-build { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.rlo-build-ico { font-size: 76px; color: var(--primary); animation: rlo-pulse 1.6s ease-in-out infinite; }
.rlo-build-grid { display: grid; grid-template-columns: repeat(4, 62px); grid-auto-rows: 30px; gap: 7px; }
.rlo-build-grid span {
    border-radius: 4px;
    background: color-mix(in srgb, var(--primary) 16%, var(--surface-container, #f0f0f0));
    border: 1.5px solid color-mix(in srgb, var(--primary) 55%, transparent);
    opacity: 0; transform: scale(.6);
    animation: rlo-cell 1.9s ease-in-out infinite;
}
.rlo-build-grid span.rlo-build-head { background: var(--primary); border-color: var(--primary); }

/* ── Progress bar ── */
.rlo-progress-row { display: flex; align-items: center; gap: 12px; margin: 4px 4px 2px; }
.rlo-bar { position: relative; flex: 1; height: 10px; border-radius: 6px; background: var(--surface-container-high, #eee); overflow: hidden; }
.rlo-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--primary-container), var(--primary)); transition: width .3s ease; }
.rlo-bar-indeterminate::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
    width: 40%;
    animation: rlo-shimmer 1.1s linear infinite;
}
.rlo-count { font-size: .95rem; font-weight: 700; color: var(--on-surface, #1c1c1c); min-width: 56px; text-align: right; }

/* ── Keyframes ── */
@keyframes rlo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rlo-rotate { to { transform: rotate(360deg); } }
@keyframes rlo-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes rlo-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes rlo-packet-in { 0% { left: calc(100% - 9px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
@keyframes rlo-rain { 0% { transform: translateY(-8px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
@keyframes rlo-shimmer { from { left: -40%; } to { left: 100%; } }
/* Cells pop in (staggered → row-by-row), hold, then fade — reads as a table being assembled. */
@keyframes rlo-cell { 0% { opacity: 0; transform: scale(.6); } 18% { opacity: 1; transform: scale(1); } 82% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } }

@media (prefers-reduced-motion: reduce) {
    .rlo-spin-icon, .rlo-pulse-icon, .rlo-center, .rlo-fac, .rlo-packet, .rlo-dl-icon,
    .rlo-dl-rain span, .rlo-build-ico, .rlo-build-grid span, .rlo-bar-indeterminate::after, .rlo-dots i {
        animation: none !important;
    }
    .rlo-build-grid span { opacity: 1; transform: none; }
}