/* Lesson plan builder — educator authoring surface and the student lesson page.
   Compact and plain, but every control states what it does: nothing important is hover-only, and
   the one control whose purpose is not self-evident — marking an answer correct — is labelled in
   place. Tap targets stay at or above 1.8rem so the density does not cost usability on a phone.

   Colour comes only from the site theme tokens, which SiteThemeConfig writes per site from the
   database. Nothing here hardcodes a brand colour, so a site that changes its accent changes the
   lesson pages with it. Pass/fail are the one exception: green and red carry meaning a student
   expects, so they are defined per colour mode below and always paired with words and an icon
   rather than being the only signal. */

html[data-theme="light"],
html:not([data-theme]) {
    --lesson-pass: #1c7a4d;
    --lesson-fail: #b0431d;
    --lesson-mix: #ffffff;
}

html[data-theme="dark"] {
    --lesson-pass: #5ac68b;
    --lesson-fail: #ef8c65;
    --lesson-mix: #000000;
}

.lesson-builder,
.lesson-view {
    /* Surfaces are mixed from theme tokens rather than being fixed greys, so panels keep their
       relationship to the page background whatever the site's palette is. */
    --lesson-raised: color-mix(in srgb, var(--text-primary) 4%, var(--surface-bg));
    --lesson-sunken: color-mix(in srgb, var(--text-primary) 9%, var(--surface-bg));
    --lesson-line: var(--border-color);
    --lesson-line-soft: color-mix(in srgb, var(--border-color) 60%, transparent);
    /* Thin borders need more contrast than thick ones to read as deliberate. */
    --lesson-line-strong: var(--border-color-strong, color-mix(in srgb, var(--border-color) 70%, var(--text-primary)));
    --lesson-accent: var(--accent-primary, var(--accent-gold));
    --lesson-accent-soft: color-mix(in srgb, var(--lesson-accent) 12%, var(--surface-bg));
    --lesson-accent-line: color-mix(in srgb, var(--lesson-accent) 55%, var(--border-color));
    --lesson-pass-soft: color-mix(in srgb, var(--lesson-pass) 14%, var(--surface-bg));
    --lesson-pass-line: color-mix(in srgb, var(--lesson-pass) 50%, var(--border-color));
    --lesson-fail-soft: color-mix(in srgb, var(--lesson-fail) 14%, var(--surface-bg));
    --lesson-fail-line: color-mix(in srgb, var(--lesson-fail) 50%, var(--border-color));
    --lesson-radius: var(--radius-md, 12px);
    --lesson-radius-sm: var(--radius-sm, 8px);
}

/* ----- Shared -------------------------------------------------------------- */

.lesson-label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
    color: var(--text-primary);
}

.lesson-hint {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0.35rem 0 0;
}

.lesson-field {
    margin-bottom: 1.25rem;
}

/* ----- Shared: code blocks ----------------------------------------------- */

/* A snippet shown with a question. Text rather than markup all the way through, so a student reads
   exactly what was pasted. It scrolls sideways instead of wrapping, because a folded line of code reads
   as a line of code that is not there. */
.lesson-code {
    margin: 0 0 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--lesson-line-soft);
    border-radius: var(--lesson-radius-sm);
    background: var(--lesson-sunken);
    color: var(--text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    tab-size: 4;
    white-space: pre;
    overflow-x: auto;
}

/* The page's own inline-code styling would otherwise put a second background inside the block. */
.lesson-code code {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
}

/* Lines up with the question's words rather than the number beside them. */
.lesson-q > .lesson-code {
    margin-left: 2rem;
}

.lesson-code-add {
    padding: 0;
    font-size: 0.85rem;
}

.lesson-code-edit {
    margin-bottom: 0.6rem;
}

.lesson-code-edit-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.lesson-code-edit-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Matches the block students end up seeing, so the educator is typing into what they will get. */
.lesson-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    line-height: 1.55;
    tab-size: 4;
    white-space: pre;
    overflow-x: auto;
}

/* ----- Shared: link destinations ---------------------------------------- */

/* A video plays where the step is, at the ratio every platform serves. */
.lesson-media {
    position: relative;
    margin: 0.85rem 0 0.65rem;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--lesson-line-soft);
    border-radius: var(--lesson-radius);
    background: var(--lesson-sunken);
    overflow: hidden;
}

