/* ============================================================================
Refocus X — Design Pack · components.css
The visual component library. Load AFTER tokens.css:
Everything here uses tokens — there is not one literal colour, radius or
shadow below. If a component needs a value that isn't a token, that is a gap
in tokens.css; fix it there, not here.
Where a source app had several versions of the same component (three toggle
switches, four badge styles, two stat bars), one canonical version is kept
and the divergences are noted in DECISIONS.md.
CONTENTS
1 Buttons 8 Stats 15 Overlays & panels
2 Cards 9 Badges & pills 16 Tabs
3 Fields 10 Tables 17 Copy-to-clipboard
4 Switches 11 Expandable rows 18 Success card
5 Segmented control 12 Event / log list 19 PIN & OTP entry
6 Info balloon 13 Empty/loading/error 20 Recipient-page bits
7 Chips & tags 14 Pager 21 Dashboard cards
22 Stepper (engine-owned)
23 Activity timeline
24 Charts
============================================================================ */
/* v0.35.0 (D61): the HTML `hidden` attribute always hides - an author rule with `display` (flex, grid, inline-flex) would otherwise outrank the browser's own [hidden] rule. */
[hidden] { display: none !important; }
/* ══ 1 · BUTTONS ══════════════════════════════════════════════════════════ */
.rx-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 20px; border-radius: var(--rx-radius-sm);
font-family: inherit; font-size: var(--rx-text-md); font-weight: 600;
border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
transition: background .15s, border-color .15s, opacity .15s;
white-space: nowrap;
}
.rx-btn:disabled, .rx-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.rx-btn-primary { background: var(--rx-ink); color: var(--rx-on-ink); border-color: var(--rx-ink); }
.rx-btn-primary:hover:not(:disabled) { background: var(--rx-ink-hover); }
.rx-btn-outline { background: var(--rx-surface-card); color: var(--rx-ink); border-color: var(--rx-border); }
.rx-btn-outline:hover:not(:disabled) { border-color: var(--rx-ink); }
.rx-btn-ghost { background: none; color: var(--rx-ink-muted); border-color: transparent; }
.rx-btn-ghost:hover:not(:disabled) { background: var(--rx-surface-sunken); color: var(--rx-ink); }
.rx-btn-danger { background: var(--rx-danger); color: var(--rx-on-danger); border-color: var(--rx-danger); }
.rx-btn-danger:hover:not(:disabled) { opacity: .9; }
/* The DESTRUCTIVE tier — unscoped, irreversible. Deliberately a different,
darker red so it cannot be confused with an ordinary delete. */
.rx-btn-destroy { background: var(--rx-danger-strong); color: var(--rx-on-danger); border-color: var(--rx-danger-strong); }
.rx-btn-destroy:hover:not(:disabled) { opacity: .9; }
/* Quiet danger — for a dangerous action sitting among ordinary row actions.
Grey and dashed at rest so it never invites a mis-click; red and solid on
hover so it is unmistakable once you mean it. */
.rx-btn-danger-quiet {
background: none; color: var(--rx-ink-subtle);
border: 1px dashed var(--rx-border); padding: 5px 10px; font-size: calc(13.12px * var(--rx-scale)); font-weight: 500;
}
.rx-btn-danger-quiet:hover {
color: var(--rx-danger); border-color: var(--rx-danger); border-style: solid;
}
.rx-btn-sm { padding: 6px 12px; font-size: var(--rx-text-sm); }
/* ══ 1b · PAGE HEADER ═════════════════════════════════════════════════════ */
/* Every screen names itself. The title size comes from the page-width
modifier (see tokens.css) so a form and a list are visibly different kinds
of page without anyone choosing a number. */
.rx-page-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.rx-page-title {
font-size: var(--rx-page-title, var(--rx-title));
font-weight: 700; margin: 0 0 3px; color: var(--rx-ink); line-height: 1.2;
}
.rx-page-sub { font-size: var(--rx-text); color: var(--rx-ink-muted); margin: 0; }
/* Right-hand side: actions, a refresh control, a last-updated stamp. */
.rx-page-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ══ 2 · CARDS ════════════════════════════════════════════════════════════ */
.rx-card {
background: var(--rx-surface-card); border: 1px solid var(--rx-border);
border-radius: var(--rx-radius-lg); box-shadow: var(--rx-shadow-sm);
padding: 22px 24px;
}
.rx-card-title { font-size: calc(15px * var(--rx-scale)); font-weight: 600; margin: 0 0 4px; color: var(--rx-ink); }
.rx-card-sub { font-size: var(--rx-text-sm); color: var(--rx-ink-muted); margin: 0 0 20px; line-height: 1.5; }
/* Sectioned card — one card, several groups divided by rules. */
.rx-card-sectioned { padding: 0; overflow: hidden; }
.rx-card-section { padding: 22px 26px; border-bottom: 1px solid var(--rx-border); }
.rx-card-section:last-of-type { border-bottom: none; }
.rx-section-title {
font-size: var(--rx-text-sm); font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
color: var(--rx-ink-subtle); margin-bottom: 14px;
}
/* Severity edges — reads at a glance without reading the words. */
.rx-card-warn { border-left: 3px solid var(--rx-warn-strong); }
.rx-card-danger { border-left: 3px solid var(--rx-danger); }
.rx-card-destroy { border-left: 3px solid var(--rx-danger-strong); }
/* Picture card + catalogue grid — a card with a picture above its body, for a
LIBRARY of things (lessons, apps, articles) rather than a single record.
Lifted from LearnGuard's Library and Dashboard (the `.lg-pack-card` family),
22 Sep 2026, the suite library's own GAP row. */
.rx-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.rx-card-stack { display: flex; flex-direction: column; gap: 12px; }
.rx-card-compact { padding: 14px 16px; } /* denser than the 22/24 default — a catalogue card, not a form card */
.rx-card-pic {
display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 220px;
border-radius: var(--rx-radius-sm); object-fit: cover;
background: var(--rx-surface-sunken); flex-shrink: 0; margin-bottom: 12px;
}
.rx-card-excerpt {
font-size: var(--rx-text-sm); color: var(--rx-ink-muted);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
.rx-card-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.rx-card-note { font-size: var(--rx-text-sm); color: var(--rx-ink-muted); margin-top: 10px; }
.rx-card-tag { font-size: var(--rx-text-xs); color: var(--rx-ink-subtle); }
/* Card actions - the ONE place a card's buttons live, pinned to the bottom so
every card in a grid or a stack shows its button in the same spot whatever
the length of its text (LearnGuard, 23 Sep 2026, Pierre: "The placement of
the button needs to be the same on all cards"). A card in a grid or a stack
becomes a flex column for it; a locked or unavailable card keeps the SAME
button, disabled, with its reason in an `.rx-card-note` above the row. */
.rx-card-grid > .rx-card, .rx-card-stack > .rx-card { display: flex; flex-direction: column; }
.rx-card-actions { margin-top: auto; padding-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Danger zone — for a destructive block inside an otherwise ordinary page. */
.rx-danger-zone { border-color: var(--rx-danger); }
.rx-danger-zone .rx-section-title { color: var(--rx-danger-strong); }
/* ══ 3 · FIELDS ═══════════════════════════════════════════════════════════ */
.rx-fields { display: flex; flex-direction: column; gap: 16px; }
.rx-field { margin-bottom: 18px; }
.rx-field:last-child { margin-bottom: 0; }
.rx-field label {
display: block; font-size: var(--rx-text); font-weight: 500;
color: var(--rx-ink-muted); margin-bottom: 6px;
}
.rx-field label .rx-muted { color: var(--rx-ink-subtle); font-weight: 400; }
/* Checkboxes and radios are EXCLUDED — otherwise a checkbox nested in a field
gets stretched to the full form width, which looks broken. */
.rx-field input:not([type="checkbox"]):not([type="radio"]),
.rx-field textarea,
.rx-field select {
width: 100%; padding: 10px 14px; font-family: inherit; font-size: var(--rx-text-md);
background: var(--rx-surface-card); color: var(--rx-ink);
border: 1px solid var(--rx-border); border-radius: var(--rx-radius);
outline: none; transition: border-color .15s, box-shadow .15s; appearance: none;
}
.rx-field input:not([type="checkbox"]):not([type="radio"]):focus,
.rx-field textarea:focus,
.rx-field select:focus {
border-color: var(--rx-ink); box-shadow: var(--rx-focus-ring);
}
.rx-field textarea { resize: vertical; min-height: 72px; }
.rx-field-hint {
display: block; font-size: var(--rx-text-xs); color: var(--rx-ink-subtle);
margin-top: 5px; line-height: 1.5; font-weight: 400;
}
.rx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
/* FIELD HELP (v0.37.0, D63) - the small "i" beside a label, opening a short
plain-words explanation in an RX.popover. Built by RX.fieldHelp
(engines/rx-forms.js); every value is a token. */
.rx-fh-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.rx-field .rx-fh-row label { margin-bottom: 0; }
.rx-fh-btn {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
box-sizing: border-box; min-width: 24px; min-height: 24px; padding: 0;
font-family: inherit; font-style: italic; font-weight: 700;
font-size: var(--rx-text-xs); line-height: 1; cursor: pointer;
color: var(--rx-ink-muted); background: var(--rx-surface-card);
border: 1px solid var(--rx-border); border-radius: 50%;
}
.rx-fh-btn:hover, .rx-fh-btn[aria-expanded="true"] {
color: var(--rx-ink); border-color: var(--rx-ink); background: var(--rx-surface-sunken);
}
.rx-fh-btn:focus-visible { outline: none; border-color: var(--rx-ink); box-shadow: var(--rx-focus-ring); }
.rx-pop.rx-fh-pop { padding: 12px 14px; font-size: var(--rx-text); line-height: 1.5; color: var(--rx-ink); }
.rx-fh-pop:focus { outline: none; }
.rx-fh-title { font-weight: 600; margin-bottom: 6px; }
.rx-fh-pop p { margin: 0 0 8px; }
.rx-fh-pop p:last-child { margin-bottom: 0; }
.rx-fh-k { display: block; font-size: var(--rx-text-xs); font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; color: var(--rx-ink-subtle); }
.rx-fh-eg { display: block; padding: 6px 8px; background: var(--rx-surface-sunken);
border-radius: var(--rx-radius-sm); color: var(--rx-ink-muted); }
/* Field group (D25) — several fields under ONE heading inside a form, when the
fields belong to different KINDS of thing and the reader must not confuse
them (PageCast: settings for every device vs desk phones only vs amplifiers
only). A bare `.rx-section-title` above `.rx-field`s is not enough: a field
label is also bold-ish text on its own line, so the heading reads as another
label and the grouping disappears (Pierre, 22 Aug 2026: "the separation is
not clear enough"). The group therefore gets a real container — an inset
surface with a hairline — so membership is visible, not implied. */
.rx-field-group {
border: 1px solid var(--rx-border); border-radius: var(--rx-radius-lg);
background: var(--rx-surface-sunken); padding: 14px 16px 16px; margin-bottom: 18px;
}
.rx-field-group:last-child { margin-bottom: 0; }
.rx-field-group > .rx-field-group-head {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rx-border);
}
.rx-field-group > .rx-field-group-head .rx-field-group-title {
font-size: var(--rx-text-sm); font-weight: 700; letter-spacing: .4px;
text-transform: uppercase; color: var(--rx-ink);
}
.rx-field-group > .rx-field-group-head .rx-field-group-sub {
font-size: var(--rx-text-xs); color: var(--rx-ink-subtle); font-weight: 400;
}
/* The fields inside sit on the inset, so their controls keep the card surface
to stay legible against it. */
.rx-field-group .rx-field input:not([type="checkbox"]):not([type="radio"]),
.rx-field-group .rx-field textarea,
.rx-field-group .rx-field select { background: var(--rx-surface-card); }
@media (max-width: 560px) { .rx-field-row { grid-template-columns: 1fr; } }
/* Native select arrow removed above — supply our own. */
.rx-field select {
background-image: url("brand/select-arrow.svg");
background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
/* Save status — one element, three states, beside the button.
Never a toast: put it where the user is already looking. */
.rx-save-row { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.rx-save-status { font-size: var(--rx-text-sm); color: var(--rx-ink-subtle); }
.rx-save-status.ok { color: var(--rx-success-strong); }
.rx-save-status.err { color: var(--rx-danger); }
/* ══ 4 · SWITCHES ═════════════════════════════════════════════════════════ */
/* ONE canonical toggle. The source app had three (38×22 ink-filled, 40×22
ink-filled, 38×22 green-filled) — this is the green one, because "on" reading
as green is a stronger signal than "on" reading as dark. */
.rx-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; vertical-align: middle; }
.rx-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.rx-switch-slider {
position: absolute; inset: 0; background: var(--rx-switch-off);
border-radius: var(--rx-radius-pill); cursor: pointer; transition: background .2s;
}
.rx-switch-slider::before {
content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
background: var(--rx-surface-card); border-radius: 50%;
transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.rx-switch input:checked + .rx-switch-slider { background: var(--rx-success); }
.rx-switch input:checked + .rx-switch-slider::before { transform: translateX(16px); }
.rx-switch input:focus-visible + .rx-switch-slider { box-shadow: var(--rx-focus-ring); }
/* DISABLED (PACK-011, v0.56.0). A disabled switch must LOOK disabled, on or off: the same
.4 opacity and not-allowed cursor as .rx-btn:disabled, and a muted track (--rx-ink-subtle,
the "disabled" token) in BOTH states, so a locked-on switch never reads as a live green
one - the knob position still says on or off. Three ways in: the input is :disabled (the
browser also stops the toggle), or aria-disabled="true" on the input or on the .rx-switch
(look only: the pack cannot stop a click that aria-disabled leaves live; the host must).
No :has() - the markup is label > input + slider, so sibling selectors reach it. Written
after the :checked rule at equal specificity so it wins. A disabled switch has no hover
change (there is none to remove) and no focus ring. */
.rx-switch input:disabled + .rx-switch-slider,
.rx-switch input[aria-disabled="true"] + .rx-switch-slider,
.rx-switch[aria-disabled="true"] input + .rx-switch-slider {
background: var(--rx-ink-subtle); opacity: .4; cursor: not-allowed;
}
.rx-switch input:disabled:focus-visible + .rx-switch-slider,
.rx-switch input[aria-disabled="true"]:focus-visible + .rx-switch-slider,
.rx-switch[aria-disabled="true"] input:focus-visible + .rx-switch-slider { box-shadow: none; }
/* Label + description on the left, switch on the right. */
.rx-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.rx-switch-row:not(:last-child) { border-bottom: 1px solid var(--rx-surface-sunken); }
.rx-switch-label { font-size: var(--rx-text-md); font-weight: 500; color: var(--rx-ink); }
.rx-switch-desc { font-size: calc(12.5px * var(--rx-scale)); color: var(--rx-ink-subtle); margin-top: 2px; max-width: 460px; }
/* ══ 5 · SEGMENTED CONTROL ════════════════════════════════════════════════ */
/* Two-or-three-way mode selector. Each option carries a title AND a one-line
explanation — a mode the user cannot distinguish is a mode they will pick
wrong. */
.rx-segmented { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.rx-segment {
display: flex; align-items: center; gap: 10px; padding: 12px 14px;
border: 1.5px solid var(--rx-border); border-radius: var(--rx-radius);
background: var(--rx-surface-card); cursor: pointer; font-family: inherit; text-align: left;
transition: border-color .15s, background .15s;
}
.rx-segment:hover { border-color: var(--rx-ink-subtle); }
.rx-segment.on { border-color: var(--rx-ink); background: var(--rx-surface-sunken); }
.rx-segment-icon { font-size: var(--rx-title-sm); flex-shrink: 0; }
.rx-segment strong { display: block; font-size: var(--rx-text); color: var(--rx-ink); }
.rx-segment small { display: block; font-size: var(--rx-text-xs); color: var(--rx-ink-subtle); margin-top: 2px; font-weight: 400; }
/* ══ 6 · INFO BALLOON ═════════════════════════════════════════════════════ */
/* The grey explanatory block that sits under a control and changes with the
selection. Use it wherever a choice has consequences the user cannot infer
from the label — it is the cheapest way to prevent a wrong choice. */
.rx-balloon {
margin-top: 8px; padding: 10px 14px;
background: var(--rx-surface-sunken); border-radius: var(--rx-radius);
font-size: var(--rx-text-sm); color: var(--rx-ink-muted); line-height: 1.6;
}
.rx-balloon strong { color: var(--rx-ink); }
.rx-balloon-info { background: var(--rx-surface-sunken); border-left: 3px solid var(--rx-info); }
.rx-balloon-warn { background: var(--rx-surface-sunken); border-left: 3px solid var(--rx-warn); }
.rx-balloon-danger { background: var(--rx-danger-soft); border-left: 3px solid var(--rx-danger); }
/* ══ 7 · CHIPS & TAGS ═════════════════════════════════════════════════════ */
/* Filter chip — selection is inversion. */
.rx-chip {
background: var(--rx-surface-card); border: 1px solid var(--rx-border);
border-radius: var(--rx-radius-pill); padding: 5px 14px;
font-family: inherit; font-size: var(--rx-text-sm); font-weight: 500;
color: var(--rx-ink-muted); cursor: pointer; transition: all .15s;
}
.rx-chip:hover { border-color: var(--rx-ink-subtle); color: var(--rx-ink); }
.rx-chip.on { background: var(--rx-ink); color: var(--rx-on-ink); border-color: var(--rx-ink); }
.rx-chip-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rx-chip-group-label {
font-size: var(--rx-text-xs); font-weight: 600; text-transform: uppercase;
letter-spacing: .5px; color: var(--rx-ink-subtle); margin-right: 4px;
}
/* Tag input — a bordered box that behaves like one field but holds many
values (recipients, domains, extensions). Click anywhere to focus. */
.rx-tags {
display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
padding: 8px 10px; min-height: 42px; cursor: text;
background: var(--rx-surface-card);
border: 1px solid var(--rx-border); border-radius: var(--rx-radius);
transition: border-color .15s, box-shadow .15s;
}
.rx-tags:focus-within { border-color: var(--rx-ink); box-shadow: var(--rx-focus-ring); }
.rx-tags input {
border: none; outline: none; background: transparent; flex: 1; min-width: 140px;
padding: 2px 4px; font-family: inherit; font-size: var(--rx-text-md); color: var(--rx-ink);
}
.rx-tag {
display: inline-flex; align-items: center; gap: 4px;
background: var(--rx-surface-sunken); border: 1px solid var(--rx-border);
border-radius: var(--rx-radius-pill); padding: 3px 8px 3px 11px;
font-size: var(--rx-text-sm); font-weight: 500; color: var(--rx-ink); white-space: nowrap;
}
.rx-tag-x { background: none; border: none; cursor: pointer; color: var(--rx-ink-subtle); font-size: var(--rx-text-md); line-height: 1; padding: 0; }
.rx-tag-x:hover { color: var(--rx-danger); }
.rx-tag.invalid { border-color: var(--rx-danger); color: var(--rx-danger); }
/* Preset blocks — pick-one from a small fixed set (5 / 10 / 20 / Unlimited). */
.rx-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.rx-preset {
flex: 1; min-width: 64px; padding: 10px 12px; text-align: center;
font-family: inherit; font-size: var(--rx-text); font-weight: 600;
background: var(--rx-surface-card); color: var(--rx-ink-muted);
border: 1.5px solid var(--rx-border); border-radius: var(--rx-radius-sm);
cursor: pointer; transition: all .12s;
}
.rx-preset:hover { border-color: var(--rx-ink-subtle); color: var(--rx-ink); }
.rx-preset.on { background: var(--rx-ink); color: var(--rx-on-ink); border-color: var(--rx-ink); }
/* ══ 8 · STATS ════════════════════════════════════════════════════════════ */
.rx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.rx-stat {
background: var(--rx-surface-card); border: 1px solid var(--rx-border);
border-radius: var(--rx-radius); padding: 16px 18px;
}
.rx-stat-value { font-size: var(--rx-title-lg); font-weight: 700; line-height: 1; color: var(--rx-ink); }
.rx-stat-label { font-size: calc(12.5px * var(--rx-scale)); color: var(--rx-ink-subtle); margin-top: 6px; }
.rx-stat-sub { font-size: var(--rx-text-xs); color: var(--rx-ink-subtle); margin-top: 3px; }
.rx-stat-value.good { color: var(--rx-success-strong); }
.rx-stat-value.warn { color: var(--rx-warn); }
.rx-stat-value.bad { color: var(--rx-danger); }
/* Compact inline variant, for a filter bar or a header. */
.rx-stat-pills { display: flex; gap: 16px; flex-wrap: wrap; }
.rx-stat-pill {
background: var(--rx-surface-card); border: 1px solid var(--rx-border);
border-radius: var(--rx-radius-sm); padding: 10px 16px;
display: flex; align-items: center; gap: 8px; font-size: var(--rx-text);
}
.rx-stat-pill .rx-stat-value { font-size: var(--rx-title-sm); }
.rx-stat-pill .rx-stat-label { margin-top: 0; color: var(--rx-ink-muted); }
/* ══ 9 · BADGES & PILLS ═══════════════════════════════════════════════════ */
.rx-badge {
display: inline-flex; align-items: center; padding: 2px 8px;
border-radius: 4px; font-size: var(--rx-text-xs); font-weight: 600; white-space: nowrap;
}
.rx-badge-mono { font-family: var(--rx-mono); }
.rx-badge-neutral { background: var(--rx-surface-sunken); color: var(--rx-ink-muted); }
.rx-badge-active { background: var(--rx-tint-green); color: var(--rx-tint-green-ink); }
.rx-badge-info { background: var(--rx-tint-blue); color: var(--rx-tint-blue-ink); }
.rx-badge-purple { background: var(--rx-tint-purple); color: var(--rx-tint-purple-ink); }
.rx-badge-warn { background: var(--rx-tint-orange); color: var(--rx-tint-orange-ink); }
.rx-badge-pending { background: var(--rx-tint-amber); color: var(--rx-tint-amber-ink); }
.rx-badge-danger { background: var(--rx-danger-soft); color: var(--rx-danger-strong); }
/* Role / provenance pill — a quieter, outlined variant for metadata. */
.rx-pill {
display: inline-flex; align-items: center; gap: 5px;
background: var(--rx-surface-sunken); border: 1px solid var(--rx-border);
border-radius: var(--rx-radius-pill); padding: 3px 10px;
font-size: calc(13.6px * var(--rx-scale)); color: var(--rx-ink);
}
.rx-pill-x { background: none; border: none; cursor: pointer; color: var(--rx-ink-muted); font-size: calc(15px * var(--rx-scale)); line-height: 1; padding: 0; }
.rx-pill-x:hover { color: var(--rx-danger); }
/* ══ 10 · TABLES ══════════════════════════════════════════════════════════ */
/* Grid-based list table, for rows that expand. (For a plain sortable data
table use the rx-table engine instead — it does sort/paginate/resize/CSV.) */
.rx-table-wrap {
border: 1px solid var(--rx-border); border-radius: var(--rx-radius);
overflow: hidden; background: var(--rx-surface-card);
}
.rx-table-head {
background: var(--rx-surface-sunken); font-weight: 600;
color: var(--rx-ink-subtle); text-transform: uppercase;
font-size: var(--rx-text-xs); letter-spacing: .4px;
}
.rx-table-head, .rx-table-row { display: grid; gap: 10px; padding: 10px 14px; align-items: center; }
.rx-table-row { border-top: 1px solid var(--rx-border); font-size: var(--rx-text); }
.rx-table-row:hover { background: var(--rx-surface-sunken); }
.rx-table-row.selected { background: var(--rx-surface-sunken); }
/* Sticky header for long lists. */
.rx-table-head.sticky { position: sticky; top: var(--rx-header-h); z-index: var(--rx-z-sticky); }
/* ══ 11 · EXPANDABLE ROWS ═════════════════════════════════════════════════ */
.rx-exp-row { border-top: 1px solid var(--rx-border); }
.rx-exp-main { display: grid; gap: 10px; padding: 12px 14px; align-items: center; cursor: pointer; }
.rx-exp-main:hover { background: var(--rx-surface-sunken); }
.rx-exp-row.open > .rx-exp-main { background: var(--rx-surface-sunken); }
.rx-exp-chevron { color: var(--rx-ink-subtle); transition: transform .18s; display: inline-block; }
.rx-exp-row.open .rx-exp-chevron { transform: rotate(90deg); }
.rx-exp-body { display: none; padding: 14px 18px 18px; background: var(--rx-surface-sunken); }
.rx-exp-row.open .rx-exp-body { display: block; }
.rx-exp-title {
font-size: var(--rx-text-xs); font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; color: var(--rx-ink-subtle); margin: 0 0 8px;
}
/* Left edge marks a row whose children matched the current filter — filtering
a nested list without showing WHICH child matched is disorienting. */
.rx-exp-row.matched > .rx-exp-main { border-left: 3px solid var(--rx-info); }
/* ══ 12 · EVENT / LOG LIST — defined in engines/rx-events.js ══════════════ */
/* The flat "here is a list of things that happened, or that need doing" object
— an audit log, an activity feed, a dashboard "needs attention" card. Its
rules are NOT here on purpose, and this note exists so nobody adds a second
copy (D24 §2: never both).
It moved on 28 Aug 2026, when FileDrop asked for the object for its Dashboard
attention feed. Up to then every caller hand-wrote the markup, which is what
put the rules here; now an ENGINE builds the row — and it has to, because the
row is an when it navigates and a