/* ==========================================================
   ACTIVITY 2 — DIGITAL HABITS QUIZ
   MODERN REDESIGN V1
========================================================== */


* {
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    min-height: 100%;
}


body {

    margin: 0;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    color: #173d69;

    background:
        linear-gradient(
            135deg,
            #fff8e8 0%,
            #f4f8ff 55%,
            #edf7ff 100%
        );
}


/* ==========================================================
   MAIN SHELL
========================================================== */

.habit-quiz-shell {

    width:
        min(1180px, calc(100% - 36px));

    margin:
        22px auto;

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

    border:
        4px solid #2452a5;

    border-radius:
        26px;

    box-shadow:
        0 16px 40px
        rgba(31, 66, 125, .14);

    overflow:
        hidden;
}


/* ==========================================================
   HEADER
========================================================== */

.habit-header {

    min-height:
        94px;

    padding:
        16px 22px;

    display:
        grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        16px;

    border-bottom:
        1px solid #dce7f5;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #ffffff
        );
}


.habit-header-icon {

    width:
        56px;

    height:
        56px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    border-radius:
        17px;

    background:
        linear-gradient(
            145deg,
            #f6bb55,
            #e99c24
        );

    box-shadow:
        0 7px 17px
        rgba(207, 139, 28, .2);

    font-size:
        28px;
}


.habit-header-copy h1 {

    margin:
        0;

    color:
        #173f73;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        clamp(22px, 2.3vw, 30px);

    line-height:
        1.08;

    font-weight:
        700;
}


.habit-header-copy p {

    margin:
        4px 0 0;

    color:
        #52719a;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        17px;

    line-height:
        1.2;

    font-weight:
        700;
}


.habit-topic-badge {

    min-width:
        140px;

    padding:
        9px 13px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;

    text-align:
        center;

    border:
        1px solid #dca742;

    border-radius:
        15px;

    background:
        #fff8df;

    color:
        #875c09;
}


.habit-topic-badge strong {

    font-size:
        12px;
}


.habit-topic-badge span {

    font-size:
        11px;
}


/* ==========================================================
   INTRODUCTION
========================================================== */

.habit-intro-card {

    margin:
        18px 20px 14px;

    padding:
        20px 22px;

    border:
        1px solid #dce7f5;

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #fbfdff,
            #f5f9ff
        );
}


.habit-intro-label {

    margin-bottom:
        12px;

    color:
        #d18a13;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .1em;
}


.habit-intro-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, .8fr);

    gap:
        28px;

    align-items:
        center;
}


.habit-intro-main h2 {

    margin:
        0 0 12px;

    max-width:
        640px;

    color:
        #173f73;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        clamp(23px, 2.2vw, 31px);

    line-height:
        1.15;
}


.habit-intro-ky,
.habit-intro-en {

    margin:
        5px 0;

    max-width:
        670px;
}


.habit-intro-ky {

    color:
        #294d79;

    font-size:
        15px;

    font-weight:
        700;
}


.habit-intro-en {

    color:
        #647c98;

    font-size:
        14px;

    font-weight:
        600;
}


.honesty-note {

    margin-top:
        14px;

    padding:
        12px 14px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    border-left:
        4px solid #e5a331;

    border-radius:
        12px;

    background:
        #fff8e9;
}


.honesty-icon {

    font-size:
        23px;
}


.honesty-note strong,
.honesty-note span {

    display:
        block;
}


.honesty-note strong {

    color:
        #6d531b;

    font-size:
        13px;
}


.honesty-note span {

    margin-top:
        3px;

    color:
        #7b715c;

    font-size:
        12px;
}


/* ==========================================================
   VISUAL CARDS
========================================================== */

.habit-intro-visual {

    padding:
        15px;

    border:
        1px solid #d8e4f3;

    border-radius:
        18px;

    background:
        white;
}


.habit-visual-title {

    margin-bottom:
        11px;

    text-align:
        center;
}


.habit-visual-title strong,
.habit-visual-title span {

    display:
        block;
}


.habit-visual-title strong {

    color:
        #214a7d;

    font-size:
        13px;
}


.habit-visual-title span {

    margin-top:
        2px;

    color:
        #7287a1;

    font-size:
        11px;
}


.habit-icon-grid {

    display:
        grid;

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

    gap:
        9px;
}


.habit-icon-card {

    min-height:
        82px;

    padding:
        10px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid #d8e4f2;

    border-radius:
        14px;

    background:
        #f8fbff;

    text-align:
        center;
}


.habit-icon-card > span {

    font-size:
        22px;
}


.habit-icon-card strong {

    margin-top:
        3px;

    color:
        #244d7f;

    font-size:
        12px;
}


.habit-icon-card small {

    margin-top:
        1px;

    color:
        #71849a;

    font-size:
        10px;
}


/* ==========================================================
   PROGRESS
========================================================== */

.habit-progress-card {

    margin:
        0 20px 13px;

    padding:
        11px 15px;

    display:
        grid;

    grid-template-columns:
        auto 1fr;

    align-items:
        center;

    gap:
        15px;

    border:
        1px solid #e0e8f2;

    border-radius:
        16px;

    background:
        #f8faff;
}


.progress-label {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        73px;
}


.progress-label span {

    color:
        #20497e;

    font-size:
        12px;

    font-weight:
        800;
}


.progress-label small {

    color:
        #7c8da2;

    font-size:
        10px;
}


.progress {

    width:
        100%;

    color:
        #315983;

    font-size:
        13px;

    font-weight:
        800;
}


/* ==========================================================
   QUESTION SECTION
========================================================== */

.habit-question-section {

    margin:
        0 20px 18px;

    padding:
        18px;

    border:
        1px solid #dce6f2;

    border-radius:
        21px;

    background:
        white;

    box-shadow:
        0 7px 20px
        rgba(37, 74, 130, .07);
}


.question-heading {

    margin-bottom:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;
}


.question-heading > div:first-child {

    display:
        flex;

    flex-direction:
        column;
}


.question-kicker {

    margin-bottom:
        4px;

    color:
        #d18e20;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .08em;
}


.question-heading strong {

    color:
        #173f73;

    font-size:
        15px;
}


.question-heading small {

    margin-top:
        2px;

    color:
        #778da6;

    font-size:
        11px;
}


.question-heading-icon {

    width:
        36px;

    height:
        36px;

    flex:
        0 0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #2552a4;

    color:
        white;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        21px;

    font-weight:
        800;
}


/* ==========================================================
   EXISTING JS-GENERATED QUIZ CONTENT
========================================================== */

.habit-quiz-content {

    width:
        100%;
}


#quiz h2,
#quiz h3 {

    color:
        #173f73;
}


#quiz .question,
#quiz > div {

    border-radius:
        16px;
}


/*
    Handles common existing option/button markup without
    requiring any JavaScript changes.
*/

#quiz button {

    min-height:
        44px;

    margin:
        5px;

    padding:
        10px 16px;

    border:
        2px solid #d4e0ef;

    border-radius:
        14px;

    background:
        #f8fbff;

    color:
        #214a7d;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        13px;

    font-weight:
        750;

    cursor:
        pointer;

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


#quiz button:hover {

    transform:
        translateY(-1px);

    border-color:
        #7fa4d8;

    background:
        #eef5ff;

    box-shadow:
        0 5px 13px
        rgba(37, 82, 164, .1);
}


/* Existing labels / answer cards */

#quiz label {

    border-radius:
        13px;
}


/* ==========================================================
   RESULT CARD
========================================================== */

.habit-result-card {

    display:
        none;

    margin:
        18px 20px;

    padding:
        25px;

    text-align:
        center;

    border:
        1px solid #d9e4f1;

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            #fbfdff,
            #f5f9ff
        );
}


.habit-result-badge {

    width:
        64px;

    height:
        64px;

    margin:
        0 auto 10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #f3b446;

    color:
        white;

    font-size:
        30px;

    box-shadow:
        0 8px 18px
        rgba(212, 145, 25, .2);
}


.habit-result-kicker {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #d28c18;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .1em;
}


.result-title {

    margin:
        5px 0;

    color:
        #173f73;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        27px;
}


.habit-final-score {

    margin:
        10px auto;

    color:
        #2452a5;

    font-size:
        27px;

    font-weight:
        900;
}


.habit-final-message {

    max-width:
        700px;

    margin:
        7px auto 17px;

    color:
        #526e8e;

    font-size:
        14px;

    line-height:
        1.45;
}


/* ==========================================================
   ANSWER SUMMARY
========================================================== */

.habit-summary-box {

    max-width:
        850px;

    margin:
        16px auto;

    padding:
        15px 18px;

    border:
        1px solid #dce6f1;

    border-radius:
        17px;

    background:
        white;

    text-align:
        left;
}


.habit-summary-box h3 {

    margin:
        0 0 10px;

    color:
        #173f73;

    text-align:
        center;

    font-size:
        15px;
}


#answerSummary {

    margin:
        0;

    padding-left:
        21px;

    color:
        #516d8b;

    font-size:
        12px;

    line-height:
        1.5;
}


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

.habit-result-actions {

    margin-top:
        17px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        11px;

    flex-wrap:
        wrap;
}


.habit-primary-btn,
.habit-secondary-btn {

    min-width:
        155px;

    min-height:
        46px;

    padding:
        8px 20px;

    display:
        inline-flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        999px;

    text-decoration:
        none;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    cursor:
        pointer;
}


.habit-primary-btn {

    background:
        linear-gradient(
            135deg,
            #295aac,
            #1e468c
        );

    color:
        white;

    box-shadow:
        0 6px 14px
        rgba(30, 70, 140, .2);
}


.habit-secondary-btn {

    background:
        linear-gradient(
            135deg,
            #f7ba61,
            #eda34c
        );

    color:
        #123f73;

    box-shadow:
        0 6px 14px
        rgba(160, 101, 25, .16);
}


.habit-primary-btn span,
.habit-secondary-btn span {

    font-size:
        12px;

    font-weight:
        850;
}


.habit-primary-btn small,
.habit-secondary-btn small {

    margin-top:
        2px;

    font-size:
        9px;

    font-weight:
        700;
}


/* ==========================================================
   BOTTOM BACK BUTTON
========================================================== */

.activity2-bottom-nav {

    padding:
        0 20px 18px;
}


