/* Full tablet navigation remains reachable on the smaller inner foldable screens. */
html,body{min-width:0}
#pgApp{height:100dvh}
.app-tabs{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.atab{flex-shrink:0;min-height:48px}
.app-r{flex-shrink:0}
#adaptiveGate{display:none}
@media(min-width:600px) and (max-width:1100px){
 .app-tabs{padding:0 12px}.atab{padding:0 12px}.app-r{display:none}
 nav{padding:0 16px}.nav-name{max-width:90px;overflow:hidden;text-overflow:ellipsis}
 #tbody-over{padding:20px!important}#tbody-over>div[style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr!important}
 .krow{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tbody{min-width:0}.tbody.scroll{overflow:auto}
}
html[data-layout=compact] #pgLanding,
html[data-layout=compact] .app-tabs,
html[data-layout=compact] #pgApp>.tbody:not(#tbody-pit),
html[data-layout=compact] #navLandLinks,
html[data-layout=compact] #navG,
html[data-layout=compact] .nav-user>button[onclick="showApp()"],
html[data-layout=compact] #aiFloatBtn,
html[data-layout=compact] #ai-panel{display:none!important}
html[data-layout=compact] #adaptiveGate{display:block;max-width:480px;padding:100px 24px 24px;margin:auto}
html[data-layout=compact] #adaptiveGate[hidden]{display:none}
html[data-layout=compact] #pgApp{height:auto;min-height:100dvh;padding-top:58px}
html[data-layout=compact] #pgApp #tbody-pit{overflow:visible}
html[data-layout=compact] .pit-mobile-switch{top:58px}
html[data-layout=compact] nav{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
html[data-layout=compact] .nav-user{gap:6px}
html[data-layout=compact] .nav-name{display:none}
#adaptiveGate h1{font-size:30px;margin-bottom:16px}
#adaptiveGate p{color:var(--mu);margin-bottom:20px;line-height:1.6}
#adaptiveGate button{min-height:48px}
#adaptiveGate a{display:inline-block;padding:16px 0;color:var(--C)}
/* Keep the calculator cards on each side of an actual hardware hinge when exposed. */
@media(horizontal-viewport-segments:2) and (min-width:600px){
 html[data-layout=expanded] .pit-page{max-width:none;padding-left:12px;padding-right:12px}
 html[data-layout=expanded] .pit-layout{grid-template-columns:minmax(0,calc(env(viewport-segment-width 0 0) - 24px)) minmax(0,calc(env(viewport-segment-width 1 0) - 24px));column-gap:calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0) + 24px)}
 html[data-layout=expanded] .pit-wheel-grid{grid-template-columns:1fr}
}

@media(min-width:600px) and (max-width:900px){
 #tbody-live,#tbody-strat{flex-direction:column;overflow:auto}
 #tbody-live .dash-left,#tbody-live .dash-right,#tbody-strat .sc-form-col,#tbody-strat .sc-results-col{width:100%;min-width:0;flex:none;overflow:visible;padding:18px}
 #tbody-live .dash-right{order:-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border-left:0;border-bottom:1px solid var(--bdr)}
 #tbody-live .rp-sec{min-width:0}#tbody-strat .sc-form-col{border-right:0;border-bottom:1px solid var(--bdr)}
 #tbody-cfg{padding:20px!important}
}
@media(pointer:coarse){
 .btn-ctrl,.flag-btn,.live-wx-btn,.wx-btn,.cat-chip{min-height:44px}
 .sc-form-col input,.sc-form-col select{font-size:16px}
}