/* perf-a11y-portals-v2 */
img:not([loading]){content-visibility:auto}
body:not(:has(.admin)) img{max-width:100%;height:auto}
body:not(:has(.admin)) .btn:focus-visible,
body:not(:has(.admin)) a:focus-visible,
.admin button:focus-visible,
.admin a:focus-visible,
.admin input:focus-visible,
.admin select:focus-visible,
.admin textarea:focus-visible{outline:3px solid #111;outline-offset:2px}
.skip-link{position:absolute;left:-999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;z-index:10000;background:#111;color:#fff;padding:.65rem 1rem;border-radius:8px}
.portal-shell,.client-portal,.careers-portal,.hub-page{--portal-radius:14px}
.portal-shell .card,.hub-page .card{border-radius:var(--portal-radius);box-shadow:0 10px 28px rgba(0,0,0,.06)}
.portal-shell .btn-primary,.hub-page .btn-primary{min-height:44px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Portal responsive — phase 3 (kept in patch template so rebuilds do not wipe) */
@media (max-width:1024px){
  .hub-page .hub-roles,
  .hub-gateway .hub-roles,
  .portal-shell .portal-grid,
  .client-shell .dash-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1rem}
}
@media (max-width:768px){
  .hub-page,.client-shell,.portal-shell,.careers-portal,body.employee-portal{overflow-x:clip}
  .hub-page .hub-roles,
  .hub-gateway .hub-roles,
  .portal-shell .portal-grid,
  .client-shell .dash-grid,
  .client-shell .layout-2{grid-template-columns:1fr!important}
  .hub-page .card,.client-shell .card,.portal-shell .card{width:100%;box-sizing:border-box}
  .hub-page form,.client-shell form,.portal-shell form{width:100%;max-width:100%}
  .hub-page table,.client-shell table,.portal-shell table,body.employee-portal table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hub-page .mfa-panel,.hub-page .auth-panel{width:100%;max-width:100%;box-sizing:border-box}
  .portal-shell .btn-primary,.hub-page .btn-primary,.client-shell .btn{width:100%;justify-content:center}
  .hub-page input,.hub-page select,.hub-page textarea,
  .client-shell input,.client-shell select,.client-shell textarea,
  .portal-shell input,.portal-shell select,.portal-shell textarea{font-size:16px!important;max-width:100%;box-sizing:border-box}
}
@media (max-width:480px){
  .hub-page h1,.client-shell h1,.portal-shell h1{font-size:clamp(1.35rem,6vw,1.75rem)!important}
  .hub-page .btn,.client-shell .btn,.portal-shell .btn,body.employee-portal .btn{width:100%;justify-content:center}
  .hub-page .mfa-tabs button,.hub-page .sys-tabs button{min-height:44px;flex:0 0 auto}
  .hub-gateway .hub-role-card,.hub-page .hub-role-card{width:100%;transform:none!important}
  .hub-gateway .hub-role-card:hover{transform:none!important}
  .unified-login,.unified-login-form,.hub-page .admin-login-form{width:100%;max-width:100%;box-sizing:border-box}
  body.employee-portal .workspace-header{flex-direction:column;align-items:stretch}
  body.employee-portal .actions .btn{width:100%;justify-content:center}
}