/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-h2sdsbt142] {
    color-scheme: light only;
    background: lightyellow;
    /* The background is pinned light, so the text must not inherit the dark theme's. */
    color: black;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-h2sdsbt142] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-czl0wqe91p],
.components-reconnect-repeated-attempt-visible[b-czl0wqe91p],
.components-reconnect-failed-visible[b-czl0wqe91p],
.components-pause-visible[b-czl0wqe91p],
.components-resume-failed-visible[b-czl0wqe91p],
.components-rejoining-animation[b-czl0wqe91p] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-czl0wqe91p],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-czl0wqe91p],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-czl0wqe91p],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-czl0wqe91p],
#components-reconnect-modal.components-reconnect-retrying[b-czl0wqe91p],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-czl0wqe91p],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-czl0wqe91p],
#components-reconnect-modal.components-reconnect-failed[b-czl0wqe91p],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-czl0wqe91p] {
    display: block;
}


#components-reconnect-modal[b-czl0wqe91p] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-czl0wqe91p 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-czl0wqe91p 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-czl0wqe91p 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-czl0wqe91p]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-czl0wqe91p 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-czl0wqe91p {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-czl0wqe91p {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-czl0wqe91p {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-czl0wqe91p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-czl0wqe91p] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-czl0wqe91p] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-czl0wqe91p] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-czl0wqe91p] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-czl0wqe91p] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-czl0wqe91p] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-czl0wqe91p 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-czl0wqe91p] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-czl0wqe91p {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/ScoringQueueScreen.razor.rz.scp.css */
/* A focused, viewport-filling view: the description scrolls, the scoring bar stays pinned at
   the bottom and always fully visible. Fills the viewport and reserves the app bar's own
   (responsive) height with padding, so no magic number and no dependence on window size; it
   sits over the shared footer, which this single-task screen deliberately hides. overflow is
   hidden so nothing can spill into a page scroll - the card region below is the only thing
   that gives. */
.scoring-queue[b-zzbrb7qdet] {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    padding-top: var(--mud-appbar-height);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scoring-card-region[b-zzbrb7qdet] {
    flex: 1 1 auto;
    /* min-height:0 lets the region shrink below its content, so it - not the page - scrolls. */
    min-height: 0;
    overflow-y: auto;
    outline: none;
}

/* The swipe area fills the scroll region so a gesture anywhere over the card is caught. */
.scoring-card-region[b-zzbrb7qdet]  .mud-swipe-area {
    display: block;
    min-height: 100%;
}

.scoring-card[b-zzbrb7qdet] {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 16px;
}

.scoring-bar[b-zzbrb7qdet] {
    flex: 0 0 auto;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}

.scoring-controls[b-zzbrb7qdet],
.scoring-actions[b-zzbrb7qdet],
.scoring-progress[b-zzbrb7qdet] {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.scoring-actions[b-zzbrb7qdet] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

/* The arrow buttons' unsaved dots sit on the chevron's top-right corner; the stock overlap
   inset leaves them floating out on the icon button's padding. The extra classes outweigh
   MudBlazor's own four-class positioning rule. */
.scoring-actions[b-zzbrb7qdet]  .mud-badge.mud-badge-dot.scoring-nav-dot {
    inset: auto auto calc(100% - 20px) calc(100% - 20px);
}

.scoring-progress[b-zzbrb7qdet] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.scoring-dots[b-zzbrb7qdet] {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

/* Unscored dot; green once the item has been scored or marked won't-score, warning while it
   holds unsaved edits, with a ring on the item in view that takes the dot's own colour. The
   window's edge dots shrink to hint at more queue beyond them. */
.scoring-dot[b-zzbrb7qdet] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    color: var(--mud-palette-lines-default);
    background: currentColor;
}

.scoring-dot-done[b-zzbrb7qdet] {
    color: var(--mud-palette-success);
}

.scoring-dot-dirty[b-zzbrb7qdet] {
    color: var(--mud-palette-warning);
}

.scoring-dot-active[b-zzbrb7qdet] {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.scoring-dot-edge[b-zzbrb7qdet] {
    width: 5px;
    height: 5px;
    opacity: 0.6;
}