/* Fluid application canvas. Load after component styles.
   Header interaction/layout remains owned by design.css. */
.accounts-app{--page-gutter:clamp(16px,2.5vw,64px)}
.accounts-app .wrap{width:calc(100% - var(--page-gutter) - var(--page-gutter));max-width:none;margin-inline:auto;min-width:0}
.accounts-app .site-header.wrap,.accounts-app .site-footer.wrap{box-sizing:border-box;width:100%;padding-inline:var(--page-gutter)}
.accounts-app #main,.accounts-app #workspace-content,.accounts-app #catalog-view{min-width:0}
.accounts-app .workspace-heading>p,.accounts-app .page-heading>p,.accounts-app .account-panel>p{max-width:75ch}
.accounts-app .account-form{max-width:56rem}
/* Keep all finder controls on the same baseline, including nested location fields. */
.accounts-app #account-filter-form>label{display:grid;gap:7px}
.accounts-app #account-filter-form input,.accounts-app #account-filter-form>button[type=reset]{height:48px;min-height:48px;margin-top:0}
/* Authentication is a focused reading/form task, not a screen-wide input. */
.accounts-app .account-grid:has(>.auth-panel){width:100%;max-width:74rem;margin-inline:auto}

@media(min-width:1100px){
  .accounts-app .discovery-layout{grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:clamp(24px,2vw,40px)}
  .accounts-app .account-grid:has(#ux-availability){grid-template-columns:minmax(0,40rem) minmax(0,1fr)}
  .accounts-app .chat-layout{grid-template-columns:minmax(260px,360px) minmax(0,1fr)}
}

@media(min-width:1440px){
  /* More visible results, rather than wider empty borders around two cards. */
  .accounts-app .trainer-grid{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));column-gap:32px}
  .accounts-app .offer-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
  .accounts-app #discovery-results{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));align-items:start;gap:20px}
  /* Keep the calendar compact; give the additional width to the agenda. */
  .accounts-app .discovery-month{align-self:start}
  .accounts-app .filters:has(.location-search){grid-template-columns:minmax(0,1.6fr) minmax(240px,.8fr) auto;align-items:start}
  .accounts-app .filters:has(.location-search)>label{max-width:none;grid-column:auto}
  .accounts-app #account-filter-form>button[type=reset]{width:auto;margin-top:28px;align-self:start}
  .accounts-app .account-grid:has(#ux-availability)>section:last-child .account-stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px;align-items:start}
}

@media(max-width:650px){
  /* Preserve the proven small-screen gutter and the single-line header. */
  .accounts-app{--page-gutter:16px}
}