when its task points somewhere. There is no
global anchor reset in this stylesheet, so the underline has to be taken
off here; the copper on row hover is `card-task-title`'s, so the two cards
on one home page answer a pointer the same way. */
a.card-row__title { text-decoration: none; }
.card-row:hover a.card-row__title { color: var(--copper-cta); }
/* 16c. A DEADLINE IS A PILL, and its colour is the deadline's, not the row's.
Calm by default; amber when it is close; red when it has passed. Three
states and no more, because a broker reads this at a glance or not at all. */
.ui-due {
font-size: 12.5px;
font-weight: 500;
padding: 5px 11px;
border-radius: 999px;
white-space: nowrap;
background: oklch(0.945 0.01 85);
color: oklch(0.45 0.02 255);
}
.ui-due--today, .ui-due--urgent, .ui-due--soon {
background: oklch(0.93 0.04 78);
color: oklch(0.42 0.08 60);
}
.ui-due--overdue {
background: oklch(0.94 0.05 30);
color: oklch(0.44 0.14 30);
}
/* 16d. THE EVENT LEADS WITH ITS DATE. A tinted row with a date block reads as
a calendar; the same words in a bare list read as prose. */
.card-events { list-style: none; margin: 0; padding: 0; display: flex;
flex-direction: column; gap: 10px; }
.card-event {
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
gap: 16px;
align-items: center;
padding: 12px 14px;
border-radius: 12px;
background: oklch(0.975 0.008 85);
border: 0;
}
.card-event__date {
display: flex;
flex-direction: column;
align-items: center;
padding: 7px 0;
border-radius: 10px;
background: var(--card-bg);
border: 1px solid oklch(0.92 0.012 85);
}
.card-event__month {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted-ink);
}
.card-event__day { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.card-event__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.card-event-title { font-size: 14.5px; font-weight: 600; color: var(--ink-1); }
.card-event-when { font-size: 12.5px; color: var(--muted-ink); }
/* 16e. THE TINTED CARD. Reserved for the card that exists only because
something is wrong — CE with a course to check, a licence that has lapsed.
Tinting the whole card is what lets every other card stay quiet: the page
has one loud object, and it is loud because it earned it. Keyed off
`data-card` so no card template has to know which one it is. */
.ui-card[data-card="ce_status"], .ui-card[data-card="license_status"] {
background: oklch(0.955 0.03 80);
border-color: oklch(0.89 0.05 78);
padding: 22px;
}
.ui-card[data-card="ce_status"] .card-title,
.ui-card[data-card="license_status"] .card-title {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: oklch(0.48 0.08 62);
}
.ui-card[data-card="ce_status"] .ui-badge {
margin-left: auto;
/* No status dot. The whole card is already the status. */
font-size: 11.5px;
font-weight: 600;
padding: 3px 9px;
border-radius: 999px;
background: oklch(0.99 0.01 80);
color: oklch(0.46 0.09 55);
}
.ui-card[data-card="ce_status"] .ui-badge::before { display: none; }
.ui-card[data-card="ce_status"] .card-heading,
.ui-card[data-card="license_status"] .card-heading {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.015em;
color: oklch(0.3 0.04 62);
margin: 0 0 8px;
}
.ui-card[data-card="ce_status"] .lic-name,
.ui-card[data-card="ce_status"] .ce-reason,
.ui-card[data-card="license_status"] .card-detail,
.ui-card[data-card="license_status"] .lic-name {
color: oklch(0.45 0.04 62);
}
.ui-card[data-card="ce_status"] .card-action,
.ui-card[data-card="license_status"] .card-action {
align-self: flex-start;
padding: 10px 16px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
background: oklch(0.3 0.04 62);
color: oklch(0.99 0.01 80);
border: 0;
}
.ui-card[data-card="ce_status"] .card-action:hover,
.ui-card[data-card="license_status"] .card-action:hover {
background: oklch(0.24 0.04 62);
color: oklch(0.99 0.01 80);
}
/* The stat number is 30/600, matching the display face rather than shouting
over it. This said "not the serif" when the display face was one. */
.ui-stat {
border-color: oklch(0.91 0.012 85);
border-radius: 14px;
padding: 18px 20px;
}
.ui-stat__value {
font-family: var(--font-sans);
font-size: 30px;
font-weight: 600;
letter-spacing: -0.03em;
}
.ui-stat__label { font-size: 12px; font-weight: 500; color: var(--muted-ink); }
.ui-stat__sub { font-size: 12px; color: var(--muted-ink); }
.ui-stat__sub.is-warn { color: oklch(0.55 0.06 65); }
/* ── 17. The chrome, as the concept builds it [LAST ON PURPOSE] ──────────
Three moves, all structural rather than decorative, and all of them are
what made the port still read as a different design after the palette and
the type already matched:
1. THE BRAND MOVES INTO THE RAIL. It used to sit in the header, where it
spent the widest strip on the screen repeating a fact the reader knew
before they signed in. In the rail it is an anchor — chip, firm, and one
line saying what this software is — and it hands the header back.
2. THE HEADER BECOMES SEARCH. That is the only thing worth the full width
of the page at every moment: a way to reach anything from anywhere.
3. THE RAIL COUNTS. "Tasks 5" answers the app's standing question before
you click, which is the difference between navigation and a menu.
Every value below is measured off `design_concept/R1 Dashboard.dc.html`,
not judged by eye. */
/* 17a. The rail's brand block. Sits above the nav, inside the rail's own
26px top padding, and aligns to the nav rows' 12px text inset. */
.rail-brand {
display: flex;
align-items: center;
gap: 11px;
padding: 0 8px;
min-width: 0;
}
.rail-brand__chip {
width: 32px;
height: 32px;
flex: none;
border-radius: 9px;
background: var(--accent);
color: #fff;
display: grid;
place-items: center;
font-size: 13px;
font-weight: 700;
letter-spacing: -0.02em;
text-transform: uppercase;
}
/* A brokerage that uploaded a mark gets the mark. It still occupies the same
32px square, so the nav below never shifts between tenants. */
.rail-brand__chip--img {
background: var(--card-bg);
border: 1px solid var(--line);
object-fit: contain;
padding: 3px;
}
.rail-brand__text {
display: flex;
flex-direction: column;
line-height: 1.15;
min-width: 0;
}
.rail-brand__name {
font-size: 14px;
font-weight: 600;
color: var(--ink-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rail-brand__sub {
font-size: 11px;
color: var(--muted-ink);
}
/* 17b. The count on a nav row. Right-aligned, which is why the row becomes a
flex container — but ONLY the rows that carry one, so an ordinary row keeps
its icon tight against its label. */
.nav-item:has(.nav-item__count) {
display: flex;
align-items: center;
gap: 10px;
}
.nav-item__count {
margin-left: auto;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
padding: 1px 6px;
border-radius: 5px;
background: oklch(0.9 0.05 75);
color: oklch(0.42 0.08 60);
}
/* On the dark active pill the amber loses its ground, so the badge borrows
the pill's own foreground instead of fighting it. */
.nav-item.active .nav-item__count {
background: oklch(1 0 0 / 0.16);
color: #fff;
}
/* 17c. The header. The search field is the left half; identity is the right. */
.topsearch {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.topsearch__form {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
max-width: 380px;
padding: 9px 14px;
border-radius: 10px;
background: var(--card-bg);
border: 1px solid var(--line);
}
/* The magnifier is drawn, not fetched: one ring and one handle, so the field
needs no icon sprite and no extra request. */
.topsearch__form::before {
content: "";
flex: none;
width: 11px;
height: 11px;
border-radius: 50%;
border: 1.5px solid var(--muted-ink);
box-shadow: 1.5px 1.5px 0 -0.25px var(--muted-ink);
}
.topsearch__input {
flex: 1;
min-width: 0;
border: 0;
background: none;
padding: 0;
font-family: inherit;
font-size: 13.5px;
color: var(--ink-1);
}
.topsearch__input::placeholder { color: var(--muted-ink); }
.topsearch__input:focus { outline: none; }
.topsearch__form:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 3px oklch(0.45 0.08 155 / 0.12);
}
.topsearch__key {
margin-left: auto;
flex: none;
font-family: var(--font-mono);
font-size: 11px;
color: var(--muted-ink);
}
/* 17d. The bell is a square control, not a bare glyph, and the count rides
its corner. */
.main-col > header .bell {
position: relative;
width: 34px;
height: 34px;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--card-bg);
display: grid;
place-items: center;
color: var(--ink-2);
}
.main-col > header .bell:hover { border-color: oklch(0.86 0.012 85); }
.main-col > header .bell .ico { width: 16px; height: 16px; }
.main-col > header .bell-count {
position: absolute;
top: -4px;
right: -4px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 999px;
background: oklch(0.62 0.16 35);
color: #fff;
font-size: 10.5px;
font-weight: 600;
display: grid;
place-items: center;
border: 0;
}
/* 17e. Identity is a pill: initials first, then two quiet lines. The avatar
leads because it is the fastest thing to recognise at a glance, and the
template's source order puts it second — `order` fixes that without a
markup change that eight other pages would have to follow. */
.header-right { gap: 14px; }
.main-col > header .user-chip {
display: flex;
align-items: center;
gap: 10px;
padding: 5px 10px 5px 6px;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--card-bg);
box-shadow: none;
}
.main-col > header .user-chip:hover { border-color: oklch(0.86 0.012 85); }
.main-col > header .user-chip .avatar {
order: -1;
width: 28px;
height: 28px;
flex: none;
border-radius: 50%;
background: var(--anchor);
color: var(--on-anchor);
font-size: 11.5px;
font-weight: 600;
display: grid;
place-items: center;
}
.main-col > header .user-text { line-height: 1.2; text-align: left; }
.main-col > header .user-name {
font-size: 13px;
font-weight: 600;
color: var(--ink-1);
}
.main-col > header .user-role {
font-size: 11px;
font-weight: 400;
color: var(--muted-ink);
}
.main-col > header .user-menu-caret { color: var(--muted-ink); font-size: 11px; }
/* 17f. Phone. The concept has no media queries at all, so this is the adapt
half of "copy it, then make it work on a phone". The search field keeps the
header — it is the reason the header exists now — and everything that
cannot fit beside it stands down: the two-line identity becomes the avatar
alone, and the rail's own brand block is enough that the header carries no
firm name at any width. */
@media (max-width: 900px) {
/* app.css already clears the fixed rail toggle with 62px of header padding;
the field starts after it, so it needs no inset of its own. */
.topsearch__key { display: none; }
.main-col > header .user-text { display: none; }
.main-col > header .user-chip { padding: 4px; gap: 0; }
/* Nothing left to drop down beside — the avatar IS the button. */
.main-col > header .user-menu-caret { display: none; }
}
/* ── 18. The rail's own furniture, and the page's last line ───────────────
The concept's rail is TEXT. No icons: eight labels in one column, and the
only marks on it are the ones that carry information — a count, a dot on
where you are, a chip on the product you are in. Icons beside every row
made eight rows read as eight buttons, which is the busiest the quietest
part of the screen could possibly be. */
/* Where you are gets a dot as well as the filled pill — small, green, and the
only spot of accent in the rail. */
.nav-item.active { justify-content: space-between; }
.nav-item__dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: oklch(0.72 0.13 145);
flex: none;
}
.nav-item:not(.active) .nav-item__dot { display: none; }
/* A product row is a label and a blurb. The one you are in is tinted and says
so on the right, instead of spending a second line on it. */
.product-link {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 9px;
color: var(--ink-3);
background: none;
border: 0;
box-shadow: none;
}
.product-link:hover { background: oklch(0.945 0.01 85); }
.product-link .prod-name {
display: flex;
flex-direction: column;
gap: 1px;
font-size: 14px;
font-weight: 500;
min-width: 0;
}
.product-link .prod-sub {
font-size: 11.5px;
font-weight: 400;
color: var(--muted-ink);
}
.product-link.current {
background: oklch(0.93 0.045 155);
color: oklch(0.32 0.06 155);
}
.prod-here {
margin-left: auto;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: oklch(0.38 0.07 155);
}
/* The page's last line: two mono marks either side of a rule. */
.ui-page-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 8px;
border-top: 1px solid oklch(0.92 0.012 85);
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted-ink);
}
/* ── 19. The task block ──────────────────────────────────────────────────
The concept's own-tasks card is not a list with rules — it is one tinted
block per task: what to do, and when it is due under it. That is the same
object as an event row minus the date block, and reading them as a pair is
the point: both answer "what is coming at me", so both should look alike.
Colour on the due line only, and only when it means something. */
.card-tasks { list-style: none; margin: 0; padding: 0; display: flex;
flex-direction: column; gap: 10px; }
.card-task {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
border-radius: 12px;
background: oklch(0.975 0.008 85);
border: 0;
border-left: 0;
margin: 0;
}
.card-task-title {
font-size: 14.5px;
font-weight: 600;
color: var(--ink-1);
text-decoration: none;
}
a.card-task-title:hover { color: var(--accent); }
.card-task-when { font-size: 12.5px; color: var(--muted-ink); }
.card-task-when.task-soon, .card-task-when.task-today,
.card-task-when.task-urgent { color: oklch(0.55 0.06 65); }
.card-task-when.task-overdue { color: oklch(0.5 0.15 30); font-weight: 500; }
/* §13 gave the block a 3px deadline stripe on its left edge. Inside a tinted
block it reads as a torn edge rather than a signal, and the due line right
under the title already carries the same information in words — so the
stripe goes and the words stay. */
.card-task:has(.task-soon), .card-task:has(.task-urgent),
.card-task:has(.task-today), .card-task:has(.task-overdue) {
padding-left: 16px;
border-left: 0;
}
/* The due line is text here, not a pill: it sits under its own title inside a
block, where a second filled shape would be one shape too many. */
.card-task .card-task-when.task-today,
.card-task .card-task-when.task-urgent,
.card-task .card-task-when.task-overdue,
.card-task .card-task-when.task-soon {
background: none;
padding: 0;
border-radius: 0;
}
.card-task .card-task-when::before { display: none; }
/* The crumb used to trail the firm's name, so its leading "/" was a separator.
The firm's name is in the rail now and the crumb stands alone, where a bare
slash in front of it reads as a broken path. It becomes a quiet label to
the right of the search field. */
.main-col > header .brand-section::before { content: none; }
.main-col > header .brand-section {
font-size: 13px;
font-weight: 500;
color: var(--muted-ink);
white-space: nowrap;
}
/* THE RAIL IS ONE SCROLLING COLUMN, as the concept builds it. app.css divided
it into fixed regions that each scrolled on their own — sized for the chat
page, where "Recent chats" and the knowledge-base picker also live. With
the brand block added on top, those regions ran out of room and painted
over each other: on /chat the picker sat on top of the product rail.
One column, one scrollbar, sections in document order. */
.sidebar { overflow-y: auto; overflow-x: hidden; }
.sidebar-mid { flex: 0 0 auto; display: flex; flex-direction: column; gap: 18px; }
.links-section, .history-section {
flex: 0 0 auto;
min-height: 0;
overflow: visible;
}
/* Pinned to the bottom while the rail is short, and pushed along by the
content once it is not. */
.sidebar-foot { margin-top: auto; }
/* Chat ends in its composer, not in a rule and two marks. */
body.is-chat .ui-page--foot { display: none; }
.powered {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 12px 4px;
border-top: 1px solid oklch(0.92 0.012 85);
font-size: 11.5px;
color: var(--muted-ink);
}
.powered__name { font-weight: 600; color: oklch(0.4 0.02 255); }
/* ── 20. THE DESIGN ON EVERY PAGE ─────────────────────────────────────────
§16–§19 built the home page and the chrome around it. The other ten screens
inherited the palette and the type but kept their own geometry, so the
product still changed shape when you left home. Everything below is the
same measured set of values applied to the components those screens are
actually made of: page heads, tables, forms, buttons, and two list layouts
that predate the component layer.
Nothing here is new design. It is the concept's card, the concept's row,
and the concept's control, on the pages that did not have them yet. */
/* 20a. THE PAGE HEAD PUTS ITS ACTIONS BESIDE THE TITLE.
§2 gave the back link, the h1 and the subtitle `flex: 0 0 100%` so that
pages with different markup would each stack correctly — which also forced
the actions onto a fourth line, left-aligned under everything. On Events
the "New event" button sat below the count; on Notifications "Mark all
read" did the same. A two-column grid takes both shapes: everything that
is not an action claims column one, and the actions span the whole block in
column two, centred against it. */
.ui-page-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 20px;
row-gap: 0;
align-items: start;
}
/* Some heads wrap their actions in `__actions`; four put a single button
straight in. Both are treated as actions, so neither ends up as a
full-width bar under the subtitle. */
.ui-page-head > *:not(.ui-page-head__actions):not(.ui-btn) { grid-column: 1; }
.ui-page-head > .ui-btn,
.ui-page-head__actions {
grid-column: 2;
grid-row: 1 / span 4;
align-self: center;
justify-self: end;
}
.ui-page-head h1 { font-weight: 600; }
.ui-page-head__sub { font-size: 13.5px; color: var(--muted-ink); }
.ui-back { font-size: 13px; color: var(--muted-ink); text-decoration: none; }
.ui-back:hover { color: var(--accent); }
/* 20b. THE SITE-ADMIN BANNER IS A NOTICE, NOT A STRIPE.
Full-bleed with a border top and bottom, it read as a second header and
pushed every page 40px down the screen. As the concept's tinted notice —
inside the page's own margins, with a dot to start the sentence — it says
the same thing and stops being chrome. */
.ui-page--bar { flex: none; overflow: visible; padding-top: 24px; padding-bottom: 0; }
.admin-bar {
margin: 0;
padding: 14px 18px;
width: 100%;
display: flex;
align-items: flex-start;
gap: 10px;
background: oklch(0.965 0.025 80);
border: 1px solid oklch(0.9 0.04 78);
border-radius: 14px;
font-size: 13.5px;
line-height: 1.5;
color: oklch(0.4 0.05 62);
}
.admin-bar::before {
content: "";
flex: none;
width: 7px;
height: 7px;
margin-top: 7px;
border-radius: 50%;
background: oklch(0.62 0.13 55);
}
/* 20c. CONTROLS. The concept's field: a 10px radius, the card's own paper,
the hairline everything else uses, and a green focus ring rather than the
blue one left over from the first palette. */
.ui-input,
.ui-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.ui-page select,
.ui-page textarea,
.auth-form input {
min-height: 40px;
padding: 0 14px;
font-size: 14px;
/* background-COLOR, not the shorthand: §6 draws the select's chevron with a
background-image, and `background:` here would erase it — which it did,
leaving every select on the admin pages with no affordance at all. */
background-color: var(--card-bg);
border: 1px solid oklch(0.9 0.012 85);
border-radius: 10px;
}
.ui-page textarea, .auth-form textarea { padding: 10px 14px; }
.ui-page input:focus-visible,
.ui-page select:focus-visible,
.ui-page textarea:focus-visible,
.ui-input:focus-visible,
.auth-form input:focus-visible {
border-color: var(--accent);
box-shadow: 0 0 0 3px oklch(0.45 0.08 155 / 0.12);
}
/* Field labels are the stat tile's label: 12px, 500, muted. They were 10px
uppercase with 0.14em of tracking on six pages, which shouted "EMAIL" at a
person who was looking at an empty box anyway. */
.ui-page .prof-grid > label,
.ui-page .lic-grid > label,
.ui-page .prof-readonly dt,
.ui-page .person-label,
.ui-page .ev-desc-label,
.ui-page .course-search label,
.ui-page .auth-label,
.ui-field > label,
.auth-label {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: normal;
text-transform: none;
color: var(--muted-ink);
}
/* 20d. BUTTONS. Ink for the thing you came to do, paper for everything else.
The copper primary is retired: it was chosen against the navy shell and
reads as an alert on paper, where amber already means a deadline. */
.ui-btn, .auth-btn, .card-btn {
height: auto;
padding: 11px 18px;
font-size: 13.5px;
font-weight: 600;
border-radius: 10px;
}
.ui-btn--primary, .auth-btn {
background: var(--anchor);
border-color: var(--anchor);
color: var(--on-anchor);
}
.ui-btn--primary:hover:not(:disabled), .auth-btn:hover {
background: oklch(0.2 0.025 255);
border-color: oklch(0.2 0.025 255);
color: var(--on-anchor);
}
.ui-btn--secondary, .card-btn {
background: var(--card-bg);
color: oklch(0.3 0.02 255);
border: 1px solid oklch(0.88 0.012 85);
}
.ui-btn--secondary:hover:not(:disabled), .card-btn:hover {
background: var(--card-bg);
border-color: oklch(0.7 0.02 255);
}
.ui-btn--sm { padding: 7px 12px; font-size: 12.5px; }
/* 20e. TABLES take the card's geometry and the row's hairline, so a table and
a list card are the same object with different contents. */
.ui-table-wrap {
background: var(--card-bg);
border: 1px solid oklch(0.91 0.012 85);
border-radius: 16px;
}
.ui-table th {
padding: 14px 22px;
background: var(--card-bg);
color: var(--muted-ink);
border-bottom: 1px solid oklch(0.91 0.012 85);
}
.ui-table td {
padding: 14px 22px;
border-bottom: 1px solid oklch(0.94 0.01 85);
font-size: 14px;
color: oklch(0.36 0.02 255);
}
.ui-table tbody tr:hover { background: oklch(0.975 0.008 85); }
.ui-table__link { font-size: 14.5px; color: var(--ink-1); }
.ui-table tbody tr:hover .ui-table__link { color: var(--accent); }
.ui-table__sub { font-size: 12.5px; color: var(--muted-ink); margin-top: 3px; }
/* 20f. EMPTY STATES sit inside a card like everything else, rather than
floating on bare paper. */
.ui-empty {
background: var(--card-bg);
border: 1px dashed oklch(0.87 0.012 85);
border-radius: 16px;
padding: 40px 22px;
text-align: center;
}
.ui-empty__title { font-size: 17px; font-weight: 600; margin: 0 0 6px; }
.ui-empty__body { font-size: 13.5px; color: var(--muted-ink); margin: 0 auto; max-width: 46ch; }
.ui-empty__action { margin-top: 18px; }
/* 20g. THE LOGOS COME BACK, each where it belongs.
R1's is a wide three-line lockup and Adealia's is a tall house mark, so
neither survives being forced into the other's slot — which is why the port
dropped both. Each now appears where its shape works and where it means
something: the customer's mark at the top of their workspace, the vendor's
on the line that credits the vendor. */
.rail-brand--logo {
flex-direction: column;
align-items: flex-start;
gap: 7px;
padding: 0 8px;
}
.rail-brand__logo {
height: 38px;
width: auto;
max-width: 100%;
display: block;
}
/* On the rail's own paper the mark needs no plate behind it. */
.rail-brand--logo .rail-brand__sub { padding-left: 1px; }
.powered__name { display: inline-flex; align-items: center; gap: 6px; }
.powered__mark { height: 15px; width: auto; display: block; }
/* 20h. THE SIGN-IN CARD. The mark was 192px tall — the largest object in the
product, on the one page that has nothing to say yet. At 62px it is a mark;
the card around it takes the same geometry as every other card. */
.auth-body { background: var(--page-bg); }
.auth-card {
background: var(--card-bg);
border: 1px solid oklch(0.91 0.012 85);
border-radius: 18px;
box-shadow: none;
padding: 34px 32px 24px;
}
.auth-logo { max-width: 62px; margin: 0 auto 20px; }
.auth-title {
font-family: var(--font-display);
font-size: 30px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ink-1);
}
.auth-sub { font-size: 13.5px; color: var(--muted-ink); }
.auth-btn { width: 100%; margin-top: 18px; }
/* ADE-202. The second answer on the join screen. Paper, not ink: joining is
the thing the person came to do and declining is the way out, so the two
must not read as a pair of equal choices — but it is a real button with a
real border and real contrast, not a link pretending to be one. Written
with both classes so it beats `.ui-btn--primary, .auth-btn` above and
`#send, .auth-btn` in app.css, neither of which it should inherit a
background from. */
.auth-btn.auth-btn--quiet {
margin-top: 10px;
background: var(--card-bg);
color: oklch(0.3 0.02 255);
border: 1px solid oklch(0.82 0.014 85);
}
.auth-btn.auth-btn--quiet:hover { background: var(--surface-2); }
.auth-hint { font-size: 12.5px; color: var(--muted-ink); }
.auth-foot {
margin-top: 22px;
padding-top: 14px;
border-top: 1px solid oklch(0.92 0.012 85);
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 11.5px;
color: var(--muted-ink);
}
.auth-foot img { height: 15px; }
/* 20i. THE RESOURCE LIST IS ONE CARD, not twenty.
Twenty separate boxes with 8px between them makes twenty objects to scan;
the eye counts boxes before it reads names. As one card with hairlines it
is a list, which is what a person looking for a form is reading. The rows
still open — the disclosure is unchanged, only its container is. */
.library--page {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 34px clamp(16px, 4vw, 40px) 56px;
overflow-y: auto;
}
.library--page .ui-page-head { margin-bottom: 24px; }
.lib-head { max-width: none; margin: 0 0 18px; padding: 0; }
.lib-list { max-width: none; margin: 0; padding: 0; }
.lib-folder { margin-bottom: 26px; }
.lib-folder-name {
font-family: var(--font-sans);
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
text-transform: none;
color: var(--ink-1);
border: 0;
padding: 0 0 12px;
gap: 12px;
}
.lib-folder-name .lib-count {
font-family: var(--font-mono);
font-size: 11px;
padding: 2px 8px;
border-radius: 6px;
background: oklch(0.94 0.01 85);
color: oklch(0.45 0.02 255);
}
.lib-cards {
gap: 0;
background: var(--card-bg);
border: 1px solid oklch(0.91 0.012 85);
border-radius: 16px;
overflow: hidden;
}
.lib-item {
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.lib-item + .lib-item { border-top: 1px solid oklch(0.94 0.01 85); }
.lib-item-head { padding: 14px 22px; gap: 12px; }
.lib-item-head:hover { background: oklch(0.975 0.008 85); }
.lib-item-name { font-size: 14.5px; }
.lib-item-body { padding: 0 22px 18px; }
.lib-item.open { background: oklch(0.978 0.008 85); }
/* The upload row is a control strip above the list, on the same paper. */
.lib-upload {
align-items: center;
gap: 12px;
flex-wrap: wrap;
padding: 14px 18px;
margin-bottom: 12px;
background: var(--card-bg);
border: 1px solid oklch(0.91 0.012 85);
border-radius: 14px;
}
.lib-upload-hint { font-size: 11.5px; color: var(--muted-ink); }
/* The search field on this page is the concept's field at page width. */
.lib-head input[type="search"] {
width: 100%;
min-height: 44px;
padding: 0 16px;
font-size: 14px;
background: var(--card-bg);
border: 1px solid oklch(0.9 0.012 85);
border-radius: 12px;
}
.lib-head input[type="search"]:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px oklch(0.45 0.08 155 / 0.12);
}
.lib-filters { gap: 8px; }
.filter {
padding: 7px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 500;
background: var(--card-bg);
border: 1px solid oklch(0.9 0.012 85);
color: oklch(0.36 0.02 255);
}
.filter:hover { border-color: oklch(0.78 0.02 255); }
.filter.active {
background: var(--anchor);
border-color: var(--anchor);
color: var(--on-anchor);
}
.filter .lib-count { font-family: var(--font-mono); font-size: 11px; opacity: 0.75; }
/* 20j. The explanatory blocks, on paper. */
.ce-stub, .ce-hint {
background: var(--info-bg);
border: 1px solid oklch(0.92 0.012 85);
border-radius: 12px;
padding: 12px 16px;
font-size: 13.5px;
line-height: 1.55;
color: var(--info-fg);
}
.field-note, .lib-note-inline { font-size: 12.5px; color: var(--muted-ink); }
/* 20k. THE LEGACY PANEL BECOMES A CARD.
Admin, the invite page, the reset-link page and the calendar page were
written before the component layer and use `.panel`, `.grid` and bare
`h3`/`h4`. Rather than rewrite four templates' internals, the old names get
the new geometry: a panel IS a card, a grid IS a table, and a panel's h3 is
a card title. The markup stays; only what it looks like moves. */
.panel {
background: var(--card-bg);
border: 1px solid oklch(0.91 0.012 85);
border-radius: 16px;
padding: 18px 22px 22px;
margin-bottom: 20px;
box-shadow: none;
}
.panel > h3 {
font-family: var(--font-sans);
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--ink-1);
margin: 0 0 14px;
}
.panel > h4 {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted-ink);
margin: 22px 0 10px;
}
.panel .muted, .muted { color: var(--muted-ink); }
.panel .mono, .mono { font-family: var(--font-mono); font-size: 12px; }
.field-hint { font-size: 12.5px; color: var(--muted-ink); margin: 6px 0 0; }
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th {
text-align: left;
padding: 10px 0;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted-ink);
border-bottom: 1px solid oklch(0.91 0.012 85);
}
table.grid td {
padding: 12px 0;
border-bottom: 1px solid oklch(0.94 0.01 85);
color: oklch(0.36 0.02 255);
}
table.grid tbody tr:last-child td { border-bottom: 0; }
/* The rows of controls under each section. */
.inline-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}
.inline-row input[type="text"], .inline-row input[type="email"] { flex: 1; min-width: 180px; }
.inline-check {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
color: var(--muted-ink);
white-space: nowrap;
}
.plain-list { list-style: none; margin: 0; padding: 0; display: flex;
flex-direction: column; gap: 8px; font-size: 14px; }
.plain-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* A pill on this page is a fact about a row, not a status. */
.pill {
font-family: var(--font-mono);
font-size: 11px;
padding: 2px 8px;
border-radius: 6px;
background: oklch(0.94 0.01 85);
color: oklch(0.45 0.02 255);
}
.pill--warn { background: oklch(0.93 0.04 78); color: oklch(0.42 0.07 62); }
.copy-field {
font-family: var(--font-mono);
font-size: 12.5px;
margin-top: 12px;
}
.panel--ok { border-color: oklch(0.85 0.06 155); background: oklch(0.97 0.02 155); }
.auth-err {
background: oklch(0.96 0.03 30);
border: 1px solid oklch(0.88 0.06 30);
border-radius: 12px;
padding: 12px 16px;
font-size: 13.5px;
color: oklch(0.42 0.13 30);
margin-bottom: 18px;
}
/* Native controls take the accent, so a checked box is the design's green
rather than the operating system's blue. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
/* The select's chevron, in the muted ink rather than the first palette's
slate — it is redrawn here because it is baked into a data URI. */
.ui-page select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23716f76' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 38px;
}
/* An unread notification used to carry a 3px bar on the row's left edge,
which hung outside the card's rounded corner and squared it off. A dot
before the title says the same thing inside the row. */
.note-unread { border-left: 0; }
.note-unread td:first-child { position: relative; padding-left: 38px; }
.note-unread td:first-child::before {
content: "";
position: absolute;
left: 22px;
top: 21px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
}
/* ── 21. Phone, after §20 ─────────────────────────────────────────────────
§20 re-declares `.ui-table td` at the end of the file, which beats §15's
media query — a later rule at equal specificity wins regardless of the
query around the earlier one. On a phone that put a hairline under every
FIELD of a stacked row, so one person's four facts looked like four
people. The row divider is the only line that belongs there, and it is a
full-strength one because it separates records rather than fields. */
@media (max-width: 720px) {
.ui-table td { border-bottom: 0; padding: 0 0 8px; }
.ui-table tbody tr {
padding: 16px 18px;
border-bottom: 1px solid oklch(0.91 0.012 85);
}
.ui-table th, .ui-table td { font-size: 13.5px; }
/* The head stacks: a title, then its actions, both left-aligned. */
.ui-page-head { grid-template-columns: minmax(0, 1fr); }
.ui-page-head > .ui-btn,
.ui-page-head__actions {
grid-column: 1;
grid-row: auto;
justify-self: start;
margin-top: 14px;
}
.lib-item-head { padding: 14px 16px; }
.lib-item-body { padding: 0 16px 16px; }
.ui-table td, .ui-table th { padding-inline: 0; }
.note-unread td:first-child { padding-left: 14px; }
.note-unread td:first-child::before { left: 0; top: 8px; }
}
/* ── 22. Chat ─────────────────────────────────────────────────────────────
22a. YOUR OWN MESSAGE WAS INVISIBLE. app.css painted the user bubble with a
navy GRADIENT and white text; §1 turned every gradient in the product off
with `background-image: none` — which left the shorthand's colour at
transparent, so white text sat on near-white paper and the thing you had
just typed vanished. It is the ink pill now: the same dark object as the
active nav row and the primary button, which is the one place this design
spends solid ink. */
.msg.user .bubble {
background: var(--anchor);
color: var(--on-anchor);
box-shadow: none;
border: 0;
}
.msg.user .bubble a { color: oklch(0.86 0.09 155); }
.msg.user .bubble code {
background: oklch(1 0 0 / 0.14);
border-color: oklch(1 0 0 / 0.22);
color: var(--on-anchor);
}
.msg.assistant .bubble {
background: var(--card-bg);
border: 1px solid oklch(0.91 0.012 85);
box-shadow: none;
color: var(--ink-1);
}
.bubble a { color: var(--accent); }
.bubble.err {
background: oklch(0.96 0.03 30);
border: 1px solid oklch(0.88 0.06 30);
color: oklch(0.42 0.13 30);
}
/* 22b. THE RAIL PUTS CHAT'S OWN THINGS FIRST — on the chat page.
Recent chats sat under eleven outbound links and a product rail, so
reaching your own history meant scrolling past three groups that have
nothing to do with the conversation you are in. Order, not deletion: the
links still work, they just stop being the first thing in the way. */
body.is-chat .sidebar-mid { display: flex; flex-direction: column; }
body.is-chat .history-section { order: 1; }
body.is-chat .kb-section { order: 2; }
body.is-chat .links-section { order: 3; }
/* On every other page the picker and the history do not render, so the links
are the only section and the order is moot. */
.kb-section, .history-section { min-width: 0; }
.hist-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.new-chat-mini {
width: 26px;
height: 26px;
flex: none;
display: grid;
place-items: center;
border-radius: 8px;
border: 1px solid oklch(0.9 0.012 85);
background: var(--card-bg);
color: var(--ink-2);
font-size: 15px;
line-height: 1;
cursor: pointer;
}
.new-chat-mini:hover { border-color: var(--accent); color: var(--accent); }
.conv-list { display: flex; flex-direction: column; gap: 2px; }
.conv-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 9px;
font-size: 13.5px;
color: var(--ink-3);
cursor: pointer;
}
.conv-item:hover { background: oklch(0.945 0.01 85); color: var(--ink-1); }
.conv-item.active { background: oklch(0.93 0.045 155); color: oklch(0.32 0.06 155); }
.conv-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-del {
border: 0;
background: none;
color: var(--ink-4);
font-size: 15px;
line-height: 1;
cursor: pointer;
opacity: 0;
}
.conv-item:hover .conv-del { opacity: 1; }
.conv-del:hover { color: oklch(0.5 0.15 30); }
.conv-empty { font-size: 12.5px; color: var(--muted-ink); margin: 0; padding: 0 12px; }
/* ── 23. The band between a phone and a desk ──────────────────────────────
The concept is a 1440px picture and the phone layer was built to §15, so
everything from 901px to about 1280 — a laptop at half screen, a small
MacBook, an iPad in landscape — fell between them. The rail still took its
full 264px, the greeting was still set at 46px in a column half that wide,
and the head's action column pushed the title into two words a line.
Nothing here is a new layout. It is the desktop one, given room. */
@media (min-width: 901px) and (max-width: 1279px) {
/* The rail gives back 32px. Every label still fits on one line at 232px —
"Continuing education" is the longest and it is 158px. */
.sidebar { width: 232px; padding: 22px 14px 16px; }
.rail-brand__logo { height: 34px; }
.ui-page, .library--page, .ui-page--foot, .ui-page--bar {
padding-inline: clamp(20px, 3vw, 32px);
}
/* A 46px display line needs about 520px to hold a name on the same line as
the greeting. Below that it breaks mid-phrase, which is worse than a
smaller line. */
.ui-page-head h1, .ui-greeting { font-size: clamp(30px, 3.4vw, 46px); }
/* Under 1100 the actions stop competing with the title for width and take
their own line, still left-aligned with it. */
@media (max-width: 1099px) {
.ui-page-head { grid-template-columns: minmax(0, 1fr); }
.ui-page-head > .ui-btn,
.ui-page-head__actions {
grid-column: 1;
grid-row: auto;
justify-self: start;
margin-top: 16px;
}
}
/* Cards and rows lose the widest padding first — 22px of gutter either side
of a 600px card is a quarter of it. */
.ui-card, .ui-card--flush { padding: 16px 18px 18px; }
.ui-card:has(.card-rows) { padding: 16px 0 0; }
.ui-card:has(.card-rows) .ui-card__band { margin: 0 18px 12px; }
.card-row, .ui-table th, .ui-table td { padding-inline: 18px; }
.lib-item-head, .lib-item-body { padding-inline: 18px; }
/* Three stat tiles at 190px minimum wrap to two rows at this width and
leave one orphan; 150px keeps a set of three on one line. */
.ui-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* THE HEADER RUNS OUT OF ROOM ON CHAT, which is the only page that adds two
status chips to it. At 940 they landed on top of the search field. The
field gives up width first, because it is the one thing here that still
works at half its size; then the document count goes, because "Knowledge
base ready" already says the thing that matters and the count is on the
Resources page. */
/* CHAT ONLY. The cap was unscoped and every other page paid for chat's two
status chips: at 1100 the field was pinched to 215px with a hand's width
of empty header beside it, because the product name had already stood
down to make room that nothing then used. */
body.is-chat .topsearch__form { max-width: 260px; }
.main-col > header { gap: 14px; }
body.is-chat .brand-section { display: none; }
}
@media (min-width: 901px) and (max-width: 1099px) {
body.is-chat .status { display: none; }
body.is-chat .topsearch__form { max-width: 200px; }
}
/* §14 caps prose at 72ch through `.ui-page p`, which also caught the
site-admin banner — the same silent loss the page footer had to be excluded
from. The box takes the page's full width, like the cards below it; the
sentence keeps the measure. */
.ui-page .admin-bar { max-width: none; }
.admin-bar__text { max-width: 78ch; }
/* ── 24. Two things §20 and §14 got wrong on the CE page ──────────────────
24a. TWO BARE BUTTONS LANDED IN THE SAME GRID CELL. §20a treats a `.ui-btn`
that is a direct child of the head as an action, so it does not fall to
column one as a full-width bar. With ONE button that is right; with two —
"Approved-course list" and "Licensing queue" on the CE page — both were
assigned the same column and row and printed on top of each other, so the
one underneath was unreadable. The templates now wrap them in
`__actions`, which is the pattern everywhere else. The rule below stays as
a fallback for a single stray button and is deliberately not clever: two
bare buttons are a markup mistake, and this makes them look like one
rather than silently overlapping. */
.ui-page-head > .ui-btn ~ .ui-btn { grid-row: auto; margin-top: 8px; }
/* 24b. THE NOTICE BOX STOPPED TWO THIRDS OF THE WAY ACROSS, for the same
reason the site-admin banner did: §14 caps prose at 72ch through
`.ui-page p`, and `.ce-stub` is both a `` and named in that rule, so the
limit applied to the BOX rather than the sentence in it. Third time this
selector has caught something that is not a paragraph. The box spans, the
sentence keeps the measure. */
.ui-page .ce-stub { max-width: none; }
.ce-stub__text { display: block; max-width: 78ch; }
/* ── 25. The product lockup ───────────────────────────────────────────────
The mark and the name of the software, in the top-left corner of the
header. It is deliberately QUIET: 22px of mark and a 13.5px name, against a
38px logo in the rail and a 46px greeting below. A product name is a fact
you check once and then stop reading, and the loudest thing on a page
should be the thing you came for. "Adealia" carries the weight; "Brokerage
Services" is what it is, at the same size in muted ink. */
.product {
display: flex;
align-items: center;
gap: 9px;
flex: none;
padding: 4px 6px;
margin-left: -6px;
border-radius: 9px;
text-decoration: none;
color: var(--ink-1);
min-width: 0;
}
.product:hover { background: oklch(0.955 0.008 85); color: var(--ink-1); }
.product__mark { height: 22px; width: auto; display: block; flex: none; }
.product__name {
font-size: 13.5px;
font-weight: 400;
line-height: 1.2;
color: var(--muted-ink);
white-space: nowrap;
}
.product__name strong { font-weight: 600; color: var(--ink-1); }
/* A hairline between the product and the search field. The two are different
kinds of thing — one is who made this, one is what you are doing — and 20px
of air alone did not say so. */
.product + .topsearch {
padding-left: 18px;
border-left: 1px solid oklch(0.91 0.012 85);
}
/* Space is the first thing this gives up. Between 901 and 1200 the words go
and the mark stays, which still says whose software this is; on a phone the
rail toggle owns that corner, so the whole lockup goes. */
@media (max-width: 1200px) {
.product__name { display: none; }
.product + .topsearch { padding-left: 14px; }
}
@media (max-width: 900px) {
.product { display: none; }
.product + .topsearch { padding-left: 0; border-left: 0; }
}
/* ---- 21. Text fields on a phone ---- */
/* iOS zooms the whole page when a focused field measures under 16px, and the
page does not zoom back. On a broker's telephone that fires on sign-in, on
every field of the CE form, and on every field of the profile.
THIS DEFECT HAS BEEN FIXED FIVE TIMES AND KEPT COMING BACK, and the reason
is worth reading before touching this rule:
* `app.css` carries five page-by-page 16px rules — `.prof-grid`,
`.lic-grid`, `.person-field select`, `.ev-desc-label textarea` and
`.course-search input`. Every one of them is DEAD. §20c above,
loaded later and far more specific, sets 14px and wins.
* §6 of this file sets `var(--fs-body)` with a comment saying it is 16px
so that this cannot happen. `--fs-body` is 15px.
So the fix is one rule, at the end, on the same selector list §20c uses.
Any narrower rule loses to §20c, which is how the last five were lost.
Phone only: 14px is the concept's measured desktop value and is correct
there, where no browser zooms on focus. */
/* The `:root ` prefix is deliberate and is the point. Chasing this with an
ordinary selector is what produced five dead rules: whatever you write,
§20c above is more specific and comes later. `:root` costs one class of
weight and wins without naming a page.
TWO selector lists, because there are two weights to beat:
* §20c is (0,1,1) on `.ui-page select`, so `:root .ui-page …` at (0,2,1)
clears it;
* §4 is (0,2,2) on `.ui-page .prof-grid > label > select` — the profile,
the licence rows AND the CE form, which all use `.prof-grid`. Only the
second list below clears that one, and it was measured in a browser
rather than counted in my head, because the first attempt tied and
lost. */
@media (max-width: 900px) {
:root .ui-input,
:root .ui-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
:root .ui-page select,
:root .ui-page textarea,
:root .auth-form input,
:root .topsearch__input,
:root .ui-page .prof-grid > label > input,
:root .ui-page .prof-grid > label > select,
:root .ui-page .lic-grid > label > input,
:root .ui-page .lic-grid > label > select {
font-size: 16px;
}
}
/* ---- 22. The guide ---- */
/* One long page of prose in a product that otherwise has almost none, so the
rules here are about READING rather than about chrome. Two decisions worth
knowing before changing them:
The measure is capped at 68ch. Every other page in this app is a table or a
card grid and wants the width; a paragraph does not, and a 1400px line is
the difference between a page R1 reads and a page R1 skims.
The section cards are the same `.ui-card` as everywhere else rather than a
new shape. A guide that looks like a different product is a guide that
reads like somebody else's documentation. */
.guide-toc {
margin: 0 0 var(--space-6);
padding: var(--space-4) var(--space-5);
background: var(--surface-2);
border: 1px solid var(--line-2);
border-radius: var(--radius);
}
.guide-toc ul {
margin: 0; padding: 0; list-style: none;
display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
}
.guide-toc a {
color: var(--ink-2); text-decoration: none;
font-size: var(--fs-small); font-weight: 600;
}
.guide-toc a:hover { color: var(--accent); text-decoration: underline; }
.guide-section { margin-bottom: var(--space-5); scroll-margin-top: var(--space-8); }
.guide-section__title {
margin: 0 0 var(--space-4);
font-family: var(--font-display);
font-size: var(--fs-h2); line-height: 1.2; color: var(--ink-1);
}
.guide-body { max-width: 68ch; color: var(--ink-2); }
.guide-body > :first-child { margin-top: 0; }
.guide-body > :last-child { margin-bottom: 0; }
.guide-body p { margin: 0 0 var(--space-4); line-height: 1.65; }
.guide-body h2 {
margin: var(--space-6) 0 var(--space-3);
font-size: var(--fs-h3); line-height: 1.3; color: var(--ink-1);
}
.guide-body h3 {
margin: var(--space-5) 0 var(--space-2);
font-size: var(--fs-body-lg); color: var(--ink-1);
}
.guide-body ul, .guide-body ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.guide-body li { margin-bottom: var(--space-2); line-height: 1.6; }
.guide-body strong { color: var(--ink-1); font-weight: 650; }
.guide-body em { font-style: italic; }
.guide-body code {
font-family: var(--font-mono); font-size: 0.9em;
padding: 1px 5px; border-radius: var(--radius-sm);
background: var(--surface-2); color: var(--ink-1);
}
.guide-body a { color: var(--accent); text-decoration: underline; }
.guide-body hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }
/* A table is the one thing here that may exceed the measure — several of them
are three columns of comparison, and squeezing those to 68ch is what makes
a comparison unreadable. It still scrolls inside its own box. */
.guide-body .ui-table-wrap { max-width: none; margin: 0 0 var(--space-4); }
/* ---- 22. The approved-list controls on the CE form ---- */
/* The hint used to be a sentence. Each course in it is now a button that
fills the form, so it has to LOOK pressable without turning the hint into a
toolbar — the sentence is still the point, and the button is the offer. */
:root .ce-hint-use {
display: inline-block;
margin: 6px 0 0;
padding: 4px 10px;
font: inherit;
font-size: 13.5px;
font-weight: 600;
text-align: left;
color: var(--ink-1);
background: var(--surface-3);
border: 1px solid var(--line-input);
border-radius: var(--radius-sm);
cursor: pointer;
}
:root .ce-hint-use:hover { border-color: var(--action-blue); }
:root .ce-hint-use:focus-visible {
outline: none;
border-color: var(--action-blue);
box-shadow: var(--shadow-focus);
}
:root .ce-hint-options { margin: 6px 0 0; padding: 0; list-style: none; }
:root .ce-hint-options li { margin: 0 0 4px; }
:root .ce-hint-options .ce-hint-use { width: 100%; }
/* Provenance on a submission. Quiet on purpose: a picked course is not
suspicious, it is a fact the reviewer needs, and styling it as a warning
would tell Licensing to distrust the most convenient path. */
:root .ce-picked {
margin: 4px 0 0;
font-size: 12.5px;
color: var(--muted-ink);
}
/* ADE-187: this one has been round the loop. A reviewer's own send-back
coming back is the one row on a queue of forty they already have context
for, and the page head counts them. Marked rather than reordered — the
argument is in `ce_repo.review_queue`. */
:root .ce-came-back {
margin: 4px 0 0;
font-size: 12.5px;
font-weight: 500;
color: oklch(0.45 0.10 55);
}
/* ── 26. The certificate on a CE card ─────────────────────────────────────
Two independent facts sit on a review card and must not blur together: what
the state's approved list says, and what the broker's own certificate says.
The second gets its own block, tinted only when it disagrees — a certificate
that confirms everything should be quiet, because a reviewer who sees a
coloured box on every row stops reading them. */
.ce-evidence {
display: flex;
flex-direction: column;
gap: 6px;
margin: 12px 0 0;
padding: 12px 14px;
border-radius: 12px;
background: oklch(0.975 0.008 85);
border: 1px solid oklch(0.93 0.012 85);
font-size: 13.5px;
}
.ce-evidence--query {
background: oklch(0.965 0.025 80);
border-color: oklch(0.9 0.04 78);
}
.ce-evidence--none { color: var(--muted-ink); background: none; border-style: dashed; }
.ce-evidence__verdict { margin: 0; font-weight: 600; color: var(--ink-1); }
.ce-evidence--query .ce-evidence__verdict { color: oklch(0.4 0.07 62); }
.ce-evidence__file {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin: 0;
font-size: 13px;
}
.ce-evidence__file a { color: var(--accent); font-weight: 600; text-decoration: none; }
.ce-evidence__file a:hover { text-decoration: underline; }
.ce-evidence__name {
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--muted-ink);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* The broker's own list gets the same pair of links, quieter — they are
looking at their own file, not judging somebody else's. */
.ce-card-row .ce-evidence { margin-top: 8px; padding: 8px 12px; }
/* ── 27. Where a broker stands ────────────────────────────────────────────
One block per licence. The bar is the TOTAL only, and every named minimum
gets its own row underneath — because a broker at 36 of 36 hours can still
be short of the annual Core, and a single bar cannot say that. A page that
showed only the bar would tell them they were finished. */
.ce-standing + .ce-standing {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid oklch(0.94 0.01 85);
}
.ce-standing__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 4px;
}
.ce-standing__summary { font-size: 14px; color: var(--ink-1); margin: 0 0 10px; }
.ce-bar {
height: 8px;
border-radius: 999px;
background: oklch(0.93 0.012 85);
overflow: hidden;
margin-bottom: 12px;
}
.ce-bar__fill {
display: block;
height: 100%;
border-radius: 999px;
background: var(--accent);
}
.ce-parts { list-style: none; margin: 0; padding: 0; display: flex;
flex-direction: column; gap: 2px; }
/* ADE-185: THE ROW THAT CARRIES THE MOST INFORMATION IN THE PRODUCT.
"NMREC Core / every year / 4.0 hours each year · outstanding for years
1, 2, 3" is a name, a per-year quantity and a list of years, and at 390px
it was two children of one un-wrapping `space-between` row.
WHAT ACTUALLY HAPPENED, measured rather than guessed. The figure was
`white-space: nowrap`, so it could not shrink and took 312 of the card's
351px; the LABEL was crushed to 39px and its own text then overflowed its
box — `scrollWidth` 154 against a `clientWidth` of 39, four lines tall,
"NMREC Core every year" broken mid-phrase and cut off. Nothing hung
outside the card, which is why "the page does not scroll sideways" was
green throughout. That is what a tester read as broken.
Nothing is dropped. `flex-wrap` lets the figure take its own line the
moment the pair stops fitting, at any width and in any card, rather than
at a breakpoint somebody guessed — and `row-gap` keeps that second line
attached to its label instead of floating between rows. Measured after:
label 21px tall and not clipped, figure on its own line, 0px of sideways
scroll. */
.ce-part {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
column-gap: 14px;
row-gap: 2px;
padding: 7px 0;
font-size: 13.5px;
border-bottom: 1px solid oklch(0.96 0.008 85);
}
.ce-part:last-child { border-bottom: 0; }
.ce-part__label { font-weight: 500; color: var(--ink-1); min-width: 0; }
/* "every year" is the single most important word on this block. It is the
difference between 12 Core hours in one year and 4 in each of three. */
.ce-part__period {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: oklch(0.5 0.07 65);
margin-left: 8px;
}
/* NOT `nowrap`. A figure that may not wrap cannot shrink, so in a flex row
it takes the width it wants and the LABEL pays for it — which is how a
four-word part name ended up 50px wide and four lines tall on a phone
while the figure itself ran 50px out past the card's right edge (401
against an edge at 351 at 390px; 431 on the two-licence broker's worst
row). The label was CRUSHED, not clipped: `scrollWidth == clientWidth`
throughout, so nothing overflowed its own box. The escaping figure is the
part a check can see, and the first version of this comment credited the
wrong one.
NO `text-align` EITHER, and that is worth a sentence because it is the
obvious thing to reach for. This box is `flex: 0 1 auto`, so it is exactly
as wide as its text and aligning inside it moves nothing. What puts the
figure hard right on a wide screen is the row's `space-between`, and what
puts it hard LEFT once it has wrapped is the same rule — `space-between`
places the first item on a flex line at the start, and a wrapped figure is
alone on its line. One rule, both states. */
.ce-part__figure { color: var(--muted-ink); min-width: 0; }
.ce-part--met .ce-part__figure { color: oklch(0.42 0.08 155); }
.ce-part--short .ce-part__figure { color: oklch(0.45 0.10 55); font-weight: 500; }
.ce-part--not_counted { opacity: 0.7; }
/* ADE-189: WHAT THE TALLIES ABOVE COUNT. It sits between the tallies and the
search box and has to be clearly attached to the first — hence the tight
top margin and the roomy bottom one — and it is measured rather than
guessed: without the bottom margin it printed a line clear of the search
field's own label. Held to a readable measure, because it is the only
paragraph of prose on a page of numbers. */
.ce-what-we-count { margin: 2px 0 20px; max-width: 74ch; }
/* ADE-190: WHY THIS TOTAL IS THIS NUMBER. Quieter than the summary above it
and louder than the caveat below: it is an explanation of the figure the
broker just read, not a warning about it. */
.ce-standing__because {
margin: -4px 0 10px;
font-size: 12.5px;
line-height: 1.5;
color: var(--ink-3);
}
/* ADE-171: WHAT YOU OWE, IN THE PAGE HEAD.
One item per licence, wrapping to its own line rather than being clipped —
this sits beside a title on a desktop and above the fold on a phone, and a
broker with two licences must read both. */
.ce-owed {
display: flex;
flex-wrap: wrap;
column-gap: 18px;
row-gap: 4px;
}
.ce-owed__item { display: inline-flex; flex-wrap: wrap; gap: 6px;
align-items: baseline; }
/* THE SAME TRAP `.ui-file-staged` RECORDS ABOVE, met again and found by
mutating this line rather than by reading it: an author `display` beats the
browser's own `[hidden] { display: none }`, so putting `hidden` on this
paragraph changed NOTHING on the rendered page — measured, 0 red across the
whole suite and 0 red in the browser, because the figure was still there to
read. Nothing sets `hidden` on it today; the template branches on
`standings`. The rule is here so that stays a choice. */
.ce-owed[hidden], .ce-owed__item[hidden] { display: none; }
.ce-owed__figure { color: var(--ink-1); font-weight: 600; }
.ce-owed__where { color: var(--ink-3); }
/* The disclaimer. Quiet, but never absent while the numbers are unconfirmed —
we may show arithmetic and may not imply somebody is compliant. */
.ce-standing__caveat {
margin: 12px 0 0;
padding: 10px 12px;
border-radius: 10px;
background: oklch(0.965 0.025 80);
border: 1px solid oklch(0.9 0.04 78);
font-size: 12.5px;
line-height: 1.5;
color: oklch(0.4 0.05 62);
}
/* ── 21. The CE compliance tallies ────────────────────────────────────────
Three numbers that deliberately do not add up to the row count. Short, met,
and — separately — the licences whose state rules we have never recorded.
The third is muted rather than coloured for the same reason its badge is:
an unmeasured licence is not a failing one, and giving it a warning colour
would put Licensing to work on a data gap of ours as though it were a
broker's problem. */
.ce-tallies {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.ce-tally {
margin: 0;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
background: var(--muted-bg);
color: var(--muted-fg);
font-size: var(--fs-small);
}
.ce-tally strong {
display: block;
font-size: var(--fs-h2);
font-weight: 700;
line-height: 1.1;
}
.ce-tally--short { background: var(--warn-bg); color: var(--warn-fg); }
.ce-tally--met { background: var(--ok-bg); color: var(--ok-fg); }
/* THE TALLIES ARE ALSO THE FILTER (ADE-133). They were already the four
numbers a reader wants to act on, so making them the control is one fewer
thing on the page than a separate row of chips would have been.
They keep their own colours when selected and gain a ring instead. Turning
the active one a single accent colour would have cost the reader the thing
the colour was carrying — that the short number is the warning one — at
exactly the moment they are looking at it. */
a.ce-tally { text-decoration: none; }
a.ce-tally:hover { filter: brightness(0.97); }
a.ce-tally.is-active {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* The console's search. A GET form, so its result is a URL. */
.ce-console-search { margin-bottom: var(--space-5); }
.ce-console-search__row {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
align-items: center;
margin-top: var(--space-2);
}
/* LAYOUT ONLY. `.ui-page input` in §6 already gives this its border, its
radius, its colours and — in the phone media query at §21 — the 16px that
stops iOS zooming the page on focus. Restating any of that here is how a
component drifts away from the design system it is sitting in. */
.ce-console-search input[type="search"] {
flex: 1 1 260px;
width: auto;
min-width: 0;
}
/* Fifty rows a page, and the control that moves between them. */
.ce-pager {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
margin-top: var(--space-4);
}
.ce-pager__where { font-size: var(--fs-small); color: var(--muted-ink); }
/* ── 22. What changed on a CE submission ──────────────────────────────────
A short list on a card that is already dense, so it is set quieter than the
fields around it and indented off the card's left edge — it is context for
the decision, not part of it. */
.ce-edits {
margin: var(--space-3) 0;
padding-left: var(--space-4);
border-left: 2px solid var(--line);
}
.ce-edits .ui-eyebrow { margin-bottom: var(--space-2); }
/* ── 23. A course's whole history ─────────────────────────────────────────
ADE-134. The queue card's `.ce-edits` above is a footnote beside a decision
somebody is making right now; this is the page where the record IS the
subject, so it is set at reading size and gets a rail down the left with a
dot per event — the shape a person already reads as "in order, top to
bottom".
THE DOT CARRIES THE MEANING, not a colour wash. Every event on this page is
a fact rather than a state, and washing a rejection in alert red would make
the record look like an alarm every time somebody opened it. The three
semantic dots are spent on the three things a reader scans for: a decision
that ended it, a decision that sent it back, and a gap. */
.ce-hist {
list-style: none;
margin: 0;
padding: 0 0 0 var(--space-5);
border-left: 2px solid var(--line);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.ce-hist__item { position: relative; }
.ce-hist__item::before {
content: "";
position: absolute;
left: calc(-1 * var(--space-5) - 6px);
top: 6px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--line-2);
box-shadow: 0 0 0 3px var(--surface-1);
}
.ce-hist__item--decision::before { background: var(--ok-dot); }
.ce-hist__item--unrecorded::before { background: var(--warn-dot); }
.ce-hist__what { margin: 0; font-size: 14px; color: var(--ink-1); }
.ce-hist__who { font-weight: 600; }
/* The words a person wrote, set apart from the sentence the platform wrote.
On a send-back this is the entire instruction, and it is the one thing on
the page that no template composed. */
.ce-hist__note {
margin: var(--space-2) 0 0;
padding-left: var(--space-3);
border-left: 2px solid var(--line-2);
font-size: 14px;
color: var(--ink-2);
}
/* A hole in the record, and it says so rather than being left blank. */
.ce-hist__gap-note {
margin: var(--space-2) 0 0;
font-size: var(--fs-small);
color: var(--muted-ink);
max-width: 68ch;
}
.ce-hist__item--unrecorded .ce-hist__what { color: var(--muted-ink); }
.ce-hist__when { margin: var(--space-1) 0 0; }
/* The way to the page above, from the queue card and the broker's own list.
A link and not a button: it opens a record, it changes nothing. */
.ce-hist-link { margin: var(--space-2) 0 0; font-size: var(--fs-small); }
.ce-hist-link a { color: var(--accent); font-weight: 600; text-decoration: none; }
.ce-hist-link a:hover { text-decoration: underline; }
/* ── ADE-161: signing a state's CE requirements off ─────────────────
Reuses `.ce-part` and `.ce-part__label` for the named minimums, because a
part is the same object on both screens and a second look for it would let
the sign-off page and the broker's page disagree about what a part IS. What
is new here is the list of states, the source line, the number fields, and
the both-numbers provenance line. */
.req-list { list-style: none; margin: 0; padding: 0; }
.req-item {
padding: 14px 0;
border-bottom: 1px solid oklch(0.94 0.008 85);
}
.req-item:last-child { border-bottom: 0; }
.req-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 12px;
row-gap: 4px;
}
.req-name { font-weight: 600; font-size: 15px; color: var(--ink-1); }
/* THE THREE ANSWERS, AND THE MUTED ONE IS DELIBERATE. A state we hold no
rules for is a fact about US, exactly like the console's "not measured"
column (report 36 §3) — colouring it like a problem would make it look like
a fact about the brokerage. A state nobody has confirmed IS a fact about
the brokerage and something they can act on today, so it takes the warning
colour the console's short badge takes. */
.req-state {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid transparent;
}
.req-state--met {
color: oklch(0.42 0.08 155);
background: oklch(0.96 0.03 155);
border-color: oklch(0.9 0.05 155);
}
.req-state--short {
color: oklch(0.45 0.10 55);
background: oklch(0.965 0.035 75);
border-color: oklch(0.9 0.05 72);
}
.req-state--none {
color: var(--muted-ink);
background: oklch(0.97 0.004 85);
border-color: oklch(0.92 0.006 85);
}
.req-note { margin: 8px 0 0; font-size: 13px; line-height: 1.55;
color: var(--ink-2); max-width: 74ch; }
.req-count { margin: 4px 0 10px; font-size: 12.5px; color: var(--muted-ink); }
.req-subhead { margin: 18px 0 6px; font-size: 13px; font-weight: 600;
color: var(--ink-1); }
/* WHERE WE READ IT AND WHEN — half of what is being agreed with, so it sits
above the numbers rather than under them as a footnote. */
.req-source {
margin: 0 0 14px;
font-size: 12.5px;
line-height: 1.55;
color: var(--ink-2);
max-width: 74ch;
}
.req-fields {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.req-field { display: block; flex: 1 1 220px; min-width: 0; }
.req-field__label {
display: block;
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--muted-ink);
margin-bottom: 4px;
}
.req-parts { list-style: none; margin: 0; padding: 0; }
.req-part {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
column-gap: 14px;
row-gap: 6px;
padding: 10px 0;
font-size: 13.5px;
border-bottom: 1px solid oklch(0.96 0.008 85);
}
.req-part:last-child { border-bottom: 0; }
.req-part__label { font-weight: 500; color: var(--ink-1); min-width: 0; }
.req-part__period {
display: block;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: oklch(0.5 0.07 65);
margin-top: 2px;
}
/* NOT `nowrap` and no fixed width, for the reason `.ce-part__figure` records
at length: a box that may not shrink takes the width it wants and the label
pays for it. `flex: 0 1 auto` with a floor is what keeps a number field
usable on a phone without crushing a four-word part name. */
.req-part__hours { flex: 0 1 130px; min-width: 96px; }
/* BOTH NUMBERS, SIDE BY SIDE. Quieter than the field it belongs to — it is a
note about where the number came from, not a warning — and it takes the
full row so the two figures read as one sentence rather than as a column. */
.req-edit {
flex-basis: 100%;
margin: 6px 0 0;
font-size: 12px;
line-height: 1.5;
color: oklch(0.45 0.05 62);
}
.req-edit strong { font-family: var(--font-mono); font-weight: 600; }
/* ADE-162: A LICENCE WHOSE STATE NOBODY HAS SIGNED OFF. It is the console's
muted "not measured" treatment rather than the warning one, for report 36
§3's reason — an unmeasured licence is a fact about the firm's paperwork,
not about the broker reading the page. */
.ce-standing--dormant .ce-standing__summary { color: var(--ink-2); }
.ce-standing__dormant-link { margin: 8px 0 0; font-size: 12.5px; }