/* The illustration is decorative; only server responses advance the task list. */
#ib-processing {
    --ib-dossier-ink: #0b2347;
    --ib-dossier-muted: #526580;
    --ib-dossier-purple: #5945b6;
    --ib-dossier-ease: cubic-bezier(.2, .7, .2, 1);
    position: relative;
    isolation: isolate;
    color: var(--ib-dossier-ink);
    padding: 3px 0 8px;
    outline: none;
}

#ib-processing[hidden],
#ib-processing [hidden] { display: none !important; }

#ib-processing .ib-processing-heading { text-align: center; margin: 0 auto 12px; max-width: 830px; }
#ib-processing .ib-processing-heading > .ib-eyebrow { color: var(--ib-dossier-muted); margin-bottom: 12px; }
#ib-processing h1 { font-size: clamp(30px, 5.7vw, 58px); font-weight: 720; line-height: 1.12; letter-spacing: -.055em; text-wrap: balance; }
#ib-processing h1 > span { color: inherit; }
#ib-processing .ib-processing-marker { position: relative; z-index: 0; display: inline-block; white-space: nowrap; }
#ib-processing .ib-processing-marker::before,
#ib-processing .ib-processing-marker::after { content: ''; position: absolute; z-index: -1; left: -3%; right: -4%; background: #e5dcff; border-radius: 40% 12% 26% 9%; }
#ib-processing .ib-processing-marker::before { top: 22%; bottom: 3%; transform: rotate(-2.2deg); }
#ib-processing .ib-processing-marker::after { top: 11%; bottom: 14%; opacity: .6; transform: rotate(1.5deg); }
#ib-processing .ib-processing-heading > p:last-child { color: var(--ib-dossier-muted); font-size: 15px; line-height: 1.6; max-width: 580px; margin: 14px auto 0; text-wrap: pretty; }

#ib-processing .ib-processing-stage { display: grid; min-width: 0; }
#ib-processing .ib-processing-visual { position: relative; min-width: 0; width: 100%; max-width: 500px; margin-inline: auto; }
#ib-processing .ib-dossier-art { display: block; width: 100%; height: auto; overflow: visible; }
#ib-processing .ib-processing-note { position: absolute; left: 0; bottom: 11%; display: flex; flex-direction: column; align-items: center; color: #162c52; transform: rotate(-10deg); }
#ib-processing .ib-processing-note span { font-family: Caveat, cursive; font-size: 15px; line-height: 1.3; letter-spacing: -.5px; text-align: center; }
#ib-processing .ib-processing-note svg { width: 44px; height: auto; align-self: flex-end; margin-right: -22px; margin-top: -2px; }
#ib-processing .ib-processing-details { min-width: 0; padding: 20px 14px 17px; background: #fff; border: 1px solid #e5e7eb; border-radius: 22px; box-shadow: 0 12px 32px #0b234704; }
#ib-processing .ib-processing-details > .ib-eyebrow { color: #425677; font-size: 9px; letter-spacing: .15em; margin-bottom: 15px; }
#ib-processing .ib-processing-steps { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; }
#ib-processing .ib-task { display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 60px; margin: 0; padding: 13px 11px; border: 1px solid #e7e9ee; border-radius: 13px; background: #fff; transition: background-color .22s, border-color .22s; }
#ib-processing .ib-task-state { display: grid; place-items: center; position: relative; width: 21px; height: 21px; flex: 0 0 21px; border: 1.5px solid #b8c1ce; border-radius: 50%; color: #fff; }
#ib-processing .ib-task-copy { display: block; min-width: 0; }
#ib-processing .ib-task-copy strong { display: block; font-size: 12px; font-weight: 570; line-height: 1.45; overflow-wrap: anywhere; }
#ib-processing .ib-task-copy small { display: block; font-size: 10px; font-weight: 400; line-height: 1.5; color: var(--ib-dossier-muted); margin-top: 4px; overflow-wrap: anywhere; }
#ib-processing .ib-task-copy small:empty { display: none; }
#ib-processing .ib-task.is-waiting { background: #fcfcfd; color: #5c6c84; }
#ib-processing .ib-task.is-done .ib-task-state { background: #228866; border-color: #228866; }
#ib-processing .ib-task.is-done .ib-task-state::after { content: ''; width: 9px; height: 5px; border-left: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-1px) rotate(-45deg); }
#ib-processing .ib-task.is-running { background: #eee8ff; border-color: #eee8ff; }
#ib-processing .ib-task.is-running .ib-task-copy strong { font-weight: 650; color: #172950; }
#ib-processing .ib-task.is-running .ib-task-copy small { color: #534a8b; }
#ib-processing .ib-task.is-running .ib-task-state { border-width: 3px; border-color: #c2b3f4; border-top-color: #393084; border-left-color: #393084; }
#ib-processing .ib-task.is-attention { background: #fff7e9; border-color: #f0dfc4; }
#ib-processing .ib-task.is-attention .ib-task-state { border-color: #a1692d; color: #825020; }
#ib-processing .ib-task.is-attention .ib-task-state::after { content: '!'; font: 700 14px/1 Geist, Arial, sans-serif; }

