/* Shared portal layout: preserve content, horizontal data tables and role controls. */
#main,#view,.card,.panel,.set-section,.row>*,.kgrid>*,.topbar>div{min-width:0}
#view{width:100%}
#view h1,#view h2,#view h3,#view p,#view label,#view summary,#psub{overflow-wrap:break-word}
#view input,#view select,#view textarea{max-width:100%}
.tbl-scroll{max-width:100%;overscroll-behavior-inline:contain}
.tmodal,.modal,.ob-panel{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
#login{min-height:100dvh}
@media(max-width:1000px),(pointer:coarse){
 input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
 .btn,.auth-action,.iconbtn{min-height:44px}
 .iconbtn{min-width:44px}
 #view summary{min-height:44px;align-content:center}
 #view label:has(>input[type=checkbox]):not(.bbtgl){min-height:44px;padding-block:10px}
}
@media(max-width:760px){
 #main .topbar{gap:12px;padding-top:max(16px,env(safe-area-inset-top))!important}
 #ptitle{font-size:clamp(23px,6.5vw,30px);line-height:1.18}
 #psub{line-height:1.55}
 #themeBtn{flex:none}
 #view .card,#view .panel,#view .set-section{padding:18px}
 #view .row{gap:14px}
 #view .row>div{min-width:0;flex-basis:100%}
 #view .kgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
 #view .kpi{padding:18px;min-width:0}
 #view .kpi .v{overflow-wrap:anywhere}
 /* Older renderers use inline two/three-column grids with no breakpoint. */
 #view [style*="grid-template-columns:1fr 1fr"],
 #view [style*="grid-template-columns:2fr 1fr 1fr"],
 #view [style*="grid-template-columns:repeat(auto-fit,minmax(250px"],
 #view [style*="grid-template-columns:repeat(auto-fit,minmax(210px"]{grid-template-columns:minmax(0,1fr)!important}
 #view .btn,.tmodal .btn,.modal .btn{white-space:normal;line-height:1.35;text-align:center;max-width:100%}
 #view .tabs,#view .seg{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
 #view .tabs>*,#view .seg>*{flex-shrink:0;min-height:44px}
 #view .tbl-scroll:has(table)::before,#view [style*="overflow:auto"]:has(>table)::before{content:"Swipe left or right for more columns";display:block;position:sticky;left:0;padding:8px 0 12px;color:var(--mut);font-size:12px;line-height:1.4}
 #side .nav{flex-basis:82px!important;min-width:82px!important}
 #side .nav.on{color:var(--accent-d)!important;background:rgba(99,139,178,.12)!important}
 #side .nav .navcar{display:none!important}
 #side .nav>span:not(.badtag):not(.betatag):not(.navcar){white-space:normal;line-height:1.2;overflow:visible}
 #side .mobile-account-btn{min-width:64px;flex-shrink:0}
 .mobile-navsub{max-height:min(56dvh,380px)}
 #login{padding:16px;align-items:safe center}
 #login .lcard{width:100%;max-width:430px;padding:24px}
 #login .logo{flex-wrap:wrap;gap:10px}
 #login .auth-action{padding-block:10px}
 .tmodal-bg,.modal-bg{padding:12px}
 .tmodal,.modal{width:100%;max-height:calc(100dvh - 24px);margin:0}
 .account-sheet-bg{padding:0}.account-sheet{max-width:100%;max-height:85dvh}
 .mfa-setup{grid-template-columns:minmax(0,1fr)}
 #view code,#view pre{overflow-wrap:anywhere;white-space:pre-wrap}
}
@media(max-height:520px){#login{align-items:flex-start}.tmodal,.modal{max-height:calc(100dvh - 16px)}}