.lesson-media-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* The destination's own picture and words, so a student knows where a link goes before taking it. */
.lesson-link-card {
    display: flex;
    align-items: stretch;
    margin: 0.6rem 0;
    border: 1px solid var(--lesson-line-soft);
    border-radius: var(--lesson-radius);
    background: var(--lesson-raised);
    overflow: hidden;
}

/* A fixed column whose height follows the words beside it, with a floor so a one-line card still shows a
   picture rather than a strip. The image is placed inside it so a portrait thumbnail — which plenty of
   sites serve — is cropped instead of making the card as tall as itself. */
.lesson-link-card-media {
    position: relative;
    flex: 0 0 auto;
    width: 9.5rem;
    min-height: 5.5rem;
    background: var(--lesson-sunken);
    overflow: hidden;
}

.lesson-link-card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lesson-link-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.7rem 0.85rem;
}

.lesson-link-card-title,
.lesson-link-card-text {
    /* Clamped so a long headline or blurb cannot push the card out of shape. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.lesson-link-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--heading-color, var(--text-primary));
}

.lesson-link-card-text {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.lesson-link-card-source {
    margin-top: 0.15rem;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Student side only: the whole card opens the link. */
.lesson-link-card-open {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--lesson-radius);
}

.lesson-link-card-open:hover .lesson-link-card,
.lesson-link-card-open:focus-visible .lesson-link-card {
    border-color: var(--lesson-accent-line);
    background: var(--lesson-accent-soft);
}

.lesson-link-card-open:focus-visible {
    outline: 2px solid var(--lesson-accent);
    outline-offset: 2px;
}

.lesson-inline-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 10rem;
}

.lesson-inline-suffix {
    color: var(--text-muted);
}

.lesson-note {
    border-radius: var(--lesson-radius-sm);
    padding: 0.85rem 1rem;
    margin: 1rem 0;
    border-left: 4px solid var(--lesson-accent);
    background: var(--lesson-raised);
}

.lesson-note-title {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.lesson-note-ok {
    border-left-color: var(--lesson-pass);
    background: var(--lesson-pass-soft);
}

.lesson-note-warn {
    border-left-color: var(--lesson-fail);
    background: var(--lesson-fail-soft);
}

.lesson-note-info {
    border-left-color: var(--lesson-accent);
    background: var(--lesson-accent-soft);
}

.lesson-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.35rem 0;
    cursor: pointer;
}

.lesson-check.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.lesson-check input {
    margin-top: 0.25rem;
    flex: 0 0 auto;
}

.lesson-confirm {
    border: 1px solid var(--lesson-line);
    border-left: 4px solid var(--lesson-fail);
    border-radius: var(--lesson-radius-sm);
    padding: 1rem;
    margin: 1rem 0;
    background: var(--lesson-raised);
}

.lesson-confirm-inline {
    margin: 0.5rem 0;
}

/* The step card carries no padding of its own — its header and body each bring their own — so a
   confirmation that appears between them has to keep itself off the card's edges. */
.lesson-step > .lesson-confirm-inline {
    margin: 0 0.85rem 0.85rem;
}

.lesson-confirm-text {
    margin-bottom: 0.75rem;
}

.lesson-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Status chips. Presence-based selectors throughout, because Blazor omits a data attribute
   entirely when its value is false rather than writing data-x="false". */

.lesson-warn-chip,
.lesson-ok-chip,
.lesson-info-chip {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.lesson-warn-chip {
    background: var(--lesson-fail-soft);
    color: color-mix(in srgb, var(--lesson-fail) 80%, var(--text-primary));
}

.lesson-ok-chip {
    background: var(--lesson-pass-soft);
    color: color-mix(in srgb, var(--lesson-pass) 80%, var(--text-primary));
}

.lesson-info-chip {
    background: var(--lesson-accent-soft);
    color: color-mix(in srgb, var(--lesson-accent) 70%, var(--text-primary));
}

/* Small square icon buttons, used for reorder and remove. */
.lesson-icon-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    font-size: 0.85rem;
    line-height: 1;
    border: 1px solid var(--lesson-line);
    border-radius: var(--lesson-radius-sm);
    background: var(--surface-bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lesson-icon-btn:hover:not(:disabled) {
    border-color: var(--lesson-accent-line);
    background: var(--lesson-accent-soft);
    color: var(--text-primary);
}

.lesson-icon-btn.is-danger:hover:not(:disabled) {
    border-color: var(--lesson-fail-line);
    background: var(--lesson-fail-soft);
    color: color-mix(in srgb, var(--lesson-fail) 85%, var(--text-primary));
}

.lesson-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.lesson-icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--lesson-accent) 45%, transparent));
}

