/*
 * 1SAFETY.KZ — Mobile Lesson UI V2
 * Stage 1 / Release 3: TEXT + IMAGE_TEXT + SELECT (QUESTION_SINGLE).
 * Scoped to .ml2 and .ca-card--ml2-v2. Desktop remains untouched.
 */
.ml2{display:none}
.ca-action-label--ml2{display:none}

@media (max-width:700px){
    /* Exact legacy TEXT renderer wrapper: mobile V2 owns this step. */
    .ml2-legacy-v2-renderer{display:none!important}
    .ml2{
        display:block;
        width:100%;
        max-width:640px;
        margin:0 auto;
        color:#151719;
        font-family:"SF Pro Text","SFProText",Arial,sans-serif;
    }

    .ml2__topbar{
        display:grid;
        grid-template-columns:44px minmax(0,1fr) auto;
        gap:12px;
        align-items:center;
        min-height:64px;
        padding:8px 16px 10px;
        background:#fff;
    }

    .ml2__close{
        width:44px;
        height:44px;
        padding:0;
        display:grid;
        place-items:center;
        border:0;
        border-radius:14px;
        background:#f3f4f5;
        color:#202326;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }
    .ml2__close svg{width:22px;height:22px}

    .ml2__progress{
        height:6px;
        overflow:hidden;
        border-radius:999px;
        background:#eceef0;
    }
    .ml2__progress-fill{
        display:block;
        height:100%;
        min-width:0;
        border-radius:inherit;
        background:#ffbf00;
        transition:width .2s ease;
    }

    .ml2__meta{
        display:flex;
        flex-direction:column;
        align-items:flex-end;
        gap:2px;
        white-space:nowrap;
        color:#7a7f85;
        font-size:11px;
        line-height:1.15;
    }
    .ml2__meta strong{
        color:#202326;
        font-size:12px;
        font-weight:750;
    }

    .ml2__stage{
        padding:22px 22px 136px;
    }

    .ml2-step{
        width:100%;
        max-width:600px;
        margin:0 auto;
    }

    .ml2-step__title{
        margin:0 0 13px;
        color:#151719;
        font-size:clamp(26px,6.8vw,31px);
        line-height:1.12;
        letter-spacing:-.025em;
        font-weight:800;
    }

    .ml2-step__lead{
        margin:0 0 20px;
        color:#64696f;
        font-size:17px;
        line-height:1.45;
    }

    .ml2-text-card{
        display:flex;
        flex-direction:column;
        gap:12px;
        color:#202326;
        font-size:17px;
        line-height:1.52;
    }

    .ml2-text-card>p,
    .ml2-text-card>div,
    .ml2-text-card>ul,
    .ml2-text-card>ol,
    .ml2-text-card>blockquote{
        margin:0;
        padding:16px 17px;
        border:1px solid #e8eaec;
        border-radius:18px;
        background:#f6f7f8;
    }
    .ml2-text-card>p:empty,
    .ml2-text-card>div:empty{display:none}
    .ml2-text-card p{margin-top:0}
    .ml2-text-card p:last-child{margin-bottom:0}
    .ml2-text-card ul,
    .ml2-text-card ol{padding-left:38px}
    .ml2-text-card li+li{margin-top:8px}
    .ml2-text-card strong{font-weight:750;color:#151719}
    .ml2-text-card a{color:#151719;text-decoration-color:#ffbf00;text-decoration-thickness:2px;text-underline-offset:3px}

    /* TEXT V2 owns the mobile content area; legacy renderer stays intact for desktop. */
    .ca-main:has(.ca-card--ml2-v2)>.ca-type-row{display:none!important}
    .ca-card--ml2-v2{
        margin:0!important;
        padding:0!important;
        border:0!important;
        box-shadow:none!important;
        background:transparent!important;
        min-height:0!important;
    }
    body .ca-card--ml2-text>.ca-card__inner.ca-card__inner--ml2-v2,
    body .ca-card--ml2-image_text>.ca-card__inner.ca-card__inner--ml2-v2{display:none!important}
    .ca-card--ml2-text>.ca-feedback,
    .ca-card--ml2-text>.ca-explanation,
    .ca-card--ml2-image_text>.ca-feedback,
    .ca-card--ml2-image_text>.ca-explanation{display:none!important}

    /* Existing backend navigation, restyled as the V2 sticky action area. */
    .ca-card--ml2-v2 .ca-toolbar{
        position:fixed!important;
        z-index:80!important;
        left:0!important;
        right:0!important;
        bottom:0!important;
        margin:0!important;
        padding:11px 12px calc(14px + env(safe-area-inset-bottom))!important;
        border-top:1px solid #e8eaec!important;
        background:rgba(255,255,255,.97)!important;
        box-shadow:0 -8px 26px rgba(17,24,39,.06)!important;
        backdrop-filter:blur(10px);
    }
    .ca-card--ml2-v2 .ca-toolbar__inner{
        width:100%!important;
        max-width:640px!important;
        margin:0 auto!important;
        display:grid!important;
        grid-template-columns:minmax(0,1fr)!important;
        gap:10px!important;
        align-items:center!important;
    }
    .ca-card--ml2-v2 .ca-toolbar__inner:has(.ca-btn--prev){
        grid-template-columns:52px minmax(0,1fr)!important;
    }
    .ca-card--ml2-v2 .ca-btn--prev{
        width:52px!important;
        min-width:52px!important;
        height:54px!important;
        padding:0!important;
        border:1px solid #e0e3e6!important;
        border-radius:17px!important;
        background:#f4f5f6!important;
        color:#25282b!important;
        font-size:0!important;
        box-shadow:none!important;
    }
    .ca-card--ml2-v2 .ca-btn--prev svg{width:22px!important;height:22px!important;margin:0!important}
    .ca-card--ml2-v2 .ca-toolbar__inner>div[style*="flex:1"]{display:none!important}
    .ca-card--ml2-v2 .ca-btn--next,
    .ca-card--ml2-v2 .ca-btn--end{
        width:100%!important;
        min-height:54px!important;
        justify-content:center!important;
        border:0!important;
        border-radius:17px!important;
        background:#ffbf00!important;
        color:#171717!important;
        font-size:17px!important;
        font-weight:800!important;
        box-shadow:none!important;
    }
    .ca-action-label--ml2{display:none}
    .ca-card--ml2-v2 .ca-action-label--desktop{display:none!important}
    .ca-card--ml2-v2 .ca-action-label--ml2{display:inline!important}
    .ca-card--ml2-v2 .ca-btn--next svg,
    .ca-card--ml2-v2 .ca-btn--end svg{display:none!important}

    /* Hide the old page chrome only while a TEXT V2 step is present. */
    body:has(.ca-card--ml2-v2) .ca-header,
    body:has(.ca-card--ml2-v2) .ca-topic-bar{display:none!important}
    body:has(.ca-card--ml2-v2) .ca-scroll{
        height:auto!important;
        min-height:100dvh!important;
        overflow:visible!important;
        background:#fff!important;
        padding:0!important;
    }
    body:has(.ca-card--ml2-v2) .ca-main{
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:0!important;
    }

    /* IMAGE_TEXT: image leads, text stays concise and readable. */
    .ml2-step--image-text{
        display:flex;
        flex-direction:column;
        gap:0;
    }
    .ml2-image-card{
        margin:0 0 22px;
        overflow:hidden;
        border:1px solid #e8eaec;
        border-radius:20px;
        background:#f5f6f7;
    }
    .ml2-image-card img{
        display:block;
        width:100%;
        max-height:min(46dvh,420px);
        object-fit:contain;
        background:#f5f6f7;
    }
    .ml2-image-card figcaption{
        padding:9px 13px 10px;
        border-top:1px solid #e8eaec;
        color:#72777d;
        background:#fff;
        font-size:12px;
        line-height:1.35;
    }
    .ml2-image-text__body{
        color:#202326;
        font-size:17px;
        line-height:1.52;
    }
    .ml2-image-text__body p{margin:0 0 10px}
    .ml2-image-text__body p:last-child{margin-bottom:0}
    .ml2-image-text__body ul,
    .ml2-image-text__body ol{margin:10px 0 0;padding-left:22px}
    .ml2-image-text__body li+li{margin-top:6px}
    .ml2-image-text__body strong{font-weight:750;color:#151719}
    .ml2-image-text__body blockquote{
        margin:14px 0 0;
        padding:13px 14px;
        border:1px solid #ece7cc;
        border-left:4px solid #ffbf00;
        border-radius:14px;
        background:#fffaf0;
        color:#303236;
    }

    /* SELECT V2 maps to existing QUESTION_SINGLE runtime.
       We keep the same inputs, IDs, AJAX save/check flow and feedback DOM. */
    .ml2--select{margin-bottom:0}
    .ca-card--ml2-question_single{
        width:100%!important;
        max-width:640px!important;
        margin:0 auto!important;
        padding:0 22px 150px!important;
        border:0!important;
        border-radius:0!important;
        background:#fff!important;
        box-shadow:none!important;
        min-height:0!important;
    }
    .ca-card--ml2-question_single>.ca-card__inner.ca-card__inner--ml2-v2{
        display:block!important;
        padding:20px 0 0!important;
        background:transparent!important;
    }
    .ca-card--ml2-question_single .ca-question{
        margin:0 0 22px!important;
        color:#151719!important;
        font-family:"SF Pro Text","SFProText",Arial,sans-serif!important;
        font-size:clamp(25px,6.5vw,30px)!important;
        line-height:1.14!important;
        letter-spacing:-.025em!important;
        font-weight:800!important;
    }
    .ca-card--ml2-question_single .ca-options-label{
        margin:0 0 10px!important;
        color:#777d83!important;
        font-size:13px!important;
        line-height:1.3!important;
        font-weight:600!important;
    }
    .ca-card--ml2-question_single .ca-options{
        display:flex!important;
        flex-direction:column!important;
        gap:10px!important;
        margin:0!important;
    }
    .ca-card--ml2-question_single .ca-option{
        position:relative!important;
        width:100%!important;
        min-height:62px!important;
        margin:0!important;
        padding:14px 48px 14px 14px!important;
        display:grid!important;
        grid-template-columns:34px minmax(0,1fr)!important;
        gap:11px!important;
        align-items:center!important;
        border:1.5px solid #e2e5e8!important;
        border-radius:17px!important;
        background:#f7f8f9!important;
        color:#202326!important;
        font-size:16px!important;
        line-height:1.35!important;
        font-weight:600!important;
        box-shadow:none!important;
        -webkit-tap-highlight-color:transparent;
    }
    .ca-card--ml2-question_single .ca-option__letter{
        width:34px!important;
        height:34px!important;
        display:grid!important;
        place-items:center!important;
        border:1px solid #dfe2e5!important;
        border-radius:11px!important;
        background:#fff!important;
        color:#62676d!important;
        font-size:13px!important;
        font-weight:800!important;
    }
    .ca-card--ml2-question_single .ca-option.is-selected{
        border-color:#d8a200!important;
        background:#fff8df!important;
        box-shadow:0 0 0 1px rgba(255,191,0,.18)!important;
    }
    .ca-card--ml2-question_single .ca-option.is-selected .ca-option__letter{
        border-color:#ffbf00!important;
        background:#ffbf00!important;
        color:#171717!important;
    }
    .ca-card--ml2-question_single .ca-option.is-correct{
        border-color:#78b995!important;
        background:#f0f8f3!important;
    }
    .ca-card--ml2-question_single .ca-option.is-wrong{
        border-color:#c7cbd0!important;
        background:#f3f4f5!important;
    }
    .ca-card--ml2-question_single .ca-option__state{
        right:15px!important;
        top:50%!important;
        transform:translateY(-50%)!important;
    }
    .ca-card--ml2-question_single>.ca-feedback{
        margin:14px 0 0!important;
        padding:13px 14px!important;
        gap:11px!important;
        border:1px solid #e2e5e8!important;
        border-radius:16px!important;
        background:#f6f7f8!important;
        box-shadow:none!important;
    }
    .ca-card--ml2-question_single>.ca-feedback.ca-feedback--correct{
        border-color:#cfe5d8!important;
        background:#f2f8f4!important;
    }
    .ca-card--ml2-question_single>.ca-feedback.ca-feedback--wrong{
        border-color:#e0e2e5!important;
        background:#f5f6f7!important;
    }
    .ca-card--ml2-question_single .ca-feedback__icon{
        width:34px!important;
        height:34px!important;
        min-width:34px!important;
    }
    .ca-card--ml2-question_single .ca-feedback__title{
        color:#17191b!important;
        font-size:16px!important;
        line-height:1.25!important;
        font-weight:800!important;
    }
    .ca-card--ml2-question_single .ca-feedback__sub{
        margin-top:3px!important;
        color:#62676d!important;
        font-size:14px!important;
        line-height:1.4!important;
    }
    .ca-card--ml2-question_single>.ca-explanation{display:none!important}

    /* One bottom action only for SELECT. Existing runtime swaps Check -> Continue. */
    .ca-card--ml2-question_single .ca-toolbar__inner{
        grid-template-columns:minmax(0,1fr)!important;
    }
    .ca-card--ml2-question_single .ca-btn--prev,
    .ca-card--ml2-question_single .ca-btn--skip,
    .ca-card--ml2-question_single .ca-btn--explain{display:none!important}
    .ca-card--ml2-question_single .ca-btn--answer,
    .ca-card--ml2-question_single .ca-btn--continue{
        width:100%!important;
        min-height:54px!important;
        margin:0!important;
        padding:0 18px!important;
        justify-content:center!important;
        border:0!important;
        border-radius:17px!important;
        background:#ffbf00!important;
        color:#171717!important;
        font-size:17px!important;
        font-weight:800!important;
        box-shadow:none!important;
    }
    .ca-card--ml2-question_single .ca-btn--answer:disabled,
    .ca-card--ml2-question_single .ca-btn--continue:disabled{
        background:#e8e9eb!important;
        color:#989da2!important;
        opacity:1!important;
    }
    .ca-card--ml2-question_single .ca-btn--answer svg,
    .ca-card--ml2-question_single .ca-btn--continue svg{display:none!important}
    .ca-card--ml2-question_single .ca-action-label--desktop{display:none!important}
    .ca-card--ml2-question_single .ca-action-label--ml2{display:inline!important}


    /* SELECT V1.5 polish — compact answer cards, nearby feedback,
       semantic states remain calm and the primary action stays 1SAFETY yellow. */
    #ca-form .ca-card--ml2-question_single{
        padding:0 18px!important;
    }
    #ca-form .ca-card--ml2-question_single>.ca-card__inner.ca-card__inner--ml2-v2{
        flex:0 0 auto!important;
        min-height:0!important;
        overflow:visible!important;
        padding:18px 0 0!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-question{
        margin:0 0 10px!important;
        font-size:22px!important;
        line-height:1.18!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-options-label{
        margin:0 0 10px!important;
        font-size:14px!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-options{
        flex:0 0 auto!important;
        min-height:0!important;
        max-height:none!important;
        overflow:visible!important;
        padding:0!important;
        gap:9px!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-option{
        height:auto!important;
        min-height:58px!important;
        padding:12px 46px 12px 13px!important;
        grid-template-columns:32px minmax(0,1fr)!important;
        gap:10px!important;
        align-items:center!important;
        border-radius:15px!important;
        font-size:15px!important;
        line-height:1.32!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-option__letter{
        width:32px!important;
        height:32px!important;
        border-radius:10px!important;
        font-size:12px!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-option.is-selected{
        border-color:#d8a200!important;
        background:#fff8df!important;
        color:#202326!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-option.is-correct,
    #ca-form .ca-card--ml2-question_single .ca-option.is-correct:hover{
        border-color:#8fc9a8!important;
        background:#f3faf6!important;
        color:#202326!important;
        box-shadow:none!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-option.is-correct .ca-option__letter{
        border-color:#7fbd9a!important;
        background:#e8f6ee!important;
        color:#23663f!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-option.is-correct .ca-option__state{
        background:#2e9b62!important;
        border-color:#2e9b62!important;
        color:#fff!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-option.is-wrong,
    #ca-form .ca-card--ml2-question_single .ca-option.is-wrong:hover{
        border-color:#e5aaaa!important;
        background:#fff7f7!important;
        color:#202326!important;
        box-shadow:none!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-option.is-wrong .ca-option__letter{
        border-color:#e3a3a3!important;
        background:#fff!important;
        color:#b33e3e!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-option.is-wrong .ca-option__state{
        background:#df5555!important;
        border-color:#df5555!important;
        color:#fff!important;
    }
    #ca-form .ca-card--ml2-question_single>.ca-feedback.is-visible{
        width:100%!important;
        margin:12px 0 0!important;
        padding:12px 13px!important;
        border-radius:15px!important;
    }
    #ca-form .ca-card--ml2-question_single>.ca-feedback.ca-feedback--correct{
        border-color:#c9e4d5!important;
        background:#f4faf6!important;
    }
    #ca-form .ca-card--ml2-question_single>.ca-feedback.ca-feedback--wrong{
        border-color:#efcaca!important;
        background:#fff6f6!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-feedback__icon{
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-feedback__title{
        font-size:15px!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-feedback__sub{
        margin-top:2px!important;
        font-size:13px!important;
        line-height:1.38!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-toolbar{
        margin-top:auto!important;
        padding:10px 0 calc(10px + env(safe-area-inset-bottom))!important;
        border-top:0!important;
        background:linear-gradient(to bottom,rgba(255,255,255,.92),#fff 28%)!important;
        box-shadow:none!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-btn--answer,
    #ca-form .ca-card--ml2-question_single .ca-btn--continue{
        min-height:52px!important;
        border:1px solid #dda700!important;
        border-radius:15px!important;
        background:#ffbf00!important;
        color:#171717!important;
        font-size:16px!important;
    }
    #ca-form .ca-card--ml2-question_single .ca-btn--answer:disabled,
    #ca-form .ca-card--ml2-question_single .ca-btn--continue:disabled{
        border-color:#e5e7ea!important;
        background:#f1f2f3!important;
        color:#c3c7cb!important;
    }


    /* SELECT V1.6 final polish.
       Enabled primary action is always 1SAFETY yellow; disabled stays neutral.
       Answer review is kept visually compact without changing runtime behavior. */
    #ca-form .ca-card--ml2-question_single button#ca-btn-answer:not(:disabled),
    #ca-form .ca-card--ml2-question_single button#ca-btn-continue:not(:disabled){
        border:1px solid #dda700!important;
        background:#ffbf00!important;
        color:#171717!important;
        box-shadow:none!important;
        opacity:1!important;
    }
    #ca-form .ca-card--ml2-question_single button#ca-btn-answer:disabled,
    #ca-form .ca-card--ml2-question_single button#ca-btn-continue:disabled{
        border:1px solid #e5e7ea!important;
        background:#f1f2f3!important;
        color:#b8bdc2!important;
        box-shadow:none!important;
        opacity:1!important;
    }
    #ca-form .ca-card--ml2-question_single>.ca-feedback.is-visible{
        margin-top:10px!important;
        margin-bottom:0!important;
    }
    #ca-form .ca-card--ml2-question_single:has(>.ca-feedback.is-visible) .ca-toolbar{
        margin-top:8px!important;
        padding-top:8px!important;
        border-top:1px solid #eceef0!important;
        background:#fff!important;
        backdrop-filter:none!important;
        -webkit-backdrop-filter:none!important;
    }
    #ca-form .ca-card--ml2-question_single:has(>.ca-feedback.is-visible) .ca-toolbar__inner{
        min-height:0!important;
    }

}