/* /Components/JoinedCount.razor.rz.scp.css */
/* A readout, not an action: dashed and unfilled so it never competes with the solid buttons beside
   it. Matches their height and padding so the bar still reads as one row. */
.joinedCount[b-7ckalxvndm] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem 1rem;
    border: 2px dashed var(--dark);
    border-radius: var(--border-radius);
    background: transparent;
    color: var(--dark);
    font-family: var(--ekwarg);
}

/* Read aloud, never shown: the icon already says what the number counts. Not display:none, which
   would take it back out of the accessibility tree. */
.joinedCountWord[b-7ckalxvndm] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Only where there is a list behind it. The dashes stay, so it is still the same object on screen,
   but it answers to the pointer. */
.joinedCount.pressable[b-7ckalxvndm] {
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.joinedCount.pressable:hover[b-7ckalxvndm] {
    border-style: solid;
    background: color-mix(in srgb, var(--dark) 8%, transparent);
}

.joinedCount.pressable:active[b-7ckalxvndm] {
    background: color-mix(in srgb, var(--dark) 16%, transparent);
}

/* Same trim as the buttons it sits between, so the bar stays one height on a phone. */
@media (max-width: 640px) {
    .joinedCount[b-7ckalxvndm] { padding: .25rem .55rem; }
}
/* /Components/NavBar.razor.rz.scp.css */
.navbar[b-xf29lzcruy] {
    grid-row: 1;
    display: flex;
    position: absolute;
    height: 5rem;
    width: 100%;
    font-size: 1rem;
    font-weight: bold;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
}

.navElement[b-xf29lzcruy] {
    display: flex;
    align-items: center;
}

.navBrand[b-xf29lzcruy] {
    gap: 1rem;
}

.navUser[b-xf29lzcruy] {
    gap: 2rem;
}

.identityUsername[b-xf29lzcruy] {
    color: var(--teal);
    font-family: var(--ekwarg);
    font-style: italic;
    font-weight: 500;
}

.title[b-xf29lzcruy]{
    outline: none;
}

.brandHome[b-xf29lzcruy]{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btnLink[b-xf29lzcruy]{
    color: var(--dark);
    text-decoration: none;

    &:visited{
        color: var(--dark);
    }
}

.settingsTrigger[b-xf29lzcruy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .25rem;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--dark);
    line-height: 0;
    cursor: pointer;
}

.settingsTrigger:hover[b-xf29lzcruy] {
    background-color: color-mix(in srgb, var(--dark) 10%, transparent);
}

.settingsTrigger:focus-visible[b-xf29lzcruy] {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* ===== Mobile (<=640px) ===== */
@media (max-width: 640px) {
    .navbar[b-xf29lzcruy] {
        padding: 0 .8rem;
        gap: .5rem;
    }

    .title[b-xf29lzcruy] { font-size: 1.25rem; }

    .navBrand[b-xf29lzcruy] {
        gap: .4rem;
        min-width: 0;
        flex-shrink: 1;
    }

    /* Shrink the hardcoded 50px logo so the brand + Log out both fit a phone width. */
    .navBrand img[b-xf29lzcruy] { height: 34px; }

    /* Hide the long "Welcome, {email}" so the Log out button always stays on-screen and tappable. */
    .navUser[b-xf29lzcruy] {
        gap: .8rem;
        flex-shrink: 0;
    }

    .navUser p[b-xf29lzcruy] { display: none; }
}
/* /Components/NavButton.razor.rz.scp.css */
.navBtn[b-xx7ferosj0]{
    width: 12rem;
    padding: var(--padding-box);
    border: 2px solid var(--dark);
    cursor: pointer;
    font-family: var(--inter);
    font-size: 1rem;
    border-radius: var(--border-radius);
    font-weight: bold;
    display: inline-block;
    text-align: start;
    transition: all 1s ease-in-out;
    background: linear-gradient(to left, var(--beige) 50%, var(--dark) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
    position: relative;
    color: var(--dark);

    &:hover {
        /*background-color: var(--dark);*/
        background-position: left bottom;

        border: 2px solid var(--dark);
        color: var(--beige);

        a {
            color: var(--beige)
        }
    }

    &[b-xx7ferosj0]::after {
        content: '';
        position: absolute;
        bottom: -5px; /* Adjust offset from the bottom */
        right: -5px; /* Adjust offset from the right */
        width: 100%;
        height: 100%;
        border-bottom: 3px solid var(--dark); /* Simulated border - adjust color and thickness as needed */
        border-right: 3px solid var(--dark); /* Simulated border - adjust color and thickness as needed */
        border-radius: var(--border-radius);
        z-index: -1; /* Ensure it stays behind the .navBtn */
    }
}
/* /Components/ProfileAvatar.razor.rz.scp.css */
.avatar[b-6tcntt19n1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--purple) 30%, var(--beige));
    color: var(--dark);
    font-family: var(--inter);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

/* No picture and no name is today's bare cogwheel, so it must not gain a coloured disc. */
.avatar.plain[b-6tcntt19n1] {
    background-color: transparent;
}

.avatar.large[b-6tcntt19n1] {
    width: 6rem;
    height: 6rem;
    font-size: 2rem;
}

.avatarPicture[b-6tcntt19n1] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* /Components/Questions/AnsweredCount.razor.rz.scp.css */
/* Sits in a row of pills, so it matches those rather than the heavier timer beside it. */
.ac-pill[b-7dd94ffna0] {
    padding: .1rem .8rem;
    border: 2px solid var(--dark);
    border-radius: 999px;
    background: var(--teal);
    color: var(--beige);
    font-family: var(--ekwarg);
    /* Fixed-width digits, or the row shuffles sideways as the answers come in. */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* /Components/Questions/TeacherNoteLine.razor.rz.scp.css */
.tn-note[b-wc9gagry22] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: 0 0 .75rem;
    padding: .5rem .75rem;
    border: 2px dashed var(--dark);
    border-radius: var(--border-radius);
    font-size: .95rem;
    overflow-wrap: anywhere;
}

.tn-label[b-wc9gagry22] {
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .6;
}
/* /Components/Questions/WordCloudPicture.razor.rz.scp.css */
.wc-cloud[b-43s6c9s8yc] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: .35rem 1rem;
    max-height: 16rem;
    overflow-y: auto;
    padding: .5rem 0;
    line-height: 1.15;
}

.wc-word[b-43s6c9s8yc] {
    font-family: var(--ekwarg);
    /* A long word must not force the panel wider than the screen it is on. */
    max-width: 100%;
    overflow-wrap: anywhere;
}

.wc-empty[b-43s6c9s8yc] {
    opacity: .6;
    font-style: italic;
    text-align: center;
    margin: 0;
}

/* The cap keeps the cloud from taking a teacher's whole panel. On a phone it hides more than it
   shows and the page already scrolls, so there it grows instead. */
@media (max-width: 640px) {
    .wc-cloud[b-43s6c9s8yc] {
        max-height: none;
        overflow-y: visible;
    }
}
/* /Components/Quiz/AliasGate.razor.rz.scp.css */
.qg-gate[b-rcd7jfgmvz] {
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.qg-title[b-rcd7jfgmvz] {
    margin: 0 0 .25rem;
    font-family: var(--ekwarg);
    font-size: 1.2rem;
    color: var(--dark);
}

.qg-hint[b-rcd7jfgmvz] {
    margin: 0 0 .75rem;
    font-family: var(--inter);
    font-size: .85rem;
    opacity: .75;
}

.qg-row[b-rcd7jfgmvz] {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.qg-input[b-rcd7jfgmvz] {
    flex: 0 1 14rem;
    min-width: 0;
    padding: .5rem .75rem;
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    font-family: var(--inter);
    font-size: 1rem;
    color: var(--dark);
}

.qg-gate .qa-status[b-rcd7jfgmvz] {
    margin-top: .75rem;
}

.qg-dismiss[b-rcd7jfgmvz] {
    margin-top: .6rem;
    min-height: 2.4rem;
    border: none;
    background: none;
    color: var(--dark);
    font-family: var(--inter);
    cursor: pointer;
    padding: .2rem .6rem;
    /* Underlined at rest: a phone has no hover, and this is the only way out of the panel. */
    text-decoration: underline;
    text-underline-offset: var(--underline-offest);
}

.qg-dismiss:hover[b-rcd7jfgmvz], .qg-dismiss:focus-visible[b-rcd7jfgmvz] { color: var(--teal); }

/* Side by side these two cannot both stay tappable on a phone, so stack them. */
@media (max-width: 640px) {
    .qg-row[b-rcd7jfgmvz] {
        flex-direction: column;
        align-items: center;
    }

    /* Stacked, the basis would size the height, so the width is set here and kept off the card edges. */
    .qg-input[b-rcd7jfgmvz] {
        flex: 0 0 auto;
        width: min(100%, 14rem);
    }
}
/* /Components/Quiz/GradingGrid.razor.rz.scp.css */
.gg-grid[b-y5vp52e3bq] {
    padding: 1.25rem;
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
}

.gg-empty[b-y5vp52e3bq] {
    margin: 0;
    text-align: center;
    font-family: var(--inter);
    color: var(--purple);
}

.gg-rows[b-y5vp52e3bq] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gg-row[b-y5vp52e3bq] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .6rem .8rem;
    background-color: color-mix(in srgb, var(--beige) 55%, #fff);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    font-family: var(--inter);
    color: var(--dark);
}

.gg-row-correct[b-y5vp52e3bq] {
    background-color: color-mix(in srgb, var(--lime) 45%, #fff);
    border-color: var(--green);
}

.gg-marks[b-y5vp52e3bq] {
    display: flex;
    gap: .55rem;
}

/* A tap target, not a tick: the whole point is marking twenty of these quickly. */
.gg-mark[b-y5vp52e3bq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background-color: #fff;
    border: 2px solid var(--dark);
    border-radius: 50%;
    line-height: 1;
    /* Dark enough to read as a tick or a cross before either is chosen; pale is what makes them mis-tapped. */
    color: color-mix(in srgb, var(--dark) 70%, #fff);
    box-shadow: 2px 2px 0 var(--dark);
    transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease, color .15s ease;
    cursor: pointer;
}

button.gg-mark:hover:not(.gg-mark-busy)[b-y5vp52e3bq] { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--dark); }
button.gg-mark:active:not(.gg-mark-busy)[b-y5vp52e3bq] { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--dark); }

/* A tap while the last one is still saving is dropped, so the button must not press as if it landed. */
button.gg-mark-busy[b-y5vp52e3bq] {
    cursor: progress;
    opacity: .5;
}

/* The class only watches, so this is a shape and must not offer to be pressed. */
.gg-mark-static[b-y5vp52e3bq] {
    cursor: default;
}

.gg-row-wrong[b-y5vp52e3bq] {
    background-color: color-mix(in srgb, var(--red) 14%, #fff);
    border-color: var(--red);
}

/* Only the button holding the mark lights up; the other stays offered, not chosen. */
.gg-row-correct .gg-mark-static[b-y5vp52e3bq],
.gg-row-correct .gg-mark-right[b-y5vp52e3bq] {
    background-color: var(--green);
    color: var(--beige);
}

.gg-row-wrong .gg-mark-static[b-y5vp52e3bq],
.gg-row-wrong .gg-mark-wrong[b-y5vp52e3bq] {
    background-color: var(--red);
    color: var(--beige);
}

/* Left aligned against the centred stage: a ragged left edge is unreadable down a list of options. */
.gg-answer[b-y5vp52e3bq] {
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
}

/* Same teal ring the leaderboard uses for your own row, so "this one is mine" reads the same everywhere.
   Deliberately last: on a row that is also right or wrong, the fill and the mark already say which,
   which frees the frame to say whose. */
.gg-row-mine[b-y5vp52e3bq] {
    border-color: var(--teal);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--teal) 30%, transparent);
}

/* The word carries it where the ring cannot: colour alone must not be the only marker. */
.gg-mine[b-y5vp52e3bq] {
    margin-left: .4rem;
    padding: .1rem .4rem;
    background-color: color-mix(in srgb, var(--teal) 18%, #fff);
    border: 1px solid var(--teal);
    border-radius: 999px;
    font-family: var(--space-mono);
    font-size: .7rem;
    white-space: nowrap;
    color: var(--dark);
}

.gg-count[b-y5vp52e3bq] {
    font-family: var(--space-mono);
    font-size: .85rem;
    white-space: nowrap;
    color: var(--purple);
}

@media (max-width: 640px) {
    .gg-grid[b-y5vp52e3bq] { padding: .85rem; }
    .gg-row[b-y5vp52e3bq] { gap: .5rem; padding: .5rem .6rem; }
    /* A thumb, not a mouse: keep the targets full size on a phone and push them further apart. */
    .gg-mark[b-y5vp52e3bq] { width: 2.75rem; height: 2.75rem; }
    .gg-marks[b-y5vp52e3bq] { gap: .65rem; }
    .gg-count[b-y5vp52e3bq] { font-size: .75rem; }
}

/* Below this the two buttons eat the answer itself, and a word starts stacking one letter per line. */
@media (max-width: 380px) {
    .gg-mark[b-y5vp52e3bq] { width: 2.4rem; height: 2.4rem; }
    .gg-marks[b-y5vp52e3bq] { gap: .45rem; }
}
/* /Components/Quiz/PlayerList.razor.rz.scp.css */
.qr-players[b-1hz3jmjv8f] {
    align-self: start;
    max-height: 70vh;
    overflow-y: auto;
    padding: 1rem;
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    z-index: 20;
}

.qr-players-head[b-1hz3jmjv8f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}

.qr-players-head .sessionName[b-1hz3jmjv8f] {
    margin: 0;
}

.qr-player-row[b-1hz3jmjv8f] {
    grid-template-columns: 1fr auto;
    padding: .5rem .75rem;
}
/* /Components/Quiz/QuizBoardCard.razor.rz.scp.css */
.qb-card[b-lynbhhf69z] {
    padding: 1.5rem;
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
}

.qb-title[b-lynbhhf69z] {
    margin: 0 0 1.25rem;
    text-align: center;
    font-family: var(--ekwarg);
    color: var(--dark);
}

.qb-empty[b-lynbhhf69z] {
    margin: 0;
    text-align: center;
    font-family: var(--inter);
    color: var(--purple);
}
/* /Components/Quiz/QuizItemRail.razor.rz.scp.css */
/* The rail is one grid cell of the run page, so it owns its own vertical stacking. */
.qr-rail[b-eekr5rfftr] {
    min-width: 0;
}

/* The rail is a session list at reading size, so a long quiz still fits beside the stage. */
.qr-rail-row[b-eekr5rfftr] {
    grid-template-columns: 1fr auto auto;
    padding: .6rem .9rem;
    /* Column gap only: the inherited 1rem would strand the action row below the question. */
    row-gap: 0;
}

.qr-rail-row .sessionName[b-eekr5rfftr] {
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
}

/* Indented and marked, to match the editor: a leaderboard is a break, not a question. */
.qr-rail-row.qr-rail-board[b-eekr5rfftr] {
    margin-left: 1.5rem;
    background-color: color-mix(in srgb, var(--gold) 10%, var(--beige));
}

/* ::deep: MudIcon renders its own element, which never carries this component scope. */
[b-eekr5rfftr] .qr-rail-board-mark {
    flex: 0 0 auto;
    padding: 1px;
    border: 2px solid var(--dark);
    border-radius: 5px;
    background-color: var(--gold);
    color: var(--dark);
}

/* Only the title gives way, or a long question eats the Live badge sitting beside it. */
.qr-rail-label[b-eekr5rfftr] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qr-rail-row .liveBadge[b-eekr5rfftr] {
    flex: 0 0 auto;
}

/* Expanding is what lets the question wrap, so the full text is never printed twice. */
.qr-rail-row.expanded > .sessionName[b-eekr5rfftr] {
    grid-row: 2;
    grid-column: 1 / -1;
    flex-wrap: wrap;
}

.qr-rail-row.expanded .qr-rail-label[b-eekr5rfftr] {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The state and the chevron move off the question's line, or they squeeze every wrapped row. */
.qr-rail-row.expanded > .sessionMeta[b-eekr5rfftr] {
    grid-row: 1;
    grid-column: 2;
}

.qr-rail-row.expanded > .iconBtn[b-eekr5rfftr] {
    grid-row: 1;
    grid-column: 3;
}

/* On the label, not the row: flex items do not inherit a strike-through from their container. */
.qr-rail-row.skipped .qr-rail-label[b-eekr5rfftr] {
    text-decoration: line-through;
    opacity: .65;
}

/* MudBlazor renders the icon, so it never carries this component's scope. */
[b-eekr5rfftr] .qr-rail-lock {
    margin-left: .3rem;
    vertical-align: text-bottom;
}

.qr-rail-preview[b-eekr5rfftr] {
    grid-column: 1 / -1;
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 2px solid var(--dark);
}

/* A reminder of the question, not a copy of the student's screen. */
.qr-preview-options[b-eekr5rfftr] {
    list-style: none;
    margin: .4rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.qr-preview-options li[b-eekr5rfftr] {
    overflow-wrap: anywhere;
    display: flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--inter);
    font-size: .85rem;
    color: var(--dark);
}

.qr-preview-options li.correct[b-eekr5rfftr] {
    font-weight: bold;
    color: var(--teal);
}

/* Its own line under the question: a row of buttons beside an ellipsised prompt leaves nothing readable. */
.qr-rail-actions[b-eekr5rfftr] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: .1rem;
    margin-top: .15rem;
}

.qr-rail-actions .iconBtn[b-eekr5rfftr] {
    width: 28px;
    height: 28px;
}

/* A move that would displace an already-asked question: without this it looks live and does nothing. */
.qr-rail-actions .iconBtn:disabled[b-eekr5rfftr] {
    opacity: .3;
    cursor: default;
}

.qr-rail-add[b-eekr5rfftr] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .75rem;
}

.qr-rail-type[b-eekr5rfftr] {
    padding: .3rem .6rem;
    font-size: .85rem;
}
/* /Components/Quiz/QuizMyPlace.razor.rz.scp.css */
.ql-mine-block[b-784xlv870i] {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 2px dashed color-mix(in srgb, var(--dark) 35%, transparent);
}

.ql-mine-label[b-784xlv870i] {
    display: block;
    margin-bottom: .5rem;
    font-family: var(--inter);
    font-size: .85rem;
    color: var(--purple);
}
/* /Components/Quiz/QuizPodium.razor.rz.scp.css */
/* Never wraps: a podium that breaks onto two lines stops reading as a podium at all. */
.qp-steps[b-lhqmvke3ng] {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: .5rem;
    flex-wrap: nowrap;
}

.qp-step[b-lhqmvke3ng] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    min-width: 0;
    flex: 1 1 0;
    max-width: 10rem;
    font-family: var(--inter);
    color: var(--dark);
    animation: ql-rise .45s ease-out both;
}

/* Side is decided in PodiumLayout, which has to see the whole board to place a tie. */
.qp-step-1[b-lhqmvke3ng] { animation-delay: .2s; }
.qp-step-3[b-lhqmvke3ng] { animation-delay: .1s; }

.qp-medal[b-lhqmvke3ng] {
    font-size: 2.1rem;
    line-height: 1;
}

.qp-step .qp-alias[b-lhqmvke3ng] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.qp-points[b-lhqmvke3ng] {
    font-family: var(--space-mono);
    font-variant-numeric: tabular-nums;
    color: var(--purple);
}

.qp-block[b-lhqmvke3ng] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    padding-top: .4rem;
    margin-top: .5rem;
    background-color: color-mix(in srgb, var(--beige) 55%, #fff);
    border: 2px solid var(--dark);
    border-bottom: none;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    font-family: var(--ekwarg);
    font-size: 1.4rem;
    animation: qp-grow .5s cubic-bezier(.2, .8, .3, 1) both;
    transform-origin: bottom;
}

.qp-step-1 .qp-block[b-lhqmvke3ng] { height: 5.5rem; background-color: var(--rank-1); animation-delay: .2s; }
.qp-step-2 .qp-block[b-lhqmvke3ng] { height: 4rem; background-color: var(--rank-2); }
.qp-step-3 .qp-block[b-lhqmvke3ng] { height: 3rem; background-color: var(--rank-3); animation-delay: .1s; }

.qp-step-mine .qp-block[b-lhqmvke3ng] {
    box-shadow: inset 0 0 0 3px var(--teal);
}

/* A wrapper, not a class on the list: the list is a component and owns its own styling. */
.qp-rest[b-lhqmvke3ng] {
    margin-top: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .qp-step[b-lhqmvke3ng], .qp-block[b-lhqmvke3ng] { animation: none; }
}
/* /Components/Quiz/QuizRankedList.razor.rz.scp.css */
.ql-rows[b-36x1yb8aot] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The fill is the score as a share of the leader's, so the gap is visible before the numbers are read. */
.ql-row[b-36x1yb8aot] {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .65rem .9rem;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--beige) 55%, #fff);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    font-family: var(--inter);
    color: var(--dark);
    animation: ql-rise .35s ease-out both;
}