.activity2-bottom-back {

    width:
        fit-content;

    min-height:
        40px;

    padding:
        8px 18px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            #f6ba63,
            #eea64d
        );

    color:
        #063c78;

    font-size:
        12px;

    font-weight:
        800;

    text-decoration:
        none;

    box-shadow:
        0 5px 12px
        rgba(126, 82, 22, .15);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 850px) {

    .habit-quiz-shell {

        width:
            calc(100% - 20px);

        margin:
            10px auto;
    }


    .habit-header {

        grid-template-columns:
            auto 1fr;
    }


    .habit-topic-badge {

        grid-column:
            1 / -1;

        justify-self:
            start;
    }


    .habit-intro-layout {

        grid-template-columns:
            1fr;
    }


    .habit-intro-visual {

        max-width:
            520px;

        width:
            100%;

        margin:
            auto;
    }

}


/* ==========================================================
   LAPTOP / DEMO SCREEN
========================================================== */

@media (
    min-width: 901px
) and (
    max-height: 900px
) {

    .habit-quiz-shell {

        margin:
            8px auto;
    }


    .habit-header {

        min-height:
            76px;

        padding:
            10px 18px;
    }


    .habit-header-icon {

        width:
            46px;

        height:
            46px;

        font-size:
            23px;
    }


    .habit-header-copy h1 {

        font-size:
            23px;
    }


    .habit-header-copy p {

        font-size:
            14px;
    }


    .habit-intro-card {

        margin:
            10px 17px 8px;

        padding:
            13px 17px;
    }


    .habit-intro-main h2 {

        font-size:
            22px;

        margin-bottom:
            7px;
    }


    .honesty-note {

        margin-top:
            8px;

        padding:
            8px 11px;
    }


    .habit-icon-card {

        min-height:
            64px;

        padding:
            6px;
    }


    .habit-progress-card {

        margin:
            0 17px 7px;

        padding:
            7px 11px;
    }


    .habit-question-section {

        margin:
            0 17px 10px;

        padding:
            12px 15px;
    }


    .question-heading {

        margin-bottom:
            8px;
    }


    .activity2-bottom-nav {

        padding:
            0 17px 10px;
    }

}



/* ACTIVITY2_FIT_CLICKABLE_V3_START */


/* ==========================================================
   DESKTOP ACTIVITY — FIT ENTIRE SCREEN AT 100% ZOOM
========================================================== */

@media (min-width: 901px) {

    html,
    body {

        width:
            100% !important;

        height:
            100% !important;

        overflow:
            hidden !important;
    }


    body {

        padding:
            0 !important;
    }


    /* -------------------------------------------------------
       MAIN WHITE FRAME
    ------------------------------------------------------- */

    .habit-quiz-shell {

        width:
            min(1180px, calc(100% - 32px)) !important;

        height:
            calc(100vh - 40px) !important;

        max-height:
            calc(100vh - 40px) !important;

        margin:
            6px auto !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        overflow:
            hidden !important;
    }


    /* -------------------------------------------------------
       HEADER
    ------------------------------------------------------- */

    .habit-header {

        flex:
            0 0 auto !important;

        min-height:
            64px !important;

        padding:
            7px 16px !important;

        gap:
            11px !important;
    }


    .habit-header-icon {

        width:
            43px !important;

        height:
            43px !important;

        border-radius:
            13px !important;

        font-size:
            21px !important;
    }


    .habit-header-copy h1 {

        font-size:
            22px !important;

        line-height:
            1.05 !important;
    }


    .habit-header-copy p {

        margin-top:
            2px !important;

        font-size:
            13px !important;
    }


    .habit-topic-badge {

        min-width:
            125px !important;

        padding:
            6px 10px !important;

        border-radius:
            12px !important;
    }


    .habit-topic-badge strong {

        font-size:
            10px !important;
    }


    .habit-topic-badge span {

        font-size:
            9px !important;
    }


    /* ======================================================
       INTRODUCTION — COMPACT BUT FULLY READABLE
    ====================================================== */

    .habit-intro-card {

        flex:
            0 0 auto !important;

        margin:
            8px 14px 6px !important;

        padding:
            10px 14px !important;

        border-radius:
            17px !important;
    }


    .habit-intro-label {

        margin-bottom:
            6px !important;

        font-size:
            9px !important;
    }


    .habit-intro-layout {

        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(280px, .7fr) !important;

        gap:
            20px !important;
    }


    .habit-intro-main h2 {

        margin:
            0 0 5px !important;

        font-size:
            21px !important;

        line-height:
            1.08 !important;
    }


    .habit-intro-ky {

        margin:
            2px 0 !important;

        font-size:
            12px !important;

        line-height:
            1.22 !important;
    }


    .habit-intro-en {

        margin:
            2px 0 !important;

        font-size:
            11px !important;

        line-height:
            1.2 !important;
    }


    .honesty-note {

        margin-top:
            6px !important;

        padding:
            6px 9px !important;

        gap:
            7px !important;

        border-radius:
            10px !important;
    }


    .honesty-icon {

        font-size:
            17px !important;
    }


    .honesty-note strong {

        font-size:
            10px !important;
    }


    .honesty-note span {

        margin-top:
            1px !important;

        font-size:
            9px !important;
    }


    /* ======================================================
       RIGHT INTRO VISUAL
    ====================================================== */

    .habit-intro-visual {

        padding:
            7px !important;

        border-radius:
            14px !important;
    }


    .habit-visual-title {

        margin-bottom:
            5px !important;
    }


    .habit-visual-title strong {

        font-size:
            10px !important;
    }


    .habit-visual-title span {

        font-size:
            8px !important;
    }


    .habit-icon-grid {

        gap:
            5px !important;
    }


    .habit-icon-card {

        min-height:
            47px !important;

        padding:
            4px 6px !important;

        border-radius:
            10px !important;
    }


    .habit-icon-card > span {

        font-size:
            15px !important;
    }


    .habit-icon-card strong {

        margin-top:
            1px !important;

        font-size:
            9px !important;
    }


    .habit-icon-card small {

        font-size:
            7px !important;
    }


    /* ======================================================
       PROGRESS BAR
    ====================================================== */

    .habit-progress-card {

        flex:
            0 0 auto !important;

        margin:
            0 14px 6px !important;

        padding:
            5px 10px !important;

        min-height:
            34px !important;

        gap:
            9px !important;

        border-radius:
            11px !important;
    }


    .progress-label {

        min-width:
            62px !important;
    }


    .progress-label span {

        font-size:
            9px !important;
    }


    .progress-label small {

        font-size:
            7px !important;
    }


    .progress {

        font-size:
            11px !important;
    }


    /* ======================================================
       QUESTION SECTION
    ====================================================== */

    .habit-question-section {

        flex:
            1 1 auto !important;

        min-height:
            0 !important;

        margin:
            0 14px 6px !important;

        padding:
            8px 12px !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        overflow:
            hidden !important;

        border-radius:
            16px !important;
    }


    .question-heading {

        flex:
            0 0 auto !important;

        margin-bottom:
            5px !important;
    }


    .question-kicker {

        margin-bottom:
            1px !important;

        font-size:
            8px !important;
    }


    .question-heading strong {

        font-size:
            11px !important;
    }


    .question-heading small {

        margin-top:
            1px !important;

        font-size:
            8px !important;
    }


    .question-heading-icon {

        width:
            28px !important;

        height:
            28px !important;

        font-size:
            15px !important;
    }


    /* ======================================================
       QUIZ CONTENT
    ====================================================== */

    .habit-quiz-content {

        flex:
            1 1 auto !important;

        min-height:
            0 !important;

        overflow:
            hidden !important;
    }


    /*
       The JS generates:
       .question-card
         .question
         .small-note
         .option
         .option
         ...
         #nextBtn
    */

    #quiz .question-card {

        width:
            100% !important;

        height:
            100% !important;

        min-height:
            0 !important;

        margin:
            0 !important;

        padding:
            7px !important;

        display:
            grid !important;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        align-content:
            start !important;

        gap:
            6px !important;

        background:
            #ffffff !important;

        border:
            0 !important;

        box-shadow:
            none !important;
    }


    /* -------------------------------------------------------
       QUESTION TEXT
    ------------------------------------------------------- */

    #quiz .question {

        grid-column:
            1 / -1 !important;

        margin:
            0 0 2px !important;

        padding:
            0 !important;

        color:
            #173f73 !important;

        font-size:
            15px !important;

        line-height:
            1.23 !important;

        font-weight:
            800 !important;

        text-align:
            left !important;
    }


    #quiz .small-note {

        grid-column:
            1 / -1 !important;

        margin:
            -1px 0 2px !important;

        color:
            #6b8099 !important;

        font-size:
            10px !important;

        line-height:
            1.2 !important;
    }


    /* ======================================================
       CLICKABLE ANSWER CARDS
    ====================================================== */

    #quiz .option {

        min-width:
            0 !important;

        min-height:
            42px !important;

        margin:
            0 !important;

        padding:
            7px 10px !important;

        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        border:
            2px solid #c9d9ed !important;

        border-radius:
            11px !important;

        background:
            #f8fbff !important;

        color:
            #173f73 !important;

        text-align:
            center !important;

        font-size:
            11px !important;

        line-height:
            1.18 !important;

        font-weight:
            750 !important;

        cursor:
            pointer !important;

        transition:
            transform .14s ease,
            background .14s ease,
            border-color .14s ease,
            box-shadow .14s ease !important;
    }


    #quiz .option:hover {

        transform:
            translateY(-1px) !important;

        border-color:
            #6f98d1 !important;

        background:
            #edf5ff !important;

        box-shadow:
            0 3px 8px
            rgba(38, 82, 145, .10) !important;
    }


    /* SELECTED ANSWER */

    #quiz .option.selected {

        border-color:
            #36a965 !important;

        background:
            #e9f8ef !important;

        color:
            #17683a !important;

        box-shadow:
            inset 0 0 0 1px
            rgba(54, 169, 101, .12) !important;
    }


    #quiz .option.selected::before {

        content:
            "✓";

        margin-right:
            6px;

        color:
            #229653;

        font-weight:
            900;
    }


    /* ======================================================
       ABSOLUTELY NO TYPING FIELD
    ====================================================== */

    #quiz .other-input,
    #otherInput {

        display:
            none !important;
    }


    /* ======================================================
       NEXT BUTTON
    ====================================================== */

    #quiz #nextBtn {

        grid-column:
            1 / -1 !important;

        justify-self:
            end !important;

        min-width:
            126px !important;

        min-height:
            34px !important;

        margin:
            2px 0 0 !important;

        padding:
            6px 15px !important;

        border:
            0 !important;

        border-radius:
            999px !important;

        background:
            #2452a5 !important;

        color:
            white !important;

        font-size:
            10px !important;

        font-weight:
            800 !important;

        cursor:
            pointer !important;

        box-shadow:
            0 4px 9px
            rgba(36, 82, 165, .16) !important;
    }


    #quiz #nextBtn:disabled {

        background:
            #c2ccda !important;

        color:
            #718097 !important;

        box-shadow:
            none !important;

        cursor:
            default !important;
    }


    /* ======================================================
       BOTTOM NAVIGATION
    ====================================================== */

    .activity2-bottom-nav {

        flex:
            0 0 auto !important;

        padding:
            0 14px 8px !important;
    }


    .activity2-bottom-back {

        min-height:
            32px !important;

        padding:
            6px 15px !important;

        font-size:
            10px !important;
    }


    /* ======================================================
       RESULT SCREEN
       Allow only result summary itself to scroll if required.
    ====================================================== */

    .habit-result-card {

        overflow-y:
            auto !important;

        max-height:
            calc(100vh - 150px) !important;
    }

}


