/* ============================================================================
Cortex DS v4 — component layer
THIS FILE IS THE POINT. The v3 design system shipped tokens and no
components: shared/ds/styles.css is a 20-line @import manifest with zero
rules, which is why spacing/weight/motion had ZERO consumers while colour
had ~700 (a lint required colour and nothing required the rest).
Rule for this layer: a DS component NEVER carries a Tailwind utility, and a
Tailwind utility never sets a value a token owns. Tailwind stays legal for
layout one-offs OUTSIDE these components.
Everything here reads tokens.css. No raw hex, no raw px for anything a
token owns.
========================================================================= */
/* ── base ──────────────────────────────────────────────────────────────── */
.cx-root {
margin: 0; min-height: 100vh; /* a recipe puts this on : no UA margin, the ground fills the canvas */
font-family: var(--cx-font);
background: var(--cx-ground);
color: var(--cx-ink);
font-size: var(--cx-body);
line-height: var(--cx-lh-normal);
font-variant-numeric: tabular-nums; /* every figure aligns, no mono needed */
}
.cx-icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5;
fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cx-icon--sm { width: 15px; height: 15px; }
.cx-icon--lg { width: 26px; height: 26px; }
:where(.cx-root) :focus-visible { outline: none; box-shadow: var(--cx-focus-ring); }
/* ── shell ─────────────────────────────────────────────────────────────── */
.cx-app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.cx-app[data-rail="collapsed"] { grid-template-columns: 64px 1fr; }
.cx-stage { padding: var(--cx-s3) var(--cx-s4) var(--cx-s8); display: grid;
gap: var(--cx-s3); align-content: start; min-width: 0; }
/* the panel row. The third panel is CONTEXTUAL — absent until an item opens. */
.cx-stage[data-panel="open"] { grid-template-columns: minmax(0, 1fr) 372px; align-items: start; }
.cx-stage:not([data-panel="open"]) > .cx-panel--sticky { display: none; }
/* REGION SEPARATION IS STRICTLY GREATER THAN SEPARATION INSIDE ONE. This was s3 (12px)
while a panel pads at s4 (16) and its inner blocks space at 12-16 — so two whole panels
sat closer together than two blocks inside one of them, and the only thing that made a
region was the eyebrow's 46px margin. Where consecutive panels carry no eyebrow between
them there was no hierarchy of breath at all. s4 is the obvious fix and it FAILS the rule
it is meant to serve: 16 against .cx-subgroup's 16 is equal, not greater. So s5.
.cx-stage's own gap stays at s3 — that one is the column gutter to the 372px panel, and a
gutter is not a stack rhythm; they share a number today by accident, not by rule. */
.cx-stage-main { display: grid; gap: var(--cx-s5); min-width: 0; }
/* ── rail ──────────────────────────────────────────────────────────────── */
.cx-rail { display: flex; flex-direction: column; padding: var(--cx-s3) var(--cx-s3);
position: sticky; top: 0; height: 100vh; }
.cx-rail-top { display: flex; align-items: center; gap: var(--cx-s2);
padding: var(--cx-s1) var(--cx-s2) var(--cx-s3); }
.cx-rail-mark { width: 26px; height: 26px; border-radius: var(--cx-radius-sm);
background: var(--cx-accent); color: var(--cx-ink-on-accent); display: grid;
place-items: center; font-weight: var(--cx-w-bold); font-size: var(--cx-sm); flex: none; }
.cx-rail-name { font-size: var(--cx-h3); font-weight: var(--cx-w-semi); }
.cx-rail-name span { color: var(--cx-ink-3); font-weight: var(--cx-w-regular); }
.cx-rail-collapse { margin-left: auto; color: var(--cx-ink-3); background: none;
border: 0; cursor: pointer; display: flex; padding: 2px; border-radius: var(--cx-radius-sm); }
.cx-rail-search { display: flex; align-items: center; gap: var(--cx-s2);
padding: var(--cx-s2) 11px; border-radius: var(--cx-radius-md); background: var(--cx-panel);
border: 1px solid var(--cx-line); color: var(--cx-ink-3); font-size: var(--cx-body); cursor: text; }
.cx-rail-group { font-size: var(--cx-xs); font-weight: var(--cx-w-semi);
letter-spacing: var(--cx-tr-wide); text-transform: uppercase; color: var(--cx-ink-3);
padding: 0 var(--cx-s2); margin: var(--cx-s4) 0 var(--cx-s1); }
/* 20px from the rail's outer edge — s3 (the rail's own padding) + s2 — which is where
.cx-rail-top's mark and .cx-rail-group's label already start. Was 9px, putting this glyph
1px right of the label above it. Five rows that read as one column were starting on four
different left edges: 20, 21, 22 and 24. */
.cx-rail-item { display: flex; align-items: center; gap: var(--cx-s2) ;
padding: var(--cx-s2) var(--cx-s2); border-radius: var(--cx-radius-md); color: var(--cx-ink-2);
text-decoration: none; font-size: var(--cx-body); }
.cx-rail-item:hover { background: var(--cx-panel); }
.cx-rail-item[aria-current] { background: var(--cx-accent-wash);
color: var(--cx-accent-quiet); font-weight: var(--cx-w-semi); }
.cx-rail-item__count { margin-left: auto; font-size: var(--cx-sm);
font-weight: var(--cx-w-semi); color: var(--cx-accent); }
/* in-production: present, not hidden, not fake. Never opens onto a stub. */
.cx-rail-item[aria-disabled="true"] { color: var(--cx-ink-3); cursor: default; }
.cx-rail-item[aria-disabled="true"]:hover { background: none; }
.cx-rail-item[aria-disabled="true"] .cx-icon { opacity: .55; }
.cx-rail-soon { margin-left: auto; font-size: 10px; font-weight: var(--cx-w-semi);
letter-spacing: .05em; text-transform: uppercase; color: var(--cx-ink-3);
border: 1px solid var(--cx-line); padding: 1px 6px; border-radius: var(--cx-radius-sm); }
/* collapsed rail — 64px, icons only. Authored 2026-08-26: until this release the
collapsed state only narrowed the grid column and left every label painting
over the stage; the screenshot that "verified" it had never been read.
Labels are bare text nodes and stay in the markup so the accessible name
survives; they are hidden by zeroing the item's font size while icons keep
their pixel size. A consumer adds `title` on items when it collapses.
In-production items stay present and dimmed — the Soon badge is a label, and
the dimming carries the state on its own at this width. */
.cx-app[data-rail="collapsed"] .cx-rail { padding-left: var(--cx-s2); padding-right: var(--cx-s2); }
.cx-app[data-rail="collapsed"] .cx-rail-top { flex-direction: column; gap: var(--cx-s2);
padding: var(--cx-s1) 0 var(--cx-s3); }
.cx-app[data-rail="collapsed"] .cx-rail-name,
.cx-app[data-rail="collapsed"] .cx-rail-soon,
.cx-app[data-rail="collapsed"] .cx-rail-stack { display: none; }
.cx-app[data-rail="collapsed"] .cx-rail-collapse { margin-left: 0; }
.cx-app[data-rail="collapsed"] .cx-rail-collapse .cx-icon { transform: scaleX(-1); }
.cx-app[data-rail="collapsed"] .cx-rail-search { font-size: 0; gap: 0; justify-content: center;
padding: var(--cx-s2) 0; }
.cx-app[data-rail="collapsed"] .cx-rail-group { font-size: 0; height: 1px; padding: 0;
margin: var(--cx-s3) var(--cx-s2) var(--cx-s2); background: var(--cx-line-2); }
.cx-app[data-rail="collapsed"] .cx-rail-item { font-size: 0; gap: 0; justify-content: center;
padding: 10px 0; position: relative; }
.cx-app[data-rail="collapsed"] .cx-rail-item__count { position: absolute; top: 3px; right: 7px;
margin: 0; font-size: 10px; line-height: 1; }
.cx-app[data-rail="collapsed"] .cx-rail-foot { padding-top: var(--cx-s2); }
/* Connections is NOT a department — it is the other half of Inputs. */
.cx-rail-foot { margin-top: auto; padding-top: var(--cx-s3); border-top: 1px solid var(--cx-line-2); }
.cx-rail-stack { display: flex; margin-left: auto; }
.cx-rail-stack > * { width: 20px; height: 20px; border-radius: var(--cx-radius-sm);
border: 1.5px solid var(--cx-ground); margin-left: -6px; display: grid; place-items: center;
font-size: 8.5px; font-weight: var(--cx-w-bold); background: var(--cx-panel); color: var(--cx-ink-2); }
.cx-rail-stack > *:first-child { margin-left: 0; }
/* ── panel ─────────────────────────────────────────────────────────────── */
.cx-panel { background: var(--cx-panel); border: 1px solid var(--cx-line);
border-radius: var(--cx-radius-panel); min-width: 0; }
.cx-panel__hd { display: flex; align-items: center; gap: var(--cx-s2);
padding: 13px var(--cx-s4); border-bottom: 1px solid var(--cx-line-2); }
.cx-panel__hd h2 { margin: 0; font-size: var(--cx-h3); font-weight: var(--cx-w-semi);
letter-spacing: var(--cx-tr-heading); }
/* every panel carries its OWN affordance — collapse, refresh, scope, more */
.cx-panel__aff { margin-left: auto; display: flex; align-items: center; gap: var(--cx-s3);
color: var(--cx-ink-3); font-size: var(--cx-sm); }
.cx-panel__bd { padding: var(--cx-s4); }
.cx-panel__kicker { padding: var(--cx-s3) var(--cx-s4) 0; margin: 0;
font-size: var(--cx-sm); color: var(--cx-ink-3); }
.cx-panel__kicker + .cx-panel__bd { padding-top: var(--cx-s3); }
/* icon button — a panel's own affordance as a real button: show or close the
detail panel, refresh, more. 28px hit box inside a 44px row; the target rule
is met by the header's height, not by the glyph. */
.cx-iconbtn { appearance: none; border: 0; background: none; color: var(--cx-ink-3);
width: 28px; height: 28px; display: grid; place-items: center; cursor: pointer;
border-radius: var(--cx-radius-sm); transition: background var(--cx-dur-fast) var(--cx-ease), color var(--cx-dur-fast) var(--cx-ease); }
.cx-iconbtn:hover { background: var(--cx-ground); color: var(--cx-ink); }
.cx-iconbtn[aria-pressed="true"] { color: var(--cx-accent); }
/* The desktop sticky panel needs its own ceiling: it is top-pinned and never moves, so a
panel taller than the viewport had its lower third cut off with no way to reach it.
Same ceiling the 901-1240px float already carried; the 900px sheet resets both.
Owner ruling 2026-08-29. */
.cx-panel--sticky { position: sticky; top: var(--cx-s3);
max-height: calc(100vh - var(--cx-s3) * 2); overflow: auto; }
/* ── buttons ───────────────────────────────────────────────────────────── */
.cx-btn { font: inherit; font-size: var(--cx-body); font-weight: var(--cx-w-semi);
padding: 7px 15px; border-radius: var(--cx-radius-md); border: 1px solid var(--cx-line);
background: var(--cx-panel); color: var(--cx-ink); cursor: pointer;
transition: background-color var(--cx-dur) var(--cx-ease), border-color var(--cx-dur) var(--cx-ease); }
.cx-btn:hover { border-color: var(--cx-line-strong); }
.cx-btn--primary { background: var(--cx-accent); border-color: var(--cx-accent);
color: var(--cx-ink-on-accent); }
.cx-btn--primary:hover { background: var(--cx-accent-hover); border-color: var(--cx-accent-hover); }
.cx-btn--quiet { font-size: var(--cx-sm); padding: 3px 9px; border-radius: var(--cx-radius-sm);
color: var(--cx-ink-2); background: var(--cx-ground); }
.cx-btn[disabled] { opacity: .5; cursor: not-allowed; }
/* ── input ───────────────────────────────────────────────────────────────
THE PACKAGE HAS NO BORDER-BOX RESET, by design — so a control that declares both
`width: 100%` and padding must set box-sizing itself, or it overflows its container by
exactly its own padding plus border. This one did not, and shipped 24px over
(11 + 11 + 1 + 1) at every width above 900px; below 900px the touch block happened to
set it, which is why it was only ever visibly wrong on desktop. Measured 2026-08-29 in
the gallery's Inputs specimen: three fields at width 505px inside a 481px box. */
.cx-input { width: 100%; box-sizing: border-box; padding: var(--cx-s2) 11px; border: 1px solid var(--cx-line);
border-radius: var(--cx-radius-md); font: inherit; font-size: var(--cx-body);
color: var(--cx-ink); background: var(--cx-panel); }
.cx-input::placeholder { color: var(--cx-ink-3); }
.cx-input[aria-invalid="true"] { border-color: var(--cx-error); }
/* ── segmented control ─────────────────────────────────────────────────── */
.cx-seg { display: inline-flex; background: var(--cx-ground); border-radius: var(--cx-radius-md); padding: 2px; }
.cx-seg button { font: inherit; font-size: var(--cx-sm); padding: 4px 12px; border: 0;
background: none; color: var(--cx-ink-2); border-radius: var(--cx-radius-sm); cursor: pointer; }
.cx-seg button[aria-pressed="true"] { background: var(--cx-panel); color: var(--cx-ink);
font-weight: var(--cx-w-semi); }
/* ── status pill — ALWAYS mark + word, never colour alone ────────────────
ROUNDED, NOT PILLED (owner ruling 2026-09-02: "we're not using pills at all
unless absolutely necessary" — for the CTAs and the other containers). The
999px radius left this family and every other CONTAINER in the package on the
same sweep: eighteen sites moved to --cx-radius-sm, and .cx-btn to
--cx-radius-md so a button and the input beside it agree on one corner.
THE NAME STAYS. A "pill" here has never meant a shape — it means MARK PLUS
WORD, never colour alone, which is the rule the class exists to carry and the
one thing that survives greyscale. Renaming the family would cost every call
site in every consumer to rename a corner.
FOUR SITES KEPT THE 999px AND THEY ARE THE "absolutely necessary": the stage
mark (.cx-step__mark / .cx-chain__mark, a 22px ring), the companion launcher
(.cx-chat-fab, a 48px circle), today's ring on a calendar numeral, and
.cx-person__mono — where round against square is a STATED SEMANTIC, "a role is
square, a person is round", and flattening it would erase a distinction the
file makes out loud. A circle is a shape; a capsule was a decoration. */
.cx-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--cx-sm);
font-weight: var(--cx-w-medium); padding: 3px 9px; border-radius: var(--cx-radius-sm); }
.cx-pill .cx-icon { width: 13px; height: 13px; }
.cx-pill--canon { background: var(--cx-canon-wash); color: var(--cx-canon); }
.cx-pill--working { background: var(--cx-working-wash); color: var(--cx-ink-2); }
.cx-pill--ok { background: var(--cx-ok-wash); color: var(--cx-ok); }
.cx-pill--warn { background: var(--cx-warn-wash); color: var(--cx-warn); }
.cx-pill--error { background: var(--cx-error-wash); color: var(--cx-error); }
/* ── reading — machine output ────────────────────────────────────────────
THE AI-SIGNAL RULE:
panel-level (cross-item) readings live INSIDE the panel they describe;
item-level readings live in the contextual third panel with the item.
Chat is NOT here. Chat stays in the pop-out companion. */
.cx-reading { background: var(--cx-ai); border: 1px solid var(--cx-ai-line);
border-radius: var(--cx-radius-lg); padding: 13px 15px; }
.cx-reading__hd { display: flex; align-items: center; gap: 7px; font-size: var(--cx-sm);
font-weight: var(--cx-w-semi); color: var(--cx-ai-ink); margin-bottom: 6px; }
/* THE BLOCK IS OPTIONAL — a container is a claim (D5, 2026-08-29), applied to the machine's
voice. Bare drops the container so a reading blends into whatever ground it sits on. Its
identity survives because the identity was never the tint: it is the mark plus the word,
which is how every state in this package reads and the reason none of them is colour
alone. Use it wherever the surrounding panel already makes it obvious the machine is
speaking; keep the block where a reading has to separate itself from what is around it. */
.cx-reading--bare { background: none; border: 0; padding: 0; }
.cx-reading__hd .cx-icon { width: 14px; height: 14px; }
.cx-reading p { margin: 0; font-size: var(--cx-h3); line-height: var(--cx-lh-normal); }
.cx-reading__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.cx-reading__chips > * { font-size: var(--cx-sm); padding: 4px 10px;
border-radius: var(--cx-radius-sm); background: var(--cx-panel);
border: 1px solid var(--cx-ai-line); color: var(--cx-ai-ink); }
/* ── honest absence — the product's best writing gets its own component ── */
.cx-absent { border: 1px dashed var(--cx-line); border-radius: var(--cx-radius-lg);
padding: 13px 15px; }
.cx-absent h4 { margin: 0 0 5px; font-size: var(--cx-body); font-weight: var(--cx-w-semi); }
.cx-absent p { margin: 0; font-size: var(--cx-sm); line-height: var(--cx-lh-snug); color: var(--cx-ink-2); }
/* ── the reading — hero figure ─────────────────────────────────────────── */
.cx-read { display: flex; align-items: baseline; gap: var(--cx-s4); flex-wrap: wrap; }
.cx-read__value { font-family: var(--cx-font-figure); font-size: 58px; font-weight: 400; line-height: 1;
letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cx-read__value small { font-family: var(--cx-font); }
.cx-read__value small { font-size: 22px; font-weight: var(--cx-w-medium); color: var(--cx-ink-3); margin-left: 5px; }
.cx-read__delta { display: flex; align-items: baseline; gap: 7px; }
.cx-read__delta b { font-size: 22px; font-weight: var(--cx-w-semi);
color: var(--cx-accent); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cx-read__delta span { font-size: var(--cx-sm); color: var(--cx-ink-3); }
/* the tare line — the baseline every figure is measured against */
.cx-read + .cx-tare { margin-top: var(--cx-s2); }
.cx-tare { display: flex; align-items: center; gap: 9px; font-size: var(--cx-sm); color: var(--cx-ink-3); }
/* ── stat tile — when the answer is a number, not a chart ─────────────── */
.cx-tile { border: 1px solid var(--cx-line-2); border-radius: var(--cx-radius-lg); padding: 14px 16px; }
.cx-tile dt { font-size: var(--cx-sm); color: var(--cx-ink-3); }
.cx-tile dd { margin: 3px 0 0; font-family: var(--cx-font-figure); font-size: 27px; font-weight: 400; letter-spacing: 0; }
.cx-tile dd em { font-style: normal; font-size: var(--cx-h3); font-weight: var(--cx-w-semi);
color: var(--cx-accent); margin-left: var(--cx-s2); font-family: var(--cx-font); }
.cx-tile small { display: block; font-size: var(--cx-sm); color: var(--cx-ink-3); margin-top: 3px; }
/* ── data row — the product's dominant primitive. There is no table. ───── */
.cx-rows { display: grid; }
.cx-row { display: grid; grid-template-columns: 14px 1fr 92px 120px 72px; gap: var(--cx-s3);
/* derived, not hand-computed: 11px was (44 - 22) / 2 written out, which meant
[data-density="compact"] remapped --cx-row and nothing read it — a live toggle
wired to zero pixels. Comfortable still resolves to exactly 11px. */
align-items: center; padding: calc((var(--cx-row) - 22px) / 2) var(--cx-s2); margin: 0 calc(var(--cx-s2) * -1);
border-bottom: 1px solid var(--cx-line-2); border-radius: var(--cx-radius-md); cursor: pointer; }
.cx-row:last-child { border-bottom: 0; }
.cx-row:hover { background: var(--cx-ground); }
/* A WASHED SURFACE LIFTS ITS QUIET INK ONE STEP. --cx-ink-3 is validated against the two
surfaces it was designed for — 5.06:1 on panel, 4.54:1 on ground — and the package then
uses it on the tinted WASHES, where it lands at 4.33 on info-wash and 4.48 on
accent-wash, both under the 4.5 floor. Check 8 could not see it because there is no
ink-3-on-a-wash pair in its list; audit check 9 measures it as painted and does.
These are the washed surfaces that CONTAIN sub-text. The pills and state chips are not
here on purpose: each carries one word in its own semantic ink, already measured. The
token is re-pointed on the container so every descendant reading var(--cx-ink-3) steps
up without a descendant selector per component. Measured 2026-08-29. */
:is(.cx-rail-item[aria-current],
.cx-row[aria-selected="true"],
.cx-row--verb[aria-current="true"],
.cx-search-hit[aria-selected="true"],
.cx-scope__opt[data-state="current"],
.cx-scope__chip[data-state="syncing"],
.cx-scope__chip[data-state="restricted"],
.cx-cal__strip .cx-cal__day[data-today],
.cx-match[data-state="proposed"],
.cx-geo__zone[aria-selected="true"],
.cx-queue__to--proposed,
.cx-docrow__read,
.cx-timeline__needs > div[data-state="now"],
.cx-mini > a) { --cx-ink-3: var(--cx-ink-2); }
.cx-row[aria-selected="true"],
.cx-row--verb[aria-current="true"] { background: var(--cx-accent-wash);
box-shadow: inset 2px 0 0 var(--cx-accent); }
/* THE SELECTED ROW SAYS SO IN A WORD (v1.3.4, owner-ruled 2026-09-02). The wash and
the inset bar are chrome: neither survives greyscale, and neither reaches a screen
reader — measured in v1.3.3, where both this row and the verb row came back
`role: generic` with an empty accessible name. So the selected row now leads its
subject with the word "Showing", in the eyebrow grammar, accent-quiet on the wash
(the pair the surface-step rule already reserves for selection). It is generated
content, and that is deliberate: the accessibility tree includes ::before text in
the name, so the row reads "Showing Ethiopia Guji" with no ARIA and no markup at
any call site — every register in the package gains the word at once.
NOT A TICK. The check glyph is spent on done, verified, go and holds up, and
selection is chrome, not data: a mark that means "true" on the row beside it
cannot also mean "this is the one the peek is showing". A word can.
NO CONTAINER, by container discipline: a box around "Showing" would claim a state,
and selection is not a state of the record.
IT SITS ON THE SUBJECT, not in the meta line and not in the dot track, because the
subject is the one part every row variant has: .cx-row__name on the base row, the
status row and the verb row; .cx-doc__title's bold on the doc row. A meta line is
optional and the dot track is 14px. The subject is nowrap-ellipsis, so a very long
name gives up seven characters to the word; that is the trade, and the peek has the
full name.
AUTHORING RULE: ONE PER LIST. The word means "this one"; two of them mean nothing. */
.cx-row[aria-selected="true"] > .cx-row__name::before,
.cx-row--verb[aria-current="true"] > .cx-row__name::before,
.cx-row[aria-selected="true"] > .cx-doc__title > b::before { content: "Showing";
display: inline-block; margin-right: 7px; vertical-align: 1px;
font-family: var(--cx-font); font-size: var(--cx-xs); font-weight: var(--cx-w-semi);
letter-spacing: var(--cx-tr-wide); text-transform: uppercase; color: var(--cx-accent-quiet); }
.cx-row > * { min-width: 0; }
.cx-row__name { font-size: var(--cx-h3); font-weight: var(--cx-w-medium);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-row__name small { display: block; font-size: var(--cx-sm); font-weight: var(--cx-w-regular);
color: var(--cx-ink-3); margin-top: 1px; }
.cx-row__qty { font-size: var(--cx-body); text-align: right; color: var(--cx-ink-2); }
.cx-row__move { font-size: var(--cx-sm); font-weight: var(--cx-w-semi); text-align: right; color: var(--cx-accent); }
.cx-row__move--flat { color: var(--cx-ink-3); font-weight: var(--cx-w-medium); }
/* the dot: an item has a reading waiting behind the click.
OPEN RULE — the dot only signals while readings are scarce. If a normal day
marks most rows it becomes texture. Cap it or let the legend count carry it. */
.cx-row__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cx-ai-ink); margin-left: 3px; }
.cx-row__dot--none { background: transparent; }
.cx-rows__legend { padding: 11px 0 0; font-size: var(--cx-sm); color: var(--cx-ink-3);
display: flex; align-items: center; gap: 7px; }
/* ── attention row — a flagged line with its one action ────────────────── */
.cx-attn__group, .cx-attn__row { list-style: none; margin: 0; padding-left: 0; }
.cx-attn__row > * { min-width: 0; } /* the flex form can shrink its subject too, not only the queue grid */
.cx-attn__group { padding-top: var(--cx-s3); }
.cx-attn__group:first-child { padding-top: 0; }
.cx-attn__hd { display: flex; align-items: baseline; font-size: var(--cx-body); font-weight: var(--cx-w-semi); }
.cx-attn__count { margin-left: auto; font-size: var(--cx-sm); font-weight: var(--cx-w-regular); color: var(--cx-ink-3); }
.cx-attn__why { font-size: var(--cx-sm); color: var(--cx-ink-3); margin: 1px 0 4px; }
.cx-attn__row { display: flex; align-items: center; gap: var(--cx-s2); padding: var(--cx-s2) 0;
border-bottom: 1px solid var(--cx-line-2); }
.cx-attn__row:last-child { border-bottom: 0; }
.cx-attn__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--cx-warn); }
.cx-attn__dot--err { background: var(--cx-error); }
.cx-attn__line { flex: 1; font-size: var(--cx-body); }
.cx-attn__act { font-size: var(--cx-sm); color: var(--cx-accent); background: none; border: 0;
cursor: pointer; padding: 0; font-weight: var(--cx-w-medium); }
.cx-attn__act:hover { text-decoration: underline; }
/* ── quiet note — an honest-absence or degraded line inside a panel ─────── */
.cx-note { font-size: var(--cx-body); color: var(--cx-ink-3); padding: var(--cx-s2) 0; }
/* ── labelled field — plain-case label over its input ───────────────────── */
.cx-field { display: block; margin-top: var(--cx-s3); font-size: var(--cx-sm); color: var(--cx-ink-2); }
.cx-field > .cx-input { margin-top: var(--cx-s1); width: 100%; }
/* ── inline checkbox control ─────────────────────────────────────────────── */
.cx-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cx-sm);
color: var(--cx-ink-3); cursor: pointer; user-select: none; margin-left: auto; }
/* The control itself, which was a bare native input until 2026-08-29 — so it painted in
the OPERATING SYSTEM's accent (blue on macOS), which is both a system default the owner
has ruled against and a hue this palette does not contain. It also measured 13x13.
Drawn from the package now: the accent fills it, --cx-ink-on-accent draws the mark, and
the mark is a real glyph rather than a tint, so the checked state survives greyscale and
forced-colors like every other state in this file. The label is the hit target and
already clears the floor; the box is sized optically against --cx-sm text. */
.cx-check input[type="checkbox"], .cx-check input[type="radio"] {
appearance: none; -webkit-appearance: none; flex: none; margin: 0;
width: 15px; height: 15px; box-sizing: border-box;
display: grid; place-content: center; cursor: pointer;
border: 1px solid var(--cx-line-strong); border-radius: 4px;
background: var(--cx-panel);
transition: background var(--cx-dur-fast) var(--cx-ease), border-color var(--cx-dur-fast) var(--cx-ease); }
.cx-check input[type="radio"] { border-radius: 50%; }
.cx-check input:checked { background: var(--cx-accent); border-color: var(--cx-accent); }
.cx-check input[type="checkbox"]:checked::after {
content: ""; width: 8px; height: 4px; margin-top: -2px;
border-left: 1.5px solid var(--cx-ink-on-accent);
border-bottom: 1.5px solid var(--cx-ink-on-accent);
transform: rotate(-45deg); }
.cx-check input[type="radio"]:checked::after {
content: ""; width: 5px; height: 5px; border-radius: 50%;
background: var(--cx-ink-on-accent); }
.cx-check input:disabled { opacity: .5; cursor: not-allowed; }
/* ── subgroup — a plain-titled group inside a panel body ────────────────── */
.cx-subgroup { margin-top: var(--cx-s4); }
.cx-subgroup:first-child { margin-top: 0; }
.cx-subgroup__bd { margin-top: var(--cx-s2); }
.cx-drop__name { font-size: var(--cx-sm); color: var(--cx-ink-3); margin-top: var(--cx-s1); }
/* ── gauge — value against its target ──────────────────────────────────── */
/* 3px on a 5px bar was the token written out as a literal, which is how a family drifts —
the same defect --cx-chart-radius was introduced to fix on .cx-progress. At 5px tall the
radius clamps itself, so the token is safe here and the family now agrees end to end. */
.cx-gauge { height: 5px; border-radius: 0 var(--cx-chart-tip) var(--cx-chart-tip) 0; background: var(--cx-line-2); position: relative; overflow: hidden; }
.cx-gauge > i { position: absolute; inset: 0 auto 0 0; background: var(--cx-accent);
border-radius: 0 var(--cx-chart-tip) var(--cx-chart-tip) 0; }
/* geometry by custom property, like .cx-progress and the clock track: a consumer sets --cx-bar-v
(0..1) and --cx-bar-t on the gauge and writes no width or left */
.cx-gauge > i { width: calc(var(--cx-bar-v, 0) * 100%); }
.cx-gauge > b { left: calc(var(--cx-bar-t, 0) * 100%); }
.cx-gauge--ok > i { background: var(--cx-line-strong); }
.cx-gauge > b { position: absolute; top: -3px; bottom: -3px; width: 2px;
background: var(--cx-ink); border-radius: 1px; } /* the target mark */
/* ── stage chain, base — an ordered set of named stages ──────────────────
Was "progress timeline — Capture's ingestion, stage by stage". GENERALISED
2026-08-28 (COVERAGE.md shape 6): an ingestion run is one case of a record
moving through named stages in order, so the two SHARE this base instead of
the chain forking a second copy of it. Every selector below carries both
names; .cx-steps / .cx-step keep every declaration they had and render
unchanged. What the chain adds — six states, the evidence line, the header
stepper, the register form, the absence grammar — is in the stage chain
block at the end of this file. */
.cx-steps, .cx-chain { display: grid; }
.cx-step, .cx-chain__stage { display: grid; grid-template-columns: 22px 1fr auto; gap: 11px;
align-items: start; padding: var(--cx-s2) 0; font-size: var(--cx-body); }
.cx-step__mark, .cx-chain__mark { display: grid; place-items: center; width: 22px; height: 22px;
border-radius: var(--cx-radius-pill); border: 1.5px solid var(--cx-line);
color: var(--cx-ink-3); font-size: 11px; }
/* --cx-ok, not --cx-canon. `done` on a chain means a PROCESS finished; canon teal is spent
only on a human's verified stamp, and it is the most load-bearing colour in the product.
The 2026-08-29 red-team moved this state's WORD and its mini bar to ok and stopped at the
ring, so one state printed two hues two inches apart. Same sweep, same reasoning as the
calendar's confirmed glyph. */
.cx-step[data-state="done"] .cx-step__mark,
.cx-chain__stage[data-state="done"] .cx-chain__mark { border-color: var(--cx-ok); color: var(--cx-ok); }
.cx-step[data-state="now"] .cx-step__mark,
.cx-chain__stage[data-state="current"] .cx-chain__mark { border-color: var(--cx-accent); color: var(--cx-accent); }
.cx-step small, .cx-chain__name small { display: block; color: var(--cx-ink-3); font-size: var(--cx-sm);
margin-top: 1px; line-height: var(--cx-lh-snug); }
.cx-step time, .cx-chain__when { font-size: var(--cx-sm); color: var(--cx-ink-3); }
/* ── skeleton ──────────────────────────────────────────────────────────── */
.cx-skeleton { display: grid; gap: 9px; }
.cx-skeleton > i { display: block; height: 11px; border-radius: var(--cx-radius-sm);
background: linear-gradient(90deg, var(--cx-line-2) 25%, var(--cx-line) 37%, var(--cx-line-2) 63%);
background-size: 340% 100%; animation: cx-shimmer 1.5s var(--cx-ease-in-out) infinite; }
@keyframes cx-shimmer { from { background-position: 120% 0 } to { background-position: -120% 0 } }
@media (prefers-reduced-motion: reduce) { .cx-skeleton > i { animation: none } }
/* A SKELETON IS THE CONTAINER IT REPLACES WITH ITS TEXT SWAPPED FOR BARS. The package drew
four skeletons and every one was a stack of 11px bars BESIDE the shape it stood in for, so
the layout jumped when content landed — the exact thing a skeleton exists to prevent.
Carry `cx-skeleton` ON the real container instead of next to it and the existing `> i`
rule, its shimmer and its reduced-motion guard all apply untouched, while the container
supplies its own template. That matters most for .cx-row, which has FIVE templates across
the responsive and modifier space — any hardcoded skeleton grid would be wrong at four of
them within a release. Usage: ...
*/
.cx-row.cx-skeleton, .cx-tile.cx-skeleton, .cx-doc__fields.cx-skeleton { gap: var(--cx-s3); }
.cx-row.cx-skeleton > i { height: 11px; }
.cx-doc__fields.cx-skeleton > i { height: 11px; }
/* ── advisory — the authored error model ─────────────────────────────────
Neither Cortex nor ANY of the 13 corpus references authored error or
permission-denied. These are invented. The rule that matters:
ON A PARTIAL FAILURE THE PRIMARY ACTION STAYS ENABLED. */
.cx-advisory { border-radius: var(--cx-radius-lg); padding: 13px 15px;
display: grid; grid-template-columns: 20px 1fr; gap: 11px; }
.cx-advisory .cx-icon { width: 18px; height: 18px; margin-top: 1px; }
.cx-advisory b { display: block; font-size: var(--cx-h3); font-weight: var(--cx-w-semi); margin-bottom: 3px; }
.cx-advisory p { margin: 0; font-size: var(--cx-body); line-height: var(--cx-lh-snug); color: var(--cx-ink-2); }
/* THE NOTE — a fact, not a state, so it carries no container. This form was already in use
four times across two files and existed only by the ABSENCE of a modifier: no name, no
comment, no specimen, never rendered under the audit. A variant nobody can find is one the
next author reaches past — they take --warn and paint a fact as a caution, which is
"urgency is a budget" failing in its purest form. The paint is unchanged and correct under
the container ruling; only the name is new. */
.cx-advisory--note { color: var(--cx-ink); }
.cx-advisory--warn { background: var(--cx-warn-wash);
border: 1px solid color-mix(in oklab, var(--cx-warn) 25%, transparent); color: var(--cx-warn); }
.cx-advisory--error { background: var(--cx-error-wash);
border: 1px solid color-mix(in oklab, var(--cx-error) 25%, transparent); color: var(--cx-error); }
/* ── empty — ONE register, held everywhere: name what is missing and why ──
THE SENTENCE DECIDES THE COMPONENT. Four states of an operations list are four different
sentences and the package could write two of them:
nothing yet ......... .cx-empty "go connect something"
failed to load ...... .cx-advisory--error
still loading ....... .cx-skeleton
filter matched none . .cx-empty--filtered <- was not expressible
nothing selected .... .cx-empty--awaiting <- was .cx-empty, wrongly
does not apply here . .cx-absent--na <- was BOTH .cx-empty and .cx-absent,
on one page, for one fact
None of the three additions needs a hue, a token or a glyph the sprite does not carry. */
.cx-empty--filtered .cx-icon { color: var(--cx-ink-3); }
/* the reader is not blocked, they simply have not picked yet — so it is quieter than an
empty, and it does not offer a primary verb */
.cx-empty--awaiting { color: var(--cx-ink-3); }
.cx-empty--awaiting b { font-weight: var(--cx-w-medium); color: var(--cx-ink-2); }
/* "not applicable here" is still an ABSENCE, so it keeps .cx-absent's dashed grammar; it is
simply an absence with a reason rather than a gap to be filled */
.cx-absent--na { border-style: dashed; }
.cx-absent--na h4 { color: var(--cx-ink-2); }
/* ── empty — ONE register, held everywhere: name what is missing and why ── */
.cx-empty { padding: var(--cx-s7) var(--cx-s5); text-align: center; }
.cx-empty .cx-icon { color: var(--cx-ink-3); margin-bottom: var(--cx-s2); }
.cx-empty b { display: block; font-size: var(--cx-h3); font-weight: var(--cx-w-semi); margin-bottom: 5px; }
.cx-empty p { margin: 0 auto var(--cx-s3); font-size: var(--cx-body);
color: var(--cx-ink-2); line-height: var(--cx-lh-snug); max-width: 400px; }
/* ── drop target ───────────────────────────────────────────────────────── */
.cx-drop { border: 1.5px dashed var(--cx-line); border-radius: 14px;
padding: 30px var(--cx-s5); text-align: center; }
/* block-display svg resets (Tailwind preflight) would pin it left */
.cx-drop > .cx-icon { margin: 0 auto var(--cx-s1); }
.cx-drop[data-dragover="true"] { border-color: var(--cx-accent); background: var(--cx-accent-wash); }
.cx-drop b { display: block; font-size: 15px; font-weight: var(--cx-w-semi); margin-bottom: 4px; }
.cx-drop p { margin: 0 auto var(--cx-s3); font-size: var(--cx-body);
color: var(--cx-ink-2); max-width: 400px; line-height: var(--cx-lh-snug); }
/* A FILE INPUT MUST EXIST. Import was paste-only in v3 — zero type="file"
anywhere in the repo — against a demo that opens on a POS upload. */
.cx-drop__alts { display: flex; gap: 9px; justify-content: center; align-items: center; }
/* ── modal — blurred scrim, commit bar OUTSIDE the scrolling body ──────── */
.cx-scrim { position: fixed; inset: 0; background: var(--cx-scrim);
backdrop-filter: blur(var(--cx-scrim-blur)); z-index: 40; }
.cx-modal { position: fixed; z-index: 41; top: 56px; left: 50%; transform: translateX(-50%);
width: 620px; max-width: calc(100vw - 40px); max-height: calc(100vh - 112px);
background: var(--cx-panel); border: 1px solid var(--cx-line);
border-radius: var(--cx-radius-modal); box-shadow: var(--cx-shadow-modal);
display: flex; flex-direction: column; overflow: hidden; }
.cx-modal__hd { padding: var(--cx-s4) var(--cx-s5) var(--cx-s3); }
.cx-modal__hd h3 { margin: 0; font-size: 17px; font-weight: var(--cx-w-semi);
letter-spacing: var(--cx-tr-heading); }
.cx-modal__hd p { margin: 4px 0 0; font-size: var(--cx-body); color: var(--cx-ink-3); }
.cx-modal__bd { padding: 4px var(--cx-s5) var(--cx-s4); overflow: auto; }
.cx-modal__ft { padding: 13px var(--cx-s5); border-top: 1px solid var(--cx-line-2);
display: flex; align-items: center; gap: var(--cx-s2); background: var(--cx-panel); }
.cx-modal__ft .cx-modal__note { font-size: var(--cx-sm); color: var(--cx-ink-3); margin-right: auto; }
/* ── home ──────────────────────────────────────────────────────────────── */
.cx-home { max-width: 780px; margin: 0 auto; padding: 64px var(--cx-s4) var(--cx-s8); text-align: center; }
/* the ONLY use of the display face anywhere in the product */
.cx-wordmark { font-family: var(--cx-font-display); font-variation-settings: "wdth" 100, "opsz" 72;
font-weight: var(--cx-w-bold); font-size: var(--cx-display); line-height: var(--cx-lh-display);
letter-spacing: var(--cx-tr-display); color: var(--cx-accent); margin: 0; }
.cx-home__logo { display: block; width: min(20rem, 70%); height: auto; margin: 0 auto; }
.cx-home__greet { margin: var(--cx-s3) 0 0; font-size: 15px; color: var(--cx-ink-2); }
.cx-eyebrow { font-size: var(--cx-xs); font-weight: var(--cx-w-semi); letter-spacing: var(--cx-tr-wide);
text-transform: uppercase; color: var(--cx-ink-3); margin: 46px 0 var(--cx-s2); text-align: left; }
.cx-ctas { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
gap: var(--cx-s3); text-align: left; }
.cx-cta { background: var(--cx-panel); border: 1px solid var(--cx-line); border-radius: 14px;
padding: 15px 16px; cursor: pointer; text-align: left; font: inherit; color: var(--cx-ink);
transition: border-color var(--cx-dur) var(--cx-ease), box-shadow var(--cx-dur) var(--cx-ease); }
.cx-cta:hover { border-color: var(--cx-accent); box-shadow: var(--cx-shadow-hover); }
.cx-cta__v { font-size: 25px; font-weight: var(--cx-w-semi); letter-spacing: -.03em;; font-family: var(--cx-font-figure); font-weight: 400; letter-spacing: 0; }
.cx-cta__v em { font-style: normal; font-size: var(--cx-body); font-weight: var(--cx-w-semi);
color: var(--cx-accent); margin-left: 7px; }
.cx-cta__l { font-size: var(--cx-h3); margin-top: 2px; }
.cx-cta__s { font-size: var(--cx-sm); color: var(--cx-ink-3); margin-top: 3px; }
/* Home's readings — the same readings, shrunk. Home decides nothing. */
.cx-mini { display: grid; gap: 9px; text-align: left; }
.cx-mini > a { display: grid; grid-template-columns: 16px 1fr auto; gap: 11px; align-items: start;
padding: var(--cx-s3) 14px; border-radius: var(--cx-radius-lg); background: var(--cx-ai);
border: 1px solid var(--cx-ai-line); text-decoration: none; color: var(--cx-ink); }
.cx-mini > a .cx-icon { width: 15px; height: 15px; color: var(--cx-ai-ink); margin-top: 1px; }
.cx-mini p { margin: 0; font-size: var(--cx-h3); line-height: var(--cx-lh-snug); }
.cx-mini span { font-size: var(--cx-sm); color: var(--cx-ink-3); white-space: nowrap; padding-top: 2px; }
/* ── connection tile ───────────────────────────────────────────────────── */
.cx-conns { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--cx-s2); }
.cx-conn { display: flex; align-items: center; gap: var(--cx-s3); padding: 13px 14px;
border: 1px solid var(--cx-line); border-radius: 13px; background: var(--cx-panel); }
button.cx-conn { font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }
.cx-conn__logo { width: 34px; height: 34px; border-radius: var(--cx-radius-md);
display: grid; place-items: center; font-weight: var(--cx-w-bold); font-size: var(--cx-sm);
background: var(--cx-ground); color: var(--cx-ink-2); border: 1px solid var(--cx-line); flex: none; }
/* monogram marks — complete by default (2026-08-26, owner: "complete it"). A mark
with no vendor colour is a quiet counter-surface chip with ink-2 letters (a
panel chip in the rail, a ground chip on a panel) — vendor logos are never
redrawn, so this is the honest placeholder. A call site that supplies a vivid
brand fill adds `cx-mark--vivid` so the ink goes white in both themes; the
call site owns that fill's contrast. */
.cx-mark--vivid { color: var(--cx-ink-on-vivid); }
.cx-conn b { display: block; font-size: var(--cx-h3); font-weight: var(--cx-w-semi); }
.cx-conn small { display: block; font-size: var(--cx-sm); color: var(--cx-ink-3); margin-top: 1px; }
.cx-conn--off { border-style: dashed; }
.cx-conn--off .cx-conn__logo { filter: grayscale(1); opacity: .5; }
/* ── chat launcher — the persistent companion affordance ────────────────
Owner ruling 2026-08-03 (round 3, R7; supersedes the round-2 removal): a
floating launcher on EVERY surface, accent-derived — the client accent,
never violet — DS radius/elevation, sparkle mark; opens the pop-out
companion. One obvious click opens chat. */
.cx-chat-fab { position: fixed; right: 20px; bottom: 20px; z-index: 50;
width: 48px; height: 48px; border-radius: var(--cx-radius-pill);
background: var(--cx-accent); color: var(--cx-ink-on-accent);
border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
box-shadow: var(--cx-shadow-popover);
transition: transform var(--cx-dur) var(--cx-ease), box-shadow var(--cx-dur) var(--cx-ease); }
.cx-chat-fab:hover { transform: translateY(-1px); box-shadow: var(--cx-shadow-hover), var(--cx-shadow-popover); }
/* ── icon hover ───────────────────────────────────────────────────────────
THE RULE: an icon may move on hover only when the motion REHEARSES ITS OWN VERB — the
movement previews what the click will do. Not feedback, not delight. Three consequences
fall out of it, and they are why this section is one rule and not thirty:
- a NOUN cannot be previewed, so it never moves (i-document, i-supplier, i-item,
i-inventory, the channel glyphs);
- NAVIGATION already carries state motion and does not get hover motion on top
(i-chevron, i-collapse-rail, i-toggle-panel, i-close, i-more — the chevrons already
rotate on aria-expanded). State beats hover;
- a STATE MARK must never move, ever (i-check, i-verified, i-warn, i-error, i-pending,
i-locked). Motion on a state mark implies the state is changing, and canon teal marks
verified truth — a verified fact that twitches under the pointer is a lie about the
data. Same reasoning as "depth groups, it never means".
Censused every