/* A rule along the bottom edge, so the gap is legible without a block edge cutting through a name. */
.ql-row[b-36x1yb8aot]::before {
    content: "";
    position: absolute;
    inset: auto auto 0 0;
    height: 4px;
    width: var(--ql-fill, 0%);
    background-color: var(--teal);
    animation: ql-sweep .7s cubic-bezier(.2, .8, .3, 1) both;
}

.ql-row-1[b-36x1yb8aot]::before { background-color: var(--rank-1); }

.ql-row > *[b-36x1yb8aot] {
    position: relative;
}

.ql-row-mine[b-36x1yb8aot] {
    border-color: var(--teal);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--teal) 30%, transparent);
    font-weight: 700;
}

.ql-rank[b-36x1yb8aot] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--beige) 70%, var(--dark) 8%);
    font-family: var(--ekwarg);
    font-size: .95rem;
}

.ql-row-1 .ql-rank[b-36x1yb8aot] { background-color: var(--rank-1); }
.ql-row-2 .ql-rank[b-36x1yb8aot] { background-color: var(--rank-2); }
.ql-row-3 .ql-rank[b-36x1yb8aot] { background-color: var(--rank-3); }

.ql-alias[b-36x1yb8aot] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ql-points[b-36x1yb8aot] {
    font-family: var(--space-mono);
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .ql-row[b-36x1yb8aot], .ql-row[b-36x1yb8aot]::before { animation: none; }
}
/* /Components/Quiz/QuizStudentView.razor.rz.scp.css */
.qs-view[b-n29fbbpgdp] {
    width: 100%;
}

