@layer components {
  /* One setting, read across: what it is and why on one side, the control on the
   * other.
   *
   * The shape every settings screen in this app wanted and none of them had.
   * `.form__row` is the other arrangement — a grid of fields side by side, each
   * with its label above it — which is right for an address and wrong for a list
   * of decisions somebody is scanning down. A nightly rate, a cleaning fee, a
   * minimum stay and a channel markup are all the same question: here is a thing,
   * here is a sentence about it, here is the one box that answers it.
   *
   * Not `.inline-edit`, which is the same content behind a click. This is for a
   * form that is already open, where every control is visible and one Save at the
   * bottom commits the lot — so there is no display state, no editor state and no
   * controller.
   *
   * There is no container block, and that is deliberate: the rule between two
   * rows is the only thing a list of them needs, and `+` already says it. A
   * wrapper would have been a class every call site had to remember for nothing.
   *
   * The control column is sized rather than shared. A row of prose against a
   * `1fr` control gave a two-character percentage field a third of the screen. */
  .setting-row {
    --setting-row-control-width: 18rem;

    display: grid;
    gap: var(--space-half);
    padding-block: var(--space);
  }

  /* Ruled off from the row above rather than spaced from it, because these are a
   * list of decisions rather than a stack of cards — the same reason
   * .conversation-about is ruled sections and .attention is ruled rows. A border
   * between, never around: the panel already draws the edge. */
  .setting-row + .setting-row {
    border-block-start: var(--border-faint);
  }

  /* A row across, so a mark or a hint can stand beside what it explains — which
   * is why the label and its sentence are wrapped together by the caller rather
   * than being children of this. Left as direct children they became two columns
   * and the sentence read as a second label. */
  .setting-row__about {
    display: flex;
    align-items: start;
    gap: var(--space-half);
    min-inline-size: 0;
  }

  .setting-row__label {
    display: block;
    font-weight: var(--weight-semibold);
  }

  .setting-row__hint {
    margin: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-small);
  }

  /* Under what it answers rather than beside it. Across was the first shape and
   * it read badly on a wide screen: the label sat at one edge and the box at the
   * other with a hand-span of nothing between them, and the eye had to travel to
   * pair them up. Capped, so the box is the size of the answer rather than the
   * size of the screen — a two-character percentage does not want half a page.
   *
   * A block of its own, never on the same element as `.input-group`. Both declare
   * `display`, and the grid won: the currency prefix stacked above the number
   * inside one border and the field came out two rows tall. */
  .setting-row__control {
    display: grid;
    gap: var(--space-half);
    max-inline-size: var(--setting-row-control-width);
  }

  /* Two controls that answer one question together — an amount and the "per
   * stay" beside it, a choice and the checkbox that qualifies it.
   *
   * An element rather than a modifier of __control, which is what it was and what
   * was wrong with it: a modifier carries only the values, so used on its own
   * child it inherited no `display: grid` and the two controls stacked. A pair is
   * its own thing and now says so.
   *
   * The first takes what is left, so a three-figure fee and a five-figure one
   * line up with each other rather than with their own units. */
  .setting-row__pair {
    display: flex;
    align-items: center;
    gap: var(--space-half);

    & > :first-child {
      flex: 1;
      min-inline-size: 0;
    }
  }

  /* A row whose answer needs more than one box — the fee schedule, where a charge
   * carries an amount, what it is charged per, whether a guest may decline it and
   * whether tax applies. Four controls in the ordinary column is a column of four
   * stacked boxes taller than the thing it is describing. */
  .setting-row--roomy {
    --setting-row-control-width: 30rem;
  }

  /* What the channels said about this row, or what it still needs: a line under
   * the control rather than beside it, because it is about the answer rather than
   * about the question. */
  .setting-row__note {
    margin: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-small);
  }

}