/* SPACING — base unit 8px, with a single 4px half-step for parts of one
   element. The ladder ENCODES RELATIONSHIP, which is the whole point: the
   number you pick declares how related two things are, so spacing can be
   reviewed for correctness rather than taste.

     4   parts of one element   (glyph ↔ its label, dot ↔ its text)
     8   siblings in a group    (buttons in a row, chips in a line)
     16  items in a list        (cards, rows, list items)
     24  groups in a section    (a heading and its grid)
     32  blocks within a block  (card inset, stacked blocks)
     48  sections               (a section head and its content)
     64  large sections
     88  page sections          — THE SITE'S SECTION RHYTHM
     120 major boundary         — AND THE CEILING

   Over-spacing is as much a failure as cramming. If a screen feels empty,
   remove an element; never inflate a gap past its rung. 120 is the ceiling —
   there is no rung above it, and needing one means the page is wrong.

   Control, row, glyph and inset sizes live in ramp.css — the one size ramp. */
:root{
  --s-0:4px;
  --s-1:8px;   --s-2:16px;  --s-3:24px;  --s-4:32px;
  --s-5:48px;  --s-6:64px;  --s-7:88px;  --s-8:120px;

  /* ---- semantic aliases — name the relationship, not the number ---- */
  --gap-part:    var(--s-0);   /* 4  — parts of one element */
  --gap-sibling: var(--s-1);   /* 8  — siblings in a group */
  --gap-item:    var(--s-2);   /* 16 — items in a list */
  --gap-group:   var(--s-3);   /* 24 — groups in a section */
  --gap-block:   var(--s-4);   /* 32 — blocks within a block */
  --gap-section: var(--s-5);   /* 48 — a section head and its content */
  --gap-page:    var(--s-7);   /* 88 — between page sections */
  --gap-major:   var(--s-8);   /* 120 — major boundary, and the ceiling */

  /* ---- regions — layout, NOT rungs. These are the page's architecture and
     they do not move with the density preference. ---- */
  --header-height:74px;
  --maxw:1240px;              /* content ceiling */
  --gutter:28px;              /* page edge padding */
  --rail-w:150px;             /* the left annotation rail */
  --legend-w:300px;           /* the schematic's legend column */
  --overlay-w:420px;          /* modal / confirm width, centred at every size */

  /* ---- anchored menus (navigation/Menu). Off the ladder for the same reason
     the regions above are: a menu is chrome hung off a control, and its
     geometry is set by the control it hangs from, not by the text preference.
     The gap is the hairline plus one 4-pt step, so the tray reads as detached
     from its trigger without floating free of it. ---- */
  --menu-gap:5px;             /* trigger edge → tray edge */
  --menu-w:224px;             /* the tray's floor; it may grow to its anchor */
  --menu-max-h:320px;         /* past this the tray scrolls, contained */

  /* ---- app-shell regions — for operator surfaces (the teaching platform),
     which are denser than the document surfaces above. Same category as the
     regions above: layout, off-ladder, fixed under the density preference.
     An app shell is chrome; chrome that resized with a text preference would
     reflow the work area for no reason. ---- */
  --shell-header:56px;        /* the app header. Thinner than a page header. */
  --shell-nav-w:248px;        /* the left surface nav, labels always visible */
  --shell-aside-w:340px;      /* the audit / inspector column */
  --shell-gutter:20px;        /* app content edge padding */

  /* ---- breakpoints (reference values; media queries restate them) ---- */
  --bp-sm:480px; --bp-md:600px; --bp-lg:780px; --bp-xl:880px;
}