/* ----- Educator: lesson tabs ---------------------------------------------- */

.lesson-builder-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--lesson-line);
    padding-bottom: 0.75rem;
}

.lesson-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 8.5rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--lesson-line);
    border-radius: var(--lesson-radius-sm);
    background: var(--surface-bg);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lesson-tab:hover {
    border-color: var(--lesson-accent-line);
}

.lesson-tab.is-active {
    border-color: var(--lesson-accent);
    background: var(--lesson-accent-soft);
    box-shadow: inset 0 -3px 0 var(--lesson-accent);
}

.lesson-tab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--lesson-accent) 45%, transparent));
}

.lesson-tab-title {
    font-weight: 600;
}

.lesson-tab-state {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lesson-tab-state.is-live {
    color: var(--lesson-pass);
}

.lesson-tab-state.is-draft {
    color: var(--text-muted);
}

.lesson-tab-add {
    min-width: auto;
    justify-content: center;
    font-weight: 600;
}

/* ----- Educator: empty state --------------------------------------------- */

.lesson-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    max-width: 34rem;
    margin: 0 auto;
}

.lesson-empty-title {
    margin-bottom: 0.75rem;
}

.lesson-empty-text {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* ----- Educator: publish status ------------------------------------------ */

.lesson-status {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    border-radius: var(--lesson-radius);
    margin-bottom: 1.25rem;
    border: 1px solid var(--lesson-line);
    background: var(--lesson-raised);
}

.lesson-status.is-live {
    border-left: 5px solid var(--lesson-pass);
    background: var(--lesson-pass-soft);
}

.lesson-status.is-draft {
    border-left: 5px solid var(--text-muted);
}

.lesson-status-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.lesson-status-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* A fieldset carries a browser default border and padding that would read as a stray box here.
   Its disabled state is the published lesson's read-only cue, so it is made visible rather than
   left to the faint default. */
.lesson-fields {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.lesson-fields:disabled {
    opacity: 0.7;
}

.lesson-fields:disabled .form-control {
    background: var(--lesson-sunken);
    cursor: not-allowed;
}

.lesson-status-title {
    font-size: 1.1rem;
}

.lesson-status-detail {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ----- Educator: share --------------------------------------------------- */

.lesson-share {
    padding: 1.25rem;
    border-radius: var(--lesson-radius);
    background: var(--lesson-raised);
    border: 1px solid var(--lesson-line-soft);
    margin-bottom: 1.5rem;
}

.lesson-share-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.lesson-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.lesson-share-input {
    flex: 1 1 20rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
}

/* ----- Educator: steps -------------------------------------------------- */

.lesson-steps {
    margin: 2rem 0;
}

.lesson-steps-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.lesson-steps-title {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0;
}

.lesson-steps-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
}

.lesson-collapse-all {
    padding: 0;
    font-size: 0.875rem;
}

/* A step is a closed card until it is opened, so a lesson of ten reads as a list of ten lines rather
   than ten forms. Padding lives on the header and the body rather than the card, so the header can
   light up across its full width on hover. */
.lesson-step {
    border: 1px solid var(--lesson-line);
    border-radius: var(--lesson-radius);
    margin-bottom: 0.6rem;
    background: var(--surface-bg);
}

.lesson-step.is-quiz {
    border-left: 4px solid var(--lesson-accent);
}

.lesson-step.is-open {
    border-color: var(--lesson-line-strong);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.lesson-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
}

/* The whole line opens the step. Reorder and remove sit outside it, because a button inside a button
   is not a thing a browser will render. */
.lesson-step-toggle {
    flex: 1 1 14rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.15rem 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.lesson-step-toggle:hover .lesson-step-name {
    color: var(--lesson-accent);
}

.lesson-step-toggle:focus-visible {
    outline: none;
    border-radius: var(--lesson-radius-sm);
    box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--lesson-accent) 45%, transparent));
}

.lesson-step-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Both lines are cut off rather than wrapped: a closed step is meant to stay one row tall. */
.lesson-step-name,
.lesson-step-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-step-name {
    font-weight: 600;
}

.lesson-step-summary {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.lesson-step-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--lesson-sunken);
}

.lesson-step-kind {
    display: inline-block;
    margin-right: 0.45rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: 0.08em;
    background: var(--lesson-sunken);
    color: var(--text-muted);
}

