@layer components {
  /* A section of a settings screen: a heading, a sentence, and a list of rows.
   *
   * No panel, and that is the decision. A card around a form is an elevation
   * saying "this is a thing on a surface", and these screens *are* the surface —
   * one card per section put a box around every question and pushed the controls
   * to the far edge of a wide screen, where a label and the box answering it had
   * nothing to do with each other.
   *
   * So it takes a measure instead. Not a content width from VIEWS.md's three:
   * those are line lengths for a page in a gutter, and this stands in a workspace
   * beside a rail. It is the width at which a label and its control still read as
   * one row. `.trail` and `.channel-settings` are the other two components that
   * name their own for the same kind of reason.
   *
   * It was `.property-details__section` until the organization overview wanted
   * the same thing, and an organization screen wearing a property's class is the
   * wrong answer — the same rename `.record-switcher` got, for the same reason. */
  .settings-section {
    --settings-section-measure: 52rem;

    display: grid;
    gap: var(--space);
    max-inline-size: var(--settings-section-measure);
  }

  .settings-section + .settings-section {
    margin-block-start: var(--space-and-half);
  }

  /* A section of a report rather than of a form. The measure is what keeps a
   * label and its control reading as one row, and a report has neither: its
   * tables want every column the screen can give them, and stopping them short
   * of the tabs above leaves a ragged edge down the right of the page. */
  .settings-section--wide {
    --settings-section-measure: none;
  }

  /* No rule under it. The rows below rule between themselves, and a border here
   * as well drew two lines with nothing between them wherever a section had no
   * rows yet — which is what an empty fees screen is. */
  .settings-section__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space);
  }

  .settings-section__header p {
    margin: var(--space-quarter) 0 0;
    color: var(--color-ink-soft);
  }

  .settings-section__title {
    margin: 0;
    font-size: var(--text-medium);
  }
}