/* ==========================================================================
   App mode — the configurator inside the Make My app (customer-app.md,
   "App mode"). Owner-approved mock-up, 2026-10-08.

   Every rule here needs BOTH:
     - html[data-app-bar="1"]: set by the app (App/src/bridge.js) before the
       page loads, and only by an app build that draws the native bar; an older
       build never sets it, so its page keeps the website's own bar;
     - .config-shell[data-app-layout]: set by core-app-layout.js, only when it
       has built the step header and only inside the app's web view, on the one
       configurator core-app-bridge.js reports to the app.
   Without both, nothing below applies, so the website is untouched.

   What changes:
     - every width: the action bar (total + Add to basket) and Back / Continue
       go, because the app's native bar carries them;
     - below 900px: the shell fills the web view and splits in two, both parts
       fixed. The preview takes the top 44% and never scrolls, so a swipe on it
       always means "turn the model" and never fights the page scroll. Below it
       the panel scrolls on its own, under a step header ("Step 2 of 6 · Size")
       whose progress segments jump to a step. The expand button grows the
       preview to nearly the whole screen and folds the panel to its header.
   ========================================================================== */

/* --- Every width: the native bar replaces the page's ---------------------- */

html[data-app-bar="1"] .config-shell[data-app-layout] > .config-summary,
html[data-app-bar="1"] .config-shell[data-app-layout] .config-step__nav {
    display: none;
}

/* The step header and the expand button exist only for the phone split. */
html[data-app-bar="1"] .config-shell[data-app-layout] .config-app-steps,
html[data-app-bar="1"] .config-shell[data-app-layout] .config-app-expand {
    display: none;
}

/* --- Below 900px: the split ----------------------------------------------- */

