/* =======================================================
   BIOLOGY BRAIN
   CONTEXT VOCABULARY CHALLENGE
======================================================= */

:root {
    --brand: #1e7e34;
    --brand-dark: #17672a;
    --brand-light: #edf8f0;

    --text-main: #172019;
    --text-muted: #626d65;

    --background: #f3f7f4;
    --surface: #ffffff;

    --border: #dce5de;

    --correct: #238b45;
    --correct-bg: #eaf8ee;

    --incorrect: #c74444;
    --incorrect-bg: #fff0f0;

    --warning: #b57b12;
    --warning-bg: #fff8e5;

    --radius-large: 24px;
    --radius-medium: 16px;
    --radius-small: 10px;

    --shadow:
        0 16px 38px rgba(29, 72, 40, 0.09);
}


/* =======================================================
   RESET
======================================================= */

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

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;

    background:
        linear-gradient(
            180deg,
            #f8faf8 0%,
            var(--background) 100%
        );

    color: var(--text-main);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

button,
a,
select,
input {
    font: inherit;
}


/* =======================================================
   PAGE
======================================================= */

.passage-page {
    width: min(1240px, calc(100% - 40px));

    margin: 0 auto;

    padding:
        28px 0
        70px;
}

.passage-shell {
    width: 100%;
}


/* =======================================================
   ACTIVITY PAGE HEADER
======================================================= */

.passage-page-header {
    margin-bottom: 30px;
}


/* =======================================================
   TOP NAVIGATION
======================================================= */

.passage-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    margin-bottom: 18px;
}

.passage-back-link {
    min-height: 42px;

    padding:
        0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: white;

    border:
        1px solid var(--border);

    border-radius: 999px;

    color: var(--brand);

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.passage-back-link:hover {
    background: var(--brand-light);

    border-color: var(--brand);

    transform:
        translateY(-1px);
}


/* =======================================================
   BIOLOGY BRAIN BRAND
======================================================= */

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

    text-decoration: none;
}

.passage-brand img {
    width: 105px;
    height: 105px;

    display: block;

    object-fit: contain;

    transition:
        transform 0.18s ease;
}

.passage-brand:hover img {
    transform:
        scale(1.05);
}


/* =======================================================
   PAGE TITLE
======================================================= */

.passage-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 36px;
}

.passage-eyebrow {
    margin:
        0 0 10px;

    color: var(--brand);

    font-size: 13px;
    font-weight: 850;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}

.passage-heading-row h1 {
    margin: 0;

    color: var(--text-main);

    font-size:
        clamp(
            38px,
            5vw,
            56px
        );

    font-weight: 800;

    line-height: 1.04;

    letter-spacing:
        -0.035em;
}

.passage-subtitle {
    max-width: 760px;

    margin:
        14px 0 0;

    color: var(--text-muted);

    font-size: 17px;
    line-height: 1.55;
}


/* =======================================================
   COMMON
======================================================= */

.section-label {
    margin:
        0 0 8px;

    color: var(--brand);

    font-size: 12px;
    font-weight: 850;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


/* =======================================================
   MODE SCREEN
======================================================= */

.mode-screen {
    padding:
        50px 0
        20px;
}

.mode-heading {
    max-width: 720px;

    margin:
        0 auto
        38px;

    text-align: center;
}

.mode-heading h2 {
    margin:
        0 0 12px;

    font-size:
        clamp(
            30px,
            4vw,
            44px
        );

    line-height: 1.12;
}

.mode-heading > p:last-child {
    margin: 0;

    color: var(--text-muted);

    font-size: 16px;
    line-height: 1.6;
}

.mode-grid {
    display: grid;

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

    gap: 22px;
}

.mode-card {
    padding: 30px;

    background:
        var(--surface);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow);
}

.mode-card h3 {
    margin:
        0 0 10px;

    font-size: 25px;
}

.mode-card > p {
    margin: 0;

    color:
        var(--text-muted);

    font-size: 14px;
    line-height: 1.6;
}

.mode-card ul {
    margin:
        20px 0
        26px;

    padding-left: 20px;

    color: #445047;

    font-size: 14px;
    line-height: 1.7;
}

