/* PRODUCTION 01Z — User-approved GLOBAL Student modal standards.
 * All modal headings match the visible Production 01Q Step 1 heading: 18px,
 * bold 800. Buttons are SM (no XS or oversized), and the top-right X is
 * removed. Original explicit Close/Cancel/Back/Continue handlers are preserved.
 * Body scrolls independently of reachable footer actions on short phones.
 */
:root{--myalb-student-modal-title:18px}
body :is(.modal,.modal-backdrop[role="dialog"],.dashboard-utility-backdrop,.myalb-view-chooser) .modal-header :is(.modal-title,h2),
body .myalb-prod01q-compact-header .myalb-prod01q-title,
body .myalb-view-head h2,
body .co-dialog-heading h2,body .landing-help-header h2,
body .pwa-install-dialog h2,
body :is(.myalb-rao-modal-head,#studentUpdatesDialog header) h2 {
  font-family:Inter,Arial,Helvetica,sans-serif!important;
  font-size:var(--myalb-student-modal-title)!important;
  font-weight:800!important;
  line-height:1.25!important;
  letter-spacing:0!important;
  text-transform:none!important;
  overflow-wrap:anywhere;
}
/* More-specific historical status/title styles must not split visible sizing. */
body.experience-timeline :is(#step-modal-1#step-modal-1,#step-modal-2#step-modal-2,
  #step-modal-3#step-modal-3,#step3-lineup-summary-modal#step3-lineup-summary-modal,
  #step-modal-4#step-modal-4,#step-modal-5#step-modal-5,#step-modal-6#step-modal-6,
  #step-modal-7#step-modal-7,#step-modal-8#step-modal-8)
  .modal-header .myalb-prod01q-title,
body.experience-timeline #step-modal-1#step-modal-1 .modal-header .modal-title {
  font-size:var(--myalb-student-modal-title)!important;font-weight:800!important;
  line-height:1.25!important;letter-spacing:0!important;
}
/* Remove X on all Bootstrap/custom Student dialogs, including 01Q's
 * double-ID-specific header button. Visibility is also enforced by JS
 * (keyboard focus and dynamically inserted modals).
 */
