@import '_content/Blazored.Modal/Blazored.Modal.bundle.scp.css';

/* /DashboardApp/Components/Backgrounds/DarkModeBackground.razor.rz.scp.css */
.constellation-bg__track[b-uvmv8d7cvi] {
    position: absolute;
    inset: -16%;
    width: 132%;
    height: 132%;
    will-change: transform;
    animation: constellation-drift-loop-b-uvmv8d7cvi 220s linear infinite alternate;
}

.constellation[b-uvmv8d7cvi] {
    position: absolute;
    opacity: 0.85;
}

.constellation--bird[b-uvmv8d7cvi] {
    width: 28rem;
    top: 24%;
    left: 55%;
}

.constellation--small-a[b-uvmv8d7cvi] {
    width: 8rem;
    top: 18%;
    left: 24%;
    opacity: 0.32;
    transform: rotate(-8deg);
}

.constellation--small-b[b-uvmv8d7cvi] {
    width: 7rem;
    top: 70%;
    left: 74%;
    opacity: 0.26;
    transform: rotate(10deg);
}

.constellation__svg[b-uvmv8d7cvi] {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.constellation__line[b-uvmv8d7cvi] {
    stroke: color-mix(in srgb, #f6f2d8 30%, transparent);
    stroke-width: 1.2;
    stroke-linecap: round;
    fill: none;
}

.constellation__star[b-uvmv8d7cvi] {
    fill: #edf3cf;
    filter: drop-shadow(0 0 4px rgba(237, 243, 207, 0.35))
    drop-shadow(0 0 10px rgba(237, 243, 207, 0.18));
    animation: star-pulse-b-uvmv8d7cvi 4.8s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.constellation__star:nth-of-type(2n)[b-uvmv8d7cvi] {
    animation-duration: 5.9s;
}

.constellation__star:nth-of-type(3n)[b-uvmv8d7cvi] {
    animation-duration: 6.8s;
}

.constellation__star--lg[b-uvmv8d7cvi] {
    filter: drop-shadow(0 0 6px rgba(237, 243, 207, 0.42))
    drop-shadow(0 0 16px rgba(237, 243, 207, 0.24));
    transform-origin: center;
    transform-box: fill-box;
}

.sky-star[b-uvmv8d7cvi] {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(237,243,207,0.95) 0%, rgba(237,243,207,0.55) 40%, rgba(237,243,207,0) 100%);
    animation: star-pulse-b-uvmv8d7cvi 6s ease-in-out infinite;
    opacity: 0.55;
    transform-origin: center;
}

.sky-star--1[b-uvmv8d7cvi] { top: 18%; left: 12%; width: 0.22rem; height: 0.22rem; animation-delay: -1.2s; }
.sky-star--2[b-uvmv8d7cvi] { top: 30%; left: 40%; width: 0.18rem; height: 0.18rem; animation-delay: -3.6s; }
.sky-star--3[b-uvmv8d7cvi] { top: 46%; left: 84%; width: 0.20rem; height: 0.20rem; animation-delay: -2.3s; }
.sky-star--4[b-uvmv8d7cvi] { top: 72%; left: 64%; width: 0.16rem; height: 0.16rem; animation-delay: -5.1s; }
.sky-star--5[b-uvmv8d7cvi] { top: 80%; left: 18%; width: 0.22rem; height: 0.22rem; animation-delay: -0.7s; }
.sky-star--6[b-uvmv8d7cvi] { top: 56%; left: 52%; width: 0.14rem; height: 0.14rem; animation-delay: -4.4s; }
.sky-star--7[b-uvmv8d7cvi] { top: 24%; left: 88%; width: 0.18rem; height: 0.18rem; animation-delay: -2.8s; }
.sky-star--8[b-uvmv8d7cvi] { top: 64%; left: 30%; width: 0.16rem; height: 0.16rem; animation-delay: -1.9s; }

@keyframes constellation-drift-loop-b-uvmv8d7cvi {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(320px, -240px, 0);
    }
}

@keyframes star-pulse-b-uvmv8d7cvi {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.95;
        transform: scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .constellation-bg__track[b-uvmv8d7cvi],
    .constellation__star[b-uvmv8d7cvi],
    .sky-star[b-uvmv8d7cvi] {
        animation: none;
    }
}
/* /DashboardApp/Components/Backgrounds/LightModeBackground.razor.rz.scp.css */
.light-mode-bird-background[b-g8gyz2gcht] {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* bottom-right environment image */
.light-mode-bird-background__environment[b-g8gyz2gcht] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: clamp(22rem, 38vw, 68rem);
    aspect-ratio: 2000 / 512;
    background-image: url('/dashboard/images/background-environment.png');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
    opacity: var(--app-accent-image-opacity, 1);
    z-index: 0;
    pointer-events: none;
}

.light-mode-bird-background__svg[b-g8gyz2gcht] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    z-index: 1;
}

.bird-cluster[b-g8gyz2gcht] {
    fill: none;
    stroke: color-mix(in srgb, var(--app-text) 20%, transparent);
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.72;
}

.bird-cluster--one[b-g8gyz2gcht] {
    animation: bird-cluster-drift-one-b-g8gyz2gcht 95s linear infinite;
}

.bird-cluster--two[b-g8gyz2gcht] {
    animation: bird-cluster-drift-two-b-g8gyz2gcht 115s linear infinite;
    animation-delay: -42s;
}

.bird[b-g8gyz2gcht] {
    transform-box: fill-box;
    transform-origin: center;
}

.bird-wing[b-g8gyz2gcht] {
    vector-effect: non-scaling-stroke;
    stroke-width: 1.9;
}

.bird-wing--left[b-g8gyz2gcht] {
    opacity: 0.7;
}

.bird-wing--right[b-g8gyz2gcht] {
    opacity: 1;
}

.bird--sm .bird-wing[b-g8gyz2gcht] {
    stroke-width: 1.7;
}

.bird--xs .bird-wing[b-g8gyz2gcht] {
    stroke-width: 1.5;
}

@keyframes bird-cluster-drift-one-b-g8gyz2gcht {
    0% {
        transform: translate(-360px, 430px);
        opacity: 0;
    }
    8% {
        opacity: 0.72;
    }
    92% {
        opacity: 0.72;
    }
    100% {
        transform: translate(1760px, 350px);
        opacity: 0;
    }
}

@keyframes bird-cluster-drift-two-b-g8gyz2gcht {
    0% {
        transform: translate(-980px, 610px);
        opacity: 0;
    }
    8% {
        opacity: 0.64;
    }
    92% {
        opacity: 0.64;
    }
    100% {
        transform: translate(1700px, 500px);
        opacity: 0;
    }
}

@media (max-width: 1024px) {
    .light-mode-bird-background__environment[b-g8gyz2gcht] {
        width: clamp(28rem, 82vw, 90rem);
    }
}

@media (max-width: 640px) {
    .light-mode-bird-background__environment[b-g8gyz2gcht] {
        width: 120vw;
        right: -10vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bird-cluster[b-g8gyz2gcht] {
        animation: none !important;
    }

    .bird-wing animate[b-g8gyz2gcht] {
        display: none;
    }
}
/* /DashboardApp/Components/Cards/AssetCard.razor.rz.scp.css */
.asset-card__preview[b-l77ts0uykd] {
    @apply flex min-h-[9rem] items-center justify-center overflow-hidden rounded-lg border p-2;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
}

.asset-card__preview img[b-l77ts0uykd] {
    @apply max-h-40 w-auto max-w-full object-contain;
}

.asset-card__preview audio[b-l77ts0uykd] {
    @apply w-full;
}

.asset-card__preview iframe[b-l77ts0uykd] {
    @apply w-full;
    aspect-ratio: 16 / 9;
    border: 0;
}
/* /DashboardApp/Components/Cards/ClassCard.razor.rz.scp.css */
.class-card[b-0swn8m6kqe] {
    @apply relative flex min-h-64 w-full flex-col rounded-[1.75rem] border px-6 py-6 elevate-md transition-all duration-200 ease-out hover:-translate-y-1 elevate-hover-lg md:min-h-[30rem];
}

.class-card--open[b-0swn8m6kqe] {
    @apply z-50;
}
/* /DashboardApp/Components/Cards/LearnerCard.razor.rz.scp.css */
.learner-card[b-c0ojpdjn11] {
    @apply relative flex min-h-64 w-full flex-col rounded-[1.75rem] border px-6 py-6 text-center elevate-md transition-all duration-200 ease-out hover:-translate-y-1 elevate-hover-lg md:min-h-[24rem];
}

.learner-card--open[b-c0ojpdjn11] {
    @apply z-50;
}

/* Every class here is prefixed. A .razor.css file is compiled into the global bundle
   unscoped as well as scoped, so a bare .pin would reach every pin on the site. */

.learner-card-pin[b-c0ojpdjn11] {
    @apply mt-5 inline-flex flex-col items-center gap-1.5 rounded-2xl border px-5 py-3;

    background-color: color-mix(in srgb, var(--app-button-go) 10%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 26%, var(--app-border));
}

.learner-card-pin-label[b-c0ojpdjn11] {
    @apply text-xs font-semibold uppercase leading-none tracking-[0.18em];

    color: color-mix(in srgb, var(--app-text) 60%, transparent);
}

/* Monospaced and widely tracked because this gets read out across a room to somebody typing
   it: 1 and 7, 0 and O have to stay apart, and the digits have to stay countable.

   The trailing letter-space is padded back onto the left, or a centred value sits visibly
   off-centre by the width of one space. */
.learner-card-pin-value[b-c0ojpdjn11] {
    @apply max-w-full truncate pl-[0.22em] font-mono text-[1.75rem] font-semibold leading-none tracking-[0.22em];

    color: var(--app-button-go);
}
/* /DashboardApp/Components/Cards/NavCard.razor.rz.scp.css */
.nav-card[b-4lms75wc9v] {
    @apply block min-h-28 w-full rounded-[1rem] border px-6 py-6 no-underline elevate-md transition-all duration-200 ease-out hover:-translate-y-1 elevate-hover-lg md:min-h-72;
}

.nav-card__mobile-icon[b-4lms75wc9v] {
    @apply text-[1.65rem];
}

.nav-card__desktop-icon[b-4lms75wc9v] {
    @apply text-[3rem];
}
/* /DashboardApp/Components/Cards/OrganizationCohortCard.razor.rz.scp.css */
.cohort-card[b-zbc8m24ld3] {
    @apply relative flex min-h-[14rem] w-full flex-col rounded-[1.35rem] border px-6 py-6 elevate-md transition-all duration-200 ease-out hover:-translate-y-1 elevate-hover-lg;
}

.cohort-card--open[b-zbc8m24ld3] {
    @apply z-50;
}

.cohort-card__icon[b-zbc8m24ld3] {
    @apply text-[1.9rem] leading-none;
}
/* /DashboardApp/Components/Cards/OrganizationMemberCard.razor.rz.scp.css */
.organization-member-card[b-x82wvl3y08] {
    @apply relative flex min-h-64 w-full flex-col rounded-[1.75rem] border px-6 py-6 text-center elevate-md transition-all duration-200 ease-out hover:-translate-y-1 elevate-hover-lg md:min-h-[24rem];
}

.organization-member-card--open[b-x82wvl3y08] {
    @apply z-50;
}
/* /DashboardApp/Components/Cards/StatCard.razor.rz.scp.css */
.stat-card[b-3c9o2apmo2] {
    @apply rounded-xl border p-5 elevate-md;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.stat-card-icon[b-3c9o2apmo2] {
    @apply text-[1.55rem] leading-none;
}
/* /DashboardApp/Components/Cms/ActivityMakers/ActivityPreviewSurface.razor.rz.scp.css */
.activity-preview[b-u3vy2lgo30] {
    @apply fixed inset-0 z-[70] flex flex-col;

    background-color: var(--app-page-bg);
}

.activity-preview__bar[b-u3vy2lgo30] {
    @apply flex shrink-0 items-center justify-between gap-4 border-b px-5 py-3;

    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.activity-preview__eyebrow[b-u3vy2lgo30] {
    @apply mr-3 inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-[0.12em];

    background-color: color-mix(in srgb, var(--app-button-standard) 14%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-standard) 30%, var(--app-border));
    color: var(--app-button-standard);
}

.activity-preview__title[b-u3vy2lgo30] {
    @apply text-base font-semibold;
}

.activity-preview__close[b-u3vy2lgo30] {
    @apply inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition-colors;

    background-color: var(--app-button-danger);
    color: var(--app-text-invert);
}

.activity-preview__close:hover[b-u3vy2lgo30] {
    opacity: 0.9;
}

/*  contain: layout makes this the containing block for the activity.

    The learner root inside carries `.full-screen`, which is
    `position: fixed; inset: 0` (Styles/learner/_main.css). Fixed resolves
    against the VIEWPORT, so without containment the previewed activity ignored
    this box entirely and filled the window -- over the bar above it, which is
    where Close Preview lives, and under the dashboard chrome, which is why the
    top of a slide came out clipped at the nav tabs.

    Layout containment makes a fixed descendant resolve against this element
    instead. The activity then occupies exactly the stage: bar above it stays
    visible and clickable, and the slide is whole. `inset: 0` means it takes the
    stage's size rather than needing one of its own, so nothing about how the
    activity sizes itself has to change.                                    */
.activity-preview__stage[b-u3vy2lgo30] {
    @apply min-h-0 flex-1 overflow-auto;

    contain: layout;
}
/* /DashboardApp/Components/Cms/ActivityMakers/ActivityTypePicker.razor.rz.scp.css */
.type-card[b-f7abptrebi] {
    @apply flex w-full cursor-pointer items-start gap-4 rounded-xl border p-4 text-left transition-colors;

    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.type-card:hover[b-f7abptrebi] {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
}

.type-card--selected[b-f7abptrebi] {
    background-color: color-mix(in srgb, var(--app-button-go) 10%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 60%, var(--app-border));
}

.type-card__icon[b-f7abptrebi] {
    @apply inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border;

    background-color: color-mix(in srgb, var(--app-button-go) 14%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 28%, var(--app-border));
    color: var(--app-button-go);
}
/* /DashboardApp/Components/Cms/ActivityMakers/ActivityWizardShell.razor.rz.scp.css */
/* ------------------------------------------------------------------ */
/*  ACTIVITY WIZARD                                                    */
/* ------------------------------------------------------------------ */
/*  Depth and colour are named, never spelled out -- elevate-*, and
    --app-* variables tinted with color-mix. See DashboardApp/README.md. */

.activity-wizard[b-klgcozpvr0] {
    @apply flex flex-col gap-5;
}

.activity-wizard__body[b-klgcozpvr0] {
    @apply rounded-xl border p-5;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.activity-wizard__heading[b-klgcozpvr0] {
    @apply flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between;
}

.activity-wizard__eyebrow[b-klgcozpvr0] {
    @apply text-xs font-semibold uppercase tracking-[0.12em];

    color: color-mix(in srgb, var(--app-text) 58%, transparent);
}

.activity-wizard__title[b-klgcozpvr0] {
    @apply mt-1 text-2xl font-semibold leading-tight;
}

.activity-wizard__instruction[b-klgcozpvr0] {
    @apply mt-2 max-w-2xl text-sm leading-relaxed;

    color: color-mix(in srgb, var(--app-text) 72%, transparent);
}

.activity-wizard__status[b-klgcozpvr0] {
    @apply flex flex-wrap items-center gap-2;
}

/*  The footer follows the author down a long step rather than making
    them scroll back to the only button that finishes anything.         */
.activity-wizard__footer[b-klgcozpvr0] {
    @apply sticky bottom-0 z-10 flex flex-wrap items-center gap-3 rounded-xl border p-4;

    background-color: var(--app-surface);
    border-color: var(--app-border);
    box-shadow: var(--app-shadow-above);
}

.activity-wizard__footer-spacer[b-klgcozpvr0] {
    @apply flex-1;
}

/* ------------------------------------------------------------------ */
/*  PROGRESS RAIL                                                      */
/* ------------------------------------------------------------------ */

.wizard-rail[b-klgcozpvr0] {
    @apply rounded-xl border p-4;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.wizard-rail__list[b-klgcozpvr0] {
    @apply hidden md:flex md:items-center md:gap-1;
}

.wizard-rail__item[b-klgcozpvr0] {
    @apply flex min-w-0 flex-1 items-center gap-1 last:flex-none;
}

.wizard-rail__step[b-klgcozpvr0] {
    @apply flex min-w-0 items-center gap-2 rounded-full border px-3 py-2 text-sm font-semibold transition-colors;

    background-color: transparent;
    border-color: transparent;
    color: color-mix(in srgb, var(--app-text) 62%, transparent);
}

.wizard-rail__step:not(:disabled):hover[b-klgcozpvr0] {
    background-color: var(--app-nav-item-hover);
}

.wizard-rail__label[b-klgcozpvr0] {
    @apply truncate;
}

.wizard-rail__pip[b-klgcozpvr0] {
    @apply inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-xs font-semibold;

    border-color: color-mix(in srgb, var(--app-text) 22%, transparent);
}

.wizard-rail__connector[b-klgcozpvr0] {
    @apply h-px min-w-4 flex-1;

    background-color: var(--app-border);
}

/*  Reachable but not yet visited: legible, unemphasised.               */
.wizard-rail__step--reachable[b-klgcozpvr0] {
    color: color-mix(in srgb, var(--app-text) 70%, transparent);
}

.wizard-rail__step--done[b-klgcozpvr0] {
    color: var(--app-button-go);
}

.wizard-rail__step--done .wizard-rail__pip[b-klgcozpvr0] {
    background-color: color-mix(in srgb, var(--app-button-go) 14%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 40%, var(--app-border));
    color: var(--app-button-go);
}

.wizard-rail__step--current[b-klgcozpvr0] {
    background-color: var(--app-nav-item-active-bg);
    border-color: var(--app-nav-item-active-border);
    color: var(--app-nav-item-active-text);
}

.wizard-rail__step--current .wizard-rail__pip[b-klgcozpvr0] {
    background-color: var(--app-button-standard);
    border-color: var(--app-button-standard);
    color: var(--app-text-invert);
}

.wizard-rail__step--problem[b-klgcozpvr0] {
    color: var(--app-button-danger);
}

.wizard-rail__step--problem .wizard-rail__pip[b-klgcozpvr0] {
    background-color: color-mix(in srgb, var(--app-button-danger) 14%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-danger) 40%, var(--app-border));
    color: var(--app-button-danger);
}

/*  Locked steps stay readable and carry a title explaining what is in
    the way. A control that refuses without saying why is the thing this
    rework removes everywhere else.                                     */
.wizard-rail__step--locked[b-klgcozpvr0] {
    @apply cursor-not-allowed;

    color: color-mix(in srgb, var(--app-text) 34%, transparent);
}

.wizard-rail__step--locked .wizard-rail__pip[b-klgcozpvr0] {
    border-color: color-mix(in srgb, var(--app-text) 14%, transparent);
}

.wizard-rail__compact[b-klgcozpvr0] {
    @apply flex flex-col gap-2 md:hidden;
}

.wizard-rail__compact-text[b-klgcozpvr0] {
    @apply flex flex-wrap items-baseline gap-2 text-sm;
}

.wizard-rail__compact-label[b-klgcozpvr0] {
    color: color-mix(in srgb, var(--app-text) 68%, transparent);
}

.wizard-rail__progress[b-klgcozpvr0] {
    @apply h-1.5 w-full overflow-hidden rounded-full;

    background-color: var(--app-border);
}

.wizard-rail__progress-fill[b-klgcozpvr0] {
    @apply h-full rounded-full transition-all;

    background-color: var(--app-button-go);
}

/* ------------------------------------------------------------------ */
/*  ISSUE LIST                                                         */
/* ------------------------------------------------------------------ */

.activity-issues[b-klgcozpvr0] {
    @apply rounded-xl border p-4;
}

.activity-issues--blocking[b-klgcozpvr0] {
    background-color: color-mix(in srgb, var(--app-button-danger) 8%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-danger) 28%, var(--app-border));
}

.activity-issues--advisory[b-klgcozpvr0] {
    background-color: color-mix(in srgb, var(--app-button-standard) 8%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-standard) 24%, var(--app-border));
}

.activity-issues__heading[b-klgcozpvr0] {
    @apply flex items-center gap-2 text-sm font-semibold;
}

.activity-issues--blocking .activity-issues__heading[b-klgcozpvr0] {
    color: var(--app-button-danger);
}

.activity-issues--advisory .activity-issues__heading[b-klgcozpvr0] {
    color: var(--app-button-standard);
}

.activity-issues__list[b-klgcozpvr0] {
    @apply mt-3 flex flex-col gap-2;
}

.activity-issues__item[b-klgcozpvr0] {
    @apply flex flex-wrap items-center gap-3 text-sm leading-relaxed;
}

.activity-issues__dot[b-klgcozpvr0] {
    @apply h-2 w-2 shrink-0 rounded-full;
}

.activity-issues__dot--blocking[b-klgcozpvr0] {
    background-color: var(--app-button-danger);
}

.activity-issues__dot--advisory[b-klgcozpvr0] {
    background-color: var(--app-button-standard);
}

/* ------------------------------------------------------------------ */
/*  REVIEW                                                             */
/* ------------------------------------------------------------------ */

.activity-review[b-klgcozpvr0] {
    @apply flex flex-col gap-5;
}

.activity-review__ready[b-klgcozpvr0] {
    @apply flex flex-wrap items-center gap-3 rounded-xl border p-4;

    background-color: color-mix(in srgb, var(--app-button-go) 8%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 26%, var(--app-border));
}

.activity-review__ready-text[b-klgcozpvr0] {
    @apply text-sm;

    color: color-mix(in srgb, var(--app-text) 72%, transparent);
}

/*  Summary on the left, preview on the right, the preview staying put
    while a long summary scrolls past it.                              */
.activity-review__grid[b-klgcozpvr0] {
    @apply grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,2fr)_minmax(0,1fr)];
}

.activity-review__sections[b-klgcozpvr0] {
    @apply flex flex-col gap-4;
}

.activity-review__preview[b-klgcozpvr0] {
    @apply xl:sticky xl:top-6 xl:self-start;
}

.activity-review__preview-card[b-klgcozpvr0] {
    @apply rounded-xl border p-5;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
}

.activity-review__preview-title[b-klgcozpvr0] {
    @apply text-base font-semibold leading-tight;
}

.activity-review__preview-hint[b-klgcozpvr0] {
    @apply mt-1 text-sm leading-relaxed;

    color: color-mix(in srgb, var(--app-text) 68%, transparent);
}

.activity-review__section[b-klgcozpvr0] {
    @apply rounded-xl border p-5;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
}

.activity-review__section--problem[b-klgcozpvr0] {
    border-color: color-mix(in srgb, var(--app-button-danger) 34%, var(--app-border));
}

.activity-review__section-header[b-klgcozpvr0] {
    @apply flex flex-wrap items-center justify-between gap-3;
}

.activity-review__section-title[b-klgcozpvr0] {
    @apply flex items-center gap-2 text-base font-semibold leading-tight;
}

