/* ==========================================================================
ORNO — Latin, "I adorn": the dress every app of the house wears.
Neo-brutalist, retro-technical: cream paper, charcoal ink, one burnt-orange
accent; monospace body, condensed black caps for display; sharp corners and
hard offset shadows on whatever is primary. A pressed button trades its
shadow for the distance it travelled.
Consuming it — three lines in , and one before anything paints:
orno-theme.js is tiny and must run before the first paint, or the page shows
light for a frame and then turns dark. The house faces are the app's own
choice to load, and they are served from here rather than from Google — no
third party learns a visitor's IP address on every page load:
Theming: `data-theme="dark"` or `"light"` on decides; without the
attribute the OS does. (`data-vm-theme` is honoured too, for the app that
spoke it first.) Every colour is declared once, for both themes, with
light-dark() — so the two can never drift apart.
Browsers: the current versions of Chrome, Edge, Safari and Firefox, and no
further back than light-dark() and :has() reach — Chrome 123, Safari 17.5,
Firefox 120 (all shipped in 2024). An older browser gets readable, unstyled-
looking pages rather than broken ones.
Two addresses, and the choice is yours:
/v1/ the moving edge. Never changes meaning — additions may come,
removals may not, and whatever would move your layout arrives
as /v2/. Cached five minutes. Cannot be hashed, because bytes
that change by design carry no integrity hash.
/v1.2.3/ one release, frozen. These bytes never change, so they are
served immutable for a year and carry an SRI hash. A fix
arrives as a new version; nothing is ever edited in place.
Pin if you would rather choose when to take a change. Float if you would
rather not think about it. `npm run release:check` enforces both promises —
that a cut release is still its own bytes, and that /v1/ has not dropped a
name somebody already wrote down.
========================================================================== */
/* ---- tokens ---- */
/* Every box measures itself the way people expect: padding and border inside the width you
asked for, not added to it.
This is here because the same bug arrived six times. A component is given width:100% or
min-height:100dvh, then padding of its own, and is quietly that padding too big — a wide
button wider than the card holding it (1.4.0), a login page exactly 96px taller than the
screen although everything on it fits (found deployed, 1.5.0). Five separate rules in this
file already carried box-sizing:border-box, each added the day someone met the bug again.
One rule retires all five, and the ones still waiting to be found.
It moves layouts, which /v1 promises not to do, and that promise is kept where it matters:
the only consumer today pins a frozen release, and frozen releases never change. */
*, *::before, *::after { box-sizing: border-box; }
:root {
color-scheme: light dark;
/* Which of the two addresses you loaded. `v1` is the moving edge: always current, never
pinnable, no integrity hash possible. A pinned copy at /v1.2.3/ says its own version
here instead — so a page, or a bug report, can answer "what did I actually load?"
rather than guess:
getComputedStyle(document.documentElement).getPropertyValue('--orno-version') */
--orno-version: 'v1';
--font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--font-display: 'Archivo Black', Impact, 'Arial Black', sans-serif;
/* An app may wear its own accent without forking anything — but it is THREE names, not two,
and the third is the one everybody forgets.
--acc-ink is what gets painted ON the accent: the label of a primary button, a chip, the
nav item you are standing on. It was hard-coded to the paper colour, which happens to work
for a burnt orange and fails for half of the colours a team would actually choose — paper
on a typical amber is 2.0:1, on a lime 1.9:1. Whichever of paper or ink clears 4.5:1
against your accent is the right value here; `npm run contrast` will tell you. */
--accBase: #B5451B;
--accBaseDark: #DD6530;
/* Paper by day, ink by night — and that is the whole reason this is a token rather than a
constant. The dark accent is deliberately brighter, because --acc has to work as link text
on a dark ground; paper on top of that brighter orange is 3.3:1, which is not enough for
the label of a button. The answer genuinely differs between the two themes. */
--acc-ink: light-dark(#FAF8F3, #0A0908);
/* The spacing scale. Components still carry pixel values of their own that do
not sit on it (9, 10, 11, 13, 14…), which is why `compact` below has to
retune a handful of them by hand. Putting every component on the scale
would move layouts, so it waits for /v2 — see "Known debts" in the book. */
--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 22px; --s6: 32px;
/* The type scale, reading end. Ten steps inside four pixels is more steps than
anyone can tell apart; the names are what /v1 published, so the values stay
exactly where they were, and /v2 collapses them. --fs-nano, --fs-caps and
--fs-text name three sizes that were only ever literals. */
--fs-nano: 10px; --fs-caps: 10.5px; --fs-micro: 11px; --fs-fine: 11.5px;
--fs-note: 12px; --fs-ui: 12.5px; --fs-text: 13px; --fs-body: 13.5px;
/* The display end, and the reason it exists. The scale used to stop at 13.5 and
start again at 26, and seven rules lived in that gap as bare numbers — 14,
15.5, 16, 17, 18, 22 and a clamp — so "every size comes from the scale" was
true of the small end only. They are named after what wears them rather than
after a rank, because that is honestly what they are: seven decisions taken
one at a time, not a ratio. Their values are unchanged, because changing one
would move a layout and that is what /v2 is for. */
--fs-lead: 14px; /* the line under a door title */
--fs-sub: 15.5px; /* a stat's figure */
--fs-mark: 16px; /* a large avatar's initials, a section head */
--fs-brand: 17px; /* the wordmark beside a logo */
--fs-act: 18px; /* the one round act on a tab bar */
--fs-card: 22px; /* a door card's title */
--fs-title: 26px; /* a page title */
--fs-hero: clamp(26px, 3.4vw, 40px); /* the door's own headline */
--z-menu: 60; --z-dialog: 80; --z-toast: 90;
--t-fast: 150ms; --t-mid: 200ms; --t-slow: 250ms;
/* The offset shadow, by the weight of what casts it. */
--sh-btn: 3px; --sh-card: 4px; --sh-menu: 5px; --sh-dialog: 6px; --sh-door: 8px;
/* Nothing a thumb must hit may be smaller than this. WCAG 2.2 asks 24px;
a phone asks more, so the house asks more. */
--hit: 32px;
/* And a thumb asks more still. 32 is comfortable under a mouse, which is what this number was
chosen for; it is not comfortable under a finger, and the calendar is forty-two of them in
a 262px popup — the one place in the system where the target IS the whole control. Apple
asks 44 and Android 48; 44 keeps a seven-column month inside a 390px screen with room to
spare. Anything already larger is unaffected: every use is a floor, not a size. */
@media (pointer: coarse) {
--hit: 44px;
}
/* Two widths, and no more. A media query cannot read a custom property, so
these are written out at every use — but there are only two numbers to
remember, and an app that invents a third is inventing a layout nobody
else in the house has.
--bp-phone a hand: one column, tables stack, the bar goes to the edge
--bp-lap no room for a rail beside the work: the shell and door fold */
--bp-phone: 560px; --bp-lap: 900px;
/* How wide running text may get before it is hard to find the next line. */
--measure: 68ch;
/* ---- the palette ----
Declared once, both themes at once. --edge is the hard offset shadow;
--line the silhouette of an emphasized block. On paper both are ink; at
night the shadow stays black, but a block needs a light line or it melts
into the ground.
--bd is the visible boundary of every control, so it clears 3:1 against
both grounds (WCAG 1.4.11). --bd2 only rules one row off from the next,
which is decoration, and stays quiet. */
--bg: light-dark(#F0EDE5, #1C1916);
--sf: light-dark(#FAF8F3, #262219);
--bd: light-dark(#94876F, #766B55);
--bd2: light-dark(#DDD7CA, #37312A);
--tx: light-dark(#221F1A, #F0EAE0);
--mut: light-dark(#655E50, #A49B8A);
--edge: light-dark(#26221C, #0A0908);
--line: light-dark(#26221C, #C9C0B0);
--acc: light-dark(var(--accBase), var(--accBaseDark));
--gain: light-dark(#2E7443, #7FBE8E);
--loss: light-dark(#B02323, #E0705C);
--warn: light-dark(#8A5F0C, #D9A84E);
}
/* An explicit choice overrules the OS, and tells the browser too — so the
scrollbars, the form controls it still draws itself and the caret all turn
with the page instead of staying stubbornly light. */
:root[data-theme="light"], :root[data-vm-theme="light"] { color-scheme: light; }
:root[data-theme="dark"], :root[data-vm-theme="dark"] { color-scheme: dark; }
/* Tighter, for a screen that is all figures — a ledger, a table, an admin tool.
Set it on the root or on one pane:
. It tightens
the spacing scale and the rows built on it, and deliberately leaves type size
and target sizes alone: a row can sit closer to the next without a thumb
losing its mark or a word losing its legibility. */
[data-density="compact"] {
--s1: 3px; --s2: 6px; --s3: 9px; --s4: 12px; --s5: 16px; --s6: 24px;
}
/* The rows that carry figures do not sit on the spacing scale yet, so they are
tightened by name. Every one of these is a line /v2 gets to delete. */
[data-density="compact"] .tbl tbody td,
[data-density="compact"] .tbl thead th { padding:6px 10px; }
[data-density="compact"] .ledger__grid { padding:7px var(--s4); }
[data-density="compact"] .fold-list__head { padding:9px var(--s3); }
[data-density="compact"] .fold-list__body { padding:0 var(--s3) 10px; }
/* ---- what each tag is ----
A custom element is `display: inline` until something says otherwise, and for the whole life
of this system two things said otherwise: the Angular components through host metadata, and
the elements in orno.js through `this.style.display ||= …`. Two implementations of one fact,
written in two languages, and the stylesheet that is supposed to be the single source of
truth said nothing at all about it.
Both wrote it as an INLINE style, which is the highest specificity short of !important — so
the one declaration an app could not override was the one it was most likely to want to.
Here instead, once, for both layers: the tags are the same tags. It is also the earlier
answer. CSS applies at parse time, where an upgrade runs when the script arrives, so a
server-rendered page no longer lays out inline for a frame and then reflows.
---------------------------------------------------------------------------------------- */
orno-accordion, orno-accordion-item, orno-amount-field, orno-back-link, orno-card,
orno-checkbox, orno-code,
orno-combobox, orno-door-card, orno-drawer, orno-empty, orno-error-summary, orno-field,
orno-fieldset,
orno-file-field, orno-fold, orno-frame, orno-ledger, orno-menu, orno-meter, orno-nav-item,
orno-option, orno-page-head, orno-pick, orno-radio, orno-select, orno-skeleton, orno-stamp,
orno-switch, orno-tab-panel, orno-table, orno-tabs, orno-textarea { display:block; }
orno-facts, orno-rail-brand, orno-tab, orno-tabbar-act,
orno-tabbar-item { display:contents; }
orno-seg-group, orno-theme-toggle { display:inline-flex; }
orno-badge { display:inline-block; }
orno-radio-group { display:grid; }
orno-rail { display:flex; }
orno-pick-group { display:grid; gap:var(--s3); }
orno-date-field { display:block; position:relative; }
/* ---- ground rules ---- */
html, body { margin:0; padding:0; }
body {
-webkit-font-smoothing:antialiased;
background:var(--bg); color:var(--tx);
font-family:var(--font-mono); font-size:var(--fs-body); line-height:1.5;
}
/* Sharp corners are the system: every stray radius is flattened here rather than policed in a
hundred class definitions, and that includes the corners a browser puts on native controls.
It is a wide rule, so it comes with two ways out — because a design system that cannot be
escaped is one teams work around instead of with:
.round this one thing keeps its corners (an avatar, a logo, a map pin)
[data-orno-ignore] nothing inside is touched — fence off an embedded third-party widget
Three :not()s give it the weight of three classes, which is enough to beat ordinary
component CSS without !important — so an app that really means it can still win. Two things
are exempt by name, for the same reason: a spinner only reads as a spinner while it is
round, and a radio only reads as one-of-many while it is. */
*:not(.round):not(.spin):not(.radio):not([data-orno-ignore]):not([data-orno-ignore] *),
*:not(.round):not(.radio)::before,
*:not(.round):not(.radio)::after { border-radius:0; }
/* Headings wear the display face; their sizes stay their own. */
/* A bare h1 wears the display face. An app's own heading rule beats this one, as it should —
there is no !important here. */
h1 {
font-family:var(--font-display);
font-weight:400;
text-transform:uppercase;
letter-spacing:0.01em;
}
a { color:var(--acc); }
@media (hover: hover) { a:hover { color:var(--tx); } }
@keyframes ornoSpin { to { transform:rotate(360deg); } }
@keyframes vmSpin { to { transform:rotate(360deg); } } /* the older name, kept alive */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration:0.01ms !important;
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
scroll-behavior:auto !important;
}
/* Except the spinner. A spinner frozen mid-turn says nothing at all — worse than nothing,
because it reads as a page that has hung. It slows down instead of stopping. */
.spin,
[aria-busy='true']::before {
animation-duration:2.4s !important;
animation-iteration-count:infinite !important;
}
}
/* ---- hover & focus ----
Hover lives IN the component classes below; it only speaks to a pointer that can
hover (on a touchscreen :hover is sticky). Focus is one deliberate ring, everywhere.
The scp0–scp7 classes beneath are DEPRECATED aliases from the first export — they
keep old templates alive and die in /v2. */
/* The keyboard's ring: every act answers focus the same way.
The three classes at the end are not decoration. A tick, a radio and a switch are
elements, which are none of the tags above, so for the whole life of the system they wore
the BROWSER's ring instead of this one — measured at `1px auto rgb(16,16,16)` in Chrome,
and something else in every other engine. "One deliberate ring, everywhere" was true of
everything except the three controls a form is mostly made of. */
:where(button, a, [role="radio"], [role="option"], [tabindex],
.check, .radio, .switch):focus-visible {
outline: 2px solid var(--acc);
outline-offset: 2px;
}
.in:focus { border-color:var(--acc); outline:none; box-shadow:2px 2px 0 var(--acc); }
@media (hover: hover) {
.btn:hover:not(:disabled) { border-color:var(--tx); }
.btn-acc:hover:not(:disabled) { opacity:0.9; }
.btn-ghost:hover:not(:disabled) { border-color:var(--tx); }
.btn-quiet:hover:not(:disabled) { color:var(--tx); }
.btn-danger:hover:not(:disabled) { background:color-mix(in oklab, var(--loss) 8%, transparent); }
.btn-link:hover, .btn-link-sm:hover { color:var(--tx); }
.tabbar__act:hover { opacity:0.9; }
/* The controls answered focus and nothing else, so until a keyboard arrived they read as
decoration. The same border-darkens-to-ink the buttons use. */
.in:hover:not(:disabled):not(:focus) { border-color:var(--tx); }
.check:hover:not(:disabled):not(:checked),
.radio:hover:not(:disabled):not(:checked),
.switch:hover:not(:disabled):not(:checked) { border-color:var(--tx); }
/* And once it is ticked it is filled with the accent, which has no room for a darker edge —
so it dims, the way every other accent-filled surface answers. Without this a checked box
was the one control in the system that went dead under the pointer: you could not tell it
was still yours to un-tick. */
.check:hover:not(:disabled):checked,
.radio:hover:not(:disabled):checked,
.switch:hover:not(:disabled):checked { opacity:0.9; }
.tabbar__item:hover:not(.on) { color:var(--tx); }
.dropzone:hover { border-color:var(--tx); }
.btn-icon:hover:not(:disabled) { border-color:var(--tx); color:var(--tx); }
.nav-item:not(.on):hover { background:color-mix(in oklab, var(--tx) 6%, transparent); }
.opt:hover { background:color-mix(in oklab, var(--tx) 6%, transparent); }
/* The same line, in the other kind of list. A menu's option answered the pointer and a
select's did not, for the whole life of the custom list: the only thing drawn in there was
--active, which is the KEYBOARD's place and appears under no pointer at all. So a mouse
user walked the list with nothing following the hand. */
.combo__option:not(.combo__option--active):not([aria-disabled="true"]):hover {
background:color-mix(in oklab, var(--tx) 6%, transparent);
}
.seg:not(.on):hover { color:var(--tx); }
.switch-btn:hover { border-color:var(--tx); }
.settings-btn:hover { color:var(--tx); }
.pick:not(.on):hover { border-color:var(--tx); }
.pick-dash:not(.on):hover { border-color:var(--tx); }
.close-btn:hover { opacity:0.9; }
}
@media (hover: hover) {
.scp0:hover { background:color-mix(in oklab, var(--tx) 6%, transparent) !important; }
.scp1:hover { opacity:0.9 !important; }
.scp2:hover { color:var(--tx) !important; }
.scp3:hover { border-color:var(--tx) !important; }
.scp5:hover { border-color:var(--acc) !important; }
.scp6:hover { border-color:var(--acc) !important; color:var(--acc) !important; }
.scp7:hover { border-color:var(--acc) !important; color:var(--acc) !important; }
}
.scp4:focus { border-color:var(--acc) !important; outline:none !important; box-shadow:2px 2px 0 var(--acc) !important; }
.scp5:focus { border-color:var(--acc) !important; outline:none !important; box-shadow:2px 2px 0 var(--acc) !important; }
/* ---- pressed ----
"A pressed button trades its shadow for the distance it travelled" is the first thing this
stylesheet says about interaction, and for the whole life of the system three surfaces did
it: the accent button, the door's close and the tab bar's round act. Everything else you
press answered nothing — you pushed it and the screen did not agree that you had.
There are two kinds of surface here, so there are two answers. Anything casting the offset
shadow spends it on the distance, which is the rule as written. Anything flat takes the press
into the paper instead: a hint of ink under the label, gone the moment you let go. Anything
already filled with the accent has no room for ink, so it dims the way its hover does.
None of the three moves a layout — a transform, a background and an opacity are all outside
the box — so all three are additions /v1 is allowed to make. Hover says "this answers to
you"; pressed says "it heard you". A surface with only the first is a surface you are never
quite sure you hit. */
/* It casts a shadow, so it can spend one. */
.nav-item.on:active,
.pick.on:active { transform:translate(var(--sh-btn),var(--sh-btn)); box-shadow:none; }
/* It is filled with the accent: no room for ink, so it dims. */
.seg.on:active, .tabbar__item.on:active { opacity:0.9; }
/* It is flat: the press goes into the paper. */
.btn:active:not(:disabled) { background:color-mix(in oklab, var(--tx) 10%, var(--sf)); }
.btn-ghost:active:not(:disabled), .btn-quiet:active:not(:disabled),
.btn-icon:active:not(:disabled), .opt:active, .seg:active:not(.on),
.nav-item:active:not(.on), .pick:active:not(.on), .pick-dash:active,
.tabs__tab:active, .tabbar__item:active:not(.on),
.day__pick:active, .switch-btn:active, .dropzone:active {
background:color-mix(in oklab, var(--tx) 8%, transparent);
}
.btn-danger:active:not(:disabled) { background:color-mix(in oklab, var(--loss) 16%, transparent); }
/* A word darkens to ink under the hand, and there it stops.
*
* These four had a :active rule saying exactly what their :hover already said, so holding one
* down looked identical to pointing at it — measured, not guessed. The rules are gone rather
* than rewritten: a word has nowhere further to go without moving, and moving text under a
* finger is worse than saying nothing. What changed is the inventory, which used to count a
* pressed state these four have never had. Nothing on screen moved.
*
* .btn-link · .btn-link-sm · .back-link · .settings-btn · .tbl__sort
*/
/* ---- utilities ---- */
/* Said to a screen reader, shown to nobody: skip links, live regions, the label a mark cannot carry.
inset-block-start/inset-inline-start are not decoration, and their absence was a real bug.
Absolutely positioned with no offsets, the element sits at its STATIC position — which, for a
label inside a table that is 648px wide inside a 390px pane, is 426px into the document. It is
one pixel wide and invisible, but the page still has to be wide enough to contain it, so a
phone rendered the whole book 37px wider than the screen and slid sideways under the thumb.
Nothing showed: the culprit is the one element on the page nobody can see.
Pinning it to the origin of whatever contains it costs nothing — a screen reader reads DOM
order, never coordinates — and makes it arithmetically impossible for the label to widen a
page ever again. */
.visually-hidden {
position:absolute !important; inset-block-start:0; inset-inline-start:0;
width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* The first thing a keyboard meets: out of the way until it is wanted, then unmissable. */
.skip-link {
position:absolute; left:var(--s2); top:-100px; z-index:calc(var(--z-toast) + 1);
background:var(--acc); color:var(--acc-ink); border:1px solid var(--edge);
box-shadow:var(--sh-btn) var(--sh-btn) 0 var(--edge); padding:10px 14px;
font-size:var(--fs-fine); font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
text-decoration:none; transition:top var(--t-fast);
}
.skip-link:focus { top:var(--s2); color:var(--acc-ink); }
/* ---- text ---- */
.h-sec { font-size:var(--fs-text); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.h-sub { font-size:var(--fs-note); color:var(--mut); margin-top:2px; }
.h2 { font-size:var(--fs-ui); font-weight:700; margin:0 0 12px; letter-spacing:0.06em; text-transform:uppercase; }
.h2-tight{ font-size:var(--fs-ui); font-weight:700; margin:0 0 4px; letter-spacing:0.06em; text-transform:uppercase; }
.mut { color:var(--mut); }
.note { font-size:var(--fs-note); color:var(--mut); }
.fine { font-size:var(--fs-fine); color:var(--mut); }
.micro { font-size:var(--fs-micro); color:var(--mut); }
.caps { font-size:var(--fs-caps); color:var(--mut); letter-spacing:0.09em; text-transform:uppercase; }
.num { font-variant-numeric:tabular-nums; }
.b { font-weight:700; }
/* The page's own title and its lead — every screen introduces itself the same way. */
.page-title { font-size:var(--fs-title); margin:0; letter-spacing:-0.015em;
font-family:var(--font-display); font-weight:400; text-transform:uppercase; }
.page-lead { font-size:var(--fs-text); color:var(--mut); margin:8px 0 0; max-width:520px; }
/* A list or card item's own line: its title, and the note under it. */
.item-title { display:block; font-size:var(--fs-text); font-weight:700; }
.item-note { display:block; font-size:var(--fs-fine); color:var(--mut); margin-top:3px; }
.p-mut { font-size:var(--fs-ui); color:var(--mut); margin:0; }
/* ---- forms ---- */
.blk { display:block; }
.blk-wide { display:block; grid-column:1 / -1; }
.lbl { display:block; font-size:var(--fs-caps); font-weight:700; margin-bottom:7px;
letter-spacing:0.09em; text-transform:uppercase; }
.in { font:inherit; font-size:var(--fs-text); width:100%; padding:9px 11px;
border:1px solid var(--bd); background:var(--sf); color:var(--tx); }
.in-num { text-align:end; font-variant-numeric:tabular-nums; }
/* The door's big field: ink border and the accent's own offset shadow. */
.in--door { padding:12px 13px; border-color:var(--edge); background:var(--bg);
box-shadow:4px 4px 0 var(--acc); }
.in--door:focus { outline:none; border-color:var(--acc); }
.hint { display:block; font-size:var(--fs-fine); color:var(--mut); margin-top:6px; }
/* A field that was answered wrongly, and the line that says so. */
.in--error { border-color:var(--loss); }
.in--error:focus { border-color:var(--loss); box-shadow:2px 2px 0 var(--loss); }
.fault { display:block; font-size:var(--fs-fine); color:var(--loss); margin-top:6px; }
input[type="range"] { -webkit-appearance:none; appearance:none; height:20px; background:transparent; cursor:pointer; width:100%; }
input[type="range"]::-webkit-slider-runnable-track { height:2px; background:var(--bd); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:13px; height:13px; background:var(--acc); margin-top:-6px; border:1px solid var(--line); }
input[type="range"]::-moz-range-track { height:2px; background:var(--bd); }
input[type="range"]::-moz-range-thumb { width:11px; height:11px; background:var(--acc); border:1px solid var(--line); }
/* ---- buttons ----
One act, seven dresses. Everything they share is said once here; each class below says only
what makes it itself. The names are exactly what /v1 published and nothing computes
differently — this is the same wardrobe with the seams taken in, so a change to the act's
type or weight is one edit rather than seven. */
.btn, .btn-acc, .btn-ghost, .btn-quiet, .btn-danger, .btn-link, .btn-link-sm, .btn-icon {
font:inherit; cursor:pointer;
}
/* All but the icon, which carries a glyph and no caps machinery. */
.btn, .btn-acc, .btn-ghost, .btn-quiet, .btn-danger, .btn-link, .btn-link-sm {
text-transform:uppercase;
}
/* The five that are shaped like a button. An anchor wearing one of these is a button to the eye,
so it loses the browser's underline; the two shaped like a word keep theirs, because there they
are the point. */
.btn, .btn-acc, .btn-ghost, .btn-quiet, .btn-danger {
font-size:var(--fs-fine); font-weight:700; letter-spacing:0.06em; padding:8px 14px;
text-decoration:none;
}
/* The two that are shaped like a word. */
.btn-link, .btn-link-sm {
font-weight:700; letter-spacing:0.05em; border:none; background:transparent; color:var(--acc);
}
.btn { border:1px solid var(--bd); background:var(--sf); color:var(--tx); }
.btn-ghost { border:1px solid var(--bd); background:transparent; color:var(--tx); padding:8px 16px; }
.btn-quiet { border:none; background:transparent; color:var(--mut); padding:8px 10px;
font-weight:400; }
/* The primary act, and the only one that casts a shadow: pressing it trades the shadow for
the distance it travelled. */
.btn-acc { border:1px solid var(--line); background:var(--acc); color:var(--acc-ink);
box-shadow:var(--sh-btn) var(--sh-btn) 0 var(--edge); }
.btn-acc:active { transform:translate(var(--sh-btn),var(--sh-btn)); box-shadow:none; }
/* The dangerous act: bordered in loss red, never solid — destruction should not look primary. */
.btn-danger { border:1px solid var(--loss); background:transparent; color:var(--loss); }
.btn-link { font-size:var(--fs-note); padding:0 2px; }
.btn-link-sm{ font-size:var(--fs-micro); padding:0; }
/* A square icon affordance: one glyph, no caps machinery. The box stays 30×26 so no row
moves; the thumb gets --hit anyway, because a hit area costs nothing and growing the button
itself would have shifted every toolbar in the house. */
.btn-icon { position:relative; display:inline-flex; align-items:center; justify-content:center;
width:30px; height:26px; padding:0; flex:none;
border:1px solid var(--bd); background:transparent; color:var(--mut); }
.btn-icon::after { content:''; position:absolute; top:50%; left:50%; translate:-50% -50%;
width:max(100%, var(--hit)); height:max(100%, var(--hit)); }
/* The wide act: a door-sized button, block-level, the card's shadow. */
.btn--wide { display:flex; align-items:center; justify-content:center; gap:10px;
width:100%; padding:12px 14px; font-size:var(--fs-ui); letter-spacing:0.08em; }
.btn--wide:disabled { color:var(--mut); cursor:default; border-style:dashed; }
.btn-acc--wide { display:block; width:100%; padding:13px 14px; font-size:var(--fs-ui);
letter-spacing:0.08em; box-shadow:var(--sh-card) var(--sh-card) 0 var(--edge); }
.btn-acc--wide:active { transform:translate(var(--sh-card),var(--sh-card)); box-shadow:none; }
/* Every act knows how to be underway.
*
* One team building on this system invented twelve of these by hand, in six different visual
* treatments, with seven different words for the same state — and five of the actions had no
* re-entrancy guard at all, relying on a `disabled` attribute somebody had remembered to bind.
* A button with no opinion about waiting is a button every screen has to teach again.
*
* `aria-busy` says it, the spinner shows it, and the button is genuinely unpressable while it
* is true: not a style, a state. */
.btn[aria-busy='true'], .btn-acc[aria-busy='true'], .btn-ghost[aria-busy='true'],
.btn-quiet[aria-busy='true'], .btn-danger[aria-busy='true'], .btn-icon[aria-busy='true'],
.btn-link[aria-busy='true'], .btn-link-sm[aria-busy='true'] {
cursor:progress; pointer-events:none;
}
/* The mark, in the button's own colour, before whatever it says — drawn by CSS alone, so the
element layer gets it without a line of JavaScript. It replaces nothing, so the label does
not jump and the width does not move. */
/* The icon button is the exception, and the states gallery is what found it. Everywhere else
the mark goes IN FRONT of the label so the width does not jump; an icon button has no label
and a fixed 30×26 box, so prepending crammed a spinner and a glyph into a space meant for
one of them. Here the mark replaces the glyph — there is no width to protect and nothing to
read underneath. */
.btn-icon[aria-busy='true'] { color:transparent; position:relative; }
.btn-icon[aria-busy='true']::before {
position:absolute; inset:0; margin:auto;
}
.btn[aria-busy='true']::before, .btn-acc[aria-busy='true']::before,
.btn-ghost[aria-busy='true']::before, .btn-quiet[aria-busy='true']::before,
.btn-danger[aria-busy='true']::before, .btn-icon[aria-busy='true']::before,
.btn-link[aria-busy='true']::before, .btn-link-sm[aria-busy='true']::before {
content:''; display:inline-block; width:10px; height:10px;
margin-inline-end:7px; vertical-align:-1px;
border-radius:50%; border:1.5px solid currentColor; border-top-color:transparent;
animation:ornoSpin 700ms linear infinite;
}
/* An icon button has no label to sit beside; the mark is the whole of it. */
.btn-icon[aria-busy='true']::before { margin-inline-end:0; }
/* Every act knows how to stand down: muted, dashed, shadowless, unmoved. */
/* Off, and saying so. Muted ink, no shadow, no cursor that promises anything — and for
anything that carries a border, the border goes dashed, which is the house's word for "this
is a shape, not an offer". The second rule is for the surfaces drawn without one: a dashed
border on something that never had a border is a border appearing on disable.
Ten of these were added after counting: a list of options, a card you choose, a place in the
index, a tab, a day in a calendar — all things an app has to be able to switch off, and none
of which had any way to look off. */
.btn:disabled, .btn-acc:disabled, .btn-ghost:disabled, .btn-danger:disabled,
.btn-quiet:disabled, .btn-link:disabled, .btn-link-sm:disabled, .btn-icon:disabled,
.close-btn:disabled, .seg:disabled, .switch-btn:disabled,
.opt:disabled, .pick:disabled, .pick-dash:disabled, .nav-item:disabled,
.tabs__tab:disabled, .tabbar__item:disabled, .tabbar__act:disabled,
.settings-btn:disabled, .fold-list__head:disabled, .day__pick:disabled {
color:var(--mut); background:transparent; border-color:var(--bd);
border-style:dashed; box-shadow:none; cursor:default; transform:none;
}
/* Drawn without a border, so they stay without one. */
.btn-quiet:disabled, .btn-link:disabled, .btn-link-sm:disabled,
.opt:disabled, .tabs__tab:disabled, .tabbar__item:disabled,
.settings-btn:disabled, .fold-list__head:disabled { border:none; }
/* And the two that were ALREADY muted ink at rest, so muting them changed nothing: switched
off, they looked exactly like switched on. The states gallery is what showed it — two tiles
side by side, one labelled default and one labelled disabled, and no way to tell which was
which. Half opacity is what the tick, the radio and the switch already use for the same
problem, so it is the answer the system already had. */
.btn-quiet:disabled, .settings-btn:disabled { opacity:0.5; }
/* A field had no disabled look at all — not a muted one, not a dashed one, nothing. The check
had been counting `:hover:not(:disabled)` as if it styled the state it excludes. */
.in:disabled {
color:var(--mut); background:transparent; border-style:dashed; cursor:default;
}
/* ---- layout & marks ---- */
.grow { flex:1; }
.row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.panel { position:relative; border:1px solid var(--line); background:var(--sf); overflow:hidden;
box-shadow:var(--sh-card) var(--sh-card) 0 var(--edge); }
.panel-plain { margin-top:14px; border:1px solid var(--bd2); background:var(--bg); overflow:hidden; }
.badge { font-size:var(--fs-nano); color:var(--mut); border:1px solid var(--bd); padding:2px 7px;
text-transform:uppercase; letter-spacing:0.07em; font-weight:700; }
/* The quiet badge keeps its sentence case: a label, not a shout. */
.badge--quiet{ text-transform:none; letter-spacing:0.02em; font-weight:400; font-size:var(--fs-caps); }
/* A solid ink-on-orange chip: the loudest label in the system. */
.chip { display:inline-block; background:var(--acc); color:var(--acc-ink); font-size:var(--fs-caps);
font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:5px 11px; }
/* A fold: the panel that unfolds under a row for a small task — a confirm, a mini-form.
It appears above the page, so it carries the hard shadow, like every surface that shows
up on interaction; --danger tints the destructive ones. */
.fold { border:1px solid var(--line); background:var(--sf); padding:14px 16px;
margin:10px 4px 4px 0; box-shadow:var(--sh-card) var(--sh-card) 0 var(--edge); }
.fold--danger { border-color:var(--loss); }
.fold__actions { display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
/* A floating menu panel: the one shape a dropdown takes. */
.menu-panel { position:absolute; z-index:var(--z-menu); background:var(--sf); border:1px solid var(--line);
padding:6px; box-shadow:var(--sh-menu) var(--sh-menu) 0 var(--edge); }
.opt { font:inherit; display:flex; align-items:baseline; gap:10px; width:100%; text-align:start;
font-size:var(--fs-text); padding:8px 10px; border:none; background:transparent;
color:var(--tx); font-weight:400; cursor:pointer; }
.opt.on { background:color-mix(in oklab, var(--acc) 12%, transparent); font-weight:700; }
/* Corner brackets: the registration marks that frame a major panel. */
.frame { position:relative; }
.frame::before { content:''; position:absolute; top:5px; left:5px; width:11px; height:11px;
border-top:1px solid var(--tx); border-left:1px solid var(--tx); pointer-events:none; }
.frame::after { content:''; position:absolute; bottom:5px; right:5px; width:11px; height:11px;
border-bottom:1px solid var(--tx); border-right:1px solid var(--tx); pointer-events:none; }
/* A card: every standing surface wears the same dress — silhouette line and the 4px shadow. */
.card { border:1px solid var(--line); background:var(--sf); padding:16px 18px;
box-shadow:var(--sh-card) var(--sh-card) 0 var(--edge); }
.card__title { margin:0; font-size:var(--fs-micro); font-weight:450; letter-spacing:0.05em;
text-transform:uppercase; color:var(--mut); }
/* A dashed invitation: the empty state every list shares. */
/* A sentence and, under it, the way out.
It was text-align:center and nothing else, so an empty state with an act in it put the act on
the same LINE as the sentence — "No accounts yet Connect a bank" — which reads as one run of
words with a button wedged in the middle of it. A grid stacks them and centres both, and for
an empty state that is only a sentence nothing moves at all. */
.empty-state { border:1px dashed var(--bd); padding:34px 20px; text-align:center;
display:grid; gap:var(--s4); justify-items:center;
font-size:var(--fs-ui); color:var(--mut); }
/* ---- lists, meters, segments ---- */
/* A row in a stacked list: ruled off from the one above, and the first from nothing. */
.sep { border-top:1px solid var(--bd2); }
.sep:first-child { border-top:none; }
/* A thin progress meter: the track, and a fill whose width the template binds. */
.meter { height:4px; background:var(--bd2); }
.meter-fill { height:4px; background:var(--acc); }
/* A floating chart annotation; the template binds its position. */
.chart-lbl { position:absolute; font-size:var(--fs-caps); color:var(--mut); pointer-events:none; }
/* A legend swatch; the template binds its colour. */
.swatch { width:9px; height:9px; }
/* A segmented choice: one segment on, the rest quiet. */
.seg { font:inherit; font-size:var(--fs-micro); padding:7px 16px; border:1px solid transparent;
background:transparent; color:var(--mut); font-weight:700; cursor:pointer;
text-transform:uppercase; letter-spacing:0.06em;
transition:background 150ms, color 150ms; }
.seg.on { background:var(--acc); color:var(--acc-ink); border-color:var(--line); }
/* ---- wizard ---- */
/* The step rail: a bar per step, lit up to where you are. */
.rail-bar { display:block; height:4px; background:var(--bd2); transition:background 200ms; }
.rail-bar.on { background:var(--acc); }
.rail-step__line { display:flex; align-items:baseline; gap:7px; margin-top:9px; }
.rail-no { font-size:var(--fs-caps); font-variant-numeric:tabular-nums; color:var(--mut); font-weight:700; }
.rail-no.on { color:var(--acc); }
.rail-lbl { font-size:var(--fs-micro); color:var(--mut); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; }
.rail-lbl.on { color:var(--tx); }
.rail-step { font:inherit; flex:1; text-align:start; border:none; background:transparent;
padding:0 14px 0 0; cursor:pointer; color:var(--tx); }
.rail-step:disabled { cursor:default; }
/* A choice card: one of a few mutually exclusive answers, lit when it is the answer. */
.pick { font:inherit; text-align:start; width:100%; border:1px solid var(--bd);
background:var(--sf); padding:14px 16px; cursor:pointer; color:var(--tx); }
.pick.on { border-color:var(--line); background:color-mix(in oklab, var(--acc) 10%, var(--sf));
box-shadow:var(--sh-btn) var(--sh-btn) 0 var(--edge); }
.pick-dash { font:inherit; text-align:start; width:100%; border:1px dashed var(--bd);
background:transparent; padding:14px 16px; cursor:pointer; color:var(--tx); }
.pick-dash.on { border-color:var(--line); background:color-mix(in oklab, var(--acc) 10%, var(--sf)); }
/* DEPRECATED — leaves with /v2. Use .btn-acc plus the real `disabled` attribute.
These looked disabled without being disabled, so a screen reader was told nothing and the
grey-on-grey text sat below the contrast bar. Kept alive so nothing breaks today. */
.next-btn { font:inherit; font-size:var(--fs-fine); padding:10px 22px; border:1px solid var(--bd);
background:transparent; color:var(--mut); cursor:not-allowed;
font-weight:700; text-transform:uppercase; letter-spacing:0.06em; opacity:0.55; }
.next-btn.ready { border-color:var(--line); background:var(--acc); color:var(--acc-ink); cursor:pointer; opacity:1;
box-shadow:var(--sh-btn) var(--sh-btn) 0 var(--edge); }
.next-btn.ready:active { transform:translate(var(--sh-btn),var(--sh-btn)); box-shadow:none; }
.save-btn { font:inherit; font-size:var(--fs-note); padding:12px 24px; border:1px solid var(--bd);
background:transparent; color:var(--mut); cursor:not-allowed; font-weight:700;
text-transform:uppercase; letter-spacing:0.06em; }
.save-btn.ready { border-color:var(--line); background:var(--acc); color:var(--acc-ink); cursor:pointer;
box-shadow:var(--sh-btn) var(--sh-btn) 0 var(--edge); }
.save-btn.ready:active { transform:translate(var(--sh-btn),var(--sh-btn)); box-shadow:none; }
/* ---- the one round thing ---- */
.spin { display:inline-block; width:10px; height:10px; border-radius:50%;
border:1.5px solid var(--bd); border-top-color:var(--acc);
animation:ornoSpin 700ms linear infinite; }
.spin--lg { width:11px; height:11px; }
/* ==========================================================================
The door — the sign-in storefront Servo wears; any app with a front step
can wear it too. Pitch left, bracketed card right.
========================================================================== */
.door {
min-height:100dvh;
display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
align-items:center; gap:48px;
max-width:1060px; margin:0 auto; padding:48px 32px;
}
.door__pitch { border-inline-end:1px solid var(--bd2); padding-inline-end:48px; }
.door__title { margin:36px 0 18px; font-family:var(--font-display); font-weight:400;
font-size:var(--fs-hero); line-height:1.12;
letter-spacing:-0.01em; text-transform:none; }
.door__lead { margin:0 0 30px; color:var(--mut); font-size:var(--fs-lead); max-width:44ch; }
.door__side { display:grid; gap:18px; justify-items:center; }
.brand { display:flex; align-items:center; gap:14px; font-weight:700; font-size:var(--fs-brand);
letter-spacing:0.1em; text-transform:uppercase; }
.brand__mark { display:grid; place-items:center; width:44px; height:44px; background:var(--acc);
border:2px solid var(--edge); box-shadow:4px 0 0 var(--edge); color:var(--acc-ink); }
.sell { display:grid; gap:20px; margin:0; padding:0; list-style:none; }
.sell__item { display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; }
.sell__icon { color:var(--acc); padding-top:2px; }
.sell__title { font-weight:700; font-size:var(--fs-text); letter-spacing:0.03em; text-transform:uppercase; }
.sell__note { display:block; color:var(--mut); font-size:var(--fs-ui); margin-top:2px; }
/* The door's card: bigger than .card, the 8px shadow, and four corner brackets. */
.door-card { position:relative; width:min(430px,100%); background:var(--sf);
border:1px solid var(--edge); box-shadow:var(--sh-door) var(--sh-door) 0 var(--edge);
padding:34px 36px 30px; }
.door-card__corners, .door-card__corners::before, .door-card__corners::after,
.door-card::before, .door-card::after { position:absolute; pointer-events:none; }
.door-card__corners { inset:8px; }
.door-card__corners::before, .door-card__corners::after,
.door-card::before, .door-card::after { content:''; width:14px; height:14px; }
.door-card__corners::before { top:0; left:0; border-top:2px solid var(--bd); border-left:2px solid var(--bd); }
.door-card__corners::after { bottom:0; right:0; border-bottom:2px solid var(--bd); border-right:2px solid var(--bd); }
.door-card::before { top:8px; right:8px; border-top:2px solid var(--bd); border-right:2px solid var(--bd); }
.door-card::after { bottom:8px; left:8px; border-bottom:2px solid var(--bd); border-left:2px solid var(--bd); }
.door-card__title { margin:0; text-align:center; font-family:var(--font-display); font-weight:400;
font-size:var(--fs-card); letter-spacing:0.02em; text-transform:uppercase; }
.door-card__sub { margin:8px 0 0; text-align:center; color:var(--mut); font-size:var(--fs-ui); }
.door-card__rule { border:none; border-top:1px solid var(--bd2); margin:20px 0 24px; }
.door-card__foot { margin:20px 0 0; text-align:center; color:var(--mut); font-size:var(--fs-fine); }
.door-card p { color:var(--mut); font-size:var(--fs-ui); }
.door-card .lbl { font-size:var(--fs-note); margin-bottom:8px; letter-spacing:0.06em; }
.door-card .btn-acc--wide { margin-top:26px; }
.door-card .btn--wide { margin-top:14px; }
/* The version line under the card. */
.stamp { color:var(--mut); font-size:var(--fs-fine); letter-spacing:0.14em; text-transform:uppercase; }
/* The narrow pane: the card is the job; the pitch folds to a header. */
@media (max-width: 900px) {
.door { grid-template-columns:minmax(0,1fr); gap:28px; align-content:start;
padding:28px 18px calc(28px + env(safe-area-inset-bottom)); }
.door__pitch { border-inline-end:none; padding-inline-end:0; }
.door__title { margin:22px 0 10px; }
.door__lead { margin-bottom:0; }
.sell { display:none; }
.door-card { padding:26px 22px 24px; }
}
/* ==========================================================================
The shell — the app frame's own vocabulary (Vesto's sidebar speaks it).
========================================================================== */
/* One rule for the whole index: the orange block means "you are here" — nothing else wears it,
and everything not chosen is plain ink. Inset by its own margin rather than by the rail's
padding, so the chosen block's shadow has somewhere to fall. */
.nav-item { font:inherit; display:flex; align-items:baseline; gap:8px; text-align:start;
width:calc(100% - 20px); margin-inline:10px;
font-size:var(--fs-micro); padding:7px 9px; border:1px solid transparent;
background:transparent; color:var(--tx); font-weight:700;
text-transform:uppercase; letter-spacing:0.05em;
cursor:pointer; transition:background var(--t-fast), color var(--t-fast),
box-shadow var(--t-fast); }
.nav-item.on { border-color:var(--line); background:var(--acc); color:var(--acc-ink);
box-shadow:var(--sh-btn) var(--sh-btn) 0 var(--edge); }
/* A chapter under a chapter: further in, and quieter. */
.nav-item--child { padding-inline-start:22px; font-size:var(--fs-caps); }
.nav-fig { font-size:var(--fs-micro); font-variant-numeric:tabular-nums; color:var(--mut); font-weight:400; }
.nav-item.on .nav-fig { color:var(--acc-ink); }
.close-btn { font:inherit; font-size:var(--fs-fine); padding:10px 12px; border:1px solid var(--line);
background:var(--acc); color:var(--acc-ink); cursor:pointer; font-weight:700; text-align:start;
text-transform:uppercase; letter-spacing:0.05em; box-shadow:var(--sh-btn) var(--sh-btn) 0 var(--edge); }
.close-btn:active { transform:translate(var(--sh-btn),var(--sh-btn)); box-shadow:none; }
.close-btn.on { background:var(--tx); border-color:var(--tx); color:var(--bg); }
.settings-btn { font:inherit; font-size:var(--fs-micro); border:none; background:transparent; color:var(--mut);
font-weight:700; cursor:pointer; padding:0 2px; text-align:start;
text-transform:uppercase; letter-spacing:0.07em; }
.settings-btn.on { color:var(--acc); }
.switch-btn { font:inherit; display:inline-flex; align-items:center; gap:10px; font-size:var(--fs-ui);
padding:6px 12px; border:1px solid var(--bd); background:var(--sf);
color:var(--tx); cursor:pointer; }
.switch-btn.open { border-color:var(--acc); }
/* ==========================================================================
Later arrivals — additive, so /v1/ keeps its promise.
========================================================================== */
/* A stat: one figure with its label above and its note below. */
.stat { display:grid; gap:3px; }
.stat__value { font-size:var(--fs-sub); font-weight:700; font-variant-numeric:tabular-nums; }
/* A select in the form's dress; the arrow stays the browser's own. */
select.in { appearance:auto; -webkit-appearance:auto; cursor:pointer; }
/* A dialog: the one surface that darkens the page behind it — sheet scale, 6px. */
.dialog-backdrop { position:fixed; inset:0; z-index:var(--z-dialog); display:grid; place-items:center;
padding:20px; background:color-mix(in oklab, var(--edge) 45%, transparent); }
.dialog { background:var(--sf); border:1px solid var(--line); padding:22px 24px;
width:100%; max-width:480px; box-shadow:var(--sh-dialog) var(--sh-dialog) 0 var(--edge); }
.dialog__actions { display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
/* A toast: the short-lived note at the foot of the page, with room for one undo. */
.toast { position:fixed; left:50%; transform:translateX(-50%);
bottom:calc(24px + env(safe-area-inset-bottom)); z-index:var(--z-toast);
display:flex; align-items:baseline; gap:14px; max-width:min(440px, calc(100vw - 32px));
background:var(--sf); border:1px solid var(--line); box-shadow:var(--sh-menu) var(--sh-menu) 0 var(--edge);
padding:12px 16px; font-size:var(--fs-ui); }
/* ==========================================================================
The missing rooms — banner, tabbar, ledger, skeleton. Additive; /v1 keeps
its promise.
========================================================================== */
/* An inline banner: doubt or failure, spoken on the page itself. */
.banner { display:flex; align-items:baseline; gap:var(--s3); border:1px solid var(--warn);
background:color-mix(in oklab, var(--warn) 7%, var(--sf));
padding:var(--s3) var(--s4); font-size:var(--fs-ui); }
.banner--error { border-color:var(--loss); background:color-mix(in oklab, var(--loss) 7%, var(--sf)); }
/* The third tone, and the one the system went without for its whole life: a way to say that a
thing happened. There was a banner for doubt and a banner for failure, and for "it worked"
there was only the toast — which is fixed to the viewport and gone in a moment, so it could
never sit beside the thing it was about. Writing the Words chapter is what turned it up: the
rule that a button keeps its word had no surface to say the word on. */
.banner--ok { border-color:var(--gain); background:color-mix(in oklab, var(--gain) 7%, var(--sf)); }
.banner__icon { font-weight:700; color:var(--warn); flex:none; }
/* An action inside a banner is ink, not accent. The banner already carries its tone in the
border and the ground; a link that competes with it reads worse and says nothing extra — and
on the tinted dark ground the accent measures 3.97:1, which is below the bar for text.
It stays a link by its weight and its caps, which is how every link in this system reads. */
.banner .btn-link, .banner .btn-link-sm { color:var(--tx); }
.banner--error .banner__icon { color:var(--loss); }
.banner--ok .banner__icon { color:var(--gain); }
/* The phone's hand: a fixed bottom bar, the ritual raised in its centre slot. */
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:var(--z-menu);
display:flex; align-items:center; gap:var(--s1);
background:var(--sf); border-top:1px solid var(--line);
padding:0 max(10px, env(safe-area-inset-right)) env(safe-area-inset-bottom)
max(10px, env(safe-area-inset-left)); }
.tabbar__item { font:inherit; flex:1; min-height:50px; border:none; border-top:3px solid transparent;
background:transparent; color:var(--mut); font-size:var(--fs-nano); font-weight:700;
text-transform:uppercase; letter-spacing:0.07em; cursor:pointer; padding:6px 2px; }
.tabbar__item.on { color:var(--acc); border-top-color:var(--acc); }
.tabbar__act { font:inherit; flex:none; width:48px; height:48px; margin-top:-16px;
border:1px solid var(--line); background:var(--acc); color:var(--acc-ink);
font-size:var(--fs-act); font-weight:700; cursor:pointer; box-shadow:var(--sh-btn) var(--sh-btn) 0 var(--edge); }
.tabbar__act:active { transform:translate(var(--sh-btn),var(--sh-btn)); box-shadow:none; }
/* The ledger: rows on the paper itself — columns are the page's own, given as --cols. */
.ledger { --cols: minmax(0, 1fr) auto; }
.ledger__grid { display:grid; grid-template-columns:var(--cols); gap:var(--s2) var(--s4);
align-items:baseline; padding:11px 16px; }
.ledger__head { font-size:var(--fs-caps); color:var(--mut); letter-spacing:0.09em; text-transform:uppercase;
border-bottom:1px solid var(--bd2); }
.ledger__row { border-top:1px solid var(--bd2); }
.ledger__row:first-of-type { border-top:none; }
.ledger__row--heading { font-weight:700; }
.ledger__row--clickable { cursor:pointer; }
@media (hover: hover) {
.ledger__row--clickable:hover { background:color-mix(in oklab, var(--tx) 4%, transparent); }
}
.ledger__num { text-align:end; font-variant-numeric:tabular-nums; }
/* A skeleton: the shape of what is coming, pulsing quietly. */
.skeleton { background:var(--bd2); animation:ornoPulse 1.2s ease-in-out infinite; }
.skeleton--line { height:12px; }
@keyframes ornoPulse { 50% { opacity:0.45; } }
/* ==========================================================================
Controls — the questions a form asks. Native elements, dressed: the browser
keeps the keyboard, the label and the form, and the system keeps the look.
========================================================================== */
/* A box that is ticked. */
.check {
appearance:none; -webkit-appearance:none;
flex:none; width:16px; height:16px; margin:0;
border:1px solid var(--bd); background:var(--sf); cursor:pointer;
display:inline-grid; place-content:center;
transition:background var(--t-fast), border-color var(--t-fast);
}
.check:checked { background:var(--acc); border-color:var(--line); }
.check:checked::after {
content:''; width:4px; height:8px; margin-top:-2px;
border:solid var(--sf); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.check:indeterminate { background:var(--acc); border-color:var(--line); }
.check:indeterminate::after {
content:''; width:8px; height:2px; margin:0; border:none; background:var(--sf); transform:none;
}
/* One of many: the single round thing besides the spinner. */
.radio {
appearance:none; -webkit-appearance:none;
flex:none; width:16px; height:16px; margin:0;
border:1px solid var(--bd); background:var(--sf); cursor:pointer;
display:inline-grid; place-content:center;
border-radius:50%;
transition:border-color var(--t-fast);
}
.radio:checked { border-color:var(--acc); }
.radio:checked::after { content:''; width:8px; height:8px; background:var(--acc); border-radius:50%; }
/* On or off, and saved the moment it moves. */
.switch {
appearance:none; -webkit-appearance:none;
flex:none; position:relative; width:34px; height:18px; margin:0;
border:1px solid var(--bd); background:var(--sf); cursor:pointer;
transition:background var(--t-fast), border-color var(--t-fast);
}
.switch::after {
/* translate, not left: `left` is a layout property, so every flick of the switch put the
whole subtree through layout. This is composited and looks identical. */
content:''; position:absolute; top:2px; bottom:2px; left:2px; width:12px;
/* --bd, not --mut. Off used to be a near-ink knob (#655E50) on a pale track while on was a
rust knob on an 18% rust tint — so the OFF state carried more contrast than the on one, and
a control whose loudest reading is "no" is a control read backwards. */
background:var(--bd); transition:translate var(--t-fast), background var(--t-fast);
}
/* On is the filled one: the track takes the accent whole and the knob takes the ink that goes
on it. That is the way round every named system draws it, and the way round a person can
tell across a room. */
.switch:checked { background:var(--acc); border-color:var(--acc); }
/* 16px, and the arithmetic is worth writing down because the old value was `calc(100% - 16px)`
— and a percentage in `translate` is a percentage of the ELEMENT, not of the track. The knob
is 12px, so that resolved to −4px and the switch moved its knob four pixels to the LEFT when
you turned it on. The track is 34 wide, less 2 of border, less the 2px inset at each end,
less the 12px knob: 16 is the whole of the travel. */
.switch:checked::after { translate:16px; background:var(--acc-ink); }
.check:disabled, .radio:disabled, .switch:disabled { cursor:default; opacity:0.5; }
/* A tick is 16px because a tick that size reads as a tick, and a thumb needs 24. So the box
keeps its size and grows an invisible target around itself — the same trick the icon button
uses, and the reason neither of them moved a layout to satisfy WCAG 2.5.8.
(The label beside it is clickable too; this is for the box on its own.) */
.check, .radio, .switch { position:relative; }
.check::before, .radio::before, .switch::before {
content:''; position:absolute; top:50%; left:50%; translate:-50% -50%;
width:max(100%, 24px); height:max(100%, 24px);
}
/* The line a control sits on: the box, then what it asks, then the fine print under it. */
.choice { display:flex; align-items:flex-start; gap:10px; cursor:pointer; }
.choice:has(input:disabled) { cursor:default; color:var(--mut); }
.choice__text { display:grid; gap:2px; }
.choice__label { font-size:var(--fs-text); }
.choice__note { font-size:var(--fs-fine); color:var(--mut); }
.choices { display:grid; gap:10px; }
/* A question with several answers, grouped and named. */
.fieldset { border:none; margin:0; padding:0; min-width:0; }
.fieldset__legend { padding:0; font-size:var(--fs-caps); font-weight:700;
letter-spacing:0.09em; text-transform:uppercase; }
.fieldset__hint { display:block; font-size:var(--fs-fine); color:var(--mut); margin:6px 0 10px; }
/* Most fields are required, so the rare one says so instead: mark the minority. */
.lbl__optional { font-weight:400; letter-spacing:0.04em; text-transform:none; color:var(--mut); }
/* Room to write, and the count of what is left. */
.in--area { min-height:96px; resize:vertical; line-height:1.5; }
.counter { display:block; font-size:var(--fs-fine); color:var(--mut); margin-top:6px; text-align:end; }
.counter--over { color:var(--loss); }
/* What went wrong, gathered at the top where a form is read from. */
.summary {
border:1px solid var(--loss); background:color-mix(in oklab, var(--loss) 6%, var(--sf));
box-shadow:var(--sh-card) var(--sh-card) 0 var(--edge); padding:var(--s4) var(--s5);
}
.summary__title { font-size:var(--fs-text); font-weight:700; text-transform:uppercase; letter-spacing:0.04em; }
.summary__list { margin:10px 0 0; padding-inline-start:18px; display:grid; gap:4px; }
.summary__link { font:inherit; font-size:var(--fs-ui); color:var(--loss); background:none;
border:none; padding:0; text-align:start; cursor:pointer; text-decoration:underline; }
/* ==========================================================================
Pickers — the three controls that are more than a box: a list you filter,
a day you write, a file you hand over.
========================================================================== */
/* A field that suggests. The list hangs from it, so the wrapper sets the origin. */
/* A select that opens a list this system drew.
It used to be a native