/* THE SIZE LADDER — the mechanism this system was ported for.

   ONE SIZE WORD — sm | md | lg — sets the whole band. Every number inside a
   component (height, inset, gap, type rung, glyph rung) comes from the SAME
   ROW. Nothing is sized à la carte. A component names its AXIS and reads its
   step from here; a composite passes its size down.

   md IS THE DEFAULT RUNG and is pinned to the site's existing density — the
   ladder was measured off the live pages, not imposed on them.

   xs exists ONLY as the one step down a NESTED part takes (the glyph inside a
   box, the label inside a chip). It is never a prop value. Note the glyph
   inside a button is NOT nested — a button's glyph takes the button's rung.

   AUDIT QUESTION for any component: read every number in it and find its row.
   A number on no row is a deviation. A number from a different row than the
   control height is a mixed band. Which axis, which default, what is nested?
   If it cannot answer all three, it is not finished.

   | axis            | sm      | md      | lg      |
   |-----------------|---------|---------|---------|
   | control         | 40      | 48      | 56      |
   | row             | 56      | 68      | 80      |
   | inline          | 16      | 20      | 24      |
   | icon            | 16      | 20      | 24      |
   | mark            | 8       | 10      | 12      |
   | pad-pill        | 16      | 24      | 32      |
   | pad-box y · x   | 24 · 20 | 32 · 28 | 40 · 36 |
   | gap             | 8       | 12      | 16      |
   | ctl-type        | 12/16   | 13/16   | 14/20   |
   | label-type      | 11/16   | 12/16   | 13/16   |
   | body-type       | 14/20   | 16/24   | 18/28   |
   | heading-type    | 17/24   | 20/28   | 24/32   |
   | title-type      | 22/28   | 26/34   | 32/40   |
   | meta-type       | 11/16   | 12/16   | 13/16   |
   | rhythm 1–4      | 8 16 32 64 | 16 24 48 88 | 24 32 64 120 |

   RADIUS IS NOT ON THIS LADDER. It cannot be: this system has exactly one box
   radius, and it is zero. See shape.css. */
:root{
  /* control — a pressable or field that stands alone: Button, NavCta, TocLink,
     Input, Select, IconButton. Height.

     NATIVE <select> TAKES height, NOT min-height. Browsers ignore min-height
     on a select's default appearance — it computes to the intrinsic ~20px and
     the control silently lands three rungs under its band, below the 44px
     touch floor. Every other control may use min-height so it can grow with
     its content; a select must be pinned with height. */
  --control-sm:40px; --control-md:48px; --control-lg:56px;

  /* row — a list or detail row's height: RoleRow, FaqRow, SettingRow */
  --row-sm:56px; --row-md:68px; --row-lg:80px;

  /* inline — lives INSIDE a row or control and borrows its target: chip
     height, dot ring, toggle track, checkbox box */
  --inline-xs:12px; --inline-sm:16px; --inline-md:20px; --inline-lg:24px;

  /* glyph — the icon at each rung; a NESTED glyph takes one step down */
  --icon-xs:14px; --icon-sm:16px; --icon-md:20px; --icon-lg:24px;

  /* mark — a dot, square or disc that carries identity or status. Not a
     control and not a glyph: it has no target and cannot be pressed. Its own
     axis, because forcing marks onto the inline axis makes every dot too big. */
  --mark-sm:8px; --mark-md:10px; --mark-lg:12px;

  /* inset — pill padding (controls) and box padding (cards, wells, demos) */
  --pad-pill-sm:16px;  --pad-pill-md:24px;  --pad-pill-lg:32px;
  --pad-box-y-sm:24px; --pad-box-y-md:32px; --pad-box-y-lg:40px;
  --pad-box-x-sm:20px; --pad-box-x-md:28px; --pad-box-x-lg:36px;

  /* gap — glyph ↔ label, and siblings inside one component */
  --gap-xs:4px; --gap-sm:8px; --gap-md:12px; --gap-lg:16px;

  /* ---- type rungs. Interface text ONLY: single-line, aligned to controls,
     line-heights on the 4px grid. Editorial and display type do NOT live
     here — they are ratio-led, in typography.css. ---- */

  /* ctl — mono uppercase label inside a pressable (button, nav cta) */
  --ctl-type-xs:11px; --ctl-line-xs:14px;
  --ctl-type-sm:12px; --ctl-line-sm:16px;
  --ctl-type-md:13px; --ctl-line-md:16px;
  --ctl-type-lg:14px; --ctl-line-lg:20px;

  /* label — mono uppercase label NOT inside a pressable (chip, rail, eyebrow) */
  --label-type-xs:10px; --label-line-xs:14px;
  --label-type-sm:11px; --label-line-sm:16px;
  --label-type-md:12px; --label-line-md:16px;
  --label-type-lg:13px; --label-line-lg:16px;

  /* body · heading · title · meta — content type on the ladder, for components
     that must size their own text with their band (cards, rows, stats) */
  --body-type-sm:14px; --body-line-sm:20px;
  --body-type-md:16px; --body-line-md:24px;
  --body-type-lg:18px; --body-line-lg:28px;

  --heading-type-sm:17px; --heading-line-sm:24px;
  --heading-type-md:20px; --heading-line-md:28px;
  --heading-type-lg:24px; --heading-line-lg:32px;

  --title-type-sm:22px; --title-line-sm:28px;
  --title-type-md:26px; --title-line-md:34px;
  --title-type-lg:32px; --title-line-lg:40px;

  --meta-type-sm:11px; --meta-line-sm:16px;
  --meta-type-md:12px; --meta-line-md:16px;
  --meta-type-lg:13px; --meta-line-lg:16px;

  /* figure — the big numeral in a Stat. Reads as display, sized as a component. */
  --figure-type-sm:28px; --figure-line-sm:32px;
  --figure-type-md:34px; --figure-line-md:36px;
  --figure-type-lg:42px; --figure-line-lg:44px;

  /* rhythm — four tiers of section stacking, each moves one rung with the
     preference. Tier 4 is the page-section rhythm (88px today). */
  --rhythm-1:16px; --rhythm-2:24px; --rhythm-3:48px; --rhythm-4:88px;

  /* the floor no pressable may go under, at any rung or preference */
  --touch-min:44px;
  /* I6 · a pointer surface may size to the click token; touch input still owes
     the minimum. The row rungs stay where they are — this is for glyph buttons
     inside dense rows, not a new rung. */
  --target-click:28px;
}

