/* =====================================================================
   Lesson list page (/lessons/{id}) and the library, which shows the
   same exercise cards. Everything is scoped under .lesson-page so these
   styles cannot leak into other pages (this file is imported globally by
   app.css). Look and tokens follow ModuleSelection and Progress.

   Hover: every :hover sits inside @media (hover: hover) and (pointer: fine)
   at the end of this file (see CLAUDE.md); touch gets :active instead.
   ===================================================================== */

/* ===== Tokens ===== */
.lesson-page {
    --ink: #1a1a1a;
    --ink-soft: #4a4f57;
    --ink-muted: #8a8f98;
    --line: #eceef3;
    --surface: #f7f8fa;
    --brand: #4d7cfe;
    --brand-soft: #f3f6ff;
    --brand-line: #c9d6ff;
    --done: #92cd4d;
    --done-ink: #5d8f22;
    --done-soft: #f4faec;
    --active: #f5c518;
    --active-ink: #8a6500;
    --active-soft: #fef9e7;
    --wrong: #d93639;
    --wrong-soft: #fff4f4;
    /* --page-max comes from LeftSideNavLayout (this page and the library use it) */
    --page-margin-top: 0px;
    --card-radius: 20px;
    --card-pad-y: 20px;
    --card-pad-x: 22px;
    --card-gap: 18px;
    --ring-size: 96px;
    --ring-width: 7px;
    --ring-font: 17px;
    --pill-pad: 0.25rem 0.75rem;
    --hero-title-font: 24px;
    --title-font: 19px;
    --body-font: 15px;
    --label-col: 180px;
    --icon-tile: 48px;
    font-family: 'Montserrat', sans-serif;
    color: var(--ink);
    max-width: var(--page-max);
    margin: var(--page-margin-top) auto 0;
    padding: 0 1rem 40px;
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
    text-align: left;
    user-select: none;
    -webkit-text-size-adjust: 100%;
}

    .lesson-page *,
    .lesson-page *::before,
    .lesson-page *::after {
        box-sizing: border-box;
    }

/* ===== Buttons: the same pills as NavigationButtons ===== */
.lesson-page .ls-btn {
    --btn-color: var(--brand);
    --btn-ink: var(--brand);
    --btn-fill-ink: #fff;
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 46px;
    padding: 0 28px;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    color: var(--btn-ink);
    background: #fff;
    border: 2px solid var(--btn-color);
    border-radius: 23px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

    /* Secondary buttons (show all words, admin fix): a size smaller */
    .lesson-page .ls-btn.is-sm {
        min-width: 0;
        height: 38px;
        padding: 0 20px;
        font-size: 14px;
        border-radius: 19px;
    }

    .lesson-page .ls-btn.is-primary {
        --btn-color: #4d7cfe;
        --btn-ink: #4d7cfe;
    }

    .lesson-page .ls-btn.is-done {
        --btn-color: #92cd4d;
        --btn-ink: var(--done-ink);
    }

    .lesson-page .ls-btn.is-premium {
        --btn-color: #edc829;
        --btn-ink: var(--active-ink);
        --btn-fill-ink: #1a1a1a;
    }

    .lesson-page .ls-btn.is-danger {
        --btn-color: var(--wrong);
        --btn-ink: var(--wrong);
    }

    /* Pressed: fills instantly (no transition, so even a quick tap shows it)
       and sinks slightly. Loading (is-busy): stays filled, with a spinner in
       place of the label, until the exercise opens. */
    .lesson-page .ls-btn:active:not(:disabled),
    .lesson-page .ls-btn.is-busy {
        transform: scale(0.97);
        background: var(--btn-color);
        color: var(--btn-fill-ink);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        transition-duration: 0s;
    }

    .lesson-page .ls-btn.is-busy {
        transform: none;
        cursor: progress;
    }

        .lesson-page .ls-btn.is-busy .ls-btn-label {
            visibility: hidden;
        }

        .lesson-page .ls-btn.is-busy::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 18px;
            height: 18px;
            margin: -9px 0 0 -9px;
            border: 2px solid currentColor;
            border-right-color: transparent;
            border-radius: 50%;
            animation: ls-spin 0.7s linear infinite;
        }

    .lesson-page .ls-btn:focus-visible {
        outline: 2px solid var(--btn-color);
        outline-offset: 2px;
    }

    .lesson-page .ls-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ===== Cards (shared by the header and every exercise) ===== */
.lesson-hero,
.lesson-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--card-radius);
    box-shadow: 0 1px 2px rgba(20, 30, 60, 0.04), 0 4px 14px rgba(20, 30, 60, 0.05);
    min-width: 0;
}