/* ==========================================================
   EXTRA SHORT LAPTOP SCREENS
========================================================== */

@media (
    min-width: 901px
) and (
    max-height: 780px
) {

    .habit-quiz-shell {

        height:
            calc(100vh - 30px) !important;

        max-height:
            calc(100vh - 30px) !important;

        margin:
            3px auto !important;
    }


    .habit-header {

        min-height:
            56px !important;
    }


    .habit-intro-card {

        margin-top:
            5px !important;

        padding:
            7px 12px !important;
    }


    .habit-intro-main h2 {

        font-size:
            18px !important;
    }


    .habit-icon-card {

        min-height:
            40px !important;
    }


    #quiz .option {

        min-height:
            36px !important;

        padding:
            5px 8px !important;

        font-size:
            10px !important;
    }


    #quiz .question {

        font-size:
            13px !important;
    }

}


/* ==========================================================
   VERY WIDE SCREENS
   Four columns when there are many short answers.
========================================================== */

@media (
    min-width: 1350px
) and (
    min-height: 760px
) {

    #quiz .question-card {

        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            ) !important;
    }

}


/* ==========================================================
   MOBILE / TABLET
   Scrolling is allowed here.
========================================================== */

@media (max-width: 900px) {

    html,
    body {

        height:
            auto !important;

        overflow-y:
            auto !important;
    }


    .habit-quiz-shell {

        height:
            auto !important;

        max-height:
            none !important;
    }


    #quiz .question-card {

        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            8px !important;
    }


    #quiz .question,
    #quiz .small-note,
    #quiz #nextBtn {

        grid-column:
            1 !important;
    }


    #quiz .option {

        margin:
            0 !important;

        padding:
            11px 12px !important;

        font-size:
            13px !important;
    }

}


/* ACTIVITY2_FIT_CLICKABLE_V3_END */



/* ACTIVITY2_HEADER_NAV_CLEANUP_V4_START */


/* ==========================================================
   MAIN TITLE — SECOND QUESTION
========================================================== */

.habit-header-copy h1 {

    display:
        flex !important;

    align-items:
        baseline !important;

    flex-wrap:
        wrap !important;

    gap:
        5px 10px !important;
}


.habit-title-second {

    color:
        #d67c48 !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        .72em !important;

    font-weight:
        700 !important;
}


.habit-header-copy p {

    display:
        flex !important;

    align-items:
        baseline !important;

    flex-wrap:
        wrap !important;

    gap:
        4px 8px !important;
}


.habit-title-second-en {

    color:
        #d67c48 !important;

    font-size:
        .88em !important;

    font-weight:
        700 !important;
}


/* ==========================================================
   INTRO — REMOVE NOW-UNNECESSARY EMPTY SPACE
========================================================== */

.habit-intro-card {

    padding-top:
        12px !important;

    padding-bottom:
        12px !important;
}


.habit-intro-layout {

    align-items:
        center !important;
}


.habit-intro-main {

    display:
        flex !important;

    flex-direction:
        column !important;

    justify-content:
        center !important;
}


.habit-intro-ky {

    margin-top:
        0 !important;

    font-size:
        13px !important;

    line-height:
        1.3 !important;
}


.habit-intro-en {

    font-size:
        12px !important;

    line-height:
        1.3 !important;
}


/* ==========================================================
   QUESTION AREA
   RESERVE BOTTOM SPACE FOR NAVIGATION
========================================================== */

.habit-question-section {

    position:
        relative !important;

    padding-bottom:
        50px !important;
}


/* ==========================================================
   BACK TO CHAPTER
   INSIDE FRAME, BOTTOM LEFT
========================================================== */

.activity2-bottom-nav {

    position:
        absolute !important;

    left:
        30px !important;

    bottom:
        15px !important;

    z-index:
        40 !important;

    padding:
        0 !important;

    margin:
        0 !important;
}


.habit-quiz-shell {

    position:
        relative !important;
}


.activity2-bottom-back {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        6px !important;

    width:
        auto !important;

    min-width:
        0 !important;

    min-height:
        38px !important;

    padding:
        8px 18px !important;

    border:
        0 !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            135deg,
            #f6ba63 0%,
            #eea64d 100%
        ) !important;

    color:
        #063c78 !important;

    text-decoration:
        none !important;

    font-size:
        11px !important;

    line-height:
        1.2 !important;

    font-weight:
        800 !important;

    box-shadow:
        0 5px 12px
        rgba(126, 82, 22, .16) !important;
}


.activity2-bottom-back:hover {

    background:
        linear-gradient(
            135deg,
            #ffc974 0%,
            #f2ad53 100%
        ) !important;

    transform:
        translateY(-1px) !important;
}


/* ==========================================================
   DESKTOP FIT
========================================================== */

@media (min-width: 901px) {

    .habit-header {

        min-height:
            68px !important;

        padding:
            7px 16px !important;
    }


    .habit-header-copy h1 {

        margin:
            0 !important;

        font-size:
            21px !important;

        line-height:
            1.07 !important;
    }


    .habit-header-copy p {

        margin:
            2px 0 0 !important;

        font-size:
            12px !important;

        line-height:
            1.15 !important;
    }


    .habit-intro-card {

        margin:
            6px 14px !important;

        padding:
            9px 14px !important;
    }


    .habit-question-section {

        margin-bottom:
            55px !important;
    }


    .activity2-bottom-nav {

        left:
            18px !important;

        bottom:
            10px !important;
    }

}


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

@media (max-width: 900px) {

    .habit-title-second,
    .habit-title-second-en {

        width:
            100% !important;
    }


    .activity2-bottom-nav {

        position:
            static !important;

        padding:
            0 14px 12px !important;

        margin:
            0 !important;
    }


    .habit-question-section {

        padding-bottom:
            14px !important;

        margin-bottom:
            10px !important;
    }

}


/* ACTIVITY2_HEADER_NAV_CLEANUP_V4_END */



/* ACTIVITY2_EQUAL_TITLES_VISIBLE_BACK_V5_START */


/* ==========================================================
   MAIN HEADER
   BOTH KYRGYZ TITLES = SAME STYLE
========================================================== */

.habit-header-copy h1 {

    margin:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    flex-wrap:
        wrap !important;

    gap:
        4px 10px !important;

    color:
        #173f73 !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        21px !important;

    line-height:
        1.08 !important;

    font-weight:
        700 !important;
}


.habit-title-part {

    display:
        inline !important;

    color:
        #173f73 !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        21px !important;

    line-height:
        1.08 !important;

    font-weight:
        700 !important;
}


.habit-entitle-part {

    display:
        inline !important;

    color:
        #f2a713 !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        21px !important;

    line-height:
        1.08 !important;

    font-weight:
        700 !important;
}



/* ==========================================================
   ENGLISH TITLES
   BOTH = SAME STYLE
========================================================== */

.habit-header-copy p {

    margin:
        2px 0 0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    flex-wrap:
        wrap !important;

    gap:
        3px 8px !important;

    color:
        #52719a !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        12px !important;

    line-height:
        1.12 !important;

    font-weight:
        700 !important;
}


.habit-subtitle-part {

    display:
        inline !important;

    color:
        #52719a !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        12px !important;

    line-height:
        1.12 !important;

    font-weight:
        700 !important;
}


/* Remove any older special orange treatment */

.habit-title-second,
.habit-title-second-en {

    color:
        inherit !important;

    font-size:
        inherit !important;

    font-weight:
        inherit !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}


/* ==========================================================
   MAIN FRAME
========================================================== */

.habit-quiz-shell {

    position:
        relative !important;

    padding-bottom:
        50px !important;
}


/* ==========================================================
   QUESTION AREA
   RECOVER SPACE FOR BOTTOM BUTTON
========================================================== */

.habit-question-section {

    margin-bottom:
        0 !important;

    padding-bottom:
        14px !important;
}


/* ==========================================================
   BACK TO CHAPTER
   ALWAYS INSIDE THE BLUE FRAME
========================================================== */

.activity2-bottom-nav {

    position:
        absolute !important;

    left:
        18px !important;

    bottom:
        10px !important;

    z-index:
        100 !important;

    display:
        block !important;

    padding:
        0 !important;

    margin:
        0 !important;
}


.activity2-bottom-back {

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        6px !important;

    width:
        auto !important;

    min-width:
        0 !important;

    min-height:
        34px !important;

    padding:
        7px 17px !important;

    border:
        none !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            135deg,
            #f6ba63 0%,
            #eea64d 100%
        ) !important;

    color:
        #063c78 !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        10px !important;

    line-height:
        1.15 !important;

    font-weight:
        800 !important;

    text-decoration:
        none !important;

    box-shadow:
        0 5px 12px
        rgba(
            126,
            82,
            22,
            .16
        ) !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


.activity2-bottom-back:hover {

    background:
        linear-gradient(
            135deg,
            #ffc974 0%,
            #f2ad53 100%
        ) !important;

    color:
        #063c78 !important;

    transform:
        translateY(-1px) !important;
}


/* ==========================================================
   DESKTOP
========================================================== */

@media (min-width: 901px) {

    .habit-header-copy {

        min-width:
            0 !important;
    }


    .habit-header-copy h1 {

        font-size:
            20px !important;
    }


    .habit-title-part {

        font-size:
            20px !important;
    }


    .habit-header-copy p,
    .habit-subtitle-part {

        font-size:
            11px !important;
    }


    .habit-quiz-shell {

        padding-bottom:
            48px !important;
    }


    .activity2-bottom-nav {

        left:
            16px !important;

        bottom:
            8px !important;
    }

}


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

