/* One outer frame from signup preview through cards, lessons, plans and records. */
:is(#login-preview,#my-profile-dialog,#plan-journey,#lesson-flow,#instructor-flow) > :is(.lp-panel,.mp-panel,.j-panel,.lf-panel,.ic-panel) {
 --connected-height:var(--ic-height,var(--lp-height,var(--mp-height,var(--j-height,var(--lf-height,100dvh)))));
 position:absolute; inset:max(12px,env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom,0px));
 width:auto; max-width:580px; height:auto; max-height:none; min-height:0;
 transform:none; margin:0 auto; border-radius:26px;
}
#login-preview .lp-panel { display:flex; flex-direction:column; overflow:hidden; }
#login-preview .lp-header { flex:none; padding:16px 20px; border-bottom:1px solid var(--line); }
#login-preview .lp-content { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:24px; }
#login-preview .lp-logo { margin-top:10px; }
:is(.lp-header,.mp-dialog-head,.j-dialog-header,.modal-top) .icon-button { width:44px; height:44px; flex:none; }
#login-preview .lp-preview-note { font-size:11px; }
#my-profile-dialog .mp-dialog-head > div > span,#plan-journey .j-dialog-header span { font-size:11px; }
#modal[open] { position:fixed; inset:max(12px,env(safe-area-inset-top)) 12px calc(92px + env(safe-area-inset-bottom,0px)); width:auto; max-width:580px; height:auto; max-height:none; margin:0 auto; padding:0; display:flex; flex-direction:column; border-radius:26px; overflow:hidden; }
#modal > .modal-top { flex:none; margin:0; padding:16px 20px; border-bottom:1px solid var(--line); }
#modal > .modal-top h2 { font-size:18px; line-height:1.4; }
#modal-content { flex:1; min-height:0; padding:22px; overflow-y:auto; overscroll-behavior:contain; }
@media(min-width:960px) {
 :is(#login-preview,#my-profile-dialog,#plan-journey,#lesson-flow,#instructor-flow) > :is(.lp-panel,.mp-panel,.j-panel,.lf-panel,.ic-panel) { top:50%; bottom:auto; transform:translateY(-50%); height:min(780px,calc(var(--connected-height) - 48px)); }
 #modal[open] { top:50%; bottom:auto; transform:translateY(-50%); height:min(780px,calc(100dvh - 48px)); }
}
@media(max-height:560px) {
 :is(#login-preview,#my-profile-dialog,#plan-journey,#lesson-flow,#instructor-flow) > :is(.lp-panel,.mp-panel,.j-panel,.lf-panel,.ic-panel) { top:8px; }
 #modal[open] { top:8px; }
 :is(.mp-dialog-head,.j-dialog-header) { padding-block:10px; }
 :is(.mp-footer,.j-footer) { padding-block:10px; }
}
@media(min-width:960px) and (max-height:560px) {
 :is(#login-preview,#my-profile-dialog,#plan-journey,#lesson-flow,#instructor-flow) > :is(.lp-panel,.mp-panel,.j-panel,.lf-panel,.ic-panel),#modal[open] { top:12px; bottom:12px; height:auto; transform:none; }
}

:is(.fv-hero,#login-preview,#my-profile-dialog,#plan-journey,#lesson-flow,#instructor-flow,#modal) { --action-bg:#007e89; --accent-text:#fff; }