/* Shared InterfaceNetworld responsive foundations: public homepage and App Launcher. */
:root{--inw-content-width:1220px;--inw-touch-target:44px;--inw-focus:#8cff3d}
html{scroll-padding-top:88px}
body{overflow-wrap:break-word}
:where(img,video,canvas,svg){max-width:100%}
:where(button,input,select,textarea){font:inherit}
:where(button,a,input,select,textarea):focus-visible{outline:3px solid var(--inw-focus);outline-offset:3px}
:where(button,[role=button]){touch-action:manipulation}
:where(input,textarea,select){min-width:0}
:where(.shell,.container,.page-container){max-width:var(--inw-content-width)}
:where(.site-head,.topbar,.nh-brand-bar){isolation:isolate}
:where(.main-nav,.page-nav,.nh-brand-bar nav){min-width:0}
:where(.app-tile,.card,.feature-panel){min-width:0}
:where(.app-list,.launcher-console){min-width:0;max-width:100%}
:where(.app-list,.launcher-console) img{max-width:100%;height:auto}
body[data-page=apps] main.shell{width:min(var(--inw-content-width),calc(100% - 32px));padding-inline:0!important}
body[data-page=apps] .nh-brand-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
body[data-page=apps] .nh-brand-bar nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
body[data-page=apps] .nh-brand-bar nav a{display:inline-flex;align-items:center;min-height:var(--inw-touch-target)}
body[data-page=apps] .launcher-filters button{min-height:var(--inw-touch-target)}
body[data-page=apps] #appSearch{width:100%;max-width:540px;min-height:var(--inw-touch-target)}
@media(max-width:680px){
  html{scroll-padding-top:68px}
  body[data-page=apps] main.shell{width:calc(100% - 24px);padding-top:32px!important}
  body[data-page=apps] .nh-brand-bar{align-items:flex-start;gap:12px}
  body[data-page=apps] .nh-brand-bar nav{width:100%;gap:6px 12px}
  body[data-page=apps] .nh-brand-bar nav a{font-size:.87rem}
  body[data-page=apps] .launcher-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-page=apps] .launcher-filters button{white-space:normal;overflow-wrap:anywhere;padding-inline:8px}
  body[data-page=apps] .page-title{font-size:clamp(1.85rem,8vw,3rem);overflow-wrap:anywhere}
  .main-nav a,.page-nav a{min-height:var(--inw-touch-target)}
}
@media(max-width:360px){body[data-page=apps] .launcher-filters{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* Phase 1: account/profile/settings/security/cloud responsive shell. */
:where(.ux-layout,.ux-main,.ux-grid,.account-shell,.account-hero,.native-shell,.native-main,.console-main){min-width:0;max-width:100%}
:where(.ux-card,.account-card,.native-main,.native-workspace,.console-card){overflow-wrap:anywhere}
:where(.ux-header,.account-topbar){gap:12px}
:where(.ux-nav,.ux-account-links){display:flex;flex-wrap:wrap;align-items:center;gap:8px}
:where(.ux-nav a,.ux-account-links a){display:inline-flex;align-items:center;min-height:var(--inw-touch-target)}
:where(.ux-main input,.ux-main select,.ux-main textarea,.account-shell input,.account-shell select){max-width:100%}
:where(.ux-card,.account-card,.account-widgets article) :is(button,input,select,textarea){max-width:100%}
:where(.ux-main,.account-shell,.native-shell,.shell) :is(table,pre){max-width:100%}
@media(max-width:760px){
  .ux-header{flex-wrap:wrap;align-items:center}
  .ux-nav{width:100%;justify-content:flex-start}
  .ux-layout{display:block}
  .ux-side{position:static!important;width:auto!important;max-width:100%!important;display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding-block:10px;-webkit-overflow-scrolling:touch}
  .ux-side>a{flex:0 0 auto;min-height:var(--inw-touch-target);display:inline-flex;align-items:center}
  .ux-side>strong{flex:0 0 auto;align-self:center}
  .ux-main{width:100%!important;min-width:0;padding-inline:clamp(12px,4vw,24px)!important}
  .ux-grid{grid-template-columns:minmax(0,1fr)!important}
  .account-topbar{flex-wrap:wrap}
  .ux-account-links{order:3;width:100%}
  .account-shell{width:calc(100% - 24px);margin-inline:auto}
  .account-hero{grid-template-columns:minmax(0,1fr)!important}
  .native-shell{max-width:100vw}
  .native-side{max-width:100%}
  body:has(.native-shell) .native-main{min-width:0}
}
@media(max-width:420px){
  .ux-main h1,.account-shell h1{font-size:clamp(1.65rem,8vw,2.4rem)}
  .ux-card,.account-card{padding-inline:14px}
}