.mode-button {
    width: 100%;
    min-height: 50px;

    border-radius: 11px;

    font-size: 14px;
    font-weight: 850;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.mode-button:hover {
    transform:
        translateY(-1px);
}

.mode-button.primary {
    background:
        var(--brand);

    border:
        2px solid var(--brand);

    color: white;
}

.mode-button.primary:hover {
    background:
        var(--brand-dark);

    border-color:
        var(--brand-dark);
}

.mode-button.secondary {
    background: white;

    border:
        2px solid var(--brand);

    color:
        var(--brand);
}

.mode-button.secondary:hover {
    background:
        var(--brand-light);
}


/* =======================================================
   ACTIVITY
======================================================= */

.activity-screen {
    padding-top: 26px;
}

.activity-topbar {
    max-width: 1040px;

    margin:
        0 auto
        18px;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

.activity-topbar h2 {
    margin: 0;

    font-size: 29px;

    letter-spacing:
        -0.02em;
}


/* =======================================================
   EASY / HARD SEGMENTED SWITCH
======================================================= */

.passage-mode-switch {
    flex: 0 0 auto;

    display: inline-grid;

    grid-template-columns:
        1fr 1fr;

    padding: 4px;

    background: white;

    border:
        1px solid var(--border);

    border-radius: 14px;

    box-shadow:
        0 5px 16px
        rgba(
            24,
            67,
            38,
            0.06
        );
}

.passage-mode-option {
    min-width: 86px;
    min-height: 40px;

    padding:
        8px 16px;

    background:
        transparent;

    border:
        none;

    border-radius:
        10px;

    color:
        var(--text-muted);

    font-size: 13px;
    font-weight: 850;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.passage-mode-option:hover:not(.active) {
    background:
        #f4f8f5;

    color:
        var(--brand);
}

.passage-mode-option.active {
    background:
        var(--brand);

    color: white;
}


/* =======================================================
   PASSAGE CARD
======================================================= */

.passage-card {
    max-width: 1040px;

    margin: 0 auto;

    padding:
        38px 42px;

    background: white;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow);
}

.passage-content {
    max-width: 920px;

    margin:
        0 auto;

    color: #263029;

    font-size: 18px;
    line-height: 2;
}


/* =======================================================
   PASSAGE SECTIONS
======================================================= */

.passage-content-section {
    padding: 0;
}

.passage-section-header {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;
}

.passage-section-header h3 {
    margin: 0;

    color:
        var(--text-main);

    font-size: 24px;
    font-weight: 800;

    line-height: 1.25;

    letter-spacing:
        -0.02em;
}

.passage-section-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.passage-paragraph {
    margin: 0;

    color:
        var(--text-main);

    font-size: 18px;
    line-height: 2;
}


/* =======================================================
   INLINE EASY SELECT
======================================================= */

.inline-select {
    min-width: 145px;
    max-width: 225px;

    margin:
        0 4px;

    padding:
        7px 32px
        7px 10px;

    vertical-align:
        baseline;

    background:
        #f6faf7;

    border:
        2px solid #b9d5c0;

    border-radius:
        8px;

    color:
        #1c2a20;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.inline-select:hover {
    border-color:
        #89b995;
}

.inline-select:focus {
    outline: none;

    border-color:
        var(--brand);

    box-shadow:
        0 0 0 3px
        rgba(
            30,
            126,
            52,
            0.13
        );
}


/* =======================================================
   INLINE HARD INPUT
======================================================= */

.inline-input {
    width: 155px;

    margin:
        0 4px;

    padding:
        7px 10px;

    vertical-align:
        baseline;

    background:
        #f6faf7;

    border:
        2px solid #b9d5c0;

    border-radius:
        8px;

    color:
        #1c2a20;

    font-size: 16px;
    font-weight: 700;

    text-align: center;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.inline-input:hover {
    border-color:
        #89b995;
}

.inline-input:focus {
    outline: none;

    border-color:
        var(--brand);

    box-shadow:
        0 0 0 3px
        rgba(
            30,
            126,
            52,
            0.13
        );
}


/* =======================================================
   ANSWER STATES
======================================================= */

.blank-correct {
    background:
        var(--correct-bg)
        !important;

    border-color:
        var(--correct)
        !important;

    color:
        var(--correct)
        !important;
}

.blank-incorrect {
    background:
        var(--incorrect-bg)
        !important;

    border-color:
        var(--incorrect)
        !important;

    color:
        var(--incorrect)
        !important;
}

.blank-empty {
    background:
        var(--warning-bg)
        !important;

    border-color:
        #d6aa48
        !important;
}


/* =======================================================
   ACTIVITY MESSAGE
======================================================= */

.activity-message {
    max-width: 1040px;

    min-height: 24px;

    margin:
        14px auto
        0;

    color:
        var(--incorrect);

    font-size: 14px;
    font-weight: 700;

    text-align: center;
}


/* =======================================================
   SECTION FEEDBACK
======================================================= */

.section-feedback {
    max-width: 1040px;

    margin:
        18px auto
        0;

    padding:
        18px 20px;

    border-radius: 14px;

    font-size: 14px;
    line-height: 1.55;
}

.section-feedback.success {
    background:
        var(--correct-bg);

    border:
        1px solid #b9dfc4;

    color:
        #17672a;
}

.section-feedback.partial {
    background:
        var(--warning-bg);

    border:
        1px solid #ead394;

    color:
        #79560d;
}

.section-feedback strong {
    display: block;

    margin-bottom: 3px;

    font-size: 16px;
}


/* =======================================================
   ACTION BUTTONS
======================================================= */

.activity-actions {
    max-width: 1040px;

    margin:
        22px auto
        0;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.results-actions {
    margin-top: 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.primary-action,
.secondary-action,
.listen-button {
    min-height: 50px;

    padding:
        12px 22px;

    border-radius:
        11px;

    font-size: 14px;
    font-weight: 850;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.primary-action {
    background:
        var(--brand);

    border:
        2px solid var(--brand);

    color: white;
}

.primary-action:hover {
    background:
        var(--brand-dark);

    border-color:
        var(--brand-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 16px
        rgba(
            30,
            126,
            52,
            0.16
        );
}

.secondary-action {
    background: white;

    border:
        2px solid var(--brand);

    color:
        var(--brand);
}

.secondary-action:hover {
    background:
        var(--brand-light);

    transform:
        translateY(-2px);
}

.listen-button:hover {
    transform:
        translateY(-2px);
}

.next-section-action {
    margin-left: auto;
}

/* =======================================================
   RETURN TO A1.1 WATER
======================================================= */

.return-main-action {
    min-height: 50px;

    padding:
        12px 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: transparent;

    border: none;

    border-radius: 11px;

    color: var(--brand);

    font-size: 14px;
    font-weight: 850;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}


.return-main-action:hover {
    background:
        var(--brand-light);

    color:
        var(--brand-dark);

    transform:
        translateY(-2px);
}


/* =======================================================
   RESULTS
======================================================= */

.results-screen {
    padding-top: 42px;
}

.results-card {
    max-width: 900px;

    margin:
        0 auto;

    padding: 40px;

    background: white;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow);

    text-align: center;
}

.results-icon {
    width: 68px;
    height: 68px;

    margin:
        0 auto
        14px;

    display: grid;
    place-items: center;

    background:
        var(--brand-light);

    border-radius: 18px;

    overflow: hidden;
}


/* Keep the Biology Brain logo contained
   inside the completion icon box */

.results-icon img {
    width: 50px;
    height: 50px;

    display: block;

    object-fit: contain;

    max-width: 100%;
    max-height: 100%;
}

.results-card h2 {
    margin: 0;

    font-size: 34px;
}

.results-score {
    margin:
        17px 0
        10px;

    color:
        var(--brand);

    font-size: 42px;
    font-weight: 900;
}

.results-message {
    margin: 0;

    color:
        var(--text-muted);

    font-size: 15px;
}


/* =======================================================
   RESULTS REVIEW
======================================================= */

.results-review {
    margin-top: 28px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    text-align: left;
}

.review-row {
    padding:
        13px 16px;

    display: grid;

    grid-template-columns:
        38px
        minmax(
            0,
            1fr
        )
        auto;

    gap: 12px;

    align-items: center;

    border-radius: 11px;
}

.review-row.correct {
    background:
        var(--correct-bg);
}

.review-row.incorrect {
    background:
        var(--incorrect-bg);
}

.review-number {
    font-weight: 900;
}

.review-answer {
    font-size: 14px;
    line-height: 1.5;
}

.review-answer strong {
    display: block;
}

.review-status {
    font-size: 18px;
    font-weight: 900;
}


/* =======================================================
   AUDIO UNLOCK
======================================================= */

.audio-unlock {
    margin-top: 28px;

    padding: 20px;

    display: grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        )
        auto;

    gap: 15px;

    align-items: center;

    background:
        linear-gradient(
            120deg,
            #edf8f0,
            #f8fdf9
        );

    border:
        1px solid #c9dfce;

    border-radius: 15px;

    text-align: left;
}

.audio-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background: white;

    border-radius: 12px;

    font-size: 23px;
}

.audio-unlock h3 {
    margin:
        0 0 4px;

    font-size: 16px;
}

.audio-unlock p {
    margin: 0;

    color:
        var(--text-muted);

    font-size: 13px;
    line-height: 1.5;
}

.listen-button {
    background:
        var(--brand);

    border:
        2px solid var(--brand);

    color: white;
}


/* =======================================================
   HL SECTION
======================================================= */

.hl-passage-section {
    padding: 24px;

    background:
        #f7fbf8;

    border:
        1px solid #d8eadc;

    border-radius: 14px;
}

.hl-section-badge {
    min-width: 32px;
    height: 25px;

    padding:
        0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background:
        var(--brand);

    color: white;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 900;

    letter-spacing:
        0.05em;
}


/* =======================================================
   MISSING DATA DEBUGGING
======================================================= */

.missing-blank {
    color: #b42318;

    font-weight: 700;
}


/* =======================================================
   TABLET
======================================================= */

@media (
    max-width: 800px
) {

    .passage-page {
        width:
            min(
                100% - 28px,
                760px
            );
    }


    .passage-brand img {
        width: 88px;
        height: 88px;
    }


    .passage-heading-row h1 {
        font-size:
            clamp(
                36px,
                7vw,
                48px
            );
    }


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


    .activity-topbar {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .audio-unlock {
        grid-template-columns:
            1fr;

        text-align:
            center;
    }


    .audio-icon {
        margin:
            0 auto;
    }

}


/* =======================================================
   MOBILE
======================================================= */

@media (
    max-width: 600px
) {

    .passage-page {
        width:
            calc(
                100% - 20px
            );

        padding:
            14px 0
            40px;
    }


    .passage-topbar {
        align-items:
            flex-start;

        gap: 16px;

        margin-bottom:
            20px;
    }


    .passage-back-link {
        min-height: 40px;

        padding:
            0 13px;

        font-size: 13px;
    }


    .passage-brand img {
        width: 76px;
        height: 76px;
    }


    .passage-heading-row h1 {
        font-size: 36px;
    }


    .passage-subtitle {
        font-size: 15px;
    }


    .mode-screen {
        padding-top: 38px;
    }


    .mode-card {
        padding:
            23px 20px;
    }


    .activity-topbar {
        margin-bottom:
            15px;
    }


    .activity-topbar h2 {
        font-size: 25px;
    }


    .passage-mode-switch {
        width: 100%;
    }


    .passage-mode-option {
        min-width: 0;
    }


    .passage-card {
        padding:
            25px 20px;

        border-radius: 18px;
    }


    .passage-content {
        font-size: 17px;
        line-height: 2;
    }


    .passage-section-header h3 {
        font-size: 21px;
    }


    .passage-paragraph {
        font-size: 17px;
        line-height: 2;
    }


    .inline-select {
        min-width: 125px;
        max-width: 175px;

        font-size: 15px;
    }


    .inline-input {
        width: 125px;

        font-size: 15px;
    }


    .activity-actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .activity-actions > * {
        width: 100%;
    }


    .results-actions {
        align-items:
            stretch;

        flex-direction:
            column-reverse;
    }


    .results-actions > * {
        width: 100%;
    }


    .section-feedback {
        padding:
            16px;
    }


    .results-card {
        padding:
            28px 20px;
    }


    .review-row {
        grid-template-columns:
            30px
            minmax(
                0,
                1fr
            );

        align-items:
            start;
    }


    .review-status {
        grid-column: 2;
    }

}


/* =======================================================
   VERY SMALL MOBILE
======================================================= */

@media (
    max-width: 420px
) {

    .passage-page {
        width:
            calc(
                100% - 16px
            );
    }


    .passage-brand img {
        width: 68px;
        height: 68px;
    }


    .passage-heading-row h1 {
        font-size: 32px;
    }


    .passage-card {
        padding:
            22px 16px;
    }


    .inline-select {
        min-width: 118px;
        max-width: 155px;
    }


    .inline-input {
        width: 118px;
    }

}