.activity-review__number[b-klgcozpvr0] {
    @apply inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-xs font-semibold;

    background-color: color-mix(in srgb, var(--app-button-standard) 12%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-standard) 30%, var(--app-border));
    color: var(--app-button-standard);
}

.activity-review__section-body[b-klgcozpvr0] {
    @apply mt-4 text-sm leading-relaxed;
}

.activity-review__chips[b-klgcozpvr0] {
    @apply flex flex-wrap gap-2;
}

/*  Author-written HTML shown as the learner reads it.                  */
.activity-review__rich-text[b-klgcozpvr0] {
    @apply rounded-lg border p-4;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

/* ------------------------------------------------------------------ */
/*  STILL PREVIEW                                                      */
/* ------------------------------------------------------------------ */

.activity-still[b-klgcozpvr0] {
    @apply flex flex-col gap-3;
}

.activity-still__empty[b-klgcozpvr0],
.activity-still__note[b-klgcozpvr0] {
    @apply text-sm leading-relaxed;

    color: color-mix(in srgb, var(--app-text) 62%, transparent);
}

.activity-still__content[b-klgcozpvr0] {
    @apply flex flex-col gap-3;
}

/* ------------------------------------------------------------------ */
/*  QUIZ SUMMARIES AND PREVIEW                                         */
/* ------------------------------------------------------------------ */

.quiz-summary[b-klgcozpvr0] {
    @apply flex flex-col gap-2;
}

.quiz-summary__item[b-klgcozpvr0] {
    @apply flex items-start gap-3;
}

.quiz-summary__number[b-klgcozpvr0] {
    @apply inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full border text-xs font-semibold tabular-nums;

    border-color: color-mix(in srgb, var(--app-text) 18%, transparent);
    color: color-mix(in srgb, var(--app-text) 62%, transparent);
}

.quiz-summary__explanation[b-klgcozpvr0] {
    @apply mt-0.5 block text-xs;

    color: color-mix(in srgb, var(--app-text) 60%, transparent);
}

.quiz-preview[b-klgcozpvr0] {
    @apply flex flex-col gap-3;
}

.quiz-preview__question[b-klgcozpvr0] {
    @apply text-sm font-semibold leading-relaxed;
}

.quiz-preview__options[b-klgcozpvr0] {
    @apply flex flex-col gap-2;
}

.quiz-preview__option[b-klgcozpvr0] {
    @apply flex items-center gap-2 rounded-lg border px-3 py-2 text-sm;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.quiz-preview__marker[b-klgcozpvr0] {
    @apply h-3.5 w-3.5 shrink-0 rounded-full border;

    border-color: color-mix(in srgb, var(--app-text) 30%, transparent);
}

.quiz-preview__marker--correct[b-klgcozpvr0] {
    background-color: var(--app-button-go);
    border-color: var(--app-button-go);
}

.quiz-preview__tick[b-klgcozpvr0] {
    @apply shrink-0 text-base leading-none;

    color: var(--app-button-go);
}

/* ------------------------------------------------------------------ */
/*  WORD CHIPS AND ANAGRAM PREVIEW                                     */
/* ------------------------------------------------------------------ */

.word-chip[b-klgcozpvr0] {
    @apply inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium;

    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.anagram-preview[b-klgcozpvr0] {
    @apply flex flex-col gap-2;
}

.anagram-preview__item[b-klgcozpvr0] {
    @apply flex flex-wrap items-center gap-2 text-sm;
}

.anagram-preview__scrambled[b-klgcozpvr0] {
    @apply rounded-lg border px-2 py-1 font-mono tracking-widest;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.anagram-preview__arrow[b-klgcozpvr0] {
    @apply text-xs;

    color: color-mix(in srgb, var(--app-text) 45%, transparent);
}

.anagram-preview__answer[b-klgcozpvr0] {
    @apply font-semibold;

    color: var(--app-button-go);
}

/* ------------------------------------------------------------------ */
/*  WORD SEARCH GRID PREVIEW                                           */
/* ------------------------------------------------------------------ */

.word-search-preview[b-klgcozpvr0] {
    @apply flex flex-col gap-2;
}

/*  Scrolls inside itself rather than widening the panel it sits in.   */
.word-search-preview__grid[b-klgcozpvr0] {
    @apply block max-w-full overflow-x-auto border-collapse text-center font-mono text-xs;
}

.word-search-preview__cell[b-klgcozpvr0] {
    @apply border px-1.5 py-1 uppercase;

    border-color: var(--app-border);
    color: color-mix(in srgb, var(--app-text) 78%, transparent);
}

/* ------------------------------------------------------------------ */
/*  BLANKS SUMMARY                                                     */
/* ------------------------------------------------------------------ */

.blank-summary[b-klgcozpvr0] {
    @apply flex flex-col gap-2;
}

.blank-summary__item[b-klgcozpvr0] {
    @apply flex flex-wrap items-center gap-2 text-sm;
}

.blank-summary__source[b-klgcozpvr0] {
    @apply min-w-0 truncate font-semibold;
}

.blank-summary__arrow[b-klgcozpvr0] {
    @apply text-xs;

    color: color-mix(in srgb, var(--app-text) 45%, transparent);
}

/* ------------------------------------------------------------------ */
/*  DROP ACTIVITY SUMMARY                                              */
/* ------------------------------------------------------------------ */

.drop-summary__area[b-klgcozpvr0] {
    @apply inline-flex max-w-full items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium;

    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.drop-summary__count[b-klgcozpvr0] {
    @apply shrink-0 rounded-full px-1.5 text-[0.65rem] font-semibold tabular-nums;

    background-color: color-mix(in srgb, var(--app-button-standard) 16%, transparent);
    color: color-mix(in srgb, var(--app-button-standard) 90%, var(--app-text));
}

/* ------------------------------------------------------------------ */
/*  SHARED MAKER SECTIONS                                              */
/* ------------------------------------------------------------------ */
/*  Moved here from ActivityMakerShell.razor.css when that shell was
    deleted. Despite the name these were never scoped to it -- main.css
    imports every .razor.css into one global sheet, and all nine makers,
    the type picker and every shared panel use them.                   */

.activity-maker__section[b-klgcozpvr0] {
    @apply rounded-xl border p-5;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
}

.activity-maker__section + .activity-maker__section[b-klgcozpvr0] {
    @apply mt-5;
}

.activity-maker__section-title[b-klgcozpvr0] {
    @apply text-base font-semibold leading-tight;
}

.activity-maker__section-hint[b-klgcozpvr0] {
    @apply mt-1 text-sm leading-relaxed;

    color: color-mix(in srgb, var(--app-text) 68%, transparent);
}

.quiz-settings__threshold[b-klgcozpvr0] {
    @apply flex flex-wrap items-baseline gap-2;
}

.quiz-settings__threshold-value[b-klgcozpvr0] {
    @apply text-2xl font-semibold;

    color: var(--app-button-go);
}
/* /DashboardApp/Components/Cms/ActivityMakers/BlanksComposer.razor.rz.scp.css */
.blanks-composer[b-v77ln1vjlg] {
    @apply rounded-xl border p-4;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.blanks-composer__preview[b-v77ln1vjlg] {
    @apply flex flex-wrap items-center gap-4;
}

.blanks-composer__label[b-v77ln1vjlg] {
    @apply block text-xs font-semibold uppercase tracking-[0.1em];

    color: color-mix(in srgb, var(--app-text) 55%, transparent);
}

.blanks-composer__text[b-v77ln1vjlg] {
    @apply mt-1 text-xl font-semibold;
}

.blanks-composer__text--blanks[b-v77ln1vjlg] {
    letter-spacing: 0.18em;
    color: var(--app-button-go);
}

.blanks-composer__arrow[b-v77ln1vjlg] {
    @apply text-[1.5rem] leading-none;

    color: color-mix(in srgb, var(--app-text) 45%, transparent);
}

.blanks-composer__input[b-v77ln1vjlg] {
    letter-spacing: 0.18em;
}

.blanks-composer__problem[b-v77ln1vjlg] {
    @apply mt-3 flex items-center gap-2 text-sm font-medium;

    color: var(--app-button-danger);
}

.blanks-composer__ok[b-v77ln1vjlg] {
    @apply mt-3 flex items-center gap-2 text-sm font-medium;

    color: var(--app-button-go);
}
/* /DashboardApp/Components/Cms/ActivityMakers/DroppableCardEditor.razor.rz.scp.css */
.droppable__column[b-shyav2ggfv] {
    @apply flex min-w-0 flex-col gap-4 rounded-xl border p-4;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.droppable__list[b-shyav2ggfv] {
    @apply flex max-h-[20rem] list-none flex-col gap-1 overflow-y-auto p-0;
}

.droppable__item[b-shyav2ggfv] {
    @apply flex w-full cursor-pointer items-center gap-3 rounded-lg border px-3 py-2 text-left text-base transition-colors;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

.droppable__item:hover[b-shyav2ggfv] {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
}

.droppable__item--selected[b-shyav2ggfv] {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
    font-weight: 600;
}

.droppable__answer[b-shyav2ggfv] {
    @apply flex w-full cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 text-left text-base transition-colors;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

.droppable__answer:hover[b-shyav2ggfv] {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
}

.droppable__answer--on[b-shyav2ggfv] {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
    font-weight: 600;
}

.droppable__assigned[b-shyav2ggfv] {
    @apply mt-3 flex list-none flex-col gap-2 p-0;
}

.droppable__assigned-item[b-shyav2ggfv] {
    @apply flex flex-wrap items-center gap-4 rounded-xl border px-4 py-3;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}
/* /DashboardApp/Components/Cms/ActivityMakers/DropTargetEditor.razor.rz.scp.css */
.drop-target__list[b-l618phmgox] {
    @apply mt-4 flex list-none flex-col gap-2 p-0;
}

.drop-target__item[b-l618phmgox] {
    @apply flex items-center gap-4 rounded-xl border px-4 py-3;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.drop-target__label[b-l618phmgox] {
    @apply min-w-0 truncate text-base font-semibold;
}

.drop-target__form[b-l618phmgox] {
    @apply mt-4 rounded-xl border p-4;

    background-color: var(--app-surface);
    border-color: color-mix(in srgb, var(--app-button-go) 35%, var(--app-border));
}
/* /DashboardApp/Components/Cms/ActivityMakers/FillWordBlanksMaker.razor.rz.scp.css */
.fill-blanks__column[b-mgyw5xepy1] {
    @apply flex min-w-0 flex-col gap-4;
}

.fill-blanks__list[b-mgyw5xepy1] {
    @apply flex max-h-[20rem] list-none flex-col gap-1 overflow-y-auto p-0;
}

.fill-blanks__item[b-mgyw5xepy1] {
    @apply w-full cursor-pointer rounded-lg border px-3 py-2 text-left text-base transition-colors;

    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.fill-blanks__item:hover[b-mgyw5xepy1] {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
}

.fill-blanks__item--selected[b-mgyw5xepy1] {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
    font-weight: 600;
}

.fill-blanks__assigned[b-mgyw5xepy1] {
    @apply mt-3 flex list-none flex-col gap-2 p-0;
}

.fill-blanks__assigned-item[b-mgyw5xepy1] {
    @apply flex flex-wrap items-center gap-4 rounded-xl border px-4 py-3;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.fill-blanks__blanked[b-mgyw5xepy1] {
    @apply min-w-0 flex-1 truncate text-base font-semibold;

    letter-spacing: 0.18em;
    color: var(--app-button-go);
}
/* /DashboardApp/Components/Cms/ActivityMakers/WordBankPicker.razor.rz.scp.css */
.word-bank__column[b-tymf0lpy1a] {
    @apply flex min-w-0 flex-col gap-4 rounded-xl border p-4;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
}

.word-bank__list[b-tymf0lpy1a] {
    @apply flex max-h-[24rem] list-none flex-col gap-1 overflow-y-auto p-0;
}

.word-bank__item[b-tymf0lpy1a] {
    @apply flex w-full items-center gap-3 rounded-lg border px-3 py-2 text-left text-base transition-colors;

    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

button.word-bank__item[b-tymf0lpy1a] {
    @apply cursor-pointer;
}

button.word-bank__item:hover:not(:disabled)[b-tymf0lpy1a] {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
}

button.word-bank__item:disabled[b-tymf0lpy1a] {
    @apply cursor-not-allowed opacity-50;
}

.word-bank__item--selected[b-tymf0lpy1a] {
    background-color: color-mix(in srgb, var(--app-button-go) 12%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 40%, var(--app-border));
}
/* /DashboardApp/Components/Cms/ContentOutline.razor.rz.scp.css */
/*  Styles for ContentOutline and ContentOutlineNode.

    Lived in ContentWorkspace.razor.css until now, which was the one place in
    DashboardApp where a component's styles sat beside a different component.
    Scoped CSS is not actually scoped here -- these are global class names, as
    everything under Styles/ is -- so the move is organisational, not
    behavioural.                                                        */

.content-outline[b-tpugl9aznx] {
    @apply flex flex-col gap-4;
}

.content-outline__toolbar[b-tpugl9aznx] {
    @apply flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between;
}

.outline-branch[b-tpugl9aznx] {
    @apply flex flex-col;
}

.outline-branch:not(.outline-branch--root)[b-tpugl9aznx] {
    @apply ml-5 border-l pl-3;

    border-color: var(--app-border);
}

.outline-node[b-tpugl9aznx] {
    @apply flex flex-col;
}

.outline-node__row[b-tpugl9aznx] {
    @apply flex flex-wrap items-center gap-2 rounded-lg px-2 py-2 transition-colors;
}

.outline-node__row:hover[b-tpugl9aznx] {
    background-color: var(--app-nav-item-hover);
}

/*  Depth reads from weight, not indentation alone.                    */
.outline-node__row--module[b-tpugl9aznx] {
    @apply text-base font-semibold;
}

.outline-node__row--lesson[b-tpugl9aznx] {
    @apply text-sm font-medium;
}

.outline-node__row--activity[b-tpugl9aznx] {
    @apply text-sm;
}

/*  Reordering. Two arrow buttons per row became one grip, dragged or
    nudged with the arrow keys.

    Dragging a module means dragging past everything inside the module
    below it, which for an expanded course is several screens and worse
    than the buttons it replaces. So the branch under every node folds
    away for the length of the drag and the rows close up into a short
    list. The sortable measures after this class lands, which is the
    whole reason it applies it before taking any rects.               */
.outline-branch.is-sorting > .outline-node > .outline-branch[b-tpugl9aznx],
.outline-branch.is-sorting > .outline-insert[b-tpugl9aznx] {
    @apply hidden;
}

.outline-branch.is-sorting[b-tpugl9aznx] {
    @apply select-none;
}

.outline-branch.is-sorting > .outline-node[b-tpugl9aznx] {
    @apply transition-transform duration-150 ease-out;

    will-change: transform;
}

/*  The row under the pointer tracks it exactly; a transition here would
    leave it trailing behind the cursor.                              */
.outline-branch.is-sorting > .outline-node.is-dragging[b-tpugl9aznx] {
    @apply relative z-10 transition-none;
}

.outline-branch.is-sorting > .outline-node.is-dragging > .outline-node__row[b-tpugl9aznx] {
    background-color: var(--app-strong-surface);
    box-shadow: 0 10px 24px rgb(0 0 0 / 0.16);
}

/*  Visible at rest, unlike the row's actions.

    The actions can hide until hover because each of them is a second
    way to do something the row already offers. The grip is not: it is
    the only pointer affordance for reordering now that the arrow
    buttons are gone, and an invisible handle is a feature nobody finds.
    Faded, so a long outline is not a column of grips, but present.
    This matches the grip on the flat lists, which was never hidden.  */
.outline-node__grip[b-tpugl9aznx] {
    @apply inline-flex h-6 w-6 shrink-0 cursor-grab items-center justify-center rounded text-sm transition-colors;

    /*  Claims the gesture from the browser's own scrolling on touch.  */
    touch-action: none;
    /*  55%, not 45%: faded to 45% this sat at 2.58:1 against the light
        page, under the 3:1 a control has to reach to be seen at all.  */
    color: color-mix(in srgb, var(--app-text) 55%, transparent);
}

.outline-node__row:hover .outline-node__grip[b-tpugl9aznx],
.outline-node__row:focus-within .outline-node__grip[b-tpugl9aznx] {
    color: var(--app-text);
}

.outline-node__grip:focus-visible[b-tpugl9aznx] {
    @apply opacity-100 outline-none;

    color: var(--app-text);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-button-standard) 45%, transparent);
}

/*  Dimmed while the tree is busy, not removed -- a handle that
    vanishes mid-operation reads as a bug rather than as "wait".      */
.outline-node__grip:disabled[b-tpugl9aznx] {
    @apply cursor-not-allowed opacity-40;
}

.outline-branch.is-sorting .outline-node__grip[b-tpugl9aznx] {
    @apply cursor-grabbing;
}

/*  Holds the column so rows with a grip and rows without still line up.
    Empty, so nothing paints -- it only reserves the space.            */
.outline-node__grip--empty[b-tpugl9aznx] {
    @apply pointer-events-none;
}

@media (prefers-reduced-motion: reduce) {
    .outline-branch.is-sorting > .outline-node[b-tpugl9aznx] {
        @apply transition-none;
    }
}

.outline-node__toggle[b-tpugl9aznx] {
    @apply inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-xs;

    color: color-mix(in srgb, var(--app-text) 55%, transparent);
}

.outline-node__toggle:hover[b-tpugl9aznx] {
    color: var(--app-text);
}

.outline-node__toggle--empty[b-tpugl9aznx] {
    @apply pointer-events-none;
}

.outline-node__icon[b-tpugl9aznx] {
    @apply shrink-0 text-base leading-none;

    color: color-mix(in srgb, var(--app-text) 58%, transparent);
}

.outline-node__number[b-tpugl9aznx] {
    @apply shrink-0 text-xs tabular-nums;

    color: color-mix(in srgb, var(--app-text) 50%, transparent);
}

.outline-node__title[b-tpugl9aznx] {
    @apply min-w-0 max-w-full truncate no-underline;

    color: var(--app-text);
}

.outline-node__title:hover[b-tpugl9aznx] {
    color: var(--app-button-standard);
    text-decoration: underline;
}

.outline-node__rename[b-tpugl9aznx] {
    @apply min-w-0 flex-1 rounded-lg border px-3 py-1.5 text-sm font-normal;

    background-color: var(--app-page-bg);
    border-color: var(--app-button-standard);
    color: var(--app-text);
}

.outline-node__rename:focus[b-tpugl9aznx] {
    outline: none;
}

.outline-node__badge[b-tpugl9aznx] {
    @apply shrink-0 truncate rounded-full px-2 py-0.5 text-[0.65rem] font-semibold;

    max-width: 9rem;
    background-color: color-mix(in srgb, var(--app-button-standard) 12%, transparent);
    color: color-mix(in srgb, var(--app-button-standard) 90%, var(--app-text));
}

.outline-node__requirement[b-tpugl9aznx] {
    @apply shrink-0 text-xs font-normal;

    color: color-mix(in srgb, var(--app-button-warning) 90%, var(--app-text));
}

.outline-node__spacer[b-tpugl9aznx] {
    @apply flex-1;
}

.outline-node__count[b-tpugl9aznx] {
    @apply shrink-0 text-xs font-normal;

    color: color-mix(in srgb, var(--app-text) 55%, transparent);
}

/*  Actions stay out of the way until the row is hovered or something
    inside it has focus -- 600 rows of visible buttons is noise. They
    remain reachable by keyboard because focus-within brings them back. */
.outline-node__actions[b-tpugl9aznx] {
    @apply flex shrink-0 items-center gap-1 opacity-0 transition-opacity;
}

.outline-node__row:hover .outline-node__actions[b-tpugl9aznx],
.outline-node__row:focus-within .outline-node__actions[b-tpugl9aznx] {
    @apply opacity-100;
}

@media (hover: none) {
    .outline-node__actions[b-tpugl9aznx] {
        @apply opacity-100;
    }
}

.outline-node__action[b-tpugl9aznx] {
    @apply inline-flex h-7 w-7 items-center justify-center rounded-lg text-sm transition-colors;

    color: color-mix(in srgb, var(--app-text) 62%, transparent);
}

.outline-node__action:not(:disabled):hover[b-tpugl9aznx] {
    background-color: var(--app-strong-surface);
    color: var(--app-text);
}

.outline-node__action--danger:not(:disabled):hover[b-tpugl9aznx] {
    color: var(--app-button-danger);
}

.outline-node__action:disabled[b-tpugl9aznx] {
    @apply cursor-not-allowed opacity-40;
}

/*  Insert points are quiet, so an outline reads as content rather than
    as a column of plus signs. Quiet, not absent: they were opacity-0
    until hovered, which hid the only way to add a lesson between two
    lessons behind an invisible target in an empty gap. Nothing named
    the affordance, so there was nothing to go looking for.

    The trigger already fades itself -- 60% of the text colour at rest,
    the accent colour on hover -- so the wrapper was a second layer of
    hiding stacked on a control that was designed to be unobtrusive.
    One layer is enough.                                                */
.outline-insert[b-tpugl9aznx] {
    @apply pl-7;
}

/* The staged-rearrangement banner. Deliberately identical to .sortable-list__pending --
   the outline and the sortable list stage the same thing and say the same words, so they
   should not look like two different notices. */
.content-outline__pending[b-tpugl9aznx] {
    @apply mt-4 flex items-center gap-2 rounded-xl border px-4 py-3 text-sm;

    background-color: color-mix(in srgb, var(--app-button-go) 10%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 30%, var(--app-border));
    color: var(--app-text);
}
/* /DashboardApp/Components/Cms/ContentWorkspace.razor.rz.scp.css */
/* ------------------------------------------------------------------ */
/*  CONTENT WORKSPACE                                                  */
/* ------------------------------------------------------------------ */
/*  Two columns above xl, stacked below it. The rail leads on narrow
    screens because it is the navigation -- burying it under the detail
    would mean scrolling a whole page to move between lessons.         */

.content-workspace[b-uqzvs99v7h] {
    @apply grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,20rem)_minmax(0,1fr)];
}

.content-workspace__rail[b-uqzvs99v7h] {
    @apply min-w-0;
}

.content-workspace__detail[b-uqzvs99v7h] {
    @apply min-w-0;
}

/* ------------------------------------------------------------------ */
/*  BREADCRUMBS                                                        */
/* ------------------------------------------------------------------ */

.content-crumbs[b-uqzvs99v7h] {
    @apply mb-4;
}

.content-crumbs__list[b-uqzvs99v7h] {
    @apply flex flex-wrap items-center gap-x-2 gap-y-1 text-sm;
}

.content-crumbs__item[b-uqzvs99v7h] {
    @apply flex min-w-0 items-center gap-2;
}

.content-crumbs__link[b-uqzvs99v7h] {
    @apply truncate no-underline;

    color: color-mix(in srgb, var(--app-text) 66%, transparent);
}

.content-crumbs__link:hover[b-uqzvs99v7h] {
    color: var(--app-button-standard);
    text-decoration: underline;
}

.content-crumbs__current[b-uqzvs99v7h] {
    @apply min-w-0 truncate font-semibold;

    color: var(--app-text);
}

.content-crumbs__separator[b-uqzvs99v7h] {
    @apply text-xs;

    color: color-mix(in srgb, var(--app-text) 40%, transparent);
}

/* /DashboardApp/Components/Cms/CourseTreeRail.razor.rz.scp.css */
/* ------------------------------------------------------------------ */
/*  COURSE TREE RAIL                                                   */
/* ------------------------------------------------------------------ */
/*  The persistent structure pane. Sticky on wide screens so the tree
    stays put while a long detail pane scrolls past it; a plain block
    above the detail below xl, where there is no room for two columns. */

.course-rail[b-1o0o1kvahb] {
    @apply flex flex-col rounded-xl border;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

@media (min-width: 80rem) {
    .course-rail[b-1o0o1kvahb] {
        position: sticky;
        top: 1.5rem;
        max-height: calc(100vh - 3rem);
    }
}

.course-rail__header[b-1o0o1kvahb] {
    @apply flex flex-col gap-3 border-b p-4;

    border-color: var(--app-border);
}

.course-rail__course[b-1o0o1kvahb] {
    @apply flex items-center gap-2 text-base font-semibold no-underline;

    color: var(--app-text);
}

.course-rail__course:hover[b-1o0o1kvahb] {
    color: var(--app-button-standard);
}

.course-rail__tools[b-1o0o1kvahb] {
    @apply flex items-center gap-2;
}

.course-rail__search[b-1o0o1kvahb] {
    @apply min-w-0 flex-1 rounded-lg border px-3 py-2 text-sm;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

.course-rail__search:focus[b-1o0o1kvahb] {
    outline: none;
    border-color: var(--app-button-standard);
}

.course-rail__tool[b-1o0o1kvahb] {
    @apply inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border transition-colors;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
    color: color-mix(in srgb, var(--app-text) 70%, transparent);
}

.course-rail__tool:hover[b-1o0o1kvahb] {
    background-color: var(--app-nav-item-hover);
    color: var(--app-text);
}

.course-rail__body[b-1o0o1kvahb] {
    @apply min-h-0 flex-1 overflow-y-auto p-2;
}

.course-rail__footer[b-1o0o1kvahb] {
    @apply border-t p-3;

    border-color: var(--app-border);
}

/* ------------------------------------------------------------------ */
/*  TREE                                                               */
/* ------------------------------------------------------------------ */

.content-tree[b-1o0o1kvahb] {
    @apply flex flex-col;
}

/*  Indent comes from a rule rather than nested padding, so the depth of
    a node reads as a line back to its parent.                          */
.content-tree--nested[b-1o0o1kvahb] {
    @apply ml-4 border-l pl-2;

    border-color: var(--app-border);
}

.content-tree__item[b-1o0o1kvahb] {
    @apply flex flex-col;
}

.content-tree__item--creator[b-1o0o1kvahb] {
    @apply py-1 pl-7;
}

.content-tree__row[b-1o0o1kvahb] {
    @apply flex items-center gap-1 rounded-lg transition-colors;
}

.content-tree__row:hover[b-1o0o1kvahb] {
    background-color: var(--app-nav-item-hover);
}

.content-tree__row--active[b-1o0o1kvahb] {
    background-color: var(--app-nav-item-active-bg);
}

.content-tree__row--active .content-tree__link[b-1o0o1kvahb] {
    color: var(--app-nav-item-active-text);
    font-weight: 600;
}

.content-tree__toggle[b-1o0o1kvahb] {
    @apply inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-xs;

    color: color-mix(in srgb, var(--app-text) 55%, transparent);
}

.content-tree__toggle:hover[b-1o0o1kvahb] {
    color: var(--app-text);
}

.content-tree__toggle--empty[b-1o0o1kvahb] {
    @apply pointer-events-none;
}

.content-tree__link[b-1o0o1kvahb] {
    @apply flex min-w-0 flex-1 items-center gap-2 py-1.5 pr-2 text-sm no-underline;

    color: var(--app-text);
}

.content-tree__link--module[b-1o0o1kvahb] {
    @apply font-semibold;
}

.content-tree__icon[b-1o0o1kvahb] {
    @apply shrink-0 text-base leading-none;

    color: color-mix(in srgb, var(--app-text) 60%, transparent);
}

.content-tree__row--active .content-tree__icon[b-1o0o1kvahb] {
    color: var(--app-nav-item-active-text);
}

.content-tree__number[b-1o0o1kvahb] {
    @apply shrink-0 text-xs tabular-nums;

    color: color-mix(in srgb, var(--app-text) 50%, transparent);
}

.content-tree__title[b-1o0o1kvahb] {
    @apply min-w-0 flex-1 truncate;
}

.content-tree__badge[b-1o0o1kvahb] {
    @apply shrink-0 truncate rounded-full px-2 py-0.5 text-[0.65rem] font-semibold;

    max-width: 8rem;
    background-color: color-mix(in srgb, var(--app-button-standard) 12%, transparent);
    color: color-mix(in srgb, var(--app-button-standard) 90%, var(--app-text));
}

/* ------------------------------------------------------------------ */
/*  INLINE CREATOR                                                     */
/* ------------------------------------------------------------------ */

.inline-creator[b-1o0o1kvahb] {
    @apply flex flex-col gap-1;
}

.inline-creator__trigger[b-1o0o1kvahb] {
    @apply inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-sm font-medium transition-colors;

    /*  Now that the insert row no longer hides this at opacity 0, the
        trigger's own fade is the only thing keeping it quiet -- so it
        has to be quiet and still legible. At 60% this cleared 4.5:1
        against the dark page but only reached 3.85:1 against the light
        one, and it is 14px text.                                     */
    color: color-mix(in srgb, var(--app-text) 72%, transparent);
}

.inline-creator__trigger:not(:disabled):hover[b-1o0o1kvahb] {
    background-color: var(--app-nav-item-hover);
    color: var(--app-button-go);
}

.inline-creator__trigger:disabled[b-1o0o1kvahb] {
    @apply cursor-not-allowed;

    color: color-mix(in srgb, var(--app-text) 32%, transparent);
}

.inline-creator__form[b-1o0o1kvahb] {
    @apply flex items-center gap-2;
}

.inline-creator__input[b-1o0o1kvahb] {
    @apply min-w-0 flex-1 rounded-lg border px-3 py-2 text-sm;

    background-color: var(--app-page-bg);
    border-color: var(--app-button-go);
    color: var(--app-text);
}

.inline-creator__input:focus[b-1o0o1kvahb] {
    outline: none;
}

.inline-creator__hint[b-1o0o1kvahb] {
    @apply px-1 text-xs;

    color: color-mix(in srgb, var(--app-text) 55%, transparent);
}
/* /DashboardApp/Components/Cms/ModuleDeckBuilder.razor.rz.scp.css */
.deck-column[b-q0xieved8w] {
    @apply flex min-w-0 flex-col gap-4 rounded-xl border p-4;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
}

.deck-list[b-q0xieved8w] {
    @apply flex max-h-[22rem] list-none flex-col gap-1 overflow-y-auto p-0;
}

.deck-item[b-q0xieved8w] {
    @apply flex w-full cursor-pointer items-center gap-3 rounded-lg border px-3 py-2 text-left text-base transition-colors;

    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.deck-item:hover[b-q0xieved8w] {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
}

.deck-item--selected[b-q0xieved8w] {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
}

.deck-preview[b-q0xieved8w] {
    @apply flex justify-center rounded-xl border p-5;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}
/* /DashboardApp/Components/Cms/ModuleWords.razor.rz.scp.css */
.module-words__adder[b-ocuzryeeya] {
    @apply rounded-xl border p-5;

    background-color: var(--app-page-bg);
    border-color: color-mix(in srgb, var(--app-button-go) 30%, var(--app-border));
}

.module-words__suggestions[b-ocuzryeeya] {
    @apply mt-4 flex max-h-[16rem] list-none flex-col gap-1 overflow-y-auto p-0;
}

.module-words__suggestion[b-ocuzryeeya] {
    @apply w-full cursor-pointer rounded-lg border px-3 py-2 text-left text-base transition-colors;

    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.module-words__suggestion:hover[b-ocuzryeeya] {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
}

.module-words__suggestion--selected[b-ocuzryeeya] {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
    font-weight: 600;
}
/* /DashboardApp/Components/Cms/WordColumn.razor.rz.scp.css */
.word-column[b-jd4div1y7d] {
    @apply flex min-w-0 flex-col gap-4 rounded-xl border p-4;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
}

.word-column__list[b-jd4div1y7d] {
    @apply flex max-h-[24rem] list-none flex-col gap-1 overflow-y-auto p-0;
}

.word-column__item[b-jd4div1y7d] {
    @apply flex items-center gap-3 rounded-lg border px-3 py-2;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.word-column__count[b-jd4div1y7d] {
    @apply shrink-0 rounded-full border px-2.5 py-0.5 text-sm font-semibold tabular-nums;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.word-column__total[b-jd4div1y7d] {
    @apply text-sm font-medium tabular-nums;

    color: color-mix(in srgb, var(--app-text) 72%, transparent);
}
/* /DashboardApp/Components/Containers/ViewModeContainer.razor.rz.scp.css */
.view-mode-button[b-vpo1qcmk3d] {
    @apply inline-flex h-14 w-14 cursor-pointer items-center justify-center rounded-[0.9rem] transition-colors;
}

.view-mode-button--active[b-vpo1qcmk3d] {
    background-color: var(--app-surface);
    color: var(--app-button-go);
}

.view-mode-button--inactive[b-vpo1qcmk3d] {
    background-color: transparent;
    color: color-mix(
            in srgb,
            var(--app-text) 45%,
            transparent
    );
}
/* /DashboardApp/Components/Forms/DashboardCheckbox.razor.rz.scp.css */
.dashboard-checkbox[b-o23ygbplo4] {
    @apply flex items-start gap-3 rounded-xl border p-4 transition;

    background-color: color-mix(
            in srgb,
            var(--app-page-bg) 74%,
            var(--app-surface)
    );

    border-color: var(--app-border);
    color: var(--app-text);
}

.dashboard-checkbox--enabled[b-o23ygbplo4] {
    @apply cursor-pointer;
}

.dashboard-checkbox--disabled[b-o23ygbplo4] {
    @apply cursor-not-allowed opacity-60;
}

.dashboard-checkbox__input[b-o23ygbplo4] {
    @apply mt-1 h-5 w-5 shrink-0 rounded border outline-none transition focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50;

    accent-color: var(--app-button-go);
    border-color: var(--app-border);
    --tw-ring-color: color-mix(
            in srgb,
            var(--app-button-go) 28%,
            transparent
    );
}
/* /DashboardApp/Components/Forms/DashboardFileInput.razor.rz.scp.css */
.dashboard-file-input[b-uwoy77uojy] {
    @apply flex w-full cursor-pointer items-center gap-3 rounded-xl border px-3 py-2.5;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

.dashboard-file-input:hover[b-uwoy77uojy] {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
}

.dashboard-file-input__button[b-uwoy77uojy] {
    @apply inline-flex shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm font-semibold;

    background-color: var(--app-button-go);
    color: var(--app-text-invert);
}

.dashboard-file-input__name[b-uwoy77uojy] {
    @apply min-w-0 flex-1 truncate text-sm;

    color: color-mix(in srgb, var(--app-text) 70%, transparent);
}
/* /DashboardApp/Components/Forms/DashboardNumberInput.razor.rz.scp.css */
.dashboard-number-input[b-7m0d1xmyge] {
    @apply h-13 w-full rounded-xl border px-5 text-base outline-none transition focus:ring-2;

    background-color: color-mix(
            in srgb,
            var(--app-page-bg) 74%,
            var(--app-surface)
    );

    color: var(--app-text);
    border-color: var(--app-border);

    --tw-ring-color: color-mix(
            in srgb,
            var(--app-button-go) 28%,
            transparent
    );
}
/* /DashboardApp/Components/Forms/DashboardSearchBar.razor.rz.scp.css */
.dashboard-search-bar[b-1vc1jkqdhb] {
    @apply flex w-full flex-col gap-3 sm:flex-row sm:items-center;
}

.dashboard-search-bar__field[b-1vc1jkqdhb] {
    @apply relative flex min-w-0 flex-1 items-center;
}

.dashboard-search-bar__icon[b-1vc1jkqdhb] {
    @apply pointer-events-none absolute left-4 text-[1.25rem] leading-none;
    color: color-mix(in srgb, var(--app-text) 52%, transparent);
}

.dashboard-search-bar__input[b-1vc1jkqdhb] {
    @apply h-13 w-full rounded-xl border pl-12 pr-11 text-base outline-none transition-colors;
    background-color: var(--app-page-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

.dashboard-search-bar__input[b-1vc1jkqdhb]::placeholder {
    color: color-mix(in srgb, var(--app-text) 48%, transparent);
}

.dashboard-search-bar__input:focus[b-1vc1jkqdhb] {
    border-color: var(--app-button-go);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-button-go) 22%, transparent);
}

.dashboard-search-bar__input:disabled[b-1vc1jkqdhb] {
    @apply cursor-not-allowed opacity-60;
}

/* The native search clear affordance is unstyleable across browsers. */
.dashboard-search-bar__input[b-1vc1jkqdhb]::-webkit-search-cancel-button {
    @apply hidden;
}

/* Shown only when there is something to clear.
   Driven by :placeholder-shown -- true exactly while the input is empty -- rather than by a
   conditional in the markup, because rendering this component in response to typing rewrites the
   input's value from the server and loses keystrokes still in flight. Every caller sets a
   placeholder, which is what makes the pseudo-class meaningful here. */
.dashboard-search-bar__input:placeholder-shown ~ .dashboard-search-bar__clear[b-1vc1jkqdhb] {
    display: none;
}

.dashboard-search-bar__clear[b-1vc1jkqdhb] {
    @apply absolute right-3 inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-[1.1rem] leading-none transition-colors;
    color: color-mix(in srgb, var(--app-text) 62%, transparent);
}

.dashboard-search-bar__clear:hover[b-1vc1jkqdhb] {
    background-color: var(--app-nav-item-hover);
    color: var(--app-text);
}
/* /DashboardApp/Components/Forms/DashboardSelect.razor.rz.scp.css */
.dashboard-select[b-ruo9odc5a2] {
    @apply h-13 w-full rounded-xl border px-5 text-base outline-none transition focus:ring-2;

    background-color: color-mix(
            in srgb,
            var(--app-page-bg) 74%,
            var(--app-surface)
    );

    color: var(--app-text);
    border-color: var(--app-border);

    --tw-ring-color: color-mix(
            in srgb,
            var(--app-button-go) 28%,
            transparent
    );
}
/* /DashboardApp/Components/Forms/DashboardTagPicker.razor.rz.scp.css */
.tag-toggle[b-v9aob408d5] {
    @apply inline-flex cursor-pointer items-center rounded-full border px-3 py-1.5 text-sm font-medium transition-colors;

    background-color: color-mix(in srgb, var(--tag-color) 10%, var(--app-surface));
    border-color: color-mix(in srgb, var(--tag-color) 24%, var(--app-border));
    color: var(--app-text);
}

.tag-toggle:hover:not(:disabled)[b-v9aob408d5] {
    border-color: color-mix(in srgb, var(--tag-color) 55%, var(--app-border));
}

.tag-toggle:disabled[b-v9aob408d5] {
    @apply cursor-not-allowed opacity-50;
}

.tag-toggle--on[b-v9aob408d5] {
    background-color: color-mix(in srgb, var(--tag-color) 26%, var(--app-surface));
    border-color: color-mix(in srgb, var(--tag-color) 65%, var(--app-border));
    font-weight: 600;
}
/* /DashboardApp/Components/Forms/DashboardTextArea.razor.rz.scp.css */
.dashboard-text-area[b-bx4iaqlopt] {
    @apply min-h-32 w-full resize-y rounded-xl border px-5 py-4 text-base outline-none transition focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50;

    background-color: color-mix(
            in srgb,
            var(--app-page-bg) 74%,
            var(--app-surface)
    );

    color: var(--app-text);
    border-color: var(--app-border);

    --tw-ring-color: color-mix(
            in srgb,
            var(--app-button-go) 28%,
            transparent
    );
}
/* /DashboardApp/Components/Forms/DashboardTextInput.razor.rz.scp.css */
.dashboard-text-input[b-o0l5j61ro6] {
    @apply h-13 w-full rounded-xl border px-5 text-base outline-none transition focus:ring-2;

    background-color: color-mix(
            in srgb,
            var(--app-page-bg) 74%,
            var(--app-surface)
    );

    color: var(--app-text);
    border-color: var(--app-border);

    --tw-ring-color: color-mix(
            in srgb,
            var(--app-button-go) 28%,
            transparent
    );
}
/* /DashboardApp/Components/Header.razor.rz.scp.css */
.mobile-drawer[b-lkox69ywsa] {
    @apply fixed inset-y-0 left-0 z-50 w-[85vw] max-w-[22rem] transform transition-transform duration-300 ease-out;
}

.mobile-drawer--open[b-lkox69ywsa] {
    @apply translate-x-0;
}

.mobile-drawer--closed[b-lkox69ywsa] {
    @apply -translate-x-full;
}
/* /DashboardApp/Components/Lists/SortableList.razor.rz.scp.css */
.sortable-list[b-ygdpua0clp] {
    @apply flex flex-col gap-4;
}

.sortable-list__toolbar[b-ygdpua0clp] {
    @apply flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between;
}

.sortable-list__subtitle[b-ygdpua0clp] {
    @apply mt-1 text-sm;

    color: color-mix(in srgb, var(--app-text) 68%, transparent);
}

.sortable-list__pending[b-ygdpua0clp] {
    @apply flex items-center gap-2 rounded-xl border px-4 py-3 text-sm;

    background-color: color-mix(in srgb, var(--app-button-go) 10%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 30%, var(--app-border));
    color: var(--app-text);
}

/* The JS reads this gap to work out where each row's slot begins, so it has to
   be a real gap and not margins on the items. */
.sortable-list__items[b-ygdpua0clp] {
    @apply flex list-none flex-col gap-2 p-0;
}

.sortable-list__item[b-ygdpua0clp] {
    @apply flex items-center gap-4 rounded-xl border px-4 py-3;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.sortable-list__item--interactive[b-ygdpua0clp] {
    @apply cursor-pointer transition-colors;
}

.sortable-list__item--interactive:hover[b-ygdpua0clp] {
    background-color: color-mix(in srgb, var(--app-text) 5%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-text) 22%, var(--app-border));
}

.sortable-list__item--interactive:focus-visible[b-ygdpua0clp] {
    @apply outline-none;

    border-color: var(--app-button-go);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-button-go) 35%, transparent);
}

/* Only while a drag is live, so the rows sliding out of the way are animated
   and nothing transitions during an ordinary render. */
.sortable-list__items.is-sorting .sortable-list__item[b-ygdpua0clp] {
    @apply transition-transform duration-150 ease-out;

    will-change: transform;
}

/* The row under the pointer tracks it exactly. A transition here would leave
   it trailing behind the cursor. */
.sortable-list__items.is-sorting .sortable-list__item.is-dragging[b-ygdpua0clp] {
    @apply relative z-10 transition-none;

    border-color: var(--app-button-go);
    box-shadow: 0 12px 28px rgb(0 0 0 / 0.18);
}

.sortable-list__items.is-sorting[b-ygdpua0clp] {
    /* Without this a drag that starts on the grip can still select the text of
       every row it passes over. */
    @apply select-none;
}

.sortable-list__grip[b-ygdpua0clp] {
    @apply -ml-1 inline-flex h-9 w-6 shrink-0 cursor-grab items-center justify-center rounded-md text-xl transition-colors;

    /* Claims the gesture from the browser's own scrolling on touch. */
    touch-action: none;
    /* Same fade as the outline's grip, and for the same reason: below
       this it stops clearing 3:1 against the light page. */
    color: color-mix(in srgb, var(--app-text) 55%, transparent);
}

.sortable-list__grip:hover:not(:disabled)[b-ygdpua0clp] {
    background-color: color-mix(in srgb, var(--app-text) 8%, transparent);
    color: var(--app-text);
}

.sortable-list__grip:focus-visible[b-ygdpua0clp] {
    @apply outline-none;

    background-color: color-mix(in srgb, var(--app-text) 8%, transparent);
    color: var(--app-text);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-button-go) 35%, transparent);
}

.sortable-list__grip:disabled[b-ygdpua0clp] {
    @apply cursor-not-allowed opacity-40;
}

.sortable-list__items.is-sorting .sortable-list__grip[b-ygdpua0clp] {
    @apply cursor-grabbing;
}

.sortable-list__number[b-ygdpua0clp] {
    @apply inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border text-sm font-semibold;

    background-color: color-mix(in srgb, var(--app-button-go) 14%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 28%, var(--app-border));
    color: var(--app-button-go);
}

.sortable-list__actions[b-ygdpua0clp] {
    @apply flex shrink-0 flex-wrap items-center justify-end gap-2;
}

@media (prefers-reduced-motion: reduce) {
    .sortable-list__items.is-sorting .sortable-list__item[b-ygdpua0clp] {
        @apply transition-none;
    }
}
/* /DashboardApp/Components/Modals/Cms/AccessCodeFormModal.razor.rz.scp.css */
.access-code-display[b-41f36jn9d9] {
    @apply inline-flex items-center rounded-xl border px-5 py-3 text-2xl font-semibold tracking-[0.12em];

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
    color: var(--app-button-go);
}
/* /DashboardApp/Components/Modals/Cms/AddAnimationModal.razor.rz.scp.css */
.animation-preview[b-hmvm9yt2ta] {
    @apply w-full overflow-hidden rounded-xl border;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
}

.animation-preview iframe[b-hmvm9yt2ta] {
    @apply w-full;
    aspect-ratio: 16 / 9;
    border: 0;
}
/* /DashboardApp/Components/Modals/Cms/MultipleChoiceQuestionModal.razor.rz.scp.css */
.mc-option[b-2zt338cif9] {
    @apply flex items-center gap-3;
}

.mc-option__mark[b-2zt338cif9] {
    @apply inline-flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-lg border transition-colors;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
    color: color-mix(in srgb, var(--app-text) 55%, transparent);
}

.mc-option__mark:hover[b-2zt338cif9] {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
}

.mc-option__mark--on[b-2zt338cif9] {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
    color: var(--app-button-go);
}

.mc-option__letter[b-2zt338cif9] {
    @apply w-4 shrink-0 text-sm font-semibold;

    color: color-mix(in srgb, var(--app-text) 55%, transparent);
}
/* /DashboardApp/Components/Modals/Cms/RichTextEditorModal.razor.rz.scp.css */
.rich-text-preview[b-wa0e462exc] {
    @apply max-h-[26rem] overflow-y-auto rounded-xl border p-5;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}
/* /DashboardApp/Components/Modals/Organization/AddMembersModal.razor.rz.scp.css */
.cohort-option[b-qu70mjc3ux] {
    @apply flex gap-4 rounded-xl border p-4 transition;
}

.cohort-option--selected[b-qu70mjc3ux] {
    @apply cursor-pointer border-[color:var(--app-button-go)] hover:brightness-95;
}

.cohort-option--unselected[b-qu70mjc3ux] {
    @apply cursor-pointer border-[color:var(--app-border)] hover:brightness-95;
}

.cohort-option--disabled[b-qu70mjc3ux] {
    @apply cursor-not-allowed border-[color:var(--app-border)] opacity-50;
}

.cohort-option-icon[b-qu70mjc3ux] {
    @apply inline-flex h-10 w-10 items-center justify-center rounded-full;
}

.cohort-option-icon--selected[b-qu70mjc3ux] {
    background-color: color-mix(
            in srgb,
            var(--app-button-go) 14%,
            var(--app-surface)
    );

    color: var(--app-button-go);
}

.cohort-option-icon--unselected[b-qu70mjc3ux] {
    background-color: color-mix(
            in srgb,
            var(--app-page-bg) 70%,
            var(--app-surface)
    );

    color: color-mix(
            in srgb,
            var(--app-text) 62%,
            transparent
    );
}
/* /DashboardApp/Components/Modals/Organization/SelectCohortModal.razor.rz.scp.css */
.cohort-button[b-qtqgykkuh2] {
    @apply w-full rounded-xl border p-4 text-left transition hover:brightness-95;

    color: var(--app-text);
}

.cohort-button--selected[b-qtqgykkuh2] {
    background-color: color-mix(
            in srgb,
            var(--app-button-go) 8%,
            var(--app-surface)
    );

    border-color: var(--app-button-go);
}

.cohort-button--unselected[b-qtqgykkuh2] {
    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.cohort-icon[b-qtqgykkuh2] {
    @apply inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-full;

    color: var(--app-button-go);
}

.cohort-icon--selected[b-qtqgykkuh2] {
    background-color: color-mix(
            in srgb,
            var(--app-button-go) 18%,
            var(--app-surface)
    );
}

.cohort-icon--unselected[b-qtqgykkuh2] {
    background-color: color-mix(
            in srgb,
            var(--app-button-go) 10%,
            var(--app-surface)
    );
}

.cohort-icon__glyph[b-qtqgykkuh2] {
    @apply text-[1.35rem] leading-none;
}
/* /DashboardApp/Components/Modals/TutorialVideoModal.razor.rz.scp.css */
.tutorial-video[b-b6qfszo2au] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0.75rem;
    background-color: #000;
}

/* The player sets width and height attributes on its iframe; these win over
   them, which is what keeps the video responsive inside the modal. */
.tutorial-video[b-b6qfszo2au]  iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* /DashboardApp/Components/Nav.razor.rz.scp.css */
.dashboard-nav[b-zeoa89i9v9] {
    @apply flex w-full;
}

.dashboard-nav--mobile[b-zeoa89i9v9] {
    @apply flex-col items-stretch gap-3;
}

/* Tighter than it once was: the nav now carries every area the user can reach,
   not just the teaching ones, so entries have to fit across a row. */
.dashboard-nav--desktop[b-zeoa89i9v9] {
    @apply flex-wrap items-end gap-4;
}

/*  The two scopes. Entries inside a group keep the row's own spacing, so
    grouping changes nothing for an account that has only one of them.    */
.dashboard-nav__group[b-zeoa89i9v9] {
    @apply flex min-w-0 items-end gap-4;
}

.dashboard-nav--mobile .dashboard-nav__group[b-zeoa89i9v9] {
    @apply flex-col items-stretch gap-3;
}

/*  What separates "this organization" from "the whole site". The header's
    organization picker re-points the first group and leaves the second
    untouched, and without a seam there was nothing saying so.            */
.dashboard-nav__seam[b-zeoa89i9v9] {
    @apply mx-1 self-stretch;

    width: 1px;
    background-color: var(--app-border);
}

/*  Sideways on a stacked nav, where a vertical rule would separate nothing. */
.dashboard-nav--mobile .dashboard-nav__seam[b-zeoa89i9v9] {
    @apply mx-0 my-1 h-px w-full self-auto;
}
/* /DashboardApp/Components/Notifications/NotificationPreview.razor.rz.scp.css */
.notification-preview[b-xre3itqs0f] {
    @apply overflow-hidden rounded-xl border;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
    color: var(--app-text);
}

.notification-preview__header[b-xre3itqs0f] {
    @apply flex items-center gap-4 border-b px-6 py-5;

    border-color: var(--app-border);
    background-color: var(--app-surface);
}

.notification-preview__icon[b-xre3itqs0f] {
    @apply inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border;

    background-color: color-mix(in srgb, var(--app-button-go) 14%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 28%, var(--app-border));
    color: var(--app-button-go);
}

.notification-preview__body[b-xre3itqs0f] {
    @apply space-y-4 px-6 py-6 text-base leading-relaxed;
}

.notification-preview__emphasis[b-xre3itqs0f] {
    @apply text-2xl font-semibold;

    color: var(--app-button-go);
}

.notification-preview__rich-text[b-xre3itqs0f] {
    @apply rounded-lg border p-4;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.notification-preview__pin[b-xre3itqs0f] {
    @apply flex flex-wrap gap-2;
}

.notification-preview__pin-box[b-xre3itqs0f] {
    @apply inline-flex h-12 w-10 items-center justify-center rounded-lg border text-xl font-semibold;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.notification-preview__footer[b-xre3itqs0f] {
    @apply flex justify-center border-t px-6 py-5;

    border-color: var(--app-border);
    background-color: var(--app-surface);
}
/* /DashboardApp/Components/Organization/InvitationsCatalog.razor.rz.scp.css */
.invitation-state-badge[b-wl66zcupt2] {
    @apply inline-flex rounded-full border px-3 py-1 text-xs font-semibold;
}

.invitation-state-badge--issued[b-wl66zcupt2] {
    background-color: color-mix(
            in srgb,
            var(--app-button-standard) 12%,
            var(--app-surface)
    );

    color: var(--app-button-standard);

    border-color: color-mix(
            in srgb,
            var(--app-button-standard) 28%,
            var(--app-border)
    );
}

.invitation-state-badge--read[b-wl66zcupt2] {
    background-color: color-mix(
            in srgb,
            var(--app-button-go) 10%,
            var(--app-surface)
    );

    color: var(--app-button-go);

    border-color: color-mix(
            in srgb,
            var(--app-button-go) 24%,
            var(--app-border)
    );
}

.invitation-state-badge--accepted[b-wl66zcupt2] {
    background-color: color-mix(
            in srgb,
            var(--app-button-go) 14%,
            var(--app-surface)
    );

    color: var(--app-button-go);

    border-color: color-mix(
            in srgb,
            var(--app-button-go) 30%,
            var(--app-border)
    );
}

.invitation-state-badge--declined[b-wl66zcupt2] {
    background-color: color-mix(
            in srgb,
            var(--app-button-danger) 12%,
            var(--app-surface)
    );

    color: var(--app-button-danger);

    border-color: color-mix(
            in srgb,
            var(--app-button-danger) 28%,
            var(--app-border)
    );
}

.invitation-state-badge--expired[b-wl66zcupt2] {
    background-color: color-mix(
            in srgb,
            var(--app-text) 8%,
            var(--app-surface)
    );

    color: color-mix(
            in srgb,
            var(--app-text) 58%,
            transparent
    );

    border-color: color-mix(
            in srgb,
            var(--app-text) 18%,
            var(--app-border)
    );
}

.invitation-state-badge--default[b-wl66zcupt2] {
    background-color: color-mix(
            in srgb,
            var(--app-page-bg) 70%,
            var(--app-surface)
    );

    color: var(--app-text);
    border-color: var(--app-border);
}
/* /DashboardApp/Components/Panels/EnrollmentCodePanel.razor.rz.scp.css */
.enrollment-code[b-l30zxmn5rv] {
    @apply mt-1 inline-flex rounded-xl px-3 py-2 text-2xl font-semibold leading-none tracking-[0.04em] transition-all duration-200 md:text-3xl;

    background-color: transparent;
    color: var(--app-text);
    box-shadow: 0 0 0 0 transparent;
}

.enrollment-code--copied[b-l30zxmn5rv] {
    background-color: color-mix(
            in srgb,
            var(--app-button-standard) 12%,
            var(--app-surface)
    );

    box-shadow: 0 0 0 2px color-mix(
            in srgb,
            var(--app-button-standard) 18%,
            transparent
    );
}
/* /DashboardApp/Components/Panels/FilterPanel.razor.rz.scp.css */
.filter-panel-scroll-viewport[b-dlufjsv8q1] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.filter-panel-scroll[b-dlufjsv8q1] {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    padding: 0.125rem;
}

.filter-panel-scroll > *[b-dlufjsv8q1] {
    flex: 0 0 auto;
}

.filter-panel-scroll[b-dlufjsv8q1]::-webkit-scrollbar {
    display: none;
}

.filter-panel-scroll.is-dragging[b-dlufjsv8q1] {
    cursor: grabbing;
    scroll-behavior: auto;
}
/* /DashboardApp/Components/Panels/PassCodePanel.razor.rz.scp.css */
.pass-code[b-esfwnhiqur] {
    @apply mt-5 rounded-xl border px-4 py-3 text-center text-2xl font-semibold tracking-[0.06em] transition-all duration-200;

    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

.pass-code--copied[b-esfwnhiqur] {
    background-color: color-mix(
            in srgb,
            var(--app-button-standard) 12%,
            var(--app-surface)
    );

    border-color: color-mix(
            in srgb,
            var(--app-button-standard) 32%,
            var(--app-border)
    );

    box-shadow: 0 0 0 2px color-mix(
            in srgb,
            var(--app-button-standard) 18%,
            transparent
    );
}
/* /DashboardApp/Components/Widgets/DashboardNotice.razor.rz.scp.css */
.construction-notice-wrapper[b-x1xboq3qh4] {
    @apply pointer-events-none absolute right-4 top-6 z-20 hidden justify-end md:flex;
}

.construction-notice[b-x1xboq3qh4] {
    @apply pointer-events-auto inline-flex max-w-[28rem] items-start gap-3 rounded-xl border px-4 py-3 elevate-sm backdrop-blur-sm;
}

.construction-notice__icon[b-x1xboq3qh4] {
    @apply mt-0.5 text-[1.15rem] leading-none;
}
/* /DashboardApp/Components/Widgets/DashboardToaster.razor.rz.scp.css */
.dashboard-toast-container[b-r4oopjwc3e] {
    @apply pointer-events-none fixed bottom-4 right-4 z-[9999] flex w-[min(24rem,calc(100vw-2rem))] flex-col-reverse gap-3;
}

.dashboard-toast-icon[b-r4oopjwc3e] {
    @apply text-[1.2rem] leading-none;
}
/* /DashboardApp/Components/Widgets/EmptyState.razor.rz.scp.css */
.empty-state[b-yrrz5wtfq3] {
    @apply flex flex-col items-center justify-center rounded-[1.25rem] border border-dashed px-6 py-10 text-center;

    color: var(--app-text);
}

.empty-state--neutral[b-yrrz5wtfq3] {
    background-color: color-mix(
            in srgb,
            var(--app-page-bg) 62%,
            var(--app-surface)
    );

    border-color: var(--app-border);
}

.empty-state--warning[b-yrrz5wtfq3] {
    background-color: color-mix(
            in srgb,
            var(--app-button-warning) 7%,
            var(--app-surface)
    );

    border-color: color-mix(
            in srgb,
            var(--app-button-warning) 25%,
            var(--app-border)
    );
}

.empty-state-icon[b-yrrz5wtfq3] {
    @apply text-[2rem] leading-none;
}

.empty-state-icon--neutral[b-yrrz5wtfq3] {
    background-color: color-mix(
            in srgb,
            var(--app-button-standard) 14%,
            var(--app-surface)
    );

    color: var(--app-button-standard);
}

.empty-state-icon--warning[b-yrrz5wtfq3] {
    background-color: color-mix(
            in srgb,
            var(--app-button-warning) 14%,
            var(--app-surface)
    );

    color: var(--app-button-warning);
}
/* /DashboardApp/Components/Widgets/LoadingState.razor.rz.scp.css */
.ui-loading-shell[b-xjpodezox1] {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-width: 20rem;
    max-width: 32rem;
    padding: 1rem 1.15rem;
    border-radius: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--app-border) 80%, transparent);
    background-color: color-mix(in srgb, var(--app-surface) 88%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: var(--app-shadow-lg);
}

.ui-loading-icon[b-xjpodezox1] {
    display: inline-flex;
    height: 2.75rem;
    width: 2.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: color-mix(in srgb, var(--app-page-bg) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--app-border) 70%, transparent);
}

.ui-loading-title[b-xjpodezox1] {
    color: var(--app-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.ui-loading-subtitle[b-xjpodezox1] {
    margin-top: 0.2rem;
    color: color-mix(in srgb, var(--app-text) 62%, transparent);
    font-size: 0.92rem;
    line-height: 1.25rem;
}

.ui-loading-dots[b-xjpodezox1] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.25rem;
}

.ui-loading-dots span[b-xjpodezox1] {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 9999px;
    background-color: var(--app-button-go);
    opacity: 0.28;
    animation: ui-loading-dot-b-xjpodezox1 1.1s infinite ease-in-out;
}

.ui-loading-dots span:nth-child(2)[b-xjpodezox1] {
    animation-delay: 0.14s;
}

.ui-loading-dots span:nth-child(3)[b-xjpodezox1] {
    animation-delay: 0.28s;
}

.ui-loading-constellation[b-xjpodezox1],
.ui-loading-birds[b-xjpodezox1] {
    width: 1.5rem;
    height: 1.5rem;
}

.ui-loading-constellation line[b-xjpodezox1],
.ui-loading-constellation circle[b-xjpodezox1] {
    stroke: color-mix(in srgb, var(--app-button-go) 75%, white 25%);
    fill: color-mix(in srgb, var(--app-button-go) 75%, white 25%);
    stroke-width: 1.4;
    opacity: 0.8;
    animation: ui-loading-flicker-b-xjpodezox1 3.6s ease-in-out infinite;
}

.ui-loading-birds path[b-xjpodezox1] {
    fill: none;
    stroke: var(--app-button-go);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
    animation: ui-loading-drift-b-xjpodezox1 2.8s ease-in-out infinite;
}

.ui-loading-birds path:nth-child(2)[b-xjpodezox1] {
    animation-delay: 0.15s;
}

.ui-loading-birds path:nth-child(3)[b-xjpodezox1] {
    animation-delay: 0.3s;
}

@keyframes ui-loading-dot-b-xjpodezox1 {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.28;
    }
    40% {
        transform: translateY(-0.18rem);
        opacity: 1;
    }
}

@keyframes ui-loading-flicker-b-xjpodezox1 {
    0%, 100% {
        opacity: 0.55;
    }
    50% {
        opacity: 1;
    }
}

@keyframes ui-loading-drift-b-xjpodezox1 {
    0%, 100% {
        transform: translateX(0) translateY(0);
        opacity: 0.7;
    }
    50% {
        transform: translateX(0.12rem) translateY(-0.08rem);
        opacity: 1;
    }
}
/* /DashboardApp/Components/Widgets/OrganizationSelector.razor.rz.scp.css */
.organization-switcher[b-y2sjg1hazq] {
    @apply relative;
}

.organization-switcher--mobile[b-y2sjg1hazq] {
    @apply w-full min-w-0;
}

.organization-switcher--desktop[b-y2sjg1hazq] {
    @apply min-w-[21rem];
}

.organization-switcher-select[b-y2sjg1hazq] {
    @apply h-16 w-full appearance-none rounded-xl border pb-2 pt-6 text-base font-semibold outline-none transition-colors;
}

.organization-switcher-select--mobile[b-y2sjg1hazq] {
    @apply min-w-0 pl-4;
}

.organization-switcher-select--desktop[b-y2sjg1hazq] {
    @apply min-w-[21rem] pl-5;
}

.organization-switcher-select--switchable[b-y2sjg1hazq] {
    @apply cursor-pointer pr-16 disabled:cursor-not-allowed disabled:opacity-60;
}

.organization-switcher-select--mobile.organization-switcher-select--locked[b-y2sjg1hazq] {
    @apply cursor-default pr-4 disabled:opacity-100;
}

.organization-switcher-select--desktop.organization-switcher-select--locked[b-y2sjg1hazq] {
    @apply cursor-default pr-5 disabled:opacity-100;
}
/* /DashboardApp/Components/Widgets/Pagination.razor.rz.scp.css */
/*  Named `dashboard-pagination`, not `pagination`.

    Every .razor.css in the project is compiled twice: scoped by Blazor into
    WebModules.styles.css, and unscoped into the Tailwind bundle -- and the bundle is
    loaded on every page of both apps. A block called `.pagination` therefore reaches
    the learner app's pager too, which is bootstrap's `.pagination` and expects none of
    this. That is exactly what happened when the two bundles became one.

    Keep component stylesheets on a name no other app could plausibly use. */

.dashboard-pagination[b-iok2wuvgbl] {
    @apply flex w-full flex-col gap-3 rounded-xl border p-3 sm:flex-row sm:items-center sm:justify-between;

    background-color: var(--app-surface);
    border-color: var(--app-border);
}

.dashboard-pagination__summary[b-iok2wuvgbl] {
    @apply text-center text-sm font-medium sm:text-left;

    color: color-mix(
            in srgb,
            var(--app-text) 68%,
            transparent
    );
}

.dashboard-pagination__summary-value[b-iok2wuvgbl] {
    @apply font-bold;

    color: var(--app-text);
}

.dashboard-pagination__controls[b-iok2wuvgbl] {
    @apply flex min-w-0 items-center justify-center gap-2;
}

.dashboard-pagination__button[b-iok2wuvgbl] {
    @apply inline-flex h-10 items-center justify-center gap-2 rounded-xl border text-sm font-semibold transition duration-150;
    @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
    @apply disabled:cursor-not-allowed disabled:opacity-50;

    background-color: color-mix(
            in srgb,
            var(--app-text) 2%,
            var(--app-surface)
    );

    border-color: var(--app-border);
    color: var(--app-text);
}

.dashboard-pagination__button--navigation[b-iok2wuvgbl] {
    @apply min-w-10 px-3 sm:min-w-28;
}

.dashboard-pagination__button--page[b-iok2wuvgbl] {
    @apply size-10 shrink-0 p-0;
}

.dashboard-pagination__button:hover:not(:disabled):not(.dashboard-pagination__button--active)[b-iok2wuvgbl] {
    @apply -translate-y-px;

    background-color: color-mix(
            in srgb,
            var(--app-button-standard) 8%,
            var(--app-surface)
    );

    border-color: color-mix(
            in srgb,
            var(--app-button-standard) 35%,
            var(--app-border)
    );

    color: var(--app-button-standard);
}

.dashboard-pagination__button--active[b-iok2wuvgbl] {
    background-color: color-mix(
            in srgb,
            var(--app-button-standard) 16%,
            var(--app-surface)
    );

    border-color: color-mix(
            in srgb,
            var(--app-button-standard) 55%,
            var(--app-border)
    );

    color: var(--app-button-standard);

    box-shadow:
            0 0 0 1px
            color-mix(
                    in srgb,
                    var(--app-button-standard) 18%,
                    transparent
            );
}

.dashboard-pagination__button:focus-visible[b-iok2wuvgbl] {
    outline-color: color-mix(
            in srgb,
            var(--app-button-standard) 70%,
            transparent
    );
}

.dashboard-pagination__button:disabled[b-iok2wuvgbl] {
    transform: none;
}

.dashboard-pagination__mobile-page[b-iok2wuvgbl] {
    @apply min-w-16 text-center text-sm font-bold;

    color: color-mix(
            in srgb,
            var(--app-text) 70%,
            transparent
    );
}
/* /DashboardApp/Components/Widgets/ThemeSwitcher.razor.rz.scp.css */
.dashboard-theme-button[b-g9192iepbv] {
    @apply inline-flex h-full cursor-pointer items-center justify-center gap-3 border-r px-6 text-base font-medium transition-colors last:border-r-0;

    background-color: var(--app-surface);
    color: color-mix(
            in srgb,
            var(--app-text) 78%,
            transparent
    );
    border-right-color: var(--app-border);
}

.dashboard-theme-button[aria-pressed="true"][b-g9192iepbv] {
    background-color: var(--app-page-bg);
    color: var(--app-text);
}

.dashboard-theme-icon[b-g9192iepbv] {
    width: 1.55rem;
    height: 1.55rem;
    flex-shrink: 0;
    overflow: visible;
}

.dashboard-theme-sun-rays[b-g9192iepbv],
.dashboard-theme-sun-core[b-g9192iepbv],
.dashboard-theme-moon-shape[b-g9192iepbv] {
    transform-origin: 12px 12px;
}

.dashboard-theme-icon-active .dashboard-theme-sun-rays[b-g9192iepbv] {
    animation: dashboard-theme-sun-rays-sway-b-g9192iepbv 3.8s ease-in-out infinite;
}

.dashboard-theme-icon-active .dashboard-theme-sun-core[b-g9192iepbv] {
    animation: dashboard-theme-sun-core-breathe-b-g9192iepbv 3.8s ease-in-out infinite;
}

.dashboard-theme-icon-active .dashboard-theme-moon-shape[b-g9192iepbv] {
    animation: dashboard-theme-moon-pulse-b-g9192iepbv 2.8s ease-in-out infinite;
}

@keyframes dashboard-theme-sun-rays-sway-b-g9192iepbv {
    0%,
    100% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

@keyframes dashboard-theme-sun-core-breathe-b-g9192iepbv {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.92;
    }
}

@keyframes dashboard-theme-moon-pulse-b-g9192iepbv {
    0%,
    100% {
        opacity: 0.72;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-theme-icon-active .dashboard-theme-sun-rays[b-g9192iepbv],
    .dashboard-theme-icon-active .dashboard-theme-sun-core[b-g9192iepbv],
    .dashboard-theme-icon-active .dashboard-theme-moon-shape[b-g9192iepbv] {
        animation: none;
    }
}
/* /DashboardApp/Components/Widgets/WarningStrip.razor.rz.scp.css */
.notice-strip[b-sjl0guolf4] {
    @apply flex items-center gap-3 rounded-xl border px-4 py-3 text-sm;
}

.notice-strip__icon[b-sjl0guolf4] {
    @apply text-[1.15rem] leading-none;
}
/* /DashboardApp/Pages/Class/ClassManageContent.razor.rz.scp.css */
.content-block-badge[b-sj9rt2pebp] {
    @apply inline-flex h-10 w-10 items-center justify-center rounded-full border text-sm font-bold;
}

.content-block-badge--module[b-sj9rt2pebp] {
    background-color: color-mix(
            in srgb,
            var(--app-button-go) 14%,
            var(--app-surface)
    );

    color: var(--app-button-go);

    border-color: color-mix(
            in srgb,
            var(--app-button-go) 28%,
            var(--app-border)
    );
}

.content-block-badge--evaluation[b-sj9rt2pebp] {
    background-color: color-mix(
            in srgb,
            var(--app-button-danger) 12%,
            var(--app-surface)
    );

    color: var(--app-button-danger);

    border-color: color-mix(
            in srgb,
            var(--app-button-danger) 28%,
            var(--app-border)
    );
}

.content-block-badge--default[b-sj9rt2pebp] {
    background-color: color-mix(
            in srgb,
            var(--app-text) 8%,
            var(--app-surface)
    );

    color: color-mix(
            in srgb,
            var(--app-text) 68%,
            transparent
    );

    border-color: var(--app-border);
}

/* /DashboardApp/Pages/Cms/CourseVocabularyPage.razor.rz.scp.css */
.vocabulary-column[b-ukmx85ak5u] {
    @apply flex min-w-0 flex-col gap-3 rounded-xl border p-4;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
}

.vocabulary-column__heading[b-ukmx85ak5u] {
    @apply text-sm font-semibold uppercase tracking-[0.1em];

    color: color-mix(in srgb, var(--app-text) 58%, transparent);
}

.vocabulary-list[b-ukmx85ak5u] {
    @apply flex max-h-[26rem] list-none flex-col gap-1 overflow-y-auto p-0;
}

.vocabulary-item[b-ukmx85ak5u] {
    @apply flex w-full cursor-pointer items-center gap-3 rounded-lg border px-3 py-2 text-left text-base no-underline transition-colors;

    background-color: var(--app-surface);
    border-color: var(--app-border);
    color: var(--app-text);
}

.vocabulary-item:hover[b-ukmx85ak5u] {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
}

.vocabulary-item--selected[b-ukmx85ak5u] {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
    font-weight: 600;
}

.vocabulary-item__number[b-ukmx85ak5u] {
    @apply inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-xs font-semibold;

    background-color: color-mix(in srgb, var(--app-button-go) 14%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 28%, var(--app-border));
    color: var(--app-button-go);
}
/* /DashboardApp/Pages/Cms/LessonPanelPage.razor.rz.scp.css */
/*  The activity type medallion. Line Awesome rather than an image, so it
    takes its colour from the theme like every other icon in the tree and
    the wizard -- and so one activity does not have two different icons
    depending on which screen you are looking at.                        */
.activity-type-icon[b-thu771ow10] {
    @apply inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border text-[1.15rem] leading-none;

    background-color: color-mix(in srgb, var(--app-button-go) 12%, var(--app-surface));
    border-color: color-mix(in srgb, var(--app-button-go) 26%, var(--app-border));
    color: var(--app-button-go);
}
/* /DashboardApp/Pages/Cms/WordPanelPage.razor.rz.scp.css */
.word-list[b-nz72kvu3ep] {
    @apply flex list-none flex-col gap-2 p-0;
}

.word-list__item[b-nz72kvu3ep] {
    @apply flex flex-wrap items-center gap-4 rounded-xl border px-4 py-3;

    background-color: var(--app-page-bg);
    border-color: var(--app-border);
}
/* /DashboardApp/Pages/Dev/RichTextPlaygroundPage.razor.rz.scp.css */
/*  Raw output panels for the rich text workbench.

    Monospaced and scrollable rather than wrapped, because the point is to read
    the structure -- indentation carries meaning in the document JSON, and a
    soft-wrapped HTML string is unreadable.                                    */

.dev-output[b-8pjed1x045] {
    @apply max-h-[34rem] overflow-auto rounded-xl border p-4 font-mono text-xs leading-relaxed;

    background-color: var(--app-strong-surface);
    border-color: var(--app-border);
    color: var(--app-text);

    /* Long attribute values must scroll, not reflow the panel. */
    white-space: pre;
    tab-size: 2;
}

.dev-output__label[b-8pjed1x045] {
    @apply mb-2 text-sm font-semibold uppercase tracking-[0.12em];

    color: color-mix(in srgb, var(--app-text) 62%, transparent);
}
/* /LearnerApp/Components/Activities/AnagramActivity.razor.rz.scp.css */
/*
    Scoped styling for the anagram activity.

    Three things constrain what can be written here, and all three are easy to trip over:

    1.  This file is ALSO globbed into Styles/main.css by tools/gen_razor_css_imports.sh and compiled, unscoped, into
        wwwroot/css/compiled/app.css, which the dashboard loads. Every selector below is therefore namespaced under
        .ang-* so the unscoped copy cannot match anything outside this component. No bare element selectors.
    2.  No ::deep and no Tailwind @apply -- the first is invalid CSS that Tailwind's parser rejects, the second never
        gets expanded in the scoped copy, which is the copy that actually does the work on the legacy layout.
    3.  No :root. Blazor rewrites it to :root[b-xxxxx], which matches nothing. The custom properties live on
        .ang-activity instead, which is fine because they inherit down the whole component.

    Every colour comes from the global theme tokens in wwwroot/css/scss/utilities/_variables.scss, so the activity
    follows the sunset / moose-cree / nuu-wee-ya themes instead of ignoring them the way the old stylesheet did.
*/

.ang-activity[b-39htlpr73w] {
    /* Sizing */
    --ang-tile-max: 3.25rem;
    --ang-tile-gap: clamp(0.15rem, 0.5vw, 0.35rem);
    --ang-radius: 0.5rem;
    --ang-lift: 0.1875rem;
    --ang-speed: 160ms;

    /* Surfaces */
    --ang-card: var(--light-background-color-lighter);
    --ang-card-active: var(--neutral-150);
    --ang-card-done: color-mix(in srgb, var(--success-color) 16%, var(--neutral-100));
    --ang-card-revealed: color-mix(in srgb, var(--secondary-color) 20%, var(--neutral-100));

    /* Tiles */
    --ang-tile-face: var(--neutral-300);
    --ang-tile-edge: var(--neutral-400);
    --ang-ink: var(--dark-text-color);
    --ang-line: color-mix(in srgb, var(--muted-text-color) 45%, transparent);
    --ang-accent: var(--secondary-color);

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    /*
        A single row that is exactly the available height. This has to be a definite height, not a max-height: a
        percentage max-height against a content-sized parent never resolves, so the board grew past the viewport and
        the flex centering on .container-centered pushed the overflow up over the fixed progress bar. With a definite
        row the board clips and scrolls inside itself instead.
    */
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(0.75rem, 2vw, 2rem);
    box-sizing: border-box;
    width: min(100%, 76rem);
    height: 100%;
    padding: 0 clamp(0.5rem, 1.5vw, 1.25rem) 1rem;
    outline: none;
}

/*
    Row one of the board column. The bar brings its own 5vh/3vh margins, which is where the header spacing comes from,
    so this element only has to centre it. The 20px cancels the bar's own margin-left (_progress.scss:11), which would
    otherwise leave it sitting ten pixels right of true centre.
*/
.ang-progress[b-39htlpr73w] {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    justify-content: center;
    margin-right: 20px;
}

/*
    The board is the only thing that scrolls. That keeps arrow-key presses from scrolling the page out from under the
    learner, which matters because the arrow keys are bound to moving the cursor between letter slots.
*/
.ang-board[b-39htlpr73w] {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    align-content: start;
    gap: clamp(0.5rem, 1.2vw, 1rem);
    /* Must stretch to the row rather than to its content, otherwise there is nothing for overflow to act on. */
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
    /* Reserves the scrollbar track so cards do not jump sideways the moment a tenth word makes the board scroll. */
    scrollbar-gutter: stable;
    padding-right: 0.25rem;
}

/* Keyboard focus lives on the board as a whole, so that is where it has to be visible. */
.ang-activity:focus-visible[b-39htlpr73w] {
    outline: 0.1875rem solid var(--ang-accent);
    outline-offset: 0.375rem;
    border-radius: 0.75rem;
}


/* ------------------------------------------------------------------ */
/*  Word card                                                          */
/* ------------------------------------------------------------------ */

.ang-word[b-39htlpr73w] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    /* Lets the tiles size themselves against the card rather than the viewport, so a 4-letter word and a
       16-letter word both look deliberate. */
    container-type: inline-size;
    padding: 0.7rem 0.9rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--muted-text-color) 22%, transparent);
    border-radius: 0.75rem;
    background-color: var(--ang-card);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity var(--ang-speed) ease,
                transform var(--ang-speed) ease,
                box-shadow var(--ang-speed) ease,
                background-color 240ms ease;
}

/* A rail down the side of the focused card. Colour alone was doing all the work before, and doing it badly. */
.ang-word[b-39htlpr73w]::before {
    content: "";
    position: absolute;
    inset: 0.6rem auto 0.6rem 0;
    width: 0.25rem;
    border-radius: 0.25rem;
    background-color: transparent;
    transition: background-color var(--ang-speed) ease;
}

.ang-word--active[b-39htlpr73w] {
    opacity: 1;
    cursor: default;
    background-color: var(--ang-card-active);
    border-color: color-mix(in srgb, var(--ang-accent) 55%, transparent);
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--core-color) 18%, transparent);
    transform: translateY(-0.125rem);
}

.ang-word--active[b-39htlpr73w]::before {
    background-color: var(--ang-accent);
}

.ang-word--done[b-39htlpr73w],
.ang-word--revealed[b-39htlpr73w] {
    opacity: 1;
    cursor: default;
}

.ang-word--done[b-39htlpr73w] {
    background-color: var(--ang-card-done);
    border-color: color-mix(in srgb, var(--success-color) 45%, transparent);
}

.ang-word--revealed[b-39htlpr73w] {
    background-color: var(--ang-card-revealed);
    border-color: color-mix(in srgb, var(--secondary-color) 45%, transparent);
}

.ang-word--wrong[b-39htlpr73w] {
    animation: ang-shake-b-39htlpr73w 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

.ang-word__head[b-39htlpr73w] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--muted-text-color);
}

.ang-word__num[b-39htlpr73w] {
    display: inline-grid;
    place-items: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.4rem;
    border-radius: 0.9rem;
    background-color: color-mix(in srgb, var(--muted-text-color) 18%, transparent);
    font-weight: 700;
    color: var(--ang-ink);
}

.ang-word--active .ang-word__num[b-39htlpr73w] {
    background-color: var(--ang-accent);
    color: var(--white-text-color);
}

.ang-word__status[b-39htlpr73w] {
    font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------------ */
/*  The two rows of tiles                                              */
/* ------------------------------------------------------------------ */

/*
    Both rows get the same column count (--ang-len, set inline per word) and the same track sizing, which is the whole
    trick: the answer row and the scramble row line up column for column. The old markup used unsized inline spans, so
    they never did.
*/
.ang-slots[b-39htlpr73w],
.ang-pool[b-39htlpr73w] {
    display: grid;
    grid-template-columns: repeat(var(--ang-len), minmax(0, 1fr));
    gap: var(--ang-tile-gap);
    width: 100%;
    max-width: calc(var(--ang-len) * (var(--ang-tile-max) + var(--ang-tile-gap)));
    margin-inline: auto;
}

.ang-pool[b-39htlpr73w] {
    margin-top: 0.3rem;
}

.ang-slot[b-39htlpr73w],
.ang-tile[b-39htlpr73w] {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: var(--ang-radius);
    /* Deliberately not Courier: it carries no syllabics glyphs, and the grid already guarantees even columns. */
    font-family: inherit;
    /* Sized against the card via cqi so short and long words both fill their tiles; the floor is what a 10-letter
       word lands on, and it still has to be comfortably readable. */
    font-size: clamp(1.15rem, 4.4cqi, 2rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ang-ink);
    text-transform: none;
    user-select: none;
}

/*
    The element reset sets `button:focus { outline: 1px dotted }`, and these tiles are buttons. Starting a drag
    mouses down on the tile, which focuses it, which paints that dark dotted ring -- and the browser's drag image is a
    snapshot of the element, ring included. That is the black border around a dragged letter. Killing it here and
    re-declaring the ring on :focus-visible below keeps the keyboard affordance without the mouse artefact.
*/
.ang-slot:focus[b-39htlpr73w],
.ang-tile:focus[b-39htlpr73w] {
    outline: none;
}

/* Fades the letter left behind while its copy is under the cursor. */
.ang-dragging[b-39htlpr73w] {
    opacity: 0.3;
}

/* --- scramble pool: tiles you can pick up --- */

.ang-tile[b-39htlpr73w] {
    border: 1px solid var(--ang-tile-edge);
    background-color: var(--ang-tile-face);
    box-shadow: 0 var(--ang-lift) 0 0 var(--ang-tile-edge);
    cursor: pointer;
    transition: transform 120ms ease,
                box-shadow 120ms ease,
                background-color var(--ang-speed) ease;
}

.ang-word--active .ang-tile:hover[b-39htlpr73w] {
    transform: translateY(-0.125rem);
    background-color: color-mix(in srgb, var(--ang-accent) 18%, var(--ang-tile-face));
    box-shadow: 0 calc(var(--ang-lift) + 0.125rem) 0 0 var(--ang-tile-edge);
}

/* Presses the tile down onto its own shadow. */
.ang-word--active .ang-tile:active[b-39htlpr73w] {
    transform: translateY(var(--ang-lift));
    box-shadow: none;
}

.ang-tile:focus-visible[b-39htlpr73w] {
    outline: 0.1875rem solid var(--ang-accent);
    outline-offset: 0.125rem;
}

/* Holds the grid cell open so lifting a tile out never reflows the row underneath the learner's finger. */
.ang-tile--empty[b-39htlpr73w] {
    visibility: hidden;
}

/* --- answer row: slots you drop into --- */

.ang-slot[b-39htlpr73w] {
    border: 0.125rem dashed var(--ang-line);
    background-color: transparent;
    cursor: pointer;
    transition: border-color 140ms ease,
                background-color var(--ang-speed) ease,
                box-shadow 140ms ease;
}

.ang-slot--filled[b-39htlpr73w] {
    border-style: solid;
    border-color: var(--ang-tile-edge);
    background-color: var(--neutral-100);
    animation: ang-pop-b-39htlpr73w 200ms ease-out;
}

.ang-slot--hinted[b-39htlpr73w] {
    border-style: solid;
    border-color: color-mix(in srgb, var(--info-color) 55%, transparent);
    background-color: color-mix(in srgb, var(--info-color) 22%, var(--neutral-100));
    cursor: not-allowed;
}

/* A space or hyphen in a multi-word phrase: shown, but never something to solve. */
.ang-slot--separator[b-39htlpr73w] {
    border-color: transparent;
    background-color: transparent;
    cursor: default;
}

/* The cursor. This is what makes click-a-slot-then-click-a-tile legible at a glance. */
.ang-word--active .ang-slot--active[b-39htlpr73w] {
    border-style: solid;
    border-color: var(--ang-accent);
    animation: ang-caret-b-39htlpr73w 1.6s ease-in-out infinite;
}

.ang-word--done .ang-slot[b-39htlpr73w],
.ang-word--revealed .ang-slot[b-39htlpr73w] {
    cursor: default;
}

.ang-word--done .ang-slot--filled[b-39htlpr73w] {
    border-color: color-mix(in srgb, var(--success-color) 60%, transparent);
    background-color: color-mix(in srgb, var(--success-color) 26%, var(--neutral-100));
}

.ang-word--revealed .ang-slot--filled[b-39htlpr73w] {
    border-color: color-mix(in srgb, var(--secondary-color) 60%, transparent);
    background-color: color-mix(in srgb, var(--secondary-color) 26%, var(--neutral-100));
}


/* ------------------------------------------------------------------ */
/*  Side rail: picture clue and controls                               */
/* ------------------------------------------------------------------ */

/*
    Sits in row two so it lines up with the top of the board rather than with the progress bar.

    Deliberately no overflow property. Setting overflow-y alone makes overflow-x compute from visible to auto, which
    turned every pixel of button shadow hanging past the edge into a stray horizontal scrollbar across the rail.
*/
.ang-rail[b-39htlpr73w] {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    /* Sizes to its content rather than stretching to the full board height. */
    align-self: start;
    gap: 0.85rem;
    width: clamp(12rem, 20vw, 16rem);
}

/*
    Controls are grouped by what they do to, and sat next to the thing they affect, instead of being one undifferentiated
    column of buttons. The hint control lives with the hint; the letter tools live together; Check stands alone.
*/
.ang-panel[b-39htlpr73w] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--muted-text-color) 20%, transparent);
    border-radius: 0.75rem;
    background-color: color-mix(in srgb, var(--neutral-100) 65%, transparent);
}

.ang-panel__label[b-39htlpr73w] {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-text-color);
}

/* Shuffle and Clear share a row: two light actions, equal weight, half the vertical run of the old stack. */
.ang-panel__row[b-39htlpr73w] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    /* Wide enough that the left button's 6px of shadow clears the right button. */
    gap: 0.65rem;
}

.ang-panel__spent[b-39htlpr73w] {
    margin: 0;
    font-size: 0.95rem;
    text-align: center;
    color: var(--muted-text-color);
}

.ang-rail__hint[b-39htlpr73w] {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    padding: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--muted-text-color) 18%, transparent);
    border-radius: 0.5rem;
    background-color: var(--neutral-100);
}

.ang-rail__hint img[b-39htlpr73w] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: ang-pop-b-39htlpr73w 260ms ease-out;
}

.ang-rail__hint-empty[b-39htlpr73w] {
    margin: 0;
    font-size: 1.05rem;
    text-align: center;
    color: var(--muted-text-color);
}

/*
    Two things in the shared button styles have to be undone here. `.btn, .button, button` sets margin-right: 5px
    globally (_buttons-general.scss:8), which on a width: 100% button pushes it 5px past its container; and the
    variants hang a `5px 4px 0 1px` shadow off the right and bottom, which the container has to leave room for rather
    than the button claiming it. Between them the controls were overhanging their panels and forcing a scrollbar.

    An icon beside each label also makes the control readable at a glance instead of by reading stacked words.
*/
.ang-btn[b-39htlpr73w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    /*
        The button box stops 6px short so that box + shadow together are exactly the container's content width. Trying
        to absorb the shadow in the container's padding instead left it landing on the border, because the shadow sits
        outside the border box and does not participate in layout at all.
    */
    width: calc(100% - 6px);
    min-width: 0;
    margin-right: 0;
    /* Matches the 4px + 1px spread of the shadow underneath, so stacked controls do not sit on each other. */
    margin-bottom: 5px;
    padding-inline: 0.5rem;
    /* Wrap a long label rather than letting it push the box past its container. */
    white-space: normal;
}

.ang-btn i[b-39htlpr73w] {
    font-size: 1.15em;
    line-height: 1;
}

/* The action that resolves the word, kept clear of the panels above it. */
.ang-btn--check[b-39htlpr73w] {
    margin-top: 0.15rem;
    padding-block: 0.55rem;
    font-size: 1.05rem;
    font-weight: 700;
}

/*
    Sat on the same panel surface as everything else in the rail. As bare text it was small olive type directly on the
    patterned tan background, which is where it became unreadable.
*/
.ang-rail__tip[b-39htlpr73w] {
    margin: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--muted-text-color) 20%, transparent);
    border-radius: 0.75rem;
    background-color: color-mix(in srgb, var(--neutral-100) 65%, transparent);
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: center;
    color: var(--ang-ink);
}

