/* ------------------------------------------------------- section, block
 * templates/ui/section.html. A section is a topic of a page: an h2, an
 * optional count or note at the right, an optional one-sentence lead. A
 * block is a unit inside it: an h3 and its content. Spacing by the
 * rhythm of web.space.related and web.space.topic (WEB-TOK-06): a change
 * of topic gets the large gap. */
@layer ui {
.section { margin-top: var(--s-8); }
.section > h2 { margin-bottom: var(--s-5); }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5);
}
.section__head h2 { font-size: var(--t-h2); }
.section__meta { font-size: var(--t-micro); color: var(--text-secondary); }
.section__lead {
  font-size: var(--t-small); color: var(--text-secondary); max-width: var(--measure);
  margin: calc(-1 * var(--s-3)) 0 var(--s-5); text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
/* The first section right under the page head needs no extra gap. */
.page-head + .section, .tabs + .section, .section--first { margin-top: 0; }

.block { margin: 0 0 var(--gap-topic); }
.block__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  flex-wrap: wrap; margin: 0 0 var(--gap-rel); }
.block__head h3 { font-size: var(--t-h3); }
.block__meta { font-size: var(--t-micro); color: var(--text-secondary); }

/* A form section: fields in a grid, one column on a phone, the width of a
   reading line so a label never stands far from its field. */
.form-section { max-width: 46rem; }

/* Spacing helpers of the page types: a gap above, in the rhythm. */
.u-spaced-sm { margin-top: var(--s-3); }
}  /* @layer ui */