@media (max-width: 900px) {

    .habit-header-copy h1 {

        display:
            block !important;
    }


    .habit-title-part {

        display:
            block !important;

        margin-bottom:
            2px !important;
    }


    .habit-header-copy p {

        display:
            block !important;
    }


    .habit-subtitle-part {

        display:
            block !important;

        margin-bottom:
            1px !important;
    }


    .habit-quiz-shell {

        padding-bottom:
            0 !important;
    }


    .activity2-bottom-nav {

        position:
            static !important;

        padding:
            0 14px 12px !important;
    }

}


/* ACTIVITY2_EQUAL_TITLES_VISIBLE_BACK_V5_END */



/* ACTIVITY2_FINAL_READABLE_FRAME_V6_START */


/* ==========================================================
   PAGE
   Keep content clear of the top/bottom ornamental strips.
========================================================== */

@media (min-width: 901px) {

    html,
    body {

        width:
            100% !important;

        height:
            100% !important;

        overflow:
            hidden !important;
    }


    body {

        padding:
            0 !important;
    }


    /* ======================================================
       COMPLETE BLUE FRAME

       Important:
       Do NOT let it extend behind bottom ornament.
    ====================================================== */

    .habit-quiz-shell {

        position:
            relative !important;

        width:
            min(1240px, calc(100% - 38px)) !important;

        height:
            calc(100vh - 92px) !important;

        max-height:
            calc(100vh - 92px) !important;

        margin:
            8px auto 0 !important;

        padding:
            0 0 54px !important;

        display:
            flex !important;

        flex-direction:
            column !important;

        border:
            4px solid #2452a5 !important;

        border-radius:
            24px !important;

        overflow:
            hidden !important;

        background:
            #ffffff !important;
    }


    /* ======================================================
       HEADER
    ====================================================== */

    .habit-header {

        flex:
            0 0 auto !important;

        min-height:
            70px !important;

        padding:
            8px 18px !important;

        gap:
            13px !important;
    }


    .habit-header-icon {

        width:
            46px !important;

        height:
            46px !important;

        font-size:
            23px !important;
    }


    /*
       Kyrgyz title — one consistent typographic line.
    */

    .habit-header-copy h1 {

        margin:
            0 !important;

        display:
            flex !important;

        flex-wrap:
            wrap !important;

        align-items:
            baseline !important;

        gap:
            0 7px !important;

        color:
            #173f73 !important;

        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

        font-size:
            23px !important;

        line-height:
            1.08 !important;

        font-weight:
            700 !important;
    }


    .habit-title-part,
    .habit-title-second,
    .habit-entitle-part {

        display:
            inline !important;

        color:
            #173f73 !important;

        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

        font-size:
            23px !important;

        line-height:
            1.08 !important;

        font-weight:
            700 !important;
    }


    /*
       English line — same style across both halves.
    */

    .habit-header-copy p {

        margin:
            3px 0 0 !important;

        display:
            flex !important;

        flex-wrap:
            wrap !important;

        gap:
            0 6px !important;

        color:
            #d69214 !important;

        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

        font-size:
            16px !important;

        line-height:
            1.1 !important;

        font-weight:
            700 !important;
    }


    .habit-subtitle-part,
    .habit-title-second-en {

        color:
            #d69214 !important;

        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

        font-size:
            16px !important;

        line-height:
            1.1 !important;

        font-weight:
            700 !important;
    }


    .habit-topic-badge {

        min-width:
            130px !important;

        padding:
            7px 11px !important;
    }


    .habit-topic-badge strong {

        font-size:
            11px !important;
    }


    .habit-topic-badge span {

        font-size:
            10px !important;
    }


    /* ======================================================
       INTRODUCTION
    ====================================================== */

    .habit-intro-card {

        flex:
            0 0 auto !important;

        margin:
            7px 14px 6px !important;

        padding:
            12px 15px !important;

        border-radius:
            17px !important;
    }


    .habit-intro-layout {

        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(320px, .75fr) !important;

        gap:
            24px !important;
    }


    .habit-intro-ky {

        margin:
            0 0 3px !important;

        color:
            #173f73 !important;

        font-size:
            15px !important;

        line-height:
            1.25 !important;

        font-weight:
            750 !important;
    }


    .habit-intro-en {

        margin:
            0 !important;

        color:
            #536f91 !important;

        font-size:
            14px !important;

        line-height:
            1.25 !important;

        font-weight:
            600 !important;
    }


    .honesty-note {

        margin-top:
            8px !important;

        padding:
            8px 11px !important;
    }


    .honesty-note strong {

        font-size:
            12px !important;

        line-height:
            1.2 !important;
    }


    .honesty-note span {

        font-size:
            11px !important;

        line-height:
            1.2 !important;
    }


    /* ======================================================
       RIGHT VISUAL
    ====================================================== */

    .habit-intro-visual {

        padding:
            8px 10px !important;
    }


    .habit-visual-title strong {

        font-size:
            12px !important;
    }


    .habit-visual-title span {

        font-size:
            9px !important;
    }


    .habit-icon-card {

        min-height:
            52px !important;

        padding:
            5px !important;
    }


    .habit-icon-card > span {

        font-size:
            17px !important;
    }


    .habit-icon-card strong {

        font-size:
            10px !important;
    }


    .habit-icon-card small {

        font-size:
            8px !important;
    }


    /* ======================================================
       PROGRESS
    ====================================================== */

    .habit-progress-card {

        flex:
            0 0 auto !important;

        min-height:
            40px !important;

        margin:
            0 14px 6px !important;

        padding:
            6px 11px !important;
    }


    .progress-label {

        min-width:
            72px !important;
    }


    .progress-label span {

        font-size:
            11px !important;
    }


    .progress-label small {

        font-size:
            9px !important;
    }


    .progress {

        font-size:
            13px !important;

        font-weight:
            800 !important;
    }


    /* ======================================================
       QUESTION FRAME
    ====================================================== */

    .habit-question-section {

        flex:
            1 1 auto !important;

        min-height:
            0 !important;

        margin:
            0 14px 8px !important;

        padding:
            11px 13px !important;

        overflow:
            hidden !important;

        border:
            1px solid #dce6f2 !important;

        border-radius:
            17px !important;

        background:
            #ffffff !important;
    }


    .question-heading {

        margin-bottom:
            8px !important;
    }


    .question-kicker {

        font-size:
            10px !important;

        line-height:
            1.15 !important;
    }


    .question-heading strong {

        font-size:
            13px !important;

        line-height:
            1.2 !important;
    }


    .question-heading small {

        margin-top:
            2px !important;

        font-size:
            10px !important;

        line-height:
            1.2 !important;
    }


    .question-heading-icon {

        width:
            31px !important;

        height:
            31px !important;

        font-size:
            17px !important;
    }


    /* ======================================================
       QUESTION
    ====================================================== */

    #quiz .question-card {

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        padding:
            4px 7px !important;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        gap:
            8px !important;
    }


    #quiz .question {

        margin:
            0 0 3px !important;

        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

        font-size:
            18px !important;

        line-height:
            1.25 !important;

        font-weight:
            800 !important;

        color:
            #173f73 !important;
    }


    #quiz .small-note {

        margin:
            0 0 3px !important;

        color:
            #5d7592 !important;

        font-size:
            12px !important;

        line-height:
            1.2 !important;

        font-weight:
            600 !important;
    }


    /* ======================================================
       CLICKABLE ANSWERS
    ====================================================== */

    #quiz .option {

        min-height:
            46px !important;

        margin:
            0 !important;

        padding:
            8px 11px !important;

        border:
            2px solid #bcd1eb !important;

        border-radius:
            12px !important;

        background:
            #f8fbff !important;

        color:
            #173f73 !important;

        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

        font-size:
            14px !important;

        line-height:
            1.2 !important;

        font-weight:
            700 !important;

        text-align:
            center !important;
    }


    #quiz .option:hover {

        border-color:
            #719cd5 !important;

        background:
            #edf5ff !important;
    }


    #quiz .option.selected {

        border-color:
            #34a465 !important;

        background:
            #e7f8ed !important;

        color:
            #17683a !important;
    }


    /* ======================================================
       NEXT
    ====================================================== */

    #quiz #nextBtn {

        min-width:
            145px !important;

        min-height:
            39px !important;

        margin-top:
            4px !important;

        padding:
            7px 18px !important;

        font-size:
            12px !important;

        font-weight:
            800 !important;
    }


    /* ======================================================
       BACK TO CHAPTER
       REAL RESERVED FOOTER INSIDE BLUE FRAME
    ====================================================== */

    .activity2-bottom-nav {

        position:
            absolute !important;

        left:
            18px !important;

        bottom:
            10px !important;

        right:
            auto !important;

        top:
            auto !important;

        z-index:
            999 !important;

        display:
            block !important;

        width:
            auto !important;

        height:
            auto !important;

        padding:
            0 !important;

        margin:
            0 !important;

        visibility:
            visible !important;

        opacity:
            1 !important;

        pointer-events:
            auto !important;
    }


    .activity2-bottom-back {

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            center !important;

        gap:
            7px !important;

        min-height:
            37px !important;

        padding:
            8px 18px !important;

        border-radius:
            999px !important;

        background:
            linear-gradient(
                135deg,
                #f6ba63,
                #eea64d
            ) !important;

        color:
            #063c78 !important;

        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

        font-size:
            12px !important;

        line-height:
            1.15 !important;

        font-weight:
            800 !important;

        text-decoration:
            none !important;

        visibility:
            visible !important;

        opacity:
            1 !important;

        box-shadow:
            0 5px 12px
            rgba(126, 82, 22, .16) !important;
    }

}


/* ==========================================================
   SHORTER LAPTOP SCREENS
========================================================== */

@media (
    min-width: 901px
) and (
    max-height: 780px
) {

    .habit-quiz-shell {

        height:
            calc(100vh - 84px) !important;

        max-height:
            calc(100vh - 84px) !important;
    }


    .habit-header-copy h1,
    .habit-title-part,
    .habit-title-second,
    .habit-entitle-part {

        font-size:
            20px !important;
    }


    .habit-header-copy p,
    .habit-subtitle-part,
    .habit-title-second-en {

        font-size:
            14px !important;
    }


    #quiz .question {

        font-size:
            16px !important;
    }


    #quiz .option {

        min-height:
            40px !important;

        padding:
            6px 9px !important;

        font-size:
            12px !important;
    }

}


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

