/* 01-settings/_layout.css — containers, measures, breakpoints.
   Breakpoints are the documented source of truth; custom properties cannot be
   used inside @media, so the literal is repeated in queries. Keep in sync:
     sm 40rem   md 56.25rem   lg 72rem
   The range from md to lg (900 to 1151 px) is a tablet in landscape; below md
   is a tablet in portrait or a phone. No fourth breakpoint is needed for that. */
:root {
  --bp-sm: 40rem;
  --bp-md: 56.25rem;
  --bp-lg: 72rem;

  --measure-app:    76rem;
  --measure-narrow: 40rem;
  --measure-prose:  65ch;

  --height-topbar:  4rem;
  --height-control: 2.25rem;  /* buttons, fields */
  --height-control-sm: 2rem;  /* subnav pills, filter-bar fields, the board's add button */
  --height-row:     2.5rem;   /* register rows */
  --width-edge-col: 11.5rem;  /* min card width in the week board's day-list layout */
}

/* Touch. On a coarse pointer (a finger, not a mouse) every control is at least
   2.75rem (44 px) tall; the three heights above carry that to every component
   that reads them. Desktop density is unchanged because a mouse is a fine pointer. */
@media (pointer: coarse) {
  :root {
    --height-control:    2.75rem;
    --height-control-sm: 2.75rem;
    --height-row:        2.75rem;
  }
}