.qs-stage[b-n29fbbpgdp] {
    text-align: center;
    padding: 2.5rem 1rem;
}

.qs-stage h1[b-n29fbbpgdp] {
    margin: 0 0 .5rem;
    font-family: var(--ekwarg);
    color: var(--dark);
}

/* What this student scored on the question just closed, above the list of what everyone answered. */
.qs-score[b-n29fbbpgdp] {
    margin: 0 0 .75rem;
    font-family: var(--ekwarg);
    font-size: 1.25rem;
    font-weight: 700;
}

.qs-score.right[b-n29fbbpgdp] { color: var(--green); }
.qs-score.wrong[b-n29fbbpgdp] { color: var(--dark); }

/* The way back in once the panel is closed, so it sits under whatever the stage is showing. */
.qs-rejoin[b-n29fbbpgdp] {
    text-align: center;
    margin-top: 1rem;
}
/* /Components/Quiz/ScaleBars.razor.rz.scp.css */
.sb-chart[b-unhwbjdruy] {
    padding: 1.25rem;
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
}

.sb-empty[b-unhwbjdruy] {
    margin: 0;
    text-align: center;
    font-family: var(--inter);
    color: var(--purple);
}

.sb-plot[b-unhwbjdruy] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .5rem;
    height: 12rem;
    /* Ten steps still beat a phone's width, so the chart scrolls rather than the page. */
    overflow-x: auto;
}

/* Rows, so the labels cannot eat into the height the column is a proportion of. */
.sb-bar[b-unhwbjdruy] {
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    flex: 1 1 2rem;
    justify-items: center;
    height: 100%;
    gap: .3rem;
    font-family: var(--inter);
    color: var(--dark);
}

.sb-count[b-unhwbjdruy] {
    font-weight: 700;
}

.sb-verdict[b-unhwbjdruy] {
    display: flex;
    align-items: center;
    height: 1.25rem;
    color: var(--dark);
}

.sb-track[b-unhwbjdruy] {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 100%;
}

.sb-column[b-unhwbjdruy] {
    width: 100%;
    /* Absolute, not a share of the tallest: a percentage floor is mostly border at this size. */
    min-height: .7rem;
    background-color: var(--teal);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.sb-bar-mine .sb-column[b-unhwbjdruy] {
    background-color: var(--purple);
}

/* The mark outranks the tint: which step was right is the point of a question you marked. */
.sb-bar-right .sb-column[b-unhwbjdruy] {
    background-color: var(--green);
}

.sb-bar-wrong .sb-column[b-unhwbjdruy] {
    background-color: var(--red);
}

.sb-value[b-unhwbjdruy] {
    font-weight: 700;
}

/* Held in every bar so one label cannot drop the row it sits on out of line with its neighbours. */
.sb-mine[b-unhwbjdruy] {
    visibility: hidden;
    font-size: .75rem;
    color: var(--dark);
}

.sb-bar-mine .sb-mine[b-unhwbjdruy] {
    visibility: visible;
}

.sb-ends[b-unhwbjdruy] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .5rem;
    font-family: var(--inter);
    font-size: .85rem;
    color: var(--dark);
}

@media (max-width: 640px) {
    .sb-chart[b-unhwbjdruy] {
        padding: .85rem;
    }

    .sb-plot[b-unhwbjdruy] {
        height: 10rem;
    }
}
/* /Components/SettingsModal.razor.rz.scp.css */
.settingsBackdrop[b-qfc63524fb] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(57, 53, 82, .45);
    z-index: 10050;
}

.settingsCard[b-qfc63524fb] {
    width: min(1280px, 90vw);
    /* Fixed rather than content-sized: a validation line appearing must not resize the window under the pointer. */
    height: min(860px, 88vh);
    height: min(860px, 88dvh);
    display: flex;
    flex-direction: column;
    color: var(--dark);
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    box-shadow: 6px 6px 0 var(--dark);
    overflow: hidden;
    outline: none;
}

.settingsHead[b-qfc63524fb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .9rem;
    background-color: var(--teal);
    color: var(--beige);
    border-bottom: 2px solid var(--dark);
}

.settingsTitle[b-qfc63524fb] {
    font-family: var(--ekwarg);
    font-size: 1.15rem;
    font-weight: bold;
}

