/* Shared rhythm for online, offline, and printable reference screens.
   Containers own their gaps; cards and panels do not add a second outer gap. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --page-inset: clamp(24px, 4.5vw, 64px);
  --panel-padding: var(--space-6);
}

/* One predictable gap between visible page sections, including notices/nav. */
.page-shell > main { padding: var(--space-8) var(--page-inset) var(--space-12); }
.topbar { padding-inline: var(--page-inset); }
.page-footer { padding-inline: var(--page-inset); }
.page-shell > main > :where(:not([hidden], script, style, template)) { margin-block: 0; }
.page-shell > main > :where(:not([hidden], script, style, template)) ~ :where(:not([hidden], script, style, template)) { margin-top: var(--space-6); }
.page-shell > main > :where(h2, .section-heading, .results-heading) + :where(:not([hidden], script, style, template)) { margin-top: var(--space-4); }
.page-heading { gap: var(--space-6); }
.page-heading h1 { margin-bottom: var(--space-4); overflow-wrap: anywhere; }
.page-heading h1:last-child { margin-bottom: 0; }
.section-heading { margin: 0 0 var(--space-4); gap: var(--space-4); flex-wrap: wrap; }
.section-heading .text-link { white-space: normal; }
.breadcrumbs { flex-wrap: wrap; gap: var(--space-2) var(--space-3); overflow-wrap: anywhere; }

/* Nested stacks and grids follow the same rhythm as the page. */
.panel, .panel.management-row, .panel.management-row:last-child { padding: var(--panel-padding); margin-bottom: 0; }
.panel.management-row, .panel.management-row:last-child { border: 1px solid var(--line); }
.panel > h2 { margin-bottom: var(--space-4); }
.panel > :last-child { margin-bottom: 0; }
.panel > .summary-heading h2 { margin: 0; }
:where(form, .editor-main, .editor-aside, .transfer-stack) > .panel { margin-block: 0; }
:where(form, .editor-main, .editor-aside, .transfer-stack) > .panel ~ .panel { margin-top: var(--space-6); }
form > .panel + :is(button, .button-row) { margin-top: var(--space-6); }
.card-grid, .work-grid, .dashboard-grid, .manage-directory { gap: var(--space-6); margin-bottom: 0; }
.dashboard-grid { align-items: start; }
.dashboard-grid .section-heading { margin: 0 0 var(--space-4); }
.dashboard-metrics { gap: var(--space-4); margin-bottom: 0; }
.editor-layout, .article-layout { gap: var(--space-6); }
.article-aside { display: grid; gap: var(--space-6); }
.article-aside > .aside-box { margin: 0; padding: var(--panel-padding); }
.compact-links { gap: var(--space-3); margin-bottom: var(--space-4); }
.compact-links:last-child { margin-bottom: 0; }
.compact-links:empty { display: none; }
.compact-links > a { padding: var(--space-3) var(--space-4); }
.pinned-references .pin-note { font-size: 13px; font-weight: 400; margin-top: var(--space-2); white-space: pre-line; }
.pinned-empty { padding: var(--space-4) var(--panel-padding); }
.party-row { gap: var(--space-6); padding: var(--panel-padding); }
.dashboard-search { padding: var(--panel-padding); }
.dashboard-search h1 { margin-bottom: var(--space-6); }
.dashboard-search .search-primary { margin-bottom: var(--space-2); }
.dashboard-search .helper { margin: var(--space-2) 0 var(--space-4); }
.campaign-welcome { gap: var(--space-4); padding: var(--space-4) var(--panel-padding); }
.manage-nav, .character-nav, .library-nav { padding-bottom: var(--space-4); }

