/* Echelon — component layer on top of Tailwind utilities. */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap'); :root { --vault: #0A0B0D; --vault-rgb: 10 11 13; --obsidian: #14161A; --obsidian-rgb: 20 22 26; --gunmetal: #1B1E24; --gunmetal-rgb: 27 30 36; --hairline: #262B33; --hairline-rgb: 38 43 51; --ivory: #E9E5DB; --ivory-rgb: 233 229 219; --slate: #99A0AB; --slate-rgb: 153 160 171; --dim: #6E7581; --dim-rgb: 110 117 129; --champagne: #C9A45C; --champagne-rgb: 201 164 92; --champagne-hi: #C9A45C; --champagne-hi-rgb: 201 164 92; /* THE LOGO'S GOLD, AND IT NEVER MOVES. The note above `body.app-light` says why there have to be two of these and which one a rule wants. */ --champagne-fill: #C9A45C; --champagne-fill-rgb: 201 164 92; --verified: #4DA97D; --verified-rgb: 77 169 125; --cognac: #C98F45; --cognac-rgb: 201 143 69; --signal: #C05A44; --signal-rgb: 192 90 68; --action: #C9A45C; --action-rgb: 201 164 92; --action-hi: #C9A45C; --action-hi-rgb: 201 164 92; /* THE TIER BADGE'S AIR — the fraction of its square that is empty above the Formation and below the rule. Direction C is asymmetric and deliberately does not fill its own box, so a badge dropped into a centred flex row centres its BOX and hangs its INK low against a heading. UNITLESS ON PURPOSE, so a call site can multiply by its own size: style="margin-top: calc(var(--seal-air-top) * -72px)" on a 72px badge pulls the empty top out and puts the mark's ink where the box edge was. Kept in step with ECH.ui.SEAL_AIR (assets/ui.js), which derives the same two numbers from the badge's own geometry constants. */ --seal-air-top: 0.0863; --seal-air-bottom: 0.15; } /* Light workspace theme — the app portals. Familiar to Central/Super Dispatch users: light-gray workspace, white cards, navy rail, blue actions; Echelon's champagne gold carries tier and verification identity. * * ONE GOLD. Owner's ruling, 27 Aug 2026: "I want all of the golds to be the * color of the logo." * * This overturns the two-gold split of 26 Aug, and it is worth keeping the * shape of the argument that lost, because the same problem will come back. * That ruling read the same complaint — the Formation and the TIER 5 chip * beside it were different golds — and answered it by SPLITTING the token in * two, so fills could stay #C9A45C while ink darkened to #A8823C for contrast. * It fixed the pair he photographed and left five golds in the system. He is * now looking at the result and saying the portal still reads as several * different golds, which it did. * * So there is exactly one, on every ground, in every role: * * --champagne · --champagne-hi · --champagne-fill · --action · --action-hi * all #C9A45C, light and dark * * The -hi pair survives as a NAME, not as a colour. Fourteen hover rules point * at it; collapsing them to the base value rather than deleting the token * keeps those call sites honest, and hover now reads through brightness rather * than hue (see .btn-primary:hover below). A palette with one gold in it is * what was asked for, and a button that does not answer the mouse is not a * palette question. * * WHAT THIS COSTS, MEASURED ON THIS WORKSPACE'S WHITE CARD (--obsidian is * #FFFFFF here), so nobody has to rediscover it: * * gold TEXT 3.55:1 → 2.35:1. Already under AA's 4.5:1 before this and * further under it now. Gold links, the "Advanced search" * control, "Your verification record", the sort caret. * small MARKERS 3.55:1 → 2.35:1. The 9px timeline dots and 1.5px bullets * no longer clear 3:1. They carry no information alone — * every one of them sits beside a label — but they are now * decoration rather than signal. * gold FILLS unchanged at #C9A45C, and BETTER off: see the button below. * * That is a legibility round, not a brand round, and it is the owner's to * call. What this file will not do is answer a brand instruction with a * quiet second gold — which is exactly how five of them accumulated. * * THE ONE THING THAT HAD TO MOVE WITH THE GOLD. `body.app-light .btn-primary` * printed WHITE on --action. White on #A8823C was 3.55:1, poor; white on * #C9A45C is 2.34:1, unreadable. The label is now #0A0B0D at 8.40:1 — which is * not a compromise but the correct pairing, already used by `.btn-primary` on * the dark ground and by `.chip-tier-3`, both of which print near-black on * this exact gold. The brighter gold is the more readable one the moment you * stop trying to read gold ITSELF. */ body.app-light { --vault: #F2F4F7; --vault-rgb: 242 244 247; --obsidian: #FFFFFF; --obsidian-rgb: 255 255 255; --gunmetal: #EEF1F4; --gunmetal-rgb: 238 241 244; --hairline: #DFE3E9; --hairline-rgb: 223 227 233; --ivory: #1E2733; --ivory-rgb: 30 39 51; --slate: #5C6875; --slate-rgb: 92 104 117; --dim: #8A94A0; --dim-rgb: 138 148 160; --champagne: #C9A45C; --champagne-rgb: 201 164 92; --champagne-hi: #C9A45C; --champagne-hi-rgb: 201 164 92; /* Re-stated, not re-mapped — the point of the token is that it is the same gold here as in :root. Declared rather than inherited so that deleting the line is a visible act and not a silent fall-through. Since 27 Aug that is true of the four tokens above it as well. */ --champagne-fill: #C9A45C; --champagne-fill-rgb: 201 164 92; --verified: #248A57; --verified-rgb: 36 138 87; --cognac: #B26F1B; --cognac-rgb: 178 111 27; --signal: #C94F3D; --signal-rgb: 201 79 61; --action: #C9A45C; --action-rgb: 201 164 92; --action-hi: #C9A45C; --action-hi-rgb: 201 164 92; /* SD's control ring, one step darker than the card rule. DECLARED HERE rather than only in the pages, because it was never declared here at all: nine carrier pages and assets/loadform.css each wrote `--line: #C4CDD5` into their own palette block, and every page that did not — board.html among them — reached the same grey through the `var(--line, #C4CDD5)` fallback that .fb-field and .sel-btn both spell out. Two routes to one colour, agreeing today by coincidence: the day the token moves, half the portal follows it and half keeps the fallback, silently. This line makes the house the single source and changes nothing on any page today — verified, every one of the ten local declarations is this same value. */ --line: #C4CDD5; } /* THE PHONE SURFACES — app/driver, driver.html, join.html, pickup.html. * * There are two palettes in this repo and it is better to say so than to let * them drift silently. The :root block above is the PORTAL palette that * docs/DESIGN.md names, and thirty carrier, broker and admin pages are drawn * in it. The design-lab mocks that the phone app is built to — home-screen, * app-login, app-walkthrough-v2 — are drawn in a slightly warmer ivory and a * muted sage, and so is the brand line the app was briefed against. Every one * of those four files was already half-forked: they carry dozens of * rgba(239,235,226,...) literals, which is #EFEBE2 spelled out, sitting * beside a var(--ivory) that resolves to #E9E5DB. Solid text and its own * hairlines were coming from two different whites. * * So the fork is declared, in one block, scoped to the four surfaces that * want it. If the portals are to win instead, delete this block and the four * class attributes; nothing else has to move. * * The hairline goes translucent for a reason of its own: the mocks draw every * rule as ivory at 9% over whatever it sits on, so the same declaration reads * correctly on the vault ground AND on a #16181D card. A solid #262B33 cannot * do both. */ .ech-phone { /* The fork does not touch champagne, but a phone frame drawn INSIDE a light workspace page would otherwise inherit that page's ink gold as its fill gold. Stated here so the phone's gold is the phone's gold wherever the frame is mounted. */ --champagne-fill: #C9A45C; --champagne-fill-rgb: 201 164 92; --ivory: #EFEBE2; --ivory-rgb: 239 235 226; --slate: #9AA0AA; --slate-rgb: 154 160 170; --dim: #6E747E; --dim-rgb: 110 116 126; --verified: #7FA88B; --verified-rgb: 127 168 139; --signal: #B4553F; --signal-rgb: 180 85 63; --hairline: rgba(239, 235, 226, .09); } html { background: var(--vault); } /* THE CANVAS BEHIND THE WORKSPACE. html cannot see body.app-light's token re-map, because those variables are declared ON body and html is its parent — so the canvas kept the marketing near-black under every light portal page. Invisible until someone overscrolls, and then it is a black band above a white workspace on all 37 of them. :has() lets the parent read the child's class; the literal matches --vault under app-light exactly. */ html:has(> body.app-light) { background: #F2F4F7; } body { font-family: 'Archivo', system-ui, sans-serif; font-size: 15px; line-height: 1.6; } ::selection { background: rgba(201, 164, 92, 0.28); } /* ---------- Type roles ---------- */ .eyebrow { font-family: 'Archivo', sans-serif; font-stretch: 115%; font-weight: 600; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); } .eyebrow-accent { color: var(--champagne); } .display-xl, .display-lg, .display-md { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'opsz' 90; font-weight: 380; color: var(--ivory); letter-spacing: -0.015em; } .display-xl { font-size: clamp(1.95rem, 7.2vw, 4.2rem); line-height: 1.06; } .display-lg { font-size: clamp(1.6rem, 5.2vw, 2.9rem); line-height: 1.12; } .display-md { font-size: clamp(1.32rem, 3.6vw, 1.9rem); line-height: 1.2; } .display-xl em, .display-lg em { font-style: italic; font-weight: 420; color: var(--champagne); } /* ---------- Buttons ---------- */ .btn-primary, .btn-ghost, .btn-danger, .btn-success { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; padding: 6px 16px; border-radius: 4px; /* 6 + 20 + 6 = 32 EXACTLY, and it only works with no border in the box. A 1px border adds 2px and the control comes out 34 — which is the defect dashboard.html's own skin note named months ago: "a 32px control drawn with one comes out 34px and drags everything on its row two pixels wide of the reference." So the ring is an INSET BOX-SHADOW on every variant below, painted inside the box and costing the layout nothing. `line-height` is stated rather than left to the face: Archivo's normal line box is ~21px and would put the button at 33 before the border was even counted. */ line-height: 20px; border: 0; /* THE REFERENCE'S OWN NUMBERS, off the reference's own DevTools. The owner measured Super Dispatch live on 28 Aug 2026 and sent the panels: the Add Contact primary is 191x32, the Search primary 79.55x32, BOTH at padding 6px 16px, and the search field's grid cell is 40 tall carrying 4px of padding -- a 32px input. The whole control ladder is ONE height. 32, NOT 36. Our own written note (docs/reference/superdispatch/ 02-design-system.md) said "Primary button 36px; secondary 32px", and that note is wrong -- corrected there in the same change. A measurement off the running product beats a line somebody typed about it. We sat at 44px tall, 10x20 pad, 13.5px type, 3px radius -- twelve pixels taller and four wider per side than the screen we are a clone of, on every button on every page. That is the whole of why our controls read chunky beside theirs; nothing about the colour or the type was ever the problem. THE 44px TOUCH FLOOR DOES NOT DIE, IT MOVES. 36px is right under a mouse and too small under a thumb, so the floor is re-asserted at the bottom of this block for coarse pointers only. The desk gets the sleek control; the phone still gets the target. Deleting that media query silently makes every portal button a 32px tap. */ min-height: 32px; transition: background 0.15s, border-color 0.15s, color 0.15s; cursor: pointer; white-space: nowrap; } .btn-primary { background: var(--champagne); color: #0A0B0D; box-shadow: inset 0 0 0 1px var(--champagne); } /* --champagne-hi and --action-hi are the same gold as their base since the one-gold ruling, so hover cannot be carried by the token any more. It is carried by brightness instead: same hue, visibly pressed. The filter reaches the label too, which is why the label is near-black — 7% off near-black is still near-black. */ .btn-primary:hover { background: var(--champagne-hi); box-shadow: inset 0 0 0 1px var(--champagne-hi); filter: brightness(0.93); } .btn-ghost { background: transparent; color: var(--ivory); box-shadow: inset 0 0 0 1px var(--hairline); } .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--champagne); color: var(--champagne-hi); } .btn-danger { background: transparent; color: var(--signal); box-shadow: inset 0 0 0 1px rgb(var(--signal-rgb) / 0.5); } .btn-danger:hover { background: rgb(var(--signal-rgb) / 0.12); } .btn-success { background: #27A567; color: #fff; box-shadow: inset 0 0 0 1px #27A567; } .btn-success:hover { background: #1F8A55; box-shadow: inset 0 0 0 1px #1F8A55; } /* THE DENSE VARIANT IS NOT A SHORTER BUTTON ANY MORE. Every control is 32px now, so .btn-sm only buys back horizontal room in a crowded row -- same height, same type, tighter sides. `min-height: 0` used to mean "opt out of the 44px floor"; the floor is pointer-gated below, so this states its own height rather than cancelling someone else's. */ .btn-sm { padding: 6px 12px; font-size: 14px; min-height: 32px; } /* THE ONE CONTROL THAT IS ALLOWED TO BE TALLER, and it is not a "big button": it is the single primary action in a page's TOP BAR — the reference's own "Add Load" seat, taped at 152.34x36. Everything else on every page is 32. Same padding, same type, same radius; four pixels of height and nothing else, because the page header's row is taller than a table row and a 32px control floats in it. USE IT ONCE PER PAGE AT MOST, and only in the header. A second .btn-lg on a page means the page has two primary actions, which is the real bug. Dense row actions keep .btn-sm; everything between them is the bare class. */ .btn-lg { min-height: 36px; } /* .sel-pop IS IN THIS LIST BECAUSE IT TAKES FOCUS AND IS NOT A TAG. ui.js opens the drawn menu by calling pop.focus() on a div[role="listbox"] (ui.js:1138) so the arrow keys have somewhere to land. The list below named a/button/input/select/textarea, none of which a div is, so nothing of ours applied and Chrome's own ring painted instead. IT IS REACHABLE ONLY FROM THE KEYBOARD, which is the whole point. Measured on board.html, 29 Aug: opening the Sort by menu with the MOUSE leaves :focus-visible unmatched and paints no ring at all; tabbing to the control and pressing Enter matches :focus-visible and paints `auto 1px` in rgb(0, 95, 204). That colour is `-webkit-focus-ring-color`, a SYSTEM colour that follows the OS accent — it reads #005FCC on a machine set to Blue and #E59700 on one set to Orange, which is why two people measuring the same defect on the same page can print two different numbers and both be reporting honestly. What is stable is that the colour is the browser's and never ours, in a workspace whose only accent is the gold. */ .btn-primary:focus-visible, .btn-ghost:focus-visible, .btn-danger:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .sel-pop:focus-visible { outline: 1.5px solid var(--champagne); outline-offset: 2px; } .btn-primary[disabled], .btn-ghost[disabled], .btn-success[disabled], .btn-danger[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* THE TOUCH FLOOR, re-asserted where it is actually needed. A fine pointer lands on 36px without thinking; a thumb does not. Keyed on the pointer and not on width, because a 1024px tablet is a touch device and a 900px window on a laptop is not. */ @media (pointer: coarse) { .btn-primary, .btn-ghost, .btn-danger, .btn-success, .btn-sm, .btn-lg { min-height: 44px; } .input, .select { min-height: 44px; } } /* A control the signed-in role may not use. It reads as unavailable but still takes the click, because a button that swallows a tap and says nothing is indistinguishable from one that is broken — and a title tooltip never appears on a touch screen at all. */ [aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } [aria-disabled="true"]:hover { opacity: 0.6; } /* ---------- The action menu ---------- OWNER'S TAPE, 29 Aug 2026, off the reference's own Options dropdown: item 193.53x36 at padding 8px 16px; panel 193.53x415 at padding 8px 0. THE ITEM IS 36, NOT 32. A menu row is not a button and does not want the button's height: 8 + 20 + 8 = 36 EXACTLY, on the same 20px line box the button block states for the same reason (Archivo's normal line box is ~21 and would put the row at 37 before anything else was counted). THE PANEL'S PADDING IS VERTICAL ONLY — 8px 0. Items run edge to edge and paint their hover the full width of the menu; a panel with side padding gives every row an inset highlight the reference does not draw. THE DIVIDER CARRIES NO MARGIN, and the same 29 Aug 2026 tape proves it rather than asserting it. The panel it measured is 415 tall over eleven items and three rules, and the sum closes on exactly one arrangement: 415 = 8 + 8 of panel padding, plus 11 x 36 of items, plus 3 x 1 of rule. Restore the 8px margin this line used to carry and the panel is 48 taller than the owner's tape says it is. THAT 415 IS THE CONTENT BOX, AND OURS MEASURES 417 OUTSIDE. The tape was taken on the reference's UL, whose border lives on the MUI Paper wrapping it; .opt-pop is both the paper and the list, so its own 1px hairline top and bottom rides outside the sum above. Two pixels, inside the house tolerance, and named here so the next reader measuring 417 against 415 knows which two they are looking at rather than going hunting for a margin. SO A SEPARATOR IS A HAIRLINE BETWEEN ROWS, NOT A GAP. The grouping is carried by the line itself and by the order of the items either side of it — never by air. The rows already pad themselves 8px top and bottom, so the rule lands in the middle of a 17px clearing it never had to buy. One thing follows for whoever writes the next menu: do not open or close a panel with a separator. With no margin of its own it would sit 8px off the panel edge against nothing, and read as a stray line rather than a break. WIDTH IS THE PAGE'S CALL, not this file's. Every consumer states a FIXED width for its own reason (a menu sized to its content walks its edge around as the items change), and those reasons differ per page — loads.html sizes to its longest verb, contacts.html's carries the word "Delete". So this block dresses the menu and the page sizes it. THIS IS NOT .sel-pop. That is a picker — you open it to choose a value and the control keeps it. This is a verb list: you open it to do something and it closes. They are allowed to differ and they do. */ .opt-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 16px; border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 4px; background: #FFFFFF; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 20px; color: var(--ivory); cursor: pointer; } .opt-btn:hover { background: #F3F5F8; } .opt-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 1px var(--action); color: var(--action); } .opt-pop { position: fixed; z-index: 85; padding: 8px 0; background: #FFFFFF; border: 1px solid var(--hairline); border-radius: 4px; box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14); } .opt-pop[hidden] { display: none; } .opt-item { display: block; width: 100%; text-align: left; min-height: 36px; padding: 8px 16px; font-family: inherit; font-size: 14px; line-height: 20px; color: var(--ivory); } .opt-item:hover { background: #F3F5F8; } .opt-item.danger { color: var(--signal); } /* The divider between action GROUPS — not between every item. */ .opt-sep { height: 1px; background: var(--hairline); } /* ---------- The page action bar ---------- Owner, 29 Aug 2026. The form screens' old header row "kinda just exists in its own no man's land". It did: it was a 64px band floating in the grey ground inside the form column, with the page's own background running above, below and both sides of it. The reference does not do that. It runs a REAL BAR — a full-width strip on card-white, hard against the identity bar above it, with a hairline underneath, and the grey ground with its cards starting below that line. SO THE BAR LEFT .sd-form AND LEFT .sd-main. It is a sibling of
now, directly under #app-shell, which is what lets it span edge to edge: the body carries the rail's 88px inset (body.app-light.with-rail), so a block-level child of the body already runs from the rail to the viewport's right edge with nothing to negate. AND THE 32 OF THE TAPE IS LITERAL AGAIN. While the bar lived inside the form column it could not state its horizontal padding — the column was already 32px off the edge and stating 32 again would have doubled it, so the bar took `16px 0` and inherited the rest. Out here there is nothing between the bar and the window, so the tape's 16px 32px is simply the bar's own padding, exactly as measured. That deviation is now retired. GROUND BY TOKEN, NOT BY LITERAL: --obsidian is the card ground and resolves to #FFFFFF on the light work surface, so the bar cannot drift away from the cards it sits above. Static, not sticky — the reference capture scrolls it away with the page. */ .sd-actionbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 32px; background: var(--obsidian); border-bottom: 1px solid var(--hairline); } /* THE TWO-LINE VARIANT — the load DOCUMENT page, owner's ruling 29 Aug 2026. A form screen's bar says one thing ("Create Load") and stays 64. A record's bar has to say WHICH record, so it carries the id as a heading with the load's tags beside it, and the one secondary fact under them. Nothing here sets a height: the second line makes the bar taller by existing, which is why .sd-actionbar states a min-height and never a height. 16 + 29 + 10 + 20 + 16 = 91, the tape's number, reached by adding up rather than by asserting. THE BACK CONTROL STAYS TOP-ALIGNED, not centred on a two-line stack: a 32px square floating halfway down a 91px bar reads as unmoored, and every other bar in the family has it level with the title. */ .sd-bar-id { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .sd-bar-stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; } /* The id line: the heading and whatever chips the record earns, on one row. */ .sd-bar-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; } .sd-bar-line .sd-h1 { line-height: 29px; } /* The secondary fact — quiet, and never a door. */ .sd-bar-meta { font-size: 14px; line-height: 20px; color: var(--slate); } /* ---------- Elegant figures (marketing surfaces) ---------- Fraunces lining/tabular numerals — engraved, not techy. Use for tier bands, statistics, and offers on the dark marketing pages. The app portals keep mono figures: there, numbers are working data, not typography. */ .fig { font-family: 'Fraunces', Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-weight: 500; letter-spacing: 0.01em; font-optical-sizing: auto; } /* Severity labels (enforcement ledger) — small caps over a short rule. Replaces pills on marketing surfaces; quieter, engraved. */ .sev { font-family: 'Archivo', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate); } .sev::after { content: ''; display: block; width: 26px; height: 1px; margin-top: 9px; background: currentColor; opacity: 0.55; } .sev-major { color: var(--cognac); } .sev-disqualifying { color: var(--signal); } /* ---------- Chips, pills, badges ---------- * * A TRANSLUCENT COLOUR MUST FOLLOW THE THEME, AND AN rgba() LITERAL CANNOT. * * Every palette colour above is declared twice — as a hex for solid use and as * an `--x-rgb` triplet for translucent use — and `body.app-light` re-maps both. * The triplet is the only one of the two that a fractional alpha can reach: * `rgb(var(--verified-rgb) / .4)` re-maps with the theme, and * `rgba(77, 169, 125, .4)` is the DARK mint, forever, on a light page. * * That is how every status pill in the portal came to be outlined in a * different hue from its own label: the text was `var(--verified)`, which under * app-light is #248A57, while the border stayed the dark #4DA97D — a forest * green word inside a mint ring, 292 times across 33 pages. * * So: no rgba() literal here may stand for a palette colour. Structural * neutrals (black shadows, white insets) are not palette colours and stay as * they are; so does anything with a real `body.app-light` override below. */ /* THE TIER CHIP — direction C. The Formation, then the tier, on one plane. * * TWO MEASUREMENTS DO ALL THE WORK, and both are stated relative to the type * rather than in pixels, because this chip renders in THREE typefaces on three * grounds: Fraunces on the dark marketing pages, Roboto in the light workspace, * Archivo on the phone (both overrides below). Their cap heights are not the * same fraction of an em, and a pixel here would be right on one of them. * * HEIGHT — `height: 1cap` is exactly the cap height of whatever font the * chip resolved to. The `.71em` above it is the fallback for an engine * without the unit: an unsupported unit invalidates its own declaration and * the previous one stands, which is the whole pattern. 0.71 is Roboto's * ratio (1456/2048) and within a hair of Fraunces' and Archivo's. * * PLANE — `align-items: baseline`. A replaced element's baseline is its * bottom edge, so the mark's feet land ON the text baseline; being exactly * one cap tall, its top lands on the cap line. Centring instead would float * it against the LINE BOX — ascender and descender air included — and it * would sit visibly low beside capitals. The owner asked for one plane. * * THE MARK IS CROPPED TO ITS INK by the viewBox the renderer passes * (`2 4 20 16`), not scaled down inside a 24-unit square: the square carries * two units of air at the left and four at the top, which at 8px tall is a * drifting gap where the composition wants a measured one. Width follows the * 20:16 ratio on its own — never state one. * * NO MIN-WIDTH ANY MORE. The 72px track existed because roman numerals are * five different widths, and a fixed CENTRED track is now the one thing that * would break this composition: it pushes the mark off the column's left edge, * which is the edge the whole direction is built on. * Arabic pays for its removal on two of the three grounds — measured, all five * chips are 69.89px in the light workspace (Roboto) and 70.47px on the phone * (Archivo), because both faces set every figure to one advance. FRAUNCES DOES * NOT: on the dark marketing ground the five come out 75.55–77.30px, a 1.75px * spread that `tabular-nums` cannot fix — the widths are unchanged with the * property on, with `font-feature-settings:'tnum' 1`, and with both, so the * Google build of the face simply has no `tnum` to switch on (measured). No * shipping dark surface stacks tier chips in a column today — apply-carrier * shows one at a time — so the spread is recorded here rather than papered * over with a track. If a dark column ever appears, that is the moment to * decide, and the decision is a typeface one. */ .chip-tier { display: inline-flex; align-items: baseline; gap: 6px; flex: none; font-family: 'Fraunces', Georgia, serif; font-variant-numeric: lining-nums tabular-nums; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--champagne); border: 1px solid rgb(var(--champagne-rgb) / 0.55); /* SLEEK — owner ruling 26 Aug 2026 (evening): "sleek and not too thick... not too much room above and below the actual text." line-height 1 makes the text box exactly the type; 2px of breathing room, no more. The status chip below states the same two numbers so every chip lands the same height on the same ground. */ line-height: 1; padding: 2px 8px; border-radius: 4px; white-space: nowrap; } .chip-tier > .chip-fm { flex: none; display: block; width: auto; height: .71em; /* fallback: no `cap` unit */ height: 1cap; /* the real rule — exactly the text's cap height */ } /* The name is historical: it marks the TOP OF THE LADDER, not the third rung. `currentColor` on the mark means the inversion carries the Formation with it — one declaration, and the badge and the chip invert the same way. THE FILL IS `--champagne-fill`, THE OUTLINE IS `--champagne`, and that is the whole split (see the note above `body.app-light`). The four outline rungs are gold WORDS with a gold hairline round them and a Formation drawn in the same currentColor — ink, all three, and ink has to stay readable, so they follow the per-ground token. This one is a gold PLATE with near-black printed on it, which is the logo's job, so it is the logo's gold on every ground. Filling it with the ink gold is what made the owner's chip disagree with the Formation standing four pixels above it in the same bar. */ .chip-tier-3 { background: var(--champagne-fill); color: #0A0B0D; border-color: var(--champagne-fill); } /* THE STATUS CHIP — the same rectangle, in a status colour. * * `.pill` rides along on every selector here and keeps only its name. The * shape is gone ecosystem-wide by the owner's ruling of 25 Aug 2026, and there * are 106 hand-written `class="pill…"` spans across 26 portal and website * pages, plus 14 ECH.ui.statusPill call sites: making the class MEAN the * rectangle retires the shape in one edit instead of 120, on pages this agent * has no fence over. Each name is corrected as its own page is next opened. * * A LIGHT BACKDROP WITH TONED LETTERING, not a filled slab — the owner chose * the quiet treatment over solid green. The wash and the border are both * fractions of the tone's own `--x-rgb` triplet, so they re-map with the theme * (see the note above this section: an rgba() literal cannot). * * THE DOT STAYS ROUND. It is round because it is a dot, not because it is a * capsule, and the ruling that killed pills protects dots by name. */ .chip-status, .pill { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; /* Same two numbers as .chip-tier — the sleek ruling wants every chip the same height on the same ground. */ line-height: 1; padding: 2px 9px; border-radius: 4px; border: 1px solid rgb(var(--slate-rgb) / 0.28); background: rgb(var(--slate-rgb) / 0.10); color: var(--slate); white-space: nowrap; } .chip-status::before, .pill::before { content: ''; width: 5px; height: 5px; border-radius: 999px; background: currentColor; } /* THE GREEN IS OUT. Owner's ruling, 28 Aug 2026: "take out all of these light green active chips and tags and the verified chips… we can add those and come up with a rule set for those at another point." It is neutralised HERE rather than edited out of seventy-nine call sites in twenty-nine files, so there is one place to reverse it when that rule set arrives — and so no page can quietly keep a green chip the others lost. WHAT SURVIVES IN GREEN: nothing on the portal. The driver CARD's attestation keeps its sage (`--ech-verified`, a separate token on a black artefact), and the seal on the users panel was always gold. Neither is one of these chips. */ .chip-status-verified, .pill-verified, .pill-active, .pill-delivered { color: var(--slate); border-color: rgb(var(--slate-rgb) / 0.28); background: rgb(var(--slate-rgb) / 0.10); } .chip-status-caution, .pill-watch, .pill-pending { color: var(--cognac); border-color: rgb(var(--cognac-rgb) / 0.28); background: rgb(var(--cognac-rgb) / 0.10); } .chip-status-alert, .pill-restricted, .pill-suspended, .pill-expelled { color: var(--signal); border-color: rgb(var(--signal-rgb) / 0.28); background: rgb(var(--signal-rgb) / 0.10); } .chip-status-accent, .pill-open { color: var(--champagne); border-color: rgb(var(--champagne-rgb) / 0.28); background: rgb(var(--champagne-rgb) / 0.10); } .pill-assigned, .pill-transit, .pill-requested { color: var(--slate); } /* THE PHONE GROUND. The palette forks itself at `.ech-phone` up at the top of this file, so the colours here are already right — champagne is not forked, sage green is. What the fork does not carry is the type register: the phone surfaces are set in Archivo throughout and a Fraunces tier chip would be the only serif on the screen. Stated once, both chips. */ .ech-phone :is(.chip-tier, .chip-status, .pill) { font-family: 'Archivo', sans-serif; letter-spacing: 0.07em; } .ech-phone .chip-tier { font-weight: 700; font-size: 10.5px; } .badge-verified { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--slate); white-space: nowrap; } /* The badge's green dot goes with the green chips — same ruling, and it was the same colour doing the same job in a rounder shape. */ .badge-verified::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--slate); box-shadow: 0 0 0 3px rgb(var(--slate-rgb) / 0.15); } /* ---------- The ledger line — carrier chrome row two ---------- */ /* THE LEDGER LINE IS GONE — owner's ruling, 28 Aug 2026, off header-mock.html. .hdr-ledger and the .hl-* cells lived here (a white 40px four-cell rule under the carrier strip: Standing · Coverage · Insurer · Next re-verification). The tier chip moved up into the identity row, and the remaining facts read off the account on the carrier profile's Insurance card instead. The classes died with the bar — nothing else ever wore them. design-lab/style-guide-web.html still documents them and is not this file's to edit; see the session report. */ /* ---------- Redaction (signature element) ---------- */ /* Access matrix — who can see each field, and when. Replaces the redaction bars. Those read as a loading skeleton rather than a seal, and because each bar was as long as the value it hid, they published the length of every sealed field while claiming to hide it. This shows the grant instead: what the board carries, what the assigned carrier gets and at which stage, and what only the broker ever sees. */ .mx { width: 100%; border-collapse: collapse; font-size: 12px; } .mx th { font-family: 'Archivo', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--dim); padding: 0 0 9px; text-align: center; } .mx th:first-child { text-align: left; } .mx td { padding: 7px 0; border-top: 1px solid rgba(245,242,235,0.07); text-align: center; color: var(--slate); } .mx td:first-child { text-align: left; padding-right: 10px; } .mx .yes { color: var(--verified); font-size: 15px; line-height: 1; } /* The literal here was #9AA0AA — the PHONE fork's slate, not this palette's #99A0AB — on a table no phone surface renders. One unit of red and blue apart in the dark, and a whole shade wrong under app-light. */ .mx .no { color: rgb(var(--slate-rgb) / 0.3); font-size: 13px; line-height: 1; } /* A stage name rather than a tick: the carrier does get this, later. */ .mx .later { font-variant-numeric: tabular-nums; font-size: 10px; letter-spacing: .04em; color: var(--champagne); } /* The line where board-visible ends and sealed begins. */ .mx tr.split td { border-top: 1px solid rgba(201,164,92,0.28); padding-top: 9px; } body.app-light .mx td { border-top-color: rgba(10,11,13,0.08); } body.app-light .mx tr.split td { border-top-color: rgba(201,164,92,0.34); } /* A field sealed even from the desk reading the page. Stated, not drawn. */ .mx-sealed { font-family: 'Archivo', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--hairline); border-radius: 3px; padding: 2.5px 8px; } .redact { /* Even character width so the hatch reads as a redaction bar rather than ragged text — but that is a WIDTH requirement, not a typeface one, and tabular figures deliver it in our own face. */ font-variant-numeric: tabular-nums; color: transparent; position: relative; border-radius: 2px; user-select: none; background: repeating-linear-gradient(90deg, #23262c 0 9px, #1b1e23 9px 11px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); letter-spacing: 0.05em; font-size: 12px; } .redact-note { font-size: 11px; color: var(--dim); font-style: italic; display: inline-flex; align-items: center; gap: 5px; } .redact-note::before { content: '⬒'; font-style: normal; font-size: 10px; color: var(--champagne); } /* ---------- Cards, rules, notices ---------- */ .card { background: var(--obsidian); border: 1px solid var(--hairline); border-radius: 4px; } .card-pad { padding: 24px; } .rule { position: relative; border: 0; border-top: 1px solid var(--hairline); margin: 0; } .rule::before { content: ''; position: absolute; top: -1px; left: 0; width: 48px; border-top: 1px solid var(--champagne); } .notice { border-left: 2px solid var(--champagne); background: rgb(var(--champagne-rgb) / 0.05); padding: 16px 20px; font-size: 14px; color: var(--slate); border-radius: 0 3px 3px 0; } .notice strong { color: var(--ivory); } .notice-red { border-left-color: var(--signal); background: rgb(var(--signal-rgb) / 0.06); } /* ---------- Tables ---------- */ .table-board { width: 100%; border-collapse: collapse; font-size: 13px; } .table-board thead th { font-family: 'Archivo', sans-serif; font-stretch: 112%; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-align: left; padding: 10px 14px; background: var(--obsidian); border-bottom: 1px solid var(--hairline); white-space: nowrap; } /* Headers hold one line while there is room for it. Below that they wrap rather than set a floor under the table's width — a two-line "Recorded revenue" costs nothing, and a table that scrolls sideways costs the reader the columns they cannot see. */ @media (max-width: 1450px) { .table-board thead th { white-space: normal; } } /* Sortable column headers. Three states, cycled by clicking: ascending, descending, then back to the table's own order — because a broker who sorted by mistake needs the original list back without reloading. */ .table-board thead th.sortable { cursor: pointer; user-select: none; padding-right: 22px; position: relative; } .table-board thead th.sortable:hover { color: var(--champagne); } .table-board thead th.sortable::after { content: '\2195'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 11px; opacity: 0.32; font-weight: 400; } .table-board thead th.sortable[data-dir="asc"]::after { content: '\2191'; opacity: 1; color: var(--champagne); } .table-board thead th.sortable[data-dir="desc"]::after { content: '\2193'; opacity: 1; color: var(--champagne); } .table-board thead th.sortable[data-dir]:not([data-dir=""]) { color: var(--champagne); } /* Long free text wraps rather than forcing the table wider than its box. */ .table-board td.wrap { white-space: normal; min-width: 0; } .table-board tbody td { padding: 11px 14px; border-bottom: 1px solid rgba(38, 43, 51, 0.6); color: var(--ivory); vertical-align: middle; } .table-board tbody tr { transition: background 0.12s; } .table-board tbody tr:hover { background: rgba(27, 30, 36, 0.7); } .table-board tbody tr.row-selected { background: rgba(201, 164, 92, 0.06); } /* NUMBERS ALIGN WITHOUT A MONOSPACE FACE. The only reason a table column was ever set in IBM Plex Mono is that digits had to line up down the column — and OpenType tabular figures do exactly that in our own typeface. The monospace read as dated ("tacky and dated" was the owner's verdict) and it was never carrying anything but column alignment. Archivo with tabular-nums keeps the alignment and loses the terminal. */ .table-board .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; font-size: 13px; text-align: right; white-space: nowrap; } .table-board .mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 13px; white-space: nowrap; } .table-board .sub { color: var(--slate); font-size: 12px; } /* ---------- Forms ---------- */ .label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; } .input, .select, textarea.input { width: 100%; background: var(--gunmetal); border: 1px solid var(--hairline); /* 32px, the same height as every button -- the owner's DevTools capture puts the reference's search field in a 40px cell with 4px of padding on it. line-height and min-height are both stated because a bare padding sum lands on 32 or 33 depending on which face actually loads. */ color: var(--ivory); font-size: 14px; line-height: 20px; padding: 5px 12px; min-height: 32px; border-radius: 4px; transition: border-color 0.15s; } /* A textarea's height comes from its rows, not from a control ladder, so it keeps the roomier padding the 32px rule just took off the single-line fields. */ textarea.input { padding: 8px 12px; } .input::placeholder { color: var(--dim); } .input:focus, .select:focus { border-color: var(--champagne); outline: none; } .input-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.06em; } /* ---------- The labelled select — one box holding a prefix and a value ---- OWNER'S TAPE, 29 Aug 2026, off the reference's Filter By and again off its Sort By: a 32-tall box, the LABEL LIVING INSIDE IT as a 14px quiet prefix rather than floating above it, the value at 14px in the body ink, and the right-hand seat given over to the chevron. IT GRADUATED OUT OF app/carrier/loads.html. That page's skin note set the rule for its own contents — page-local while two pages wear a shape, house -owned the moment a third does. app/carrier/board.html's Sort by is the third wearer, so the shape lives here and each page states only its own width (Filter By 145, Sort by 195). loads.html still carries its own copy of these rules in its