.settingsClose[b-qfc63524fb] {
    background: none;
    border: none;
    color: var(--beige);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.settingsBody[b-qfc63524fb] {
    display: flex;
    flex: 1;
    min-height: 0;
}

.settingsNav[b-qfc63524fb] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 12rem;
    padding: 1rem .7rem;
    gap: .3rem;
    /* Without this the card clips sections past the fold: painted outside the nav, unreachable, no scrollbar. */
    overflow-y: auto;
    border-right: 2px solid var(--dark);
}

.settingsNavItem[b-qfc63524fb] {
    padding: var(--padding-box);
    background: none;
    border: none;
    border-radius: var(--border-radius);
    font-family: var(--inter);
    font-size: 1rem;
    font-weight: bold;
    color: var(--dark);
    text-align: start;
    cursor: pointer;
}

.settingsNavItem:hover[b-qfc63524fb] {
    background-color: rgba(57, 53, 82, .1);
}

.settingsNavItem.current[b-qfc63524fb] {
    background-color: var(--dark);
    color: var(--beige);
}

.settingsPanel[b-qfc63524fb] {
    flex: 1;
    min-width: 0;
    padding: 1.5rem 1.8rem;
    overflow-y: auto;
    font-family: var(--inter);
}

.settingsHeading[b-qfc63524fb] {
    margin-bottom: 1rem;
    font-family: var(--ekwarg);
    font-weight: bold;
}

.settingsLabel[b-qfc63524fb] {
    font-weight: bold;
}

.settingsValue[b-qfc63524fb] {
    margin-bottom: 1rem;
    font-family: var(--ekwarg);
    font-style: italic;
    color: var(--teal);
    overflow-wrap: anywhere;
}

.settingsNote[b-qfc63524fb] {
    font-size: .9rem;
}

.settingsInput[b-qfc63524fb] {
    width: 14rem;
    max-width: 100%;
    padding: var(--padding-box);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    background-color: var(--beige);
    color: var(--dark);
    font-family: var(--ekwarg);
    font-style: italic;
    outline: none;
}

.settingsInput:focus[b-qfc63524fb] {
    border-color: var(--red);
}

.settingsProgress[b-qfc63524fb] {
    width: 14rem;
    max-width: 100%;
    margin-top: 1rem;
}

.settingsError[b-qfc63524fb] {
    margin-top: 1rem;
    font-weight: bold;
    color: var(--red);
}

.settingsSignIn[b-qfc63524fb] {
    margin-top: .6rem;
}

.settingsDone[b-qfc63524fb] {
    margin-top: 1rem;
    font-weight: bold;
    color: var(--green);
}

/* ===== Mobile (<=640px) ===== */
@media (max-width: 640px) {
    .settingsCard[b-qfc63524fb] {
        width: calc(100vw - 1.5rem);
        height: calc(100vh - 1.5rem);
        height: calc(100dvh - 1.5rem);
    }

    .settingsBody[b-qfc63524fb] {
        flex-direction: column;
    }

    .settingsNav[b-qfc63524fb] {
        flex-direction: row;
        width: auto;
        padding: .6rem;
        overflow-x: auto;
        border-right: none;
        border-bottom: 2px solid var(--dark);
    }

    .settingsPanel[b-qfc63524fb] {
        padding: 1.1rem;
    }
}

.profilePicture[b-qfc63524fb] {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.4rem;
}

.profilePictureActions[b-qfc63524fb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}

.profilePicturePick[b-qfc63524fb] {
    display: inline-block;
    cursor: pointer;
}

.profilePicturePick:focus-within[b-qfc63524fb] {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* Out of sight but still focusable: display:none would take the keyboard route to it with it. */
.profilePicturePick[b-qfc63524fb]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}
/* /Components/ShareButton.razor.rz.scp.css */
.shareBackdrop[b-mq11dw80ak] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(57, 53, 82, .45);
    z-index: 10050;
}

.shareCard[b-mq11dw80ak] {
    width: min(340px, calc(100vw - 2rem));
    color: var(--dark);
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    box-shadow: 6px 6px 0 var(--dark);
    overflow: hidden;
}

.shareHeader[b-mq11dw80ak] {
    padding: .6rem .9rem;
    background-color: var(--teal);
    color: var(--beige);
    border-bottom: 2px solid var(--dark);
    font-family: var(--ekwarg);
    font-size: 1.15rem;
    font-weight: bold;
}

.shareBody[b-mq11dw80ak] {
    padding: 1rem 1.1rem 1.1rem;
    font-family: var(--inter);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
}

.shareName[b-mq11dw80ak] {
    margin: 0;
    font-family: var(--ekwarg);
    font-size: 1.25rem;
    text-align: center;
    overflow-wrap: anywhere;
}

/* Spaced out because this is the one thing anybody reads aloud. */
.shareCode[b-mq11dw80ak] {
    margin: .35rem 0 0;
    font-family: var(--space-mono);
    font-size: 1.6rem;
    letter-spacing: .15em;
    text-align: center;
    color: var(--dark);
}

.shareQr[b-mq11dw80ak] {
    width: 230px;
    height: 230px;
    padding: 10px;
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    box-shadow: 4px 4px 0 var(--dark);
}

.shareActions[b-mq11dw80ak] {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.shareBtn[b-mq11dw80ak],
.shareClose[b-mq11dw80ak] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: var(--padding-box);
    font-family: var(--inter);
    font-size: .95rem;
    font-weight: bold;
    color: var(--dark);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    cursor: pointer;
    position: relative;
}

/* Copy buttons: fill left-to-right on hover, matching the app submit buttons. */
.shareBtn[b-mq11dw80ak] {
    /* The sweep is deliberately slow; the press has to be instant, so they cannot share a transition. */
    transition: background-position 1s ease-in-out, color 1s ease-in-out, transform .06s ease;
    background: linear-gradient(to left, var(--beige) 50%, var(--dark) 50%);
    background-size: 200% 100%;
    background-position: right bottom;
}

.shareBtn:hover[b-mq11dw80ak] {
    background-position: left bottom;
    color: var(--beige);
}

/* Pressed into its own shadow: the button moves down and right while the shadow is pulled in. */
.shareBtn:active[b-mq11dw80ak] {
    transform: translate(3px, 3px);
}

.shareBtn:active[b-mq11dw80ak]::after {
    bottom: -2px;
    right: -2px;
}

.shareBtn[b-mq11dw80ak]::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 100%;
    height: 100%;
    border-bottom: 3px solid var(--dark);
    border-right: 3px solid var(--dark);
    border-radius: var(--border-radius);
    z-index: -1;
}

.shareClose[b-mq11dw80ak] {
    background-color: var(--beige);
    transition: background-color .2s ease-in-out, color .2s ease-in-out, transform .06s ease;
}

.shareClose:hover[b-mq11dw80ak] {
    background-color: var(--dark);
    color: var(--beige);
}

.shareClose:active[b-mq11dw80ak] {
    transform: translate(2px, 2px);
}

.shareQr[b-mq11dw80ak] {
    position: relative;
    display: block;
    cursor: pointer;
    transition: transform .12s ease-in-out;
}

.shareQr:active[b-mq11dw80ak] {
    transform: scale(.96);
}

.shareQr.copied[b-mq11dw80ak] {
    animation: qrPop-b-mq11dw80ak .4s ease-in-out;
}

@keyframes qrPop-b-mq11dw80ak {
    0%, 100% { transform: scale(1); }
    45% { transform: scale(1.05); }
}

.shareQrHint[b-mq11dw80ak] {
    display: block;
    margin-top: .4rem;
    font-family: var(--inter);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--purple);
    white-space: nowrap;
}

.shareQrHint.copied[b-mq11dw80ak] {
    color: var(--teal);
    font-weight: bold;
}

/* Matches .tb-launcher so Invite reads as a sibling of Ask and Quiz, in teal to tie it to the
   card it opens. Scoped here rather than global: no MudBlazor specificity left to beat. */
.shareTrigger[b-mq11dw80ak] {
    --shareWave: color-mix(in srgb, var(--teal) 80%, transparent);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    background: var(--teal);
    color: var(--beige);
    font-family: var(--ekwarg);
    padding: .35rem 1rem;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--dark);
    transition: transform .08s ease, box-shadow .08s ease;
}

.shareTrigger:hover[b-mq11dw80ak] { transform: translate(-1px, -1px); }
.shareTrigger:active[b-mq11dw80ak] { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--dark); }

/* Two waves half a cycle apart, so one is always leaving as the next arrives. The wave is a
   spreading box-shadow rather than a scaled ring: an outer shadow paints behind the button on its
   own, where a ring needs a stacking context that either traps it or drops it behind the bar. */
@keyframes shareTriggerWave-b-mq11dw80ak {
    to { box-shadow: 3px 3px 0 var(--dark), 0 0 0 26px transparent; }
}

/* The echoes carry no structural shadow of their own, so they need their own keyframes. */
@keyframes shareTriggerWaveEcho-b-mq11dw80ak {
    to { box-shadow: 0 0 0 26px transparent; }
}

