/* One fixed distance between separate framed surfaces, in every theme and layout.
   Containers own the gap; cards never add a second margin inside those containers. */
:root { --surface-gap: 16px; --section-gap: var(--surface-gap); --shell-gap: var(--surface-gap); }

/* Also cover dynamic lists whose cards are created after page loading. */
:is(.portal-shell,.auth-layout,dialog) :is(div,section,article,form,nav,ul,ol):has(>
    :is(article,details,.panel,.notice,.nav-card,.achievement-card,.resource-card,
        .student-dossier-card,.account-directory-card,.queue-item,.criterion-row)) {
  gap: var(--surface-gap);
}

:is(.portal-shell,.auth-layout,dialog) :is(.portal-page,.admin-section,.section-stack,.disclosure-content,.club-term-panel,
    .workspace-directory,.workspace-group,#admin-authority,.authority-panel,
    .form-stack,.form-grid,.appearance-pane,.appearance-control-grid,
    .appearance-palette-options,.appearance-presets,.appearance-color-grid,
    .portfolio-layout,.portfolio-profile-layout,.portfolio-overview,
    .admin-grid,.control-center-grid,.control-center-metrics,.kpi-grid,
    .dashboard-metrics,.portfolio-summary,.review-layout,.review-command-layout,
    .resource-card-list,.resource-admin-list,.club-choice-grid,.student-dossier-grid,
    .group-management-list,.achievement-list,.queue-list,.criteria-list,
    .period-review-list,.account-security-list,.account-security-overview,
    .portfolio-completeness-list,.resource-agenda,.admin-schedule-list,
    .nav-card-grid,.quick-actions,.portfolio-section-cards,.management-links,
    .organization-area-nav,.section-navigation,.workspace-layout-switch,
    .appearance-tabs,.calendar-view-toggle,.calendar-toolbar,
    .form-actions,.achievement-actions,.queue-actions,.resource-card-actions,
    .review-evidence-tabs,.review-evidence-tools,.review-workbench-actions,
    .command-results,.birthday-mobile-list,.evidence-upload-kinds,.attachment-list,
    .analytics-body,.analytics-filters,.analytics-kpis,.analytics-chart-grid,
    .analytics-color-fields,.dossier-filters,.dossier-directory-search,
    .announcement-files,.announcement-user-choices,.schedule-admin-list,
    .club-roster-list,.announcement-admin-list,.club-editor-leaders,
    .club-schedule-edit-row,.club-photo-gallery,.club-photo-thumbnails,
    .history-export-list,.history-export-card-actions,.recycle-actions,
    .rollover-list,.rollover-actions,.period-switch,.confirmation-dialog-actions,
    .account-security-actions,.recovery-code-grid,.appearance-actions) {
  gap: var(--surface-gap);
}
.toast-region { gap: var(--surface-gap); }
/* List mode uses the same distances as tiles and cards. */
[data-workspace-layout] :is(.nav-card-grid,.quick-actions,.portfolio-section-cards,.management-links) {
  gap: var(--surface-gap);
}

:is(.panel,.notice,.compact-disclosure,.access-gate) + :is(.panel,.notice,.compact-disclosure,.access-gate) {
  margin-block-start: var(--surface-gap);
}
:is(.portal-page,.admin-section,.section-stack,.disclosure-content,.club-term-panel,
    #admin-authority,.authority-panel,.form-stack,.form-grid,.admin-grid,
    .portfolio-layout,.portfolio-profile-layout,.review-layout,.review-command-layout,
    .resource-card-list,.resource-admin-list,.club-choice-grid,.student-dossier-grid,
    .group-management-list,.achievement-list,.queue-list,.nav-card-grid,
    .quick-actions,.portfolio-section-cards,.management-links) >
  :is(.panel,.notice,.compact-disclosure,.access-gate,.authority-person,
      .achievement-card,.resource-card,.student-dossier-card,.nav-card) {
  margin-block: 0;
  min-inline-size: 0;
}

/* Insets keep a surface away from its surrounding frame on every side. */
.portal-shell { gap: var(--surface-gap); padding-inline: var(--surface-gap); }
:is(.section-navigation,.workspace-layout-switch,.appearance-tabs,.review-evidence-tabs) {
  padding: var(--surface-gap);
}
.portal-page > .section-navigation {
  gap: var(--surface-gap);
  padding: var(--surface-gap);
  margin-inline: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.disclosure-content { padding: var(--surface-gap); }
.disclosure-content > :first-child { margin-block-start: 0; }
.panel-heading { margin-block-end: var(--surface-gap); }
.authority-panel > * { margin-block: 0; }
.authority-person > form { margin: var(--surface-gap); }
.authority-panel fieldset { gap: var(--surface-gap); }

/* The wizard chips and the participation button are separate surfaces. */
#achievement-form { gap: var(--surface-gap); margin-block-start: var(--surface-gap); }
.achievement-wizard-active .achievement-wizard-progress { gap: var(--surface-gap); }
.achievement-wizard-active .achievement-wizard-step { gap: var(--surface-gap); }
.achievement-wizard-progress > li { margin: 0; min-inline-size: 0; max-inline-size: 100%; }
.achievement-wizard-progress button { max-inline-size: 100%; overflow-wrap: anywhere; }
.guided-file-row + .guided-file-row { margin-block-start: var(--surface-gap); }

/* Separate file names, previews and tools without depending on child order. */
.review-workbench-grid { gap:var(--surface-gap); padding:var(--surface-gap); min-height:0; border:0; overflow:visible; background:transparent; }
.review-evidence-viewer,.review-decision-panel { border:1px solid var(--border); border-radius:var(--radius-md); gap:var(--surface-gap); padding:var(--surface-gap); }
.review-period-fields { gap:var(--surface-gap); }
.review-evidence-viewer > * { margin-block: 0; min-inline-size: 0; }
.review-evidence-tabs { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.review-evidence-stage { border-radius: var(--radius-sm); }
.review-evidence-tools { padding:0; border:0; background:transparent; }
.review-evidence-tools > .button {
  flex: 0 1 auto; inline-size: auto; block-size: auto; min-block-size: 40px;
  max-inline-size: 100%; padding: 8px 12px; font-size: calc(12px * var(--font-scale));
  line-height: 1.35; align-self: flex-start; white-space: normal;
}
.review-period-value { display:block; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-weight:600; }

@media(max-width:700px) {
  .portal-shell { padding-inline: var(--surface-gap); }
  .portal-page { row-gap: var(--surface-gap); }
  /* A tall stacked menu must scroll away instead of covering the form. */
  :is(.portfolio-section-navigation,.resource-section-navigation) { position: static; }
}