.lesson-step.is-quiz .lesson-step-kind {
    background: var(--lesson-accent-soft);
    color: var(--lesson-accent);
}

/* Drawn rather than typed, so it turns rather than swaps and never picks up a font's own spacing.
   Sized in a box of its own so the rotation does not shift the name beside it. */
.lesson-step-chevron,
.lesson-question-chevron {
    flex: 0 0 auto;
    position: relative;
    width: 0.7rem;
    height: 0.7rem;
    opacity: 0.55;
}

.lesson-step-chevron::before,
.lesson-question-chevron::before {
    content: "";
    position: absolute;
    top: 0.1rem;
    left: 0.1rem;
    width: 0.42rem;
    height: 0.42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.18s ease;
}

.lesson-step.is-open .lesson-step-chevron::before,
.lesson-question.is-open .lesson-question-chevron::before {
    transform: rotate(45deg);
}

.lesson-step-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.lesson-step-move {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.lesson-step-body {
    padding: 1rem 0.9rem 1.1rem;
    border-top: 1px solid var(--lesson-line-soft);
    animation: lesson-open 0.16s ease-out;
}

@keyframes lesson-open {
    from {
        opacity: 0;
        transform: translateY(-0.2rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lesson-step-body,
    .lesson-question-body {
        animation: none;
    }

    .lesson-step-chevron::before,
    .lesson-question-chevron::before {
        transition: none;
    }
}

.lesson-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.lesson-add-btn {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-align: left;
    flex: 1 1 14rem;
    padding: 0.75rem 1rem;
}

.lesson-add-btn strong {
    display: block;
}

.lesson-add-btn small {
    display: block;
    font-weight: 400;
    opacity: 0.8;
}

.lesson-add-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.lesson-step-advanced,
.lesson-advanced {
    margin-top: 1rem;
    border-top: 1px dashed var(--lesson-line);
    padding-top: 0.75rem;
}

.lesson-step-advanced > summary,
.lesson-advanced > summary,
.lesson-results > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.lesson-step-advanced > summary:hover,
.lesson-advanced > summary:hover,
.lesson-results > summary:hover {
    color: var(--text-primary);
}

.lesson-step-advanced-body,
.lesson-advanced-body,
.lesson-results-body {
    padding-top: 1rem;
}

/* ----- Educator: quiz authoring ----------------------------------------- */

.lesson-quiz-editor {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--lesson-line-soft);
}

.lesson-quiz-editor-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.lesson-quiz-editor-count {
    font-weight: 600;
    font-size: 0.95rem;
}

.lesson-quiz-empty {
    padding: 1.5rem;
    border: 1px dashed var(--lesson-line);
    border-radius: var(--lesson-radius);
    text-align: center;
    background: var(--lesson-raised);
    margin-bottom: 1rem;
}

.lesson-quiz-empty-title {
    font-weight: 600;
    margin: 0;
}

.lesson-quiz-empty .lesson-hint {
    max-width: 28rem;
    margin: 0.35rem auto 0;
}

.lesson-question {
    border: 1px solid var(--lesson-line-soft);
    border-radius: var(--lesson-radius);
    margin-bottom: 0.5rem;
    background: var(--lesson-raised);
}

/* An unfinished question is flagged on the card itself, not only in the chip, so it is obvious
   which one still needs work when several are on screen. */
.lesson-question:not([data-ready]) {
    border-left: 3px solid var(--lesson-fail);
}

.lesson-question[data-ready] {
    border-left: 3px solid var(--lesson-pass);
}

.lesson-question-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.75rem;
}

.lesson-question-toggle {
    flex: 1 1 12rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.1rem 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.lesson-question-toggle:hover .lesson-question-name {
    color: var(--lesson-accent);
}

.lesson-question-toggle:focus-visible {
    outline: none;
    border-radius: var(--lesson-radius-sm);
    box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--lesson-accent) 45%, transparent));
}

.lesson-question-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.lesson-question-name,
.lesson-question-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-question-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.lesson-question-summary {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.lesson-question-body {
    padding: 0.85rem 0.75rem 0.9rem;
    border-top: 1px solid var(--lesson-line-soft);
    animation: lesson-open 0.16s ease-out;
}

.lesson-question-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.82rem;
    background: var(--lesson-sunken);
    color: var(--text-primary);
}

