/* Shared outer card spacing. Internal form, toolbar and instrument spacing stays independent. */
:root{--card-gap:20px}
@media(max-width:650px){:root{--card-gap:16px}}
body .page :is(.grid2,.grid3,.home-grid,.home-col,.mod-grid,.tools-home-grid,.tools-weather-grid,.notes-grid,.glossary-grid,.acs-catalog,.acs-area-grid,.tier-grid,.renew-grid,.admin-report-list,.admin-account-courses,.admin-account-metrics,.account-profile-grid,.account-theme-grid,.admin-lifecycle-actions,.concept-grid,.auth-layout,.learn-layout,.read-layout,.management-layout,.eng-layout,.vs-layout,.fx-layout,.ap-layout,.fl-grid,.rp-layout,.lg-workspace){gap:var(--card-gap)}
/* Settings/admin sections are a real stack, rather than touching block-level cards. */
body .page .management-content{display:flex;flex-direction:column;gap:var(--card-gap)}
body .page .management-content>*{margin-block:0!important}
/* Layout gaps own spacing; avoid adding card margins on top of a grid gap. */
body .page :is(.home-col,.grid2,.grid3,.mod-grid,.tools-home-grid,.notes-grid,.glossary-grid,.account-profile-grid,.admin-account-courses,.admin-account-metrics,.tier-grid,.renew-grid)>.card{margin-block:0!important}
/* Ordinary stacked cards outside a dedicated layout still use the same rhythm. */
body .page>.card+.card{margin-top:var(--card-gap)!important}
body .page>.page-head{margin-bottom:var(--card-gap)}
body .page .management-hint{margin-top:var(--card-gap)}
body .page .home-grid{margin-top:var(--card-gap)}

/* Also cover existing card grids in individual trainers without resizing their controls. */
body .page :where(div,section,main,aside):has(>.card){gap:var(--card-gap)}

/* Card padding supplies the top inset; opening headings never add another inset. */
:root{--card-heading-gap:12px}
body .page :is(.card,.account-card,.info-card)>:is(h1,h2,h3,h4):first-child{
  margin-block-start:0;
  margin-block-end:var(--card-heading-gap);
}
/* A header row owns its spacing, including titles paired with badges/actions. */
body .page :is(.card,.account-card,.info-card)>:is(header,.card-head,.card-header,.brief-head,.breakdown-head):first-child{
  margin-block-start:0;
}
body .page :is(.card,.account-card,.info-card)>:is(header,.card-head,.card-header,.brief-head,.breakdown-head):first-child :is(h1,h2,h3,h4){
  margin-block-start:0;
  margin-block-end:0;
}