/* The waves alone lose against four saturated buttons sharing the bar, so the button moves too. */
@keyframes shareTriggerBeat-b-mq11dw80ak {
    45% { transform: scale(1.09); }
}

.shareTrigger.nudging[b-mq11dw80ak] {
    box-shadow: 3px 3px 0 var(--dark), 0 0 0 0 var(--shareWave);
    animation: shareTriggerWave-b-mq11dw80ak 1.2s linear infinite, shareTriggerBeat-b-mq11dw80ak 1.2s ease-in-out infinite;
}

/* ::before only, so ::after stays free for the tap target below. */
.shareTrigger.nudging[b-mq11dw80ak]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 0 0 var(--shareWave);
    animation: shareTriggerWaveEcho-b-mq11dw80ak 1.2s linear infinite;
    animation-delay: -.6s;
}

/* An infinite animation outranks a plain declaration for the properties it animates, so without
   this the button ignores hover and press for exactly as long as it is asking to be pressed. */
.shareTrigger.nudging:hover[b-mq11dw80ak],
.shareTrigger.nudging:active[b-mq11dw80ak],
.shareTrigger.nudging:hover[b-mq11dw80ak]::before,
.shareTrigger.nudging:active[b-mq11dw80ak]::before {
    animation: none;
}

.shareTrigger.nudging:hover[b-mq11dw80ak] { transform: translate(-1px, -1px); }
.shareTrigger.nudging:active[b-mq11dw80ak] { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--dark); }

@media (prefers-reduced-motion: reduce) {
    .shareTrigger.nudging[b-mq11dw80ak] { animation: none; box-shadow: 3px 3px 0 var(--dark), 0 0 0 5px var(--shareWave); }
    .shareTrigger.nudging[b-mq11dw80ak]::before { display: none; }
}

/* Sized like the rest of the bar, with the tap target grown past the button rather than by
   inflating it, the same trick the Leave button uses. */
@media (max-width: 640px) {
    .shareTrigger[b-mq11dw80ak] {
        padding: .25rem .55rem;
    }

    .shareTrigger[b-mq11dw80ak]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 44px;
        transform: translateY(-50%);
    }
}
/* /Components/SteppedSlider.razor.rz.scp.css */
/* Native range input, styled directly by this component's scoped CSS (elements here carry the
   scope attribute, so no ::deep is needed). WebKit needs an explicit runnable-track plus a
   negative thumb margin to sit the thumb centred on the track; Firefox centres it for us. */
.stepped-slider[b-43fz3njtqx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* Equal fixed width on both labels so unequal label lengths never shift the track off-centre;
   each label hugs the track (min right-aligned, max left-aligned). */
.stepped-slider .ss-label[b-43fz3njtqx] {
    flex: 0 0 5.5rem;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--dark);
    overflow-wrap: break-word;
}

.stepped-slider .ss-min[b-43fz3njtqx] { text-align: right; }
.stepped-slider .ss-max[b-43fz3njtqx] { text-align: left; }

.ss-track[b-43fz3njtqx] {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 28px;
    display: flex;
    align-items: center;
}

/* Step dots behind the translucent track; inset by ~half the thumb so the ends line up with
   the thumb's travel. The thumb covers whichever step it rests on. */
.ss-ticks[b-43fz3njtqx] {
    position: absolute;
    left: 13px;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 0;
}

.ss-tick[b-43fz3njtqx] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dark);
    opacity: .55;
}

.ss-input[b-43fz3njtqx] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 28px;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    cursor: pointer;
}

.ss-input:disabled[b-43fz3njtqx] { opacity: .5; cursor: not-allowed; }

.ss-input[b-43fz3njtqx]::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 6px;
    background: rgba(57, 53, 82, .15);
    border: 2px solid var(--dark);
}

.ss-input[b-43fz3njtqx]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--teal);
    border: 3px solid var(--dark);
    box-shadow: 2px 2px 0 var(--dark);
    cursor: pointer;
    transition: transform .08s ease;
}

.ss-input[b-43fz3njtqx]::-webkit-slider-thumb:active { transform: scale(1.12); }

.ss-input[b-43fz3njtqx]::-moz-range-track {
    height: 10px;
    border-radius: 6px;
    background: rgba(57, 53, 82, .15);
    border: 2px solid var(--dark);
}

.ss-input[b-43fz3njtqx]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--teal);
    border: 3px solid var(--dark);
    box-shadow: 2px 2px 0 var(--dark);
    cursor: pointer;
}
/* /Pages/Dashboard.razor.rz.scp.css */
.dashboard[b-rnn6caynwn] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
    width: 100%;
}

/* ########### TABS ########### */
.tabBar[b-rnn6caynwn] {
    display: flex;
    gap: 1.5rem;
    border-bottom: 2px solid var(--dark);
}

.tab[b-rnn6caynwn] {
    padding: .5rem .25rem;
    margin-bottom: -2px;
    background: none;
    border: none;
    border-bottom: 4px solid transparent;
    font-family: var(--ekwarg);
    font-size: 1.35rem;
    font-weight: bold;
    color: var(--purple);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.tab:hover[b-rnn6caynwn] { color: var(--dark); }
.tab.active[b-rnn6caynwn] { color: var(--dark); border-bottom-color: var(--red); }

/* ########### NEW SESSION ########### */
.newSession[b-rnn6caynwn] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.sessionNameInput[b-rnn6caynwn] {
    flex: 1 1 18rem;
    max-width: 28rem;
    font-family: var(--inter);
    font-size: 1rem;
    color: var(--dark);
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    padding: var(--padding-box);
    outline: none;

    &::placeholder {
        color: var(--purple);
    }

    &:focus[b-rnn6caynwn] {
        border: 2px solid var(--red);
    }
}

/* ########### SESSION LIST ########### */
.sessionActions[b-rnn6caynwn] {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* Resume is only meaningful for the live session; grey it out for ended ones. */
.sessionActions .submitBtn:disabled[b-rnn6caynwn],
.sessionActions .submitBtn:disabled:hover[b-rnn6caynwn] {
    opacity: .4;
    cursor: not-allowed;
    color: var(--dark);
    background-position: right bottom;
}

/* Click-to-copy session code, styled to sit inline as plain text. */
.codeCopyable[b-rnn6caynwn] {
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}

.codeCopyable:hover[b-rnn6caynwn] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* A quiz waiting on an answer before this lesson can move on. */
.db-awaiting[b-rnn6caynwn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--beige);
    border-left: 3px solid var(--gold);
    padding: var(--padding-box);
    margin-bottom: .75rem;
}

.renameInput[b-rnn6caynwn] {
    width: 100%;
    max-width: 22rem;
    font-family: var(--inter);
    font-size: 1.05rem;
    color: var(--dark);
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    padding: .25rem .5rem;
    outline: none;
}

.renameInput:focus[b-rnn6caynwn] { border-color: var(--red); }

/* ########### QUIZ-ONLY GROUP ########### */
.quizOnlyGroup[b-rnn6caynwn] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* Dark on beige to be readable, dashed to match the rows it opens. */
.quizOnlyToggle[b-rnn6caynwn] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: .35rem;
    padding: .5rem .9rem;
    font-family: var(--inter);
    font-size: .95rem;
    font-weight: bold;
    color: var(--dark);
    background-color: var(--beige);
    border: 2px dashed var(--dark);
    border-radius: var(--border-radius);
    cursor: pointer;
}

.quizOnlyToggle:hover[b-rnn6caynwn] {
    color: var(--beige);
    background-color: var(--dark);
}

/* Dashed all the way down: these rows are a quiz on its own code, not a lesson. */
.quizOnlyGroup .sessionRow[b-rnn6caynwn] {
    border-style: dashed;
}

/* Teal, not the shared purple: this line is the only thing saying why Run is greyed out. */
.quizMeta[b-rnn6caynwn] {
    color: var(--teal);
}
/* /Pages/Home.razor.rz.scp.css */
.home[b-4rht6lv685] {
    display: grid;
    padding: 0 1.5rem;
}

.hero[b-4rht6lv685] {
    grid-template-rows: subgrid;
    position: absolute;
    align-content: center;
    justify-items: start;
    padding-left: 1.5rem;
}

.welcome[b-4rht6lv685] {
    margin-top: 5rem;
    font-size: 4rem;
    color: var(--dark);
    outline: none;
}

.heroContent[b-4rht6lv685] {
    display: flex;
    flex-direction: column;
    padding: 3rem 0;
    gap: 3rem;
}

.educator[b-4rht6lv685], .student[b-4rht6lv685] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.educatorSpan[b-4rht6lv685]{
    color: var(--teal);
    font-family: var(--ekwarg);
    font-style: italic;
}

.studentSpan[b-4rht6lv685]{
color: var(--red);
    font-family: var(--ekwarg);
    font-style: italic;
}

.btnSpan[b-4rht6lv685] {
    display: flex;
    gap: 2rem;
}