/* Sits at the foot of the rail, below the tip, as an aside to the puzzle rather than one of its controls. */
.ang-print-button[b-39htlpr73w] {
    margin-top: auto;
    white-space: nowrap;
}

.ang-print-button:disabled[b-39htlpr73w] {
    opacity: 0.55;
    cursor: not-allowed;
}


/* ------------------------------------------------------------------ */
/*  Live region                                                        */
/* ------------------------------------------------------------------ */

/*
    Announced to screen readers only. Sighted learners get the same information from the tile animation, the card
    status line and the sound effects.
*/
.ang-live[b-39htlpr73w] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ------------------------------------------------------------------ */
/*  Motion                                                             */
/* ------------------------------------------------------------------ */

/* Keyframe names are global even in a scoped stylesheet, hence the prefix. */

@keyframes ang-pop-b-39htlpr73w {
    0% {
        transform: scale(0.72);
        opacity: 0;
    }

    60% {
        transform: scale(1.08);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

@keyframes ang-shake-b-39htlpr73w {
    10%, 90% { transform: translateX(-0.0625rem); }
    20%, 80% { transform: translateX(0.125rem); }
    30%, 50%, 70% { transform: translateX(-0.25rem); }
    40%, 60% { transform: translateX(0.25rem); }
}

@keyframes ang-caret-b-39htlpr73w {
    0%, 100% { box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--ang-accent) 38%, transparent); }
    50% { box-shadow: 0 0 0 0.3125rem color-mix(in srgb, var(--ang-accent) 12%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .ang-word[b-39htlpr73w],
    .ang-word[b-39htlpr73w]::before,
    .ang-tile[b-39htlpr73w],
    .ang-slot[b-39htlpr73w] {
        transition-duration: 0.01ms;
        animation: none;
    }

    .ang-word--active[b-39htlpr73w] {
        transform: none;
    }

    .ang-word--active .ang-tile:hover[b-39htlpr73w],
    .ang-word--active .ang-tile:active[b-39htlpr73w] {
        transform: none;
    }

    .ang-rail__hint img[b-39htlpr73w] {
        animation: none;
    }

    /* The cursor still has to be obvious without the pulse. */
    .ang-word--active .ang-slot--active[b-39htlpr73w] {
        box-shadow: 0 0 0 0.1875rem var(--ang-accent);
    }
}


/* ------------------------------------------------------------------ */
/*  Responsive                                                         */
/* ------------------------------------------------------------------ */

/* Tablets and short windows: the rail moves under the board and lays its controls out in a row. */
@media (max-width: 62rem) {
    .ang-activity[b-39htlpr73w] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        row-gap: 0.5rem;
    }

    .ang-progress[b-39htlpr73w],
    .ang-board[b-39htlpr73w] {
        grid-column: 1;
    }

    .ang-rail[b-39htlpr73w] {
        grid-column: 1;
        grid-row: 3;
        flex-direction: row;
        align-items: stretch;
        align-self: stretch;
        width: 100%;
    }

    /* The hint panel keeps its picture beside its button; the rest of the rail flows alongside it. */
    .ang-panel--hint[b-39htlpr73w] {
        flex: 0 1 auto;
        flex-direction: row;
        align-items: center;
    }

    .ang-panel--hint .ang-panel__label[b-39htlpr73w] {
        display: none;
    }

    .ang-rail__hint[b-39htlpr73w] {
        flex: 0 0 auto;
        width: 5.5rem;
    }

    .ang-panel[b-39htlpr73w] {
        flex: 1 1 auto;
        justify-content: center;
    }

    .ang-btn--check[b-39htlpr73w] {
        flex: 0 0 auto;
        align-self: center;
        width: auto;
        padding-inline: 1.75rem;
    }

    .ang-rail__tip[b-39htlpr73w] {
        display: none;
    }
}

/*
    Phones. Keeping the two rows aligned is worth more than fitting the longest word on screen, so the tiles hold a
    usable tap size and a long word scrolls sideways inside its own card instead.
*/
@media (max-width: 48rem) {
    .ang-activity[b-39htlpr73w] {
        --ang-tile-max: 2.5rem;
    }

    .ang-word[b-39htlpr73w] {
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .ang-slots[b-39htlpr73w],
    .ang-pool[b-39htlpr73w] {
        grid-template-columns: repeat(var(--ang-len), 2.5rem);
        min-width: max-content;
        max-width: none;
        margin-inline: 0;
    }
}
/* /LearnerApp/Components/Activities/FillSentenceBlanks.razor.rz.scp.css */
/* Chrome for the "fill in the blanks -- sentences" screen. Deliberately the same vocabulary as
   FillWordBlanks.razor.css so the two activities feel like one game; CSS isolation means each
   component needs its own copy.

   Every selector is prefixed because the build inlines this file into the Tailwind bundle
   unscoped as well (tools/gen_razor_css_imports.sh), where it would otherwise be global. */

.fib-activity[b-bw2txjsfax] {
    /* The page behind this is the course's --core-color, and --fill-blanks-input-text-color
       resolves to that same colour -- so anything using it as ink MUST sit on the light panel.
       Everything outside the panel uses the light tokens instead. */
    --fib-panel: var(--fill-blanks-container-color, #fffdd6);
    --fib-ink: var(--fill-blanks-input-text-color, #505b33);
    --fib-accent: var(--accent-color-1, #e6754b);
    --fib-on-dark: var(--neutral-200, #fffdd6);
    --fib-border: color-mix(in srgb, var(--fib-ink) 22%, transparent);
    --fib-muted: color-mix(in srgb, var(--fib-ink) 62%, transparent);
    --fib-correct: #2f7d4f;
    --fib-wrong: #b8321f;

    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.75rem, 2vh, 1.25rem);

    width: min(100% - 2rem, 68rem);
    min-height: 100dvh;
    margin-inline: auto;
    padding-block: clamp(0.75rem, 3vh, 1.75rem);
}

.fib-activity-progress[b-bw2txjsfax] {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    width: 100%;

    /* ActivityProgressBar is a fixed 14rem box carrying an asymmetric `margin-left: 20px`
       (scss/components/_progress.scss). Left to itself it hugs the left of this row; centring
       the flex line then leaves it 10px right of centre, which this padding cancels out.
       That component is shared with every other activity, so it is corrected from here. */
    padding-right: 20px;
}

/* Takes the leftover height so the sentence sits in the middle of the screen rather than
   stranded near the top of a very tall empty page. */
.fib-stage[b-bw2txjsfax] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2.5vh, 1.5rem);
    width: 100%;
}

/* Holds its height whether or not a hint or solution is showing, so revealing one never shoves
   the sentence up or down the page while the learner is mid-answer. */
.fib-reveal[b-bw2txjsfax] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 4.25rem;
}

.fib-reveal-card[b-bw2txjsfax] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    max-width: 100%;
    padding: 0.6rem 1.5rem;
    border-radius: 0.8rem;
    background: var(--fib-panel);
    box-shadow: 0 6px 16px rgb(0 0 0 / 14%);
}

.fib-reveal-card--hint[b-bw2txjsfax] {
    background: color-mix(in srgb, var(--fib-accent) 14%, var(--fib-panel));
}

.fib-reveal-label[b-bw2txjsfax] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fib-accent);
}