.lesson-question-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.lesson-question-tools {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.lesson-question-text {
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.lesson-choice-guide {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0 0 0.6rem;
}

.lesson-choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

.lesson-choice {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* The correct-answer control is a letter that fills in when pressed. It reads as an answer label
   first and a toggle second, which is the order an educator thinks in. */
.lesson-choice-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* A fixed-width pill rather than a circle: the marker gains a tick when it is the correct answer,
       and reserving the room up front means toggling one does not shift the row. */
    width: 2.6rem;
    height: 1.85rem;
    padding: 0;
    border: 1.5px solid var(--lesson-line);
    border-radius: 1rem;
    background: var(--surface-bg);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lesson-choice-mark:hover {
    border-color: var(--lesson-pass-line);
}

.lesson-choice-mark:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--lesson-accent) 45%, transparent));
}

.lesson-choice[data-correct] .lesson-choice-mark {
    border-color: var(--lesson-pass);
    background: var(--lesson-pass);
    color: var(--lesson-mix);
}

.lesson-choice[data-correct] .lesson-choice-letter::after {
    content: "✓";
    margin-left: 0.25em;
    font-size: 0.8em;
}

.lesson-add-question {
    margin-top: 0.5rem;
}

/* ----- Educator: mode + advanced --------------------------------------- */

.lesson-mode-panel {
    margin: 2rem 0;
    padding: 1.25rem;
    border-radius: var(--lesson-radius);
    border: 1px solid var(--lesson-line);
}

.lesson-mode-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.lesson-mode-choice {
    flex: 1 1 16rem;
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid var(--lesson-line);
    border-radius: var(--lesson-radius-sm);
    cursor: pointer;
    background: var(--surface-bg);
}

.lesson-mode-choice.is-selected {
    border-color: var(--lesson-accent);
    background: var(--lesson-accent-soft);
}

.lesson-mode-choice input {
    margin-top: 0.3rem;
}

.lesson-mode-choice strong {
    display: block;
    margin-bottom: 0.2rem;
}

.lesson-mode-choice small {
    color: var(--text-muted);
}

/* ----- Educator: results ----------------------------------------------- */

.lesson-editor-footer {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--lesson-line);
}

.lesson-results-scroll {
    overflow-x: auto;
}

.lesson-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.lesson-results-table th,
.lesson-results-table td {
    text-align: left;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--lesson-line-soft);
    white-space: nowrap;
}

.lesson-results-table th {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--lesson-line);
}

.lesson-results-table tbody tr:hover {
    background: var(--lesson-raised);
}

.lesson-results-email {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
}

.lesson-unverified {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--lesson-fail) 80%, var(--text-primary));
}

.lesson-chip {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 1rem;
    font-size: 0.78rem;
    background: var(--lesson-sunken);
}

.lesson-chip.is-done {
    background: var(--lesson-pass-soft);
    color: color-mix(in srgb, var(--lesson-pass) 80%, var(--text-primary));
}

.lesson-score small {
    display: block;
    font-size: 0.72rem;
    opacity: 0.75;
}

.lesson-score.is-pass {
    color: var(--lesson-pass);
}

.lesson-score.is-fail {
    color: var(--lesson-fail);
}

.lesson-danger-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* ----- Student: page ---------------------------------------------------- */

/* The student page carries no site header, so it makes its own room at the top: pinned to the very top of
   the window, the title reads as a fragment of a page rather than the start of one. */
.lesson-view {
    max-width: 44rem;
    margin: 0 auto;
    padding: 3rem 1rem 3.5rem;
}

@media (max-width: 640px) {
    .lesson-view {
        padding-top: 1.75rem;
    }
}

.lesson-view-message {
    text-align: center;
    padding: 3rem 1rem;
}

.lesson-page-head {
    margin-bottom: 1.5rem;
}

.lesson-page-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    margin-bottom: 0.75rem;
}

.lesson-page-intro {
    font-size: var(--text-size-subtitle, 1.15rem);
    color: var(--text-muted);
}

.lesson-resume {
    padding: 0.75rem 1rem;
    border-radius: var(--lesson-radius-sm);
    background: var(--lesson-accent-soft);
    border-left: 3px solid var(--lesson-accent);
    margin-bottom: 1.5rem;
}

.lesson-who {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--text-muted);
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--lesson-line-soft);
}

.lesson-who-switch {
    color: var(--link-color);
    text-decoration: underline;
    white-space: nowrap;
}

/* ----- Student: overall progress --------------------------------------- */

.lesson-progress {
    margin-bottom: 1.5rem;
}