@media (max-width: 900px) {

    html,
    body {

        height:
            auto !important;

        overflow-y:
            auto !important;
    }


    .habit-quiz-shell {

        height:
            auto !important;

        max-height:
            none !important;

        padding-bottom:
            0 !important;
    }


    .activity2-bottom-nav {

        position:
            static !important;

        padding:
            0 14px 14px !important;

        visibility:
            visible !important;

        opacity:
            1 !important;
    }

}


/* ACTIVITY2_FINAL_READABLE_FRAME_V6_END */



/* ACTIVITY2_FINAL_100_PERCENT_BALANCE_V7_START */


/* ==========================================================
   DESKTOP / LAPTOP
========================================================== */

@media (min-width: 901px) {

    /*
       Keep the complete activity between the ornamental
       top and bottom bands.
    */

    .habit-quiz-shell {

        height:
            calc(100vh - 86px) !important;

        max-height:
            calc(100vh - 86px) !important;

        padding-bottom:
            48px !important;

        overflow:
            hidden !important;
    }


    /* ======================================================
       HEADER — slightly tighter
    ====================================================== */

    .habit-header {

        min-height:
            64px !important;

        padding:
            6px 17px !important;
    }


    .habit-header-icon {

        width:
            43px !important;

        height:
            43px !important;

        font-size:
            21px !important;
    }


    .habit-header-copy h1,
    .habit-title-part,
    .habit-title-second,
    .habit-entitle-part {

        font-size:
            21px !important;

        line-height:
            1.05 !important;
    }


    .habit-header-copy p,
    .habit-subtitle-part,
    .habit-title-second-en {

        font-size:
            15px !important;

        line-height:
            1.05 !important;
    }


    /* ======================================================
       INTRO — reduce height, not readability
    ====================================================== */

    .habit-intro-card {

        margin:
            6px 14px 5px !important;

        padding:
            9px 14px !important;
    }


    .habit-intro-ky {

        font-size:
            14px !important;
    }


    .habit-intro-en {

        font-size:
            13px !important;
    }


    .honesty-note {

        margin-top:
            6px !important;

        padding:
            6px 10px !important;
    }


    .honesty-note strong {

        font-size:
            11px !important;
    }


    .honesty-note span {

        font-size:
            10px !important;
    }


    .habit-intro-visual {

        padding:
            7px 9px !important;
    }


    .habit-icon-card {

        min-height:
            47px !important;
    }


    /* ======================================================
       PROGRESS — compact
    ====================================================== */

    .habit-progress-card {

        min-height:
            36px !important;

        margin:
            0 14px 5px !important;

        padding:
            5px 10px !important;
    }


    .progress {

        font-size:
            12px !important;
    }


    /* ======================================================
       QUESTION SECTION
       IMPORTANT: no more vertical clipping
    ====================================================== */

    .habit-question-section {

        flex:
            1 1 auto !important;

        min-height:
            0 !important;

        margin:
            0 14px 7px !important;

        padding:
            9px 12px 10px !important;

        overflow:
            visible !important;
    }


    /*
       We removed the kicker, therefore reclaim its space.
    */

    .question-heading {

        margin-bottom:
            6px !important;
    }


    .question-heading > div:first-child {

        gap:
            1px !important;
    }


    .question-heading strong {

        font-size:
            13px !important;
    }


    .question-heading small {

        font-size:
            10px !important;
    }


    /* ======================================================
       QUIZ WRAPPER
    ====================================================== */

    .habit-quiz-content {

        flex:
            1 1 auto !important;

        min-height:
            0 !important;

        overflow:
            visible !important;
    }


    #quiz .question-card {

        height:
            auto !important;

        min-height:
            0 !important;

        padding:
            4px 7px !important;

        align-content:
            start !important;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            ) !important;

        gap:
            7px !important;

        overflow:
            visible !important;
    }


    /* ======================================================
       BILINGUAL QUESTION — SAME LINE
    ====================================================== */

    #quiz .question {

        grid-column:
            1 / -1 !important;

        margin:
            0 0 2px !important;

        display:
            flex !important;

        flex-wrap:
            wrap !important;

        align-items:
            baseline !important;

        gap:
            3px 6px !important;

        font-size:
            16px !important;

        line-height:
            1.18 !important;
    }


    #quiz .question-ky {

        color:
            #173f73 !important;

        font-size:
            16px !important;

        font-weight:
            800 !important;
    }


    #quiz .question-divider {

        color:
            #d39a25 !important;

        font-size:
            15px !important;

        font-weight:
            700 !important;
    }


    #quiz .question-en {

        color:
            #2d5a89 !important;

        font-size:
            16px !important;

        font-weight:
            750 !important;
    }


    #quiz .small-note {

        margin:
            0 0 2px !important;

        font-size:
            11px !important;

        line-height:
            1.15 !important;
    }


    /* ======================================================
       OPTIONS

       Still easy to read, but slightly shorter so all rows
       fit at normal 100% browser zoom.
    ====================================================== */

    #quiz .option {

        min-height:
            40px !important;

        padding:
            6px 9px !important;

        font-size:
            13px !important;

        line-height:
            1.15 !important;
    }


    /* ======================================================
       NEXT BUTTON
    ====================================================== */

    #quiz #nextBtn {

        min-width:
            140px !important;

        min-height:
            36px !important;

        margin:
            2px 0 0 !important;

        padding:
            6px 16px !important;

        font-size:
            11px !important;
    }


    /* ======================================================
       BACK BUTTON — KEEP CURRENT GOOD POSITION
    ====================================================== */

    .activity2-bottom-nav {

        left:
            18px !important;

        bottom:
            8px !important;

        display:
            block !important;

        visibility:
            visible !important;

        opacity:
            1 !important;
    }


    .activity2-bottom-back {

        min-height:
            36px !important;

        padding:
            7px 18px !important;

        font-size:
            12px !important;
    }

}


/* ==========================================================
   SCREEN AROUND YOUR CURRENT LAPTOP HEIGHT
========================================================== */

@media (
    min-width: 901px
) and (
    max-height: 850px
) {

    .habit-quiz-shell {

        height:
            calc(100vh - 78px) !important;

        max-height:
            calc(100vh - 78px) !important;
    }


    .habit-header {

        min-height:
            58px !important;
    }


    .habit-header-copy h1,
    .habit-title-part,
    .habit-title-second,
    .habit-entitle-part {

        font-size:
            19px !important;
    }


    .habit-header-copy p,
    .habit-subtitle-part,
    .habit-title-second-en {

        font-size:
            13px !important;
    }


    .habit-intro-card {

        padding:
            7px 12px !important;
    }


    .habit-intro-ky {

        font-size:
            12px !important;
    }


    .habit-intro-en {

        font-size:
            11px !important;
    }


    .habit-icon-card {

        min-height:
            41px !important;
    }


    .habit-progress-card {

        min-height:
            32px !important;

        padding:
            4px 9px !important;
    }


    .question-heading {

        margin-bottom:
            4px !important;
    }


    #quiz .question,
    #quiz .question-ky,
    #quiz .question-en {

        font-size:
            14px !important;
    }


    #quiz .option {

        min-height:
            36px !important;

        padding:
            5px 8px !important;

        font-size:
            11.5px !important;
    }


    #quiz #nextBtn {

        min-height:
            32px !important;
    }

}


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

@media (max-width: 900px) {

    #quiz .question {

        display:
            block !important;
    }


    #quiz .question-divider {

        display:
            none !important;
    }


    #quiz .question-ky,
    #quiz .question-en {

        display:
            block !important;
    }


    #quiz .question-en {

        margin-top:
            3px !important;
    }

}


/* ACTIVITY2_FINAL_100_PERCENT_BALANCE_V7_END */



/* ACTIVITY2_BOTTOM_FRAME_GAP_V8_START */


/* ==========================================================
   FINAL BOTTOM FRAME VISIBILITY
========================================================== */

@media (min-width: 901px) {

    /*
       Pull the whole outer frame slightly upward from
       the bottom decorative ornament.
    */

    .habit-quiz-shell {

        height:
            calc(100vh - 102px) !important;

        max-height:
            calc(100vh - 102px) !important;

        margin:
            8px auto 12px !important;

        padding-bottom:
            58px !important;
    }


    /*
       Keep question panel slightly above the footer area.
    */

    .habit-question-section {

        margin-bottom:
            10px !important;
    }


    /*
       Back button remains inside the blue frame.
    */

    .activity2-bottom-nav {

        bottom:
            12px !important;
    }


    /*
       Make sure there is visible white space below button
       before the blue outer border.
    */

    .activity2-bottom-back {

        margin-bottom:
            2px !important;
    }

}


/* Slightly shorter screens */

@media (
    min-width: 901px
) and (
    max-height: 820px
) {

    .habit-quiz-shell {

        height:
            calc(100vh - 94px) !important;

        max-height:
            calc(100vh - 94px) !important;

        padding-bottom:
            54px !important;
    }


    .activity2-bottom-nav {

        bottom:
            10px !important;
    }

}


/* ACTIVITY2_BOTTOM_FRAME_GAP_V8_END */



/* ==========================================================
   ACTIVITY2_QUESTION_TEXT_POLISH_V9

   Final question typography polish:
   - instruction KY + EN on one line
   - larger helper text
   - larger bilingual question
   - keep existing frame/layout untouched
========================================================== */


/* ==========================================================
   QUESTION INSTRUCTION

   Өзүңө эң туура келген жоопту танда
   Choose the answer that describes you best
========================================================== */

.question-heading > div:first-child {

    display:
        flex !important;

    flex-direction:
        row !important;

    flex-wrap:
        wrap !important;

    align-items:
        baseline !important;

    column-gap:
        8px !important;

    row-gap:
        2px !important;
}


.question-heading strong {

    display:
        inline !important;

    margin:
        0 !important;

    color:
        #173f73 !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        14px !important;

    line-height:
        1.2 !important;

    font-weight:
        800 !important;
}


.question-heading small {

    display:
        inline !important;

    margin:
        0 !important;

    color:
        #597492 !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        13px !important;

    line-height:
        1.2 !important;

    font-weight:
        600 !important;
}


/*
   Add a subtle bilingual separator.
*/

.question-heading strong::after {

    content:
        " /";

    margin-left:
        3px;

    color:
        #d89b23;

    font-weight:
        700;
}


