/* * Expenset — base stylesheet. The single home of design tokens and the ex- class prefix. * Renaming the framework is a find-replace of `ex-` and `--ex-` here and in templates/ * (docs/css.md, STANDARDS.md 10.4). Our own CSS — no framework, no CDN (on-prem, offline). * * Ported from our payroll product's design system, prefix-renamed, with its payroll-specific * components removed (decisions.md 2026-08-04: port what is generic and visible, write what is * domain-shaped). A comment here naming a payslip or a pay run is a leftover — fix it or delete it. */ :root { /* Neutral slate palette — a calm back-office tool, not a billboard. */ /* THE PARTS OF THE SCREEN THE HARDWARE OWNS, behind one name each. * * env(safe-area-inset-*) reports 0 in every desktop browser and 34px at the bottom of an installed * iPhone, so anything that depends on it is correct on a laptop and wrong on a phone, invisibly. * Two faults shipped that way: the tab bar's clearance counted the bottom inset twice, and the * page-loading bar sat at top 0, which on an installed app is behind the status bar. * * Named rather than called inline so a test can set them to an iPhone's numbers and measure what * happens. env() cannot be faked; a custom property can, and that is the whole reason these exist. */ --ex-safe-top: env(safe-area-inset-top, 0px); --ex-safe-bottom: env(safe-area-inset-bottom, 0px); --ex-safe-left: env(safe-area-inset-left, 0px); --ex-safe-right: env(safe-area-inset-right, 0px); --ex-color-bg: #f6f7f9; --ex-color-surface: #ffffff; /* THE FOURTH STEP, and the palette's own rules implied it before anything defined it. Rule 2 below says depth in dark comes from the fill — "page, then card, then control" — but a dialog is none of those. It is the frontmost thing on the screen and it was borrowing the card's colour, separated only by a shadow, which rule 2 says in the same breath does almost nothing on a dark ground. So a modal sat at exactly the lightness of the card behind it. Anything that floats above the page takes this: the dialog, the dropdown panel, the menus, the toast. In light it is white, the same as a card — there, depth comes from the shadow, which works. */ --ex-color-raised: #ffffff; --ex-color-border: #e2e5ea; /* What sits behind a dialog. Light dims a bright page and that is most of the work; dark cannot dim a dark page, so its separation comes from the blur and from the raised fill above. */ --ex-color-scrim: rgba(16, 24, 40, 0.5); --ex-scrim-blur: 3px; --ex-color-text: #1c2530; --ex-color-text-muted: #5b6675; --ex-color-text-faint: #9aa3b0; --ex-color-accent: #1f6feb; --ex-color-accent-hover: #1a5fd0; --ex-color-accent-contrast: #ffffff; --ex-color-accent-soft: #eaf1fd; /* Form controls — the three states a field moves through. At rest a control sits back on a tinted fill so a form reads as a calm block of labels; hover lifts the fill toward white and firms the border; focus takes it all the way to the surface colour with a border darkened to the text colour. A progression carried by fill and border alone — no halo, no coloured bar. */ --ex-color-control: #eef0f4; --ex-color-control-hover: #f8f9fb; --ex-color-control-border: #dde1e8; --ex-color-control-border-hover: #b4bcc8; /* Status — used by flashes and field errors; defined once, not sprinkled as raw hex. */ /* THE TWO FILLS BEHIND A FILLED STATUS BUTTON, and they are separate tokens because a colour cannot * do both of this palette's jobs in dark mode. It is arithmetic rather than taste. * * --ex-color-gain and --ex-color-danger are TEXT colours: a gain figure in a table, an error under a * field, both read against the page's own ground. On a dark page that means they have to be light -- * to clear 4.5:1 against #0f1218 a colour needs a relative luminance of at least 0.203. A FILL behind * white text has to go the other way: to clear 4.5:1 against white it needs a luminance of at most * 0.183. The two ranges do not touch, so one value cannot serve both, and in light mode the question * never comes up because the same dark green and red satisfy both at once. * * Hence: these ARE gain and danger in light mode, and their own deeper values in dark. Each is picked * so white reads on it and it still stands clear of the page rather than melting into it -- 4.53:1 and * 4.14:1 for the green, 4.54:1 and 4.13:1 for the red, which is deliberate: the two sit side by side * on a blotter row and a pair that weighed differently would read as one being louder than the other. */ --ex-color-approve-fill: var(--ex-color-gain); --ex-color-danger-fill: var(--ex-color-danger); --ex-color-success: #16a34a; --ex-color-success-bg: #eef8f0; --ex-color-danger: #dc2626; --ex-color-danger-hover: #b91c1c; --ex-color-danger-bg: #fdeeec; --ex-color-warning: #d97706; --ex-color-warning-bg: #fef3e2; --ex-color-info: #1f6feb; --ex-color-info-bg: #eaf1fd; /* The financial semantic tokens (docs/css.md). These carry meaning, not decoration, so they are tokens before the first screen needs one — otherwise the first valuation screen invents a green and the second invents a different one. Gain and loss are deliberately NOT the success and danger colours. A loss is not an error and a gain is not a confirmation; a book that fell this month is reporting correctly, and colouring that with the same red as a failed save teaches people to read a normal market as a fault. Colour is never the only signal (docs/css.md): a loss is in parentheses as well as in the loss colour, a stale price shows its age in text as well. Roughly one man in twelve has a colour vision deficiency, and a board pack gets photocopied in black and white. */ --ex-color-gain: #0f7a4d; --ex-color-loss: #b4232a; --ex-color-stale: #8a6d1f; /* Darker than loss, and deliberately not the same value. A loss is the market; a breach is a statutory limit exceeded, with a three-month notification clock running (SI 50 First Schedule ¶6(3)). Two tokens holding the same colour would merge them the first time somebody scans a page for the thing that needs reporting. */ --ex-color-breach: #7f1218; --ex-color-pending: #5a6270; /* Alert triangle, as a mask so it inherits the danger colour. Used by .ex-form__error's icon. */ --ex-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E"); /* Every control is this tall — inputs, selects, date fields, buttons. One token, because a button standing next to an input at a different height is the most visible sloppiness in a form and the hardest to fix later, once each control has grown its own padding. */ --ex-control-height: 2.375rem; --ex-control-height-sm: 2rem; /* A BUTTON INSIDE A TABLE ROW, which is the one control that does not take the 44px touch floor. Declared as a token rather than a literal so the size and the test that measures it read the same number. The reasoning is where the rule is, in the coarse block near .ex-table td .ex-btn. */ --ex-table-action-size: 2.125rem; /* Control padding — the inset inside something you type in or press. Deliberately NOT on the --ex-space scale. That scale is a 4px layout rhythm for the gaps between things; these are optical values picked so a control's text sits centred inside --ex-control-height. Rounding them onto the 4px grid would move every control's height, which is the one measurement the whole form layout hangs off. Only the values used in more than one place are tokens. A genuine one-off — a calendar cell, a pill, a stepper — keeps its literal, because tokenising a one-off is how a token set stops meaning anything (docs/css.md: add a token when a value is used more than once or carries meaning). */ --ex-pad-control: 0.5rem 0.75rem; /* a text control: input, textarea, select, datepicker */ --ex-pad-search: 0.45rem 0.6rem 0.45rem 2rem; /* a search input; the left inset clears its icon */ /* Spacing — a 4px scale. */ --ex-space-1: 0.25rem; --ex-space-2: 0.5rem; --ex-space-3: 0.75rem; --ex-space-4: 1rem; --ex-space-5: 1.25rem; --ex-space-6: 1.5rem; --ex-space-8: 2rem; /* Typography — system stack; no web fonts to fetch on an offline box. Two sizes, on purpose. --ex-font-size is the rem *base*: it sets what every rem in this file means, so the spacing scale, the sidebar width and the radii all hang off it. --ex-font-body is the size text is actually set in. Keeping them apart is what lets the type come down without the whole app shrinking with it — change the body size to retune the reading, the base to rescale the layout. */ --ex-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* THE REM BASE, AND THE ONE THING A TEXT-SIZE SETTING HAS TO CHANGE. * * Every size in this stylesheet is a rem read from this, so moving it moves the whole product * together: type, spacing, control heights and the tap targets with them. A setting that scaled * only the type would leave a larger word in a button that had not grown. * * The stored preference overrides it before the first paint, the same way the theme does, because * a page that renders at one size and jumps to another is worse than one that was always wrong. */ --ex-font-size: var(--ex-text-scale, 16px); --ex-font-body: 0.875rem; --ex-line-height: 1.5; /* THE TYPE SCALE, and it did not exist. Colour, spacing and radius were tokens from the first commit; type was not, so every component picked its own number and the font sizes in this file drifted into eighteen different values. Four of them were a real scale (11, 12, 13, 14px) and the rest was drift: 15px and 17px both meaning "a bit bigger than body", a 12.5px pill, a 0.95rem heading, three different em sizes for inline code. Nobody chose that; it accumulated, one component at a time, exactly the way a colour palette would have if the colours had not been named. Every absolute font-size in this file now reads a token, so the drift cannot start again quietly: a literal is visible in a diff in a way that "one more component picking 15px" never was. Relative sizes are the deliberate exception, and there is one of them below. Nine steps, named by size rather than by role. Role names (--ex-text-title) read better until two things that are not titles need the same size, and then they lie. */ --ex-text-2xs: 0.6875rem; /* 11px — a timestamp, a field label, the smallest thing we set */ --ex-text-xs: 0.75rem; /* 12px — hints, badges, table headers */ --ex-text-sm: 0.8125rem; /* 13px — dense body: table cells, notes, list rows */ --ex-text-md: 0.875rem; /* 14px — body. The same value as --ex-font-body, deliberately */ --ex-text-lg: 1rem; /* 16px — a card or modal title */ --ex-text-xl: 1.125rem; /* 18px — a page title */ --ex-text-2xl: 1.375rem; /* 22px — a standalone heading: sign-in, an error page */ --ex-text-3xl: 2rem; /* 32px — a number that is the whole point of its screen */ --ex-text-4xl: 3.5rem; /* 56px — an error code, and nothing else */ /* Monospace inside flowing text, and relative ON PURPOSE where the rest of the scale is absolute. A code span sits inside whatever is around it — a 13px table cell or a 16px card title — and a fixed size would be too big in one and too small in the other. One value, where there were three (0.88em, 0.9em, 0.72em) doing the same job by accident. */ --ex-text-inline: 0.9em; --ex-radius: 6px; --ex-radius-lg: 10px; --ex-border: 1px solid var(--ex-color-border); --ex-shadow: 0 1px 2px rgba(16, 24, 40, 0.06); --ex-shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12); --ex-sidebar-width: 15rem; --ex-sidebar-collapsed: 3.75rem; --ex-topbar-height: 3.75rem; --ex-content-max: 60rem; --ex-transition: 0.16s ease; } /* Dark ------------------------------------------------------------------------ Only the tokens move. Not one component below this point knows which theme is on, which is the whole return on having had tokens from the first line of CSS. Three rules the palette follows: 1. **Not inverted.** Pure white text on pure black is the classic mistake: the contrast is so hard that text blooms and long reading hurts. The darkest surface is #0f1218 and the brightest text #e7eaf0 — a strong contrast, short of the maximum. 2. **Surfaces get lighter as they come forward**, the opposite of the light theme where they get whiter and gain shadow. Shadow does almost nothing on a dark ground, so depth has to come from the fill: page, then card, then control. 3. **The status colours are lifted, not reused.** A 16a34a green that reads well on white is muddy on charcoal. Each one moves up in lightness until it carries its meaning again. Two selectors, deliberately. The media query is the default — somebody whose machine is in dark mode gets a dark application without being asked. The attribute is an explicit choice and beats it both ways, so a person who wants light on a dark laptop can have it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ex-color-bg: #0f1218; --ex-color-surface: #171b23; /* A real step above the card, because this is the only thing separating a dialog from the page in dark — a shadow does not read here, and a scrim cannot dim what is already dark. */ --ex-color-raised: #1f2531; --ex-color-border: #272d39; /* Nearly black and much more opaque than the light scrim, plus a heavier blur. Dimming a dark page by half with a dark navy changes almost nothing, which is why a modal read as floating on nothing in dark mode; going to black at 0.66 and blurring properly puts the page visibly behind glass. */ --ex-color-scrim: rgba(0, 0, 0, 0.66); --ex-scrim-blur: 8px; --ex-color-text: #e7eaf0; --ex-color-text-muted: #a3adbd; --ex-color-text-faint: #6d7788; --ex-color-accent-contrast: #ffffff; --ex-color-accent-soft: #1a2537; --ex-color-control: #1d222c; --ex-color-control-hover: #232936; --ex-color-control-border: #303747; --ex-color-control-border-hover: #465063; /* Not gain and danger here: on this ground those are the mint and the salmon that read as TEXT, and a button filled with either is a button white cannot sit on. Deep enough for white, light enough to keep an edge against the page. Weighted to match each other. */ --ex-color-approve-fill: #12875a; --ex-color-danger-fill: #d24343; --ex-color-success: #3dd68c; --ex-color-success-bg: #10261c; --ex-color-danger: #f87171; --ex-color-danger-hover: #ef5350; --ex-color-danger-bg: #2a1519; --ex-color-warning: #fbbf24; --ex-color-warning-bg: #2a2010; --ex-color-info: #60a5fa; --ex-color-info-bg: #14213a; --ex-color-gain: #3dd68c; --ex-color-loss: #f87171; --ex-color-stale: #d9b44a; --ex-color-breach: #ff8f8f; --ex-color-pending: #94a3b8; --ex-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --ex-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55); color-scheme: dark; } } :root[data-theme="dark"] { --ex-color-bg: #0f1218; --ex-color-surface: #171b23; --ex-color-raised: #1f2531; --ex-color-border: #272d39; --ex-color-scrim: rgba(0, 0, 0, 0.66); --ex-scrim-blur: 8px; --ex-color-text: #e7eaf0; --ex-color-text-muted: #a3adbd; --ex-color-text-faint: #6d7788; --ex-color-accent-contrast: #ffffff; --ex-color-accent-soft: #1a2537; --ex-color-control: #1d222c; --ex-color-control-hover: #232936; --ex-color-control-border: #303747; --ex-color-control-border-hover: #465063; --ex-color-approve-fill: #12875a; --ex-color-danger-fill: #d24343; --ex-color-success: #3dd68c; --ex-color-success-bg: #10261c; --ex-color-danger: #f87171; --ex-color-danger-hover: #ef5350; --ex-color-danger-bg: #2a1519; --ex-color-warning: #fbbf24; --ex-color-warning-bg: #2a2010; --ex-color-info: #60a5fa; --ex-color-info-bg: #14213a; --ex-color-gain: #3dd68c; --ex-color-loss: #f87171; --ex-color-stale: #d9b44a; --ex-color-breach: #ff8f8f; --ex-color-pending: #94a3b8; --ex-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --ex-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55); color-scheme: dark; } /* THE BREAKPOINT SCALE --------------------------------------------------------- * * Two steps, and they are written out as literals rather than tokens because a token cannot work here. * `@media (max-width: var(--ex-bp-md))` is not unsupported, it is meaningless: a media query is * evaluated against the viewport before there is any element to resolve a custom property against, so * there is nothing for var() to read. Every other scale in this file is a token; this one cannot be, and * that is exactly why it needs something else keeping it honest. BreakpointTest fails the build if a * width query appears that is not on this list. * * 34rem 544px Below this a two-column form gives each column less width than the labels standing * in it, so the grids drop to one column. * 48rem 768px Below this a sidebar and a readable content column cannot both fit, so the rail * becomes an off-canvas drawer and the top bar sheds everything that is not telling * you where you are. * 60rem 960px Below this a report's filter cannot put its action beside the fields it filters: * a portfolio, a period and a button need about that much before the button stops * squeezing the period into eight characters a side. Above it the filter is three * columns and the button sits on the control line; below it, one column and the * button takes its own row, which is right on a tablet. * * A fourth step is a decision, not a convenience. It goes on this list with the sentence saying what * stops working below it, and the test refuses the build until it does — which is the point, because * the way a stylesheet ends up with nine breakpoints is one at a time, each obvious to whoever added it. * The transaction grid and the maturity ladder will probably want one; they should have to argue for it. * * REM HERE, AND WHAT IT MEASURES — the part that surprises people. * * In a media query `rem` is the BROWSER'S default text size, not this document's. It is not * --ex-font-size and it is not a hardcoded 16. That is deliberate and it is the accessibility win: * somebody who has set their browser to 20px because they cannot read 16 gets every breakpoint 25% * further out, because their whole world is bigger and the rail should give up sooner for them. * * It does NOT move with the in-app text size, and it should not. That setting is a zoom applied inside a * viewport whose physical width has not changed — the screen is the same screen — so it must not shift * the point at which a sidebar stops fitting on it. What it does change is how much fits before that * point, and that is a real consequence rather than a theoretical one: at Large, the same window holds * about an eighth less. ResponsiveLayoutIT sweeps the narrow widths at every text size for exactly this * reason, so the combination is measured rather than assumed. */ *, *::before, *::after { box-sizing: border-box; } /* The hidden attribute must always win, even over display:flex/inline-flex components. */ [hidden] { display: none !important; } html { font-size: var(--ex-font-size); /* iOS inflates text in a column it decides is too narrow, which fires on rotating a phone: the type grows, nothing else does, and a table that fitted a moment ago no longer does. 100% keeps the size we asked for. Not a zoom lock — pinch still works, and the text size setting still applies. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* No pull-to-refresh. The shell does not scroll — .ex-scroll does — so a downward drag at the top of a list would reload the page instead, discarding a part-filled form to no purpose. */ overscroll-behavior-y: none; } body { margin: 0; font-family: var(--ex-font-sans); font-size: var(--ex-font-body); line-height: var(--ex-line-height); color: var(--ex-color-text); background: var(--ex-color-bg); } h1, h2, h3, p { margin: 0; } .ex-icon { width: 1.15em; height: 1.15em; flex: none; } /* App shell — sidebar + main column ------------------------------------- The shell is exactly one screen tall and never scrolls. The sidebar and the top bar stay put because they are simply always on screen, not because they are stuck to something that moves under them, and the content region does the scrolling. That is what makes this read as an application rather than a document: the page furniture doesn't drift, and a long table can't push the top bar off the top of the screen. dvh, not vh: on a phone, 100vh is the height with the browser chrome *hidden*, so a vh-tall shell is always taller than what you can actually see and the bottom of the sidebar sits under the URL bar. dvh tracks the real viewport. */ html { height: 100%; } .ex-app { display: grid; grid-template-columns: var(--ex-sidebar-width) 1fr; height: 100dvh; overflow: hidden; transition: grid-template-columns var(--ex-transition); } .ex-collapsed .ex-app { grid-template-columns: var(--ex-sidebar-collapsed) 1fr; } /* Full height of the shell, so it needs no stickiness of its own. `overflow: visible` is deliberate: the collapsed rail's submenus fly out sideways and must escape the sidebar's box. The nav list inside it scrolls instead (below), which keeps the flyouts free. */ .ex-sidebar { height: 100%; min-height: 0; display: flex; flex-direction: column; padding: var(--ex-space-3); background: var(--ex-color-surface); border-right: var(--ex-border); overflow: visible; } .ex-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ex-space-2); padding: var(--ex-space-2) var(--ex-space-2) var(--ex-space-4); } .ex-sidebar__brand { font-weight: 700; font-size: var(--ex-text-xl); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; } .ex-sidebar__toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; padding: 0; color: var(--ex-color-text-muted); background: none; border: none; border-radius: var(--ex-radius); cursor: pointer; font-size: var(--ex-text-md); transition: background var(--ex-transition), color var(--ex-transition), transform 0.06s ease; } .ex-sidebar__toggle:hover { background: var(--ex-color-bg); color: var(--ex-color-text); } .ex-sidebar__toggle:active, .ex-topbar__menu:active { transform: translateY(1px); } /* Nav ------------------------------------------------------------------- */ .ex-nav { display: flex; flex-direction: column; gap: var(--ex-space-1); } /* The sections scroll if they outgrow the sidebar; Admin stays pinned to the bottom regardless. When collapsed the submenus are absolute flyouts, and a scroll container would clip them — so the rail doesn't scroll. It holds icons only, which fit. */ .ex-nav--sections { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; } .ex-collapsed .ex-nav--sections { overflow: visible; } .ex-nav--bottom { margin-top: auto; padding-top: var(--ex-space-3); border-top: var(--ex-border); } .ex-nav__item { display: flex; align-items: center; gap: var(--ex-space-3); width: 100%; padding: var(--ex-space-2) var(--ex-space-3); border: none; border-radius: var(--ex-radius); background: none; color: var(--ex-color-text-muted); font: inherit; font-size: var(--ex-text-md); text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background var(--ex-transition), color var(--ex-transition); } .ex-nav__item:hover { background: var(--ex-color-bg); color: var(--ex-color-text); } .ex-nav__item:active { background: var(--ex-color-border); } .ex-nav__item--active { background: var(--ex-color-accent-soft); color: var(--ex-color-accent); font-weight: 600; } .ex-nav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; } /* Collapsed (desktop icon rail) ----------------------------------------- */ .ex-collapsed .ex-sidebar__brand, .ex-collapsed .ex-nav__label { display: none; } .ex-collapsed .ex-sidebar__head { justify-content: center; } .ex-collapsed .ex-nav__item { justify-content: center; padding-left: 0; padding-right: 0; } /* Held still across the collapse/expand switch, so the sidebar's width animates but the items in it do not slide about while it does. JS sets .ex-anim-off for one frame. */ .ex-anim-off .ex-nav__item { transition: none; } /* Main column ----------------------------------------------------------- */ .ex-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; } /* Not sticky — it is a fixed row of a shell that never scrolls, so it cannot go anywhere. z-index keeps its popovers (notifications, the account menu) above the scrolling content. */ .ex-topbar { position: relative; z-index: 20; flex: none; display: flex; align-items: center; gap: var(--ex-space-4); min-height: var(--ex-topbar-height); padding: var(--ex-space-3) var(--ex-space-6); background: var(--ex-color-surface); border-bottom: var(--ex-border); } .ex-topbar__title { font-size: var(--ex-text-xl); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Everything on the right, on one line — bell and user never wrap onto a second row. */ .ex-topbar__meta { margin-left: auto; display: flex; align-items: center; gap: var(--ex-space-2); flex: none; } .ex-topbar__menu { display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; color: var(--ex-color-text-muted); background: none; border: none; border-radius: var(--ex-radius); cursor: pointer; } .ex-topbar__menu:hover { background: var(--ex-color-bg); } /* The build stamp. Quiet, and the first thing to go when the bar gets narrow — it answers "which build is that?" on a support call, which is not a question anybody is asking on a phone. */ .ex-topbar__version { font-size: var(--ex-text-2xs); color: var(--ex-color-text-faint); white-space: nowrap; } /* The one scrolling region in the app. It is a separate element from .ex-content so the scrollbar sits at the edge of the window where a scrollbar belongs, not at the edge of the centred column. */ .ex-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* THE CONTAINING BLOCK FOR THE PULL-TO-REFRESH INDICATOR, which sits absolutely at the top of this scroller. Without it the indicator is laid out against whatever is positioned further up and appears somewhere else entirely — the same fault that put a clipped table label against the document and made six screens scroll sideways. Learned once, applied here before it happened. */ position: relative; } .ex-content { width: 100%; max-width: var(--ex-content-max); margin: 0 auto; padding: var(--ex-space-6); } .ex-scrim { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.4); z-index: 15; } /* Page ------------------------------------------------------------------- */ .ex-page__lead { margin-bottom: var(--ex-space-6); color: var(--ex-color-text-muted); } /* Cards ------------------------------------------------------------------ */ .ex-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--ex-space-5); } .ex-card { display: block; background: var(--ex-color-surface); border: var(--ex-border); border-radius: var(--ex-radius-lg); box-shadow: var(--ex-shadow); padding: var(--ex-space-6); } .ex-card__title { font-size: var(--ex-text-lg); font-weight: 600; margin-bottom: var(--ex-space-2); } /* A card's description is a step up from a field hint, deliberately. Both were --ex-text-xs, which is right for the line under an input — glanced at, next to the thing it describes — and too small for a paragraph somebody is expected to read before deciding what to do on the whole card. */ .ex-card__text { color: var(--ex-color-text-muted); font-size: var(--ex-text-sm); line-height: 1.5; } /* A card's header row: the title, and any action belonging to the card rather than to the page. Divided from the body the way a table divides its head, so a card carrying several sections still reads as titled rather than as one run of text. These two were written on four screens before they existed here, matching nothing — the card's own padding happened to carry the layout, so it looked deliberate (docs/lessons-learned.md 2026-08-05). The divider is the reason to have a head element at all. */ .ex-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ex-space-4); padding-bottom: var(--ex-space-3); margin-bottom: var(--ex-space-4); border-bottom: var(--ex-border); } .ex-card__head .ex-card__title { margin-bottom: 0; } /* THE TITLE NEVER SHRINKS TO MAKE ROOM FOR ITS OWN DESCRIPTION, and the description takes the whole next line. The head is a flex row so a card-level action can sit opposite the title, which is right. But a paragraph of explanation is a flex item too, and left to itself it negotiates with the title as an equal — so a long write-up beside a short heading squeezes the HEADING until it wraps, which reads as broken rather than as full. `flex: 1 0 100%` on the description pushes it onto its own line at full width, leaving the title and any action on the first line where they belong. */ .ex-card__head > .ex-card__title { flex: 0 0 auto; } .ex-card__head > .ex-card__text { flex: 1 0 100%; } /* The body's job is to make the card's padding exact: a heading or paragraph arriving with its own margin would otherwise add to it, and cards would sit at slightly different heights across a row. */ .ex-card__body > :first-child { margin-top: 0; } .ex-card__body > :last-child { margin-bottom: 0; } /* A static colour swatch — a token being shown, not a colour being chosen. The picker's swatch is a button (.ex-swatches__item) and carries a pointer cursor and a hover ring with it, which is wrong for something nobody can click. */ .ex-swatch { display: block; width: 100%; height: 2.5rem; border: 1px solid rgba(16, 24, 40, 0.12); border-radius: var(--ex-radius); } /* A card in the grid stands as its own tile — full height of its row, content pinned top and bottom. */ .ex-cards > .ex-card { display: flex; flex-direction: column; min-height: 9rem; } /* Clickable cards (navigation, settings) feel interactive without moving: the accent border and an inset accent rail arrive, the shadow deepens, the title colours, and an arrow reveals. No shift. */ a.ex-card { color: inherit; text-decoration: none; transition: box-shadow var(--ex-transition), border-color var(--ex-transition); } /* The arrow lives after the title, holding its space transparently so nothing reflows on hover. */ a.ex-card .ex-card__title::after { content: "\2192"; margin-left: var(--ex-space-2); color: transparent; transition: color var(--ex-transition); } a.ex-card:hover { border-color: var(--ex-color-accent); box-shadow: var(--ex-shadow-lg), inset 3px 0 0 var(--ex-color-accent); } a.ex-card:hover .ex-card__title, a.ex-card:hover .ex-card__title::after { color: var(--ex-color-accent); } a.ex-card:active { box-shadow: var(--ex-shadow), inset 3px 0 0 var(--ex-color-accent); } .ex-card--muted { background: var(--ex-color-bg); box-shadow: none; } .ex-card--muted .ex-card__title { color: var(--ex-color-text-muted); } /* Summary stats: a dashboard-style card per headline figure — a soft round icon badge, the value at a calm size (a touch above body, not a billboard), and a small label under it. Used where a screen leads with a few totals — a portfolio's value, its income to date, its headroom against a limit. */ /* THREE ACROSS AT MOST, and the cap is the point rather than the minimum width. It was repeat(auto-fit, minmax(12rem, 1fr)), which on a laptop fits four and on a wide monitor five. At that width a label is about eighteen characters before it wraps, so "Coupons and face value altogether" became three lines and the card grew taller than the ones beside it. The row then reads as one broken card rather than four tidy ones. Capped by explicit breakpoints rather than by a cleverer auto-fit expression, because the honest version of "no more than three" is to say three. A fourth figure goes on its own row or, better, turns out not to have been worth a card. */ .ex-stats { display: grid; grid-template-columns: 1fr; gap: var(--ex-space-4); } @media (min-width: 34rem) { .ex-stats { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 60rem) { .ex-stats { grid-template-columns: repeat(3, 1fr); } } .ex-stat { display: flex; align-items: center; gap: var(--ex-space-3); background: var(--ex-color-surface); border: var(--ex-border); border-radius: var(--ex-radius-lg); box-shadow: var(--ex-shadow); padding: var(--ex-space-4) var(--ex-space-5); } .ex-stat__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--ex-color-accent-soft); color: var(--ex-color-accent); } .ex-stat__icon .ex-icon { width: 1.15rem; height: 1.15rem; } /* The figure sits directly over its label, the two centred on each other. Left-aligned, a short number above a long label hangs off the left edge and the pair reads as two separate lines rather than as one fact. The icon keeps its place. */ .ex-stat > div { text-align: center; } /* THE CHIP IS REQUIRED RATHER THAN COMPENSATED FOR, and StatTileTest is what says so. * * .ex-stat is a flex row built around the chip: the chip is one item and the figure with its label is * the other. Where there is no chip the pair is the only thing in the row, so it hugs its own content * and the whole tile reads as pushed against the left edge of a card it is supposed to sit on. The * styleguide's example has always carried one; six screens were built without and all six had it * (2026-08-27). * * The first fix here was a rule giving the pair the row where no chip was present, which would have * made a tile with no chip look deliberate — and a component that renders two ways is a component that * drifts. Every tile carries a chip now, so that rule had no selector left to match, and a rule * matching nothing reads as coverage. The requirement lives in a test instead, where it fails on the * screen that breaks it rather than quietly correcting it. */ .ex-stat__value { font-size: var(--ex-text-lg); font-weight: 600; line-height: 1.25; white-space: nowrap; /* a money total stays on one line; the card widens, it does not wrap */ font-variant-numeric: tabular-nums; } .ex-stat__label { font-size: var(--ex-text-sm); color: var(--ex-color-text-muted); margin-top: 0.1rem; } /* The tile whose figure is a movement: an unrealised gain, a period's return. Its badge takes the gain colour, so the one tile in a row that is a direction rather than a level reads as one. * * This was .ex-stat--net, "a green badge marks the take-home", and it painted from --ex-color-success. Two * things wrong with that here. The name is a payslip's, and the colour said "that worked" where the figure * means "the book went up" — which is the distinction --ex-color-gain was defined for and the reason the * palette keeps gain apart from success at all: a book that fell this month is reporting correctly, not * failing. * * THE --loss COUNTERPART ARRIVED THE DAY THE VARIANT FIRST DID ANYTHING (2026-08-27). It painted only * .ex-stat__icon, and until that day the only tile in the product carrying a chip was the styleguide's * own example — so on every real screen this was a class that selected nothing, and nobody could tell. * Giving the tiles their chips is what made it visible, and immediately made the gap obvious: an * unrealised gain, a period's net and a reconciliation difference all go either way, and a green chip * over a negative figure is worse than a grey one. * * SO THEY ARE APPLIED ON THE SIGN AND NEITHER IS APPLIED AT NIL. A tile that has not moved is not a * small gain; it is a level, and it takes the ordinary chip. */ .ex-stat--gain .ex-stat__icon { background: color-mix(in srgb, var(--ex-color-gain) 12%, var(--ex-color-surface)); color: var(--ex-color-gain); } .ex-stat--loss .ex-stat__icon { background: color-mix(in srgb, var(--ex-color-loss) 12%, var(--ex-color-surface)); color: var(--ex-color-loss); } /* SPENT AGAINST A LIMIT IS ONE RATIO, SO IT IS A METER. * * Not a pie of two slices, which takes more room and says less: a pie asks the eye to compare two * angles, a bar asks it to read one length against a line. docs/css.md has carried this section since * before the first feature screen; the component itself did not exist until the budget report needed * it (2026-08-29), which is its own small lesson about writing the rule before the thing. * * THE UNFILLED TRACK IS A LIGHTER STEP OF THE FILL'S OWN COLOUR, not grey. A grey remainder makes the * state read only across the filled part, so a bar that is a quarter red looks like a mostly-fine bar * with a warning at the start; tinting the whole track makes the row read as one thing at a glance. * * ROUNDED AT THE DATA END ONLY. Rounding both ends floats the fill off its baseline and makes a short * one read shorter than it is — at ten per cent, two round caps leave almost nothing straight. * * AND SEVERITY IS NEVER CARRIED BY COLOUR ALONE. Every meter states its figures beside it, and one * that has gone past its limit says so in words. Colour is the thing you notice; the words are the * thing you can act on, and about one man in twelve cannot see the difference between the fill * colours at all. */ /* MONTH BY MONTH — a chart in CSS, because this product has no charting library and no CDN (STANDARDS.md §1) and does not need either for two bars per month. A grid, a fixed plot height and a percentage on each bar is the whole of it. THE BARS ARE aria-hidden AND THE FIGURES ARE NOT. What a screen reader gets is the month and its two amounts, which is the content; the bars are how the same thing looks to somebody who can see it. A chart that is only bars is a row of empty spans to anybody who cannot. The scale is passed in by the controller — the tallest figure across the whole run — so every bar is drawn against the same number. Scaled per month they would all be full height, which is a pattern rather than a chart. */ .ex-runchart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--ex-space-2); align-items: end; } .ex-runchart__month { min-width: 0; text-align: center; } /* A FIXED PLOT HEIGHT, so the percentages have something to be percentages of. Without it every bar resolves against a height of nothing and the row collapses. */ .ex-runchart__bars { display: flex; align-items: flex-end; justify-content: center; gap: 0.15rem; height: 5rem; margin-bottom: var(--ex-space-2); } .ex-runchart__bar { display: block; width: 0.6rem; /* A month with nothing in it still shows a mark, so an empty month reads as empty rather than as a month that failed to render. */ min-height: 2px; border-radius: 2px 2px 0 0; } .ex-runchart__bar--in { background: var(--ex-color-gain); } .ex-runchart__bar--out { background: var(--ex-color-loss); } .ex-runchart__label { font-size: var(--ex-text-sm); font-weight: 600; color: var(--ex-color-text); /* The month name alone on a narrow column, clipped rather than wrapped: six wrapped names make six columns of different heights and the bars stop lining up. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* CENTRED UNDER THE BAR, WHICH MEANS BEATING .ex-num. Money is right-aligned everywhere else in the product and rightly so — a column of figures is read down its decimal point. Here there is no column: each figure belongs to the bar above it, and right-aligned they drifted to the edge of their cell and read as though they belonged to the next month along. Two classes in the selector so it outranks .ex-num whatever the order. */ .ex-runchart__figure.ex-num { text-align: center; font-size: var(--ex-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ex-runchart__note { margin-top: var(--ex-space-1); font-size: var(--ex-text-xs); color: var(--ex-color-text-muted); } /* THE LEGEND. A chart with two series has one, always — the sentence underneath that used to do this job was a legend written as prose, which has to be read in full and says nothing to somebody who cannot separate the two colours. A swatch beside a word puts the same fact where the eye is. It carries more weight here than usual: the figures under each bar are hidden on a phone, so this is the only thing naming the two series at the width the product is actually used at. */ .ex-legend { display: flex; flex-wrap: wrap; gap: var(--ex-space-4); margin: 0; padding: 0; list-style: none; } .ex-legend__item { display: inline-flex; align-items: center; gap: var(--ex-space-2); font-size: var(--ex-text-sm); /* The label is text-coloured, never the series colour. A word in the same green as its bar is the colour carrying the meaning twice and the text contrast paying for it. */ color: var(--ex-color-text-muted); } .ex-legend__swatch { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; flex-shrink: 0; } .ex-legend__swatch--in { background: var(--ex-color-gain); } .ex-legend__swatch--out { background: var(--ex-color-loss); } /* On a phone six columns of figures do not fit, so the amounts go and the bars stay. The month names shorten to three letters by the same rule the rest of the product uses. */ @media (max-width: 48rem) { .ex-runchart__figure { display: none; } .ex-runchart__label { font-size: var(--ex-text-xs); } } .ex-meter { display: block; width: 100%; height: 0.5rem; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--ex-color-accent) 16%, var(--ex-color-surface)); } .ex-meter__fill { display: block; height: 100%; min-width: 0.25rem; /* anything above nothing is visible; nothing shows as an empty track */ border-radius: 0 999px 999px 0; background: var(--ex-color-accent); transition: width 0.2s ease; } /* The escalation: accent while there is room, warning as it runs out, danger once it is gone. The track follows the fill, which is what keeps the whole row reading as one state. */ .ex-meter--warning { background: color-mix(in srgb, var(--ex-color-warning) 18%, var(--ex-color-surface)); } .ex-meter--warning .ex-meter__fill { background: var(--ex-color-warning); } .ex-meter--danger { background: color-mix(in srgb, var(--ex-color-danger) 16%, var(--ex-color-surface)); } .ex-meter--danger .ex-meter__fill { background: var(--ex-color-danger); } /* A meter for money coming in reads the other way round: full is good, and short of the plan is the thing worth noticing. It takes the gain colour rather than the accent so the two halves of a budget table are not saying the same thing with the same paint. */ .ex-meter--gain { background: color-mix(in srgb, var(--ex-color-gain) 16%, var(--ex-color-surface)); } .ex-meter--gain .ex-meter__fill { background: var(--ex-color-gain); } /* The figures that go beside it. Never instead of it, and never the other way round. */ .ex-meter-row { display: flex; flex-direction: column; gap: var(--ex-space-1); } .ex-meter-row__figures { display: flex; justify-content: space-between; gap: var(--ex-space-3); font-size: var(--ex-text-sm); color: var(--ex-color-text-muted); } /* The approval chain: each step on its own line with its state badge. */ .ex-steps { list-style: none; display: flex; flex-direction: column; gap: var(--ex-space-2); } .ex-steps__item { display: flex; align-items: center; justify-content: space-between; gap: var(--ex-space-3); padding: var(--ex-space-3) var(--ex-space-4); border: var(--ex-border); border-radius: var(--ex-radius); background: var(--ex-color-bg); } .ex-steps__name { font-weight: 500; } .ex-steps__meta { display: block; margin-top: 0.1rem; font-weight: 400; font-size: var(--ex-text-xs); color: var(--ex-color-text-muted); } /* The step's state, on the vertical chain. A step that is done recedes; the step waiting on somebody right now is the only one that carries weight, because the single question this panel answers is "whose desk is this on?". A later step stays visible but quiet — knowing what happens after you approve is part of deciding whether to. The accent edge is on the left here rather than a wash, because these are rows in a sequence and a filled row would read as selected rather than as current. */ .ex-steps__item--done { color: var(--ex-color-text-muted); background: transparent; } .ex-steps__item--current { border-color: var(--ex-color-accent); border-left: 3px solid var(--ex-color-accent); background: var(--ex-color-surface); } .ex-steps__item--waiting { color: var(--ex-color-text-muted); border-style: dashed; background: transparent; } /* A wizard strip: where you are in a form broken into steps, laid out left to right and numbered. Distinct from the vertical .ex-steps above, which is an approval chain — that one is a record of what happened, this one is a map of what is left. A form that shows no end is a form people abandon halfway, and on a transaction screen half-finished means re-keyed. It must come after the base rule, not before: both are one class deep, so the later one wins and a modifier written above the thing it modifies silently does nothing. Done steps are marked with more than colour — the number stays — and the current step is the only one carrying weight and the accent. */ .ex-steps--wizard { flex-direction: row; flex-wrap: wrap; gap: var(--ex-space-2); counter-reset: ex-step; margin-bottom: var(--ex-space-5); } .ex-steps--wizard .ex-steps__item { flex: 1 1 8rem; justify-content: flex-start; gap: var(--ex-space-2); color: var(--ex-color-text-muted); } .ex-steps--wizard .ex-steps__item::before { counter-increment: ex-step; content: counter(ex-step); flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; font-size: var(--ex-text-xs); font-weight: 600; border-radius: 50%; background: var(--ex-color-control); border: 1px solid var(--ex-color-control-border); } .ex-steps--wizard .ex-steps__item--done { color: var(--ex-color-text); } .ex-steps--wizard .ex-steps__item--done::before { background: var(--ex-color-success-bg); border-color: var(--ex-color-success); color: var(--ex-color-success); } .ex-steps--wizard .ex-steps__item--current { color: var(--ex-color-text); font-weight: 600; border-color: var(--ex-color-accent); background: var(--ex-color-accent-soft); } .ex-steps--wizard .ex-steps__item--current::before { background: var(--ex-color-accent); border-color: var(--ex-color-accent); color: var(--ex-color-accent-contrast); } /* Forms ------------------------------------------------------------------ */ .ex-form { display: flex; flex-direction: column; gap: var(--ex-space-4); max-width: 32rem; } /* 32rem is right for a column of fields somebody reads down and wrong for a control whose content is wide by nature: a pasted CSV, where every line is a row and wrapping them destroys the shape the person is checking. Opt in, so the default stays the readable measure. */ .ex-form--wide { max-width: none; } /* A control holding data rather than prose. Pasted rows line up column by column in a monospaced face and do not in a proportional one, which is the difference between seeing a misplaced comma and not. Wrapping off for the same reason: a wrapped row stops looking like a row. */ .ex-field__textarea.ex-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--ex-text-sm); line-height: 1.6; white-space: pre; overflow-x: auto; } .ex-field { display: flex; flex-direction: column; gap: var(--ex-space-1); } /* The label follows its control: quiet while the field is at rest, full strength once the reader is in it. Hover counts as well as focus — pointing at a field is already intent. */ .ex-field__label { font-size: var(--ex-text-xs); font-weight: 600; color: var(--ex-color-text-muted); letter-spacing: 0.01em; transition: color var(--ex-transition); } /* Both wrappers a label can sit in. A single control lives in .ex-field; a group of them (radios, check boxes) lives in .ex-fieldset with its label as the , and the rule missed that one, so a group was the one kind of field whose label did not follow it. Any new wrapper belongs on this list. */ .ex-field:hover .ex-field__label, .ex-field:focus-within .ex-field__label, .ex-fieldset:hover .ex-field__label, .ex-fieldset:focus-within .ex-field__label { color: var(--ex-color-text); } /* A quiet "(optional)" hint appended to a label. */ .ex-field__optional { margin-left: var(--ex-space-1); font-weight: 400; font-size: var(--ex-text-2xs); color: var(--ex-color-text-faint); } .ex-field__input { padding: var(--ex-pad-control); border-radius: var(--ex-radius); } /* ONE FACE AND ONE SIZE FOR EVERY BOX A PERSON TYPES IN, wherever on a screen it happens to sit. A form control does not inherit the page's typeface, so each of these has always had to say `font: inherit` for itself — and each of them said it separately, which is how the two search boxes ended up a size smaller than every other input in the product. Nothing compares them: a search box lives on a list toolbar and a field lives on a form, and the only screens holding both are the ones where a filter row sits above a table. Stated once, in the same list shape the fill, the hover and the focus below already use, so a new control is added to a list rather than given a private copy of the block. Padding and radius stay with each control: a search box's left padding clears its icon, a textarea's is its own, and those are genuinely different. Face, size and colour are not. (2026-08-19) */ .ex-field__input, .ex-field__textarea, .ex-datatable__search input, .ex-listbar__search input { font: inherit; font-size: var(--ex-text-md); color: inherit; } /* One height for everything a person can click or type into, so a button beside an input lines up exactly rather than nearly. box-sizing is stated because these carry a border. LINE-HEIGHT IS PART OF THE HEIGHT, and leaving it out is what made this token a near-miss for a year. min-height is a floor: it decides the height only while the content fits inside it. .ex-btn states line-height 1.2, so its content came to about 33px and the floor governed — every button was exactly 2.375rem. A text input stated nothing and inherited the body's 1.5, so 14px text made a 21px line, and 21 + 16 of padding + 2 of border is 39px. It sailed past the floor and sized itself. So every input in this product has been one pixel taller than the button beside it. One pixel is under the threshold at which anybody files a bug and over the threshold at which a form looks very slightly wrong, which is the worst place for a defect to sit. Stating the line-height here puts the content back under the floor and hands the height to the token, for both. A textarea is deliberately exempt from all of it: its height is its number of rows, and it wants the body's 1.5 because somebody is reading a paragraph in it. */ .ex-field__input, .ex-select__control, .ex-datepicker__control, .ex-datatable__search input, .ex-listbar__search input, .ex-btn { box-sizing: border-box; min-height: var(--ex-control-height); line-height: 1.2; } /* THE DATEPICKER'S INNER FIELD IS NOT ON THAT LIST, and it used to be — which made every date on every screen two pixels taller than the input beside it. It is the same shape as the one-pixel bug described above, one level down. .ex-datepicker__field is the text input *inside* .ex-datepicker__control, and the control carries the border while holding zero vertical padding. Give the inner field the floor as well and it becomes 38px of content; the control then has to fit 38px plus its own 2px of border, so it lands at 40px and sails past the floor exactly as the outer control did before. The floor belongs to whichever element draws the edge, and only that one. The field is sized by its own padding and line-height, comes to about 33px, and fits inside the control's floor with room to spare — so the token governs the height of the date control, and a date lines up with the text input and the select beside it and with the button underneath. Its line-height is NOT set here, because it would not survive: the field's own block declares `font: inherit`, which is a shorthand that resets line-height, and it sits later in the file. The 1.2 lives there, stated after the shorthand. Setting it here as well would look like belt and braces and be neither. */ .ex-datepicker__field { box-sizing: border-box; } .ex-btn--sm { min-height: var(--ex-control-height-sm); } /* The same faint grey in every box that has a prompt in it — a search box's placeholder is doing exactly the same job as a field's and was reading a shade darker for no reason anybody chose. */ .ex-field__input::placeholder, .ex-field__textarea::placeholder, .ex-datatable__search input::placeholder, .ex-listbar__search input::placeholder { color: var(--ex-color-text-faint); } /* Control states — one place, every control ------------------------------- A field moves through three states and the reader should be able to tell them apart without looking twice: rest tinted fill, hairline border. The control sits back, so a form reads as a column of labels rather than a grid of white boxes. hover the fill lifts toward white and the border firms. Nothing moves. focus full surface colour, and the border darkens all the way to the text colour. Focus is carried by the fill and the border alone. Nothing is added on top: no bar, no ring, and no outline either. An outline here draws a *second* edge outside the border — a text input matches :focus-visible on a plain mouse click, so it is not a keyboard-only addition, it is a double ring on every field. The border going from hairline grey to full text colour, against a fill that goes to white, is the indicator. */ /* This block owns the fill and the border for every control listed. A control's own rule sets its shape (padding, radius, layout) and nothing else — declaring `border` there would land later in the file and quietly win. A new control is added to these three lists; there is deliberately no generic `.ex-control` hook, because one existed with no users and an extension point nobody has extended is a guess, not a seam. */ .ex-field__input, .ex-field__textarea, .ex-select__control, .ex-datepicker__control, .ex-cal__select, .ex-datatable__search input, .ex-listbar__search input { background-color: var(--ex-color-control); border: 1px solid var(--ex-color-control-border); transition: background-color var(--ex-transition), border-color var(--ex-transition), color var(--ex-transition); } .ex-field__input:hover, .ex-field__textarea:hover, .ex-select__control:hover, .ex-datepicker__control:hover, .ex-cal__select:hover, .ex-datatable__search input:hover, .ex-listbar__search input:hover { background-color: var(--ex-color-control-hover); border-color: var(--ex-color-control-border-hover); } .ex-field__input:focus, .ex-field__textarea:focus, .ex-cal__select:focus, .ex-datatable__search input:focus, .ex-listbar__search input:focus, .ex-select__control:focus-visible, /* The datepicker's control wraps the text input, so focus lands inside it, not on it. */ .ex-datepicker__control:focus-within, .ex-select.is-open .ex-select__control, .ex-datepicker.is-open .ex-datepicker__control { outline: none; background-color: var(--ex-color-surface); /* The focused edge takes the brand accent, so the field a person is typing in belongs to the same colour as the button they will press to save it. Buttons already focus in the accent; a field stopping at neutral grey was the one control that ignored the company's own theme. Still the border and not an added outline: an outline would draw a second edge outside this one, and a text input matches :focus-visible on an ordinary mouse click, so it would be a double ring on every field rather than a keyboard-only affordance. */ border-color: var(--ex-color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ex-color-accent) 15%, transparent); } /* Invalid runs the same three states in danger tones. The edge must stay red *through* hover and focus: the reader is in the field precisely because something is wrong with it, and a neutral border there leaves the message below as the only sign of it. These need the :hover/:focus compounds to outrank the neutral state rules above — a plain .ex-field__input--invalid loses to .ex-field__input:hover on specificity, wherever it sits in the file. The fill still lifts, so the progression survives. */ .ex-field__input--invalid, .ex-field__textarea--invalid, .ex-field__input--invalid:hover, .ex-field__textarea--invalid:hover { border-color: var(--ex-color-danger); } .ex-field__input--invalid:focus, .ex-field__textarea--invalid:focus { border-color: var(--ex-color-danger-hover); } /* An enhanced select and an enhanced date field are DIVS and INPUTS we build, not the native control the browser validates. The native one is 1px wide and transparent, so marking it red marks nothing a person can see — these are the elements that have to carry the state instead. */ .ex-select__control--invalid, .ex-select__control--invalid:hover { border-color: var(--ex-color-danger); } .ex-select__control--invalid:focus { border-color: var(--ex-color-danger-hover); } /* A SELECT THAT IS NOT ANSWERABLE YET. The control is a div, so the browser's own disabled look does not reach it and the field would otherwise be indistinguishable from one somebody simply has not got to. Left in place rather than hidden: on a ladder of four, seeing the rungs still to come is what tells somebody the form has more in it. FADED RATHER THAN RECOLOURED, and that is a correction. The first attempt flattened the fill to the page background, which is a hair off this control's own resting fill -- so on the screen where three of four steps were shut, all four looked the same. Found in a screenshot, which is the only place it was ever going to be found. Opacity moves the border, the label and the caret together, so the whole field recedes rather than one part of it changing shade. */ .ex-select.is-disabled { opacity: 0.5; } .ex-select.is-disabled .ex-select__control, .ex-select.is-disabled .ex-select__control:hover { background-color: var(--ex-color-bg); border-color: var(--ex-color-border); border-style: dashed; color: var(--ex-color-text-muted); cursor: not-allowed; } .ex-datepicker__field--invalid, .ex-datepicker__field--invalid:hover { border-color: var(--ex-color-danger); } .ex-datepicker__field--invalid:focus { border-color: var(--ex-color-danger-hover); } /* A control that cannot be typed in never lights up: the fill flattens into the page background so it reads as furniture. */ .ex-field__input:disabled, .ex-field__textarea:disabled, .ex-field__input[readonly], .ex-field__textarea[readonly] { background-color: var(--ex-color-bg); border-color: var(--ex-color-border); color: var(--ex-color-text-muted); } .ex-field__input:disabled, .ex-field__textarea:disabled { cursor: not-allowed; } .ex-field:has(:disabled) .ex-field__label { color: var(--ex-color-text-faint); } .ex-field__error { font-size: var(--ex-text-xs); color: var(--ex-color-danger); } /* THE SERVICE'S "NO", ON THE FORM THAT ASKED. * * A refusal raised while posting used to render the shared problem page: the heading and the * sentence were right, and everything else about it was wrong. The typed entry was gone, the two * buttons offered the dashboard and the book list to somebody halfway through recording a * transaction, and Back re-served an empty form. Reported as a very big gap, and it was: the person * who can fix "that category goes the other way" is standing at the form with the wrong category * selected, and the product had just walked them away from it. * * The problem page is still right for a refusal met by navigating -- a URL into another book, a * record that is not yours. This is for the other kind: a "no" about the content of a form, shown * beside the fields that produced it, with everything still typed in. * * role="alert" in the markup, not decoration: the re-rendered page looks almost identical to the one * just submitted, and a screen reader is told what changed. */ .ex-form__refusal { grid-column: 1 / -1; display: flex; gap: var(--ex-space-3); align-items: flex-start; padding: var(--ex-space-3) var(--ex-space-4); border: 1px solid var(--ex-color-danger); border-radius: var(--ex-radius); background: var(--ex-color-danger-bg); } .ex-form__refusal > .ex-icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; color: var(--ex-color-danger); } .ex-form__refusal-title { font-weight: 600; color: var(--ex-color-danger); } .ex-form__refusal-why { margin-top: 0.15rem; font-size: var(--ex-text-sm); } /* Buttons ---------------------------------------------------------------- */ /* Links are neutral by default — they take the colour of whatever they sit in (nav items, buttons, breadcrumbs style their own). Only an explicit .ex-link is a coloured, hover-underlined text link. */ a { color: inherit; text-decoration: none; } /* A text link, behaving like the two places links already work. At rest it is the table link: accent, dotted underline. Dotted rather than solid so a paragraph carrying several does not read as ruled, but still visibly a link without relying on colour — one man in twelve cannot use colour as a signal. On hover it is the breadcrumb: the underline goes solid and a soft accent pill appears behind it. The pill is padded and pulled back by the same amount, so nothing on the line moves when it appears — a link that shifts its own paragraph on hover is worse than one with no hover at all. Focus gets the identical treatment. A hover state that a keyboard cannot reach is half a state. */ .ex-link { color: var(--ex-color-accent); font-weight: 500; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 0.2em; text-decoration-thickness: 1px; padding: 0.1rem 0.3rem; margin: -0.1rem -0.3rem; border-radius: var(--ex-radius); transition: background var(--ex-transition), color var(--ex-transition); } .ex-link:hover, .ex-link:focus-visible { color: var(--ex-color-accent-hover); background: var(--ex-color-accent-soft); text-decoration-style: solid; } .ex-btn { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; gap: var(--ex-space-2); font: inherit; font-size: var(--ex-text-sm); font-weight: 500; line-height: 1.2; padding: 0.45rem 0.85rem; color: var(--ex-color-text); background: var(--ex-color-surface); border: var(--ex-border); border-radius: var(--ex-radius); cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--ex-transition), border-color var(--ex-transition), color var(--ex-transition), transform 0.06s ease; } .ex-btn .ex-icon { width: 1.05em; height: 1.05em; } .ex-btn:hover { background: var(--ex-color-bg); } .ex-btn:active { transform: translateY(1px); } .ex-btn:focus-visible { outline: 2px solid var(--ex-color-accent); outline-offset: 1px; } .ex-btn--primary { color: var(--ex-color-accent-contrast); background: var(--ex-color-accent); border-color: var(--ex-color-accent); } .ex-btn--primary:hover { background: var(--ex-color-accent-hover); border-color: var(--ex-color-accent-hover); } /* Quiet button for toolbars and secondary actions. */ .ex-btn--ghost { background: none; border-color: transparent; color: var(--ex-color-text-muted); } .ex-btn--ghost:hover { background: var(--ex-color-bg); color: var(--ex-color-text); } .ex-btn--sm { padding: 0.3rem 0.6rem; font-size: var(--ex-text-xs); } /* A button at the end of its range: visibly inert but kept in place, so a pager holds its shape. */ .ex-btn--disabled { opacity: 0.5; pointer-events: none; } /* AND THE SAME FOR A BUTTON THE BROWSER ITSELF HAS DISABLED, which had no styling at all until 2026-08-24. The class above is for a link: an cannot carry the disabled attribute, so a pager at its last page says so with a class. A real