/* ===== Header: progress ring + group title ===== */
.lesson-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: var(--card-pad-y) var(--card-pad-x);
}

.lesson-hero-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.lesson-hero-eyebrow {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
    overflow-wrap: anywhere;
}

.lesson-hero-title {
    margin: 0;
    font-size: var(--hero-title-font);
    line-height: 1.25;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.lesson-hero-desc {
    margin: 0;
    font-size: var(--body-font);
    line-height: 1.5;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.lesson-hero-detail {
    margin: 2px 0 0;
    font-size: var(--body-font);
    line-height: 1.5;
    color: var(--ink-soft);
}

    .lesson-hero-detail strong {
        color: var(--ink);
        font-weight: 600;
    }

/* Ring: the same ring and colours as the module-selection page */
.lesson-ring {
    --ring-color: #4d7cfe;
    --ring-track: #e8eeff;
    --ring-inner: calc(var(--ring-size) - 2 * var(--ring-width));
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) calc(var(--progress) * 3.6deg), var(--ring-track) 0deg 360deg);
}

    .lesson-ring.is-done {
        --ring-color: #92cd4d;
        --ring-track: #e0f7e9;
    }

    .lesson-ring.is-active {
        --ring-color: #f5c518;
        --ring-track: #fef9e7;
    }

    .lesson-ring::after {
        content: "";
        position: absolute;
        width: var(--ring-inner);
        height: var(--ring-inner);
        border-radius: 50%;
        background: #fff;
    }

.lesson-ring-value {
    position: relative;
    z-index: 1;
    padding: var(--pill-pad);
    font-size: var(--ring-font);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #fff;
    background-color: var(--ring-color);
    border-radius: 999px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===== Exercise list ===== */
.lesson-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

    .lesson-list > li {
        list-style: none;
        min-width: 0;
    }

.lesson-card {
    --state-ink: var(--ink-muted);
    --state-soft: #f1f2f5;
    --tile-bg: #c9cdd4;
    overflow: hidden;
    scroll-margin-top: 90px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .lesson-card.is-done {
        --state-ink: var(--done-ink);
        --state-soft: var(--done-soft);
        --tile-bg: #92cd4d;
    }

    .lesson-card.is-active {
        --state-ink: var(--active-ink);
        --state-soft: var(--active-soft);
        --tile-bg: #edc829;
    }

    .lesson-card.is-next,
    .lesson-card.is-summary {
        --state-ink: var(--brand);
        --state-soft: var(--brand-soft);
        --tile-bg: #4d7cfe;
    }

    /* The card to work on now stands out, like the current lesson in the module list */
    .lesson-card.is-active,
    .lesson-card.is-next {
        border-color: var(--brand-line);
        box-shadow: 0 1px 2px rgba(77, 124, 254, 0.08), 0 6px 18px rgba(77, 124, 254, 0.12);
    }

    .lesson-card.is-locked > *,
    .lesson-card.is-summary-locked > * {
        opacity: 0.55;
    }

.lesson-card-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 16px;
    padding: var(--card-pad-y) var(--card-pad-x);
}

.lesson-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-tile);
    height: var(--icon-tile);
    border-radius: 14px;
    background: var(--tile-bg);
    flex-shrink: 0;
}

    .lesson-icon img {
        width: 58%;
        height: 58%;
        object-fit: contain;
        display: block;
    }

.lesson-titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.lesson-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
}

.lesson-type {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--ink-muted);
}

.lesson-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--state-ink);
    background: var(--state-soft);
    border-radius: 999px;
}

/* "Новый" (a lesson added behind where the student is) or "Черновик" (admins only). Not a state: same look on every card. */
.lesson-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    color: #fff;
    background: #d9480f;
    border-radius: 999px;
}

    .lesson-status::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
    }

.lesson-card.is-locked .lesson-status::before,
.lesson-card.is-summary-locked .lesson-status::before {
    width: 10px;
    height: 10px;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238a8f98'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.lesson-title {
    margin: 0;
    font-size: var(--title-font);
    line-height: 1.3;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* Holds the phone-only toggle and the action; on wide screens it is the head's
   last column and shows just the action. */
.lesson-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.lesson-action {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
}

    .lesson-action:not(:has(*)) {
        display: none;
    }

/* ===== Collapsed-card digest and toggle: phones only (see ≤ 640px) ===== */
.lesson-summary,
.lesson-toggle {
    display: none;
}

.lesson-summary-items {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
}

.lesson-page .ls-score-mini {
    --mini-fill: #4d7cfe;
    --mini-ink: #3a6aee;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 2px 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    color: var(--mini-ink);
    background: #f5f6f9;
    border-radius: 999px;
}

    .lesson-page .ls-score-mini.is-great {
        --mini-fill: #74b23a;
        --mini-ink: #4f7f1c;
    }

    .lesson-page .ls-score-mini.is-fair {
        --mini-fill: #e6ae00;
        --mini-ink: #8a6500;
    }

    .lesson-page .ls-score-mini.is-low {
        --mini-fill: #e5484d;
        --mini-ink: #c9282d;
    }

.ls-score-mini-track {
    width: 40px;
    height: 6px;
    border-radius: 999px;
    background: #e3e6ec;
    overflow: hidden;
}

.ls-score-mini-fill {
    display: block;
    height: 100%;
    width: var(--score);
    min-width: 4px;
    border-radius: inherit;
    background: var(--mini-fill);
}

.lesson-toggle {
    appearance: none;
    -webkit-appearance: none;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 44px;
    /* The negative margin lines the text up with the card's content edge while
       the pressed background keeps some room around it. */
    margin-left: -10px;
    padding: 0 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--brand);
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease;
}

    .lesson-toggle:active {
        background-color: var(--brand-soft);
    }

    .lesson-toggle:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 0;
    }

.lesson-toggle-chevron {
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.lesson-card.is-expanded .lesson-toggle-chevron {
    margin-top: 4px;
    transform: rotate(-135deg);
}

/* Nothing to open: picture and questionnaire cards have no details */
.lesson-card:not(:has(.lesson-body .section)) .lesson-toggle {
    display: none !important;
}

/* The type icons are white line art: the tile carries the state colour, as the
   card headers used to (green done, yellow in progress, blue next/summary). */
/* ===== Card body: one row per detail (label left, content right) ===== */
.lesson-body {
    border-top: 1px solid var(--line);
    padding: 0 var(--card-pad-x);
}

    /* Picture and questionnaire cards have no details to show */
    .lesson-body:not(:has(.section)) {
        display: none;
    }

.lesson-page .lesson-body .section {
    display: grid;
    grid-template-columns: var(--label-col) minmax(0, 1fr);
    align-items: start;
    gap: 8px 24px;
    padding: 16px 0;
    min-width: 0;
}

    .lesson-page .lesson-body .section + .section {
        border-top: 1px solid var(--line);
    }

.lesson-page .lesson-body .section-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 2px;
}

.lesson-page .lesson-body .header-title {
    margin: 0;
    font-size: var(--body-font);
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink-soft);
}

.lesson-page .lesson-body .subtext {
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-muted);
}

.lesson-page .lesson-body .content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
    min-height: 26px;
    font-size: var(--body-font);
    line-height: 1.5;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

    .lesson-page .lesson-body .content > p,
    .lesson-page .lesson-body .content > span:not(.ls-chip) {
        margin: 0;
        font-size: var(--body-font);
        line-height: 1.55;
        color: var(--ink-soft);
    }

.lesson-page .lesson-body .completion-content .content > p {
    color: var(--ink);
    user-select: text;
}

.lesson-page .lesson-body .completion-content .content > span {
    color: var(--ink-muted);
}

/* Loading placeholder */
.lesson-page .skeleton-line {
    margin: 0;
    font-size: 14px;
    color: var(--ink-muted);
    animation: lesson-pulse 1.4s ease-in-out infinite;
}

@keyframes lesson-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.45;
    }
}

/* ===== Status chips (sent / checked / waiting) ===== */
.lesson-page .ls-chip {
    --chip-ink: #6b7078;
    --chip-bg: #f1f2f5;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: var(--chip-ink);
    background: var(--chip-bg);
    border-radius: 999px;
}

    .lesson-page .ls-chip::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
    }

    .lesson-page .ls-chip.is-ok {
        --chip-ink: var(--done-ink);
        --chip-bg: var(--done-soft);
    }

    .lesson-page .ls-chip.is-wait {
        --chip-ink: var(--active-ink);
        --chip-bg: var(--active-soft);
    }

    .lesson-page .ls-chip.is-bad {
        --chip-ink: var(--wrong);
        --chip-bg: var(--wrong-soft);
    }

    .lesson-page .ls-chip.is-sm {
        gap: 5px;
        padding: 2px 10px;
        font-size: 13px;
    }

        .lesson-page .ls-chip.is-sm::before {
            width: 6px;
            height: 6px;
        }

/* ===== Review lists: new words, top repeats and mistakes =====
   One tile per item in every list (TermList, MistakeList): the German word or
   the question, then the translation or the answers. The number is a badge set
   into the tile's top border, like the result badges on the exercise pages; its
   colour says what the list is (grey words, amber repeats, red mistakes).

   Wide screens: tiles flow into as many columns as fit; items past the list's
   limit (.is-extra) wait for "Показать все". Phones: see the strip at ≤ 640px.

   Shared by the lesson page and the Progress page (.pg-page, "Частые ошибки"):
   both define the tokens used here (--ink, --line, --surface, --card-pad-x …). */
:is(.lesson-page, .pg-page) .ls-review-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 1 100%;
    min-width: 0;
}

:is(.lesson-page, .pg-page) .ls-review {
    --review-min: 220px;
    --mark-ink: var(--ink-soft);
    --mark-bg: #e3e6ec;
    list-style: none;
    margin: 0;
    /* Room for the first row's badges above the tiles */
    padding: 10px 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--review-min), 100%), 1fr));
    gap: 18px 10px;
    width: 100%;
    min-width: 0;
}

    :is(.lesson-page, .pg-page) .ls-review.is-wait {
        --mark-ink: #5c4300;
        --mark-bg: #f5c518;
    }

    :is(.lesson-page, .pg-page) .ls-review.is-mistakes {
        --review-min: 300px;
        --mark-ink: #fff;
        --mark-bg: #e5484d;
    }

:is(.lesson-page, .pg-page) .ls-review-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    padding: 16px 14px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    user-select: text;
}

    :is(.lesson-page, .pg-page) .ls-review-item > * {
        max-width: 100%;
    }

    :is(.lesson-page, .pg-page) .ls-review-item.is-extra {
        display: none;
    }

/* The number sits on the top border; the white ring cuts the border around it */
:is(.lesson-page, .pg-page) .ls-review-mark {
    position: absolute;
    top: -10px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--mark-ink);
    background: var(--mark-bg);
    border-radius: 10px;
    box-shadow: 0 0 0 3px #fff;
}

:is(.lesson-page, .pg-page) .ls-review-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    min-width: 0;
}

    :is(.lesson-page, .pg-page) .ls-review-body > * {
        max-width: 100%;
    }

/* Phone strip only (count, swipe hint, scroll bar) */
:is(.lesson-page, .pg-page) .ls-review-bar,
:is(.lesson-page, .pg-page) .ls-review-progress {
    display: none;
}

:is(.lesson-page, .pg-page) .ls-review-term,
:is(.lesson-page, .pg-page) .ls-review-prompt {
    margin: 0;
    font-size: var(--body-font);
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    overflow-wrap: anywhere;
    hyphens: auto;
}

:is(.lesson-page, .pg-page) .ls-review-sub {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

/* Word tiles: the word over its translation; with a picture, the thumbnail sits
   to the left and the text beside it */
:is(.lesson-page, .pg-page) .ls-review-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

:is(.lesson-page, .pg-page) .ls-review.has-images {
    --review-min: 260px;
}

:is(.lesson-page, .pg-page) .ls-review.has-images .ls-review-item {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

:is(.lesson-page, .pg-page) .ls-review-thumb.is-term {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    margin: 0;
}

    :is(.lesson-page, .pg-page) .ls-review-thumb.is-term img {
        padding: 2px;
    }

/* A word without a picture in a picture list: its first letter in a quiet square */
:is(.lesson-page, .pg-page) .ls-review-thumb-ph {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 20px;
    font-weight: 600;
    color: #b8bec9;
    background: #eef0f4;
    border-radius: 10px;
}

/* A fill-in shows the sentence; its question is then only the instruction */
:is(.lesson-page, .pg-page) .ls-review-body:has(.ls-review-context) .ls-review-prompt {
    font-size: 13px;
    color: var(--ink-muted);
}

:is(.lesson-page, .pg-page) .ls-review-context {
    margin: 0;
    font-size: var(--body-font);
    font-weight: 500;
    line-height: 1.55;
    color: var(--ink);
    overflow-wrap: anywhere;
    hyphens: auto;
}

:is(.lesson-page, .pg-page) .ls-blank {
    display: inline-block;
    width: 2.6em;
    height: 1em;
    margin: 0 3px;
    vertical-align: -0.2em;
    border-bottom: 2px solid #b8bec9;
}

/* Your answer / the right answer: a coloured rule on the left, no nested boxes */
:is(.lesson-page, .pg-page) .ls-review-answers {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    margin: 6px 0 0;
}

    :is(.lesson-page, .pg-page) .ls-review-answers > div {
        padding: 1px 0 1px 10px;
        border-left: 3px solid;
    }

    :is(.lesson-page, .pg-page) .ls-review-answers dt {
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
    }

    :is(.lesson-page, .pg-page) .ls-review-answers dd {
        margin: 0;
        font-size: var(--body-font);
        font-weight: 500;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    :is(.lesson-page, .pg-page) .ls-review-answers .is-wrong {
        border-color: #f2a8a9;
        color: var(--wrong);
    }

    :is(.lesson-page, .pg-page) .ls-review-answers .is-right {
        border-color: #b9dc8f;
        color: #4f7f1c;
    }

/* Where the mistake came from (Progress): how often, which module */
:is(.lesson-page, .pg-page) .ls-review-meta {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ink-muted);
    overflow-wrap: anywhere;
}

/* Picture questions: a thumbnail that opens the image full size */
:is(.lesson-page, .pg-page) .ls-review-thumb {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 72px;
    height: 72px;
    margin-bottom: 4px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: zoom-in;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    :is(.lesson-page, .pg-page) .ls-review-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        padding: 3px;
        object-fit: contain;
    }

    :is(.lesson-page, .pg-page) .ls-review-thumb:active {
        transform: scale(0.96);
    }

    :is(.lesson-page, .pg-page) .ls-review-thumb:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
    }

/* Enlarged picture. The popover renders in the top layer (above the fixed header
   and the side nav) and is positioned explicitly rather than by the browser's
   default auto-margin centring: it fills the viewport as a dimmed overlay, and
   the image card sits in the centre of a grid. The safe-area padding keeps the
   card clear of the notch and the home bar. Phones: the image spans the width.
   Wider screens: up to 880px, and small images are enlarged to 420px. */
:is(.lesson-page, .pg-page) .ls-review-popover {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    color: var(--ink);
    background: rgba(15, 18, 28, 0.72);
    border: 0;
    /* The page behind stays put: the overlay is its own scroller (the scrim is
       1px taller than it) and stops scroll chaining. Locking the page with
       overflow: hidden instead would drop a desktop scrollbar and shift both
       the page and this overlay sideways. */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

    :is(.lesson-page, .pg-page) .ls-review-popover::-webkit-scrollbar {
        display: none;
    }

    /* display only while open: the browser hides a closed popover with display: none */
    :is(.lesson-page, .pg-page) .ls-review-popover:popover-open {
        display: grid;
        place-items: center;
        animation: ls-popover-fade 0.18s ease-out;
    }

    :is(.lesson-page, .pg-page) .ls-review-popover::backdrop {
        background: transparent;
    }

/* The whole overlay outside the card closes it */
:is(.lesson-page, .pg-page) .ls-review-scrim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 1px);
    padding: 0;
    background: transparent;
    border: 0;
    cursor: zoom-out;
    -webkit-tap-highlight-color: transparent;
}

:is(.lesson-page, .pg-page) .ls-review-figure {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Phones: the full width. Wider screens: at least 444px (a 420px image),
       at most 880px, otherwise as wide as the image. */
    min-width: min(100%, 444px);
    max-width: min(100%, 880px);
    margin: 0;
    padding: 12px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    animation: ls-popover-in 0.2s ease-out;
}

    :is(.lesson-page, .pg-page) .ls-review-figure img {
        display: block;
        width: auto;
        height: auto;
        min-width: 100%;
        max-width: 100%;
        max-height: min(70dvh, 720px);
        object-fit: contain;
        border-radius: 12px;
    }

    :is(.lesson-page, .pg-page) .ls-review-figure figcaption {
        display: flex;
        flex-direction: column;
        gap: 2px;
        max-width: 60ch;
        padding: 0 8px 4px;
        font-size: var(--body-font);
        font-weight: 600;
        line-height: 1.4;
        text-align: center;
        color: var(--ink);
        overflow-wrap: anywhere;
    }

    /* A word's picture: the translation under the word */
    :is(.lesson-page, .pg-page) .ls-review-figure-sub {
        font-size: 14px;
        font-weight: 500;
        color: var(--ink-soft);
    }

/* Close: a white disc set into the card's corner, like the number badges */
:is(.lesson-page, .pg-page) .ls-review-popover-close {
    position: absolute;
    top: -14px;
    right: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 0 2px;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    color: var(--ink);
    background: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease;
}

    :is(.lesson-page, .pg-page) .ls-review-popover-close:active {
        transform: scale(0.92);
    }

    :is(.lesson-page, .pg-page) .ls-review-popover-close:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 2px;
    }

@keyframes ls-popover-fade {
    from {
        opacity: 0;
    }
}

@keyframes ls-popover-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.lesson-page, .pg-page) .ls-review-popover:popover-open,
    :is(.lesson-page, .pg-page) .ls-review-figure {
        animation: none;
    }
}

/* "Показать все (N)" / "Свернуть": the same quiet text button as the card toggle */
:is(.lesson-page, .pg-page) .ls-review-more {
    appearance: none;
    -webkit-appearance: none;
    min-height: 40px;
    margin-left: -10px;
    padding: 0 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
    background: none;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease;
}

    :is(.lesson-page, .pg-page) .ls-review-more:active {
        background-color: var(--brand-soft);
    }

    :is(.lesson-page, .pg-page) .ls-review-more:focus-visible {
        outline: 2px solid var(--brand);
        outline-offset: 0;
    }

:is(.lesson-page, .pg-page) .ls-review-empty {
    margin: 0;
    font-size: var(--body-font);
    line-height: 1.5;
    color: var(--ink-muted);
}

/* Paged lists: the next page is loading */
:is(.lesson-page, .pg-page) .ls-review-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-muted);
}

:is(.lesson-page, .pg-page) .ls-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #dfe2e8;
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: ls-spin 0.8s linear infinite;
}

@keyframes ls-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Wide screens: a long list lives in a box of capped height that scrolls inside,
   so the page keeps its shape however many mistakes there are. Where the browser
   can drive it from the scroll position, the bottom edge fades while more is
   below and sharpens at the end. */
@media (min-width: 641px) {
    :is(.lesson-page, .pg-page) .ls-review.is-scrollbox {
        max-height: min(560px, 70vh);
        overflow-y: auto;
        padding-right: 6px;
        padding-bottom: 12px;
        scrollbar-width: thin;
        scrollbar-color: #c9cdd4 transparent;
        scrollbar-gutter: stable;
        border-radius: 4px;
    }

        :is(.lesson-page, .pg-page) .ls-review.is-scrollbox:focus-visible {
            outline: 2px solid var(--brand);
            outline-offset: 4px;
        }
}

@property --ls-fade {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@supports (animation-timeline: scroll()) {
    @media (min-width: 641px) {
        :is(.lesson-page, .pg-page) .ls-review.is-scrollbox {
            -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ls-fade)), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ls-fade)), transparent);
            animation: ls-scrollbox-fade linear both;
            animation-timeline: scroll(self block);
        }
    }
}

@keyframes ls-scrollbox-fade {
    0%, 92% {
        --ls-fade: 48px;
    }

    100% {
        --ls-fade: 0px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(.lesson-page, .pg-page) .ls-spinner {
        animation-duration: 2s;
    }
}

/* ===== Admin warning ===== */
.lesson-admin-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 14px 16px 14px 20px;
    background: var(--wrong-soft);
    border: 1px solid #f6c9ca;
    border-radius: 16px;
}

.lesson-admin-text {
    flex: 1 1 220px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--wrong);
}

.lesson-empty {
    margin: 0;
    padding: 24px;
    font-size: var(--body-font);
    color: var(--ink-soft);
    text-align: center;
    background: var(--surface);
    border-radius: var(--card-radius);
}

/* ===== Loading (global on purpose: Account, ExternalLoginSuccess and the
   subscription guard use this spinner without styles of their own) ===== */
.module-loading-container {
    text-align: center;
    padding: 3rem;
    width: 100%;
    box-sizing: border-box;
}

    .module-loading-container p {
        color: #888;
        font-size: 15px;
        margin-top: 0.5rem;
    }

.loading-spinner {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 20px auto;
    position: relative;
}

    .loading-spinner::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-radius: 50%;
        border-top: 4px solid #000;
        animation: spin 0.85s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
        box-sizing: border-box;
    }

    .loading-spinner::before {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        top: 52%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url('/favicon.svg') no-repeat center center;
        background-size: contain;
        z-index: 5;
    }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ===== Hover (mouse/trackpad only — see CLAUDE.md) ===== */
@media (hover: hover) and (pointer: fine) {
    .lesson-page .ls-btn:hover:not(:disabled) {
        color: var(--btn-fill-ink);
        background: var(--btn-color);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        transform: translateY(-2px);
    }

    .lesson-toggle:hover {
        background-color: var(--brand-soft);
    }

    :is(.lesson-page, .pg-page) .ls-review-thumb:hover {
        box-shadow: 0 4px 12px rgba(20, 30, 60, 0.12);
    }

    :is(.lesson-page, .pg-page) .ls-review-more:hover {
        background-color: var(--brand-soft);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lesson-page .skeleton-line {
        animation: none;
    }

    .lesson-page .ls-btn {
        transition: none;
    }
}

/* ===== Laptop ===== */
@media (max-width: 1500px) {
    .lesson-page {
        --card-pad-y: 18px;
        --card-pad-x: 20px;
        --ring-size: 82px;
        --ring-width: 6px;
        --ring-font: 15px;
        --pill-pad: 0.2rem 0.6rem;
        --hero-title-font: 22px;
        --title-font: 18px;
        --label-col: 160px;
    }
}

/* ===== Tablet (≤ 992px): buttons shrink like NavigationButtons ===== */
@media (max-width: 992px) {
    .lesson-page .ls-btn {
        height: 44px;
        padding: 0 22px;
        font-size: 15px;
        border-radius: 22px;
    }
}

@media (max-width: 768px) {
    .lesson-page {
        --page-margin-top: 12px;
        --card-radius: 18px;
        --card-pad-y: 16px;
        --card-pad-x: 18px;
        --card-gap: 14px;
        padding: 0 0 24px;
    }
}

/* ===== Narrow cards (≤ 640px) =====
   Head: icon beside the titles, the digest under the title (same left edge),
   then one footer row: "Подробнее" on the left, the action on the right. One
   control row per card instead of a full-width button plus a full-width bar,
   and only the card to work on now gets a filled button. Details open below. */
@media (max-width: 640px) {
    .lesson-page {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .lesson-card-head {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px 14px;
    }

    .lesson-foot {
        grid-column: 1 / -1;
        justify-content: space-between;
        gap: 12px;
        /* Bleeds to the card edges so its divider spans the card */
        margin: 4px calc(-1 * var(--card-pad-x)) calc(-1 * var(--card-pad-y));
        padding: 8px var(--card-pad-x);
        border-top: 1px solid var(--line);
    }

    .lesson-toggle {
        display: flex;
    }

    .lesson-action {
        margin-left: auto;
    }

    .lesson-page .lesson-action .ls-btn {
        min-width: 0;
        height: 44px;
        padding: 0 22px;
        font-size: 15px;
        border-radius: 22px;
        box-shadow: none;
    }

    /* The card to work on now: a filled button, so the next step is obvious */
    .lesson-page .lesson-card:is(.is-active, .is-next) .ls-btn.is-primary {
        color: #fff;
        background: var(--brand);
        box-shadow: 0 4px 12px rgba(77, 124, 254, 0.28);
    }

        .lesson-page .lesson-card:is(.is-active, .is-next) .ls-btn.is-primary:active:not(:disabled),
        .lesson-page .lesson-card:is(.is-active, .is-next) .ls-btn.is-primary.is-busy {
            background: #2f5ad6;
            border-color: #2f5ad6;
        }

    /* Locked cards: just the head. Their details are placeholders ("не отправлено"
       for an exercise that can't be opened yet), so nothing to expand. */
    .lesson-card:is(.is-locked, .is-summary-locked) .lesson-toggle,
    .lesson-card:is(.is-locked, .is-summary-locked) .lesson-body {
        display: none;
    }

    .lesson-card:is(.is-locked, .is-summary-locked) .lesson-foot:not(:has(.ls-btn)),
    .lesson-card:not(:has(.lesson-body .section)) .lesson-foot:not(:has(.ls-btn)) {
        display: none;
    }

    .lesson-page .lesson-body .section {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px 0;
    }

    /* A status (sent / checked) fits beside its label: one line instead of two */
    .lesson-page .lesson-body .section:has(> .content > .ls-chip) {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;
    }

        .lesson-page .lesson-body .section:has(> .content > .ls-chip) > .content {
            justify-content: flex-end;
        }

    .lesson-page .lesson-body .section-header {
        padding-top: 0;
    }

    /* Collapsed / expanded cards */
    .lesson-card.is-collapsed .lesson-body {
        display: none;
    }

    .lesson-card.is-collapsed .lesson-summary:has(.lesson-summary-items) {
        display: block;
        grid-column: 2 / -1;
        cursor: pointer;
    }

    .lesson-titles {
        cursor: pointer;
    }

    /* Small buttons stretch across the card: reachable with either thumb */
    .lesson-page .ls-btn.is-sm {
        width: 100%;
        height: 44px;
        font-size: 14px;
        border-radius: 22px;
    }

    /* Review lists become a fixed-height strip that scrolls sideways: every
       item is there, but the list never grows into an endless column. Words sit
       in columns of up to four (two columns per screen), mistakes one per screen
       with the next peeking in. The strip bleeds to the card edges. */
    :is(.lesson-page, .pg-page) .ls-review-wrap {
        align-items: stretch;
        gap: 4px;
    }

    :is(.lesson-page, .pg-page) .ls-review {
        grid-template-columns: none;
        grid-template-rows: repeat(var(--rows, 1), auto);
        grid-auto-flow: column;
        grid-auto-columns: 44%;
        gap: 18px 10px;
        width: calc(100% + 2 * var(--card-pad-x));
        margin: 0 calc(-1 * var(--card-pad-x));
        padding: 10px var(--card-pad-x) 2px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--card-pad-x);
        scrollbar-width: none;
    }

        :is(.lesson-page, .pg-page) .ls-review::-webkit-scrollbar {
            display: none;
        }

        :is(.lesson-page, .pg-page) .ls-review.is-mistakes {
            grid-auto-columns: 86%;
        }

        /* Nothing to scroll: the columns share the full width */
        :is(.lesson-page, .pg-page) .ls-review.is-terms:not(:has(> li:nth-child(9))) {
            grid-auto-columns: calc(50% - 5px);
        }

        /* Pictures: one wide tile per row, the next column peeking in */
        :is(.lesson-page, .pg-page) .ls-review.is-terms.has-images {
            grid-auto-columns: 78%;
        }

        :is(.lesson-page, .pg-page) .ls-review.is-terms.has-images:not(:has(> li:nth-child(5))),
        :is(.lesson-page, .pg-page) .ls-review.is-terms:not(:has(> li:nth-child(2))),
        :is(.lesson-page, .pg-page) .ls-review.is-mistakes:not(:has(> li:nth-child(2))) {
            grid-auto-columns: 100%;
        }

    :is(.lesson-page, .pg-page) .ls-review-item {
        scroll-snap-align: start;
    }

        :is(.lesson-page, .pg-page) .ls-review-item.is-extra {
            display: flex;
        }

    :is(.lesson-page, .pg-page) .ls-review.is-terms .ls-review-item {
        padding: 14px 12px 10px;
    }

    :is(.lesson-page, .pg-page) .ls-review.has-images .ls-review-item {
        gap: 10px;
    }

    :is(.lesson-page, .pg-page) .ls-review-thumb.is-term,
    :is(.lesson-page, .pg-page) .ls-review-thumb-ph {
        width: 44px;
        height: 44px;
    }

    :is(.lesson-page, .pg-page) .ls-review-more:not(.is-load) {
        display: none;
    }

    :is(.lesson-page, .pg-page) .ls-review-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--ink-muted);
    }

    :is(.lesson-page, .pg-page) .ls-review-swipe::after {
        content: "→";
        margin-left: 6px;
    }
}

/* Scroll position of the strip, where the browser can drive it from CSS */
@supports (animation-timeline: scroll()) {
    @media (max-width: 640px) {
        :is(.lesson-page, .pg-page) .ls-review-wrap {
            timeline-scope: --ls-review;
        }

        :is(.lesson-page, .pg-page) .ls-review {
            scroll-timeline: --ls-review x;
        }

        :is(.lesson-page, .pg-page) .ls-review-progress {
            display: block;
            height: 3px;
            margin-top: 8px;
            overflow: hidden;
            background: #eceef3;
            border-radius: 2px;
        }

            :is(.lesson-page, .pg-page) .ls-review-progress span {
                display: block;
                height: 100%;
                background: #b8bec9;
                border-radius: inherit;
                transform-origin: left center;
                animation: ls-review-progress linear both;
                animation-timeline: --ls-review;
            }
    }
}

@keyframes ls-review-progress {
    from {
        transform: scaleX(0.15);
    }

    to {
        transform: scaleX(1);
    }
}

/* ===== Phones (≤ 480px, iPhone 16 = 393px): text stays at 15–18px ===== */
@media (max-width: 480px) {
    .lesson-page {
        --page-margin-top: 4px;
        --card-radius: 16px;
        --card-pad-y: 14px;
        --card-pad-x: 14px;
        --card-gap: 12px;
        --ring-size: 64px;
        --ring-width: 5px;
        --ring-font: 12px;
        --pill-pad: 0.12rem 0.4rem;
        --hero-title-font: 19px;
        --title-font: 17px;
        --body-font: 15px;
        --icon-tile: 42px;
    }

    /* Compact on phones, in scale with the page's 15–17px text; 44px (from
       the tablet rule) is Apple's minimum touch target */
    .lesson-page .ls-btn {
        padding: 0 20px;
    }

    .lesson-hero {
        gap: 14px;
        align-items: flex-start;
    }

    .lesson-card-head {
        column-gap: 12px;
    }

    .module-loading-container {
        padding: 2rem 1rem;
    }
}

/* ===== Narrow phones (≤ 360px) ===== */
@media (max-width: 360px) {
    .lesson-page {
        --card-pad-x: 12px;
        --ring-size: 58px;
        --ring-font: 11px;
        --pill-pad: 0.1rem 0.35rem;
        --hero-title-font: 18px;
        --title-font: 16px;
        --body-font: 14px;
    }
}