/* MailAtlas Mobile v3 — shared responsive hardening.
   Applied after each page's existing stylesheet. No route, account or data changes. */
@media (max-width:1024px){
  html{scroll-padding-top:72px}
  body{min-width:0}
  body :is(main,article,section,.container,.page,.main-content,.outreach-main,
           .workspace-content,.sop-workspace-main,.portal-main,.portal-content,
           .profile-layout,.form-card,.profile-shell,.card,.portal-card,.workspace-card){min-width:0}
  body :is(img,video,canvas,iframe){max-width:100%}
  body :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select){max-width:100%}
  body :is(pre,code){overflow-wrap:anywhere}
  body :is(.table-wrap,.table-container,.table-scroll,.database-table-wrap,
           .data-table-wrap,.mapping-table-wrap,.data-area,.list-table-wrap){
    max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  body :is(.table-wrap,.table-container,.table-scroll,.database-table-wrap,
           .data-table-wrap,.mapping-table-wrap,.data-area,.list-table-wrap):focus-visible{
    outline:2px solid #648fe5;outline-offset:2px}
}
/* Default staff dashboards, analytics, task board and data tables */
@media (max-width:760px){
  body.ma-ui-legacy .app{min-width:0}
  body.ma-ui-legacy .main-content{min-width:0;max-width:100%;padding-left:12px;padding-right:12px}
  body.ma-ui-legacy .container{width:100%;min-width:0;max-width:100%;padding:16px 12px}
  body.ma-ui-legacy :is(.dashboard-grid,.dashboard-grid-clean,.task-columns,.task-form-grid,
     .inbox-details-summary,.inbox-placement-card-grid){grid-template-columns:minmax(0,1fr)}
  body.ma-ui-legacy :is(.task-card,.task-column,.dashboard-card,.settings-card,
     .guide-box,.chart-card,.dashboard-panel){min-width:0;max-width:100%;overflow-wrap:anywhere}
  body.ma-ui-legacy :is(.dashboard-header,.page-header,.header-actions,.task-actions){
    flex-wrap:wrap;gap:12px;min-width:0}
  body.ma-ui-legacy :is(.dashboard-header h1,main h1){font-size:clamp(23px,6vw,29px);line-height:1.2}
  body.ma-ui-legacy .task-actions button{min-height:44px}
  body.ma-ui-legacy .task-form-grid>:is(input,select){width:100%;min-width:0}
  body.ma-ui-legacy :is(input:not([type="checkbox"]):not([type="radio"]),
     select,textarea){font-size:16px}
  body.ma-ui-legacy .sidebar a{min-height:44px}
  body.ma-ui-legacy .dashboard-header .mas-switcher-trigger{margin-left:0}
  body.ma-ui-legacy .login-card{width:min(100%,460px);max-width:calc(100vw - 28px);padding:24px 19px}
  body.ma-ui-legacy table{max-width:100%}
}
/* Outreach: readable mobile controls, one-column panels, horizontal tables. */
@media (max-width:760px){
  body.ma-ui-outreach .outreach-app{min-width:0}
  body.ma-ui-outreach .outreach-main{min-width:0;max-width:100vw}
  body.ma-ui-outreach .page{min-width:0;width:100%;padding:15px 12px 76px}
  body.ma-ui-outreach .page-heading{flex-wrap:wrap;align-items:stretch}
  body.ma-ui-outreach .page-heading h2{font-size:clamp(22px,6vw,28px);line-height:1.24}
  body.ma-ui-outreach :is(.grid,.metric-grid,.two-column,.form-grid,
     .template-helper-fields,.lead-import-grid,.sender-choice-grid){min-width:0}
  body.ma-ui-outreach :is(.metric-grid,.two-column,.form-grid){grid-template-columns:minmax(0,1fr)}
  body.ma-ui-outreach :is(.card,.metric-card,.instant-card,.thread-panel,
     .inbox-list,.campaign-panel){min-width:0;max-width:100%}
  body.ma-ui-outreach :is(.actions,.toolbar,.card-header,.modal-footer){
    flex-wrap:wrap;gap:10px;min-width:0}
  body.ma-ui-outreach .actions>.btn{min-height:44px}
  body.ma-ui-outreach :is(.btn,.form-field button,.modal-footer button){min-height:42px}
  body.ma-ui-outreach :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    font-size:16px;min-width:0}
  body.ma-ui-outreach .topbar{max-width:100vw;overflow:visible}
  body.ma-ui-outreach .topbar h1{min-width:0;overflow-wrap:anywhere;line-height:1.15}
  body.ma-ui-outreach .table-wrap{max-width:100%;overflow-x:auto;scrollbar-width:thin}
  body.ma-ui-outreach .modal-backdrop{padding:10px}
  body.ma-ui-outreach .modal{max-height:calc(100dvh - 20px);max-width:100%;overflow:auto}
  body.ma-ui-outreach .modal-header,body.ma-ui-outreach .modal-footer{padding:14px}
  body.ma-ui-outreach .mapping-table-wrap{max-width:100%;overflow-x:auto}
  body.ma-ui-outreach .mapping-variable-field{min-width:0}
}
/* Internal VA Genius SOP Services: prevent overflow on cards, actions and dialogs. */
@media(max-width:760px){
  body.ma-ui-sop.sop-page .main-content.sop-main-content{padding:0}
  body.ma-ui-sop .sop-app-shell{width:100%;max-width:100%;min-height:100dvh;grid-template-columns:minmax(0,1fr)}
  body.ma-ui-sop .sop-workspace-main{min-width:0}
  body.ma-ui-sop .workspace-content{min-width:0;max-width:100%;padding:18px 12px 72px}
  body.ma-ui-sop .workspace-topbar{max-width:100%;gap:8px}
  body.ma-ui-sop .topbar-actions{display:flex;gap:6px;min-width:0;align-items:center;flex-wrap:wrap}
  body.ma-ui-sop :is(.database-toolbar,.database-actions,.heading-actions,
    .page-heading,.card-header,.ops-command-header,.ops-command-buttons){
    min-width:0;max-width:100%;flex-wrap:wrap}
  body.ma-ui-sop :is(.metric-grid,.home-grid,.client-overview-grid,.library-grid){min-width:0}
  body.ma-ui-sop .ops-command-columns{grid-template-columns:minmax(0,1fr)}
  body.ma-ui-sop .ops-command-center{width:100%;max-width:100%;padding:14px}
  body.ma-ui-sop .ops-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ma-ui-sop .ops-stat{min-height:110px}
  body.ma-ui-sop :is(.primary-button,.ghost-button,.ops-action,.ops-stat){
    min-height:44px}
  body.ma-ui-sop :is(.workspace-card,.data-area,.drawer-page,.team-access-list,.va-team-person){
    min-width:0;max-width:100%;overflow-wrap:anywhere}
  body.ma-ui-sop :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    font-size:16px;min-width:0}
  body.ma-ui-sop :is(.form-grid.two,.library-grid,.client-overview-grid){grid-template-columns:minmax(0,1fr)}
  body.ma-ui-sop .va-team-person{flex-wrap:wrap}
  body.ma-ui-sop .va-team-person-copy{min-width:0;flex-basis:calc(100% - 70px)}
  body.ma-ui-sop .va-team-task-details{max-width:100%}
  body.ma-ui-sop .va-team-task-details li{overflow-wrap:anywhere}
}
/* Client portal: safe mobile navigation, readable approvals, forms and dialogs. */
@media(max-width:760px){
  body.ma-ui-portal .portal-app{display:block;grid-template-columns:minmax(0,1fr);min-width:0}
  body.ma-ui-portal .portal-main{width:100%;min-width:0}
  body.ma-ui-portal .portal-content{max-width:100%;padding:20px 13px 75px}
  body.ma-ui-portal .portal-topbar{max-width:100%;min-height:59px;gap:8px}
  body.ma-ui-portal :is(.page-header,.portal-card-header,.request-actions,.modal-actions){
    min-width:0;flex-wrap:wrap;gap:9px}
  body.ma-ui-portal .page-header{align-items:flex-start}
  body.ma-ui-portal .page-header h1{font-size:clamp(23px,6vw,30px)}
  body.ma-ui-portal :is(.portal-grid,.resource-grid){grid-template-columns:minmax(0,1fr)}
  body.ma-ui-portal .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.ma-ui-portal :is(.portal-card,.metric-card,.request-list,.approval-card){min-width:0;max-width:100%}
  body.ma-ui-portal :is(.primary-btn,.secondary-btn,.mini-action,.modal-actions button){min-height:44px;font-size:12px}
  body.ma-ui-portal :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    font-size:16px;min-width:0;max-width:100%}
  body.ma-ui-portal .modal-overlay{padding:10px}
  body.ma-ui-portal :is(.request-modal,.modal-card){max-width:100%;width:100%;max-height:calc(100dvh - 20px);overflow:auto}
  body.ma-ui-portal .portal-stage-banner{flex-wrap:wrap}
  body.ma-ui-portal .portal-stage-actions{width:100%;flex-wrap:wrap}
  body.ma-ui-portal .portal-rail.mobile-nav-open .portal-nav button{min-height:44px}
}
/* Nino AI: composer stays operable at narrow phone widths and with file cards. */
@media(max-width:760px){
  body.ma-ui-nino .nino-app{min-width:0;max-width:100%;min-height:100dvh}
  body.ma-ui-nino .nino-app .main{min-width:0;width:100%;max-width:100vw}
  body.ma-ui-nino .nino-app .chat{min-width:0;width:100%;padding:12px 11px;overflow-wrap:anywhere}
  body.ma-ui-nino .nino-app :is(.message,.message-content,.attachment-tray,.generated-file-card){
    min-width:0;max-width:100%;overflow-wrap:anywhere}
  body.ma-ui-nino .nino-app .message-content :is(pre,code){max-width:100%;overflow-x:auto}
  body.ma-ui-nino .nino-app .composer-shell{width:100%;max-width:100%;padding:8px 9px max(12px,env(safe-area-inset-bottom))}
  body.ma-ui-nino .nino-app .composer{width:100%;max-width:100%;min-width:0;gap:5px;padding:6px}
  body.ma-ui-nino .nino-app #message{min-width:0;font-size:16px;line-height:1.5;padding:10px 4px}
  body.ma-ui-nino .nino-app :is(.icon-btn,.send-btn){flex-shrink:0;min-height:42px}
  body.ma-ui-nino .nino-app .icon-btn{width:40px;height:42px}
  body.ma-ui-nino .nino-app .send-btn{min-width:50px;padding:0 10px}
  body.ma-ui-nino .nino-app .topbar{max-width:100%;gap:8px}
}
/* Standalone public authentication & intake; keep forms usable on a phone. */
@media(max-width:760px){
  body.login-body{padding:16px;min-width:0}
  body.login-body .login-card{width:min(100%,440px);max-width:calc(100vw - 32px);padding:24px 18px}
  body.login-body :is(input,button){width:100%;min-height:46px;font-size:16px}
  :is(.public-shell,.discovery-landing,.onboarding-shell,.request-shell,.sample-shell){
    min-width:0;max-width:100%}
  :is(.public-shell,.discovery-landing) :is(.public-card,.form-card,.review-box){
    min-width:0;max-width:100%;overflow-wrap:anywhere}
  :is(.public-shell,.discovery-landing) .form-grid{grid-template-columns:minmax(0,1fr)}
  :is(.public-shell,.discovery-landing) :is(input:not([type="checkbox"]):not([type="radio"]),
     select,textarea){max-width:100%;font-size:16px}
  :is(.public-shell,.discovery-landing) :is(button,.actions a){min-height:44px}
  :is(.public-shell,.discovery-landing) .actions{flex-wrap:wrap;gap:10px}
  :is(.public-shell,.discovery-landing) :is(.choice-grid,.upload-grid){grid-template-columns:minmax(0,1fr)}
  .invite-shell,.invite-card{max-width:100%;min-width:0}
  .invite-card :is(input:not([type="checkbox"]),select,textarea){max-width:100%;font-size:16px;min-height:44px}
  .invite-card button{min-height:44px}
}
/* Team profile form, including Section 04: 5–10 task/skill explanation boxes. */
@media(max-width:860px){
  .profile-shell{width:100%;max-width:100%;padding:22px 14px 72px}
  .profile-layout{grid-template-columns:minmax(0,1fr);gap:16px}
  .guide-card{position:static}
  .profile-hero{padding:26px 20px}
  .form-card{min-width:0;padding:23px 20px}
  .form-grid,.upload-grid{grid-template-columns:minmax(0,1fr)}
  .form-grid label.wide{grid-column:auto}
  .team-task-list{grid-template-columns:minmax(0,1fr)}
  .team-task-card{min-width:0;max-width:100%}
}
@media(max-width:570px){
  .profile-topbar{width:100%;height:auto;min-height:67px;padding:11px 14px;gap:9px;flex-wrap:wrap}
  .profile-topbar .profile-brand{gap:8px;min-width:0}
  .profile-brand strong{font-size:15px}
  .profile-brand small{font-size:10px}
  .profile-back{min-height:42px;display:inline-flex;align-items:center;padding:9px 11px;font-size:11px}
  .profile-shell{padding:17px 11px 70px}
  .profile-hero{padding:20px 16px;border-radius:14px}
  .profile-hero h1{font-size:clamp(23px,7vw,29px);line-height:1.18}
  .profile-hero p{font-size:13px;line-height:1.55}
  .profile-layout{margin-top:14px}
  .guide-card,.form-card{padding:16px 14px;border-radius:13px}
  .guide-card{display:block}
  .form-card-top h2{font-size:21px}
  .form-card-top p{font-size:12px}
  .form-section-title{margin:25px 0 14px;gap:8px;line-height:1.3;flex-wrap:wrap}
  .form-section-title span:first-child{flex:0 0 28px}
  .form-grid{gap:13px}
  .form-grid label{min-width:0;overflow-wrap:anywhere}
  .form-card :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    width:100%;max-width:100%;min-width:0;font-size:16px;line-height:1.5;min-height:46px}
  .form-card :is(input,textarea):focus-visible{outline:3px solid #6387d5;outline-offset:2px}
  .upload-card{min-width:0;padding:14px}
  .upload-card input[type="file"]{width:100%;font-size:13px;min-width:0}
  .team-task-intro{font-size:13px}
  .team-task-head{align-items:flex-start;flex-direction:column;gap:8px}
  .team-task-card{padding:14px 12px;border-radius:11px}
  .team-task-card-heading{gap:8px;flex-wrap:wrap}
  .team-task-card label{font-size:13px}
  .team-task-card textarea{min-height:104px}
  .team-task-remove,.team-task-add{min-height:44px;padding:9px 14px}
  .team-task-actions{align-items:stretch;flex-direction:column}
  .team-task-add{width:100%}
  .actions{flex-direction:column;align-items:stretch;gap:9px}
  .actions button{width:100%;min-height:48px;font-size:14px}
  #profileStatus{font-size:13px;line-height:1.5}
}
@media(max-width:390px){
  body.ma-ui-sop .ops-stat-grid{grid-template-columns:minmax(0,1fr)}
  body.ma-ui-portal .metric-grid{grid-template-columns:minmax(0,1fr)}
  body.ma-ui-outreach .page{padding-inline:10px}
  body.ma-ui-legacy .container{padding:14px 10px}
  body.ma-ui-nino .nino-app .composer{gap:3px}
  body.ma-ui-nino .nino-app .icon-btn{width:35px}
  body.ma-ui-nino .nino-app .send-btn{min-width:44px;padding-inline:7px}
}
@media (prefers-reduced-motion:reduce){
  .team-task-card,.profile-hero,.portal-card,.outreach-app .card{scroll-behavior:auto;transition:none}
}