/* Instructor /app column (#235): keep viewport-fixed overlays on the 520px shell. */

html.ll-vp-sim--phone {
    --app-shell-column-inset: 0px;
}

/* Gray backout lives on the page; the app column keeps the product fill. */
html:not(.ll-vp-sim--phone):has(.app-shell) {
    background: var(--app-shell-backout, #5c6370);
}

html:not(.ll-vp-sim--phone):has(.app-shell) body {
    background: var(--app-shell-backout, #5c6370);
}

html:not(.ll-vp-sim--phone):has(.app-shell) .app-shell {
    background: var(--app-page-fill);
    isolation: isolate;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.28),
        0 16px 48px rgba(0, 0, 0, 0.28);
}

html:not(.ll-vp-sim--phone) body > .dialog-overlay,
html:not(.ll-vp-sim--phone) body > .ll-surface-host,
html:not(.ll-vp-sim--phone) body > .email-panel-overlay,
html:not(.ll-vp-sim--phone) body > .lesson-dialog-overlay,
html:not(.ll-vp-sim--phone) body > .swing-analysis-player-overlay,
html:not(.ll-vp-sim--phone) body > .record-notes-dialog,
html:not(.ll-vp-sim--phone) body > .contact-reach-sheet-overlay,
html:not(.ll-vp-sim--phone) body > .media-share-sheet-overlay {
    left: var(--app-shell-column-inset, 0px);
    right: var(--app-shell-column-inset, 0px);
    width: auto;
}

html:not(.ll-vp-sim--phone) .ask-lessonlink-dock__backdrop {
    left: var(--app-shell-column-inset, 0px);
    right: var(--app-shell-column-inset, 0px);
    width: auto;
}