.lesson-progress-bar,
.lesson-quiz-progress-bar {
    height: 0.6rem;
    border-radius: 1rem;
    background: var(--lesson-sunken);
    overflow: hidden;
}

.lesson-progress-bar > span,
.lesson-quiz-progress-bar > span {
    display: block;
    height: 100%;
    border-radius: 1rem;
    background: var(--lesson-accent);
    transition: width 0.35s ease;
}

.lesson-progress-text {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ----- Student: identity ------------------------------------------------ */

.lesson-identity {
    padding: 1.25rem;
    border-radius: var(--lesson-radius);
    border: 1px solid var(--lesson-line);
    background: var(--lesson-raised);
    margin-bottom: 1.75rem;
}

.lesson-identity-title {
    font-size: 1.15rem;
    margin-bottom: 0.4rem;
}

.lesson-identity-lead {
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.lesson-identity-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
}

.lesson-disclosure {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 1rem 0;
}

/* ----- Student: steps -------------------------------------------------- */

.lesson-step-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lesson-student-step {
    border: 1px solid var(--lesson-line);
    border-radius: var(--lesson-radius);
    padding: 1.05rem 1.15rem;
    background: var(--surface-bg);
}

.lesson-student-step.is-done {
    border-left: 4px solid var(--lesson-pass);
}

.lesson-student-step.is-locked {
    border-style: dashed;
    background: var(--lesson-raised);
}

/* Locked steps dim their body but keep the title readable, so the shape of the lesson stays
   legible while it is clear nothing there is actionable yet. */
.lesson-student-step.is-locked .lesson-student-step-title h3 {
    color: var(--text-muted);
}

.lesson-student-step-head {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.lesson-student-step-title {
    min-width: 0;
}

.lesson-student-step-title h3 {
    font-size: 1.02rem;
    margin: 0 0 0.3rem;
}

.lesson-student-step-number {
    color: var(--text-muted);
    margin-right: 0.15rem;
}

.lesson-student-step-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.lesson-kind {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background: var(--lesson-sunken);
    color: var(--text-muted);
}

.lesson-kind[data-kind="quiz"] {
    background: var(--lesson-accent-soft);
    color: color-mix(in srgb, var(--lesson-accent) 70%, var(--text-primary));
}

.lesson-kind-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.lesson-score-pill {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 1rem;
    white-space: nowrap;
}

.lesson-score-pill[data-outcome="pass"] {
    background: var(--lesson-pass-soft);
    color: color-mix(in srgb, var(--lesson-pass) 80%, var(--text-primary));
}

.lesson-score-pill[data-outcome="fail"] {
    background: var(--lesson-fail-soft);
    color: color-mix(in srgb, var(--lesson-fail) 80%, var(--text-primary));
}

/* A checkbox big enough to hit on a phone without zooming. The native input stays in the DOM for
   keyboard and screen readers; only its painting is replaced. */
.lesson-tick {
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
    display: inline-flex;
    padding-top: 0.2rem;
}

.lesson-tick input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.lesson-tick-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border: 1.5px solid var(--lesson-line);
    border-radius: 0.35rem;
    background: var(--surface-bg);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lesson-tick input:checked + .lesson-tick-box {
    border-color: var(--lesson-pass);
    background: var(--lesson-pass);
}

.lesson-tick input:checked + .lesson-tick-box::after {
    content: "✓";
    color: var(--lesson-mix);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}

.lesson-tick input:focus-visible + .lesson-tick-box {
    box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--lesson-accent) 45%, transparent));
}

.lesson-tick input:disabled + .lesson-tick-box {
    opacity: 0.5;
}

.lesson-tick:has(input:disabled) {
    cursor: not-allowed;
}

.lesson-locked {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.85rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.lesson-locked-icon {
    font-size: 0.95rem;
}

.lesson-student-notes {
    margin: 0.85rem 0;
}

.lesson-open-link {
    margin-top: 0.5rem;
}

/* ----- Student: quiz --------------------------------------------------- */

.lesson-quiz {
    margin-top: 1.15rem;
}

/* The three facts a student wants before starting: how long, what passes, how many tries. */
.lesson-quiz-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    border-radius: var(--lesson-radius-sm);
    background: var(--lesson-raised);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.lesson-quiz-meta-item strong {
    color: var(--text-primary);
}

.lesson-q {
    border: 0;
    padding: 0;
    margin: 0 0 1.25rem;
    /* A fieldset is given min-width: min-content by the browser, so a wide code block inside one would
       stretch the whole page sideways instead of scrolling within itself. */
    min-width: 0;
}

.lesson-q-legend {
    display: flex;
    gap: 0.55rem;
    align-items: baseline;
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: 0.55rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--heading-color, var(--text-primary));
}

