/* Panel edges and the spacing between headings, content and actions share one
   rhythm. Compact data rows and a field's label/help text keep their own rhythm. */
@media screen {
  :root { --panel-inset: 20px; --panel-gap: 20px; }

  .main-content > :is(form, section.panel, .panel, .overview-strip, .entry-layout, .dashboard-grid)
    + :is(form, section.panel, .panel, .overview-strip, .entry-layout, .dashboard-grid) { margin-top: var(--panel-gap); }
  .panel + .panel { margin-top: var(--panel-gap); }
  .panel:is(.detail-section, .detail-workflow, .report-actions-panel,
    .dashboard-queue, .report-deliveries) { margin-bottom: var(--panel-gap); }
  .main-content > form { margin-bottom: var(--panel-gap); }
  .entry-sections > form { margin-bottom: var(--panel-gap); }
  .entry-sections > form:last-child { margin-bottom: 0; }
  .entry-sections > form > :last-child { margin-bottom: 0; }
  .form-actions { margin-bottom: var(--panel-gap); }
  .panel.form-section { margin-bottom: var(--panel-gap); }
  .main-content > form > :last-child { margin-bottom: 0; }
  .panel:is(.settings-audit, .risk-publication, .risk-private) { margin-top: var(--panel-gap); }
  .risk-editor-areas, .risk-editor > .form-section { margin-top: var(--panel-gap); }
  .entry-layout, .dashboard-grid, .dashboard-worklists { gap: var(--panel-gap); }
  :is(.entry-layout, .dashboard-grid, .dashboard-worklists) > .panel { margin-top: 0; }
  .field-grid:not(.login-permission-grid) { gap: var(--panel-gap); }
  .dashboard-worklists { align-items: start; }
  .field-grid + .form-actions, .form-field + .form-actions,
  .entry-layout + .form-actions, .main-content > .panel + .form-actions {
    margin-top: var(--panel-gap);
  }

  .panel:is(.form-section, .roster-panel-body, .dashboard-worklist, .dashboard-queue,
    .detail-metadata, .detail-workflow, .report-actions-panel, .workflow-panel,
    .recording-note) { padding: var(--panel-inset); }
  .login-form-wrap { padding: var(--panel-inset); }

  /* Legends stay inside the panel border. Their margin also works when the
     first control is a checkbox, rather than a grid or an introductory note. */
  .panel.form-section > legend:not(.sr-only) { margin: 0 0 var(--panel-gap); }
  .panel.form-section > legend:not(.sr-only) + * { margin-top: 0; padding-top: 0; }
  .panel.form-section > .field-grid { margin-top: var(--panel-gap); }
  .panel.form-section > legend + .field-grid { margin-top: 0; padding-top: 0; }
  .panel.form-section > legend.sr-only + * { margin-top: 0; padding-top: 0; }
  .panel.form-section > :is(h2, h3) { margin: 0 0 var(--panel-gap); }
  .panel.form-section > :is(h2, h3) + * { margin-top: 0; }
  .panel.form-section > :is(h2, h3) + .narrative { padding-top: 0; }
  .panel.form-section > .section-intro { padding-top: 0; }
  .panel.form-section > .checkbox-field { margin-top: 0; }
  .field-grid > .checkbox-field { padding-block: 0; margin-top: 0; }

  /* An action row must not add another bottom inset inside a padded panel. */
  .panel:is(.form-section, .roster-panel-body, .detail-workflow,
    .report-actions-panel) .form-actions {
    margin-block: var(--panel-gap) 0;
  }
  .panel:is(.form-section, .roster-panel-body) > :last-child,
  .panel:is(.form-section, .roster-panel-body) > form > :last-child {
    margin-bottom: 0;
  }
  .panel:is(.form-section, .roster-panel-body) > form > .field-grid:first-of-type {
    margin-top: 0;
  }
  .panel:is(.form-section, .roster-panel-body) > * + form:not(.heading-actions) {
    margin-top: var(--panel-gap);
  }

  .panel.roster-panel-body > :is(h2, h3) { margin-block: var(--panel-gap); }
  .panel.roster-panel-body > :is(h2, h3):first-child { margin-top: 0; }
  .panel.roster-panel-body > :is(h2, h3) + * { margin-top: 0; }
  .member-profile-grid ~ :is(.member-profile-section, .membership-section) {
    margin-top: var(--panel-gap);
    padding-top: var(--panel-gap);
    border-top: 1px solid var(--line-soft);
  }
  .member-profile-grid ~ :is(.member-profile-section, .membership-section) > h2 {
    margin: 0 0 var(--panel-gap);
  }
  .member-profile-section > :is(.narrative, .coverage-list) { margin-block: 0; }
  .panel.detail-metadata.roster-panel-body > .member-profile-grid { margin-bottom: 0; }
  .detail-metadata .member-profile-grid > div:nth-last-child(2) {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--line-soft);
  }
  @media (min-width: 601px) {
    .detail-metadata .member-profile-grid > div:nth-last-child(2):nth-child(odd) {
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: 0;
    }
  }
  .panel:is(.form-section, .roster-panel-body) > :is(dl, ul, ol) {
    margin-block: var(--panel-gap);
  }
  .panel:is(.form-section, .roster-panel-body) > :is(h2, h3, legend) + :is(dl, ul, ol) {
    margin-top: 0;
  }
  .panel .risk-publication-copy > h3 { margin-bottom: var(--panel-gap); }
  .panel .risk-publication-copy > h3:not(:first-child) { margin-top: var(--panel-gap); }
  .panel.dashboard-worklist > h2 { margin: 0 0 var(--panel-gap); }
  .panel.dashboard-worklist > :is(p, ul) { margin: 0; }
  .panel.dashboard-worklist > .subtle-link { margin-top: var(--panel-gap); }
  .panel .guidance-list > li:last-child,
  .choice-group > div > div:last-child { margin-bottom: 0; }
  .roster-panel-body .spotter-history-list > li:last-child { padding-bottom: 0; }
  .roster-panel-body .spotter-snapshot > :last-child { margin-bottom: 0; }
  .panel.roster-panel-body > .audit-changes > dl { margin: 0; }
  .panel.detail-metadata > dl { margin-top: var(--panel-gap); }
  .panel.detail-workflow .report-timing,
  .panel.report-actions-panel > .report-action-buttons { margin-top: var(--panel-gap); }
  .panel > .detail-workflow .report-timing { margin-top: 0; }
  .local-notices { padding: var(--panel-inset); gap: var(--panel-gap); margin-block: var(--panel-gap); }
  .overview-strip { padding-block: var(--panel-inset); margin-bottom: var(--panel-gap); }
  .overview-strip > .overview-stat { padding-inline: var(--panel-inset); }

  .panel.document-body > section { margin-top: var(--panel-gap); }
  .panel.document-body > :first-child { margin-top: 0; }
  .panel.document-body section + section,
  .panel.document-body section + p { margin-top: var(--panel-gap); }
  .panel.document-body h2 { margin-bottom: var(--panel-gap); }
  .panel.document-body > :last-child { margin-bottom: 0; }

  .login-form-panel > form { margin-top: var(--panel-gap); }
  .login-form-panel .form-field { margin-bottom: var(--panel-gap); }
  .login-description { margin-block: var(--panel-gap); }
  .login-submit { margin-top: var(--panel-gap); }

  .panel > :is(.log-toolbar, .archive-filter-form, .archive-results,
    .archive-method-note, .follow-up-reference, .detail-workflow) {
    padding: var(--panel-inset);
  }
  .panel > .detail-workflow { margin-bottom: 0; }
  .panel > .log-toolbar h2 { margin-top: 0; }
  .panel > :is(.dispatch-office-summary, .dispatch-guidance,
    .dispatch-request, .email-resolution-form, .roster-audit-footnote) {
    padding-inline: var(--panel-inset);
  }
  .panel > :is(.dispatch-office-summary, .email-resolution-form,
    .roster-audit-footnote) { padding-bottom: var(--panel-inset); }
  .panel > .dispatch-guidance { margin-block: var(--panel-gap); }
  .panel > .dispatch-request { padding-block: 0; margin-block: var(--panel-gap); }
  .panel .queue-notices > :is(.workflow-alert, .local-notices) {
    margin-inline: var(--panel-inset);
  }
  .panel > :is(.queue-filters, .queue-counts, .queue-settings-strip,
    .queue-update-bar, .roster-filters) { padding: var(--panel-inset); }

  /* These lists and tables already sit inside a padded body. Do not add a
     second inset just because a more distant ancestor is also a panel. */
  :is(.roster-panel-body, .panel.form-section) > :is(.audit-events, .directory-list) > li {
    padding-inline: 0;
  }
  :is(.roster-panel-body, .panel.form-section) > :is(.audit-events, .directory-list) > li:first-child {
    padding-top: 0;
  }
  :is(.roster-panel-body, .panel.form-section) > :is(.audit-events, .directory-list) > li:last-child {
    padding-bottom: 0;
  }
  .panel:is(.form-section, .roster-panel-body) .report-table :is(th, td):first-child {
    padding-left: 0;
  }
  .panel:is(.form-section, .roster-panel-body) .report-table :is(th, td):last-child {
    padding-right: 0;
  }

  .panel > .panel-heading,
  .panel:is(.settings-audit, .audit-panel) > .panel-heading,
  .homepage-risk > .panel-heading { padding: var(--panel-inset); align-items: flex-start; }
  .panel > .page-heading { align-items: flex-start; margin-bottom: var(--panel-gap); }

  .panel > :is(.roster-panel-body, .empty-state, .dashboard-reports-empty,
    .risk-publication-copy, .risk-timestamps, .audit-empty),
  .homepage-risk > .risk-publication-copy { padding: var(--panel-inset); }
  .panel > .empty-state > :is(h2, h3) { margin-bottom: var(--panel-gap); }
  .panel > .empty-state > :is(h2, h3) + p { margin-top: 0; }
  .panel > .empty-state > :is(h2, h3):last-child { margin-bottom: 0; }
  .panel > .empty-state > .button { margin-top: var(--panel-gap); }
  .panel > .risk-scroll-hint { padding-inline: var(--panel-inset); }
  .panel.detail-section > h2 { padding: var(--panel-inset) var(--panel-inset) 0; }
  .panel.detail-section > .narrative { padding: var(--panel-inset); }
  details.panel > summary { padding: var(--panel-inset); }

  .panel .audit-events > li { padding-inline: var(--panel-inset); }
  .panel .audit-events > li:first-child { padding-top: var(--panel-inset); }
  .panel .audit-events > li:last-child { padding-bottom: var(--panel-inset); }
  .panel :is(.directory-list > li, .queue-record, .queue-filters, .queue-counts,
    .roster-filters, .search-summary, .queue-settings-strip, .queue-update-bar) { padding-inline: var(--panel-inset); }
  .panel :is(.directory-list > li:first-child, .queue-record:first-child) { padding-top: var(--panel-inset); }
  .panel :is(.directory-list > li:last-child, .queue-record:last-child) { padding-bottom: var(--panel-inset); }
  .panel .dispatch-routes { padding-inline: var(--panel-inset); }
  .panel .dispatch-routes > .audit-empty { padding: var(--panel-inset) 0; }
  .panel .report-table :is(th, td):first-child { padding-left: var(--panel-inset); }
  .panel .report-table :is(th, td):last-child { padding-right: var(--panel-inset); }
  .panel.homepage-links > ul { padding: var(--panel-inset) var(--panel-inset) var(--panel-inset) calc(var(--panel-inset) + 18px); }

  .dashboard-queue-heading { align-items: flex-start; }
  .dashboard-queue-heading h2 { margin: 0; }

  .ui-dialog-heading { padding: var(--panel-inset) var(--panel-inset) 0; }
  .ui-dialog :is(.ui-dialog-body, .ui-dialog-meta, .ui-dialog-error) { padding-inline: var(--panel-inset); }
  .ui-dialog-body { padding-bottom: var(--panel-inset); }
  .ui-dialog-meta { margin-block: 0 var(--panel-gap); }
  .ui-dialog-meta:empty { display: none; }
  .ui-dialog-error { margin-block: 0 var(--panel-gap); }
  .ui-dialog-actions { padding: var(--panel-inset); }
  .chat-dock .chat-dock-history .audit-events > li { padding-inline: var(--panel-inset); }
  .chat-dock .chat-dock-history .audit-events > li:first-child { padding-top: var(--panel-inset); }
  .chat-dock .chat-dock-history .audit-events > li:last-child { padding-bottom: var(--panel-inset); }

  /* Django administration uses modules in place of Portal panels. */
  .module :is(h2, caption), .inline-group h2 { padding: var(--panel-inset); }
  body.dashboard #content-related .module h2, body .module .fieldset-heading,
  #changelist #changelist-filter h2 { padding: var(--panel-inset); }
  body.change-form .module .form-row { padding-inline: var(--panel-inset); }
  body.change-form .module .form-row:first-of-type { padding-top: var(--panel-inset); }
  body.change-form .module .form-row:last-of-type { padding-bottom: var(--panel-inset); }
  .dashboard .module table :is(th, td):first-child { padding-left: var(--panel-inset); }
  .dashboard .module table :is(th, td):last-child { padding-right: var(--panel-inset); }
  body .submit-row { padding: var(--panel-inset); }

  [data-chat-posting-state]:empty { display: none; }
}

@media screen and (max-width: 760px) {
  /* The report list hides later columns on phones; its second column is the
     visible right edge even though it is not the last child in the markup. */
  .panel .report-table:not(.activity-table) :is(th, td):nth-child(2) {
    padding-right: var(--panel-inset);
  }
  .overview-strip > .overview-stat:last-child {
    margin: var(--panel-gap) var(--panel-inset) 0;
    padding: var(--panel-inset) 0 0;
  }
}