body .modal .modal-header .btn-close,
body .modal .step2-welcome-close,
body .modal-backdrop[role="dialog"] .modal-close,
body .dashboard-utility-backdrop .utility-close,
body .myalb-view-chooser .myalb-view-x,
body .updates-close,
body .pwa-install-dialog .pwa-dialog-close,
body .landing-help-dialog .landing-help-close,
body .co-dialog #coDetailClose {display:none!important}
body.experience-timeline :is(#step-modal-1#step-modal-1,#step-modal-2#step-modal-2,
 #step-modal-3#step-modal-3,#step3-lineup-summary-modal#step3-lineup-summary-modal,
 #step-modal-4#step-modal-4,#step-modal-5#step-modal-5,#step-modal-6#step-modal-6,
 #step-modal-7#step-modal-7,#step-modal-8#step-modal-8) > .modal-dialog > .modal-content
 > .modal-header.myalb-prod01q-compact-header > .btn-close {display:none!important}
/* Standard SM sizing. Keep touch targets >= 36px, with CSS wrapping for long actions. */
body :is(.modal,.modal-backdrop[role="dialog"],.dashboard-utility-backdrop,
 .myalb-rao-modal,.myalb-view-chooser) :is(button.btn,a.btn,button.button,button.utility-button,
 .myalb-view-option,.myalb-view-close,.myalb-rao-modal-close),
body .updates-explicit-close,
body :is(.co-dialog,.landing-help-dialog,.pwa-install-dialog) :is(button.co-dialog-close,button.pwa-dialog-done,button.landing-help-done,button#coDetailDone) {
  font-size:.875rem!important;
  font-weight:700;
  line-height:1.25!important;
  padding:.375rem .75rem!important;
  min-height:36px;
  max-width:100%;
  white-space:normal!important;
  overflow-wrap:anywhere;
  touch-action:manipulation;
}
/* Keep modal footers above scrolling bodies, including when the phone height
 * shrinks for on-screen keyboards; do not change any modal's content or action.
 */
@media(max-width:900px) {
  body .modal.show {max-height:100dvh!important;overflow-x:hidden!important}
  body .modal.show > .modal-dialog {max-height:calc(100dvh - 16px)!important;min-height:0!important;margin:auto!important}
  body .modal.show > .modal-dialog > .modal-content:not(.step2-welcome-content){
    max-height:calc(100dvh - 16px)!important;min-height:0!important;
    display:flex!important;flex-direction:column!important;overflow:hidden!important
  }
  body .modal.show > .modal-dialog > .modal-content > .modal-header{flex-shrink:0!important;max-height:min(32dvh,180px);overflow-y:auto}
  body .modal.show > .modal-dialog > .modal-content > .modal-body{flex:1 1 auto!important;min-height:0!important;overflow-x:hidden;overflow-y:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
  body .modal.show > .modal-dialog > .modal-content > .modal-footer{
    position:relative;z-index:2;display:flex!important;flex:0 0 auto!important;
    flex-wrap:wrap!important;gap:6px!important;justify-content:flex-end;
    max-height:32dvh;overflow-y:auto;overscroll-behavior:contain;
    padding:8px 10px max(8px,env(safe-area-inset-bottom,0px))!important;
    background:var(--bs-modal-bg,#fff)
  }
  body .modal.show > .modal-dialog > .modal-content > .modal-footer :is(button.btn,a.btn){flex:0 1 auto;min-width:0!important;width:auto!important}
  body :is(.modal-backdrop[role="dialog"],.dashboard-utility-backdrop) .modal-body,
  body .myalb-view-chooser .myalb-view-options {min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}
  body :is(.modal-backdrop[role="dialog"],.dashboard-utility-backdrop) :is(.modal-dialog,.dashboard-utility-modal){max-height:calc(100dvh - 16px);overflow-y:auto}
}
@media(max-width:390px){
 body .modal.show > .modal-dialog > .modal-content > .modal-footer{gap:5px!important}
 body .modal.show > .modal-dialog > .modal-content > .modal-footer :is(button.btn,a.btn){font-size:.875rem!important;padding:.35rem .55rem!important}
}

/* Additional native informational dialogs already provide visible Got it/Close
 * actions. Keep their bodies independently scrollable on phones. */
@media(max-width:900px){
 body :is(.co-dialog,.landing-help-dialog,.pwa-install-dialog)[open]{max-height:calc(100dvh - 16px)!important;overflow:hidden!important}
 body .co-dialog .co-dialog-body,body .landing-help-dialog .landing-help-scroll,
 body .pwa-install-dialog .pwa-install-dialog-inner{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;max-height:calc(100dvh - 120px)}
}
/* Step 1 and Step 2 have their wizard footer INSIDE a form, unlike the
 * ordinary Bootstrap dialogs. Without this flex contract, a 4000px form
 * can push the Close/Continue buttons outside the phone viewport. */
@media(max-width:900px){
 body.experience-timeline .modal.show:is(#step-modal-1,#step-modal-2) > .modal-dialog > .modal-content {
   height:calc(100dvh - 16px)!important;
   max-height:calc(100dvh - 16px)!important;
   min-height:0!important;
   display:flex!important;
   flex-direction:column!important;
   overflow:hidden!important;
 }
 body.experience-timeline .modal.show:is(#step-modal-1,#step-modal-2) > .modal-dialog > .modal-content > form {
   display:flex!important;flex-direction:column!important;flex:1 1 auto!important;
   height:auto!important;min-height:0!important;max-height:100%!important;
   overflow:hidden!important;
 }
 body.experience-timeline .modal.show:is(#step-modal-1,#step-modal-2) > .modal-dialog > .modal-content > form > .modal-body {
   flex:1 1 auto!important;min-height:0!important;max-height:none!important;
   overflow-x:hidden!important;overflow-y:auto!important;
   -webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;
 }
 body.experience-timeline .modal.show:is(#step-modal-1,#step-modal-2) > .modal-dialog > .modal-content > form > .modal-footer {
   position:relative!important;z-index:3!important;flex:0 0 auto!important;
   display:flex!important;flex-wrap:wrap!important;align-items:center!important;
   max-height:32dvh!important;overflow-y:auto!important;
   padding:8px 10px max(8px,env(safe-area-inset-bottom,0px))!important;
   gap:6px!important;background:#f8fbff!important;
 }
 body.experience-timeline .modal.show:is(#step-modal-1,#step-modal-2) > .modal-dialog > .modal-content > form > .modal-footer :is(button.btn,a.btn) {
   flex:0 1 auto!important;width:auto!important;min-width:0!important;
 }
}
/* The Step 2 introduction has a custom title and footer outside Bootstrap's
 * modal-header/modal-footer. It must follow the SAME user-approved standards. */
body.experience-timeline #step2-intro-modal .step2-welcome-title{
  font-family:Inter,Arial,Helvetica,sans-serif!important;
  font-size:var(--myalb-student-modal-title)!important;
  font-weight:800!important;
  line-height:1.25!important;
  letter-spacing:0!important;
  overflow-wrap:anywhere;
}
body.experience-timeline #step2-intro-modal .step2-welcome-actions .btn{
  font-size:.875rem!important;
  font-weight:700!important;
  line-height:1.25!important;
  padding:.375rem .75rem!important;
  min-height:36px!important;
  min-width:0!important;
  white-space:normal!important;
  touch-action:manipulation;
}
@media(max-width:900px){
  body.experience-timeline #step2-intro-modal .step2-welcome-actions .btn{
    flex:0 1 auto!important;
    width:auto!important;
  }
}
@media(max-width:900px){
  /* Leave room for the longer Continue action without wrapping Not Now. */
  body.experience-timeline #step2-intro-modal .step2-welcome-actions .btn:first-child{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
  body.experience-timeline #step2-intro-modal .step2-welcome-actions .btn:last-child{
    flex:1 1 auto!important;
  }
}