/* Desktop demos retain their existing map and controls. Mobile previews use the same live iframe. */
.mobile-demo-header, .mobile-demo-launch, .mobile-demo-focus-guard {
    display: none;
}

@media (max-width: 1023px) {
    .mobile-demo:not(.mobile-demo-expanded) {
        display: block;
        position: relative;
        width: 100%;
        height: var(--demo-preview-height, 14rem);
        min-height: 0;
        margin-block: 1rem 0;
        border-radius: 1rem;
    }

    .mobile-demo:not(.mobile-demo-expanded) > :not(iframe):not(.mobile-demo-launch) {
        display: none;
    }

    .mobile-demo:not(.mobile-demo-expanded) > iframe {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        pointer-events: none;
        border-radius: 1rem;
    }

    .mobile-demo > .mobile-demo-launch {
        display: flex;
        position: absolute;
        inset: 0;
        width: 100%;
        align-items: flex-end;
        justify-content: center;
        border: 0;
        padding: .75rem;
        background: transparent;
        cursor: pointer;
        border-radius: 1rem;
        touch-action: pan-y;
    }

    .mobile-demo-launch > span {
        display: inline-flex;
        gap: .5rem;
        align-items: center;
        padding: .4rem .85rem;
        background: rgb(0 0 0 / 85%);
        color: #fff;
        border-color: rgb(255 255 255 / 60%);
    }

    .mobile-demo-launch:focus-visible {
        outline: 2px solid #a5a3ff;
        outline-offset: 3px;
    }

    :root.mobile-demo-open, .mobile-demo-open body {
        overflow: hidden;
    }

    .mobile-demo-open .deck-scroll {
        overflow: hidden;
        scroll-snap-type: none;
    }

    .mobile-demo.mobile-demo-expanded {
        display: grid;
        grid-template-areas: "header" "map" "controls";
        grid-template-rows: auto minmax(8rem, 1fr) auto;
        grid-template-columns: minmax(0, 1fr);
        position: fixed;
        inset: auto;
        top: var(--demo-top, 0px);
        left: var(--demo-left, 0px);
        z-index: 100;
        width: var(--demo-width, 100vw);
        height: var(--demo-height, 100dvh);
        max-width: none;
        max-height: none;
        min-height: 0;
        margin: 0;
        padding: .5rem;
        padding-bottom: max(.5rem, env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        gap: .5rem;
        overflow: hidden;
        overscroll-behavior: contain;
        border: 0;
        border-radius: 0;
        background: #080808;
        color: #fff;
        text-align: left;
    }

    .mobile-demo-expanded::backdrop {
        background: #080808;
    }

    .mobile-demo-expanded > .mobile-demo-launch {
        display: none;
    }

    .mobile-demo-expanded > .mobile-demo-header {
        grid-area: header;
        display: flex;
        align-items: center;
        gap: .5rem;
        min-width: 0;
    }

    .mobile-demo-header h2 {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: .95rem;
        font-weight: 700;
        line-height: 1.25;
    }

    .mobile-demo-header .mobile-demo-close {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
    }

    .mobile-demo-expanded .mobile-demo-close svg {
        width: 20px;
        height: 20px;
        color: inherit;
    }

    .mobile-demo-expanded > iframe {
        grid-area: map;
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: .75rem;
    }

    .mobile-demo-expanded > .mobile-demo-controls {
        grid-area: controls;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        width: 100%;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: .25rem;
        gap: .4rem;
        font-size: .8rem;
        line-height: 1.4;
        text-align: center;
    }

    .mobile-demo-expanded :is(.technology-demo-body, .compression-button-set) {
        flex: 0 1 auto;
        justify-content: flex-start;
        gap: .4rem;
    }

    .mobile-demo-expanded :is(.compression-geometry, .compression-options, .compression-option-row) {
        gap: .35rem;
        justify-content: center;
    }

    .mobile-demo-expanded .compression-geometry {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mobile-demo-expanded .compression-geometry .compression-segments.compression-shape-grid {
        display: flex;
    }

    .mobile-demo-expanded .compression-shape-grid button + button {
        border-top: 0;
        border-left: 1px solid rgb(255 255 255 / 35%);
    }

    .mobile-demo-expanded :is(.technology-demo-help, .geometry-guide-map-link) {
        align-self: center;
        margin: 0;
        font-size: .8rem;
        padding-block: .2rem;
    }

    .mobile-demo-expanded .precision-demo-srl {
        font-size: 1rem;
    }

    .mobile-demo-expanded .precision-offsets {
        max-width: none;
        font-size: .75rem;
    }

    .mobile-demo-expanded .precision-offsets > p {
        margin-bottom: 0;
    }

    .mobile-demo-expanded .precision-offsets dl {
        display: flex;
        justify-content: center;
        gap: .75rem;
    }

    .mobile-demo-expanded .precision-offsets dl div {
        gap: .3rem;
        padding: 0;
    }

    .mobile-demo-expanded .srl-dial-controls > p,
    .mobile-demo-expanded .ecode-position-controls .technology-demo-body > p:not([data-ecode-status]) {
        display: none;
    }

    .mobile-demo-expanded .srl-dial-lock {
        --dial-width: clamp(.85rem, 4.5vw, 1.4rem);
    }

    .mobile-demo.mobile-demo-expanded > figcaption span {
        flex: 0 1 auto;
        font-size: .75rem;
    }

    .mobile-demo-tabs:not([hidden]) {
        display: flex;
        gap: .25rem;
    }

    .mobile-demo-tabs button {
        padding: .3rem .5rem;
        font-size: .75rem;
    }

    .mobile-demo-tabs button[aria-pressed="true"] {
        background: #fff;
        color: #111;
    }

    .mobile-demo.mobile-demo-expanded.mobile-demo-paged {
        grid-template-areas: "header" "map";
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-columns: minmax(0, 1fr);
    }

    .mobile-demo-paged[data-demo-panel="map"] > .mobile-demo-controls {
        display: none;
    }

    .mobile-demo-paged[data-demo-panel="controls"] > iframe {
        display: none;
    }

    .mobile-demo-paged[data-demo-panel="controls"] > .mobile-demo-controls {
        grid-area: map;
        justify-content: center;
        overflow: auto;
    }

    .mobile-demo-expanded > .mobile-demo-focus-guard {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        clip-path: inset(50%);
    }
}

/* A landscape phone has more useful horizontal space for controls beside the map. */
@media (max-width: 1023px) and (max-height: 480px) and (min-aspect-ratio: 6/5) {
    .mobile-demo.mobile-demo-expanded {
        grid-template-areas: "header header" "map controls";
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-rows: auto minmax(0, 1fr);
    }
}