/* -------------------------------------------------------------------------- screens.css — the stylesheet for every screen both products share. It moved here from apps/onprem/admin/assets/app.css when the SaaS console turned out to be rendering 59 of these classes with no styling at all: the screens were shared, the routes were shared, and the sheet that dresses them was not. Both products load this now. The palette below is DEFAULTS. Each product sets the same custom properties before this file loads and wins: on-premise — from the operator's Branding page (brand.css) hosted — from the template kit's tokens, so the console matches the marketing site and the platform's own brand colour Deployed path is unchanged: deploy composes this into admin/assets/app.css, which is what the on-premise layout has always linked. -------------------------------------------------------------------------- */ /* ========================================================================== Inbox assistant — admin UI -------------------------------------------------------------------------- Hand-written, no build step, no framework. Everything that looks interactive here is CSS only (:target, :focus-within, :checked) and every screen works with script switched off. There is one script — assets/app.js, mirrored from apps/console/console.js — and its whole job is to say that a button was pressed. The CSP is script-src 'self', which permits that one same-origin file and still forbids every inline script; inline is the only way an escaping slip in a mail body could run anything, so the protection that mattered is intact. Brand orange #FF6200 is sampled from the AirGo wordmark. It is used for identity and for the single primary action on a page — never for status. Status has its own colours, because "the thing you click" and "the thing that is wrong" must never look the same. ========================================================================== */ /* --- cross-page motion --------------------------------------------------- ⚠ Every screen here is a full page load - there is no client-side router to animate between routes, and this file's own opening comment is clear that a script is not allowed to be the only way anything works. The Cross-Document View Transitions API is the platform answering that exact shape of problem: a stylesheet declaration, no script, and the browser itself crossfades the old page into the new one during navigation. Unsupported browsers ignore the rule and get exactly what they have always had - a plain navigation, nothing broken. A reduced-motion request turns it off entirely rather than shortening it: the ask was for LESS motion, and a fast crossfade is still motion. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* --- palette ------------------------------------------------------------ */ :root { --brand: #FF6200; --brand-ink: #C74B00; --brand-soft: #FFF1E8; --brand-line: #FFD3B8; --bg: #F6F7F9; --surface: #FFFFFF; --surface-2: #FBFCFD; --line: #E3E7EC; --line-strong: #CBD2DA; --ink: #12171D; --ink-2: #4A5560; --ink-3: #5E6874; /* was #79838F — ~3.5:1 at 12px, under the AA floor */ --good: #0F7B4F; --good-soft: #E7F6EE; --warn: #9A6400; --warn-soft: #FDF3DF; --bad: #B3261E; --bad-soft: #FDECEA; --info: #1B5FA8; --info-soft: #E9F2FB; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 2px rgba(16,24,32,.06), 0 4px 16px rgba(16,24,32,.05); --shadow-lift: 0 2px 6px rgba(16,24,32,.08), 0 12px 32px rgba(16,24,32,.10); --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* ⚠ THERE IS DELIBERATELY NO DARK PALETTE HERE, and removing the one that was is a fix rather than a loss. This sheet defines 42 tokens; console.css defines its own 22 from the kit and has never had a dark variant for any of them. So a phone set to dark rendered a page where the twenty tokens named here went dark and everything else stayed white: black wizard steps and a black guide panel on a light grey page. Supporting dark properly means giving the kit tokens a dark story too, which is a design job rather than a colour swap. Until somebody does that, the honest thing is to be a light interface on every device, which is what the color-scheme meta in both layouts now says as well. */ /* --- base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.25; margin: 0 0 .4em; letter-spacing: -.01em; font-weight: 650; } h1 { font-size: 26px; } h2 { font-size: 18px; margin-top: 2rem; } h3 { font-size: 15px; } /* ⚠ NO UNDERLINE ON HOVER, ANYWHERE IN EITHER PANEL. This was the one rule underneath every hover that did not draw its own: a card, a promo box, a plain row all fell through to it the moment they had no more specific :hover of their own, which is what put a line of underlined text through the "Claude, ChatGPT or Gemini can connect a mailbox for you" box in the sidebar - a whole clickable card, reading like three words of body text somebody had linked by hand. A very small lift instead: the same "stand out", just spent on the element's position rather than drawn under its words. ⚠ TRANSFORM ONLY, NO COLOUR CHANGE - a colour WAS here once and it broke every card that sets its text colour on the and lets children inherit it (.mesh, .brand's dark-panel variant): the moment this rule's `color` out-specificities a component's own resting colour on :hover, every descendant with no colour of its own repaints in the plain link colour, which is exactly what turned the platform overview's "Answered this month" card orange under the pointer. A transform never has that failure mode - it cannot leak into a child the way an inherited property can - so it is the one property this rule is safe to set globally. */ a { color: var(--brand-ink); text-decoration: none; transition: transform .16s var(--ease, ease); } a:hover { transform: translateY(-1px); } p { margin: 0 0 1rem; } code, pre, .mono { font-family: var(--mono); font-size: .92em; } /* Visible focus everywhere. Without JS this is the only affordance a keyboard user gets, so it is deliberately loud. */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } .muted { color: var(--ink-3); } .err-text { color: var(--bad); } /* --- app shell ---------------------------------------------------------- */ .bar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .bar-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; min-height: 62px; } .brand { display: flex; align-items: center; gap: 12px; flex: none; } .brand img { height: 26px; width: auto; display: block; } .bar nav { display: flex; gap: 2px; flex: 1 1 auto; flex-wrap: wrap; } .bar nav a { padding: 8px 14px; border-radius: var(--radius-sm); color: var(--ink-2); font-weight: 550; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; } .bar nav a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .bar nav a.on { background: var(--brand-soft); color: var(--brand-ink); } /* The count of things waiting rides in the nav, so it is visible from every page rather than only the dashboard. */ .navcount { min-width: 20px; padding: 0 6px; height: 20px; border-radius: 10px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; } .bar nav a.on .navcount { background: var(--bad); } .bar-right { display: flex; align-items: center; gap: 10px; flex: none; } main { max-width: 1120px; margin: 0 auto; padding: 28px 24px 72px; } /* --- pills -------------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; letter-spacing: .01em; border: 1px solid transparent; white-space: nowrap; } .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .pill-plain::before { display: none; } .mode-observe { background: var(--info-soft); color: var(--info); border-color: var(--info); } .mode-assisted { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); } .mode-auto { background: var(--good-soft); color: var(--good); border-color: var(--good); } .paused { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); } /* ⚠ The pause pill in the bar is a BUTTON now, not a caption — the switch it reports on moved out of Settings and into the chrome. A button carries the user agent's own font, background and border, so those have to be taken back or it renders as a grey system control wedged between two pills. The pill's ::before dot goes: the icon already says which state this is, and two marks on one small control read as a bullet nobody placed. */ .barpause button { font: inherit; cursor: pointer; background: var(--surface-2); color: var(--ink-2); border-color: var(--line-strong); transition: background .15s ease, color .15s ease, border-color .15s ease; } .barpause button::before { display: none; } .barpause button svg { width: 13px; height: 13px; } .barpause button:hover { color: var(--ink); border-color: var(--ink-3); } /* Paused means mail is arriving and nothing is answering it. It keeps the alarm colour it had as a caption. */ .barpause.is-paused button { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); } .barpause.is-paused button:hover { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); } .st-queued { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-strong); } .st-replied { background: var(--good-soft); color: var(--good); border-color: var(--good); } .st-escalated { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); } .st-error { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); } .st-dismissed { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); } /* ⚠ The mailbox list marked a disabled address `st-ignored`, which is not one of the statuses and has never had a rule: the pill rendered untinted, so an address that is switched off looked the same as one that is on. A state that stops mail being answered has to be visible. */ .st-off { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); } /* ⚠ The alarm colour, not the warning one, and it is the only status that gets it besides an outright error. A held message may be an impersonation of the business reading it; that has to out-shout every other pill on the screen. */ .st-held { background: var(--bad-soft); color: var(--bad); border-color: var(--bad); } /* ⚠ The hosted sheet has had this since buttons were built; this one never did, because no shared screen used `small` until the Suspicious list wanted it on its Withdraw button. Both products render apps/console/views, so a word only one sheet knows renders full-size on the other. ⚠ A literal size, not --text-tagline-3 as the hosted rule uses: that token comes from kit-tokens.css, which only the hosted console loads. Referencing it here would resolve to nothing on-premise and the button would inherit whatever it sat next to. */ .btn.small { height: 2.4rem; font-size: .82rem; padding: .15rem 1rem; } /* --- sender provenance -------------------------------------------------- */ /* The verdict line above the facts. .warn existed only on a flash, and the panel needs the same colour without the banner around it. */ .warn { color: var(--bad); font-weight: 600; } /* The delivery path, inside a
. Monospaced because these are hostnames and IP addresses read character by character - "acmetool" against "acmetools" is the whole question on this screen, and a proportional font hides it. */ ol.hops { margin: .5rem 0 0; padding-left: 1.4rem; } ol.hops li { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; color: var(--ink-2); word-break: break-all; margin-bottom: .25rem; } /* --- status banner ------------------------------------------------------ */ /* The one thing a new operator must understand: is it sending or not. */ /* A block, not a flex row: this is a
, and its summary and body must stack. The flex row lives on the summary itself, further down. Left as flex here, the explanatory paragraph rendered as a narrow column beside the heading. */ .status { display: block; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); margin-bottom: 24px; overflow: hidden; } .status-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; font-weight: 700; } .status-title { font-weight: 650; font-size: 16px; margin: 0 0 2px; } .status-body { margin: 0; color: var(--ink-2); font-size: 14px; } .status-body strong { color: var(--ink); } .status-observe { border-left: 4px solid var(--info); } .status-observe .status-icon { background: var(--info-soft); color: var(--info); } .status-assisted { border-left: 4px solid var(--warn); } .status-assisted .status-icon { background: var(--warn-soft); color: var(--warn); } .status-auto { border-left: 4px solid var(--good); } .status-auto .status-icon { background: var(--good-soft); color: var(--good); } .status-paused { border-left: 4px solid var(--bad); } .status-paused .status-icon { background: var(--bad-soft); color: var(--bad); } /* Spacing the shared screens reach for. console.css has its own copy for the hosted panels; both sheets have to know every word the shared views use, or the rule renders on one product and silently does nothing on the other. */ .mt-sm { margin-top: .6rem; } /* Not a mode — a fault. Used where the model did not answer at all, which must not be mistaken for a decision the assistant made. */ .status-error { border-left: 4px solid var(--bad); } .status-error .status-icon { background: var(--bad-soft); color: var(--bad); } /* --- stat cards --------------------------------------------------------- */ .cards { display: grid; gap: 14px; margin: 0 0 26px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); color: inherit; } a.card { transition: transform .12s ease, box-shadow .12s ease; } a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); text-decoration: none; } .card .n { font-size: 32px; font-weight: 680; line-height: 1.1; letter-spacing: -.02em; } .card .l { font-size: 13px; color: var(--ink-3); font-weight: 550; } .card .sub { font-size: 12px; color: var(--ink-3); margin-top: 6px; } /* "Needs you" is the only card that is ever an action, so it is the only one that carries brand colour. */ .card.need { border-color: var(--brand-line); background: var(--brand-soft); } .card.need .n { color: var(--brand-ink); } .card.need .l { color: var(--brand-ink); font-weight: 650; } .card.bad { border-color: var(--bad); } .card.bad .n { color: var(--bad); } /* --- panels and tables -------------------------------------------------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 20px; box-shadow: var(--shadow); } .panel-pause { border-left: 4px solid var(--warn); } .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } table { border-collapse: collapse; width: 100%; font-size: 14px; } th, td { padding: 11px 14px; text-align: left; vertical-align: top; } thead th { background: var(--surface-2); color: var(--ink-3); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; } tbody tr + tr td { border-top: 1px solid var(--line); } tbody tr:hover td { background: var(--surface-2); } td .subj { font-weight: 550; color: var(--ink); } td .from { color: var(--ink-3); font-size: 13px; } td.nowrap, th.nowrap { white-space: nowrap; } .empty { text-align: center; padding: 44px 20px; color: var(--ink-3); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); } .empty .big { font-size: 30px; display: block; margin-bottom: 8px; } /* --- forms -------------------------------------------------------------- */ .field { margin: 0 0 20px; } .field > label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink); } input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select, textarea { width: 100%; padding: 9px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: 14px; } textarea { resize: vertical; min-height: 96px; font-family: var(--mono); font-size: 13px; line-height: 1.55; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,98,0,.16); } input::placeholder, textarea::placeholder { color: var(--ink-3); } /* --- the file input ------------------------------------------------------ ⚠ Styled through ::file-selector-button, which is the only way to dress a file input without JavaScript. The trick everyone reaches for — hide the input, style a label, print the filename from script — cannot work here: the CSP allows one same-origin file and no inline script, and the filename would have to come from somewhere. So the native control stays and only its button is restyled; the browser keeps drawing "No file chosen", which is the part that actually reports the state. ⚠ The BOX is deliberately not redeclared. console.css already styles input[type=file] at the same specificity and loads second, so anything set here for padding, border or background would be a coin toss decided by file order — the exact failure that put icons on top of their own text. Only what that sheet does not touch is set. */ input[type=file] { cursor: pointer; } input[type=file]::file-selector-button { margin-right: 12px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; } input[type=file]:hover::file-selector-button { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); } input[type=file]:focus-visible::file-selector-button { outline: 2px solid var(--brand); outline-offset: 2px; } .help { font-size: 13px; color: var(--ink-3); margin: 8px 0 12px; line-height: 1.55; } /* ⚠ pre-line, so a settings help string can carry a worked example - and ONLY there, on the two places that print one (settings.php, mailbox_wizard.php). It used to sit on .help itself, on the belief that help text never contains a newline. The strings in config.php do not, but every template paragraph and list wrapped across several source lines does: each of those newlines became a line break, so a bullet sat alone above its text, every item began and ended with an empty line, and sentences broke at wherever the PHP was wrapped. Runs of spaces still collapse, so an indented example line does not keep its indent - wrap those in or a block of their own. */ .help-lines { white-space: pre-line; } /* ── long field help, clamped ───────────────────────────────────────────── See the note above where this is built, in mailbox_wizard.php's $renderField(). A
whose IS the help text: clamped to two lines while closed, full height while open - one copy of the text, not a preview plus a separate full version to keep in sync. The toggle is a sibling span rather than ::after on the clamped text itself, because generated content inside a -webkit-line-clamp box is exactly as liable to be cut off as anything else in it - the first version of this put "Show more" there and it silently vanished the moment a paragraph's second line ran long enough to reach it. */ .help-more > summary { cursor: pointer; list-style: none; } .help-more > summary::-webkit-details-marker { display: none; } .help-more:not([open]) .help-more-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .help-more-toggle { display: inline-block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--violet); cursor: pointer; } .help-more-toggle::after { content: "Show more"; } .help-more[open] .help-more-toggle::after { content: "Show less"; } .check { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; margin: 0 0 6px; cursor: pointer; } .check input { margin-top: 3px; accent-color: var(--brand); flex: none; } .checks { display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* ── A threshold per category ───────────────────────────────────── Same shape as .checks so the two category fields read as one idea. The name takes the space it needs and the number stays a fixed width, because a column of numbers that do not line up is hard to compare - which is the entire reason somebody opens this. */ .catgrid { display: grid; gap: 4px 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .catrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding: 3px 0; cursor: pointer; } .catrow input { width: 6.5rem; flex: none; text-align: right; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 14px; } .catrow input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; } /* A row given its own figure should be findable at a glance among ten that are not. :placeholder-shown is false exactly when the box has a value. */ .catrow input:not(:placeholder-shown) { border-color: var(--brand); font-weight: 600; } /* ── Managing a tenant's own categories ──────────────────────────── */ .catmanage-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .catmanage-item:last-of-type { border-bottom: 0; } .catmanage-add { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; } .catmanage-add .input-icon { flex: 1 1 240px; } /* ⚠ Now nested inside the .setsec it extends, not a standalone .panel - it used to sit at the tab's foot as its own card, and this rule is what makes it read as a continuation of the checklist above rather than a second box dropped underneath it. */ .catmanage { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); } .catmanage-head { margin: 0 0 8px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: var(--ink-2); } .catmanage-head .ico { width: 15px; height: 15px; color: var(--ink-3); } /* ── a confidence figure, read as a percentage rather than a decimal ──────── 0.97 is what the code compares a model's own output against; 97% is what somebody who has never seen the model's output types with confidence. */ .pct-icon input[type] { padding-right: 34px; } .pct-suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 14px; font-weight: 600; pointer-events: none; } .catrow-input { position: relative; display: inline-flex; flex: none; } .catrow-input input { padding-right: 22px; /* room for the % without widening the column */ } .catrow-suffix { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 12px; font-weight: 600; pointer-events: none; } .group-heading { margin: 34px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--line); font-size: 15px; font-weight: 650; color: var(--ink); } /* ⚠ THE BUTTON BELONGS ON THE LIST THAT HAS ROWS, not bolted underneath it whether or not there are any. A list with nothing in it already carries its own "create one" through empty_state()'s own action - this is only for once a list is non-empty and that empty state is gone, so "add another" lives beside what it is adding to instead of at the bottom of the page, past everything already there. .group-heading keeps its own border and spacing; this only turns it into a row when a button joins it. */ .list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 34px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--line); } .list-head .group-heading { margin: 0; padding: 0; border: 0; flex: 1 1 auto; } /* --- buttons ------------------------------------------------------------ */ button, .btn { font: inherit; font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .12s ease, border-color .12s ease; } button:hover, .btn:hover { background: var(--surface-2); text-decoration: none; } /* ⚠ Only console.css (the hosted product) overrides this to the near-black pill+capsule treatment - this base rule is what the on-premise admin actually ships, since it loads app.css (mirrored from THIS file) alone. Motion, not a reshape: a lift and a brand-coloured glow on hover give it the same "reaching for it" feeling console.css's own primary button has, without changing its shape here, which is out of scope for this pass. */ button.primary, .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(199,75,0,.28); transition: background .12s ease, border-color .12s ease, transform .22s ease, box-shadow .22s ease; } button.primary:hover, .btn.primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); transform: translateY(-2px); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--brand) 60%, transparent); } button.primary:active, .btn.primary:active { transform: translateY(0); box-shadow: 0 3px 8px -4px color-mix(in srgb, var(--brand) 55%, transparent); transition-duration: .06s; } @media (prefers-reduced-motion: reduce) { button.primary, .btn.primary { transition: background .12s ease, border-color .12s ease; } button.primary:hover, .btn.primary:hover, button.primary:active, .btn.primary:active { transform: none; } } button.danger { color: var(--bad); border-color: var(--bad); background: transparent; } button.danger:hover { background: var(--bad-soft); } /* ── the page-load bar, and busy controls ───────────────────────────────── ⚠ THIS EXISTED, JUST NOT HERE. console.js has driven a .pageload bar and an .is-busy spinner state on every submit and navigation since they were built, and console.css (the hosted product's own stylesheet) has carried the CSS for both since then. The on-premise admin runs the same script - app.js is mirrored from console.js - and loads THIS file, not console.css, so every one of those classList.add() calls has been landing on an element with no rule for it: no bar, no spinner, nothing visible, on every page load and every button press, for as long as console.js has existed. Ported rather than duplicated by drifting: same shape, this file's own --brand/--ink tokens in place of console.css's --violet. */ /* ⚠ Richer, not more dishonest - it still never claims to know how long the request takes: eases toward nine tenths and waits, same as always. The gradient, the glow and the pulse are presence, not a fake percentage. */ .pageload { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 55%, #fff) 0%, var(--brand) 100%); box-shadow: 0 0 10px -1px color-mix(in srgb, var(--brand) 75%, transparent); z-index: 200; pointer-events: none; } .pageload-on { transform: scaleX(.9); transition: transform 8s cubic-bezier(.05,.7,.1,1); animation: pageload-pulse 1.4s ease-in-out infinite; } .pageload-done { transform: scaleX(1); opacity: 0; animation: none; transition: transform .2s linear, opacity .35s .15s linear; } @keyframes pageload-pulse { 0%, 100% { box-shadow: 0 0 10px -1px color-mix(in srgb, var(--brand) 75%, transparent); } 50% { box-shadow: 0 0 18px 1px color-mix(in srgb, var(--brand) 95%, transparent); } } @keyframes spin { to { transform: rotate(360deg); } } /* The button keeps its label and its width - a spinner that replaces the text makes the button jump, and a control that changes size under the cursor is worse than one that says nothing. The label dims, the ring turns beside it. */ .btn.is-busy, button.is-busy { pointer-events: none; position: relative; } .btn.is-busy::after, button.is-busy::after { content: ""; width: 1rem; height: 1rem; margin-left: .55rem; flex: none; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; opacity: .85; animation: spin .7s linear infinite; } .btn.is-busy { opacity: .82; } /* A link is text, not a box, so it gets the ring on its own rather than a whole button's worth of state. */ a.is-busy { position: relative; opacity: .6; } .side-nav a.is-busy::after, .switcher .menu a.is-busy::after { content: ""; width: .85rem; height: .85rem; margin-left: auto; flex: none; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite; } /* A busy nav row has its count replaced by the spinner; two circles fighting for the same corner reads as a glitch. */ .side-nav a.is-busy .tag { display: none; } @media (prefers-reduced-motion: reduce) { .btn.is-busy::after, button.is-busy::after, .side-nav a.is-busy::after, .switcher .menu a.is-busy::after { animation: none; opacity: .5; } .pageload-on { transition: none; transform: scaleX(.9); animation: none; } } button.link { background: none; border: none; padding: 4px 8px; color: var(--ink-2); font-weight: 550; text-decoration: none; } button.link:hover { color: var(--ink); background: var(--surface-2); } .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 22px; } form.inline { display: inline; } /* --- flash -------------------------------------------------------------- */ .flash { padding: 12px 16px; border-radius: var(--radius-sm); margin: 0 0 16px; background: var(--info-soft); color: var(--info); border: 1px solid currentColor; font-size: 14px; } .flash a { color: inherit; text-decoration: underline; font-weight: 600; } .flash-err { background: var(--bad-soft); color: var(--bad); } .flash-ok { background: var(--good-soft); color: var(--good); } /* ⚠ The shared screens spell these the hosted console's way — `flash good`, `flash warn`, `flash bad` — because that is the vocabulary they were written in. On-premise only ever defined flash-ok and flash-err, so a warning on a shared screen rendered in the neutral tint here and nowhere said so. Same colours, both spellings, one sheet. */ .flash.good { background: var(--good-soft); color: var(--good); } .flash.warn { background: var(--warn-soft); color: var(--warn); } .flash.bad { background: var(--bad-soft); color: var(--bad); } /* ⚠ Every banner in all three panels carries its tone in colour alone. Colour alone is the weakest signal there is: it is the first thing lost to a colour-blind reader, a dim screen or a glance. The icon says the same thing a second way, and it is done here rather than in thirty pieces of markup because there are thirty places that render a flash and a rule reaches all of them at once. Masked rather than drawn, so the glyph takes the banner's own colour and one sheet does not have to carry a copy of every icon in every tint. The data URI is an image as far as the policy is concerned, and img-src allows data: in both panels. */ /* ⚠ NOT display:flex, and that is the whole fix. Flex made the ::before icon item one and the message items two onward — but the message is not wrapped in anything, so every inline child became its own flex item and got its own column. A banner reading "No business information …prose… Add it now …prose…" came out as four columns side by side, with the link squeezed to one word per line. Plain-text flashes were unaffected, which is why it survived: they have exactly one child. Positioning the icon in a padded gutter leaves the message in normal inline flow, so it wraps as prose. Same look, and it still reaches all thirty call sites from one rule without any of them wrapping their content. */ .flash { position: relative; padding-left: 44px; } .flash::before { content: ""; position: absolute; left: 16px; top: 13px; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%2011v5%22/%3E%3Ccircle%20cx=%2212%22%20cy=%227.6%22%20r=%22.6%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M12%2011v5%22/%3E%3Ccircle%20cx=%2212%22%20cy=%227.6%22%20r=%22.6%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3C/svg%3E") center / contain no-repeat; } .flash.good::before, .flash-ok::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M8%2012.4l2.7%202.7L16%209.6%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%229%22/%3E%3Cpath%20d=%22M8%2012.4l2.7%202.7L16%209.6%22/%3E%3C/svg%3E"); } .flash.warn::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M10.3%204.2%202.4%2018.3A1.9%201.9%200%200%200%204%2021.2h16a1.9%201.9%200%200%200%201.6-2.9L13.7%204.2a1.9%201.9%200%200%200-3.4%200Z%22/%3E%3Cpath%20d=%22M12%209.5v4.2%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2217.2%22%20r=%22.6%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M10.3%204.2%202.4%2018.3A1.9%201.9%200%200%200%204%2021.2h16a1.9%201.9%200%200%200%201.6-2.9L13.7%204.2a1.9%201.9%200%200%200-3.4%200Z%22/%3E%3Cpath%20d=%22M12%209.5v4.2%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2217.2%22%20r=%22.6%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3C/svg%3E"); } .flash.bad::before, .flash-err::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M10.3%204.2%202.4%2018.3A1.9%201.9%200%200%200%204%2021.2h16a1.9%201.9%200%200%200%201.6-2.9L13.7%204.2a1.9%201.9%200%200%200-3.4%200Z%22/%3E%3Cpath%20d=%22M12%209.5v4.2%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2217.2%22%20r=%22.6%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M10.3%204.2%202.4%2018.3A1.9%201.9%200%200%200%204%2021.2h16a1.9%201.9%200%200%200%201.6-2.9L13.7%204.2a1.9%201.9%200%200%200-3.4%200Z%22/%3E%3Cpath%20d=%22M12%209.5v4.2%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2217.2%22%20r=%22.6%22%20fill=%22%23000%22%20stroke=%22none%22/%3E%3C/svg%3E"); } /* --- toasts: the same .flash, floated and self-dismissing ---------------- ⚠ toast_stack() (apps/console/helpers.php) renders these in place of walking take_flash() directly - one call, both panels that queue a flash across a redirect (the hosted client console and the on-premise admin; the hosted PLATFORM panel never queues one, it renders its own results inline on the same request, which is a different thing and stays a banner). Every .flash colour and icon rule above already applies; this only adds the floating position and the two ways out. */ .toast-stack { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: .5rem; width: min(30rem, calc(100vw - 2rem)); /* The stack itself is not a target - only a toast inside it is - so nothing under it, in the empty gaps between toasts, is blocked. */ pointer-events: none; } .toast-stack .flash { margin: 0; pointer-events: auto; box-shadow: var(--shadow, 0 12px 32px -18px rgba(18,22,31,.35)); padding-right: 40px; /* Fades in at once; fades out on its own after a while, unless the two ways out below - a hover, or the close button - get there first. */ animation: toast-in .2s ease both, toast-out .25s ease 7s forwards; } .toast-stack .flash:hover { animation-play-state: paused; } /* ⚠ THE CHECKBOX IS INSIDE THE TOAST IT DISMISSES, not beside it the way the CSS-only modal's toggle sits beside what it reveals (.modal-toggle, below) - a toast needs no separate element for :has() to reach, since "checked" and "gone" both describe the one box. */ .toast-stack .flash:has(.toast-toggle:checked) { display: none; } .toast-toggle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .toast-msg { display: block; } .toast-close { position: absolute; top: 10px; right: 12px; cursor: pointer; display: flex; opacity: .55; transition: opacity .16s ease; } .toast-close:hover { opacity: 1; } .toast-close .ico { width: 14px; height: 14px; } .toast-toggle:focus-visible ~ .toast-close { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; } @keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } } @keyframes toast-out { to { opacity: 0; transform: translateY(-6px); } } /* Reduced motion loses the timed exit along with the entrance - the toast simply stays until the close button is pressed, rather than vanishing on a clock with no visible countdown for a reader who asked to see less motion, not less information. */ @media (prefers-reduced-motion: reduce) { .toast-stack .flash { animation: none; } } /* ⚠ A CORE CHANGE, NOT A NARROWER VERSION OF THE SAME BOX. Fixed-and- floating was the whole problem on a phone: the stack sits OUTSIDE normal flow at a fixed distance from the top of the VIEWPORT, so a toast long enough to need three or four lines - "Now in Answering mode. Assisted, except that..." is a real one this product sends - grew straight down over the header instead of pushing anything out of its way, covering the workspace switcher and the drawer button along with it. Widening it (the previous fix) made the box wider; it never touched why a tall one covered controls under it. static, not just "not fixed": toast_stack() renders at the very top of
(apps/saas/app/views/layout.php), right after the header in the DOM, so in normal flow it lands exactly where it visually needs to be - below the header, above the page - and pushes real content down instead of floating over any of it. Same breakpoint as the header's own collapse into the compact mobile bar (console.css, "@media (max-width: 1000px)" where .side becomes the grid top/foot/btn/nav strip), since that is the exact width range where a fixed toast has controls under it worth covering in the first place. */ @media (max-width: 1000px) { .toast-stack { position: static; width: auto; max-width: none; left: auto; right: auto; top: auto; transform: none; z-index: auto; margin: 0 0 1rem; } .toast-stack .flash { box-shadow: var(--shadow, 0 4px 16px rgba(16,24,32,.08)); } } /* And the same for help text under a field: the shared screens say .hint where on-premise says .help. Unstyled, it rendered at body size and read as instruction rather than as an aside. */ .hint { font-size: 13px; color: var(--ink-3); margin: 8px 0 12px; line-height: 1.55; } /* --- message detail ----------------------------------------------------- */ .meta { display: grid; gap: 10px 26px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0 0 18px; } .meta div { min-width: 0; } .meta dt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 650; } .meta dd { margin: 2px 0 0; font-size: 14px; word-break: break-word; } .emailbody { white-space: pre-wrap; word-wrap: break-word; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px 17px; font-family: var(--mono); font-size: 13px; line-height: 1.6; max-height: 460px; overflow: auto; } /* A confidence number means nothing to a non-technical reader on its own, so it is always drawn as a bar against the threshold that governs it. */ .conf { display: flex; align-items: center; gap: 10px; } .conf-track { flex: 1 1 auto; height: 7px; border-radius: 4px; background: var(--line); position: relative; overflow: hidden; max-width: 220px; } .conf-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--good); } .conf-fill.low { background: var(--warn); } .conf-num { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 13px; } .logbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.65; max-height: 560px; overflow: auto; white-space: pre-wrap; word-break: break-word; } /* --- login -------------------------------------------------------------- */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .login-card { width: 100%; max-width: 372px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 34px 30px; box-shadow: var(--shadow-lift); } .login-card .brand { justify-content: center; margin-bottom: 6px; } .login-card .brand img { height: 30px; } .login-card h1 { font-size: 17px; text-align: center; margin-bottom: 22px; color: var(--ink-2); font-weight: 550; } .login-card button { width: 100%; justify-content: center; margin-top: 4px; } .login-foot { text-align: center; margin-top: 18px; font-size: 12px; color: var(--ink-3); } @media print { .bar, .actions, form { display: none; } body { background: #fff; } } /* Confidence bar widths. Classes rather than inline styles because the CSP is style-src 'self' - an inline style attribute would be blocked. */ .conf-fill.w0 { width: 0%; } .conf-fill.w5 { width: 5%; } .conf-fill.w10 { width: 10%; } .conf-fill.w15 { width: 15%; } .conf-fill.w20 { width: 20%; } .conf-fill.w25 { width: 25%; } .conf-fill.w30 { width: 30%; } .conf-fill.w35 { width: 35%; } .conf-fill.w40 { width: 40%; } .conf-fill.w45 { width: 45%; } .conf-fill.w50 { width: 50%; } .conf-fill.w55 { width: 55%; } .conf-fill.w60 { width: 60%; } .conf-fill.w65 { width: 65%; } .conf-fill.w70 { width: 70%; } .conf-fill.w75 { width: 75%; } .conf-fill.w80 { width: 80%; } .conf-fill.w85 { width: 85%; } .conf-fill.w90 { width: 90%; } .conf-fill.w95 { width: 95%; } .conf-fill.w100 { width: 100%; } /* --- branding controls -------------------------------------------------- */ /* --- the colour picker --------------------------------------------------- ⚠ The native radio is gone, and the DOT is the control now. An unchecked radio is drawn by the browser as a grey ring. Nothing in this sheet put it there — appearance was `auto` and the widget was 13px of the browser's own chrome — so it could not be styled away, only replaced. Beside a row of saturated colour circles it read as a smudge. The input is still there, still focusable, still the thing a screen reader and the form both see; it is simply not painted. Selection is a ring around the dot, which is the same information in the place the eye is already looking. */ .swatch { align-items: center; position: relative; } .check.swatch > input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .swatch-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,.15); flex: none; box-shadow: 0 0 0 0 transparent; transition: box-shadow .15s ease, transform .15s ease; } .check.swatch:hover .swatch-dot { transform: scale(1.12); } .check.swatch > input:checked ~ .swatch-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 32%, transparent); } /* ⚠ Keyboard users lose the browser's own focus ring with the widget, so it is drawn back onto the dot. Without this the picker is unusable by keyboard — you can Tab through it and never see where you are. */ .check.swatch > input:focus-visible ~ .swatch-dot { outline: 2px solid var(--brand); outline-offset: 3px; } .check.swatch > input:checked ~ * { font-weight: 600; } /* ⚠ The custom field is revealed by the Custom preset being chosen, and the rule HIDES rather than shows. That is deliberate: :has() is what makes this possible without JavaScript, and where it is unsupported the whole rule is dropped — leaving the field visible, which is exactly how it behaved before. A `display:block` on match would instead leave it permanently hidden there. */ .field:has(.checks input:checked:not([value="custom"])) + .custom-colour { display: none; } .sw-orange { background: #FF6200; } .sw-blue { background: #2563EB; } .sw-teal { background: #0D9488; } .sw-green { background: #16A34A; } .sw-purple { background: #7C3AED; } .sw-red { background: #DC2626; } .sw-slate { background: #475569; } .sw-custom { background: #FF6200; } .asset-preview { display: flex; align-items: center; gap: 16px; margin: 0 0 8px; background: var(--surface-2); } .asset-logo { max-height: 42px; max-width: 260px; width: auto; display: block; } .asset-favicon { width: 32px; height: 32px; object-fit: contain; display: block; } input[type=file] { width: 100%; padding: 9px 12px; font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); } /* A dark neutral, not var(--brand): on the hosted console that variable is the platform's colour, not this workspace's, so it misrepresented the email. The point of the band is only "this logo sits on a dark header, so a white mark reads best" — the exact hue is set elsewhere. */ .asset-preview.on-brand { background: var(--ink); border-color: var(--ink); } .on-brand-text { color: #fff; opacity: .85; font-size: 13px; } /* --- icons --------------------------------------------------------------- */ .ico { width: 18px; height: 18px; flex: none; vertical-align: -3px; } .bar nav .ico { width: 17px; height: 17px; } .check .ico, .help .ico { width: 15px; height: 15px; } /* --- tabs ---------------------------------------------------------------- */ /* Radio inputs and sibling selectors. There is no JavaScript on this site. */ .tabradio { position: absolute; opacity: 0; pointer-events: none; } /* ⚠ PILLS, NOT FILE-FOLDER TABS. This was the one strip in either panel still built as boxy, bottom-joined tabs with a baseline rule under them - every other row of screens-to-move-between here (.tabpills on the dashboard, .band on the mode scale, .side-nav itself) is a row of soft rounded pills, resting on var(--surface) and filling to var(--ink) when current. Same shape here now: only the .tab rule and the active-state declaration below change, never the :checked selectors that pick which one is active - that state machine has its own history of bugs already fixed once (see the false/null $__openSec note further down this file) and none of it needed to move to change how the strip looks. */ .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; padding-bottom: 0; } .tab { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 9px 16px; font-size: 14px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); white-space: nowrap; transition: border-color .18s ease, color .18s ease, background .18s ease; } .tab:hover { color: var(--ink); border-color: var(--line-strong, var(--line)); } .tabpanel { display: none; } /* One rule per tab: highlight its label and reveal its panel. */ #tab-behaviour:checked ~ .tabs .tab[for="tab-behaviour"] { background: var(--ink); border-color: var(--ink); color: #fff; } #tab-behaviour:checked ~ #panel-behaviour { display: block; } #tab-incoming-mail:checked ~ .tabs .tab[for="tab-incoming-mail"] { background: var(--ink); border-color: var(--ink); color: #fff; } #tab-incoming-mail:checked ~ #panel-incoming-mail { display: block; } #tab-filing:checked ~ .tabs .tab[for="tab-filing"] { background: var(--ink); border-color: var(--ink); color: #fff; } #tab-filing:checked ~ #panel-filing { display: block; } #tab-filtering:checked ~ .tabs .tab[for="tab-filtering"] { background: var(--ink); border-color: var(--ink); color: #fff; } #tab-filtering:checked ~ #panel-filtering { display: block; } #tab-alert-email:checked ~ .tabs .tab[for="tab-alert-email"] { background: var(--ink); border-color: var(--ink); color: #fff; } #tab-alert-email:checked ~ #panel-alert-email { display: block; } #tab-api-keys:checked ~ .tabs .tab[for="tab-api-keys"] { background: var(--ink); border-color: var(--ink); color: #fff; } #tab-api-keys:checked ~ #panel-api-keys { display: block; } #tab-identity:checked ~ .tabs .tab[for="tab-identity"] { background: var(--ink); border-color: var(--ink); color: #fff; } #tab-identity:checked ~ #panel-identity { display: block; } #tab-outgoing-mail:checked ~ .tabs .tab[for="tab-outgoing-mail"] { background: var(--ink); border-color: var(--ink); color: #fff; } #tab-outgoing-mail:checked ~ #panel-outgoing-mail { display: block; } #tab-ai-connectors:checked ~ .tabs .tab[for="tab-ai-connectors"] { background: var(--ink); border-color: var(--ink); color: #fff; } #tab-ai-connectors:checked ~ #panel-ai-connectors { display: block; } /* Keyboard focus must be visible even though the radio itself is hidden. */ .tabradio:focus-visible ~ .tabs .tab { outline: none; } .tabradio#tab-behaviour:focus-visible ~ .tabs .tab[for="tab-behaviour"] { outline: 2px solid var(--brand); outline-offset: 1px; } .tabradio#tab-filtering:focus-visible ~ .tabs .tab[for="tab-filtering"] { outline: 2px solid var(--brand); outline-offset: 1px; } .tabradio#tab-branding:focus-visible ~ .tabs .tab[for="tab-branding"] { outline: 2px solid var(--brand); outline-offset: 1px; } .tabradio#tab-alert-email:focus-visible ~ .tabs .tab[for="tab-alert-email"] { outline: 2px solid var(--brand); outline-offset: 1px; } .tabradio#tab-api-keys:focus-visible ~ .tabs .tab[for="tab-api-keys"] { outline: 2px solid var(--brand); outline-offset: 1px; } .tabradio#tab-identity:focus-visible ~ .tabs .tab[for="tab-identity"] { outline: 2px solid var(--brand); outline-offset: 1px; } .tabradio#tab-outgoing-mail:focus-visible ~ .tabs .tab[for="tab-outgoing-mail"] { outline: 2px solid var(--brand); outline-offset: 1px; } /* Resting pills get weight too, not only the active one - a flat white pill on a flat white page was the whole complaint. */ .tab { box-shadow: 0 1px 2px rgba(16,24,32,.05); } #tab-behaviour:checked ~ .tabs .tab[for="tab-behaviour"], #tab-incoming-mail:checked ~ .tabs .tab[for="tab-incoming-mail"], #tab-filing:checked ~ .tabs .tab[for="tab-filing"], #tab-filtering:checked ~ .tabs .tab[for="tab-filtering"], #tab-alert-email:checked ~ .tabs .tab[for="tab-alert-email"], #tab-api-keys:checked ~ .tabs .tab[for="tab-api-keys"], #tab-identity:checked ~ .tabs .tab[for="tab-identity"], #tab-outgoing-mail:checked ~ .tabs .tab[for="tab-outgoing-mail"], #tab-housekeeping:checked ~ .tabs .tab[for="tab-housekeeping"], #tab-costs:checked ~ .tabs .tab[for="tab-costs"], #tab-account:checked ~ .tabs .tab[for="tab-account"], #tab-ai-connectors:checked ~ .tabs .tab[for="tab-ai-connectors"] { box-shadow: var(--shadow-lift); } /* ── a rail, not a strip, on a screen with room for one ───────────────────── ⚠ DIFFERENT STRUCTURE, NOT ONLY A DIFFERENT SKIN. Every screen built on this exact radio + .tabs + .tabpanel machinery picks this up together - Settings here, and the admin's own Site/Pricing screen, which renders the identical markup under a different radio name (_sitetab, not _tab). The test is structural (a form whose direct children include a .tabpanel), never a class naming one screen, so a third screen built the same way inherits this for free the way page-head icons did earlier. None of the :checked selectors above move or change - they only ever set colour, and colour applies the same whether the pill they are painting sits in a row or a column. 1151px, not 1150px: the row-with-horizontal-scroll treatment a few hundred lines up owns everything at 1150px and under, and the two must never both claim the same width. */ @media (min-width: 1151px) { form:has(> .tabpanel) { display: grid; grid-template-columns: 234px minmax(0, 1fr); align-items: start; gap: 4px 32px; } /* ⚠ REPORTED LIVE: the rail's own bottom edge overlapping the Save bar, hiding the last tab (Account) behind it. Both are independently position: sticky - this one pinned top: 20px, .sticky-save pinned bottom: 0 (screens.css, "One save bar, pinned to the bottom") - and sticky positioning alone never stops two independent sticky elements from occupying the same screen region at once on a short viewport or a tall tab list. .sticky-save carries z-index: 5 and this rail carries none, so wherever they overlapped, the save bar painted over the rail rather than the reverse. The fix is capping how tall the rail is allowed to get and letting IT scroll internally, rather than trying to out-rank the save bar in z-index - a rail an operator cannot fully see is no better than one a button is drawn over. */ form:has(> .tabpanel) > .tabs { grid-column: 1; grid-row: 1 / -1; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; position: sticky; top: 20px; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); } form:has(> .tabpanel) > .tabs .tab { justify-content: flex-start; border-radius: var(--radius-sm); border-color: transparent; background: none; box-shadow: none; } form:has(> .tabpanel) > .tabs .tab:hover { background: var(--surface-2); } form:has(> .tabpanel) > .tabpanel { grid-column: 2; } form:has(> .tabpanel) > .actions.sticky-save { grid-column: 1 / -1; } /* The row-mode pills carry their own shadow above; a rail item sits flush against a card that already has one, so it goes back to none here - otherwise every resting item doubled the card's own edge. */ #tab-behaviour:checked ~ .tabs .tab[for="tab-behaviour"], #tab-incoming-mail:checked ~ .tabs .tab[for="tab-incoming-mail"], #tab-filing:checked ~ .tabs .tab[for="tab-filing"], #tab-filtering:checked ~ .tabs .tab[for="tab-filtering"], #tab-alert-email:checked ~ .tabs .tab[for="tab-alert-email"], #tab-api-keys:checked ~ .tabs .tab[for="tab-api-keys"], #tab-identity:checked ~ .tabs .tab[for="tab-identity"], #tab-outgoing-mail:checked ~ .tabs .tab[for="tab-outgoing-mail"], #tab-housekeeping:checked ~ .tabs .tab[for="tab-housekeeping"], #tab-costs:checked ~ .tabs .tab[for="tab-costs"], #tab-account:checked ~ .tabs .tab[for="tab-account"], #tab-ai-connectors:checked ~ .tabs .tab[for="tab-ai-connectors"] { box-shadow: none; } } /* --- inputs with a leading icon ------------------------------------------ */ .input-icon { position: relative; display: block; } .input-icon .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } /* ⚠ `input[type]`, not `input`, and the attribute is doing real work. This rule reserves the space the icon sits in. console.css opens with `input[type=text], input[type=email], … { padding: .7rem .85rem }` — a SHORTHAND, so it resets padding-left along with the rest — and that selector scores (0,1,1). So did `.input-icon input`. Identical specificity, and console.css is loaded second, so it won every time: the icon then sat on top of the field's own text in every icon-prefixed input on the settings screen. Outgoing mail, API keys, the confidence threshold, the spam score — all of them, reading as one illegible smudge at the left of the box. `.input-icon input[type]` scores (0,2,1) and wins on merit rather than on which sheet happens to load last. Every input here carries a type, so nothing is lost by matching on it. `select` needs no such help: it is a bare type selector in console.css, which .input-icon select already outranks. */ .input-icon input[type] { padding-left: 40px; } .input-icon select { padding-left: 40px; } .input-icon input:focus ~ .ico { color: var(--brand); } /* --- sticky save --------------------------------------------------------- */ /* The settings form is long; the save button should not require scrolling. */ button .ico, .btn .ico { margin-right: -2px; } .ico-lg { width: 22px; height: 22px; } .ico-xl { width: 34px; height: 34px; opacity: .55; } .empty .big { display: block; margin-bottom: 10px; } .bar nav a span, .tab span { display: inline-block; } button.link { gap: 6px; } /* --- layout corrections -------------------------------------------------- */ /* Six nav items plus the brand and the mode pill wrapped onto a second row at common laptop widths. Tightening the nav keeps it on one line without shrinking the text below a comfortable size. */ .bar-inner { gap: 18px; } .bar nav { gap: 0; } .bar nav a { padding: 8px 11px; gap: 6px; } /* The sticky save bar floats over the form, so the form needs room beneath its last field or that field sits permanently behind the button. */ /* The nav must never wrap: a second row pushes the page content down and makes the header look broken. It scrolls horizontally instead on the rare width where it genuinely cannot fit. */ .bar nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .bar nav::-webkit-scrollbar { display: none; } /* A translucent sticky bar lets text show through from behind, which reads as a rendering fault. Solid, with a top edge, so it is clearly a layer. */ .tabpanel { padding-bottom: 24px; } /* nowrap on the container stops the row breaking, but each item must also refuse to break internally or "Needs you" becomes two lines. */ .bar nav a { white-space: nowrap; } .tab { white-space: nowrap; } /* Match the content column rather than bleeding past it. */ /* One save bar, pinned to the bottom of the viewport. Solid rather than translucent: text showing through from behind reads as a rendering fault. */ .sticky-save { position: sticky; bottom: 0; z-index: 5; background: var(--surface); border-top: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; box-shadow: 0 -4px 16px rgba(16,24,32,.06); margin: 0; padding: 14px 20px; } /* A field focused near the foot of the form must not end up under the bar when the browser scrolls it into view. :has() is already a dependency of this sheet; where it is unsupported the rule drops and behaviour is unchanged. */ form:has(.sticky-save) :is(input, select, textarea, .field, label) { scroll-margin-bottom: 6rem; } .wrap, .col, main { scroll-padding-bottom: 6rem; } #tab-account:checked ~ .tabs .tab[for="tab-account"] { background: var(--ink); border-color: var(--ink); color: #fff; } #tab-account:checked ~ #panel-account { display: block; } .tabpanel h2 { margin-top: 0; display: flex; align-items: center; gap: 9px; } /* --- account button in the bar ------------------------------------------- */ .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); color: var(--ink-2); border: 1px solid transparent; flex: none; } .iconbtn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } /* Visible label for screen readers only - the icon alone is not a name. */ .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* The save bar belongs to the settings form. On the Account tab the only action is Change password, and a second primary button there implies the password is saved by the wrong one. AI connectors has no fields of this form's at all - it is a card that links out - so the same is true there for an even plainer reason. */ #tab-account:checked ~ .sticky-save, #tab-ai-connectors:checked ~ .sticky-save { display: none; } /* --- per-row quick actions ----------------------------------------------- */ .rowactions { text-align: right; white-space: nowrap; } .rowactions button { padding: 4px 9px; font-size: 13px; } /* Delete is destructive, so it reads as such - but quietly, since it sits on every row and a wall of red would drown the actual warnings. */ tbody tr:hover .rowactions button { opacity: 1; } .rowactions button { opacity: .65; transition: opacity .12s ease; } /* --- row actions: icons with a hover label -------------------------------- */ /* The label is a CSS pseudo-element, not a title attribute: native tooltips take about a second to appear and cannot be styled. It sits to the LEFT of the icon because the table lives in an overflow container, and a tooltip drawn above or to the right would be clipped by it. */ .iconaction { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin-left: 2px; background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink-3); cursor: pointer; opacity: .7; transition: opacity .12s ease, color .12s ease, background .12s ease; } tbody tr:hover .iconaction { opacity: 1; } /* A guard that can be seen. The delete on a default mailbox is refused, and used to be refused by not being drawn - which on a new account, where the only mailbox is the default, meant the option existed nowhere. Dimmer than the live one, and it keeps that dimness on hover so it does not read as something that will respond. */ .iconaction[disabled] { opacity: .3; cursor: not-allowed; } tbody tr:hover .iconaction[disabled] { opacity: .3; } .iconaction .ico { width: 17px; height: 17px; } .iconaction::after { content: attr(data-label); position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; padding: 6px 9px; border-radius: 6px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .12s ease; } .iconaction:hover::after, .iconaction:focus-visible::after { opacity: 1; visibility: visible; } /* Colour carries the meaning: dismiss is a filing action, delete destroys. */ .act-dismiss:hover { color: var(--info); background: var(--info-soft); border-color: var(--info); } .act-delete:hover { color: var(--bad); background: var(--bad-soft); border-color: var(--bad); } .act-dismiss:hover::after { background: var(--info); } .act-delete:hover::after { background: var(--bad); } #tab-housekeeping:checked ~ .tabs .tab[for="tab-housekeeping"] { background: var(--ink); border-color: var(--ink); color: #fff; } #tab-housekeeping:checked ~ #panel-housekeeping { display: block; } #tab-costs:checked ~ .tabs .tab[for="tab-costs"] { background: var(--ink); border-color: var(--ink); color: #fff; } #tab-costs:checked ~ #panel-costs { display: block; } /* The costs page filters with links rather than radios, so its tabs need the selected state applied directly. */ a.tab { text-decoration: none; } a.tab:hover { text-decoration: none; } a.tab.tab-on { color: var(--brand-ink); background: var(--surface); border-color: var(--line); border-bottom: 1px solid var(--surface); } .card .n { word-break: break-word; } /* ========================================================================= RESPONSIVE ========================================================================= Three widths, defined once here rather than scattered through the file: >= 1151px everything inline, nav labels shown 901-1150px nav goes icon-only; nine items no longer fit with labels <= 900px the nav collapses behind a menu button <= 560px tables stop being tables The menu is a checkbox and a sibling selector - the same mechanism the settings tabs use, and for the same reason: no control in this interface is allowed to need script to work, and the one script that is loaded only marks a pressed button busy. There is nothing here to open a menu with. A
element was the obvious alternative and was not used, because forcing its content to stay visible above the breakpoint means overriding UA-stylesheet behaviour that engines do not implement identically. ========================================================================= */ /* The toggle itself is never seen; only its label is. */ .navtoggle { position: absolute; opacity: 0; pointer-events: none; } .navtoggle-btn { display: none; } @media (max-width: 1150px) { .bar nav a span { display: none; } .bar nav a { padding: 8px 10px; } .bar nav a.on span { display: inline-block; } } @media (max-width: 900px) { .bar-inner { flex-wrap: wrap; gap: 12px; padding: 8px 16px; min-height: 56px; } /* Menu button last, hard against the right edge - where a thumb reaches it without crossing the screen. The auto margin sits on the group before it so the two are pushed across together; the button itself never shrinks and never wraps, because it is the only way back to the rest of the site. */ .brand { order: 1; } .bar-right { order: 2; margin-left: auto; min-width: 0; } .navtoggle-btn { order: 3; flex: none; } .bar nav { order: 4; } /* The word beside the logout icon is the least useful thing in the bar and the easiest 60px to find. Hidden from here down, not just on a phone, so the menu button always has room. The button keeps its aria-label. */ .bar-right .link span { display: none; } .bar-right { gap: 6px; } /* A hamburger drawn in CSS: no icon file, no extra request, and it inherits currentColor so it works in both themes. */ .navtoggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; cursor: pointer; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--ink-2); } .navtoggle-btn:hover { background: var(--surface-2); color: var(--ink); } .navtoggle-bars, .navtoggle-bars::before, .navtoggle-bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; content: ""; } .navtoggle-bars { position: relative; } .navtoggle-bars::before { position: absolute; top: -6px; } .navtoggle-bars::after { position: absolute; top: 6px; } /* Focus has to be visible on the label, because the input it controls is the thing that actually receives focus and it is invisible. */ .navtoggle:focus-visible ~ .navtoggle-btn { outline: 2px solid var(--brand); outline-offset: 2px; } .bar nav { display: none; width: 100%; flex-direction: column; gap: 2px; padding: 6px 0 4px; margin-top: 4px; border-top: 1px solid var(--line); overflow: visible; /* it is a column here, nothing to scroll */ } .navtoggle:checked ~ nav { display: flex; } /* Labels come back the moment there is a full row for each item. Hiding them was only ever a way to fit nine things across one bar. */ .bar nav a { padding: 11px 12px; min-height: 44px; } .bar nav a span, .bar nav a.on span { display: inline-block; } .bar nav .navcount { margin-left: auto; } main { padding: 20px 16px 56px; } h1 { font-size: 22px; } /* ⚠ .page-head h1 outranks the plain h1 rule above on specificity alone (0,1,1 beats 0,0,1), which would otherwise carry the desktop 30px onto a phone regardless of this media query. Restated here, smaller than the desktop size but still a step above a plain heading. */ .page-head h1 { font-size: 24px; } .card .n { font-size: 27px; } /* The tab strips scroll rather than wrapping onto a second row, which would push the panel down and read as a broken header. */ .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .tabs::-webkit-scrollbar { display: none; } .tab { scroll-snap-align: start; } } @media (max-width: 900px) { /* Touch targets. 44px is the smallest a finger reliably hits, and a tablet is as much a touch device as a phone. */ button, .btn { min-height: 44px; padding: 11px 18px; } .iconaction { width: 40px; height: 40px; opacity: 1; } tbody tr .iconaction { opacity: 1; } /* There is no hover on a touch screen, so the label would never appear. Each button carries an aria-label, which is what actually names it here. */ .iconaction::after { display: none; } /* --- tables become cards --------------------------------------------- Below this width a table can only be scrolled sideways, which hides the column that matters behind the edge of the screen. 900 rather than a phone-sized figure because the message list carries nine columns: at 768, an iPad held upright, the last three fall off. Each row becomes a card and each cell carries its own heading, taken from the data-label attribute the views set. Nothing is hidden and nothing needs panning. */ .tablewrap { overflow-x: visible; border: 0; background: none; box-shadow: none; border-radius: 0; } table, tbody, tr, td { display: block; width: 100%; } thead { display: none; } tbody tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 10px; padding: 4px 0; overflow: hidden; } tbody tr:hover td { background: transparent; } tbody tr + tr td { border-top: 0; } td { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 8px 14px; border: 0; text-align: right; } td + td { border-top: 1px solid var(--line); } /* The label pushes everything else to the right with an auto margin rather than the cell using space-between. A cell often holds more than one thing - an address and a "asked for a person" pill, two action buttons - and space-between would spread those apart across the row instead of keeping them together as one value. */ td[data-label]::before { content: attr(data-label); flex: none; text-align: left; margin-right: auto; color: var(--ink-3); font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; } /* nowrap exists to keep columns from breaking. There are no columns here, and keeping it truncates long values against the right edge instead. */ td.nowrap, td.muted { white-space: normal; } td .subj, td .from { text-align: right; word-break: break-word; } .rowactions { text-align: right; } /* The bar is a flex child of .conf, which is itself a flex child of the cell. Without a basis of its own it collapses to nothing and the row shows a bare percentage - which is the one thing the bar exists to give context to. */ td .conf { flex: 1 1 auto; min-width: 0; } .conf-track { max-width: none; } td.rowactions { gap: 8px; } } @media (max-width: 560px) { main { padding: 16px 12px 56px; } /* ⚠ 16px, not 14px. iOS Safari zooms the whole page in when a focused field has text smaller than 16px, and it does not zoom back out afterwards - which leaves the operator on a page they now have to pan sideways. This is the one place where the type scale gives way to the platform. */ input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select, textarea { font-size: 16px; padding: 11px 12px; } textarea { font-size: 14px; } .actions { gap: 8px; } .actions button, .actions .btn { flex: 1 1 auto; justify-content: center; } .meta { grid-template-columns: 1fr; gap: 12px; } .group-heading { margin-top: 26px; } .sticky-save { padding: 12px 14px; margin: 0 -12px; border-radius: 0; } } /* ========================================================================= DISCLOSURES =========================================================================
where it is valid, which is everywhere except inside a table row - a may contain only and , so the message list uses a checkbox instead (see .rowmore below). No JavaScript is involved in either. ========================================================================= */ summary { cursor: pointer; list-style: none; } summary::-webkit-details-marker { display: none; } summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); } /* One marker, drawn in CSS and rotated when open, so both engines' native markers can be turned off and the result looks the same in each. */ summary::after { content: ""; flex: none; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease; } details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); } /* --- the mode banner on the dashboard ------------------------------------ */ .status > summary { display: flex; align-items: center; gap: 16px; padding: 16px 20px; } .status > summary:hover { background: var(--surface-2); } .status .status-title { font-weight: 650; font-size: 16px; margin: 0; } .status .status-body { margin: 0; padding: 0 20px 16px 60px; } .status .status-icon { margin: 0; } /* --- the CSS-only modal, shared by every popup on either panel ----------- ⚠ A hidden checkbox plus two