/* /Components/Admin/AcsMeetingTest.razor.rz.scp.css */
.acs-room[b-t82mb41a0i] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: #0b0b0c;
    display: flex;
    flex-direction: row;
}

.acs-room[hidden][b-t82mb41a0i] {
    display: none;
}

.acs-room-main[b-t82mb41a0i] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    min-width: 0;
}

.acs-gallery[b-t82mb41a0i] {
    flex: 1 1 auto;
    display: grid;
    gap: 0.5rem;
    place-items: stretch;
}

/*
 * Everything below anchored on ".acs-gallery ::deep X" targets elements the
 * JS module creates via document.createElement (tiles, avatar placeholder,
 * celebration overlay). Blazor's CSS isolation only auto-scopes elements
 * Razor itself renders, so a plain ".acs-gallery-tile { }" rule silently
 * never matches JS-created descendants - ::deep is the documented escape
 * hatch for exactly this JS-interop scenario.
 */
.acs-gallery[b-t82mb41a0i]  .acs-gallery-tile {
    position: relative;
    container-type: size;
    background: #1c1c1c;
    border-radius: 0.5rem;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

.acs-gallery[b-t82mb41a0i]  .acs-gallery-tile.acs-video-off {
    background: #26282b;
}

.acs-gallery[b-t82mb41a0i]  .acs-gallery-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acs-gallery[b-t82mb41a0i]  .acs-avatar-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff;
}

.acs-gallery[b-t82mb41a0i]  .acs-avatar-circle {
    width: min(35cqw, 35cqh, 6rem);
    height: min(35cqw, 35cqh, 6rem);
    border-radius: 50%;
    background: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: min(14cqw, 14cqh, 2.5rem);
}

.acs-gallery[b-t82mb41a0i]  .acs-avatar-name {
    font-weight: 600;
    font-size: min(6cqw, 1.1rem);
    text-align: center;
    padding: 0 0.5rem;
}

.acs-gallery[b-t82mb41a0i]  .acs-muted-badge {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    background: #dc3545;
    color: #fff;
    font-size: min(4cqw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    z-index: 1;
}

.acs-gallery[b-t82mb41a0i]  .acs-celebration-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: min(3cqw, 0.5rem);
    padding: min(6cqw, 1rem);
    background: rgba(0, 0, 0, 0.45);
    animation: acs-celebration-pop 5s ease-out forwards;
    pointer-events: none;
}

.acs-gallery[b-t82mb41a0i]  .acs-celebration-check {
    width: min(45cqw, 45cqh, 6rem);
    height: min(45cqw, 45cqh, 6rem);
    border-radius: 50%;
    background: #198754;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.acs-gallery[b-t82mb41a0i]  .acs-celebration-check svg {
    width: 60%;
    height: 60%;
}

