/* V21: mobile usability and WCAG-oriented interaction safeguards. */
.skip-link{position:fixed;z-index:20000;top:max(8px,env(safe-area-inset-top));left:12px;transform:translateY(-180%);padding:12px 16px;border:3px solid #16c3c5;border-radius:10px;background:#fff;color:#073b5c;font-weight:900;box-shadow:0 8px 24px #001b2a4d}
.skip-link:focus{transform:translateY(0)}
:where(a[href],button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid #0b82a1!important;outline-offset:3px!important}
:where(button,input,select,textarea){touch-action:manipulation}
.clari-close,.password-toggle{min-width:44px;min-height:44px}
.clari-close{display:grid;place-items:center}
.security-heading>.text-button{box-sizing:border-box;flex:0 0 auto;width:auto!important;min-width:max-content;max-width:100%;padding-inline:12px;white-space:normal;overflow-wrap:normal}
.report-section,.quote-wrap,.plan-table-wrap,.recipe-detail{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.quote-wrap table,.plan-module-table{min-width:680px}
.dashboard :where(.accounts-layout,.budget-layout,.budget-columns,.goals-layout,.calendar-layout,.analysis-grid,.report-sections,.shopping-grid,.pantry-grid,.pantry-layout)>*{min-width:0}
.pantry-card,.pantry-layout,.pantry-layout>section,#pantry-list{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
.pantry-layout form,.pantry-item{box-sizing:border-box;width:100%;max-width:100%;min-width:0}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media(max-width:760px),(pointer:coarse){
  :where(button,.primary,.secondary,.text-button,.danger-action,input:not([type="radio"]):not([type="checkbox"]),select,textarea){min-height:44px}
  :where(.text-button,.clari-close,.password-toggle){min-width:44px}
  .site-header{padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}
  .layout,.dashboard{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
  .clari-help{max-width:calc(100vw - 24px)}
  .clari-dialog{max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)))}
  .update-notice{bottom:max(12px,env(safe-area-inset-bottom));max-height:calc(100dvh - 24px);overflow:auto}
  .security-heading{gap:10px}
  .security-heading>div{min-width:0}
  .security-heading>.text-button{line-height:1.25}
  .pantry-card{overflow-x:hidden;padding-inline:12px}
  .pantry-layout{width:100%;grid-template-columns:minmax(0,1fr)}
  .pantry-layout form{grid-template-columns:minmax(0,1fr);padding:14px}
  .pantry-layout label,.pantry-layout input,.pantry-layout select,.pantry-money{min-width:0;max-width:100%}
  .pantry-item{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
  .pantry-item>div:last-child{flex-wrap:wrap;justify-content:flex-start}
  .plan-table-wrap{width:100%;max-width:100%;overflow-x:visible}
  .plan-module-table{min-width:0;width:100%;margin-inline:auto}
  .plan-module-table :is(th,td){box-sizing:border-box;width:100%;text-align:center}
  .plan-module-table td::before{text-align:center}
  .plan-price-head,.payment-preview-grid{width:100%;max-width:100%;margin-inline:auto;text-align:center}
}

@media(max-width:380px){
  .dashboard-header .header-actions{grid-template-columns:1fr}
  .summary-grid{grid-template-columns:1fr!important}
  .auth-card,.dashboard{padding-inline:14px}
  .tabs{gap:4px}
  .tab{padding-inline:8px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media(forced-colors:active){
  :where(button,a,input,select,textarea,.auth-card,.dashboard,.account-usage-alert,.budget-alert){forced-color-adjust:auto}
  .budget-progress span,.goal-progress span,.trend-bar{border:1px solid CanvasText}
}