/* ==========================================================
   ACTUAL QUESTION

   Example:
   1. Кайсы санариптик түзмөктөрдү колдоносуң?
   / Which digital devices do you use?
========================================================== */

#quiz .question {

    font-size:
        17px !important;

    line-height:
        1.22 !important;

    font-weight:
        800 !important;
}


#quiz .question-ky {

    font-size:
        17px !important;

    line-height:
        1.22 !important;

    font-weight:
        800 !important;
}


#quiz .question-en {

    font-size:
        17px !important;

    line-height:
        1.22 !important;

    font-weight:
        800 !important;
}


#quiz .question-divider {

    font-size:
        17px !important;

    line-height:
        1.22 !important;

    font-weight:
        800 !important;
}


/* ==========================================================
   QUESTION HELPER TEXT

   Бир нечесин тандасаң болот.
   You can choose more than one.
========================================================== */

#quiz .small-note {

    margin:
        2px 0 5px !important;

    color:
        #536f8e !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        13px !important;

    line-height:
        1.25 !important;

    font-weight:
        650 !important;
}


/* ==========================================================
   ANSWER TEXT
   Slight readability improvement only.
========================================================== */

#quiz .option {

    font-size:
        13px !important;

    line-height:
        1.2 !important;

    font-weight:
        700 !important;
}


/* ==========================================================
   SHORT LAPTOP SCREENS
   Do not shrink these important texts excessively.
========================================================== */

@media (
    min-width: 901px
) and (
    max-height: 850px
) {

    .question-heading strong {

        font-size:
            13px !important;
    }


    .question-heading small {

        font-size:
            12px !important;
    }


    #quiz .question,
    #quiz .question-ky,
    #quiz .question-en,
    #quiz .question-divider {

        font-size:
            16px !important;
    }


    #quiz .small-note {

        font-size:
            12px !important;
    }


    #quiz .option {

        font-size:
            12px !important;
    }

}


/* ==========================================================
   MOBILE
   Stack bilingual instruction when width becomes limited.
========================================================== */

@media (max-width: 900px) {

    .question-heading > div:first-child {

        display:
            block !important;
    }


    .question-heading strong,
    .question-heading small {

        display:
            block !important;
    }


    .question-heading strong::after {

        content:
            "" !important;
    }


    .question-heading small {

        margin-top:
            2px !important;
    }

}



/* ACTIVITY2_UNIFIED_SERIF_TYPOGRAPHY_V10_START */


/* ==========================================================
   GLOBAL TYPOGRAPHY

   Match the book-style serif typography used in the header.
========================================================== */

.habit-quiz-shell,
.habit-quiz-shell button,
.habit-quiz-shell a,
.habit-quiz-shell input {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}


/* ==========================================================
   INTRODUCTION
========================================================== */

.habit-intro-ky {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        15px !important;

    line-height:
        1.28 !important;

    font-weight:
        700 !important;
}


.habit-intro-en {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        14px !important;

    line-height:
        1.28 !important;

    font-weight:
        700 !important;
}


/* Honesty note */

.honesty-note strong {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        13px !important;

    font-weight:
        700 !important;
}


.honesty-note span {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        12px !important;

    font-weight:
        600 !important;
}


/* ==========================================================
   RIGHT-HAND HABIT CARDS
========================================================== */

.habit-visual-title strong {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        13px !important;

    font-weight:
        700 !important;
}


.habit-visual-title span {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        11px !important;

    font-weight:
        600 !important;
}


.habit-icon-card strong {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        11px !important;

    font-weight:
        700 !important;
}


.habit-icon-card small {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        9px !important;

    font-weight:
        600 !important;
}


/* ==========================================================
   PROGRESS BAR
========================================================== */

.progress-label span,
.progress,
.progress-label small {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}


.progress-label span {

    font-size:
        12px !important;

    font-weight:
        700 !important;
}


.progress-label small {

    font-size:
        10px !important;

    font-weight:
        600 !important;
}


.progress {

    font-size:
        14px !important;

    font-weight:
        700 !important;
}


/* ==========================================================
   QUESTION INSTRUCTION

   Өзүңө эң туура келген жоопту танда /
   Choose the answer that describes you best
========================================================== */

.question-heading strong,
.question-heading small {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}


.question-heading strong {

    font-size:
        15px !important;

    line-height:
        1.18 !important;

    font-weight:
        700 !important;
}


.question-heading small {

    font-size:
        14px !important;

    line-height:
        1.18 !important;

    font-weight:
        700 !important;

    color:
        #3f6388 !important;
}


/* ==========================================================
   MAIN BILINGUAL QUESTION
========================================================== */

#quiz .question,
#quiz .question-ky,
#quiz .question-en,
#quiz .question-divider {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        18px !important;

    line-height:
        1.2 !important;

    font-weight:
        700 !important;
}


#quiz .question-ky {

    color:
        #173f73 !important;
}


#quiz .question-en {

    color:
        #173f73 !important;
}


/* ==========================================================
   HELPER NOTE
========================================================== */

#quiz .small-note {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        14px !important;

    line-height:
        1.22 !important;

    font-weight:
        600 !important;

    color:
        #526f8f !important;
}


/* ==========================================================
   CLICKABLE ANSWERS
========================================================== */

#quiz .option {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        14px !important;

    line-height:
        1.18 !important;

    font-weight:
        700 !important;
}


/* ==========================================================
   NEXT BUTTON
========================================================== */

#quiz #nextBtn {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        13px !important;

    font-weight:
        700 !important;
}


/* ==========================================================
   BACK TO CHAPTER
========================================================== */

.activity2-bottom-back {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        14px !important;

    font-weight:
        700 !important;
}


/* ==========================================================
   RESULT SCREEN
========================================================== */

.result-title,
.habit-final-score,
.habit-final-message,
.habit-summary-box,
.habit-summary-box h3,
#answerSummary,
.habit-primary-btn,
.habit-secondary-btn {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}


.result-title {

    font-size:
        28px !important;
}


.habit-final-score {

    font-size:
        26px !important;
}


.habit-final-message {

    font-size:
        15px !important;
}


.habit-summary-box h3 {

    font-size:
        17px !important;
}


#answerSummary {

    font-size:
        14px !important;
}


/* ==========================================================
   SHORTER LAPTOP SCREENS
   Keep serif typography readable.
========================================================== */

@media (
    min-width: 901px
) and (
    max-height: 850px
) {

    .habit-intro-ky {

        font-size:
            13px !important;
    }


    .habit-intro-en {

        font-size:
            12px !important;
    }


    .question-heading strong {

        font-size:
            14px !important;
    }


    .question-heading small {

        font-size:
            13px !important;
    }


    #quiz .question,
    #quiz .question-ky,
    #quiz .question-en,
    #quiz .question-divider {

        font-size:
            16px !important;
    }


    #quiz .small-note {

        font-size:
            13px !important;
    }


    #quiz .option {

        font-size:
            13px !important;
    }


    .activity2-bottom-back {

        font-size:
            13px !important;
    }

}


/* ACTIVITY2_UNIFIED_SERIF_TYPOGRAPHY_V10_END */



/* ACTIVITY2_SOUND_TOGGLE_STYLE_V1_START */


/* ==========================================================
   SOUND TOGGLE
========================================================== */