/* ===== Mobile (<=640px) ===== */
@media (max-width: 640px) {
    .home[b-4rht6lv685] { padding: 0 1rem; }

    /* The hero is absolutely positioned; cap its width and pad it so wide content cannot overflow. */
    .hero[b-4rht6lv685] {
        max-width: 100vw;
        box-sizing: border-box;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .welcome[b-4rht6lv685] {
        font-size: 2.2rem;
        margin-top: 2rem;
        overflow-wrap: anywhere;
    }

    .heroContent[b-4rht6lv685] {
        padding: 2rem 0;
        gap: 2rem;
    }

    /* Register + Sign In are 12rem each; wrap them so the second never runs off-screen. */
    .btnSpan[b-4rht6lv685] {
        flex-wrap: wrap;
        gap: 1rem;
    }
}
/* /Pages/Identity/Login.razor.rz.scp.css */
.login[b-18ddg15u96]{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.loginContent[b-18ddg15u96]{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 11rem;
}

.titleLogin[b-18ddg15u96] {
    text-align: center;
}

.warning[b-18ddg15u96]{
    font-weight: bold;
    margin-top: .5rem;
}
/* /Pages/Identity/Register.razor.rz.scp.css */
.register[b-2jzcgbcx5a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.registerContent[b-2jzcgbcx5a] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 11rem;
}

.titleRegister[b-2jzcgbcx5a] {
    text-align: center;
}

.warning[b-2jzcgbcx5a]{
    font-weight: bold;
    margin-top: .5rem;
}
/* /Pages/QuizEditor.razor.rz.scp.css */
.quizEditor[b-be3hf2lqrt] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
    width: 100%;
}

.editorHead[b-be3hf2lqrt] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.editorHead h1[b-be3hf2lqrt] {
    margin: 0;
    font-family: var(--ekwarg);
    color: var(--dark);
    text-decoration: underline;
    text-underline-offset: var(--underline-offest);
    font-weight: bold;
}

.editorSep[b-be3hf2lqrt] { flex: 1; }

.itemEmpty[b-be3hf2lqrt] {
    font-family: var(--inter);
    color: var(--purple);
    font-style: italic;
}

.itemList[b-be3hf2lqrt] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.itemRow[b-be3hf2lqrt] {
    display: grid;
    /* minmax, or the label column takes max-content and a long question overflows the row. */
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.25rem;
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
}

.itemRow.isHidden[b-be3hf2lqrt] { opacity: .5; }

/* Indented and marked: a leaderboard is a break in the running order, not something to answer. */
.itemRow.boardRow[b-be3hf2lqrt] {
    margin-left: 2.5rem;
    background-color: color-mix(in srgb, var(--gold) 10%, var(--beige));
}

/* A gold badge with a dark mark: the same shape as a question number, and legible on the tint. */
.itemBoardMark[b-be3hf2lqrt] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--dark);
    border-radius: 6px;
    background-color: var(--gold);
    color: var(--dark);
}

/* Marks where the dragged row would land, since the row itself keeps its place until the drop. */
.itemRow.dropTarget[b-be3hf2lqrt] { border-color: var(--lime); background-color: color-mix(in srgb, var(--lime) 12%, var(--beige)); }

.dragHandle[b-be3hf2lqrt] {
    display: grid;
    place-items: center;
    color: var(--purple);
    cursor: grab;
}

.dragHandle:active[b-be3hf2lqrt] { cursor: grabbing; }

.itemOrdinal[b-be3hf2lqrt] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--dark);
    border-radius: 6px;
    background-color: var(--teal);
    color: var(--beige);
    font-family: var(--ekwarg);
}

/* A hidden question is not asked, so it carries no number. */
.itemOrdinal.itemOrdinalSkipped[b-be3hf2lqrt] {
    background-color: var(--beige);
    color: var(--dark);
}

.itemLabel[b-be3hf2lqrt] {
    font-family: var(--ekwarg);
    font-size: 1.1rem;
    color: var(--dark);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Flex rather than ellipsis, so a narrow viewport wraps the chip instead of truncating it away. */
.itemLabel.boardLabel[b-be3hf2lqrt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    white-space: normal;
}

.itemHint[b-be3hf2lqrt] {
    flex: 0 0 auto;
    padding: .1rem .5rem;
    border: 1px solid var(--gold);
    border-radius: var(--border-radius);
    background-color: color-mix(in srgb, var(--gold) 22%, var(--beige));
    font-family: var(--inter);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dark);
    vertical-align: middle;
}

.itemKind[b-be3hf2lqrt] {
    font-family: var(--inter);
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    opacity: .55;
}

.itemActions[b-be3hf2lqrt] {
    display: flex;
    align-items: center;
    gap: .35rem;
    justify-content: flex-end;
}

.iconBtn[b-be3hf2lqrt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--dark);
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all .15s ease-in-out;
}

.iconBtn:hover:not(:disabled)[b-be3hf2lqrt] { border-color: var(--dark); background-color: var(--beige); }
.iconBtn:disabled[b-be3hf2lqrt] { opacity: .35; cursor: not-allowed; }
.iconBtn.delete:hover:not(:disabled)[b-be3hf2lqrt] { color: var(--red); border-color: var(--red); }

/* A phone has no room for the type chip beside five buttons, and the row overflowed without this. */
@media (max-width: 480px) {
    .itemKind[b-be3hf2lqrt] { display: none; }
}
/* /Pages/QuizRun.razor.rz.scp.css */
.qr-loading[b-xj5ocgrunk] {
    padding: 3rem 1rem;
    text-align: center;
    font-family: var(--inter);
    color: var(--purple);
}

.qr-body[b-xj5ocgrunk] {
    grid-row: 2;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(14rem, 22rem) 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 1rem 2.5rem 1rem 0;
}

/* A column rather than an overlay, so it never covers the timer or the Stop button. */
@media (min-width: 901px) {
    .qr-body.with-players[b-xj5ocgrunk] {
        grid-template-columns: minmax(12rem, 18rem) 1fr minmax(12rem, 18rem);
    }
}

@media (max-width: 900px) {
    .qr-body[b-xj5ocgrunk] {
        grid-template-columns: 1fr;
    }
}

/* Same skin as a session row, since the stage sits in the same list of surfaces. */
.qr-card[b-xj5ocgrunk] {
    padding: 1.5rem;
    background-color: var(--beige);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    text-align: center;
}

.qr-card h2[b-xj5ocgrunk] {
    margin-top: 0;
    font-family: var(--ekwarg);
    color: var(--dark);
}

.qr-stage[b-xj5ocgrunk] {
    min-width: 0;
}

.qr-error[b-xj5ocgrunk] {
    font-family: var(--inter);
    color: var(--red);
    margin: 0 0 .75rem;
}

.qr-warn[b-xj5ocgrunk] {
    font-family: var(--inter);
    border-left: 3px solid var(--gold);
    padding-left: .75rem;
    margin: 0 0 .75rem;
}

/* The answer that changes the quiz, so it carries the colour. Wipes to the same dark as every other
   filled button rather than to a shade of its own. */
.qr-keep-changes[b-xj5ocgrunk] {
    background-image: linear-gradient(to left, var(--green) 50%, var(--dark) 50%);
    color: var(--beige);
}

/* Gold only here: both answers are real choices, and wiping to dark like the button beside it would
   leave the cursor unable to say which one it is on. Elsewhere Cancel sits by a Delete and stays quiet. */
.qr-leave-alone:hover[b-xj5ocgrunk] {
    background: var(--gold);
    color: var(--dark);
}

.qr-share[b-xj5ocgrunk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}

.qr-stage-action[b-xj5ocgrunk] {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.qr-bar-actions[b-xj5ocgrunk] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* The bar mixes icon buttons, pill buttons and the primary button, so one height keeps them level.
   Invite and the count are their own components, so their rules need ::deep to reach them. */
.qr-bar-actions .stopSessionBtn[b-xj5ocgrunk],
.qr-bar-actions .runBtn[b-xj5ocgrunk],
.qr-bar-actions[b-xj5ocgrunk]  .shareTrigger,
.qr-bar-actions[b-xj5ocgrunk]  .joinedCount {
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Every part of the bar is a fixed size: the counter and the labels change, the layout must not. */
.qr-progress[b-xj5ocgrunk] {
    display: inline-block;
    flex-shrink: 0;
    width: 4.5rem;
    text-align: center;
    white-space: nowrap;
}

.qr-bar-actions .runBtn[b-xj5ocgrunk] {
    width: 8.5rem;
    white-space: nowrap;
}

.qr-bar-actions[b-xj5ocgrunk]  .joinedCount {
    width: 4.5rem;
    justify-content: center;
}

.qr-bar-actions .stopSessionBtn[b-xj5ocgrunk] {
    width: 7.5rem;
    justify-content: center;
    white-space: nowrap;
}

.qr-stage-action .runBtn[b-xj5ocgrunk] {
    width: 8.5rem;
    white-space: nowrap;
}

/* The count the teacher scans from across the room while the class is still joining. */
.qr-lobby-count[b-xj5ocgrunk] {
    margin: .6rem 0 0;
    font-family: var(--inter);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark);
}

/* The timer pill sets the height here, so the button has to match it rather than sit on the baseline. */
.qr-live-bar[b-xj5ocgrunk] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-top: .9rem;
}