.fib-reveal-text[b-bw2txjsfax] {
    font-size: clamp(1rem, 2.4vw, 1.4rem);
    font-weight: 600;
    text-align: center;
    color: var(--fib-ink);
}

/* The panel. The sentence and its verdict both live on it, because the ink colour is only
   legible against this surface. */
.fib-answer[b-bw2txjsfax] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2.5rem) clamp(0.9rem, 2vw, 1.5rem);
    border-radius: 1rem;
    background: var(--fib-panel);
    box-shadow: 0 10px 28px rgb(0 0 0 / 16%);
}

/* Reserves its line so the layout does not twitch when the verdict appears. */
.fib-status[b-bw2txjsfax] {
    min-height: 1.5rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
}

.fib-status--correct[b-bw2txjsfax] { color: var(--fib-correct); }
.fib-status--wrong[b-bw2txjsfax] { color: var(--fib-wrong); }
.fib-status--idle[b-bw2txjsfax] { color: transparent; }

.fib-actions[b-bw2txjsfax] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* Buttons sit on the course background, not on the panel, so they need their own solid
   surfaces -- ink-on-green would disappear. */
.fib-button[b-bw2txjsfax] {
    appearance: none;
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 0.55rem 1.7rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 140ms ease, opacity 140ms ease, transform 100ms ease;
}

