/*
 * Six layout steps on a 4px grid plus one sub-step. No step outside this set exists in the
 * system: the css-lint hook (.claude/hooks/css-lint.js) refuses a px literal in components/*.
 */
:root {
  --space-0: 4px;    /* between glyphs of one group, between badges */
  --space-half: 6px; /* inside an editable cell: text to the frame */
  --space-1: 8px;    /* inside a control, glyph and text */
  --space-2: 12px;   /* between fields in a group */
  --space-3: 16px;   /* card header, cell vertically */
  --space-4: 20px;   /* card body, cell horizontally */
  --space-5: 24px;   /* widget, window, gap between cards */
  --space-6: 32px;   /* between sections of a page */

  --control-sm: 36px;
  --control: 40px;
  --control-lg: 48px;
  --control-touch: 48px;
  --field: 44px;
  --field-touch: 52px;
  --icon-btn: 40px;
  --icon-btn-touch: 48px;

  /* Inner horizontal insets of controls: the room between the frame and the text. Not layout
     steps — a button is padded by its own rule, not by the grid — so they live apart. */
  --inset-btn: 18px;       /* ordinary button */
  --inset-control: 14px;   /* field, quiet and small button, filter tile */
  --inset-tile: 16px;      /* choice tile on a form */
  --inset-badge-x: 8px;    /* badge, horizontal */
  --inset-badge-y: 3px;    /* badge, vertical */
  --inset-badge-lg-x: 14px;
  --inset-badge-lg-y: 4px;
  --inset-row: 10px;       /* vertical inside a row element: menu item, tab, textarea, message */
  --inset-btn-lg: 22px;    /* large button */
  --inset-tip-x: 10px;     /* tooltip */
  --inset-tip-y: 6px;
  --inset-frame: 3px;      /* frame of a segmented control around tiles */
  --inset-mark: 3px;       /* gap between the required-field asterisk and the label */

  /* Widths by the role of the content, not by the screen (core.md §4.15). A page decides
     which role a block plays; the width follows. */
  --w-prose: 68ch;         /* text that is read: an explanation, an explanation column */
  --w-form: 520px;         /* a one-column form: half the container, does not grow with the monitor */
  --w-field-short: 220px;  /* a short field without a pair: date, amount */
  --w-wide: 1100px;        /* the page column under the top header (the old kinvoice.app shell) */
  --w-editor: 1340px;      /* the document editor's page column: form + A4 sheet (product-kit.md §4a, layout 3) */
  --w-editor-form: 420px;  /* the editor's form column: the left half of the old constructor (product-kit.md §4a) */
  --w-sheet: 794px;        /* the A4 sheet at 100 % (210 mm at 96 dpi); 596 px at 75 % (product-kit.md §4a) */
  --w-col-narrow: 110px;   /* the one narrow column (core.md §5.1): a table's state badge, the editor's Qty «2,000,000.000» */
  --w-tooltip: 260px;      /* tooltip: a short phrase, not a paragraph */
  --w-toast: 420px;        /* toast */
  --field-multiline: 96px; /* minimum height of a textarea: three lines */

  --glyph: 20px;         /* a standalone icon button */
  --glyph-head: 24px;    /* a header button without a frame */
  --glyph-inline: 1em;   /* in a control with text: equal to the font size */
  --glyph-nudge: 2px;    /* a nudge down to the optical centre of lowercase letters */

  --stroke: 1.6;
  --stroke-strong: 1.8;
  --stroke-mark: 2.2;

  /* While the table is shorter it takes its own height; taller — it scrolls with a pinned header. */
  --table-height: min(70vh, 760px);

  --bp-folded: 480px;    /* a foldable phone folded ≈400px */
  --bp-unfolded: 720px;  /* a foldable phone unfolded ≈900px */
  --bp-desktop: 1080px;
}