.habit-sound-toggle {

    min-width:
        88px;

    min-height:
        42px;

    padding:
        5px 11px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border:
        1px solid #cbdced;

    border-radius:
        14px;

    background:
        #f7fbff;

    color:
        #173f73;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    cursor:
        pointer;

    box-shadow:
        0 3px 8px
        rgba(33, 74, 125, .08);

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


.habit-sound-toggle:hover {

    background:
        #edf5ff;

    border-color:
        #8eafd6;

    transform:
        translateY(-1px);
}


.habit-sound-toggle:active {

    transform:
        translateY(0);
}


.habit-sound-toggle:focus-visible {

    outline:
        3px solid
        rgba(232, 167, 46, .4);

    outline-offset:
        2px;
}


.habit-sound-icon {

    font-size:
        17px;

    line-height:
        1;
}


.habit-sound-copy {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    line-height:
        1.05;
}


.habit-sound-copy strong {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        11px;

    font-weight:
        700;
}


.habit-sound-copy small {

    margin-top:
        2px;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        9px;

    font-weight:
        600;

    color:
        #607995;
}


/* ==========================================================
   HEADER NOW HAS:
   icon | title | sound | topic
========================================================== */

.habit-header {

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


/* ==========================================================
   LAPTOP
========================================================== */

@media (
    min-width: 901px
) and (
    max-height: 850px
) {

    .habit-sound-toggle {

        min-width:
            78px;

        min-height:
            36px;

        padding:
            4px 9px;
    }


    .habit-sound-icon {

        font-size:
            15px;
    }


    .habit-sound-copy strong {

        font-size:
            10px;
    }


    .habit-sound-copy small {

        font-size:
            8px;
    }

}


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

@media (max-width: 900px) {

    .habit-header {

        grid-template-columns:
            auto 1fr !important;
    }


    .habit-sound-toggle,
    .habit-topic-badge {

        margin-top:
            4px;
    }

}


/* ACTIVITY2_SOUND_TOGGLE_STYLE_V1_END */



/* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_START */


/* ==========================================================
   GLOBAL E-BOOK ACTIVITY TYPOGRAPHY

   Unified Kyrgyz-friendly font rendering.

   Supports Kyrgyz Cyrillic clearly:
       Ө ө
       Ү ү
       Ң ң

   Intentionally protects programming / keyboard typography.
========================================================== */


:root {

    --ebook-kyrgyz-font:
        "Segoe UI",
        "Noto Sans",
        "DejaVu Sans",
        Arial,
        sans-serif;
}


/* ----------------------------------------------------------
   BASE TEXT

   This becomes the normal inherited font for each activity.
---------------------------------------------------------- */

html,
body {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}


/* ----------------------------------------------------------
   MAIN EDUCATIONAL TEXT

   Override old Georgia / Times / decorative serif styles
   where they were being used for Kyrgyz text.
---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,

p,

button,
input,
textarea,
select,

label,

a,

li,

th,
td,

strong,
small,
em {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}


/* ----------------------------------------------------------
   COMMON ACTIVITY QUESTION / ANSWER ELEMENTS

   These selectors cover the different activity generations
   already used throughout the e-book.
---------------------------------------------------------- */

.question,
.question-text,
.question-title,
.question-heading,
.question-kicker,

.question-ky,
.question-kyrgyz,
.ky-question,

.challenge-question,
.challenge-title,

.prompt,
.prompt-text,

.instruction,
.instructions,
.instruction-text,

.scenario,

.feedback,
.explanation,

.answer,
.answer-text,
.answer-option,

.option,
.option-btn,
.choice,
.choice-btn,

.quiz-question,
.quiz-option,

.task-title,
.task-question,

.result-title,
.result-message,

.card-title,
.card-text,

.game-title,
.game-question {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}


/* ----------------------------------------------------------
   KYRGYZ TYPOGRAPHY DETAILS

   Slightly softer weight and natural spacing improve
   Cyrillic letters such as ө, ү and ң.
---------------------------------------------------------- */

h1,
h2,
h3,
.question,
.question-text,
.question-title,
.question-ky,
.question-kyrgyz,
.ky-question,
.challenge-question,
.quiz-question,
.task-question {

    font-kerning:
        normal;

    font-variant-ligatures:
        common-ligatures;

    letter-spacing:
        .002em;

    word-spacing:
        .02em;

    text-rendering:
        optimizeLegibility;
}


/* ----------------------------------------------------------
   QUESTION HEADINGS
---------------------------------------------------------- */

.question-ky,
.question-kyrgyz,
.ky-question,
.question-text,
.challenge-question,
.quiz-question {

    font-weight:
        750;
}


/* ----------------------------------------------------------
   ANSWERS

   Keep Kyrgyz choices clean and readable rather than
   excessively heavy.
---------------------------------------------------------- */

.option-btn,
.option,
.answer-option,
.choice,
.choice-btn {

    font-weight:
        650;
}


/* ----------------------------------------------------------
   FEEDBACK / EXPLANATIONS
---------------------------------------------------------- */

.feedback,
.explanation {

    line-height:
        1.4;
}


/* ==========================================================
   DO NOT CHANGE PROGRAMMING / KEYBOARD / TECHNICAL FONTS
========================================================== */

code,
pre,
kbd,
samp,

.code,
.code-block,
.code-output,
.console,
.terminal,
.keyboard-key,
.key,
.shortcut-key {

    font-family:
        ui-monospace,
        "Cascadia Code",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace !important;

}


/* ==========================================================
   PROTECT COMMON ICON FONTS
========================================================== */

.material-icons,
.material-symbols-outlined,
.material-symbols-rounded,

.fa,
.fas,
.far,
.fal,
.fab,

[class^="fa-"],
[class*=" fa-"] {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}


/* ==========================================================
   EMOJI

   Browser will naturally fall back to the operating
   system emoji font where necessary.
========================================================== */


/* GLOBAL_BEAUTIFUL_KYRGYZ_TYPOGRAPHY_V1_END */


/* CHILD_FRIENDLY_DIGITAL_HABITS_JOURNEY_V1_START */


/* ==========================================================
   CHILD-FRIENDLY DIGITAL HABITS JOURNEY
========================================================== */


/* ----------------------------------------------------------
   OLD INTRODUCTION IS NO LONGER NEEDED
---------------------------------------------------------- */

.habit-intro-card {
    display: none !important;
}

.question-heading {
    display: none !important;
}


/* ----------------------------------------------------------
   PROGRESS
---------------------------------------------------------- */

.habit-progress-card {

    margin:
        9px 18px 7px !important;

    padding:
        8px 14px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    gap:
        6px !important;

    border:
        1px solid #dbe6f3 !important;

    border-radius:
        15px !important;

    background:
        #f8fbff !important;
}


.habit-progress-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;
}


.habit-progress-question {

    min-width:
        62px;

    padding:
        5px 11px;

    border-radius:
        999px;

    background:
        #2452a5;

    color:
        white;

    text-align:
        center;

    font-size:
        13px;

    font-weight:
        900;
}


.habit-progress-message {

    display:
        flex;

    align-items:
        baseline;

    gap:
        7px;

    color:
        #254b79;
}


.habit-progress-message strong {

    font-size:
        12px;
}


.habit-progress-message span {

    color:
        #7589a2;

    font-size:
        10px;

    font-weight:
        700;
}


.habit-progress-dots {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;
}


.habit-progress-dot {

    width:
        10px;

    height:
        10px;

    display:
        block;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        #d8e2ee;

    transition:
        transform .2s ease,
        background .2s ease;
}


.habit-progress-dot.done {

    background:
        #67b879;
}


.habit-progress-dot.current {

    width:
        14px;

    height:
        14px;

    background:
        #efa934;

    box-shadow:
        0 0 0 4px
        rgba(239, 169, 52, .15);
}


/*
 * Existing result logic still references #progress,
 * so we keep it in the DOM but hide its text.
 */

#progress {

    position:
        absolute !important;

    width:
        1px !important;

    height:
        1px !important;

    overflow:
        hidden !important;

    clip:
        rect(0 0 0 0) !important;
}


/* ----------------------------------------------------------
   QUESTION AREA
---------------------------------------------------------- */

.habit-question-section {

    margin:
        0 18px 8px !important;

    padding:
        10px 14px !important;

    flex:
        1 1 auto !important;

    min-height:
        0 !important;

    display:
        flex !important;

    align-items:
        stretch !important;

    border-radius:
        19px !important;

    overflow:
        hidden !important;
}


.habit-quiz-content {

    width:
        100% !important;

    min-height:
        0 !important;

    display:
        flex !important;
}


#quiz .question-card {

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    margin:
        0 !important;

    padding:
        4px 8px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    border:
        0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;
}


/* ----------------------------------------------------------
   QUESTION ICON
---------------------------------------------------------- */

.habit-question-icon {

    width:
        48px;

    height:
        48px;

    margin:
        0 auto 5px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        16px;

    background:
        #fff4dc;

    font-size:
        27px;

    line-height:
        1;

    box-shadow:
        0 4px 10px
        rgba(217, 149, 40, .12);
}


/* ----------------------------------------------------------
   QUESTION
---------------------------------------------------------- */

#quiz .question {

    width:
        100% !important;

    margin:
        0 auto 4px !important;

    padding:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    flex-wrap:
        wrap !important;

    gap:
        7px !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        #173f73 !important;

    text-align:
        center !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        clamp(
            16px,
            1.4vw,
            21px
        ) !important;

    line-height:
        1.18 !important;

    font-weight:
        800 !important;
}


.question-ky {

    color:
        #163f73;
}


.question-divider {

    color:
        #e49b26;

    font-weight:
        900;
}


.question-en {

    color:
        #385f8d;
}


/* ----------------------------------------------------------
   SHORT INSTRUCTION
---------------------------------------------------------- */

#quiz .small-note {

    width:
        100% !important;

    margin:
        1px 0 6px !important;

    color:
        #75879c !important;

    text-align:
        center !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   ANSWER GRID
---------------------------------------------------------- */

.habit-option-grid {

    width:
        100%;

    display:
        grid;

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

    gap:
        8px;
}


/* ----------------------------------------------------------
   ANSWER CARDS
---------------------------------------------------------- */

#quiz .option {

    position:
        relative !important;

    min-height:
        55px !important;

    margin:
        0 !important;

    padding:
        7px 10px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        2px !important;

    border:
        2px solid #c9dbef !important;

    border-radius:
        15px !important;

    background:
        #f8fbff !important;

    color:
        #174677 !important;

    text-align:
        center !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        13px !important;

    line-height:
        1.12 !important;

    font-weight:
        850 !important;

    cursor:
        pointer !important;

    box-shadow:
        none !important;

    transition:
        transform .14s ease,
        border-color .14s ease,
        background .14s ease,
        box-shadow .14s ease !important;
}


#quiz .option span {

    display:
        block;

    margin-top:
        2px;

    color:
        #6e8299;

    font-size:
        10px;

    font-weight:
        700;
}


#quiz .option:hover {

    transform:
        translateY(-2px) !important;

    border-color:
        #80a8da !important;

    background:
        #f1f7ff !important;

    box-shadow:
        0 5px 11px
        rgba(37, 82, 164, .09) !important;
}


#quiz .option.selected {

    border-color:
        #efa731 !important;

    background:
        #fff5df !important;

    color:
        #174677 !important;

    box-shadow:
        0 0 0 3px
        rgba(239, 167, 49, .14) !important;

    transform:
        translateY(-1px) !important;
}


#quiz .option.selected::after {

    content:
        "✓";

    position:
        absolute;

    top:
        5px;

    right:
        7px;

    width:
        18px;

    height:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        #efa731;

    color:
        white;

    font-size:
        11px;

    font-weight:
        900;
}


/* ----------------------------------------------------------
   NEXT BUTTON
---------------------------------------------------------- */

#quiz #nextBtn {

    align-self:
        flex-end !important;

    min-width:
        130px !important;

    min-height:
        38px !important;

    margin:
        8px 0 0 !important;

    padding:
        6px 17px !important;

    display:
        inline-flex !important;

    flex-direction:
        row !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        5px !important;

    border:
        0 !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            135deg,
            #285aab,
            #1f498f
        ) !important;

    color:
        white !important;

    font-size:
        12px !important;

    font-weight:
        850 !important;

    box-shadow:
        0 5px 11px
        rgba(30, 70, 140, .17) !important;
}


#quiz #nextBtn span {

    color:
        rgba(255, 255, 255, .83);

    font-size:
        10px;
}


#quiz #nextBtn:disabled {

    background:
        #cad5e1 !important;

    color:
        #8798ab !important;

    box-shadow:
        none !important;

    cursor:
        default !important;

    opacity:
        1 !important;
}


/* ----------------------------------------------------------
   ABSOLUTELY PRESERVE THE ORIGINAL HEADER/TITLE
---------------------------------------------------------- */

.habit-header-copy h1 {

    display:
        block !important;
}


.habit-title-part,
.habit-entitle-part {

    display:
        block !important;
}


/* ----------------------------------------------------------
   DESKTOP — FIT SCREEN
---------------------------------------------------------- */