.fib-button:disabled[b-bw2txjsfax] {
    cursor: not-allowed;
    opacity: 0.5;
}

.fib-button:not(:disabled):active[b-bw2txjsfax] {
    transform: translateY(1px);
}

.fib-button:focus-visible[b-bw2txjsfax] {
    outline: 2px solid var(--fib-on-dark);
    outline-offset: 3px;
}

.fib-button--go[b-bw2txjsfax] {
    background: var(--fib-accent);
    border-color: var(--fib-accent);
    color: var(--fib-on-dark);
}

.fib-button--go:not(:disabled):hover[b-bw2txjsfax] {
    background: var(--accent-color-1-dark, #e36435);
}

.fib-button--quiet[b-bw2txjsfax] {
    background: transparent;
    border-color: color-mix(in srgb, var(--fib-on-dark) 70%, transparent);
    color: var(--fib-on-dark);
}

.fib-button--quiet:not(:disabled):hover[b-bw2txjsfax] {
    background: color-mix(in srgb, var(--fib-on-dark) 18%, transparent);
}

.fib-button--ghost[b-bw2txjsfax] {
    background: var(--fib-panel);
    border-color: var(--fib-panel);
    color: var(--fib-ink);
}

.fib-button--ghost:not(:disabled):hover[b-bw2txjsfax] {
    background: color-mix(in srgb, var(--fib-ink) 10%, var(--fib-panel));
}

.fib-finish[b-bw2txjsfax] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 1rem;
    background: var(--fib-panel);
    box-shadow: 0 12px 32px rgb(0 0 0 / 20%);
    text-align: center;
}

