/*
 * Layung TAO mobile runner override.
 *
 * Scope: QTI modern test runner only.
 * Goal: make phone/webview delivery usable without modifying TAO core bundles.
 */

.layung-mobile-fix-tag {
    display: none;
}

.layung-submit-guard-message {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 10050;
    width: min(520px, calc(100vw - 28px));
    padding: 14px 16px;
    border: 1px solid rgba(180, 83, 9, 0.28);
    border-radius: 14px;
    background: #fff7ed;
    color: #7c2d12;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -12px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.layung-submit-guard-message.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.delivery-scope .test-runner-scope .qti-navigator-item.layung-needs-answer > .qti-navigator-label {
    border-color: #f97316 !important;
    background: #fff7ed !important;
    color: #9a3412 !important;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.22), 0 8px 18px rgba(154, 52, 18, 0.18) !important;
}

.test-runner-scope .qti-navigator-item.layung-needs-answer > .qti-navigator-label {
    border-color: #f97316 !important;
    background: #fff7ed !important;
    color: #9a3412 !important;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.22), 0 8px 18px rgba(154, 52, 18, 0.18) !important;
}

@media screen and (max-width: 820px) {
    html,
    body.delivery-scope,
    body.delivery-scope .runner,
    body.delivery-scope .test-runner-scope {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
    }

    body.delivery-scope {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.delivery-scope .content-wrap > header[role="menubar"] {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        max-height: none !important;
        background: #2f2f2f !important;
    }

    body.delivery-scope .content-wrap > header[role="menubar"] > .title-box {
        display: none !important;
    }

    body.delivery-scope .content-wrap > header[role="menubar"] > span.lft {
        display: none !important;
    }

    body.delivery-scope .content-wrap > header[role="menubar"] > nav.rgt {
        float: none !important;
        flex: 1 0 100% !important;
        width: 100% !important;
        background: #2f2f2f !important;
    }

    body.delivery-scope .content-wrap > header[role="menubar"] .settings-menu,
    body.delivery-scope .content-wrap > header[role="menubar"] .settings-menu ul {
        width: 100% !important;
        background: #2f2f2f !important;
    }

    body.delivery-scope .content-wrap > header[role="menubar"] .settings-menu li {
        background: #2f2f2f !important;
    }

    body.delivery-scope .content-wrap > header[role="menubar"] .settings-menu li > a,
    body.delivery-scope .content-wrap > header[role="menubar"] .settings-menu li > .a {
        height: 52px !important;
        padding-top: 16px !important;
        box-sizing: border-box !important;
    }

    body.delivery-scope #tao-main-logo {
        display: none !important;
    }

    body.delivery-scope .test-listing {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    body.delivery-scope .test-listing *,
    body.delivery-scope .test-listing *::before,
    body.delivery-scope .test-listing *::after {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    body.delivery-scope .test-listing h1 {
        margin: 12px 0 14px !important;
        font-size: 24px !important;
        line-height: 1.18 !important;
        overflow-wrap: anywhere !important;
    }

    body.delivery-scope .test-listing h2 {
        margin: 18px 0 10px !important;
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    body.delivery-scope .test-listing ul,
    body.delivery-scope .test-listing li {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    body.delivery-scope .test-listing .entry-point,
    body.delivery-scope .test-listing .entry-point-box,
    body.delivery-scope .test-listing .entry-point-all-deliveries {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.delivery-scope .test-listing .entry-point {
        padding: 14px 14px 86px !important;
        overflow: hidden !important;
        border-radius: 12px !important;
    }

    body.delivery-scope .test-listing .entry-point h3 {
        margin-right: 0 !important;
        padding-right: 0 !important;
        font-size: 17px !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    body.delivery-scope .test-listing .entry-point p {
        overflow-wrap: anywhere !important;
    }

    body.delivery-scope .test-listing .action {
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 58px !important;
        padding: 17px 18px !important;
        text-align: right !important;
    }

    body.delivery-scope .test-runner-scope {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    body.delivery-scope .test-runner-scope .test-runner-sections {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }

    body.delivery-scope .test-runner-scope .content-wrapper {
        flex: 1 1 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 8px 8px !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.delivery-scope .test-runner-scope #qti-content,
    body.delivery-scope .test-runner-scope #qti-item,
    body.delivery-scope .test-runner-scope .size-wrapper,
    body.delivery-scope .test-runner-scope .qti-item,
    body.delivery-scope .test-runner-scope .qti-itemBody {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    body.delivery-scope .test-runner-scope .qti-item {
        padding: 14px 10px 96px !important;
    }

    body.delivery-scope .test-runner-scope .test-sidebar,
    body.delivery-scope .test-runner-scope .test-sidebar > .qti-panel {
        display: block !important;
        visibility: visible !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        max-height: 74px !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    body.delivery-scope .test-runner-scope .test-sidebar > .qti-panel {
        padding: 7px 8px 9px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08) !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator.hidden,
    body.delivery-scope .test-runner-scope .qti-navigator-default.hidden,
    body.delivery-scope .test-runner-scope .qti-navigator-fizzy.hidden {
        display: block !important;
        visibility: visible !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-info,
    body.delivery-scope .test-runner-scope .qti-navigator-filters,
    body.delivery-scope .test-runner-scope .qti-navigator-part > .qti-navigator-label,
    body.delivery-scope .test-runner-scope .qti-navigator-section > .qti-navigator-label,
    body.delivery-scope .test-runner-scope .qti-navigator-linear {
        display: none !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-tree {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-parts,
    body.delivery-scope .test-runner-scope .qti-navigator-sections {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-items {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1px 2px 7px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-x: contain !important;
        scrollbar-width: thin !important;
        scroll-snap-type: x proximity !important;
        touch-action: pan-x !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-part,
    body.delivery-scope .test-runner-scope .qti-navigator-section,
    body.delivery-scope .test-runner-scope .qti-navigator-part,
    body.delivery-scope .test-runner-scope .qti-navigator-section {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-item {
        display: flex !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        scroll-snap-align: center !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-item > .qti-navigator-label {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        padding: 0 !important;
        border: 1px solid rgba(31, 41, 51, 0.2) !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        color: #1f2933 !important;
        font-size: 0 !important;
        line-height: 1 !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
        touch-action: pan-x !important;
        user-select: none !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-item.active > .qti-navigator-label {
        background: #2679a8 !important;
        border-color: #2679a8 !important;
        color: #fff !important;
        box-shadow: 0 8px 16px rgba(38, 121, 168, 0.26) !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-item.answered:not(.active) > .qti-navigator-label {
        background: #edf8f2 !important;
        border-color: rgba(34, 139, 90, 0.35) !important;
        color: #16643f !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-item.viewed:not(.active):not(.answered) > .qti-navigator-label {
        background: #fff8e8 !important;
        border-color: rgba(207, 139, 34, 0.34) !important;
        color: #7a4f10 !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-item .qti-navigator-text,
    body.delivery-scope .test-runner-scope .qti-navigator-item .qti-navigator-icon {
        display: none !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-item .qti-navigator-number {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 44px !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        line-height: 44px !important;
        text-align: center !important;
        pointer-events: none !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-default,
    body.delivery-scope .test-runner-scope .qti-navigator-default.collapsed {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        padding-right: 0 !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-default .qti-navigator-label,
    body.delivery-scope .test-runner-scope .qti-navigator-default.collapsed .qti-navigator-label {
        width: auto !important;
        min-width: 0 !important;
    }

    body.delivery-scope .test-runner-scope .qti-navigator-default .qti-navigator-filters,
    body.delivery-scope .test-runner-scope .qti-navigator-default.collapsed .qti-navigator-filters {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.delivery-scope .test-runner-scope .qti-interaction,
    body.delivery-scope .test-runner-scope .qti-choiceInteraction,
    body.delivery-scope .test-runner-scope .qti-prompt-container,
    body.delivery-scope .test-runner-scope .qti-prompt,
    body.delivery-scope .test-runner-scope .choice-area,
    body.delivery-scope .test-runner-scope .qti-choice,
    body.delivery-scope .test-runner-scope .qti-simpleChoice {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    body.delivery-scope .test-runner-scope .choice-area {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.delivery-scope .test-runner-scope .qti-simpleChoice,
    body.delivery-scope .test-runner-scope .qti-choice {
        display: block !important;
        margin: 8px 0 !important;
        padding: 10px 12px !important;
        line-height: 1.45 !important;
    }

    body.delivery-scope .test-runner-scope img,
    body.delivery-scope .test-runner-scope svg,
    body.delivery-scope .test-runner-scope canvas,
    body.delivery-scope .test-runner-scope video,
    body.delivery-scope .test-runner-scope table {
        max-width: 100% !important;
        height: auto !important;
    }

    body.delivery-scope .test-runner-scope table {
        display: block !important;
        overflow-x: auto !important;
    }

    body.delivery-scope .test-runner-scope .action-bar.content-action-bar.horizontal-action-bar,
    body.delivery-scope .test-runner-scope .action-bar.content-action-bar.horizontal-action-bar > .control-box {
        height: auto !important;
        min-height: 38px !important;
        flex-basis: auto !important;
        flex-shrink: 0 !important;
    }

    body.delivery-scope .test-runner-scope .action-bar.content-action-bar.horizontal-action-bar > .control-box {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px 8px !important;
        padding: 4px 8px !important;
    }

    body.delivery-scope .test-runner-scope .bottom-action-bar.content-action-bar.horizontal-action-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 50 !important;
        background: #2f2f2f !important;
        box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.18) !important;
    }

    body.delivery-scope .test-runner-scope .action-bar.content-action-bar .timer-box,
    body.delivery-scope .test-runner-scope .action-bar.content-action-bar .progress-box,
    body.delivery-scope .test-runner-scope .action-bar.content-action-bar .item-number-box {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-top: 0 !important;
    }

    body.delivery-scope .test-runner-scope .action-bar.content-action-bar .progressbar {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.delivery-scope .test-runner-scope [class^="btn-"],
    body.delivery-scope .test-runner-scope [class*=" btn-"] {
        max-width: 100% !important;
        white-space: normal !important;
    }
}