@media (width < 900px) {
    /* Nothing scrolls behind the fixed shell, sideways included: iOS pans
       the page on any overflow even when only the body clips it. */
    html[data-app-bar="1"]:has(.config-shell[data-app-layout]),
    html[data-app-bar="1"] body:has(.config-shell[data-app-layout]) {
        overflow: hidden;
    }

    /* The shell IS the screen: fixed to the web view, so no ancestor's
       gutter or margin can move it. The header, footer and everything else
       on the page are already hidden in app mode (Theme). */
    html[data-app-bar="1"] .config-shell[data-app-layout] {
        position: fixed;
        inset: 0;
        z-index: var(--z-sticky);
        display: flex;
        flex-direction: column;
        gap: 0;
        min-height: 0;
        margin: 0;
        background: var(--paper);
    }

    html[data-app-bar="1"] .config-shell[data-app-layout] > .config-card {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        border: 0;
        border-radius: 0;
    }

    /* The sideways tab rail gives way to the step header in the panel. */
    html[data-app-bar="1"] .config-shell[data-app-layout] .steps-bar {
        display: none;
    }

    html[data-app-bar="1"] .config-shell[data-app-layout] .config-body {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    html[data-app-bar="1"] .config-shell[data-app-layout] .config-preview {
        flex: 0 0 44%;
        min-height: 0;
        border: 0;
        overflow: hidden;
    }
    /* The preview fills its share: the container, and the 3D view inside it,
       whose own 500px floor would otherwise spill past the panel. */
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-preview > .core-preview-container,
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-preview .core-3d-container {
        height: 100%;
        min-height: 0;
    }
    /* "Dimensions in mm" moves in beside the expand button. */
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-preview .core-dim-unit-note {
        right: calc(var(--sp-2) + var(--h-btn-sm) + var(--sp-2));
        bottom: calc(var(--r-lg) + var(--sp-2) + 9px);
    }

    /* The panel: a sheet laid over the preview's foot, fixed in place (no
       drag), scrolling on its own. */
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-panel {
        position: relative;
        z-index: var(--z-raised);
        flex: 1;
        min-height: 0;
        margin-top: calc(-1 * var(--r-lg));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--paper);
        border-top: 1px solid var(--rule-strong);
        border-radius: var(--r-lg) var(--r-lg) 0 0;
    }

    /* --- The step header: "Step 2 of 6 · Size" and its segments --------- */

    html[data-app-bar="1"] .config-shell[data-app-layout] .config-app-steps {
        position: sticky;
        top: 0;
        z-index: 1;
        display: block;
        padding: var(--sp-3) var(--sp-4) 0;
        background: var(--paper);
    }
    .config-app-steps__head {
        display: flex;
        align-items: baseline;
        gap: var(--sp-2);
        margin: 0;
    }
    .config-app-steps__where {
        flex: 1;
        min-width: 0;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--fs-16);
        font-weight: var(--fw-regular);
        line-height: var(--lh-snug);
        color: var(--ink);
    }
    .config-app-steps__count {
        font-size: var(--fs-13);
        color: var(--ink-muted);
    }
    .config-app-steps__show {
        flex: none;
        display: none;
        padding: 0;
        border: 0;
        background: none;
        font: inherit;
        font-size: var(--fs-13);
        color: var(--ink);
        text-decoration: underline;
        text-underline-offset: 3px;
        cursor: pointer;
    }

    /* Each segment is a step button: a 3px bar drawn inside a 28px box whose
       ::after stretches the target to the 44px touch floor. Done steps are
       Ink, the current one the accent (the tabs' progress underline, moved),
       the rest Rule. */
    .config-app-steps__bar {
        display: flex;
        gap: 3px;
        margin: 0 calc(-1 * var(--sp-1));
    }
    .config-app-steps__seg {
        position: relative;
        flex: 1;
        min-width: 0;
        height: 28px;
        margin: 0;
        padding: 0 var(--sp-1);
        border: 0;
        background: none;
        cursor: pointer;
    }
    .config-app-steps__seg::before {
        content: "";
        display: block;
        height: 3px;
        background: var(--rule);
    }
    .config-app-steps__seg::after {
        content: "";
        position: absolute;
        inset: -8px 0;
    }
    .config-app-steps__seg[data-done]::before {
        background: var(--ink);
    }
    .config-app-steps__seg[aria-current="step"]::before {
        background: var(--accent);
    }
    .config-app-steps__seg:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }

    /* The step's own "02 Material" heading repeats the header: kept for
       screen readers, hidden from sight. */
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-step__title {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-step {
        padding-top: var(--sp-2);
    }

    /* --- Preview buttons: AR bottom-left, expand bottom-right ----------- */

    /* core-app-layout.js moves the AR box into the preview. Its button is a
       32px icon; the label stays for screen readers (font-size 0), so
       core-ar-button.js's busy text needs no change. */
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-preview > .config-ar {
        position: absolute;
        left: var(--sp-2);
        bottom: calc(var(--r-lg) + var(--sp-2));
        z-index: var(--z-raised);
        padding: 0;
        border: 0;
        background: none;
    }
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-preview > .config-ar[hidden] {
        display: none;
    }
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-ar__open,
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-app-expand {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--h-btn-sm);
        min-width: 0;
        height: var(--h-btn-sm);
        min-height: 0;
        padding: 0;
        /* The label is kept for screen readers at size 0; with no gap it
           takes no room either, so the icon sits dead centre. */
        gap: 0;
        font-size: 0;
        background: var(--paper);
    }
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-ar__open::before,
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-app-expand::before {
        content: "";
        width: 18px;
        height: 18px;
        background: currentColor;
        -webkit-mask: var(--app-icon) center / contain no-repeat;
        mask: var(--app-icon) center / contain no-repeat;
    }
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-ar__open {
        --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 7.5l4 2.25v4.5L12 16.5l-4-2.25v-4.5z M8 9.75l4 2.25 4-2.25 M12 12v4.5'/%3E%3Cpath d='M3 8V5a2 2 0 0 1 2-2h3 M16 3h3a2 2 0 0 1 2 2v3 M21 16v3a2 2 0 0 1-2 2h-3 M8 21H5a2 2 0 0 1-2-2v-3' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-ar__open[aria-busy="true"]::before {
        opacity: 0.4;
    }
    /* A failed open is said beside the button, on the preview. */
    html[data-app-bar="1"] .config-shell[data-app-layout] .config-ar__error {
        position: absolute;
        left: 0;
        bottom: calc(var(--h-btn-sm) + var(--sp-2));
        width: max-content;
        max-width: 240px;
        margin: 0;
    }

    html[data-app-bar="1"] .config-shell[data-app-layout] .config-app-expand {
        position: absolute;
        right: var(--sp-2);
        bottom: calc(var(--r-lg) + var(--sp-2));
        z-index: var(--z-raised);
        --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5 M15 4h5v5 M20 15v5h-5 M9 20H4v-5'/%3E%3C/svg%3E");
    }

    /* --- Expanded: the preview takes the screen, the panel folds to its header */

    html[data-app-bar="1"] .config-shell[data-app-layout][data-app-expanded] .config-preview {
        flex: 1 1 auto;
    }
    html[data-app-bar="1"] .config-shell[data-app-layout][data-app-expanded] .config-panel {
        flex: none;
        overflow: hidden;
    }
    html[data-app-bar="1"] .config-shell[data-app-layout][data-app-expanded] .config-panel > .config-step {
        display: none;
    }
    html[data-app-bar="1"] .config-shell[data-app-layout][data-app-expanded] .config-app-steps__show {
        display: inline;
    }
    html[data-app-bar="1"] .config-shell[data-app-layout][data-app-expanded] .config-app-expand {
        --app-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4v5H4 M20 9h-5V4 M15 20v-5h5 M4 15h5v5'/%3E%3C/svg%3E");
    }

    /* --- Review your design (core-approval-modal.js) --------------------
       Full screen under the app's header: the preview takes what is left
       and the tick box is a full 44px row. Its own Add to basket / Go back
       pair is hidden, because the app's bar becomes that pair while the
       review is open (core-app-bridge.js reads and presses the modal's own
       buttons, so the website's confirm rules still apply). */
    html[data-app-bar="1"]:has(.config-shell[data-app-layout]) .core-approval-modal {
        width: 100%;
        height: 100%;
        max-height: none;
        overflow: hidden;
    }
    html[data-app-bar="1"]:has(.config-shell[data-app-layout]) .core-approval-modal__header {
        padding: var(--sp-3) var(--sp-4);
    }
    html[data-app-bar="1"]:has(.config-shell[data-app-layout]) .core-approval-modal__header .core-modal-title {
        font-size: var(--fs-16);
    }
    html[data-app-bar="1"]:has(.config-shell[data-app-layout]) .core-approval-modal__body {
        padding: 0;
    }
    html[data-app-bar="1"]:has(.config-shell[data-app-layout]) .core-approval-modal__preview {
        min-height: 0;
        border-radius: 0;
    }
    html[data-app-bar="1"]:has(.config-shell[data-app-layout]) .core-approval-modal__preview .core-3d-container {
        min-height: 0;
    }
    html[data-app-bar="1"]:has(.config-shell[data-app-layout]) .core-approval-modal__footer {
        padding: 0 var(--sp-4);
    }
    html[data-app-bar="1"]:has(.config-shell[data-app-layout]) .core-approval-modal__checkbox {
        align-items: center;
        gap: var(--sp-3);
        min-height: var(--h-control);
        margin: 0;
        font-size: var(--fs-14);
        color: var(--ink);
    }
    html[data-app-bar="1"]:has(.config-shell[data-app-layout]) .core-approval-modal__checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
    }
    html[data-app-bar="1"]:has(.config-shell[data-app-layout]) .core-approval-modal__actions {
        display: none;
    }

    /* The configurator's server-error banner (add to basket refused, a price
       that would not load) sits after the shell in the DOM, which is under
       the fixed shell here: lift it above the preview's foot. */
    html[data-app-bar="1"] .core-configurator:has(> .config-shell[data-app-layout]) > .core-validation-messages {
        position: fixed;
        left: var(--sp-3);
        right: var(--sp-3);
        bottom: var(--sp-3);
        z-index: calc(var(--z-sticky) + 1);
        margin: 0;
    }
}