.fib-finish-title[b-bw2txjsfax] {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--fib-ink);
}

.fib-finish-text[b-bw2txjsfax] {
    margin: 0;
    color: var(--fib-muted);
}

.fib-finish-actions[b-bw2txjsfax] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.fib-finish .fib-button--ghost[b-bw2txjsfax] {
    border-color: var(--fib-border);
}
/* /LearnerApp/Components/Activities/FillWordBlanks.razor.rz.scp.css */
/* Chrome for the "fill in the blank -- words" screen. Deliberately the same vocabulary as
   FillSentenceBlanks.razor.css so the two activities feel like one game; CSS isolation means
   each component needs its own copy.

   Every selector is prefixed because the build inlines this file into the Tailwind bundle
   unscoped as well (tools/gen_razor_css_imports.sh), where it would otherwise be global. */

.fib-activity[b-egehfzzdqk] {
    /* The page behind this is the course's --core-color, and --fill-blanks-input-text-color
       resolves to that same colour -- so anything using it as ink MUST sit on the light panel.
       Everything outside the panel uses the light tokens instead. */
    --fib-panel: var(--fill-blanks-container-color, #fffdd6);
    --fib-ink: var(--fill-blanks-input-text-color, #505b33);
    --fib-accent: var(--accent-color-1, #e6754b);
    --fib-on-dark: var(--neutral-200, #fffdd6);
    --fib-border: color-mix(in srgb, var(--fib-ink) 22%, transparent);
    --fib-muted: color-mix(in srgb, var(--fib-ink) 62%, transparent);
    --fib-correct: #2f7d4f;
    --fib-wrong: #b8321f;

    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.75rem, 2vh, 1.25rem);

    width: min(100% - 2rem, 68rem);
    min-height: 100dvh;
    margin-inline: auto;
    padding-block: clamp(0.75rem, 3vh, 1.75rem);
}

.fib-activity-progress[b-egehfzzdqk] {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    width: 100%;

    /* ActivityProgressBar is a fixed 14rem box carrying an asymmetric `margin-left: 20px`
       (scss/components/_progress.scss). Left to itself it hugs the left of this row; centring
       the flex line then leaves it 10px right of centre, which this padding cancels out.
       That component is shared with every other activity, so it is corrected from here. */
    padding-right: 20px;
}

/* Takes the leftover height so the word sits in the middle of the screen rather than stranded
   near the top of a very tall empty page. */
.fib-stage[b-egehfzzdqk] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2.5vh, 1.5rem);
    width: 100%;
}

/* Holds its height whether or not a solution is showing, so revealing one never shoves the word
   up or down the page while the learner is mid-answer. */
.fib-reveal[b-egehfzzdqk] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 4.25rem;
}

.fib-reveal-card[b-egehfzzdqk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    max-width: 100%;
    padding: 0.6rem 1.5rem;
    border-radius: 0.8rem;
    background: var(--fib-panel);
    box-shadow: 0 6px 16px rgb(0 0 0 / 14%);
}

.fib-reveal-label[b-egehfzzdqk] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fib-accent);
}

.fib-reveal-text[b-egehfzzdqk] {
    font-size: clamp(1.05rem, 2.6vw, 1.6rem);
    font-weight: 600;
    text-align: center;
    color: var(--fib-ink);
}

/* Card and answer sit side by side, and stack once there is no room for both. */
.fib-play[b-egehfzzdqk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    width: 100%;
}

.fib-prompt[b-egehfzzdqk] {
    flex: 0 1 auto;
}

/* The panel. The word and its verdict both live on it, because the ink colour is only legible
   against this surface. */
.fib-answer[b-egehfzzdqk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2.5rem) clamp(0.9rem, 2vw, 1.5rem);
    border-radius: 1rem;
    background: var(--fib-panel);
    box-shadow: 0 10px 28px rgb(0 0 0 / 16%);
}

/* Reserves its line so the layout does not twitch when the verdict appears. */
.fib-status[b-egehfzzdqk] {
    min-height: 1.5rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
}

.fib-status--correct[b-egehfzzdqk] { color: var(--fib-correct); }
.fib-status--wrong[b-egehfzzdqk] { color: var(--fib-wrong); }
.fib-status--idle[b-egehfzzdqk] { color: transparent; }

