/* ==========================================================
   TypingTutor.Online
   End Lesson Isolation Fix v17.0.36
   File: css/end-lesson-state.css
========================================================== */

.lesson-ended-panel {
    display: grid;
    grid-template-columns:
        auto minmax(0, 1fr);
    gap: 14px 16px;
    align-items: start;

    min-height: 235px;
    padding: 24px 26px;

    color: #233149;
    background:
        linear-gradient(
            135deg,
            #f5f9ff,
            #eef5ff
        );

    border-top:
        1px solid
        #dce7f4;

    border-bottom:
        1px solid
        #d8e5f4;
}

.lesson-ended-panel[hidden] {
    display: none !important;
}

.lesson-ended-icon {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;

    color: #d83a45;
    background: #fff1f2;

    border:
        1px solid
        #ffd3d7;

    border-radius: 13px;

    font-size: 1rem;
}

.lesson-ended-copy {
    min-width: 0;
}

.lesson-ended-kicker {
    display: inline-block;
    margin-bottom: 5px;

    color: #5b6f8d;

    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.lesson-ended-copy h3 {
    margin: 0 0 7px;

    color: #17253d;

    font-family:
        var(--font-heading, "Poppins", sans-serif);

    font-size:
        clamp(1.15rem, 1.7vw, 1.5rem);

    line-height: 1.3;
}

.lesson-ended-copy p {
    max-width: 760px;
    margin: 0;

    color: #62728a;

    font-size: .86rem;
    line-height: 1.65;
}

.lesson-ended-summary {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 9px;
}

.lesson-ended-summary > span {
    display: grid;
    min-height: 66px;
    padding: 10px;
    place-content: center;
    gap: 5px;

    background:
        rgba(255, 255, 255, .78);

    border:
        1px solid
        #dbe6f3;

    border-radius: 12px;

    text-align: center;
}

.lesson-ended-summary small {
    color: #6d7d94;

    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.lesson-ended-summary strong {
    color: #1f64d4;

    font-size: 1rem;
    line-height: 1;
}

.lesson-ended-actions {
    grid-column: 1 / -1;

    display: flex;
    gap: 9px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.lesson-ended-button {
    min-height: 40px;
    padding: 9px 15px;

    color: #35465f;
    background: #ffffff;

    border:
        1px solid
        #d4e0ee;

    border-radius: 10px;

    font: inherit;
    font-size: .76rem;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 5px 15px
        rgba(15, 23, 42, .05);
}

.lesson-ended-button:hover {
    color: #195fcf;
    border-color: #a9c8f2;
}

.lesson-ended-button.primary {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #2e77f4,
            #2862df
        );

    border-color: #2b68e5;

    box-shadow:
        0 8px 20px
        rgba(47, 103, 246, .22);
}

.lesson-ended-button.primary:hover {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #296ee6,
            #2559d0
        );
}

.lesson-ended-button:focus-visible {
    outline:
        3px solid
        rgba(47, 103, 246, .24);

    outline-offset: 3px;
}

/*
 * The old End Lesson behavior used body.lesson-closed to remove the tutor.
 * This state always keeps the lesson card and controls workspace present.
 */
body.lesson-end-state-open
.typing-practice-card {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.lesson-end-state-open
#lessonText,
body.lesson-end-state-open
#mobileKeyboardButton,
body.lesson-end-state-open
#mobileTypingInput,
body.lesson-end-state-open
.typing-practice-card
.practice-footer {
    display: none !important;
}

body.lesson-end-state-open
.typing-practice-card::before,
body.lesson-end-state-open
.typing-practice-card::after {
    display: none !important;
    content: none !important;
}

/* Dark theme */
html[data-theme="dark"]
.lesson-ended-panel {
    color: #dbe7f7;
    background:
        linear-gradient(
            135deg,
            #142137,
            #111c30
        );

    border-color: #2c405c;
}

html[data-theme="dark"]
.lesson-ended-icon {
    color: #ff9ba4;
    background: #3b2029;
    border-color: #69313d;
}

html[data-theme="dark"]
.lesson-ended-kicker,
html[data-theme="dark"]
.lesson-ended-copy p,
html[data-theme="dark"]
.lesson-ended-summary small {
    color: #aab9cd;
}

html[data-theme="dark"]
.lesson-ended-copy h3 {
    color: #f0f5ff;
}

html[data-theme="dark"]
.lesson-ended-summary > span {
    background: #18263d;
    border-color: #304660;
}

html[data-theme="dark"]
.lesson-ended-summary strong {
    color: #77a9ff;
}

html[data-theme="dark"]
.lesson-ended-button {
    color: #d7e2f1;
    background: #1b2a41;
    border-color: #354b67;
}

html[data-theme="dark"]
.lesson-ended-button:hover {
    color: #ffffff;
    border-color: #5479a8;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"]
    .lesson-ended-panel {
        color: #dbe7f7;
        background:
            linear-gradient(
                135deg,
                #142137,
                #111c30
            );

        border-color: #2c405c;
    }

    html[data-theme="system"]
    .lesson-ended-copy h3 {
        color: #f0f5ff;
    }

    html[data-theme="system"]
    .lesson-ended-summary > span {
        background: #18263d;
        border-color: #304660;
    }
}

@media (max-width: 760px) {
    .lesson-ended-panel {
        grid-template-columns:
            minmax(0, 1fr);

        min-height: 0;
        padding: 20px 15px;
    }

    .lesson-ended-icon {
        width: 40px;
        height: 40px;
    }

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

    .lesson-ended-summary > span:last-child {
        grid-column: 1 / -1;
    }

    .lesson-ended-actions {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr);

        width: 100%;
    }

    .lesson-ended-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lesson-ended-button {
        transition: none;
    }
}


/* ==========================================================
   LEGACY END-LESSON ISOLATION v17.0.36
========================================================== */

#endLessonButton[hidden] {
    display: none !important;
}

body.lesson-end-state-open
#courseModePanel,
body.lesson-end-state-open
.lesson-practice-grid,
body.lesson-end-state-open
.keyboard-hands-grid,
body.lesson-end-state-open
.keyboard-guidance-card {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.lesson-end-state-open
.typing-practice-card {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body.lesson-end-state-open.lesson-closed
#courseModePanel,
body.lesson-end-state-open.lesson-closed
.lesson-practice-grid,
body.lesson-end-state-open.lesson-closed
.keyboard-hands-grid {
    display: grid !important;
}