/* Stretching the pill deformed it and opened a seam against its own shadow, so it keeps its shape. */
.qr-live-bar .qa-timer[b-xj5ocgrunk] {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.qr-live-stop[b-xj5ocgrunk] {
    border-width: 3px;
    padding: .45rem 1.1rem;
    font-size: 1rem;
    box-shadow: 3px 3px 0 var(--dark);
}
/* /Pages/StudentSession.razor.rz.scp.css */
.studentSession[b-qrvcusyc9q] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.studentSessionContent[b-qrvcusyc9q] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    height: 100%;
    width: 100%;
    align-items: center;
}

.activeSessionContainer[b-qrvcusyc9q] {
    display: flex;
    align-self: flex-start;
    padding: 2rem 0 0 2.5rem;
    width: 100%;
}

.sessionInfo[b-qrvcusyc9q] {
    display: flex;
    align-items: center;
    height: max-content;
    gap: .5rem;
}

.sessionHeading[b-qrvcusyc9q] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
}

.activeSessionTitle[b-qrvcusyc9q] {
    text-decoration: underline;
    text-underline-offset: var(--underline-offest);
}

/* ########## WAITING ########## */
/* Centres in what is left under the status bar. A full-height box pulled up by -6rem, which is the
   pattern the barless screens use, put this behind the bar instead, and the Leave button painted
   through the question. */
.waitingContainer[b-qrvcusyc9q], .questionContainer[b-qrvcusyc9q] {
    display: grid;
    flex: 1;
    min-height: 0;
    align-content: center;
    justify-items: center;
    gap: 1rem;
}


/* ########## QUIZ FINISHED ########## */
.qs-finished[b-qrvcusyc9q] {
    text-align: center;
    padding: 2.5rem 1rem;
}

.qs-finished h1[b-qrvcusyc9q] {
    margin: 0 0 .5rem;
    font-family: var(--ekwarg);
    color: var(--dark);
}


/* ########## ACTIVE QUESTION ##########*/
.responseOptions[b-qrvcusyc9q] {
    display: flex;
    gap: 2rem;
}

.responseBtn[b-qrvcusyc9q] {
    display: grid;
    justify-items: center;
    height: 15rem;
    width: 15rem;
    border-radius: var(--border-radius);
    padding: var(--padding-box);
    border: 3px solid var(--dark);
    font-family: var(--ekwarg);
    position: relative;

    &::after {
        content: '';
        position: absolute;
        bottom: -8px; /* Adjust offset from the bottom */
        right: -8px; /* Adjust offset from the right */
        width: 100%;
        height: 100%;
        border-bottom: 4px solid var(--dark); /* Simulated border - adjust color and thickness as needed */
        border-right: 4px solid var(--dark); /* Simulated border - adjust color and thickness as needed */
        border-radius: var(--border-radius);
        z-index: -1; /* Ensure it stays behind the .navBtn */
    }

    &:active[b-qrvcusyc9q] {
        transform: scale(.99);
    }
}

#tooFast[b-qrvcusyc9q] {
    transition: border-color 300ms ease-in-out, box-shadow 300ms ease-in-out;

    &:hover {
        box-shadow: 0 0 20px var(--red);
        border-color: var(--red);

        &::after {
            transition: border-color 300ms ease-in-out, box-shadow 300ms ease-in-out;
            border-color: var(--red);
        }
    }
}

#perfect[b-qrvcusyc9q] {
    transition: border-color 300ms ease-in-out, box-shadow 300ms ease-in-out;

    &:hover {
        box-shadow: 0 0 20px var(--teal);
        border-color: var(--teal);

        &::after {
            transition: border-color 300ms ease-in-out, box-shadow 300ms ease-in-out;
            border-color: var(--teal);
        }
    }
}

#tooSlow[b-qrvcusyc9q] {
    transition: border-color 300ms ease-in-out, box-shadow 300ms ease-in-out;

    &:hover {
        box-shadow: 0 0 20px var(--orange);
        border-color: var(--orange);

        &::after {
            transition: border-color 300ms ease-in-out, box-shadow 300ms ease-in-out;
            border-color: var(--orange);
        }
    }
}

.responseBtnImage[b-qrvcusyc9q] {
    width: 100px;
    filter: invert(15%) sepia(14%) saturate(1188%) hue-rotate(223deg) brightness(95%) contrast(92%);
}

/* ########## SESSION ENDED ########## */
.sessionEndedContainer[b-qrvcusyc9q] {
    margin-top: -6rem;
    display: grid;
    gap: 1rem;
    justify-items: center;
}

.participation[b-qrvcusyc9q] {
    color: var(--teal);
}

/* ########## JOIN SESSION ########## */
.joinSessionContainer[b-qrvcusyc9q] {
    margin-top: -6rem;
}

.joinForm[b-qrvcusyc9q]{
    display: grid;
    width: 100%;
    justify-items: center;
    grid-template-rows: repeat(3, auto) 1.5rem;
    grid-template-columns: 1fr;
}

.joinTitle[b-qrvcusyc9q]{
    font-size: 2rem;
}

.errorMessage[b-qrvcusyc9q] {
    color: var(--red);
    text-align: center;
    min-height: 1.2rem;
}

/* ===== Mobile (<=640px) ===== */
@media (max-width: 640px) {
    /* Action bar: trim the big left padding and let the row wrap on narrow screens. */
    .activeSessionContainer[b-qrvcusyc9q] {
        padding: 1rem 1rem 0;
        box-sizing: border-box;
    }

    /* Keep the action bar to a single row: the bar spans the width and the title ellipsizes. */
    .sessionInfo.actionBar[b-qrvcusyc9q] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .sessionInfo[b-qrvcusyc9q] {
        flex-wrap: nowrap;
        min-width: 0;
    }

    .sessionHeading[b-qrvcusyc9q] {
        flex-wrap: nowrap;
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .activeSessionTitle[b-qrvcusyc9q] {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* Sized like everything else in the bar. A 44px min-height used to make it the tallest thing
       on screen once the rest shrank, so the tap target is grown past the button instead. */
    .leaveSessionBtn[b-qrvcusyc9q] {
        position: relative;
        flex: 0 0 auto;
    }

    .leaveSessionBtn[b-qrvcusyc9q]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 44px;
        transform: translateY(-50%);
    }

    .waitingContainer[b-qrvcusyc9q], .questionContainer[b-qrvcusyc9q] {
        width: 100%;
        box-sizing: border-box;
        padding: 0 .6rem;
    }

    /* The feedback panel is rendered first but belongs under the bar, so the column is reordered
       rather than the markup: it renders in several branches and only one place is the panel. */
    .studentSessionContent > *[b-qrvcusyc9q] { order: 2; }
    .activeSessionContainer[b-qrvcusyc9q] { order: 0; }
    .studentSessionContent[b-qrvcusyc9q]  .feedback-overlay.student { order: 1; }

    .waitingContainer h1[b-qrvcusyc9q] {
        text-align: center;
        overflow-wrap: anywhere;
    }

    .sessionEndedContainer[b-qrvcusyc9q] {
        margin-top: 0;
        padding: 0 1rem;
        text-align: center;
    }

    /* Full-width, tappable join form. */
    .joinSessionContainer[b-qrvcusyc9q] {
        margin-top: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 0 1rem;
    }

    .joinForm[b-qrvcusyc9q] {
        width: min(100%, 20rem);
        margin-inline: auto;
        gap: .75rem;
    }

    /* Match specificity of the #inputText ID rule so the field and button share one width. */
    .joinForm #inputText[b-qrvcusyc9q],
    .joinForm .submitBtn[b-qrvcusyc9q] {
        width: 100%;
        box-sizing: border-box;
        min-height: 44px;
    }

    .joinForm .submitBtn[b-qrvcusyc9q] {
        text-align: center;
    }
}

@media (max-width: 380px) {
    .activeSessionContainer[b-qrvcusyc9q] {
        padding: .75rem .75rem 0;
    }
}
/* /Pages/TeacherSession.razor.rz.scp.css */
/* The teacher page fills the viewport; the shared shell deliberately does not. */
.activeSessionContainer[b-4e83bt78zg] {
    height: 100%;
}

.signInPrompt[b-4e83bt78zg] {
    margin-top: -6rem;
}

#signIn[b-4e83bt78zg] {
    font-family: var(--ekwarg);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: var(--underline-offest);


    &:visited {
        color: var(--teal)
    }
}

/* ########### LOADING ########## */

.teacherSession[b-4e83bt78zg] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.teacherSessionContent[b-4e83bt78zg] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    height: 100%;
    width: 100%;
    align-items: center;
}

.btnWithIcon[b-4e83bt78zg] {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 13rem;
}





/* Every level has to be told it may shrink, or a long lesson name widens the whole column past the
   window and the name is never squeezed, so the ellipsis below has nothing to trigger it. The grid
   column needs minmax too: an implicit one takes max-content and overflows a pinned container. */
