/* Integration styles; the legacy design stylesheet stays verbatim. */
.formation-office-frame { position: relative; width: 100%; height: min(75vh, 760px); overflow: hidden; }
.formation-office-frame iframe { width: 100%; height: 100%; border: 0; }
.formation-office-mask { position: absolute; left: 0; right: 0; background: var(--blue); z-index: 2; }
.formation-office-top { top: 0; height: 42px; }
.formation-office-bottom { bottom: 0; height: 40px; }
.forResProgress { width: 100%; accent-color: var(--blue); }

.session-restore { min-height: 100dvh; display: grid; place-items: center; background: #346699; color: white; padding: 24px; }
@media (max-width: 700px) {
  html { max-width: 100%; overflow-x: clip; }
  body { max-width: 100%; overflow-x: clip; }
  body.eem-signed-out { background: #346699; }
  html:has(body.eem-signed-out) { background: #346699; }
  #loginView.login-wrap {
    width: 100%; min-height: 100dvh; height: auto; background: #346699;
    grid-template-columns: minmax(0,1fr);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  #loginView .login-hero { display: none; }
  #loginView .login-panel { background: transparent; padding: 28px 22px; min-width: 0; }
  #loginView .login-card { background: transparent; border: 0; box-shadow: none; padding: 0; width: min(430px,100%); }
  #loginView .mobile-login-verse { margin: 25px 0 24px; }
  #loginView .mobile-login-verse .verse { color: #fff; }
  #loginView .mobile-login-verse .verse-ref { color: #ffd23f; }
  #loginView .brand-mark { background: #ffd23f; }
  #loginView .brand-sub,#loginView .login-kicker { color: #ffd23f; }
  #loginView .login-card .btn { background: #ffd23f; }
  input,select,textarea { font-size: 16px !important; max-width: 100%; }
  #appView { width: 100%; min-width: 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
  #appView .topbar { padding-top: max(10px,env(safe-area-inset-top)); }
  #appView .content,#appView .page { min-width: 0; max-width: 100%; }
  #appView .page { overflow-x: auto; }
  .modal-bg { padding-top: max(12px,env(safe-area-inset-top)); padding-bottom: max(12px,env(safe-area-inset-bottom)); }
}

/* T18: phone menu follows docs/mockups/phone-menu.html; desktop is unchanged. */
.phone-menu-button,.phone-only,.phone-account-label { display: none; }
.phone-menu-scrim[hidden] { display: none; }
@media (max-width:700px) {
  #loginView .login-panel { justify-content: flex-start; align-items: center; padding-top: 30px; padding-bottom: 28px; }
  #loginView .login-card > .brand { justify-content: center; text-align: left; }
  #loginView .mobile-login-verse { text-align: center; padding: 0; }
  #loginView .mobile-login-verse .verse { font-size: 19.55px; }
  #loginView .mobile-login-verse .verse-ref { text-align: center; }
  .desktop-only { display: none; }
  .phone-only { display: inline; }
  #appView { padding-left: env(safe-area-inset-left); margin-left: 0; }
  #appView .topbar {
    height: auto; min-height: calc(64px + env(safe-area-inset-top));
    padding: calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
    display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    background: var(--bg); top: 0; border-bottom: 2px solid var(--nav-accent);
  }
  #appView .topbar-title { min-width: 0; font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
  #appView .topbar .user { display: none; }
  .phone-menu-button {
    width: 42px; height: 42px; padding: 0; flex: none; border: 0; border-radius: 50%;
    display: grid; place-items: center; background: #2a343d; cursor: pointer;
  }
  .phone-menu-button span {
    width: 18px; height: 2px; background: #fff; border-radius: 2px;
    box-shadow: 0 -6px 0 #fff,0 6px 0 #fff;
  }
  .phone-menu-button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
  #appView .side-nav,#appView .side-nav:hover,#appView .side-nav.nav-force-collapsed {
    width: min(250px,82vw); top: 0; bottom: 0; left: 0; z-index: 90; border: 0;
    transform: translateX(-105%); visibility: hidden; transition: transform .22s,visibility .22s;
    padding: calc(20px + env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
    background: #2a343d; box-shadow: none; overflow: auto; overscroll-behavior: contain;
  }
  #appView .side-nav.nav-open { transform: none; visibility: visible; box-shadow: 8px 0 28px #0004; }
  #appView .side-nav .side-brand {
    height: auto; flex: none; justify-content: flex-start; gap: 10px;
    padding: 0 0 18px; margin: 0; pointer-events: none;
  }
  #appView .side-nav .side-brand-text { display: block; opacity: 1; transform: none; }
  #appView .side-nav .brand-title { font-size: 13px; letter-spacing: .04em; }
  #appView .side-nav .brand-sub { font-size: 10px; letter-spacing: .2em; color: #ffd23f; }
  #appView .side-nav .brand-mark { width: 36px; height: 40px; flex: none; }
  #appView .side-nav .nav-burger { display: none; }
  #appView .side-nav .account-mode-toggle {
    width: 100%; height: auto; min-height: 44px; padding: 11px 12px; margin: 0 0 12px; border-radius: 12px;
    display: flex; gap: 12px; justify-content: flex-start; background: #ffffff14;
  }
  #appView .side-nav .account-mode-toggle.hidden { display: none; }
  #appView .side-nav .phone-account-label { display: inline; text-align: left; font-size: 14px; }
  #appView .side-nav .tabs { padding: 0; flex: none; gap: 4px; overflow: visible; }
  #appView .side-nav .tab { min-height: 44px; padding: 11px 12px; grid-template-columns: 22px minmax(0,1fr); gap: 12px; color: #e8e8e8; font-size: 15px; white-space: normal; }
  #appView .side-nav .tab-icon { width: 22px; height: 22px; }
  #appView .side-nav .tab-label { opacity: 1; transform: none; white-space: normal; }
  #appView .side-nav .nav-foot { flex: none; margin-top: 8px; padding: 8px 0 0; border-top: 1px solid #ffffff22; }
  #appView .side-nav .nav-foot .phone-only { display: grid; }
  #appView .side-nav .nav-foot .tab-label .phone-only { display: inline; }
  #appView .side-nav #navLogoutAll { display: none; } /* Available from Settings, below. */
  .phone-menu-scrim {
    position: fixed; inset: 0; z-index: 80; border: 0; padding: 0; margin: 0;
    background: #0005; display: block; width: 100%; height: 100%;
  }
  body.phone-menu-open { overflow: hidden; }
  #appView .content { padding: 14px 16px; width: 100%; margin: 0; }
  #appView .page { width: 100%; min-width: 0; }
  #appView .finance-subtabs,#appView .module-subtabs,#appView .formation-view-toggle,#appView .member-subtabs,#appView .lg-views,#appView .ev-tabs,
  #appView .music-tabs,#appView .member-tabs {
    max-width: 100%; min-width: 0; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  #appView .finance-subtabs > *,#appView .module-subtabs > *,#appView .formation-view-toggle > *,#appView .member-subtabs > *,#appView .lg-views > *,#appView .ev-tabs > *,
  #appView .music-tabs > *,#appView .member-tabs > * { flex-shrink: 0; }
}
@media (prefers-reduced-motion:reduce) {
  #appView .side-nav { transition: none; }
}