#ib-processing .ib-processing-status { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; line-height: 1.55; text-align: center; color: #526580; margin: 17px 0 0; min-height: 34px; padding: 7px 10px; border-radius: 12px; background: #f6f7f9; overflow-wrap: anywhere; }
#ib-processing.is-ready .ib-processing-status { color: #235b46; background: #e4f6ed; }
#ib-processing.is-error .ib-processing-status { color: #784719; background: #fff2de; }
#ib-processing .ib-processing-ready { margin-top: 18px; font-size: 14px; line-height: 1.6; color: var(--ib-dossier-muted); text-wrap: pretty; }
#ib-processing .ib-processing-next { width: 100%; margin-top: 18px; background: var(--ib-dossier-ink); color: #fff; font-size: 13px; min-height: 48px; padding-inline: 18px; }
#ib-processing .ib-processing-next:hover { background: #193659; }
#ib-processing .ib-processing-return { border: 0; background: transparent; color: var(--ib-dossier-ink); padding: 12px 0; min-height: 44px; font-size: 13px; text-align: left; text-decoration: underline; text-underline-offset: 4px; margin-top: 8px; }
#ib-processing .ib-processing-bottom { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3px 20px; margin-top: 16px; }
#ib-processing .ib-processing-private { display: flex; align-items: center; gap: 7px; color: #596b78; font-size: 10px; line-height: 1.5; }
#ib-processing .ib-processing-pause { border: 0; background: transparent; color: #526580; min-height: 44px; padding: 8px 5px; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
#ib-processing :is(a, button):focus-visible { outline: 3px solid #7662ba; outline-offset: 4px; }

/* Transform on outer groups preserves each card's drawn angle. */
#ib-processing .ib-dossier-stack,
#ib-processing .ib-dossier-search,
#ib-processing .ib-dossier-card,
#ib-processing .ib-dossier-ground,
#ib-processing .ib-dossier-cloud,
#ib-processing .ib-dossier-ready-seal,
#ib-processing .ib-dossier-error-mark { transform-box: fill-box; transform-origin: center; }
#ib-processing .ib-dossier-ready-seal,
#ib-processing .ib-dossier-error-mark { opacity: 0; transform: scale(.8); transition: opacity .25s, transform .35s var(--ib-dossier-ease); }
#ib-processing.is-ready .ib-dossier-ready-seal,
#ib-processing.is-error .ib-dossier-error-mark { opacity: 1; transform: scale(1); }

@media (min-width: 420px) {
    #ib-processing .ib-processing-heading > p:last-child { font-size: 17px; }
    #ib-processing .ib-processing-details { padding: 24px 20px; }
    #ib-processing .ib-task { padding: 14px 15px; gap: 14px; }
    #ib-processing .ib-task-copy strong { font-size: 13px; }
    #ib-processing .ib-task-copy small { font-size: 11px; }
    #ib-processing .ib-processing-note { left: 1%; }
    #ib-processing .ib-processing-note span { font-size: 18px; }
    #ib-processing .ib-processing-note svg { width: 55px; }
    #ib-processing .ib-processing-private { font-size: 11px; }
}

@media (min-width: 576px) {
    #ib-processing .ib-processing-heading { margin-bottom: 18px; }
    #ib-processing .ib-processing-details { max-width: 500px; width: 100%; margin-inline: auto; padding: 26px; }
    #ib-processing .ib-processing-note span { font-size: 21px; }
    #ib-processing .ib-processing-note svg { width: 68px; }
    #ib-processing .ib-processing-bottom { gap: 12px 25px; }
}

@media (min-width: 768px) {
    #ib-processing { padding-top: 7px; }
    #ib-processing .ib-processing-heading { margin-bottom: 32px; }
    #ib-processing .ib-processing-heading > p:last-child { font-size: 19px; margin-top: 18px; }
    #ib-processing .ib-processing-stage { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 4px; border: 1px solid #e5e7eb; border-radius: 27px; background: #fff; padding: 28px 24px 28px 10px; box-shadow: 0 16px 45px #0b234705; }
    #ib-processing .ib-processing-visual { max-width: none; }
    #ib-processing .ib-processing-details { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 12px 0; }
    #ib-processing .ib-processing-details > .ib-eyebrow { font-size: 10px; }
    #ib-processing .ib-processing-note { left: 1%; bottom: 10%; }
    #ib-processing .ib-processing-note span { font-size: 16px; }
    #ib-processing .ib-processing-note svg { width: 47px; }
    #ib-processing .ib-task { padding: 13px 12px; gap: 11px; }
    #ib-processing .ib-task-copy strong { font-size: 12px; }
    #ib-processing .ib-task-copy small { font-size: 10px; }
    #ib-processing .ib-processing-bottom { margin-top: 20px; }
}