.teacherSession[b-4e83bt78zg],
.teacherSessionContent[b-4e83bt78zg],
.activeSessionContainer[b-4e83bt78zg],
.sessionInfo.actionBar[b-4e83bt78zg],
.sessionHeading[b-4e83bt78zg] {
    min-width: 0;
}

.activeSessionContainer[b-4e83bt78zg] {
    grid-template-columns: minmax(0, 1fr);
}

.activeSessionTitle[b-4e83bt78zg] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: underline;
    text-underline-offset: var(--underline-offest);
}

.timer[b-4e83bt78zg] {
    display: grid;
    grid-template-columns: repeat(3, auto);
    align-self: center;
    align-items: center;
    margin-top: -6rem;
    justify-self: center;
    justify-items: center;
    justify-content: center;
    gap: 5rem;
    width: 80%;
}

.timerInput[b-4e83bt78zg] {
    width: 13rem;
    height: 6rem;
    font-family: var(--ekwarg);
    background-color: var(--beige);
    border-radius: var(--border-radius);
    padding: var(--padding-box);
    outline: none;
    border: 2px solid var(--dark);
    font-size: 3rem;
    color: var(--teal);
    text-align: end;
    margin-bottom: .5rem;

    &:focus {
        border: 2px solid var(--red)
    }

    &[b-4e83bt78zg]::-webkit-inner-spin-button {
        opacity: 1;
        margin-left: .75rem;
        padding: 0 2px;
        filter: brightness(1.5) sepia(0.2) saturate(0.3) hue-rotate(30deg);
    }
}

.questionTimer[b-4e83bt78zg] {
    font-size: 2rem;
}


.countdown[b-4e83bt78zg] {
    display: flex;
    justify-content: center;
    align-items: end;
    position: relative;
}

.countDownRest[b-4e83bt78zg] {
    position: absolute;
    margin-bottom: 3.5rem;
    font-family: var(--ekwarg);
}

.progressCircle[b-4e83bt78zg] {
    position: absolute;
}

/* ############# CHART ############# */
.responseChartContainer[b-4e83bt78zg] {
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 400px;
    width: 400px;
    background-color: var(--beige);
    border-radius: var(--border-radius);
    padding: 1.5rem 1.5rem 4rem 1.5rem !important;
    border: 2px solid var(--dark);
}

.responseChartContainer h3[b-4e83bt78zg] {
    margin-bottom: 0.5rem;
    font-family: var(--ekwarg);
    color: var(--dark);
}

[b-4e83bt78zg] .mud-chart {
    transform: scale(1);
    transform-origin: center center;
    margin: 10px auto;
    height: 100% !important;
    width: 100%;
}

[b-4e83bt78zg](.mud-chart-legend) {
    font-size: 1.4rem !important;
    padding-top: 10px !important;
    color: var(--dark);
    font-weight: bold !important;
}

[b-4e83bt78zg] .mud-charts-xaxis text {
    display: none;
}

[b-4e83bt78zg] .mud-charts-yaxis text {
    font-size: 1.5rem !important;
    font-weight: bold !important;
}

[b-4e83bt78zg] .mud-charts-yaxis text {
    text-anchor: middle;
}

[b-4e83bt78zg] .mud-charts-xaxis text:first-of-type {
    text-anchor: start;
}

[b-4e83bt78zg] .mud-charts-xaxis text:last-of-type {
    text-anchor: end;
}

[b-4e83bt78zg] .mud-chart-bar {
    stroke-width: 80px;
}

[b-4e83bt78zg] .mud-charts-bar-series {
    transform: translateX(85px) scaleX(.8);
}

[b-4e83bt78zg] .mud-charts-xaxis {
    transform: translateX(30px) translateY(12px);
}

[b-4e83bt78zg] (.mud-chart-legend-text) {
    font-size: 1.25rem !important;
}

[b-4e83bt78zg] .mud-charts-grid,
[b-4e83bt78zg] .mud-charts-grid {
    stroke: var(--dark);
    stroke-width: 2px;
}

[b-4e83bt78zg](.mud-chart rect.mud-bar-char-bar[data-index="0"]) {
    fill: var(--red) !important;
}

[b-4e83bt78zg](.mud-chart rect.mud-bar-char-bar[data-index="1"]) {
    fill: var(--teal) !important;
}

[b-4e83bt78zg](.mud-chart rect.mud-bar-char-bar[data-index="2"]) {
    fill: var(--orange) !important;
}

[b-4e83bt78zg](.mud-chart-legend-item:nth-child(1) .mud-chart-legend-marker) {
    background-color: var(--red) !important;
}

[b-4e83bt78zg](.mud-chart-legend-item:nth-child(2) .mud-chart-legend-marker) {
    background-color: var(--teal) !important;
}

[b-4e83bt78zg](.mud-chart-legend-item:nth-child(3) .mud-chart-legend-marker) {
    background-color: var(--orange) !important;
}

.count[b-4e83bt78zg] {
    font-size: 1.5rem;
    font-weight: bold;
    fill: var(--dark);
}

/* ########### QUIZ LAUNCHER ########### */
.quizPickList[b-4e83bt78zg] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: min(50vh, 20rem);
    overflow-y: auto;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

/* Name and count stacked, Run on the right: side by side the name shrank to one letter per line. */
.quizPickRow[b-4e83bt78zg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: .6rem;
    padding: .5rem .6rem;
    background-color: color-mix(in srgb, var(--beige) 55%, #fff);
    border: 2px solid var(--dark);
    border-radius: var(--border-radius);
    font-family: var(--inter);
    color: var(--dark);
}

/* Two lines then ellipsis, full name on hover: one long title must not push the list off the card. */
.quizPickName[b-4e83bt78zg] {
    grid-column: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.quizPickMeta[b-4e83bt78zg] {
    grid-column: 1;
    font-family: var(--space-mono);
    font-size: .8rem;
    overflow-wrap: anywhere;
    color: var(--teal);
}

/* width: auto beats the global 14rem, which is what squeezed the name column to a few letters. */
.quizPickRow .submitBtn[b-4e83bt78zg] {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    width: auto;
    min-width: 0;
    white-space: nowrap;
}

/* Three buttons on one row do not fit a 420px card, so let them wrap rather than shred the labels. */
.confirmActions[b-4e83bt78zg] {
    flex-wrap: wrap;
}

.confirmActions .submitBtn[b-4e83bt78zg],
.confirmActions .deleteBtn[b-4e83bt78zg] {
    width: auto;
}

/* Gold, not the purple of Ask: starting a quiz takes the whole class somewhere else. */
.quizLauncher[b-4e83bt78zg] {
    background: var(--gold);
    color: var(--dark);
}

/* A quiz with nothing in it cannot run, and the button has to say so before it is pressed. */
.quizPickRow .submitBtn:disabled[b-4e83bt78zg],
.quizPickRow .submitBtn:disabled:hover[b-4e83bt78zg] {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
}

/* ########### PHONE AND TABLET ########### */
/* This screen had no mobile rules at all, so the bar simply ran off the side. It needs 541px of
   labelled buttons against roughly 370px of phone. Icons carry the meaning here; every button
   keeps its aria-label and tooltip, so nothing is lost to a screen reader. */
@media (max-width: 768px) {
    /* The shared shell insets 2.5rem on the left and nothing on the right, which reads as the bar
       sitting off centre against everything below it. Even it up, as the student screen does. */
    .activeSessionContainer[b-4e83bt78zg] {
        padding: 1rem 1rem 0;
    }

    .sessionInfo.actionBar[b-4e83bt78zg] {
        width: 100%;
        max-width: 100%;
        /* Every control is a fixed width, so the name was the only thing that could give and it
           gave everything: a bare ellipsis at 360px, nothing at all at 320px. Below the floor the
           controls drop to their own row instead. */
        flex-wrap: wrap;
        row-gap: .35rem;
    }

    .sessionHeading[b-4e83bt78zg] {
        flex-wrap: nowrap;
        min-width: 4rem;
        /* Basis 0, not auto: a wrapping flex item sized to its content takes a whole line before it
           will shrink, so a long lesson name pushed buttons off the row instead of ellipsizing. */
        flex: 1 1 0;
        overflow: hidden;
    }

    .activeSessionTitle[b-4e83bt78zg] { min-width: 0; }

    .barLabel[b-4e83bt78zg] { display: none; }

    /* ::deep, because the label belongs to the share component and carries its scope, not ours.
       Only this screen is cramped: the student bar and the dashboard rows keep the word. */
    .actionBar[b-4e83bt78zg]  .shareTriggerLabel { display: none; }
}

/* Below this the name cannot hold a useful number of characters beside the controls, so it takes
   the row to itself and they move down together. Wrapping without this left Stop alone on row two. */
@media (max-width: 480px) {
    /* Room left for the back arrow beside it, or that gets a row of its own too. */
    .sessionHeading[b-4e83bt78zg] { flex-basis: calc(100% - 3rem); }
}