@media(max-width:700px){#appView .side-nav .phone-account-label{min-width:0;white-space:normal;line-height:1.3}#appView .side-nav .amt-icon{flex:none}}

/* T19: compact, top anchored login; never re-center when the keyboard opens. */
@media(max-width:700px){
 #loginView.login-wrap{height:auto;min-height:100svh;display:block}
 #loginView .login-panel{min-height:100svh;justify-content:flex-start;padding:16px 22px 20px}
 #loginView .login-card > .brand{justify-content:flex-start;align-items:center;text-align:left;gap:12px}
 #loginView .login-card .brand-mark{width:34px;height:38px;flex:none}
 #loginView .login-app-name{font-size:23px;line-height:1.2;font-weight:800;color:white}
 #loginView .mobile-login-verse{width:100%;margin:10px 0 12px;padding:0;text-align:center}
 #loginView .mobile-login-verse .verse{font-size:19.55px;line-height:1.25;text-wrap:balance;margin:0 0 4px}
 #loginView .mobile-login-verse .verse-ref{font-size:12px;line-height:1.2}
 #loginView .login-kicker{margin:0;font-size:10px;line-height:1.2}
 #loginView .login-card h2{font-size:24px;line-height:1.2;margin:2px 0 8px}
 #loginView .field{margin:0 0 8px}
 #loginView .field label{font-size:10px;line-height:1.2;margin-bottom:4px}
 #loginView .field input{height:36px;padding:7px 12px}
 #loginView .login-options{margin:5px 0;font-size:11px}
 #loginView .login-card .btn{height:38px;padding:7px 12px;margin-top:6px}
 #appView .side-nav,#appView .side-nav:hover,#appView .side-nav.nav-force-collapsed{height:100%;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 #appView .side-nav #accountModeToggle{display:none}
 #appView .side-nav #phoneCurrentAccount{display:grid;flex:none;margin-bottom:12px;cursor:default;white-space:nowrap}
 #appView .side-nav .tabs{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
 #appView .side-nav .nav-foot{flex:0 0 auto;margin-top:auto;padding-top:8px}
 #appView .side-nav #phoneOtherAccount{white-space:nowrap}
 #appView .side-nav #phoneCurrentAccount .tab-label,#appView .side-nav #phoneOtherAccount .tab-label{white-space:nowrap}
}
.session-restore.retry{position:fixed;inset:auto 0 0;z-index:110;min-height:0;display:flex;justify-content:center;gap:12px;padding:12px 16px max(12px,env(safe-area-inset-bottom));font-size:14px}
.session-restore.retry button{border:1px solid white;border-radius:8px;background:transparent;color:white;padding:7px 12px;cursor:pointer}
/* State must win over the ID-scoped phone layout rules (including WebKit). */
#loginView.hidden,#sessionRestore.hidden,#appView.hidden,
#appView .side-nav .nav-foot #phoneOtherAccount.hidden{display:none}