/* Phase 8: overlay layout and dark-mode regression safeguards.
   This stylesheet is intentionally loaded AFTER phase7-mobile.css. */
:root{color-scheme:light}
body.dark{color-scheme:dark}
/* Keep the modal's header visible while contents scroll. */
#modal.dialog{color:var(--text);background:var(--paper);border-color:var(--line);overscroll-behavior:contain}
#modal .dialogtop{position:sticky;top:0;z-index:12;display:flex;align-items:center;gap:10px;min-height:44px;margin:0 0 10px;padding:3px 0 9px;background:var(--paper);border-bottom:1px solid var(--line)}
#modal .dialogtop h2{flex:1;min-width:0;font-size:clamp(15px,2.5vw,19px);line-height:1.4;overflow-wrap:anywhere}
#modal .dialogtop .iconbtn{flex-shrink:0;min-width:42px;min-height:42px}
#modal #modalBody{min-width:0}
#modal .dialogbottom{position:sticky;bottom:0;z-index:10;margin-top:16px;padding:10px 0 max(8px,env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line)}
#modal .dialogbottom button{min-height:44px}
/* Long-form data entry: large on desktop, full-screen on mobile. */
@media(min-width:701px){
 #modal.dialog:has(#composeForm),#modal.dialog:has(#pasteGrid),#modal.dialog:has(.import-review){width:min(92vw,1400px)!important;max-width:min(92vw,1400px)!important;max-height:92dvh!important}
 #modal.dialog:has(#settingsForm){width:min(560px,90vw)!important}
}
@media(max-width:700px){
 #modal.dialog:has(#composeForm),#modal.dialog:has(#pasteGrid),#modal.dialog:has(.import-review),#modal.dialog:has(#studentForm:has(.paste-grid)){
   position:fixed!important;inset:0!important;margin:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;min-height:100dvh!important;border:0!important;border-radius:0!important;padding:calc(env(safe-area-inset-top) + 8px) 14px 8px!important;overflow-y:auto!important;overflow-x:hidden!important;
 }
 #modal.dialog:has(#settingsForm){position:fixed!important;inset:auto 0 0 0!important;margin:0!important;width:100vw!important;max-width:100vw!important;max-height:min(78dvh,720px)!important;border-radius:18px 18px 0 0!important;padding:12px 16px!important;overflow-y:auto!important}
 #modal.dialog:has(.quick-detail){width:min(94vw,480px)!important;max-width:94vw!important;max-height:82dvh!important;margin:auto!important;border-radius:18px!important}
}
/* Anchored menus, without converting selections into centered dialogs. */
.lesson-picker{position:relative}
#deckPopover{max-height:min(54dvh,380px);overflow-y:auto;overscroll-behavior:contain}
#notificationDropdown{max-height:min(62dvh,540px);overflow-y:auto;overscroll-behavior:contain}
#profileDropdown{max-height:min(60dvh,480px);overflow-y:auto;overscroll-behavior:contain}
#deckPopover[hidden],#notificationDropdown[hidden],#profileDropdown[hidden]{display:none!important}
/* Dark tokens for overlay descendants and native selects. */
body.dark #modal,body.dark #modal input,body.dark #modal textarea,body.dark #modal select,body.dark #deckPopover,body.dark #notificationDropdown,body.dark #profileDropdown{color:var(--text);background-color:var(--paper);border-color:var(--line);color-scheme:dark}
body.dark #modal .dialogtop,body.dark #modal .dialogbottom{background:var(--paper);border-color:var(--line)}
body.dark #modal .hint,body.dark #modal .field,body.dark #modal small,body.dark #deckPopover small,body.dark #notificationDropdown small{color:var(--muted)}
body.dark #modal .tabs,body.dark #modal .work-queue-button,body.dark #modal .outline{border-color:var(--line)}
body.dark #modal input::placeholder,body.dark #modal textarea::placeholder{color:var(--muted);opacity:.88}
/* Intermediate loading asset: steady center with mild motion, not a fabricated walking animation. */
#accountGate:has(.loading-shiba){display:flex;align-items:center;justify-content:center;min-height:100dvh}
#accountGate .account-card:has(.loading-shiba){margin:auto;display:flex;align-items:center;justify-content:center}
#accountGate .loading-shiba{animation:poli-loading-bob 1.3s ease-in-out infinite!important;transform-origin:50% 85%;filter:none!important;max-width:90px}
@keyframes poli-loading-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){#accountGate .loading-shiba{animation:none!important}}