.fib-actions[b-egehfzzdqk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* Buttons sit on the course background, not on the panel, so they need their own solid
   surfaces -- ink-on-green would disappear. */
.fib-button[b-egehfzzdqk] {
    appearance: none;
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 0.55rem 1.7rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 140ms ease, opacity 140ms ease, transform 100ms ease;
}

.fib-button:disabled[b-egehfzzdqk] {
    cursor: not-allowed;
    opacity: 0.5;
}

.fib-button:not(:disabled):active[b-egehfzzdqk] {
    transform: translateY(1px);
}

.fib-button:focus-visible[b-egehfzzdqk] {
    outline: 2px solid var(--fib-on-dark);
    outline-offset: 3px;
}

.fib-button--go[b-egehfzzdqk] {
    background: var(--fib-accent);
    border-color: var(--fib-accent);
    color: var(--fib-on-dark);
}

.fib-button--go:not(:disabled):hover[b-egehfzzdqk] {
    background: var(--accent-color-1-dark, #e36435);
}

.fib-button--quiet[b-egehfzzdqk] {
    background: transparent;
    border-color: color-mix(in srgb, var(--fib-on-dark) 70%, transparent);
    color: var(--fib-on-dark);
}

.fib-button--quiet:not(:disabled):hover[b-egehfzzdqk] {
    background: color-mix(in srgb, var(--fib-on-dark) 18%, transparent);
}

.fib-button--ghost[b-egehfzzdqk] {
    background: var(--fib-panel);
    border-color: var(--fib-panel);
    color: var(--fib-ink);
}

.fib-button--ghost:not(:disabled):hover[b-egehfzzdqk] {
    background: color-mix(in srgb, var(--fib-ink) 10%, var(--fib-panel));
}

.fib-finish[b-egehfzzdqk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 1rem;
    background: var(--fib-panel);
    box-shadow: 0 12px 32px rgb(0 0 0 / 20%);
    text-align: center;
}

.fib-finish-title[b-egehfzzdqk] {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--fib-ink);
}

.fib-finish-text[b-egehfzzdqk] {
    margin: 0;
    color: var(--fib-muted);
}

.fib-finish-actions[b-egehfzzdqk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
}

.fib-finish .fib-button--ghost[b-egehfzzdqk] {
    border-color: var(--fib-border);
}
/* /LearnerApp/Components/Activities/Parts/SentenceWithBlanks.razor.rz.scp.css */
/* A whole sentence with blanks in it. Publishes the same tokens as WordWithBlanks.razor.css
   for WordBlank.razor.css to inherit. */

.fib-sentence[b-xp5v8gwz4d] {
    /* Geometry. Everything downstream is in em, so the clamp below scales the whole sentence. */
    --fib-slot: 0.62em;
    --fib-slot-wide: 0.86em;
    --fib-slot-h: 1.15em;
    --fib-slot-gap: 0.14em;

    /* Colour. These default to the course theme's own variables, so the sunset, nuu-wee-ya and
       moose-cree skins keep tinting this activity the way they always have.

       Note --fib-ink resolves to the course's --core-color, which is also the page background.
       It is only legible because the activity puts this sentence on the light .fib-answer panel. */
    --fib-ink: var(--fill-blanks-input-text-color, #505b33);
    --fib-line: var(--fill-blanks-input-dashes-color, #e6754b);
    --fib-accent: var(--accent-color-1, #e6754b);
    --fib-muted: color-mix(in srgb, var(--fib-ink) 55%, transparent);
    --fib-slot-active: color-mix(in srgb, var(--fib-accent) 16%, transparent);
    --fib-correct: #2f7d4f;
    --fib-correct-soft: color-mix(in srgb, #2f7d4f 16%, transparent);
    --fib-wrong: #b8321f;
    --fib-wrong-soft: color-mix(in srgb, #b8321f 14%, transparent);

    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;

    /* All word spacing lives here. The old markup leaned on both label text and chunk margins
       at once, which is why blanked words sat further apart than the rest of the sentence. */
    gap: 0.28em 0.34em;

    /* Sentences are longer than single words, so they start smaller and lean on wrapping. */
    font-size: clamp(1.25rem, 3.6vw, 2.35rem);
    line-height: 1.25;
    color: var(--fib-ink);
    text-align: center;
}

.fib-letters[b-xp5v8gwz4d] {
    font: inherit;
    color: inherit;
}

/* One word that contains blanks. Held on a single line so a sentence only ever wraps
   between words, never through the middle of one. */
.fib-chunk[b-xp5v8gwz4d] {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
}

.fib-error[b-xp5v8gwz4d] {
    margin: 0;
    font-weight: 600;
    text-align: center;
    color: #c0392b;
}
/* /LearnerApp/Components/Activities/Parts/WordBlank.razor.rz.scp.css */
/* One blank. Geometry and colour tokens are inherited from the hosting word or sentence
   (see WordWithBlanks.razor.css / SentenceWithBlanks.razor.css) -- custom properties cross
   CSS-isolation boundaries, which is why none of this needs ::deep.

   Every selector is prefixed because the build inlines this file into the Tailwind bundle
   unscoped as well (tools/gen_razor_css_imports.sh), where it would otherwise be global. */

.fib-blank[b-qk3fjn2x5i] {
    --fib-w: var(--fib-slot, 0.62em);

    position: relative;
    display: inline-flex;
    align-items: flex-end;
    padding-bottom: max(1.2rem, 0.62em); /* reserves the row the letter count sits in */

    /* Slots are spaced from each other by --fib-slot-gap, so the join between the last slot
       and the letters that follow needs a comparable gap -- without it a word reads as
       "s i mple", spaced inside the blank and jammed against the rest of the word. */
    margin-inline: 0.16em;

    cursor: text;
}

.fib-blank--wide[b-qk3fjn2x5i] {
    --fib-w: var(--fib-slot-wide, 0.86em);
}

/* The real field, laid over the whole blank. Transparent rather than hidden: the browser
   keeps handling clicks, arrow keys, selection and the touch keyboard, and the slots
   underneath do the drawing. A 1px offscreen input would give up all of that.

   Everything here has to be neutralised explicitly. The global `input` rule in
   scss/components/_forms.scss paints a pill (border-radius: 3rem), a background, and a
   0.2rem focus ring -- invisible while this input was 1px offscreen, a green ellipse around
   the blank now that it covers one. */
.fib-blank-input[b-qk3fjn2x5i] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    background-color: transparent;
    color: transparent;
    caret-color: transparent;
    font: inherit;
    text-align: center;
    letter-spacing: var(--fib-slot-gap, 0.14em);
    cursor: text;
    -webkit-tap-highlight-color: transparent;
}

.fib-blank-input:focus[b-qk3fjn2x5i],
.fib-blank-input:active[b-qk3fjn2x5i] {
    background-color: transparent;
    box-shadow: none;
    outline: none;
}

.fib-blank-input[b-qk3fjn2x5i]::selection {
    background: transparent;
}

/* Same story for the autofill override in _forms.scss, which would flood the blank with an
   inset 1000px shadow. */
.fib-blank-input:-webkit-autofill[b-qk3fjn2x5i],
.fib-blank-input:-webkit-autofill:hover[b-qk3fjn2x5i],
.fib-blank-input:-webkit-autofill:focus[b-qk3fjn2x5i] {
    border: 0;
    -webkit-text-fill-color: transparent;
    -webkit-box-shadow: none;
}

.fib-blank-slots[b-qk3fjn2x5i] {
    display: flex;
    align-items: flex-end;
    gap: var(--fib-slot-gap, 0.14em);
}

.fib-blank-slot[b-qk3fjn2x5i] {
    position: relative;
    display: flex;
    align-items: flex-end; /* the letter rests on its dash rather than floating above it */
    justify-content: center;
    width: var(--fib-w);
    height: var(--fib-slot-h, 1.15em);
    border-radius: 0.12em;
    background: transparent;
    user-select: none;
    transition: background-color 120ms ease;
}

/* A filled slot gets no tint. The letter is the signal, and a tinted box the full height of
   the slot reads as a stray rectangle hovering above each letter. */

.fib-blank-slot--active[b-qk3fjn2x5i] {
    background: var(--fib-slot-active, transparent);
}

.fib-blank-glyph[b-qk3fjn2x5i] {
    font: inherit;
    line-height: 1;
    padding-bottom: 0.08em; /* the gap between a letter and its dash */
    color: var(--fib-ink, #505b33);
}

/* The zero-width space guarantees this span always has a text baseline.

   Without it an empty blank has no baseline at all, so the flex chain falls back to the box's
   bottom edge -- which is why the dashes sat too low and then jumped up the moment a letter
   was typed. The blank's baseline now comes from the same place whether it is filled or not. */
.fib-blank-glyph[b-qk3fjn2x5i]::before {
    content: "\200B";
}

.fib-blank-underline[b-qk3fjn2x5i] {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.1em;
    border-radius: 999px;
    background: var(--fib-line, #e6754b);
    transition: background-color 120ms ease;
}

.fib-blank-slot--active .fib-blank-underline[b-qk3fjn2x5i] {
    background: var(--fib-accent, #d9822b);
}

/* A real blinking caret, shown only in the empty slot the next character will land in. */
.fib-blank-caret[b-qk3fjn2x5i] {
    position: absolute;
    top: 14%;
    bottom: 22%;
    left: 50%;
    width: 0.06em;
    min-width: 1px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--fib-accent, #d9822b);
    opacity: 0;
    pointer-events: none;
}

.fib-blank-slot--active:not(.fib-blank-slot--filled) .fib-blank-caret[b-qk3fjn2x5i] {
    opacity: 1;
    animation: fib-blank-blink-b-qk3fjn2x5i 1.06s steps(1, end) infinite;
}

/* How many letters are missing. It used to render at the full 2.8rem activity font size, which
   made it louder than the word being learned -- but it still has to be readable, hence the rem
   floor rather than a bare em. */
.fib-blank-count[b-qk3fjn2x5i] {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: max(1rem, 0.32em);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--fib-muted, #7b8464);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    transition: color 120ms ease;
}

/* The count tracks the blank's state. On a fixed accent colour it stayed reading as an
   unresolved error underneath letters that had already turned green. */
.fib-blank-count--done[b-qk3fjn2x5i] {
    color: var(--fib-correct, #2f7d4f);
}

.fib-blank-count--wrong[b-qk3fjn2x5i] {
    color: var(--fib-wrong, #b8321f);
}

/* A letter the learner has already got right. It is green for good, and it is no longer part of
   the field at all -- see `locked` in WordBlank.razor -- so nothing can delete it. */
.fib-blank-slot--locked[b-qk3fjn2x5i] {
    background: var(--fib-correct-soft, rgb(47 125 79 / 16%));
}

.fib-blank-slot--locked .fib-blank-underline[b-qk3fjn2x5i] {
    background: var(--fib-correct, #2f7d4f);
}

.fib-blank-slot--locked .fib-blank-glyph[b-qk3fjn2x5i] {
    color: var(--fib-correct, #2f7d4f);
}

/* Only the letters still in play get marked wrong. */
.fib-blank--wrong .fib-blank-slot:not(.fib-blank-slot--locked)[b-qk3fjn2x5i] {
    background: var(--fib-wrong-soft, rgb(184 50 31 / 14%));
}

.fib-blank--wrong .fib-blank-slot:not(.fib-blank-slot--locked) .fib-blank-underline[b-qk3fjn2x5i] {
    background: var(--fib-wrong, #b8321f);
}

.fib-blank--wrong[b-qk3fjn2x5i] {
    animation: fib-blank-shake-b-qk3fjn2x5i 320ms ease-in-out 1;
}

.fib-blank--correct .fib-blank-slot[b-qk3fjn2x5i] {
    background: var(--fib-correct-soft, rgb(47 125 79 / 16%));
}

.fib-blank--correct .fib-blank-underline[b-qk3fjn2x5i] {
    background: var(--fib-correct, #2f7d4f);
}

.fib-blank--correct[b-qk3fjn2x5i] {
    animation: fib-blank-pop-b-qk3fjn2x5i 260ms ease-out 1;
}

@keyframes fib-blank-blink-b-qk3fjn2x5i {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes fib-blank-shake-b-qk3fjn2x5i {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-0.12em); }
    45% { transform: translateX(0.1em); }
    70% { transform: translateX(-0.05em); }
}

@keyframes fib-blank-pop-b-qk3fjn2x5i {
    0% { transform: scale(1); }
    45% { transform: scale(1.06); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .fib-blank--wrong[b-qk3fjn2x5i],
    .fib-blank--correct[b-qk3fjn2x5i] {
        animation: none;
    }

    .fib-blank-slot--active:not(.fib-blank-slot--filled) .fib-blank-caret[b-qk3fjn2x5i] {
        animation: none;
        opacity: 1;
    }
}
/* /LearnerApp/Components/Activities/Parts/WordWithBlanks.razor.rz.scp.css */
/* One word with blanks in it. Also publishes the geometry and colour tokens that
   WordBlank.razor.css reads -- custom properties inherit across CSS-isolation scopes, so the
   two components can share a look without ::deep. */

.fib-word[b-d1d8xi2jp6] {
    /* Geometry. Everything downstream is in em, so the clamp below scales the whole word. */
    --fib-slot: 0.62em;
    --fib-slot-wide: 0.86em;
    --fib-slot-h: 1.15em;
    --fib-slot-gap: 0.14em;

    /* Colour. These default to the course theme's own variables, so the sunset, nuu-wee-ya and
       moose-cree skins keep tinting this activity the way they always have.

       Note --fib-ink resolves to the course's --core-color, which is also the page background.
       It is only legible because the activity puts this word on the light .fib-answer panel. */
    --fib-ink: var(--fill-blanks-input-text-color, #505b33);
    --fib-line: var(--fill-blanks-input-dashes-color, #e6754b);
    --fib-accent: var(--accent-color-1, #e6754b);
    --fib-muted: color-mix(in srgb, var(--fib-ink) 55%, transparent);
    --fib-slot-active: color-mix(in srgb, var(--fib-accent) 16%, transparent);
    --fib-correct: #2f7d4f;
    --fib-correct-soft: color-mix(in srgb, #2f7d4f 16%, transparent);
    --fib-wrong: #b8321f;
    --fib-wrong-soft: color-mix(in srgb, #b8321f 14%, transparent);

    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0;

    font-size: clamp(1.75rem, 7vw, 3rem);
    line-height: 1.2;
    color: var(--fib-ink);
}

/* The letters that were left visible. No gap: they are part of the same word as the blanks
   sitting next to them. */
.fib-letters[b-d1d8xi2jp6] {
    font: inherit;
    color: inherit;
    white-space: pre;
}

.fib-error[b-d1d8xi2jp6] {
    margin: 0;
    font-weight: 600;
    text-align: center;
    color: #c0392b;
}
/* /LearnerApp/Components/Activities/WordSearchActivity.razor.rz.scp.css */
/* Styling for the word search activity.
   Everything here is scoped to the component, so the class names are free to be short. All colour goes through the
   existing custom properties rather than literals, because the community themes repaint those at runtime. */

.word-search-activity[b-x70hm2wx9x] {
    --ws-gap: 0.15rem;
    --ws-board-ink: var(--core-color);
    --ws-board-paper: var(--neutral-100);
    --ws-board-rule: color-mix(in srgb, var(--core-color) 12%, transparent);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

.ws-progress[b-x70hm2wx9x] {
    width: min(100%, 32rem);
}

.ws-body[b-x70hm2wx9x] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
}


/* ---------------------------------------------------------------- The board */

.ws-board-panel[b-x70hm2wx9x] {
    /* The squares size themselves off this element's width, so it has to be the query container. */
    container-type: inline-size;

    flex: 1 1 22rem;
    min-width: 0;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.ws-board[b-x70hm2wx9x] {
    position: relative;
    padding: 0.6rem;
    border-radius: 0.75rem;
    background-color: var(--ws-board-paper);
    box-shadow: 0 0.35rem 1.1rem color-mix(in srgb, var(--black-color) 14%, transparent);
}

.ws-grid[b-x70hm2wx9x] {
    /* Squares shrink to fit the panel and stop growing once they are comfortably tappable. */
    --ws-cell: clamp(1.05rem, calc((100cqw - 2.5rem) / var(--ws-columns)), 2.35rem);

    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ws-gap);

    /* The board swallows the whole gesture: without this, dragging down a column scrolls the page instead. */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.ws-grid:focus[b-x70hm2wx9x] {
    outline: none;
}

.ws-row[b-x70hm2wx9x] {
    display: flex;
    gap: var(--ws-gap);
}

.ws-cell[b-x70hm2wx9x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ws-cell);
    height: var(--ws-cell);
    border-radius: 0.2rem;
    /* TODO Install bespoke monospace font. */
    font-family: 'Courier New', Courier, monospace;
    font-size: calc(var(--ws-cell) * 0.62);
    font-weight: 600;
    line-height: 1;
    color: var(--ws-board-ink);
    cursor: pointer;

    /* Transparent, so the highlight bars drawn underneath show through. */
    background-color: transparent;
    transition: color 120ms ease, background-color 120ms ease;
}

.ws-cell:hover[b-x70hm2wx9x] {
    background-color: var(--ws-board-rule);
}

.ws-cell:focus-visible[b-x70hm2wx9x] {
    outline: 0.15rem solid var(--accent-color-2);
    outline-offset: 0.05rem;
}

.ws-cell.is-found[b-x70hm2wx9x] {
    color: color-mix(in srgb, var(--core-color) 72%, var(--white-color));
    font-weight: 700;
}

.ws-cell.is-hinted[b-x70hm2wx9x] {
    color: var(--white-color);
    background-color: var(--accent-color-2);
    animation: ws-pulse-b-x70hm2wx9x 1.4s ease-in-out infinite;
}

@keyframes ws-pulse-b-x70hm2wx9x {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color-2) 60%, transparent); }
    50%      { box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--accent-color-2) 0%, transparent); }
}


/* ------------------------------------------------- Highlights drawn by the JS module

   These elements are created by word-search-grid.js and stamped with this component's scope attribute by hand, which
   is why they are styled here despite never appearing in the markup. Each is a bar laid from the centre of a run's
   first square to the centre of its last, sitting behind the letters. */

.ws-highlights[b-x70hm2wx9x] {
    position: absolute;
    inset: 0.6rem;
    z-index: 0;
    pointer-events: none;
}

.ws-highlight[b-x70hm2wx9x] {
    position: absolute;
    border-radius: 999rem;
}

.ws-highlight-selection[b-x70hm2wx9x] {
    background-color: color-mix(in srgb, var(--accent-color-4) 78%, transparent);
    box-shadow: 0 0 0 0.08rem color-mix(in srgb, var(--secondary-color-dark) 45%, transparent);
}

.ws-highlight-found[b-x70hm2wx9x] {
    animation: ws-settle-b-x70hm2wx9x 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ws-highlight-colour-0[b-x70hm2wx9x] { background-color: color-mix(in srgb, var(--accent-color-6) 55%, transparent); }
.ws-highlight-colour-1[b-x70hm2wx9x] { background-color: color-mix(in srgb, var(--accent-color-1) 50%, transparent); }
.ws-highlight-colour-2[b-x70hm2wx9x] { background-color: color-mix(in srgb, var(--accent-color-10) 50%, transparent); }
.ws-highlight-colour-3[b-x70hm2wx9x] { background-color: color-mix(in srgb, var(--accent-color-9) 58%, transparent); }
.ws-highlight-colour-4[b-x70hm2wx9x] { background-color: color-mix(in srgb, var(--accent-color-11) 48%, transparent); }
.ws-highlight-colour-5[b-x70hm2wx9x] { background-color: color-mix(in srgb, var(--accent-color-7) 62%, transparent); }

/* A selection that spelled nothing. Shaking it off is the only failure feedback the activity has, so it needs to be
   unmistakable without being punishing. */
.ws-highlight-rejected[b-x70hm2wx9x] {
    background-color: color-mix(in srgb, var(--accent-color-2) 55%, transparent);
    animation: ws-reject-b-x70hm2wx9x 420ms ease-out forwards;
}

/* These animate `scale` and `translate` rather than `transform`, because the module sets the bar's angle with the
   standalone `rotate` property. Keeping the three separate means an animation never has to restate the angle. */
@keyframes ws-settle-b-x70hm2wx9x {
    from { opacity: 0; scale: 0.88; }
    to   { opacity: 1; scale: 1; }
}

@keyframes ws-reject-b-x70hm2wx9x {
    0%   { opacity: 1; translate: 0; }
    20%  { translate: -0.22rem; }
    40%  { translate: 0.22rem; }
    60%  { translate: -0.12rem; }
    80%  { translate: 0; opacity: 1; }
    100% { translate: 0; opacity: 0; }
}


/* ------------------------------------------------------- Board actions */

.ws-board-actions[b-x70hm2wx9x] {
    display: flex;
    align-items: center;
    /* Centred under the board. This was space-between while a help button sat opposite the hints. */
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.ws-print-button[b-x70hm2wx9x] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.ws-hint-button:disabled[b-x70hm2wx9x],
.ws-print-button:disabled[b-x70hm2wx9x] {
    opacity: 0.55;
    cursor: not-allowed;
}


/* ----------------------------------------------------------- Word bank */

.ws-word-bank[b-x70hm2wx9x] {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 24rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
}

.ws-words[b-x70hm2wx9x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.35rem 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ws-word[b-x70hm2wx9x] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    transition: opacity 200ms ease;
}

.ws-word-text[b-x70hm2wx9x] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--black-color);
}

.ws-word-translation[b-x70hm2wx9x] {
    font-size: 0.78rem;
    font-style: italic;
    color: color-mix(in srgb, var(--black-color) 62%, transparent);
}

.ws-word.is-found[b-x70hm2wx9x] {
    opacity: 0.45;
}

.ws-word.is-found .ws-word-text[b-x70hm2wx9x] {
    text-decoration: line-through;
    text-decoration-thickness: 0.1em;
}


/* ------------------------------------------------------------ Summary */

.ws-summary[b-x70hm2wx9x] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.ws-summary-value[b-x70hm2wx9x] {
    font-weight: 700;
    color: var(--accent-color-2);
}


/* Visible only to screen readers: it reports each find, which is otherwise a purely visual event. */
.ws-announcer[b-x70hm2wx9x] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* ------------------------------------------------------- Narrow screens */

@media (max-width: 48rem) {
    .word-search-activity[b-x70hm2wx9x] {
        padding: 0.5rem 0.5rem 2.5rem;
        gap: 0.75rem;
    }

    .ws-board-panel[b-x70hm2wx9x],
    .ws-word-bank[b-x70hm2wx9x] {
        flex-basis: 100%;
        max-width: 100%;
    }

    .ws-words[b-x70hm2wx9x] {
        grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ws-cell[b-x70hm2wx9x],
    .ws-word[b-x70hm2wx9x] {
        transition: none;
    }

    .ws-cell.is-hinted[b-x70hm2wx9x],
    .ws-highlight-found[b-x70hm2wx9x] {
        animation: none;
    }

    .ws-highlight-rejected[b-x70hm2wx9x] {
        animation: ws-fade-out-b-x70hm2wx9x 420ms ease-out forwards;
    }

    @keyframes ws-fade-out-b-x70hm2wx9x {
        to { opacity: 0; }
    }
}
/* /LearnerApp/Components/Widgets/Navigation/LearnerMenu.razor.rz.scp.css */
.lrn-menu__trigger[b-1gu6iadfil] {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 88px;
    height: 88px;
    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;
    background-color: var(--radial-menu-background-color);
    background-image: url("/images/global/avatars/avatar-frame-default.png");
    background-position: center;
    background-size: cover;
    color: var(--neutral-100);
    box-shadow: 0 2px 8px rgb(0 0 0 / 35%);
    cursor: pointer;
    transition: transform 150ms ease, background-color 150ms ease;
}

.lrn-menu__trigger:hover[b-1gu6iadfil],
.lrn-menu__trigger:focus-visible[b-1gu6iadfil] {
    background-color: var(--radial-menu-background-color-hover);
    box-shadow: 0 0 0 2px var(--cms-nav-shadow-color-hover), 0 2px 8px rgb(0 0 0 / 35%);
    transform: scale(1.06);
}

.lrn-menu__trigger-avatar[b-1gu6iadfil] {
    width: 53px;
    height: 53px;
    border-radius: 50%;
    object-fit: cover;
}

.lrn-menu__badge[b-1gu6iadfil] {
    position: absolute;
    top: -4px;
    right: -4px;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.25rem;

    border: 2px solid var(--neutral-100);
    border-radius: 999px;
    background-color: var(--accent-color-1);
    color: var(--neutral-100);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

/* Catches a click anywhere off the panel. Left transparent on a wide screen, where a
   dimmed page would be a heavier gesture than this menu deserves. */
.lrn-menu__scrim[b-1gu6iadfil] {
    position: fixed;
    inset: 0;
    z-index: 4;
    background-color: transparent;
}

.lrn-menu__sheet[b-1gu6iadfil] {
    position: fixed;
    left: 1.25rem;
    bottom: calc(1.25rem + 88px + 0.75rem);
    z-index: 5;

    width: 17.5rem;
    max-height: calc(100svh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 0.375rem;

    border: 2px solid color-mix(in srgb, var(--core-color) 25%, transparent);
    border-radius: 1rem;
    background-color: var(--neutral-100);
    box-shadow: 0 6px 24px rgb(0 0 0 / 28%);
    animation: 120ms ease-out lrn-menu-pop-b-1gu6iadfil;
    transform-origin: bottom left;
}

/* The grab handle only means anything on a sheet you could swipe. */
.lrn-menu__grip[b-1gu6iadfil] {
    display: none;
}

.lrn-menu__list[b-1gu6iadfil] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
    The featured action: the one thing this screen wants to offer, given the weight the
    corner button it replaced used to have. Filled rather than outlined, its own artwork
    at twice the size of a row icon, and a chevron, so it reads as somewhere to go rather
    than one more item in a list.
*/
.lrn-menu__cta[b-1gu6iadfil] {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    width: 100%;
    margin: 0;
    padding: 0.625rem 0.75rem;

    border: 0;
    border-radius: 0.75rem;
    background-color: var(--secondary-color);
    box-shadow: none;

    color: var(--neutral-100);
    font-family: inherit;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.lrn-menu__cta:hover[b-1gu6iadfil],
.lrn-menu__cta:focus-visible[b-1gu6iadfil],
.lrn-menu__cta:active[b-1gu6iadfil] {
    background-color: color-mix(in srgb, var(--secondary-color) 85%, black);
    color: var(--neutral-100);
    box-shadow: none;
}

/* The practice artwork is drawn light, like the navigation icons, so on the filled
   call to action it needs the same dark ground the row icons get. */
.lrn-menu__cta-icon[b-1gu6iadfil] {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.3125rem;
    border-radius: 50%;
    background-color: var(--core-color);
    color: var(--neutral-100);
    object-fit: contain;
}

.lrn-menu__cta-icon--glyph[b-1gu6iadfil] {
    font-size: 1.5rem;
    line-height: 2.125rem;
    text-align: center;
}

.lrn-menu__cta-text[b-1gu6iadfil] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.0625rem;
    min-width: 0;
}

.lrn-menu__cta-label[b-1gu6iadfil] {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
}

.lrn-menu__cta-description[b-1gu6iadfil] {
    font-size: 0.8125rem;
    line-height: 1.25;
    text-align: left;
    opacity: 0.85;
}

.lrn-menu__cta-chevron[b-1gu6iadfil] {
    flex: 0 0 auto;
    font-size: 1.125rem;
    opacity: 0.8;
}

/*
    Rows, and the shared sound button standing in as one. A bare <button> already carries
    the app's chunky button skin, so each property that skin sets is reset here rather
    than left to chance.
*/
.lrn-menu__list .lrn-menu__row[b-1gu6iadfil],
.lrn-menu__list .lrn-menu__row-host .btn[b-1gu6iadfil] {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0.375rem 0.5rem;

    border: 0;
    border-radius: 0.625rem;
    background-color: transparent;
    box-shadow: none;

    color: var(--dark-text-color);
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.lrn-menu__list .lrn-menu__row:hover[b-1gu6iadfil],
.lrn-menu__list .lrn-menu__row:focus-visible[b-1gu6iadfil],
.lrn-menu__list .lrn-menu__row:active[b-1gu6iadfil],
.lrn-menu__list .lrn-menu__row-host .btn:active[b-1gu6iadfil],
.lrn-menu__list .lrn-menu__row-host .btn:focus[b-1gu6iadfil],
.lrn-menu__list .lrn-menu__row-host .btn:hover[b-1gu6iadfil] {
    background-color: var(--neutral-300);
    box-shadow: none;
    color: var(--dark-text-color);
}

/* The shared button writes its label before its icon; a row shows the icon first. */
.lrn-menu__list .lrn-menu__row-host .btn[b-1gu6iadfil] {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/*
    Every icon sits in the same dark round chip. The navigation icons are drawn light, for
    the dark buttons the radial menu used, so on a light panel they need that ground to be
    visible at all -- and the chip keeps the round-button look those buttons had.
*/
.lrn-menu__icon[b-1gu6iadfil],
.lrn-menu__list .lrn-menu__row-host .btn i[b-1gu6iadfil] {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.25rem;
    border-radius: 50%;
    background-color: var(--core-color);
    color: var(--neutral-100);
    object-fit: contain;
}

/*
    A glyph icon centres itself by taking the chip's height as its line-height, the way the
    picture icons are centred by object-fit. The !important is load-bearing: App.razor pulls
    line-awesome.min.css in unlayered and after the compiled bundle, and its `.la, .las`
    base rule sets `line-height: 1`. An unlayered normal declaration outranks every layered
    one whatever the specificity, so the plain declaration lost and the glyph rode high in
    its chip. Importance is what reverses that. Drop it and the icons un-centre.
*/
.lrn-menu__list .lrn-menu__row-host .btn i[b-1gu6iadfil] {
    padding: 0;
    font-size: 1rem;
    line-height: 1.75rem !important;
    text-align: center;
}

/* An avatar is its own picture and fills the chip. */
.lrn-menu__icon--avatar[b-1gu6iadfil] {
    padding: 0;
    background-color: var(--neutral-300);
}

.lrn-menu__icon--glyph[b-1gu6iadfil] {
    padding: 0;
    font-size: 1rem;
    line-height: 1.75rem !important;
    text-align: center;
}

.lrn-menu__label[b-1gu6iadfil] {
    flex: 1 1 auto;
}

.lrn-menu__count[b-1gu6iadfil] {
    flex: 0 0 auto;
    min-width: 1.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background-color: var(--accent-color-1);
    color: var(--neutral-100);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
}

.lrn-menu__divider[b-1gu6iadfil] {
    height: 1px;
    margin: 0.25rem 0.5rem;
    background-color: color-mix(in srgb, var(--core-color) 18%, transparent);
}

.lrn-menu__row--logout .lrn-menu__label[b-1gu6iadfil] {
    color: var(--danger-color);
}

@keyframes lrn-menu-pop-b-1gu6iadfil {
    from { opacity: 0; transform: scale(0.96) translateY(0.5rem); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes lrn-menu-rise-b-1gu6iadfil {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes lrn-menu-fade-b-1gu6iadfil {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Phone: the panel becomes a sheet on the bottom edge ---- */

@media (max-width: 62rem) {
    .lrn-menu__trigger[b-1gu6iadfil] {
        left: 1rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
        transition: none;
    }

    /* Hover is a mouse idea; on a touch screen it sticks after the tap. */
    .lrn-menu__trigger:hover[b-1gu6iadfil],
    .lrn-menu__trigger:focus-visible[b-1gu6iadfil] {
        transform: none;
    }

    .lrn-menu__trigger:active[b-1gu6iadfil] {
        background-color: var(--radial-menu-background-color-hover);
    }

    /* A sheet is a heavier gesture and earns the dimmed page behind it. */
    .lrn-menu__scrim[b-1gu6iadfil] {
        background-color: rgb(0 0 0 / 45%);
        animation: 150ms ease-out lrn-menu-fade-b-1gu6iadfil;
    }

    .lrn-menu__sheet[b-1gu6iadfil] {
        right: 0;
        bottom: 0;
        left: 0;

        width: auto;
        max-height: 80svh;

        padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));

        border: 0;
        border-radius: 1.2rem 1.2rem 0 0;
        box-shadow: 0 -4px 20px rgb(0 0 0 / 30%);
        animation: 200ms ease-out lrn-menu-rise-b-1gu6iadfil;
        transform-origin: bottom center;
    }

    .lrn-menu__grip[b-1gu6iadfil] {
        display: block;
        width: 3rem;
        height: 4px;
        margin: 0.25rem auto 0.5rem;
        border-radius: 999px;
        background-color: color-mix(in srgb, var(--core-color) 30%, transparent);
    }

    .lrn-menu__list .lrn-menu__row[b-1gu6iadfil],
    .lrn-menu__list .lrn-menu__row-host .btn[b-1gu6iadfil] {
        gap: 0.875rem;
        min-height: 52px;
        padding: 0.5rem 0.75rem;
        border-radius: 0.75rem;
        font-size: 1.0625rem;
    }

    /* Leave the row unhighlighted until it is actually pressed. */
    .lrn-menu__list .lrn-menu__row:hover[b-1gu6iadfil] {
        background-color: transparent;
    }

    .lrn-menu__list .lrn-menu__row:active[b-1gu6iadfil] {
        background-color: var(--neutral-300);
    }

    .lrn-menu__icon[b-1gu6iadfil],
    .lrn-menu__list .lrn-menu__row-host .btn i[b-1gu6iadfil] {
        width: 2rem;
        height: 2rem;
    }

    .lrn-menu__list .lrn-menu__row-host .btn i[b-1gu6iadfil],
    .lrn-menu__icon--glyph[b-1gu6iadfil] {
        font-size: 1.125rem;
        line-height: 2rem !important;
    }

    .lrn-menu__divider[b-1gu6iadfil] {
        margin: 0.375rem 0.75rem;
    }

    .lrn-menu__cta[b-1gu6iadfil] {
        gap: 0.875rem;
        padding: 0.75rem;
        border-radius: 0.875rem;
        transition: none;
    }

    .lrn-menu__cta:hover[b-1gu6iadfil] {
        background-color: var(--secondary-color);
    }

    .lrn-menu__cta:active[b-1gu6iadfil] {
        background-color: color-mix(in srgb, var(--secondary-color) 85%, black);
    }

    .lrn-menu__cta-icon[b-1gu6iadfil] {
        width: 3rem;
        height: 3rem;
        padding: 0.375rem;
    }

    .lrn-menu__cta-icon--glyph[b-1gu6iadfil] {
        font-size: 1.625rem;
        line-height: 2.25rem !important;
    }

    .lrn-menu__cta-label[b-1gu6iadfil] {
        font-size: 1.125rem;
    }

    .lrn-menu__cta-description[b-1gu6iadfil] {
        font-size: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lrn-menu__sheet[b-1gu6iadfil],
    .lrn-menu__scrim[b-1gu6iadfil] {
        animation: none;
    }

    .lrn-menu__trigger[b-1gu6iadfil] {
        transition: none;
    }

    .lrn-menu__trigger:hover[b-1gu6iadfil],
    .lrn-menu__trigger:focus-visible[b-1gu6iadfil] {
        transform: none;
    }
}
/* /LearnerApp/Components/Widgets/Navigation/SceneNode.razor.rz.scp.css */
/*
    A labelled node in a scene, and the panel it can open.

    The trigger borrows the scene's own vocabulary -- a dashed ring around a round icon,
    the same shape as the lesson and module markers -- so it reads as part of the scene
    rather than chrome laid over it, and it carries its label rather than hiding it behind
    a hover. The panel is the learner menu's, so anything that opens a list of labelled
    actions in this app looks the same.

    Everything is prefixed .lrn-node because scoped stylesheets are emitted unscoped
    into the bundle as well, so an unprefixed class here would be global.
*/

/* Fixed rather than absolute: the container this sits in is positioned on a wide screen
   and static on a phone, so an absolute offset would mean two different things. */
.lrn-node__trigger[b-94uldj2mju] {
    position: fixed;
    right: 1.5rem;
    top: 3.25rem;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 0.75rem;
    background-color: transparent;
    box-shadow: none;
    cursor: pointer;
}

.lrn-node__trigger-ring[b-94uldj2mju] {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    width: 68px;
    height: 68px;

    border: 3px dashed var(--core-color);
    border-radius: 50%;
    background-color: var(--light-background-color);
    color: var(--core-color);
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
    transition: transform 150ms ease, background-color 150ms ease;
}

.lrn-node__trigger:hover .lrn-node__trigger-ring[b-94uldj2mju],
.lrn-node__trigger:focus-visible .lrn-node__trigger-ring[b-94uldj2mju] {
    background-color: var(--light-background-color);
    transform: scale(1.06);
}

.lrn-node__trigger-icon[b-94uldj2mju] {
    font-size: 2rem;
    line-height: 1;
}

.lrn-node__trigger-image[b-94uldj2mju] {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
}

.lrn-node__trigger-label[b-94uldj2mju] {
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background-color: var(--core-color);
    color: var(--neutral-100);
    font-family: "Cubano", sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.lrn-node__scrim[b-94uldj2mju] {
    position: fixed;
    inset: 0;
    z-index: 4;
    background-color: transparent;
}

.lrn-node__panel[b-94uldj2mju] {
    position: fixed;
    right: 1.5rem;
    top: calc(3.25rem + 68px + 1.75rem);
    z-index: 5;

    width: 17.5rem;
    max-height: calc(100svh - 12rem);
    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 0.375rem;

    border: 2px solid color-mix(in srgb, var(--core-color) 25%, transparent);
    border-radius: 1rem;
    background-color: var(--neutral-100);
    box-shadow: 0 6px 24px rgb(0 0 0 / 28%);
    animation: 120ms ease-out lrn-node-pop-b-94uldj2mju;
    transform-origin: top right;
}

.lrn-node__list[b-94uldj2mju] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A bare <button> already carries the app's chunky button skin, so each property that
   skin sets is reset here rather than left to chance. */
.lrn-node__list .lrn-node__row[b-94uldj2mju] {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0.375rem 0.5rem;

    border: 0;
    border-radius: 0.625rem;
    background-color: transparent;
    box-shadow: none;

    color: var(--dark-text-color);
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.lrn-node__list .lrn-node__row:hover[b-94uldj2mju],
.lrn-node__list .lrn-node__row:focus-visible[b-94uldj2mju],
.lrn-node__list .lrn-node__row:active[b-94uldj2mju] {
    background-color: var(--neutral-300);
    box-shadow: none;
    color: var(--dark-text-color);
}

/* The artwork is drawn light, for the dark markers it normally sits on, so on a light
   panel it needs that ground to be visible at all. */
.lrn-node__icon[b-94uldj2mju] {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    padding: 0.25rem;
    border-radius: 50%;
    background-color: var(--core-color);
    color: var(--neutral-100);
    object-fit: contain;
}

.lrn-node__icon--glyph[b-94uldj2mju] {
    padding: 0;
    font-size: 1.125rem;
    line-height: 2rem;
    text-align: center;
}

.lrn-node__text[b-94uldj2mju] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.lrn-node__label[b-94uldj2mju] {
    text-align: left;
}

.lrn-node__description[b-94uldj2mju] {
    font-size: 0.8125rem;
    line-height: 1.25;
    text-align: left;
    opacity: 0.75;
}

@keyframes lrn-node-pop-b-94uldj2mju {
    from { opacity: 0; transform: scale(0.96) translateY(-0.375rem); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 62rem) {
    /* The title ribbon runs the width of the screen here, and the back button holds the
       top left, so the top edge has no room for a node. It goes to the bottom right --
       the one corner still free, with the menu button opposite it. */
    .lrn-node__trigger[b-94uldj2mju] {
        top: auto;
        right: 0.75rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
        transition: none;
    }

    .lrn-node__trigger-ring[b-94uldj2mju] {
        width: 56px;
        height: 56px;
        transition: none;
    }

    /* Hover is a mouse idea; on a touch screen it sticks after the tap. */
    .lrn-node__trigger:hover .lrn-node__trigger-ring[b-94uldj2mju],
    .lrn-node__trigger:focus-visible .lrn-node__trigger-ring[b-94uldj2mju] {
        background-color: var(--light-background-color);
        transform: none;
    }

    .lrn-node__trigger:active .lrn-node__trigger-ring[b-94uldj2mju] {
        background-color: var(--light-background-color);
    }

    .lrn-node__trigger-icon[b-94uldj2mju] {
        font-size: 1.625rem;
    }

    .lrn-node__trigger-image[b-94uldj2mju] {
        width: 1.875rem;
        height: 1.875rem;
    }

    /* Too narrow for a panel beside the node, so it becomes a sheet like the menu's. */
    .lrn-node__panel[b-94uldj2mju] {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        top: auto;

        width: auto;
        max-height: 70svh;

        padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));

        border: 0;
        border-radius: 1.2rem 1.2rem 0 0;
        box-shadow: 0 -4px 20px rgb(0 0 0 / 30%);
        animation: 200ms ease-out lrn-node-rise-b-94uldj2mju;
        transform-origin: bottom center;
    }

    .lrn-node__scrim[b-94uldj2mju] {
        background-color: rgb(0 0 0 / 45%);
    }

    .lrn-node__list .lrn-node__row[b-94uldj2mju] {
        gap: 0.875rem;
        min-height: 52px;
        padding: 0.5rem 0.75rem;
        border-radius: 0.75rem;
        font-size: 1.0625rem;
    }

    .lrn-node__list .lrn-node__row:hover[b-94uldj2mju] {
        background-color: transparent;
    }

    .lrn-node__list .lrn-node__row:active[b-94uldj2mju] {
        background-color: var(--neutral-300);
    }
}

@keyframes lrn-node-rise-b-94uldj2mju {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .lrn-node__panel[b-94uldj2mju] {
        animation: none;
    }

    .lrn-node__trigger-ring[b-94uldj2mju] {
        transition: none;
    }

    .lrn-node__trigger:hover .lrn-node__trigger-ring[b-94uldj2mju],
    .lrn-node__trigger:focus-visible .lrn-node__trigger-ring[b-94uldj2mju] {
        transform: none;
    }
}
/* /LearnerApp/Components/Widgets/UserCustomization/ChangeUsername.razor.rz.scp.css */
/*
    Changing a username.

    Prefixed class names: GenerateRazorCssImports pulls this file into Styles/main.css, so
    these rules also compile into the one global bundle unscoped.
*/

/* The name a person currently answers to, given the weight of a value rather than run
   into a sentence. It used to read "Current Username: Name" with the rule about changing
   it set in tiny italics off to the right, which made the two least legible things on the
   row the two that mattered. */
.change-username__current[b-aa3ey1uibj] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.25rem;
}

.change-username__label[b-aa3ey1uibj] {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color-light);
}

.change-username__value[b-aa3ey1uibj] {
    font-family: henderson-slab-basic, serif;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--core-color);
    overflow-wrap: anywhere;
}

/* Separates the name you have from the form for the one you want. */
.change-username__form[b-aa3ey1uibj] {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 2px dashed var(--neutral-400);
}

.change-username__waiting[b-aa3ey1uibj] {
    margin: 0;
    color: var(--primary-color-light);
}
/* /LearnerApp/Components/Widgets/UserCustomization/UsernamePicker.razor.rz.scp.css */
/*
    The username field and its generator.

    Class names are prefixed because a .razor.css here is not only Blazor CSS isolation:
    GenerateRazorCssImports also imports this file into Styles/main.css, so these rules
    compile into the one global bundle unscoped and reach both apps.
*/

/* The input and the generator sit on one row. They used to stack, which made picking a
   name a three-step descent -- label, box, button -- for what is one decision. Wraps
   rather than shrinks, so the narrow registration card stacks them instead of squeezing
   the input down to nothing. */
.username-picker__row[b-fzk6711i58] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.username-picker__row .form-control[b-fzk6711i58] {
    flex: 1 1 15rem;
    max-width: 22rem;
    margin: 0;
}

.username-picker__generate[b-fzk6711i58] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* The criteria icon belongs to the label, not to the row below it. */
.username-picker__label[b-fzk6711i58] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}
/* /LearnerApp/Pages/Conjugator/Conjugator.razor.rz.scp.css */
/*
    Conjugator page styles.

    The partner logos in the footer were sized with inline vw widths -- 9vw, 4vw and
    24vw. On a desktop those are 170px, 77px and 460px; on a 390px phone they are 35px,
    16px and 94px, which is both illegible and too small to tap. The desktop values are
    unchanged; below 62rem each logo gets a floor.
*/

.partner-logo[b-959flbi59j] {
    max-width: 12rem;
    height: auto;
}

.partner-logo--ubc[b-959flbi59j] {
    width: 9vw;
    margin-top: 5px;
    margin-bottom: 5px;
}

.partner-logo--altlab[b-959flbi59j] {
    width: 4vw;
}

.partner-logo--opd[b-959flbi59j] {
    width: 24vw;
}

@media (max-width: 62rem) {
    .conjugator-footer[b-959flbi59j] {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        padding-block: 0.75rem;
    }

    .partner-link[b-959flbi59j] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
    }

    .partner-logo--ubc[b-959flbi59j] {
        width: auto;
        height: 2.25rem;
    }

    .partner-logo--altlab[b-959flbi59j] {
        width: auto;
        height: 1.75rem;
    }

    .partner-logo--opd[b-959flbi59j] {
        width: auto;
        height: 2rem;
    }
}
/* /LearnerApp/Pages/MainApp/Downloads.razor.rz.scp.css */
/*
    Downloads. The hero was three inline pixel widths -- a 1100px block holding a
    floated 500px column and a 510px one -- which forced horizontal scrolling on
    anything narrower than a desktop. Same layout, expressed so it can reflow.
*/

.downloads-hero[b-aid91xiwxp] {
    width: 1100px;
    max-width: 100%;
}

.downloads-hero-copy[b-aid91xiwxp] {
    float: left;
    width: 500px;
    max-width: 100%;
    height: auto;
}

.downloads-hero-image[b-aid91xiwxp] {
    display: inline;
    width: 510px;
    max-width: 100%;
}

.downloads-hero-image img[b-aid91xiwxp] {
    max-width: 100%;
    height: auto;
}

@media (max-width: 62rem) {
    .downloads-hero[b-aid91xiwxp] {
        width: 100%;
    }

    .downloads-hero-copy[b-aid91xiwxp],
    .downloads-hero-image[b-aid91xiwxp] {
        float: none;
        display: block;
        width: 100%;
    }
}
/* /LearnerApp/Pages/MainApp/Home.razor.rz.scp.css */
/*
    Home. Two columns on a desktop: the park sign on the left, the start menu on the
    right. Below 62rem they stack, the sign becomes a banner, and the menu takes the full
    width -- at 390px the right-hand column clipped every menu label.

    .home-split owns the whole layout -- display, direction, justification and height.
    None of it can live in markup classes: `flex-row` and `justify-content-end` are
    `!important` in the baseline, so a media query could not override them, and the sign
    ended up 345px off the left edge of a phone.
*/

.home-split[b-m7w9c53r5b] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 100vh;
}

@media (max-width: 62rem) {
    .home-split[b-m7w9c53r5b] {
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
        min-height: 100svh;
    }

    /* Both halves are .col-6, which is a 50% flex basis. Full width once stacked. */
    .home-split > .home-sign[b-m7w9c53r5b],
    .home-split > .home-menu[b-m7w9c53r5b] {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    /* The sign is decorative; cap it so the menu is above the fold. */
    .home-sign[b-m7w9c53r5b] {
        justify-content: flex-start;
        max-height: 26svh;
    }

    .home-sign .img[b-m7w9c53r5b] {
        max-height: 26svh;
        width: auto;
        object-fit: contain;
        object-position: left center;
    }

    /* m-5 and p-5 are ~3rem each, which leaves very little room for the labels. */
    .home-menu-outer[b-m7w9c53r5b] {
        margin: 0;
    }

    .home-menu-inner[b-m7w9c53r5b] {
        padding: 1rem 1.25rem;
        width: 100%;
    }
}

@media (max-width: 36rem) {
    .home-sign[b-m7w9c53r5b],
    .home-sign .img[b-m7w9c53r5b] {
        max-height: 18svh;
    }
}
/* /LearnerApp/Pages/MainApp/MyCourses.razor.rz.scp.css */
/*
    My Courses, phone layout.

    The desktop design overlaps the tab strip onto the "Start New Course" row with a
    negative top margin and pins the card to 88vh. Stacked in a single column those
    become a collision and a fixed-height box that cannot hold its contents.

    Everything here is !important because the rules being overridden are: the spacing
    utilities carry it, and the card height is an inline style.
*/

@media (max-width: 62rem) {
    .canvas[b-63ludbqm4l] {
        height: auto;
        min-height: 0;
        margin-inline: 0.75rem;
        margin-top: 0.75rem;
    }

    /* Stops the tab strip landing on top of the button above it. */
    .nmt-4[b-63ludbqm4l] {
        margin-top: 0;
    }

    /* The inner scroller is sized to a fraction of the viewport, which leaves a very
       short window on a phone. Let the page scroll instead. */
    .vh-75[b-63ludbqm4l] {
        height: auto;
        max-height: none;
    }

    /* mx-5 is 3rem a side, most of a phone's width. */
    .tile.bg-beige[b-63ludbqm4l] {
        margin-inline: 0.5rem;
    }

    /* The completion stamps sit in a row that runs past the card on a narrow screen. */
    .stamp[b-63ludbqm4l] {
        margin-inline: 0.25rem;
    }
}
/* /LearnerApp/Pages/MainApp/PracticeOrchestrator.razor.rz.scp.css */
/*
    The practice activity tiles.

    Their artwork is not one kind of thing: the canoe game has a painted scene in a wide
    frame, while the others are square activity icons. Sizing the image to the tile width
    made the icons tower over the scene and left a tile blank when its icon happened to be
    drawn in the same cream as the tile itself. Every tile now gets the same picture area,
    the artwork is fitted inside it rather than cropped to it, and the area carries a ground
    dark enough for a light icon to read against.

    Prefixed .prac-tile because scoped stylesheets are emitted unscoped into the bundle as
    well, so an unprefixed class here would be global.
*/

.prac-tile__media[b-0k1j4j6221] {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;

    border-radius: 0.5rem;
    background-color: color-mix(in srgb, var(--core-color) 88%, black);
}

.prac-tile__art[b-0k1j4j6221] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* A square icon would otherwise stretch to the full width of a 4:3 frame. Nothing here is
   a photograph, so leaving it room reads as deliberate. */
.prac-tile__media .prac-tile__art[src$=".svg"][b-0k1j4j6221] {
    width: 62%;
    height: 62%;
}
/* /LearnerApp/Pages/MainApp/UserProfile/UserProfilePage.razor.rz.scp.css */
/*
    The profile page's own layout.

    Component-scoped rather than added to Styles/learner/, because every rule here
    describes this one page's arrangement and nothing else should pick them up. It also
    keeps the change out of the Tailwind bundle, which has to be rebuilt through npm and
    committed as a build artifact.

    The section, profile-field and action rules are written with ::deep so that the same rhythm
    reaches UserProfileEditor and UserProfileInfo, which render inside this page. The
    alternative was a copy of this file per component, which is how three tabs ended up
    with five heading treatments in the first place.

    Colours come from the learner tokens rather than being restated, so the three course
    themes remap this page along with everything else.
*/

/* The profile-identity card.

   The page never said whose profile it was: it opened straight into three tabs of form
   controls, and the avatar -- the one piece of the product a learner actually chooses --
   was hidden behind the third of them. This puts the person at the top of their own
   page, and it updates live while they try profile-avatars on. */
.profile-identity[b-56o3tkd0sy] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.25rem 0.25rem 1.25rem;
}

.profile-identity__portrait[b-56o3tkd0sy] {
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
}

/* circle-stamp sizes itself for the selection grid, so the portrait sets its own box and
   lets the stamp's border and dotted ring scale into it. */
.profile-identity__portrait[b-56o3tkd0sy]  .circle-stamp {
    width: 100%;
    height: 100%;
    margin: 0;
}

.profile-identity__text[b-56o3tkd0sy] {
    min-width: 0;
}

.profile-identity__name[b-56o3tkd0sy] {
    margin: 0;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--core-color);
    overflow-wrap: anywhere;
}

/* The other names a person goes by.

   These were one small orange line at 1rem under a 2.5rem heading -- close enough to a
   tenth of the size that they read as a caption rather than as the username. They are
   labelled now, because "Little Bear" and "RoomDream03" are both just words beside a
   face and nothing said which was which, and set at 1.25rem so the gap to the name is a
   step rather than a cliff. */
.profile-identity__names[b-56o3tkd0sy] {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    gap: 0.15rem 0.75rem;
    margin: 0.45rem 0 0;
}

.profile-identity__names dt[b-56o3tkd0sy] {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color-light);
    font-weight: 600;
}

.profile-identity__names dd[b-56o3tkd0sy] {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--accent-color-2);
    overflow-wrap: anywhere;
}

.profile-identity__note[b-56o3tkd0sy] {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: var(--primary-color-light);
}

@media (max-width: 480px) {
    .profile-identity__names[b-56o3tkd0sy] {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .profile-identity__names dd[b-56o3tkd0sy] {
        margin-bottom: 0.4rem;
    }
}

/* One profile-section rhythm for the whole page.

   There were five heading treatments across three tabs -- title-case serif, slab caps, a
   serif heading with a trailing colon -- and three different box styles. A profile-section is a
   heading, the app's dotted rule, and content, everywhere. */
/* Sections are cards.

   Flattening them onto the canvas removed the old page's redundancy but took its
   structure with it: every control ended up floating in one undifferentiated yellow
   field, and nothing said where one concern stopped and the next began. These are the
   app's own tile -- 1.2rem radius, the beige border, the soft beige glow -- so the page
   reads like the rest of the product rather than like a form on a background. */
[b-56o3tkd0sy] .profile-section {
    background-color: var(--neutral-100);
    border: 2px solid var(--neutral-300);
    border-radius: 1.2rem;
    box-shadow: 0 0 20px 0 rgba(227, 206, 151, 0.4);
    padding: 1.25rem clamp(1rem, 2vw, 1.75rem) 1.4rem;
}

[b-56o3tkd0sy] .profile-section + .profile-section {
    margin-top: 1.25rem;
}

[b-56o3tkd0sy] .profile-section__heading {
    margin: 0 0 0.5rem;
    color: var(--core-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Groups within a card, separated by the app's rule rather than by another card. */
[b-56o3tkd0sy] .profile-subsection {
    margin-top: 1.35rem;
    padding-top: 1.35rem;
    border-top: 2px dashed var(--neutral-400);
}

[b-56o3tkd0sy] .profile-subheading {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    color: var(--core-color);
}

/* Sits inside the card now, so it spans the card rather than the page. */
[b-56o3tkd0sy] .profile-section__rule {
    border: 0;
    border-top: 2px dashed var(--neutral-400);
    margin: 0 0 0.9rem;
    opacity: 1;
}

/* The tab strip is a sibling of the tab body, not a wrapper around it, so the first
   heading in every tab was rendering underneath the pills. */
[b-56o3tkd0sy] .profile-panel {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}

/* Hints were set in the app's smallest utility size, which lands around 9px here -- small
   enough that the sentence explaining a control was harder to read than the control. */
[b-56o3tkd0sy] .profile-hint {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--primary-color-light);
}

/* Wrapping the text in the label makes it a hit target, which it was not before.

   Deliberately not flex, and deliberately not setting a margin on the input. The learner
   checkbox is skinned with an :after box pulled up and left by negative margins, and the
   clearance it needs comes from the input's own margin-right: 1.8rem. Zeroing that -- or
   replacing it with a flex gap -- puts the skin straight on top of the text, which is
   what a first attempt here did. */
[b-56o3tkd0sy] .profile-checkbox {
    display: block;
    margin: 0;
    cursor: pointer;
}

/* An empty profile-value is an invitation, not a fault. "Not set" was rendered in the same alarm
   orange the app uses for errors, which made an ordinary blank look broken. */
[b-56o3tkd0sy] .profile-value {
    margin: 0;
    color: var(--black-color);
    overflow-wrap: anywhere;
}

[b-56o3tkd0sy] .profile-value--empty {
    color: var(--primary-color-light);
    font-style: italic;
}

/* Fields sized to what goes in them. A last initial is one character and was given the
   same box as a full name. */
[b-56o3tkd0sy] .profile-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    align-items: flex-start;
}

[b-56o3tkd0sy] .profile-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

[b-56o3tkd0sy] .profile-field > label {
    margin-bottom: 0.25rem;
    color: var(--core-color);
}

[b-56o3tkd0sy] .profile-field--name { flex: 1 1 16rem; max-width: 22rem; }
[b-56o3tkd0sy] .profile-field--initial { flex: 0 0 6rem; }
[b-56o3tkd0sy] .profile-field--spirit { flex: 1 1 20rem; max-width: 28rem; }

[b-56o3tkd0sy] .profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.35rem;
}

/* The read-only profile-record shown to a learner whose organization owns the account. A
   definition list, because that is what it is: labels paired with values. */
[b-56o3tkd0sy] .profile-record {
    display: grid;
    grid-template-columns: minmax(7rem, 12rem) 1fr;
    gap: 0.6rem 1.25rem;
    margin: 0;
}

[b-56o3tkd0sy] .profile-record dt {
    margin: 0;
    color: var(--core-color);
    font-weight: 600;
}

[b-56o3tkd0sy] .profile-record dd {
    margin: 0;
    color: var(--black-color);
    overflow-wrap: anywhere;
}

@media (max-width: 520px) {
    [b-56o3tkd0sy] .profile-record {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    [b-56o3tkd0sy] .profile-record dd {
        margin-bottom: 0.6rem;
    }
}

/* The avatar grid sat flush against the tab strip, with a dangling rule beneath it left
   over from a save button that could never render. */
.profile-avatars[b-56o3tkd0sy] {
    margin: 0.25rem 0 0;
}

@media (max-width: 640px) {
    .profile-identity[b-56o3tkd0sy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    [b-56o3tkd0sy] .profile-actions {
        justify-content: stretch;
    }

    [b-56o3tkd0sy] .profile-actions > * {
        flex: 1 1 auto;
    }
}