@media (min-width: 901px) {

    .habit-quiz-shell {

        height:
            calc(100vh - 40px) !important;

        max-height:
            calc(100vh - 40px) !important;
    }


    .habit-header {

        flex:
            0 0 auto !important;
    }


    .habit-progress-card {

        flex:
            0 0 auto !important;
    }


    .habit-question-section {

        flex:
            1 1 auto !important;
    }


    .activity2-bottom-nav {

        flex:
            0 0 auto !important;
    }

}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media (max-width: 900px) {

    .habit-option-grid {

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

}


/* ----------------------------------------------------------
   PHONE
---------------------------------------------------------- */

@media (max-width: 580px) {

    .habit-option-grid {

        grid-template-columns:
            1fr;
    }


    .habit-progress-dots {

        gap:
            4px;
    }


    .habit-progress-dot {

        width:
            7px;

        height:
            7px;
    }


    .habit-progress-dot.current {

        width:
            11px;

        height:
            11px;
    }

}


/* CHILD_FRIENDLY_DIGITAL_HABITS_JOURNEY_V1_END */


/* ACTIVITY2_BACK_BUTTON_INSIDE_PANEL_V1_START */


/* ==========================================================
   BACK TO CHAPTER — INSIDE LARGE QUESTION PANEL
========================================================== */

.habit-question-section {

    position:
        relative !important;

    padding-bottom:
        62px !important;
}


/*
 * Place the navigation exactly in the lower-left corner
 * of the white question panel.
 */

.habit-question-section
.activity2-bottom-nav {

    position:
        absolute !important;

    left:
        18px !important;

    bottom:
        14px !important;

    z-index:
        20 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    width:
        auto !important;

    height:
        auto !important;

    display:
        block !important;
}


/* ----------------------------------------------------------
   BACK BUTTON
---------------------------------------------------------- */

.habit-question-section
.activity2-bottom-back {

    width:
        fit-content !important;

    min-width:
        0 !important;

    min-height:
        40px !important;

    margin:
        0 !important;

    padding:
        8px 17px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        6px !important;

    border:
        0 !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            135deg,
            #f6ba63,
            #eea64d
        ) !important;

    color:
        #063c78 !important;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    font-size:
        12px !important;

    line-height:
        1 !important;

    font-weight:
        850 !important;

    text-decoration:
        none !important;

    box-shadow:
        0 5px 12px
        rgba(126, 82, 22, .16) !important;

    cursor:
        pointer !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease !important;
}


.habit-question-section
.activity2-bottom-back:hover {

    transform:
        translateY(-2px) !important;

    box-shadow:
        0 7px 15px
        rgba(126, 82, 22, .22) !important;
}


.habit-question-section
.activity2-back-arrow {

    font-size:
        15px !important;

    line-height:
        1 !important;
}


/*
 * Important:
 * older desktop rules treated the bottom navigation
 * as a separate flex-row element. It is now inside
 * the question panel, so neutralise those rules.
 */

@media (min-width: 901px) {

    .habit-question-section
    .activity2-bottom-nav {

        flex:
            none !important;
    }

}


/* Small screens */

@media (max-width: 580px) {

    .habit-question-section {

        padding-bottom:
            58px !important;
    }


    .habit-question-section
    .activity2-bottom-nav {

        left:
            10px !important;

        bottom:
            10px !important;
    }


    .habit-question-section
    .activity2-bottom-back {

        min-height:
            36px !important;

        padding:
            7px 12px !important;

        font-size:
            10px !important;
    }

}


/* ACTIVITY2_BACK_BUTTON_INSIDE_PANEL_V1_END */


/* FINAL_UNIFORM_ACTIVITY_FONT_V2_START */

/*
    FINAL UNIFORM E-BOOK ACTIVITY TYPOGRAPHY

    Standard typography:
        Arial, "Helvetica Neue", Helvetica, sans-serif

    Applies to normal Kyrgyz and English interface text,
    including Back to Chapter buttons.

    Font sizes, weights, colors, spacing and layouts
    are intentionally NOT changed.
*/


:root {
    --ebook-kyrgyz-font:
        Arial, "Helvetica Neue", Helvetica, sans-serif;

    --ebook-activity-font:
        Arial, "Helvetica Neue", Helvetica, sans-serif;
}


html,
body {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   TITLES AND NORMAL TEXT
---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
label,
li,
a,
strong,
b,
em,
small,
th,
td {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   BUTTONS AND FORM ELEMENTS

   Includes every Back to Chapter button regardless of
   whether it is an <a> or <button>.
---------------------------------------------------------- */

button,
input,
textarea,
select,
option {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   COMMON BACK-TO-CHAPTER CLASSES
---------------------------------------------------------- */

.back-to-chapter,
.back-to-chapter *,
.back-btn,
.back-btn *,
.back-button,
.back-button *,
.chapter-back,
.chapter-back *,
.activity-back,
.activity-back *,
.activity2-bottom-back,
.activity2-bottom-back * {
    font-family:
        Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}


/* ----------------------------------------------------------
   PRESERVE PROGRAMMING TYPOGRAPHY
---------------------------------------------------------- */

code,
pre,
kbd,
samp,
.code,
.code *,
.code-block,
.code-block *,
.code-editor,
.code-editor *,
.editor-code,
.editor-code *,
.python-code,
.python-code *,
.terminal,
.terminal *,
.console,
.console * {
    font-family:
        "Courier New",
        Courier,
        monospace !important;
}

/* FINAL_UNIFORM_ACTIVITY_FONT_V2_END */

/* ACTIVITY2_MATCH_ACTIVITY1_TYPOGRAPHY_V1_START */

/* ==========================================================
   ACTIVITY 2 TYPOGRAPHY
   MATCH CHAPTER I — ACTIVITY 1
   ========================================================== */


/* ----------------------------------------------------------
   1. SAME BASE FONT AS ACTIVITY 1
   ---------------------------------------------------------- */

html,
body,
.habit-quiz-shell {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}


/* ----------------------------------------------------------
   2. ALL NORMAL ACTIVITY TEXT
   ---------------------------------------------------------- */

.habit-quiz-shell h1,
.habit-quiz-shell h2,
.habit-quiz-shell h3,
.habit-quiz-shell h4,
.habit-quiz-shell p,
.habit-quiz-shell span,
.habit-quiz-shell strong,
.habit-quiz-shell small,
.habit-quiz-shell label,
.habit-quiz-shell li,
.habit-quiz-shell a,
.habit-quiz-shell button {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;
}


/* ----------------------------------------------------------
   3. KYRGYZ CHARACTER RENDERING
   Match Activity 1's natural Cyrillic spacing.
   ---------------------------------------------------------- */

.habit-title-part,

.question-heading strong,

#quiz .question,
#quiz .question-ky,
#quiz .question-kyrgyz,

#quiz .option,
#quiz button,

.habit-progress-message strong,
.habit-topic-badge strong,

.habit-final-message,
.habit-summary-box h3 {

    font-kerning:
        normal !important;

    font-variant-ligatures:
        common-ligatures !important;

    letter-spacing:
        .002em !important;

    word-spacing:
        .02em !important;

    text-rendering:
        optimizeLegibility !important;
}


/* ----------------------------------------------------------
   4. MAIN TITLE

   Activity 1 uses normal bold rather than the extra-heavy
   800 / 850 / 900 appearance.
   ---------------------------------------------------------- */

.habit-header-copy h1,
.habit-title-part,
.habit-entitle-part {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-weight:
        700 !important;

    letter-spacing:
        .002em !important;
}


/* ----------------------------------------------------------
   5. NORMAL BOLD KYRGYZ LABELS

   Keep ordinary bold text at Activity 1's normal bold weight
   instead of the much heavier 800–900 weights.
   ---------------------------------------------------------- */

.habit-topic-badge strong,
.habit-progress-message strong,
.habit-sound-copy strong,
.question-heading strong,
.habit-summary-box h3 {

    font-weight:
        700 !important;
}


/* ----------------------------------------------------------
   6. QUESTION TYPOGRAPHY

   Activity 1 reference:
       question weight = 750
   ---------------------------------------------------------- */

#quiz .question,
#quiz .question-ky,
#quiz .question-kyrgyz,
#quiz .question-text {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-weight:
        750 !important;

    letter-spacing:
        .002em !important;

    word-spacing:
        .02em !important;
}


/* English question uses the same family.
   Preserve its current size and layout. */

#quiz .question-en {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-weight:
        700 !important;

    letter-spacing:
        .002em !important;
}


/* ----------------------------------------------------------
   7. ANSWER OPTIONS

   Activity 1 reference:
       options / choices = 650
   ---------------------------------------------------------- */

#quiz .option,
#quiz .option-btn,
#quiz .answer-option,
#quiz .choice,
#quiz .choice-btn,
#quiz button:not(#nextBtn) {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-weight:
        650 !important;

    letter-spacing:
        .002em !important;
}


/* ----------------------------------------------------------
   8. QUESTION INSTRUCTION

   "Өзүңө эң туура келген жоопту танда"
   ---------------------------------------------------------- */

.question-heading strong {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-weight:
        700 !important;

    letter-spacing:
        .002em !important;
}


/* English helper text stays slightly lighter. */

.question-heading small {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-weight:
        600 !important;
}


/* ----------------------------------------------------------
   9. BACK TO CHAPTER

   EXACT TYPOGRAPHY REFERENCE FROM ACTIVITY 1:

       font-size: 14px
       font-weight: bold / 700
       Arial / Helvetica
       line-height: 1.15

   Shape, colour and position of Activity 2 are NOT changed.
   ---------------------------------------------------------- */

.habit-question-section
.back-to-chapter.activity2-bottom-back,

.habit-question-section
.back-to-chapter.activity2-bottom-back span:not(.activity2-back-arrow) {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;

    letter-spacing:
        normal !important;

    word-spacing:
        normal !important;
}


/* Arrow stays visually balanced with Activity 1. */

.habit-question-section
.activity2-back-arrow {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.15 !important;
}


/* ----------------------------------------------------------
   10. RESULTS-PAGE BACK BUTTON

   Keep the existing two-line layout, but remove the
   excessively heavy Kyrgyz weight.
   ---------------------------------------------------------- */

.habit-secondary-btn,
.habit-secondary-btn span,
.habit-secondary-btn small {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;
}


.habit-secondary-btn span {

    font-weight:
        700 !important;
}


.habit-secondary-btn small {

    font-weight:
        500 !important;
}


/* ----------------------------------------------------------
   11. NEXT / TRY AGAIN BUTTONS

   Same normal Activity 1 bold appearance.
   ---------------------------------------------------------- */

#quiz #nextBtn,
.habit-primary-btn,
.habit-primary-btn span {

    font-family:
        Arial,
        "Helvetica Neue",
        Helvetica,
        sans-serif !important;

    font-weight:
        700 !important;
}


/* ACTIVITY2_MATCH_ACTIVITY1_TYPOGRAPHY_V1_END */