/* Labels above controls work whether the control is nested or linked by for. */
label { margin-bottom: var(--space-2); }
label > :is(input:not([type=checkbox], [type=radio]), select, textarea) { margin-top: var(--space-2); }
.check-label { gap: var(--space-2); }
.form-grid { gap: var(--space-6) var(--space-4); }
.form-grid > label, .ability-grid > label { margin-bottom: 0; }
.field { margin-bottom: var(--space-6); }
.form-grid .field { margin-bottom: 0; }
.helper { margin: var(--space-2) 0 var(--space-4); }
.settings-form > label, .settings-form > .panel > label { margin-bottom: var(--space-6); }
.settings-form > label:has(+ .helper), .settings-form > .panel > label:has(+ .helper) { margin-bottom: 0; }
.settings-form > .helper, .settings-form > .panel > .helper { margin: var(--space-2) 0 var(--space-6); }
.settings-form > button { margin-top: var(--space-2); }
.form-section { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.form-section h2 { margin-bottom: var(--space-2); }
.form-actions { margin-top: var(--space-6); padding-top: var(--space-6); }
.ability-grid { gap: var(--space-6) var(--space-4); margin: var(--space-4) 0 0; }
.ability-grid input { min-height: 48px; }
.button-row, .inline-form { gap: var(--space-4); }
.panel > .button-row + form, .panel > .management-row + .inline-form { margin-top: var(--space-4); }
.panel > .check-label + .form-grid { margin-top: var(--space-4); }
.panel > form + form { margin-top: var(--space-4); }
.panel > details + button { margin-top: var(--space-4); }
details.panel > form { margin-top: var(--space-4); }
.panel details > summary { padding-block: var(--space-2); }
.panel fieldset { margin-top: var(--space-4); }
fieldset { margin: 0 0 var(--space-4); padding: var(--space-4); min-width: 0; }
fieldset .check-label { margin-bottom: 0; }
.account-panel label { margin-top: var(--space-6); }
.account-panel button { margin: var(--space-6) 0 0; }
.account-panel p:last-child { margin-top: var(--space-4); }
.account-panel .button-row button { margin: 0; }
.table-scroll { margin: var(--space-4) 0; }
.comparison-stats, .compare-grid { margin-bottom: 0; }
.compare-grid .panel { padding: var(--panel-padding); }
.choice-grid { gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
.filter-form { gap: var(--space-4); padding: var(--space-1) var(--space-4) var(--space-4); }
.filter-actions { gap: var(--space-4); }
.saved-reference .form-grid { margin: var(--space-4) 0; }

/* Reading keeps a larger heading gap; screen and physical print are separate. */
.sourcebook { padding: var(--space-8); }
.sourcebook h2 { margin: var(--space-8) 0 var(--space-4); }
.sourcebook h3 { margin: var(--space-6) 0 var(--space-3); }
.wiki-body > :last-child { margin-bottom: 0; }
.stat-grid { gap: var(--space-4); margin-bottom: var(--space-6); padding-bottom: var(--space-6); }
.print-cards .print-reference { margin-bottom: 0; }
.offline-page > header { margin-bottom: var(--space-6); }
.offline-page main > label { margin-bottom: var(--space-4); }
.offline-layout { margin: var(--space-6) 0; gap: var(--space-6); }
dialog { padding: var(--panel-padding); }
.preview-toolbar { top: calc(-1 * var(--panel-padding)); margin-bottom: var(--space-6); padding-bottom: var(--space-4); }

@media (max-width:760px) {
  :root { --page-inset: var(--space-4); --panel-padding: var(--space-4); }
  .page-shell > main { padding-top: var(--space-6); padding-bottom: var(--space-8); }
  .page-heading > :not(:first-child) { margin-top: var(--space-4); }
  .page-heading .button-row { margin-top: 0; }
  .page-heading > .button-row { margin-top: var(--space-4); }
  .card-grid, .work-grid, .manage-directory { gap: var(--space-4); }
  .article-aside { grid-template-columns: 1fr; }
  .sourcebook { padding: var(--panel-padding); }
  .party-row, .campaign-welcome { gap: var(--space-4); }
  .inline-form label { min-width: 0; }
  .search-result-tools { gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
  .offline-page { padding: var(--space-4); }
  .print-page { padding: var(--space-4); }
}
@media print {
  .page-shell > main, .sourcebook, .print-page { padding: 0; }
  dialog { display: none !important; }
}