/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout.razor.css — App shell layout */

.app-shell[b-umvqajci5m] {
    display: flex;
    min-height: 100vh;
}

.app-content[b-umvqajci5m] {
    flex: 1;
    margin-left: 240px;
    transition: margin-left 0.2s ease;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Prevent any stray horizontal overflow from a child (e.g. a scroll-snap
       carousel on a narrow viewport, a chip row that couldn't wrap in time)
       from bubbling up and making the whole page scroll sideways on mobile.
       Individual components that legitimately need horizontal scroll manage
       it inside their own overflow-x: auto containers. */
    min-width: 0;
    overflow-x: hidden;
}

.app-content--collapsed[b-umvqajci5m] {
    margin-left: 60px;
}

.app-topbar[b-umvqajci5m] {
    height: 52px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.app-topbar__title[b-umvqajci5m] {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* WO-109 rider (Kevin) — the generation popup shows the current brand mark; the shared 48×48
   app.css rule would crush the wide image, so the scoped rule wins here. */
.gen-popup__logo[b-umvqajci5m] {
    width: 180px;
    height: 96px;
    object-fit: contain;
    border-radius: 10px;
    opacity: 1;
}

/* WO-33 T8 — same treatment as the side nav's .sidenav__brand-tagline (uppercase, 700, 0.14em), on the popup's
   light surface, so the colour is the secondary text token rather than the nav's white. */
.gen-popup__tagline[b-umvqajci5m] {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* WO-109 — the signed-in account chip, right-aligned in the topbar */
.app-topbar__account[b-umvqajci5m] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.app-topbar__account-name[b-umvqajci5m] {
    font-weight: 600;
}

.app-topbar__signout[b-umvqajci5m] {
    color: var(--color-text-secondary);
    text-decoration: underline;
}

.app-main[b-umvqajci5m] {
    flex: 1;
    background: var(--color-surface-2);
    min-width: 0;
    overflow-x: hidden;
}

/* ─── Error UI ─── */
#blazor-error-ui[b-umvqajci5m] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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-umvqajci5m] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ─── Mobile + narrow desktop ─── */
/* Matches the sidenav's 1024px breakpoint so content reclaims the full
   width when the sidebar transitions to a drawer. */
@media (max-width: 1024px) {
    .app-content[b-umvqajci5m] {
        margin-left: 0;
    }

    .app-content--collapsed[b-umvqajci5m] {
        margin-left: 0;
    }

    .app-topbar[b-umvqajci5m] {
        padding-left: 56px; /* room for hamburger button */
    }
}
/* /Components/Pages/Account/SignIn.razor.rz.scp.css */
/* 🔴 PLAT-WO-11a T1 (L1, layout B) — the two cards side by side: each up to 380 px wide, 32 px apart, the same
   height, centred on the canvas. Below ~820 px they stack, the trial on top (the DOM order). Tokens only (the kit's
   token test covers this file). */

.signin-pair[b-6wqcr0w2pg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 380px));
    justify-content: center;
    align-items: stretch;
    gap: var(--space-8);
    width: 100%;
}

/* PLAT-WO-16g T1 — the switch hides the trial card: the sign-in card alone, centred. */
.signin-pair--single[b-6wqcr0w2pg] { grid-template-columns: minmax(0, 380px); }

@media (max-width: 820px) {
    .signin-pair[b-6wqcr0w2pg] {
        grid-template-columns: minmax(0, 380px);
        gap: var(--space-6);
    }
}

@media (max-width: 600px) {
    .signin-pair[b-6wqcr0w2pg] { grid-template-columns: minmax(0, 1fr); }
}

.signin-sr[b-6wqcr0w2pg] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
/* /Components/Pages/Account/StudentPrivacyNote.razor.rz.scp.css */
/* WO-112 T2 — the one-screen privacy note. Calm, readable, nothing decorative. */

.privacy-note[b-d4isg3eyib] {
    display: flex;
    justify-content: center;
    padding: 2.5rem 1rem 4rem;
}

.privacy-note__card[b-d4isg3eyib] {
    max-width: 44rem;
    padding: 2rem 2.25rem 2.5rem;
}

.privacy-note__title[b-d4isg3eyib] {
    margin: 0 0 0.5rem;
    font-size: 1.6rem;
    line-height: 1.25;
}

.privacy-note__intro[b-d4isg3eyib] {
    margin: 0 0 1.75rem;
    color: var(--ivaro-text-muted, #6b7280);
    line-height: 1.6;
}

.privacy-note__section + .privacy-note__section[b-d4isg3eyib] {
    margin-top: 1.5rem;
}

.privacy-note__heading[b-d4isg3eyib] {
    margin: 0 0 0.35rem;
    font-size: 1.02rem;
    font-weight: 650;
}

.privacy-note__body[b-d4isg3eyib] {
    margin: 0;
    line-height: 1.65;
}
/* /Components/Pages/Classroom/AddClass.razor.rz.scp.css */
/* PLAT-WO-09c T6.1 — the page around the class-setup flow. Tokens only. */

.add-class[b-d4prb0egla] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-8);
}

@media (max-width: 640px) {
    .add-class[b-d4prb0egla] { padding: var(--space-4); }
}

.add-class__back[b-d4prb0egla] {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
}

.add-class__back:hover[b-d4prb0egla] { color: var(--color-secondary); }

.add-class__back:focus-visible[b-d4prb0egla] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.add-class__title[b-d4prb0egla] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-primary);
}
/* /Components/Pages/Classroom/ClassDetail.razor.rz.scp.css */
.class-detail[b-pj5eurecv1] {
    padding: var(--space-6, 24px) var(--space-8, 32px);
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 20px);
}

.class-detail__crumbs[b-pj5eurecv1] {
    margin-bottom: -8px;
}

.class-detail__back[b-pj5eurecv1] {
    color: var(--color-text-secondary, #5A6478);
    text-decoration: none;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
}

.class-detail__back:hover[b-pj5eurecv1] {
    color: var(--color-secondary, #2979CC);
}

.class-detail__header[b-pj5eurecv1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

.class-detail__title[b-pj5eurecv1] {
    margin: 0;
    font-family: var(--font-display, serif);
    font-size: var(--text-3xl, 2rem);
    font-weight: 400;
    color: var(--color-primary, #1B3A6B);
    line-height: 1.15;
}

.class-detail__updated[b-pj5eurecv1] {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-muted, #8E97A8);
}

.class-detail__card[b-pj5eurecv1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

.class-detail__card-head[b-pj5eurecv1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    padding-bottom: var(--space-3, 12px);
    border-bottom: 1px solid var(--color-surface-3, #E8ECF3);
}

.class-detail__card-title[b-pj5eurecv1] {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-xl, 1.25rem);
    font-weight: 600;
    color: var(--color-primary, #1B3A6B);
}

.class-detail__card-sub[b-pj5eurecv1] {
    margin: 4px 0 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #5A6478);
}

.class-detail__save-status[b-pj5eurecv1] {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-success, #2EAA8A);
    font-weight: 500;
    min-height: 1.2em;
    transition: opacity 0.2s ease;
}

.class-detail__field[b-pj5eurecv1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.class-detail__field--short[b-pj5eurecv1] {
    max-width: 160px;
}

.class-detail__grid[b-pj5eurecv1] {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: var(--space-4, 16px);
}

@media (max-width: 600px) {
    .class-detail__grid[b-pj5eurecv1] {
        grid-template-columns: 1fr;
    }
    .class-detail__field--short[b-pj5eurecv1] {
        max-width: none;
    }
}

.class-detail__label[b-pj5eurecv1] {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--color-text-secondary, #5A6478);
}

.class-detail__optional[b-pj5eurecv1] {
    color: var(--color-text-muted, #8E97A8);
    font-weight: 400;
}

.class-detail__input[b-pj5eurecv1] {
    width: 100%;
    padding: var(--space-3, 12px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 6px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    color: var(--color-text-primary, #1B3A6B);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.class-detail__input:focus[b-pj5eurecv1] {
    outline: none;
    border-color: var(--color-secondary, #2979CC);
    box-shadow: 0 0 0 3px rgba(41, 121, 204, 0.15);
}

.class-detail__chiprow[b-pj5eurecv1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

.class-detail__chip[b-pj5eurecv1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--color-surface, #fff);
    color: var(--color-text-secondary, #5A6478);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 999px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.class-detail__chip:hover[b-pj5eurecv1] {
    border-color: var(--color-accent, #2EAA8A);
    color: var(--color-primary, #1B3A6B);
}

.class-detail__chip--on[b-pj5eurecv1],
.class-detail__chip--on:hover[b-pj5eurecv1] {
    background: var(--color-accent-pale, #E6F7F2);
    color: var(--color-accent, #2EAA8A);
    border-color: rgba(46, 170, 138, 0.4);
    font-weight: 600;
}

.class-detail__add-student[b-pj5eurecv1] {
    width: auto;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
    flex: 0 0 auto;
}

.class-detail__roster[b-pj5eurecv1] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-surface-3, #E8ECF3);
    border-radius: 8px;
    overflow: hidden;
}

.class-detail__roster-empty[b-pj5eurecv1] {
    padding: var(--space-6, 24px);
    text-align: center;
    color: var(--color-text-secondary, #5A6478);
}

.class-detail__roster-empty p[b-pj5eurecv1] {
    margin: 0 0 var(--space-4, 16px);
}

.class-detail__roster-cta[b-pj5eurecv1] {
    width: auto;
    min-width: 200px;
}

.class-detail__error[b-pj5eurecv1] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-error, #C0392B);
}

.class-detail__danger[b-pj5eurecv1] {
    margin-top: var(--space-6, 24px);
    padding: var(--space-5, 20px);
    border: 1px dashed rgba(192, 57, 43, 0.4);
    border-radius: 10px;
    background: #FCEFEC;
}

.class-detail__danger-title[b-pj5eurecv1] {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-error, #C0392B);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.class-detail__danger-btn[b-pj5eurecv1] {
    background: transparent;
    color: var(--color-error, #C0392B);
    border: 1px solid rgba(192, 57, 43, 0.4);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border-radius: 6px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.class-detail__danger-btn:hover[b-pj5eurecv1] {
    background: var(--color-error, #C0392B);
    color: white;
}

.class-detail__skeleton[b-pj5eurecv1] {
    height: 180px;
    background: linear-gradient(90deg,
        var(--color-surface-2, #F4F6FA) 0%,
        var(--color-surface-3, #E8ECF3) 50%,
        var(--color-surface-2, #F4F6FA) 100%);
    background-size: 200% 100%;
    animation: class-detail-pulse-b-pj5eurecv1 1.4s ease infinite;
}

@keyframes class-detail-pulse-b-pj5eurecv1 {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.class-detail__notfound[b-pj5eurecv1] {
    text-align: center;
    padding: var(--space-8, 32px);
}

@media (max-width: 600px) {
    .class-detail[b-pj5eurecv1] {
        padding: var(--space-4, 16px);
    }
}

/* ── 🔴 WO-112 T2 — the roster prompt (amendment 14) ──────────────────────
   Inviting, not alarming: a normal card section with three equal-weight options
   and one quiet link. Nothing here is styled as a warning, because none of it is. */

.class-detail__roster-prompt[b-pj5eurecv1] {
    padding: 1.25rem 1.25rem 1rem;
    border: 1px dashed var(--ivaro-border, #d8dee9);
    border-radius: 12px;
    background: var(--ivaro-surface-muted, #f8fafc);
}

.class-detail__roster-prompt-title[b-pj5eurecv1] {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 650;
}

.class-detail__roster-prompt-body[b-pj5eurecv1] {
    margin: 0 0 1rem;
    line-height: 1.6;
    color: var(--ivaro-text, #1f2937);
}

.class-detail__roster-prompt-actions[b-pj5eurecv1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

/* The CSV picker is a styled label wrapping a hidden InputFile, so it sits level
   with the other two options instead of showing a raw browser file input. */
.class-detail__roster-upload[b-pj5eurecv1] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.class-detail__roster-file[b-pj5eurecv1] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* "I'll do this later" is a real answer, so it is a real control — quiet, but not
   hidden and not styled as a mistake. */
.class-detail__roster-later[b-pj5eurecv1] {
    background: none;
    border: none;
    padding: 0.4rem 0.2rem;
    color: var(--ivaro-text-muted, #6b7280);
    cursor: pointer;
    text-decoration: underline;
}

/* A quiet link, not a warning. */
.class-detail__roster-privacy[b-pj5eurecv1] {
    margin: 0.9rem 0 0;
    font-size: 0.85rem;
}

.class-detail__roster-privacy a[b-pj5eurecv1] {
    color: var(--ivaro-text-muted, #6b7280);
}

.class-detail__roster-paste[b-pj5eurecv1] {
    padding: 1rem 0 0;
}

.class-detail__roster-paste-label[b-pj5eurecv1] {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--ivaro-text-muted, #6b7280);
    line-height: 1.5;
}

.class-detail__roster-textarea[b-pj5eurecv1] {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--ivaro-border, #d8dee9);
    border-radius: 8px;
    font: inherit;
    resize: vertical;
    margin-bottom: 0.8rem;
}
/* /Components/Pages/Classroom/ClassList.razor.rz.scp.css */
.class-list[b-4tbk75e8co] {
    padding: var(--space-6, 24px) var(--space-8, 32px);
    max-width: 1200px;
    margin: 0 auto;
}

.class-list__header[b-4tbk75e8co] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-6, 24px);
}

.class-list__title[b-4tbk75e8co] {
    margin: 0;
    font-family: var(--font-display, serif);
    font-size: var(--text-3xl, 2rem);
    font-weight: 400;
    color: var(--color-primary, #1B3A6B);
    line-height: 1.15;
}

.class-list__sub[b-4tbk75e8co] {
    margin: var(--space-2, 8px) 0 0;
    font-size: var(--text-base, 1rem);
    color: var(--color-text-secondary, #5A6478);
}

.class-list__grid[b-4tbk75e8co] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5, 20px);
}

.class-list__skeleton[b-4tbk75e8co] {
    height: 200px;
    border-radius: 10px;
    background: linear-gradient(90deg,
        var(--color-surface-2, #F4F6FA) 0%,
        var(--color-surface-3, #E8ECF3) 50%,
        var(--color-surface-2, #F4F6FA) 100%);
    background-size: 200% 100%;
    animation: class-list-pulse-b-4tbk75e8co 1.4s ease infinite;
}

@keyframes class-list-pulse-b-4tbk75e8co {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.class-list__empty[b-4tbk75e8co] {
    text-align: center;
    max-width: 520px;
    margin: var(--space-8, 32px) auto;
    padding: var(--space-10, 40px) var(--space-6, 24px);
}

.class-list__empty-art[b-4tbk75e8co] {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: var(--space-4, 16px);
}

.class-list__empty-title[b-4tbk75e8co] {
    margin: 0 0 var(--space-3, 12px);
    font-family: var(--font-display, serif);
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 400;
    color: var(--color-primary, #1B3A6B);
}

.class-list__empty-text[b-4tbk75e8co] {
    margin: 0 0 var(--space-5, 20px);
    color: var(--color-text-secondary, #5A6478);
    line-height: 1.55;
}

.class-list__empty-cta[b-4tbk75e8co] {
    width: auto;
    min-width: 200px;
}

/* "Add a class" is a link that looks like the app's primary button. */
.class-list__add[b-4tbk75e8co],
.class-list__empty-cta[b-4tbk75e8co] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-decoration: none;
}

.class-list__add[b-4tbk75e8co] { flex: 0 0 auto; width: auto; white-space: nowrap; }

.class-list__error[b-4tbk75e8co] {
    margin-bottom: var(--space-4, 16px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: #FCEFEC;
    border: 1px solid rgba(192, 57, 43, 0.25);
    border-radius: 8px;
    color: var(--color-error, #C0392B);
    font-size: var(--text-sm, 0.875rem);
}

@media (max-width: 600px) {
    .class-list[b-4tbk75e8co] {
        padding: var(--space-4, 16px);
    }
    .class-list__grid[b-4tbk75e8co] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Dashboard/Dashboard.razor.rz.scp.css */
/* PLAT-WO-10b T3 — the main screen. Tokens only; the same column as the studio pages. */

.dash[b-kjuj6hwwfx] {
    max-width: min(1440px, 94vw);
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

.dash__title[b-kjuj6hwwfx] {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--color-text-primary);
}

.dash__lead[b-kjuj6hwwfx] {
    margin: 0 0 var(--space-6);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
}

/* PLAT-WO-11k T2 — the plan-lock notice, in the house notice style (deliverables-studio__notice): a surface panel
   with a left accent, amber like the reconnect bar's "failed" state. */
.dash__plan-notice[b-kjuj6hwwfx] {
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-warning);
    border-radius: 8px;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.dash__grid[b-kjuj6hwwfx] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
}

.dash__classes[b-kjuj6hwwfx] { margin: var(--space-6) 0 0; }

.dash__classes-link[b-kjuj6hwwfx] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--color-primary);
}

.dash__classes-link:focus-visible[b-kjuj6hwwfx] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

@media (max-width: 1024px) {
    .dash__grid[b-kjuj6hwwfx] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .dash[b-kjuj6hwwfx] { max-width: none; }
    .dash__grid[b-kjuj6hwwfx] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Deliverables/DeliverablesBuilder.razor.rz.scp.css */
/* Deliverables Studio — redesign (June 2026).
   Uses the global Ivaro design tokens (SharedUI app.css): --color-*, --space-*,
   --text-*, --font-*. Page-scoped classes only (the page no longer borrows the
   component-scoped guided-lesson__* classes, which never applied here). */

.del[b-jmzvoe3zsn] {
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--space-6, 24px) var(--space-4, 16px) var(--space-12, 48px);
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 24px);
}

.del__header[b-jmzvoe3zsn] { margin-bottom: var(--space-1, 4px); }

.del__title[b-jmzvoe3zsn] {
    font-family: var(--font-display, 'DM Serif Display', serif);
    font-size: var(--text-3xl, 2rem);
    color: var(--color-primary, #1B3A6B);
    margin: 0 0 var(--space-1, 4px);
}

.del__subtitle[b-jmzvoe3zsn] {
    color: var(--color-text-secondary, #5A6478);
    font-size: var(--text-base, 1rem);
    margin: 0;
}

/* Panels */
.del__panel[b-jmzvoe3zsn] { display: flex; flex-direction: column; gap: var(--space-5, 20px); }

.del__panel-title[b-jmzvoe3zsn] {
    font-size: var(--text-2xl, 1.5rem);
    color: var(--color-primary, #1B3A6B);
    margin: 0;
}

.del__panel-hint[b-jmzvoe3zsn] {
    color: var(--color-text-secondary, #5A6478);
    font-size: var(--text-sm, 0.875rem);
    margin: calc(-1 * var(--space-3, 12px)) 0 0;
}

.del__panel-hint--center[b-jmzvoe3zsn] { text-align: center; }

/* Fields */
.del__field[b-jmzvoe3zsn] { display: flex; flex-direction: column; gap: var(--space-2, 8px); }

.del__label[b-jmzvoe3zsn] {
    font-weight: 600;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #1B3A6B);
}

.del__optional[b-jmzvoe3zsn] { font-weight: 400; color: var(--color-text-muted, #8E97A8); }

.del__input[b-jmzvoe3zsn] {
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--text-base, 1rem);
    color: var(--color-text-primary, #1B3A6B);
}
.del__input:focus[b-jmzvoe3zsn] { outline: none; border-color: var(--color-secondary, #2979CC); box-shadow: 0 0 0 3px var(--color-secondary-pale, #E8F2FB); }

/* Catalog */
.del__group-label[b-jmzvoe3zsn] {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #8E97A8);
    margin-top: var(--space-2, 8px);
}

.del__grid[b-jmzvoe3zsn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-3, 12px);
}

.del-card[b-jmzvoe3zsn] {
    position: relative;
    border: 1.5px solid var(--color-border, #D0D7E3);
    border-radius: 10px;
    padding: var(--space-4, 16px);
    background: var(--color-surface, #fff);
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, transform 0.08s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}
.del-card:hover[b-jmzvoe3zsn] { border-color: var(--color-secondary-light, #4A90D9); box-shadow: 0 2px 8px rgba(27,58,107,0.08); transform: translateY(-1px); }

.del-card--on[b-jmzvoe3zsn] {
    border-color: var(--color-accent, #2EAA8A);
    background: var(--color-accent-pale, #E6F7F2);
    box-shadow: 0 0 0 1px var(--color-accent, #2EAA8A) inset;
}

.del-card__top[b-jmzvoe3zsn] { display: flex; align-items: flex-start; justify-content: space-between; }
.del-card__icon[b-jmzvoe3zsn] { font-size: 1.4rem; line-height: 1; }
.del-card__check[b-jmzvoe3zsn] {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--color-accent, #2EAA8A); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700;
}
.del-card__name[b-jmzvoe3zsn] {
    font-weight: 600;
    font-size: var(--text-base, 1rem);
    color: var(--color-text-primary, #1B3A6B);
}
.del-card__desc[b-jmzvoe3zsn] { font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }

.del-card__controls[b-jmzvoe3zsn] {
    margin-top: var(--space-3, 12px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid rgba(46,170,138,0.25);
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-2, 8px);
}
.del-card__ctrl-label[b-jmzvoe3zsn] {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #8E97A8);
    font-weight: 600;
}

/* Segmented control */
.del-seg[b-jmzvoe3zsn] {
    display: inline-flex;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 7px;
    overflow: hidden;
    background: var(--color-surface, #fff);
}
.del-seg__btn[b-jmzvoe3zsn] {
    border: none;
    background: transparent;
    padding: var(--space-1, 4px) var(--space-3, 12px);
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
    cursor: pointer;
    border-right: 1px solid var(--color-border, #D0D7E3);
}
.del-seg__btn:last-child[b-jmzvoe3zsn] { border-right: none; }
.del-seg__btn--on[b-jmzvoe3zsn] { background: var(--color-accent, #2EAA8A); color: #fff; }

/* Question-count stepper */
.del-stepper[b-jmzvoe3zsn] {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 7px;
    overflow: hidden;
    background: var(--color-surface, #fff);
}
.del-stepper__btn[b-jmzvoe3zsn] {
    border: none;
    background: transparent;
    width: 30px;
    padding: var(--space-1, 4px) 0;
    font-size: var(--text-lg, 1.125rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent, #2EAA8A);
    cursor: pointer;
}
.del-stepper__btn:disabled[b-jmzvoe3zsn] { color: var(--color-text-muted, #8E97A8); cursor: default; }
.del-stepper__val[b-jmzvoe3zsn] {
    min-width: 34px;
    text-align: center;
    font-weight: 600;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #1B3A6B);
    border-left: 1px solid var(--color-border, #D0D7E3);
    border-right: 1px solid var(--color-border, #D0D7E3);
    padding: var(--space-1, 4px) var(--space-2, 8px);
}

.del__generate[b-jmzvoe3zsn] { margin-top: var(--space-2, 8px); }

.del__error[b-jmzvoe3zsn] {
    color: var(--color-error, #C0392B);
    font-size: var(--text-sm, 0.875rem);
}

.del__save-note[b-jmzvoe3zsn] {
    margin-top: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--color-secondary-pale, #E8F2FB);
    border-left: 3px solid var(--color-secondary, #2979CC);
    border-radius: 0 6px 6px 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #5A6478);
}

/* Results */
.del-result[b-jmzvoe3zsn] {
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 10px;
    padding: var(--space-5, 20px);
    display: flex; flex-direction: column; gap: var(--space-3, 12px);
}

.del-result__head[b-jmzvoe3zsn] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); }
.del-result__badge[b-jmzvoe3zsn] {
    background: var(--color-primary, #1B3A6B); color: #fff;
    border-radius: 6px; padding: var(--space-1, 4px) var(--space-3, 12px);
    font-size: var(--text-xs, 0.75rem); font-weight: 600; letter-spacing: 0.02em;
}
.del-result__badge--fmt[b-jmzvoe3zsn] { background: var(--color-accent, #2EAA8A); }
.del-result__badge--org[b-jmzvoe3zsn] { background: var(--color-secondary, #2979CC); }
.del-result__meta[b-jmzvoe3zsn] { font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }

.del-q-list[b-jmzvoe3zsn] { list-style: decimal; padding-left: var(--space-6, 24px); margin: 0; display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.del-q__prompt[b-jmzvoe3zsn] { font-weight: 600; color: var(--color-text-primary, #1B3A6B); margin-bottom: var(--space-1, 4px); }
.del-q__options[b-jmzvoe3zsn] { list-style: lower-alpha; padding-left: var(--space-5, 20px); margin: 0 0 var(--space-2, 8px); color: var(--color-text-primary, #2b333d); }
.del-q__meta[b-jmzvoe3zsn] { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); align-items: center; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.del-q__answer[b-jmzvoe3zsn] { color: var(--color-success, #2EAA8A); }

.del-org-cells[b-jmzvoe3zsn] { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3, 12px); }
.del-org-cell[b-jmzvoe3zsn] { border: 1px solid var(--color-border, #D0D7E3); border-radius: 8px; padding: var(--space-3, 12px); }
.del-org-cell__label[b-jmzvoe3zsn] { font-weight: 700; color: var(--color-primary, #1B3A6B); margin-bottom: var(--space-1, 4px); }
.del-org-cell__content[b-jmzvoe3zsn] { font-size: var(--text-sm, 0.875rem); color: var(--color-text-primary, #2b333d); }

/* QA1 Fix 3 — hint that activity downloads bundle a Teacher Guide + recording sheets. */
.del-result__guide-note[b-jmzvoe3zsn] {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #5A6478);
    background: var(--color-surface-muted, #F1F5FA);
    border-radius: 8px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    margin: var(--space-2, 8px) 0;
}

.del-export[b-jmzvoe3zsn] { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); }

@media (max-width: 640px) {
    .del__grid[b-jmzvoe3zsn] { grid-template-columns: 1fr; }
    .del-org-cells[b-jmzvoe3zsn] { grid-template-columns: 1fr; }
}

/* 🔴 WO-37 — the illustrated Practice sheet: title + section fields. (WO-43: the wait is the Ivaro popup now.) */
.del-sheet[b-jmzvoe3zsn] { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.del-sheet__done[b-jmzvoe3zsn] { color: var(--color-primary, #1B3A6B); font-weight: 600; margin: 0; }

/* 🔴 WO-43 Part C — "Make another": the optional "What should change?" note beside its button. */
.del-remake[b-jmzvoe3zsn] { flex: 1 1 auto; margin: 0; min-width: 0; }
.dc-modal__footer[b-jmzvoe3zsn] { align-items: flex-end; flex-wrap: wrap; }

/* 🔴 WO-44 Part B — the review step's own header (sheet title, the count rule, a message) and footer (Make another,
   Make my sheet), rendered inside the Lesson Planner's ReviewModal. */
.del-review-head[b-jmzvoe3zsn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.del-review-head__note[b-jmzvoe3zsn] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary, #5a6478);
}

.del-review-foot[b-jmzvoe3zsn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.del-review-foot .del-remake[b-jmzvoe3zsn] {
    flex: 1 1 320px;
    margin: 0;
}

.del-review-foot__actions[b-jmzvoe3zsn] {
    display: flex;
    gap: 8px;
}

/* 🔴 WO-54 — a Ready deliverable: read-only, with Download and Make another. */
.del-ready__panel[b-jmzvoe3zsn] { gap: var(--space-4, 16px); }

.del-ready__cells[b-jmzvoe3zsn] {
    margin: 0;
    padding-left: var(--space-5, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.del-ready__actions[b-jmzvoe3zsn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 12px);
}

.del-ready__back[b-jmzvoe3zsn] {
    color: var(--color-primary, #1B3A6B);
    text-decoration: underline;
}

.del-ready__actions .btn-primary[b-jmzvoe3zsn],
.del-ready__actions .btn-secondary[b-jmzvoe3zsn] {
    width: auto;
    min-height: 44px;
    padding: var(--space-2, 8px) var(--space-5, 20px);
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.del-ready__actions .btn-primary[b-jmzvoe3zsn] {
    background: var(--color-primary, #1B3A6B);
    border: 1px solid var(--color-primary, #1B3A6B);
    color: #fff;
}

.del-ready__actions .btn-secondary[b-jmzvoe3zsn] {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #D5DAE3);
    color: var(--color-primary, #1B3A6B);
}

.del-ready__actions button:disabled[b-jmzvoe3zsn] { opacity: 0.6; cursor: not-allowed; }

.del-export .btn-secondary[b-jmzvoe3zsn],
.dc-modal__footer .btn-secondary[b-jmzvoe3zsn],
.del-review-foot__actions .btn-secondary[b-jmzvoe3zsn] {
    width: auto;
    min-height: 44px;
    padding: var(--space-2, 8px) var(--space-5, 20px);
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #D5DAE3);
    color: var(--color-primary, #1B3A6B);
}
.del-export .btn-secondary:disabled[b-jmzvoe3zsn],
.dc-modal__footer .btn-secondary:disabled[b-jmzvoe3zsn],
.del-review-foot__actions .btn-secondary:disabled[b-jmzvoe3zsn] { opacity: 0.6; cursor: not-allowed; }

/* WO-67 (T05-4) — grade and subject fixed by the linked class (copied from the Lesson Planner's linked block). */
.del__linked[b-jmzvoe3zsn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--color-accent-pale);
    border: 1px solid rgba(46, 170, 138, 0.25);
    border-left: 3px solid var(--color-accent);
    border-radius: 6px;
    padding: var(--space-3) var(--space-4);
}

.del__linked--choice[b-jmzvoe3zsn] { gap: var(--space-2); }

.del__linked-value[b-jmzvoe3zsn] {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--text-base);
}

.del__linked-note[b-jmzvoe3zsn] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: var(--space-1) 0 0;
}

/* 🔴 WO-120 — what the theme is and how to use it. */
.del__help[b-jmzvoe3zsn] { display: block; margin-top: 4px; font-size: 0.85rem; line-height: 1.35; color: var(--color-text-muted, #5B6475); }

/* 🔴 WO-130 — the passage her questions are about. */
.del-passage[b-jmzvoe3zsn] {
    margin: 0 0 12px;
    padding: 10px 14px;
    border: 1px solid var(--color-border, #d9dee8);
    border-radius: 8px;
    background: var(--color-surface-muted, #f7f9fc);
}
.del-passage__title[b-jmzvoe3zsn] {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-primary, #1f2a44);
}
.del-passage__p[b-jmzvoe3zsn] {
    margin: 8px 0 0;
    line-height: 1.5;
}

/* 🔴 WO-160 Part C — "Make another"'s Written answers control, beside the note. */
.del-remake-written[b-jmzvoe3zsn] { display: flex; flex-direction: column; gap: 6px; margin: 0; flex: 1 1 100%; }
.del-remake-written__note[b-jmzvoe3zsn] { font-size: 0.85rem; color: var(--text-secondary, #5a6478); }
/* /Components/Pages/Deliverables/DeliverablesStudio.razor.rz.scp.css */
.deliverables-studio__loading[b-8uar40mrfb] {
    max-width: 640px;
    margin: var(--space-12) auto;
    text-align: center;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
}

.deliverables-studio__spinner[b-8uar40mrfb] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: deliverables-studio-spin-b-8uar40mrfb 0.8s linear infinite;
}

@keyframes deliverables-studio-spin-b-8uar40mrfb {
    to { transform: rotate(360deg); }
}

/* WO-54 — the "your deliverable has downloaded" notice above the list. */
.deliverables-studio__notice[b-8uar40mrfb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-success);
    border-radius: 8px;
    color: var(--color-text-primary);
}

.deliverables-studio__notice-text[b-8uar40mrfb] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.deliverables-studio__notice-dismiss[b-8uar40mrfb] {
    flex: none;
    min-width: 44px;
    min-height: 44px;
    margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
    background: transparent;
    border: 0;
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* WO-67 (T05-9) — rename in place. */
.del-rename[b-8uar40mrfb] {
    /* 🔴 WO-161 Part D.2 — not faint: the text colour, 16px, a 28px box (was --color-text-secondary, 14px, 24px). app.css
       defines no --color-text, so its fallback is the text token (#1B3A6B). */
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 28px; height: 28px; padding: 0; background: none; border: 0; border-radius: 6px;
    font-size: 16px; line-height: 1; color: var(--color-text, var(--color-text-primary)); cursor: pointer;
}
.del-rename:hover[b-8uar40mrfb], .del-rename:focus-visible[b-8uar40mrfb] { color: var(--color-primary); background: var(--color-surface-2); }
.del-rename:focus-visible[b-8uar40mrfb] { outline: 2px solid var(--color-secondary); outline-offset: 1px; }

.del-rename__editor[b-8uar40mrfb] {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--color-surface);
    border: 1px solid var(--color-secondary);
    border-radius: 10px;
}

.del-rename__input[b-8uar40mrfb] {
    flex: 1 1 240px;
    min-width: 0;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font: inherit;
}

.del-rename__error[b-8uar40mrfb] {
    flex: 1 0 100%;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-error, #b3261e);
}

.del-rename__save[b-8uar40mrfb],
.del-rename__cancel[b-8uar40mrfb] {
    width: auto; flex: 0 0 auto; margin: 0; box-sizing: border-box;
    min-height: 44px; padding: var(--space-2, 8px) var(--space-5, 20px);
    border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer;
}
.del-rename__save[b-8uar40mrfb] { border: 1px solid var(--color-primary, #1B3A6B); }
.del-rename__cancel[b-8uar40mrfb] { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #D5DAE3); color: var(--color-primary, #1B3A6B); }
.del-rename__cancel:hover[b-8uar40mrfb] { background: var(--color-surface-2); }

/* 🔴 WO-138 — the empty dashboard's three start cards (the builder's .dc-card look, larger) and the coming-soon line. */
.deliverables-studio__start[b-8uar40mrfb] {
    align-self: stretch;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4, 16px);
}
.deliverables-studio__start-card[b-8uar40mrfb] {
    text-decoration: none;
    min-height: 140px;
}
.deliverables-studio__start-card .dc-card__face[b-8uar40mrfb] {
    height: 100%;
    padding: var(--space-6, 24px);
}
.deliverables-studio__start-card .dc-card__icon[b-8uar40mrfb] { font-size: 2rem; }
.deliverables-studio__start-card .dc-card__name[b-8uar40mrfb] { font-size: var(--text-lg, 1.125rem); }
.deliverables-studio__start-card:focus-visible[b-8uar40mrfb] { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
.deliverables-studio__soon[b-8uar40mrfb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    margin: 0 0 var(--space-4, 16px);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* 🔴 WO-148 — "New station kit", beside New: the builder's secondary button (DeliverablesBuilder.razor.css). */
.deliverables-studio__kit[b-8uar40mrfb] {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 44px;
    padding: var(--space-2, 8px) var(--space-5, 20px);
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #D5DAE3);
    color: var(--color-primary, #1B3A6B);
}

/* 🔴 WO-159 — delete in place: the bin after the pencil (the pencil's look), the confirm (the rename editor's box), Undo. */
.del-delete[b-8uar40mrfb] {
    /* 🔴 WO-161 Part D.2 — not faint: the text colour, 16px, a 28px box (was --color-text-secondary, 14px, 24px). app.css
       defines no --color-text, so its fallback is the text token (#1B3A6B). */
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 28px; height: 28px; padding: 0; background: none; border: 0; border-radius: 6px;
    font-size: 16px; line-height: 1; color: var(--color-text, var(--color-text-primary)); cursor: pointer;
}
.del-delete:hover[b-8uar40mrfb], .del-delete:focus-visible[b-8uar40mrfb] { color: var(--color-error, #b3261e); background: var(--color-surface-2); }
.del-delete:focus-visible[b-8uar40mrfb] { outline: 2px solid var(--color-secondary); outline-offset: 1px; }
.del-delete__question[b-8uar40mrfb] { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.deliverables-studio__undo[b-8uar40mrfb] {
    flex: none; width: auto; min-height: 44px; margin: calc(var(--space-2) * -1) 0;
    padding: var(--space-2, 8px) var(--space-4, 16px); border-radius: 8px; font-weight: 600; cursor: pointer;
    background: var(--color-surface, #fff); border: 1px solid var(--color-border, #D5DAE3); color: var(--color-primary, #1B3A6B);
}
/* /Components/Pages/Deliverables/StationKitBuilder.razor.rz.scp.css */
/* 🔴 WO-148 — the Station Kit builder. The builder's own look (DeliverablesBuilder.razor.css: the same tokens, sizes and
   panel shape), page-scoped; no new design system. */

.kit[b-66q47bq91y] {
    max-width: 1040px;
    margin: 0 auto;
    padding: var(--space-6, 24px) var(--space-4, 16px) var(--space-12, 48px);
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 24px);
}

.kit__loading[b-66q47bq91y] { max-width: 640px; margin: var(--space-12, 48px) auto; text-align: center; color: var(--color-text-secondary, #5A6478); }

.kit__back[b-66q47bq91y] { color: var(--color-secondary, #2979CC); font-size: var(--text-sm, 0.875rem); text-decoration: none; }
.kit__back:hover[b-66q47bq91y] { text-decoration: underline; }

.kit__live[b-66q47bq91y] {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.kit__header[b-66q47bq91y] { margin-bottom: var(--space-1, 4px); }

.kit__title[b-66q47bq91y] {
    font-family: var(--font-display, 'DM Serif Display', serif);
    font-size: var(--text-3xl, 2rem);
    color: var(--color-primary, #1B3A6B);
    margin: 0 0 var(--space-1, 4px);
}
.kit__title:focus[b-66q47bq91y] { outline: none; }

.kit__subtitle[b-66q47bq91y] { color: var(--color-text-secondary, #5A6478); font-size: var(--text-base, 1rem); margin: 0; }

.kit__off-text[b-66q47bq91y] { color: var(--color-text-secondary, #5A6478); margin: var(--space-2, 8px) 0 var(--space-4, 16px); }

.kit__panel[b-66q47bq91y] { display: flex; flex-direction: column; gap: var(--space-5, 20px); }

.kit__h2[b-66q47bq91y] { font-size: var(--text-2xl, 1.5rem); color: var(--color-primary, #1B3A6B); margin: 0; }

.kit__error[b-66q47bq91y] { color: var(--color-error, #B42318); margin: 0; }

.kit__actions[b-66q47bq91y] { display: flex; gap: var(--space-3, 12px); flex-wrap: wrap; align-items: center; }

.kit__planning[b-66q47bq91y] { align-items: center; text-align: center; padding: var(--space-10, 40px) var(--space-6, 24px); }
.kit__planning-text[b-66q47bq91y] { color: var(--color-text-secondary, #5A6478); margin: 0; }
.kit__spinner[b-66q47bq91y] {
    width: 2.25rem; height: 2.25rem;
    border: 3px solid var(--color-border, #D0D7E3);
    border-top-color: var(--color-primary, #1B3A6B);
    border-radius: 50%;
    animation: kit-spin-b-66q47bq91y 0.8s linear infinite;
}
@keyframes kit-spin-b-66q47bq91y { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kit__spinner[b-66q47bq91y] { animation: none; } }

.kit__visually-hidden[b-66q47bq91y] {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.kit__problems[b-66q47bq91y] {
    border: 1px solid var(--color-error, #B42318);
    border-left-width: 4px;
    border-radius: 8px;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--color-error-pale, #FEF3F2);
    color: var(--color-text-primary, #1B3A6B);
}
.kit__problems ul[b-66q47bq91y] { margin: 0; padding-left: 1.2em; }
.kit__problems-head[b-66q47bq91y] { margin: 0 0 var(--space-2, 8px); font-weight: 600; }

.kit__line[b-66q47bq91y] { margin: 0; color: var(--color-text-primary, #1B3A6B); overflow-wrap: anywhere; }

/* 🔴 WO-154 — the read-only preview. The flow and "What you need" are the Lesson Planner's own components (their CSS comes
   with them). The standard uses LessonPlanDisplay's objective classes; scoped CSS does not reach across components, so their
   two rules are repeated here with the same values (LessonPlanDisplay.razor.css). Then the glance chips and the sections. */
.lesson-display__eyebrow[b-66q47bq91y] {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: var(--space-2);
}
.lesson-display__objective-text[b-66q47bq91y] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1.25;
    color: var(--color-primary);
    margin: 0;
    font-weight: 400;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.kit__glance[b-66q47bq91y] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); }
.kit__chip[b-66q47bq91y] {
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border-radius: 999px;
    background: var(--color-accent-pale, #E6F7F2);
    color: var(--color-primary, #1B3A6B);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.kit__need[b-66q47bq91y] { display: flex; flex-direction: column; gap: var(--space-3, 12px); }

.kit__details[b-66q47bq91y] {
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
    background: var(--color-surface, #fff);
}
.kit__details > summary[b-66q47bq91y] {
    cursor: pointer;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    min-height: 44px;
    box-sizing: border-box;
    font-weight: 600;
    color: var(--color-primary, #1B3A6B);
    overflow-wrap: anywhere;
}
.kit__details-body[b-66q47bq91y] {
    display: flex; flex-direction: column; gap: var(--space-2, 8px);
    padding: 0 var(--space-4, 16px) var(--space-4, 16px);
}
.kit__list[b-66q47bq91y] { margin: 0; padding-left: 1.4em; color: var(--color-text-primary, #1B3A6B); overflow-wrap: anywhere; }
.kit__plan-again[b-66q47bq91y] { display: inline-block; margin-top: var(--space-2, 8px); color: var(--color-secondary, #2979CC); font-weight: 600; }

/* The builder's own buttons (DeliverablesBuilder.razor.css .del-ready__actions): btn-secondary is styled per page. */
.kit__actions .btn-primary[b-66q47bq91y] { width: auto; min-height: 44px; padding: var(--space-2, 8px) var(--space-5, 20px); }
.kit__actions .btn-secondary[b-66q47bq91y],
.kit--off .btn-secondary[b-66q47bq91y] {
    display: inline-flex;
    align-items: center;
    width: auto;
    min-height: 44px;
    padding: var(--space-2, 8px) var(--space-5, 20px);
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #D5DAE3);
    color: var(--color-primary, #1B3A6B);
}
.kit__actions button:disabled[b-66q47bq91y] { opacity: 0.6; cursor: not-allowed; }

/* 🔴 WO-152 Part H.4 — the wait: five steps ticked as they finish, the current words, the time so far. */
.kit__steps[b-66q47bq91y] {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--space-2, 8px);
    text-align: left; min-width: min(100%, 260px);
}
.kit__step[b-66q47bq91y] { display: flex; align-items: center; gap: var(--space-3, 12px); color: var(--color-text-muted, #8E97A8); }
.kit__step-mark[b-66q47bq91y] {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--color-border, #D0D7E3); font-size: 0.75rem; font-weight: 700;
}
.kit__step--done[b-66q47bq91y] { color: var(--color-text-primary, #1B3A6B); }
.kit__step--done .kit__step-mark[b-66q47bq91y] { background: var(--color-accent, #2EAA8A); border-color: var(--color-accent, #2EAA8A); color: #fff; }
.kit__step--current[b-66q47bq91y] { color: var(--color-text-primary, #1B3A6B); font-weight: 600; }
.kit__step--current .kit__step-mark[b-66q47bq91y] { border-color: var(--color-primary, #1B3A6B); }
.kit__progress[b-66q47bq91y] { margin: 0; color: var(--color-text-primary, #1B3A6B); font-weight: 500; }
.kit__elapsed[b-66q47bq91y] { margin: 0; color: var(--color-text-secondary, #5A6478); font-size: var(--text-sm, 0.875rem); }
.kit__leave[b-66q47bq91y] { margin: 0; color: var(--color-text-secondary, #5A6478); }
.kit__planning .kit__actions[b-66q47bq91y] { justify-content: center; }
.kit__actions a.btn-primary[b-66q47bq91y] { width: auto; min-height: 44px; padding: var(--space-2, 8px) var(--space-5, 20px); display: inline-flex; align-items: center; text-decoration: none; }

/* 🔴 WO-156 Part A — the rotation tables (the lesson plan's table look: navy header, alternating rows). */
.kit__rotation[b-66q47bq91y] { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.kit__h3[b-66q47bq91y] { margin: var(--space-2, 8px) 0 0; font-size: 0.95rem; font-weight: 700; color: var(--ivaro-navy, #1B3A6B); }
.kit__table[b-66q47bq91y] { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.kit__table th[b-66q47bq91y], .kit__table td[b-66q47bq91y] { padding: 4px 8px; text-align: left; vertical-align: top; }
.kit__table thead th[b-66q47bq91y] { background: #1B3A6B; color: #FFFFFF; font-weight: 700; }
.kit__table tbody tr:nth-child(even)[b-66q47bq91y] { background: #F4F6FA; }
.kit__table tbody th[b-66q47bq91y] { color: #1B3A6B; font-weight: 700; white-space: nowrap; }
.kit__rotation-note[b-66q47bq91y] { margin: 0; font-size: 0.875rem; color: #5A6478; }
@media (max-width: 640px) { .kit__table[b-66q47bq91y] { display: block; overflow-x: auto; } }
/* /Components/Pages/Dev/OnboardingKitGallery.razor.rz.scp.css */
/* PLAT-WO-02 T2f — the kit gallery's own layout. Tokens only. */

.kit[b-y90n528uwz] {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-6) var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.kit__title[b-y90n528uwz] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
}

.kit__note[b-y90n528uwz] {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
}

.kit__section[b-y90n528uwz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.kit__h2[b-y90n528uwz] { font-size: var(--text-2xl); }

.kit__h3[b-y90n528uwz] {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.kit__frame[b-y90n528uwz] {
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}

.kit__body[b-y90n528uwz] { margin: 0; color: var(--color-text-secondary); }

.kit__studios[b-y90n528uwz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 640px) {
    .kit[b-y90n528uwz] { padding: var(--space-6) var(--space-4) var(--space-10); }
    .kit__studios[b-y90n528uwz] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Grading/AddPapers.razor.rz.scp.css */
/* 🔴 WO-238 - the "Add papers" screen: the upload page's calm single column. */
.apap[b-qrdw81wpch] { max-width: 720px; margin: 0 auto; padding: var(--space-6, 24px) var(--space-4, 16px); display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.apap__header[b-qrdw81wpch] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3, 12px); flex-wrap: wrap; }
.apap__title[b-qrdw81wpch] { font-family: var(--font-display, serif); font-size: var(--text-2xl, 1.5rem); color: var(--color-text-primary, #1B3A6B); margin: 0; }
.apap__hint[b-qrdw81wpch], .apap__muted[b-qrdw81wpch] { margin: 0; color: var(--color-text-secondary, #5A6478); }
.apap__error[b-qrdw81wpch] { margin: 0; color: var(--color-error, #B3261E); font-weight: 600; }
.apap__actions[b-qrdw81wpch] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); flex-wrap: wrap; }
.apap__back[b-qrdw81wpch] { color: var(--color-primary, #1B3A6B); text-decoration: underline; }
.apap__spinner[b-qrdw81wpch] { display: inline-block; width: 14px; height: 14px; margin-right: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: apap-spin-b-qrdw81wpch 0.8s linear infinite; vertical-align: -2px; }
@keyframes apap-spin-b-qrdw81wpch { to { transform: rotate(360deg); } }
@media (max-width: 480px) { .apap[b-qrdw81wpch] { padding-inline: 16px; } .apap__actions[b-qrdw81wpch] { flex-direction: column-reverse; align-items: stretch; } }
/* /Components/Pages/Grading/GradingDashboard.razor.rz.scp.css */
/* GradingDashboard.razor.css — page-scoped; leans on global tokens + .ivaro-card,
   .btn-primary from Ivaro.Web/wwwroot/app.css. */

/* R81 — the gentle after-a-no-class-run nudge. A calm banner, never a modal/gate. */
.gdash__nudge[b-bvznow2slb] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 10px;
    background: var(--color-secondary-pale, #EAF3FF);
    color: var(--color-text, #1F2733);
    font-size: var(--text-sm, 0.875rem);
}
.gdash__nudge-msg[b-bvznow2slb] { flex: 1 1 240px; }
.gdash__nudge-actions[b-bvznow2slb] { display: inline-flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; }
.gdash__nudge-link[b-bvznow2slb] { font-weight: 600; color: var(--color-primary, #1B3A6B); text-decoration: none; }
.gdash__nudge-link:hover[b-bvznow2slb] { text-decoration: underline; }
.gdash__nudge-btn[b-bvznow2slb] {
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 6px;
    background: var(--color-surface, #FFF);
    color: var(--color-text-secondary, #5A6478);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    padding: 3px 10px;
    cursor: pointer;
}
.gdash__nudge-btn:hover[b-bvznow2slb] { border-color: var(--color-primary, #1B3A6B); }
.gdash__nudge-btn--ghost[b-bvznow2slb] { background: none; }

/* R85 — the session-level total line above the per-class panels ("one for the entire grading session"). */
.gdash__session[b-bvznow2slb] {
    margin: 0 0 var(--space-3, 12px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
}

.gdash[b-bvznow2slb] {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-6, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 24px);
}

.gdash__header[b-bvznow2slb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.gdash__title[b-bvznow2slb] {
    font-family: var(--font-display, serif);
    font-size: var(--text-3xl, 2rem);
    color: var(--color-text-primary, #1B3A6B);
    margin: 0;
}

.gdash__subtitle[b-bvznow2slb] {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #5A6478);
    margin: 0;
}

/* Progress strip */
.gdash__progress[b-bvznow2slb] {
    display: flex;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}

.gdash__stat[b-bvznow2slb] {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: var(--space-4, 16px);
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 10px;
}

.gdash__stat--done[b-bvznow2slb] { border-top: 3px solid var(--color-accent, #2EAA8A); }
.gdash__stat--review[b-bvznow2slb] { border-top: 3px solid var(--color-warning, #E8920C); }
.gdash__stat--grading[b-bvznow2slb] { border-top: 3px solid var(--color-secondary, #2979CC); }

.gdash__stat-num[b-bvznow2slb] {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 600;
    color: var(--color-text-primary, #1B3A6B);
}

.gdash__stat-label[b-bvznow2slb] {
    font-size: var(--text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted, #8E97A8);
}

/* Card grid */
.gdash__grid[b-bvznow2slb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4, 16px);
}

.gdash__card[b-bvznow2slb] {
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 10px;
    padding: var(--space-4, 16px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.gdash__card:hover[b-bvznow2slb] {
    border-color: var(--color-secondary, #2979CC);
    box-shadow: 0 2px 8px rgba(41, 121, 204, 0.12);
}
.gdash__card--active[b-bvznow2slb] {
    border-color: var(--color-secondary, #2979CC);
    box-shadow: 0 0 0 2px var(--color-secondary-pale, #E8F2FB);
}

.gdash__card-head[b-bvznow2slb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2, 8px);
}

.gdash__card-id[b-bvznow2slb] {
    display: block;
    font-weight: 600;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #1B3A6B);
    word-break: break-all;
}

.gdash__card-packet[b-bvznow2slb] {
    display: block;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #8E97A8);
}

.gdash__badge[b-bvznow2slb] {
    flex-shrink: 0;
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border-radius: 20px;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    white-space: nowrap;
}

.gdash__badge--done[b-bvznow2slb] { background: var(--color-accent-pale, #E6F7F2); color: var(--color-accent, #2EAA8A); }
.gdash__badge--review[b-bvznow2slb] { background: #FFF3E0; color: #B96C00; }
.gdash__badge--grading[b-bvznow2slb] { background: var(--color-secondary-pale, #E8F2FB); color: var(--color-secondary, #2979CC); }

/* R25 (Part D) — per-card liveness: a pulsing dot inside the "Grading…" badge + a soft breathing card. */
.gdash__badge--grading[b-bvznow2slb]::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--color-secondary, #2979CC);
    vertical-align: middle;
    animation: gdash-pulse-b-bvznow2slb 1.1s ease-in-out infinite;
}

.gdash__card--grading[b-bvznow2slb] {
    border-color: var(--color-secondary, #2979CC);
    animation: gdash-card-breathe-b-bvznow2slb 1.8s ease-in-out infinite;
}

@keyframes gdash-pulse-b-bvznow2slb {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.72); }
}

@keyframes gdash-card-breathe-b-bvznow2slb {
    0%, 100% { box-shadow: 0 0 0 0 rgba(41, 121, 204, 0.0); }
    50% { box-shadow: 0 0 0 3px rgba(41, 121, 204, 0.14); }
}

/* R25 (Part D) — page-level liveness banner: present only while a submission is still Grading. */
.gdash__live[b-bvznow2slb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-top: var(--space-2, 8px);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--color-secondary-pale, #E8F2FB);
    color: var(--color-secondary, #2979CC);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
}

/* 🔴 WO-102 T3 — the plan chip. Quiet by design: it states a fact about her month, it is not a warning, and
   it never competes with the live-grading pulse beside it. */
/* WO-218 T2.4 — the pages-left card sits top right of the header (the header is the positioning box). */
.gdash__header[b-bvznow2slb] { position: relative; }
.gdash__usage[b-bvznow2slb] { position: absolute; top: 0; right: 0; }
.gdash__header:has(.gdash__usage) .gdash__title[b-bvznow2slb] { padding-right: 240px; }
@media (max-width: 720px) {
    .gdash__usage[b-bvznow2slb] { position: static; }
    .gdash__header:has(.gdash__usage) .gdash__title[b-bvznow2slb] { padding-right: 0; }
}

.gdash__live-dot[b-bvznow2slb] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-secondary, #2979CC);
    animation: gdash-pulse-b-bvznow2slb 1.1s ease-in-out infinite;
}

/* R32 — activity (non-gradeable) items strip: informational, never a verdict. */
.gdash__activity[b-bvznow2slb] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--color-surface, #FFFFFF);
    border: 1px dashed var(--color-border, #D0D7E3);
    border-radius: 10px;
}

.gdash__activity-title[b-bvznow2slb] {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted, #8E97A8);
    margin-right: var(--space-2, 8px);
}

.gdash__activity-chip[b-bvznow2slb] {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    background: var(--color-surface-2, #F4F6FA);
    border: 1px solid var(--color-border, #D0D7E3);
    color: var(--color-text-secondary, #5A6478);
}

.gdash__activity-section[b-bvznow2slb] {
    color: var(--color-text-muted, #8E97A8);
    font-size: var(--text-xs, 0.75rem);
}

/* R30 Part D — analytics placeholders: muted skeleton cards holding the spot for
   Class item analysis / Class misconceptions / Gradebook until grading completes. */
.gdash__pending[b-bvznow2slb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

.gdash__pending-card[b-bvznow2slb] {
    background: var(--color-surface, #FFFFFF);
    border: 1px dashed var(--color-border, #D0D7E3);
    border-radius: 10px;
    padding: var(--space-5, 20px) var(--space-6, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

.gdash__pending-title[b-bvznow2slb] {
    margin: 0;
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
    color: var(--color-text-muted, #8E97A8);
}

.gdash__pending-note[b-bvznow2slb] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-muted, #8E97A8);
}

.gdash__pending-bar[b-bvznow2slb] {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--color-surface-3, #E8ECF3) 25%, var(--color-surface-2, #F4F6FA) 50%, var(--color-surface-3, #E8ECF3) 75%);
    background-size: 200% 100%;
    animation: gdash-shimmer-b-bvznow2slb 1.3s ease-in-out infinite;
}
.gdash__pending-bar--short[b-bvznow2slb] { width: 60%; }

/* Respect reduced-motion: keep the state legible without the animation. */
@media (prefers-reduced-motion: reduce) {
    .gdash__badge--grading[b-bvznow2slb]::before,
    .gdash__card--grading[b-bvznow2slb],
    .gdash__live-dot[b-bvznow2slb],
    .gdash__pending-bar[b-bvznow2slb] { animation: none; }
}

.gdash__card-score[b-bvznow2slb] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2, 8px);
}

.gdash__score-num[b-bvznow2slb] {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 700;
    color: var(--color-primary, #1B3A6B);
}

.gdash__score-of[b-bvznow2slb] {
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
    color: var(--color-text-muted, #8E97A8);
}

.gdash__score-pct[b-bvznow2slb] {
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
}

.gdash__score-label[b-bvznow2slb] {
    font-size: var(--text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted, #8E97A8);
}

/* R66 — no grade exists. Deliberately NOT styled like a score: it is smaller, muted and non-numeric,
   so the eye never reads it as a mark. This is the slot "0/18 · 0%" used to occupy. */
.gdash__card-score--notgraded[b-bvznow2slb] {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1, 4px);
}

.gdash__score-none[b-bvznow2slb] {
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
}

/* R66 (Part F) — the run was STOPPED. Amber, not the red "couldn't be processed" panel: the cards below
   are still valid, and some students may hold real grades. */
.gdash__halted[b-bvznow2slb] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px) var(--space-5, 20px);
    margin-bottom: var(--space-4, 16px);
    background: #FFF7E6;
    border: 1px solid rgba(191, 136, 12, 0.35);
    border-left: 3px solid #BF880C;
    border-radius: 10px;
    color: #6B4E06;
}
.gdash__halted svg[b-bvznow2slb] { color: #BF880C; flex: none; margin-top: 2px; }
.gdash__halted-msg[b-bvznow2slb] { margin: 0; font-weight: 600; font-size: var(--text-sm, 0.875rem); }
.gdash__halted-hint[b-bvznow2slb] { margin: var(--space-1, 4px) 0 0; font-size: var(--text-xs, 0.75rem); opacity: 0.85; }

.gdash__card-open[b-bvznow2slb] {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--color-secondary, #2979CC);
    margin-top: auto;
}

.gdash__diag[b-bvznow2slb] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: #B96C00;
    background: #FFFBF0;
    border-left: 3px solid var(--color-warning, #E8920C);
    border-radius: 0 6px 6px 0;
    padding: var(--space-2, 8px) var(--space-3, 12px);
}

.gdash__muted[b-bvznow2slb] {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-muted, #8E97A8);
    margin: 0;
}

/* Failed run banner (R3-D) */
.gdash__failed[b-bvznow2slb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4, 16px);
    padding: var(--space-6, 24px);
    background: #FDECEA;
    border: 1px solid rgba(192, 57, 43, 0.35);
    border-left: 3px solid var(--color-error, #C0392B);
    border-radius: 10px;
}
.gdash__failed-head[b-bvznow2slb] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    color: var(--color-error, #C0392B);
    font-weight: 600;
    font-size: var(--text-lg, 1.125rem);
}
.gdash__failed-msg[b-bvznow2slb] { margin: 0; color: #7A241B; font-size: var(--text-sm, 0.875rem); }

/* Empty / error */
.gdash__empty[b-bvznow2slb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4, 16px);
    padding: var(--space-8, 32px);
    background: var(--color-surface-2, #F4F6FA);
    border-radius: 10px;
    color: var(--color-text-secondary, #5A6478);
}

.gdash__back[b-bvznow2slb] {
    width: auto;
    text-decoration: none;
    display: inline-block;
}

/* Loading skeleton */
.gdash__skeleton[b-bvznow2slb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4, 16px);
}

.gdash__skeleton-card[b-bvznow2slb] {
    height: 120px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--color-surface-3, #E8ECF3) 25%, var(--color-surface-2, #F4F6FA) 50%, var(--color-surface-3, #E8ECF3) 75%);
    background-size: 200% 100%;
    animation: gdash-shimmer-b-bvznow2slb 1.3s ease-in-out infinite;
}

@keyframes gdash-shimmer-b-bvznow2slb {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* R14 — name confirmation grid. Runs concurrently with grading. */
.gdash__names[b-bvznow2slb] {
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--ivaro-border, #e2e8f0);
    border-radius: 12px;
    background: var(--ivaro-surface, #fff);
}

.gdash__names-head[b-bvznow2slb] { margin-bottom: 0.75rem; }
.gdash__names-title[b-bvznow2slb] { font-size: 1.05rem; font-weight: 600; margin: 0; }

.gdash__names-grid[b-bvznow2slb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.gdash__name-row[b-bvznow2slb] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem;
    border: 1px solid var(--ivaro-border-subtle, #f1f5f9);
    border-radius: 8px;
}

.gdash__badge-img[b-bvznow2slb] {
    width: 110px;
    height: 40px;
    object-fit: contain;
    background: #fafafa;
    border: 1px solid var(--ivaro-border-subtle, #f1f5f9);
    border-radius: 4px;
    flex: 0 0 auto;
}

.gdash__name-fields[b-bvznow2slb] { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1 1 auto; }
.gdash__name-input[b-bvznow2slb] { width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--ivaro-border, #e2e8f0); border-radius: 6px; font-size: 0.9rem; }
.gdash__name-hint[b-bvznow2slb] { font-size: 0.72rem; color: var(--ivaro-text-muted, #64748b); }

.gdash__names-save[b-bvznow2slb] { margin-top: 0.85rem; }
.gdash__names-saved[b-bvznow2slb] { margin-left: 0.6rem; font-size: 0.85rem; color: #16a34a; }

/* R17 — inline name edit on the card (the R14 grid is retired). */
.gdash__card-idwrap[b-bvznow2slb] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.gdash__card-id[b-bvznow2slb] { cursor: text; }
.gdash__card-id:hover .gdash__edit-pencil[b-bvznow2slb] { opacity: 1; }
.gdash__edit-pencil[b-bvznow2slb] {
    opacity: 0;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-secondary, #2979CC);
    transition: opacity 0.12s ease;
}

.gdash__name-edit[b-bvznow2slb] {
    width: 100%;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--color-secondary, #2979CC);
    border-radius: 6px;
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    color: var(--color-text-primary, #1B3A6B);
}
.gdash__name-actions[b-bvznow2slb] { display: flex; gap: var(--space-2, 8px); margin-top: 4px; }
.gdash__name-btn[b-bvznow2slb] {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: white;
    background: var(--color-primary, #1B3A6B);
    border: none;
    border-radius: 6px;
    padding: 3px 10px;
    cursor: pointer;
}
.gdash__name-btn--ghost[b-bvznow2slb] { background: transparent; color: var(--color-text-secondary, #5A6478); border: 1px solid var(--color-border, #D0D7E3); }

/* ══════════════ R39 Part A — student-work modal (backdrop + centered dialog) ══════════════
   Mirrors the house .review-overlay / .review-modal shell. The SubmissionDetail content is reused
   unchanged; the modal just caps height and scrolls the (long) breakdown. */
.gdash__modal-backdrop[b-bvznow2slb] {
    position: fixed;
    inset: 0;
    background: rgba(27, 58, 107, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* R61 Part E — trim the backdrop gutter so the near-full-screen 98vw × 96vh modal never overflows the
       viewport (98vw + 2×8px stays under 100vw on small screens). */
    padding: var(--space-2, 8px);
    overflow: auto;
}
.gdash__modal[b-bvznow2slb] {
    background: var(--color-surface, #FFFFFF);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    /* R61 Part E — near-full-screen: the page image + a 6-column table + bundled optionals were still cramped at
       R59's 96vw/1400px×92vh. Take almost the whole viewport (small margins), and raise the max-width well past
       1400px so wide screens actually use the room. Responsive (vw/vh, not a fixed oversize) — on a small screen
       98vw simply resolves small. The body scrolls internally under the sticky nav header. */
    width: 98vw;
    max-width: 1900px;
    height: 96vh;                  /* fill the height so the body has room to scroll internally */
    max-height: 96vh;
    overflow-y: auto;              /* the per-question breakdown is long — scroll the body; the nav header sticks */
    padding: var(--space-5, 20px);
    outline: none;                 /* focused via tabindex=-1 for Esc; the box-shadow is the affordance */
}
/* Motion-safe: a subtle fade only when the viewer allows motion; no scale/bounce. Reduced-motion → instant. */
@media (prefers-reduced-motion: no-preference) {
    .gdash__modal-backdrop[b-bvznow2slb] { animation: gdash-modal-fade-b-bvznow2slb 120ms ease-out; }
}
@keyframes gdash-modal-fade-b-bvznow2slb { from { opacity: 0; } to { opacity: 1; } }

/* R46 Part A — the in-modal Prev/Next student navigation strip (above the reused SubmissionDetail).
   R59 Part C — pinned at the top of the (now taller) modal so it stays usable while the long breakdown scrolls
   under it: sticky, with negative margins pulling it to the modal edges and a negative top that cancels the
   modal's top padding, plus an opaque background so scrolled content doesn't show through. */
.gdash__nav[b-bvznow2slb] {
    position: sticky;
    top: calc(-1 * var(--space-5, 20px));
    z-index: 3;
    background: var(--color-surface, #FFFFFF);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin: calc(-1 * var(--space-5, 20px)) calc(-1 * var(--space-5, 20px)) var(--space-3, 12px);
    padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-3, 12px);
    border-bottom: 1px solid var(--color-surface-3, #E8ECF3);
}
/* R62 — Prev / pos / Next stay grouped on the LEFT; the close ✕ sits on the far right of the header. */
.gdash__nav-group[b-bvznow2slb] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}
/* R62 — the top-right modal close. Clear affordance, keyboard-reachable, separated from the score row below. */
.gdash__nav-close[b-bvznow2slb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
    background: var(--color-surface, #FFFFFF);
    color: var(--color-text-secondary, #5A6478);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.gdash__nav-close:hover[b-bvznow2slb] { background: var(--color-secondary-pale, #E8F2FB); border-color: var(--color-secondary, #2979CC); color: var(--color-text-primary, #1B3A6B); }
.gdash__nav-close:focus-visible[b-bvznow2slb] { outline: 2px solid var(--color-secondary, #2979CC); outline-offset: 2px; }
.gdash__nav-btn[b-bvznow2slb] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
    background: var(--color-surface, #FFFFFF);
    color: var(--color-text-primary, #1B3A6B);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
}
.gdash__nav-btn:hover:not(:disabled)[b-bvznow2slb] { background: var(--color-secondary-pale, #E8F2FB); border-color: var(--color-secondary, #2979CC); }
.gdash__nav-btn:disabled[b-bvznow2slb] { opacity: 0.4; cursor: default; }
.gdash__nav-pos[b-bvznow2slb] {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 700;
    color: var(--color-text-secondary, #5A6478);
    font-variant-numeric: tabular-nums;
}

/* R50 — transient failure toast for a review write (the optimistic change was rolled back). */
.gdash__toast[b-bvznow2slb] {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: 90vw;
    padding: 10px 18px;
    border-radius: 10px;
    background: #C0392B;
    color: #fff;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    cursor: pointer;
}

/* R48 (Part C) — "couldn't read the names" note + the retry that had no UI before. */
.gdash__names-note[b-bvznow2slb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 12px);
    margin: var(--space-3, 12px) 0 0;
    padding: 10px 14px;
    border: 1px solid #F0C36D;
    border-left: 4px solid #B96C00;
    border-radius: 10px;
    background: #FFF8EC;
    color: #7A4E12;
    font-size: var(--text-sm, 0.875rem);
}
.gdash__names-retry[b-bvznow2slb] {
    padding: 5px 12px;
    border: 1px solid #E0BE86;
    border-radius: 8px;
    background: transparent;
    color: #8A5200;
    font-weight: 600;
    font-size: var(--text-sm, 0.875rem);
    cursor: pointer;
}
.gdash__names-retry:hover:not(:disabled)[b-bvznow2slb] { background: #FBEFD6; }
.gdash__names-retry:disabled[b-bvznow2slb] { opacity: 0.6; cursor: default; }
/* R54 — the primary "Adjust the name box" affordance (the real fix for a geometry clip). */
.gdash__names-retry--primary[b-bvznow2slb] {
    background: var(--color-primary, #1B3A6B);
    border-color: var(--color-primary, #1B3A6B);
    color: #FFFFFF;
}
.gdash__names-retry--primary:hover:not(:disabled)[b-bvznow2slb] { background: #16305A; }

/* R54 — the "Adjust the name box" redraw modal (reuses .gdash__modal chrome). */
.gdash__adjust[b-bvznow2slb] { max-width: 720px; }
.gdash__adjust-title[b-bvznow2slb] { margin: 0 0 var(--space-2, 8px); font-size: 1.15rem; }
.gdash__adjust-hint[b-bvznow2slb] { margin: 0 0 var(--space-3, 12px); color: var(--color-text-muted, #5A6B85); font-size: 0.9rem; }
.gdash__adjust-key[b-bvznow2slb] {
    position: relative;
    display: inline-block;
    max-width: 100%;
    cursor: crosshair;
    touch-action: none;                 /* pointer drawing, not scroll */
    border: 1px solid var(--color-surface-3, #E8ECF3);
    border-radius: 8px;
    overflow: hidden;
}
.gdash__adjust-img[b-bvznow2slb] { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.gdash__adjust-box[b-bvznow2slb] {
    position: absolute;
    border: 2px solid var(--color-primary, #1B3A6B);
    background: rgba(27, 58, 107, 0.18);
    pointer-events: none;
}
.gdash__adjust-box--live[b-bvznow2slb] { border-style: dashed; }
.gdash__adjust-actions[b-bvznow2slb] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2, 8px);
    margin-top: var(--space-3, 12px);
}

/* R68 Part C — "View answer key" on the results page. Sits above the progress strip: it is a reference the
   teacher reaches for while reading results, not an action on the run. */
.gdash__keybar[b-bvznow2slb] { display: flex; justify-content: flex-end; margin-bottom: var(--space-2, 8px); }

.gdash__keybtn[b-bvznow2slb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: 6px 12px;
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 8px;
    background: var(--color-surface, #FFF);
    color: var(--color-primary, #1B3A6B);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none; /* R80 — now an <a target="_blank"> to the dedicated key page */
}

.gdash__keybtn:hover[b-bvznow2slb] { border-color: var(--color-primary, #1B3A6B); }
.gdash__keyview[b-bvznow2slb] { margin-bottom: var(--space-4, 16px); }

/* ═══════════ WO-92 — the review queue ("What needs you") ═══════════
   Sits above the student tiles. Renders ONLY when the packet actually has open holds, so a clean run is
   byte-identical to the pre-WO-92 dashboard. Calm, not alarming: this is a short list of questions, not a fault. */
.gdash__queue[b-bvznow2slb] {
    margin: var(--space-4, 16px) 0;
    padding: var(--space-4, 16px);
    border: 1px solid var(--color-border, #DDE3EC);
    border-left: 3px solid var(--color-accent, #2E7D6E);
    border-radius: 12px;
    background: var(--color-surface, #FFF);
}
.gdash__queue-title[b-bvznow2slb] {
    margin: 0 0 var(--space-3, 12px);
    font-size: var(--text-base, 1rem);
    font-weight: 700;
    color: var(--color-primary, #1B3A6B);
}
.gdash__queue-group[b-bvznow2slb] { margin-bottom: var(--space-4, 16px); }
.gdash__queue-group:last-of-type[b-bvznow2slb] { margin-bottom: var(--space-2, 8px); }
.gdash__queue-grouptitle[b-bvznow2slb] {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #5A6478);
}
.gdash__qrow[b-bvznow2slb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    padding: 10px 12px;
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 10px;
    background: var(--color-bg, #F7F9FC);
}
.gdash__qrow + .gdash__qrow[b-bvznow2slb] { margin-top: var(--space-2, 8px); }
/* An assignment-wide question is answered ONCE — marked out so it never reads as one child's row. */
.gdash__qrow--assignment[b-bvznow2slb] {
    border-color: #F0C36D;
    background: #FFF8EC;
}
.gdash__qrow-text[b-bvznow2slb] { display: flex; flex-direction: column; gap: 2px; flex: 1 1 320px; min-width: 0; }
.gdash__qrow-ask[b-bvznow2slb] { font-size: var(--text-sm, 0.875rem); font-weight: 600; color: var(--color-text, #1F2733); }
.gdash__qrow-count[b-bvznow2slb] { font-size: var(--text-xs, 0.75rem); color: var(--color-text-secondary, #5A6478); }
.gdash__qrow-item[b-bvznow2slb] { font-size: var(--text-sm, 0.875rem); font-weight: 700; color: var(--color-primary, #1B3A6B); }
.gdash__qrow-reason[b-bvznow2slb] { font-size: var(--text-xs, 0.75rem); color: var(--color-text-secondary, #5A6478); }
.gdash__qrow-actions[b-bvznow2slb] { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2, 8px); }
.gdash__qinput[b-bvznow2slb] {
    min-width: 200px;
    padding: 6px 10px;
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 8px;
    background: var(--color-surface, #FFF);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text, #1F2733);
}
.gdash__qinput:focus[b-bvznow2slb] { outline: 2px solid var(--color-secondary, #4A7FC1); outline-offset: 1px; }
.gdash__qbtn[b-bvznow2slb] {
    padding: 6px 12px;
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 8px;
    background: var(--color-surface, #FFF);
    color: var(--color-primary, #1B3A6B);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
}
.gdash__qbtn:hover:not(:disabled)[b-bvznow2slb] { border-color: var(--color-primary, #1B3A6B); }
.gdash__qbtn--primary[b-bvznow2slb] {
    border-color: var(--color-primary, #1B3A6B);
    background: var(--color-primary, #1B3A6B);
    color: #FFF;
}
.gdash__qbtn:disabled[b-bvznow2slb] { opacity: 0.55; cursor: default; }
.gdash__qlink[b-bvznow2slb] {
    border: none;
    background: none;
    padding: 0;
    color: var(--color-text-secondary, #5A6478);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.gdash__qlink:hover:not(:disabled)[b-bvznow2slb] { color: var(--color-primary, #1B3A6B); }
.gdash__qlink:disabled[b-bvznow2slb] { opacity: 0.55; cursor: default; }
.gdash__queue-summary[b-bvznow2slb] {
    margin: 0;
    padding-top: var(--space-2, 8px);
    border-top: 1px solid var(--color-border, #DDE3EC);
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #5A6478);
}

/* 🔴 WO-128 T5 — the marking-rules line. Deliberately the quietest thing in the header: it is an explanation
   available when she wants it, not a warning. It sits under the chips, full width, because it is a sentence
   rather than a badge. */
.gdash__rules[b-bvznow2slb] {
    margin-top: var(--space-2, 8px);
    color: var(--color-text-muted, #5A6170);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
}

/* 🔴 WO-131 T0 / T0a — the accept-all list. The detail is on the row, so it must stay readable at phone width:
   the table scrolls inside its own box rather than the page. */
.gdash__accepted[b-bvznow2slb] { overflow-x: auto; }
.gdash__accepted-table[b-bvznow2slb] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 0.875rem);
    margin-bottom: var(--space-2, 8px);
}
.gdash__accepted-table th[b-bvznow2slb] {
    text-align: left;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
    padding: 4px 8px;
    border-bottom: 1px solid var(--color-border, #E2E6EE);
}
.gdash__accepted-table td[b-bvznow2slb] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border, #E2E6EE);
    vertical-align: top;
    color: var(--color-text, #1F2733);
}
.gdash__accepted-key[b-bvznow2slb] { font-weight: 600; }
.gdash__accepted-wrote[b-bvznow2slb] { font-style: italic; }

/* 🔴 WO-213 (D-42) — "Change how this is marked" */
.gdash__remark[b-bvznow2slb] { margin: 0 0 var(--space-3, 12px); padding: 10px 14px; border: 1px solid var(--color-border, #D8DEE8); border-radius: 10px; background: var(--color-surface, #fff); }
.gdash__remark > summary[b-bvznow2slb] { cursor: pointer; font-weight: 600; color: var(--color-primary, #1B3A6B); }
.gdash__remark-hint[b-bvznow2slb] { margin: 8px 0 10px; font-size: 0.9rem; color: var(--color-text-muted, #5B6475); }
.gdash__remark-q[b-bvznow2slb] { margin: 0 0 10px; }
.gdash__remark-ask[b-bvznow2slb] { display: block; font-weight: 500; margin-bottom: 4px; }
.gdash__remark-opt[b-bvznow2slb] { display: flex; gap: 8px; align-items: baseline; margin: 2px 0; cursor: pointer; }
.gdash__remark-opt--off[b-bvznow2slb] { color: var(--color-text-muted, #8A93A3); cursor: not-allowed; }
.gdash__remark-why[b-bvznow2slb] { font-style: normal; font-size: 0.85rem; }
.gdash__remark-actions[b-bvznow2slb] { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.gdash__remark-error[b-bvznow2slb] { color: var(--color-danger, #B42318); font-size: 0.9rem; }

/* ── 🔴 WO-215 T2.2/T2.3 — "What needs you" as one list of rows; the estimate line ── */
.gdash__estimate[b-bvznow2slb] {
    margin: 2px 0 0;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #5A6478);
}
.gdash__queue-head[b-bvznow2slb] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-3, 12px);
}
.gdash__queue-head .gdash__queue-title[b-bvznow2slb] { margin: 0; }
.gdash__queue-left[b-bvznow2slb] { font-size: var(--text-sm, 0.875rem); font-weight: 600; color: var(--color-text-secondary, #5A6478); }
.gdash__rrow[b-bvznow2slb] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    padding: 10px 12px;
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 10px;
    background: var(--color-bg, #FAFBFC);
}
.gdash__rrow + .gdash__rrow[b-bvznow2slb] { margin-top: var(--space-2, 8px); }
.gdash__rrow-main[b-bvznow2slb] { display: flex; flex-direction: column; gap: 3px; flex: 1 1 360px; min-width: 0; font-size: var(--text-sm, 0.875rem); }
.gdash__rrow-item strong[b-bvznow2slb] { color: var(--color-primary, #1B3A6B); }
.gdash__rrow-q[b-bvznow2slb] { color: var(--color-text-secondary, #5A6478); }
.gdash__rrow-who[b-bvznow2slb] { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.gdash__rrow-name[b-bvznow2slb] { font-weight: 600; }
.gdash__rrow-wrote[b-bvznow2slb] { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); }
.gdash__rrow-answer[b-bvznow2slb] { color: var(--color-text, #1F2733); overflow-wrap: anywhere; }
.gdash__rrow-key[b-bvznow2slb] { color: var(--color-text-secondary, #5A6478); overflow-wrap: anywhere; }
.gdash__rrow-why[b-bvznow2slb] { font-size: var(--text-xs, 0.75rem); color: var(--color-text-secondary, #5A6478); }
.gdash__rrow-actions[b-bvznow2slb] { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2, 8px); }
.gdash__undo[b-bvznow2slb] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    margin-top: var(--space-3, 12px);
    padding: 8px 12px;
    border-radius: 8px;
    background: #EEF3FB;
    font-size: var(--text-sm, 0.875rem);
}

/* 🔴 WO-217 — the standards line: as quiet as the marking-rules line above it; "Change" is a plain text button. */
.gdash__standards[b-bvznow2slb] { margin-top: 2px; }
.gdash__standards-change[b-bvznow2slb] {
    margin-left: 6px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--color-secondary-text);   /* PLAT-WO-15f T4: was --color-secondary (4.01:1 on #EEF3FB); 5.53:1 */
    cursor: pointer;
}
.gdash__standards-change:hover[b-bvznow2slb] { text-decoration: underline; }
.gdash__standards-picker[b-bvznow2slb] {
    margin-top: var(--space-2, 8px);
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}
.gdash__standards-actions[b-bvznow2slb] { display: flex; gap: var(--space-2, 8px); }

/* WO-239 - "this assignment isn't linked to a class yet": the Link box replaces the set-up nudge when she has classes. */
.gdash__link[b-bvznow2slb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 10px;
    background: var(--color-secondary-pale, #EAF3FF);
    color: var(--color-text, #1F2733);
    font-size: var(--text-sm, 0.875rem);
}
.gdash__link-text[b-bvznow2slb] { margin: 0; font-weight: 600; }
.gdash__link-error[b-bvznow2slb] { margin: 0; color: var(--color-error, #B3261E); }
.gdash__link-actions[b-bvznow2slb] { display: flex; }

/* 🔴 WO-257 B3 — Delete under the title. */
.gdash__delete[b-bvznow2slb] { margin: var(--space-2, 8px) 0 0; }
/* /Components/Pages/Grading/GradingHome.razor.rz.scp.css */
/* GradingHome.razor.css — WO-215 T2.1, the Grading Studio list. Page-scoped; leans on the global tokens
   (--color-*, --space-*, .btn-primary, .btn-save) from Ivaro.Web/wwwroot/app.css. */

.ghome[b-dodlzy2x8v] { max-width: min(1440px, 94vw); margin: 0 auto; padding: var(--space-6, 24px) var(--space-4, 16px); }

.ghome__header[b-dodlzy2x8v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
    margin-bottom: var(--space-5, 20px);
}
.ghome__title[b-dodlzy2x8v] { margin: 0; font-size: 1.6rem; }
.ghome__subtitle[b-dodlzy2x8v] { margin: var(--space-1, 4px) 0 0; color: var(--color-text-muted, #5B6475); }
.ghome__new[b-dodlzy2x8v] { width: auto; white-space: nowrap; text-decoration: none; }
/* WO-218 T2.4 — the pages-left card and the New button, top right. */
.ghome__side[b-dodlzy2x8v] { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
/* The title block gives way (its subtitle wraps) so the card and the button stay top right on a laptop screen. */
.ghome__header > div:first-child[b-dodlzy2x8v] { flex: 1 1 320px; min-width: 0; }

.ghome__muted[b-dodlzy2x8v] { color: var(--color-text-muted, #5B6475); }
.ghome__error[b-dodlzy2x8v] { display: flex; align-items: center; gap: var(--space-3, 12px); color: var(--color-error, #C0392B); }

.ghome__list[b-dodlzy2x8v] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.ghome__link[b-dodlzy2x8v] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name status" "meta status";
    gap: 2px var(--space-4, 16px);
    align-items: center;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 10px;
    background: var(--color-surface, #fff);
    color: inherit;
    text-decoration: none;
}
.ghome__link:hover[b-dodlzy2x8v], .ghome__link:focus-visible[b-dodlzy2x8v] { border-color: var(--color-primary, #2F6FED); }
.ghome__name[b-dodlzy2x8v] { grid-area: name; font-weight: 600; }
.ghome__meta[b-dodlzy2x8v] { grid-area: meta; display: flex; gap: 6px; flex-wrap: wrap; font-size: var(--text-sm, 0.875rem); color: var(--color-text-muted, #5B6475); }
.ghome__status[b-dodlzy2x8v] {
    grid-area: status;
    justify-self: end;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    white-space: nowrap;
}
.ghome__status--needs[b-dodlzy2x8v] { background: #FDF0E1; color: #8A4B08; }
.ghome__status--names[b-dodlzy2x8v] { background: #EAF1FE; color: #1F4FB0; }
.ghome__status--grading[b-dodlzy2x8v] { background: #EEF0F4; color: #3D4657; }
.ghome__status--setup[b-dodlzy2x8v] { background: #EEF0F4; color: #3D4657; }
.ghome__status--done[b-dodlzy2x8v] { background: #E6F4EA; color: #1E6B34; }
.ghome__more[b-dodlzy2x8v] { margin-top: var(--space-4, 16px); width: auto; }

@media (max-width: 560px) {
    .ghome__link[b-dodlzy2x8v] { grid-template-columns: 1fr; grid-template-areas: "name" "meta" "status"; }
    .ghome__status[b-dodlzy2x8v] { justify-self: start; }
}
.ghome__empty[b-dodlzy2x8v] { margin: var(--space-6, 24px) 0 0; color: var(--color-text-muted, #5B6475); }

/* PLAT-WO-10a follow-up: phones stay as they were; the cap matches the shared studio shell. */
@media (max-width: 640px) { .ghome[b-dodlzy2x8v] { max-width: none; } }

/* 🔴 WO-257 B3 — Delete sits beside the row's link; on a phone it wraps under it. */
.ghome__row[b-dodlzy2x8v] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); }
.ghome__row > .ghome__link[b-dodlzy2x8v] { flex: 1 1 320px; min-width: 0; }
/* /Components/Pages/Grading/KeyView.razor.rz.scp.css */
/* R80 — the standalone "answer key in a new tab" page. A centred document column: the key is the whole point of
   this tab, so it gets the width and there is no results chrome around it. */
.keypage[b-ixsv4eigpi] {
    max-width: 920px;
    margin: 0 auto;
    padding: var(--space-5, 24px) var(--space-4, 16px);
}

.keypage__head[b-ixsv4eigpi] { margin-bottom: var(--space-4, 16px); }

.keypage__title[b-ixsv4eigpi] {
    margin: 0;
    font-size: var(--text-xl, 1.25rem);
    font-weight: 700;
    color: var(--color-text, #1F2733);
}

.keypage__sub[b-ixsv4eigpi] {
    margin: var(--space-1, 4px) 0 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #5A6478);
}

.keypage__loading[b-ixsv4eigpi],
.keypage__error[b-ixsv4eigpi] {
    padding: var(--space-4, 16px);
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 10px;
    background: var(--color-surface, #FFF);
    color: var(--color-text-secondary, #5A6478);
    font-size: var(--text-sm, 0.875rem);
}
/* /Components/Pages/Grading/VerificationGateway.razor.rz.scp.css */
/* VerificationGateway.razor.css — page-scoped; leans on the global design
   tokens from Ivaro.Web/wwwroot/app.css (--color-*, .ivaro-card,
   .btn-primary, .btn-cta). */

/* ── R3: structure-error banner ── */
.vgate__struct-error[b-p889g1agbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    align-items: flex-start;
    padding: var(--space-4, 16px);
    background: #FDECEA;
    border: 1px solid rgba(192, 57, 43, 0.35);
    border-left: 3px solid var(--color-error, #C0392B);
    border-radius: 8px;
}
.vgate__struct-error-head[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    color: var(--color-error, #C0392B);
    font-weight: 600;
}
.vgate__struct-error-msg[b-p889g1agbp] { margin: 0; font-size: var(--text-sm, 0.875rem); color: #7A241B; }
.vgate__startover[b-p889g1agbp] { align-self: flex-start; width: auto; }

/* ── R3: box selector on the master key ── */
.vgate__key-wrap[b-p889g1agbp] {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    cursor: crosshair;
    touch-action: none;            /* let pointer events drive the drag on touch */
    user-select: none;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
    overflow: hidden;
}
.vgate__key-img[b-p889g1agbp] { display: block; max-width: 100%; height: auto; -webkit-user-drag: none; }

.vgate__box[b-p889g1agbp] {
    position: absolute;
    border: 2px solid var(--color-error, #C0392B);
    background: rgba(192, 57, 43, 0.14);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
    pointer-events: none;
    box-sizing: border-box;
}
.vgate__box--live[b-p889g1agbp] { border-style: dashed; }

.vgate__box-row[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
}
/* R30 Parts A + C — teacher-facing box status (replaces the removed debug coordinate readout) + a compact,
   right-aligned Clear that sits with the box it clears. .btn-keep supplies the house
   outlined-tertiary look; this just tightens the padding for an inline row. */
.vgate__box-status[b-p889g1agbp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--color-accent, #2EAA8A);
}
.vgate__box-status svg[b-p889g1agbp] { flex-shrink: 0; }
.vgate__clear[b-p889g1agbp] {
    width: auto;
    margin-left: auto;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
}

/* ── R3: anonymization preview ── */
.vgate__preview-btn[b-p889g1agbp] { align-self: flex-start; width: auto; }
.vgate__caption[b-p889g1agbp] {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary, #1B3A6B);
}
.vgate__preview-grid[b-p889g1agbp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4, 16px);
}
.vgate__preview-card[b-p889g1agbp] {
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-surface-2, #F4F6FA);
}
.vgate__preview-img[b-p889g1agbp] { display: block; width: 100%; height: auto; }
.vgate__confirm[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-base, 1rem);
    font-weight: 500;
    color: var(--color-text-primary, #1B3A6B);
    cursor: pointer;
}

.vgate[b-p889g1agbp] {
    max-width: 780px;
    margin: 0 auto;
    padding: var(--space-6, 24px);
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 24px);
}

.vgate__header[b-p889g1agbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.vgate__title[b-p889g1agbp] {
    font-family: var(--font-display, serif);
    font-size: var(--text-3xl, 2rem);
    color: var(--color-text-primary, #1B3A6B);
    margin: 0;
}

.vgate__subtitle[b-p889g1agbp] {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #5A6478);
    margin: 0;
    line-height: 1.5;
}

.vgate__panel[b-p889g1agbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

.vgate__panel-title[b-p889g1agbp] {
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
    color: var(--color-text-primary, #1B3A6B);
    margin: 0;
}

.vgate__row[b-p889g1agbp] {
    display: flex;
    gap: var(--space-4, 16px);
}

.vgate__row .vgate__field[b-p889g1agbp] {
    flex: 1;
}

.vgate__field[b-p889g1agbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.vgate__label[b-p889g1agbp] {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--color-text-secondary, #5A6478);
}

.vgate__input[b-p889g1agbp] {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 6px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    color: var(--color-text-primary, #1B3A6B);
    background: var(--color-surface, #FFFFFF);
}

.vgate__input:focus[b-p889g1agbp] {
    outline: none;
    border-color: var(--color-secondary, #2979CC);
    box-shadow: 0 0 0 3px var(--color-secondary-pale, #E8F2FB);
}

.vgate__filename[b-p889g1agbp] {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-accent, #2EAA8A);
    font-weight: 500;
}

/* IS-F0b Step 2.2 — the "grade a pending check" picker. Compact rows, never taller than the class picker
   above it; hidden entirely (no markup at all) when there is nothing pending. */
.vgate__pending-checks[b-p889g1agbp] {
    gap: var(--space-2, 8px);
}

.vgate__pending-list[b-p889g1agbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

/* WO-232 — "Find an assignment" and "Show all (N)" replace the inner scroll. */
.vgate__pending-search[b-p889g1agbp] {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 6px;
    font: inherit;
}

.vgate__pending-more[b-p889g1agbp] {
    align-self: flex-start;
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-secondary, #2979CC);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.vgate__pending-row[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 6px;
    background: var(--color-surface, #FFFFFF);
    font-family: var(--font-body, sans-serif);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.vgate__pending-row:hover[b-p889g1agbp] {
    border-color: var(--color-secondary, #2979CC);
}

.vgate__pending-row--selected[b-p889g1agbp] {
    border-color: var(--color-accent, #2EAA8A);
    background: var(--color-accent-pale, #E6F7F2);
}

.vgate__pending-row__title[b-p889g1agbp] {
    flex: 1;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #1B3A6B);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vgate__pending-row__meta[b-p889g1agbp] {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #8E97A8);
    flex-shrink: 0;
}

.vgate__pending-row__action[b-p889g1agbp] {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--color-accent, #2EAA8A);
    flex-shrink: 0;
}

/* WO-265 — "Graded before": a small heading over her graded deliverables, below the pending ones. */
.vgate__graded-label[b-p889g1agbp] {
    margin-top: var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #8E97A8);
}

.vgate__graded-row:disabled[b-p889g1agbp] {
    cursor: progress;
    opacity: 0.7;
}

.vgate__pending-skip[b-p889g1agbp] {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #8E97A8);
    text-decoration: underline;
    cursor: pointer;
}

.vgate__submit[b-p889g1agbp],
.vgate__process[b-p889g1agbp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    align-self: flex-start;
    width: auto;
}

/* R27.1 — Continue floats right (the step's forward action). */
.vgate__submit--right[b-p889g1agbp] {
    align-self: flex-end;
    margin-left: auto;
}

/* R27.1 — the key-page assertion as the house toggle switch (pattern from DifferentiationToggle). */
.vgate__keytoggle[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px;
}

.vgate__keytoggle-label[b-p889g1agbp] {
    font-size: var(--text-sm, 14px);
    color: var(--color-text-primary, #1c2433);
}

.toggle[b-p889g1agbp] {
    width: 38px;
    height: 22px;
    background: var(--color-surface-3, #d4d9e2);
    border-radius: 999px;
    border: none;
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
    flex: 0 0 auto;
}

.toggle:disabled[b-p889g1agbp] {
    opacity: 0.6;
    cursor: not-allowed;
}

.toggle__thumb[b-p889g1agbp] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.toggle--blue.toggle--on[b-p889g1agbp] { background: var(--color-secondary, #2979CC); }
.toggle--on .toggle__thumb[b-p889g1agbp] { transform: translateX(16px); }

.vgate__submit:disabled[b-p889g1agbp],
.vgate__process:disabled[b-p889g1agbp] {
    opacity: 0.55;
    cursor: not-allowed;
}

.vgate__error[b-p889g1agbp] {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-error, #C0392B);
    margin: 0;
}

/* Discrepancy warning banner — amber semantic. */
.vgate__banner[b-p889g1agbp] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px);
    background: #FFFBF0;
    border: 1px solid rgba(232, 146, 12, 0.35);
    border-left: 3px solid var(--color-warning, #E8920C);
    border-radius: 8px;
    font-size: var(--text-sm, 0.875rem);
    color: #7A5300;
    line-height: 1.45;
}

.vgate__banner-icon[b-p889g1agbp] {
    flex-shrink: 0;
    color: var(--color-warning, #E8920C);
    margin-top: 1px;
}

/* Count strip */
.vgate__counts[b-p889g1agbp] {
    display: flex;
    gap: var(--space-3, 12px);
}

.vgate__count[b-p889g1agbp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: var(--space-4, 16px);
    background: var(--color-primary-pale, #EBF0F8);
    border-radius: 8px;
}

.vgate__count-num[b-p889g1agbp] {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 600;
    color: var(--color-primary, #1B3A6B);
}

.vgate__count-label[b-p889g1agbp] {
    font-size: var(--text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted, #8E97A8);
}

/* Blueprint list */
.vgate__blueprint[b-p889g1agbp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

.vgate__bp-item[b-p889g1agbp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-1, 4px) var(--space-3, 12px);
    background: var(--color-secondary-pale, #E8F2FB);
    border: 1px solid rgba(41, 121, 204, 0.2);
    border-radius: 20px;
    font-size: var(--text-sm, 0.875rem);
}

.vgate__bp-num[b-p889g1agbp] {
    font-weight: 600;
    color: var(--color-secondary, #2979CC);
}

.vgate__bp-type[b-p889g1agbp] {
    color: var(--color-text-secondary, #5A6478);
}

.vgate__muted[b-p889g1agbp] {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-muted, #8E97A8);
    margin: 0;
}

/* Review checkbox */
.vgate__review[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #1B3A6B);
    cursor: pointer;
}

/* Inline button spinner */
.vgate__spinner[b-p889g1agbp] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: vgate-spin-b-p889g1agbp 0.6s linear infinite;
}

@keyframes vgate-spin-b-p889g1agbp {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .vgate__row[b-p889g1agbp] { flex-direction: column; }
    .vgate__counts[b-p889g1agbp] { flex-direction: column; }
}

/* R14 — standards multi-select in the pre-grade inputs step. */
.vgate__standard[b-p889g1agbp] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.4rem 0.25rem;
    font-size: 0.9rem;
    line-height: 1.3;
    cursor: pointer;
    border-bottom: 1px solid var(--ivaro-border-subtle, #f1f5f9);
}

.vgate__standard:last-child[b-p889g1agbp] { border-bottom: none; }
.vgate__standard input[b-p889g1agbp] { margin-top: 0.15rem; }

/* R16 — question→standard range assignment (shown when 2+ standards are selected). */
.vgate__ranges[b-p889g1agbp] { margin-top: 0.75rem; }
.vgate__range-row[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
}
.vgate__range-code[b-p889g1agbp] {
    min-width: 90px;
    font-weight: 600;
    color: var(--color-text-primary, #1B3A6B);
    font-size: 0.9rem;
}
.vgate__range-num[b-p889g1agbp] {
    width: 64px;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 6px;
    font-size: 0.9rem;
}

/* ───────────────────────── R34: Key Setup surface ───────────────────────── */
/* Two-column layout: the key image on the left, the confirm-what-Ivaro-read rail on the right.
   Stacks on narrow screens (mobile-first per the design skill). */
.vgate__keysetup[b-p889g1agbp] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
    gap: var(--space-6, 24px);
    align-items: start;
}
.vgate__keysetup-key[b-p889g1agbp] { min-width: 0; }
.vgate__keysetup-rail[b-p889g1agbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

/* One confirmation block (orientation / name field / questions / rubric) */
.vgate__block[b-p889g1agbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px);
    background: var(--color-surface-2, #F4F6FA);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
}
.vgate__block-title[b-p889g1agbp] {
    font-size: var(--text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
}
.vgate__block-hint[b-p889g1agbp] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #5A6478);
    line-height: 1.4;
}
.vgate__block-ok[b-p889g1agbp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-accent, #2EAA8A);
}
.vgate__rotate[b-p889g1agbp] { align-self: flex-start; width: auto; }

/* Name-field: "no name field" assertion */
.vgate__namesabsent[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #1B3A6B);
    cursor: pointer;
    margin-top: var(--space-1, 4px);
}

/* Counts inside the rail sit tighter than the standalone row */
.vgate__counts--rail .vgate__count[b-p889g1agbp] { padding: var(--space-3, 12px); }
.vgate__counts--rail .vgate__count-num[b-p889g1agbp] { font-size: var(--text-xl, 1.25rem); }

/* Gradeability toggle rows — "the Otter question", one tap */
.vgate__activity-row[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-2, 8px) 0;
    border-top: 1px solid var(--color-border, #D0D7E3);
}
.vgate__activity-name[b-p889g1agbp] {
    flex: 1;
    min-width: 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--color-text-primary, #1B3A6B);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vgate__activity-state[b-p889g1agbp] {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #8E97A8);
    white-space: nowrap;
}
.vgate__activity-state--graded[b-p889g1agbp] { color: var(--color-accent, #2EAA8A); font-weight: 600; }

.vgate__adjust-toggle[b-p889g1agbp] {
    align-self: flex-start;
    background: none;
    border: none;
    padding: var(--space-1, 4px) 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-secondary, #2979CC);
    cursor: pointer;
}
.vgate__adjust-list[b-p889g1agbp] { display: flex; flex-direction: column; }

/* The preview gate sits full-width below the two-column Key Setup grid */
.vgate__preview-section[b-p889g1agbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    margin-top: var(--space-5, 20px);
    padding-top: var(--space-5, 20px);
    border-top: 1px solid var(--color-border, #D0D7E3);
}

@media (max-width: 860px) {
    .vgate__keysetup[b-p889g1agbp] { grid-template-columns: 1fr; }
}

/* ── R35: conversational Key Setup framing ── */
.vgate__ks-clean[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px);
    background: var(--color-accent-pale, #E6F7F2);
    border: 1px solid var(--color-accent, #2EAA8A);
    border-radius: 8px;
    color: var(--color-accent, #2EAA8A);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
}
.vgate__ks-clean svg[b-p889g1agbp] { flex-shrink: 0; }

.vgate__ks-orient[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
    background: #FFFBF0;
    border: 1px solid rgba(240, 192, 64, 0.5);
    border-left: 3px solid #F0C040;
    border-radius: 0 8px 8px 0;
}
.vgate__ks-orient .vgate__block-hint[b-p889g1agbp] { margin: 0; flex: 1; min-width: 200px; }

.vgate__keysetup-key--solo[b-p889g1agbp] { margin-top: var(--space-4, 16px); max-width: 640px; }

/* ══════════════ R37 Part B — the screen stepper (Upload → Key Setup → Process) ══════════════ */
.vgate__steps[b-p889g1agbp] {
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: 0;
    margin: 0 0 var(--space-5, 20px) 0;
    flex-wrap: wrap;
}
.vgate__step[b-p889g1agbp] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-muted, #8E97A8);
}
.vgate__step-num[b-p889g1agbp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border, #D0D7E3);
    background: var(--color-surface, #FFFFFF);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    line-height: 1;
}
.vgate__step--active[b-p889g1agbp] { color: var(--color-primary, #1B3A6B); }
.vgate__step--active .vgate__step-num[b-p889g1agbp] {
    border-color: var(--color-primary, #1B3A6B);
    background: var(--color-primary, #1B3A6B);
    color: #FFFFFF;
}
.vgate__step--done[b-p889g1agbp] { color: var(--color-accent, #2EAA8A); }
.vgate__step--done .vgate__step-num[b-p889g1agbp] {
    border-color: var(--color-accent, #2EAA8A);
    background: var(--color-accent, #2EAA8A);
    color: #FFFFFF;
}
.vgate__step-sep[b-p889g1agbp] {
    flex: 0 0 28px;
    height: 1.5px;
    background: var(--color-border, #D0D7E3);
    list-style: none;
}

/* Compact packet summary bar shown on steps 2/3 (the Upload card is collapsed). */
.vgate__summary[b-p889g1agbp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    flex-wrap: wrap;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
    background: var(--color-surface-2, #F4F6FA);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
}
.vgate__summary-text[b-p889g1agbp] { font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.vgate__summary-text strong[b-p889g1agbp] { color: var(--color-text-primary, #1B3A6B); }
.vgate__summary-startover[b-p889g1agbp] { width: auto; padding: var(--space-1, 4px) var(--space-3, 12px); font-size: var(--text-sm, 0.875rem); }

/* R37 Part A — the key-check status strip (busy / clean / discrepancy found). */
.vgate__keycheck[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
    border-radius: 8px;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    border: 1px solid var(--color-border, #D0D7E3);
    border-left-width: 3px;
}
.vgate__keycheck svg[b-p889g1agbp] { flex-shrink: 0; }
.vgate__keycheck--busy[b-p889g1agbp] { background: var(--color-surface-2, #F4F6FA); border-left-color: var(--color-secondary, #2979CC); color: var(--color-text-secondary, #5A6478); }
.vgate__keycheck--ok[b-p889g1agbp] { background: #F1FAF6; border-left-color: var(--color-accent, #2EAA8A); color: #1E6E58; }
.vgate__keycheck--flag[b-p889g1agbp] { background: #FFFBF0; border-left-color: var(--color-warning, #E8920C); color: #8A5A00; }

/* Step navigation (Continue / Back). */
.vgate__stepnav[b-p889g1agbp] {
    display: flex;
    flex-direction: column;
    /* R59 Part B — the primary action floats RIGHT in its row (button + any blocked-hint aligned right). */
    align-items: flex-end;
    gap: var(--space-2, 8px);
    margin-top: var(--space-4, 16px);
}
.vgate__continue[b-p889g1agbp] { align-self: flex-end; width: auto; }

/* R79 (Part B) — a DISABLED Start Grading button must not read as the live green CTA. It was correctly disabled
   and non-focusable, yet still rendered as the green call-to-action, so the teacher clicked it repeatedly and
   concluded the product was broken ("stays green but doesn't start grading"). Give it a distinct, visibly
   non-actionable appearance — a muted grey, not a faded green — ONLY when disabled. The enabled .btn-cta is
   untouched. Overrides the global .btn-cta green because this scoped rule is more specific + comes later. */
.vgate__continue:disabled[b-p889g1agbp],
.vgate__continue[disabled][b-p889g1agbp] {
    background: var(--surface-2, #e5e7eb);
    color: var(--text-muted, #6b7280);
    border: 1px solid var(--border, #d1d5db);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1; /* a solid grey, NOT a translucent green — so it plainly is not the CTA */
}

/* R59 Part A — the ONE persistent waiting panel (owns Key Setup until a real dialogue exists). */
.vgate__waiting[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-5, 20px) var(--space-4, 16px);
}
.vgate__waiting-text[b-p889g1agbp] { display: flex; flex-direction: column; gap: 4px; }
.vgate__waiting-text strong[b-p889g1agbp] { font-size: 1.05rem; color: var(--color-text, #24324A); }
/* A larger spinner with a VISIBLE (colored) ring — the base .vgate__spinner is white for a colored button. */
.vgate__spinner--lg[b-p889g1agbp] {
    width: 26px;
    height: 26px;
    border: 3px solid var(--color-surface-3, #E1E6EF);
    border-top-color: var(--color-secondary, #2979CC);
    flex-shrink: 0;
}
.vgate__back[b-p889g1agbp] {
    align-self: flex-start;
    width: auto;
    margin-bottom: var(--space-3, 12px);
    padding: var(--space-1, 4px) var(--space-3, 12px);
    font-size: var(--text-sm, 0.875rem);
}

/* ── WO-78: the stalled-work ("is anything stuck?") panel ── */
.vgate__attn[b-p889g1agbp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
    background: #FDF6EC;
    border: 1px solid rgba(232, 146, 12, 0.35);
    border-left: 3px solid var(--color-warning, #E8920C);
    border-radius: 8px;
}
.vgate__attn-head[b-p889g1agbp] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    color: #8A5A00;
    font-weight: 600;
}
.vgate__attn-list[b-p889g1agbp] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.vgate__attn-row[b-p889g1agbp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: #5B4A26;
}
.vgate__attn-row--muted[b-p889g1agbp] { color: #8B7B55; }
.vgate__attn-text[b-p889g1agbp] { flex: 1 1 320px; min-width: 240px; }
.vgate__attn-actions[b-p889g1agbp] { display: flex; align-items: center; gap: var(--space-2, 8px); }
.vgate__attn-link[b-p889g1agbp] { color: var(--color-primary, #2F6FED); font-weight: 600; text-decoration: none; white-space: nowrap; }
.vgate__attn-link:hover[b-p889g1agbp] { text-decoration: underline; }
.vgate__attn-retry[b-p889g1agbp] {
    padding: 4px 12px;
    border: 1px solid rgba(232, 146, 12, 0.5);
    border-radius: 6px;
    background: #fff;
    color: #8A5A00;
    font-weight: 600;
    font-size: var(--text-sm, 0.875rem);
    cursor: pointer;
    white-space: nowrap;
}
.vgate__attn-retry:hover:not(:disabled)[b-p889g1agbp] { background: #FBEED8; }
.vgate__attn-retry:disabled[b-p889g1agbp] { opacity: 0.6; cursor: default; }
.vgate__attn-note[b-p889g1agbp] { margin: 0; font-size: var(--text-sm, 0.875rem); color: #5B4A26; font-style: italic; }

/* ═══ WO-92 T2 — the assignment's grading policy (the four intake questions + the effective-key rows) ═══
   Styled as a quiet confirm card, like vgate__clarify: these are settings that already have the right answer,
   not a gate. Nothing here blocks Start Grading. */
.vgate__policy-q[b-p889g1agbp] {
    padding: var(--space-3, 12px) 0;
    border-top: 1px solid var(--color-border, #DDE3EC);
}
.vgate__policy-q:first-of-type[b-p889g1agbp] { border-top: none; }
.vgate__policy-ask[b-p889g1agbp] {
    display: block;
    margin-bottom: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text, #1F2733);
}
.vgate__policy-opts[b-p889g1agbp] { display: flex; flex-direction: column; gap: 6px; }
.vgate__policy-opt[b-p889g1agbp] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #5A6478);
    cursor: pointer;
}
.vgate__policy-opt input[b-p889g1agbp] { margin-top: 3px; }
/* WO-100 T2 — the younger-grades suggestion under the spelling question: a hint, never a default. */
.vgate__policy-hint[b-p889g1agbp] {
    display: block;
    margin-top: 6px;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #5A6478);
    font-style: italic;
}
.vgate__policy-keys[b-p889g1agbp] { border-top: 1px solid #F0C36D; }
.vgate__policy-key[b-p889g1agbp] {
    margin-top: var(--space-2, 8px);
    padding: 8px 10px;
    border: 1px solid #F0C36D;
    border-radius: 8px;
    background: #FFF8EC;
}
.vgate__policy-keyitem[b-p889g1agbp] {
    display: block;
    margin-bottom: 4px;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    color: #7A4E12;
}
.vgate__policy-version[b-p889g1agbp] {
    margin: var(--space-2, 8px) 0 0;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #5A6478);
}

/* ═══ 🔴 WO-217 — grade and subject from the class: Lesson Planner's "Set by <class>" line (guided-lesson__linked),
   matched here because that style is page-scoped there. A positive linkage (teal accent), not a warning. ═══ */
.vgate__linked[b-p889g1agbp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--color-accent-pale);
    border: 1px solid rgba(46, 170, 138, 0.25);
    border-left: 3px solid var(--color-accent);
    border-radius: 6px;
    padding: var(--space-3) var(--space-4);
}

.vgate__linked-value[b-p889g1agbp] {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--text-base);
}

.vgate__linked-note[b-p889g1agbp] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.setupconv-retry[b-p889g1agbp] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--color-secondary);
    cursor: pointer;
}

/* WO-239 - the classes-didn't-load line and its Try again link button. */
.vgate__linkbtn[b-p889g1agbp] {
    border: 0;
    background: none;
    padding: 0 0 0 var(--space-2, 8px);
    color: var(--color-primary, #1B3A6B);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* 🔴 PLAT-WO-05c T1 — the landing page: the mock's layout and type scale, Ivaro's tokens only (no new hex, no rgba;
   the kit's token test covers this file).

   Desktop: the hero (eyebrow, h1, tagline) and the feature list on the left, the sign-in card on the right.
   Phone: header → hero → the card → the features → footer, which is the DOM order. */

.home[b-7c85zirsce] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-areas:
        "hero card"
        "features card";
    column-gap: var(--space-12);
    row-gap: var(--space-8);
    align-items: start;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
}

.home__hero[b-7c85zirsce] { grid-area: hero; align-self: end; }
/* PLAT-WO-11a T1 — the card column holds the trial card on top and the sign-in card under it, 24 px apart. */
.home__card[b-7c85zirsce] { grid-area: card; align-self: center; display: flex; flex-direction: column; gap: var(--space-6); }
.home__features[b-7c85zirsce] { grid-area: features; }

.home__eyebrow[b-7c85zirsce] {
    margin: 0 0 var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.home__title[b-7c85zirsce] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-text-primary);
}

/* PLAT-WO-09b T0.1 — Ruby: "the welcome text on the left is too small". 5xl (3.5rem) from a desktop width up, 4xl below it.
   The wordmark image sits at 0.75em of the h1, so it grows with the heading. */
@media (min-width: 1024px) {
    .home__title[b-7c85zirsce] { font-size: var(--text-5xl); }
}

/* PLAT-WO-09a T1.2 — "Ivaro™" is the brand wordmark image (its ™ drawn in), sized to the heading's cap height; the h1's
   accessible name stays "Welcome to Ivaro" (the image's alt supplies the last word). */
.home__title-mark[b-7c85zirsce] {
    display: inline-block;
    height: 0.75em;
    width: auto;
    margin-left: 0.12em;
    vertical-align: baseline;
}

/* The token PLAT-WO-05's Welcome tagline uses (after its AA fix). */
.home__tagline[b-7c85zirsce] {
    margin: var(--space-4) 0 0;
    font-family: var(--font-body);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-primary-light);
}

.home__features[b-7c85zirsce] {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: var(--space-12);
    row-gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.home__feature[b-7c85zirsce] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
}

/* The tagged row spans both columns, so the tag doesn't push the second column away (the mock's spacing). */
.home__feature--soon[b-7c85zirsce] { grid-column: 1 / -1; }

.home__feature-icon[b-7c85zirsce] { flex: 0 0 24px; width: 24px; height: 24px; color: var(--color-text-secondary); }

.home__soon[b-7c85zirsce] {
    padding: 2px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Chromebook and narrower desktops: the same two columns, closer together. */
@media (max-width: 1100px) {
    .home[b-7c85zirsce] { column-gap: var(--space-8); }
}

/* Phone: one column in the order the order lists. */
@media (max-width: 800px) {
    .home[b-7c85zirsce] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "hero"
            "card"
            "features";
        row-gap: var(--space-6);
    }

    .home__hero[b-7c85zirsce] { align-self: start; }
    .home__eyebrow[b-7c85zirsce] { margin-bottom: var(--space-3); font-size: var(--text-base); }
    .home__tagline[b-7c85zirsce] { margin-top: var(--space-2); font-size: var(--text-xl); }
    .home__feature[b-7c85zirsce] { font-size: var(--text-base); }

    .home__features[b-7c85zirsce] { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); padding: 0 var(--space-2); }
}
/* /Components/Pages/Intervention/InterventionAssignment.razor.rz.scp.css */
.iassign[b-51kxf54wbu] {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.iassign__back[b-51kxf54wbu] {
    font-size: var(--text-sm);
    color: var(--color-secondary);
    text-decoration: none;
}

.iassign__title[b-51kxf54wbu] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--color-text-primary);
    margin: var(--space-2) 0 0;
}

.iassign__strip[b-51kxf54wbu] {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-6);
    background: var(--color-surface-2);
    border-radius: 8px;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.iassign__section-title[b-51kxf54wbu] {
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
}

.iassign__cards[b-51kxf54wbu] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.iassign__loading[b-51kxf54wbu] {
    color: var(--color-text-muted);
}
/* /Components/Pages/Intervention/InterventionBuild.razor.rz.scp.css */
/* IS-AP5 - /studio/intervention/assignment/{id}/build. Tokens only; the overlay itself is the shared popup. */
.ibuild[b-egdiwov64q] {
    max-width: 52rem;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) 3rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ibuild__header[b-egdiwov64q] { display: flex; flex-direction: column; gap: 0.25rem; }
.ibuild__back[b-egdiwov64q] { font-size: var(--text-sm); text-decoration: none; }
.ibuild__title[b-egdiwov64q] { margin: 0; font-family: var(--font-display); color: var(--color-text-primary); }
.ibuild__preparing[b-egdiwov64q] { margin: 0; color: var(--color-text-secondary); }
.ibuild__card[b-egdiwov64q] { padding: var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.ibuild__sentence[b-egdiwov64q] { margin: 0; color: var(--color-text-primary); }
.ibuild__note[b-egdiwov64q] { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
.ibuild__actions[b-egdiwov64q] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Navy fill + white text (11.3:1); the global `a:hover` colour must not pale it. */
.ibuild__btn[b-egdiwov64q],
.ibuild__btn:link[b-egdiwov64q],
.ibuild__btn:visited[b-egdiwov64q],
.ibuild__btn:hover[b-egdiwov64q] {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: var(--space-3) var(--space-6);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
}
.ibuild__link[b-egdiwov64q] { font-size: var(--text-sm); }

/* IS-AP19 - the per-group session choice (switch on only). */
.ibuild__group[b-egdiwov64q] { display: flex; flex-direction: column; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border, #e5e7eb); }
.ibuild__group-title[b-egdiwov64q] { margin: 0; font-size: var(--text-base, 1rem); color: var(--color-text-primary); }
.ibuild__sessions[b-egdiwov64q] { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ibuild__sessions-label[b-egdiwov64q] { font-weight: 600; color: var(--color-text-primary); }
.ibuild__session[b-egdiwov64q] {
    min-width: 2.5rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    background: #fff;
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
}
.ibuild__session.is-on[b-egdiwov64q] { background: var(--color-primary); color: #fff; }
.ibuild__reason[b-egdiwov64q] { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }
/* /Components/Pages/Intervention/InterventionHome.razor.rz.scp.css */
.ihome[b-n5pdj1su1u] {
    max-width: min(1440px, 94vw);   /* PLAT-WO-10a follow-up: match the shared studio shell */
    margin: 0 auto;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* IS-AP8 - a compared plan's second chip. Narrowed green, about the same blue-grey, widened amber - never red. */
.ihome__stick[b-n5pdj1su1u] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    white-space: nowrap;
}
.ihome__stick--narrowed[b-n5pdj1su1u] { background: #E3F4EA; color: #1E6B3A; }
.ihome__stick--same[b-n5pdj1su1u] { background: #E8EEF4; color: #34495E; }
.ihome__stick--widened[b-n5pdj1su1u] { background: #FFEFD1; color: #6E4300; }

/* IS-AP8 (I47) - "May need a different approach" (DRAFT copy). */
.ihome__notyet[b-n5pdj1su1u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E2E6EE);
    border-radius: 8px;
    min-width: 0;
}
.ihome__notyet-title[b-n5pdj1su1u] { margin: 0; font-size: var(--text-lg, 1.125rem); color: var(--color-text-primary); }
.ihome__notyet-list[b-n5pdj1su1u] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1, 4px); }
.ihome__notyet-row[b-n5pdj1su1u] { display: flex; flex-wrap: wrap; column-gap: var(--space-3, 12px); overflow-wrap: anywhere; }
.ihome__notyet-links[b-n5pdj1su1u] { display: inline-flex; gap: var(--space-2, 8px); }
.ihome__notyet-note[b-n5pdj1su1u] { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-muted, #5A6478); }

/* IS-AP9 Task 7 - the empty state. */
.ihome__empty[b-n5pdj1su1u] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px);
    max-width: 44rem;
}
.ihome__empty p[b-n5pdj1su1u] { margin: 0; color: var(--color-text-primary); }
.ihome__empty-title[b-n5pdj1su1u] { margin: 0; font-size: var(--text-xl, 1.25rem); color: var(--color-text-primary); }
.ihome--empty[b-n5pdj1su1u]  .studio-dashboard__empty { display: none; }
.ihome__empty-steps[b-n5pdj1su1u] { margin: 0 0 var(--space-2, 8px); padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--space-1, 4px); }

.ihome__header[b-n5pdj1su1u] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ihome__title[b-n5pdj1su1u] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
}

.ihome__subtitle[b-n5pdj1su1u] {
    margin: 0;
    color: var(--color-text-secondary);
}

.ihome__section-title[b-n5pdj1su1u] {
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4);
}

.ihome__cards[b-n5pdj1su1u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.ihome__open-list[b-n5pdj1su1u] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ihome__open-row[b-n5pdj1su1u] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-decoration: none;
    transition: border-color 0.15s ease;
}

.ihome__open-row:hover[b-n5pdj1su1u] {
    border-color: var(--color-secondary);
}

.ihome__open-kind[b-n5pdj1su1u] {
    font-weight: 600;
    color: var(--color-primary);
    flex: 1;
}

.ihome__open-next[b-n5pdj1su1u] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.ihome__muted[b-n5pdj1su1u] {
    color: var(--color-text-muted);
}

.ihome__footer[b-n5pdj1su1u] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* IS-AP1 - card title/meta, now used by the "Ready to build" cards (IS-AP6 1j removed the assignment summary cards) */
.ihome__strip-title[b-n5pdj1su1u] {
    font-weight: 600;
}

.ihome__strip-meta[b-n5pdj1su1u] {
    display: block;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* IS-AP5 (I37) - "Ready to build": an unbuilt group of an unlocked assignment. No names. */
.ihome__ready-card[b-n5pdj1su1u] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
}

.ihome__ready-state[b-n5pdj1su1u] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* Navy fill + white text (11.3:1) in every link state: the global `a:hover` colour must not pale it. */
.ihome__ready-btn[b-n5pdj1su1u],
.ihome__ready-btn:link[b-n5pdj1su1u],
.ihome__ready-btn:visited[b-n5pdj1su1u],
.ihome__ready-btn:hover[b-n5pdj1su1u] {
    align-self: flex-start;
    margin-top: 0.4rem;
    background: var(--color-primary);
    color: #fff;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    text-decoration: none;
}

/* PLAT-WO-10a follow-up: phones stay as they were. */
@media (max-width: 640px) { .ihome[b-n5pdj1su1u] { max-width: none; } }

/* IS-AP6 1e - placeholders while the dashboard's reads run (no SharedUI skeleton class exists; same shimmer as the
   Reteach packets card). */
.ihome__skeleton[b-n5pdj1su1u] { display: flex; flex-direction: column; gap: var(--space-4, 16px); margin-top: var(--space-4, 16px); }
.ihome__skeleton-cards[b-n5pdj1su1u] { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3, 12px); }
.ihome__skeleton-card[b-n5pdj1su1u] { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem 1rem; }
.ihome__skeleton-rows[b-n5pdj1su1u] { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.ihome__skeleton-row[b-n5pdj1su1u] { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--space-3, 12px) 0; border-bottom: 1px solid var(--color-border, #e5e5e5); }
.ihome__bone[b-n5pdj1su1u] {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg,
        var(--color-surface-2, #F4F6FA) 0%,
        var(--color-surface-3, #E8ECF3) 50%,
        var(--color-surface-2, #F4F6FA) 100%);
    background-size: 200% 100%;
    animation: ihome-shimmer-b-n5pdj1su1u 1.4s ease infinite;
}
.ihome__bone--band[b-n5pdj1su1u] { width: 100%; height: 3.5rem; margin-bottom: var(--space-4, 16px); border-radius: 8px; }   /* IS-AP7 - the impact band's place */
.ihome__bone--heading[b-n5pdj1su1u] { width: 10rem; height: 1.3rem; }
.ihome__bone--title[b-n5pdj1su1u] { width: 70%; height: 1rem; }
.ihome__bone--line[b-n5pdj1su1u] { width: 45%; height: 0.75rem; }
.ihome__bone--button[b-n5pdj1su1u] { width: 9rem; height: 2rem; margin-top: 0.25rem; }
@keyframes ihome-shimmer-b-n5pdj1su1u {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ihome__bone[b-n5pdj1su1u] { animation: none; }
}
.ihome__sr-only[b-n5pdj1su1u] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* IS-AP7 - the "waiting for scores" filter line. */
.ihome__filter[b-n5pdj1su1u] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary);
}
/* /Components/Pages/Intervention/InterventionNew.razor.rz.scp.css */
/* IS-AP1 - /studio/intervention/new: "Start from what grading found". */
.inew[b-080qjl1xtk] {
    max-width: 52rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.inew__header[b-080qjl1xtk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.inew__title[b-080qjl1xtk] {
    margin: 0;
}

.inew__back[b-080qjl1xtk] {
    font-size: 0.9rem;
    text-decoration: none;
    /* PLAT-WO-15c T3 — the global link colour (--color-secondary) is 4.12:1 on this page; the text token meets AA (5.45:1). */
    color: var(--color-secondary-text);
}

.inew__muted[b-080qjl1xtk] {
    margin: 0;
    opacity: 0.75;
    font-size: 0.95rem;
}

.inew__assignment[b-080qjl1xtk] {
    padding: 1rem 1.25rem;
}

.inew__assignment-title[b-080qjl1xtk] {
    margin: 0 0 0.15rem;
    font-size: 1.1rem;
}

.inew__groups[b-080qjl1xtk] {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.inew__group[b-080qjl1xtk] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--ivaro-border, #d9dee7);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}

.inew__group-name[b-080qjl1xtk] {
    font-weight: 600;
}

.inew__empty[b-080qjl1xtk] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}
/* /Components/Pages/Intervention/InterventionPlan.razor.rz.scp.css */
/* IS-M2 — the plan page's OWN scoped layout (03 §3.6). Borrows only the GLOBAL design system
   (var(--color-*), .ivaro-card, .btn-cta, .btn-save) — never another component's scoped classes. */

.iplan[b-u3gsc8err3] {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--space-6);
}

.iplan__header[b-u3gsc8err3] {
    margin-bottom: var(--space-6);
}

.iplan__back[b-u3gsc8err3] {
    display: inline-block;
    font-size: var(--text-sm);
    color: var(--color-secondary-text);   /* PLAT-WO-15f T4: was --color-secondary (4.47:1 on white); 6.16:1 */
    text-decoration: none;
    margin-bottom: var(--space-2);
}

.iplan__back:hover[b-u3gsc8err3] { text-decoration: underline; }

.iplan__title[b-u3gsc8err3] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0;
}

.iplan__loading[b-u3gsc8err3] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.iplan__steps[b-u3gsc8err3] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The vertical stepper: a marker column and a card column, with the connecting rule drawn
   behind the markers. Mirrors the Guided Builder's stepper idiom in a vertical arrangement. */
.iplan__step[b-u3gsc8err3] {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--space-4);
    position: relative;
    padding-bottom: var(--space-6);
}

.iplan__step:not(:last-child)[b-u3gsc8err3]::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 40px;
    bottom: 0;
    width: 2px;
    background: var(--color-border);
}

.iplan__marker[b-u3gsc8err3] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 600;
    background: var(--color-surface-3);
    color: var(--color-text-muted);
    position: relative;
    z-index: 1;
}

.iplan__marker--done[b-u3gsc8err3] {
    background: var(--color-accent);
    color: #fff;
}

.iplan__marker--active[b-u3gsc8err3] {
    background: var(--gradient-brand-blue);
    color: #fff;
}

.iplan__card[b-u3gsc8err3] { min-width: 0; }

.iplan__step-title[b-u3gsc8err3] {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
}

.iplan__chips[b-u3gsc8err3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.iplan__kind-chip[b-u3gsc8err3] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: 20px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--color-surface-3);
    color: var(--color-text-secondary);
}

.iplan__headline[b-u3gsc8err3] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.iplan__determination[b-u3gsc8err3] {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3);
}

.iplan__muted[b-u3gsc8err3] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3);
}

/* PLAT-WO-15f T4 — a link inside a sentence ("Print more exit tickets"): the AA text shade (6.16:1 on white), and an
   underline so it doesn't rely on colour alone to read as a link. */
.iplan__muted a[b-u3gsc8err3] {
    color: var(--color-secondary-text);
    text-decoration: underline;
}

.iplan__note[b-u3gsc8err3] {
    background: #FFFBF0;
    border-left: 3px solid #F0C040;
    border-radius: 0 6px 6px 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: var(--space-3) 0 0;
}

.iplan__action-kind[b-u3gsc8err3] {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.iplan__strategies[b-u3gsc8err3] {
    background: var(--color-accent-pale);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 6px 6px 0;
    padding: var(--space-4);
    margin: var(--space-4) 0;
}

.iplan__strategies-label[b-u3gsc8err3] {
    display: block;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-3);
}

.iplan__strategy:not(:last-child)[b-u3gsc8err3] {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid rgba(46, 170, 138, 0.2);
}

.iplan__strategy-name[b-u3gsc8err3] {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-right: var(--space-2);
}

.iplan__strategy-time[b-u3gsc8err3] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.iplan__strategy-desc[b-u3gsc8err3] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: var(--space-1) 0 0;
}

.iplan__caution[b-u3gsc8err3] {
    font-size: var(--text-sm);
    font-style: italic;
    color: #E65100;
    margin: var(--space-2) 0 0;
}

.iplan__actions[b-u3gsc8err3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.iplan__lesson-link[b-u3gsc8err3] {
    display: inline-block;
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: none;
    margin-bottom: var(--space-2);
}

.iplan__lesson-link:hover[b-u3gsc8err3] { text-decoration: underline; }

.iplan__taught[b-u3gsc8err3] {
    font-size: var(--text-sm);
    color: var(--color-accent);
    font-weight: 600;
    margin: var(--space-3) 0 0;
}

.iplan__date-label[b-u3gsc8err3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.iplan__date[b-u3gsc8err3] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

.iplan__print[b-u3gsc8err3] { margin-top: var(--space-4); }

/* IS-M3 step 5 — the type segmented control + count stepper (03 §3.6). */
.iplan__qc-controls[b-u3gsc8err3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-3) 0;
}

.iplan__seg[b-u3gsc8err3] {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    overflow: hidden;
}

.iplan__seg-btn[b-u3gsc8err3] {
    border: none;
    background: transparent;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.iplan__seg-btn--on[b-u3gsc8err3] {
    background: var(--color-accent);
    color: #fff;
    font-weight: 600;
}

.iplan__stepper[b-u3gsc8err3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.iplan__step-btn[b-u3gsc8err3] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--text-base);
    line-height: 1;
    cursor: pointer;
}

.iplan__step-btn:disabled[b-u3gsc8err3] { opacity: 0.4; cursor: default; }

.iplan__stepper-value[b-u3gsc8err3] {
    min-width: 1.5rem;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-primary);
}

.iplan__stepper-label[b-u3gsc8err3] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.iplan__print-list[b-u3gsc8err3] {
    margin-top: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-4);
}

.iplan__print-group:not(:last-child)[b-u3gsc8err3] {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-surface-3);
}

.iplan__print-name[b-u3gsc8err3] {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.iplan__print-members[b-u3gsc8err3] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* WO-110 T2/T3 — the plan-refusal / provider-outage sentence, above the build button.
   Mirrors .del__error in the Deliverable Studio: same token, same weight, so one product
   speaks with one voice about the same two situations. */
.iplan__error[b-u3gsc8err3] {
    margin-bottom: var(--space-2, 8px);
    color: var(--color-error, #C0392B);
    font-size: var(--text-sm, 0.875rem);
}

@media (max-width: 640px) {
    .iplan[b-u3gsc8err3] { padding: var(--space-4); }
    .iplan__step[b-u3gsc8err3] { grid-template-columns: 28px 1fr; gap: var(--space-3); }
    .iplan__step:not(:last-child)[b-u3gsc8err3]::before { left: 13px; }
    .iplan__marker[b-u3gsc8err3] { width: 28px; height: 28px; font-size: var(--text-xs); }
}

/* IS-AP2b - the two steps of "Build Reteach Packet". */
.iplan__packet[b-u3gsc8err3] { list-style: none; margin: 0 0 var(--space-3, 12px); padding: 0; display: flex; gap: var(--space-4, 16px); flex-wrap: wrap; }
.iplan__packet-step[b-u3gsc8err3] { display: flex; flex-direction: column; gap: 2px; }
.iplan__ticket[b-u3gsc8err3] { margin-top: var(--space-4, 16px); }

/* IS-AP3 - quick exit-ticket score entry and the outcome. */
.iplan__followup[b-u3gsc8err3] { margin-top: var(--space-4, 16px); }
.iplan__taught[b-u3gsc8err3] { display: inline-flex; align-items: center; gap: var(--space-2, 8px); font-size: var(--text-sm); }
.iplan__scores[b-u3gsc8err3] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.iplan__score-row[b-u3gsc8err3] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 12px); padding: var(--space-2, 8px) 0; border-bottom: 1px solid var(--color-border, #e5e5e5); }
.iplan__score-name[b-u3gsc8err3] { min-width: 7rem; font-weight: 600; }
.iplan__score-items[b-u3gsc8err3] { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.iplan__mark[b-u3gsc8err3] { min-width: 3rem; min-height: 2.5rem; border: 1px solid var(--color-border, #ccc); border-radius: 6px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.iplan__mark--yes[b-u3gsc8err3] { background: #E7F5EC; border-color: #2E7D4F; }
.iplan__mark--no[b-u3gsc8err3] { background: #FDECEC; border-color: #B3261E; }
.iplan__mark:focus-visible[b-u3gsc8err3], .iplan__linkbtn:focus-visible[b-u3gsc8err3] { outline: 2px solid currentColor; outline-offset: 2px; }
.iplan__score-total input[b-u3gsc8err3] { width: 4.5rem; min-height: 2.5rem; }
.iplan__linkbtn[b-u3gsc8err3] { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--text-sm); }

/* IS-AP5 (Task 3a) - "Go to Grading" on the waiting card. The global `a:hover` colour (#4A90D9) beat `.btn-cta`'s white on
   hover, and white on the brand gradient is only 2.1-3.0:1 anyway. Navy fill + white text is 11.2:1 (>= 4.5:1), kept in
   every link state. Scoped to this card's anchor so no other `.btn-cta` changes.
   PLAT-WO-15a (go-live #6): the fill is now the app-wide primary-button token (white text 4.76-4.81:1); the white text
   in every link state stays. */
.iplan__waiting a.btn-cta[b-u3gsc8err3],
.iplan__waiting a.btn-cta:link[b-u3gsc8err3],
.iplan__waiting a.btn-cta:visited[b-u3gsc8err3],
.iplan__waiting a.btn-cta:hover[b-u3gsc8err3],
.iplan__waiting a.btn-cta:focus[b-u3gsc8err3] {
    background: var(--gradient-cta);
    color: #fff;
}

/* ── IS-AP6 1g/1h - the sheet after Done, the status line, and a refusal that is always seen ─────────── */
.iplan__score-final[b-u3gsc8err3] { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }
.iplan__note--alert[b-u3gsc8err3] { color: #7A4A00; background: #FFF4DE; border-left: 3px solid #C98A1B; padding: var(--space-2, 8px) var(--space-3, 12px); border-radius: 4px; }
.iplan__done-line[b-u3gsc8err3] { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3, 12px); margin: var(--space-3, 12px) 0 0; font-weight: 600; color: #1E6B3A; }
.iplan__after-done[b-u3gsc8err3] { margin-top: var(--space-4, 16px); align-items: center; }
.iplan__next-link[b-u3gsc8err3] { font-weight: 600; }
.iplan__sr-only[b-u3gsc8err3] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── IS-AP6 1i - "What the follow-up showed" as a card. Every chip's text is >= 4.5:1 on its fill. ──────── */
.iplan__result[b-u3gsc8err3] {
    margin-top: var(--space-4, 16px);
    padding: var(--space-4, 16px) var(--space-5, 20px);
    border: 1px solid var(--color-border, #e5e5e5);
    border-radius: 12px;
    background: var(--color-surface, #fff);
    box-shadow: 0 1px 2px rgba(27, 58, 107, 0.06);
}
.iplan__result-head[b-u3gsc8err3] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 12px); margin: var(--space-2, 8px) 0 var(--space-3, 12px); }
.iplan__result-count[b-u3gsc8err3] { color: var(--color-text-secondary, #5A6478); font-weight: 600; }

.iplan__chip[b-u3gsc8err3] { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--text-sm, 0.875rem); font-weight: 600; white-space: nowrap; }
.iplan__chip--lg[b-u3gsc8err3] { padding: 6px 16px; font-size: var(--text-lg, 1.125rem); }
/* green (#1E6B3A on #E3F4EA, 6.5:1) · blue-grey (#34495E on #E8EEF4, 8.4:1) · amber, never red (#6E4300 on #FFEFD1, 7.6:1) · grey (#474747 on #EDEDED, 8.0:1) */
.iplan__chip--improved[b-u3gsc8err3] { background: #E3F4EA; color: #1E6B3A; }
/* IS-AP11 (I57) - light green (#2D6A43 on #F1F9F3, 6.0:1) · light amber, never red (#7A5212 on #FFF7E8, 6.5:1) */
.iplan__chip--slight[b-u3gsc8err3] { background: #F1F9F3; color: #2D6A43; }
.iplan__chip--same[b-u3gsc8err3] { background: #E8EEF4; color: #34495E; }
.iplan__chip--slightlower[b-u3gsc8err3] { background: #FFF7E8; color: #7A5212; }
.iplan__chip--lower[b-u3gsc8err3] { background: #FFEFD1; color: #6E4300; }
.iplan__chip--unknown[b-u3gsc8err3] { background: #EDEDED; color: #474747; }

.iplan__bar[b-u3gsc8err3] { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--color-surface-2, #F4F6FA); }
.iplan__bar-seg[b-u3gsc8err3] { flex-basis: 0; min-width: 6px; }
.iplan__bar-seg--improved[b-u3gsc8err3], .iplan__legend-dot--improved[b-u3gsc8err3] { background: #2E8B57; }
.iplan__bar-seg--slight[b-u3gsc8err3], .iplan__legend-dot--slight[b-u3gsc8err3] { background: #8FCCA5; }
.iplan__bar-seg--same[b-u3gsc8err3], .iplan__legend-dot--same[b-u3gsc8err3] { background: #7A8CA3; }
.iplan__bar-seg--slightlower[b-u3gsc8err3], .iplan__legend-dot--slightlower[b-u3gsc8err3] { background: #EDC57A; }
.iplan__bar-seg--lower[b-u3gsc8err3], .iplan__legend-dot--lower[b-u3gsc8err3] { background: #D9961F; }
.iplan__bar-seg--unknown[b-u3gsc8err3], .iplan__legend-dot--unknown[b-u3gsc8err3] { background: #B5B5B5; }
.iplan__bar-legend[b-u3gsc8err3] { display: flex; flex-wrap: wrap; gap: var(--space-4, 16px); margin: var(--space-2, 8px) 0 var(--space-3, 12px); font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.iplan__legend-item[b-u3gsc8err3] { display: inline-flex; align-items: center; gap: 6px; }
.iplan__legend-dot[b-u3gsc8err3] { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.iplan__result-table[b-u3gsc8err3] { width: 100%; border-collapse: collapse; font-size: var(--text-sm, 0.875rem); }
.iplan__result-table th[b-u3gsc8err3] { text-align: left; font-weight: 600; color: var(--color-text-secondary, #5A6478); padding: 6px 8px; border-bottom: 1px solid var(--color-border, #e5e5e5); }
.iplan__result-table td[b-u3gsc8err3] { padding: 8px; border-bottom: 1px solid var(--color-border, #eee); font-variant-numeric: tabular-nums; }
.iplan__result-table tr:last-child td[b-u3gsc8err3] { border-bottom: none; }
.iplan__arrow[b-u3gsc8err3] { color: var(--color-text-secondary, #5A6478); text-align: center; width: 1.5rem; }

.iplan__footnotes[b-u3gsc8err3] { margin-top: var(--space-3, 12px); font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.iplan__footnotes p[b-u3gsc8err3] { margin: 2px 0; }

/* At 600px and below each student is a stacked block: label + value per line. */
@media (max-width: 600px) {
    .iplan__result[b-u3gsc8err3] { padding: var(--space-3, 12px); }
    .iplan__result-table thead[b-u3gsc8err3] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
    .iplan__result-table[b-u3gsc8err3], .iplan__result-table tbody[b-u3gsc8err3], .iplan__result-table tr[b-u3gsc8err3], .iplan__result-table td[b-u3gsc8err3] { display: block; width: 100%; }
    .iplan__result-table tr[b-u3gsc8err3] { padding: var(--space-2, 8px) 0; border-bottom: 1px solid var(--color-border, #e5e5e5); }
    .iplan__result-table tr:last-child[b-u3gsc8err3] { border-bottom: none; }
    .iplan__result-table td[b-u3gsc8err3] { border: none; padding: 2px 0; display: flex; justify-content: space-between; gap: var(--space-3, 12px); }
    .iplan__result-table td[data-label][b-u3gsc8err3]::before { content: attr(data-label); color: var(--color-text-secondary, #5A6478); font-weight: 600; }
    .iplan__result-table td.iplan__arrow[b-u3gsc8err3] { display: none; }
}

/* IS-AP10 - "Get Progress Monitoring Report" under the result and "Did it stick?". */
.iplan__report[b-u3gsc8err3] { margin-top: var(--space-4, 16px); }

/* IS-AP19 - the session stepper: Session 1 ✓ · Session 2 · Session 3 + exit ticket. */
.iplan__sessions[b-u3gsc8err3] { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.iplan__session[b-u3gsc8err3] {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border, #d6dbe4); border-radius: 999px;
    color: var(--color-text-secondary); font-size: var(--text-sm);
}
.iplan__session.is-done[b-u3gsc8err3] { color: var(--color-text-primary); }
.iplan__session.is-current[b-u3gsc8err3] { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.iplan__session-edit[b-u3gsc8err3] { font-size: var(--text-sm); }
/* /Components/Pages/Intervention/InterventionTaught.razor.rz.scp.css */
/* IS-AP4 - the "Mark it taught" screen's OWN scoped layout. Borrows only the global design system
   (var(--color-*), .ivaro-card, .btn-cta) - never another component's scoped classes. */

.itaught[b-4qg6inpdmz] {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-6);
}

.itaught__header[b-4qg6inpdmz] { margin-bottom: var(--space-6); }

.itaught__back[b-4qg6inpdmz] {
    display: inline-block;
    font-size: var(--text-sm);
    color: var(--color-secondary);
    text-decoration: none;
    margin-bottom: var(--space-2);
}

.itaught__back:hover[b-4qg6inpdmz] { text-decoration: underline; }

.itaught__title[b-4qg6inpdmz] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0;
}

.itaught__plan[b-4qg6inpdmz] {
    font-size: var(--text-xl);
    margin: 0 0 var(--space-1);
    color: var(--color-text-primary);
}

.itaught__muted[b-4qg6inpdmz] {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.itaught__note[b-4qg6inpdmz] {
    padding: var(--space-3);
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface-alt, #f4f6fa);
    color: var(--color-text-primary);
}

.itaught__field[b-4qg6inpdmz] {
    border: 0;
    padding: 0;
    margin: var(--space-5) 0 0;
}

.itaught__label[b-4qg6inpdmz] {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
    padding: 0;
}

.itaught__students[b-4qg6inpdmz] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-2);
}

.itaught__students label[b-4qg6inpdmz] { display: flex; gap: var(--space-2); align-items: center; }

.itaught__choices[b-4qg6inpdmz] { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.itaught__chip[b-4qg6inpdmz] {
    display: inline-flex;
    gap: var(--space-1);
    align-items: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
}

.itaught__chip.is-on[b-4qg6inpdmz] { border-color: var(--color-secondary); background: var(--color-surface-alt, #f4f6fa); }

.itaught__big[b-4qg6inpdmz] { display: grid; gap: var(--space-3); }

.itaught__bigchoice[b-4qg6inpdmz] {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
}

.itaught__bigchoice.is-on[b-4qg6inpdmz] { border-color: var(--color-secondary); background: var(--color-surface-alt, #f4f6fa); }

.itaught__bigtitle[b-4qg6inpdmz] { font-weight: 600; font-size: var(--text-lg, 1.125rem); }

.itaught__actions[b-4qg6inpdmz] { margin-top: var(--space-6); display: flex; gap: var(--space-3); }

/* IS-AP19 - per-session notes (multi-session plans only). */
.itaught__note-row[b-4qg6inpdmz] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.itaught__note-name[b-4qg6inpdmz] { font-weight: 600; }
.itaught__note-row button.itaught__chip[b-4qg6inpdmz] { cursor: pointer; font: inherit; }
/* /Components/Pages/Lessons/GuidedLesson.razor.rz.scp.css */
/* Single container width used by every stage — requirements form AND the
   post-generate Review/Deliverables pages. Previously the form sat at 800px
   while Stage 1 widened to 1200px via a :has() override; both now share
   1200px so the form page no longer feels narrower than the review page.
   LP WO-71 (teacher note 3): the width is now min(1440px, 94vw) on all three lesson pages — she had to zoom in. */
.guided-lesson[b-0u4uf4u3kb] {
    padding: var(--space-6);
    max-width: min(1440px, 94vw);
    margin: 0 auto;
}

/* ─── SP-02 Iteration 2 accordion (replaces wizard-step gating) ────────
   The Plan step is now one scrollable page; each former wizard step is an
   accordion card here. All cards default expanded. Pattern matches the
   result page's day card to keep visual continuity. */

.guided-lesson__accordion[b-0u4uf4u3kb] {
    margin-bottom: var(--space-4);
    overflow: hidden;
}

.guided-lesson__accordion--open[b-0u4uf4u3kb] {
    border-color: var(--color-primary);
}

.guided-lesson__accordion-toggle[b-0u4uf4u3kb] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4) var(--space-5);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}
.guided-lesson__accordion-toggle:hover[b-0u4uf4u3kb] {
    background: var(--color-surface-2);
}

.guided-lesson__accordion-chevron[b-0u4uf4u3kb] {
    transition: transform 0.18s ease;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}
.guided-lesson__accordion-chevron--open[b-0u4uf4u3kb] {
    transform: rotate(90deg);
    color: var(--color-primary);
}

.guided-lesson__accordion-title[b-0u4uf4u3kb] {
    flex: 1;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-text-primary);
}

.guided-lesson__accordion-hint[b-0u4uf4u3kb] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.guided-lesson__accordion-body[b-0u4uf4u3kb] {
    padding: var(--space-5);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Result-page bridge: only renders when a prior generation produced a
   lesson; lets the teacher round-trip back to /lesson/guided/result after
   editing the form here. */
.guided-lesson__bridge-nav[b-0u4uf4u3kb] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-4);
}

.guided-lesson__bridge-btn[b-0u4uf4u3kb] {
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    padding: var(--space-2) var(--space-4);
    font-weight: 600;
    cursor: pointer;
}
.guided-lesson__bridge-btn:hover[b-0u4uf4u3kb] {
    background: var(--color-surface-2);
}

/* ─── Form fields ───────────────────────────────────────────── */

.guided-lesson__field[b-0u4uf4u3kb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.guided-lesson__label[b-0u4uf4u3kb] {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.guided-lesson__sublabel[b-0u4uf4u3kb] {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

/* LP WO-42 (T10) — "Pre-selected from {class}: …" under the Differentiation sublabel. */
.guided-lesson__chip-note[b-0u4uf4u3kb] {
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.guided-lesson__optional[b-0u4uf4u3kb] {
    font-weight: 400;
    color: var(--color-text-muted);
}

/* ─── F5: class-derived (linked) Grade / Subject field ──────────
   Shown in place of the chip selector while a class is selected. Reads as a
   positive linkage (teal accent, the "class-owned" cue), NOT a warning, and
   explains WHY the value is fixed plus how to release it. */
.guided-lesson__linked[b-0u4uf4u3kb] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--color-accent-pale);
    border: 1px solid rgba(46, 170, 138, 0.25);
    border-left: 3px solid var(--color-accent);
    border-radius: 6px;
    padding: var(--space-3) var(--space-4);
}

/* LP WO-18 — a multi-subject class: still the linked (class-owned) panel, with the class's own subject chips
   inside it, so the choice reads as "which of this class's subjects?" rather than an exit from the class. */
.guided-lesson__linked--choice[b-0u4uf4u3kb] {
    gap: var(--space-2);
}

.guided-lesson__linked-value[b-0u4uf4u3kb] {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--text-base);
}

.guided-lesson__linked-note[b-0u4uf4u3kb] {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

/* Inline text button — the "switch to Custom Lesson Plan" unlink. */
.guided-lesson__linkbtn[b-0u4uf4u3kb] {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--color-secondary-text);   /* PLAT-WO-15i: was --color-secondary (4.03:1); 5.56:1 on the linked note's --color-accent-pale */
    cursor: pointer;
    text-decoration: underline;
}

.guided-lesson__linkbtn:hover[b-0u4uf4u3kb] {
    color: var(--color-primary);   /* PLAT-WO-15i: was --color-secondary-light (3.02:1); 10.17:1 */
}

.guided-lesson__input[b-0u4uf4u3kb] {
    border: 1.5px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
    font-family: var(--font-body);
    color: var(--color-text-primary);
    background: var(--color-surface);
    width: 100%;
    transition: border-color 0.15s ease;
}
.guided-lesson__input:focus[b-0u4uf4u3kb] {
    outline: none;
    border-color: var(--color-secondary);
}

/* ─── Day tabs ──────────────────────────────────────────────── */

.guided-lesson__day-tabs[b-0u4uf4u3kb] {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-5);
}

/* PLAT-WO-15f T4 — the tablist wraps only the day tabs; its box takes no part in layout, so the strip is unchanged. */
.guided-lesson__day-tablist[b-0u4uf4u3kb] { display: contents; }

/* PLAT-WO-15f T4 — the page's h1, for screen readers only (the page shows no title of its own). */
.guided-lesson__sr-title[b-0u4uf4u3kb] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.guided-lesson__day-tab[b-0u4uf4u3kb] {
    padding: var(--space-2) var(--space-5);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;           /* overlaps the container border */
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.guided-lesson__day-tab:hover[b-0u4uf4u3kb] {
    color: var(--color-text-secondary);
    border-bottom-color: var(--color-border);
}

.guided-lesson__day-tab--active[b-0u4uf4u3kb] {
    color: var(--color-primary);
    font-weight: 600;
    border-bottom-color: var(--color-accent);
    background: transparent;
}

/* ✕ remove button inside tab */
.guided-lesson__day-tab-remove[b-0u4uf4u3kb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: var(--space-2);
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    color: var(--color-text-muted);
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
    vertical-align: middle;
    cursor: pointer;
}

/* Show × when hovering the tab */
.guided-lesson__day-tab:hover .guided-lesson__day-tab-remove[b-0u4uf4u3kb],
.guided-lesson__day-tab--active .guided-lesson__day-tab-remove[b-0u4uf4u3kb] {
    opacity: 1;
}

.guided-lesson__day-tab-remove:hover[b-0u4uf4u3kb] {
    background: rgba(192, 57, 43, 0.12);
    color: var(--color-error);
}

/* + add-day ghost tab */
.guided-lesson__day-tab--add[b-0u4uf4u3kb] {
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    font-weight: 400;
    padding: var(--space-2) var(--space-3);
    border-bottom-color: transparent !important;
}
.guided-lesson__day-tab--add:hover[b-0u4uf4u3kb] {
    color: var(--color-accent);
    border-bottom-color: transparent !important;
}

/* ─── Day panel — content area below the tab strip ──────────── */

.guided-lesson__day-panel[b-0u4uf4u3kb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* ─── Generate area ─────────────────────────────────────────── */

.guided-lesson__generate[b-0u4uf4u3kb] {
    width: 100%;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-lg);
}

.guided-lesson__error[b-0u4uf4u3kb] {
    background: #FEF2F2;
    border-left: 3px solid var(--color-error);
    border-radius: 0 6px 6px 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    color: var(--color-error);
}

/* LP WO-20 — a field Generate found missing, marked where it sits. tabindex="-1" lets focus land on it. */
.guided-lesson__field--missing[b-0u4uf4u3kb] {
    border-left: 3px solid var(--color-error);
    padding-left: var(--space-3);
}

.guided-lesson__field--missing:focus[b-0u4uf4u3kb] {
    outline: none;
}

.guided-lesson__field-missing[b-0u4uf4u3kb] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-error);
}

.guided-lesson__day-tab--missing[b-0u4uf4u3kb] {
    color: var(--color-error);
}

/* ============================================================
   OUTPUT — preserved class names referenced by SCREEN B markup
   and by the @code SaveState handlers.
   ============================================================ */

.guided-lesson__output[b-0u4uf4u3kb] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.guided-lesson__output--visible[b-0u4uf4u3kb] {
    opacity: 1;
    transform: translateY(0);
}

/* Save button states */

@keyframes gl-spin-b-0u4uf4u3kb { to { transform: rotate(360deg); } }

/* Anonymous Save Banner */

@keyframes gl-slide-down-b-0u4uf4u3kb {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Stage 1: Review (plan + mod sidebar) ──────────────── */

@media (max-width: 900px) {
    
    
}

/* ─── Per-day sections (Step 2) ───────────────────────────── */

.guided-lesson__day-section[b-0u4uf4u3kb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-bottom: var(--space-5);
    border-bottom: 1px dashed var(--color-border);
}
.guided-lesson__day-section:last-child[b-0u4uf4u3kb] {
    border-bottom: none;
    padding-bottom: 0;
}

.guided-lesson__day-section-title[b-0u4uf4u3kb] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.guided-lesson__field-hint[b-0u4uf4u3kb] {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-3) 0;
}

/* ─── Step 3 review grid ─────────────────────────────────── */

.guided-lesson__review-grid[b-0u4uf4u3kb] {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-5) 0;
}

.guided-lesson__review-key[b-0u4uf4u3kb] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.guided-lesson__review-value[b-0u4uf4u3kb] {
    margin: 0;
    color: var(--color-text-primary);
}

.guided-lesson__review-day-list[b-0u4uf4u3kb] {
    list-style: none;
    margin: 0 0 var(--space-5) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.guided-lesson__review-day[b-0u4uf4u3kb] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
}

.guided-lesson__review-day-detail[b-0u4uf4u3kb] {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

/* ─── Step 4 Phase-2 skip grid + stale indicator ─────────── */

.guided-lesson__skip-grid[b-0u4uf4u3kb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.guided-lesson__skip-row[b-0u4uf4u3kb] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
}

.guided-lesson__skip-row:hover[b-0u4uf4u3kb] {
    background: var(--color-surface-2);
}

.guided-lesson__skip-checkbox[b-0u4uf4u3kb] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    margin-top: 2px;
    cursor: pointer;
}

.guided-lesson__skip-hint[b-0u4uf4u3kb] {
    display: block;
    font-size: var(--text-base);
    color: var(--color-text-muted);
    font-weight: 400;
}

.guided-lesson__stale-indicator[b-0u4uf4u3kb] {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--color-warning, #d97706);
    color: white;
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* F5b — standards ↔ grade/state mismatch nudge. Amber, matching the F3
   "standards changed" nudge family in ObjectiveChipPanel (same mechanism,
   different section). Non-blocking: it informs and offers Clear / Keep. */
.guided-lesson__mismatch[b-0u4uf4u3kb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
    flex-wrap: wrap;
    margin-top: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background-color: #fffbeb; /* amber-50 */
    border: 1px solid #fde68a; /* amber-200 */
    border-radius: var(--radius-md, 0.5rem);
    color: #78350f; /* amber-900 */
    font-size: var(--text-base, 1rem);
    line-height: 1.45;
}

.guided-lesson__mismatch-text[b-0u4uf4u3kb] {
    flex: 1 1 260px;
}

.guided-lesson__mismatch-actions[b-0u4uf4u3kb] {
    display: inline-flex;
    gap: var(--space-2, 0.5rem);
    flex-shrink: 0;
}

.guided-lesson__mismatch-btn[b-0u4uf4u3kb] {
    appearance: none;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #1f2937;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-sm, 0.375rem);
    font-size: var(--text-base, 1rem);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.guided-lesson__mismatch-btn:hover[b-0u4uf4u3kb] {
    background-color: #f9fafb;
}

/* Clear is primary (dark), but Keep is a first-class, non-destructive choice —
   not styled as a warning-dismiss. Both read as legitimate. */
.guided-lesson__mismatch-btn--primary[b-0u4uf4u3kb] {
    background-color: #1e293b;
    border-color: #1e293b;
    color: #ffffff;
}

.guided-lesson__mismatch-btn--primary:hover[b-0u4uf4u3kb] {
    background-color: #0f172a;
}

/* WO-36/WO-39 - the topic message under the Topic field. A blocked topic reuses .guided-lesson__error above. */
.guided-lesson__topic-note-text[b-0u4uf4u3kb] {
    margin: 0;
}

/* LP WO-83 (Unit 2) - the setup screen reads at 16 px. These pickers are shared with other pages, so their own CSS is
   untouched; the wizard raises them here, scoped to .guided-lesson. */
.guided-lesson[b-0u4uf4u3kb]  .class-ctx__chip,
.guided-lesson[b-0u4uf4u3kb]  .class-ctx__empty,
.guided-lesson[b-0u4uf4u3kb]  .gcs__chip,
.guided-lesson[b-0u4uf4u3kb]  .gcs__chip--sub,
.guided-lesson[b-0u4uf4u3kb]  .gcs__chip--other,
.guided-lesson[b-0u4uf4u3kb]  .scs__chip,
.guided-lesson[b-0u4uf4u3kb]  .scs__chip--sub,
.guided-lesson[b-0u4uf4u3kb]  .scs__chip--other,
.guided-lesson[b-0u4uf4u3kb]  .scs__other-input,
.guided-lesson[b-0u4uf4u3kb]  .scs__other-result,
.guided-lesson[b-0u4uf4u3kb]  .subc__chip {
    font-size: var(--text-base);
}

.guided-lesson[b-0u4uf4u3kb]  .class-ctx__chip-meta {
    font-size: var(--text-sm);
}
/* /Components/Pages/Lessons/GuidedLessonResult.razor.rz.scp.css */
/* GuidedLessonResult.razor.css — scoped styles for the extracted SP-02
   result page. Duplicates a handful of class definitions from
   GuidedLesson.razor.css (Blazor scoped CSS won't reach across components,
   and we kept the same `guided-lesson__*` namespace for visual continuity). */

.guided-lesson--result[b-xizdgsuqqo] {
    padding: var(--space-6);
    max-width: min(1440px, 94vw);
    margin: 0 auto;
}

.guided-lesson__result-empty[b-xizdgsuqqo] {
    max-width: 640px;
    margin: var(--space-12) auto;
    text-align: center;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
}

/* SP-06 Phase A — skeleton shown while a fresh page load redeems the lesson id
   against the API (refresh / reconnect / pasted URL). */
.guided-lesson__result-loading[b-xizdgsuqqo] {
    max-width: 640px;
    margin: var(--space-12) auto;
    text-align: center;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
}

.guided-lesson__result-loading-spinner[b-xizdgsuqqo] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border, #d0d0d0);
    border-top-color: var(--color-primary, #4f46e5);
    border-radius: 50%;
    animation: guided-lesson__result-spin-b-xizdgsuqqo 0.8s linear infinite;
}

@keyframes guided-lesson__result-spin-b-xizdgsuqqo {
    to { transform: rotate(360deg); }
}

.guided-lesson__result-wrap[b-xizdgsuqqo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.guided-lesson__result-head[b-xizdgsuqqo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.guided-lesson__result-title[b-xizdgsuqqo] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-primary);
    margin: 0;
}

/* WO-33 T3 — "(preview)" sits lighter than the title it qualifies. */
.guided-lesson__result-title-note[b-xizdgsuqqo] {
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--color-text-secondary);
}

.guided-lesson__result-actions[b-xizdgsuqqo] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.guided-lesson__result-edit[b-xizdgsuqqo],
.guided-lesson__result-start-over[b-xizdgsuqqo] {
    background: transparent;
    border: none;
    color: var(--color-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    padding: var(--space-1) 0;
}
.guided-lesson__result-edit:hover[b-xizdgsuqqo],
.guided-lesson__result-start-over:hover[b-xizdgsuqqo] {
    text-decoration: underline;
}

.guided-lesson__result-phase2-bar[b-xizdgsuqqo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-accent);
    border-radius: 8px;
    background: var(--color-accent-pale);
}

/* Bottom Get Deliverables bar — top margin to separate it from the day
   accordions above and the button visually anchored to the right.
   Added per the May 2026 change list (item #4); since LP WO-20 it is the
   only Get Deliverables bar and carries the explanation and the per-day
   skip checkboxes that used to live in the top bar. */
.guided-lesson__result-phase2-bar--bottom[b-xizdgsuqqo] {
    margin-top: var(--space-5);
    align-items: flex-end;
}

.guided-lesson__result-phase2-info[b-xizdgsuqqo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.guided-lesson__result-phase2-bar--bottom .guided-lesson__result-phase2-info[b-xizdgsuqqo] {
    align-self: stretch;
}

.guided-lesson__sublabel[b-xizdgsuqqo] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.guided-lesson__skip-grid[b-xizdgsuqqo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.guided-lesson__skip-row[b-xizdgsuqqo] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    cursor: pointer;
}
.guided-lesson__skip-row:hover[b-xizdgsuqqo] {
    background: var(--color-surface-2);
}

.guided-lesson__skip-checkbox[b-xizdgsuqqo] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    margin-top: 2px;
    cursor: pointer;
}

.guided-lesson__skip-hint[b-xizdgsuqqo] {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: 400;
}

.guided-lesson__stale-indicator[b-xizdgsuqqo] {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--color-warning, #d97706);
    color: white;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.guided-lesson__error[b-xizdgsuqqo] {
    background: #FEF2F2;
    border-left: 3px solid var(--color-error);
    border-radius: 0 6px 6px 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-error);
}

.guided-lesson__generate[b-xizdgsuqqo] {
    width: 100%;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-base);
}

.guided-lesson__output[b-xizdgsuqqo] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.guided-lesson__output--visible[b-xizdgsuqqo] {
    opacity: 1;
    transform: translateY(0);
}

/* SP-02 Iteration 2 polish — page-level unit objective for multi-day
   lessons. Sits above the day cards as a quiet anchor; subhead-scale
   so it doesn't dominate the page. */
.guided-lesson__result-unit-objective[b-xizdgsuqqo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
}

.guided-lesson__result-unit-objective-eyebrow[b-xizdgsuqqo] {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--color-secondary);
}

.guided-lesson__result-unit-objective-text[b-xizdgsuqqo] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.35;
    color: var(--color-primary);
    margin: 0;
    font-weight: 400;
}

/* SP-02 Iteration 2 polish — post-Phase-2 footer with primary Review &
   Export CTA + small Re-generate link. Sequenced after the lesson
   display so the teacher reads top-down: objective → days → review. */
.guided-lesson__result-footer[b-xizdgsuqqo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.guided-lesson__result-review-btn[b-xizdgsuqqo] {
    width: 100%;
    max-width: 640px;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-lg);
    font-weight: 600;
}
/* /Components/Pages/Lessons/LessonStudio.razor.rz.scp.css */
.lesson-studio__loading[b-a9nt9oqpy6] {
    max-width: 640px;
    margin: var(--space-12) auto;
    text-align: center;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
}

.lesson-studio__spinner[b-a9nt9oqpy6] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: lesson-studio-spin-b-a9nt9oqpy6 0.8s linear infinite;
}

@keyframes lesson-studio-spin-b-a9nt9oqpy6 {
    to { transform: rotate(360deg); }
}

/* LP WO-41 — the "your packet has downloaded" notice above the list. */
.lesson-studio__notice[b-a9nt9oqpy6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-success);
    border-radius: 8px;
    color: var(--color-text-primary);
}

.lesson-studio__notice-text[b-a9nt9oqpy6] {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.lesson-studio__notice-dismiss[b-a9nt9oqpy6] {
    flex: none;
    min-width: 44px;
    min-height: 44px;
    margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0 0;
    background: transparent;
    border: 0;
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* LP WO-71 Unit 1 — "How a lesson comes together": the welcome band above the list. Tokens only. The shell's own
   "New Lesson Plan" is the one way in; the band carries no buttons or links (WO-94). */
.lesson-studio__welcome[b-a9nt9oqpy6] {
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-5, var(--space-4));
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
}

.lesson-studio__welcome-title[b-a9nt9oqpy6] {
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
    color: var(--color-text-primary);
}

.lesson-studio__steps[b-a9nt9oqpy6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6, var(--space-4));
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.lesson-studio__step[b-a9nt9oqpy6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    min-width: 0;
}

.lesson-studio__step-number[b-a9nt9oqpy6] {
    font-size: var(--text-xl);
    color: var(--color-primary);
}

.lesson-studio__step-text[b-a9nt9oqpy6] {
    font-size: var(--text-base);
    font-weight: 600;
}

.lesson-studio__step-note[b-a9nt9oqpy6] {
    flex-basis: 100%;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.lesson-studio__welcome--slim[b-a9nt9oqpy6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

.lesson-studio__welcome-lead[b-a9nt9oqpy6] {
    font-weight: 600;
}

.lesson-studio__welcome-inline[b-a9nt9oqpy6] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    color: var(--color-text-secondary);
}


/* LP WO-98 Unit 4 — "Free trial · ends October 29": a small chip above the list when her trial has no number to show. */
.lesson-studio__trial-chip[b-a9nt9oqpy6] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    width: fit-content;
    margin: 0 0 var(--space-3);
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
}
/* /Components/Pages/Lessons/ReviewDeliverables.razor.rz.scp.css */
/* ReviewDeliverables.razor.css — LP WO-40. Scoped, tokens only. */

.review-deliverables[b-dosomvs1kb] {
    max-width: min(1440px, 94vw);
    margin: 0 auto;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.review-deliverables__state[b-dosomvs1kb] {
    max-width: 640px;
    margin: var(--space-12) auto;
    text-align: center;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
}

.review-deliverables__spinner[b-dosomvs1kb] {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: review-deliverables-spin-b-dosomvs1kb 0.8s linear infinite;
}

@keyframes review-deliverables-spin-b-dosomvs1kb {
    to { transform: rotate(360deg); }
}

.review-deliverables__back[b-dosomvs1kb] {
    align-self: flex-start;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

.review-deliverables__back:hover[b-dosomvs1kb] {
    text-decoration: underline;
}

.review-deliverables__title[b-dosomvs1kb] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--color-primary);
    margin: 0;
}

.review-deliverables__summary[b-dosomvs1kb] {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
}

.review-deliverables__empty[b-dosomvs1kb] {
    color: var(--color-text-secondary);
    margin: 0;
}

.review-deliverables__list[b-dosomvs1kb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.review-deliverables__item[b-dosomvs1kb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.review-deliverables__item + .review-deliverables__item[b-dosomvs1kb] {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.review-deliverables__item-head[b-dosomvs1kb] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
}

.review-deliverables__item-title[b-dosomvs1kb] {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.review-deliverables__item-use[b-dosomvs1kb] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
}

.review-deliverables__item-where[b-dosomvs1kb],
.review-deliverables__muted[b-dosomvs1kb] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.review-deliverables__toggle[b-dosomvs1kb] {
    align-self: flex-start;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.review-deliverables__text[b-dosomvs1kb],
.review-deliverables__note[b-dosomvs1kb] {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-secondary);
    white-space: pre-line;
}

@media (max-width: 600px) {
    .review-deliverables[b-dosomvs1kb] {
        padding: var(--space-4);
    }
}
/* /Components/Pages/Materials/MaterialInventory.razor.rz.scp.css */
.mat-inv[b-n0taoov8u0] {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--space-6);
}

.mat-inv__header[b-n0taoov8u0] {
    margin-bottom: var(--space-6);
}

.mat-inv__title[b-n0taoov8u0] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.mat-inv__sub[b-n0taoov8u0] {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    max-width: 62ch;
}

/* Sticky toolbar with the running count + save. */
.mat-inv__toolbar[b-n0taoov8u0] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.mat-inv__summary[b-n0taoov8u0] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.mat-inv__toolbar-actions[b-n0taoov8u0] {
    display: inline-flex;
    gap: var(--space-2);
}

.mat-inv__save[b-n0taoov8u0] { width: auto; min-width: 120px; }
.mat-inv__reset[b-n0taoov8u0] { width: auto; }

.mat-inv__group[b-n0taoov8u0] {
    margin-bottom: var(--space-5);
}

.mat-inv__group-title[b-n0taoov8u0] {
    font-size: var(--text-xl);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
}

.mat-inv__group-sub[b-n0taoov8u0] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-4);
}

.mat-inv__list[b-n0taoov8u0] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mat-inv__row[b-n0taoov8u0] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: 8px;
    transition: background 0.12s ease, opacity 0.12s ease;
}

.mat-inv__row:hover[b-n0taoov8u0] { background: var(--color-surface-2); }

/* WO-21 — the three states. "Don't have" is an answer: dimmed, solid. "Not answered" is the absence of one:
   full strength, but a dashed box and a dashed pill, so it can never be mistaken for "Don't have". */
.mat-inv__row--dont[b-n0taoov8u0] { opacity: 0.55; }
.mat-inv__row--dont:hover[b-n0taoov8u0] { opacity: 0.8; }

/* Checkbox styled as a ticked box (teal when on — the "toggle-on" logo color). */
.mat-inv__check[b-n0taoov8u0] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-top: 2px;
}

.mat-inv__check input[b-n0taoov8u0] {
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.mat-inv__check-box[b-n0taoov8u0] {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid var(--color-border);
    background: var(--color-surface);
    transition: background 0.12s ease, border-color 0.12s ease;
}

.mat-inv__check input:checked + .mat-inv__check-box[b-n0taoov8u0] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.mat-inv__check input:focus-visible + .mat-inv__check-box[b-n0taoov8u0] {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.mat-inv__row-text[b-n0taoov8u0] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.mat-inv__name[b-n0taoov8u0] {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-primary);
}

.mat-inv__desc[b-n0taoov8u0] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.mat-inv__state[b-n0taoov8u0] {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.mat-inv__row--dont .mat-inv__state[b-n0taoov8u0] {
    color: var(--color-text-muted);
}

.mat-inv__row--unknown .mat-inv__check-box[b-n0taoov8u0] {
    border-style: dashed;
    background: transparent;
}

.mat-inv__row--unknown .mat-inv__state[b-n0taoov8u0] {
    color: var(--color-text-muted);
    font-weight: 500;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0;
    padding: 1px 8px;
    border: 1px dashed var(--color-border);
    border-radius: 999px;
}

.mat-inv__row--basic .mat-inv__state[b-n0taoov8u0] {
    color: var(--color-text-secondary);
}

.mat-inv__basic[b-n0taoov8u0] {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 0 6px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface-2);
    border-radius: 4px;
    vertical-align: middle;
}

.mat-inv__row-actions[b-n0taoov8u0] {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.mat-inv__dont[b-n0taoov8u0],
.mat-inv__undo[b-n0taoov8u0] {
    background: none;
    border: none;
    padding: 2px 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-secondary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.mat-inv__dont:focus-visible[b-n0taoov8u0],
.mat-inv__undo:focus-visible[b-n0taoov8u0] {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
    border-radius: 3px;
}

.mat-inv__error[b-n0taoov8u0] {
    color: var(--color-error);
    font-size: var(--text-sm);
}

/* Loading skeleton */
.mat-inv__skeleton[b-n0taoov8u0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mat-inv__skeleton-row[b-n0taoov8u0] {
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-3) 37%, var(--color-surface-2) 63%);
    background-size: 400% 100%;
    animation: mat-inv-shimmer-b-n0taoov8u0 1.4s ease infinite;
}

@keyframes mat-inv-shimmer-b-n0taoov8u0 {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (max-width: 640px) {
    .mat-inv[b-n0taoov8u0] { padding: var(--space-4); }
    .mat-inv__toolbar[b-n0taoov8u0] { flex-direction: column; align-items: stretch; }
    .mat-inv__toolbar-actions[b-n0taoov8u0] { justify-content: flex-end; }
    .mat-inv__row[b-n0taoov8u0] { flex-wrap: wrap; }
    .mat-inv__row-actions[b-n0taoov8u0] { margin-left: calc(20px + var(--space-3)); }
}
/* /Components/Pages/Profile/TeacherProfile.razor.rz.scp.css */
.teacher-profile[b-y4g9ggm2cg] {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-6, 1.5rem);
}

.teacher-profile__header[b-y4g9ggm2cg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
    margin-bottom: var(--space-5, 1.25rem);
}

.teacher-profile__title[b-y4g9ggm2cg] {
    margin: 0;
    font-family: var(--font-display, inherit);
    color: var(--color-primary, #1B3A6B);
    font-size: 1.6rem;
}

.teacher-profile__sub[b-y4g9ggm2cg] {
    margin: 4px 0 0;
    color: var(--color-text-muted, #6b7280);
}

.teacher-profile__error[b-y4g9ggm2cg] {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    border-radius: 8px;
    background: #fdecec;
    color: #a12a2a;
    margin-bottom: var(--space-4, 1rem);
}

.teacher-profile__card[b-y4g9ggm2cg] {
    padding: var(--space-5, 1.25rem);
}

.teacher-profile__grid[b-y4g9ggm2cg] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
}

.teacher-profile__row[b-y4g9ggm2cg] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: var(--space-4, 1rem);
    align-items: start;
}

.teacher-profile__key[b-y4g9ggm2cg] {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.9rem;
}

.teacher-profile__val[b-y4g9ggm2cg] {
    margin: 0;
    color: var(--color-primary, #1B3A6B);
}

.teacher-profile__chips[b-y4g9ggm2cg] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
}

.teacher-profile__chip[b-y4g9ggm2cg] {
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(41, 121, 204, 0.1);
    color: var(--color-secondary-text); /* PLAT-WO-15a (go-live #6): was --color-secondary, 3.95:1 on this fill; now 5.45:1 */
    font-size: 0.85rem;
    font-weight: 600;
}

.teacher-profile__muted[b-y4g9ggm2cg] {
    color: var(--color-text-muted, #6b7280);
}

.teacher-profile__skeleton[b-y4g9ggm2cg] {
    height: 320px;
    border-radius: 12px;
    background: linear-gradient(90deg, #eef1f6 25%, #e2e7f0 37%, #eef1f6 63%);
    background-size: 400% 100%;
    animation: teacher-profile-shimmer-b-y4g9ggm2cg 1.2s ease-in-out infinite;
}

@keyframes teacher-profile-shimmer-b-y4g9ggm2cg {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

.teacher-profile__empty[b-y4g9ggm2cg] {
    text-align: center;
    padding: var(--space-8, 2rem) var(--space-5, 1.25rem);
}

.teacher-profile__empty-art[b-y4g9ggm2cg] {
    font-size: 2.5rem;
}

.teacher-profile__empty-title[b-y4g9ggm2cg] {
    margin: var(--space-3, 0.75rem) 0 var(--space-2, 0.5rem);
    color: var(--color-primary, #1B3A6B);
}

.teacher-profile__empty-text[b-y4g9ggm2cg] {
    margin: 0 auto var(--space-4, 1rem);
    max-width: 420px;
    color: var(--color-text-muted, #6b7280);
}

@media (max-width: 560px) {
    .teacher-profile__row[b-y4g9ggm2cg] {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

/* PLAT-WO-11b T1.6 - the Name row's in-place change. Tokens only (the field is the name step's own box). */

.teacher-profile__name-line[b-y4g9ggm2cg] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.teacher-profile__change[b-y4g9ggm2cg] {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.teacher-profile__change:hover[b-y4g9ggm2cg] { border-color: var(--color-secondary); }

.teacher-profile__change:focus-visible[b-y4g9ggm2cg],
.teacher-profile__name-input:focus-visible[b-y4g9ggm2cg] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.teacher-profile__name-edit[b-y4g9ggm2cg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 360px;
}

.teacher-profile__name-label[b-y4g9ggm2cg] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.teacher-profile__name-input[b-y4g9ggm2cg] {
    width: 100%;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
}

.teacher-profile__name-input[aria-invalid="true"][b-y4g9ggm2cg] { border-color: var(--color-error); }

.teacher-profile__name-error[b-y4g9ggm2cg] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-error);
}

.teacher-profile__name-actions[b-y4g9ggm2cg] {
    display: flex;
    gap: var(--space-2);
}

.teacher-profile__saved[b-y4g9ggm2cg] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
/* /Components/Pages/Testing/SchoologyTest.razor.rz.scp.css */
.sch-test[b-mjaml67zp5] {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-6);
}

.sch-test__dev-banner[b-mjaml67zp5] {
    background: var(--color-secondary-pale);
    border: 1px solid var(--color-secondary);
    border-left: 4px solid var(--color-secondary);
    border-radius: 8px;
    padding: var(--space-3) var(--space-4);
    color: var(--color-text-primary);
    margin-bottom: var(--space-6);
}
.sch-test__dev-banner-sub[b-mjaml67zp5] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

.sch-test__title[b-mjaml67zp5] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--color-text-primary);
    margin: 0;
}
.sch-test__subtitle[b-mjaml67zp5] {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    margin: var(--space-2) 0 var(--space-6);
}

.sch-test__card[b-mjaml67zp5] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: var(--space-6);
    margin-bottom: var(--space-5);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.sch-test__card-title[b-mjaml67zp5] {
    font-size: var(--text-xl);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4);
}

.sch-test__label[b-mjaml67zp5] {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: var(--space-3) 0 var(--space-1);
}
.sch-test__input[b-mjaml67zp5] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
    font-family: var(--font-body);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    box-sizing: border-box;
}
.sch-test__input:focus[b-mjaml67zp5] {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(27,58,107,0.12);
}

.prior-knowledge-note[b-mjaml67zp5] {
    background: #FFFBF0;
    border-left: 3px solid #F0C040;
    border-radius: 0 6px 6px 0;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-4);
}

.sch-test__privacy-note[b-mjaml67zp5] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-style: italic;
    margin-top: var(--space-3);
}

.sch-test__step-row[b-mjaml67zp5] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.sch-test__status[b-mjaml67zp5] {
    width: 24px;
    font-size: var(--text-lg);
    flex-shrink: 0;
}
.sch-test__step-btn[b-mjaml67zp5] {
    flex: 1;
    max-width: 360px;
}
.sch-test__step-btn:disabled[b-mjaml67zp5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.sch-test__instructions[b-mjaml67zp5] {
    margin-top: var(--space-2);
    padding-left: 36px;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.sch-test__check-verifier[b-mjaml67zp5] {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    border-radius: 6px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    cursor: pointer;
    margin-top: var(--space-3);
}
.sch-test__check-verifier:hover[b-mjaml67zp5] {
    border-color: var(--color-text-muted);
    color: var(--color-text-primary);
}

.sch-test__warning[b-mjaml67zp5] {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid rgba(230,81,0,0.25);
    border-radius: 6px;
    padding: var(--space-3);
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--text-sm);
}

.sch-test__api-btn-row[b-mjaml67zp5] {
    margin-top: var(--space-4);
}
.sch-test__api-btn-row button[b-mjaml67zp5] {
    max-width: 360px;
}
.sch-test__api-btn-row button:disabled[b-mjaml67zp5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.test-result[b-mjaml67zp5] {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: monospace;
    font-size: var(--text-sm);
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}
.test-result--success[b-mjaml67zp5] { border-left: 3px solid var(--color-accent); }
.test-result--error[b-mjaml67zp5]   { border-left: 3px solid var(--color-error); }
/* /Components/Shared/CcssAttribution.razor.rz.scp.css */
/* F9 item 6 — the CCSS licence notice. Quiet, but it must stay legible: the licence
   requires the notice on any public display, so it may not be hidden, clipped, or
   reduced to something a reader cannot make out. Muted, not invisible. */
.ccss-attribution[b-0qe07pco76] {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    line-height: 1.5;
    color: var(--color-text-muted);
}
/* /Components/Shared/Classes/ClassBasicsStep.razor.rz.scp.css */
/* PLAT-WO-09c T3.1 — name, grade, subjects. Tokens only. */

.cbasics[b-x2pjacknmy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.cbasics__field[b-x2pjacknmy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.cbasics__title[b-x2pjacknmy] {
    margin: 0;
}

.cbasics__title:focus[b-x2pjacknmy] { outline: none; }

.cbasics__sr[b-x2pjacknmy] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.cbasics__input[b-x2pjacknmy] {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-lg);
}

.cbasics__input:focus-visible[b-x2pjacknmy] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    border-color: var(--color-secondary);
}

.cbasics__error[b-x2pjacknmy] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-error);
}
/* /Components/Shared/Classes/ClassCopyReviewStep.razor.rz.scp.css */
/* PLAT-WO-09c T7.3 — what comes across to the copy. Tokens only. */

.creview[b-ezjr296wt2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.creview__title[b-ezjr296wt2] {
    margin: 0;
}

.creview__title:focus[b-ezjr296wt2] { outline: none; }

.creview__rows[b-ezjr296wt2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.creview__row[b-ezjr296wt2] {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-2);
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.creview__note[b-ezjr296wt2] {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.creview__error[b-ezjr296wt2] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-error);
}
/* /Components/Shared/Classes/ClassCopyStep.razor.rz.scp.css */
/* PLAT-WO-09c T7.2 — Copy a class: which class, which subjects, what to call it. Tokens only. */

.ccopy[b-rp2a6qilig] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.ccopy__title[b-rp2a6qilig] {
    margin: 0;
}

.ccopy__title:focus[b-rp2a6qilig] { outline: none; }

.ccopy__field[b-rp2a6qilig] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ccopy__label[b-rp2a6qilig] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.ccopy__input[b-rp2a6qilig] {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-lg);
}

.ccopy__input:focus-visible[b-rp2a6qilig] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    border-color: var(--color-secondary);
}

.ccopy__error[b-rp2a6qilig] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-error);
}
/* /Components/Shared/Classes/ClassDesignationsStep.razor.rz.scp.css */
/* PLAT-WO-09c T4.2 — designations. Tokens only; the chips are V2Setup's own, as a column of students under them. */

.cdes[b-ubm1kccuuz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.cdes__title[b-ubm1kccuuz] {
    margin: 0;
}

.cdes__title:focus[b-ubm1kccuuz] { outline: none; }

.cdes__empty[b-ubm1kccuuz] {
    margin: 0;
    padding: var(--space-6) var(--space-4);
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-2);
    text-align: center;
    color: var(--color-text-secondary);
}

/* PLAT-WO-11h T3 — the roster row above the chips: the count, and beside it the shared Paste a list / Upload a CSV. */
.cdes__roster[b-ubm1kccuuz] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.cdes__count[b-ubm1kccuuz] {
    display: flex;
    align-items: center;
    min-height: 48px;
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-text-primary);
}

.cdes__roster[b-ubm1kccuuz]  .cdes__adder { flex: 1 1 320px; }

.cdes__roster[b-ubm1kccuuz]  .cdes__adder .cstud__ways { justify-content: flex-end; }

.cdes__status[b-ubm1kccuuz] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.cdes__status:empty[b-ubm1kccuuz] { display: none; }

.cdes__picker[b-ubm1kccuuz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.cdes__legend[b-ubm1kccuuz] {
    padding: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-primary);
}

.cdes__tags[b-ubm1kccuuz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.cdes__tag[b-ubm1kccuuz] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.cdes__tag:hover[b-ubm1kccuuz] { border-color: var(--color-secondary); }

.cdes__tag--on[b-ubm1kccuuz] {
    border: 2px solid var(--color-accent);
    background: var(--color-accent-pale);
}

.cdes__tag-count[b-ubm1kccuuz] {
    min-width: 1.5em;
    padding: 0 var(--space-1);
    border-radius: 999px;
    background: var(--color-surface-3);
    font-size: var(--text-xs);
    text-align: center;
    color: var(--color-text-primary);
}

.cdes__more[b-ubm1kccuuz] {
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 0;
    background: none;
    color: var(--color-primary-light);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.cdes__tag:focus-visible[b-ubm1kccuuz],
.cdes__more:focus-visible[b-ubm1kccuuz],
.cdes__student:focus-visible[b-ubm1kccuuz] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* "Tagging: English learner" — the active designation, in words. */
.cdes__tagging[b-ubm1kccuuz] {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 6px 6px 0;
    background: var(--color-accent-pale);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

/* The page scrolls, not the list: a scroll box whose buttons are disabled until a designation is picked has nothing
   focusable inside it (axe: scrollable-region-focusable). */
.cdes__list[b-ubm1kccuuz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cdes__row[b-ubm1kccuuz] {
    position: relative;
    display: flex;
}

.cdes__student[b-ubm1kccuuz] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    text-align: left;
    cursor: pointer;
}

/* PLAT-WO-11h T3 — room at the top right for the ×, so it never covers the name or the chips. */
.cdes__student--removable[b-ubm1kccuuz] { padding-right: calc(var(--space-2) + 32px); }

.cdes__student:disabled[b-ubm1kccuuz] {
    cursor: default;
}

.cdes__student--on[b-ubm1kccuuz] {
    border: 2px solid var(--color-primary);
    background: var(--color-accent-pale);
}

/* The card's ×: its own button, a sibling of the tag toggle, at the card's top right. 32×32, above the 24 px minimum. */
.cdes__remove[b-ubm1kccuuz] {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.cdes__remove:hover:not(:disabled)[b-ubm1kccuuz] { background: var(--color-surface-2); color: var(--color-error); }

.cdes__remove:disabled[b-ubm1kccuuz] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cdes__remove:focus-visible[b-ubm1kccuuz] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* PLAT-WO-11j U2 — the "+" tile: the grid's last cell, sized like a student card; it opens Paste a list. */
.cdes__plus-row[b-ubm1kccuuz] { display: flex; }

.cdes__plus[b-ubm1kccuuz] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-2);
    color: var(--color-primary-light);
    cursor: pointer;
}

.cdes__plus:hover:not(:disabled)[b-ubm1kccuuz] { border-color: var(--color-secondary); background: var(--color-surface); }

.cdes__plus:disabled[b-ubm1kccuuz] {
    opacity: 0.5;
    cursor: not-allowed;
}

.cdes__plus:focus-visible[b-ubm1kccuuz] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.cdes__student-name[b-ubm1kccuuz] { font-weight: 600; overflow-wrap: anywhere; }

.cdes__chips[b-ubm1kccuuz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.cdes__chip[b-ubm1kccuuz] {
    padding: 2px var(--space-2);
    border-radius: 999px;
    background: var(--color-secondary-pale);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
}

.cdes__error[b-ubm1kccuuz] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-error);
}

.cdes__privacy[b-ubm1kccuuz] {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* PLAT-WO-11h T3 — on a phone the add controls sit under the count, from the left. */
@media (max-width: 640px) {
    .cdes__roster[b-ubm1kccuuz]  .cdes__adder .cstud__ways { justify-content: flex-start; }
}
/* /Components/Shared/Classes/ClassDoneStep.razor.rz.scp.css */
/* PLAT-WO-09c T5 — the saved screen: the owl, then two large cards. Tokens only. */

.cdone[b-k0vh7up2ky] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.cdone__line[b-k0vh7up2ky] {
    margin: 0;
}

.cdone__line:focus[b-k0vh7up2ky] { outline: none; }

.cdone__cards[b-k0vh7up2ky] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .cdone__cards[b-k0vh7up2ky] { grid-template-columns: minmax(0, 1fr); }
}

.cdone__card[b-k0vh7up2ky] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: var(--space-5);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-primary);
    text-align: center;
    text-decoration: none;
    transition: background 0.15s ease;
}

.cdone__card:hover[b-k0vh7up2ky] { background: var(--color-primary-pale); }

.cdone__card:focus-visible[b-k0vh7up2ky] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.cdone__card--primary[b-k0vh7up2ky] {
    background: var(--color-primary);
    color: white;
}

.cdone__card--primary:hover[b-k0vh7up2ky] { background: var(--color-primary-light); }

.cdone__card-title[b-k0vh7up2ky] {
    font-size: var(--text-xl);
    font-weight: 700;
}
/* /Components/Shared/Classes/ClassEntryStep.razor.rz.scp.css */
/* PLAT-WO-09c T7.1 — two large choices. Tokens only. */

.centry__title[b-4abd5px0tt] {
    margin: 0 0 var(--space-5);
}

.centry__title:focus[b-4abd5px0tt] { outline: none; }

.centry__cards[b-4abd5px0tt] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .centry__cards[b-4abd5px0tt] { grid-template-columns: minmax(0, 1fr); }
}

.centry__card[b-4abd5px0tt] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 140px;
    padding: var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.centry__card:hover[b-4abd5px0tt] {
    border-color: var(--color-secondary);
    background: var(--color-primary-pale);
}

.centry__card:focus-visible[b-4abd5px0tt] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.centry__card--copy[b-4abd5px0tt] { border-color: var(--color-primary); }

.centry__card-title[b-4abd5px0tt] {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary);
}

.centry__card-line[b-4abd5px0tt] {
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

/* "Recommended" is a word on a pill, never colour alone. */
.centry__badge[b-4abd5px0tt] {
    align-self: flex-start;
    padding: 2px var(--space-3);
    border-radius: 999px;
    background: var(--color-accent-pale);
    border: 1px solid var(--color-accent);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-primary);
}
/* /Components/Shared/Classes/ClassHelpStep.razor.rz.scp.css */
/* PLAT-WO-09c T3.2 — the owl asks. Tokens only. */

/* The owl asks: the question is the bubble's text, at the bubble's size. */
.chelp__question[b-u27hic0von] {
    margin: 0;
}

.chelp__question:focus[b-u27hic0von] { outline: none; }

.chelp__error[b-u27hic0von] {
    margin: var(--space-3) 0 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-error);
}
/* /Components/Shared/Classes/ClassPlanStep.razor.rz.scp.css */
/* PLAT-WO-09c T3.3 — "Here's how I'll plan". Tokens only. */

.cplan__title[b-2g5buhke80] {
    margin: 0;
}

.cplan__title:focus[b-2g5buhke80] { outline: none; }

.cplan__use[b-2g5buhke80] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding: var(--space-5);
    border-radius: 10px;
    background: var(--color-surface-2);
}

.cplan__h2[b-2g5buhke80] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
}

.cplan__note[b-2g5buhke80] {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.cplan__commitments[b-2g5buhke80] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding-left: var(--space-5);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-primary);
}
/* /Components/Shared/Classes/ClassRosterAdd.razor.rz.scp.css */
/* PLAT-WO-11h T1 — the shared add-students control, moved from ClassStudentsStep.razor.css. Tokens only. */

.cstud__adder[b-j2g8o7vnn3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.cstud__ways[b-j2g8o7vnn3] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Paste a list / Upload a CSV: two equal, button-styled choices (the CSV one is the file input's label). */
.cstud__way[b-j2g8o7vnn3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-2) var(--space-5);
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cstud__way:hover[b-j2g8o7vnn3] { background: var(--color-primary-pale); }
.cstud__way--on[b-j2g8o7vnn3] { background: var(--color-primary-pale); }

.cstud__way:disabled[b-j2g8o7vnn3],
.cstud__way--disabled[b-j2g8o7vnn3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cstud__upload[b-j2g8o7vnn3] { position: relative; }

/* The native file control stays focusable and operable; it is visually hidden behind its label. */
.cstud__upload[b-j2g8o7vnn3]  .cstud__file {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    overflow: hidden;
}

.cstud__upload[b-j2g8o7vnn3]  .cstud__file:focus-visible + .cstud__way,
.cstud__way:focus-visible[b-j2g8o7vnn3] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.cstud__paste[b-j2g8o7vnn3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-2);
}

.cstud__label[b-j2g8o7vnn3] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.cstud__textarea[b-j2g8o7vnn3] {
    width: 100%;
    min-height: 140px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
    resize: vertical;
}

.cstud__textarea:focus-visible[b-j2g8o7vnn3] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    border-color: var(--color-secondary);
}

.cstud__paste-actions[b-j2g8o7vnn3] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

.cstud__paste-actions .btn-save[b-j2g8o7vnn3],
.cstud__add[b-j2g8o7vnn3] { min-height: 44px; }

.cstud__add[b-j2g8o7vnn3] { width: auto; }
/* /Components/Shared/Classes/ClassSetupFlow.razor.rz.scp.css */
/* PLAT-WO-09c T2 — the flow's own two lines: a load failure, and the "you already have this class" note. Tokens only. */

.cflow__error[b-stk6tv3hud] {
    max-width: 760px;
    margin: var(--space-4) auto 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-error);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-error);
}

.cflow__note[b-stk6tv3hud] {
    max-width: 760px;
    margin: 0 auto var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 8px 8px 0;
    background: var(--color-accent-pale);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}
/* /Components/Shared/Classes/ClassStudentsStep.razor.rz.scp.css */
/* PLAT-WO-09c T4.1 — Your students. Tokens only; the layout is V2Setup's own, one column. */

.cstud[b-xkuo37x5fw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.cstud__title[b-xkuo37x5fw] {
    margin: 0;
}

.cstud__title:focus[b-xkuo37x5fw] { outline: none; }

.cstud__lead[b-xkuo37x5fw] {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.cstud__status[b-xkuo37x5fw] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.cstud__status:empty[b-xkuo37x5fw] { display: none; }

.cstud__error[b-xkuo37x5fw] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-error);
}

/* PLAT-WO-11h T2 — the footer: Back and "Skip for now". The list and its Continue are gone: an add goes on to designations. */
.cstud__nav[b-xkuo37x5fw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.cstud__later[b-xkuo37x5fw] {
    min-height: 44px;
    margin-left: auto;
}

/* PLAT-WO-10c, PLAT-WO-11h — on a phone, Back and "Skip for now" share the row at equal width. */
@media (max-width: 640px) {
    .cstud__back[b-xkuo37x5fw],
    .cstud__later[b-xkuo37x5fw] { flex: 1 1 0; min-height: 48px; margin-left: 0; box-sizing: border-box; line-height: 1.25; }
}
/* /Components/Shared/Classroom/ClassClimateV2Card.razor.rz.scp.css */
/* PLAT-WO-04 T8 — the class page's v2 climate card. Tokens only; the question groups are the kit's. */

.climate-v2[b-5fg6pj2hg3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.climate-v2__refine[b-5fg6pj2hg3],
.climate-v2__use[b-5fg6pj2hg3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-surface-3);
}

.climate-v2__h3[b-5fg6pj2hg3] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.climate-v2__note[b-5fg6pj2hg3] {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.climate-v2__honest[b-5fg6pj2hg3] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 8px 8px 0;
    background: var(--color-surface);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--color-text-primary);
}

.climate-v2__commitments[b-5fg6pj2hg3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + var(--space-4));
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--color-text-primary);
}

.climate-v2__error[b-5fg6pj2hg3] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-error);
}

.climate-v2__actions[b-5fg6pj2hg3] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.climate-v2__saved[b-5fg6pj2hg3] {
    margin: 0;
    min-height: 1.5em;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
/* /Components/Shared/Deliverables/StationKitCard.razor.rz.scp.css */
/* 🔴 WO-152 — the Station Kit card: only what dc-card does not already give it. */
.kit-card__group[b-pp51yzgvby] { align-self: flex-start; }

.kit-card__students[b-pp51yzgvby] {
    width: 6rem;
    padding: var(--space-1, 6px) var(--space-2, 8px);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    font-size: var(--text-base, 1rem);
    color: var(--color-text-primary, #1B3A6B);
    background: var(--color-surface, #fff);
}

.kit-card__plan[b-pp51yzgvby] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--color-text-primary, #1B3A6B);
}
.kit-card__plan--error[b-pp51yzgvby] { color: var(--color-error, #C0392B); }
/* /Components/Shared/DevSignInButton.razor.rz.scp.css */
.dev-signin[b-u11vx0gm1c] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.dev-signin__rule[b-u11vx0gm1c] {
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    margin: 0;
}

.dev-signin__button[b-u11vx0gm1c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border: 2px dashed #8a6d00;
    border-radius: 8px;
    background: transparent;
    color: #5c4800;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.dev-signin__button:hover[b-u11vx0gm1c] {
    background: rgba(138, 109, 0, 0.06);
}

.dev-signin__tag[b-u11vx0gm1c] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: #8a6d00;
    color: #fff;
}
/* /Components/Shared/FileDropZone.razor.rz.scp.css */
/* R27 — mirrors the Lesson Planner upload zone (CurriculumUploadPanel's cup__upload-zone) so grading and
   lesson planning share one visual language. */

.fdz__zone[b-18o5e0imco] {
    position: relative; /* anchor for the stretched InputFile */
    border: 2px dashed var(--color-border, #d4d9e2);
    border-radius: var(--radius-lg, 12px);
    padding: 32px 20px;
    text-align: center;
    background: var(--color-surface-2, #f7f8fa);
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.fdz__zone--drag[b-18o5e0imco],
.fdz__zone:hover[b-18o5e0imco] {
    border-color: var(--color-primary, #1F3A5F);
    background: var(--color-primary-pale, #EBF0F8);
}

.fdz__zone--disabled[b-18o5e0imco] {
    opacity: .6;
    pointer-events: none;
}

.fdz__icon[b-18o5e0imco] {
    display: flex;
    justify-content: center;
    color: var(--color-text-secondary, #5a6577);
    margin-bottom: 10px;
}

.fdz__zone--drag .fdz__icon[b-18o5e0imco],
.fdz__zone:hover .fdz__icon[b-18o5e0imco] {
    color: var(--color-primary, #1F3A5F);
}

.fdz__headline[b-18o5e0imco] {
    font-size: var(--text-sm, 14px);
    font-weight: 600;
    color: var(--color-text-primary, #1c2433);
    margin: 0 0 6px;
}

.fdz__hint[b-18o5e0imco] {
    font-size: var(--text-xs, 12px);
    color: var(--color-text-secondary, #5a6577);
    margin: 0 auto 12px;
    max-width: 46ch;
}

.fdz__chips[b-18o5e0imco] {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.fdz__chip[b-18o5e0imco] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-surface-3, #eceff4);
    color: var(--color-text-secondary, #5a6577);
}

/* The real input, stretched invisibly over the zone: click anywhere to browse; native drop lands here. */
[b-18o5e0imco] .fdz__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.fdz__file-card[b-18o5e0imco] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-border, #d4d9e2);
    border-radius: var(--radius-md, 8px);
    padding: 10px 12px;
    background: var(--color-surface-2, #f7f8fa);
}

.fdz__file-icon[b-18o5e0imco] {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: var(--color-primary, #1F3A5F);
    border-radius: 6px;
    padding: 6px 7px;
}

.fdz__file-meta[b-18o5e0imco] {
    min-width: 0;
}

.fdz__file-name[b-18o5e0imco] {
    font-size: var(--text-sm, 14px);
    font-weight: 600;
    color: var(--color-text-primary, #1c2433);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fdz__file-size[b-18o5e0imco] {
    font-size: var(--text-xs, 12px);
    color: var(--color-text-secondary, #5a6577);
}

.fdz__file-remove[b-18o5e0imco] {
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--color-text-secondary, #5a6577);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}

.fdz__file-remove:hover[b-18o5e0imco] {
    background: var(--color-surface-3, #eceff4);
    color: var(--color-danger, #b3261e);
}

.fdz__error[b-18o5e0imco] {
    margin: 8px 0 0;
    font-size: var(--text-xs, 12px);
    color: var(--color-danger, #b3261e);
}
/* /Components/Shared/Grading/AddToRosterForm.razor.rz.scp.css */
/* AddToRosterForm.razor.css — WO-230 T2, scoped; the same look the match screen's form had. */

.atr[b-gt1qo0obda] { display: flex; flex-direction: column; gap: var(--space-1, 4px); }

.atr__ask[b-gt1qo0obda] { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }

.atr__fields[b-gt1qo0obda] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); }

.atr__select[b-gt1qo0obda], .atr__input[b-gt1qo0obda] {
    min-width: 0;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-border-strong, #A9B4C6);
    border-radius: 6px;
    font: inherit;
}

.atr__select[b-gt1qo0obda] { width: 16rem; }
.atr__first[b-gt1qo0obda] { width: 10rem; }
.atr__initial[b-gt1qo0obda] { width: 3rem; text-align: center; }

.atr__go[b-gt1qo0obda] {
    padding: 6px 16px;
    border: 0;
    border-radius: 8px;
    background: var(--color-accent, #2EAA8A);
    color: #FFFFFF;
    font-weight: 600;
    cursor: pointer;
}

.atr__go:disabled[b-gt1qo0obda] { opacity: 0.5; cursor: default; }

.atr__later[b-gt1qo0obda] {
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-accent-strong, #1F7A63);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    font-size: var(--text-sm, 0.875rem);
}

.atr__later:disabled[b-gt1qo0obda] { opacity: 0.5; cursor: default; }

.atr__error[b-gt1qo0obda] { color: #A3262A; font-size: var(--text-sm, 0.875rem); margin: 0; }
/* /Components/Shared/Grading/CheckNames.razor.rz.scp.css */
/* CheckNames.razor.css — WO-211 T3, scoped; global tokens from app.css. */

.cnames[b-az7nzlyxtf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 10px;
    padding: var(--space-4, 16px);
    background: var(--color-surface, #FFFFFF);
}

.cnames__head[b-az7nzlyxtf] { display: flex; flex-direction: column; gap: var(--space-1, 4px); }

.cnames__title[b-az7nzlyxtf] {
    font-family: var(--font-display, serif);
    font-size: var(--text-xl, 1.25rem);
    color: var(--color-text-primary, #1B3A6B);
    margin: 0;
}

.cnames__sub[b-az7nzlyxtf] { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }

.cnames__link[b-az7nzlyxtf] {
    background: none;
    border: 0;
    padding: 0;
    margin-left: var(--space-2, 8px);
    color: var(--color-accent-strong, #1F7A63);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

.cnames__list[b-az7nzlyxtf] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2, 8px); }

.cnames__row[b-az7nzlyxtf] {
    display: flex;
    gap: var(--space-3, 12px);
    align-items: center;
    padding: var(--space-2, 8px);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
}

.cnames__thumb[b-az7nzlyxtf] {
    flex: 0 0 auto;
    width: 64px;
    height: 84px;
    padding: 0;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 4px;
    background: #F4F6FA;
    cursor: zoom-in;
    overflow: hidden;
}

.cnames__thumb img[b-az7nzlyxtf] { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

.cnames__body[b-az7nzlyxtf] { display: flex; flex-direction: column; gap: var(--space-1, 4px); min-width: 0; flex: 1 1 auto; }

.cnames__read[b-az7nzlyxtf] { font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); overflow-wrap: anywhere; }

.cnames__edit[b-az7nzlyxtf] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); }

.cnames__input[b-az7nzlyxtf] {
    min-width: 0;
    width: 16rem;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-border-strong, #A9B4C6);
    border-radius: 6px;
    font: inherit;
}

.cnames__source[b-az7nzlyxtf] { font-size: var(--text-xs, 0.75rem); color: var(--color-text-secondary, #5A6478); }
.cnames__source--remembered[b-az7nzlyxtf],
.cnames__source--roster[b-az7nzlyxtf],
.cnames__source--known[b-az7nzlyxtf],
.cnames__source--confirmed[b-az7nzlyxtf] { color: #1F7A63; }
.cnames__source--near-match[b-az7nzlyxtf] { color: #6B4E06; }

.cnames__ok > summary[b-az7nzlyxtf] {
    cursor: pointer;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #1B3A6B);
    margin-bottom: var(--space-2, 8px);
}

.cnames__actions[b-az7nzlyxtf] { display: flex; align-items: center; gap: var(--space-3, 12px); }

.cnames__confirm[b-az7nzlyxtf] {
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--color-accent, #2EAA8A);
    color: #FFFFFF;
    font-weight: 600;
    cursor: pointer;
}

.cnames__confirm:disabled[b-az7nzlyxtf] { opacity: 0.6; cursor: default; }

.cnames__error[b-az7nzlyxtf] { color: #A3262A; font-size: var(--text-sm, 0.875rem); }

.cnames__zoom[b-az7nzlyxtf] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    cursor: zoom-out;
}

/* WO-218 — the paper opens in the one page viewer, on a panel. */
.cnames__zoom[b-az7nzlyxtf] { cursor: default; }
/* 🔴 WO-221 T4 — covers the screen above everything, centred, 16px padding; the panel is a column at most the screen
   tall (less the padding), the header never scrolls away, the viewer fills the rest. */
.cnames__zoom[b-az7nzlyxtf] { z-index: 2147483000; box-sizing: border-box; padding: 16px; outline: none; }
.cnames__zoom-panel[b-az7nzlyxtf] { box-sizing: border-box; width: min(1100px, 100%); height: calc(100vh - 32px); max-height: calc(100vh - 32px); overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: var(--color-surface, #FFFFFF); }
.cnames__zoom-head[b-az7nzlyxtf] { flex: 0 0 auto; position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: var(--color-text-primary, #1B3A6B); background: var(--color-surface, #FFFFFF); }
.cnames__zoom-body[b-az7nzlyxtf] { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.cnames__zoom-body[b-az7nzlyxtf]  .pageviewer { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.cnames__zoom-body[b-az7nzlyxtf]  .pageviewer__viewport { flex: 1 1 0; min-height: 0; height: auto !important; }

/* 🔴 WO-221 T3 — what a row says after it is saved */
.cnames__matchstate[b-az7nzlyxtf] { font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.cnames__matchstate--ok[b-az7nzlyxtf] { color: #1F7A5C; font-weight: 600; }

/* 🔴 WO-213 (D-43) — "No name on this paper" */
.cnames__noname[b-az7nzlyxtf] { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); cursor: pointer; }
.cnames__input--noname[b-az7nzlyxtf] { display: inline-block; font-style: italic; color: var(--color-text-secondary, #5A6478); border-style: dashed; }

/* WO-216 — the match screen's last save. */
.cnames__matched[b-az7nzlyxtf] { margin: 0; padding: var(--space-3, 12px) var(--space-4, 16px); border-radius: 10px; background: rgba(46, 170, 138, 0.10); color: #1F7A63; font-weight: 600; }

/* 🔴 WO-230 T3 — "Add to roster" sits beside "No name on this paper". */
.cnames__more[b-az7nzlyxtf] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 12px); }
/* /Components/Shared/Grading/ClassMatrixTable.razor.rz.scp.css */
/* ClassMatrixTable.razor.css — scoped; global tokens from app.css. */

.cmatrix[b-w34tnne6eg] { display: flex; flex-direction: column; gap: var(--space-3, 12px); }

.cmatrix__head[b-w34tnne6eg] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); }

.cmatrix__title[b-w34tnne6eg] {
    font-family: var(--font-display, serif);
    font-size: var(--text-2xl, 1.5rem);
    color: var(--color-text-primary, #1B3A6B);
    margin: 0;
}

.cmatrix__title--block[b-w34tnne6eg] { font-family: inherit; font-size: var(--text-lg, 1.125rem); font-weight: 700; }
.cmatrix__blockcol[b-w34tnne6eg] { text-align: left; color: var(--color-text-secondary, #5A6478); }

.cmatrix__csv[b-w34tnne6eg] {
    text-decoration: none;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: white;
    background: var(--color-primary, #1B3A6B);
    border-radius: 6px;
    padding: var(--space-2, 8px) var(--space-4, 16px);
}
.cmatrix__csv:hover[b-w34tnne6eg] { background: var(--color-primary-light, #2753A0); }

.cmatrix__scroll[b-w34tnne6eg] {
    overflow-x: auto;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 10px;
}

.cmatrix__table[b-w34tnne6eg] {
    border-collapse: collapse;
    width: 100%;
    font-size: var(--text-sm, 0.875rem);
}

.cmatrix__table th[b-w34tnne6eg],
.cmatrix__table td[b-w34tnne6eg] {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-bottom: 1px solid var(--color-surface-3, #E8ECF3);
    text-align: center;
    white-space: nowrap;
}

.cmatrix__table thead th[b-w34tnne6eg] {
    background: var(--color-surface-2, #F4F6FA);
    color: var(--color-text-secondary, #5A6478);
    font-size: var(--text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    position: sticky;
    top: 0;
}

.cmatrix__namecol[b-w34tnne6eg] { text-align: left; font-weight: 600; color: var(--color-text-primary, #1B3A6B); position: sticky; left: 0; background: var(--color-surface, #FFFFFF); }
.cmatrix__table thead .cmatrix__namecol[b-w34tnne6eg] { background: var(--color-surface-2, #F4F6FA); }
.cmatrix__numcol[b-w34tnne6eg] { font-variant-numeric: tabular-nums; font-weight: 600; }
.cmatrix__pct[b-w34tnne6eg] { color: var(--color-primary, #1B3A6B); }
/* R66 — a student grading never finished for. Present in the gradebook (mark, don't drop) and
   unmistakably not a score. */
.cmatrix__notgraded[b-w34tnne6eg] { font-weight: 500; font-style: italic; color: var(--color-text-muted, #8E97A8); white-space: nowrap; }

.cmatrix__sortable[b-w34tnne6eg] { cursor: pointer; user-select: none; }
.cmatrix__sortable:hover[b-w34tnne6eg] { color: var(--color-primary, #1B3A6B); }

/* R36 Part B — the student name is a click target that opens the SubmissionDetail panel. */
.cmatrix__namebtn[b-w34tnne6eg] {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 600;
    color: var(--color-secondary-text);   /* PLAT-WO-15f T4: was --color-secondary (4.47:1 on white); 6.16:1 */
    cursor: pointer;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 120ms ease;
}
.cmatrix__namebtn:hover[b-w34tnne6eg],
.cmatrix__namebtn:focus-visible[b-w34tnne6eg] { text-decoration-color: currentColor; }
.cmatrix__namebtn:focus-visible[b-w34tnne6eg] { outline: 2px solid var(--color-secondary, #2979CC); outline-offset: 2px; border-radius: 3px; }

.cmatrix__cell[b-w34tnne6eg] { font-weight: 700; }
/* The "% correct" footer keeps its heat fills (WO-222 T2 leaves it as it is). */
/* PLAT-WO-15f T4: the fills stay; the text takes the AA text shades of the same hues. On the blended fills:
   --color-accent-text 4.83:1 (was --color-accent, 2.68:1), --color-warning-text 5.86:1 (was #B96C00, 3.70:1);
   --color-error is already 4.83:1. */
.cmatrix__cell--correct[b-w34tnne6eg] { color: var(--color-accent-text); background: rgba(46, 170, 138, 0.08); }
.cmatrix__cell--incorrect[b-w34tnne6eg] { color: var(--color-error, #C0392B); background: rgba(192, 57, 43, 0.08); }
.cmatrix__cell--warn[b-w34tnne6eg] { color: var(--color-warning-text); background: rgba(232, 146, 12, 0.10); }

/* 🔴 WO-222 T2 (N-14, D-49) — a mark is a small rounded chip in a plain cell. Every glyph/chip pair reaches 4.5:1:
   white on --color-error 5.4; navy (--color-text-primary) on --color-warning 4.6 and on --color-surface-3 9.5. Green is
   the one that needed a stronger token: white on --color-accent is 2.9, and no darker green token exists, so the chip
   is the accent mixed 70/30 with black (5.4:1) — the same hue, no new hex value. */
.cmatrix__chip[b-w34tnne6eg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    padding: 0 0.4em;
    line-height: 1.6;
    border-radius: 6px;
    font-weight: 700;
}
.cmatrix__chip--correct[b-w34tnne6eg]   { background: color-mix(in srgb, var(--color-accent, #2EAA8A) 70%, black); color: var(--color-surface, #FFFFFF); }
.cmatrix__chip--incorrect[b-w34tnne6eg] { background: var(--color-error, #C0392B); color: var(--color-surface, #FFFFFF); }
.cmatrix__chip--partial[b-w34tnne6eg]   { background: var(--color-warning, #E8920C); color: var(--color-text-primary, #1B3A6B); }
.cmatrix__chip--skipped[b-w34tnne6eg]   { background: var(--color-surface-3, #E8ECF3); color: var(--color-text-primary, #1B3A6B); }
/* 🔴 WO-231 — a student with no paper: an amber-edged chip across the question cells; an excused one is grey. */
.cmatrix__chip--missing[b-w34tnne6eg]   { background: var(--color-surface, #FFFFFF); color: var(--color-error, #C0392B); border: 1px solid var(--color-error, #C0392B); }
.cmatrix__chip--excused[b-w34tnne6eg]   { background: var(--color-surface-3, #E8ECF3); color: var(--color-text-secondary, #5A6478); }
.cmatrix__missingdivider td[b-w34tnne6eg] { padding: 0; border-top: 2px dashed var(--color-border, #D0D7E3); }
.cmatrix__missingcell[b-w34tnne6eg] { text-align: left; }

.cmatrix__footer td[b-w34tnne6eg] {
    border-top: 2px solid var(--color-border, #D0D7E3);
    background: var(--color-surface-2, #F4F6FA);
    font-weight: 700;
    font-size: var(--text-xs, 0.75rem);
}
.cmatrix__footer .cmatrix__namecol[b-w34tnne6eg] { background: var(--color-surface-2, #F4F6FA); }
/* /Components/Shared/Grading/ClassPanel.razor.rz.scp.css */
/* R81 — the collapsible class panel. A document-section look: a clickable header row with a chevron, a live counts
   line, and (when open) the tile grid. */
.cpanel[b-9ndtuezpxn] {
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 12px;
    background: var(--color-surface, #FFF);
    margin-bottom: var(--space-4, 16px);
    overflow: hidden;
}

.cpanel__head[b-9ndtuezpxn] {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    width: 100%;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 0;
    background: var(--color-surface-alt, #F7F9FC);
    color: var(--color-text, #1F2733);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cpanel__head:hover[b-9ndtuezpxn] { background: var(--color-surface-2, #F4F6FA); }

.cpanel__chevron[b-9ndtuezpxn] {
    flex: none;
    transition: transform 0.12s ease;
    color: var(--color-text-secondary, #5A6478);
}
.cpanel__chevron--open[b-9ndtuezpxn] { transform: rotate(90deg); }

.cpanel__title[b-9ndtuezpxn] {
    font-weight: 700;
    font-size: var(--text-base, 1rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cpanel__stats[b-9ndtuezpxn] {
    margin-left: auto;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #5A6478);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cpanel__count[b-9ndtuezpxn] {
    margin: 0;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border-top: 1px solid var(--color-border, #DDE3EC);
    background: var(--color-surface, #FFF);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #5A6478);
}

.cpanel__body[b-9ndtuezpxn] { padding: var(--space-4, 16px); }
/* /Components/Shared/Grading/DeleteAssignment.razor.rz.scp.css */
.gdelete[b-2759dj8o16] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.gdelete__button[b-2759dj8o16],
.gdelete__no[b-2759dj8o16] {
    background: none;
    border: 1px solid var(--color-border, #d0d5dd);
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font: inherit;
    font-size: 0.875rem;
    color: var(--color-text-muted, #475467);
    cursor: pointer;
}

.gdelete__button:hover[b-2759dj8o16],
.gdelete__no:hover[b-2759dj8o16] {
    border-color: var(--color-text-muted, #475467);
}

.gdelete__confirm[b-2759dj8o16] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.gdelete__text[b-2759dj8o16] {
    font-size: 0.875rem;
}

.gdelete__yes[b-2759dj8o16] {
    background: #b42318;
    color: #fff;
    border: 1px solid #b42318;
    border-radius: 6px;
    padding: 0.3rem 0.7rem;
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.gdelete__yes:disabled[b-2759dj8o16],
.gdelete__no:disabled[b-2759dj8o16] {
    opacity: 0.6;
    cursor: default;
}

.gdelete__error[b-2759dj8o16] {
    color: #b42318;
    font-size: 0.875rem;
}
/* /Components/Shared/Grading/GradebookView.razor.rz.scp.css */
/* WO-218 T2.1/T2.2 — the gradebooks' one bar: title, the By block / All together toggle, Sort by, Export CSV. */
.gbook[b-xpuieanzr9] { display: flex; flex-direction: column; gap: var(--space-5, 20px); }

.gbook__bar[b-xpuieanzr9] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); flex-wrap: wrap; }

.gbook__title[b-xpuieanzr9] {
    font-family: var(--font-display, serif);
    font-size: var(--text-2xl, 1.5rem);
    color: var(--color-text-primary, #1B3A6B);
    margin: 0;
}

.gbook__controls[b-xpuieanzr9] { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; }

.gbook__toggle[b-xpuieanzr9] {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--color-surface-2, #F4F6FA);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 999px;
}
.gbook__seg[b-xpuieanzr9] {
    border: 0;
    background: transparent;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
    cursor: pointer;
}
.gbook__seg.is-active[b-xpuieanzr9] { background: var(--color-primary, #1B3A6B); color: #FFFFFF; }

.gbook__sort[b-xpuieanzr9] { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.gbook__sort select[b-xpuieanzr9] {
    padding: 5px 8px;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 6px;
    background: var(--color-surface, #FFFFFF);
    font-size: var(--text-sm, 0.875rem);
}

/* 🔴 WO-245 - "Add papers" (beside Export CSV) and the Missing box's "Add late papers" are the house btn-primary, small: btn-primary
   is full-width by default, so this keeps them to their words. */
.gbook__btn-sm[b-xpuieanzr9] {
    width: auto;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
    text-decoration: none;
    white-space: nowrap;
}
.gbook__btn-sm:focus-visible[b-xpuieanzr9] { outline: 2px solid var(--color-secondary, #2979CC); outline-offset: 2px; }

.gbook__csv[b-xpuieanzr9] {
    text-decoration: none;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: white;
    background: var(--color-primary, #1B3A6B);
    border-radius: 6px;
    padding: var(--space-2, 8px) var(--space-4, 16px);
}
.gbook__csv:hover[b-xpuieanzr9] { background: var(--color-primary-light, #2753A0); }

/* 🔴 WO-222 T2.4 — the chip key above the gradebook; the same chip colours as the cells (see ClassMatrixTable.razor.css). */
.gbook__legend[b-xpuieanzr9] { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2, 8px) var(--space-4, 16px); font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.gbook__legend-item[b-xpuieanzr9] { display: inline-flex; align-items: center; gap: 6px; }
.cmatrix__chip[b-xpuieanzr9] { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; padding: 0 0.4em; line-height: 1.6; border-radius: 6px; font-weight: 700; }
.cmatrix__chip--missing[b-xpuieanzr9]   { background: var(--color-surface, #FFFFFF); color: var(--color-error, #C0392B); border: 1px solid var(--color-error, #C0392B); }
.cmatrix__chip--correct[b-xpuieanzr9]   { background: color-mix(in srgb, var(--color-accent, #2EAA8A) 70%, black); color: var(--color-surface, #FFFFFF); }
.cmatrix__chip--incorrect[b-xpuieanzr9] { background: var(--color-error, #C0392B); color: var(--color-surface, #FFFFFF); }
.cmatrix__chip--partial[b-xpuieanzr9]   { background: var(--color-warning, #E8920C); color: var(--color-text-primary, #1B3A6B); }
.cmatrix__chip--skipped[b-xpuieanzr9]   { background: var(--color-surface-3, #E8ECF3); color: var(--color-text-primary, #1B3A6B); }

/* 🔴 WO-231 — the Missing box: collapsed by default, above the gradebook. */

/* 🔴 WO-231 / WO-245 - the Missing box: the summary row (title left, "Add late papers" right), then one card per class, 3 across
   wide, 2 mid-width, 1 on a phone (the class blocks' 260px tile rule: three fit from about 900px). SharedUI tokens; hex only as
   fallbacks. Text is --color-text-primary / -secondary on --color-surface (AA: 11.4:1 and 5.9:1). */
.gbook__missing[b-xpuieanzr9] { border: 1px solid var(--color-border, #D0D7E3); border-radius: 8px; background: var(--color-surface, #FFFFFF); padding: var(--space-3, 12px) var(--space-4, 16px); }
.gbook__missing-summary[b-xpuieanzr9] { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); flex-wrap: wrap; list-style: none; }
.gbook__missing-summary[b-xpuieanzr9]::-webkit-details-marker { display: none; }
.gbook__missing-title[b-xpuieanzr9] { font-weight: 600; color: var(--color-text-primary, #1B3A6B); }
.gbook__missing-title[b-xpuieanzr9]::before { content: "\25B8"; display: inline-block; width: 1em; color: var(--color-text-secondary, #5A6478); transition: transform 0.15s ease; }
.gbook__missing[open] .gbook__missing-title[b-xpuieanzr9]::before { transform: rotate(90deg); }
.gbook__missing-body[b-xpuieanzr9] { display: flex; flex-direction: column; gap: var(--space-3, 12px); margin-top: var(--space-3, 12px); }
.gbook__missing-note[b-xpuieanzr9] { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.gbook__missing-grid[b-xpuieanzr9] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4, 16px); }
@media (max-width: 900px) { .gbook__missing-grid[b-xpuieanzr9] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gbook__missing-grid[b-xpuieanzr9] { grid-template-columns: minmax(0, 1fr); } }
.gbook__missing-card[b-xpuieanzr9] { border: 1px solid var(--color-border, #D0D7E3); border-radius: 8px; background: var(--color-surface, #FFFFFF); display: flex; flex-direction: column; min-width: 0; }
.gbook__missing-cardhead[b-xpuieanzr9] { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2, 8px); padding: var(--space-3, 12px) var(--space-4, 16px); background: var(--color-surface-2, #F4F6FA); border-bottom: 1px solid var(--color-border, #D0D7E3); border-radius: 8px 8px 0 0; }
.gbook__missing-block[b-xpuieanzr9] { margin: 0; font-size: var(--text-base, 1rem); font-weight: 700; color: var(--color-text-primary, #1B3A6B); overflow-wrap: anywhere; }
.gbook__missing-count[b-xpuieanzr9] { font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); white-space: nowrap; }
.gbook__missing-list[b-xpuieanzr9] { list-style: none; margin: 0; padding: 0 var(--space-4, 16px); }
.gbook__missing-item[b-xpuieanzr9] { display: flex; align-items: center; gap: var(--space-2, 8px); min-height: 44px; padding: var(--space-2, 8px) 0; }
.gbook__missing-item + .gbook__missing-item[b-xpuieanzr9] { border-top: 1px solid var(--color-surface-3, #E8ECF3); }
.gbook__missing-name[b-xpuieanzr9] { color: var(--color-text-primary, #1B3A6B); font-size: var(--text-sm, 0.875rem); min-width: 0; overflow-wrap: anywhere; }
.gbook__missing-item--excused .gbook__missing-name[b-xpuieanzr9] { color: var(--color-text-secondary, #5A6478); }
.gbook__missing-tag[b-xpuieanzr9] { font-size: var(--text-xs, 0.75rem); color: var(--color-text-secondary, #5A6478); background: var(--color-surface-2, #F4F6FA); border: 1px solid var(--color-border, #D0D7E3); border-radius: 999px; padding: 1px var(--space-2, 8px); }
.gbook__missing-btn[b-xpuieanzr9] { margin-left: auto; flex: none; background: transparent; color: var(--color-primary, #1B3A6B); border: 1px solid var(--color-primary, #1B3A6B); border-radius: 6px; padding: var(--space-1, 4px) var(--space-3, 12px); font: inherit; font-size: var(--text-xs, 0.75rem); font-weight: 600; cursor: pointer; }
.gbook__missing-btn:hover[b-xpuieanzr9] { background: var(--color-primary-pale, #EBF0F8); }
.gbook__missing-btn:focus-visible[b-xpuieanzr9] { outline: 2px solid var(--color-secondary, #2979CC); outline-offset: 2px; }
/* /Components/Shared/Grading/ItemAnalysisStrip.razor.rz.scp.css */
/* ItemAnalysisStrip.razor.css — scoped; global tokens from app.css. */

.ianalysis[b-bheb49rphz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

.ianalysis__head[b-bheb49rphz] { display: flex; flex-direction: column; gap: var(--space-1, 4px); }

.ianalysis__title[b-bheb49rphz] {
    font-family: var(--font-display, serif);
    font-size: var(--text-2xl, 1.5rem);
    color: var(--color-text-primary, #1B3A6B);
    margin: 0;
}

.ianalysis__sub[b-bheb49rphz] { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
/* R66 — students the run never graded, reported rather than silently excluded from the class numbers. */
.ianalysis__notgraded[b-bheb49rphz] { margin: var(--space-2, 8px) 0 0; font-size: var(--text-sm, 0.875rem); color: #6B4E06; background: #FFF7E6; border-left: 3px solid #BF880C; border-radius: 6px; padding: var(--space-2, 8px) var(--space-3, 12px); }

.ianalysis__grid[b-bheb49rphz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-3, 12px);
}

.ianalysis__item[b-bheb49rphz] {
    border: 1px solid var(--color-border, #D0D7E3);
    border-left: 3px solid var(--color-accent, #2EAA8A);
    border-radius: 8px;
    padding: var(--space-3, 12px);
    background: var(--color-surface, #FFFFFF);
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

/* 🔴 WO-219 — three background hues, the legend's (ItemAnalysisBands in Contracts): green ≥ 80 "most got it",
   amber 70–79 "some trouble", red < 70 "reteach". Background tint only — no motion, dark text keeps contrast well
   above AA. The reteach ⚠ flag below still owns the amber left-border, independent of the hue. */
.ianalysis__item--hue-green[b-bheb49rphz]   { background: #EFF9F3; }  /* ≥80 — light green */
.ianalysis__item--hue-amber[b-bheb49rphz]   { background: #FCF1D9; }  /* 70–79 — light amber */
.ianalysis__item--hue-red[b-bheb49rphz]     { background: #FBE7E4; }  /* <70 — light red */

/* The legend under the heading: one swatch per band, the same tints. */
.ianalysis__legend[b-bheb49rphz] { list-style: none; margin: var(--space-1, 4px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2, 8px) var(--space-4, 16px); font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.ianalysis__legend-item[b-bheb49rphz] { display: inline-flex; align-items: center; gap: 6px; }
.ianalysis__swatch[b-bheb49rphz] { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--color-border, #D0D7E3); }
/* The card tints are too pale to read as a colour at 14 px (T3: they looked like empty checkboxes) — the swatch uses the
   same hue at full strength. */
.ianalysis__swatch.ianalysis__item--hue-green[b-bheb49rphz] { background: #2EAA8A; border-color: #2EAA8A; }
.ianalysis__swatch.ianalysis__item--hue-amber[b-bheb49rphz] { background: #E8B04A; border-color: #E8B04A; }
.ianalysis__swatch.ianalysis__item--hue-red[b-bheb49rphz]   { background: #E07A6B; border-color: #E07A6B; }

/* A card is a button (it opens the side panel). */
.ianalysis__item--button[b-bheb49rphz] { font: inherit; text-align: left; cursor: pointer; width: 100%; }
.ianalysis__item--button:hover[b-bheb49rphz] { box-shadow: 0 1px 6px rgba(27, 58, 107, 0.15); }
.ianalysis__item--button:focus-visible[b-bheb49rphz] { outline: 2px solid var(--color-secondary, #2979CC); outline-offset: 2px; }
.ianalysis__item--selected[b-bheb49rphz] { outline: 2px solid var(--color-secondary, #2979CC); outline-offset: 1px; }

/* Flagged for reteach — amber left-border, echoing the prior-knowledge note. Background is owned by the
   hue band above (a flagged item is below threshold, so orange or red). */
.ianalysis__item--flag[b-bheb49rphz] {
    border-left-color: var(--color-warning, #E8920C);
}

.ianalysis__item-head[b-bheb49rphz] { display: flex; align-items: baseline; gap: var(--space-2, 8px); }

/* PLAT-WO-15f T4: the ⚠ is text, so it takes the AA amber text shade (5.37:1 on the red card, 5.70:1 on amber); was
   --color-warning (2.07:1). */
.ianalysis__warn[b-bheb49rphz] { color: var(--color-warning-text); font-size: var(--text-base, 1rem); }

.ianalysis__q[b-bheb49rphz] { font-weight: 700; color: var(--color-text-primary, #1B3A6B); }

.ianalysis__pct[b-bheb49rphz] {
    margin-left: auto;
    font-weight: 700;
    font-size: var(--text-lg, 1.125rem);
    color: var(--color-primary, #1B3A6B);
}
.ianalysis__item--flag .ianalysis__pct[b-bheb49rphz] { color: var(--color-warning-text); }   /* PLAT-WO-15f T4: was #B96C00 (3.39:1 on red) */

.ianalysis__count[b-bheb49rphz] { font-size: var(--text-xs, 0.75rem); color: var(--color-text-muted, #8E97A8); }

.ianalysis__issue[b-bheb49rphz] { font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.ianalysis__issue em[b-bheb49rphz] { color: var(--color-text-primary, #1B3A6B); font-style: italic; }

.ianalysis__std[b-bheb49rphz] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--color-secondary-pale, #E8F2FB);
    color: var(--color-secondary-text);   /* PLAT-WO-15f T4: was --color-secondary (3.94:1 on its pale); 5.44:1 */
    font-weight: 600;
}
/* /Components/Shared/Grading/ItemInsightPanel.razor.rz.scp.css */
/* 🔴 WO-219 — the Item Analysis side panel: a drawer on the right, the page dimmed behind it. */
.iipanel__scrim[b-6a73elcspl] { position: fixed; inset: 0; background: rgba(15, 30, 55, 0.25); z-index: 900; }

.iipanel[b-6a73elcspl] {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(560px, 100vw);
    background: var(--color-surface, #FFFFFF);
    box-shadow: -4px 0 24px rgba(15, 30, 55, 0.18);
    z-index: 901;
    overflow-y: auto;
    padding: var(--space-4, 16px) var(--space-5, 20px) var(--space-6, 24px);
    display: flex; flex-direction: column; gap: var(--space-4, 16px);
}

.iipanel__head[b-6a73elcspl] { display: flex; align-items: center; gap: var(--space-2, 8px); }
.iipanel__title[b-6a73elcspl] { margin: 0; font-family: var(--font-display, serif); font-size: var(--text-2xl, 1.5rem); color: var(--color-text-primary, #1B3A6B); }
.iipanel__close[b-6a73elcspl] { margin-left: auto; border: 0; background: transparent; font-size: 1.75rem; line-height: 1; cursor: pointer; color: var(--color-text-secondary, #5A6478); }

.iipanel__section[b-6a73elcspl] { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.iipanel__h[b-6a73elcspl] { margin: 0; font-size: var(--text-base, 1rem); color: var(--color-text-primary, #1B3A6B); }
.iipanel__prompt[b-6a73elcspl] { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.iipanel__line[b-6a73elcspl] { margin: 0; color: var(--color-text-primary, #1B3A6B); }
.iipanel__note[b-6a73elcspl] { margin: 0; color: var(--color-text-secondary, #5A6478); font-style: italic; }

.iipanel__mistakes[b-6a73elcspl] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.iipanel__mistake[b-6a73elcspl] { border: 1px solid var(--color-border, #D0D7E3); border-radius: 8px; padding: var(--space-3, 12px); }
.iipanel__mistake-head[b-6a73elcspl] { display: flex; align-items: baseline; gap: var(--space-2, 8px); }
.iipanel__mistake-label[b-6a73elcspl] { font-weight: 700; color: var(--color-text-primary, #1B3A6B); }
.iipanel__count[b-6a73elcspl] { margin-left: auto; white-space: nowrap; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.iipanel__sentence[b-6a73elcspl] { margin: var(--space-1, 4px) 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.iipanel__link[b-6a73elcspl] { border: 0; background: transparent; padding: 0; color: var(--color-secondary, #2979CC); cursor: pointer; font: inherit; font-size: var(--text-sm, 0.875rem); text-decoration: underline; align-self: flex-start; }
.iipanel__names[b-6a73elcspl] { margin: var(--space-1, 4px) 0 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-primary, #1B3A6B); }

.iipanel__plan[b-6a73elcspl] { border-top: 1px solid var(--color-border, #D0D7E3); padding-top: var(--space-3, 12px); }
.iipanel__plan .btn-cta[b-6a73elcspl] { align-self: flex-start; }

/* WO-219b — the "Whole class" note on a mistake a whole-class line covers. */
.iipanel__whole[b-6a73elcspl] {
    font-size: var(--text-xs, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-primary, #1B3A6B); background: var(--color-surface-alt, #EEF2F8); border-radius: 4px; padding: 1px 6px;
}
/* /Components/Shared/Grading/KeyImageViewer.razor.rz.scp.css */
/* R68 — the frozen answer key, shown inline. Deliberately reads as EVIDENCE (a bordered document panel),
   not as a decorative thumbnail: it is what the teacher is being asked to check against. */

.keyview[b-qzs2sqjfv4] { min-width: 0; }

/* WO-218 — the zoom bar, box and pages are the one PageViewer's now. */

/* R68 Part A — the item under discussion, outlined on the full page when geometry exists. Amber, so it never
   reads as a Correct/Incorrect mark. */
.keyview__highlight[b-qzs2sqjfv4] {
    position: absolute;
    border: 2px solid #BF880C;
    border-radius: 3px;
    background: rgba(191, 136, 12, 0.12);
    pointer-events: none;
}

/* R66's rule applied to the key: absence gets its own representation, in words. */
.keyview__gone[b-qzs2sqjfv4] {
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 10px;
    background: var(--color-surface, #FFF);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px);
    color: var(--color-text-secondary, #5A6478);
}

.keyview__gone svg[b-qzs2sqjfv4] { color: var(--color-text-muted, #8E97A8); flex: none; margin-top: 1px; }
.keyview__gone-msg[b-qzs2sqjfv4] { margin: 0; font-size: var(--text-sm, 0.875rem); }
/* /Components/Shared/Grading/KeyReviewPanel.razor.rz.scp.css */
/* KeyReviewPanel.razor.css — scoped; mirrors SubmissionDetail's visual language
   (same card, table, and chip idioms) so reviewing the KEY feels like reviewing a student. */

.keyrev[b-rsou6dmx1h] {
    background: var(--color-surface, #FFFFFF);
    border: 1px solid #F0C36D;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: var(--space-5, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-5, 20px);
}

/* The banner — same amber family as the fault card (a warning that needs a decision). */
.keyrev__banner[b-rsou6dmx1h] {
    display: flex;
    gap: var(--space-3, 12px);
    align-items: flex-start;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid #F0C36D;
    border-left: 4px solid #B96C00;
    border-radius: 10px;
    background: #FFF8EC;
    color: #8A5200;
}
.keyrev__banner-title[b-rsou6dmx1h] { font-weight: 700; font-size: var(--text-lg, 1.125rem); }
.keyrev__banner-msg[b-rsou6dmx1h] {
    margin: 4px 0 0;
    color: #7A4E12;
    font-size: var(--text-sm, 0.875rem);
}

.keyrev__body[b-rsou6dmx1h] {
    display: grid;
    grid-template-columns: minmax(240px, 340px) 1fr;
    gap: var(--space-5, 20px);
    align-items: start;
}
@media (max-width: 820px) {
    .keyrev__body[b-rsou6dmx1h] { grid-template-columns: 1fr; }
}

.keyrev__page[b-rsou6dmx1h] {
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
    overflow: hidden;
}
.keyrev__page img[b-rsou6dmx1h] { width: 100%; display: block; }

.keyrev__table-wrap[b-rsou6dmx1h] { overflow-x: auto; }

.keyrev__table[b-rsou6dmx1h] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 0.875rem);
}
.keyrev__table th[b-rsou6dmx1h] {
    text-align: left;
    font-size: var(--text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted, #8E97A8);
    padding: var(--space-2, 8px);
    border-bottom: 2px solid var(--color-border, #D0D7E3);
    white-space: nowrap;
}
.keyrev__table td[b-rsou6dmx1h] {
    padding: var(--space-2, 8px);
    border-bottom: 1px solid var(--color-surface-3, #E8ECF3);
    color: var(--color-text-primary, #1B3A6B);
    vertical-align: top;
}

.keyrev__q[b-rsou6dmx1h] { font-weight: 700; }
.keyrev__why[b-rsou6dmx1h] { color: var(--color-text-secondary, #5A6478); min-width: 200px; }

.keyrev__answer[b-rsou6dmx1h] {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    font-family: ui-monospace, monospace;
    white-space: nowrap;
}
.keyrev__answer--teacher[b-rsou6dmx1h] { background: #FDECEA; color: var(--color-error, #C0392B); }
.keyrev__answer--model[b-rsou6dmx1h] { background: var(--color-accent-pale, #E6F7F2); color: var(--color-accent, #2EAA8A); }

.keyrev__choice[b-rsou6dmx1h] { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }

.keyrev__opt[b-rsou6dmx1h] {
    padding: 6px 12px;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
    background: var(--color-surface, #FFFFFF);
    color: var(--color-text-primary, #1B3A6B);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.keyrev__opt:hover[b-rsou6dmx1h] { border-color: var(--color-secondary, #2979CC); }
.keyrev__opt--active[b-rsou6dmx1h] {
    border-color: var(--color-secondary, #2979CC);
    background: var(--color-secondary-pale, #E8F2FB);
    color: var(--color-secondary, #2979CC);
}

.keyrev__actions[b-rsou6dmx1h] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-4, 16px);
    margin-top: var(--space-4, 16px);
}
.keyrev__progress[b-rsou6dmx1h] { color: var(--color-text-muted, #8E97A8); font-size: var(--text-sm, 0.875rem); }

.keyrev__resolve[b-rsou6dmx1h] {
    padding: 8px 18px;
    border: 1px solid var(--color-secondary, #2979CC);
    border-radius: 8px;
    background: var(--color-secondary, #2979CC);
    color: #fff;
    font-weight: 700;
    font-size: var(--text-sm, 0.875rem);
    cursor: pointer;
}
.keyrev__resolve:hover:not(:disabled)[b-rsou6dmx1h] { background: #1F62A8; }
.keyrev__resolve:disabled[b-rsou6dmx1h] { opacity: 0.5; cursor: default; }

.keyrev__muted[b-rsou6dmx1h] { color: var(--color-text-muted, #8E97A8); font-size: var(--text-sm, 0.875rem); }
.keyrev__error[b-rsou6dmx1h] { color: var(--color-error, #C0392B); font-size: var(--text-sm, 0.875rem); margin: 4px 0 0; }
/* /Components/Shared/Grading/MisconceptionDistribution.razor.rz.scp.css */
/* MisconceptionDistribution.razor.css — scoped; global tokens from app.css. */

.mdist[b-7tvx4ainz5] { display: flex; flex-direction: column; gap: var(--space-3, 12px); }

.mdist__head[b-7tvx4ainz5] { display: flex; flex-direction: column; gap: var(--space-1, 4px); }

.mdist__title[b-7tvx4ainz5] {
    font-family: var(--font-display, serif);
    font-size: var(--text-2xl, 1.5rem);
    color: var(--color-text-primary, #1B3A6B);
    margin: 0;
}

.mdist__sub[b-7tvx4ainz5] { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }

.mdist__list[b-7tvx4ainz5] { display: flex; flex-direction: column; gap: var(--space-2, 8px); }

.mdist__row[b-7tvx4ainz5] {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
    background: var(--color-surface, #FFFFFF);
}
.mdist__row--other[b-7tvx4ainz5] { background: #FFFBF0; border-color: rgba(232, 146, 12, 0.35); }

.mdist__bar-wrap[b-7tvx4ainz5] {
    grid-row: 1;
    height: 10px;
    background: var(--color-surface-3, #E8ECF3);
    border-radius: 6px;
    overflow: hidden;
}
.mdist__bar[b-7tvx4ainz5] {
    height: 100%;
    background: var(--gradient-brand-blue, linear-gradient(135deg, #2979CC, #2EAA8A));
    border-radius: 6px;
}
.mdist__row--other .mdist__bar[b-7tvx4ainz5] { background: var(--color-warning, #E8920C); }

.mdist__label[b-7tvx4ainz5] { display: flex; flex-direction: column; gap: 2px; }
.mdist__name[b-7tvx4ainz5] { font-weight: 600; color: var(--color-text-primary, #1B3A6B); font-size: var(--text-sm, 0.875rem); }
.mdist__count[b-7tvx4ainz5] { font-size: var(--text-xs, 0.75rem); color: var(--color-text-muted, #8E97A8); }

.mdist__where[b-7tvx4ainz5] { font-size: var(--text-xs, 0.75rem); color: var(--color-text-secondary, #5A6478); white-space: nowrap; }

.mdist__warn[b-7tvx4ainz5] {
    margin: 0;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: #FFFBF0;
    border-left: 3px solid var(--color-warning, #E8920C);
    border-radius: 0 6px 6px 0;
    font-size: var(--text-sm, 0.875rem);
    color: #B96C00;
}

@media (max-width: 640px) {
    .mdist__row[b-7tvx4ainz5] { grid-template-columns: 1fr; }
    .mdist__where[b-7tvx4ainz5] { white-space: normal; }
}
/* /Components/Shared/Grading/PageViewer.razor.rz.scp.css */
/* WO-218 T2.3 — the one page viewer. A scroll box; the content's WIDTH is the zoom (100% = fit to width). */
.pageviewer[b-9big1ufgxm] { display: flex; flex-direction: column; min-width: 0; }

.pageviewer__bar[b-9big1ufgxm] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: 4px 6px;
    background: var(--color-surface-2, #F4F6FA);
    border: 1px solid var(--color-border, #D0D7E3);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.pageviewer__btn[b-9big1ufgxm] {
    min-width: 32px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 6px;
    background: var(--color-surface, #FFFFFF);
    color: var(--color-text-primary, #1B3A6B);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.pageviewer__btn--fit[b-9big1ufgxm] { font-size: var(--text-sm, 0.875rem); }
.pageviewer__btn:disabled[b-9big1ufgxm] { opacity: 0.45; cursor: default; }

.pageviewer__level[b-9big1ufgxm] {
    min-width: 46px;
    text-align: center;
    font-size: var(--text-sm, 0.875rem);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary, #5A6478);
}

.pageviewer__hint[b-9big1ufgxm] { margin-left: auto; font-size: var(--text-xs, 0.75rem); color: var(--color-text-muted, #8E97A8); }

/* position: relative makes the box the content's offsetParent (page-viewer.js measures against it). */
.pageviewer__viewport[b-9big1ufgxm] {
    position: relative;
    overflow: auto;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 0 0 8px 8px;
    background: var(--color-surface-3, #E8ECF3);
    overscroll-behavior: contain;
}
.pageviewer__viewport.is-draggable[b-9big1ufgxm] { cursor: grab; }
.pageviewer__viewport.is-dragging[b-9big1ufgxm] { cursor: grabbing; user-select: none; }

/* Below fit the pages are narrower than the box: centre them. */
.pageviewer__content[b-9big1ufgxm] { margin: 0 auto; padding: 8px 0; box-sizing: border-box; }

.pageviewer__page[b-9big1ufgxm] { margin: 0 0 12px; }
.pageviewer__page:last-child[b-9big1ufgxm] { margin-bottom: 0; }

.pageviewer__label[b-9big1ufgxm] {
    display: block;
    padding: 2px 4px 4px;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
}

/* Every page is the content's full width, its whole height: never a sliver, never cropped. */
.pageviewer__frame[b-9big1ufgxm] { position: relative; line-height: 0; background: #FFFFFF; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15); }
.pageviewer__frame[b-9big1ufgxm]  img,
.pageviewer__img[b-9big1ufgxm] { display: block; width: 100%; max-width: none; height: auto; border-radius: 0; }
.pageviewer__frame[b-9big1ufgxm]  .redbox { display: block; max-width: none; }
/* /Components/Shared/Grading/RedBoxOverlay.razor.rz.scp.css */
/* RedBoxOverlay.razor.css — scoped. Leans on the global --color-error token. */

.redbox[b-9pteh2x6d2] {
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
}

.redbox__img[b-9pteh2x6d2] {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.redbox__box[b-9pteh2x6d2] {
    position: absolute;
    border: 2px solid var(--color-error, #C0392B);
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.35);
    background: rgba(192, 57, 43, 0.06);
    pointer-events: none;
    box-sizing: border-box;
}
/* /Components/Shared/Grading/ReteachGroups.razor.rz.scp.css */
/* 🔴 WO-219 — "Students who need the same help", above the gradebook. */
.rgroups[b-7rk3iurq0u] { display: flex; flex-direction: column; gap: var(--space-3, 12px); margin: var(--space-6, 24px) 0; }
.rgroups__title[b-7rk3iurq0u] { margin: 0; font-family: var(--font-display, serif); font-size: var(--text-2xl, 1.5rem); color: var(--color-text-primary, #1B3A6B); }
.rgroups__note[b-7rk3iurq0u] { margin: 0; color: var(--color-text-secondary, #5A6478); font-style: italic; }
.rgroups__list[b-7rk3iurq0u] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3, 12px); }
.rgroups__group[b-7rk3iurq0u] {
    border: 1px solid var(--color-border, #D0D7E3);
    border-left: 3px solid var(--color-secondary, #2979CC);
    border-radius: 8px;
    padding: var(--space-3, 12px);
    background: var(--color-surface, #FFFFFF);
    display: flex; flex-direction: column; gap: var(--space-2, 8px);
}
.rgroups__head[b-7rk3iurq0u] { display: flex; flex-direction: column; gap: 2px; }
.rgroups__name[b-7rk3iurq0u] { margin: 0; font-size: var(--text-base, 1rem); color: var(--color-text-primary, #1B3A6B); }
.rgroups__items[b-7rk3iurq0u] { font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.rgroups__students[b-7rk3iurq0u], .rgroups__idea[b-7rk3iurq0u] { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-primary, #1B3A6B); }
.rgroups__idea-h[b-7rk3iurq0u] { font-weight: 700; }
.rgroups__plan[b-7rk3iurq0u] { align-self: flex-start; text-decoration: none; }

/* 🔴 WO-219b (D-53) — "Whole class" lines, before the groups: one line each, not a group card. */
.rgroups__whole[b-7rk3iurq0u] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.rgroups__whole-line[b-7rk3iurq0u] {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-2, 8px);
    border: 1px solid var(--color-border, #D0D7E3);
    border-left: 3px solid var(--color-primary, #1B3A6B);
    border-radius: 8px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--color-surface, #FFFFFF);
}
.rgroups__whole-tag[b-7rk3iurq0u] {
    font-size: var(--text-xs, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-primary, #1B3A6B); background: var(--color-surface-alt, #EEF2F8); border-radius: 4px; padding: 1px 6px;
}
.rgroups__whole-label[b-7rk3iurq0u] { font-weight: 700; color: var(--color-text-primary, #1B3A6B); }
.rgroups__whole-line .rgroups__idea[b-7rk3iurq0u] { flex-basis: 100%; }
/* 🔴 WO-245 T3 — the Lesson Planner line at the end of each whole-class line, with its small link button. */
.rgroups__lesson[b-7rk3iurq0u] { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px) var(--space-3, 12px); font-size: var(--text-sm, 0.875rem); color: var(--color-text-primary, #1B3A6B); }
.rgroups__lesson-btn[b-7rk3iurq0u] { padding: var(--space-1, 4px) var(--space-3, 12px); font-size: var(--text-sm, 0.875rem); border-width: 1.5px; text-decoration: none; }

/* 🔴 WO-224 — equal-height cards (N-2/N-13): the grid stretches every card in a row to the tallest, the card is a column,
   and its button is pushed to the bottom whatever the content above it. */
.rgroups__list[b-7rk3iurq0u] { align-items: stretch; }
.rgroups__group[b-7rk3iurq0u] { height: 100%; }
.rgroups__group > .rgroups__plan[b-7rk3iurq0u] { margin-top: auto; }
.rgroups__count[b-7rk3iurq0u] { font-weight: 600; }
.rgroups__unmatched[b-7rk3iurq0u] { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); font-style: italic; }
.rgroups__plan--off[b-7rk3iurq0u] { opacity: 0.55; cursor: not-allowed; }
.rgroups__unlock[b-7rk3iurq0u] { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.rgroups__unlock-row[b-7rk3iurq0u] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 12px); }
.rgroups__unlock-note[b-7rk3iurq0u] { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
/* WO-232 — the cost line as a pill: accent tint, accent border, dark accent text (AA on the tint). */
.rgroups__cost-pill[b-7rk3iurq0u] { margin: 0; align-self: flex-start; width: fit-content; max-width: 100%; padding: 4px 12px; border: 1px solid var(--color-accent, #2EAA8A); border-radius: 999px; background: var(--color-accent-pale, #E6F7F2); color: var(--color-accent-dark, #14705A); font-size: var(--text-sm, 0.875rem); font-weight: 600; }
.rgroups__standards[b-7rk3iurq0u] { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.rgroups__standards-title[b-7rk3iurq0u] { margin: 0; font-size: var(--text-base, 1rem); color: var(--color-text-primary, #1B3A6B); }

/* 🔴 WO-246 T1 — "Build Reteach Packets" (and "View Interventions") below the cards. */
.rgroups__actions[b-7rk3iurq0u] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 12px); }
.rgroups__actions > .rgroups__plan[b-7rk3iurq0u] { align-self: auto; }
button.rgroups__plan--off:disabled[b-7rk3iurq0u] { pointer-events: auto; }

/* 🔴 WO-246 T1 — the checklist popup: a small dialog over the page. */
.rgroups__backdrop[b-7rk3iurq0u] { position: fixed; inset: 0; background: rgba(27, 58, 107, 0.35); z-index: 1000; }
.rgroups__dialog[b-7rk3iurq0u] {
    position: fixed; z-index: 1001; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
    background: var(--color-surface, #FFFFFF); border: 1px solid var(--color-border, #D0D7E3); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(27, 58, 107, 0.22);
    padding: var(--space-5, 20px); display: flex; flex-direction: column; gap: var(--space-3, 12px);
}
.rgroups__trap[b-7rk3iurq0u] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.rgroups__dialog-title[b-7rk3iurq0u] { margin: 0; font-family: var(--font-display, serif); font-size: var(--text-xl, 1.25rem); color: var(--color-text-primary, #1B3A6B); }
.rgroups__dialog-line[b-7rk3iurq0u] { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.rgroups__checks[b-7rk3iurq0u] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2, 8px); }
/* The whole row is the click target (the label wraps the box and the text). */
.rgroups__check[b-7rk3iurq0u] {
    display: flex; align-items: flex-start; gap: var(--space-3, 12px); cursor: pointer;
    border: 1px solid var(--color-border, #D0D7E3); border-radius: 8px; padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--color-surface, #FFFFFF); transition: border-color 120ms ease, background-color 120ms ease;
}
.rgroups__check:hover[b-7rk3iurq0u] { border-color: var(--color-accent, #2EAA8A); }
.rgroups__check:has(.rgroups__check-box:checked)[b-7rk3iurq0u] { border-color: var(--color-accent, #2EAA8A); background: var(--color-accent-pale, #E6F7F2); }
/* A custom box: no default browser checkbox. */
.rgroups__check-box[b-7rk3iurq0u] {
    appearance: none; -webkit-appearance: none; flex: 0 0 auto; margin: 2px 0 0; width: 20px; height: 20px;
    border: 2px solid var(--color-border, #D0D7E3); border-radius: 5px; background: var(--color-surface, #FFFFFF);
    display: grid; place-content: center; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease;
}
.rgroups__check-box[b-7rk3iurq0u]::after {
    content: ""; width: 10px; height: 6px; border: solid var(--color-surface, #FFFFFF); border-width: 0 0 2.5px 2.5px;
    transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform 120ms ease;
}
.rgroups__check-box:checked[b-7rk3iurq0u] { background: var(--color-accent-dark, #14705A); border-color: var(--color-accent-dark, #14705A); }
.rgroups__check-box:checked[b-7rk3iurq0u]::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.rgroups__check-box:focus-visible[b-7rk3iurq0u] { outline: 2px solid var(--color-primary, #1B3A6B); outline-offset: 2px; }
.rgroups__check-text[b-7rk3iurq0u] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rgroups__check-name[b-7rk3iurq0u] { font-weight: 700; color: var(--color-text-primary, #1B3A6B); }
.rgroups__check-meta[b-7rk3iurq0u] { font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.rgroups__dialog-actions[b-7rk3iurq0u] { display: flex; align-items: center; gap: var(--space-3, 12px); margin-top: var(--space-1, 4px); }
.rgroups__dialog-actions > .rgroups__plan[b-7rk3iurq0u] { align-self: auto; }
.rgroups__link-btn[b-7rk3iurq0u] {
    background: none; border: none; padding: var(--space-1, 4px) var(--space-2, 8px); cursor: pointer;
    color: var(--color-primary, #1B3A6B); font: inherit; text-decoration: underline;
}

/* 🔴 WO-246 T2 — skeleton cards while Ivaro is looking: the group card's size and grid, a gentle shimmer. */
.rgroups__skel[b-7rk3iurq0u] { min-height: 132px; border-left-color: var(--color-border, #D0D7E3); }
.rgroups__skel-bar[b-7rk3iurq0u] {
    display: block; height: 12px; width: 100%; border-radius: 6px;
    background: linear-gradient(90deg, var(--color-surface-muted, #EEF2F8) 0%, var(--color-surface-subtle, #F7F9FC) 50%, var(--color-surface-muted, #EEF2F8) 100%);
    background-size: 200% 100%; animation: rgroups-shimmer-b-7rk3iurq0u 1.6s ease-in-out infinite;
}
.rgroups__skel-bar--title[b-7rk3iurq0u] { height: 16px; width: 70%; }
.rgroups__skel-bar--short[b-7rk3iurq0u] { width: 35%; }
.rgroups__skel-bar--mid[b-7rk3iurq0u] { width: 55%; }
@keyframes rgroups-shimmer-b-7rk3iurq0u { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
    .rgroups__skel-bar[b-7rk3iurq0u] { animation: none; }
    .rgroups__check[b-7rk3iurq0u], .rgroups__check-box[b-7rk3iurq0u], .rgroups__check-box[b-7rk3iurq0u]::after { transition: none; }
}
/* /Components/Shared/Grading/SetupConversation.razor.rz.scp.css */
/* SetupConversation.razor.css — 🔴 WO-217. Ivaro asks, one card at a time. The ✦ Ivaro voice and the navy-pale panel
   carry over from the R35 conversation (whose claims / key / notice styles are kept below, verbatim in intent); the answer
   choices are LARGE buttons, Ivaro's suggestion carries a quiet tag, and the stepper reads "n of N". */

.setupconv[b-sw6cg9ufsi] {
    background: var(--color-primary-pale, #EBF0F8);
    border: 1px solid #C7D4EA;
    border-radius: var(--radius-lg, 12px);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.setupconv__header[b-sw6cg9ufsi] {
    margin: 0;
    font-size: var(--text-base, 15px);
    line-height: 1.5;
    color: var(--color-primary, #1B3A6B);
    font-weight: 600;
}

.setupconv__tag[b-sw6cg9ufsi] {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-primary, #1B3A6B);
    margin-bottom: 4px;
}

/* The stepper: "2 of 5", a row of dots, and the quiet one-click path. */
.setupconv__bar[b-sw6cg9ufsi] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.setupconv__position[b-sw6cg9ufsi] {
    font-size: var(--text-sm, 13px);
    font-weight: 700;
    color: var(--color-primary, #1B3A6B);
    font-variant-numeric: tabular-nums;
}

.setupconv__dots[b-sw6cg9ufsi] { display: inline-flex; gap: 5px; }
.setupconv__dot[b-sw6cg9ufsi] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C7D4EA;
}
.setupconv__dot--done[b-sw6cg9ufsi] { background: var(--color-accent, #2EAA8A); }
.setupconv__dot--on[b-sw6cg9ufsi] { background: var(--color-primary, #1B3A6B); }

.setupconv__rest[b-sw6cg9ufsi] {
    margin-left: auto;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: var(--text-sm, 13px);
    color: var(--color-secondary, #2979CC);
    cursor: pointer;
}
.setupconv__rest:hover[b-sw6cg9ufsi] { text-decoration: underline; }

/* The card on screen. */
.setupconv__card[b-sw6cg9ufsi] {
    background: #fff;
    border: 1.5px solid var(--color-primary, #1B3A6B);
    border-left-width: 3px;
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) var(--radius-md, 8px);
    padding: 16px 18px;
    box-shadow: 0 2px 10px rgba(27, 58, 107, 0.10);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.setupconv__card--end[b-sw6cg9ufsi] { border-left-color: var(--color-accent, #2EAA8A); }

.setupconv__prompt[b-sw6cg9ufsi] {
    margin: 0;
    font-size: var(--text-lg, 17px);
    line-height: 1.5;
    color: var(--color-text-primary, #1B3A6B);
    font-weight: 600;
}

.setupconv__why[b-sw6cg9ufsi] {
    margin: 0;
    font-size: var(--text-sm, 13px);
    color: var(--color-text-secondary, #5A6478);
}

/* The answers: large buttons, one per line on a phone, side by side when they fit. */
.setupconv__choices[b-sw6cg9ufsi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.setupconv__choice[b-sw6cg9ufsi] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-height: 56px;
    padding: 12px 16px;
    border: 1.5px solid var(--color-border, #D0D7E3);
    border-radius: var(--radius-md, 8px);
    background: #fff;
    color: var(--color-primary, #1B3A6B);
    font-family: inherit;
    font-size: var(--text-base, 15px);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.setupconv__choice:hover[b-sw6cg9ufsi] { border-color: var(--color-primary, #1B3A6B); background: var(--color-primary-pale, #EBF0F8); }
.setupconv__choice--suggested[b-sw6cg9ufsi] { border-color: var(--color-accent, #2EAA8A); }
.setupconv__choice--chosen[b-sw6cg9ufsi] {
    background: var(--color-primary, #1B3A6B);
    border-color: var(--color-primary, #1B3A6B);
    color: #fff;
}
.setupconv__choice--chosen .setupconv__choice-tag[b-sw6cg9ufsi] { color: #CFE9DF; }

.setupconv__choice-tag[b-sw6cg9ufsi] {
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    color: var(--color-accent, #2EAA8A);
}

.setupconv__nav[b-sw6cg9ufsi] { display: flex; justify-content: flex-start; }
.setupconv__back[b-sw6cg9ufsi] {
    background: none;
    border: none;
    padding: 4px 0;
    font: inherit;
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
    cursor: pointer;
}
.setupconv__back:hover:not(:disabled)[b-sw6cg9ufsi] { color: var(--color-primary, #1B3A6B); }
.setupconv__back:disabled[b-sw6cg9ufsi] { opacity: .4; cursor: default; }

.setupconv__acts summary[b-sw6cg9ufsi] { cursor: pointer; font-size: var(--text-sm, 13px); color: var(--color-secondary, #2979CC); }
.setupconv__act[b-sw6cg9ufsi] { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; font-size: var(--text-sm, 13px); }
.setupconv__act input[b-sw6cg9ufsi] { margin-top: 3px; }

.setupconv__crop[b-sw6cg9ufsi] {
    display: block;
    max-width: 100%;
    max-height: 220px;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 6px;
    background: #fff;
}

/* ── R68 Part A: the key, at the moment Ivaro asks a question ────────────────────────────── */

/* The two claims she is adjudicating between. Deliberately NOT styled as right/wrong — she has not
   decided yet, and colouring one "correct" would be answering the question for her. */
.ksconv__claims[b-sw6cg9ufsi] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px) var(--space-5, 20px);
    align-items: baseline;
    margin: var(--space-3, 12px) 0;
    padding: var(--space-3, 12px);
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 8px;
    background: var(--color-surface-alt, #F7F9FC);
}

.ksconv__claims-problem[b-sw6cg9ufsi] { flex-basis: 100%; display: flex; gap: var(--space-2, 8px); align-items: baseline; }
.ksconv__claim[b-sw6cg9ufsi] { display: flex; gap: var(--space-2, 8px); align-items: baseline; }

.ksconv__claims-label[b-sw6cg9ufsi] {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-muted, #8E97A8);
}

.ksconv__claims-value[b-sw6cg9ufsi] {
    font-size: var(--text-lg, 1.125rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text, #1F2733);
}

/* Distinguished by SOURCE, not by verdict — one is what the paper says, the other is what Ivaro worked out. */
.ksconv__claims-value--printed[b-sw6cg9ufsi] { border-bottom: 2px solid var(--color-text-muted, #8E97A8); }
.ksconv__claims-value--computed[b-sw6cg9ufsi] { border-bottom: 2px solid var(--color-primary, #1B3A6B); }

.ksconv__showkey[b-sw6cg9ufsi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    margin: var(--space-1, 4px) 0 var(--space-2, 8px);
    padding: 4px 10px;
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 6px;
    background: var(--color-surface, #FFF);
    color: var(--color-primary, #1B3A6B);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
}

.ksconv__showkey:hover[b-sw6cg9ufsi] { border-color: var(--color-primary, #1B3A6B); }

.ksconv__keyview[b-sw6cg9ufsi] { margin: var(--space-2, 8px) 0 var(--space-3, 12px); }

/* WO-18 (R99) — the two facts Key Setup used to keep to itself: an unusual number of questions (the
   blueprint-read canary) and anything set aside. Both sat in a log line or an unread DTO field. Rendered
   above the thread, before Ivaro's first question, because they are about the conversation rather than a
   turn in it. Advisory weight, not an error: nothing is blocked and nothing is lost — the teacher is being
   told what the system noticed. */
.ksconv__notice[b-sw6cg9ufsi],
.ksconv__dropped[b-sw6cg9ufsi] {
    margin: 0 0 var(--space-3, 12px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-left: 3px solid var(--color-warning, #B26A00);
    border-radius: 0 6px 6px 0;
    background: var(--color-warning-surface, #FDF6EC);
    color: var(--color-text, #1F2733);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
}

/* 🔴 WO-223 — "Your standards fit this key." : one quiet line under the header. */
.setupconv__standards-fit[b-sw6cg9ufsi] { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
/* /Components/Shared/Grading/StudentPick.razor.rz.scp.css */
/* StudentPick.razor.css — WO-242, scoped; global tokens from app.css. */

.spick[b-q35nze5fkm] {
    min-width: 0;
    width: 18rem;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-border-strong, #A9B4C6);
    border-radius: 6px;
    background: var(--color-surface, #FFFFFF);
    font: inherit;
}

.spick:disabled[b-q35nze5fkm] { opacity: 0.6; }
/* /Components/Shared/Grading/SubmissionDetail.razor.rz.scp.css */
/* SubmissionDetail.razor.css — scoped; leans on global tokens from app.css. */

.subdetail[b-1vgnxtkq4y] {
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    padding: var(--space-5, 20px);
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

.subdetail__head[b-1vgnxtkq4y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
}

.subdetail__id[b-1vgnxtkq4y] { display: flex; align-items: center; gap: var(--space-2, 8px); }

/* 🔴 WO-221 T6 — name box, roster dropdown and Save on ONE line (Save right of the dropdown); they wrap only on a narrow
   screen (below 600px). */
.subdetail__namerow[b-1vgnxtkq4y] { flex-wrap: nowrap; }
.subdetail__namerow .subdetail__name[b-1vgnxtkq4y] { flex: 1 1 10rem; min-width: 0; }
.subdetail__namerow .subdetail__roster-select[b-1vgnxtkq4y] { flex: 0 1 14rem; min-width: 0; }
.subdetail__namerow .subdetail__save[b-1vgnxtkq4y] { flex: 0 0 auto; }
.subdetail__skip[b-1vgnxtkq4y] {
    flex: 0 0 auto;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
    background: transparent;
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
}
@media (max-width: 599.98px) { .subdetail__namerow[b-1vgnxtkq4y] { flex-wrap: wrap; } }

.subdetail__name[b-1vgnxtkq4y] {
    font-family: var(--font-display, serif);
    font-size: var(--text-xl, 1.25rem);
    color: var(--color-text-primary, #1B3A6B);
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 6px;
    min-width: 180px;
}
.subdetail__name:hover[b-1vgnxtkq4y], .subdetail__name:focus[b-1vgnxtkq4y] {
    border-color: var(--color-border, #D0D7E3);
    outline: none;
}

.subdetail__save[b-1vgnxtkq4y] {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--color-secondary, #2979CC);
    background: var(--color-secondary-pale, #E8F2FB);
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
}

/* IS-F0c — roster-student picker (Step 2). */
.subdetail__roster[b-1vgnxtkq4y] { display: flex; align-items: center; gap: var(--space-2, 8px); }

.subdetail__roster-label[b-1vgnxtkq4y] {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
}

.subdetail__roster-select[b-1vgnxtkq4y] {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-primary, #1B3A6B);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 6px;
    padding: 2px 6px;
    background: var(--color-surface, #FFFFFF);
}

.subdetail__meta[b-1vgnxtkq4y] { display: flex; align-items: center; gap: var(--space-3, 12px); }

.subdetail__score[b-1vgnxtkq4y] { font-size: var(--text-lg, 1.125rem); font-weight: 700; color: var(--color-primary, #1B3A6B); }
.subdetail__percent[b-1vgnxtkq4y] { font-size: var(--text-base, 1rem); font-weight: 600; color: var(--color-text-secondary, #5A6478); }
/* R66 — no grade exists: muted and non-numeric, never dressed as a mark. */
.subdetail__score--notgraded[b-1vgnxtkq4y] { font-size: var(--text-base, 1rem); font-weight: 600; color: var(--color-text-secondary, #5A6478); }

.subdetail__chip[b-1vgnxtkq4y] {
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border-radius: 20px;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
}
.subdetail__chip--done[b-1vgnxtkq4y] { background: var(--color-accent-pale, #E6F7F2); color: var(--color-accent, #2EAA8A); }
.subdetail__chip--review[b-1vgnxtkq4y] { background: #FFF3E0; color: #B96C00; }
.subdetail__chip--grading[b-1vgnxtkq4y] { background: var(--color-secondary-pale, #E8F2FB); color: var(--color-secondary, #2979CC); }

.subdetail__close[b-1vgnxtkq4y] {
    background: none; border: none; cursor: pointer;
    font-size: var(--text-lg, 1.125rem); color: var(--color-text-muted, #8E97A8);
    line-height: 1; padding: 4px;
}

.subdetail__body[b-1vgnxtkq4y] {
    display: grid;
    /* WO-218 — the paper gets half the panel (it was capped at 340px, too narrow to read). */
    grid-template-columns: minmax(300px, 1fr) minmax(320px, 1fr);
    gap: var(--space-5, 20px);
    align-items: start;
}
@media (max-width: 820px) {
    .subdetail__body[b-1vgnxtkq4y] { grid-template-columns: 1fr; }
}

/* WO-218 T2.3 — the paper is shown by the one PageViewer (its own bar, box and borders). */
.subdetail__page[b-1vgnxtkq4y] { min-width: 0; }

.subdetail__table-wrap[b-1vgnxtkq4y] { overflow-x: auto; }

/* R30 Part E — Correct / Incorrect / All segmented filter (house segmented-control pattern:
   pill group, accent fill on the active segment). */
.subdetail__filter[b-1vgnxtkq4y] {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    margin-bottom: var(--space-3, 12px);
    background: var(--color-surface-2, #F4F6FA);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 999px;
    width: fit-content;
}
.subdetail__filter-btn[b-1vgnxtkq4y] {
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 4px 14px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.subdetail__filter-btn:hover[b-1vgnxtkq4y] { color: var(--color-text-primary, #1B3A6B); }
.subdetail__filter-btn--on[b-1vgnxtkq4y] {
    background: var(--color-accent, #2EAA8A);
    color: #fff;
}
.subdetail__filter-btn--on:hover[b-1vgnxtkq4y] { color: #fff; }
@media (prefers-reduced-motion: reduce) {
    .subdetail__filter-btn[b-1vgnxtkq4y] { transition: none; }
}

.subdetail__table[b-1vgnxtkq4y] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 0.875rem);
}
.subdetail__table th[b-1vgnxtkq4y] {
    text-align: left;
    font-size: var(--text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted, #8E97A8);
    padding: var(--space-2, 8px);
    border-bottom: 2px solid var(--color-border, #D0D7E3);
    white-space: nowrap;
}
.subdetail__table td[b-1vgnxtkq4y] {
    padding: var(--space-2, 8px);
    border-bottom: 1px solid var(--color-surface-3, #E8ECF3);
    color: var(--color-text-primary, #1B3A6B);
    vertical-align: top;
}
.subdetail__row--incorrect[b-1vgnxtkq4y] { background: #FDF3F2; }

.subdetail__q[b-1vgnxtkq4y] { font-weight: 700; }
/* 🔴 WO-219 — the Answer column in the normal font; a written answer wraps in a column wide enough to read in a few lines. */
.subdetail__input[b-1vgnxtkq4y] { min-width: 260px; max-width: 420px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }

/* R65 Part D — the auto-correction annotation ("accepted: gravle ≈ gravel"). Quiet by design: it is
   information, not a task — no badge, no affordance, nothing to click. */
.subdetail__autocorrect[b-1vgnxtkq4y] {
    display: block;
    margin-top: .15rem;
    font-family: var(--iv-font-body, inherit);
    font-size: .72rem;
    font-style: italic;
    color: var(--iv-text-muted, #6b7280);
}
.subdetail__feedback[b-1vgnxtkq4y] { color: var(--color-text-secondary, #5A6478); min-width: 220px; }

.subdetail__verdict[b-1vgnxtkq4y] {
    padding: 2px 8px; border-radius: 12px;
    font-size: var(--text-xs, 0.75rem); font-weight: 600; white-space: nowrap;
}
.subdetail__verdict--correct[b-1vgnxtkq4y] { background: var(--color-accent-pale, #E6F7F2); color: var(--color-accent, #2EAA8A); }
.subdetail__verdict--incorrect[b-1vgnxtkq4y] { background: #FDECEA; color: var(--color-error, #C0392B); }
.subdetail__verdict--skipped[b-1vgnxtkq4y] { background: var(--color-surface-3, #E8ECF3); color: var(--color-text-secondary, #5A6478); }

.subdetail__muted[b-1vgnxtkq4y] { color: var(--color-text-muted, #8E97A8); font-size: var(--text-sm, 0.875rem); }

/* R25 (Part C) — a faulted student's fault reason + one-click retry (was a dead end before). */
.subdetail__fault[b-1vgnxtkq4y] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    margin: 0 0 var(--space-4, 16px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid #F0C36D;
    border-left: 4px solid #B96C00;
    border-radius: 10px;
    background: #FFF8EC;
}
.subdetail__fault-head[b-1vgnxtkq4y] {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    color: #8A5200;
    font-weight: 700;
}
.subdetail__fault-msg[b-1vgnxtkq4y] {
    margin: 0;
    color: #7A4E12;
    font-size: var(--text-sm, 0.875rem);
    word-break: break-word;
}
.subdetail__retry[b-1vgnxtkq4y] {
    align-self: flex-start;
    padding: 6px 14px;
    border: 1px solid #B96C00;
    border-radius: 8px;
    background: #B96C00;
    color: #fff;
    font-weight: 600;
    font-size: var(--text-sm, 0.875rem);
    cursor: pointer;
}
.subdetail__retry:hover:not(:disabled)[b-1vgnxtkq4y] { background: #A05E00; }
.subdetail__retry:disabled[b-1vgnxtkq4y] { opacity: 0.6; cursor: default; }

/* R50 — the review banner: a short teacher-facing count, primary "Approve all", demoted "Retry". */
.subdetail__review[b-1vgnxtkq4y] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    margin: 0 0 var(--space-4, 16px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid #F0C36D;
    border-left: 4px solid #B96C00;
    border-radius: 10px;
    background: #FFF8EC;
}
.subdetail__review-head[b-1vgnxtkq4y] {
    display: flex; align-items: center; gap: var(--space-2, 8px);
    color: #8A5200; font-weight: 700;
}
.subdetail__review-hint[b-1vgnxtkq4y] { margin: 0; color: #7A4E12; font-size: var(--text-sm, 0.875rem); }
.subdetail__review-actions[b-1vgnxtkq4y] { display: flex; gap: var(--space-2, 8px); flex-wrap: wrap; }
.subdetail__approve[b-1vgnxtkq4y] {
    padding: 6px 14px; border: 1px solid var(--color-accent, #2EAA8A); border-radius: 8px;
    background: var(--color-accent, #2EAA8A); color: #fff; font-weight: 600;
    font-size: var(--text-sm, 0.875rem); cursor: pointer;
}
.subdetail__approve:hover:not(:disabled)[b-1vgnxtkq4y] { background: #26937A; }
.subdetail__approve:disabled[b-1vgnxtkq4y] { opacity: 0.6; cursor: default; }
/* The retry is now a quiet, secondary control (ghost button) rather than the primary action. */
.subdetail__retry--secondary[b-1vgnxtkq4y] {
    background: transparent; color: #8A5200; border-color: #E0BE86; font-weight: 600;
}
.subdetail__retry--secondary:hover:not(:disabled)[b-1vgnxtkq4y] { background: #FBEFD6; }

/* R50 — the per-row verdict toggle + edited marker. */
.subdetail__verdictcell[b-1vgnxtkq4y] { white-space: nowrap; }
.subdetail__vtoggle[b-1vgnxtkq4y] { display: inline-flex; border: 1px solid var(--color-border, #D0D7E3); border-radius: 8px; overflow: hidden; }
.subdetail__vbtn[b-1vgnxtkq4y] {
    padding: 3px 9px; border: 0; border-right: 1px solid var(--color-border, #D0D7E3);
    background: var(--color-surface, #FFFFFF); color: var(--color-text-secondary, #5A6478);
    font-size: var(--text-xs, 0.75rem); font-weight: 600; cursor: pointer;
}
.subdetail__vbtn:last-child[b-1vgnxtkq4y] { border-right: 0; }
.subdetail__vbtn:hover:not(:disabled)[b-1vgnxtkq4y] { background: var(--color-surface-2, #F4F6FA); }
.subdetail__vbtn:disabled[b-1vgnxtkq4y] { opacity: 0.55; cursor: default; }
.subdetail__vbtn--correct.is-on[b-1vgnxtkq4y] { background: var(--color-accent-pale, #E6F7F2); color: var(--color-accent, #2EAA8A); }
.subdetail__vbtn--partial.is-on[b-1vgnxtkq4y] { background: #FFF3E0; color: #B96C00; }
.subdetail__vbtn--incorrect.is-on[b-1vgnxtkq4y] { background: #FDECEA; color: var(--color-error, #C0392B); }
.subdetail__edited[b-1vgnxtkq4y] { display: flex; align-items: center; gap: var(--space-2, 8px); margin-top: 4px; }
.subdetail__edited-tag[b-1vgnxtkq4y] {
    font-size: var(--text-xs, 0.7rem); font-weight: 700; color: var(--color-secondary, #2979CC);
    background: var(--color-secondary-pale, #E8F2FB); border-radius: 8px; padding: 1px 7px; cursor: help;
}
.subdetail__reset[b-1vgnxtkq4y] {
    border: 0; background: none; padding: 0; color: var(--color-secondary, #2979CC);
    font-size: var(--text-xs, 0.75rem); text-decoration: underline; cursor: pointer;
}
.subdetail__reset:disabled[b-1vgnxtkq4y] { opacity: 0.55; cursor: default; }
/* R63 — "Looks right": clear a flagged row's review flag (no mark change) so the banner counts down. */
/* 🔴 WO-215 T2.2 — a flagged answer's pair: "Agree" (keep Ivaro's mark) and "Change to …" (replaces "Looks right"). */
.subdetail__pair[b-1vgnxtkq4y] { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.subdetail__agree[b-1vgnxtkq4y], .subdetail__change[b-1vgnxtkq4y] {
    border-radius: 8px; padding: 2px 10px; font-size: var(--text-xs, 0.75rem); font-weight: 700; cursor: pointer; white-space: nowrap;
}
.subdetail__agree[b-1vgnxtkq4y] { border: 1px solid var(--color-success, #2E7D5B); background: var(--color-success-pale, #E7F4EC); color: var(--color-success, #2E7D5B); }
.subdetail__agree:hover:not(:disabled)[b-1vgnxtkq4y] { background: var(--color-success, #2E7D5B); color: #fff; }
.subdetail__change[b-1vgnxtkq4y] { border: 1px solid var(--color-border, #DDE3EC); background: var(--color-surface, #FFF); color: var(--color-text, #1F2733); }
.subdetail__change:hover:not(:disabled)[b-1vgnxtkq4y] { border-color: var(--color-primary, #1B3A6B); }
.subdetail__agree:disabled[b-1vgnxtkq4y], .subdetail__change:disabled[b-1vgnxtkq4y] { opacity: 0.55; cursor: default; }
/* Rows the structured reasons flag get a soft anchor; overridden rows get a left rule. */
.subdetail__row--flagged[b-1vgnxtkq4y] { background: #FFF8EC; }
.subdetail__row--edited td[b-1vgnxtkq4y] { box-shadow: inset 3px 0 0 var(--color-secondary, #2979CC); }

/* R56 — the bundled "optional — not chosen" choice-group prompts (not wrong, not counted). */
.subdetail__optional[b-1vgnxtkq4y] {
    margin-top: var(--space-4, 16px);
    padding: var(--space-3, 12px);
    border: 1px dashed var(--color-surface-3, #D9DEE8);
    border-radius: 10px;
    background: var(--color-surface-2, #F7F9FC);
}
.subdetail__optional-head[b-1vgnxtkq4y] { margin: 0 0 var(--space-2, 8px); font-size: var(--text-sm, 0.85rem); color: var(--color-text-muted, #5A6B85); }
.subdetail__optional-list[b-1vgnxtkq4y] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.subdetail__optional-item[b-1vgnxtkq4y] { display: flex; align-items: center; gap: var(--space-2, 8px); }
.subdetail__optional-q[b-1vgnxtkq4y] { font-weight: 600; color: var(--color-text, #24324A); }
.subdetail__optional-tag[b-1vgnxtkq4y] {
    font-size: var(--text-xs, 0.7rem); font-weight: 700; color: var(--color-text-muted, #5A6B85);
    background: var(--color-surface-3, #E8ECF3); border-radius: 8px; padding: 1px 8px;
}

/* R68 Part B — what the key expected, beside a wrong answer. Quiet subtext, like R65's auto-correction note:
   it is a reminder, not a verdict, and must not compete with the student's own answer above it. */
.subdetail__expected[b-1vgnxtkq4y] {
    display: block;
    margin-top: 2px;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #5A6478);
}

.subdetail__expected-label[b-1vgnxtkq4y] {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-muted, #8E97A8);
}

/* 🔴 The open-response case: no expected answer exists and none is invented. Italic so it reads as a statement
   about what we have, not as an answer. */
.subdetail__expected--none[b-1vgnxtkq4y] { font-style: italic; color: var(--color-text-muted, #8E97A8); }

.subdetail__keylink[b-1vgnxtkq4y] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary, #1B3A6B);
    font: inherit;
    font-style: normal;
    text-decoration: underline;
    cursor: pointer;
}

/* R68 — the inline key panel under the breakdown. */
.subdetail__keyblock[b-1vgnxtkq4y] { margin-top: var(--space-3, 12px); }

.subdetail__keytoggle[b-1vgnxtkq4y] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    margin-bottom: var(--space-2, 8px);
    padding: 4px 10px;
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 6px;
    background: var(--color-surface, #FFF);
    color: var(--color-primary, #1B3A6B);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none; /* R80 — now an <a target="_blank"> to the dedicated key page */
}

.subdetail__keytoggle:hover[b-1vgnxtkq4y] { border-color: var(--color-primary, #1B3A6B); }

/* WO-92 — an open ITEM hold on a row: the reason in the teacher's own words, and the row the review queue
   sent her to. The chip is informational; the action beside it is the existing "✓ Looks right". */
.subdetail__holdchip[b-1vgnxtkq4y] {
    display: block;
    margin-top: 4px;
    font-size: var(--text-xs, 0.75rem);
    line-height: 1.35;
    color: #7A4E12;
}
.subdetail__row--focus td[b-1vgnxtkq4y] { box-shadow: inset 3px 0 0 var(--color-accent, #2E7D6E); }
/* /Components/Shared/Intervention/DidItStickSection.razor.rz.scp.css */
/* IS-AP8 - "Did it stick?". The IS-AP6 result-card tones: green #1E6B3A on #E3F4EA · blue-grey #34495E on #E8EEF4 ·
   amber, never red, #6E4300 on #FFEFD1. */
.istick[b-hca19im0n7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    margin-top: var(--space-4, 16px);
    padding: var(--space-4, 16px);
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E2E6EE);
    border-radius: 8px;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.istick__title[b-hca19im0n7] {
    margin: 0;
    font-size: var(--text-lg, 1.125rem);
    color: var(--color-text-primary, #1F2A44);
}

.istick__chip[b-hca19im0n7] {
    display: inline-block;
    max-width: 100%;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.istick__chip--narrowed[b-hca19im0n7] { background: #E3F4EA; color: #1E6B3A; }
.istick__chip--same[b-hca19im0n7] { background: #E8EEF4; color: #34495E; }
.istick__chip--widened[b-hca19im0n7] { background: #FFEFD1; color: #6E4300; }

.istick__sets[b-hca19im0n7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3, 12px) var(--space-6, 24px);
    width: 100%;
}

.istick__set[b-hca19im0n7] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.istick__set-label[b-hca19im0n7] {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-primary, #1F2A44);
}

.istick__bar-row[b-hca19im0n7] {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) 3.5rem;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
}

.istick__bar-name[b-hca19im0n7] { color: var(--color-text-secondary, #5A6478); }
.istick__bar-value[b-hca19im0n7] { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text-primary, #1F2A44); }

.istick__track[b-hca19im0n7] {
    display: block;
    height: 8px;
    background: #EDEDED;
    border-radius: 999px;
    overflow: hidden;
}

.istick__bar[b-hca19im0n7] {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.istick__bar--before[b-hca19im0n7] { background: #9AA8BA; }
.istick__bar--after[b-hca19im0n7] { background: #34495E; }

.istick__line[b-hca19im0n7] {
    margin: 0;
    color: var(--color-text-primary, #1F2A44);
    overflow-wrap: anywhere;
}

.istick__muted[b-hca19im0n7] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 400;
    color: var(--color-text-secondary, #5A6478);
    overflow-wrap: anywhere;
}

.istick__footnote[b-hca19im0n7] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    font-style: italic;
    color: var(--color-text-secondary, #5A6478);
    overflow-wrap: anywhere;
}
/* /Components/Shared/Intervention/EvidenceLine.razor.rz.scp.css */
.evidence-line[b-ndk1euv2u6] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
/* /Components/Shared/Intervention/GroupEditor.razor.rz.scp.css */
.group-editor[b-c9o5tt7cha] {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface-2);
    border-radius: 8px;
}

.group-editor__compare[b-c9o5tt7cha] {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.group-editor__group[b-c9o5tt7cha] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
}

.group-editor__group-head[b-c9o5tt7cha] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2);
}

.group-editor__group-name[b-c9o5tt7cha] {
    font-weight: 600;
    color: var(--color-primary);
}

.group-editor__group-count[b-c9o5tt7cha] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.group-editor__chips[b-c9o5tt7cha] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.group-editor__chip-wrap[b-c9o5tt7cha] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.group-editor__move[b-c9o5tt7cha] {
    font-size: var(--text-xs);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 2px var(--space-1);
    background: var(--color-surface);
    color: var(--color-text-secondary);
}

.group-editor__empty[b-c9o5tt7cha] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

.group-editor__add[b-c9o5tt7cha] {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.group-editor__add-select[b-c9o5tt7cha] {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-sm);
    background: var(--color-surface);
}

.group-editor__note[b-c9o5tt7cha] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-style: italic;
    margin: var(--space-2) 0;
}

.group-editor__note--pending[b-c9o5tt7cha] {
    color: #E65100;
}

.group-editor__actions[b-c9o5tt7cha] {
    margin-top: var(--space-4);
    display: flex;
    justify-content: flex-end;
}
/* /Components/Shared/Intervention/GroupReceiveCard.razor.rz.scp.css */
/* IS-AP1 - the group Grading sent her here for. */
.igroup[b-b61ymvdyax] {
    background: var(--ivaro-surface, #fff);
    border: 1px solid var(--ivaro-border, #d9dee7);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin: 0 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.igroup__title[b-b61ymvdyax] {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
}

.igroup__muted[b-b61ymvdyax] {
    margin: 0;
    opacity: 0.75;
    font-size: 0.95rem;
}

.igroup__count[b-b61ymvdyax],
.igroup__students[b-b61ymvdyax],
.igroup__idea[b-b61ymvdyax] {
    margin: 0;
}

.igroup__standards[b-b61ymvdyax],
.igroup__pick[b-b61ymvdyax] {
    margin: 0;
    padding-left: 1.1rem;
}

.igroup__pick li[b-b61ymvdyax] {
    margin: 0.35rem 0;
}

.igroup__note[b-b61ymvdyax] {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--ivaro-accent, #c78a00);
    background: rgba(199, 138, 0, 0.08);
}

.igroup button[b-b61ymvdyax] {
    align-self: flex-start;
}
/* /Components/Shared/Intervention/ImpactBand.razor.rz.scp.css */
/* IS-AP7 - the slim impact band. Chip tones are IS-AP6's result-card tones (InterventionPlan.razor.css):
   green #1E6B3A on #E3F4EA · blue-grey #34495E on #E8EEF4 · amber, never red, #6E4300 on #FFEFD1 · grey #474747 on #EDEDED. */
.iband[b-1xbrp3t04x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E2E6EE);
    border-radius: 8px;
    min-width: 0;
}

.iband__top[b-1xbrp3t04x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px) var(--space-4, 16px);
}

.iband__headline[b-1xbrp3t04x] {
    margin: 0;
    font-weight: 600;
    color: var(--color-text-primary, #1F2A44);
    overflow-wrap: anywhere;
}

.iband__toggle[b-1xbrp3t04x] {
    display: inline-flex;
    border: 1px solid var(--color-border, #E2E6EE);
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}

.iband__toggle-btn[b-1xbrp3t04x] {
    border: 0;
    background: transparent;
    padding: 4px 12px;
    font: inherit;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #5A6478);
    cursor: pointer;
}

.iband__toggle-btn[aria-pressed="true"][b-1xbrp3t04x] {
    background: var(--color-primary, #1F2A44);
    color: #FFFFFF;
}

.iband__chips[b-1xbrp3t04x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.iband__chip[b-1xbrp3t04x] {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
}

.iband__chip--improved[b-1xbrp3t04x] { background: #E3F4EA; color: #1E6B3A; }
.iband__chip--same[b-1xbrp3t04x] { background: #E8EEF4; color: #34495E; }
/* IS-AP11 (I57) - light green (#2D6A43 on #F1F9F3, 6.0:1) · light amber, never red (#7A5212 on #FFF7E8, 6.5:1) */
.iband__chip--slight[b-1xbrp3t04x] { background: #F1F9F3; color: #2D6A43; }
.iband__chip--slightlower[b-1xbrp3t04x] { background: #FFF7E8; color: #7A5212; }
.iband__chip--lower[b-1xbrp3t04x] { background: #FFEFD1; color: #6E4300; }
.iband__chip--unknown[b-1xbrp3t04x] { background: #EDEDED; color: #474747; }

/* IS-AP8 (I48) - "31 results:" ahead of the chips when results and students differ. */
.iband__results[b-1xbrp3t04x] {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
}

/* IS-AP8 - "Checked again on later work: …". */
.iband__checked[b-1xbrp3t04x] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #1F2A44);
    overflow-wrap: anywhere;
}

.iband__waiting[b-1xbrp3t04x] {
    font-size: var(--text-sm, 0.875rem);
}

.iband__footnote[b-1xbrp3t04x] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-muted, #6B7385);
}

@media (max-width: 600px) {
    .iband__chip[b-1xbrp3t04x] { white-space: normal; }
}
/* /Components/Shared/Intervention/InsightCard.razor.rz.scp.css */
.insight-card[b-b303v8lsbo] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: var(--space-6);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    border-left-width: 3px;
    border-left-style: solid;
}

.insight-card--warning[b-b303v8lsbo] { border-left-color: var(--color-warning); }
.insight-card--accent[b-b303v8lsbo] { border-left-color: var(--color-accent); }
.insight-card--info[b-b303v8lsbo] { border-left-color: var(--color-info); }

.insight-card__chips[b-b303v8lsbo] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.insight-card__kind-chip[b-b303v8lsbo] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: 20px;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--color-surface-3);
    color: var(--color-text-secondary);
}

.insight-card__headline[b-b303v8lsbo] {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.insight-card__determination[b-b303v8lsbo] {
    margin: 0 0 var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--text-base);
}

.insight-card__links[b-b303v8lsbo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-2);
}

.insight-card__see-work[b-b303v8lsbo] {
    background: none;
    border: none;
    color: var(--color-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.insight-card__see-work:hover[b-b303v8lsbo] { color: var(--color-secondary-light); }

/* IS-M2 — the accepted state's hand-off to the plan page. An <a> styled as the card's primary action. */
.insight-card__plan-link[b-b303v8lsbo] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.insight-card__step[b-b303v8lsbo] {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.insight-card__step-label[b-b303v8lsbo] {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    font-weight: 600;
}

.insight-card__step-text[b-b303v8lsbo] {
    margin: var(--space-1) 0 0;
    color: var(--color-text-primary);
    font-weight: 500;
}

.insight-card__actions[b-b303v8lsbo] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    flex-wrap: wrap;
}

.insight-card__dropdown[b-b303v8lsbo] {
    position: relative;
}

.insight-card__dismiss-btn[b-b303v8lsbo] {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-2) var(--space-4);
    color: var(--color-error);
    font-size: var(--text-sm);
    cursor: pointer;
}

.insight-card__menu[b-b303v8lsbo] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    margin-top: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 220px;
    display: flex;
    flex-direction: column;
    padding: var(--space-1);
}

.insight-card__menu button[b-b303v8lsbo] {
    background: none;
    border: none;
    text-align: left;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    border-radius: 6px;
}

.insight-card__menu button:hover[b-b303v8lsbo] {
    background: var(--color-surface-2);
}

.insight-card__fix-link[b-b303v8lsbo] {
    margin-left: var(--space-1);
    color: var(--color-secondary);
    font-size: var(--text-xs);
}
/* /Components/Shared/Intervention/NothingUrgent.razor.rz.scp.css */
.nothing-urgent[b-5dlz6lvv2j] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    background: var(--color-accent-pale);
    border-radius: 10px;
    border: 1px solid rgba(46, 170, 138, 0.2);
}

.nothing-urgent__icon[b-5dlz6lvv2j] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-accent);
    color: white;
    font-size: var(--text-sm);
    font-weight: 700;
    flex-shrink: 0;
}

.nothing-urgent__text[b-5dlz6lvv2j] {
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--text-base);
}
/* /Components/Shared/Intervention/OutcomeCard.razor.rz.scp.css */
/* IS-M3 — the outcome card's own scoped layout (03 §9). Global design system only; no borrowed
   scoped classes (the June-2026 gotcha). */

.outcome[b-aod8v1g8xe] { display: flex; flex-direction: column; gap: var(--space-3); }

.outcome__not-ready[b-aod8v1g8xe] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.outcome__events[b-aod8v1g8xe] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
}

.outcome__strength[b-aod8v1g8xe] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.outcome__group[b-aod8v1g8xe] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    border-radius: 8px;
}

.outcome__group-label[b-aod8v1g8xe] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.outcome__group-nums[b-aod8v1g8xe] { color: var(--color-text-secondary); }

.outcome__rows[b-aod8v1g8xe] { display: flex; flex-direction: column; gap: var(--space-1); }

.outcome__row[b-aod8v1g8xe] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-surface-3);
    font-size: var(--text-sm);
}

.outcome__name[b-aod8v1g8xe] { color: var(--color-text-primary); }
.outcome__nums[b-aod8v1g8xe] { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }

.outcome__det[b-aod8v1g8xe] {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: var(--space-1) var(--space-2);
    border-radius: 20px;
    white-space: nowrap;
}

.outcome__det--up[b-aod8v1g8xe]   { background: var(--color-accent-pale); color: var(--color-accent); }
.outcome__det--flat[b-aod8v1g8xe] { background: var(--color-surface-3); color: var(--color-text-secondary); }
/* Decline is shown as plainly as improvement — muted amber, never hidden and never alarming. */
.outcome__det--down[b-aod8v1g8xe] { background: #FFF3E0; color: #E65100; }
.outcome__det--unknown[b-aod8v1g8xe] { background: var(--color-surface-3); color: var(--color-text-muted); }

.outcome__missing[b-aod8v1g8xe], .outcome__disclaimer[b-aod8v1g8xe] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.outcome__disclaimer[b-aod8v1g8xe] {
    font-style: italic;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-surface-3);
}

.outcome__actions[b-aod8v1g8xe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* IS-M3F — 03 §9's per-student summary, between the group row and the rows it scales. Reads as a
   statement, not a caption: the group's single word must never be the only aggregate signal. */
.outcome__summary[b-aod8v1g8xe] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

@media (max-width: 640px) {
    .outcome__row[b-aod8v1g8xe] { grid-template-columns: 1fr; gap: var(--space-1); }
}
/* /Components/Shared/Intervention/ProgressReportButton.razor.rz.scp.css */
/* IS-AP10 - the report modal: the house dialog (ReteachGroups' WO-246 dialog look), no red. */
.iprr__open[b-7pafxj5urg] { white-space: nowrap; }
.iprr__backdrop[b-7pafxj5urg] { position: fixed; inset: 0; background: rgba(27, 58, 107, 0.35); z-index: 1000; }
.iprr__dialog[b-7pafxj5urg] {
    position: fixed; z-index: 1001; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
    background: var(--color-surface, #FFFFFF); border: 1px solid var(--color-border, #D0D7E3); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(27, 58, 107, 0.22);
    padding: var(--space-5, 20px); display: flex; flex-direction: column; gap: var(--space-3, 12px);
}
.iprr__trap[b-7pafxj5urg] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.iprr__title[b-7pafxj5urg] { margin: 0; font-family: var(--font-display, serif); font-size: var(--text-xl, 1.25rem); color: var(--color-text-primary, #1B3A6B); }
.iprr__group[b-7pafxj5urg] { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.iprr__legend[b-7pafxj5urg] { font-size: var(--text-sm, 0.875rem); font-weight: 600; color: var(--color-text-secondary, #5A6478); margin-bottom: var(--space-1, 4px); }
.iprr__radio[b-7pafxj5urg], .iprr__check[b-7pafxj5urg] { display: flex; align-items: center; gap: var(--space-2, 8px); cursor: pointer; }
.iprr__select[b-7pafxj5urg] { margin-left: var(--space-6, 24px); max-width: calc(100% - var(--space-6, 24px)); padding: var(--space-2, 8px); border: 1px solid var(--color-border, #D0D7E3); border-radius: 6px; font: inherit; }
.iprr__range[b-7pafxj5urg] { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); margin-left: var(--space-6, 24px); }
.iprr__range input[b-7pafxj5urg] { font: inherit; padding: var(--space-1, 4px); border: 1px solid var(--color-border, #D0D7E3); border-radius: 6px; }
.iprr__note[b-7pafxj5urg] { margin: 0; font-size: var(--text-sm, 0.875rem); color: var(--color-text-secondary, #5A6478); }
.iprr__actions[b-7pafxj5urg] { display: flex; align-items: center; gap: var(--space-3, 12px); margin-top: var(--space-1, 4px); }
.iprr__download--off[b-7pafxj5urg] { opacity: 0.55; cursor: not-allowed; }
.iprr__link-btn[b-7pafxj5urg] {
    background: none; border: none; padding: var(--space-1, 4px) var(--space-2, 8px); cursor: pointer;
    color: var(--color-primary, #1B3A6B); font: inherit; text-decoration: underline;
}
/* /Components/Shared/Intervention/ReteachPacketsCard.razor.rz.scp.css */
/* IS-AP5 - the assignment's "Reteach packets" card. */
.irpc[b-llhjvykfee] { padding: var(--space-4) var(--space-6); }
.irpc__title[b-llhjvykfee] { margin: 0 0 var(--space-3); font-size: var(--text-lg); color: var(--color-text-primary); }
.irpc__list[b-llhjvykfee] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.irpc__row[b-llhjvykfee] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}
.irpc__row:last-child[b-llhjvykfee] { border-bottom: none; }
.irpc[b-llhjvykfee] { min-width: 0; max-width: 100%; box-sizing: border-box; }
.irpc__list[b-llhjvykfee], .irpc__row[b-llhjvykfee] { min-width: 0; }
/* Every row alike: both halves have a fixed basis, so every row wraps at the same card width. */
.irpc__main[b-llhjvykfee] { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.irpc__muted[b-llhjvykfee] { color: var(--color-text-secondary); font-size: var(--text-sm); }
.irpc__actions[b-llhjvykfee] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); flex: 1 1 22rem; min-width: 0; max-width: 100%; }
.irpc__actions > *[b-llhjvykfee] { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.irpc__badge[b-llhjvykfee] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}
.irpc__badge--ready[b-llhjvykfee] { color: var(--color-primary); }

/* Navy fill + white text (11.3:1) in every link state: the global `a:hover` colour must not pale it. */
.irpc__btn[b-llhjvykfee],
.irpc__btn:link[b-llhjvykfee],
.irpc__btn:visited[b-llhjvykfee],
.irpc__btn:hover[b-llhjvykfee] {
    background: var(--color-primary);
    color: #fff;
    border-radius: 6px;
    padding: var(--space-2) var(--space-4);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
}
.irpc__link[b-llhjvykfee] { font-size: var(--text-sm); }

/* IS-AP6 1b - placeholder rows while the reads run. No SharedUI skeleton class exists (only component-scoped ones, e.g.
   ClassContextPicker's .class-ctx__skeleton), so the card carries its own, on the house surface tokens. */
.irpc__bone[b-llhjvykfee] {
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg,
        var(--color-surface-2, #F4F6FA) 0%,
        var(--color-surface-3, #E8ECF3) 50%,
        var(--color-surface-2, #F4F6FA) 100%);
    background-size: 200% 100%;
    animation: irpc-shimmer-b-llhjvykfee 1.4s ease infinite;
}
.irpc__bone--title[b-llhjvykfee] { width: 60%; height: 1.1rem; }
.irpc__bone--line[b-llhjvykfee] { width: 30%; height: 0.8rem; margin-top: 0.35rem; }
.irpc__bone--button[b-llhjvykfee] { width: 13rem; height: 2.3rem; }
@keyframes irpc-shimmer-b-llhjvykfee {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .irpc__bone[b-llhjvykfee] { animation: none; }
}
.irpc__sr-only[b-llhjvykfee] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* IS-AP6 1d - a failed read: a sentence and "Try again", never an endless skeleton. */
.irpc__error[b-llhjvykfee] { margin: 0 0 var(--space-3); color: var(--color-text-primary); }
.irpc__retry[b-llhjvykfee] {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: var(--space-2) var(--space-4);
    font-weight: 600;
    cursor: pointer;
}

/* IS-AP7 Task 3 - a Ready row's result, and the assignment line. Chip tones are IS-AP6's result-card tones: green
   #1E6B3A on #E3F4EA · blue-grey #34495E on #E8EEF4 · amber, never red, #6E4300 on #FFEFD1 · grey #474747 on #EDEDED. */
.irpc__result[b-llhjvykfee] { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; margin-top: 0.15rem; font-size: var(--text-xs, 0.75rem); }
.irpc__result > *[b-llhjvykfee] { white-space: nowrap; }
.irpc__result .irpc__muted[b-llhjvykfee] { font-size: inherit; }
.irpc__chip[b-llhjvykfee] { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: inherit; font-weight: 600; }
.irpc__chip--improved[b-llhjvykfee] { background: #E3F4EA; color: #1E6B3A; }
.irpc__chip--same[b-llhjvykfee] { background: #E8EEF4; color: #34495E; }
/* IS-AP11 (I57) - light green (#2D6A43 on #F1F9F3, 6.0:1) · light amber, never red (#7A5212 on #FFF7E8, 6.5:1) */
.irpc__chip--slight[b-llhjvykfee] { background: #F1F9F3; color: #2D6A43; }
.irpc__chip--slightlower[b-llhjvykfee] { background: #FFF7E8; color: #7A5212; }
.irpc__chip--lower[b-llhjvykfee] { background: #FFEFD1; color: #6E4300; }
.irpc__chip--unknown[b-llhjvykfee] { background: #EDEDED; color: #474747; }
/* IS-AP8 - "Checked again: gap …". Narrowed green, about the same blue-grey, widened amber - never red. */
.irpc__chip--stick-narrowed[b-llhjvykfee] { background: #E3F4EA; color: #1E6B3A; }
.irpc__chip--stick-same[b-llhjvykfee] { background: #E8EEF4; color: #34495E; }
.irpc__chip--stick-widened[b-llhjvykfee] { background: #FFEFD1; color: #6E4300; }
.irpc__totals[b-llhjvykfee] { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
/* /Components/Shared/Intervention/StrengthChip.razor.rz.scp.css */
.strength-chip[b-p2h0ym4051] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: 20px;
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: help;
}

.strength-chip--strong[b-p2h0ym4051] {
    background: var(--color-accent-pale);
    color: var(--color-accent);
    border: 1px solid rgba(46, 170, 138, 0.25);
}

.strength-chip--moderate[b-p2h0ym4051] {
    background: var(--color-secondary-pale);
    color: var(--color-secondary);
    border: 1px solid rgba(41, 121, 204, 0.25);
}

.strength-chip--limited[b-p2h0ym4051] {
    background: var(--color-surface-3);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.strength-chip__dot[b-p2h0ym4051] {
    font-size: 0.7rem;
}
/* /Components/Shared/Intervention/StudentChip.razor.rz.scp.css */
.student-chip[b-6sx7av3wvn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
    border-radius: 20px;
    font-size: var(--text-sm);
    font-weight: 500;
    background: var(--color-accent-pale);
    color: var(--color-accent);
    border: 1px solid rgba(46, 170, 138, 0.25);
}

.student-chip--unmatched[b-6sx7av3wvn] {
    background: var(--color-surface-3);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
    font-style: italic;
}

.student-chip--pending[b-6sx7av3wvn] {
    background: #FFF3E0;
    color: #E65100;
    border-color: rgba(230, 81, 0, 0.25);
}

.student-chip__remove[b-6sx7av3wvn] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    line-height: 1;
    color: inherit;
    padding: 0;
}
/* /Components/Shared/Intervention/WhyDrawer.razor.rz.scp.css */
.why-drawer[b-4w2ycse43o] {
    margin: var(--space-2) 0;
}

.why-drawer__toggle[b-4w2ycse43o] {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.why-drawer__toggle:hover[b-4w2ycse43o] {
    color: var(--color-secondary-light);
}

.why-drawer__caret[b-4w2ycse43o] {
    font-size: 0.65rem;
}

.why-drawer__body[b-4w2ycse43o] {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface-2);
    border-radius: 8px;
    font-size: var(--text-sm);
}

.why-drawer__rule[b-4w2ycse43o] {
    margin: 0 0 var(--space-3);
    color: var(--color-text-primary);
}

.why-drawer__factors[b-4w2ycse43o] {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
}

.why-drawer__factor--yes[b-4w2ycse43o] {
    color: var(--color-accent);
}

.why-drawer__factor--no[b-4w2ycse43o] {
    color: var(--color-warning);
}

.why-drawer__help[b-4w2ycse43o] {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
}

.why-drawer__help-label[b-4w2ycse43o] {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.why-drawer__help ul[b-4w2ycse43o] {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-5);
    color: var(--color-text-secondary);
}

.why-drawer__loading[b-4w2ycse43o] {
    margin: 0;
    color: var(--color-text-muted);
}
/* /Components/Shared/Landing/LandingFrame.razor.rz.scp.css */
/* 🔴 PLAT-WO-05c T1 — the frame: the mock's layout, Ivaro's tokens only (no new hex, no rgba; the kit's token test
   covers this file). The mock's beige panel is --color-surface-2, the studios' gray canvas. */

.lp-page[b-tyse5i9tg1] {
    min-height: 100vh;
    padding: var(--space-4);
    background: var(--color-surface);
}

.lp-panel[b-tyse5i9tg1] {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    min-height: calc(100vh - 2 * var(--space-4));
    margin: 0 auto;
    padding: var(--space-6) var(--space-12) var(--space-5);
    border: 1px solid var(--color-border);   /* PLAT-WO-09a T1.3 — Ruby: "a little plain" */
    border-radius: 24px;
    background: var(--color-surface-2);
}

/* ── Header ── */

.lp-header[b-tyse5i9tg1] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

.lp-brand[b-tyse5i9tg1] {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    border-radius: 8px;
    text-decoration: none;
}

.lp-brand__owl[b-tyse5i9tg1] { display: block; width: 48px; height: 48px; object-fit: contain; }

/* PLAT-WO-05d — the navy wordmark image: 32px tall (28px on a phone); the width follows. */
.lp-brand__wordmark[b-tyse5i9tg1] { display: block; height: 32px; width: auto; }

.lp-about[b-tyse5i9tg1] {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.lp-about:hover[b-tyse5i9tg1] { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; }

.lp-about__short[b-tyse5i9tg1] { display: none; }

.lp-brand:focus-visible[b-tyse5i9tg1],
.lp-about:focus-visible[b-tyse5i9tg1] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ── Main ── */

.lp-main[b-tyse5i9tg1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-6) 0;
}

.lp-main--centered[b-tyse5i9tg1] { align-items: center; }

/* ── Footer ── */

.lp-footer[b-tyse5i9tg1] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.lp-sr[b-tyse5i9tg1] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Phone (390×844): tighter panel; "About Ivaro" shortens to "About ↗" (its full name stays for screen readers). ── */

@media (max-width: 600px) {
    .lp-page[b-tyse5i9tg1] { padding: var(--space-2); }

    .lp-panel[b-tyse5i9tg1] {
        min-height: calc(100vh - 2 * var(--space-2));
        padding: var(--space-5) var(--space-4) var(--space-4);
        border-radius: 16px;
    }

    .lp-brand__owl[b-tyse5i9tg1] { width: 40px; height: 40px; }
    .lp-brand__wordmark[b-tyse5i9tg1] { height: 28px; }

    .lp-about__long[b-tyse5i9tg1] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .lp-about__short[b-tyse5i9tg1] { display: inline; }

    .lp-main[b-tyse5i9tg1] { padding: var(--space-6) 0; justify-content: flex-start; }

    .lp-footer[b-tyse5i9tg1] { flex-direction: column; gap: var(--space-1); }
}
/* /Components/Shared/Landing/SignInCard.razor.rz.scp.css */
/* 🔴 PLAT-WO-05c T1 — the sign-in card (PLAT-WO-11a T1: sign-in only; the trial's styles moved to TrialCard): the mock's layout, Ivaro's tokens only (no new hex, no rgba; the kit's
   token test covers this file). The card itself is .ivaro-card (white, the app's border and soft shadow). */

.lp-card[b-1sj1nmfhmk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    max-width: 380px;
    padding: var(--space-8) var(--space-8) var(--space-6);
    border-radius: 16px;
}

.lp-card__heading[b-1sj1nmfhmk] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.lp-card__line[b-1sj1nmfhmk] {
    margin: calc(-1 * var(--space-2)) 0 var(--space-1);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.lp-card__error[b-1sj1nmfhmk] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-error);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-error);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}

/* Ruling 2 — the account-twin line, small helper text under the providers. */
.lp-card__twin[b-1sj1nmfhmk] {
    margin: calc(-1 * var(--space-1)) 0 0;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-align: center;
}

.lp-card__sr[b-1sj1nmfhmk] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 600px) {
    .lp-card[b-1sj1nmfhmk] { max-width: none; padding: var(--space-6) var(--space-5); }
}
/* /Components/Shared/Landing/SignInProviderButtons.razor.rz.scp.css */
/* 🔴 PLAT-WO-10e — the provider buttons' styles, moved here unchanged from SignInCard.razor.css when the buttons became their
   own component (so Save your profile reuses them). Tokens only. */


/* ── Providers: PLAT-WO-05's Google button (its light theme in app tokens), at the mock's size ── */

.lp-card__providers[b-lqjtm5kxzw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.lp-card__provider[b-lqjtm5kxzw],
.lp-card__provider:visited[b-lqjtm5kxzw],
.lp-card__provider:hover[b-lqjtm5kxzw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 48px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-text-secondary);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.lp-card__provider:hover[b-lqjtm5kxzw] {
    background: var(--color-surface-2);
    border-color: var(--color-primary);
}

.lp-card__provider-mark[b-lqjtm5kxzw] { width: 20px; height: 20px; flex: 0 0 20px; }


.lp-card__provider:focus-visible[b-lqjtm5kxzw] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}
/* /Components/Shared/Landing/TrialCard.razor.rz.scp.css */
/* 🔴 PLAT-WO-11a T1 — the trial card: the same white .ivaro-card look as the sign-in card, Ivaro's tokens only (no new
   hex, no rgba; the kit's token test covers this file). The button and price styles moved here from SignInCard. */

.lp-trial[b-hlfzlbvzmn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    max-width: 380px;
    padding: var(--space-8) var(--space-8) var(--space-6);
    border-radius: 16px;
}

.lp-trial__heading[b-hlfzlbvzmn] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-text-primary);
}

.lp-trial__line[b-hlfzlbvzmn] {
    margin: calc(-1 * var(--space-2)) 0 var(--space-1);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Solid navy with white text (the onboarding header's colour); NOT .btn-cta. */
.lp-trial__button[b-hlfzlbvzmn],
.lp-trial__button:visited[b-hlfzlbvzmn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    padding: var(--space-4) var(--space-5);
    border-radius: 10px;
    background: var(--color-primary);
    color: white;
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
}

.lp-trial__button:hover[b-hlfzlbvzmn] {
    background: var(--color-primary-light);
    color: white;
}

.lp-trial__button:focus-visible[b-hlfzlbvzmn] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.lp-trial__price[b-hlfzlbvzmn],
.lp-trial__no-card[b-hlfzlbvzmn] {
    margin: 0;
    font-family: var(--font-body);
    text-align: center;
    color: var(--color-text-secondary);
}

.lp-trial__price[b-hlfzlbvzmn] { margin-top: calc(-1 * var(--space-1)); font-size: var(--text-sm); }
.lp-trial__price strong[b-hlfzlbvzmn] { color: var(--color-text-primary); }
.lp-trial__no-card[b-hlfzlbvzmn] { margin-top: calc(-1 * var(--space-3)); font-size: var(--text-xs); }

@media (max-width: 600px) {
    .lp-trial[b-hlfzlbvzmn] { max-width: none; padding: var(--space-6) var(--space-5); }
}
/* /Components/Shared/Materials/MaterialFindOrAddBox.razor.rz.scp.css */
/* PLAT-WO-10f - "Add a classroom item": the combobox, its chips, the Add chip, and her own items.
   The onboarding kit's chip look (mat__chip). Tokens only: no colour literals, no raw px font sizes. */

.mfab[b-av9addjo2s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    max-width: 36rem;
}

.mfab__field[b-av9addjo2s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.mfab__label-row[b-av9addjo2s] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-3);
}

.mfab__label[b-av9addjo2s] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.mfab__hint[b-av9addjo2s] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.mfab__input[b-av9addjo2s] {
    min-width: 0;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-text-secondary);
    border-radius: 8px;
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.mfab__input:focus-visible[b-av9addjo2s] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.mfab__input:disabled[b-av9addjo2s] { background: var(--color-surface-2); }

/* ── The chips ──────────────────────────────────────────────── */

.mfab__chips[b-av9addjo2s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mfab__chip[b-av9addjo2s] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    max-width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.mfab__chip:hover[b-av9addjo2s] { border-color: var(--color-secondary); }

.mfab__chip--active[b-av9addjo2s] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.mfab__chip--on[b-av9addjo2s],
.mfab__item-chip--on[b-av9addjo2s] {
    border: 2px solid var(--color-accent);
    padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
    background: var(--color-accent-pale);
}

.mfab__chip--add[b-av9addjo2s] {
    border-style: dashed;
    border-color: var(--color-primary);
}

.mfab__check[b-av9addjo2s] {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-text-secondary);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-surface);
}

.mfab__chip--on .mfab__check[b-av9addjo2s],
.mfab__item-chip--on .mfab__check[b-av9addjo2s] {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.mfab__chip-name[b-av9addjo2s] {
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

/* ── The lines under the box ────────────────────────────────── */

.mfab__sr[b-av9addjo2s] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The status line keeps its height empty, so the page doesn't jump when a message arrives. */
.mfab__status[b-av9addjo2s] {
    min-height: calc(var(--text-sm) * 1.5);
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.mfab__status--ok[b-av9addjo2s] { color: var(--color-text-primary); font-weight: 600; }

.mfab__status--problem[b-av9addjo2s] {
    padding-left: var(--space-3);
    border-left: 3px solid var(--color-error);
    color: var(--color-text-primary);
}

/* ── Her own items ──────────────────────────────────────────── */

.mfab__items[b-av9addjo2s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mfab__h3[b-av9addjo2s] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-primary);
}

.mfab__list[b-av9addjo2s] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mfab__note[b-av9addjo2s] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* A guest's item: an "on" chip with a remove x. */
.mfab__added[b-av9addjo2s] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    border: 2px solid var(--color-accent);
    border-radius: 999px;
    background: var(--color-accent-pale);
}

.mfab__added-name[b-av9addjo2s] {
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.mfab__remove[b-av9addjo2s] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
}

.mfab__remove:hover[b-av9addjo2s] { background: var(--color-surface); }

.mfab__remove:focus-visible[b-av9addjo2s] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 1px;
}

/* A signed-in teacher's item: an on/off chip that saves itself. */
.mfab__item[b-av9addjo2s] { position: relative; min-width: 0; }

.mfab__item-input[b-av9addjo2s] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.mfab__item-chip[b-av9addjo2s] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    cursor: pointer;
}

.mfab__item-chip:hover[b-av9addjo2s] { border-color: var(--color-secondary); }

.mfab__item-input:focus-visible + .mfab__item-chip[b-av9addjo2s] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .mfab__chip[b-av9addjo2s] { transition: none; }
}
/* /Components/Shared/Materials/TypeMaterialBox.razor.rz.scp.css */
/* PLAT-WO-09g - "Don't see it? Type it": the box, its one status line, and her added items as checked chips.
   Tokens only: no colour literals, no raw px font sizes. */

.tmb[b-w0yyzrr6qx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.tmb__field[b-w0yyzrr6qx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.tmb__label[b-w0yyzrr6qx] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.tmb__row[b-w0yyzrr6qx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tmb__input[b-w0yyzrr6qx] {
    flex: 1 1 14rem;
    min-width: 0;
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-text-secondary);
    border-radius: 8px;
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.tmb__input:focus-visible[b-w0yyzrr6qx] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.tmb__input:disabled[b-w0yyzrr6qx] { background: var(--color-surface-2); }

.tmb__add[b-w0yyzrr6qx] {
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
}

.tmb__add:hover:not(:disabled)[b-w0yyzrr6qx] { background: var(--color-surface-2); }

.tmb__add:focus-visible[b-w0yyzrr6qx] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.tmb__add:disabled[b-w0yyzrr6qx] {
    border-color: var(--color-border);
    color: var(--color-text-secondary);
    cursor: default;
}

/* The status line keeps its height empty, so the page doesn't jump when a message arrives. */
.tmb__status[b-w0yyzrr6qx] {
    min-height: calc(var(--text-sm) * 1.5);
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.tmb__status--ok[b-w0yyzrr6qx] { color: var(--color-text-primary); font-weight: 600; }

.tmb__status--problem[b-w0yyzrr6qx] {
    padding-left: var(--space-3);
    border-left: 3px solid var(--color-error);
    color: var(--color-text-primary);
}

/* ── Her added items ────────────────────────────────────────── */

.tmb__items[b-w0yyzrr6qx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tmb__h3[b-w0yyzrr6qx] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-primary);
}

.tmb__list[b-w0yyzrr6qx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tmb__chip-wrap[b-w0yyzrr6qx] { position: relative; min-width: 0; }

.tmb__chip-input[b-w0yyzrr6qx] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.tmb__chip[b-w0yyzrr6qx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.tmb__chip:hover[b-w0yyzrr6qx] { border-color: var(--color-secondary); }

.tmb__chip-input:focus-visible + .tmb__chip[b-w0yyzrr6qx] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.tmb__chip--on[b-w0yyzrr6qx] {
    border: 2px solid var(--color-accent);
    padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
    background: var(--color-accent-pale);
}

.tmb__check[b-w0yyzrr6qx] {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--color-text-secondary);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-surface);
}

.tmb__chip--on .tmb__check[b-w0yyzrr6qx] {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.tmb__chip-name[b-w0yyzrr6qx] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}
/* /Components/Shared/Notifications/NotificationBell.razor.rz.scp.css */
/* PLAT-WO-09f - the notification bell, its panel and its toast. Tokens only: no colour literals, no raw px font sizes. */

.nbell-host[b-bblk6gwphf] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ── The bell ───────────────────────────────────────────────────────────────────────────── */

.nbell[b-bblk6gwphf] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.nbell:hover[b-bblk6gwphf] {
    background: var(--color-surface-2);
    color: var(--color-primary);
}

.nbell:focus-visible[b-bblk6gwphf],
.nbell__item:focus-visible[b-bblk6gwphf],
.nbell__link:focus-visible[b-bblk6gwphf],
.nbell__toast-close:focus-visible[b-bblk6gwphf] {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

.nbell__badge[b-bblk6gwphf] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    border-radius: 9px;
    background: var(--color-error);
    color: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

/* ── The panel ──────────────────────────────────────────────────────────────────────────── */

/* A transparent layer behind the panel: a click anywhere outside closes it. */
.nbell__scrim[b-bblk6gwphf] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

.nbell__panel[b-bblk6gwphf] {
    position: fixed;
    top: 56px;
    right: var(--space-4);
    z-index: 1000;
    width: min(380px, calc(100vw - 2 * var(--space-4)));
    max-height: min(520px, calc(100vh - 72px));
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 var(--space-2) var(--space-6) var(--color-border);
    overflow: hidden;
}

.nbell__panel-head[b-bblk6gwphf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.nbell__panel-title[b-bblk6gwphf] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.nbell__link[b-bblk6gwphf] {
    padding: var(--space-1) var(--space-2);
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--color-primary-light);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.nbell__link:hover:not(:disabled)[b-bblk6gwphf] {
    background: var(--color-secondary-pale);
}

.nbell__link:disabled[b-bblk6gwphf] {
    color: var(--color-text-secondary);
    cursor: default;
}

.nbell__empty[b-bblk6gwphf] {
    margin: 0;
    padding: var(--space-8) var(--space-4);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.nbell__list[b-bblk6gwphf] {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.nbell__row + .nbell__row[b-bblk6gwphf] {
    border-top: 1px solid var(--color-surface-3);
}

.nbell__item[b-bblk6gwphf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--color-text-primary);
}

.nbell__item:hover[b-bblk6gwphf] {
    background: var(--color-surface-2);
}

.nbell__item--unread[b-bblk6gwphf] {
    background: var(--color-secondary-pale);
}

.nbell__item--unread:hover[b-bblk6gwphf] {
    background: var(--color-primary-pale);
}

.nbell__item-text[b-bblk6gwphf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.nbell__item-title[b-bblk6gwphf] {
    font-size: var(--text-sm);
    font-weight: 400;
}

.nbell__item--unread .nbell__item-title[b-bblk6gwphf] {
    font-weight: 700;
}

.nbell__item-subject[b-bblk6gwphf] {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.nbell__item-time[b-bblk6gwphf] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.nbell__item-open[b-bblk6gwphf] {
    flex: 0 0 auto;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary-light);
}

/* ── The toast ──────────────────────────────────────────────────────────────────────────── */

.nbell__toasts[b-bblk6gwphf] {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: 1100;
    max-width: calc(100vw - 2 * var(--space-4));
}

.nbell__toast[b-bblk6gwphf] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 340px;
    max-width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: 10px;
    box-shadow: 0 var(--space-2) var(--space-6) var(--color-border);
}

.nbell__toast-text[b-bblk6gwphf] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.nbell__toast-title[b-bblk6gwphf] {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-primary);
}

.nbell__toast-subject[b-bblk6gwphf] {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.nbell__toast-more[b-bblk6gwphf] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.nbell__toast-open[b-bblk6gwphf] {
    flex: 0 0 auto;
}

.nbell__toast-close[b-bblk6gwphf] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: 1;
    cursor: pointer;
}

.nbell__toast-close:hover[b-bblk6gwphf] {
    background: var(--color-surface-2);
}

@media (max-width: 520px) {
    .nbell__toasts[b-bblk6gwphf] {
        right: var(--space-4);
        bottom: var(--space-4);
        left: var(--space-4);
        max-width: none;
    }

    .nbell__toast[b-bblk6gwphf] {
        width: 100%;
    }
}
/* /Components/Shared/Onboarding/Kit/FounderCard.razor.rz.scp.css */
/* PLAT-WO-02 T2d — the founder card. Tokens only.
   🔴 PLAT-WO-05 T1.5 — the studios' card (soft shadow kept), a brand-tinted placeholder disc, the note as a quote. */

.founder-card[b-28m7h4hokz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.founder-card__head[b-28m7h4hokz] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.founder-card__photo[b-28m7h4hokz] {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

/* The neutral placeholder: an initial on a quiet disc. No silhouette, no stock image. */
.founder-card__photo--placeholder[b-28m7h4hokz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-pale);
    color: var(--color-primary);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
}

.founder-card__byline[b-28m7h4hokz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    min-width: 0;
}

.founder-card__name[b-28m7h4hokz] {
    font-size: var(--text-lg);
    color: var(--color-text-primary);
}

.founder-card__credential[b-28m7h4hokz] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.founder-card__note[b-28m7h4hokz] {
    margin: 0;
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-accent);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text-primary);
}

.founder-card__video[b-28m7h4hokz] {
    width: 100%;
    border-radius: 8px;
    background: var(--color-primary);
}

.founder-card__transcript summary[b-28m7h4hokz] {
    cursor: pointer;
    color: var(--color-primary-light);
    font-size: var(--text-sm);
}

.founder-card__transcript p[b-28m7h4hokz] {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
    line-height: 1.55;
}

/* 🔴 PLAT-WO-16d T2 (U9) — inside Welcome's hero card, right under the headline: a quiet panel, not a card on a card. */
.founder-card--inset[b-28m7h4hokz] {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-2);
}
/* /Components/Shared/Onboarding/Kit/OnboardingHeader.razor.rz.scp.css */
/* 🔴 PLAT-WO-05 T1.1 — the onboarding brand bar. The navy, the logo sizing and the outlined sign-in link are
   Home.razor.css's own treatment (.home-page__nav*), in tokens only (its white alphas become the palette's pale and
   light blues, so the kit's token rule holds). */

.ob-header[b-nv3dcplri2] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-primary);
    color: white;
}

.ob-header__inner[b-nv3dcplri2] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-6);
    max-width: 1200px;
    height: 76px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.ob-header__brand[b-nv3dcplri2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    border-radius: 6px;
}

.ob-header__brand:focus-visible[b-nv3dcplri2] {
    outline: 3px solid var(--color-accent-light);
    outline-offset: 2px;
}

/* IvaroSideNav's lockup, a size up for the bar: the owl mark, the white wordmark, the tagline in caps. */
.ob-header__logo[b-nv3dcplri2] {
    display: block;
    height: 44px;
    width: auto;
    flex-shrink: 0;
}

.ob-header__wordmark[b-nv3dcplri2] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* PLAT-WO-05d — the wordmark image at the old text's cap height: --text-2xl (24px) × DM Sans' 0.7 cap = 16.8px,
   and the "I" fills 148 of the image's 158px, so 18px tall. */
.ob-header__name[b-nv3dcplri2] {
    display: block;
    align-self: flex-start;   /* a column flex item stretches; the width must follow the height */
    height: 18px;
    width: auto;
    margin-bottom: 3px;
}

.ob-header__tagline[b-nv3dcplri2] {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-primary-pale);
}

.ob-header__end[b-nv3dcplri2] {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

.ob-header__sr[b-nv3dcplri2] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── The chapter stepper ─────────────────────────────────────── */

.ob-stepper[b-nv3dcplri2] {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.ob-stepper__compact[b-nv3dcplri2] { display: none; }

.ob-stepper__list[b-nv3dcplri2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ob-stepper__item[b-nv3dcplri2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-primary-pale);
    white-space: nowrap;
}

/* The connector between chapters. */
.ob-stepper__item + .ob-stepper__item[b-nv3dcplri2]::before {
    content: "";
    display: block;
    width: var(--space-8);
    height: 2px;
    margin-right: var(--space-2);
    border-radius: 2px;
    background: var(--color-primary-light);
}

.ob-stepper__item--done + .ob-stepper__item[b-nv3dcplri2]::before { background: var(--color-accent-light); }

.ob-stepper__dot[b-nv3dcplri2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    border: 2px solid var(--color-secondary-light);
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1;
}

.ob-stepper__item--done[b-nv3dcplri2] { color: white; }

.ob-stepper__item--done .ob-stepper__dot[b-nv3dcplri2] {
    border-color: var(--color-accent-light);
    background: var(--color-accent-light);
    color: var(--color-primary);
}

.ob-stepper__item--current[b-nv3dcplri2] {
    color: white;
    font-weight: 700;
}

.ob-stepper__item--current .ob-stepper__dot[b-nv3dcplri2] {
    border-color: white;
    background: white;
    color: var(--color-primary);
}

/* Chromebook: the names stay; the connectors shorten. */
@media (max-width: 1100px) {
    .ob-stepper__item + .ob-stepper__item[b-nv3dcplri2]::before { width: var(--space-4); }
}

/* Narrow: "2 / 4  How I Can Help" in text, the list kept for screen readers. */
@media (max-width: 860px) {
    .ob-header__inner[b-nv3dcplri2] { gap: var(--space-4); height: 64px; padding: 0 var(--space-4); }
    .ob-header__logo[b-nv3dcplri2] { height: 36px; }
    .ob-header__name[b-nv3dcplri2] { height: 15px; margin-bottom: 0; }   /* --text-xl's cap height */
    .ob-header__tagline[b-nv3dcplri2] { display: none; }

    .ob-stepper[b-nv3dcplri2] { justify-content: flex-end; }

    .ob-stepper__compact[b-nv3dcplri2] {
        display: flex;
        align-items: baseline;
        gap: var(--space-2);
        margin: 0;
        font-size: var(--text-sm);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ob-stepper__compact-count[b-nv3dcplri2] {
        font-weight: 700;
        color: var(--color-accent-light);
    }

    .ob-stepper__compact-name[b-nv3dcplri2] { font-weight: 600; color: white; overflow: hidden; text-overflow: ellipsis; }

    .ob-stepper__list[b-nv3dcplri2] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .ob-header__inner--stepper .ob-header__end:empty[b-nv3dcplri2] { display: none; }
    .ob-header__inner--stepper[b-nv3dcplri2] { grid-template-columns: auto 1fr; }
}
/* /Components/Shared/Onboarding/Kit/OnboardingShell.razor.rz.scp.css */
/* PLAT-WO-02 T2a — the onboarding frame. 🔴 PLAT-WO-05 T1 — the studios' look: the app shell's gray canvas
   (--color-surface-2), white .ivaro-card cards (10px radius, the soft two-layer shadow), the studios' widths.
   Tokens only (Ivaro.Web/wwwroot/app.css). */

.ob-shell[b-k6r9nly97h] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--color-surface-2);
}

.ob-shell--embedded[b-k6r9nly97h] { min-height: 0; display: block; }

.ob-shell__main[b-k6r9nly97h] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.ob-shell__column[b-k6r9nly97h] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    max-width: 768px;          /* the focused ~720px content column, plus its gutters */
    margin: 0 auto;
    padding: var(--space-8) var(--space-6) var(--space-10);
}

.ob-shell__column--wide[b-k6r9nly97h] { max-width: 1128px; }   /* the studios' ~1080px content width (GradingDashboard: 1080) */

.ob-shell__sr[b-k6r9nly97h] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── The local step, above the card ─────────────────────────── */

.ob-shell__chapter[b-k6r9nly97h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-1);
}

.ob-shell__chapter-row[b-k6r9nly97h] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}

.ob-shell__chapter-label[b-k6r9nly97h] {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.ob-shell__step[b-k6r9nly97h] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.ob-shell__bar[b-k6r9nly97h] {
    display: flex;
    gap: var(--space-1);
}

.ob-shell__seg[b-k6r9nly97h] {
    flex: 1 1 0;
    height: var(--space-1);
    border-radius: var(--space-1);
    background: var(--color-surface-3);
}

.ob-shell__seg--done[b-k6r9nly97h] { background: var(--color-accent); }

/* ── The card ───────────────────────────────────────────────── */

.ob-shell__card[b-k6r9nly97h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-8);
}

.ob-shell__open[b-k6r9nly97h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.ob-shell__context[b-k6r9nly97h] {
    align-self: flex-start;
    margin: 0;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background: var(--color-primary-pale);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
}

.ob-shell__body[b-k6r9nly97h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ── Footer — inline at the card's foot on Chromebook and desktop ── */

.ob-shell__card .ob-shell__footer[b-k6r9nly97h] {
    margin: 0 calc(var(--space-8) * -1) calc(var(--space-8) * -1);
    padding: var(--space-5) var(--space-8);
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 10px 10px;
    background: var(--color-surface);
}

.ob-shell__open .ob-shell__footer[b-k6r9nly97h] { margin-top: var(--space-2); }

.ob-shell__nav[b-k6r9nly97h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/* PLAT-WO-09g1 - the secondary action ("Skip for now") is wrapped, so a phone can give it its own row. */
.ob-shell__secondary[b-k6r9nly97h] { display: flex; }

/* Continue sits right even when there is no Back. */
.ob-shell__continue[b-k6r9nly97h] { margin-left: auto; min-width: 180px; }

.ob-shell__back[b-k6r9nly97h],
.ob-shell__continue[b-k6r9nly97h] { min-height: 48px; box-sizing: border-box; line-height: 1.25; }

.ob-shell__continue:disabled[b-k6r9nly97h] {
    opacity: 0.6;
    cursor: not-allowed;
    filter: none;
}

.ob-shell__footer-inner[b-k6r9nly97h]  :is(button, a):focus-visible,
.ob-shell__nav button:focus-visible[b-k6r9nly97h] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ── PLAT-WO-16c T2 — Continue's one-time shimmer (the hello step only: ShimmerContinue) ──────────────────────────
   A light sweeps once along a ring just OUTSIDE the button, shortly after the screen appears, and is gone. The ring never
   sits behind the label: the label's backdrop at every frame is --gradient-cta itself (worst 4.76:1 with white, luminance
   0.171 <= 0.183). A white band across the label would not do: even 4% white lifts the teal end to 4.42:1.
   The ring (inset -9px to -6px) sits beyond the focus outline (3px at offset 2px: -2px to -5px), and outlines paint over
   positioned content, so the focus ring stays visible during and after it. One iteration, no timer, nothing infinite;
   declared only under prefers-reduced-motion: no-preference, so reduced motion has no shimmer at all. */

.ob-shell__continue--shimmer[b-k6r9nly97h] { position: relative; }

@media (prefers-reduced-motion: no-preference) {
    .ob-shell__continue--shimmer[b-k6r9nly97h]::after {
        content: "";
        position: absolute;
        inset: -9px;
        padding: 3px;
        border-radius: 12px;
        background: linear-gradient(110deg, transparent 40%, var(--color-accent-light) 50%, transparent 60%);
        background-size: 300% 100%;
        -webkit-mask: linear-gradient(var(--color-primary) 0 0) content-box, linear-gradient(var(--color-primary) 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(var(--color-primary) 0 0) content-box exclude, linear-gradient(var(--color-primary) 0 0);
        pointer-events: none;
        opacity: 0;
        animation: ob-shell-shimmer-b-k6r9nly97h 1400ms ease-in-out 700ms 1 both;
    }
}

@keyframes ob-shell-shimmer-b-k6r9nly97h {
    0%   { opacity: 0; background-position: 100% 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; background-position: 0% 0; }
}

/* ── Phone — the footer is sticky, with safe-area padding ──── */

@media (max-width: 640px) {
    .ob-shell__column[b-k6r9nly97h] {
        gap: var(--space-3);
        padding: var(--space-5) var(--space-4) 0;
    }

    .ob-shell__card[b-k6r9nly97h] { padding: var(--space-5); gap: var(--space-5); }

    .ob-shell__footer[b-k6r9nly97h],
    .ob-shell__card .ob-shell__footer[b-k6r9nly97h],
    .ob-shell__open .ob-shell__footer[b-k6r9nly97h] {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin: var(--space-2) calc(var(--space-4) * -1) 0;
        padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        border-top: 1px solid var(--color-border);
        background: var(--color-surface);
    }

    /* Inside a card the sticky bar spans the card's padding too. */
    .ob-shell__card .ob-shell__footer[b-k6r9nly97h] { margin: var(--space-2) calc(var(--space-5) * -1) calc(var(--space-5) * -1); }

    .ob-shell__nav[b-k6r9nly97h] { flex-wrap: wrap; }
    .ob-shell__nav > *[b-k6r9nly97h] { flex: 1 1 0; }
    .ob-shell__continue[b-k6r9nly97h] { min-width: 0; }

    /* Back and Continue share the first row; the secondary action gets its own row underneath. */
    .ob-shell__nav > .ob-shell__secondary[b-k6r9nly97h] { order: 3; flex: 1 0 100%; justify-content: center; }
}
/* /Components/Shared/Onboarding/Kit/OwlCallout.razor.rz.scp.css */
/* PLAT-WO-02 T2b — the owl callout. Tokens only.
   🔴 PLAT-WO-05 T1.5 — the callout now sits on a white studio card, so the bubble takes the canvas gray. */

.owl-callout[b-cp6zs1tgw4] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
}

.owl-callout__owl[b-cp6zs1tgw4] {
    flex: 0 0 auto;
    width: 112px;
    height: auto;
}

/* PLAT-WO-16e T0b — hello's owl is larger (Kevin's mockup), and its wave sits on pure white: multiply melts the white
   background into the white card. The width/height attributes keep its box from jumping before the video loads. */
.owl-callout--hello .owl-callout__owl[b-cp6zs1tgw4] {
    display: block;
    width: 160px;
    height: auto;
    mix-blend-mode: multiply;
}

.owl-callout__bubble[b-cp6zs1tgw4] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: var(--space-6);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface-2);
}

/* The tail points at the owl: a bordered square, turned, tucked under the bubble's edge. */
.owl-callout__bubble[b-cp6zs1tgw4]::before {
    content: "";
    position: absolute;
    left: calc(var(--space-2) * -1 - 1px);
    bottom: var(--space-6);
    width: var(--space-4);
    height: var(--space-4);
    background: var(--color-surface-2);
    border-left: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    transform: rotate(45deg);
}

.owl-callout__message[b-cp6zs1tgw4] {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--color-text-primary);
}

.owl-callout__bubble[b-cp6zs1tgw4]  p { margin: 0; }

/* PLAT-WO-10c — the bubble's two text roles, the same on every screen. The title is the screen's one heading
   (or .owl-callout__title); the line is at most one more sentence under it. */
.owl-callout__bubble[b-cp6zs1tgw4]  h1 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
}

.owl-callout__bubble[b-cp6zs1tgw4]  h2 {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
}

.owl-callout__bubble[b-cp6zs1tgw4]  .owl-callout__title {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
}

.owl-callout__bubble[b-cp6zs1tgw4]  .owl-callout__line {
    margin: var(--space-2) 0 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-primary);
}

@media (prefers-reduced-motion: no-preference) {
    .owl-callout--enter .owl-callout__owl[b-cp6zs1tgw4],
    .owl-callout--enter .owl-callout__bubble[b-cp6zs1tgw4] {
        animation: owl-callout-in-b-cp6zs1tgw4 360ms ease-out both;
    }

    .owl-callout--enter .owl-callout__bubble[b-cp6zs1tgw4] { animation-delay: 120ms; }
}

@keyframes owl-callout-in-b-cp6zs1tgw4 {
    from { opacity: 0; transform: translateY(var(--space-2)); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
    .owl-callout[b-cp6zs1tgw4] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .owl-callout__owl[b-cp6zs1tgw4] { width: 80px; }

    .owl-callout--hello .owl-callout__owl[b-cp6zs1tgw4] { width: 128px; }

    .owl-callout__bubble[b-cp6zs1tgw4] { margin-bottom: 0; padding: var(--space-4) var(--space-5); }

    /* The tail turns to point up at the owl above. */
    .owl-callout__bubble[b-cp6zs1tgw4]::before {
        left: var(--space-8);
        top: calc(var(--space-2) * -1 - 1px);
        bottom: auto;
        border-left: 1px solid var(--color-border);
        border-bottom: none;
        border-top: 1px solid var(--color-border);
    }

    .owl-callout__message[b-cp6zs1tgw4] { font-size: var(--text-base); }

    .owl-callout__bubble[b-cp6zs1tgw4]  h1 { font-size: var(--text-lg); }

    .owl-callout__bubble[b-cp6zs1tgw4]  h2 { font-size: var(--text-lg); }

    .owl-callout__bubble[b-cp6zs1tgw4]  .owl-callout__title { font-size: var(--text-lg); }
}
/* /Components/Shared/Onboarding/Kit/SelectCardGroup.razor.rz.scp.css */
/* PLAT-WO-02 T2c — selectable cards and chips. Tokens only; every option is styled the same.
   🔴 PLAT-WO-05 T1.5 — unchanged: already the studios' option treatment (bordered, 10px radius, secondary hover,
   teal selection). The kit's token rule allows no shadow literal, and brief §13 prefers borders to shadows. */

.scg[b-8j45ywt21t] {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.scg__legend[b-8j45ywt21t] {
    padding: 0;
    margin-bottom: var(--space-2);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-text-primary);
}

.scg__sr[b-8j45ywt21t] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.scg__helper[b-8j45ywt21t] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.scg__count[b-8j45ywt21t] { font-weight: 600; }

/* PLAT-WO-03 — the optional helper line under the legend. */
.scg__description[b-8j45ywt21t] {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.scg__options[b-8j45ywt21t] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.scg--chips .scg__options[b-8j45ywt21t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.scg__exclusive[b-8j45ywt21t] {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-surface-3);
}

.scg__item[b-8j45ywt21t] { position: relative; min-width: 0; }

/* The native control stays in the tab order; its label is what she sees and taps. */
.scg__input[b-8j45ywt21t] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.scg__card[b-8j45ywt21t] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    height: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--text-base);
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.scg--chips .scg__card[b-8j45ywt21t] {
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
}

.scg__card:hover[b-8j45ywt21t] { border-color: var(--color-secondary); }

.scg__input:focus-visible + .scg__card[b-8j45ywt21t] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Selected — the app's selectable-card pattern (teal border, pale teal ground, check badge). PLAT-WO-11a T3: no word. */
.scg__card--on[b-8j45ywt21t] {
    border: 2px solid var(--color-accent);
    padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px);
    background: var(--color-accent-pale);
}

.scg--chips .scg__card--on[b-8j45ywt21t] { padding: calc(var(--space-2) - 1px) calc(var(--space-4) - 1px); }

.scg__check[b-8j45ywt21t] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-surface);
}

.scg__card--on .scg__check[b-8j45ywt21t] {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.scg__text[b-8j45ywt21t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1 1 auto;
    min-width: 0;
}

.scg__label[b-8j45ywt21t] { font-weight: 500; }

.scg__desc[b-8j45ywt21t] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* At the ceiling: still readable, clearly not available, and out of the tab order (native disabled). */
.scg__card--locked[b-8j45ywt21t] {
    cursor: not-allowed;
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
}

.scg__card--locked:hover[b-8j45ywt21t] { border-color: var(--color-border); }

/* A disabled group (e.g. while saving). */
.scg:disabled .scg__card[b-8j45ywt21t] {
    cursor: not-allowed;
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
}

.scg:disabled .scg__card:hover[b-8j45ywt21t] { border-color: var(--color-border); }

@media (max-width: 640px) {
    .scg__options[b-8j45ywt21t] { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .scg__card[b-8j45ywt21t] { transition: none; }
}
/* /Components/Shared/Onboarding/Kit/StudioCard.razor.rz.scp.css */
/* PLAT-WO-02 T2e — a studio card. Tokens only; the four cards are identical in treatment (no rainbow).
   🔴 PLAT-WO-05 T1.5 — the studios' card: it keeps .ivaro-card's soft shadow (no longer flattened). */

.studio-card[b-1xh4s21psp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: 100%;
}

.studio-card__sample[b-1xh4s21psp] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 7;
    border: 1px solid var(--color-surface-3);
    border-radius: 8px;
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    overflow: hidden;
}

.studio-card__sample img[b-1xh4s21psp] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.studio-card__sample-icon[b-1xh4s21psp] {
    width: 44px;
    height: 44px;
    opacity: 0.55;
}

.studio-card__head[b-1xh4s21psp] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.studio-card__icon[b-1xh4s21psp] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

.studio-card__name[b-1xh4s21psp] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
}

.studio-card__outcome[b-1xh4s21psp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
}

.studio-card__outcome-title[b-1xh4s21psp] {
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.studio-card__outcome-line[b-1xh4s21psp] {
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.studio-card__toggle[b-1xh4s21psp] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary-light);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.studio-card__chevron[b-1xh4s21psp] { transition: transform 0.15s ease; }
.studio-card__chevron--open[b-1xh4s21psp] { transform: rotate(180deg); }

.studio-card__example[b-1xh4s21psp] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 6px 6px 0;
    background: var(--color-surface-2);
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--color-text-primary);
}

.studio-card__example[hidden][b-1xh4s21psp] { display: none; }

.studio-card__cta[b-1xh4s21psp] {
    margin-top: auto;
    min-height: 44px;
    width: 100%;
}

.studio-card__cta:disabled[b-1xh4s21psp] { opacity: 0.6; cursor: not-allowed; }

.studio-card__toggle:focus-visible[b-1xh4s21psp],
.studio-card__cta:focus-visible[b-1xh4s21psp] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .studio-card__chevron[b-1xh4s21psp] { transition: none; }
}

/* ── PLAT-WO-03 T5 — the single-select variant ("Where should we start?") ─────────────────────── */
/* 🔴 PLAT-WO-05 T1.4/T1.5 — led by the studio's brand icon, on the studios' card (.ivaro-card: its radius and
   soft shadow), a secondary-border hover. Tokens only. */

.studio-card--select[b-1xh4s21psp] { position: relative; height: 100%; gap: 0; }

/* The native radio stays in the tab order; the card is its label. */
.studio-card__radio[b-1xh4s21psp] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.studio-card__select[b-1xh4s21psp] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    height: 100%;
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.studio-card__select:hover[b-1xh4s21psp] { border-color: var(--color-secondary); }

.studio-card__radio:focus-visible + .studio-card__select[b-1xh4s21psp] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Selected — the kit's selectable-card pattern: teal border, pale teal ground, check badge, the word. */
.studio-card__select--on[b-1xh4s21psp] {
    border: 2px solid var(--color-accent);
    padding: calc(var(--space-5) - 1px);
    background: var(--color-accent-pale);
}

.studio-card__radio:disabled + .studio-card__select[b-1xh4s21psp] { cursor: not-allowed; }

.studio-card__brand-icon[b-1xh4s21psp] {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: var(--color-surface);
    object-fit: contain;
}

.studio-card__select-main[b-1xh4s21psp] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    height: 100%;
}

.studio-card__select-head[b-1xh4s21psp] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.studio-card__check[b-1xh4s21psp] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: auto;
    border: 1.5px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-surface);
}

.studio-card__select--on .studio-card__check[b-1xh4s21psp] {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.studio-card__select-title[b-1xh4s21psp] {
    flex: 1 1 auto;
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
}

.studio-card__select-studio[b-1xh4s21psp] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
}

.studio-card__select-studio .studio-card__icon[b-1xh4s21psp] { width: 18px; height: 18px; }

@media (max-width: 640px) {
    .studio-card__select[b-1xh4s21psp] { gap: var(--space-3); padding: var(--space-4); }
    .studio-card__select--on[b-1xh4s21psp] { padding: calc(var(--space-4) - 1px); }
    .studio-card__brand-icon[b-1xh4s21psp] { flex-basis: 56px; width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
    .studio-card__select[b-1xh4s21psp] { transition: none; }
}
/* /Components/Shared/Onboarding/Kit/StudioCarousel.razor.rz.scp.css */
/* 🔴 PLAT-WO-05 T2.3 — the studio carousel. Each slide is a studio card (.ivaro-card in the markup: its radius, border
   and soft shadow); tokens only; the icons and example captures are images. One slide per view at every width. */

.carousel[b-gs7dbc3obx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* ── Controls: Pause/Play, the count, Previous / Next ── */

.carousel__controls[b-gs7dbc3obx] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.carousel__count[b-gs7dbc3obx] {
    margin-left: auto;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    font-variant-numeric: tabular-nums;
}

.carousel__arrows[b-gs7dbc3obx] { display: flex; gap: var(--space-2); }

.carousel__arrow[b-gs7dbc3obx],
.carousel__play[b-gs7dbc3obx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease;
}

.carousel__arrow[b-gs7dbc3obx] { padding: 0; }

.carousel__arrow:hover[b-gs7dbc3obx],
.carousel__play:hover[b-gs7dbc3obx] { border-color: var(--color-secondary); }

.carousel__arrow:focus-visible[b-gs7dbc3obx],
.carousel__play:focus-visible[b-gs7dbc3obx],
.carousel__dot:focus-visible[b-gs7dbc3obx] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ── The slide ── */

.carousel__slides[b-gs7dbc3obx] { min-width: 0; }

.carousel__slide[b-gs7dbc3obx] {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: stretch;
    min-height: 360px;
    overflow: hidden;
    padding: 0;                /* .ivaro-card gives the border, radius and soft shadow; the slide lays out its own */
}

.carousel__slide[hidden][b-gs7dbc3obx] { display: none; }

.carousel__text[b-gs7dbc3obx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8);
    min-width: 0;
}

.carousel__identity[b-gs7dbc3obx] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.carousel__icon[b-gs7dbc3obx] {
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    object-fit: contain;
}

.carousel__titles[b-gs7dbc3obx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}

.carousel__name[b-gs7dbc3obx] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-primary);
}

.carousel__badge[b-gs7dbc3obx] {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-3);
    border-radius: 999px;
    background: var(--color-primary);
    color: white;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.carousel__line[b-gs7dbc3obx] {
    margin: 0;
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--color-text-primary);
}

.carousel__features[b-gs7dbc3obx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.carousel__feature[b-gs7dbc3obx] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--text-base);
    line-height: 1.45;
    color: var(--color-text-secondary);
}

.carousel__feature svg[b-gs7dbc3obx] {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--color-accent);
}

/* The example: a real capture, framed on the canvas gray like a studio page. */
.carousel__visual[b-gs7dbc3obx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: var(--space-6);
    background: var(--color-surface-2);
    border-left: 1px solid var(--color-border);
}

.carousel__visual--stack[b-gs7dbc3obx] {
    flex-direction: column;
    gap: var(--space-4);
}

.carousel__visual--soon[b-gs7dbc3obx],
.carousel__visual--panel[b-gs7dbc3obx] { background: var(--color-primary-pale); }

.carousel__example[b-gs7dbc3obx] {
    width: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

/* PLAT-WO-10g — real PDF pages from the same lesson, small, under the capture. Images, not controls. */
.carousel__thumbs[b-gs7dbc3obx] {
    display: flex;
    gap: var(--space-3);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.carousel__thumb[b-gs7dbc3obx] {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.carousel__thumb img[b-gs7dbc3obx] {
    display: block;
    width: 100%;
    height: auto;
}

/* PLAT-WO-09a T4.3 — the capture is shown whole, big and crisp (it is a 2x image, so it stays sharp at this width). */
.carousel__example img[b-gs7dbc3obx] {
    display: block;
    width: 100%;
    height: auto;
}

.carousel__visual-icon[b-gs7dbc3obx] {
    width: min(200px, 60%);
    height: auto;
    opacity: 0.95;
}

/* The "Coming soon" panel (Project Studio, Instructional Partner): the studio icon, large, and the words. */
.carousel__soon-panel[b-gs7dbc3obx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    width: 100%;
    min-height: 280px;
    padding: var(--space-8);
    border: 1px dashed var(--color-primary-light);
    border-radius: 12px;
    background: var(--color-surface);
}

.carousel__soon-panel .carousel__visual-icon[b-gs7dbc3obx] { width: min(160px, 50%); }

.carousel__soon-label[b-gs7dbc3obx] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-primary);
}

/* PLAT-WO-09a T4.1 — the slide animates only when motion is welcome; under "reduce" the swap is instant. */
@media (prefers-reduced-motion: no-preference) {
    .carousel:not(.carousel--instant) .carousel__slide--current[b-gs7dbc3obx] { animation: carousel-in-b-gs7dbc3obx 240ms ease-out both; }
}

@keyframes carousel-in-b-gs7dbc3obx {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Dots ── */

.carousel__dots[b-gs7dbc3obx] {
    display: flex;
    justify-content: center;
    gap: var(--space-1);
}

.carousel__dot[b-gs7dbc3obx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.carousel__dot-mark[b-gs7dbc3obx] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--color-border);
    transition: width 0.15s ease, background 0.15s ease;
}

.carousel__dot:hover .carousel__dot-mark[b-gs7dbc3obx] { background: var(--color-text-muted); }

/* The current dot is longer AND darker — never colour alone. */
.carousel__dot--current .carousel__dot-mark[b-gs7dbc3obx] {
    width: 24px;
    background: var(--color-primary);
}

/* ── Chromebook ── */
@media (max-width: 1100px) {
    .carousel__text[b-gs7dbc3obx] { padding: var(--space-6); }
    .carousel__name[b-gs7dbc3obx] { font-size: var(--text-2xl); }
}

/* ── Phone: one slide per view, full width, stacked ── */
@media (max-width: 760px) {
    .carousel__slide[b-gs7dbc3obx] {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .carousel__text[b-gs7dbc3obx] { padding: var(--space-5); gap: var(--space-3); }
    .carousel__icon[b-gs7dbc3obx] { flex-basis: 64px; width: 64px; height: 64px; border-radius: 12px; }
    .carousel__name[b-gs7dbc3obx] { font-size: var(--text-xl); font-family: var(--font-body); font-weight: 700; }
    .carousel__line[b-gs7dbc3obx] { font-size: var(--text-base); }

    .carousel__visual[b-gs7dbc3obx] {
        padding: var(--space-4);
        border-left: 0;
        border-top: 1px solid var(--color-border);
    }

    .carousel__soon-panel[b-gs7dbc3obx] { min-height: 0; padding: var(--space-5); }

    .carousel__play span[b-gs7dbc3obx] { display: none; }
    .carousel__play[b-gs7dbc3obx] { padding: 0; }
}

/* PLAT-WO-10g — a phone shows the first two thumbnails, side by side, with no horizontal scroll. */
@media (max-width: 640px) {
    .carousel__thumb:nth-child(n + 3)[b-gs7dbc3obx] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .carousel__arrow[b-gs7dbc3obx], .carousel__play[b-gs7dbc3obx], .carousel__dot-mark[b-gs7dbc3obx] { transition: none; }
}
/* /Components/Shared/Onboarding/Kit/StudioLinkCard.razor.rz.scp.css */
/* PLAT-WO-10b T2 — a studio as a link card. Tokens only; the kit's card look with a hover / focus lift. */

.studio-link[b-6irxgghroa] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    height: 100%;
    box-sizing: border-box;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.studio-link:hover[b-6irxgghroa],
.studio-link:focus-visible[b-6irxgghroa] {
    transform: translateY(-2px);
    border-color: var(--color-secondary);
}

.studio-link:focus-visible[b-6irxgghroa] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.studio-link__icon[b-6irxgghroa] {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: contain;
}

.studio-link__text[b-6irxgghroa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.studio-link__name[b-6irxgghroa] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
}

.studio-link__line[b-6irxgghroa] {
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.studio-link__badge[b-6irxgghroa] {
    align-self: flex-start;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
}

@media (max-width: 640px) {
    .studio-link[b-6irxgghroa] { gap: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
    .studio-link[b-6irxgghroa] { transition: none; }
    .studio-link:hover[b-6irxgghroa],
    .studio-link:focus-visible[b-6irxgghroa] { transform: none; }
}
/* /Components/Shared/Onboarding/OnboardingFlow.razor.rz.scp.css */
/* WO-111 — the anonymous onboarding flow.
   Everything here uses the shared design tokens (app.css); the card, the
   buttons and the chips are the platform's, so the first screen a teacher ever sees looks like the
   product she is about to use. */

.onboarding-flow[b-jfdcvp3bpm] {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-8);
}

.onboarding-flow__card[b-jfdcvp3bpm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.onboarding-flow__error[b-jfdcvp3bpm] {
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: 8px;
    background: #FDECEA;
    color: var(--color-error);
    font-size: var(--text-sm);
}

/* ── Step header ─────────────────────────────────────────── */

.onboarding-flow__steps[b-jfdcvp3bpm] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.onboarding-flow__steps-dots[b-jfdcvp3bpm],
.onboarding-flow__dots[b-jfdcvp3bpm] {
    display: inline-flex;
    gap: 6px;
}

.onboarding-flow__dot[b-jfdcvp3bpm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-surface-3);
}

.onboarding-flow__dot--on[b-jfdcvp3bpm] { background: var(--color-secondary); }

/* ── Welcome + founder ───────────────────────────────────── */

.onboarding-flow__title[b-jfdcvp3bpm] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1.2;
    margin: 0;
}

.onboarding-flow__founder[b-jfdcvp3bpm] {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.onboarding-flow__founder-photo[b-jfdcvp3bpm] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--color-surface-2);
}

/* PLAT-WO-02a F3 — the text fills the card whether or not a photo sits beside it. */
.onboarding-flow__founder-text[b-jfdcvp3bpm] {
    flex: 1 1 auto;
    min-width: 0;
}

.onboarding-flow__founder-note[b-jfdcvp3bpm] {
    margin: 0 0 var(--space-2);
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.onboarding-flow__founder-credit[b-jfdcvp3bpm] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.onboarding-flow__founder-video[b-jfdcvp3bpm] {
    width: 100%;
    border-radius: 8px;
    background: #000;
}

.onboarding-flow__disclosure[b-jfdcvp3bpm] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: 8px;
    background: var(--color-secondary-pale);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

/* ── Questions, chips, goals ─────────────────────────────── */

.onboarding-flow__question[b-jfdcvp3bpm] {
    font-size: var(--text-xl);
    margin: 0;
    line-height: 1.35;
}

.onboarding-flow__hint[b-jfdcvp3bpm] {
    margin: calc(var(--space-2) * -1) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.onboarding-flow__goals[b-jfdcvp3bpm] {
    display: grid;
    gap: var(--space-3);
}

.onboarding-flow__goal[b-jfdcvp3bpm] {
    text-align: left;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.onboarding-flow__goal:hover:not(:disabled)[b-jfdcvp3bpm] { border-color: var(--color-secondary); }

.onboarding-flow__goal--on[b-jfdcvp3bpm] {
    border-color: var(--color-secondary);
    background: var(--color-secondary-pale);
}

.onboarding-flow__field[b-jfdcvp3bpm] { display: flex; flex-direction: column; gap: var(--space-2); }

.onboarding-flow__label[b-jfdcvp3bpm] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.onboarding-flow__chiprow[b-jfdcvp3bpm] { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.onboarding-flow__chip[b-jfdcvp3bpm] {
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.onboarding-flow__chip:hover:not(:disabled)[b-jfdcvp3bpm] { border-color: var(--color-secondary); }

.onboarding-flow__chip--on[b-jfdcvp3bpm] {
    border-color: var(--color-secondary);
    background: var(--color-secondary-pale);
    font-weight: 600;
}

.onboarding-flow__chip--wide[b-jfdcvp3bpm] { flex-basis: 100%; text-align: left; }

/* "Not sure yet" is a first-class answer, not an escape hatch — it reads like the others. */
.onboarding-flow__chip--unsure[b-jfdcvp3bpm] { border-style: dashed; }

.onboarding-flow__input[b-jfdcvp3bpm] {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font: inherit;
    color: var(--color-text-primary);
    background: var(--color-surface);
}

.onboarding-flow__progress[b-jfdcvp3bpm] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.onboarding-flow__progress-text[b-jfdcvp3bpm] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Starting Class Profile ──────────────────────────────── */

.onboarding-flow__headline[b-jfdcvp3bpm] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    margin: 0;
}

.onboarding-flow__profile-description[b-jfdcvp3bpm] {
    margin: 0;
    color: var(--color-text-secondary);
}

.onboarding-flow__profile[b-jfdcvp3bpm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-3);
}

.onboarding-flow__profile-line[b-jfdcvp3bpm] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-surface-3);
}

.onboarding-flow__profile-line:last-child[b-jfdcvp3bpm] { border-bottom: none; padding-bottom: 0; }

.onboarding-flow__profile-label[b-jfdcvp3bpm] { font-weight: 600; color: var(--color-text-secondary); }

/* A line she hasn't answered reads as quieter — it never invents a specific to fill the space. */
.onboarding-flow__profile-line--unset .onboarding-flow__profile-text[b-jfdcvp3bpm] { color: var(--color-text-muted); }

.onboarding-flow__profile-empty[b-jfdcvp3bpm] { margin: 0; color: var(--color-text-secondary); line-height: 1.55; }

.onboarding-flow__closing[b-jfdcvp3bpm] { margin: 0; color: var(--color-text-secondary); font-size: var(--text-sm); }

.onboarding-flow__gate[b-jfdcvp3bpm] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: 10px;
    background: var(--color-surface-2);
}

.onboarding-flow__gate-line[b-jfdcvp3bpm] { margin: 0; }

.onboarding-flow__retention[b-jfdcvp3bpm] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
}

.onboarding-flow__pending[b-jfdcvp3bpm] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* ── Actions ─────────────────────────────────────────────── */

.onboarding-flow__actions[b-jfdcvp3bpm] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.onboarding-flow__actions--center[b-jfdcvp3bpm] { justify-content: center; }

.onboarding-flow__next[b-jfdcvp3bpm] { min-width: 160px; text-align: center; text-decoration: none; }

@media (max-width: 560px) {
    .onboarding-flow__profile-line[b-jfdcvp3bpm] { grid-template-columns: 1fr; gap: 2px; }
    .onboarding-flow__founder[b-jfdcvp3bpm] { flex-direction: column; }
}

/* ── WO-112 T0 — the save gate's provider block ─────────────────────────── */

.onboarding-flow__save-action[b-jfdcvp3bpm] {
    margin: 0 0 0.25rem;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--ivaro-text, #1f2937);
}

/* WO-109's twin-prevention line. Quiet, but above the buttons, where it can still
   change what she taps. */
.onboarding-flow__twin-hint[b-jfdcvp3bpm] {
    margin: 0 0 0.9rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--ivaro-text-muted, #6b7280);
}

.onboarding-flow__providers[b-jfdcvp3bpm] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: stretch;
    max-width: 22rem;
    margin: 0 auto;
}

.onboarding-flow__provider[b-jfdcvp3bpm] {
    display: block;
    text-align: center;
    text-decoration: none;
}

.onboarding-flow__signin-alt[b-jfdcvp3bpm] {
    margin: 0.9rem 0 0;
    text-align: center;
    font-size: 0.85rem;
}

.onboarding-flow__signin-alt a[b-jfdcvp3bpm] {
    color: var(--ivaro-text-muted, #6b7280);
}
/* /Components/Shared/Onboarding/V22/OnboardingV22Flow.razor.rz.scp.css */
/* PLAT-WO-09e T2 — the flow's one line of its own: a status that could not be read. Tokens only. */

/* PLAT-WO-11g T2 - the line and its Try again button (the onboarding's secondary button, btn-save), stacked. */
.v22flow__failed[b-fhs7o4eepz] {
    max-width: 760px;
    margin: var(--space-8) auto 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.v22flow__error[b-fhs7o4eepz] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-error);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-error);
}
/* /Components/Shared/Onboarding/V22/V22Grades.razor.rz.scp.css */
/* PLAT-WO-09e T4.3 - Grades: only the save error is the screen's own. Tokens only. */

.grades__error[b-7cra0a0382] {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-error);
    border-radius: 0 6px 6px 0;
    background: var(--color-surface-2);
    color: var(--color-text-primary);
}
/* /Components/Shared/Onboarding/V22/V22Heading.razor.rz.scp.css */
/* PLAT-WO-09e - a v2.2 screen's heading. Tokens only; the sizes are the v2 setup's own.
   The plain title variant carries no type of its own: the screen that uses it supplies its look through CssClass. */

.v22h[b-0fs66n9ob7] {
    margin: 0;
}

.v22h:focus[b-0fs66n9ob7] { outline: none; }

/* The text of an owl callout takes its type from the kit's OwlCallout (PLAT-WO-10c). */
/* /Components/Shared/Onboarding/V22/V22Hello.razor.rz.scp.css */
/* PLAT-WO-16d T1 (U9) - hello: the owl callout, then the first-name field (moved from the retired name step, PLAT-WO-11b). Tokens only (the field is Standards' own box). */

.v22hello[b-cwkiig8dgq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.v22hello__field[b-cwkiig8dgq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
}

.v22hello__label[b-cwkiig8dgq] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.v22hello__input[b-cwkiig8dgq] {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-lg);
}

.v22hello__input:focus-visible[b-cwkiig8dgq] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    border-color: var(--color-secondary);
}

.v22hello__input[aria-invalid="true"][b-cwkiig8dgq] {
    border-color: var(--color-error);
}

.v22hello__hint[b-cwkiig8dgq] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.v22hello__error[b-cwkiig8dgq] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-error);
}

.v22hello__alert[b-cwkiig8dgq] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-error);
    border-radius: 0 6px 6px 0;
    background: var(--color-surface-2);
    color: var(--color-text-primary);
}
/* /Components/Shared/Onboarding/V22/V22Materials.razor.rz.scp.css */
/* PLAT-WO-09e T4.5 - v2.2 Materials: the picker's styles, copied from OnboardingMaterials (PLAT-WO-05b), so that page stays as v2.1 has it.
   (the kit's selected-tile pattern: teal border, pale teal ground, check badge), a search with native checkboxes,
   "You've added" chips, and a collapsed Browse. Compact so the default state fits one desktop / Chromebook screen.
   Tokens only (the kit's token test covers this file). */

/* The page tightens the shell's bottom gutter so the card and its actions fit 1366×768 with no page scroll. */
.mat-page[b-lh2kgber2k]  .ob-shell__column {
    padding-top: var(--space-5);
    padding-bottom: var(--space-4);
}

.mat-page[b-lh2kgber2k]  .ob-shell__card { padding-top: var(--space-6); }

.mat-page[b-lh2kgber2k]  .ob-shell__card .ob-shell__footer {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.mat[b-lh2kgber2k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.mat__head[b-lh2kgber2k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mat__title:focus[b-lh2kgber2k] { outline: none; }

.mat__lead[b-lh2kgber2k] {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.mat__note[b-lh2kgber2k],
.mat__count[b-lh2kgber2k] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.mat__error[b-lh2kgber2k] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-error);
    border-radius: 0 6px 6px 0;
    background: var(--color-surface-2);
    color: var(--color-text-primary);
}

.mat__sr[b-lh2kgber2k] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── The basics ─────────────────────────────────────────────── */

.mat__basics[b-lh2kgber2k] {
    min-width: 0;
    margin: 0;
    padding: var(--space-4) var(--space-5) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-2);
}

.mat__legend[b-lh2kgber2k] {
    float: left;               /* keeps the legend inside the fieldset's padding, beside the count */
    padding: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
}

.mat__basics > .mat__count[b-lh2kgber2k] {
    float: right;
    padding-top: var(--space-1);
}

.mat__chips[b-lh2kgber2k] {
    clear: both;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    padding-top: var(--space-3);
}

.mat__chip-wrap[b-lh2kgber2k] { position: relative; min-width: 0; }

.mat__chip-input[b-lh2kgber2k] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.mat__chip[b-lh2kgber2k] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 100%;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.mat__chip:hover[b-lh2kgber2k] { border-color: var(--color-secondary); }

.mat__chip-input:focus-visible + .mat__chip[b-lh2kgber2k] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.mat__chip--on[b-lh2kgber2k] {
    border: 2px solid var(--color-accent);
    padding: calc(var(--space-2) - 1px) calc(var(--space-3) - 1px);
    background: var(--color-accent-pale);
}

.mat__check[b-lh2kgber2k] {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-text-secondary);
    border-radius: 5px;
    background: var(--color-surface);
    color: var(--color-surface);
}

.mat__chip--on .mat__check[b-lh2kgber2k] {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.mat__chip-name[b-lh2kgber2k] {
    min-width: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-text-primary);
}

/* ── Add more ───────────────────────────────────────────────── */

.mat__more[b-lh2kgber2k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.mat__h2[b-lh2kgber2k] {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary);
}

.mat__h3[b-lh2kgber2k] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-primary);
}

.mat__search-row[b-lh2kgber2k] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3) var(--space-4);
}

.mat__search[b-lh2kgber2k] {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    gap: var(--space-1);
    max-width: 600px;
}

.mat__label-row[b-lh2kgber2k] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-3);
}

.mat__label[b-lh2kgber2k] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.mat__search-input[b-lh2kgber2k] {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-text-secondary);
    border-radius: 8px;
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.mat__search-input:focus-visible[b-lh2kgber2k] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.mat__hint[b-lh2kgber2k] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.mat__browse-toggle[b-lh2kgber2k] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
}

.mat__browse-toggle:hover[b-lh2kgber2k] { background: var(--color-primary-pale); }

.mat__browse-toggle:focus-visible[b-lh2kgber2k] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.mat__chevron[b-lh2kgber2k] { display: inline-flex; transition: transform 0.15s ease; }
.mat__chevron--open[b-lh2kgber2k] { transform: rotate(180deg); }

/* Native checkboxes, in the brand colour. */
.mat__box[b-lh2kgber2k] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.mat__box:focus-visible[b-lh2kgber2k] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.mat__results[b-lh2kgber2k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1) var(--space-4);
    max-width: 760px;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.mat__result[b-lh2kgber2k] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 36px;
}

.mat__result-label[b-lh2kgber2k] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    min-width: 0;
    cursor: pointer;
}

.mat__result-name[b-lh2kgber2k] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.mat__result-kind[b-lh2kgber2k] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.mat__nomatch[b-lh2kgber2k] {
    margin: 0;
    max-width: 72ch;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* ── You've added ───────────────────────────────────────────── */

.mat__added[b-lh2kgber2k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.mat__added-list[b-lh2kgber2k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.mat__added-chip[b-lh2kgber2k] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    border: 2px solid var(--color-accent);
    border-radius: 999px;
    background: var(--color-accent-pale);
}

.mat__added-name[b-lh2kgber2k] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-primary);
}

.mat__remove[b-lh2kgber2k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
}

.mat__remove:hover[b-lh2kgber2k] { background: var(--color-surface); }

.mat__remove:focus-visible[b-lh2kgber2k] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 1px;
}

/* PLAT-WO-10f - the one "Add a classroom item" box, and "Browse all" under it. */
.mat__find[b-lh2kgber2k] { max-width: 36rem; }

.mat__browse-row[b-lh2kgber2k] { display: flex; }

/* ── Browse ─────────────────────────────────────────────────── */

.mat__browse[b-lh2kgber2k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.mat__browse[hidden][b-lh2kgber2k] { display: none; }

.mat__group[b-lh2kgber2k] {
    min-width: 0;
    margin: 0;
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface-2);
}

.mat__group-title[b-lh2kgber2k] {
    padding: 0 var(--space-1);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
}

.mat__columns[b-lh2kgber2k] {
    columns: 4 200px;
    column-gap: var(--space-5);
    padding-top: var(--space-2);
}

.mat__browse-item[b-lh2kgber2k] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 32px;
    break-inside: avoid;
}

.mat__browse-label[b-lh2kgber2k] {
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    cursor: pointer;
}

/* ── Footer ─────────────────────────────────────────────────── */

.mat__actions[b-lh2kgber2k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
}

.mat__skip[b-lh2kgber2k],
.mat__save[b-lh2kgber2k] { min-height: 48px; }

.mat__save[b-lh2kgber2k] { min-width: 240px; }

.mat__save:disabled[b-lh2kgber2k],
.mat__skip:disabled[b-lh2kgber2k] { opacity: 0.6; cursor: not-allowed; }

.mat__skip:focus-visible[b-lh2kgber2k],
.mat__save:focus-visible[b-lh2kgber2k] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .mat__basics[b-lh2kgber2k] { padding: var(--space-3) var(--space-3) var(--space-4); }
    .mat__basics > .mat__count[b-lh2kgber2k] { float: none; clear: both; padding-top: var(--space-1); }
    .mat__chips[b-lh2kgber2k] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mat__results[b-lh2kgber2k] { grid-template-columns: minmax(0, 1fr); }
    .mat__search[b-lh2kgber2k] { flex-basis: 100%; max-width: none; }
    .mat__browse-toggle[b-lh2kgber2k] { margin-top: 0; }
    .mat__group[b-lh2kgber2k] { padding: var(--space-3); }
    .mat__columns[b-lh2kgber2k] { columns: 2 140px; }
    .mat__actions[b-lh2kgber2k] { flex-wrap: nowrap; }
    .mat__skip[b-lh2kgber2k] { flex: 0 0 auto; }
    .mat__save[b-lh2kgber2k] { flex: 1 1 auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mat__chip[b-lh2kgber2k],
    .mat__chevron[b-lh2kgber2k] { transition: none; }
}
/* /Components/Shared/Onboarding/V22/V22Meet.razor.rz.scp.css */
/* PLAT-WO-09e - v2.2 Meet: v2.1's Meet & Explore (copied from OnboardingV2FrontDoor). Tokens only.
   PLAT-WO-16d T3 - the screen-reader-only h1 is gone (its .v2__sr rule with it); "What Ivaro can do" is the one h1. */

/* ── Meet & Explore ──────────────────────────────────────────── */

.v2__meet[b-ny8gf7xb6y] { padding: var(--space-6) var(--space-8); }

/* PLAT-WO-16d T3 - the supportive line is now the bubble's only line: no gap above it. */
.v2__meet[b-ny8gf7xb6y]  .owl-callout__line:first-child { margin-top: 0; }

.v2__explore[b-ny8gf7xb6y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.v2__explore-heading[b-ny8gf7xb6y] {
    margin: var(--space-2) 0 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--color-primary);
}


@media (max-width: 760px) {
    .v2__meet[b-ny8gf7xb6y] { padding: var(--space-5); }
}
/* /Components/Shared/Onboarding/V22/V22ProfileDone.razor.rz.scp.css */
/* PLAT-WO-09e T5.1 - Transition 1: the owl, then two large cards (09c's saved screen, restyled here). Tokens only. */

.pdone[b-pbp4hal2nh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.pdone__cards[b-pbp4hal2nh] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

@media (max-width: 640px) {
    .pdone__cards[b-pbp4hal2nh] { grid-template-columns: minmax(0, 1fr); }
}

.pdone__card[b-pbp4hal2nh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: var(--space-5);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-primary);
    text-align: center;
    text-decoration: none;
    transition: background 0.15s ease;
}

.pdone__card:hover[b-pbp4hal2nh] { background: var(--color-primary-pale); }

.pdone__card:focus-visible[b-pbp4hal2nh] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.pdone__card--primary[b-pbp4hal2nh] {
    background: var(--color-primary);
    color: var(--color-surface);
}

.pdone__card--primary:hover[b-pbp4hal2nh] { background: var(--color-primary-light); }

.pdone__card-title[b-pbp4hal2nh] {
    font-size: var(--text-xl);
    font-weight: 700;
}

/* PLAT-WO-11e - the recommended card stacks its tag above the title. The tag follows the title in the markup, so the
   link's name reads "Set up your first class Recommended". */
.pdone__card:has(.pdone__badge)[b-pbp4hal2nh] {
    flex-direction: column;
    gap: var(--space-2);
}

/* "Recommended" is a word on a pill, never colour alone: ClassEntryStep's .centry__badge. The pill keeps its own pale
   fill, so its text contrast is the same on navy; only the border moves to the pale token so the pill's edge reads on
   navy. */
.pdone__badge[b-pbp4hal2nh] {
    order: -1;
    padding: 2px var(--space-3);
    border-radius: 999px;
    background: var(--color-accent-pale);
    border: 1px solid var(--color-accent-pale);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
    .pdone__card[b-pbp4hal2nh] { transition: none; }
}
/* /Components/Shared/Onboarding/V22/V22SaveProfile.razor.rz.scp.css */
/* PLAT-WO-10e T5 - "Save your profile": the owl, the landing card's provider buttons, and two small lines. Tokens only.
   The provider buttons' own styles come from SignInProviderButtons (the landing card's). */

.save22[b-pvksyo5gpp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.save22__providers[b-pvksyo5gpp] {
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
}

.save22__no-card[b-pvksyo5gpp],
.save22__guidance[b-pvksyo5gpp] {
    margin: 0;
    font-family: var(--font-body);
    text-align: center;
    color: var(--color-text-secondary);
}

.save22__no-card[b-pvksyo5gpp] { font-size: var(--text-base); font-weight: 600; color: var(--color-text-primary); }
.save22__guidance[b-pvksyo5gpp] { font-size: var(--text-sm); }

.save22__failure[b-pvksyo5gpp] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-error);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-error);
    font-family: var(--font-body);
    font-size: var(--text-sm);
}
/* /Components/Shared/Onboarding/V22/V22Standards.razor.rz.scp.css */
/* PLAT-WO-09e T4.2 - Standards: the opener above the card, the state picker's own box. Tokens only (the sizes are the
   v2 setup's own). */

.std__label[b-1m9a55bscx] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.std__input[b-1m9a55bscx] {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--text-lg);
}

.std__input:focus-visible[b-1m9a55bscx] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    border-color: var(--color-secondary);
}

.std__states[b-1m9a55bscx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
}

.std__note[b-1m9a55bscx] {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.std__error[b-1m9a55bscx] {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-error);
    border-radius: 0 6px 6px 0;
    background: var(--color-surface-2);
    color: var(--color-text-primary);
}
/* /Components/Shared/Onboarding/V22/V22Start.razor.rz.scp.css */
/* PLAT-WO-09e T5.2 - "Where should we start?": the four studio cards (the v2 setup's own layout). Tokens only. */

.start__title[b-pnccxpivnv] {
    margin: 0 0 var(--space-4);
}

.start__set[b-pnccxpivnv] {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.start__sr[b-pnccxpivnv] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.start__studios[b-pnccxpivnv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (max-width: 720px) {
    .start__studios[b-pnccxpivnv] { grid-template-columns: 1fr; }
}
/* /Components/Shared/Onboarding/V22/V22Subjects.razor.rz.scp.css */
/* PLAT-WO-09e T4.4 - Subjects: the loading line and the save error are the screen's own. Tokens only. */

.subj__note[b-jqu07de5oy] {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

.subj__error[b-jqu07de5oy] {
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-error);
    border-radius: 0 6px 6px 0;
    background: var(--color-surface-2);
    color: var(--color-text-primary);
}
/* /Components/Shared/Onboarding/V22/V22Welcome.razor.rz.scp.css */
/* PLAT-WO-09e - v2.2 Welcome: v2.1's branded hero and founder card (copied from OnboardingV2FrontDoor), without the
   returning-teacher sign-in link (she is signed in). Tokens only. */

/* ── Welcome: the hero ───────────────────────────────────────── */

.v2__hero[b-7pzcahp3kb] {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-10);
    /* PLAT-WO-11b T3 — not clipped: a tooltip opens below the strip and may hang past the card's foot. The art panel
       rounds its own corners instead (the card's 10 px less its 1 px border). */
    overflow: visible;
}

.v2__hero-copy[b-7pzcahp3kb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.v2__headline[b-7pzcahp3kb] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-primary);
}

.v2__tagline[b-7pzcahp3kb] {
    margin: 0;
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-primary-light);   /* --color-accent on white is 2.9:1 (axe); this is 7:1 */
}

.v2__actions[b-7pzcahp3kb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-2);
}

.v2__primary[b-7pzcahp3kb] {
    min-width: 220px;
    min-height: 52px;
    font-size: var(--text-lg);
}

.v2__primary:disabled[b-7pzcahp3kb] { opacity: 0.6; cursor: not-allowed; }

.v2__primary:focus-visible[b-7pzcahp3kb] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* The six products, as a quiet strip — the same icons the carousel and the website use. */
.v2__studio-strip[b-7pzcahp3kb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: var(--space-4) 0 0;
    list-style: none;
    border-top: 1px solid var(--color-surface-3);
}

.v2__studio-strip img[b-7pzcahp3kb] {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-surface-3);
}

/* PLAT-WO-10a T3 — each icon is a button with a tooltip. Hover and keyboard focus are CSS; tap and Esc are Blazor
   state (.is-open, .is-dismissed). The tooltip sits above the icon, anchored left for the first two, centred for the
   middle two and right for the last two, so it stays inside the viewport at 390 px.
   🔴 PLAT-WO-11b T3 — it opens BELOW the icon: above, it covered the hero's "Get started" button (11a's screenshot 05),
   and on a phone a tapped one stayed open over it. The strip is under the button, so below never reaches it. */
.v2__studio-strip li[b-7pzcahp3kb] { position: relative; }

.v2__studio-tip[b-7pzcahp3kb] {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 10px;
    cursor: pointer;
}

.v2__studio-tip:focus-visible[b-7pzcahp3kb] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

/* PLAT-WO-11a T4 (L4) — the info dot in each icon's top-right corner: navy, 16 px across, a lower-case "i" in white,
   with a 2 px white ring so it reads on the icon. Decoration only (aria-hidden); the same dot on a phone, and it
   takes no space, so the icons and the strip don't move. */
.v2__studio-dot[b-7pzcahp3kb] {
    position: absolute;
    top: calc(-1 * var(--space-1));
    right: calc(-1 * var(--space-1));
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-surface);
    color: var(--color-surface);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.v2__studio-sr[b-7pzcahp3kb] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.v2__studio-tooltip[b-7pzcahp3kb] {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: max-content;
    max-width: min(240px, calc(100vw - var(--space-10)));
    padding: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.v2__studio-strip li:nth-child(n+3):nth-child(-n+4) .v2__studio-tooltip[b-7pzcahp3kb] {
    left: 50%;
    transform: translateX(-50%);
}

.v2__studio-strip li:nth-child(n+5) .v2__studio-tooltip[b-7pzcahp3kb] {
    left: auto;
    right: 0;
}

.v2__studio-soon[b-7pzcahp3kb] {
    color: var(--color-text-secondary);
    font-weight: 700;
}

.v2__studio-strip li:hover .v2__studio-tooltip[b-7pzcahp3kb],
.v2__studio-tip:focus-visible + .v2__studio-tooltip[b-7pzcahp3kb],
.v2__studio-tooltip.is-open[b-7pzcahp3kb] {
    visibility: visible;
    opacity: 1;
}

.v2__studio-strip li.is-dismissed .v2__studio-tooltip[b-7pzcahp3kb] {
    visibility: hidden;
    opacity: 0;
}

.v2__hero-art[b-7pzcahp3kb] {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin: calc(var(--space-12) * -1) calc(var(--space-10) * -1) calc(var(--space-12) * -1) 0;
    padding: var(--space-8);
    background: var(--color-primary-pale);
    border-radius: 0 9px 9px 0;
}

.v2__hero-owl[b-7pzcahp3kb] {
    width: min(280px, 100%);
    height: auto;
}

/* PLAT-WO-16e T1.4 — the entrance plays ONCE: its class is set only in the interactive render (as OwlCallout's, 16d), and
   reduced motion still means no motion. */
@media (prefers-reduced-motion: no-preference) {
    .v2__hero-owl--enter[b-7pzcahp3kb] { animation: v2-owl-in-b-7pzcahp3kb 420ms ease-out both; }
}

@keyframes v2-owl-in-b-7pzcahp3kb {
    from { opacity: 0; transform: translateY(var(--space-2)); }
    to { opacity: 1; transform: none; }
}

/* ── Chromebook ── */
@media (max-width: 1100px) {
    .v2__hero[b-7pzcahp3kb] { padding: var(--space-10) var(--space-8); }
    .v2__hero-art[b-7pzcahp3kb] { margin: calc(var(--space-10) * -1) calc(var(--space-8) * -1) calc(var(--space-10) * -1) 0; }
}

/* ── Phone ── */
@media (max-width: 760px) {
    .v2__hero[b-7pzcahp3kb] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0;
    }

    .v2__hero-art[b-7pzcahp3kb] {
        order: -1;
        margin: 0;
        padding: var(--space-5);
        border-radius: 9px 9px 0 0;
    }

    .v2__hero-owl[b-7pzcahp3kb] { width: 132px; }

    .v2__hero-copy[b-7pzcahp3kb] { padding: var(--space-6) var(--space-5); gap: var(--space-4); }
    .v2__headline[b-7pzcahp3kb] { font-size: var(--text-3xl); }
    .v2__tagline[b-7pzcahp3kb] { font-size: var(--text-lg); }

    .v2__actions[b-7pzcahp3kb] { flex-direction: column; align-items: stretch; }
    .v2__primary[b-7pzcahp3kb] { width: 100%; min-width: 0; }

    .v2__studio-strip[b-7pzcahp3kb] { justify-content: center; }
    .v2__studio-strip img[b-7pzcahp3kb] { width: 40px; height: 40px; }

}
/* /Components/Shared/Onboarding/V22/V22Why.razor.rz.scp.css */
/* PLAT-WO-09e T3.2 - "Why are you here?": the owl callout and six large icon tiles. Tokens only.
   At least 2 columns on a phone and 3 on desktop. Selected = a token border plus a check mark. */

.why[b-vc0o9tpon2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.why__tiles[b-vc0o9tpon2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .why__tiles[b-vc0o9tpon2] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

.v22-tile[b-vc0o9tpon2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 132px;
    padding: var(--space-5) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.v22-tile:hover[b-vc0o9tpon2] { border-color: var(--color-secondary); }

.v22-tile:focus-visible[b-vc0o9tpon2] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.v22-tile--on[b-vc0o9tpon2] {
    border: 2px solid var(--color-accent);
    padding: calc(var(--space-5) - 1px) calc(var(--space-3) - 1px);
    background: var(--color-accent-pale);
}

.v22-tile__icon[b-vc0o9tpon2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-primary);
}

.v22-tile__icon svg[b-vc0o9tpon2],
.v22-tile__icon img[b-vc0o9tpon2] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.v22-tile__label[b-vc0o9tpon2] {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

.v22-tile__check[b-vc0o9tpon2] {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-surface);
}

.v22-tile__check:empty[b-vc0o9tpon2] { display: none; }

.why__error[b-vc0o9tpon2] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-error);
    border-radius: 0 6px 6px 0;
    background: var(--color-surface-2);
    color: var(--color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
    .v22-tile[b-vc0o9tpon2] { transition: none; }
}
/* /Components/Shared/Studios/StudioComingSoon.razor.rz.scp.css */
/* PLAT-WO-10b T6 — a coming-soon studio page. Tokens only; the same column as /dashboard. */

.soon[b-gw8g03bf48] {
    max-width: min(1440px, 94vw);
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

.soon__head[b-gw8g03bf48] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.soon__icon[b-gw8g03bf48] {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    object-fit: contain;
}

.soon__name[b-gw8g03bf48] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--color-text-primary);
}

.soon__badge[b-gw8g03bf48] {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.soon__headline[b-gw8g03bf48] {
    max-width: 28ch;
    margin: var(--space-6) 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1.2;
    color: var(--color-text-primary);
}

.soon__willdo[b-gw8g03bf48] {
    max-width: 62ch;
    margin: 0 0 var(--space-5);
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.soon__features[b-gw8g03bf48] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.soon__feature[b-gw8g03bf48] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    color: var(--color-text-primary);
}

.soon__check[b-gw8g03bf48] { flex: 0 0 auto; color: var(--color-primary); }

.soon__owl[b-gw8g03bf48] { margin: 0 0 var(--space-6); }

.soon__studios[b-gw8g03bf48] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
}

.soon__back[b-gw8g03bf48] { margin: var(--space-6) 0 0; }

.soon__back-link[b-gw8g03bf48] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    color: var(--color-primary);
}

.soon__back-link:focus-visible[b-gw8g03bf48] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .soon[b-gw8g03bf48] { max-width: none; }
    .soon__name[b-gw8g03bf48],
    .soon__headline[b-gw8g03bf48] { font-size: var(--text-2xl); }
    .soon__studios[b-gw8g03bf48] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Shared/Watchlist/WatchlistPage.razor.rz.scp.css */
/* 🔴 PLAT-WO-16g T2 — the temporary watchlist home page, to Kevin's approved mockup. Tokens only (app.css). The frame is the
   onboarding shell's (the gray canvas, a focused ~720px column, one white .ivaro-card); the owl and bubble are hello's
   (OwlCallout's sizes: 160px, 128px on a phone); the shimmer is OnboardingShell's, once, never under reduced motion. */

.wl[b-9azdfjjx7c] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--color-surface-2);
}

/* "Team sign-in", at the header's right end: the outlined link on the navy bar. */
.wl__team[b-9azdfjjx7c] {
    color: var(--color-primary-pale);
    font-size: var(--text-sm);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--color-primary-light);
    border-radius: 6px;
    padding: 7px var(--space-3);
}

.wl__team:hover[b-9azdfjjx7c] { background: var(--color-primary-light); }

.wl__team:focus-visible[b-9azdfjjx7c] {
    outline: 3px solid var(--color-accent-light);
    outline-offset: 2px;
}

.wl__main[b-9azdfjjx7c] {
    flex: 1 1 auto;
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-6) var(--space-12);
}

.wl__card[b-9azdfjjx7c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-8);
}

/* ── The owl and its speech bubble ── */

.wl__callout[b-9azdfjjx7c] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
}

.wl__owl[b-9azdfjjx7c] {
    flex: 0 0 auto;
    display: block;
    width: 160px;
    height: auto;
    mix-blend-mode: multiply;   /* the wave's white background melts into the white card */
}

.wl__bubble[b-9azdfjjx7c] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: var(--space-6);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-surface-2);
}

/* The tail points at the owl. */
.wl__bubble[b-9azdfjjx7c]::before {
    content: "";
    position: absolute;
    left: calc(var(--space-2) * -1 - 1px);
    bottom: var(--space-6);
    width: var(--space-4);
    height: var(--space-4);
    background: var(--color-surface-2);
    border-left: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    transform: rotate(45deg);
}

.wl__title[b-9azdfjjx7c] {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-primary);
}

.wl__line[b-9azdfjjx7c] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--color-text-primary);
}

/* ── The form ── */

.wl__form[b-9azdfjjx7c] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin: 0;
}

.wl__form[hidden][b-9azdfjjx7c] { display: none; }

.wl__field[b-9azdfjjx7c] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wl__label[b-9azdfjjx7c] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.wl__input[b-9azdfjjx7c] {
    width: 100%;
    min-height: 48px;
    box-sizing: border-box;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font: inherit;
    font-size: var(--text-lg);
}

.wl__input:focus-visible[b-9azdfjjx7c],
.wl__check:focus-visible[b-9azdfjjx7c] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
    border-color: var(--color-secondary);
}

/* The bot trap: off-screen, never seen. */
.wl__trap[b-9azdfjjx7c] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.wl__consent[b-9azdfjjx7c] {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: var(--text-base);
    line-height: 1.4;
    color: var(--color-text-primary);
}

.wl__check[b-9azdfjjx7c] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    accent-color: var(--color-accent-text);
}

.wl__actions[b-9azdfjjx7c] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
}

.wl__join[b-9azdfjjx7c] {
    position: relative;
    min-width: 220px;
    min-height: 48px;
    line-height: 1.25;
}

.wl__join:disabled[b-9azdfjjx7c] { opacity: 0.6; cursor: progress; }

.wl__join:focus-visible[b-9azdfjjx7c] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.wl__reassure[b-9azdfjjx7c] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* The status line: empty until there's something to say. */
.wl__message[b-9azdfjjx7c] {
    grid-column: 1 / -1;
    margin: 0;
    min-height: 22px;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
}

.wl__message[data-kind="err"][b-9azdfjjx7c] { color: var(--color-error); }

/* ── The success panel ── */

.wl__done[b-9azdfjjx7c] {
    padding: var(--space-2) 0 var(--space-1);
    text-align: center;
}

.wl__done:focus[b-9azdfjjx7c] { outline: none; }

.wl__done:focus-visible[b-9azdfjjx7c] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.wl__done-heading[b-9azdfjjx7c] {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-2xl);
    color: var(--color-text-primary);
}

.wl__done-line[b-9azdfjjx7c] {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

/* ── The footer ── */

.wl__foot[b-9azdfjjx7c] {
    margin: var(--space-5) 0 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Underlined: a link inside a line of text must not rely on colour alone (axe link-in-text-block). */
.wl__site[b-9azdfjjx7c] {
    color: var(--color-secondary-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── "Join the Watchlist" shimmers ONCE (OnboardingShell's, PLAT-WO-16c T2): a light sweeps along a ring just outside the
   button, shortly after the page appears. One iteration, no timer; none at all under prefers-reduced-motion. ── */

@media (prefers-reduced-motion: no-preference) {
    .wl__join--shimmer[b-9azdfjjx7c]::after {
        content: "";
        position: absolute;
        inset: -9px;
        padding: 3px;
        border-radius: 12px;
        background: linear-gradient(110deg, transparent 40%, var(--color-accent-light) 50%, transparent 60%);
        background-size: 300% 100%;
        -webkit-mask: linear-gradient(var(--color-primary) 0 0) content-box, linear-gradient(var(--color-primary) 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(var(--color-primary) 0 0) content-box exclude, linear-gradient(var(--color-primary) 0 0);
        pointer-events: none;
        opacity: 0;
        animation: wl-shimmer-b-9azdfjjx7c 1400ms ease-in-out 900ms 1 both;
    }
}

@keyframes wl-shimmer-b-9azdfjjx7c {
    0%   { opacity: 0; background-position: 100% 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; background-position: 0% 0; }
}

/* ── Phone ── */

@media (max-width: 640px) {
    .wl__main[b-9azdfjjx7c] { padding: var(--space-5) var(--space-4) var(--space-8); }

    .wl__card[b-9azdfjjx7c] { padding: var(--space-5); gap: var(--space-5); }

    .wl__callout[b-9azdfjjx7c] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .wl__owl[b-9azdfjjx7c] { width: 128px; }

    .wl__bubble[b-9azdfjjx7c] { margin-bottom: 0; padding: var(--space-4) var(--space-5); }

    /* The tail turns to point up at the owl above. */
    .wl__bubble[b-9azdfjjx7c]::before {
        left: var(--space-8);
        top: calc(var(--space-2) * -1 - 1px);
        bottom: auto;
        border-bottom: none;
        border-top: 1px solid var(--color-border);
    }

    .wl__title[b-9azdfjjx7c] { font-size: var(--text-lg); }

    .wl__form[b-9azdfjjx7c] { grid-template-columns: 1fr; }

    .wl__join[b-9azdfjjx7c] { width: 100%; }
}
/* /Components/SharedUI/Assignments/AssignmentToggleGroup.razor.rz.scp.css */
.assignment-group[b-uqz3l2i4g4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.assignment-row[b-uqz3l2i4g4] {
    display: flex;
    flex-direction: column;
}

.assignment-row__head[b-uqz3l2i4g4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.assignment-row__label[b-uqz3l2i4g4] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

/* Panel slot — always takes the expanded panel's natural height, so the
   button below never shifts when toggles flip. Only visibility and opacity
   change between states; no height animation. */
.assignment-row__detail[b-uqz3l2i4g4] {
    margin-top: var(--space-2);
    transition: opacity 0.15s ease;
}

.assignment-row__detail--visible[b-uqz3l2i4g4] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.assignment-row__detail--hidden[b-uqz3l2i4g4] {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ---- Toggle ---- */
.toggle[b-uqz3l2i4g4] {
    width: 38px;
    height: 22px;
    background: var(--color-surface-3);
    border-radius: 999px;
    border: none;
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
    flex: 0 0 auto;
}
.toggle__thumb[b-uqz3l2i4g4] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}
.toggle--on[b-uqz3l2i4g4] { background: var(--color-accent); }
.toggle--on .toggle__thumb[b-uqz3l2i4g4] { transform: translateX(16px); }
/* /Components/SharedUI/Branding/IvaroMascot.razor.rz.scp.css */
/* === IvaroMascot — scoped styles === */

.ivaro-mascot-stage[b-i5752gyag6] {
    position: relative;
    width: 100%;
    aspect-ratio: 492 / 578;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    margin-left: auto;
    margin-right: auto;
    user-select: none;
}

.ivaro-mascot-stage--interactive[b-i5752gyag6] {
    cursor: pointer;
}

/* Floor shadow — sits beneath the owl, scales with tilt */
.ivaro-mascot-floor[b-i5752gyag6] {
    position: absolute;
    bottom: -2%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 36px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
    filter: blur(8px);
    z-index: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform-origin: center;
    pointer-events: none;
}

.ivaro-mascot-tilt[b-i5752gyag6] {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.ivaro-mascot-layer[b-i5752gyag6] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
}

.ivaro-mascot-layer--owl[b-i5752gyag6] {
    z-index: 2;
    animation: ivaro-mascot-bob-b-i5752gyag6 6s ease-in-out infinite;
    filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.45));
}

.ivaro-mascot-layer--sparkles[b-i5752gyag6] {
    z-index: 3;
    animation: ivaro-mascot-sparkle-b-i5752gyag6 4.5s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255, 220, 60, 0.6));
}

.ivaro-mascot-layer--glow[b-i5752gyag6] {
    z-index: 1;
    animation: ivaro-mascot-glow-b-i5752gyag6 5s ease-in-out infinite;
    transform: scale(1.2);
}

/* When the user is hovering the stage, the JS-driven transform takes over —
   pause the idle animations so the two don't fight. */
.ivaro-mascot-stage.is-tilting .ivaro-mascot-layer--owl[b-i5752gyag6],
.ivaro-mascot-stage.is-tilting .ivaro-mascot-layer--sparkles[b-i5752gyag6] {
    animation-play-state: paused;
}

@keyframes ivaro-mascot-bob-b-i5752gyag6 {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@keyframes ivaro-mascot-sparkle-b-i5752gyag6 {
    0%, 100% { transform: translateY(-4px) translateX(2px); }
    50%      { transform: translateY(-16px) translateX(-2px); }
}

@keyframes ivaro-mascot-glow-b-i5752gyag6 {
    0%, 100% { opacity: 0.7; transform: scale(1.2); }
    50%      { opacity: 1;   transform: scale(1.3); }
}

/* Honor reduced-motion preference — disable idle animations */
@media (prefers-reduced-motion: reduce) {
    .ivaro-mascot-layer--owl[b-i5752gyag6],
    .ivaro-mascot-layer--sparkles[b-i5752gyag6],
    .ivaro-mascot-layer--glow[b-i5752gyag6] {
        animation: none;
    }
    .ivaro-mascot-tilt[b-i5752gyag6] {
        transition: none;
    }
}
/* /Components/SharedUI/Common/StateSelector.razor.rz.scp.css */
.state-selector[b-jubag65rfz] {
    position: relative;
}

.state-selector__input-wrap[b-jubag65rfz] {
    position: relative;
    display: flex;
    align-items: center;
}

.state-selector__icon[b-jubag65rfz] {
    position: absolute;
    left: var(--space-3);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.state-selector__input[b-jubag65rfz] {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-8);
    font-size: var(--text-sm);
    background: var(--color-surface);
    color: var(--color-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.state-selector__input:focus[b-jubag65rfz] {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(41,121,204,0.15);
}

.state-selector__dropdown[b-jubag65rfz] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    max-height: 280px;
    overflow-y: auto;
    z-index: 50;
}

.state-selector__option[b-jubag65rfz] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    border-bottom: 1px solid var(--color-surface-3);
    transition: background 0.1s ease;
    font-size: var(--text-sm);
}

.state-selector__option:last-child[b-jubag65rfz] {
    border-bottom: none;
}

.state-selector__option:hover[b-jubag65rfz] {
    background: var(--color-primary-pale);
}

.state-selector__option--highlighted[b-jubag65rfz] {
    background: var(--color-primary-pale);
}

.state-selector__option--selected[b-jubag65rfz] {
    font-weight: 600;
}

.state-selector__option-code[b-jubag65rfz] {
    font-weight: 600;
    color: var(--color-secondary);
    min-width: 28px;
}

.state-selector__option-name[b-jubag65rfz] {
    color: var(--color-text-primary);
}
/* /Components/SharedUI/CurriculumIngestion/CurriculumUploadPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Root
═══════════════════════════════════════════ */
.cup[b-9twunuzpl8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* ═══════════════════════════════════════════
   Hidden file input
═══════════════════════════════════════════ */
/* Blazor's <InputFile> passes the `class` attribute through to its native
   <input type="file"> but Razor scoped CSS [b-xxx] attributes do NOT reach
   that child element — so the unscoped selector below used to render the
   default "Choose File / No file chosen" button visible on the page. ::deep
   drops the scoping attribute for this rule so the hide applies to the
   actual <input>. */
[b-9twunuzpl8] .cup__hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* ═══════════════════════════════════════════
   Upload zone
═══════════════════════════════════════════ */
.cup__upload-zone[b-9twunuzpl8] {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg, 12px);
    padding: 32px 20px;
    text-align: center;
    background: var(--color-surface-2);
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.cup__upload-zone--drag[b-9twunuzpl8],
.cup__upload-zone:hover[b-9twunuzpl8] {
    border-color: var(--color-primary);
    background: var(--color-primary-pale, #EBF0F8);
}

.cup__upload-icon[b-9twunuzpl8] {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    color: var(--color-text-muted);
}

.cup__upload-zone--drag .cup__upload-icon[b-9twunuzpl8],
.cup__upload-zone:hover .cup__upload-icon[b-9twunuzpl8] {
    color: var(--color-primary);
}

.cup__upload-headline[b-9twunuzpl8] {
    font-size: var(--text-sm, 14px);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 6px;
}

.cup__browse-link[b-9twunuzpl8] {
    color: var(--color-secondary, #2979CC);
    text-decoration: underline;
    cursor: pointer;
}

.cup__upload-hint[b-9twunuzpl8] {
    font-size: var(--text-xs, 12px);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 10px;
}

.cup__type-chips[b-9twunuzpl8] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.cup__type-chip[b-9twunuzpl8] {
    font-size: 11px;
    font-weight: 500;
    background: #fff;
    border: 1px solid var(--color-border);
    padding: 2px 8px;
    border-radius: 10px;
    color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════
   Skip link
═══════════════════════════════════════════ */
.cup__skip-link[b-9twunuzpl8] {
    text-align: center;
    font-size: var(--text-xs, 12px);
    color: var(--color-text-muted);
}

.cup__skip-btn[b-9twunuzpl8] {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: var(--color-secondary, #2979CC);
    cursor: pointer;
    font-weight: 500;
}

.cup__skip-btn:hover[b-9twunuzpl8] { text-decoration: underline; }

/* ═══════════════════════════════════════════
   File cards
═══════════════════════════════════════════ */
.cup__file-list[b-9twunuzpl8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cup__file-list--condensed .cup__file-card[b-9twunuzpl8] {
    opacity: .85;
}

.cup__file-card[b-9twunuzpl8] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    padding: 10px 12px;
    background: var(--color-surface);
}

.cup__file-icon[b-9twunuzpl8] {
    width: 34px; height: 34px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: .02em;
}

.cup__file-icon--pdf[b-9twunuzpl8]  { background: #FEE2E2; color: #DC2626; }
.cup__file-icon--docx[b-9twunuzpl8] { background: #DBEAFE; color: #2563EB; }
.cup__file-icon--xlsx[b-9twunuzpl8] { background: #D1FAE5; color: #059669; }
.cup__file-icon--txt[b-9twunuzpl8]  { background: var(--color-surface-2); color: var(--color-text-secondary); }

.cup__file-meta[b-9twunuzpl8]   { flex: 1; overflow: hidden; }
.cup__file-name[b-9twunuzpl8]   { font-size: var(--text-sm, 13px); font-weight: 600; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cup__file-size[b-9twunuzpl8]   { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

.cup__file-remove[b-9twunuzpl8] {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--color-surface-2);
    cursor: pointer;
    font-size: 11px;
    color: var(--color-text-muted);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.cup__file-remove:hover[b-9twunuzpl8] { background: #FEE2E2; color: #DC2626; }

.cup__add-another[b-9twunuzpl8] {
    display: block;
    font-size: var(--text-xs, 12px);
    font-weight: 500;
    color: var(--color-secondary, #2979CC);
    cursor: pointer;
    text-align: center;
    padding: 8px;
    border: 1.5px dashed var(--color-border);
    border-radius: var(--radius-md, 8px);
    transition: border-color .15s, background .15s;
}

.cup__add-another:hover[b-9twunuzpl8] { border-color: var(--color-secondary); background: var(--color-secondary-pale, #E8F2FB); }

/* ═══════════════════════════════════════════
   Buttons
═══════════════════════════════════════════ */
.cup__btn-primary[b-9twunuzpl8] {
    width: 100%;
    padding: 12px;
    border-radius: var(--radius-md, 8px);
    background: var(--color-primary, #1B3A6B);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: var(--text-sm, 14px);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.cup__btn-primary:hover:not(:disabled)[b-9twunuzpl8]  { background: var(--color-primary-light, #2753A0); }
.cup__btn-primary:disabled[b-9twunuzpl8]              { opacity: .45; cursor: not-allowed; }

.cup__btn-secondary[b-9twunuzpl8] {
    width: 100%;
    padding: 11px;
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border: 1.5px solid var(--color-border);
    font-family: inherit;
    font-size: var(--text-sm, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s;
}

.cup__btn-secondary:hover[b-9twunuzpl8] { border-color: var(--color-primary); color: var(--color-primary); }

/* ═══════════════════════════════════════════
   Streaming area
═══════════════════════════════════════════ */
.cup__stream-area[b-9twunuzpl8] {
    background: var(--color-primary-pale, #EBF0F8);
    border: 1px solid #C7D4EA;
    border-radius: var(--radius-lg, 12px);
    padding: 18px 16px;
}

.cup__stream-header[b-9twunuzpl8] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.cup__stream-avatar[b-9twunuzpl8] {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--color-primary, #1B3A6B);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.cup__stream-title[b-9twunuzpl8] {
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: var(--color-primary, #1B3A6B);
}

.cup__stream-lines[b-9twunuzpl8] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding-left: 36px;
}

.cup__stream-line[b-9twunuzpl8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs, 12px);
    transition: color .2s;
}

.cup__stream-line--done[b-9twunuzpl8]    { color: var(--color-accent, #0f9981); }
.cup__stream-line--active[b-9twunuzpl8]  { color: var(--color-primary, #1B3A6B); font-weight: 500; }
.cup__stream-line--pending[b-9twunuzpl8] { color: var(--color-text-muted); opacity: .5; }

.cup__stream-dot[b-9twunuzpl8] {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cup__stream-dot--done[b-9twunuzpl8]    { background: var(--color-accent, #0f9981); }
.cup__stream-dot--active[b-9twunuzpl8]  { background: var(--color-primary, #1B3A6B); animation: cup-pulse-b-9twunuzpl8 1s ease-in-out infinite; }
.cup__stream-dot--pending[b-9twunuzpl8] { background: var(--color-border); }

@keyframes cup-pulse-b-9twunuzpl8 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .35; transform: scale(.65); }
}

/* ═══════════════════════════════════════════
   Results card
═══════════════════════════════════════════ */
.cup__results[b-9twunuzpl8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cup__results-header[b-9twunuzpl8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.cup__results-avatar[b-9twunuzpl8] {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--color-accent, #0f9981);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
}

.cup__results-title[b-9twunuzpl8] {
    font-size: var(--text-sm, 14px);
    font-weight: 600;
    color: var(--color-primary);
}

.cup__results-sub[b-9twunuzpl8] {
    font-size: var(--text-xs, 12px);
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-top: 3px;
}

.cup__results-grid[b-9twunuzpl8] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.cup__results-row[b-9twunuzpl8] {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid var(--color-border);
}

.cup__results-row:last-child[b-9twunuzpl8] { border-bottom: none; }

.cup__results-label[b-9twunuzpl8] {
    width: 110px;
    flex-shrink: 0;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-surface-2);
    border-right: 1px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.cup__results-value[b-9twunuzpl8] {
    padding: 10px 12px;
    flex: 1;
    font-size: var(--text-xs, 12px);
    color: var(--color-text-primary);
    line-height: 1.5;
}

.cup__source-file[b-9twunuzpl8] {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 3px;
}

.cup__source-file:last-child[b-9twunuzpl8] { margin-bottom: 0; }

.cup__status-found[b-9twunuzpl8] {
    color: var(--color-accent, #0f9981);
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
}

.cup__result-chips[b-9twunuzpl8] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.cup__result-chip[b-9twunuzpl8] {
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.cup__result-chip--found[b-9twunuzpl8] {
    background: var(--color-accent-pale, #E6F7F2);
    color: var(--color-accent, #0f9981);
}

.cup__unverified-note[b-9twunuzpl8] {
    margin-top: 6px;
    padding: 7px 9px;
    background: #FEF3C7;
    border-left: 3px solid #F59E0B;
    border-radius: 0 5px 5px 0;
    font-size: 11px;
    color: #92400E;
    line-height: 1.5;
}

.cup__coming-soon[b-9twunuzpl8] {
    font-size: 11px;
    color: var(--color-primary);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════
   Error banner (shared by state Error + inline
   validation above the Analyze button)
═══════════════════════════════════════════ */
.cup__error-banner[b-9twunuzpl8] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #FEE2E2;
    border: 1px solid #FECACA;
    border-radius: var(--radius-md, 8px);
    padding: 11px 13px;
    font-size: var(--text-xs, 12px);
    color: #991B1B;
    line-height: 1.5;
}

.cup__error-icon[b-9twunuzpl8] { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ═══════════════════════════════════════════
   Extraction preview bullets
═══════════════════════════════════════════ */
.cup__preview[b-9twunuzpl8] {
    padding: 12px 14px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
}

.cup__preview-label[b-9twunuzpl8] {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

.cup__preview-list[b-9twunuzpl8] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cup__preview-item[b-9twunuzpl8] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs, 12px);
    line-height: 1.4;
}

.cup__preview-item[b-9twunuzpl8]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.cup__preview-item--pending[b-9twunuzpl8] {
    color: var(--color-text-muted);
}

.cup__preview-item--pending[b-9twunuzpl8]::before {
    background: var(--color-border);
    border: 1.5px dashed var(--color-text-muted);
}

.cup__preview-item--found[b-9twunuzpl8] {
    color: var(--color-accent, #0f9981);
}

.cup__preview-item--found[b-9twunuzpl8]::before {
    background: var(--color-accent, #0f9981);
}

/* ═══════════════════════════════════════════
   Chat with Ivaro (Results card — pivot from chip questions)
═══════════════════════════════════════════ */
.cup__chat[b-9twunuzpl8] {
    background: var(--color-primary-pale, #EBF0F8);
    border: 1px solid #C7D4EA;
    border-radius: 0 var(--radius-lg, 12px) var(--radius-lg, 12px) var(--radius-lg, 12px);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cup__chat-header[b-9twunuzpl8] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.cup__chat-avatar[b-9twunuzpl8] {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--color-primary, #1B3A6B);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    flex-shrink: 0;
}

.cup__chat-name[b-9twunuzpl8] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-primary, #1B3A6B);
}

.cup__chat-preroll[b-9twunuzpl8] {
    font-size: var(--text-sm, 13px);
    color: var(--color-text-primary);
    line-height: 1.55;
    margin: 0;
}

/* ── Thread — teacher's sent messages ── */
.cup__chat-thread[b-9twunuzpl8] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cup__chat-user-bubble[b-9twunuzpl8] {
    align-self: flex-end;
    max-width: 88%;
    padding: 9px 13px;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 var(--radius-lg, 12px);
    background: var(--color-primary, #1B3A6B);
    color: #fff;
    font-size: var(--text-xs, 12px);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ── Quick-reply starter chips ── */
.cup__chat-quick-replies[b-9twunuzpl8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cup__chat-quick-reply[b-9twunuzpl8] {
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    color: var(--color-secondary, #2979CC);
    background: var(--color-surface);
    border: 1px dashed #BFD2EA;
    border-radius: 14px;
    padding: 4px 11px;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

.cup__chat-quick-reply:hover:not(:disabled)[b-9twunuzpl8] {
    border-color: var(--color-secondary, #2979CC);
    background: var(--color-secondary-pale, #E8F2FB);
}

.cup__chat-quick-reply:disabled[b-9twunuzpl8] {
    opacity: .5;
    cursor: not-allowed;
}

/* ── Textarea + send ── */
.cup__chat-input-row[b-9twunuzpl8] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.cup__chat-textarea[b-9twunuzpl8] {
    flex: 1;
    min-height: 56px;
    max-height: 140px;
    resize: vertical;
    padding: 9px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    background: var(--color-surface);
    font-family: inherit;
    font-size: var(--text-xs, 12px);
    line-height: 1.45;
    color: var(--color-text-primary);
    outline: none;
    transition: border-color .15s;
}

.cup__chat-textarea:focus[b-9twunuzpl8] { border-color: var(--color-primary); }

.cup__chat-textarea:disabled[b-9twunuzpl8] {
    opacity: .55;
    cursor: wait;
}

.cup__chat-send[b-9twunuzpl8] {
    padding: 9px 14px;
    border-radius: var(--radius-md, 8px);
    background: var(--color-primary, #1B3A6B);
    color: #fff;
    border: none;
    font-family: inherit;
    font-size: var(--text-xs, 12px);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}

.cup__chat-send:hover:not(:disabled)[b-9twunuzpl8]   { background: var(--color-primary-light, #2753A0); }
.cup__chat-send:disabled[b-9twunuzpl8]               { opacity: .45; cursor: not-allowed; }

/* ── Error + counter + completion ── */
.cup__chat-error[b-9twunuzpl8] {
    font-size: 11px;
    color: #991B1B;
    background: #FEE2E2;
    border: 1px solid #FECACA;
    border-radius: 6px;
    padding: 6px 10px;
    line-height: 1.45;
}

.cup__chat-turn-counter[b-9twunuzpl8] {
    font-size: 11px;
    color: var(--color-text-muted);
    font-style: italic;
    text-align: right;
}

.cup__chat-complete[b-9twunuzpl8] {
    font-size: var(--text-xs, 12px);
    color: var(--color-accent, #0f9981);
    padding: 8px 10px;
    background: var(--color-accent-pale, #E6F7F2);
    border-radius: var(--radius-md, 8px);
    text-align: center;
}

.cup__chat-complete strong[b-9twunuzpl8] { color: var(--color-primary); }

/* ── Ivaro reply bubble in thread ── */
.cup__chat-ivaro-reply[b-9twunuzpl8] {
    align-self: flex-start;
    max-width: 92%;
    background: #fff;
    border: 1.5px solid #1B3A6B;
    border-left-width: 3px;
    border-radius: 0 var(--radius-md, 8px) var(--radius-md, 8px) var(--radius-md, 8px);
    padding: 9px 12px;
    font-size: var(--text-xs, 12px);
    line-height: 1.5;
    color: var(--color-text-primary);
}

.cup__chat-ivaro-tag[b-9twunuzpl8] {
    display: block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--color-primary, #1B3A6B);
    margin-bottom: 5px;
}

/* Thinking / typing indicator */
.cup__chat-ivaro-thinking[b-9twunuzpl8] {
    min-height: 44px;
}

.cup__thinking-dots[b-9twunuzpl8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 16px;
}

.cup__thinking-dots span[b-9twunuzpl8] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary, #1B3A6B);
    opacity: .35;
    animation: ivaroTyping-b-9twunuzpl8 1.2s ease-in-out infinite;
}

.cup__thinking-dots span:nth-child(2)[b-9twunuzpl8] { animation-delay: .2s; }
.cup__thinking-dots span:nth-child(3)[b-9twunuzpl8] { animation-delay: .4s; }

@keyframes ivaroTyping-b-9twunuzpl8 {
    0%, 80%, 100% { opacity: .35; transform: scale(1); }
    40%            { opacity: 1;   transform: scale(1.2); }
}

/* ═══════════════════════════════════════════
   Applied state (post-Confirm confirmation)
═══════════════════════════════════════════ */
.cup__applied[b-9twunuzpl8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 24px 16px;
    background: var(--color-accent-pale, #E6F7F2);
    border: 1px solid var(--color-accent, #0f9981);
    border-radius: var(--radius-lg, 12px);
}

.cup__applied-check[b-9twunuzpl8] {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--color-accent, #0f9981);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.cup__applied-title[b-9twunuzpl8] {
    font-size: var(--text-base, 15px);
    font-weight: 700;
    color: var(--color-accent, #0f9981);
}

.cup__applied-files[b-9twunuzpl8] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
}

.cup__applied-hint[b-9twunuzpl8] {
    font-size: var(--text-xs, 12px);
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════
   SP-25 — Conversational document understanding
═══════════════════════════════════════════ */

/* Multi-turn variant of the chat thread — same column layout as the
   single-turn version, just with extra vertical padding because turns
   stack indefinitely. */
.cup__chat-thread--multi[b-9twunuzpl8] {
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-md, 8px);
    max-height: 480px;
    overflow-y: auto;
}

/* Within an Ivaro reply, the parsed Markdown blocks render as
   paragraphs and bullet lists. Keep them tight so each turn's reply
   reads as one cohesive bubble rather than separated chunks. */
.cup__ivaro-paragraph[b-9twunuzpl8] {
    margin: 0 0 7px 0;
    line-height: 1.5;
}
.cup__ivaro-paragraph:last-child[b-9twunuzpl8] {
    margin-bottom: 0;
}

.cup__ivaro-bullets[b-9twunuzpl8] {
    margin: 0 0 7px 0;
    padding-left: 18px;
    line-height: 1.45;
}
.cup__ivaro-bullets:last-child[b-9twunuzpl8] {
    margin-bottom: 0;
}
.cup__ivaro-bullets li[b-9twunuzpl8] {
    margin-bottom: 3px;
}
.cup__ivaro-bullets li:last-child[b-9twunuzpl8] {
    margin-bottom: 0;
}

/* Refinement chat (the always-visible textarea + Send button shown
   beneath the thread on subsequent turns). Visually distinct from the
   first-turn IntentCapture chat so the teacher knows they're refining,
   not starting over. */
.cup__chat--refine[b-9twunuzpl8] {
    background: transparent;
    padding-top: 0;
}

.cup__chat-actions[b-9twunuzpl8] {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.cup__chat-actions .cup__btn-secondary[b-9twunuzpl8] {
    padding: 6px 14px;
    font-size: var(--text-xs, 12px);
}

.cup__chat-actions .cup__btn-secondary[disabled][b-9twunuzpl8] {
    opacity: .5;
    cursor: not-allowed;
}

/* SP-25 refinement input — standard chat pattern: textarea fills width,
   Send button on the right at the same height. Stays anchored beneath
   the chat thread; teachers can keep refining indefinitely. */
.cup__refine[b-9twunuzpl8] {
    margin-top: 14px;
}

.cup__refine-row[b-9twunuzpl8] {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.cup__refine-textarea[b-9twunuzpl8] {
    flex: 1 1 auto;
    min-height: 60px;
    /* Override the default cup__chat-textarea margin/border conventions
       so the textarea reads as a row partner with the Send button rather
       than a standalone input row. */
    margin: 0;
}

.cup__refine-send[b-9twunuzpl8] {
    flex: 0 0 auto;
    min-width: 88px;
    padding: 0 18px;
    background: var(--color-primary, #1B3A6B);
    color: #fff;
    border: 1.5px solid var(--color-primary, #1B3A6B);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color 120ms ease, opacity 120ms ease;
}

.cup__refine-send:hover:not([disabled])[b-9twunuzpl8] {
    background: #16305a;
}

.cup__refine-send[disabled][b-9twunuzpl8] {
    opacity: .4;
    cursor: not-allowed;
}

.cup__refine-send-arrow[b-9twunuzpl8] {
    font-size: 14px;
    line-height: 1;
}

/* Live proposal preview — the "Lesson preview" panel that shows what
   Ivaro will pre-fill when the teacher clicks Apply. Sits between the
   chat thread and the refinement input so the teacher can see the
   proposal change in real time as the conversation evolves. */
.cup__proposal-preview[b-9twunuzpl8] {
    margin-top: 14px;
    margin-bottom: 14px;
    border: 1.5px solid var(--color-primary, #1B3A6B);
    border-radius: var(--radius-md, 8px);
    background: #fff;
    overflow: hidden;
}

.cup__proposal-header[b-9twunuzpl8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px 8px 14px;
    background: linear-gradient(180deg, #f0f5fb 0%, #ffffff 100%);
    border-bottom: 1px solid #e2e8f0;
}

.cup__proposal-title[b-9twunuzpl8] {
    font-size: var(--text-sm, 13px);
    font-weight: 700;
    color: var(--color-primary, #1B3A6B);
}

.cup__proposal-sub[b-9twunuzpl8] {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.cup__proposal-grid[b-9twunuzpl8] {
    display: flex;
    flex-direction: column;
}

.cup__proposal-row[b-9twunuzpl8] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: var(--text-xs, 12px);
}
.cup__proposal-row:last-child[b-9twunuzpl8] {
    border-bottom: none;
}

.cup__proposal-label[b-9twunuzpl8] {
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10px;
    padding-top: 2px;
}

.cup__proposal-value[b-9twunuzpl8] {
    color: var(--color-text-primary);
    line-height: 1.45;
}

.cup__proposal-text[b-9twunuzpl8] {
    font-size: var(--text-xs, 12px);
}

/* Per-field provenance — the one-line prose explaining where the AI
   got this field. Faded and italic so it's clearly secondary. */
.cup__proposal-source[b-9twunuzpl8] {
    margin-top: 3px;
    font-size: 10.5px;
    font-style: italic;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.cup__proposal-chips[b-9twunuzpl8] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cup__proposal-chip[b-9twunuzpl8] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #eaf2fc;
    border: 1px solid #c8dcf0;
    border-radius: 999px;
    color: var(--color-primary, #1B3A6B);
    font-size: 11px;
    font-weight: 500;
}

.cup__proposal-chip--vocab[b-9twunuzpl8] {
    background: #f5f0fa;
    border-color: #ddd0ec;
    color: #5b3a7c;
}
/* /Components/SharedUI/Differentiation/DifferentiationChipPicker.razor.rz.scp.css */
/* Matches StateChipSelector / GradeChipSelector / SubjectChipSelector so the
   Differentiation section reads as one more row of the same chip language. */

.dcp[b-empdp20e9h] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dcp__group[b-empdp20e9h] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dcp__group-label[b-empdp20e9h] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted, #6b7280);
}

.dcp__chips[b-empdp20e9h] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dcp__chip[b-empdp20e9h] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1.5px solid var(--color-border, #d1d5db);
    border-radius: 999px;
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #1a2b4a);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
    white-space: nowrap;
}

.dcp__chip:hover[b-empdp20e9h] {
    border-color: var(--color-primary, #1a2b4a);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Selected — accent green to match the Ivaro-Suggests / template picker
   "this is a deliberate on-state" pattern, rather than the primary navy
   (which we reserve for single-choice selection like state/grade/subject). */
.dcp__chip--on[b-empdp20e9h] {
    background: rgba(46, 170, 138, 0.10);
    border-color: var(--color-accent, #2eaa8a);
    color: var(--color-text, #1a2b4a);
    box-shadow: 0 1px 6px rgba(46, 170, 138, 0.18);
}

.dcp__chip-emoji[b-empdp20e9h] {
    font-size: 1rem;
    line-height: 1;
}

.dcp__chip-check[b-empdp20e9h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-accent, #2eaa8a);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    margin-left: 2px;
}
/* /Components/SharedUI/Differentiation/DifferentiationToggle.razor.rz.scp.css */
.diff-toggle[b-fgvuntoks5] {
    display: flex;
    flex-direction: column;
}

.diff-toggle__head[b-fgvuntoks5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.diff-toggle__label[b-fgvuntoks5] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
}

.diff-toggle__detail[b-fgvuntoks5] {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease;
}
.diff-toggle__detail--open[b-fgvuntoks5] {
    max-height: 220px;
    opacity: 1;
    margin-top: var(--space-2);
}

.diff-toggle__grid[b-fgvuntoks5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) 0;
}

.diff-toggle__check[b-fgvuntoks5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}
.diff-toggle__check input[type="checkbox"][b-fgvuntoks5] {
    width: 14px;
    height: 14px;
    accent-color: var(--color-secondary);
    cursor: pointer;
}

/* Toggle (blue variant) — needs to live here because the toggle classes
   from AssignmentToggleGroup are scoped. */
.toggle[b-fgvuntoks5] {
    width: 38px;
    height: 22px;
    background: var(--color-surface-3);
    border-radius: 999px;
    border: none;
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
    flex: 0 0 auto;
}
.toggle__thumb[b-fgvuntoks5] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}
.toggle--blue.toggle--on[b-fgvuntoks5] { background: var(--color-secondary); }
.toggle--on .toggle__thumb[b-fgvuntoks5] { transform: translateX(16px); }
/* /Components/SharedUI/Differentiation/ScaffoldingChipPicker.razor.rz.scp.css */
.scaffolding-picker[b-seaeg5i87x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.scaffolding-picker__placeholder[b-seaeg5i87x] {
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-text-muted);
}

.scaffolding-picker__selected[b-seaeg5i87x] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.scaffolding-picker__chip[b-seaeg5i87x] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border-radius: 999px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.5;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.scaffolding-picker__chip--selected[b-seaeg5i87x] {
    background: #FFF3E0;
    color: #E65100;
    border: 1px solid rgba(230, 81, 0, 0.25);
}

.scaffolding-picker__chip-remove[b-seaeg5i87x] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: var(--text-xs);
    line-height: 1;
    padding: 0 0 0 var(--space-1);
    opacity: 0.6;
    transition: opacity 0.12s ease;
}
.scaffolding-picker__chip-remove:hover[b-seaeg5i87x] {
    opacity: 1;
}

.scaffolding-picker__add-wrapper[b-seaeg5i87x] {
    display: inline-block;
}

.scaffolding-picker__add-btn[b-seaeg5i87x] {
    background: none;
    border: 1.5px dashed rgba(230, 81, 0, 0.35);
    color: #E65100;
    border-radius: 999px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.scaffolding-picker__add-btn:hover[b-seaeg5i87x] {
    border-color: #E65100;
    color: #BF360C;
}

.scaffolding-picker__popover[b-seaeg5i87x] {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-2) 0;
}

.scaffolding-picker__popover-empty[b-seaeg5i87x] {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

.scaffolding-picker__popover-group[b-seaeg5i87x] {
    padding: var(--space-1) 0;
}

.scaffolding-picker__popover-category[b-seaeg5i87x] {
    padding: var(--space-1) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scaffolding-picker__popover-item[b-seaeg5i87x] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background 0.1s ease;
}
.scaffolding-picker__popover-item:hover[b-seaeg5i87x] {
    background: #FFF3E0;
}

.scaffolding-picker__popover-backdrop[b-seaeg5i87x] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.scaffolding-picker__count[b-seaeg5i87x] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-style: italic;
}
/* /Components/SharedUI/Engagement/EngagementChipPicker.razor.rz.scp.css */
/* ═══════════════════════════════════════════
   Root
═══════════════════════════════════════════ */
.ep[b-s0nrk2g9ee] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ═══════════════════════════════════════════
   Loading state
═══════════════════════════════════════════ */
.ep__loading[b-s0nrk2g9ee] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.ep__loading-shimmer[b-s0nrk2g9ee] {
    height: 80px;
    background: linear-gradient(90deg, var(--color-surface-3) 25%, var(--color-surface-2) 50%, var(--color-surface-3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-s0nrk2g9ee 1.4s infinite;
    border-radius: 10px;
}

.ep__loading-shimmer--short[b-s0nrk2g9ee]  { height: 60px; width: 60%; }
.ep__loading-shimmer--medium[b-s0nrk2g9ee] { height: 60px; width: 80%; }

@keyframes shimmer-b-s0nrk2g9ee {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.ep__loading-label[b-s0nrk2g9ee] {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
    margin: 0;
}

/* ═══════════════════════════════════════════
   Zone 1 — Ivaro Suggests
═══════════════════════════════════════════ */
.ep__suggests[b-s0nrk2g9ee] {
    background: var(--color-accent-pale);
    border: 1.5px solid rgba(46, 170, 138, 0.3);
    border-radius: 10px;
    padding: var(--space-4);
}

.ep__suggests-header[b-s0nrk2g9ee] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.ep__suggests-icon[b-s0nrk2g9ee] {
    color: var(--color-accent);
    font-size: 14px;
    line-height: 1;
}

.ep__suggests-title[b-s0nrk2g9ee] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-accent-text);   /* PLAT-WO-15h: AA, 4.72:1 on --color-accent-pale */
}

.ep__suggests-hint[b-s0nrk2g9ee] {
    margin-left: auto;
    font-size: var(--text-base);
    color: var(--color-text-muted);
    font-style: italic;
}

.ep__suggests-grid[b-s0nrk2g9ee] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
}

/* Suggested card */
.ep__scard[b-s0nrk2g9ee] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
    border-radius: 10px;
    padding: var(--space-4);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    font-family: inherit;
}

.ep__scard--on[b-s0nrk2g9ee] {
    background: var(--color-surface);
    box-shadow: 0 2px 8px rgba(46, 170, 138, 0.18);
}

.ep__scard--off[b-s0nrk2g9ee] {
    /* PLAT-WO-15i (15h drv, ruling 2): no opacity fade, as 15b did for the template cards. A fade dimmed every line of
       text to 2.2-3.05:1, so "unselected" is a quieter card instead: the soft surface and the plain border, no check.
       Its text keeps the AA tokens on --color-surface-2: name 10.41:1, purpose 5.50:1, rationale 4.83:1, effect size 4.99:1. */
    background: var(--color-surface-2);
    border-color: var(--color-border);
}

.ep__scard:hover[b-s0nrk2g9ee] {
    box-shadow: 0 3px 10px rgba(46, 170, 138, 0.22);
}

.ep__scard--off:hover[b-s0nrk2g9ee] {
    background: var(--color-surface);
    border-color: var(--color-accent);
}

.ep__scard-check[b-s0nrk2g9ee] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-accent);
    color: white;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ep__scard-body[b-s0nrk2g9ee] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-right: var(--space-6);
}

.ep__scard-name[b-s0nrk2g9ee] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.ep__scard-purpose[b-s0nrk2g9ee] {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.ep__scard-footer[b-s0nrk2g9ee] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.ep__scard-rationale[b-s0nrk2g9ee] {
    font-size: var(--text-base);
    color: var(--color-accent-text);   /* PLAT-WO-15h: AA, 5.22:1 on white, 4.83:1 on --color-surface-2 */
    font-style: italic;
    border-top: 1px solid rgba(46, 170, 138, 0.2);
    padding-top: var(--space-2);
    line-height: 1.4;
}

/* ═══════════════════════════════════════════
   Zone 2 — Browse all
═══════════════════════════════════════════ */
.ep__browse[b-s0nrk2g9ee] {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
}

.ep__browse-toggle[b-s0nrk2g9ee] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
    font-family: inherit;
}

.ep__browse-toggle:hover[b-s0nrk2g9ee] { background: var(--color-surface-3); }

.ep__browse-toggle-left[b-s0nrk2g9ee] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.ep__browse-toggle-title[b-s0nrk2g9ee] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.ep__browse-count[b-s0nrk2g9ee] {
    font-size: var(--text-sm);
    font-weight: 600;
    background: var(--color-primary-pale);
    color: var(--color-primary);
    padding: 2px var(--space-2);
    border-radius: 20px;
}

.ep__browse-chevron[b-s0nrk2g9ee] {
    color: var(--color-text-muted);
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 0.2s ease;
    display: inline-block;
}

.ep__browse-chevron--open[b-s0nrk2g9ee] {
    transform: rotate(-90deg);
}

.ep__browse-body[b-s0nrk2g9ee] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-top: 1px solid var(--color-border);
}

/* Filter pills */
.ep__filters[b-s0nrk2g9ee] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.ep__filters-label[b-s0nrk2g9ee] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: var(--space-1);
}

.ep__filter-pill[b-s0nrk2g9ee] {
    font-size: var(--text-base);
    font-weight: 500;
    padding: var(--space-1) var(--space-3);
    border-radius: 20px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.12s ease;
    font-family: inherit;
}

.ep__filter-pill:hover[b-s0nrk2g9ee] {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

.ep__filter-pill--active[b-s0nrk2g9ee],
.ep__filter-pill--active:hover[b-s0nrk2g9ee] {
    border-color: var(--color-secondary);
    background: var(--color-secondary-pale);
    color: var(--color-secondary-text);
    font-weight: 600;
}

/* Browse grid */
.ep__browse-grid[b-s0nrk2g9ee] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-2);
}

.ep__bcard[b-s0nrk2g9ee] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: 9px;
    padding: var(--space-3);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
    font-family: inherit;
}

.ep__bcard:hover[b-s0nrk2g9ee] {
    border-color: var(--color-secondary);
    box-shadow: 0 2px 6px rgba(41, 121, 204, 0.1);
}

.ep__bcard--selected[b-s0nrk2g9ee] {
    border-color: var(--color-accent);
    background: var(--color-accent-pale);
}

.ep__bcard-name[b-s0nrk2g9ee] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.ep__bcard-purpose[b-s0nrk2g9ee] {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.35;
}

.ep__bcard-footer[b-s0nrk2g9ee] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-1);
}

.ep__browse-empty[b-s0nrk2g9ee] {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
    padding: var(--space-4) 0;
    margin: 0;
}

/* ═══════════════════════════════════════════
   Shared — framework badges
═══════════════════════════════════════════ */
.ep__badge[b-s0nrk2g9ee] {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: 20px;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    /* default — core */
    background: var(--color-primary-pale);
    color: var(--color-primary);
}

.ep__badge--kagan[b-s0nrk2g9ee]        { background: #EEF4FF; color: #2753A0; }
.ep__badge--tlac[b-s0nrk2g9ee]         { background: #FFF3E0; color: var(--color-warning-text); }   /* LP WO-112: 5.82:1 (was #E65100, 3.46:1) */
.ep__badge--mlr[b-s0nrk2g9ee]          { background: var(--color-accent-pale); color: var(--color-accent-text); }   /* 4.72:1 (was 2.62:1) */
.ep__badge--projectzero[b-s0nrk2g9ee]  { background: #F3E8FF; color: #6B21A8; }
.ep__badge--inquiry[b-s0nrk2g9ee]      { background: #FEF9C3; color: #854D0E; }
.ep__badge--math[b-s0nrk2g9ee]         { background: var(--color-secondary-pale); color: var(--color-secondary-text); }   /* 5.44:1 (was 3.94:1) */
.ep__badge--discussion[b-s0nrk2g9ee]   { background: #FDF2F8; color: #9D174D; }
.ep__badge--udl[b-s0nrk2g9ee]          { background: #F0FDF4; color: #166534; }

.ep__hattie[b-s0nrk2g9ee] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════
   Zone 3 — Selection summary bar
═══════════════════════════════════════════ */
.ep__summary[b-s0nrk2g9ee] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary-pale);
    border: 1px solid rgba(27, 58, 107, 0.15);
    border-radius: 8px;
    flex-wrap: wrap;
}

.ep__summary-label[b-s0nrk2g9ee] {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
    padding-top: 3px;
}

.ep__summary-chips[b-s0nrk2g9ee] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    flex: 1;
}

.ep__summary-chip[b-s0nrk2g9ee] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--color-text-primary);
}

.ep__summary-chip-remove[b-s0nrk2g9ee] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-surface-3);
    border: none;
    cursor: pointer;
    font-size: 8px;
    color: var(--color-text-muted);
    font-weight: 700;
    line-height: 1;
    padding: 0;
    transition: background 0.12s;
}

.ep__summary-chip-remove:hover[b-s0nrk2g9ee] {
    background: var(--color-error);
    color: white;
}
/* /Components/SharedUI/Flow/LessonFlowStepper.razor.rz.scp.css */
.lf-stepper[b-1q0lyki0pq] {
    display: flex;
    align-items: flex-start;
    width: 100%;
    user-select: none;
    font-family: inherit;
}

.lf-step[b-1q0lyki0pq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    min-width: 56px;
}

.lf-step__node[b-1q0lyki0pq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    /* WO-84 Unit 3 - the step number reads at 14 px (was 12.8); the 28 px node holds it. */
    font-size: 0.875rem;
    font-weight: 600;
    border: 2px solid #cbd2de;
    color: #667085;   /* WO-85 Unit 7 - locked step: 4.97:1 on white (was #8a94a6, 3.06:1) */
    background: #fff;
    transition: all 180ms ease;
}

.lf-step__label[b-1q0lyki0pq] {
    /* WO-84 Unit 3 - the stepper is navigation: its labels read at 14 px (was 12). */
    font-size: 0.875rem;
    font-weight: 500;
    color: #667085;   /* WO-85 Unit 7 - locked step: 4.97:1 on white (was #8a94a6, 3.06:1) */
    letter-spacing: 0.01em;
    text-align: center;
    line-height: 1.2;
}

.lf-connector[b-1q0lyki0pq] {
    flex: 1 1 auto;
    height: 2px;
    margin: 13px 6px 0;
    background: #e2e6ec;
    min-width: 20px;
    transition: background 180ms ease;
}

/* Completed step */
.lf-step--done .lf-step__node[b-1q0lyki0pq] {
    background: #2EAA8A;
    border-color: #2EAA8A;
    color: #fff;
}
.lf-step--done .lf-step__label[b-1q0lyki0pq] {
    color: #1B5F4A;
}
.lf-connector--done[b-1q0lyki0pq] {
    background: #2EAA8A;
}

/* Current step */
.lf-step--current .lf-step__node[b-1q0lyki0pq] {
    border-color: var(--navy-primary, #1B3A6B);
    color: var(--navy-primary, #1B3A6B);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(27, 58, 107, 0.12);
    animation: lf-pulse-b-1q0lyki0pq 2.2s ease-in-out infinite;
}
.lf-step--current .lf-step__label[b-1q0lyki0pq] {
    color: var(--navy-primary, #1B3A6B);
    font-weight: 600;
}

@keyframes lf-pulse-b-1q0lyki0pq {
    0%, 100% { box-shadow: 0 0 0 4px rgba(27, 58, 107, 0.12); }
    50%      { box-shadow: 0 0 0 8px rgba(27, 58, 107, 0.18); }
}

/* Full — page header above content */
.lf-stepper--full[b-1q0lyki0pq] {
    padding: 14px 8px 16px;
    max-width: 720px;
    margin: 0 auto 12px;
}
/* /Components/SharedUI/GradeChips/GradeChipSelector.razor.rz.scp.css */
.gcs[b-16h1r7k33z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gcs__chips[b-16h1r7k33z],
.gcs__sub-chips[b-16h1r7k33z] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Base chip — matches StateChipSelector pill style. */
.gcs__chip[b-16h1r7k33z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 8px 14px;
    border: 1.5px solid var(--color-border, #d1d5db);
    border-radius: 999px;
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #1a2b4a);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.gcs__chip:hover[b-16h1r7k33z] {
    border-color: var(--color-primary, #1a2b4a);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.gcs__chip--selected[b-16h1r7k33z] {
    background: var(--color-primary, #1a2b4a);
    border-color: var(--color-primary, #1a2b4a);
    color: #ffffff;
}

/* Sub-chips (9-12) — slightly smaller, lighter weight. */
.gcs__chip--sub[b-16h1r7k33z] {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 6px 14px;
    min-width: 0;
}

/* "Other…" — muted, dashed border. */
.gcs__chip--other[b-16h1r7k33z] {
    border-style: dashed;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 6px 14px;
    min-width: 0;
}

.gcs__chip--other.gcs__chip--selected[b-16h1r7k33z] {
    border-style: solid;
    color: #ffffff;
}
/* /Components/SharedUI/LessonOutput/AssignmentPill.razor.rz.scp.css */
/* AssignmentPill scoped styles — moved out of GuidedLessonDisplay.razor.css
   when the pill became its own component. Blazor scoped CSS won't reach
   across components (each component gets its own b-{hash} attribute), so
   the pill's styles must live next to the pill itself. */

/* Generating state — teal background */
.assignment-pill--generating[b-x6fp4ku0vv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-accent);
    color: white;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: var(--text-sm);
    font-weight: 500;
}

.assignment-pill__spinner[b-x6fp4ku0vv] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: pill-spin-b-x6fp4ku0vv 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes pill-spin-b-x6fp4ku0vv {
    to { transform: rotate(360deg); }
}

.assignment-pill__generating-text strong[b-x6fp4ku0vv] {
    font-weight: 700;
}

/* SP-02 Iteration 2 polish — Pending state. Quiet, no spinner, conveys
   "this slot is reserved; click Get Deliverables to fill it" without
   implying work is in flight. Muted neutral with dashed left border to
   differentiate from the active complete pill (solid accent border). */
.assignment-pill--pending[b-x6fp4ku0vv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-surface-2);
    border-left: 3px dashed var(--color-border);
    border-radius: 0 6px 6px 0;
    padding: 4px 10px;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

/* Complete state — white with teal left border + summary left / chips right */
.assignment-pill--complete[b-x6fp4ku0vv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    width: 100%;
    background: var(--color-surface);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 6px 6px 0;
    padding: 4px 10px;
}

.assignment-pill__summary[b-x6fp4ku0vv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.assignment-pill__chips[b-x6fp4ku0vv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.assignment-pill__type-name[b-x6fp4ku0vv] {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--text-sm);
}

.assignment-pill__divider[b-x6fp4ku0vv] {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.assignment-pill__meta[b-x6fp4ku0vv] {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--text-sm);
}

.assignment-pill__type-chip[b-x6fp4ku0vv] {
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: var(--text-sm);
    font-weight: 500;
}
/* /Components/SharedUI/LessonOutput/GuidedLessonDisplay.razor.rz.scp.css */
.guided-display[b-85edjx4he6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
    min-width: 0;
}

/* Objective */
.guided-display__eyebrow[b-85edjx4he6] {
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: var(--space-2);
}

.guided-display__objective-text[b-85edjx4he6] {
    font-family: var(--font-display);
    /* SP-02 Iteration 2 polish — was --text-3xl. Tightened to subhead-scale
       so it anchors the objective card without dominating the page; the
       result page now owns the unit-level objective for multi-day. */
    font-size: var(--text-xl);
    line-height: 1.35;
    color: var(--color-primary);
    margin: 0;
    font-weight: 400;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.guided-display__section-title[b-85edjx4he6] {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 var(--space-4) 0;
}

/* Day Accordion */
.guided-display__day[b-85edjx4he6] {
    padding: 0;
    overflow: hidden;
}

.guided-display__day-header[b-85edjx4he6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-4);
    background: var(--color-surface-2);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}
.guided-display__day-header:hover[b-85edjx4he6] {
    background: var(--color-surface-3);
}

.guided-display__day-header-left[b-85edjx4he6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

.guided-display__day-number[b-85edjx4he6] {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-primary);
}

.guided-display__stage-badge[b-85edjx4he6] {
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: 4px;
    text-transform: capitalize;
}
.guided-display__stage-badge--foundation[b-85edjx4he6] {
    background: var(--color-accent-pale);
    color: var(--color-accent);
}
.guided-display__stage-badge--development[b-85edjx4he6] {
    background: var(--color-secondary-pale);
    color: var(--color-secondary);
}
.guided-display__stage-badge--mastery[b-85edjx4he6] {
    background: var(--color-primary-pale);
    color: var(--color-primary);
}

.guided-display__day-header-right[b-85edjx4he6] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.guided-display__day-objective-preview[b-85edjx4he6] {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

/* IS-F0b Step 4.2 — "I taught this". Positioned with the day header (never the export area), sized to sit
   quietly beside the stage badge without shifting the existing header layout. */
.guided-display__taught-tap[b-85edjx4he6] {
    flex-shrink: 0;
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.guided-display__taught-tap:hover[b-85edjx4he6] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.guided-display__taught-badge[b-85edjx4he6] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    font-weight: 500;
    padding: 2px var(--space-2);
    border-radius: 4px;
    background: var(--color-accent-pale);
    color: var(--color-accent);
    white-space: nowrap;
}

.guided-display__taught-undo[b-85edjx4he6] {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    color: var(--color-text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.guided-display__chevron[b-85edjx4he6] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.guided-display__chevron--open[b-85edjx4he6] {
    transform: rotate(180deg);
}

.guided-display__day-body[b-85edjx4he6] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    border-top: 1px solid var(--color-surface-3);
}

.guided-display__daily-objective p[b-85edjx4he6] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--color-text-primary);
}

.guided-display__day-standards[b-85edjx4he6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Vocabulary */
.guided-display__section[b-85edjx4he6] {
    display: flex;
    flex-direction: column;
}
.guided-display__section .guided-display__section-title[b-85edjx4he6] {
    font-size: var(--text-lg);
    margin-bottom: var(--space-3);
}

.guided-display__vocab-grid[b-85edjx4he6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.guided-display__vocab-item[b-85edjx4he6] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-surface-3);
    border-radius: 8px;
    padding: var(--space-3);
}
.guided-display__vocab-term[b-85edjx4he6] {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--text-base);
    margin-bottom: 2px;
}
.guided-display__vocab-def[b-85edjx4he6] {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Materials */
.guided-display__materials[b-85edjx4he6] {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--color-text-primary);
}
.guided-display__materials li[b-85edjx4he6] {
    font-size: var(--text-base);
    line-height: 1.6;
    margin-bottom: var(--space-1);
}

/* F8 — point-of-use "I don't have this". Quiet until row hover so the list still reads
   as a materials list, not a form. */
.guided-display__material-row[b-85edjx4he6] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}
.guided-display__material-name[b-85edjx4he6] { flex: 0 1 auto; }
.guided-display__material-remove[b-85edjx4he6] {
    flex: 0 0 auto;
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
}
.guided-display__material-row:hover .guided-display__material-remove[b-85edjx4he6],
.guided-display__material-remove:focus-visible[b-85edjx4he6] {
    opacity: 1;
}
.guided-display__material-remove:hover[b-85edjx4he6] {
    color: var(--color-error);
    text-decoration: underline;
}

/* Assignment summary pills wrapper. Pill-specific styles live in
   AssignmentPill.razor.css — Blazor scoped CSS is per-component, so the
   pill's own b-{hash} only matches selectors in its own stylesheet. */
.guided-display__assignment-summaries[b-85edjx4he6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* Review CTA */
.guided-display__review-btn[b-85edjx4he6] {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-lg);
    font-weight: 600;
}

/* SmartCalc */
.guided-display__smartcalc[b-85edjx4he6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.guided-display__smartcalc-row[b-85edjx4he6] {
    background: var(--color-accent-pale);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 6px 6px 0;
    padding: var(--space-3) var(--space-4);
}
.guided-display__smartcalc-head[b-85edjx4he6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}
.guided-display__smartcalc-type[b-85edjx4he6] {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--text-base);
}
.guided-display__smartcalc-meta[b-85edjx4he6] {
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    color: var(--color-text-secondary);
    font-weight: 600;
}
.guided-display__smartcalc-reason[b-85edjx4he6] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    line-height: 1.5;
    font-style: italic;
}

/* Coverage Map Table */
.guided-display__coverage-table-wrap[b-85edjx4he6] {
    overflow-x: auto;
}

.guided-display__coverage-table[b-85edjx4he6] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.guided-display__coverage-table th[b-85edjx4he6],
.guided-display__coverage-table td[b-85edjx4he6] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-surface-3);
    text-align: center;
}

.guided-display__coverage-table th[b-85edjx4he6] {
    background: var(--color-surface-2);
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.guided-display__coverage-code[b-85edjx4he6] {
    font-weight: 600;
    color: var(--color-primary);
    text-align: left !important;
}

.guided-display__coverage-role[b-85edjx4he6] {
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    font-weight: 600;
    padding: 1px var(--space-2);
    border-radius: 3px;
}
.guided-display__coverage-role--focus[b-85edjx4he6] {
    background: var(--color-secondary-pale);
    color: var(--color-secondary);
}
.guided-display__coverage-role--supporting[b-85edjx4he6] {
    background: var(--color-accent-pale);
    color: var(--color-accent);
}

.guided-display__coverage-cell[b-85edjx4he6] {
    width: 60px;
}

.guided-display__coverage-check[b-85edjx4he6] {
    color: var(--color-accent);
    font-weight: 700;
    font-size: var(--text-lg);
}

@media (max-width: 640px) {
    .guided-display__vocab-grid[b-85edjx4he6] {
        grid-template-columns: 1fr;
    }
    .guided-display__day-objective-preview[b-85edjx4he6] {
        display: none;
    }
}

/* ─── Ivaro's approach — collapsible rationale panel ────────────────── */

.guided-display__rationale[b-85edjx4he6] {
    background: #f0f4ff;
    border-left: 3px solid var(--color-primary, #1a56db);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.guided-display__rationale-toggle[b-85edjx4he6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    /* WO-85 Unit 7 - a button takes the UA 13.33 px unless told; the rationale label reads at 14 px */
    font-size: var(--text-sm);
    color: var(--color-primary, #1a56db);
    text-align: left;
}

.guided-display__rationale-icon[b-85edjx4he6] {
    font-size: 0.875rem;
    flex-shrink: 0;
}

.guided-display__rationale-label[b-85edjx4he6] {
    flex: 1;
}

.guided-display__rationale-chevron[b-85edjx4he6] {
    font-size: 0.875rem;
    color: #6b7280;
}

.guided-display__rationale-body[b-85edjx4he6] {
    padding: 0 1rem 0.75rem 2.25rem;
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.6;
    color: #374151;
}

/* SP-02 PostCatalog polish — Issue 1 fix: inline question list rendered
   inside each day's accordion under the assignment pills, once
   QuestionsReady is true. Copied/adapted from QuickLessonResult.razor.css
   (the .quick-result__sp02-* selectors there are the visual reference). */

.guided-display__deliverable[b-85edjx4he6] {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    margin-top: var(--space-3);
}

.guided-display__deliverable-head[b-85edjx4he6] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-2);
}

.guided-display__deliverable-meta[b-85edjx4he6] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.guided-display__question-list[b-85edjx4he6] {
    margin: 0;
    padding-left: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.guided-display__question[b-85edjx4he6] {
    padding-bottom: var(--space-2);
    border-bottom: 1px dashed var(--color-border);
}
.guided-display__question:last-child[b-85edjx4he6] {
    border-bottom: none;
}

.guided-display__question-prompt[b-85edjx4he6] {
    margin: 0 0 var(--space-2) 0;
    font-weight: 500;
}

.guided-display__options[b-85edjx4he6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.guided-display__options li[b-85edjx4he6] {
    padding: var(--space-1) var(--space-2);
    border-radius: 4px;
    background: var(--color-surface);
    font-size: var(--text-base);
}
.guided-display__option--correct[b-85edjx4he6] {
    background: var(--color-accent-pale) !important;
    color: var(--color-accent);
    font-weight: 600;
}

.guided-display__question-answer[b-85edjx4he6] {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-accent);
}

/* F13 item 2 — a material the teacher flagged as "I don't have this". It stays visible and
   struck through with an Undo beside it, rather than vanishing: a row that disappears gives
   her nothing to click to change her mind, which is what left her stuck twice. */
.guided-display__material-row--removed .guided-display__material-name[b-85edjx4he6] {
    text-decoration: line-through;
    color: var(--color-text-muted);
}
.guided-display__material-note[b-85edjx4he6] {
    margin-left: var(--space-2);
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    color: var(--color-text-muted);
    font-style: italic;
}
/* LP WO-94 Unit 2 — where her materials list comes from, under it. */
.guided-display__materials-source[b-85edjx4he6] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.guided-display__material-undo[b-85edjx4he6] {
    margin-left: var(--space-2);
    background: none;
    border: none;
    padding: 0;
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;
}
.guided-display__material-undo:hover[b-85edjx4he6] {
    opacity: 0.8;
}

/* 🔴 LP WO-119 Unit 2 / WO-120 Unit 1 — "Supports for this group", before the flow (moved from GuidedLessonResult.razor.css):
   the Differentiation panel's look (LessonTimeBreakdown.razor.css), no new colour. The approved note takes the list's own type. */
.guided-lesson__group-supports[b-85edjx4he6] {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: #f5f3ff;
    border-left: 3px solid #a78bfa;
    border-radius: 0 6px 6px 0;
}

.guided-lesson__group-supports-heading[b-85edjx4he6] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    color: #5b21b6;
}

.guided-lesson__group-supports-note[b-85edjx4he6] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.guided-lesson__group-supports-list[b-85edjx4he6] {
    margin: var(--space-2) 0 0;
    padding-left: 1.25rem;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    list-style: disc;
}

.guided-lesson__group-supports-list li[b-85edjx4he6] {
    margin-bottom: var(--space-1);
    line-height: 1.5;
}
/* /Components/SharedUI/LessonOutput/LessonPlanDisplay.razor.rz.scp.css */
.lesson-display[b-on81d91vug] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
    min-width: 0;
}

.lesson-display__eyebrow[b-on81d91vug] {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: var(--space-2);
}

.lesson-display__objective-text[b-on81d91vug] {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1.25;
    color: var(--color-primary);
    margin: 0;
    font-weight: 400;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.lesson-display__section-title[b-on81d91vug] {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 var(--space-4) 0;
}

/* Vocabulary */
.lesson-display__vocab-grid[b-on81d91vug] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.lesson-display__vocab-item[b-on81d91vug] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-surface-3);
    border-radius: 8px;
    padding: var(--space-3);
}
.lesson-display__vocab-term[b-on81d91vug] {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--text-base);
    margin-bottom: 2px;
}
.lesson-display__vocab-def[b-on81d91vug] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Materials */
.lesson-display__materials[b-on81d91vug] {
    margin: 0;
    padding-left: var(--space-5);
    color: var(--color-text-primary);
}
.lesson-display__materials li[b-on81d91vug] {
    font-size: var(--text-base);
    line-height: 1.6;
    margin-bottom: var(--space-1);
}

/* F8 — point-of-use "I don't have this". The remove button is quiet until hover so the
   materials list still reads as a clean list, not a form. */
.lesson-display__material-row[b-on81d91vug] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}
.lesson-display__material-name[b-on81d91vug] { flex: 0 1 auto; }
.lesson-display__material-remove[b-on81d91vug] {
    flex: 0 0 auto;
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease;
}
.lesson-display__material-row:hover .lesson-display__material-remove[b-on81d91vug],
.lesson-display__material-remove:focus-visible[b-on81d91vug] {
    opacity: 1;
}
.lesson-display__material-remove:hover[b-on81d91vug] {
    color: var(--color-error);
    text-decoration: underline;
}

/* Instructional flow */
.lesson-display__flow[b-on81d91vug] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.lesson-display__segment[b-on81d91vug] {
    border-left: 3px solid var(--color-accent);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-2);
    border-radius: 0 8px 8px 0;
}
.lesson-display__segment-head[b-on81d91vug] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.lesson-display__segment-name[b-on81d91vug] {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--text-lg);
}
.lesson-display__segment-time[b-on81d91vug] {
    background: var(--color-primary);
    color: white;
    padding: 2px var(--space-2);
    border-radius: 4px;
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}
.lesson-display__segment-content[b-on81d91vug] {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.65;
    color: var(--color-text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Assignments */
.lesson-display__assignments[b-on81d91vug] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.lesson-display__assignment-head[b-on81d91vug] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}
.lesson-display__assignment-head .lesson-display__section-title[b-on81d91vug] {
    margin: 0;
}
.lesson-display__assignment-meta[b-on81d91vug] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.lesson-display__assignment-reason[b-on81d91vug] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-style: italic;
    margin: 0 0 var(--space-3) 0;
    background: var(--color-accent-pale);
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--color-accent);
    border-radius: 0 4px 4px 0;
}

.lesson-display__questions[b-on81d91vug] {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: q;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.lesson-display__question[b-on81d91vug] {
    counter-increment: q;
    border: 1px solid var(--color-surface-3);
    border-radius: 8px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    position: relative;
}
.lesson-display__question[b-on81d91vug]::before {
    content: counter(q) ".";
    position: absolute;
    top: var(--space-3);
    left: -22px;
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.lesson-display__questions[b-on81d91vug] { padding-left: var(--space-5); }

.lesson-display__question-head[b-on81d91vug] {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}
.lesson-display__badge[b-on81d91vug] {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: 4px;
    text-transform: none;
}
.lesson-display__badge--type[b-on81d91vug] {
    background: var(--color-secondary-pale);
    color: var(--color-secondary);
}
.lesson-display__badge--dok[b-on81d91vug] {
    background: var(--color-primary-pale);
    color: var(--color-primary);
}

.lesson-display__question-prompt[b-on81d91vug] {
    font-size: var(--text-base);
    line-height: 1.55;
    color: var(--color-text-primary);
    margin-bottom: var(--space-2);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.lesson-display__question-options[b-on81d91vug] {
    list-style: none;
    margin: 0 0 var(--space-2) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.lesson-display__option[b-on81d91vug] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: var(--space-1) var(--space-3);
    border-radius: 4px;
    background: var(--color-surface-2);
}
.lesson-display__option--correct[b-on81d91vug] {
    background: var(--color-accent-pale);
    color: var(--color-accent);
    font-weight: 600;
}

.lesson-display__select-label[b-on81d91vug] {
    font-size: var(--text-xs);
    font-weight: 600;
    font-style: italic;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.lesson-display__answer[b-on81d91vug] {
    font-size: var(--text-sm);
    color: var(--color-accent);
    font-weight: 500;
    background: var(--color-accent-pale);
    padding: var(--space-1) var(--space-3);
    border-radius: 4px;
    margin-bottom: var(--space-2);
}
.lesson-display__answer-label[b-on81d91vug] {
    font-weight: 600;
}

.lesson-display__scaffold[b-on81d91vug] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-style: italic;
    border-top: 1px dashed var(--color-surface-3);
    padding-top: var(--space-2);
    margin-top: var(--space-1);
}

/* SmartCalc summaries */
.lesson-display__smartcalc[b-on81d91vug] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.lesson-display__smartcalc-row[b-on81d91vug] {
    background: var(--color-accent-pale);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 6px 6px 0;
    padding: var(--space-3) var(--space-4);
}
.lesson-display__smartcalc-head[b-on81d91vug] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}
.lesson-display__smartcalc-type[b-on81d91vug] {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--text-base);
}
.lesson-display__smartcalc-meta[b-on81d91vug] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-weight: 600;
}
.lesson-display__smartcalc-reason[b-on81d91vug] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    line-height: 1.5;
    font-style: italic;
}

@media (max-width: 640px) {
    .lesson-display__vocab-grid[b-on81d91vug] {
        grid-template-columns: 1fr;
    }
}

/* --- Contextual image container -------------------------------------
   Renders above the question prompt when the AI marked the question as
   benefiting from a visual (ImageGenType.ContextScene + ImageUrl). Hard
   caps the display dimensions so long illustrations don't dominate the
   layout; the PDF export renders the same image at a fixed 180x120 pt. */
.question-image-container[b-on81d91vug] {
    margin: 6px 0 8px 0;
    display: flex;
    justify-content: flex-start;
}
.question-image-container img[b-on81d91vug] {
    max-width: 220px;
    max-height: 160px;
    width: auto;
    height: auto;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background-color: #FFFFFF;
    object-fit: contain;
}
/* /Components/SharedUI/LessonOutput/LessonTimeBreakdown.razor.rz.scp.css */
.lesson-time-breakdown__title[b-o0060ivxtk] {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 var(--space-4) 0;
}

.lesson-time-breakdown__list[b-o0060ivxtk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.lesson-time-breakdown__segment[b-o0060ivxtk] {
    border-left: 3px solid var(--color-accent);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface-2);
    border-radius: 0 8px 8px 0;
}

.lesson-time-breakdown__segment-head[b-o0060ivxtk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.lesson-time-breakdown__segment-name[b-o0060ivxtk] {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--text-lg);
}

.lesson-time-breakdown__segment-time[b-o0060ivxtk] {
    background: var(--color-primary);
    color: white;
    padding: 2px var(--space-2);
    border-radius: 4px;
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    font-weight: 600;
    white-space: nowrap;
}

.lesson-time-breakdown__segment-content[b-o0060ivxtk] {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--color-text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.lesson-time-breakdown__total[b-o0060ivxtk] {
    margin-top: var(--space-3);
    text-align: right;
    font-size: var(--text-sm);   /* WO-85 Unit 7 - 14 px (was 12) */
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Misconception toggle + panel */
.segment__misconception-toggle[b-o0060ivxtk] {
    font-size: var(--text-sm);
    color: #B8860B;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
}
.segment__misconception-toggle:hover[b-o0060ivxtk] {
    color: #8B6914;
}

.segment__misconception[b-o0060ivxtk] {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: #FFF8E6;
    border-left: 3px solid #F0C040;
    border-radius: 0 6px 6px 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    font-style: italic;
    animation: misconceptionIn-b-o0060ivxtk 0.15s ease-out;
}

@keyframes misconceptionIn-b-o0060ivxtk {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Engagement strategy tags (lower-right of each segment) ─────── */

.segment__strategy-tags[b-o0060ivxtk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
}

.segment__strategy-tag[b-o0060ivxtk] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #1a56db;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 9999px;
    white-space: nowrap;
}

.segment__strategy-tag[b-o0060ivxtk]::before {
    content: "✦";
    font-size: 0.875rem;
    opacity: 0.7;
}

/* ─── Inline answer annotation ───────────────────────────────────────── */

.segment__answer[b-o0060ivxtk] {
    color: var(--color-accent, #0f9981);
    font-style: italic;
    font-size: var(--text-base);
    /* Small left margin so the answer reads as a slight indent after the ? */
    margin-left: 0.15em;
}

/* ─── Listen Fors toggle + panel ─────────────────────────────────────── */

.segment__listenfors-toggle[b-o0060ivxtk] {
    font-size: var(--text-sm);
    color: #1d6b8a;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
}

.segment__listenfors-toggle:hover[b-o0060ivxtk] {
    color: #135570;
}

.segment__listenfors[b-o0060ivxtk] {
    margin-top: var(--space-2);
    margin-bottom: 0;
    padding: var(--space-3) var(--space-4);
    padding-left: calc(var(--space-4) + 1.25rem); /* list indent */
    background: #EBF8FF;
    border-left: 3px solid #63B3ED;
    border-radius: 0 6px 6px 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    list-style: disc;
    animation: listenForsIn-b-o0060ivxtk 0.15s ease-out;
}

.segment__listenfors li[b-o0060ivxtk] {
    margin-bottom: var(--space-1);
    line-height: 1.5;
}

.segment__listenfors li:last-child[b-o0060ivxtk] {
    margin-bottom: 0;
}

@keyframes listenForsIn-b-o0060ivxtk {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Inline sentence frame annotation ──────────────────────────────── */

.segment__frame[b-o0060ivxtk] {
    display: inline;
    color: #5b21b6;
    font-style: italic;
    font-size: var(--text-base);
    font-weight: 500;
    margin-left: 0.25em;
    padding: 0.1em 0.4em;
    background: #f5f3ff;
    border-radius: 4px;
}

/* ─── Differentiation Notes toggle + panel ───────────────────────────── */

.segment__diffnotes-toggle[b-o0060ivxtk] {
    font-size: var(--text-sm);
    color: #5b21b6;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
}

.segment__diffnotes-toggle:hover[b-o0060ivxtk] {
    color: #4c1d95;
}

.segment__diffnotes[b-o0060ivxtk] {
    margin-top: var(--space-2);
    margin-bottom: 0;
    padding: var(--space-3) var(--space-4);
    padding-left: calc(var(--space-4) + 1.25rem);
    background: #f5f3ff;
    border-left: 3px solid #a78bfa;
    border-radius: 0 6px 6px 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    list-style: disc;
    animation: diffNotesIn-b-o0060ivxtk 0.15s ease-out;
}

.segment__diffnotes li[b-o0060ivxtk] {
    margin-bottom: var(--space-1);
    line-height: 1.5;
}

.segment__diffnotes li:last-child[b-o0060ivxtk] {
    margin-bottom: 0;
}

@keyframes diffNotesIn-b-o0060ivxtk {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* WO-22 — what the segment hands out or displays. LP WO-98 Unit 2: one quiet line (the lesson's "What you need" card
   says how each is printed or provided). */
.segment__uses[b-o0060ivxtk] {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    color: #0f766e;
    font-weight: 600;
    overflow-wrap: anywhere;
}
/* /Components/SharedUI/LessonOutput/WhatYouNeedCard.razor.rz.scp.css */
/* LP WO-98 Unit 2 — the two groups of the "What you need" card. Same tokens as the review page's old sections. */
.wyn__group[b-p4nt0upkfc] {
    margin: var(--space-3) 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.wyn__group:first-child[b-p4nt0upkfc] {
    margin-top: 0;
}

.wyn__list[b-p4nt0upkfc],
.wyn__supplies[b-p4nt0upkfc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.wyn__list + .wyn__supplies[b-p4nt0upkfc] {
    margin-top: var(--space-2);
}

.wyn__item[b-p4nt0upkfc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wyn__item + .wyn__item[b-p4nt0upkfc] {
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.wyn__item-head[b-p4nt0upkfc] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
}

.wyn__item-title[b-p4nt0upkfc] {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.wyn__tag[b-p4nt0upkfc] {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-surface-2, #f3f4f6);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    white-space: nowrap;
}

.wyn__where[b-p4nt0upkfc] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.wyn__note[b-p4nt0upkfc],
.wyn__text[b-p4nt0upkfc] {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
    white-space: pre-line;
}

.wyn__toggle[b-p4nt0upkfc] {
    align-self: flex-start;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}
/* /Components/SharedUI/Lessons/DayAwareStandardsPicker.razor.rz.scp.css */
/*
    SP-02 — DayAwareStandardsPicker styling. Two distinct visual modes:
      1. Assessment mode → pre-checked checkbox list with a header note
      2. Default mode → falls through to StandardsChipSelector (whose own
                        scoped CSS handles the chip-input layout)
*/

.day-aware-picker[b-84yd6zgdpn] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.day-aware-picker__header[b-84yd6zgdpn] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.day-aware-picker__heading[b-84yd6zgdpn] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
}

.day-aware-picker__subtitle[b-84yd6zgdpn] {
    margin: 0;
    font-size: 0.8125rem;
    color: #64748b;
}

.day-aware-picker__list[b-84yd6zgdpn] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
}

.day-aware-picker__item[b-84yd6zgdpn] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0.625rem;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
}

.day-aware-picker__item:hover[b-84yd6zgdpn] {
    border-color: #94a3b8;
}

.day-aware-picker__item--checked[b-84yd6zgdpn] {
    border-color: #2563eb;
    background-color: #eff6ff;
}

.day-aware-picker__checkbox[b-84yd6zgdpn] {
    width: 1rem;
    height: 1rem;
    accent-color: #2563eb;
    cursor: pointer;
}

.day-aware-picker__code[b-84yd6zgdpn] {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.875rem;
    white-space: nowrap;
}

.day-aware-picker__description[b-84yd6zgdpn] {
    color: #475569;
    font-size: 0.8125rem;
    line-height: 1.35;
}

/* Empty-state warning shown when DayType is Assessment but the unit has
   no prior days (e.g. Day 1 set to Assessment by mistake). */
.day-aware-picker__empty-warning[b-84yd6zgdpn] {
    margin-bottom: 0.5rem;
    padding: 0.625rem 0.875rem;
    background-color: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 0.5rem;
    color: #92400e;
    font-size: 0.875rem;
}
/* /Components/SharedUI/Lessons/DayDeliverablesPanel.razor.rz.scp.css */
/* SP-02 Iteration 2 — DayDeliverablesPanel scoped styles. */

.ddp[b-hkh9g8bgic] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.ddp__empty[b-hkh9g8bgic] {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    margin: 0;
}

.ddp__row[b-hkh9g8bgic] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.ddp__row--on[b-hkh9g8bgic] {
    border-color: var(--color-primary);
    background: var(--color-surface);
}

.ddp__row--off[b-hkh9g8bgic] {
    background: var(--color-surface-2, var(--color-surface));
}

.ddp__row--loading[b-hkh9g8bgic] {
    opacity: 0.6;
}

.ddp__row--locked[b-hkh9g8bgic] {
    opacity: 0.65;
    pointer-events: none;
}

.ddp__head[b-hkh9g8bgic] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.ddp__body[b-hkh9g8bgic] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ddp__title[b-hkh9g8bgic] {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--text-base);
}

.ddp__subtitle[b-hkh9g8bgic] {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: 1.4;
}

/* Toggle — visually consistent with the existing .toggle component. */
.ddp__toggle[b-hkh9g8bgic] {
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--color-border);
    border: none;
    cursor: pointer;
    position: relative;
    transition: background 0.18s ease;
    padding: 0;
}

.ddp__toggle--on[b-hkh9g8bgic] {
    background: var(--color-primary);
}

.ddp__toggle-thumb[b-hkh9g8bgic] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    transition: transform 0.18s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.ddp__toggle--on .ddp__toggle-thumb[b-hkh9g8bgic] {
    transform: translateX(20px);
}

/* SmartCalc inline strip for enabled rows — mirrors the stand-alone
   SmartCalcPanel design (accent-pale background, accent left border,
   teal stepper border) so the deliverables row reads as the same
   "SmartCalc is talking" pattern teachers see elsewhere in the app. */
.ddp__smartcalc[b-hkh9g8bgic] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: var(--color-accent-pale);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 6px 6px 0;
    padding: var(--space-2) var(--space-4);
    margin-top: var(--space-1);
    flex-wrap: wrap;
}

.ddp__smartcalc-summary[b-hkh9g8bgic] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-primary);
}

.ddp__smartcalc-count[b-hkh9g8bgic] {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-primary);
}

.ddp__smartcalc-label[b-hkh9g8bgic] {
    font-weight: 500;
    color: var(--color-text-secondary);
}

.ddp__smartcalc-divider[b-hkh9g8bgic] {
    color: var(--color-text-muted);
    font-weight: 400;
}

.ddp__smartcalc-min[b-hkh9g8bgic] {
    font-weight: 600;
    color: var(--color-primary);
}

.ddp__smartcalc-loading[b-hkh9g8bgic] {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: var(--text-base);
}

.ddp__smartcalc-reason[b-hkh9g8bgic] {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: 1.5;
    padding: 0 var(--space-4);
}

/* Stepper — matches SmartCalcPanel's stepper exactly: 22×22 buttons,
   accent border, accent-colored glyphs, accent-pale hover. */
.ddp__stepper[b-hkh9g8bgic] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid rgba(46, 170, 138, 0.3);
    border-radius: 6px;
    padding: 2px 4px;
    flex: 0 0 auto;
}

.ddp__step-btn[b-hkh9g8bgic] {
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    color: var(--color-accent);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
    padding: 0;
}

.ddp__step-btn:hover:not(:disabled)[b-hkh9g8bgic] {
    background: var(--color-accent-pale);
}

.ddp__step-btn:disabled[b-hkh9g8bgic] {
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.ddp__step-value[b-hkh9g8bgic] {
    min-width: 22px;
    text-align: center;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-primary);
}

/* Loading shimmer placeholders. */
.ddp__shimmer[b-hkh9g8bgic] {
    height: 12px;
    background: linear-gradient(
        90deg,
        var(--color-surface-2, #eee) 0%,
        var(--color-surface, #f5f5f5) 50%,
        var(--color-surface-2, #eee) 100%
    );
    background-size: 200% 100%;
    animation: ddp-shimmer-b-hkh9g8bgic 1.4s ease-in-out infinite;
    border-radius: 4px;
}

.ddp__shimmer--title[b-hkh9g8bgic] {
    width: 30%;
    height: 14px;
    margin-bottom: 4px;
}

.ddp__shimmer--subtitle[b-hkh9g8bgic] {
    width: 70%;
}

@keyframes ddp-shimmer-b-hkh9g8bgic {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
/* /Components/SharedUI/Lessons/DayTypeSelector.razor.rz.scp.css */
/*
    SP-02 — DayTypeSelector styling. Mirrors the pill-strip layout in
    Kevin's screenshot — seven rounded pills, the selected one filled
    in dark navy with white text, others outlined.
*/

.day-type-selector[b-ccz0z091ln] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.day-type-selector__header[b-ccz0z091ln] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.day-type-selector__heading[b-ccz0z091ln] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.day-type-selector__title[b-ccz0z091ln] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a; /* slate-900 */
}

.day-type-selector__subtitle[b-ccz0z091ln] {
    margin: 0;
    font-size: 1rem;
    color: #64748b; /* slate-500 */
}

.day-type-selector__pills[b-ccz0z091ln] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.day-type-pill[b-ccz0z091ln] {
    appearance: none;
    border: 1.5px solid #e2e8f0; /* slate-200 */
    background-color: #ffffff;
    color: #475569; /* slate-600 */
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    white-space: nowrap;
}

.day-type-pill:hover:not(.day-type-pill--selected)[b-ccz0z091ln] {
    border-color: #94a3b8; /* slate-400 */
    color: #1e293b;        /* slate-800 */
}

.day-type-pill:focus-visible[b-ccz0z091ln] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.day-type-pill--selected[b-ccz0z091ln] {
    background-color: #0f172a; /* slate-900 — matches mockup */
    border-color: #0f172a;
    color: #ffffff;
}
/* /Components/SharedUI/Lessons/DurationSlider.razor.rz.scp.css */
/*
    SP-02 — DurationSlider styling. Matches the slider + readout + yellow
    callout layout shown in Kevin's screenshot of the SP-02 day section.
*/

.duration-slider[b-zqf1i588cr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.duration-slider__row[b-zqf1i588cr] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.duration-slider__input[b-zqf1i588cr] {
    flex: 1;
    accent-color: #2563eb; /* blue-600 — matches Ivaro accent */
    cursor: pointer;
}

.duration-slider__readout[b-zqf1i588cr] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.625rem 1rem;
    background-color: #eef2ff; /* indigo-50 */
    border-radius: 0.75rem;
    color: #1e3a8a; /* blue-900 */
    line-height: 1.1;
}

.duration-slider__value[b-zqf1i588cr] {
    font-size: 1.5rem;
    font-weight: 700;
}

.duration-slider__unit[b-zqf1i588cr] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);   /* PLAT-WO-15b: was opacity 0.7 (4.24:1); no opacity */
}

/* Yellow timing-note callout — matches the SP-02 mockup's warning band. */
.duration-slider__note[b-zqf1i588cr] {
    background-color: #fef3c7; /* amber-100 */
    border: 1px solid #fcd34d; /* amber-300 */
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: #92400e; /* amber-800 */
    font-size: 1rem;
    line-height: 1.4;
}

.duration-slider__note-label[b-zqf1i588cr] {
    font-weight: 600;
    margin-right: 0.375rem;
}

.duration-slider__note-text[b-zqf1i588cr] {
    font-weight: 400;
}
/* /Components/SharedUI/Lessons/ObjectiveChipPanel.razor.rz.scp.css */
/*
    SP-02 — ObjectiveChipPanel styling. Three-card chip row with the
    selected card outlined in blue (matching the SP-02 mockup), the
    transform actions below.
*/

.objective-panel[b-q8uyz5s3uy] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.objective-panel__header[b-q8uyz5s3uy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.objective-panel__heading[b-q8uyz5s3uy] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.objective-panel__title[b-q8uyz5s3uy] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.objective-panel__subtitle[b-q8uyz5s3uy] {
    margin: 0;
    font-size: 1rem;
    color: #64748b;
}

/* Chip row */
.objective-panel__chips[b-q8uyz5s3uy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.objective-panel__placeholder[b-q8uyz5s3uy] {
    grid-column: 1 / -1;
    padding: 1.5rem;
    text-align: center;
    color: var(--color-text-muted);   /* PLAT-WO-15b: was #94a3b8 (2.45:1) */
    font-size: 1rem;
    background-color: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 0.5rem;
}

.objective-chip[b-q8uyz5s3uy] {
    appearance: none;
    text-align: left;
    background-color: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem 1.125rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 120ms ease, background-color 120ms ease,
                box-shadow 120ms ease, transform 120ms ease;
}

.objective-chip:hover:not(.objective-chip--selected)[b-q8uyz5s3uy] {
    border-color: #cbd5e1;
    background-color: #f8fafc;
}

.objective-chip:focus-visible[b-q8uyz5s3uy] {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.objective-chip--selected[b-q8uyz5s3uy] {
    border-color: #2563eb;     /* blue-600 */
    background-color: #eff6ff;  /* blue-50 — matches mockup */
    box-shadow: 0 0 0 1px #2563eb inset;
}

.objective-chip__lens-label[b-q8uyz5s3uy] {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #2563eb; /* blue-600 — matches the RECOMMENDED label color in mockup */
}

.objective-chip__goal[b-q8uyz5s3uy] {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
}

.objective-chip__meta[b-q8uyz5s3uy] {
    font-size: 0.875rem;
    color: #64748b;
}

/* SP-02 Iteration 2 polish — loading shimmer skeleton. Mirrors the chip
   card layout (label / goal / meta rows) so the panel doesn't reflow when
   real chips arrive. Same gradient + animation pattern as
   EngagementChipPicker / DayDeliverablesPanel for visual consistency. */
.objective-chip--loading[b-q8uyz5s3uy] {
    cursor: default;
    pointer-events: none;
    background-color: #ffffff;
    border-color: #e2e8f0;
}

.objective-chip__shimmer[b-q8uyz5s3uy] {
    display: block;
    height: 0.875rem;
    border-radius: 0.25rem;
    background: linear-gradient(
        90deg,
        #f1f5f9 0%,
        #f8fafc 50%,
        #f1f5f9 100%
    );
    background-size: 200% 100%;
    animation: objective-chip-shimmer-b-q8uyz5s3uy 1.4s ease-in-out infinite;
}

.objective-chip__shimmer--label[b-q8uyz5s3uy] {
    width: 40%;
    height: 0.6875rem;
}

.objective-chip__shimmer--goal[b-q8uyz5s3uy] {
    width: 95%;
    height: 1rem;
}

.objective-chip__shimmer--meta[b-q8uyz5s3uy] {
    width: 65%;
    height: 0.75rem;
}

@keyframes objective-chip-shimmer-b-q8uyz5s3uy {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Transform action buttons under the chips */
.objective-panel__actions[b-q8uyz5s3uy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.objective-panel__action[b-q8uyz5s3uy] {
    appearance: none;
    background-color: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #1e293b;
    padding: 0.5rem 1.125rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.objective-panel__action:hover:not(:disabled)[b-q8uyz5s3uy] {
    background-color: #f1f5f9;
    border-color: #94a3b8;
}

.objective-panel__action:disabled[b-q8uyz5s3uy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.objective-panel__action--primary[b-q8uyz5s3uy] {
    background-color: #1e293b;
    border-color: #1e293b;
    color: #ffffff;
}

.objective-panel__action--primary:hover:not(:disabled)[b-q8uyz5s3uy] {
    background-color: #0f172a;
    border-color: #0f172a;
}

/* F13 item 1 — the goal was cleared because this day's standards changed under it.
   Neutral/informational rather than an amber warning: nothing has gone wrong and
   there is nothing for the teacher to decide, so it should read as an explanation. */
.objective-panel__cleared[b-q8uyz5s3uy] {
    margin-bottom: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface-alt, rgba(0, 0, 0, 0.03));
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-muted);
}
/* /Components/SharedUI/Lessons/RecommendationBadge.razor.rz.scp.css */
/*
    SP-02 — RecommendationBadge styling. Light blue rounded pill that
    visually matches the "Recommended: Introduction" badge in the SP-02
    mockup (right-edge of Day Type and Today's Goals sections).
*/

.rec-badge[b-c5qskrxgoa] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    background-color: #eef2ff; /* indigo-50 */
    color: #4338ca;            /* indigo-700 */
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}

.rec-badge__label[b-c5qskrxgoa] {
    font-weight: 400;
    opacity: 0.85;
}

.rec-badge__value[b-c5qskrxgoa] {
    font-weight: 600;
}

/* Dark variant — for use on light/white backgrounds where the default
   indigo pill needs more contrast (e.g. the "Day-aware" badge in the
   top-right corner of the Today's Goals section). */
.rec-badge--dark[b-c5qskrxgoa] {
    background-color: #1e1b4b; /* indigo-950 */
    color: #ffffff;
}

.rec-badge--dark .rec-badge__label[b-c5qskrxgoa] {
    opacity: 0.7;
}
/* /Components/SharedUI/LessonTemplatePicker/LessonTemplatePicker.razor.rz.scp.css */
/* Mirrors the Ivaro-Suggests engagement card (ep__scard) so the lesson
   template picker feels like a first-class Ivaro recommendation surface. */

.ltp[b-1gx82al74s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    /* Declare the picker as a size-queryable container so the grid/carousel
       adapts to the picker's own width, not the viewport. Fixes the case
       where the form card is narrower than the viewport (sidebar, column). */
    container-type: inline-size;
    container-name: ltp;
}

.ltp__grid[b-1gx82al74s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3, 12px);
}

/* Base card */
.ltp__card[b-1gx82al74s] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    background: var(--color-surface, #ffffff);
    border: 2px solid var(--color-border, #d1d5db);
    border-radius: 10px;
    padding: 16px 16px 14px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    font-family: inherit;
    min-height: 100px;
}

.ltp__card--off[b-1gx82al74s] {
    /* PLAT-WO-15b (15a drv, ruling 1): no opacity fade. A fade dims the text below AA (2.94-3.08:1), so "unselected"
       is a quieter card instead: the soft surface and the plain border. Its text keeps the AA tokens (muted 4.99:1,
       secondary higher, on --color-surface-2). */
    background: var(--color-surface-2);
    border-color: var(--color-border);
}

.ltp__card--off:hover[b-1gx82al74s] {
    background: var(--color-surface);
    border-color: var(--color-primary, #1a2b4a);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ltp__card--on[b-1gx82al74s] {
    border-color: var(--color-accent, #2eaa8a);
    background: var(--color-surface, #ffffff);
    box-shadow: 0 2px 10px rgba(46, 170, 138, 0.22);
}

.ltp__card--on:hover[b-1gx82al74s] {
    box-shadow: 0 3px 12px rgba(46, 170, 138, 0.26);
}

/* Emoji — top-right corner, like a stamp */
.ltp__card-emoji[b-1gx82al74s] {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 1.25rem;
    line-height: 1;
}

/* Check mark — only when selected. Sits below the emoji. */
.ltp__card-check[b-1gx82al74s] {
    position: absolute;
    top: 40px;
    right: 14px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-accent, #2eaa8a);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.ltp__card-body[b-1gx82al74s] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 40px; /* space for the emoji */
}

.ltp__card-name[b-1gx82al74s] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary, #1a2b4a);
    line-height: 1.3;
}

.ltp__card-flow[b-1gx82al74s] {
    font-size: 1rem;
    color: var(--color-text-secondary, #4b5563);
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

.ltp__card-tagline[b-1gx82al74s] {
    font-size: 1rem;
    color: var(--color-text-muted, #6b7280);
    font-style: italic;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    padding-top: 8px;
    line-height: 1.4;
}

.ltp__card--on .ltp__card-tagline[b-1gx82al74s] {
    color: var(--color-accent-text);   /* PLAT-WO-15b: was --color-accent (2.90:1 on white); 5.22:1 */
    border-top-color: rgba(46, 170, 138, 0.2);
}

/* ═══════════════════════════════════════════════════════════════
   Narrow container — horizontal scroll-snap carousel
   ═══════════════════════════════════════════════════════════════
   When the picker's own container is narrower than 560px (typical
   mobile form-card width), the grid collapses into a swipeable
   horizontal strip. Each card takes 82% of the container width so a
   peek of the next card signals "there's more to see" without needing
   pagination chrome. scroll-snap-type: x mandatory snaps each card
   into position as the teacher swipes — native momentum, zero JS.

   Container queries (not media queries) so the picker adapts based on
   its own parent's width — fixes the case where the form card is
   narrow even on a wide viewport (sidebar / secondary column).
*/
@container ltp (max-width: 560px) {
    .ltp__grid[b-1gx82al74s] {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scroll-padding: 16px;
        /* room so the card's glow shadow doesn't clip on top/bottom edges */
        padding: 6px 0 12px;
        gap: 12px;
        /* Hide scrollbar — the peek + snap do the signaling. */
        scrollbar-width: none;
    }

    .ltp__grid[b-1gx82al74s]::-webkit-scrollbar {
        display: none;
    }

    .ltp__card[b-1gx82al74s] {
        flex: 0 0 82%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
        /* Slightly taller so the tagline has room to breathe at a
           thumb-friendly tap-target height. */
        min-height: 128px;
    }

    /* Inline-start/end padding via pseudo so the first + last cards
       can fully center-snap without clipping against the edge. */
    .ltp__grid[b-1gx82al74s]::before,
    .ltp__grid[b-1gx82al74s]::after {
        content: "";
        flex: 0 0 9%;
    }
}

/* Fallback for browsers without container-query support (very rare in
   2026, but keeps the picker functional): use viewport width instead. */
@supports not (container-type: inline-size) {
    @media (max-width: 640px) {
        .ltp__grid[b-1gx82al74s] {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scroll-padding: 16px;
            padding: 6px 0 12px;
            gap: 12px;
            scrollbar-width: none;
        }
        .ltp__grid[b-1gx82al74s]::-webkit-scrollbar { display: none; }
        .ltp__card[b-1gx82al74s] {
            flex: 0 0 82%;
            scroll-snap-align: center;
            scroll-snap-stop: always;
            min-height: 128px;
        }
        .ltp__grid[b-1gx82al74s]::before,
        .ltp__grid[b-1gx82al74s]::after { content: ""; flex: 0 0 9%; }
    }
}
/* /Components/SharedUI/Nav/IvaroSideNav.razor.rz.scp.css */
/* IvaroSideNav.razor.css — Scoped styles for left navigation panel */

/* ─── Panel Shell ─── */
.sidenav[b-v3ubidfhoo] {
    width: 240px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: linear-gradient(180deg, #1F3A5F 0%, #162E4D 100%);
    color: white;
    display: flex;
    flex-direction: column;
    z-index: 200;
    transition: width 0.2s ease;
    overflow: visible;
    font-family: var(--font-body);
}

.sidenav--collapsed[b-v3ubidfhoo] {
    width: 60px;
}

/* ─── Section 1: Top Welcome Area ─── */
.sidenav__top[b-v3ubidfhoo] {
    padding: var(--space-4) var(--space-4) var(--space-3);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidenav__top-row[b-v3ubidfhoo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidenav__brand[b-v3ubidfhoo] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    min-height: 34px;
    min-width: 0;
}

/* Transparent owl mascot — pairs with the white "Ivaro" type beside it. */
.sidenav__logomark[b-v3ubidfhoo] {
    display: block;
    height: 34px;
    width: auto;
    flex-shrink: 0;
}

.sidenav__brand-text[b-v3ubidfhoo] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

/* PLAT-WO-05d — the white wordmark image at the old text's cap height (--text-lg × 0.7 ≈ 12.6px; the "I" fills
   148 of the image's 158px). */
.sidenav__brand-name[b-v3ubidfhoo] {
    display: block;
    align-self: flex-start;   /* a column flex item stretches; the width must follow the height */
    height: 14px;
    width: auto;
    margin-bottom: 3px;
}

.sidenav__brand-tagline[b-v3ubidfhoo] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
}

.sidenav__collapse-btn[b-v3ubidfhoo] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.sidenav__collapse-btn:hover[b-v3ubidfhoo] {
    background: rgba(255, 255, 255, 0.25);
}

.sidenav--collapsed .sidenav__top[b-v3ubidfhoo] {
    padding: var(--space-3) var(--space-2) var(--space-2);
}

.sidenav--collapsed .sidenav__top-row[b-v3ubidfhoo] {
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
}

/* Greeting */
.sidenav__greeting[b-v3ubidfhoo] {
    margin-top: var(--space-3);
}

.sidenav__greeting-line1[b-v3ubidfhoo] {
    font-size: var(--text-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
}

.sidenav__greeting-line2[b-v3ubidfhoo] {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    margin-top: 2px;
}

/* ─── Section 2: Navigation Groups ─── */
.sidenav__sections[b-v3ubidfhoo] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-2) 0 0;
}

/* PLAT-WO-10c — the collapsed rail lets its flyouts out when the window is tall enough to show every icon. */
@media (min-height: 760px) {
    .sidenav--collapsed .sidenav__sections[b-v3ubidfhoo] { overflow: visible; }
}

.sidenav__sections[b-v3ubidfhoo]::-webkit-scrollbar {
    width: 4px;
}

.sidenav__sections[b-v3ubidfhoo]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

/* Group */
.sidenav__group[b-v3ubidfhoo] {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-3);
}

/* Section label (expanded) */
.sidenav__section-label[b-v3ubidfhoo] {
    padding: var(--space-3) var(--space-3) var(--space-1);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.40);
    font-family: var(--font-body);
}

/* Collapsed divider (replaces section label) */
.sidenav__collapsed-divider[b-v3ubidfhoo] {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: var(--space-2) var(--space-2);
}

/* Nav item — uses ::deep because NavLink renders its own <a> element
   and Blazor scoped CSS attributes are not applied to child component output */
[b-v3ubidfhoo] .sidenav__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    min-height: 40px;
    border-radius: 8px;
    margin: 1px var(--space-2);
    width: calc(100% - var(--space-2) * 2);
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    /* 13px rather than --text-sm so the longest label ("Instructional
       Partner", which also carries a pill) fits the 240px rail unclipped. */
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
    border-left: 3px solid transparent;
}

[b-v3ubidfhoo] .sidenav__item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

[b-v3ubidfhoo] .sidenav__item--active {
    background: rgba(255, 255, 255, 0.13);
    border-left-color: var(--color-accent);
    color: #FFFFFF;
    font-weight: 600;
}

[b-v3ubidfhoo] .sidenav__item--icon-only {
    justify-content: center;
    width: 44px;
    margin: 2px auto;
    padding: var(--space-2);
    border-left: none;
    border-radius: 8px;
}

[b-v3ubidfhoo] .sidenav__item--icon-only.sidenav__item--active {
    border-left: none;
    background: rgba(255, 255, 255, 0.13);
}

/* Item icon */
[b-v3ubidfhoo] .sidenav__item-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

[b-v3ubidfhoo] .sidenav__item-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Item pills (Grading count, "Soon") ─── */
[b-v3ubidfhoo] .sidenav__pill {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
}

[b-v3ubidfhoo] .sidenav__pill--count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-warning);
    color: #FFFFFF;
}

[b-v3ubidfhoo] .sidenav__pill--soon {
    height: 18px;
    padding: 0 7px;
    letter-spacing: 0.06em;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.85);
}

/* ─── Flyout (collapsed hover) ─── */
.sidenav__flyout[b-v3ubidfhoo] {
    position: absolute;
    left: 60px;
    top: 0;
    margin-left: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: var(--space-2) 0;
    min-width: 180px;
    z-index: 250;
    animation: flyoutIn-b-v3ubidfhoo 0.15s ease-out;
}

@keyframes flyoutIn-b-v3ubidfhoo {
    from { opacity: 0; transform: translateX(-4px); }
    to   { opacity: 1; transform: translateX(0); }
}

.sidenav__flyout-title[b-v3ubidfhoo] {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

[b-v3ubidfhoo] .sidenav__flyout-link {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    min-height: 36px;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background 0.15s ease;
}

[b-v3ubidfhoo] .sidenav__flyout-link:hover {
    background: var(--color-surface-2);
}

/* The flyout sits on a light surface, so the dark-rail pill treatment inverts */
[b-v3ubidfhoo] .sidenav__flyout-link .sidenav__pill--soon {
    background: var(--color-surface-2);
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

[b-v3ubidfhoo] .sidenav__flyout-link--active {
    color: var(--color-primary);
    background: var(--color-primary-pale);
    font-weight: 600;
}

/* ─── Section 4: AI Assistant Panel ─── */
.sidenav__assistant[b-v3ubidfhoo] {
    margin: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-size: var(--text-xs);
    flex-shrink: 0;
    animation: tipFade-b-v3ubidfhoo 0.3s ease-out;
}

@keyframes tipFade-b-v3ubidfhoo {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sidenav__assistant-text[b-v3ubidfhoo] {
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
    line-height: 1.5;
    margin-bottom: var(--space-2);
}

.sidenav__assistant-link[b-v3ubidfhoo] {
    color: var(--color-accent);
    font-weight: 600;
    font-size: var(--text-xs);
    text-decoration: none;
    transition: color 0.15s ease;
}

.sidenav__assistant-link:hover[b-v3ubidfhoo] {
    color: var(--color-accent-light);
}

/* ─── Section 5: User Avatar Area ─── */
.sidenav__bottom[b-v3ubidfhoo] {
    flex-shrink: 0;
    padding: var(--space-3);
    padding-bottom: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.sidenav__user-greeting[b-v3ubidfhoo] {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.45);
    padding: 0 var(--space-2) var(--space-2);
}

.sidenav__user[b-v3ubidfhoo] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2);
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
    font-family: var(--font-body);
}

.sidenav__user:hover[b-v3ubidfhoo] {
    background: rgba(255, 255, 255, 0.08);
}

.sidenav__avatar[b-v3ubidfhoo] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: 700;
    flex-shrink: 0;
}

.sidenav__username[b-v3ubidfhoo] {
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidenav--collapsed .sidenav__user[b-v3ubidfhoo] {
    justify-content: center;
}

/* ─── User Popup Menu ─── */
.sidenav__user-popup[b-v3ubidfhoo] {
    position: absolute;
    bottom: 100%;
    left: var(--space-3);
    margin-bottom: var(--space-2);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    padding: var(--space-2) 0;
    z-index: 310;
    animation: popupIn-b-v3ubidfhoo 0.15s ease-out;
}

@keyframes popupIn-b-v3ubidfhoo {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sidenav__user-popup-item[b-v3ubidfhoo] {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background 0.15s ease;
}

.sidenav__user-popup-item:hover[b-v3ubidfhoo] {
    background: var(--color-surface-2);
}

.sidenav__user-popup-item--danger[b-v3ubidfhoo] {
    color: var(--color-error);
}

.sidenav__user-popup-divider[b-v3ubidfhoo] {
    height: 1px;
    background: var(--color-border);
    margin: var(--space-1) 0;
}

.sidenav__user-popup-backdrop[b-v3ubidfhoo] {
    position: fixed;
    inset: 0;
    z-index: 305;
}

/* ─── Mobile: Hamburger ─── */
.sidenav__hamburger[b-v3ubidfhoo] {
    display: none;
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 210;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sidenav__mobile-backdrop[b-v3ubidfhoo] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(22, 46, 77, 0.4);
    z-index: 199;
}

/* ─── Responsive ─── */
/* At ≤1024px (tablet + narrow desktop windows) the sidebar becomes a
   full-drawer overlay behind a hamburger. Previous breakpoint (768px)
   left narrow desktop windows in the desktop-collapsed 60px state,
   which ate too much horizontal room given the form cards inside. */
@media (max-width: 1024px) {
    .sidenav[b-v3ubidfhoo] {
        transform: translateX(-100%);
        transition: transform 0.25s ease, width 0.2s ease;
        z-index: 300;
        width: 240px !important;
        box-shadow: 2px 0 16px rgba(22, 46, 77, 0.25);
    }

    .sidenav--mobile-open[b-v3ubidfhoo] {
        transform: translateX(0);
    }

    .sidenav__hamburger[b-v3ubidfhoo] {
        display: flex;
    }

    .sidenav__mobile-backdrop[b-v3ubidfhoo] {
        display: block;
    }

    /* Close the drawer after a link is tapped — nicer feel than leaving
       it hanging open after navigation. Pure CSS isn't enough; the
       NavLink click triggers a re-render that unmounts the drawer via
       the @if (_mobileOpen) guard in Razor. We leave the styling alone. */
}
/* /Components/SharedUI/Profiles/ChipMultiSelect.razor.rz.scp.css */
.chip-multiselect[b-4twm4vbdui] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

.chip-multiselect__chip[b-4twm4vbdui] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border-radius: 20px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    background: var(--color-surface, #fff);
    color: var(--color-text-secondary, #5A6478);
    border: 1px solid var(--color-border, #D0D7E3);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chip-multiselect__chip:hover[b-4twm4vbdui] {
    border-color: var(--color-accent, #2EAA8A);
    color: var(--color-primary, #1B3A6B);
}

.chip-multiselect__chip--selected[b-4twm4vbdui],
.chip-multiselect__chip--selected:hover[b-4twm4vbdui] {
    background: var(--color-accent-pale, #E6F7F2);
    color: var(--color-accent, #2EAA8A);
    border-color: rgba(46, 170, 138, 0.4);
    font-weight: 600;
}

.chip-multiselect__chip--disabled[b-4twm4vbdui] {
    opacity: 0.45;
    cursor: not-allowed;
}

.chip-multiselect__chip--disabled:hover[b-4twm4vbdui] {
    border-color: var(--color-border, #D0D7E3);
    color: var(--color-text-secondary, #5A6478);
}

.chip-multiselect__counter[b-4twm4vbdui] {
    margin-top: var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #8E97A8);
}
/* /Components/SharedUI/Profiles/ClassCard.razor.rz.scp.css */
.class-card[b-9wu3wacrqm] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    padding: var(--space-5, 20px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.class-card:hover[b-9wu3wacrqm] {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
    border-color: rgba(41, 121, 204, 0.4);
}

.class-card:focus-visible[b-9wu3wacrqm] {
    outline: none;
    border-color: var(--color-secondary, #2979CC);
    box-shadow: 0 0 0 3px rgba(41, 121, 204, 0.18);
}

.class-card__head[b-9wu3wacrqm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
}

.class-card__name[b-9wu3wacrqm] {
    margin: 0;
    font-family: var(--font-display, serif);
    font-size: var(--text-xl, 1.25rem);
    font-weight: 400;
    color: var(--color-primary, #1B3A6B);
    line-height: 1.2;
}

.class-card__menu[b-9wu3wacrqm] {
    position: relative;
    flex: 0 0 auto;
}

.class-card__kebab[b-9wu3wacrqm] {
    background: transparent;
    border: none;
    padding: var(--space-1, 4px);
    border-radius: 6px;
    color: var(--color-text-secondary, #5A6478);
    cursor: pointer;
    display: inline-flex;
}

.class-card__kebab:hover[b-9wu3wacrqm],
.class-card__kebab[aria-expanded="true"][b-9wu3wacrqm] {
    background: var(--color-surface-2, #F4F6FA);
    color: var(--color-primary, #1B3A6B);
}

.class-card__popover[b-9wu3wacrqm] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    min-width: 140px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: var(--space-1, 4px);
    display: flex;
    flex-direction: column;
}

.class-card__popover-item[b-9wu3wacrqm] {
    background: transparent;
    border: none;
    text-align: left;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: 6px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #1B3A6B);
    cursor: pointer;
}

.class-card__popover-item:hover[b-9wu3wacrqm] {
    background: var(--color-surface-2, #F4F6FA);
}

.class-card__popover-item--danger[b-9wu3wacrqm] {
    color: var(--color-error, #C0392B);
}

.class-card__popover-item--danger:hover[b-9wu3wacrqm] {
    background: #FCEFEC;
}

.class-card__popover-scrim[b-9wu3wacrqm] {
    position: fixed;
    inset: 0;
    z-index: 19;
}

.class-card__meta[b-9wu3wacrqm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
}

.class-card__meta-pill[b-9wu3wacrqm] {
    display: inline-flex;
    padding: 2px var(--space-3, 12px);
    border-radius: 999px;
    background: var(--color-primary-pale, #EBF0F8);
    color: var(--color-primary, #1B3A6B);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    line-height: 1.6;
}

.class-card__foot[b-9wu3wacrqm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid var(--color-surface-3, #E8ECF3);
}

.class-card__count[b-9wu3wacrqm] {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--color-text-primary, #1B3A6B);
}

.class-card__count--empty[b-9wu3wacrqm] {
    color: var(--color-text-muted, #8E97A8);
    font-style: italic;
    font-weight: 400;
}

.class-card__confirm[b-9wu3wacrqm] {
    border-top: 1px solid var(--color-surface-3, #E8ECF3);
    padding-top: var(--space-3, 12px);
}
/* /Components/SharedUI/Profiles/ClassContextPicker.razor.rz.scp.css */
.class-ctx__row[b-kuqb5dt8na] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem);
    align-items: stretch;
}

.class-ctx__chip[b-kuqb5dt8na] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    border: 1.5px solid var(--color-border, #d7dce5);
    border-radius: 10px;
    background: #fff;
    color: var(--color-primary, #1B3A6B);
    font-family: var(--font-body, inherit);
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.class-ctx__chip:hover[b-kuqb5dt8na] {
    border-color: var(--color-secondary, #2979CC);
}

.class-ctx__chip:focus-visible[b-kuqb5dt8na] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(41, 121, 204, 0.25);
}

.class-ctx__chip--on[b-kuqb5dt8na] {
    border-color: var(--color-secondary, #2979CC);
    background: rgba(41, 121, 204, 0.08);
    box-shadow: inset 0 0 0 1px var(--color-secondary, #2979CC);
}

.class-ctx__chip-name[b-kuqb5dt8na] {
    font-weight: 600;
}

.class-ctx__chip-meta[b-kuqb5dt8na] {
    font-size: 0.75rem;
    color: var(--color-text-muted, #6b7280);
}

/* WO-08 — "no roster yet" is not a small count, it is a different fact: this class cannot match a single
   name. Muted grey would file it alongside "10 of 12 students"; it gets its own weight and colour so a
   teacher sees it before she uploads rather than after. */
.class-ctx__chip-meta--noroster[b-kuqb5dt8na] {
    color: var(--color-warning-text, #92400e);
    font-weight: 600;
}

.class-ctx__empty[b-kuqb5dt8na] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted, #6b7280);
}

.class-ctx__skeleton[b-kuqb5dt8na] {
    width: 96px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(90deg, #eef1f6 25%, #e2e7f0 37%, #eef1f6 63%);
    background-size: 400% 100%;
    animation: class-ctx-shimmer-b-kuqb5dt8na 1.2s ease-in-out infinite;
}

@keyframes class-ctx-shimmer-b-kuqb5dt8na {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
/* /Components/SharedUI/Profiles/ClimateEditor.razor.rz.scp.css */
.climate-editor[b-k765buvrs8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 24px);
}

.climate-editor__group[b-k765buvrs8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

.climate-editor__q[b-k765buvrs8] {
    margin: 0;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
    color: var(--color-primary, #1B3A6B);
}

.climate-editor__sub[b-k765buvrs8] {
    margin: -4px 0 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #5A6478);
}

.climate-editor__optional[b-k765buvrs8] {
    color: var(--color-text-muted, #8E97A8);
    font-weight: 400;
    font-size: var(--text-sm, 0.875rem);
}

.climate-editor__textarea[b-k765buvrs8] {
    width: 100%;
    padding: var(--space-3, 12px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 6px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    color: var(--color-text-primary, #1B3A6B);
    resize: vertical;
    min-height: 64px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.climate-editor__textarea:focus[b-k765buvrs8] {
    outline: none;
    border-color: var(--color-secondary, #2979CC);
    box-shadow: 0 0 0 3px rgba(41, 121, 204, 0.15);
}

.climate-editor__actions[b-k765buvrs8] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3, 12px);
    padding-top: var(--space-2, 8px);
    border-top: 1px solid var(--color-surface-3, #E8ECF3);
}

.climate-editor__save[b-k765buvrs8] {
    width: auto;
    min-width: 160px;
}

.climate-editor__error[b-k765buvrs8] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-error, #C0392B);
}

.climate-editor__saved[b-k765buvrs8] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-success, #2EAA8A);
    text-align: right;
    animation: climate-saved-flash-b-k765buvrs8 1.6s ease;
}

@keyframes climate-saved-flash-b-k765buvrs8 {
    0%, 75% { opacity: 1; }
    100% { opacity: 0.6; }
}
/* /Components/SharedUI/Profiles/FreshnessChip.razor.rz.scp.css */
.freshness-chip[b-u0c2qkzjey] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: 2px var(--space-3, 12px);
    border-radius: 999px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
    border: 1px solid transparent;
}

.freshness-chip__dot[b-u0c2qkzjey] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
}

.freshness-chip--green[b-u0c2qkzjey] {
    background: var(--color-accent-pale, #E6F7F2);
    color: var(--color-accent-text); /* PLAT-WO-15a (go-live #6): was --color-accent, 2.62:1 on this fill; now 4.72:1 */
    border-color: rgba(46, 170, 138, 0.25);
}

.freshness-chip--neutral[b-u0c2qkzjey] {
    background: var(--color-surface-2, #F4F6FA);
    color: var(--color-text-secondary, #5A6478);
    border-color: var(--color-border, #D0D7E3);
}

.freshness-chip--amber[b-u0c2qkzjey] {
    background: #FFF3E0;
    color: var(--color-warning-text); /* PLAT-WO-15a (go-live #6): was #B66C00, 3.73:1 on this fill; now 5.82:1 */
    border-color: rgba(230, 145, 0, 0.30);
}
/* /Components/SharedUI/Profiles/InlineConfirm.razor.rz.scp.css */
.inline-confirm[b-1t6z08j2p3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    margin-top: var(--space-2, 8px);
    background: #FCEFEC;
    border: 1px solid rgba(192, 57, 43, 0.25);
    border-radius: 8px;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #1B3A6B);
}

.inline-confirm__message[b-1t6z08j2p3] {
    flex: 1 1 auto;
    line-height: 1.4;
}

.inline-confirm__actions[b-1t6z08j2p3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex: 0 0 auto;
}

.inline-confirm__cancel[b-1t6z08j2p3] {
    background: transparent;
    color: var(--color-text-secondary, #5A6478);
    border: none;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: 6px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
}

.inline-confirm__cancel:hover:not(:disabled)[b-1t6z08j2p3] {
    color: var(--color-text-primary, #1B3A6B);
}

.inline-confirm__confirm[b-1t6z08j2p3] {
    background: var(--color-error, #C0392B);
    color: white;
    border: none;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border-radius: 6px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.inline-confirm__confirm:hover:not(:disabled)[b-1t6z08j2p3] {
    background: #A93226;
}

.inline-confirm__cancel:disabled[b-1t6z08j2p3],
.inline-confirm__confirm:disabled[b-1t6z08j2p3] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/SharedUI/Profiles/StudentRosterRow.razor.rz.scp.css */
.roster-row[b-dwb3tdrio4] {
    border-bottom: 1px solid var(--color-surface-3, #E8ECF3);
    transition: background 0.15s ease;
}

.roster-row:last-child[b-dwb3tdrio4] {
    border-bottom: none;
}

.roster-row--expanded[b-dwb3tdrio4] {
    background: var(--color-surface-2, #F4F6FA);
}

.roster-row__head[b-dwb3tdrio4] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: transparent;
    font-family: var(--font-body, sans-serif);
}

.roster-row__head:hover[b-dwb3tdrio4] {
    background: var(--color-surface-2, #F4F6FA);
}

/* The expand / collapse control: avatar + identity, filling the row up to the action buttons. */
.roster-row__toggle[b-dwb3tdrio4] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: 0;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.roster-row__avatar[b-dwb3tdrio4] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary, #1B3A6B);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--text-sm, 0.875rem);
}

.roster-row__identity[b-dwb3tdrio4] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.roster-row__name[b-dwb3tdrio4] {
    font-size: var(--text-base, 1rem);
    font-weight: 500;
    color: var(--color-text-primary, #1B3A6B);
}

.roster-row__note-star[b-dwb3tdrio4] {
    margin-left: var(--space-1, 4px);
    color: var(--color-accent, #E8A33D);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1;
    vertical-align: baseline;
}

.roster-row__chips[b-dwb3tdrio4] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1, 4px);
}

.roster-row__chip[b-dwb3tdrio4] {
    display: inline-flex;
    padding: 1px var(--space-2, 8px);
    border-radius: 999px;
    background: var(--color-secondary-pale, #E8F2FB);
    /* PLAT-WO-09c: the primary navy, not the secondary blue (3.9:1 on this pale ground; axe color-contrast). */
    color: var(--color-primary);
    border: 1px solid rgba(41, 121, 204, 0.25);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    line-height: 1.5;
}

.roster-row__chips-empty[b-dwb3tdrio4] {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #8E97A8);
    font-style: italic;
}

.roster-row__actions[b-dwb3tdrio4] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
}

.roster-row__icon[b-dwb3tdrio4] {
    background: transparent;
    border: none;
    color: var(--color-text-secondary, #5A6478);
    padding: var(--space-2, 8px);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.roster-row__icon:hover[b-dwb3tdrio4] {
    background: var(--color-surface-3, #E8ECF3);
    color: var(--color-primary, #1B3A6B);
}

.roster-row__icon--danger:hover[b-dwb3tdrio4] {
    color: var(--color-error, #C0392B);
}

.roster-row__edit[b-dwb3tdrio4] {
    padding: var(--space-4, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
    animation: roster-row-expand-b-dwb3tdrio4 150ms ease-out;
}

@keyframes roster-row-expand-b-dwb3tdrio4 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.roster-row__edit-grid[b-dwb3tdrio4] {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: var(--space-3, 12px);
}

.roster-row__field[b-dwb3tdrio4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.roster-row__field--short[b-dwb3tdrio4] {
    max-width: 160px;
}

.roster-row__label[b-dwb3tdrio4] {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--color-text-secondary, #5A6478);
}

.roster-row__optional[b-dwb3tdrio4] {
    color: var(--color-text-muted, #8E97A8);
    font-weight: 400;
}

.roster-row__input[b-dwb3tdrio4],
.roster-row__textarea[b-dwb3tdrio4] {
    width: 100%;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #D0D7E3);
    border-radius: 6px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    color: var(--color-text-primary, #1B3A6B);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.roster-row__input:focus[b-dwb3tdrio4],
.roster-row__textarea:focus[b-dwb3tdrio4] {
    outline: none;
    border-color: var(--color-secondary, #2979CC);
    box-shadow: 0 0 0 3px rgba(41, 121, 204, 0.15);
}

.roster-row__textarea[b-dwb3tdrio4] {
    resize: vertical;
    min-height: 64px;
    font-family: var(--font-body, sans-serif);
}

.roster-row__hint[b-dwb3tdrio4] {
    margin: 0;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #8E97A8);
    line-height: 1.5;
}

.roster-row__tag-group[b-dwb3tdrio4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-3, 12px);
}

.roster-row__tag-group-label[b-dwb3tdrio4] {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #8E97A8);
}

.roster-row__error[b-dwb3tdrio4] {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-error, #C0392B);
}

.roster-row__edit-actions[b-dwb3tdrio4] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2, 8px);
}

.roster-row__cancel[b-dwb3tdrio4] {
    background: transparent;
    color: var(--color-text-secondary, #5A6478);
    border: none;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: 6px;
    font-family: var(--font-body, sans-serif);
    font-size: var(--text-base, 1rem);
    font-weight: 500;
    cursor: pointer;
}

.roster-row__cancel:hover:not(:disabled)[b-dwb3tdrio4] {
    color: var(--color-text-primary, #1B3A6B);
}

.roster-row__save[b-dwb3tdrio4] {
    width: auto;
    padding: var(--space-3, 12px) var(--space-5, 20px);
}

@media (max-width: 600px) {
    .roster-row__edit-grid[b-dwb3tdrio4] {
        grid-template-columns: 1fr;
    }
    .roster-row__field--short[b-dwb3tdrio4] {
        max-width: none;
    }
}
/* /Components/SharedUI/Review/ReviewModal.razor.rz.scp.css */
/* Overlay */
.review-overlay[b-eh1ki2rzsz] {
    position: fixed;
    inset: 0;
    background: rgba(27, 58, 107, 0.45);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

/* Modal panel */
.review-modal[b-eh1ki2rzsz] {
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    width: 90vw;
    max-width: 1100px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.review-modal__header[b-eh1ki2rzsz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-surface-3);
    flex-shrink: 0;
}

.review-modal__title[b-eh1ki2rzsz] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--color-primary);
    margin: 0;
}

.review-modal__close[b-eh1ki2rzsz] {
    background: transparent;
    border: none;
    font-size: var(--text-xl);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
    border-radius: 4px;
    transition: background 0.1s ease, color 0.1s ease;
}
.review-modal__close:hover[b-eh1ki2rzsz] {
    background: var(--color-surface-2);
    color: var(--color-primary);
}

/* Tab Strip */
.review-modal__tabs[b-eh1ki2rzsz] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-surface-3);
    padding: 0 var(--space-5);
    overflow-x: auto;
    flex-shrink: 0;
}

.review-modal__tab[b-eh1ki2rzsz] {
    background: transparent;
    border: none;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.review-modal__tab:hover[b-eh1ki2rzsz] {
    color: var(--color-primary);
}
.review-modal__tab--active[b-eh1ki2rzsz] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

/* Body */
.review-modal__body[b-eh1ki2rzsz] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
}

.review-modal__pane-header[b-eh1ki2rzsz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}
.review-modal__pane-type[b-eh1ki2rzsz] {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-primary);
}
.review-modal__pane-meta[b-eh1ki2rzsz] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* WO-29 — a calm note when our checks left the sheet short. Information, not a warning: no icon, no alarm colour. */
.review-modal__removed-note[b-eh1ki2rzsz] {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Questions */
.review-modal__questions[b-eh1ki2rzsz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.review-modal__question[b-eh1ki2rzsz] {
    border: 1px solid var(--color-surface-3);
    border-radius: 8px;
    padding: var(--space-4);
    background: var(--color-surface);
    transition: box-shadow 0.15s ease;
}

.review-modal__q-head[b-eh1ki2rzsz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.review-modal__q-badges[b-eh1ki2rzsz] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.review-modal__badge[b-eh1ki2rzsz] {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px var(--space-2);
    border-radius: 4px;
}
.review-modal__badge--type[b-eh1ki2rzsz] {
    background: var(--color-secondary-pale);
    color: var(--color-secondary);
}
.review-modal__badge--dok[b-eh1ki2rzsz] {
    background: var(--color-primary-pale);
    color: var(--color-primary);
}
.review-modal__badge--std[b-eh1ki2rzsz] {
    background: var(--color-surface-2);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.review-modal__q-actions[b-eh1ki2rzsz] {
    display: flex;
    gap: var(--space-2);
}

.review-modal__action-btn[b-eh1ki2rzsz] {
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.review-modal__action-btn:hover[b-eh1ki2rzsz] {
    background: var(--color-secondary-pale);
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.review-modal__q-prompt[b-eh1ki2rzsz] {
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.55;
    color: var(--color-text-primary);
    margin-bottom: var(--space-3);
}

.review-modal__q-options[b-eh1ki2rzsz] {
    list-style: none;
    margin: 0 0 var(--space-2) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.review-modal__q-option[b-eh1ki2rzsz] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: var(--space-1) var(--space-3);
    border-radius: 4px;
    background: var(--color-surface-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.review-modal__q-option--correct[b-eh1ki2rzsz] {
    background: var(--color-accent-pale);
    color: var(--color-accent);
    font-weight: 600;
}

.review-modal__q-check[b-eh1ki2rzsz] {
    font-weight: 700;
    font-size: var(--text-sm);
}

.review-modal__q-select-label[b-eh1ki2rzsz] {
    font-size: var(--text-xs);
    font-weight: 600;
    font-style: italic;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.review-modal__q-answer[b-eh1ki2rzsz] {
    font-size: var(--text-sm);
    color: var(--color-accent);
    font-weight: 500;
    background: var(--color-accent-pale);
    padding: var(--space-2) var(--space-3);
    border-radius: 4px;
    margin-bottom: var(--space-2);
}
.review-modal__q-answer-label[b-eh1ki2rzsz] {
    font-weight: 600;
}

.review-modal__q-scaffold[b-eh1ki2rzsz] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    font-style: italic;
    border-top: 1px dashed var(--color-surface-3);
    padding-top: var(--space-2);
    margin-top: var(--space-2);
}

/* Comparison — self-contained cards, each with its own action */
.question-comparison[b-eh1ki2rzsz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    align-items: stretch;
    margin-top: var(--space-4);
}

.comparison-card[b-eh1ki2rzsz] {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    padding: var(--space-4);
}

.comparison-card--original[b-eh1ki2rzsz] {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    opacity: 0.75;
}

.comparison-card--replacement[b-eh1ki2rzsz] {
    border: 2px solid var(--color-accent);
    background: var(--color-accent-pale);
    opacity: 1;
}

.comparison-card__header[b-eh1ki2rzsz] {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.comparison-card__header--original[b-eh1ki2rzsz] {
    color: var(--color-text-muted);
}
.comparison-card__header--replacement[b-eh1ki2rzsz] {
    color: var(--color-primary);
}

/* F9 item 2 — shown only when the model returned a different question type than the
   teacher requested (the TYPE INTEGRITY refusal). Informational, not an error: the
   replacement is good, it just is not the type she picked. */
.comparison-card__type-note[b-eh1ki2rzsz] {
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
    background: var(--color-surface-alt, rgba(0, 0, 0, 0.03));
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm, 4px);
    padding: var(--space-2) var(--space-3);
    margin: 0 0 var(--space-3);
}
.comparison-card__type-note strong[b-eh1ki2rzsz] {
    color: var(--color-text);
    font-weight: 600;
}

.comparison-card__action[b-eh1ki2rzsz] {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.btn-keep-original[b-eh1ki2rzsz] {
    width: 100%;
    background: transparent;
    color: var(--color-text-secondary);
    border: 1.5px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-keep-original:hover[b-eh1ki2rzsz] {
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
    background: var(--color-surface-2);
}

.btn-use-this[b-eh1ki2rzsz] {
    width: 100%;
    background: var(--gradient-cta); /* PLAT-WO-15a (go-live #6): white text on --gradient-brand was 2.15-2.90:1 */
    color: white;
    border: none;
    border-radius: 6px;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.btn-use-this:hover[b-eh1ki2rzsz] {
    filter: brightness(0.94); /* PLAT-WO-15a: hover darkens, like .btn-cta; an opacity fade let white text fall below 4.5:1 */
}

/* Skeleton loading state for comparison */
.comparison-skeleton[b-eh1ki2rzsz] {
    border-radius: 10px;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
}
.skeleton-line[b-eh1ki2rzsz] {
    height: 12px;
    background: linear-gradient(90deg,
        var(--color-surface-3) 25%,
        var(--color-border) 50%,
        var(--color-surface-3) 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse-b-eh1ki2rzsz 1.5s infinite;
    border-radius: 4px;
    margin-bottom: var(--space-3);
}
@keyframes skeleton-pulse-b-eh1ki2rzsz {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Adjusting overlay */
.review-modal__adjusting[b-eh1ki2rzsz] {
    position: relative;
}
.review-modal__adjusting-overlay[b-eh1ki2rzsz] {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-primary);
    font-weight: 500;
    border-radius: 8px;
}

/* Replace type selector */
.review-modal__replace-selector[b-eh1ki2rzsz] {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-3);
    margin-top: var(--space-3);
    animation: slideUp-b-eh1ki2rzsz 0.2s ease;
}

.review-modal__replace-chips[b-eh1ki2rzsz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.review-modal__replace-hint[b-eh1ki2rzsz] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.review-modal__replace-actions[b-eh1ki2rzsz] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-start;
    align-items: center;
}

.review-modal__replace-actions .btn-secondary[b-eh1ki2rzsz] {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.review-modal__replace-actions .btn-secondary:hover[b-eh1ki2rzsz] {
    background: var(--color-surface-muted);
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

/* Inline error for adjust failures */
.review-modal__adjust-error[b-eh1ki2rzsz] {
    font-size: var(--text-xs);
    color: var(--color-error);
    padding: var(--space-2) 0;
}

/* LP WO-42 — "The packet could not be made." under Download Packet */
.review-modal__export-error[b-eh1ki2rzsz] {
    font-size: var(--text-sm);
    color: var(--color-error);
    padding: var(--space-2) 0;
}

/* Footer */
.review-modal__footer[b-eh1ki2rzsz] {
    border-top: 1px solid var(--color-surface-3);
    padding: var(--space-4) var(--space-5);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.review-modal__footer-actions[b-eh1ki2rzsz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Save button — outlined navy (Option B) */
.review-modal__btn-save[b-eh1ki2rzsz] {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 6px;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.review-modal__btn-save[b-eh1ki2rzsz]::before {
    content: "\01F4BE";
    font-size: 1rem;
}

.review-modal__btn-save:hover[b-eh1ki2rzsz] {
    background: var(--color-primary-pale);
}

/* Back button — de-emphasized; replaces the lit Export CTA while the drawer is
   open so it no longer competes with "Download Packet" as the primary action */
.review-modal__btn-back[b-eh1ki2rzsz] {
    background: transparent;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.review-modal__btn-back:hover[b-eh1ki2rzsz] {
    background: var(--color-surface-2);
    color: var(--color-text-primary);
}

/* Export drawer */
.review-modal__export-drawer-title[b-eh1ki2rzsz] {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-primary);
}

.review-modal__export-drawer[b-eh1ki2rzsz] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    background: var(--color-surface-2);
    padding: var(--space-3) var(--space-4);
    border-radius: 8px;
    animation: slideUp-b-eh1ki2rzsz 0.2s ease;
}

@keyframes slideUp-b-eh1ki2rzsz {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.review-modal__export-section[b-eh1ki2rzsz] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.review-modal__export-label[b-eh1ki2rzsz] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.review-modal__export-radios[b-eh1ki2rzsz] {
    display: flex;
    gap: var(--space-3);
}

/* LP WO-41 — "Your packet:" — what Download Packet puts in the zip. */
.review-modal__packet-title[b-eh1ki2rzsz] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.review-modal__packet-list[b-eh1ki2rzsz] {
    margin: var(--space-1) 0 0;
    padding-left: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.review-modal__radio[b-eh1ki2rzsz] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    cursor: pointer;
}
.review-modal__radio input[type="radio"][b-eh1ki2rzsz] {
    accent-color: var(--color-primary);
}

/* Tier-aware download buttons (student + teacher) */
.review-modal__download-buttons[b-eh1ki2rzsz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-2);
}

.btn-download-student[b-eh1ki2rzsz] {
    width: 100%;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 6px;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-download-student:hover:not(:disabled)[b-eh1ki2rzsz] {
    background: var(--color-primary-light);
}
.btn-download-student:disabled[b-eh1ki2rzsz] {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-download-teacher[b-eh1ki2rzsz] {
    width: 100%;
    background: var(--gradient-cta); /* PLAT-WO-15a (go-live #6): white text on --gradient-brand was 2.15-2.90:1 */
    color: white;
    border: none;
    border-radius: 6px;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-download-teacher:hover:not(.locked):not(:disabled)[b-eh1ki2rzsz] {
    filter: brightness(0.94); /* PLAT-WO-15a: hover darkens, like .btn-cta; an opacity fade let white text fall below 4.5:1 */
}
.btn-download-teacher:disabled[b-eh1ki2rzsz] {
    opacity: 0.7;
    cursor: not-allowed;
}
.btn-download-teacher.locked[b-eh1ki2rzsz] {
    background: var(--color-surface-3);
    color: var(--color-text-muted);
    cursor: pointer;
}
.btn-download-teacher.locked:hover[b-eh1ki2rzsz] {
    background: var(--color-border);
}

/* Sign-in upsell banner — slides up inside the drawer */
.signin-upsell-banner[b-eh1ki2rzsz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    background: var(--color-primary);
    color: white;
    border-radius: 8px;
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-3);
    animation: slideUp-b-eh1ki2rzsz 0.25s ease;
    flex-wrap: wrap;
}

.signin-upsell-banner__text[b-eh1ki2rzsz] {
    flex: 1 1 240px;
    min-width: 0;
}

.signin-upsell-banner__title[b-eh1ki2rzsz] {
    font-size: var(--text-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.signin-upsell-banner__body[b-eh1ki2rzsz] {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.82);
    margin-top: 2px;
}

.signin-upsell-banner__actions[b-eh1ki2rzsz] {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
}

.btn-signin-white[b-eh1ki2rzsz] {
    background: white;
    color: var(--color-primary);
    border: none;
    border-radius: 6px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-signin-white:hover[b-eh1ki2rzsz] {
    background: var(--color-surface-2);
}

.btn-register-outline[b-eh1ki2rzsz] {
    background: transparent;
    color: white;
    border: 1.5px solid rgba(255,255,255,0.85);
    border-radius: 6px;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.btn-register-outline:hover[b-eh1ki2rzsz] {
    background: rgba(255,255,255,0.12);
}

.btn-banner-dismiss[b-eh1ki2rzsz] {
    background: transparent;
    color: rgba(255,255,255,0.8);
    border: none;
    padding: 2px var(--space-2);
    font-size: var(--text-base);
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.1s ease;
}
.btn-banner-dismiss:hover[b-eh1ki2rzsz] {
    background: rgba(255,255,255,0.15);
    color: white;
}

/* Shared button variants used inside modal */
:deep(.btn-sm)[b-eh1ki2rzsz] {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
}

/* Lock icon on gated buttons */
.review-modal__lock-icon[b-eh1ki2rzsz] {
    width: 12px;
    height: 12px;
    color: var(--color-text-muted);
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 2px;
}
.review-modal__action-btn .review-modal__lock-icon[b-eh1ki2rzsz] {
    display: inline-block;
}

/* Add Question button */
.review-modal__add-question-btn[b-eh1ki2rzsz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    margin-top: var(--space-4);
    background: var(--color-surface-2);
    border: 2px dashed var(--color-border);
    border-radius: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.review-modal__add-question-btn:hover[b-eh1ki2rzsz] {
    background: var(--color-secondary-pale);
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}

/* Upsell Modal */
.review-overlay--upsell[b-eh1ki2rzsz] {
    z-index: 1100;
    background: rgba(27, 58, 107, 0.55);
}

.review-modal__upsell[b-eh1ki2rzsz] {
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.22);
    padding: var(--space-8) var(--space-6);
    max-width: 420px;
    width: 90vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.review-modal__upsell-lock[b-eh1ki2rzsz] {
    width: 48px;
    height: 48px;
    color: var(--color-accent);
}

.review-modal__upsell-heading[b-eh1ki2rzsz] {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--color-primary);
    margin: 0;
}

.review-modal__upsell-body[b-eh1ki2rzsz] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.review-modal__upsell-actions[b-eh1ki2rzsz] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-top: var(--space-2);
}

.review-modal__upsell-cta[b-eh1ki2rzsz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-cta); /* PLAT-WO-15a (go-live #6): white text on --gradient-brand was 2.15-2.90:1 */
    color: white;
    border: none;
    border-radius: 6px;
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.review-modal__upsell-cta:hover[b-eh1ki2rzsz] {
    filter: brightness(0.94); /* PLAT-WO-15a: hover darkens, like .btn-cta; an opacity fade let white text fall below 4.5:1 */
}

/* Add Question Inline Form */
.review-modal__add-form[b-eh1ki2rzsz] {
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    animation: slideUp-b-eh1ki2rzsz 0.2s ease;
}

.review-modal__add-form-section[b-eh1ki2rzsz] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.review-modal__add-form-label[b-eh1ki2rzsz] {
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-secondary);
}

.review-modal__add-form-hint[b-eh1ki2rzsz] {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-style: italic;
    color: var(--color-text-muted);
}

.review-modal__pill-group[b-eh1ki2rzsz] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.review-modal__pill[b-eh1ki2rzsz] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease, color 0.1s ease;
}
.review-modal__pill:hover[b-eh1ki2rzsz] {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
}
.review-modal__pill--active[b-eh1ki2rzsz] {
    background: var(--color-secondary-pale);
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    font-weight: 600;
}

.review-modal__add-form-textarea[b-eh1ki2rzsz] {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    background: var(--color-surface);
    color: var(--color-text-primary);
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.review-modal__add-form-textarea:focus[b-eh1ki2rzsz] {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(41,121,204,0.15);
}

.review-modal__add-form-input[b-eh1ki2rzsz] {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    background: var(--color-surface);
    color: var(--color-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.review-modal__add-form-input:focus[b-eh1ki2rzsz] {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(41,121,204,0.15);
}

.review-modal__add-form-option[b-eh1ki2rzsz] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.review-modal__add-form-option-letter[b-eh1ki2rzsz] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
    min-width: 20px;
}

.review-modal__add-form-correct-check[b-eh1ki2rzsz] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.review-modal__add-form-correct-check input[b-eh1ki2rzsz] {
    accent-color: var(--color-accent);
}

.review-modal__add-form-error[b-eh1ki2rzsz] {
    font-size: var(--text-sm);
    color: var(--color-error);
    padding: var(--space-2) var(--space-3);
    background: rgba(192,57,43,0.08);
    border-radius: 4px;
}

.review-modal__add-form-actions[b-eh1ki2rzsz] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .review-modal[b-eh1ki2rzsz] {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    .question-comparison[b-eh1ki2rzsz] {
        display: flex;
        flex-direction: column-reverse;
        grid-template-columns: 1fr;
    }
    .review-modal__q-head[b-eh1ki2rzsz] {
        flex-direction: column;
        align-items: flex-start;
    }
    .review-modal__export-drawer[b-eh1ki2rzsz] {
        flex-direction: column;
        align-items: flex-start;
    }
    .review-modal__pill-group[b-eh1ki2rzsz] {
        gap: var(--space-1);
    }
}

/* ---------------------------------------------------------------
   QA auto-regeneration indicators
   --------------------------------------------------------------- */
.badge--qa-warning[b-eh1ki2rzsz] {
    background-color: #F59E0B;
    color: #1F2937;
    border: none;
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.badge--qa-warning:hover[b-eh1ki2rzsz] {
    background-color: #D97706;
    color: #111827;
}

.qa-warning-panel[b-eh1ki2rzsz] {
    background-color: #FEF3C7;
    border: 1px solid #F59E0B;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    color: #1F2937;
    font-size: 0.875rem;
}

.qa-warning-panel__title[b-eh1ki2rzsz] {
    font-weight: 600;
    color: #92400E;
    margin-bottom: 0.25rem;
}

.qa-warning-panel__body[b-eh1ki2rzsz] {
    color: #1F2937;
    line-height: 1.4;
}

.qa-warning-panel__meta[b-eh1ki2rzsz] {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #6B7280;
}

.qa-summary-banner[b-eh1ki2rzsz] {
    background-color: #FEF3C7;
    border: 1px solid #F59E0B;
    border-left: 4px solid #F59E0B;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    color: #1F2937;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.qa-summary-banner__icon[b-eh1ki2rzsz] {
    color: #92400E;
    font-size: 1.125rem;
}

.qa-summary-banner__text[b-eh1ki2rzsz] {
    color: #1F2937;
    font-weight: 500;
}

/* --- Contextual image container (ReviewModal scope) -----------------
   Mirrors LessonPlanDisplay so the review modal renders the same visual
   stimulus the teacher will see on the student PDF. Scoped per-component
   because Razor scoped CSS does not leak between .razor.css files. */
.question-image-container[b-eh1ki2rzsz] {
    margin: 6px 0 8px 0;
    display: flex;
    justify-content: flex-start;
}
.question-image-container img[b-eh1ki2rzsz] {
    max-width: 220px;
    max-height: 160px;
    width: auto;
    height: auto;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background-color: #FFFFFF;
    object-fit: contain;
}

/* --- True/False styled buttons --- */
.review-modal__q-tf-btn[b-eh1ki2rzsz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1.5px solid #D0D7E3;
    background: #F4F6FA;
    color: #5A6478;
}
.review-modal__q-tf-btn--correct[b-eh1ki2rzsz] {
    border-color: #2EAA8A;
    background: #E5F6F0;
    color: #1B5F4A;
}

/* ---------------------------------------------------------------
   LP WO-40 — AsPage: the same panel in normal document flow, for the Review Deliverables page.
   Nothing above changes; the modal (AsPage false) is untouched.
   --------------------------------------------------------------- */
.review-modal.review-modal--page[b-eh1ki2rzsz] {
    position: static;
    width: 100%;
    max-width: none;
    max-height: none;
    box-shadow: none;
    overflow: visible;
}

.review-modal--page .review-modal__body[b-eh1ki2rzsz] {
    flex: none;
    overflow: visible;
}

/* AsPage only — text colours the modal draws below 4.5:1 (axe color-contrast), darkened to the page's text token. The
   modal (AsPage false) keeps its colours; some of these are inline styles in the markup, hence !important. */
.review-modal--page .review-modal__badge--type[b-eh1ki2rzsz],
.review-modal--page .review-modal__q-option--correct[b-eh1ki2rzsz],
.review-modal--page .review-modal__q-answer[b-eh1ki2rzsz],
.review-modal--page .review-modal__q-answer-label[b-eh1ki2rzsz],
.review-modal--page .review-modal__q-ordering > div[b-eh1ki2rzsz],
.review-modal--page .review-modal__q-matching > div > div[b-eh1ki2rzsz],
.review-modal--page .review-modal__badge[style][b-eh1ki2rzsz] {
    color: var(--color-text-primary) !important;
}

.review-modal--page .review-modal__badge--showwork[b-eh1ki2rzsz] {
    background: var(--color-accent-pale) !important;
    color: var(--color-text-primary) !important;
}

/* LP WO-71 (teacher note 3) � AsPage only: the questions, options and answers she reads on the Review Deliverables page
   are 16px (they were 14px, 13.6px and 12px). The modal (AsPage false) is untouched. Some sizes are inline in the markup,
   hence !important on those. */
.review-modal--page .review-modal__q-option[b-eh1ki2rzsz],
.review-modal--page .review-modal__q-answer[b-eh1ki2rzsz],
.review-modal--page .review-modal__q-check[b-eh1ki2rzsz],
.review-modal--page .review-modal__q-tf-btn[b-eh1ki2rzsz] {
    font-size: var(--text-base);
}

.review-modal--page .review-modal__q-scaffold[b-eh1ki2rzsz] {
    font-size: var(--text-base);
}

.review-modal--page .review-modal__q-select-label[b-eh1ki2rzsz] {
    font-size: var(--text-sm);
}

.review-modal--page .review-modal__q-matching > div > div[b-eh1ki2rzsz],
.review-modal--page .review-modal__q-ordering li[b-eh1ki2rzsz] {
    font-size: var(--text-base) !important;
}

.review-modal--page .review-modal__q-ordering > div[b-eh1ki2rzsz] {
    font-size: var(--text-sm) !important;
}
/* /Components/SharedUI/SmartCalc/SmartCalcPanel.razor.rz.scp.css */
.smartcalc[b-hmk5iv6hwj] {
    background: var(--color-accent-pale);
    border-left: 3px solid var(--color-accent);
    border-radius: 0 6px 6px 0;
    /* Tighter vertical padding — roughly half of the previous var(--space-3)
       to condense the panel. Horizontal padding unchanged. */
    padding: var(--space-2) var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.smartcalc__icon[b-hmk5iv6hwj] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
    margin-top: 2px;
}
.smartcalc__icon span[b-hmk5iv6hwj] {
    background: var(--color-accent);
    border-radius: 1px;
}
.smartcalc__icon span:nth-child(2)[b-hmk5iv6hwj] { background: var(--color-accent-light); }
.smartcalc__icon span:nth-child(3)[b-hmk5iv6hwj] { background: var(--color-accent-light); }

.smartcalc__body[b-hmk5iv6hwj] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Top row — headline on the left, counter stepper on the right. Eliminates
   the third vertical row that the stepper used to occupy below the text. */
.smartcalc__row[b-hmk5iv6hwj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.smartcalc__headline[b-hmk5iv6hwj] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
}

.smartcalc__reasoning[b-hmk5iv6hwj] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.smartcalc__stepper[b-hmk5iv6hwj] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    /* No top margin — stepper is now inline with the headline. */
    background: var(--color-surface);
    border: 1px solid rgba(46,170,138,0.3);
    border-radius: 6px;
    padding: 2px 4px;
    flex: 0 0 auto;
}

.smartcalc__step-btn[b-hmk5iv6hwj] {
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    color: var(--color-accent);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    line-height: 1;
}
.smartcalc__step-btn:hover:not(:disabled)[b-hmk5iv6hwj] {
    background: var(--color-accent-pale);
}
.smartcalc__step-btn:disabled[b-hmk5iv6hwj] {
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.smartcalc__step-value[b-hmk5iv6hwj] {
    min-width: 22px;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-primary);
}

/* Placeholder variant — same structural dimensions as the populated panel
   (so reserved height matches) but muted so it reads as a loading state
   rather than real data. Rendered while SmartCalc preview is in flight. */
.smartcalc.smartcalc--placeholder .smartcalc__headline[b-hmk5iv6hwj],
.smartcalc.smartcalc--placeholder .smartcalc__step-value[b-hmk5iv6hwj] {
    color: var(--color-text-muted);
}
.smartcalc.smartcalc--placeholder .smartcalc__icon span[b-hmk5iv6hwj] {
    background: var(--color-text-muted);
    opacity: 0.35;
}
/* /Components/SharedUI/Standards/StandardsChipSelector.razor.rz.scp.css */
.chip-selector[b-j8c5ygrjcl] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
}

/* Input container — flex-wrap so chips and the text input share a row
   (Gmail "To:" pattern). Clicking anywhere inside focuses the input. */
.chip-selector__input-wrap[b-j8c5ygrjcl] {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 38px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 4px var(--space-3) 4px 34px;  /* left padding leaves room for the search icon */
    background: var(--color-surface);
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chip-selector__input-wrap:focus-within[b-j8c5ygrjcl] {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(41,121,204,0.15);
}

.chip-selector__icon[b-j8c5ygrjcl] {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* Inline chip strip — sits to the left of the input, flex-wraps on overflow.
   Chip compact variant (.chip--inline) and the .chip__code hook are defined
   globally in app.css so they apply to both focus and supporting selectors. */
.chip-selector__chips-inline[b-j8c5ygrjcl] {
    display: contents;  /* chips become direct flex children of input-wrap */
}

/* Input itself — no borders; inherits focus visuals from the wrapper. */
.chip-selector__input[b-j8c5ygrjcl] {
    flex: 1 1 140px;
    min-width: 140px;
    border: none;
    outline: none;
    padding: 4px 0;
    font-size: var(--text-sm);
    background: transparent;
    color: var(--color-text-primary);
}

.chip-selector__spinner[b-j8c5ygrjcl] {
    margin-left: auto;
    flex-shrink: 0;
}

/* PLAT-WO-14b — the dropdown panel holds the results list and, under it, the Common Core notice.
   The panel takes the list's old position and frame; the list keeps its own height cap and scroll. */
.chip-selector__results-panel[b-j8c5ygrjcl] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    z-index: 50;
}

.chip-selector__results[b-j8c5ygrjcl] {
    max-height: 240px;
    overflow-y: auto;
}

.chip-selector__results-notice[b-j8c5ygrjcl] {
    padding: 0 var(--space-4) var(--space-3);
}

.chip-selector__empty[b-j8c5ygrjcl] {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

.chip-selector__result[b-j8c5ygrjcl] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    border-bottom: 1px solid var(--color-surface-3);
    transition: background 0.1s ease;
}
.chip-selector__result:last-child[b-j8c5ygrjcl] { border-bottom: none; }

.chip-selector__result:hover:not(:disabled)[b-j8c5ygrjcl],
.chip-selector__result--highlighted:not(:disabled)[b-j8c5ygrjcl] {
    background: var(--color-secondary-pale);
}

.chip-selector__result-code[b-j8c5ygrjcl] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-secondary-text);   /* PLAT-WO-15f T4: was --color-secondary (4.47:1); 6.16:1 on white, 5.44:1 highlighted */
}

.chip-selector__result-desc[b-j8c5ygrjcl] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.chip-selector__result--disabled[b-j8c5ygrjcl] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/SharedUI/Standards/SupportingStandardsSelector.razor.rz.scp.css */
.supporting-selector[b-ufgl8hsc6l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
}

/* Shared AI-loading banner styles (.supporting-selector__loading,
   .supporting-selector__loading-text, .supporting-selector__loading-icon)
   live in Ivaro.Web/wwwroot/app.css so both this selector and
   EngagementChipPicker can use the same visual treatment. Do not
   re-add scoped copies here — they would out-specificity the global
   rule and break the shared style.
*/


/* Input container — flex-wrap so chips and text input share a row. */
.supporting-selector__input-wrap[b-ufgl8hsc6l] {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 38px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 4px var(--space-3) 4px 34px;
    background: var(--color-surface);
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.supporting-selector__input-wrap:focus-within[b-ufgl8hsc6l] {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(41,121,204,0.15);
}

.supporting-selector__icon[b-ufgl8hsc6l] {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}

.supporting-selector__chips-inline[b-ufgl8hsc6l] {
    display: contents;
}

.supporting-selector__input[b-ufgl8hsc6l] {
    flex: 1 1 140px;
    min-width: 140px;
    border: none;
    outline: none;
    padding: 4px 0;
    font-size: var(--text-sm);
    background: transparent;
    color: var(--color-text-primary);
}

.supporting-selector__spinner[b-ufgl8hsc6l] {
    margin-left: auto;
    flex-shrink: 0;
}

/* PLAT-WO-14b — the dropdown panel holds the results list and, under it, the Common Core notice.
   The panel takes the list's old position and frame; the list keeps its own height cap and scroll. */
.supporting-selector__results-panel[b-ufgl8hsc6l] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    z-index: 50;
}

.supporting-selector__results[b-ufgl8hsc6l] {
    max-height: 240px;
    overflow-y: auto;
}

.supporting-selector__results-notice[b-ufgl8hsc6l] {
    padding: 0 var(--space-4) var(--space-3);
}

.supporting-selector__empty[b-ufgl8hsc6l] {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

.supporting-selector__result[b-ufgl8hsc6l] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    border-bottom: 1px solid var(--color-surface-3);
    transition: background 0.1s ease;
}
.supporting-selector__result:last-child[b-ufgl8hsc6l] { border-bottom: none; }

.supporting-selector__result:hover:not(:disabled)[b-ufgl8hsc6l],
.supporting-selector__result--highlighted:not(:disabled)[b-ufgl8hsc6l] {
    background: var(--color-secondary-pale);
}

.supporting-selector__result-code[b-ufgl8hsc6l] {
    font-size: var(--text-sm);
    font-weight: 600;
    /* PLAT-WO-15g T3: AA, the main picker's 15f fix (6.16:1 on white, 5.44:1 on the highlighted row's pale). */
    color: var(--color-secondary-text);
}

.supporting-selector__result-desc[b-ufgl8hsc6l] {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

.supporting-selector__result--disabled[b-ufgl8hsc6l] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/SharedUI/StateChips/StateChipSelector.razor.rz.scp.css */
.scs[b-reaust6pd1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scs__chips[b-reaust6pd1],
.scs__sub-chips[b-reaust6pd1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Base chip */
.scs__chip[b-reaust6pd1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--color-border, #d1d5db);
    border-radius: 999px;
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #1a2b4a);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.scs__chip:hover[b-reaust6pd1] {
    border-color: var(--color-primary, #1a2b4a);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.scs__chip--selected[b-reaust6pd1] {
    background: var(--color-primary, #1a2b4a);
    border-color: var(--color-primary, #1a2b4a);
    color: #ffffff;
}

/* Sub-chips (framework options) are slightly smaller */
.scs__chip--sub[b-reaust6pd1] {
    font-size: 0.8125rem;
    padding: 6px 14px;
}

/* "Other…" chip — muted, smaller */
.scs__chip--other[b-reaust6pd1] {
    border-style: dashed;
    color: var(--color-text-muted, #6b7280);
    font-size: 0.8125rem;
    padding: 6px 14px;
}

.scs__chip-emoji[b-reaust6pd1] {
    font-size: 1rem;
    line-height: 1;
}

.scs__chip-arrow[b-reaust6pd1] {
    opacity: 0.6;
    font-size: 0.75rem;
}

/* Other search */
.scs__other-search[b-reaust6pd1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scs__other-input[b-reaust6pd1] {
    flex: 1;
    padding: 8px 12px;
    border: 1.5px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.875rem;
    outline: none;
}

.scs__other-input:focus[b-reaust6pd1] {
    border-color: var(--color-primary, #1a2b4a);
}

.scs__other-cancel[b-reaust6pd1] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted, #6b7280);
    font-size: 1rem;
    padding: 4px;
}

.scs__other-results[b-reaust6pd1] {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    background: var(--color-surface, #ffffff);
}

.scs__other-result[b-reaust6pd1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--color-text, #1a2b4a);
}

.scs__other-result:hover[b-reaust6pd1] {
    background: var(--color-surface-hover, #f3f4f6);
}
/* /Components/SharedUI/StudioDashboard/StudioDashboard.razor.rz.scp.css */
.studio-dashboard[b-pdvs9cdvfx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
    max-width: min(1440px, 94vw);
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
    box-sizing: border-box;
}

/* PLAT-WO-10a T5 — phones stay as they were. */
@media (max-width: 640px) {
    .studio-dashboard[b-pdvs9cdvfx] { max-width: none; }
}

.studio-dashboard__header[b-pdvs9cdvfx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.studio-dashboard__title[b-pdvs9cdvfx] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--color-text-primary);
    line-height: 1.15;
}

.studio-dashboard__actions[b-pdvs9cdvfx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

/* The app's .btn-primary is full-width; as a link in a header it sits at its own width. Colours stay the app's. */
.studio-dashboard__new[b-pdvs9cdvfx] {
    width: auto;
    text-decoration: none;
    white-space: nowrap;
}

.studio-dashboard__empty[b-pdvs9cdvfx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.studio-dashboard__empty-text[b-pdvs9cdvfx] {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.studio-dashboard__list[b-pdvs9cdvfx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.studio-dashboard__row[b-pdvs9cdvfx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.studio-dashboard__row:hover[b-pdvs9cdvfx] {
    background: var(--color-surface-2);
    border-color: var(--color-secondary);
}

.studio-dashboard__row:focus-visible[b-pdvs9cdvfx] {
    outline: 3px solid var(--color-secondary);
    outline-offset: 2px;
}

.studio-dashboard__main[b-pdvs9cdvfx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1 1 260px;
}

.studio-dashboard__row-title[b-pdvs9cdvfx] {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
}

.studio-dashboard__subtitle[b-pdvs9cdvfx] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.studio-dashboard__meta[b-pdvs9cdvfx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
}

.studio-dashboard__status[b-pdvs9cdvfx] {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-primary-pale);
    border-radius: 999px;
}

.studio-dashboard__timestamp[b-pdvs9cdvfx] {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.studio-dashboard__footer[b-pdvs9cdvfx] {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

@media (max-width: 480px) {
    .studio-dashboard__actions[b-pdvs9cdvfx],
    .studio-dashboard__new[b-pdvs9cdvfx] {
        width: 100%;
    }

    .studio-dashboard__new[b-pdvs9cdvfx] {
        box-sizing: border-box;
    }
}

.studio-dashboard__item--trailing[b-pdvs9cdvfx] { display: flex; align-items: center; gap: var(--space-2, 8px); }
.studio-dashboard__item--trailing > .studio-dashboard__row[b-pdvs9cdvfx] { flex: 1 1 auto; min-width: 0; }

/* WO-69: stretched link — the title is the link, its ::after covers the card, the trailing control sits above it. */
.studio-dashboard__item--stretched .studio-dashboard__row[b-pdvs9cdvfx] { position: relative; }
.studio-dashboard__title-line[b-pdvs9cdvfx] { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.studio-dashboard__link[b-pdvs9cdvfx] { text-decoration: none; min-width: 0; }
.studio-dashboard__link[b-pdvs9cdvfx]::after { content: ""; position: absolute; inset: 0; border-radius: 10px; }
.studio-dashboard__link:focus-visible[b-pdvs9cdvfx] { outline: none; }
.studio-dashboard__title-trailing[b-pdvs9cdvfx] { position: relative; z-index: 1; display: inline-flex; }
.studio-dashboard__item--stretched .studio-dashboard__row:has(.studio-dashboard__link:focus-visible)[b-pdvs9cdvfx] { outline: 3px solid var(--color-secondary); outline-offset: 2px; }

/* 🔴 WO-120 — New when her allowance is used up: visible, clearly off.
   PLAT-WO-11b T4.1 — a real disabled button now, so the kit's own .btn-primary:disabled look applies; the note sits
   directly beneath it, in small text. */
.studio-dashboard__new--disabled[b-pdvs9cdvfx] {
    cursor: not-allowed;
}
.studio-dashboard__new-wrap[b-pdvs9cdvfx] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
}
.studio-dashboard__empty .studio-dashboard__new-wrap[b-pdvs9cdvfx] { align-items: flex-start; }
.studio-dashboard__new-note[b-pdvs9cdvfx] {
    margin: 0;
    max-width: 32ch;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-align: right;
}
.studio-dashboard__empty .studio-dashboard__new-note[b-pdvs9cdvfx] { text-align: left; }

@media (max-width: 480px) {
    .studio-dashboard__new-wrap[b-pdvs9cdvfx] { width: 100%; align-items: stretch; }
    .studio-dashboard__new-note[b-pdvs9cdvfx] { max-width: none; text-align: left; }
}

/* 🔴 WO-152 — a status that is still working (a kit planning): a small spinner before the words. */
.studio-dashboard__status--busy[b-pdvs9cdvfx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.studio-dashboard__status-spinner[b-pdvs9cdvfx] {
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: studio-dashboard-spin-b-pdvs9cdvfx 0.8s linear infinite;
}
@keyframes studio-dashboard-spin-b-pdvs9cdvfx { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .studio-dashboard__status-spinner[b-pdvs9cdvfx] { animation: none; }
}
/* /Components/SharedUI/SubjectChips/SubjectChipSelector.razor.rz.scp.css */
.subc[b-tmebrudqd5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.subc__chips[b-tmebrudqd5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Base chip — matches State/Grade chip pill style. */
.subc__chip[b-tmebrudqd5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--color-border, #d1d5db);
    border-radius: 999px;
    background: var(--color-surface, #ffffff);
    color: var(--color-text, #1a2b4a);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}

.subc__chip:hover[b-tmebrudqd5] {
    border-color: var(--color-primary, #1a2b4a);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.subc__chip--selected[b-tmebrudqd5] {
    background: var(--color-primary, #1a2b4a);
    border-color: var(--color-primary, #1a2b4a);
    color: #ffffff;
}

.subc__chip-emoji[b-tmebrudqd5] {
    font-size: 1rem;
    line-height: 1;
}
/* /Components/SharedUI/Usage/PlanUsageCard.razor.rz.scp.css */
/* WO-218 T2.4 — a small, quiet card: one line of words and a thin bar under it. */
.plan-usage[b-m7lxurgwdt] {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--color-border, #DDE3EC);
    border-radius: 10px;
    background: var(--color-surface, #FFFFFF);
}

.plan-usage__text[b-m7lxurgwdt] {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-secondary, #5A6478);
    white-space: nowrap;
}

.plan-usage__bar[b-m7lxurgwdt] {
    display: block;
    height: 4px;
    border-radius: 999px;
    background: var(--color-neutral-100, #EEF1F5);
    overflow: hidden;
}

.plan-usage__fill[b-m7lxurgwdt] {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--color-accent, #2EAA8A);
}

/* 🔴 WO-135 — the Trial chip before the words, on one line with them. */
.plan-usage__line[b-m7lxurgwdt] {
    display: block;
    white-space: nowrap;
}

.plan-usage__chip[b-m7lxurgwdt] {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-teal-50, #E6F6F4);
    color: var(--color-teal-700, #0F766E);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}