/* Grid containers own section spacing; card margins cannot separate a grid
   from the next section. Keep this after layout.css and mobile overrides. */
.main :is(.detail-grid, .module-grid) {
  --section-gap: 20px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--section-gap);
  margin-bottom: var(--section-gap);
}
.main :is(.detail-grid, .module-grid) > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
body:not(.room-display) .main :is(.detail-grid, .module-grid) > .panel {
  margin-bottom: 0;
}
.main :is(.detail-grid, .module-grid) > .panel > h2:first-child {
  margin-top: 0;
}
.main details.panel[open] > summary {
  margin-bottom: 16px;
}
.main .panel > :is(p, h2, h3) + .table-scroll {
  margin-top: 16px;
}
.main .panel > :is(p, ul, ol, .table-scroll) + :is(h2, h3) {
  margin-top: 20px;
}
.main .panel > h3 + p {
  margin-top: 8px;
}
.main .panel > p + form {
  margin-top: 16px;
}
.main .panel > p + .button {
  margin-top: 12px;
}
.main .record-list + .panel {
  margin-top: 20px;
}
@media (max-width: 900px) {
  .main :is(.detail-grid, .module-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .main :is(.detail-grid, .module-grid) {
    --section-gap: 16px;
  }
}