/* Naghma V222 — responsive preservation layer.
   No handlers, endpoints, credits, templates, content or controls are replaced.
   Loaded last by the existing shared headers. Tested against V190/V208/V215 selectors. */
:root{--ng222-mobile-top:58px;--ng222-mobile-nav:64px;--ng222-dock-clear:88px}
html{max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{max-width:100%;overscroll-behavior-x:none}
img,video,canvas,svg{max-width:100%}
main,.main-content,.app-shell,.admin-main{min-width:0}
.main-content :is(.page-head,.section-head,.hero,.song-grid,.library-list,.ws-page,.studio-project-grid,.track-page,.billing-shell,.settings-card){max-width:100%;box-sizing:border-box}
.main-content :is(.card,.ws-card,.plan-card,.track-page,.library-row,.library-list,.ws-grid,.studio-project-grid,.grid3,.control-strip,.control-grid,.advanced-grid){min-width:0}
.main-content :is(input,textarea,select){max-width:100%;box-sizing:border-box}
.main-content :is(.page-head,.section-head){flex-wrap:wrap}
/* Keep normal keyboard navigation visible on all platforms. */
:where(button,a,input,select,textarea):focus-visible{outline:2px solid #a78bfa;outline-offset:2px}
/* The V215 creation columns keep their styling at desktop widths. */
html body[data-page="create"] #v14Create :is(.v14-creator,.v14-library,#createForm,.v75-create-scroll){min-width:0;max-width:100%;box-sizing:border-box}
html body[data-page="create"] #v14Create :is(.source-launcher,.control-strip,.control-grid,.advanced-grid,.grid3,.source-tools,.voice-row,.url-row,.strength-grid) > *{min-width:0;max-width:100%}
html body[data-page="create"] #v14Create :is(input,select,textarea){min-width:0;max-width:100%;box-sizing:border-box}
html body[data-page="create"] #v14Create :is(.source-launcher button,.mode-tabs button){min-width:0;overflow-wrap:anywhere}
html body[data-page="create"] #v14Create .v14-track-list,
html body[data-page="create"] #v14Create .v14-library{min-width:0}
/* Keep the existing SINGLE original submit from V190 or V208 centered. */
html body[data-page="create"] > :is(.v75-create-footer.n190-native-dock,#naghma-v208-fixed-action){box-sizing:border-box;overscroll-behavior:contain}
html body[data-page="create"] > :is(.v75-create-footer.n190-native-dock,#naghma-v208-fixed-action) .generate-dock{min-width:0;max-width:100%;box-sizing:border-box}
html body[data-page="create"] > :is(.v75-create-footer.n190-native-dock,#naghma-v208-fixed-action) #generateMusicBtn{
 display:flex!important;justify-content:center!important;align-items:center!important;text-align:center!important;
 width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box!important;
 overflow-wrap:anywhere!important;touch-action:manipulation!important;
}
/* Tablets and smaller desktop windows: both columns stay usable. */
@media (min-width:901px) and (max-width:1180px){
 html body[data-page="create"] #v14Create{grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr)!important}
 html body[data-page="create"] #v14Create .source-launcher{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
/* All phones and tablets in portrait, including iOS Safari's home indicator. */
@media(max-width:900px){
 :root{--ng222-mobile-top:calc(58px + env(safe-area-inset-top,0px));--ng222-mobile-nav:calc(64px + env(safe-area-inset-bottom,0px));}
 body .main-content{min-width:0!important;max-width:100%!important;width:100%!important}
 body .mobile-top{height:var(--ng222-mobile-top)!important;padding-top:calc(7px + env(safe-area-inset-top,0px))!important;box-sizing:border-box!important;}
 body .mobile-bottom-nav{height:var(--ng222-mobile-nav)!important;box-sizing:border-box!important}
 body:not([data-page="studio"]) .main-content{padding-top:var(--ng222-mobile-top)!important;padding-bottom:calc(var(--ng222-mobile-nav) + 16px)!important}
 .mobile-top :is(.mobile-brand,.mobile-credit){min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .mobile-bottom-nav a{min-width:0!important;min-height:48px;touch-action:manipulation}
 .mobile-bottom-nav a span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .sidebar{max-width:86vw;overflow-y:auto;-webkit-overflow-scrolling:touch}
 .sidebar-scrim{touch-action:manipulation}
 body .main-content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select){font-size:16px!important;min-height:44px}
 body .main-content :is(.page-head,.section-head){padding-inline:12px!important;gap:8px}
 body .main-content .song-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;padding-inline:10px!important}
 body .main-content :is(.ws-grid,.studio-project-grid,.plans-grid){min-width:0!important}
 body .global-player:not([hidden]){bottom:var(--ng222-mobile-nav)!important;max-width:100%!important}
 html body[data-page="create"]{overflow:hidden!important}
 html body[data-page="create"] .main-content{height:100dvh!important;min-height:0!important;overflow:hidden!important;padding-bottom:0!important}
 html body[data-page="create"] #v14Create{
  height:calc(100dvh - var(--ng222-mobile-top) - var(--ng222-mobile-nav))!important;
  width:100%!important;max-width:100%!important;min-width:0!important;display:block!important;
  padding:6px!important;overflow:hidden!important;box-sizing:border-box!important;
 }
 html body[data-page="create"] #v14Create>.v14-creator{
  height:100%!important;width:100%!important;max-width:100%!important;
  overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;
  scrollbar-gutter:auto!important;scroll-padding-bottom:calc(130px + env(safe-area-inset-bottom,0px))!important;
  overscroll-behavior-y:contain!important;padding:10px 10px 170px!important;
 }
 html body[data-page="create"] #v14Create>.v14-library{height:100%!important;width:100%!important;overflow:hidden!important}
 html body[data-page="create"] #v14Create.mobile-results-open>.v14-creator{display:none!important}
 html body[data-page="create"] #v14Create.mobile-results-open>.v14-library{display:flex!important}
 html body[data-page="create"] #v14Create .v14-track-list{overflow-x:hidden!important;min-height:0}
 html body[data-page="create"] #v14Create .mode-tabs{max-width:100%!important;min-width:0!important;gap:5px!important}
 html body[data-page="create"] #v14Create .mode-tabs button{min-width:0!important;min-height:48px!important;padding:8px 3px!important;font-size:12px!important;line-height:1.25!important}
 html body[data-page="create"] #v14Create .source-launcher{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;overflow:visible!important}
 html body[data-page="create"] #v14Create .source-launcher button{min-width:0!important;min-height:72px!important}
 html body[data-page="create"] #v14Create .creator-hero{max-width:100%;overflow-wrap:anywhere}
 html body[data-page="create"] #v14Create .workspace-box{min-width:0!important;max-width:100%!important}
 /* Override the inline measured dock bottom: the bottom navigation previously covered it. */
 html body[data-page="create"] > .v75-create-footer.n190-native-dock,
 html body[data-page="create"] > #naghma-v208-fixed-action{
   position:fixed!important;left:10px!important;right:10px!important;top:auto!important;
   width:calc(100vw - 20px)!important;max-width:calc(100vw - 20px)!important;
   bottom:calc(var(--ng222-mobile-nav) + 8px)!important;
   padding:7px!important;margin:0!important;max-height:none!important;overflow:visible!important;
   border-radius:14px!important;z-index:960!important;
 }
 html body[data-page="create"] > :is(.v75-create-footer.n190-native-dock,#naghma-v208-fixed-action) #engineReadiness small{display:none!important}
 html body[data-page="create"] > :is(.v75-create-footer.n190-native-dock,#naghma-v208-fixed-action) #generateMusicBtn{
   min-height:52px!important;max-width:100%!important;padding:10px 16px!important;
   font-size:16px!important;line-height:1.25!important;white-space:normal!important;
   opacity:1!important;visibility:visible!important;
 }
 html body[data-page="create"] > :is(.v75-create-footer.n190-native-dock,#naghma-v208-fixed-action) #formMessage:not(:empty){
   max-height:min(24dvh,135px)!important;overflow:auto!important;
 }
 /* Keep the create button above the AUDIO player if the player is in use. */
 html body[data-page="create"].has-global-player > .v75-create-footer.n190-native-dock,
 html body[data-page="create"].has-global-player > #naghma-v208-fixed-action,
 html body[data-page="create"]:has(.global-player:not([hidden])) > .v75-create-footer.n190-native-dock,
 html body[data-page="create"]:has(.global-player:not([hidden])) > #naghma-v208-fixed-action{
   bottom:calc(var(--ng222-mobile-nav) + 72px)!important;
 }
}
@media(max-width:600px){
 body .main-content .song-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body .main-content .library-list{min-width:0;overflow-x:auto}
 html body[data-page="create"] #v14Create .source-launcher{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 html body[data-page="create"] #v14Create :is(.control-strip,.control-grid,.grid3,.source-tools,.url-row,.strength-grid,.voice-row){grid-template-columns:1fr!important}
 html body[data-page="create"] #v14Create .advanced-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 html body[data-page="create"] #v14Create .advanced-grid .span2{grid-column:1 / -1!important}
 html body[data-page="create"] #v14Create .source-launcher button{min-height:66px!important}
 html body[data-page="create"] #v14Create .mode-tabs{margin-inline:0!important;overflow:hidden!important}
 html body[data-page="create"] #v14Create .mode-tabs button{font-size:12px!important}
 html body[data-page="create"] #v14Create .creator-hero{gap:6px!important;padding:9px!important}
 html body[data-page="create"] #v14Create .creator-hero h1{font-size:17px!important}
}
@media(max-width:380px){
 body .main-content .song-grid{grid-template-columns:1fr!important}
 html body[data-page="create"] #v14Create>.v14-creator{padding-inline:7px!important}
 html body[data-page="create"] #v14Create .mode-tabs button{font-size:11px!important}
 html body[data-page="create"] > :is(.v75-create-footer.n190-native-dock,#naghma-v208-fixed-action) #generateMusicBtn{font-size:15px!important;min-height:48px!important}
}
/* Short landscape phones: keep inputs accessible while compacting fixed controls. */
@media(max-height:500px) and (pointer:coarse){
 html body[data-page="create"] > :is(.v75-create-footer.n190-native-dock,#naghma-v208-fixed-action){padding:4px!important}
 html body[data-page="create"] > :is(.v75-create-footer.n190-native-dock,#naghma-v208-fixed-action) #engineReadiness{display:none!important}
 html body[data-page="create"] > :is(.v75-create-footer.n190-native-dock,#naghma-v208-fixed-action) #generateMusicBtn{min-height:44px!important}
}
/* Admin pages that use the standard shared header: readable, horizontally contained navigation. */
@media(max-width:900px){
 .admin-shell{display:block!important;width:100%!important;min-width:0!important}
 .admin-sidebar{position:relative!important;width:100%!important;max-width:100%!important;padding:10px!important;display:block!important;overflow:hidden!important}
 .admin-sidebar .brand{display:flex;max-width:100%;padding:5px 4px 10px!important}
 .admin-sidebar nav{display:flex!important;gap:7px!important;overflow-x:auto!important;scrollbar-width:thin;overscroll-behavior-x:contain;padding:5px 0 10px!important;-webkit-overflow-scrolling:touch}
 .admin-sidebar nav a{flex:0 0 auto;white-space:nowrap;min-height:44px!important;padding:0 12px!important}
 .admin-main{min-width:0!important;max-width:100%!important;width:100%!important;padding:12px!important;overflow-x:auto!important}
 .admin-main :is(input,textarea,select){min-width:0;max-width:100%;font-size:16px!important}
 .admin-main :is(.stat-grid,.quick-grid){grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .admin-main table{min-width:min(600px,100%)}
 .admin-top{flex-wrap:wrap}
}
@media(max-width:420px){.admin-main :is(.stat-grid,.quick-grid){grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* Standalone login and registration pages, including the Google login link. */
.auth-body{max-width:100%;min-height:100dvh;box-sizing:border-box;padding:clamp(12px,3vw,28px)!important;overflow-x:hidden}
.auth-body .auth-card{box-sizing:border-box;width:min(100%,470px);max-width:100%;margin-inline:auto!important}
.auth-body :is(input,select,textarea,button){max-width:100%;box-sizing:border-box}
@media(max-width:600px){
 .auth-body .auth-card{padding:clamp(18px,5vw,26px)!important;border-radius:16px!important}
 .auth-body :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){font-size:16px!important;min-height:46px}
 .auth-body a[href*="google.php"]{max-width:calc(100vw - 40px);white-space:normal;overflow-wrap:anywhere}
}