.lesson-q-number {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 50%;
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--lesson-accent-soft);
    color: color-mix(in srgb, var(--lesson-accent) 75%, var(--text-primary));
}

.lesson-q-text {
    min-width: 0;
}

.lesson-q-hint {
    margin: -0.3rem 0 0.5rem 2rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.lesson-answers {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-left: 2rem;
}

/* Whole-row answer cards. The hit target is the card, not a 13px radio, which matters most on a
   phone. A round marker means one answer, a square marker means several. */
.lesson-answer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--lesson-line);
    border-radius: var(--lesson-radius-sm);
    background: var(--surface-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lesson-answer:hover {
    border-color: var(--lesson-accent-line);
    background: var(--lesson-accent-soft);
}

.lesson-answer[data-selected] {
    border-color: var(--lesson-accent);
    background: var(--lesson-accent-soft);
    box-shadow: inset 0 0 0 1px var(--lesson-accent);
}

.lesson-answer-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    margin: 0;
}

.lesson-answer:has(.lesson-answer-input:focus-visible) {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--lesson-accent) 45%, transparent));
}

.lesson-answer-marker {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border: 1.5px solid var(--lesson-line-strong);
    border-radius: 50%;
    background: var(--surface-bg);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.lesson-answer[data-multi] .lesson-answer-marker {
    border-radius: 0.35rem;
}

.lesson-answer[data-selected] .lesson-answer-marker {
    border-color: var(--lesson-accent);
    background: var(--lesson-accent);
    color: var(--accent-on-primary, var(--lesson-mix));
}

.lesson-answer-text {
    min-width: 0;
}

.lesson-quiz-submit {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.15rem;
    border-top: 1px solid var(--lesson-line-soft);
}

.lesson-quiz-progress {
    flex: 1 1 12rem;
    min-width: 0;
}

.lesson-quiz-progress-text {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* ----- Student: quiz outcome ------------------------------------------- */

.lesson-outcome {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-radius: var(--lesson-radius);
    background: var(--lesson-raised);
    border: 1px solid var(--lesson-line-soft);
    margin-bottom: 1.25rem;
}

/* Score as a ring: the number is the headline, and the arc gives it a shape you read at a glance
   without having to compare two figures. */
.lesson-outcome-ring {
    flex: 0 0 auto;
    position: relative;
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: conic-gradient(var(--lesson-ring-color) calc(var(--lesson-ring-pct, 0) * 1%),
            var(--lesson-sunken) 0);
}

.lesson-outcome-ring[data-outcome="pass"] {
    --lesson-ring-color: var(--lesson-pass);
}

.lesson-outcome-ring[data-outcome="fail"] {
    --lesson-ring-color: var(--lesson-fail);
}

.lesson-outcome-ring::before {
    content: "";
    position: absolute;
    inset: 0.42rem;
    border-radius: 50%;
    background: var(--lesson-raised);
}

.lesson-outcome-pct {
    position: relative;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.lesson-outcome-pct small {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

.lesson-outcome-detail {
    flex: 1 1 12rem;
    min-width: 0;
}

.lesson-outcome-verdict {
    margin: 0 0 0.15rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.lesson-outcome-verdict[data-outcome="pass"] {
    color: var(--lesson-pass);
}

.lesson-outcome-verdict[data-outcome="fail"] {
    color: var(--lesson-fail);
}

.lesson-outcome-count {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.lesson-outcome-sep {
    opacity: 0.5;
    margin: 0 0.15rem;
}

.lesson-outcome-note {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ----- Student: answer review ------------------------------------------ */

.lesson-review-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.lesson-review-hidden {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.lesson-review-item {
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.6rem;
    border-radius: var(--lesson-radius-sm);
    border: 1px solid var(--lesson-line-soft);
    background: var(--surface-bg);
}

.lesson-review-item[data-outcome="correct"] {
    border-left: 3px solid var(--lesson-pass);
}

.lesson-review-item[data-outcome="wrong"] {
    border-left: 3px solid var(--lesson-fail);
}

.lesson-review-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.lesson-review-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--lesson-mix);
}

.lesson-review-item[data-outcome="correct"] .lesson-review-icon {
    background: var(--lesson-pass);
}

.lesson-review-item[data-outcome="wrong"] .lesson-review-icon {
    background: var(--lesson-fail);
}

.lesson-review-number {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.lesson-review-verdict {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lesson-review-item[data-outcome="correct"] .lesson-review-verdict {
    color: var(--lesson-pass);
}

.lesson-review-item[data-outcome="wrong"] .lesson-review-verdict {
    color: var(--lesson-fail);
}

.lesson-review-text {
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.lesson-review-choices {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lesson-review-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0.65rem;
    border-radius: var(--lesson-radius-sm);
    background: var(--lesson-raised);
    font-size: 0.92rem;
}

.lesson-review-choice[data-correct] {
    background: var(--lesson-pass-soft);
}

.lesson-review-choice-text {
    min-width: 0;
}

.lesson-review-tag {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.12rem 0.45rem;
    border-radius: 1rem;
    background: var(--lesson-sunken);
    color: var(--text-muted);
    white-space: nowrap;
}

.lesson-review-tag.is-correct {
    background: var(--lesson-pass);
    color: var(--lesson-mix);
}

/* A choice that is both picked and correct shows two tags; only the first needs pushing right. */
.lesson-review-tag ~ .lesson-review-tag {
    margin-left: 0;
}

.lesson-quiz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1.25rem;
}

.lesson-quiz-actions-note {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ----- Student: completion summary ------------------------------------- */

.lesson-summary {
    border: 1px solid var(--lesson-accent);
    border-radius: var(--lesson-radius);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
    text-align: center;
    background: var(--lesson-accent-soft);
}

.lesson-summary-head {
    margin-bottom: 0.5rem;
}

.lesson-summary-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--lesson-accent) 75%, var(--text-primary));
    margin-bottom: 0.5rem;
}

.lesson-summary-title {
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    margin-bottom: 0.5rem;
}

.lesson-summary-name {
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.lesson-summary-date {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.lesson-summary-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

/* The ring sits on the summary's tinted panel, so its centre has to match that rather than the
   raised surface it uses inside a quiz. */
.lesson-summary-total .lesson-outcome-ring::before {
    background: var(--lesson-accent-soft);
}

.lesson-summary-total-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.lesson-summary-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    text-align: left;
}

.lesson-summary-row {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--lesson-line-soft);
}

.lesson-summary-check {
    color: var(--lesson-pass);
    font-weight: 700;
}

.lesson-summary-step {
    min-width: 0;
}

.lesson-summary-score {
    margin-left: auto;
    font-size: 0.88rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.lesson-summary-actions {
    margin-top: 1.5rem;
}

.lesson-confetti {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2000;
}

/* Print keeps the summary and drops everything a paper copy cannot use. */
@media print {
    .lesson-view {
        max-width: none;
        padding: 0;
    }

    .lesson-step-list,
    .lesson-who,
    .lesson-resume,
    .lesson-identity,
    .lesson-progress,
    .lesson-summary-actions,
    .lesson-confetti,
    /* An embedded player prints as an empty rectangle. */
    .lesson-media {
        display: none !important;
    }

    .lesson-summary {
        border-color: #000;
        background: none;
        page-break-inside: avoid;
    }
}

@media (prefers-reduced-motion: reduce) {

    .lesson-answer,
    .lesson-answer-marker,
    .lesson-choice-mark,
    .lesson-tick-box,
    .lesson-icon-btn,
    .lesson-tab,
    .lesson-progress-bar > span,
    .lesson-quiz-progress-bar > span {
        transition: none;
    }
}

@media (max-width: 640px) {

    .lesson-status,
    .lesson-who {
        flex-direction: column;
        align-items: flex-start;
    }

    .lesson-add-btn {
        flex: 1 1 100%;
    }

    .lesson-tab {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Indenting answers under the question number costs too much width on a phone. */
    .lesson-answers,
    .lesson-q-hint,
    .lesson-q > .lesson-code {
        margin-left: 0;
    }

    /* A 9.5rem thumbnail beside two clamped lines leaves nothing readable at this width. */
    .lesson-link-card {
        flex-direction: column;
    }

    .lesson-link-card-media {
        width: 100%;
        height: 8rem;
    }

    .lesson-quiz-submit .btn,
    .lesson-quiz-actions .btn {
        width: 100%;
    }

    .lesson-outcome {
        gap: 1rem;
    }

    .lesson-question-head {
        flex-wrap: wrap;
    }
}