/* HouseChalk spacing.
 *
 * THE LADDER.  0 · 2 · 4 · 8 · 12 · 16 · 24 · 32 · 40 · 48 · 56 · 64
 * Every padding, margin, gap and box dimension is on it. 12 is the one
 * half-step above 8 and it is load-bearing: a card note hugs its card at 12
 * where every other block pair takes 24.
 *
 * NOT ON THE LADDER, and not to be put on it: hairlines and rings (1px, 1.5px,
 * 2px), border-radius, font sizes, line-heights, letter-spacing, and device
 * dimensions. A 1.5px ring rounded to a rung stops being a hairline.
 *
 * THREE NAMED STEPS, each with real callers.
 *   A component never sets its own external margin. The container owns the gap.
 *   A component owns every gap inside itself.
 *   If two elements need a gap smaller than the block rhythm, they are one
 *   component and need a wrapper.
 */
:root{
  --sp-0:0px;
  --sp-2:2px;
  --sp-4:4px;
  --sp-8:8px;
  --sp-12:12px;
  --sp-16:16px;
  --sp-24:24px;
  --sp-32:32px;
  --sp-40:40px;
  --sp-48:48px;
  --sp-56:56px;
  --sp-64:64px;

  --sp-tight:6px;   /* a label and the thing it labels, inside one component */
  --sp-snug:12px;   /* parts of one component; a card and the line explaining it */
  --sp-block:28px;  /* THE GAP BETWEEN TWO BLOCKS IN A SCROLL. It was 22px, which
                       is enough to separate two cards — their edges do most of
                       that work — and not enough to separate two blocks where
                       one of them has no edges. On a dense screen the tighter
                       value made every block butt against its neighbour. */

  --state-padding:24px;  /* A STATE BLOCK IS PADDED LIKE A CARD, not like a
                            control. An empty, dated, dead or interrupting state
                            is the only thing in its slot and has to hold that
                            slot; at a control's 16px it reads as a notice bar
                            and the eye skips it. Same 24px as a card, and the
                            same --r-card radius, for the same reason. */
  --card-padding:24px;
  --card-gap:24px;
  --section-gap:48px;    /* THE AIR ABOVE A NAMED RUN, on top of --sp-block, and
                            the thing that separates two sections. Two blocks in
                            one section are related; two sections are not, and
                            this gap is what says so — which is why the section
                            header needs no rule. Its caller is SectionHeader. */
  --page-pad:24px;
  --touch-min:44px;      /* never smaller */
  --dock-reserve:112px;  /* clear air a scroll keeps under a floating dock */
}