/* Single stylesheet for the platform.
Colour and spacing live in custom properties, and templates use semantic
HTML with few classes, so swapping in a CSS framework later is a change to
one element rather than to every template. */
:root {
--colour-bg: #f5f6f8;
--colour-surface: #ffffff;
--colour-text: #1c1f23;
--colour-muted: #5b6572;
--colour-accent: #1f6feb;
--colour-error: #b3261e;
--colour-warning: #a15c00;
/* A message is a tint, an edge and a text colour, per level. Named here so that "what does a
warning look like" has one answer, and so a level cannot be half-defined at a call site. */
--colour-error-tint: #fdecea;
--colour-error-edge: #f2b8b5;
--colour-warning-tint: #fff8e6;
--colour-warning-edge: #f0d9a8;
--colour-notice: #14425e;
--colour-notice-tint: #e7f2f8;
--colour-notice-edge: #b3d4e5;
--colour-border: #d7dbe0;
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2.5rem;
/* The two widths this layout has. Named because the second one was written twice: the button
row's cap had to match the field column's, and a comment saying "matches `.form-field`'s
own" is two numbers agreeing by hand -- change one and the buttons stop ending where the
fields end, silently and only on wide windows. One declaration, referenced twice, and the
alignment cannot come apart.
`ch`, not `rem`, and that is the whole of what could be made native here. `ch` is the width
of the font's own "0" glyph, so the browser derives the pixels and the column follows the
typeface instead of being nailed to it. It was `34rem`; measured in this deployment's
system-ui at 16px, 34rem is 544px is 59.4ch, so 60ch is the same column said in the unit
that explains it -- "about sixty characters" is WHY a field is that wide, where 544px is
only how wide it ended up.
What this does NOT do is remove the choice, and no unit can. Every other number this
stylesheet has removed had something to derive from: two buttons that must match take the
width of the wider one (a shared grid column), two texts on a line take the browser's
baseline, a footer pushed right takes what is left (`margin-left: auto`). Nothing in the
content says how wide a text input should be. Sixty is still somebody's decision -- it is
now a decision in the units of the thing being decided, made ONCE, rather than a size.
The structural alternative -- put the cap on a container and give the children no width at
all, so the alignment comes from the DOM instead of from a shared token -- was measured
against the actual markup and rejected. It cannot sit on `