.acs-gallery[b-t82mb41a0i]  .acs-celebration-text {
    color: #fff;
    font-weight: 600;
    font-size: min(6cqw, 1rem);
    text-align: center;
    max-width: 90%;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

@@keyframes acs-celebration-pop {
    0%[b-t82mb41a0i] { opacity: 0; transform: scale(0.85); }
    6%[b-t82mb41a0i] { opacity: 1; transform: scale(1.05); }
    10%[b-t82mb41a0i] { transform: scale(1); }
    92%[b-t82mb41a0i] { opacity: 1; }
    100%[b-t82mb41a0i] { opacity: 0; }
}

.acs-room-controls[b-t82mb41a0i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
}

.acs-backstop-note[b-t82mb41a0i] {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.75rem;
    flex-basis: 100%;
    text-align: center;
}

.acs-room-sidebar[b-t82mb41a0i] {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    height: 100%;
}

.acs-timer-panel[b-t82mb41a0i] {
    flex: 0 0 34%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 1rem;
    text-align: center;
    transition: background-color 0.3s ease;
}

.acs-timer-phase-name[b-t82mb41a0i] {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.acs-timer-clock[b-t82mb41a0i] {
    font-family: "Consolas", "SF Mono", monospace;
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0.25rem 0;
}

.acs-timer-controls[b-t82mb41a0i] {
    margin-top: 0.5rem;
}

.acs-phase-idle[b-t82mb41a0i] {
    background-color: #495057;
}

.acs-phase-checkin[b-t82mb41a0i] {
    background-color: #0d6efd;
}

.acs-phase-working[b-t82mb41a0i] {
    background-color: #198754;
}

.acs-phase-break[b-t82mb41a0i] {
    background-color: #fd7e14;
}

.acs-phase-checkout[b-t82mb41a0i] {
    background-color: #6f42c1;
}

.acs-goals-panel[b-t82mb41a0i] {
    flex: 1 1 66%;
    background: #17181a;
    color: #fff;
    padding: 1rem;
    overflow-y: auto;
    min-height: 0;
}

.acs-goals-header[b-t82mb41a0i] {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.acs-goals-list[b-t82mb41a0i] {
    max-height: 100%;
}

.acs-goals-panel .list-group-item[b-t82mb41a0i] {
    background: #23252a;
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.acs-goal-done-text[b-t82mb41a0i] {
    color: rgba(255, 255, 255, 0.55);
}

.acs-goals-panel .form-check-input[b-t82mb41a0i] {
    width: 1.25em;
    height: 1.25em;
    background-color: #23252a;
    border: 2px solid #adb5bd;
    accent-color: #0d6efd;
}

.acs-goals-panel .form-check-input:checked[b-t82mb41a0i] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-920c38dnac] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-920c38dnac] {
    flex: 1;
}

#blazor-error-ui[b-920c38dnac] {
    color-scheme: light only;
    background: lightyellow;
    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-920c38dnac] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-2yhrcv7xlb] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-2yhrcv7xlb] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-2yhrcv7xlb] {
    min-height: 3.5rem;
    background-color: var(--pwm-indigo, #423c85);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-brand[b-2yhrcv7xlb] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
}

    .navbar-brand:hover[b-2yhrcv7xlb], .navbar-brand:focus[b-2yhrcv7xlb] {
        color: #fff;
        text-decoration: none;
    }

.bi[b-2yhrcv7xlb] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-2yhrcv7xlb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-2yhrcv7xlb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-2yhrcv7xlb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-2yhrcv7xlb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-2yhrcv7xlb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-2yhrcv7xlb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-2yhrcv7xlb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-2yhrcv7xlb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-calendar-event-fill-nav-menu[b-2yhrcv7xlb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-calendar-event-fill' viewBox='0 0 16 16'%3E%3Cpath d='M4 .5a.5.5 0 0 1 1 0V1h6V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1zm9 4H3v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1zm-2.5 2a.5.5 0 0 1 .5.5V8h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0V9h-1a.5.5 0 0 1 0-1h1V7a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");
}

.bi-stopwatch-fill-nav-menu[b-2yhrcv7xlb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-stopwatch-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 0a.5.5 0 0 0 0 1H7v1.07A7.001 7.001 0 1 0 13.996 9a6.97 6.97 0 0 0-1.348-4.132l.707-.707.354.354a.5.5 0 1 0 .707-.707l-1.768-1.768a.5.5 0 1 0-.707.707l.353.354-.707.707A6.97 6.97 0 0 0 8 2.07V1h.5a.5.5 0 0 0 0-1zM8 4a.5.5 0 0 1 .5.5v4.293l2.354 2.353a.5.5 0 0 1-.708.708l-2.5-2.5A.5.5 0 0 1 7.5 9V4.5A.5.5 0 0 1 8 4'/%3E%3C/svg%3E");
}

.bi-info-circle-fill-nav-menu[b-2yhrcv7xlb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-info-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 .877-.252 1.02-.598l.088-.416c.066-.308.123-.385.402-.385h.007l.082-.381-1.005-.176.738-3.468c.194-.897-.105-1.319-.808-1.319-.545 0-.877.252-1.02.598M8 5.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2'/%3E%3C/svg%3E");
}



.nav-item[b-2yhrcv7xlb] {
    font-size: 0.9rem;
}

    .nav-item[b-2yhrcv7xlb]  .nav-link {
        color: rgba(255, 255, 255, 0.85);
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
        white-space: nowrap;
    }

.nav-item[b-2yhrcv7xlb]  a.active {
    color: white;
}

.nav-item[b-2yhrcv7xlb]  .nav-link:hover {
    background-color: rgba(255,255,255,0.15);
    color: white;
}

.nav-scrollable[b-2yhrcv7xlb] {
    display: none;
    width: 100%;
}

.navbar-toggler:checked ~ .nav-scrollable[b-2yhrcv7xlb] {
    display: block;
}

.nav-scrollable nav[b-2yhrcv7xlb] {
    display: flex;
    flex-direction: column;
}

@media (min-width: 641px) {
    .navbar-toggler[b-2yhrcv7xlb] {
        display: none;
    }

    .top-row[b-2yhrcv7xlb] {
        flex-wrap: nowrap;
    }

    .nav-scrollable[b-2yhrcv7xlb] {
        display: block;
        width: auto;
        flex: 1;
    }

    .nav-scrollable nav[b-2yhrcv7xlb] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.25rem;
    }

    .nav-item[b-2yhrcv7xlb]  .nav-link {
        height: auto;
        line-height: 1.2;
        padding: 0.5rem 0.75rem;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-60wl135euu],
.components-reconnect-repeated-attempt-visible[b-60wl135euu],
.components-reconnect-failed-visible[b-60wl135euu],
.components-pause-visible[b-60wl135euu],
.components-resume-failed-visible[b-60wl135euu],
.components-rejoining-animation[b-60wl135euu] {
    display: none;
}

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


#components-reconnect-modal[b-60wl135euu] {
    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-60wl135euu 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-60wl135euu {
    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/About.razor.rz.scp.css */
.about-page[b-61qhbv0mnt] {
    max-width: 1000px;
    margin: 0 auto;
    padding-top: 1rem;
}

.about-section[b-61qhbv0mnt] {
    scroll-margin-top: 2rem;
}

    .about-section p[b-61qhbv0mnt],
    .about-section li[b-61qhbv0mnt] {
        line-height: 1.7;
    }

.about-list[b-61qhbv0mnt] {
    padding-left: 1.25rem;
}

    .about-list li[b-61qhbv0mnt] {
        margin-bottom: 0.75rem;
    }

.about-join p[b-61qhbv0mnt] {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .about-section[b-61qhbv0mnt] {
        margin-bottom: 2.5rem !important;
    }
}
/* /Components/Pages/Calendar.razor.rz.scp.css */
/* ==========================================
   Page layout
   ========================================== */

.calendar-page[b-ahxt2x2qr5] {
    max-width: 1200px;
    margin: 0 auto;
}

.calendar-heading[b-ahxt2x2qr5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.calendar-card[b-ahxt2x2qr5] {
    padding: 1rem;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06);
}

.fullcalendar-host[b-ahxt2x2qr5] {
    min-height: 38rem;
}


/* ==========================================
   FullCalendar base styles
   ========================================== */

[b-ahxt2x2qr5] .fc {
    font-family: var(--pwm-font-body, sans-serif);
    color: #212529;
}

    [b-ahxt2x2qr5] .fc a {
        text-decoration: none;
    }


    /* ==========================================
   Toolbar
   ========================================== */

    [b-ahxt2x2qr5] .fc .fc-toolbar-title {
        font-size: 2rem;
        font-weight: 400;
    }

    [b-ahxt2x2qr5] .fc .fc-button {
        font-family: var(--pwm-font-body, sans-serif);
        font-weight: 400;
        text-transform: none;
        box-shadow: none;
    }
    [b-ahxt2x2qr5] .fc .fc-button {
        width: 5rem;
        text-align: center;
    }

    [b-ahxt2x2qr5] .fc .fc-toolbar-chunk {
        display: flex;
        gap: .5rem;
    }

    /* ==========================================
   Primary toolbar buttons
   ========================================== */

    [b-ahxt2x2qr5] .fc .btn-primary {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--pwm-indigo, #423c85);
        --bs-btn-border-color: var(--pwm-indigo, #423c85);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--pwm-indigo-dark, #302a63);
        --bs-btn-hover-border-color: var(--pwm-indigo-dark, #302a63);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--pwm-indigo-dark, #302a63);
        --bs-btn-active-border-color: var(--pwm-indigo-dark, #302a63);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: var(--pwm-indigo, #423c85);
        --bs-btn-disabled-border-color: var(--pwm-indigo, #423c85);
    }


    /* ==========================================
   Secondary toolbar buttons
   ========================================== */

    [b-ahxt2x2qr5] .fc .btn-secondary {
        --bs-btn-color: #fff;
        --bs-btn-bg: #7b8794;
        --bs-btn-border-color: #7b8794;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #697581;
        --bs-btn-hover-border-color: #646f7a;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: #5f6b76;
        --bs-btn-active-border-color: #59646e;
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: #7b8794;
        --bs-btn-disabled-border-color: #7b8794;
    }


    /* ==========================================
   Calendar headings and dates
   ========================================== */

    [b-ahxt2x2qr5] .fc .fc-col-header-cell-cushion {
        color: #212529;
        font-weight: 700;
    }

    [b-ahxt2x2qr5] .fc .fc-daygrid-day-number {
        color: #212529;
    }


/* ==========================================
   Grid and current day
   ========================================== */

[b-ahxt2x2qr5] .fc-theme-bootstrap5 td,
[b-ahxt2x2qr5] .fc-theme-bootstrap5 th,
[b-ahxt2x2qr5] .fc-theme-bootstrap5 .fc-scrollgrid {
    border-color: #d5dce1;
}

[b-ahxt2x2qr5] .fc .fc-day-today {
    background-color: transparent !important;
}

/* ==========================================
   Today's date
   ========================================== */

[b-ahxt2x2qr5] .fc .fc-daygrid-day-number {
    font-weight: 300;
}

[b-ahxt2x2qr5] .fc .fc-day-today .fc-daygrid-day-number {
    font-weight: 800;
    color: #dc3545;
}

/* ==========================================
   List view
   ========================================== */

[b-ahxt2x2qr5] .fc .fc-list-event-time,
[b-ahxt2x2qr5] .fc .fc-list-event-graphic {
    display: none;
}

[b-ahxt2x2qr5] .fc .fc-list-event-title {
    white-space: normal;
}

[b-ahxt2x2qr5] .fc .fc-list-event-title a {
    overflow: visible;
    text-overflow: unset;
    white-space: normal;
}

[b-ahxt2x2qr5] .fc .calendar-list-event-content {
    padding: 0.2rem 0;
    font-weight: 400;
}

/* ==========================================
   Month-view events
   ========================================== */

[b-ahxt2x2qr5] .fc .calendar-event-content {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
}

[b-ahxt2x2qr5] .fc .calendar-event-content-month {
    padding-left: 0.35rem;
}

[b-ahxt2x2qr5] .fc .calendar-event-time {
    flex: 0 0 auto;
    font-weight: 700;
}

[b-ahxt2x2qr5] .fc .calendar-event-host {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   Mobile layout
   ========================================== */

@media (max-width: 767.98px) {
    .calendar-card[b-ahxt2x2qr5] {
        padding: 0.5rem;
    }

    .fullcalendar-host[b-ahxt2x2qr5] {
        min-height: 30rem;
    }

    [b-ahxt2x2qr5] .fc .fc-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 0.75rem;
    }

    [b-ahxt2x2qr5] .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
}

/* ==========================================
   Session colour and owner actions
   ========================================== */

[b-ahxt2x2qr5] .fc .fc-daygrid-event,
[b-ahxt2x2qr5] .fc .fc-daygrid-event:hover,
[b-ahxt2x2qr5] .fc .fc-daygrid-event:focus {
    background-color: #d9f0df;
    border-color: #a9d2b4;
    color: #111;
}

[b-ahxt2x2qr5] .fc .fc-daygrid-event .fc-event-main,
[b-ahxt2x2qr5] .fc .fc-daygrid-event .fc-event-main-frame,
[b-ahxt2x2qr5] .fc .fc-daygrid-event .fc-event-title,
[b-ahxt2x2qr5] .fc .fc-daygrid-event .calendar-event-content {
    color: #111;
}

[b-ahxt2x2qr5] .fc .calendar-list-event-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

[b-ahxt2x2qr5] .fc .calendar-list-event-description {
    min-width: 0;
}

[b-ahxt2x2qr5] .fc .calendar-session-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

[b-ahxt2x2qr5] .fc .calendar-session-action {
    border: 0;
    border-radius: 0.3rem;
    padding: 0.2rem 0.55rem;
    font: inherit;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
}

[b-ahxt2x2qr5] .fc .calendar-session-action-edit {
    background: #e9ecef;
    color: #212529;
}

[b-ahxt2x2qr5] .fc .calendar-session-action-delete {
    background: #f8d7da;
    color: #842029;
}

[b-ahxt2x2qr5] .fc .calendar-session-action-join {
    background: #d1e7dd;
    color: #0f5132;
}

[b-ahxt2x2qr5] .fc .calendar-session-action:hover,
[b-ahxt2x2qr5] .fc .calendar-session-action:focus {
    filter: brightness(0.96);
    text-decoration: none;
}

@media (max-width: 767.98px) {
    [b-ahxt2x2qr5] .fc .calendar-list-event-content {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* /Components/Pages/Companion.razor.rz.scp.css */
.companion-page[b-y8itenrob1] {
    max-width: 760px;
    margin: 0 auto;
}

.companion-card[b-y8itenrob1] {
    background: #fff;
    border: 1px solid #dfe6e9;
    border-radius: .75rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: .75rem;
}

.timer-card[b-y8itenrob1] {
    text-align: center;
    margin-top: 0;
}

.timer-display[b-y8itenrob1] {
    font-size: clamp(3rem, 10vw, 5.5rem);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    font-weight: 700;
}

.timer-display[b-y8itenrob1]::after {
    content: " min";
    font-size: .3em;
    font-weight: 600;
    color: #6c757d;
}

.timer-status[b-y8itenrob1] {
    color: #6c757d;
    margin: .4rem 0 0;
}

.host-controls[b-y8itenrob1] {
    max-width: 360px;
    margin: .9rem auto 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .75rem;
    align-items: center;
}

.notes-editor[b-y8itenrob1] {
    resize: vertical;
}

.shared-notes[b-y8itenrob1] {
    white-space: pre-wrap;
    font-size: 1.1rem;
}

@media (max-width: 576px) {
    .host-controls[b-y8itenrob1] {
        grid-template-columns: 1fr;
    }

    .timer-display[b-y8itenrob1] {
        font-size: 3.5rem;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* CSS for Home component */

.pwm-image-container[b-8vyh4hytbz] {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index:0;
    pointer-events: none;

}

.pwm-image[b-8vyh4hytbz] {
    width: 75vw;
    height: 75vh;
    object-fit: contain;
}
/* /Components/Pages/SessionEdit.razor.rz.scp.css */
.session-form-page[b-4r6enr7b96] {
    max-width: 760px;
    margin: 0 auto;
}
/* /Components/Pages/SessionJoin.razor.rz.scp.css */
.session-join-page[b-kgv7lo7yrd] {
    max-width: 48rem;
    margin: 0 auto;
}

.session-join-card[b-kgv7lo7yrd] {
    margin-bottom: 1.25rem;
    padding: 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-tertiary-bg);
}

.session-summary[b-kgv7lo7yrd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.session-summary > div[b-kgv7lo7yrd] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.session-label[b-kgv7lo7yrd] {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.privacy-notice li + li[b-kgv7lo7yrd] {
    margin-top: 0.35rem;
}

.session-join-actions[b-kgv7lo7yrd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 575.98px) {
    .session-summary[b-kgv7lo7yrd] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/SessionNew.razor.rz.scp.css */
.session-form-page[b-8zodq0bl5o] {
    max-width: 760px;
    margin: 0 auto;
}
/* /Components/Pages/SessionRoom.razor.rz.scp.css */
.acs-room[b-9rponp27w9] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: #0b0b0c;
    display: flex;
    flex-direction: row;
}

.acs-room[hidden][b-9rponp27w9] {
    display: none;
}

.acs-room-main[b-9rponp27w9] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 0.35rem;
    min-width: 0;
}

.acs-gallery[b-9rponp27w9] {
    flex: 1 1 auto;
    display: grid;
    gap: 0.2rem;
    place-items: stretch;
    min-height: 0;
}

/* Applied once more than 12 participants join (see updateGalleryLayout) -
   the grid switches from "shrink tiles to fit everyone" to "fixed 5x4 tile
   size, scroll for more" beyond that. Pinning (below) is deliberately
   disabled in this state - past 20 tiles, both the current user and the
   host scroll like anyone else rather than staying stuck in a corner. */
.acs-gallery.acs-gallery-scrollable[b-9rponp27w9] {
    overflow-y: auto;
}

/*
 * Everything below anchored on ".acs-gallery ::deep X" targets elements the
 * JS module creates via document.createElement (tiles, avatar placeholder,
 * celebration overlay). Blazor's CSS isolation only auto-scopes elements
 * Razor itself renders, so a plain ".acs-gallery-tile { }" rule silently
 * never matches JS-created descendants - ::deep is the documented escape
 * hatch for exactly this JS-interop scenario.
 */
.acs-gallery[b-9rponp27w9]  .acs-gallery-tile {
    position: relative;
    container-type: size;
    background: #1c1c1c;
    border-radius: 0.375rem;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

/* Host-only per-participant moderation menu (see openParticipantMenu in
   SessionRoom.razor.js) - only ever attached to a remote tile when the
   viewer is the session's host. */
.acs-gallery[b-9rponp27w9]  .acs-gallery-tile-clickable {
    cursor: pointer;
}

.acs-gallery[b-9rponp27w9]  .acs-participant-menu {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    background: #202226;
    border-radius: 0.375rem;
    box-shadow: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.5);
    overflow: hidden;
    min-width: 12rem;
}

.acs-gallery[b-9rponp27w9]  .acs-participant-menu-item {
    border: none;
    background: transparent;
    color: #fff;
    text-align: left;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.acs-gallery[b-9rponp27w9]  .acs-participant-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.acs-gallery[b-9rponp27w9]  .acs-participant-menu-item.acs-participant-menu-danger {
    color: #ff8a8a;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.acs-gallery[b-9rponp27w9]  .acs-gallery-tile.acs-video-off {
    background: #26282b;
}

.acs-gallery[b-9rponp27w9]  .acs-gallery-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Pins the local participant's tile to the top-right cell and the session
 * host's tile to the top-left cell, regardless of the current column count -
 * grid line -1 is always the last line and -2 the one before it, so
 * "-2 / -1" always spans the last column whether the gallery is currently 1,
 * 2, 3 or 4 columns wide. Both tiles are otherwise ordinary members of this
 * same grid (not a separately-laid-out element), which is what lets this
 * rule be switched off simply by scoping it to ":not(.acs-gallery-scrollable)"
 * - past 20 tiles (see updateGalleryLayout), the gallery switches to that
 * scrolled layout and both tiles fall back to auto-placing like everyone
 * else, scrolling out of view along with the rest of the grid rather than
 * staying stuck in a corner.
 */
.acs-gallery:not(.acs-gallery-scrollable)[b-9rponp27w9]  .acs-gallery-tile.acs-local-tile {
    grid-column: -2 / -1;
    grid-row: 1;
}

.acs-gallery:not(.acs-gallery-scrollable)[b-9rponp27w9]  .acs-gallery-tile.acs-pinned-host-tile {
    grid-column: 1;
    grid-row: 1;
}

.acs-gallery[b-9rponp27w9]  .acs-avatar-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #fff;
}

.acs-gallery[b-9rponp27w9]  .acs-avatar-circle {
    width: min(35cqw, 35cqh, 6rem);
    height: min(35cqw, 35cqh, 6rem);
    border-radius: 50%;
    background: #495057;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: min(14cqw, 14cqh, 2.5rem);
}

/*
 * The bottom name badge (below) is shown on every tile - video or avatar
 * placeholder - so the placeholder itself no longer needs its own name text.
 */

.acs-gallery[b-9rponp27w9]  .acs-name-badge {
    position: absolute;
    left: 0.4rem;
    bottom: 0.4rem;
    max-width: calc(100% - 0.8rem);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: min(4cqw, 0.85rem);
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

.acs-gallery[b-9rponp27w9]  .acs-muted-badge {
    position: absolute;
    top: 0.4rem;
    left: 0.4rem;
    background: #dc3545;
    color: #fff;
    font-size: min(4cqw, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    z-index: 1;
}

.acs-gallery[b-9rponp27w9]  .acs-celebration-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: min(3cqw, 0.5rem);
    padding: min(6cqw, 1rem);
    background: rgba(0, 0, 0, 0.45);
    animation: acs-celebration-pop 5s ease-out forwards;
    pointer-events: none;
}

/*
 * Hidden by default and revealed by the plain CSS ":hover" on the tile
 * itself (not on the overlay), so hovering never has to round-trip through
 * Blazor/JS - it also means the overlay's own periodic rebuild (every poll
 * tick, see setGoalsOverlay in the JS module) can't interrupt a hover the
 * viewer is already mid-way through.
 */
.acs-gallery[b-9rponp27w9]  .acs-goals-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    padding: min(4cqw, 0.75rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    overflow-y: auto;
}

.acs-gallery[b-9rponp27w9]  .acs-gallery-tile:hover .acs-goals-overlay {
    opacity: 1;
}

.acs-gallery[b-9rponp27w9]  .acs-goals-overlay-header {
    font-weight: 800;
    font-size: min(8cqw, 1.4rem);
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.acs-gallery[b-9rponp27w9]  .acs-goals-overlay-empty {
    font-size: min(4.5cqw, 0.85rem);
    opacity: 0.75;
}

.acs-gallery[b-9rponp27w9]  .acs-goals-overlay-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-size: min(4.2cqw, 0.85rem);
}

.acs-gallery[b-9rponp27w9]  .acs-goals-overlay-done {
    opacity: 0.65;
    text-decoration: line-through;
}

.acs-gallery[b-9rponp27w9]  .acs-celebration-check {
    width: min(45cqw, 45cqh, 6rem);
    height: min(45cqw, 45cqh, 6rem);
    border-radius: 50%;
    background: #198754;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.acs-gallery[b-9rponp27w9]  .acs-celebration-check svg {
    width: 60%;
    height: 60%;
}

.acs-gallery[b-9rponp27w9]  .acs-celebration-text {
    color: #fff;
    font-weight: 600;
    font-size: min(6cqw, 1rem);
    text-align: center;
    max-width: 90%;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

@@keyframes acs-celebration-pop {
    0%[b-9rponp27w9] { opacity: 0; transform: scale(0.85); }
    6%[b-9rponp27w9] { opacity: 1; transform: scale(1.05); }
    10%[b-9rponp27w9] { transform: scale(1); }
    92%[b-9rponp27w9] { opacity: 1; }
    100%[b-9rponp27w9] { opacity: 0; }
}

.acs-room-controls[b-9rponp27w9] {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.3rem;
    padding-top: 0.5rem;
}

/* Always stays a single row (flex-wrap: nowrap above), even with the
   control bar now 7 buttons wide (Settings/Guide/Parking Lot/Camera/Mic/End
   call/Leave call) - every button shares the row equally and shrinks freely
   (min-width: 0 overrides the button's own content-based minimum, which
   would otherwise force wrapping once labels don't all fit) rather than
   wrapping onto a second row. Labels themselves are kept short precisely so
   they stay readable even once shrunk; if a viewport is ever narrow enough
   that they still don't fit, the label truncates with an ellipsis instead
   of wrapping the row. */
.acs-room-controls .btn[b-9rponp27w9] {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.acs-room-sidebar[b-9rponp27w9] {
    flex: 0 0 clamp(220px, 20vw, 280px);
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    height: 100%;
    min-height: 0;
    /* Without this, nothing stops a child's content pushing the sidebar
       itself taller than its computed flex/height size - which is what let
       chat silently grow past its share of the space instead of being
       clipped to it and scrolling internally. */
    overflow: hidden;
}

.acs-timer-panel[b-9rponp27w9] {
    position: relative;
    flex: 0 0 10%;
    min-height: 0;
    container-type: size;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    color: #fff;
    padding: 0.15rem 0.6rem;
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.acs-timer-clickable[b-9rponp27w9] {
    cursor: pointer;
}

.acs-timer-pip-button[b-9rponp27w9] {
    position: absolute;
    top: 0.2rem;
    right: 0.3rem;
    width: clamp(1rem, 32cqh, 1.4rem);
    height: clamp(1rem, 32cqh, 1.4rem);
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    line-height: 0;
}

.acs-timer-pip-button:hover[b-9rponp27w9] {
    color: #fff;
}

.acs-timer-pip-button svg[b-9rponp27w9] {
    width: 100%;
    height: 100%;
}

/* Sized off the panel's own height (via container-type: size on the panel
   above) so the clock is always as large as the 10% timer budget allows,
   rather than a conservative fixed size that leaves the box looking mostly
   empty. */
.acs-timer-clock[b-9rponp27w9] {
    font-family: "Consolas", "SF Mono", monospace;
    font-size: clamp(1.2rem, 78cqh, 3.2rem);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.acs-timer-phase-name[b-9rponp27w9] {
    font-size: clamp(0.55rem, 26cqh, 1.05rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.9;
    line-height: 1.15;
    text-align: left;
    max-width: 40cqw;
}

.acs-phase-idle[b-9rponp27w9] {
    background-color: #495057;
}

.acs-phase-checkin[b-9rponp27w9] {
    background-color: #0d6efd;
}

.acs-phase-working[b-9rponp27w9] {
    background-color: #198754;
}

.acs-phase-break[b-9rponp27w9] {
    background-color: #fd7e14;
}

.acs-phase-checkout[b-9rponp27w9] {
    background-color: #6f42c1;
}

/*
 * Fixed at 45% of the sidebar (goals + chat = 90%, the remainder after the
 * timer's 10%) rather than sized to content - a content-based flex-basis
 * (flex-basis: auto) was tried first so this could start small and grow, but
 * that made its hypothetical size grow with EVERY goal added, competing with
 * chat's own content-based size for space via flex-shrink and squeezing
 * whichever side had the shorter content at the time. A flat 45/45 split
 * with flex-grow/shrink both 0 removes that competition entirely - each side
 * is simply always 45% and scrolls internally (overflow-y, below) once its
 * own content exceeds that.
 */
.acs-goals-panel[b-9rponp27w9] {
    flex: 0 0 45%;
    background: #202226;
    color: #fff;
    padding: 0.5rem 0.5rem 1rem;
    overflow-y: auto;
    min-height: 0;
}

.acs-goals-list[b-9rponp27w9] {
    max-height: 100%;
}

/* No border or background of its own - every goal sits directly on the
   panel's background, so the list reads as one continuous area rather than
   a stack of separate boxes. */
.acs-goals-panel .list-group-item[b-9rponp27w9] {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

.acs-goal-done-text[b-9rponp27w9] {
    color: rgba(255, 255, 255, 0.55);
}

/* Drag handle for reordering (see connectGoalsSort in SessionRoom.razor.js) -
   touch-action: none stops the browser's own scroll gesture from competing
   with SortableJS's own touch handling on mobile. */
.acs-goal-drag-handle[b-9rponp27w9] {
    cursor: grab;
    color: rgba(255, 255, 255, 0.4);
    padding: 0 0.15rem;
    touch-action: none;
    user-select: none;
}

.acs-goal-drag-handle:hover[b-9rponp27w9] {
    color: rgba(255, 255, 255, 0.8);
}

.acs-goals-list .sortable-ghost[b-9rponp27w9] {
    opacity: 0.35;
}

.acs-goals-panel .form-check-input[b-9rponp27w9] {
    width: 1.25em;
    height: 1.25em;
    background-color: #23252a;
    border: 2px solid #adb5bd;
    accent-color: #0d6efd;
}

.acs-goals-panel .form-check-input:checked[b-9rponp27w9] {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.acs-goal-text[b-9rponp27w9] {
    cursor: pointer;
    padding: 0.1rem 0.25rem;
    margin: -0.1rem -0.25rem;
    border-radius: 0.2rem;
    word-break: break-word;
}

.acs-goal-text:hover[b-9rponp27w9] {
    background: rgba(255, 255, 255, 0.08);
}

/*
 * Fixed at 45% (see .acs-goals-panel above) - flex-grow/shrink both 0, so
 * this never competes with goals for space based on either side's content.
 *
 * The panel's OWN internal layout (messages above, input row below) uses CSS
 * Grid rather than nested flexbox: a flex child's default automatic minimum
 * size is its content size, and getting every element in a nested flex chain
 * to override that with min-height:0 proved fragile in practice. A grid row
 * sized "minmax(0, 1fr)" has no such gotcha - it can shrink to zero
 * regardless of its content - which is why this is the more robust tool for
 * a "flexible, scrollable middle section with a fixed-size footer" layout.
 *
 * No horizontal padding here (only top/bottom) - .acs-goals-panel puts its
 * padding AND its overflow-y on the same element, so its scrollbar sits
 * flush with the panel's own edge. This panel puts overflow-y on the nested
 * .acs-chat-messages instead; if the padding stayed here, that scrollbar
 * would render inset by this padding on top of its own, landing well short
 * of the edge - visibly misaligned from the goals scrollbar above it.
 * Horizontal padding is applied directly to .acs-chat-messages/.acs-chat-input-row
 * instead, so the CONTENT is still inset but the scrollbar itself is not.
 */
.acs-chat-panel[b-9rponp27w9] {
    flex: 0 0 45%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    background: #2c2f34;
    color: #fff;
    padding: 0.5rem 0 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    min-height: 0;
    overflow: hidden;
}

.acs-chat-messages[b-9rponp27w9] {
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0 1rem;
}

/*
 * This - NOT justify-content: flex-end - is the correct way to anchor
 * content to the bottom of a scrollable flex container. justify-content
 * (and align-items) use "unsafe" alignment for any value other than
 * flex-start once content overflows, which is explicitly documented to make
 * the overflowing content inaccessible via scrolling in many browsers,
 * rather than just scrolling normally - this is exactly what was silently
 * breaking the chat scrollbar. Auto margins don't have that problem: this
 * pushes the first child (and everything stacked after it) down when there
 * is extra space, and simply has no effect once content overflows and
 * needs to scroll instead.
 */
.acs-chat-messages > *:first-child[b-9rponp27w9] {
    margin-top: auto;
}

.acs-chat-message[b-9rponp27w9] {
    background: #1c1e21;
    border-radius: 0.4rem;
    padding: 0.35rem 0.6rem;
    max-width: 90%;
    word-break: break-word;
}

.acs-chat-message-own[b-9rponp27w9] {
    align-self: flex-end;
    background: #234a7a;
}

.acs-chat-message-author[b-9rponp27w9] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.75;
    margin-bottom: 0.1rem;
}

.acs-chat-message-text[b-9rponp27w9] {
    font-size: 0.85rem;
    white-space: pre-wrap;
}

/* Shared "text input + standalone button" row - goals, chat and both
   parking lot columns all use this same plain flex+gap layout (rather than
   Bootstrap's .input-group, which visually fuses the button to the input)
   so every "Add"/"Send" control in the room looks the same. */
.acs-input-row[b-9rponp27w9] {
    display: flex;
    gap: 0.5rem;
}

.acs-chat-input-row[b-9rponp27w9] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0 1rem;
}

/*
 * Deliberately no dark-background override here (unlike the rest of this
 * panel) - the goal input has none either and just uses Bootstrap's default
 * light form-control styling, which is what gives it a visible grey
 * placeholder. The dark override this used to have set a white text colour
 * but never a matching placeholder colour, so the placeholder stayed at its
 * dark default - invisible against the dark background it was on.
 */

/*
 * Shared centred modal dialog base - originally built for the Parking Lot,
 * now reused by any full-screen dialog in the room (Guide, Settings, the
 * end-call confirmation) so they all share one consistent look instead of
 * each inventing their own backdrop/close-button styling. Reuses the same
 * list/checkbox/inline-edit styling as goals (.acs-goal-text,
 * .acs-goal-done-text) for a consistent feel, just with more breathing room
 * since it isn't squeezed into the sidebar.
 */
.acs-dialog-backdrop[b-9rponp27w9] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.acs-dialog[b-9rponp27w9] {
    background: #202226;
    color: #fff;
    border-radius: 0.5rem;
    width: min(720px, 100%);
    max-height: min(600px, 90vh);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.5);
}

.acs-dialog-header[b-9rponp27w9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    font-weight: 700;
    font-size: 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.acs-dialog-close[b-9rponp27w9] {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    border-radius: 0.25rem;
}

.acs-dialog-close:hover[b-9rponp27w9] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Narrower dialogs (Guide, Settings, the end-call confirmation) don't need
   the Parking Lot's 720px width - they hold a single column of content. */
.acs-dialog-narrow[b-9rponp27w9] {
    width: min(480px, 100%);
    max-height: min(500px, 90vh);
}

.acs-dialog-body[b-9rponp27w9] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem;
    min-height: 0;
}

.acs-dialog-body p[b-9rponp27w9] {
    margin-bottom: 0.75rem;
}

.acs-dialog-body h3[b-9rponp27w9] {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.acs-dialog-body section + section[b-9rponp27w9] {
    margin-top: 1.1rem;
}

.acs-dialog-footer[b-9rponp27w9] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.acs-parking-lot-columns[b-9rponp27w9] {
    flex: 1 1 auto;
    display: flex;
    gap: 1.5rem;
    padding: 1.25rem;
    overflow: hidden;
    min-height: 0;
}

.acs-parking-lot-column[b-9rponp27w9] {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.acs-parking-lot-column-title[b-9rponp27w9] {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.acs-parking-lot-list[b-9rponp27w9] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.acs-parking-lot-list .list-group-item[b-9rponp27w9] {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 0.9rem;
    padding-left: 0;
    padding-right: 0;
}

/* Replaces the old done/checkbox toggle - a plain delete icon, styled like
   the dialog's own close button (subtle until hovered) rather than a full
   Bootstrap button, since it sits inline with each row's text. */
.acs-parking-lot-delete[b-9rponp27w9] {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    border-radius: 0.25rem;
}

.acs-parking-lot-delete:hover[b-9rponp27w9] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 700px) {
    .acs-parking-lot-columns[b-9rponp27w9] {
        flex-direction: column;
        overflow-y: auto;
    }
}

/*
 * Below this width the sidebar (timer, then goals, then chat) stacks above
 * the video gallery instead of sitting beside it, so a phone gets each
 * section full-width in a sensible reading order rather than a narrow
 * strip of video squeezed next to a full-height sidebar.
 */
@media (max-width: 700px) {
    .acs-room[b-9rponp27w9] {
        flex-direction: column;
        overflow-y: auto;
    }

    .acs-room-sidebar[b-9rponp27w9] {
        order: 1;
        flex: 0 0 auto;
        width: 100%;
        height: 42dvh;
        border-left: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .acs-room-main[b-9rponp27w9] {
        order: 2;
        flex: 1 1 auto;
    }

    /*
     * Forces a single full-width column, one tile per row, instead of the
     * desktop grid's square-ish multi-column layout - the JS module always
     * sets an explicit gridTemplateColumns/Rows inline (sized for the
     * gallery's own aspect ratio, which assumes a wide desktop area), so
     * !important is required here to win over that inline style. The local
     * tile's "-2 / -1" pinning still resolves to the single column, so your
     * own tile stays first.
     */
    .acs-gallery[b-9rponp27w9] {
        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;
        grid-auto-rows: auto !important;
    }

    /* With only one column, the host's "grid-column: 1" desktop pinning
       would otherwise land in the exact same cell as the local tile's
       "-2 / -1" (which also resolves to that same single column here),
       overlapping the two - so the host's explicit placement is switched
       off at this width and it just auto-places into the flow instead,
       same as every other non-pinned tile. */
    .acs-gallery:not(.acs-gallery-scrollable)[b-9rponp27w9]  .acs-gallery-tile.acs-pinned-host-tile {
        grid-column: auto;
        grid-row: auto;
    }

    .acs-gallery[b-9rponp27w9]  .acs-gallery-tile {
        aspect-ratio: 16 / 9;
    }

    /*
     * Pinned to the bottom of the scroll area rather than flowing after the
     * gallery, so Leave call/mute/camera are always reachable without
     * scrolling - on a small screen with several tiles the gallery can
     * otherwise push the controls below the fold, which made "Leave call"
     * look like it did nothing when it was really just off-screen.
     */
    .acs-room-controls[b-9rponp27w9] {
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: rgba(11, 11, 12, 0.9);
        margin: 0 -0.35rem -0.35rem;
        padding: 0.5rem 0.35rem calc(0.5rem + env(safe-area-inset-bottom));
    }
}
/* /Components/PhdWithMe/Pages/PhdHome.razor.rz.scp.css */
.pwm-hero[b-ztvd9jmeof] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

.pwm-image-container[b-ztvd9jmeof] {
    display: grid;
    place-items: center;
    margin-bottom: 1rem;
}

.pwm-image[b-ztvd9jmeof] {
    width: min(60vw, 420px);
    height: auto;
    object-fit: contain;
}

.pwm-eyebrow[b-ztvd9jmeof] {
    color: var(--pwm-indigo, #423c85);
    letter-spacing: 0.05em;
}

.pwm-heading[b-ztvd9jmeof] {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.15;
}

.pwm-lead[b-ztvd9jmeof] {
    font-size: 1.25rem;
    max-width: 640px;
    color: #333;
}

.pwm-hero-actions[b-ztvd9jmeof] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.pwm-hero-btn[b-ztvd9jmeof] {
    min-width: 12rem;
}
/* /Components/SitWithMe/Pages/SitHome.razor.rz.scp.css */
/* CSS for Home component */

.pwm-image-container[b-ryv1uhdauj] {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index:0;
    pointer-events: none;

}

.pwm-image[b-ryv1uhdauj] {
    width: 75vw;
    height: 75vh;
    object-fit: contain;
}