@media (min-width: 1024px) {
    #ib-processing .ib-processing-heading { margin-bottom: 40px; }
    #ib-processing .ib-processing-heading > p:last-child { font-size: 21px; }
    #ib-processing .ib-processing-stage { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; padding: 29px 38px 29px 16px; }
    #ib-processing .ib-processing-visual { margin-left: -9px; width: calc(100% + 9px); }
    #ib-processing .ib-processing-note { left: 0; bottom: 11%; }
    #ib-processing .ib-processing-note span { font-size: 22px; }
    #ib-processing .ib-processing-note svg { width: 66px; }
    #ib-processing .ib-task { min-height: 62px; padding: 14px 16px; gap: 15px; }
    #ib-processing .ib-task-copy strong { font-size: 14px; }
    #ib-processing .ib-task-copy small { font-size: 12px; }
    #ib-processing .ib-task-state { width: 25px; height: 25px; flex-basis: 25px; }
    #ib-processing .ib-processing-status { font-size: 12px; padding: 9px 14px; margin-top: 18px; }
    #ib-processing .ib-processing-next { font-size: 14px; }
}

@media (prefers-reduced-motion: no-preference) {
    #ib-processing.is-working .ib-dossier-search { animation: ib-dossier-search 7.2s ease-in-out infinite; }
    #ib-processing.is-working .ib-dossier-card--money { animation: ib-dossier-float 7.2s ease-in-out -2.4s infinite; }
    #ib-processing.is-working .ib-dossier-card--home { animation: ib-dossier-float 7.2s ease-in-out -1.2s infinite; }
    #ib-processing.is-working .ib-dossier-card--receipt { animation: ib-dossier-float 7.2s ease-in-out infinite; }
    #ib-processing.is-working .ib-dossier-cloud { animation: ib-dossier-breathe 7.2s ease-in-out infinite; }
    #ib-processing.is-working .ib-dossier-draw { stroke-dasharray: 1; animation: ib-dossier-ink 7.2s ease-in-out infinite; }
    #ib-processing.is-working .ib-dossier-draw--later { animation-delay: -3.6s; }
    #ib-processing.is-working .ib-task.is-running .ib-task-state { animation: ib-dossier-spin 1.1s linear infinite; }
    #ib-processing.is-ready .ib-task { animation: ib-dossier-row .4s var(--ib-dossier-ease) both; }
    #ib-processing.is-ready .ib-task:nth-child(2) { animation-delay: .06s; }
    #ib-processing.is-ready .ib-task:nth-child(3) { animation-delay: .12s; }
    #ib-processing.is-ready .ib-task:nth-child(4) { animation-delay: .18s; }
    #ib-processing.is-ready .ib-task:nth-child(5) { animation-delay: .24s; }
    #ib-processing.is-ready .ib-dossier-ready-check { stroke-dasharray: 1; animation: ib-dossier-check .4s var(--ib-dossier-ease) both; }
    #ib-processing.is-paused *,
    #ib-processing.is-paused *::before,
    #ib-processing.is-paused *::after { animation-play-state: paused !important; }
}

@media (prefers-reduced-motion: reduce) {
    #ib-processing *,
    #ib-processing *::before,
    #ib-processing *::after { animation: none !important; transition: none !important; }
    #ib-processing .ib-processing-pause { display: none; }
}

@keyframes ib-dossier-search {
    0%, 12%, 76%, 100% { transform: translate(0, 0) rotate(0); }
    34% { transform: translate(-8px, 10px) rotate(-2deg); }
    55% { transform: translate(5px, -4px) rotate(1deg); }
}
@keyframes ib-dossier-float {
    0%, 18%, 56%, 100% { transform: translate(0, 0) rotate(0); }
    36% { transform: translate(0, -7px) rotate(2deg); }
}
@keyframes ib-dossier-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}
@keyframes ib-dossier-ink {
    0%, 12% { stroke-dashoffset: 1; }
    35%, 86% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -1; }
}
@keyframes ib-dossier-spin { to { transform: rotate(360deg); } }
@keyframes ib-dossier-check { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@keyframes ib-dossier-row { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }