/*********************************************************/
/* Course lessons                                        */
/*********************************************************/

.pageTop {
    margin-bottom: 20px;
}

.courseListEyebrow,
.courseListSectionLabel {
    color: var(--color-text-muted);
    font-size: .76rem;
    /*font-weight: 800;*/
    letter-spacing: .08em;
    text-transform: uppercase;
}

.courseProgressCard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
    gap: 24px;
    align-items: center;
    padding: 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-accent);
    border-radius: 13px;
    box-shadow: 0 6px 18px var(--shadow-soft);
}

.courseProgressContent {
    min-width: 0;
}

.courseProgressHeadingRow {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.courseProgressHeadingRow h2 {
    margin: 3px 0 0;
    font-size: 1.2rem;
}

.courseProgressHeadingRow > strong {
    flex: 0 0 auto;
    font-size: 1rem;
}

.courseProgressBar {
    display: block;
    width: 100%;
    height: 10px;
    margin-top: 13px;
    overflow: hidden;
    appearance: none;
    background: var(--color-gray-light);
    border: 0;
    border-radius: 999px;
}

.courseProgressBar::-webkit-progress-bar {
    background: var(--color-gray-light);
    border-radius: 999px;
}

.courseProgressBar::-webkit-progress-value {
    background: var(--color-success);
    border-radius: 999px;
}

.courseProgressBar::-moz-progress-bar {
    background: var(--color-success);
    border-radius: 999px;
}

.courseContinueButton {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
    min-height: 66px;
    padding: 12px 15px;
    background: var(--color-button-bg);
    border: 1px solid var(--color-button-border);
    border-radius: 10px;
    color: var(--color-button-text);
    text-decoration: none;
}

.courseContinueButton:hover {
    background-color: color-mix(in srgb, var(--color-button-bg) 98%, var(--color-button-hover-mix));
    color: var(--color-button-text);
    text-decoration: none;
}

.courseContinueButton.is-complete {
    background: var(--color-success-light);
    border-color: var(--color-success);
}

.courseContinueButton > span {
    min-width: 0;
}

.courseContinueButton small,
.courseContinueButton strong {
    display: block;
}

.courseContinueButton small {
    margin-bottom: 2px;
    font-size: .78rem;
    font-weight: 700;
}

.courseContinueButton strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.courseResourcesSection,
.courseUnitsSection {
    margin-top: 30px;
}

.courseListSectionHeading {
    margin-bottom: 11px;
}

.courseListSectionHeading h2 {
    margin: 2px 0 0;
    font-size: 1.55rem;
}

.courseResourcesGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.courseResourceCard {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 15px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    border-radius: 11px;
    color: var(--color-text);
    text-decoration: none;
}

.courseResourceCard:hover {
    background: var(--color-accent-bright);
    color: var(--color-text);
    text-decoration: none;
}

.courseResourceIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: var(--color-surface);
    border: 1px solid var(--color-accent-border);
    border-radius: 10px;
}

.courseResourceCard > span:nth-child(2) {
    min-width: 0;
}

.courseResourceCard strong,
.courseResourceCard small {
    display: block;
}

.courseResourceCard small {
    margin-top: 3px;
    color: var(--color-text-muted);
    line-height: 1.35;
}

.courseResourceArrow {
    color: var(--color-text-muted);
}

.courseUnits {
    display: grid;
    gap: 17px;
}

.courseUnit {
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 5px 16px var(--shadow-soft);
}

.courseUnitHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 16px;
    background: var(--color-gray-light);
    border-bottom: 1px solid var(--color-border);
}

.courseUnitNumber {
    color: var(--color-text-muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.courseUnitHeader h3 {
    margin: 2px 0 0;
    font-size: 1.3rem;
}

.courseUnitProgress {
    flex: 0 0 auto;
    padding: 4px 9px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.courseListLesson {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-height: 66px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.courseListLesson:last-child {
    border-bottom: 0;
}

.courseListLesson:hover {
    background: var(--color-gray-light);
    color: var(--color-text);
    text-decoration: none;
}

.courseListLesson.is-grammar {
    border-left: 4px solid var(--color-accent);
    padding-left: 11px;
}

.courseListLessonNumber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    font-weight: 800;
}

.courseListLesson.is-completed .courseListLessonNumber {
    background: var(--color-success-light);
    border-color: var(--color-success);
    color: var(--color-success);
}

.courseListLessonContent {
    min-width: 0;
}

.courseListLessonContent > strong,
.courseListLessonContent > small {
    display: block;
}

.courseListLessonContent > strong {
    line-height: 1.35;
}

.courseListLessonContent > small {
    display: -webkit-box;
    margin-top: 3px;
    overflow: hidden;
    color: var(--color-text-muted);
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.courseListTypeBadge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    padding: 3px 7px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.courseListLessonMeta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.courseListCompleted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--color-success-light);
    border-radius: 999px;
    color: var(--color-success);
    font-size: .78rem;
    font-weight: 600;
}

.courseListLessonArrow {
    color: var(--color-text-muted);
    font-size: .8rem;
}

.courseListEmptyState {
    padding: 48px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 13px;
    text-align: center;
}

.courseListEmptyState > div {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 11px;
    background: var(--color-accent-soft);
    border-radius: 50%;
    color: var(--color-text-muted);
}

.courseListEmptyState h2 {
    margin: 0 0 5px;
    font-size: 1.2rem;
}

.courseListEmptyState p {
    margin: 0;
    color: var(--color-text-muted);
}

.courseContinueButton:focus-visible,
.courseResourceCard:focus-visible,
.courseListLesson:focus-visible {
    outline: 3px solid var(--color-accent-bright);
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .courseListPage {
        padding-top: 14px;
    }

    .courseListHeader h1 {
        font-size: 1.85rem;
    }

    .courseProgressCard {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    .courseResourcesGrid {
        grid-template-columns: 1fr;
    }

    .courseListLesson {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 10px 12px;
    }

    .courseListLesson.is-grammar {
        padding-left: 8px;
    }

    .courseListLessonNumber {
        width: 36px;
        height: 36px;
    }

    .courseListCompleted > span {
        display: none;
    }

    .courseListCompleted {
        padding: 4px;
        background: var(--color-transparent);
    }
}

@media (max-width: 480px) {
    .courseListHeader p {
        font-size: .92rem;
    }

    .courseProgressHeadingRow {
        align-items: flex-start;
    }

    .courseContinueButton {
        min-height: 62px;
    }

    .courseResourceCard {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        padding: 12px;
    }

    .courseResourceIcon {
        width: 38px;
        height: 38px;
    }

    .courseUnitHeader {
        align-items: flex-start;
        padding: 11px 12px;
    }

    .courseUnitProgress {
        padding: 3px 6px;
        font-size: .7rem;
    }

    .courseListLessonContent > small {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
}

/*******************************************************************/
/* Course lesson view                                              */
/*******************************************************************/

.courseLessonHero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding: 18px 20px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-accent);
    border-radius: 12px;
    box-shadow: 0 5px 16px var(--shadow-soft);
}

.courseLessonIdentity {
    min-width: 0;
}

.courseLessonEyebrow,
.courseLessonSectionLabel {
    color: var(--color-text-muted);
    font-size: .76rem;
    /*font-weight: 600;*/
    letter-spacing: .08em;
    text-transform: uppercase;
}

.courseLessonTitleRow {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-top: 4px;
}

.courseLessonTitleRow h1 {
    min-width: 0;
    margin: 0;
    font-size: 2rem;
    line-height: 1.2;
}

.courseLessonStatusButton::after {
    margin-left: 7px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.courseLessonStatusButton[data-current-status="0"]::after {
    content: "Mark complete";
}

.courseLessonStatusButton[data-current-status="1"]::after {
    content: "Completed";
}

.courseLessonDescription {
    margin: 8px 0 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.courseLessonFullAudio {
    flex: 0 0 auto;
    width: min(310px, 100%);
}

.courseLessonFullAudio > span {
    display: block;
    margin-bottom: 6px;
    color: var(--color-text-muted);
    font-size: .82rem;
    font-weight: 700;
}

.courseLessonFullAudio audio {
    display: block;
    width: 100%;
    height: 36px;
}

.courseLessonSection {
    margin-top: 28px;
}

.courseDialogueSection {
    margin-top: 0;
}

.courseLessonSectionHeader {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.courseLessonSectionHeader h2 {
    margin: 2px 0 0;
    font-size: 1.55rem;
}

.courseTranslationControl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 5px 10px;
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-muted);
    font-size: .85rem;
    cursor: pointer;
}

.courseTranslationControl .chk {
    margin-top: 0;
}

.courseDialoguePanel {
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.courseDialogueRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-bottom: 1px solid var(--color-border);
}

.courseDialogueRow:last-child {
    border-bottom: 0;
}

.courseDialogueSource {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    min-width: 0;
    padding: 11px 13px;
}

.courseDialogueTranslation {
    min-width: 0;
    padding: 11px 15px;
    border-left: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-style: italic;
    line-height: 1.55;
}

.courseDialogueText {
    min-width: 0;
    line-height: 1.55;
}

.courseDialogueAudio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--color-transparent);
    border: 0;
    border-radius: 50%;
    color: var(--color-text);
    cursor: pointer;
}

.courseDialogueAudio:hover {
    background: var(--color-accent-soft);
    color: var(--color-text);
}

.courseDialogueAudioPlaceholder {
    width: 32px;
    height: 1px;
}

.courseDialogueBreak {
    height: 14px;
    background: var(--color-gray-light);
    border-bottom: 1px solid var(--color-border);
}

.courseNoteButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: 0 4px;
    padding: 0;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
    user-select: none;
    font-family: var(--font-ui);
    color: var(--color-button-text);
    background-color: var(--color-button-bg);
    border: 1px solid var(--color-button-border);
    box-shadow: 0 0.1rem 0.2rem var(--shadow-soft);
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.courseNoteButton:hover {
    color: var(--color-button-text);
    background-color: color-mix(in srgb, var(--color-button-bg) 98%, var(--color-button-hover-mix));
    border-color: color-mix(in srgb, var(--color-button-border) 98%, var(--color-button-hover-mix));
    text-decoration: none;
}

.courseNoteContent {
    font-size: 1rem;
    line-height: 1.5;
}

.courseTranslationToggle:checked {
    background-color: var(--color-accent);
}

.courseDialogueSection:has(.courseTranslationToggle:checked) .courseDialogueRow {
    grid-template-columns: 1fr;
}

.courseDialogueSection:has(.courseTranslationToggle:checked) .courseDialogueTranslation {
    display: none;
}

.courseKeyPhrases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.courseKeyPhrase {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
    padding: 11px 13px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 9px;
    font-style: italic;
    line-height: 1.4;
}

.courseKeyPhrase > i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--color-text-muted);
}

.courseQuestions {
    display: grid;
    gap: 9px;
    margin: 0;
    padding-left: 30px;
}

.courseQuestion {
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 9px;
}

.courseQuestionText {
    line-height: 1.55;
    letter-spacing: 2px;
}

.courseQuestionBlank {
    display: inline-block;
    margin: 0 3px;
    color: var(--color-text-muted);
    font-weight: 700;
    letter-spacing: .08em;
}

.courseQuestionAnswer {
    margin-top: 8px;
}

.courseQuestionAnswer summary {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 9px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    border-radius: 7px;
    color: var(--color-text);
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.courseQuestionAnswer summary::-webkit-details-marker {
    display: none;
}

.courseQuestionAnswer[open] summary {
    margin-bottom: 8px;
}

.courseQuestionAnswer > div {
    display: flex;
    gap: 6px;
    align-items: baseline;
    color: var(--color-text-muted);
}

.courseQuestionAnswer strong {
    color: var(--color-text);
}

.courseExplanationLesson {
    line-height: 1.65;
}

.courseLessonBackLink:focus-visible,
.courseLessonStatusButton:focus-visible,
.courseDialogueAudio:focus-visible,
.courseNoteButton:focus-visible,
.courseTranslationControl:focus-within,
.courseQuestionAnswer summary:focus-visible {
    outline: 3px solid var(--color-accent-bright);
    outline-offset: 2px;
}

/* Remove Bootstrap grid gutters from the fixed offcanvas shell. */
#divWordForm.wordEditorPanel,
.row > #divWordForm.wordEditorPanel {
    --bs-offcanvas-padding-x: 0;
    --bs-offcanvas-padding-y: 0;
    padding-right: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box;
}

@media (max-width: 800px) {
    .courseLessonPage {
        padding-top: 12px;
    }

    .courseLessonBackLink {
        margin-left: 0;
    }

    .courseLessonHero {
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    .courseLessonTitleRow h1 {
        font-size: 1.55rem;
    }

    .courseLessonFullAudio {
        width: 100%;
    }

    .courseDialogueRow {
        grid-template-columns: 1fr;
    }

    .courseDialogueTranslation {
        padding-top: 9px;
        padding-left: 55px;
        border-top: 1px dashed var(--color-border);
        border-left: 0;
    }

    .courseKeyPhrases {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .courseLessonSectionHeader {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .courseTranslationControl {
        align-self: stretch;
        justify-content: center;
    }

    .courseLessonStatusButton::after {
        display: none;
    }

    .courseDialogueSource {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 6px;
        padding: 10px;
    }

    .courseDialogueAudio {
        width: 30px;
        height: 30px;
    }

    .courseDialogueTranslation {
        padding: 9px 10px 10px 46px;
    }

    .courseQuestions {
        padding-left: 25px;
    }

    .courseQuestion {
        padding: 11px;
    }
}

/*******************************************************/
/* Grammar overview styles                             */
/*******************************************************/

.grammarOverview {
    width: 100%;
    max-width: 960px;
    margin: 26px auto 44px;
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.65;
}

.grammarOverview p {
    margin: 0 0 14px;
}

.grammarIntro {
    padding: 20px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    border-left: 4px solid var(--color-accent);
    border-radius: 11px;
}

.grammarEyebrow {
    color: var(--color-text-muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.grammarIntro h2 {
    margin: 3px 0 7px;
    font-size: 1.45rem;
}

.grammarIntro p {
    max-width: 800px;
    margin: 0;
    color: var(--color-text-muted);
}

.grammarGoals {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 17px;
    margin-top: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

.grammarGoalsIcon,
.grammarRuleIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    border-radius: 9px;
}

.grammarGoals h2 {
    margin: 0 0 5px;
    font-size: 1.05rem;
}

.grammarGoals ul,
.grammarRecap ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 20px;
}

.grammarNavigation {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 14px 0;
    margin: 18px 0 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.grammarNavigation a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 5px 11px;
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text);
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none;
}

.grammarNavigation a:hover {
    background: var(--color-accent-soft);
    border-color: var(--color-accent-border);
    text-decoration: none;
}

.grammarSection {
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid var(--color-border);
    scroll-margin-top: 110px;
}

.grammarNavigation + .grammarSection {
    padding-top: 8px;
    margin-top: 22px;
    border-top: 0;
}

.grammarSectionHeader {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    margin-bottom: 20px;
}

.grammarSectionNumber {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-accent);
    border: 1px solid var(--color-accent-border);
    border-radius: 11px;
    font-size: .9rem;
    font-weight: 800;
}

.grammarSectionHeader h2 {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.25;
}

.grammarSectionHeader p {
    margin: 2px 0 0;
    color: var(--color-text-muted);
    font-size: .9rem;
    line-height: 1.4;
}

.grammarSubsection {
    margin-top: 25px;
}

.grammarSectionHeader + .grammarSubsection {
    margin-top: 0;
}

.grammarSubsection h3 {
    margin: 0 0 8px;
    font-size: 1.16rem;
}

.grammarExamplesInline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.grammarExamplesInline > span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 10px;
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.grammarExamplesInline small {
    color: var(--color-text-muted);
}

.grammarRule,
.grammarNote {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    margin: 17px 0;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    border-radius: 9px;
}

.grammarRule strong {
    display: block;
}

.grammarRule p,
.grammarNote p {
    margin: 2px 0 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.grammarNote {
    grid-template-columns: 20px minmax(0, 1fr);
    background: var(--color-gray-light);
    border-color: var(--color-border);
}

.grammarNote > i {
    margin-top: 4px;
}

.grammarTableWrap {
    width: 100%;
    margin: 17px 0 21px;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    -webkit-overflow-scrolling: touch;
}

.grammarTable {
    width: 100%;
    min-width: 620px;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: var(--color-surface);
}

.grammarTableCompact {
    min-width: 460px;
}

.grammarTable caption {
    padding: 10px 12px;
    background: var(--color-accent-soft);
    border-bottom: 1px solid var(--color-accent-border);
    color: var(--color-text);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: left;
    text-transform: uppercase;
}

.grammarTable th,
.grammarTable td {
    padding: 10px 12px;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.grammarTable tr:last-child > * {
    border-bottom: 0;
}

.grammarTable tr > *:last-child {
    border-right: 0;
}

.grammarTable thead th {
    background: var(--color-gray-light);
    font-size: .84rem;
    white-space: nowrap;
}

.grammarTable tbody tr:nth-child(even) > * {
    background: var(--color-gray-light);
}

.grammarTable tbody th {
    font-weight: 700;
    white-space: nowrap;
}

.grammarSentenceExample {
    padding: 15px;
    margin: 16px 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: 9px;
}

.grammarExampleLabel,
.grammarUsageLabel {
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.grammarSentenceExample p {
    margin: 4px 0 0;
}

.grammarSentenceExample p[lang="de"] {
    font-size: 1.08rem;
    font-weight: 700;
}

.grammarSentenceExample mark {
    padding: 1px 3px;
    background: var(--color-accent-soft);
    color: var(--color-text);
}

.grammarSentenceExample small {
    display: block;
    margin-top: 8px;
    color: var(--color-text-muted);
}

.grammarEndingSequence {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 15px 0;
}

.grammarEndingSequence span,
.grammarEnding {
    background: var(--color-accent-soft);
    color: var(--color-text);
    font-weight: 800;
}

.grammarEndingSequence span {
    min-width: 47px;
    padding: 5px 9px;
    border: 1px solid var(--color-accent-border);
    border-radius: 7px;
    text-align: center;
}

.grammarEnding {
    padding: 0 2px;
    border-radius: 3px;
}

.grammarUsageGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
    margin-top: 18px;
}

.grammarUsageCard {
    min-width: 0;
    padding: 15px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: 9px;
}

.grammarUsageCard p {
    margin: 6px 0 0;
    color: var(--color-text-muted);
    font-size: .89rem;
    line-height: 1.45;
}

.grammarUsageCard .grammarUsageLang {
    margin-top: 10px;
    color: var(--color-text);
    font-size: 1.08rem;
    font-weight: 700;
}

.grammarUsageCard .grammarUsageTranslation {
    color: var(--color-text);
    font-style: italic;
}

.grammarRecap {
    padding: 19px;
    margin-top: 34px;
    background: var(--color-success-light);
    border: 1px solid var(--color-success);
    border-radius: 11px;
    scroll-margin-top: 110px;
}

.grammarRecapHeader {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 11px;
}

.grammarRecapHeader > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-surface);
    border: 1px solid var(--color-success);
    border-radius: 50%;
    color: var(--color-success);
}

.grammarRecap h2 {
    margin: 1px 0 0;
    font-size: 1.25rem;
}

.grammarRecap > p {
    margin: 13px 0 0;
}

.grammarNextStep {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px;
    margin-top: 15px;
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
    border-radius: 11px;
}

.grammarNextStep h2 {
    margin: 2px 0 0;
    font-size: 1.18rem;
}

.grammarNextStep p {
    margin: 3px 0 0;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.grammarActionButton {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 14px;
    color: var(--color-button-text);
    background: var(--color-button-bg);
    border: 1px solid var(--color-button-border);
    border-radius: 9px;
    font-weight: 800;
    text-decoration: none;
}

.grammarActionButton:hover {
    background-color: color-mix(in srgb, var(--color-button-bg) 95%, var(--color-button-hover-mix));
    color: var(--color-button-text);
    text-decoration: none;
}

.grammarNavigation a:focus-visible,
.grammarActionButton:focus-visible {
    outline: 3px solid var(--color-accent-bright);
    outline-offset: 3px;
}

@media (max-width: 760px) {
    .grammarOverview {
        margin-top: 19px;
    }

    .grammarUsageGrid {
        grid-template-columns: 1fr;
    }

    .grammarNextStep {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .grammarIntro {
        padding: 15px;
    }

    .grammarIntro h2 {
        font-size: 1.3rem;
    }

    .grammarGoals {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
        padding: 13px;
    }

    .grammarGoalsIcon {
        width: 32px;
        height: 32px;
    }

    .grammarNavigation {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .grammarNavigation a {
        flex: 0 0 auto;
    }

    .grammarSection {
        padding-top: 25px;
        margin-top: 25px;
    }

    .grammarSectionHeader {
        grid-template-columns: 39px minmax(0, 1fr);
        gap: 10px;
    }

    .grammarSectionNumber {
        width: 38px;
        height: 38px;
    }

    .grammarSectionHeader h2 {
        font-size: 1.35rem;
    }

    .grammarRule {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .grammarRuleIcon {
        width: 32px;
        height: 32px;
    }

    .grammarTable th,
    .grammarTable td {
        padding: 9px 10px;
    }

    .grammarRecap,
    .grammarNextStep {
        padding: 15px;
    }

    .grammarActionButton {
        width: 100%;
    }
}

.grammarSuffixList {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.grammarSuffixList > span,
.grammarGenderBadge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    border-radius: 999px;
    color: var(--color-text);
    font-size: .78rem;
    font-weight: 800;
}

.grammarGenderBadge {
    min-width: 39px;
    margin-right: 5px;
    text-transform: lowercase;
}

.grammarExampleGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 17px 0;
}

.grammarMiniExample {
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 9px;
}

.grammarMiniExample > span {
    color: var(--color-text-muted);
    font-size: .78rem;
    font-weight: 700;
}

.grammarMiniExample p {
    margin: 4px 0 0;
    font-size: 1rem;
    font-weight: 700;
}

.grammarSentenceFormula {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px;
    margin: 16px 0;
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
    border-radius: 9px;
}

.grammarSentenceFormula > span {
    padding: 5px 9px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 7px;
    font-size: .84rem;
    font-weight: 800;
}

.grammarSentenceFormula > i {
    color: var(--color-text-muted);
    font-size: .7rem;
}

.grammarSentenceExamples {
    display: grid;
    gap: 9px;
    margin-top: 15px;
}

.grammarSentenceBreakdown {
    padding: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 9px;
}

.grammarSentenceParts {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(90px, .65fr) minmax(0, 1.25fr);
    gap: 7px;
}

.grammarPart {
    display: flex;
    min-width: 0;
    padding: 8px 10px;
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
    border-radius: 7px;
    flex-direction: column;
}

.grammarPart small {
    color: var(--color-text-muted);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.grammarPart b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grammarPart.is-object {
    background: var(--color-accent-soft);
    border-color: var(--color-accent-border);
}

.grammarSentenceBreakdown > p {
    margin: 7px 2px 0;
    color: var(--color-text-muted);
    font-size: .86rem;
    font-style: italic;
}

.grammarCaseChanges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.grammarCaseChanges > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.grammarCaseChanges i.fa-solid {
    color: var(--color-text-muted);
    font-size: .75rem;
}

.grammarCaseChange,
.grammarVowelChange,
.grammarVerbFinal,
.grammarMainVerb {
    padding: 1px 3px;
    background: var(--color-accent-soft);
    border-radius: 3px;
    color: var(--color-text);
    font-weight: 800;
}

.grammarFocusRow > * {
    font-weight: 700;
}

.grammarPrepositionList,
.grammarConnectorList {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 15px 0 18px;
}

.grammarPrepositionList > span,
.grammarConnectorList > span {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 10px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    border-radius: 999px;
}

.grammarPrepositionList small,
.grammarConnectorList small {
    color: var(--color-text-muted);
}

.grammarComparisonGrid,
.grammarClauseExamples {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin: 16px 0;
}

.grammarComparisonGrid > article,
.grammarClauseExamples > article {
    min-width: 0;
    padding: 13px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: 9px;
}

.grammarComparisonGrid p,
.grammarClauseExamples p {
    margin: 7px 0 2px;
    font-size: 1rem;
}

.grammarComparisonGrid small,
.grammarClauseExamples small {
    color: var(--color-text-muted);
}

.grammarStemChangeTable .grammarVowelChange {
    display: inline;
}

.grammarWordOrder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
    padding: 12px;
    margin: 16px 0;
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
    border-radius: 9px;
}

.grammarClause,
.grammarConnector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 11px;
    border-radius: 7px;
    text-align: center;
}

.grammarClause {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-weight: 700;
    flex-direction: column;
}

.grammarClause small {
    color: var(--color-text-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.grammarConnector {
    background: var(--color-accent);
    border: 1px solid var(--color-accent-border);
    font-size: .8rem;
    font-weight: 800;
}

.grammarWordOrder.is-subordinate .grammarClause:last-child {
    border-color: var(--color-accent-border);
}

.grammarClauseExamples .grammarVerbFinal {
    border-bottom: 2px solid var(--color-accent-border);
}

.grammarMainVerb {
    background: var(--color-gray-light);
}

@media (max-width: 760px) {
    .grammarSentenceParts {
        grid-template-columns: minmax(0, 1fr) minmax(80px, .7fr) minmax(0, 1.15fr);
    }

    .grammarWordOrder {
        grid-template-columns: 1fr;
    }

    .grammarConnector {
        justify-self: center;
        width: auto;
    }
}

@media (max-width: 560px) {
    .grammarExampleGrid,
    .grammarComparisonGrid,
    .grammarClauseExamples {
        grid-template-columns: 1fr;
    }

    .grammarSentenceFormula {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }

    .grammarSentenceParts {
        grid-template-columns: 1fr;
    }

    .grammarPart b {
        white-space: normal;
    }

    .grammarCaseChanges > span {
        justify-content: space-between;
        width: 100%;
    }
}

.grammarOverview {
    --grammar-dative: var(--color-info);
    --grammar-accusative: var(--color-accent);
    --grammar-modal: var(--color-success);
}

/* The third overview uses an h3 directly inside the goals panel. */
.grammarGoals {
    display: block;
}

.grammarGoals h3 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.grammarGoals h3 > i {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    border-radius: 9px;
}

.grammarGoals ul {
    margin-left: 49px;
}

/* Section heading used by this overview. */
.grammarSectionHeading {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    margin-bottom: 20px;
}

.grammarSectionHeading h2 {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.25;
}

.grammarSectionLabel {
    margin-bottom: 2px;
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .07em;
    line-height: 1.25;
    text-transform: uppercase;
}

/* Main example and its translation. */
.grammarExampleBlock {
    padding: 15px;
    margin: 16px 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: 9px;
}

.grammarExampleBlock .grammarExampleSentence {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
}

.grammarExampleBlock .grammarTranslation {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: .92rem;
    font-style: italic;
}

/* Sentence breakdown in this overview has no intermediate wrapper. */
.grammarSentenceBreakdownThree {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    margin: 16px 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 9px;
}

.grammarSentenceBreakdownThree .grammarPart {
    gap: 2px;
}

.grammarPartLabel {
    color: var(--color-text-muted);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.grammarPartDative {
    background: var(--color-word-new);
    border-color: var(--grammar-dative);
}

.grammarPartAccusative {
    background: var(--color-accent-soft);
    border-color: var(--color-accent-border);
}

/* Example cards. The base class was missing from the previous CSS. */
.grammarExamplesGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 17px 0;
}

.grammarExamplesGridFour {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grammarExampleCard {
    display: flex;
    min-width: 0;
    padding: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: 9px;
    flex-direction: column;
    gap: 4px;
}

.grammarExampleCard > strong {
    font-size: 1rem;
    line-height: 1.4;
}

.grammarExampleCard > span:not(.grammarExampleTag) {
    color: var(--color-text-muted);
    font-size: .9rem;
}

.grammarExampleCard > small {
    margin-top: 4px;
    color: var(--color-text);
    font-size: .88rem;
    line-height: 1.4;
}

.grammarExampleTag {
    align-self: flex-start;
    padding: 3px 7px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Warning callout. */
.grammarWarning {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    margin: 18px 0;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    border-left: 4px solid var(--color-accent);
    border-radius: 9px;
}

.grammarWarning > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--color-surface);
    border: 1px solid var(--color-accent-border);
    border-radius: 50%;
    color: var(--color-text);
}

.grammarWarning strong {
    display: block;
    margin-bottom: 3px;
}

.grammarWarning p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Plural changes and contractions. */
.grammarPluralChange,
.grammarContractionList {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 24px;
}

.grammarPluralChange > div,
.grammarContractionList > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
    border-radius: 9px;
}

.grammarPluralChange i,
.grammarContractionList i {
    color: var(--color-text-muted);
    font-size: .8em;
}

.grammarPluralChange strong,
.grammarContractionList strong {
    color: var(--color-text);
}

/* Neutral order of dative and accusative objects. */
.grammarObjectOrder {
    overflow: hidden;
    margin: 18px 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 9px;
}

.grammarObjectOrderRow {
    display: grid;
    grid-template-columns: minmax(130px, .65fr) minmax(170px, .8fr) minmax(260px, 1.6fr);
    gap: 16px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--color-border);
}

.grammarObjectOrderRow:last-child {
    border-bottom: 0;
}

.grammarObjectOrderRow > span {
    color: var(--color-text-muted);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.grammarObjectOrderRow p {
    margin: 0;
    font-size: 1.02rem;
}

.grammarMarkDative,
.grammarMarkAccusative,
.grammarMarkModal {
    padding: 1px 4px;
    color: var(--color-text);
    border-radius: 3px;
}

.grammarMarkDative {
    background: var(--color-word-new);
}

.grammarMarkAccusative {
    background: var(--color-word-learn);
}

.grammarMarkModal {
    background: var(--color-success-light);
}

.grammarPronounForm,
.grammarTableHighlight > * {
    background: var(--color-accent-soft) !important;
    font-weight: 700;
}

/* Modal sentence position diagram. */
.grammarSentenceFrame {
    display: grid;
    grid-template-columns: .8fr 1fr 1.35fr 1fr;
    overflow: hidden;
    margin: 18px 0;
    border: 1px solid var(--color-border);
    border-radius: 9px;
}

.grammarSentenceFrame > div {
    min-width: 0;
    padding: 14px;
    background: var(--color-gray-light);
    border-right: 1px solid var(--color-border);
}

.grammarSentenceFrame > div:last-child {
    border-right: 0;
}

.grammarSentenceFrame span,
.grammarSentenceFrame strong {
    display: block;
}

.grammarSentenceFrame span {
    margin-bottom: 5px;
    color: var(--color-text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.grammarSentenceFrame .grammarModalPosition {
    background: var(--color-accent-soft);
}

.grammarModalGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 26px;
}

.grammarModalGrid > div {
    display: flex;
    min-width: 0;
    padding: 15px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--grammar-modal);
    border-radius: 9px;
    flex-direction: column;
    gap: 5px;
}

.grammarModalGrid strong {
    font-size: 1.08rem;
}

.grammarModalGrid span {
    color: var(--color-text-muted);
}

.grammarModalGrid small {
    margin-top: 4px;
    font-size: .9rem;
}

.grammarTableWrapCompact {
    max-width: 430px;
}

.grammarCompactTable {
    min-width: 300px;
}

.grammarCompare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0;
}

.grammarCompare > div {
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--grammar-modal);
    border-radius: 9px;
}

.grammarCompareLabel {
    display: inline-block;
    padding: 3px 9px;
    margin-bottom: 7px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-border);
    border-radius: 999px;
    color: var(--color-text);
    font-weight: 700;
}

.grammarCompare strong {
    display: block;
}

.grammarCompare p {
    margin: 7px 0 0;
}

/* The third overview uses an ordered recap list. */
.grammarRecap ol {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding-left: 23px;
}

.grammarNextStep {
    justify-content: flex-start;
}

.grammarNextStep > i {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text);
}

@media (max-width: 900px) {
    .grammarExamplesGridFour {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grammarPluralChange,
    .grammarContractionList,
    .grammarModalGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grammarObjectOrderRow {
        grid-template-columns: minmax(120px, .65fr) minmax(155px, .8fr) minmax(230px, 1.5fr);
    }
}

@media (max-width: 680px) {
    .grammarGoals ul {
        margin-left: 0;
    }

    .grammarSentenceBreakdownThree,
    .grammarExamplesGrid,
    .grammarExamplesGridFour,
    .grammarPluralChange,
    .grammarContractionList,
    .grammarModalGrid,
    .grammarCompare {
        grid-template-columns: 1fr;
    }

    .grammarObjectOrderRow {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 14px;
    }

    .grammarObjectOrderRow p {
        margin-top: 5px;
    }

    .grammarSentenceFrame {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grammarSentenceFrame > div:nth-child(2) {
        border-right: 0;
    }

    .grammarSentenceFrame > div:nth-child(-n + 2) {
        border-bottom: 1px solid var(--color-border);
    }

    .grammarModalTable {
        min-width: 720px;
    }

    .grammarNextStep {
        align-items: flex-start;
        flex-direction: row;
    }
}

@media (max-width: 480px) {
    .grammarSectionHeading {
        grid-template-columns: 39px minmax(0, 1fr);
        gap: 10px;
    }

    .grammarSectionHeading h2 {
        font-size: 1.35rem;
    }

    .grammarWarning {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .grammarWarning > i {
        width: 30px;
        height: 30px;
    }

    .grammarNextStep {
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .grammarSentenceFrame {
        grid-template-columns: 1fr;
    }

    .grammarSentenceFrame > div,
    .grammarSentenceFrame > div:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid var(--color-border);
    }

    .grammarSentenceFrame > div:last-child {
        border-bottom: 0;
    }
}


.courseLessonStatusButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0 4px 0 0;

    border: 0;
    background: var(--color-transparent);

    cursor: pointer;
    vertical-align: middle;
}

.courseLessonStatusButton:disabled {
    cursor: wait;
    opacity: 0.6;
}