/* THE DENSITY PREFERENCE — Compact · Default · Expanded.
   Set data-ioma-size="sm" or "lg" on <html> or any ancestor and every axis
   slides ONE rung, clamped at the ends (sm stays sm under Compact; lg stays
   lg under Expanded). A component that asks for md gets the sm row under
   Compact. No component code participates, and no component needs to know.

   A component with an explicit size still slides with the page. To PIN one,
   scope a data-ioma-size="md" wrapper around it. */
[data-ioma-size="sm"]{
  --control-lg:48px; --control-md:40px;
  --row-lg:68px; --row-md:56px;
  --inline-lg:20px; --inline-md:16px; --inline-sm:12px;
  --icon-lg:20px; --icon-md:16px; --icon-sm:14px;
  --mark-lg:10px; --mark-md:8px;
  --pad-pill-lg:24px; --pad-pill-md:16px;
  --pad-box-y-lg:32px; --pad-box-y-md:24px;
  --pad-box-x-lg:28px; --pad-box-x-md:20px;
  --gap-lg:12px; --gap-md:8px; --gap-sm:4px;
  --ctl-type-lg:13px; --ctl-line-lg:16px; --ctl-type-md:12px; --ctl-line-md:16px; --ctl-type-sm:11px; --ctl-line-sm:14px;
  --label-type-lg:12px; --label-line-lg:16px; --label-type-md:11px; --label-line-md:16px; --label-type-sm:10px; --label-line-sm:14px;
  --body-type-lg:16px; --body-line-lg:24px; --body-type-md:14px; --body-line-md:20px;
  --heading-type-lg:20px; --heading-line-lg:28px; --heading-type-md:17px; --heading-line-md:24px;
  --title-type-lg:26px; --title-line-lg:34px; --title-type-md:22px; --title-line-md:28px;
  --meta-type-lg:12px; --meta-line-lg:16px; --meta-type-md:11px; --meta-line-md:16px;
  --figure-type-lg:34px; --figure-line-lg:36px; --figure-type-md:28px; --figure-line-md:32px;
  --rhythm-1:8px; --rhythm-2:16px; --rhythm-3:32px; --rhythm-4:64px;
  /* the content scale steps down with it */
  --type-lede:1.05rem; --type-body:0.95rem; --type-body-sm:0.88rem;
  --type-title:1.35rem; --type-heading:1.1rem; --type-subhead:1rem;
  --type-data:0.78rem; --type-label:0.68rem;
}
[data-ioma-size="lg"]{
  --control-sm:48px; --control-md:56px;
  --row-sm:68px; --row-md:80px;
  --inline-sm:20px; --inline-md:24px; --inline-xs:16px;
  --icon-sm:20px; --icon-md:24px; --icon-xs:16px;
  --mark-sm:10px; --mark-md:12px;
  --pad-pill-sm:24px; --pad-pill-md:32px;
  --pad-box-y-sm:32px; --pad-box-y-md:40px;
  --pad-box-x-sm:28px; --pad-box-x-md:36px;
  --gap-sm:12px; --gap-md:16px; --gap-xs:8px;
  --ctl-type-sm:13px; --ctl-line-sm:16px; --ctl-type-md:14px; --ctl-line-md:20px; --ctl-type-xs:12px; --ctl-line-xs:16px;
  --label-type-sm:12px; --label-line-sm:16px; --label-type-md:13px; --label-line-md:16px; --label-type-xs:11px; --label-line-xs:14px;
  --body-type-sm:16px; --body-line-sm:24px; --body-type-md:18px; --body-line-md:28px;
  --heading-type-sm:20px; --heading-line-sm:28px; --heading-type-md:24px; --heading-line-md:32px;
  --title-type-sm:26px; --title-line-sm:34px; --title-type-md:32px; --title-line-md:40px;
  --meta-type-sm:12px; --meta-line-sm:16px; --meta-type-md:13px; --meta-line-md:16px;
  --figure-type-sm:34px; --figure-line-sm:36px; --figure-type-md:42px; --figure-line-md:44px;
  --rhythm-1:24px; --rhythm-2:32px; --rhythm-3:64px; --rhythm-4:120px;
  --type-lede:1.25rem; --type-body:1.08rem; --type-body-sm:1rem;
  --type-title:1.65rem; --type-heading:1.35rem; --type-subhead:1.18rem;
  --type-data:0.86rem; --type-label:0.76rem;
}