/* * One stylesheet, hand-written, no build step (PLAN.md "UI"). Everything that * differs between the two themes is a custom property on :root — nothing below * the theme blocks should contain a raw colour, because scattered hex is what * made this file impossible to theme the first time. * * Theme resolution order, and all three matter: * 1. :root → light, the default * 2. @media (prefers-color-scheme: dark) → follows the OS when unset * 3. :root[data-theme="light"|"dark"] → an explicit choice, and it must * win in BOTH directions, which is why (3) repeats the full palette rather * than only the dark one. * The inline script in stamps data-theme before first paint. */ :root { color-scheme: light; --bg: #f4f5f7; --surface: #ffffff; --surface-sunken: #f7f8fa; --ink: #1b1d21; --ink-soft: #3f444c; --muted: #6b7280; --line: #e3e5ea; --line-strong: #cfd3da; --accent: #2f5fd0; --accent-ink: #ffffff; --accent-soft: #eef2fd; --ok: #17663d; --ok-line: #b7e0c6; --ok-bg: #eefaf2; --warn: #8a5a08; --warn-line: #f0d79a; --warn-bg: #fdf7e9; --bad: #a92626; --bad-line: #f2c1c1; --bad-bg: #fdf1f1; --focus: #2f5fd0; --shadow: 0 1px 2px rgba(16, 20, 28, 0.05), 0 1px 3px rgba(16, 20, 28, 0.04); --radius: 10px; --radius-sm: 6px; /* * Page width. ⚠ These three are the only numbers that decide how much of a * wide screen the app uses — change them here, not in a media query. * * The owner, 2026-08-21: *"on desktop we can utilize more of the horizontal * space… but dont make it use 100% of the screen either"*. Until then `main` * was 780px at every width, so a 2560px display showed 780px of app between * 890px of empty page on each side (measured, not guessed). * * `--measure` is what keeps that from being a downgrade: the SHELL widens, * but prose and form controls stay at a width you can still read and aim at. * A 1400px-wide text input is worse than a 640px one, not better. Tables opt * out of the measure and use the whole shell — they are the reason for it. */ --page: 1400px; --page-wide: 1600px; --measure: 640px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --bg: #101216; --surface: #191c21; --surface-sunken: #14171b; --ink: #e4e7ec; --ink-soft: #c2c7d0; --muted: #8f96a3; --line: #2a2f37; --line-strong: #3a414b; --accent: #7ea6ff; --accent-ink: #0f1319; --accent-soft: #1b2740; --ok: #6dd39b; --ok-line: #2a4d3a; --ok-bg: #14251c; --warn: #e5be6a; --warn-line: #4d4023; --warn-bg: #26200f; --bad: #f08b8b; --bad-line: #552b2b; --bad-bg: #2a1717; --focus: #7ea6ff; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); } } /* An explicit choice beats the media query both ways. */ :root[data-theme='light'] { color-scheme: light; --bg: #f4f5f7; --surface: #ffffff; --surface-sunken: #f7f8fa; --ink: #1b1d21; --ink-soft: #3f444c; --muted: #6b7280; --line: #e3e5ea; --line-strong: #cfd3da; --accent: #2f5fd0; --accent-ink: #ffffff; --accent-soft: #eef2fd; --ok: #17663d; --ok-line: #b7e0c6; --ok-bg: #eefaf2; --warn: #8a5a08; --warn-line: #f0d79a; --warn-bg: #fdf7e9; --bad: #a92626; --bad-line: #f2c1c1; --bad-bg: #fdf1f1; --focus: #2f5fd0; --shadow: 0 1px 2px rgba(16, 20, 28, 0.05), 0 1px 3px rgba(16, 20, 28, 0.04); } :root[data-theme='dark'] { color-scheme: dark; --bg: #101216; --surface: #191c21; --surface-sunken: #14171b; --ink: #e4e7ec; --ink-soft: #c2c7d0; --muted: #8f96a3; --line: #2a2f37; --line-strong: #3a414b; --accent: #7ea6ff; --accent-ink: #0f1319; --accent-soft: #1b2740; --ok: #6dd39b; --ok-line: #2a4d3a; --ok-bg: #14251c; --warn: #e5be6a; --warn-line: #4d4023; --warn-bg: #26200f; --bad: #f08b8b; --bad-line: #552b2b; --bad-bg: #2a1717; --focus: #7ea6ff; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3); } * { box-sizing: border-box; } /* Any author `display` rule beats the UA stylesheet's `[hidden] { display: none }`, so a hidden flex row (the CSV mapping's attribute-name box) stays visible without this. Found in Chrome, 2026-08-05. DO NOT REMOVE. */ [hidden] { display: none !important; } html { background: var(--bg); /* * ⚠ The cost of a sticky bar: an anchor jump lands its target UNDER the bar. * /docs/api is rendered markdown with in-page links ("see Permissions"), so * this is a real path rather than a precaution. Generous enough for the bar * at its two-row height on a narrow phone. */ scroll-padding-top: 5.5rem; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-text-size-adjust: 100%; } /* Present to a screen reader, absent to everything else. Not `display: none` and not `hidden`, either of which removes it from the accessibility tree too — which would defeat the whole point. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* * The setup checklist. Its state comes from the data, so a tick is a fact * rather than a stored flag — see src/routes/dashboard.tsx. * * The done/todo marks are the same 24px box so the two rows line up; only the * glyph inside and the colour differ. A ragged left edge would make a * half-finished list look broken rather than half-finished. */ .steps { list-style: none; margin: var(--s3) 0; padding: 0; } .step { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s2) 0; } .step-mark { width: 20px; height: 20px; flex: none; /* Optical alignment with the first line of text, not the box. */ margin-top: 2px; color: var(--ok); } .step-mark-todo { color: var(--line-strong); } /* The text stays full strength when done — this is a map of the parts, not a crossed-out shopping list, and a completed step is still a link people use. */ .step-done > span:last-child { color: var(--ink-soft); } /* ----------------------------------------------------------------- focus */ :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); } /* Only suppress the ring for pointer users; keyboard focus always shows one. */ :focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------- topbar */ /* * ⚠ STICKY, AT EVERY WIDTH. Asked for on mobile (owner, 2026-09-19), where * scrolling a long campaign or contact list left no way to navigate without * scrolling all the way back up — and in the installed PWA there is no browser * chrome above it to fall back on. It is the same argument as the back bar on * the preview shell: the app's one navigation surface should not be something * you have to go and find. * * Applied at all widths rather than behind a mobile media query. A top bar that * sticks on a phone and scrolls away on a laptop is two behaviours to hold in * your head, and the bar costs ~56px of a viewport that has plenty. * * ⚠ `position: sticky` DIES SILENTLY IF ANY ANCESTOR SCROLLS — one * `overflow: hidden` on `html`, `body` or a wrapper and this becomes an * ordinary static bar with no error anywhere. Checked before relying on it: * `html` and `body` set only background/colour/font, and `main` sets width and * margin. `.tablewrap`'s overflow is a DESCENDANT of the bar's siblings, not an * ancestor of the bar. Anything that later adds overflow to a wrapper around * `.topbar` breaks this, and the only symptom will be the bar scrolling away. * * `z-index: 50` clears `.navmore-menu`'s 40. The menu lives INSIDE the bar, so * it stacks in the bar's context and rides above page content with it; the * number only has to beat anything that might later sit in the page. */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s5); background: var(--surface); border-bottom: 1px solid var(--line); } .topbar nav { display: flex; align-items: center; gap: var(--s4); margin-left: auto; } /* * ⚠ `inline-flex`, and it is not cosmetic. The nav glyphs became visible on the * bar on 2026-08-19 and `.navicon` is `display: block`; inside a `display: block` * anchor that puts the icon on its own line and drops the label underneath it. * The owner saw exactly that — four links stacked at 54px tall while the three * that happened to carry another `display: flex` rule sat inline at 37px, so the * text baseline marched up and down the row. * * The drawer had always set `display: flex` on these, which is why the bug only * appeared above 1040px, and why turning the icons on looked fine in the one * place it was checked first. */ .topbar nav a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); text-decoration: none; font-size: 15px; padding: 6px 2px; border-bottom: 2px solid transparent; } .topbar nav a:hover { color: var(--ink); border-bottom-color: var(--line-strong); } /* Now a link into /settings/security, so it has to out-specify `.topbar nav a` to keep reading as a quiet label rather than a ninth nav item. */ .topbar nav a.who { color: var(--muted); font-size: 13px; white-space: nowrap; border-bottom-color: transparent; } .topbar nav a.who:hover { color: var(--ink-soft); border-bottom-color: var(--line-strong); } /* The superadmin entry, beside the address and in the same quiet register — a destination, not a status, so it reads a shade stronger than the label it sits next to. Only a session carrying `users.is_admin` renders it at all, so the ~50px it costs the nav row is paid by exactly one browser. */ .topbar nav a.who-admin { color: var(--ink-soft); font-weight: 600; } /* * Where you are. * * Placed after `.who` and `.who-admin` on purpose: those two reset * `border-bottom-color` to transparent at equal specificity, so a rule sitting * above them would light the eight nav links and silently fail on the two that * are not nav links. The 2px border every link already reserves is what gets * painted, so this costs no layout at all — nothing moves, and the width budget * the bands above ration so carefully is untouched. */ .topbar nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); } .brand { display: flex; align-items: center; gap: var(--s2); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); white-space: nowrap; } /* * The wordmark and the deployed commit, stacked. * * ⚠ The two lines together are held UNDER the 26px icon beside them (17 + 9, * both at line-height 1), so the bar is exactly as tall as it was. The nav row * has twice been broken here by a handful of unmeasured pixels — see the note * on `.brand`. */ /* * A glyph sitting on a line of text — sized to the text it accompanies rather * than to a fixed pixel count, so it tracks the `.hint` it lives in. */ .inlineicon { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.35em; flex: none; } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-sha { margin-top: 2px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0; color: var(--muted); } /* The source is a finished app icon — its own rounded-square shape, its own gradient, transparent outside the corners. So nothing here masks, recolours or frames it; it only gets a size and a refusal to be squashed by the flex row it sits in. */ .brand img { width: auto; height: 26px; flex: none; } /* The Currawong bird: the plain one on light, the white-bordered one on dark (the dark teal bird disappears on a dark bar). Same theme rules as the colour tokens: the system setting unless the page has chosen a theme. */ .brand-mark-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .brand-mark-light { display: none; } :root:not([data-theme='light']) .brand-mark-dark { display: block; } } :root[data-theme='dark'] .brand-mark-light { display: none; } :root[data-theme='dark'] .brand-mark-dark { display: block; } .brand-name { display: flex; align-items: baseline; gap: 5px; } .brand-product { font-size: 12px; font-weight: 600; color: var(--muted); } /* * The organisation chip: which organisation this session is in, said in the bar * rather than inside the drawer. * * ⚠ SMALL SCREENS ONLY. Above the drawer breakpoint the org switcher is already * in the row, and two copies of the same name 900px apart is not more * information. See the comment on the markup in src/ui/layout.tsx. */ .orgchip { display: none; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--muted); } /* ⚠ 26px: the SAME size as the mark beside it (`.brand img`), on the owner's instruction 2026-09-20 — "makke the org icon the same size as the cf-email icon in the header". Two icons a few pixels apart in the same row read as a rendering fault rather than as a hierarchy, and when the wordmark drops for a long name these two ARE the header. If one moves, move both. */ .orgchip .siteicon { width: 26px; height: 26px; flex: none; border-radius: 5px; } /* ⚠ The one element in the bar allowed to shrink: a 40-character organisation name must cost the hamburger nothing. `min-width: 0` above is what lets the ellipsis happen inside a flex row at all. */ .orgchip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Eight nav links plus the tenant line plus Log out is a lot for one row: with nothing stopping them, flex shrinks the two shortest items and "cf-email" and "Log out" each break across two lines. */ .topbar nav a, .topbar nav button.link { white-space: nowrap; } /* * Between the hamburger breakpoint and a comfortable desktop, the tenant/email * line is what gives. It is the least load-bearing thing in the bar — the * dashboard names the tenant in a heading, and the mobile drawer still shows it * (this rule is scoped above the drawer's breakpoint so it does not reach it). */ @media (min-width: 1041px) and (max-width: 1150px) { /* * The tenant name goes; the address stays, because the address is now the * link to /settings/security and hiding the whole thing left that screen * unreachable in a 110px-wide band. The name is the part that can go — the * dashboard carries it in a heading and the mobile drawer still shows it. */ .topbar nav a.who .who-tenant { display: none; } } /* * The brand mark is the second thing that gives, and for the same reason: it * costs the row 34px (26px + the gap) that this band does not have. Measured * 2026-08-07, minimum width before the bar overflows: * * no mark with mark * name hidden 1017 1051 ← 1051 > 1041, so it cannot stay * name shown 1135 1169 ← 1169 > 1151, so it cannot come back * until 1181 * * Below 1041 the bar has already wrapped to the drawer layout, where the brand * sits alone on the top row with room to spare — so the mark is visible there, * hidden through the middle, and visible again once a desktop is wide enough to * carry it. Same rule as the tenant name above, applied to the other end of the * bar. */ @media (min-width: 1041px) and (max-width: 1180px) { .brand img { display: none !important; } } /* * The ninth item, and who pays for it. * * Measured in Chrome on 2026-08-07 with a 16-character tenant name and an * 18-character address, as the minimum width the bar needs before it overflows * and takes the page sideways: * * name hidden name shown * no Admin 1017 1135 ← what the 1040/1150 breakpoints are set by * Admin 1077 1195 * * So an admin session breaks BOTH existing bands: 1041–1076 and 1151–1194. It * is also the only session that renders the link at all, so it is the only one * that gives anything up for it — hence `body.is-admin` rather than a global * breakpoint move that would put ordinary tenants behind a hamburger 40px * early. Two concessions, both inside widths this bar was already rationing: * the tenant name stays hidden further up, and the row tightens by 4px a gap. * That brings the requirement to 1037, below the 1041 the drawer takes over at. * * The upper bound is 1240 rather than 1150 because of the mark: an admin bar * carrying both the mark and the tenant name needs 1229, so the name cannot * come back until 1241. Every combination was measured; the four this file * rations are the tenant name, the mark, the nav gap and the drawer. */ @media (min-width: 1041px) and (max-width: 1240px) { body.is-admin .topbar nav { column-gap: var(--s3); } body.is-admin .topbar nav a.who .who-tenant { display: none; } } /* * The middle tier: wide enough for the bar, not wide enough for all nine links. * * Measured 2026-08-15 (binary search on `scrollWidth > clientWidth`, same * method as the bands above): the full nine-link bar needs 1250px in its worst * case (admin + tenant name), so it cannot come inline before 1260 — set as * low as the measurement allows because the owner's own maximised window with * the browser side panel open is 1272px, and "full screen" must mean the full * bar. With * Suppressions, Brand and API keys folded into "More ▾" the bar needs at most * 1059px in any state this band produces — comfortably inside 1041 even before * the tenant-name/brand-mark/is-admin rules above take their own cuts. */ @media (min-width: 1041px) { /* * ⚠ WAS `(min-width: 1041px) and (max-width: 1259px)` until 2026-08-19: these * three came back inline at 1260 and up. They no longer do, and the owner * approved the change with the measurement in hand. * * The 2026-08-15 decision to put all nine inline was made because API keys * was genuinely UNREACHABLE otherwise — it existed only in the mobile drawer, * so a desktop window offered no way to it at all. The all-pages menu removed * that reason: Suppressions, Brand and API keys are one click away at every * width now, grouped with everything else. * * What it buys, measured (documented method, corrected harness — see the band * comment further down for the two ways the old one lied): an admin bar * needed **1312px** with nine inline and needs **1272px** with six, so the * horizontal page scroll that ran from 1241 to ~1339px is gone at every * width. 1272 is the owner's own maximised window with the browser side * panel open, which is where it mattered. */ .topbar nav.mainnav > a.nav-overflow { display: none; } /* * ⚠ …UNLESS app.js is driving, which is the normal case. `js-overflow` says * the row is being MEASURED rather than guessed at, so every link comes back * and only the ones that genuinely do not fit are moved into the menu. * * The direction is the point: no JS gets the CONSERVATIVE bar (three links * hidden, definitely fits), and JS widens it. The other way round would leave * a scripts-off session with a wrapped, broken row. */ .topbar nav.mainnav.js-overflow > a.nav-overflow { display: inline-flex; } /* `.topbar .navmore` rather than `.navmore`: the component's own `display: none` default sits LATER in this file, so an equal-specificity rule here loses to it whatever the media query says. */ .topbar .navmore.allpages { display: block; } } /* The hamburger and the theme control. Both are chrome, not content, so they are quiet until hovered or focused. */ .iconbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 var(--s2); color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; } .iconbtn:hover { color: var(--ink); background: var(--surface-sunken); border-color: var(--line); } .iconbtn svg { width: 18px; height: 18px; display: block; } .navtoggle { display: none; } a { color: var(--accent); } /* * ⚠ SHRINK TO FIT, THEN CENTRE. The owner, looking at the first version of this: * *"is it possible to make them just as wide as they need to be to avoid * unnecessary word wrapping, and still remain centered? … the home page just has * everything over on the left hand side"*. Exactly right — a card stretched to * 1400px with 640px of content in it is not "using the width", it is a box with * a hole in it. * * `width: fit-content` makes the column as wide as its widest content wants to * be — a table at its natural column widths, a form at the measure — and no * wider, and `margin: auto` then centres it. The three bounds: * min-width never narrower than a form's measure (or the viewport, below it) * max-width never wider than --page, so a huge table scrolls in its own box * rather than stretching the page * the caps below cap PROSE, so a paragraph still wraps at a readable length * even when the table beside it makes the column wide */ main { width: fit-content; min-width: min(100%, calc(var(--measure) + 2 * var(--s5))); max-width: min(var(--page), 100%); margin: var(--s5) auto var(--s6); padding: 0 var(--s5); } /* * The two screens that are not documents: /admin (by PATH, in * src/ui/layout.tsx — not by the admin flag) and the visual editor (by prop). * The first is a seven-column cross-tenant table, the second a three-panel * canvas; both were already asking for more than the reading width when the * rest of the app was capped at 780px, and both still want more than `--page`. * * ⚠ Still a number rather than `none`. An unbounded table on a 2560px monitor * stretches its hint text into lines too long to track across, which is the * failure mode at the other end. Measure with scrollWidth vs clientWidth on * `.tablewrap` (or on the DOCUMENT for page overflow) — do not eyeball it. */ body.wide main { /* `auto`, not `fit-content`: a canvas and a cross-tenant table are asked to FILL what they are given rather than to state a natural width. */ width: auto; max-width: var(--page-wide); } /* * ⚠ THE COMPANION RULE TO THE WIDE SHELL — the two only make sense together. * * `main` is now up to 1400px, which is right for a table and wrong for * everything you read or type into. A line of body text 1400px long is hard to * track back to the start of; a text input 1400px wide is a worse target than a * 640px one, not a better one. So the SHELL widens and the CONTENT does not: * paragraphs, hints, definition lists and form controls stay at `--measure`, * and the things that genuinely want the room — tables, code blocks, the * editor panes, the filter bar, the pager under a table — opt out below. * * The measure is a max, never a width: at 700px everything is still 100%. */ main p, main .hint, main .done, main .copyfield, main dl, main input, main select, main textarea { max-width: var(--measure); } /* * The opt-outs, each for a reason: * .pager sits under a table and its "Next →" belongs at the table's edge * .filters a row of controls, not a column of them * .bulkbar same * .grid * a cell is as wide as its column, never 640px * textarea.code / .gjs-* the editors ARE the page at that point * .codeblock code wraps badly; it scrolls in its own box instead */ main .pager, main .filters, main .filters input, main .filters select, main .bulkbar, main .bulkbar select, main .grid p, main .grid .hint, main .grid dl, main .grid ul, main .grid input, main .grid select, main textarea.code, main .gjs-pane, main .gjs-host, main .codeblock, main .layoutpick, main .stats { max-width: none; } /* * Two cards that answer one question, side by side once there is room for both. * * The owner, on the message page: *"on a wide desktop the 'The message that was * sent' box could fit up by the first box"* — right, and the same is true of any * pair where neither half wants more than the measure. Below 1100px they stack, * which is also what a phone gets. * * ⚠ `minmax(0, 1fr)`, not `1fr`. A grid track's default minimum is `auto`, so a * long unbroken value inside — a provider id, an address — would push the column * wider than its share instead of wrapping, and the page would scroll sideways. * `align-items: start` keeps the shorter card its own height rather than * stretching an empty box down to match the taller one. */ .split { display: grid; gap: var(--s4); align-items: start; } @media (min-width: 1100px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* Stacked, the second card needs the usual gap; side by side, `gap` supplies it. */ .split > .card + .card { margin-top: 0; } @media (max-width: 1099px) { .split > .card + .card { margin-top: var(--s4); } } /* The unsubscribe pages have no app chrome: a recipient is not a tenant, and showing them a navigation bar into someone else's account would be wrong. */ body.standalone main { max-width: 520px; margin-top: 64px; } /* --------------------------------------------- the pages a subscriber sees * * The signup-confirmation and unsubscribe pages. See src/ui/public-page.tsx * for why they are branded at all: an unbranded confirmation page reads as a * phishing page. * * ⚠ The masthead sits ABOVE `main`, so its own margin has to replace main's * 64px rather than add to it, or the card lands half a screen down. */ body.standalone:has(.publicmast) main { margin-top: var(--s5); } .publicmast { max-width: 520px; margin: 48px auto 0; padding: 0 var(--s4); text-align: center; } .publicmast-logo { max-width: 220px; max-height: 72px; width: auto; height: auto; } /* * A dark-line-art logo on a dark page, flipped to light. * * ⚠ THE CLASS IS OPT-IN PER TENANT (tenant_brands.logo_invert_dark). Inverting * every logo would turn a colour wordmark into a photographic negative — blue * comes out orange — which is worse than an invisible logo and wrong on * somebody else's brand rather than ours. * * ⚠ BOTH DARK ROUTES, and they are not the same thing. The system-default case * is `prefers-color-scheme: dark` with no attribute stamped; an explicit choice * stamps `data-theme="dark"`. A rule written for only one of them looks correct * on the developer's machine and fails on half of everyone else's — the header * of this file spells the three states out, and the `:not([data-theme="light"])` * guard is what stops a reader who has explicitly chosen light from getting an * inverted logo because their OS says dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .publicmast-logo.invertible { filter: invert(1); } } :root[data-theme='dark'] .publicmast-logo.invertible { filter: invert(1); } .publicmast-name { margin: 0; font-size: 1.4rem; font-weight: 700; } .publicmast-back { margin: var(--s5) 0 0; text-align: center; } .publicfoot { max-width: 520px; margin: var(--s5) auto 48px; text-align: center; } .publicfoot a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.8rem; text-decoration: none; } .publicfoot a:hover { text-decoration: underline; } .publicfoot img { opacity: 0.75; } /* ----------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--shadow); } .card + .card { margin-top: var(--s4); } h1 { margin-top: 0; font-size: 25px; line-height: 1.25; letter-spacing: -0.02em; } h2 { font-size: 18px; letter-spacing: -0.01em; } h3 { font-size: 15px; } /* ----------------------------------------------------------------- forms */ label { display: block; margin: 0 0 var(--s4); font-weight: 600; font-size: 15px; } input, textarea, select { display: block; width: 100%; margin-top: var(--s1); padding: 10px 12px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); } input:hover, textarea:hover, select:hover { border-color: var(--muted); } ::placeholder { color: var(--muted); opacity: 1; } .hint { display: block; margin-top: var(--s1); font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--muted); } button { min-height: 40px; padding: 9px 16px; font: inherit; font-weight: 600; font-size: 15px; color: var(--accent-ink); background: var(--accent); border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; } button:hover { filter: brightness(1.08); } /* * A submit that is waiting on the form. `required` alone blocks the SUBMIT but * leaves the button looking live, which reads as a broken button rather than an * unfinished form — reported on the webhook form, where the button invited a * click the browser then silently refused. */ button:disabled, button:disabled:hover { color: var(--muted); background: var(--surface-sunken); border-color: var(--line); cursor: not-allowed; filter: none; } /* A link that starts an action, styled as the button it behaves like — the "New campaign" affordance is a navigation, not a form submit. */ a.button { display: inline-block; min-height: 40px; padding: 9px 16px; font-weight: 600; font-size: 15px; color: var(--accent-ink); background: var(--accent); border-radius: var(--radius-sm); text-decoration: none; } button.secondary { color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); } button.secondary:hover { background: var(--surface-sunken); filter: none; } button.link { min-height: 0; padding: 0; color: var(--accent); background: none; border: 0; font-weight: 400; font-size: inherit; text-decoration: underline; } button.link:hover { filter: none; } .muted { color: var(--muted); } /* ---------------------------------------------------------------- flashes */ .flash { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-sunken); color: var(--ink-soft); font-size: 15px; } .flash p { margin: 0; } .flash p + p { margin-top: var(--s2); } .flash-error { color: var(--bad); border-color: var(--bad-line); background: var(--bad-bg); } .flash-ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); } /* A caution the user should read before proceeding — not an error, so it must not shout in red next to one. First used for Brevo's tracking warning. */ .flash-warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); } /* ------------------------------------------------------------------ done */ /* * "There is nothing left for you to do here." The two screens that needed this * (webhook, domain) each had a correct-but-buried status pill and an open form * underneath, which reads as unfinished work however the label is worded. */ .done { display: flex; align-items: flex-start; gap: var(--s3); margin: 0 0 var(--s4); padding: var(--s4); border: 1px solid var(--ok-line); border-radius: var(--radius-sm); background: var(--ok-bg); color: var(--ok); } .done svg { flex: none; width: 20px; height: 20px; margin-top: 1px; } .done p { margin: 0; color: var(--ok); } .done p + p { margin-top: var(--s1); } .done strong { display: block; font-size: 16px; } /* ----------------------------------------------------------------- stats */ .stats { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); margin: 0 0 var(--s5); } .stats dt { font-size: 13px; color: var(--muted); } .stats dd { margin: 2px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } /* --------------------------------------------- tiles, records, pills ---- */ .tiles, .records, .rows-list { list-style: none; margin: 0; padding: 0; } .tile { padding: var(--s4) 0; border-top: 1px solid var(--line); } .tile h2 { margin: 0; } .tile-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); } .tile-head h1, .tile-head h2, .tile-head h3 { margin: 0; } .tile p { margin: 6px 0 0; } .pill { padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid var(--line); background: var(--surface-sunken); color: var(--muted); } .pill-ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); } .pill-warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-bg); } .pill-bad { color: var(--bad); border-color: var(--bad-line); background: var(--bad-bg); } /* * A pill that becomes its glyph alone on a phone (`compact` on `StatusPill`). * * Both the icon and the word ship in the markup and CSS chooses — the same * swap the copy button uses. Nothing measures anything at runtime, and the word * never leaves the accessibility tree: below 700px it is visually hidden * rather than `display: none`, and `title=` puts it back on hover. */ .pill-compact { /* * ⚠ `relative` is load-bearing, and the bug it fixes is invisible. The label * below is `position: absolute` when hidden; without a positioned ancestor * its containing block is the page itself, so the surrounding `.tablewrap` * cannot clip it — a 1px box sitting at x=713 inside a horizontally scrolled * table then made the whole DOCUMENT 719px wide at a 390px viewport, with * nothing visible out there to explain it. Measured, not theorised. */ position: relative; display: inline-flex; align-items: center; gap: 5px; } .pill-glyph { display: none; flex: none; width: 15px; height: 15px; } @media (max-width: 700px) { .pill-compact { padding: 5px; } .pill-compact .pill-glyph { display: block; } /* Same properties as `.visually-hidden` — present to a screen reader, absent to everything else. Not `display: none`, which would take the word out of the accessibility tree and leave a tick meaning nothing. */ .pill-compact .pill-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } } /* * Columns a phone does not have room for. The send log keeps who it went to, * what it said and whether it worked; which application sent it is a desktop * question, and on a phone it was pushing State off the screen entirely — the * page scrolled sideways by 331px at 390px wide (measured 2026-08-21). */ @media (max-width: 700px) { .grid .col-desktop { display: none; } /* * The same 700px cut, for text INSIDE a kept cell rather than a whole column. * "Sends from" holds two favicons and two names; on a phone the names are * what has to go, because the icons carry the same two facts in a fifth of * the width. The wrapper keeps its `title`, so the words are still reachable. */ .grid .col-inline-desktop { display: none; } /* Nothing left but icons — the gap that separated words now separates them. */ .sendsfrom { gap: var(--s2); } } /* * A site's favicon beside its name, inline in a table cell. * * ⚠ 18px, not the 32px `.siteicon` renders at elsewhere. This sits on a line of * body text rather than heading a row of its own, and at 32 it set the row * height and pushed the table taller than every other table in the app. */ .sendsfrom { display: inline-flex; align-items: center; gap: 6px; } .sendsfrom .siteicon { width: 18px; height: 18px; } /* * A favicon beside the name of the site it belongs to. * * The box is reserved at its full size whether or not an icon arrives, so a row * does not reflow when a lazy image lands and a site with no favicon still * lines up with its neighbours. `object-fit: contain` because these are * somebody else's images: they arrive square, oblong and occasionally enormous. * * 32px, not the 16 this started at. Most sites now serve an apple-touch icon at * 180px, which the probe prefers over `/favicon.ico` precisely so there is * resolution to spend here — a site that only has a 16px .ico will look soft at * this size, and that is the honest signal that it has nothing better. */ .withicon { display: inline-flex; align-items: center; gap: var(--s3); } .siteicon { width: 32px; height: 32px; flex: none; object-fit: contain; } /* * Nav glyphs — now on EVERYWHERE, and the history matters. * * They were drawer-only from 2026-08-06, for a good reason at the time: the bar * carried eight or nine links and had no spare pixels, and eight icons at 17px * plus their gaps is ~180px it did not have. * * What changed on 2026-08-19 was not the arithmetic but the link count. The * all-pages menu made Suppressions, Brand and API keys reachable from every * screen, so they left the bar; six links plus icons is narrower than nine * without them. **Swept every width from 1041 to 1500px, admin and non-admin: * no horizontal scroll anywhere** — which is strictly better than before the * icons existed, when an admin bar scrolled from 1241 to ~1339px. * * ⚠ So the constraint that produced the old rule is real and unchanged: the bar * has no slack to give away. Adding a SEVENTH inline link would spend what the * icons are now using. Re-measure before adding one. */ .navicon { display: block; width: 17px; height: 17px; flex: none; } /* * The "More ▾" dropdown — the middle tier of the three-tier nav (see the NAV * comment in src/ui/layout.tsx for the 2026-08-15 measurements). Hidden by * default: below 1041px the drawer shows the overflow links stacked, and from * 1280px they sit inline on the bar. Only the 1041–1279px media block below * turns this on. * * A
, so it opens and closes with scripts off; app.js adds * close-on-outside-click as polish, not as function. */ .navmore { display: none; position: relative; } .navmore summary { list-style: none; display: flex; align-items: center; gap: 4px; color: var(--ink-soft); font-size: 15px; padding: 6px 2px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none; } .navmore summary::-webkit-details-marker { display: none; } .navmore summary:hover { color: var(--ink); border-bottom-color: var(--line-strong); } /* The underline the inline link would have carried: when the current page is one of the collapsed three, the summary is what says so. */ .navmore summary.is-here { color: var(--ink); border-bottom-color: var(--accent); } /* * The organisation switcher. * * It borrows `.navmore`'s geometry — same summary, same chevron, same dropdown * panel — because the nav row has no spare width and a second dropdown style * would be both more CSS and more pixels. What it does NOT borrow is * `.navmore { display: none }`: the More menu is band-scoped and this is not, * so it needs an override at higher specificity rather than a separate rule * further down the file (see the `.topbar .navmore` note above — a media query * does not beat later-in-file equal specificity, and that trap cost a deploy). * * ⚠ It renders for EVERY signed-in session, including single-organisation ones. * That is a correction (2026-08-17): it first rendered only above one * organisation, and since the only links to /orgs and /orgs/people live inside * it, that left both screens reachable only by typing a URL. See the comment at * the `
` in src/ui/layout.tsx. Every session * therefore pays the ~8px measured below — the right trade against a feature * nobody can find. * * It reads in the quiet register of `.who` beside it, not as a nav link: it * names where you are, and it is only secondarily somewhere to go. */ .navmore.orgswitch { display: block; } /* * ⚠ WIDTH. Measured headlessly 2026-08-17 by the documented method * (binary-search `scrollWidth > clientWidth` on `.mainnav`), with the SAME * organisation name rendered both ways so only the structure differed. * * The naive version cost **+27px**: the nav's 16px `gap` for a new flex item, * plus a 14px chevron and its 4px gap, less the ~7px of the " · " the `who` * link no longer renders. That is worth keeping down to as little as possible on * a row that is already the tightest thing in this app. * * So the switcher is pulled tight against the address it replaces the first * half of: they were one unit before this ("Org · email") and they stay one * unit. Negative margin cancels the nav gap down to 4px, and the chevron is * 10px with a 1px gap. Re-measured after each attempt: the first tightening * still cost +13px; this one costs **+8px**. * * ⚠ An earlier version of this comment claimed +8px was "inside the headroom" of * a documented 1250px worst case against a 1260px cutoff. **Both halves of that * were wrong**, and the correction is in the band comment further down: the * measuring method could not detect overflow at all, the harness ignored the * viewport it was given, and the real admin bar needs ~1315px. The +8px delta * survived re-measurement; the reassurance did not. * * ⚠ Anything that widens this — a bigger chevron, an avatar, a second line — * must be re-measured the same way. Do not eyeball it. */ .topbar .orgswitch { margin-right: calc(4px - var(--s4)); } .topbar .orgswitch summary { color: var(--muted); font-size: 13px; gap: 1px; } /* Somebody in ONE organisation: the same icon and name, with no chevron and nothing to open. Matches the summary above so the bar does not shift depending on how many organisations a person happens to be in. */ .topbar .orgswitch-only { display: flex; align-items: center; gap: 1px; color: var(--muted); font-size: 13px; } /* * The organisation's own favicon, reusing `/icons/site/:host` — the same * mechanism and the same three caches as /domains and /providers. `.siteicon` * ships at 32px for tables; the bar wants 16, and the menu rows want 16 too so * the summary and the list read as the same object. * * ⚠ It costs the bar ~17px (16 + the summary's 1px gap), which is why the * measurement below was redone with it in place. The icon is what SURVIVES in * the narrow bands and the name is what goes — an icon identifies an * organisation in 16px where its name needs ~110px, so dropping the name and * keeping the icon is strictly better than the reverse, which is what this * replaced. */ .topbar .orgswitch .siteicon, .topbar .orgswitch-item .siteicon, .topbar .orgswitch-current .siteicon { width: 16px; height: 16px; flex: none; border-radius: 3px; } /* Holds the 16px column open for an organisation with no verified domain, so a list of names does not go ragged where one icon is missing. */ .topbar .siteicon-none { display: inline-block; width: 16px; height: 16px; flex: none; } /* The menu rows are flex so the icon and the name sit on one baseline; the `.orgswitch-item`/`-current` padding is already set above. */ .topbar .orgswitch-item, .topbar .orgswitch-current { display: flex; align-items: center; gap: var(--s2); } .topbar .orgswitch .navmore-chev { width: 10px; height: 10px; } .topbar .orgswitch summary:hover { color: var(--ink-soft); } /* Rows in the panel: a `