.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-6);
  /* The label IS the target: it is clicked from the text, not only from the box.
     At 22 px tall it fell short for a finger. */
  min-height: 26px;
  padding: var(--s-2) 0;
  font-size: var(--t-4);
  cursor: pointer;
}

/* The box aligns with the label's first line, not with its box. */
.text { min-width: 0; }

.help {
  composes: withCode from './text.module.css';
  font-size: var(--t-3);
  color: var(--mute);
  line-height: 1.55;
  margin-top: var(--s-3);
  margin-left: calc(var(--ctrl) + var(--s-6));
  /*
  720 px, and **it is a local exception with its figure**, not a missing token.

  Decided 2026-09-03, in a design review. Measured
  first: **it really bites**. At 1920, with the control column at 1022 px, the nine
  checkbox helps of `Settings › General` come out at exactly 720, so it is not dead
  code that can be deleted.

  And it does not go up to `tokens.css` for the same reason the Dashboard hero did
  not: **only this uses it**. A global token is declared when two places share a
  decision; declaring one for a single use is inventing vocabulary nobody speaks.

  What the cap is and why it is not `--help-col`: this is **the only help the
  dense-form design did NOT move** to the third column. A checkbox's stays under its control
  (because the checkbox IS its label and separating them would break that unit), so
  it inherits the control column's width, which on wide screens goes well past
  what reads comfortably. 720 is the readable line cap for THIS case.

  If some day a second help stays out of the third column, then there are two and
  a token is due; today there are nine from the same place.
  */
  max-width: 720px;
}

/* The switch is ReUI's (32px wide), so its help lines up under the label by that width. */
.helpSwitch { margin-left: calc(32px + var(--s-6)); }