.methods-section { margin-top: 36px; scroll-margin-top: 100px; }
.methods-jumps, .methods-flow { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.methods-jumps a { display: inline-flex; align-items: center; min-height: 44px; }
.methods-flow { padding-inline-start: 24px; column-gap: 40px; }
.methods-checklist { padding: 16px; }
.methods-checklist fieldset { min-width: 0; border: 0; padding: 0; margin: 0 0 16px; }
.methods-checklist legend { font-weight: 700; padding: 0; }
.methods-checklist label { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 4px; box-sizing: border-box; cursor: pointer; }
.methods-checklist input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--db-green); }
.methods-checklist-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.methods-checklist-footer p { margin: 0; }
.methods-checklist-footer button { min-height: 44px; padding: 6px 12px; font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 6px; cursor: pointer; }
.methods-checklist-sources { max-width: 76ch; }

.methods-workbench, .methods-studies {
  display: grid;
  align-items: start;
  gap: 18px;
}
.methods-workbench { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.methods-studies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.methods-studies [id] { scroll-margin-top: 100px; }
.methods-studies-heading { margin-top: 32px; }
.methods-related { padding: 0; list-style: none; }
.methods-example-links { padding-inline-start: 20px; }
.methods-example-links li + li { margin-top: 8px; }
.methods-studies summary {
  cursor: pointer;
  min-height: 44px;
  padding-block: 10px;
  box-sizing: border-box;
  border-top: 1px solid var(--db-line);
}

.methods-diagram {
  background: #edf1e9;
  color: #233c31;
  min-height: 96px;
  box-sizing: border-box;
  border-radius: 6px;
  padding: 14px;
  margin: 12px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.methods-diagram strong { font-weight: 750; }
.methods-diagram span { font-size: .875rem; }
.diagram-scale strong, .diagram-scale span, .diagram-balance span, .diagram-contrast > * {
  border: 1px solid #9aaea3;
  border-radius: 4px;
  padding: 6px 10px;
}
.diagram-scale strong { flex: 2 1 auto; padding-block: 18px; background: #c6dece; }
.diagram-scale span { flex: 1 1 auto; }
.diagram-hierarchy, .diagram-grouping { display: grid; }
.diagram-hierarchy div { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.diagram-hierarchy strong { font-size: 1.25rem; }
.diagram-balance span { flex: 2 1 72px; padding-block: 18px; background: #c6dece; text-align: center; }
.diagram-balance strong { flex: 1 1 90px; }
.diagram-contrast strong { color: white; background: #28513c; border-color: #28513c; }
.diagram-grouping { gap: 12px; }
.diagram-grouping span { display: block; }

@media (max-width: 760px) {
  .methods-workbench, .methods-studies { grid-template-columns: minmax(0, 1fr); }
}