/* Breacer -- components * ============================================================================ * One place per component (phase 2.1 of docs/plan-van-operatie.md, 2 Sep * 2026). Before this file, .btn-blue, .btn-quiet, .brand, .line, [hidden] * and the focus ring stood in FIVE places (index.css, dash.css and the * inline style of accounts, notifyshare and breacer), each just slightly * different: a pill of 999px here, 8px there; 40px tall here, 44 there; * 700 bold here, 600 there. Measured with a CSS parser over all * stylesheets: 76 selectors in more than one file, 65 with a different * body. "44px on every button" was thus five rules in five places, and the * 2 Sep 2026 measurement (zero touch targets under 44) only held as long * as nobody touched one of the five. * * LOAD ORDER on every page: design.css, tokens.css, componenten.css, then * the page's own stylesheet. With equal specificity, whatever comes later * wins, so a page CAN override a component -- and exactly that is what * test/components-drift.test.mjs forbids: outside this file, no rule may * exist with exactly a component selector (`.btn-blue`, `.btn-blue:hover`). * COMPOSITION is allowed: `.bulk-bar .btn-quiet`, `.btn-blue.wide`, * `.actions .btn-quiet` say something about a component IN a context, and * that is what a page is supposed to do. * * What DELIBERATELY does not live here, with the reason: * .pill appears once, in index.css, with forty lines * around it that only carry meaning there; * .row-check etc. the checkmarks of My Triggers: placement and * component are one thing there (negative margins in * the row), and they exist on one page; * .bar, .center, layout, not a component: the same ROLE per page * .box, .footer with a different size (sticky with blur on the * dashboard, static on the front door, centered on * accounts). * * All tokens in here live in tokens.css or design.css; a custom property * that does not exist falls back SILENTLY (paid for twice, dearly, in this * project), so the drift test checks every var() below against those two. */ /* --- Primitives ------------------------------------------------------------- * Without this rule, the hidden attribute loses to every explicit display * rule (display:flex on a toast, inline-flex on a button). This has once * been an undo toast that stayed PERMANENTLY at the bottom of the screen * and swallowed the clicks of the bulk bar underneath it, while `.hidden` * was neatly set to true. Measure the rendered height, not the property. */ [hidden] { display: none !important; } /* Only for a screen reader. Not display:none -- then it won't read it. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* One visible focus ring for everything that can receive focus. :focus-visible * and not :focus: a mouse click leaves no ring, a Tab does. Blue, because * blue means interaction; green means status. */ :focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; } /* --- The brand mark --------------------------------------------------------- * An inline SVG with fill="currentColor" (assets/brand.svg; brand-drift.test.mjs * keeps every copy equal). The shape is PORTRAIT (ratio 0.785, measured on * the source): width follows from height via aspect-ratio, otherwise the * mark gets stretched. The HEIGHT differs per page (32 on the front door, * 26 in the 56px dashboard bar, 22 on accounts) and that is a size, not a * different component: the page sets --merk-hoogte and --merk-naam-grootte * on its .bar. */ .brand { display: inline-flex; align-items: center; min-height: 44px; /* a link is a touch target like any other */ gap: var(--sp-2); text-decoration: none; color: var(--tekst); } .brand-mark { display: block; flex: none; height: var(--merk-hoogte, 26px); width: auto; aspect-ratio: 1599 / 2036; color: var(--tekst); } .brand-name { font-size: var(--merk-naam-grootte, var(--fs-md)); font-weight: 600; letter-spacing: var(--track-md); white-space: nowrap; /* the brand name wrapped onto two lines on a phone */ } /* --- Buttons ------------------------------------------------------------------ * Blue = the next step (one per screen), quiet = the second button, danger = * irreversible deletion (the only thing red is used for in this product), * link = a button that goes somewhere, ghost = the second button next to a * blue one on the front door (black with a hairline, like the pill). * * 44px is the design-audit floor for everything you touch. Here, and nowhere * else. display:inline-flex and border:0 are there so an and a