/* =====================================================================
flexo-components.css — Flexo 1.5.0 (build 25)
GENERATED. Do not hand-edit; report a problem and it is fixed at source.
The component sheet. Every locked component in the specification,
written as a class with its real values, so a build applies a decision
instead of re-making it. Load AFTER flexo-tokens.css:
RULES THAT BIND ANY USE OF THIS FILE
1. Never redefine a class here inside a component. If a class does not
fit, the surface is wrong — ask. A local override is how a system
loses its heights.
2. Never introduce a colour, size, padding, duration or easing that is
not in flexo-tokens.css. The palette and the scale are closed.
3. Heights are arithmetic: padding is declared and line-height is
pinned on every single-line string. Do not remove a line-height.
4. Structure classes carry no colour of their own beyond the tokens —
theming happens once, in flexo-tokens.css.
===================================================================== */
:root {
/* The z-index scale — seven layers, nothing outside them (§12). */
--flx-z-content: 1;
--flx-z-menu: 30; /* in-content dropdowns: row actions, selects, date pickers */
--flx-z-header: 40; /* chrome — content overlays pass UNDER it */
--flx-z-header-pop: 42;/* an overlay anchored in the header */
--flx-z-curtain: 45; /* above the header on purpose: the curtain dims the whole frame */
--flx-z-overlay: 50; /* drawer, dialog, sheet */
--flx-z-toast: 60;
--flx-z-site: 200; /* layer 8 — the handoff SITE's tab bar. Above the toast because it is
not part of the product at all: it frames the product. Nothing in a
Flexo PRODUCT may use this layer. */
--flx-ease: cubic-bezier(0.2, 0, 0, 1); /* everything the user caused */
--flx-ease-in: cubic-bezier(0.2, 0.9, 0.24, 1); /* overlays arriving */
--flx-ease-out: cubic-bezier(0.4, 0, 1, 1); /* overlays leaving */
--flx-dur: 420ms;
--flx-dur-overlay: 320ms;
--flx-dur-touch: 120ms;
}
/* ---------------------------------------------------------------------
1. TYPE — the fourteen roles. There is no fifteenth.
Every single-line UI string pins line-height: 1; only prose gets 1.45+.
--------------------------------------------------------------------- */
.flx-display-xl,
.flx-display-l,
.flx-display-m,
.flx-title-l,
.flx-title-m { font-family: 'Space Grotesk', sans-serif; }
.flx-display-xl { font-size: 96px; font-weight: 300; letter-spacing: -0.045em; line-height: 1; }
.flx-display-l { font-size: 54px; font-weight: 300; letter-spacing: -0.04em; line-height: 1.05; }
.flx-display-m { font-size: 34px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }
.flx-title-l { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.flx-title-m { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.flx-body { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; line-height: 1.6; }
.flx-body-s { font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; line-height: 1; } /* THE record size */
.flx-body-xs { font-family: 'IBM Plex Sans', sans-serif; font-size: 12px; line-height: 1; }
.flx-prose { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; line-height: 1.65; text-wrap: pretty; }
.flx-mono-value { font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; }
.flx-mono-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1; }
.flx-mono-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; }
.flx-mono-micro { font-family: 'JetBrains Mono', monospace; font-size: 9px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; }
/* The wordmark is ARTWORK, not type: named sizes only, and it must carry
data-flx="wordmark" so the §18c audit can skip it. */
.flx-wordmark { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -0.05em; line-height: 1; }
.flx-wordmark--96 { font-size: 96px; font-weight: 300; letter-spacing: -0.055em; }
.flx-wordmark--44 { font-size: 44px; }
.flx-wordmark--22 { font-size: 22px; }
.flx-wordmark--16 { font-size: 16px; }
/* Weights: 400 / 500 / 700. There is no 600 — "bold" in a product surface is 500. */
.flx-w-medium { font-weight: 500; }
.flx-w-bold { font-weight: 700; }
/* Dimming is opacity on the CONTENT, never a grey token, and never on an
element that receives the interaction tint. */
.flx-dim-70 { color: inherit; opacity: 0.7; }
.flx-dim-62 { color: inherit; opacity: 0.62; }
.flx-dim-45 { color: inherit; opacity: 0.45; }
.flx-dim-30 { color: inherit; opacity: 0.3; }
/* ---------------------------------------------------------------------
2. CARD + ITS HEADER — three grounds: surface, bar, cell.
--------------------------------------------------------------------- */
.flx-card {
background: var(--card);
border: 1px solid var(--rule);
border-radius: 0;
box-shadow: none;
}
.flx-card-header { /* the title bar — 44px band, --field ground */
display: flex;
align-items: center;
height: 45px; /* 44 of content + the 1px rule below — v2.5: a tile must stay square */
background: var(--field);
border-bottom: 1px solid var(--rule);
flex-shrink: 0;
}
.flx-card-header__cell { /* 44px icon cell, one step past the bar */
width: 44px;
flex-shrink: 0;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
background: var(--cell);
border-right: 1px solid var(--rule);
}
.flx-card-header__cell svg { width: 18px; height: 18px; stroke-width: 1.6; opacity: 1; }
.flx-card-header__title { /* full ink, weight 500 — never 0.62 */
flex: 1;
min-width: 0;
padding: 0 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
line-height: 1;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 500;
color: inherit;
opacity: 1;
}
.flx-card-header__trail { /* a verb, a legend, a count — inset 16px */
padding-right: 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
line-height: 1;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--signal);
}
/* ---------------------------------------------------------------------
3. TABLE — one table, everywhere.
Heights: 25 / 33 / 35 / 41 single-line · 52 tiled · 63 two-line.
--------------------------------------------------------------------- */
.flx-colhead { /* 36px in a card (13 + 10 + 13), 25px in a drawer; type only, no icon cell */
display: flex;
align-items: center;
border-bottom: 1px solid var(--rule);
}
.flx-colhead__cell {
padding: 13px 16px; /* 36px band: 13 + a 10px pinned line + 13 */
font-family: 'JetBrains Mono', monospace;
font-size: 10px; /* a CARD labels at 10px (36px band); a drawer at 9px, below */
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
color: inherit;
opacity: 0.45;
}
.flx-colhead__cell.is-sorted { opacity: 1; }
.flx-colhead__cell.is-actions { width: 44px; flex-shrink: 0; } /* blank header over the overflow cell */
.flx-row {
display: flex;
align-items: center;
border-bottom: 1px solid var(--hairline);
background: transparent;
transition: background var(--flx-dur) var(--flx-ease), color var(--flx-dur) var(--flx-ease);
}
.flx-row > * { padding: 14px 16px; } /* 41px — a row with NO tile */
.flx-row--tiled > * { padding: 14px 16px; } /* 52px — the 24px tile sets it */
.flx-row--child > * { padding: 11px 16px; } /* 35px — a run's child rows */
.flx-row--drawer > * { padding: 10px 16px; } /* 33px — drawer fact and list rows */
.flx-row--compact > * { padding: 6px 16px; } /* 25px */
.flx-row--two-line > * { padding: 17px 16px; } /* 63px — 13 + 4 + 12, both pinned */
/* The status cell always gives back 6px so the block never changes a row. */
.flx-row > .flx-cell--status { padding-top: 8px; padding-bottom: 8px; }
.flx-row--child > .flx-cell--status { padding-top: 5px; padding-bottom: 5px; }
.flx-row--two-line > .flx-cell--status { padding-top: 11px; padding-bottom: 11px; }
.flx-cell { min-width: 0; font-family: 'IBM Plex Sans', sans-serif; font-size: 13px; line-height: 1; }
.flx-cell--name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flx-cell--meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1; color: inherit; opacity: 0.62; }
.flx-cell--num { text-align: right; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; }
.flx-cell--status { display: flex; align-items: center; }
.flx-cell__sub { display: block; font-size: 12px; line-height: 1; margin-top: 4px; color: inherit; opacity: 0.62; }
/* Row states — all five, in precedence order. A table with only rest and
hover is unfinished. */
.flx-row.is-clickable { cursor: pointer; }
.flx-row.is-clickable:hover { background: var(--tint); color: var(--tint-ink); --tile-knockout: var(--tint); }
.flx-row.is-selected {
background: var(--tint);
color: var(--tint-ink);
--tile-knockout: var(--tint);
box-shadow: inset 2px 0 0 var(--brand); /* selection is BLUE; the black bar is the rail's */
}
.flx-row.is-selected:hover { background: var(--tint-press); }
.flx-row.is-inert { cursor: default; }
.flx-row.is-inert:hover { background: transparent; color: inherit; }
.flx-row__empty { padding: 14px 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: inherit; opacity: 0.45; }
/* The icon column is square, and the cell drives the row (§14). A single-line row
lands at 44 of content; a two- or three-line row is taller and the cell stretches. */
[data-spine-row], .flx-row--spine { align-items: stretch; }
[data-spine-row] > [data-cell], .flx-row--spine > [data-cell] { min-height: 44px; align-self: stretch; }
/* ---- The mono verb (§11) — a button with no box. Fills its band's height so the
hover tint reads as a cell; --signal advances, --ink returns. ---------------- */
.flx-verb {
align-self: stretch;
display: inline-flex; align-items: center;
padding: 0 14px;
background: transparent; border: none; border-radius: 0;
font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
cursor: pointer;
transition: background var(--flx-dur) var(--flx-ease), color var(--flx-dur) var(--flx-ease);
}
.flx-verb--advance { color: var(--signal); } /* Next · View all · Copy */
.flx-verb--return { color: var(--ink); } /* Previous · Back */
.flx-verb:hover { background: var(--tint); color: var(--tint-ink); }
.flx-verb:active { background: var(--tint-press); color: var(--tint-ink); }
.flx-verb[disabled], .flx-verb[aria-disabled="true"] {
color: var(--ink); opacity: 0.3; background: transparent; cursor: default;
}
/* The pager: both verbs ALWAYS present — the unavailable one is inert, never hidden. */
.flx-pager { display: flex; align-items: center; height: 39px; /* it IS the card's footer strip (§6): 38 of content + the 1px rule */ background: var(--field); border-top: 1px solid var(--rule); }
.flx-drawer .flx-pager { height: 35px; }
.flx-drawer .flx-pager__range { font-size: 9px; } /* a drawer's footer strip is 34 of content */
.flx-pager__range { flex: 1; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; /* the strip's own label size — 9px inside a drawer */ letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; color: var(--ink); opacity: 0.45; }
/* ONE band, two content KINDS (§11 item 5): inert reporting about the table —
counts, freshness, survivors, an affordance line, period totals — or a pager,
whose two mono verbs are the only clickable things allowed in a strip. */
.flx-footer { /* a card's footer strip */
height: 39px; /* 38 of content + the 1px rule above — v2.5 */
display: flex;
align-items: center;
gap: 16px;
padding: 0 16px;
background: var(--field);
border-top: 1px solid var(--rule);
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
color: inherit;
opacity: 0.45;
}
.flx-footer--drawer { height: 34px; }
/* ---------------------------------------------------------------------
4. STATUS — the block. ONE geometry, 21px, everywhere.
Amendments v1.6/v1.9: the label is mono 9px UPPERCASE (smaller because it is caps —
a status is machine labelling, not a name), and the block closes with a 1px
border in its own hue — one colour per status, for the wash, the square, the border
and the label alike. Amber is #F59E0B throughout (v1.8: nothing darkens).
5+5 padding + a 9px pinned line + 1+1 border = 21px — SHORTER than every row
height in the system (33/35/41), so the block still never moves a row.
The box shrank WITH the type (v1.9): a 9px label in an 11px-padded box reads as
a chip with a hole in it.
Never a bare dot beside a word. The label IS mono uppercase (v1.6): a status is
machine labelling, not a name — while a record or a person stays body-s sentence case.
--------------------------------------------------------------------- */
.flx-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
line-height: 1;
border-radius: 0; /* the border is set by the .flx-status--* modifier, in the status hue */
}
.flx-status__sq { width: 6px; height: 6px; flex-shrink: 0; }
.flx-status__label {
font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
line-height: 1; white-space: nowrap;
}
.flx-status--credit { background: var(--credit-wash); border: 1px solid var(--credit); }
.flx-status--credit .flx-status__sq { background: var(--credit); }
.flx-status--credit .flx-status__label { color: var(--credit); }
.flx-status--pending { background: var(--pending-wash); border: 1px solid var(--pending); }
.flx-status--pending .flx-status__sq { background: var(--pending); }
.flx-status--pending .flx-status__label { color: var(--pending); }
.flx-status--debit { background: var(--debit-wash); border: 1px solid var(--debit); }
.flx-status--debit .flx-status__sq { background: var(--debit); }
.flx-status--debit .flx-status__label { color: var(--debit); }
.flx-status--info { background: var(--info-wash); border: 1px solid var(--info); } /* Draft · Ready · Staged */
.flx-status--info .flx-status__sq { background: var(--info); }
.flx-status--info .flx-status__label { color: var(--info); }
.flx-status-none { color: inherit; opacity: 0.3; } /* renders "—", never an empty wash */
.flx-keystrip { /* a legend under a table or chart */
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 10px 16px;
background: var(--field);
}
/* ---------------------------------------------------------------------
5. DIRECTION TILE — filled means the record EXISTS, outlined means STAGED.
Monochrome: the tile is --ink, its glyph --on-ink. Colour lives in the amount.
--------------------------------------------------------------------- */
.flx-tile {
width: 24px; height: 24px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--ink);
color: var(--tile-knockout, var(--on-ink));
}
.flx-tile svg { width: 15px; height: 15px; stroke-width: 1.6; } /* 0.62× */
.flx-tile--sm { width: 20px; height: 20px; }
.flx-tile--sm svg { width: 13px; height: 13px; }
.flx-tile--none { background: var(--ink-faint); }
.flx-tile--outline { /* staged: a line in a file, not yet authorised */
background: transparent;
border: 1px solid currentColor;
color: inherit;
}
.flx-tile--outline.is-invalid { color: var(--debit); }
/* ---------------------------------------------------------------------
6. THE LEDGER FIGURE — every monetary amount, at every size.
--------------------------------------------------------------------- */
.flx-figure {
display: inline-flex;
align-items: baseline;
font-family: 'Space Grotesk', sans-serif;
font-weight: 300;
letter-spacing: -0.05em;
font-variant-numeric: tabular-nums;
line-height: 1;
color: var(--ink);
font-size: 32px; /* figure-inline */
}
.flx-figure--display { font-size: 64px; } /* a card or section total */
.flx-figure--xl { font-size: 88px; } /* the hero balance — ONE per screen */
.flx-figure__sym { font-size: 0.5em; color: var(--ink-faint); margin-right: 0.06em; }
.flx-figure__sep { opacity: 0.55; } /* separators and the point, full size */
.flx-figure__cents { font-size: 0.58em; } /* same baseline, full contrast, never dropped */
.flx-figure__code { font-family: 'JetBrains Mono', monospace; font-size: 0.42em; color: var(--ink-faint); margin-left: 0.14em; letter-spacing: 0; }
.flx-figure--limit { color: var(--signal); } /* an available balance in an overlay */
.flx-figure--over { color: var(--debit); } /* over balance */
/* ---------------------------------------------------------------------
7. CONTROLS
--------------------------------------------------------------------- */
.flx-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
padding: 13px 20px;
border: 1px solid transparent;
border-radius: 2px;
cursor: pointer;
transition: background var(--flx-dur) var(--flx-ease), color var(--flx-dur) var(--flx-ease), border-color var(--flx-dur) var(--flx-ease);
}
.flx-btn--primary { background: var(--ink); color: var(--on-ink); }
.flx-btn--primary:hover { background: var(--brand); color: #ffffff; }
/* A button already filled with a hue SWAPS — it never darkens. */
.flx-btn--signal { background: var(--brand); color: #ffffff; }
.flx-btn--signal:hover { background: var(--ink); color: var(--on-ink); }
.flx-btn--danger { background: var(--debit); color: #ffffff; }
.flx-btn--danger:hover { background: var(--ink); color: var(--on-ink); }
.flx-btn--secondary { background: transparent; border-color: var(--border); color: var(--ink); }
.flx-btn--secondary:hover { background: var(--tint); color: var(--tint-ink); }
.flx-btn--tertiary { background: transparent; border-color: var(--rule); color: var(--ink); font-weight: 500; }
.flx-btn[disabled], .flx-btn.is-inert { background: var(--field); color: var(--ink-faint); cursor: default; pointer-events: none; }
.flx-field { /* the token field */
display: flex;
align-items: center;
gap: 10px;
padding: 0 13px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 1px;
transition: border-color var(--flx-dur) var(--flx-ease);
}
.flx-field__icon { flex-shrink: 0; display: flex; color: var(--ink-faint); transition: color var(--flx-dur) var(--flx-ease); }
.flx-field__icon svg { width: 18px; height: 18px; stroke-width: 1.6; }
.flx-field input, .flx-field textarea {
flex: 1; min-width: 0;
font-family: 'IBM Plex Sans', sans-serif; font-size: 14px;
padding: 11px 0;
border: none; background: transparent; color: var(--ink);
}
.flx-field input:focus, .flx-field textarea:focus { outline: none; }
/* FOCUS IS BORDER **AND** ICON. Both, always, in every field. */
.flx-field:focus-within { border-color: var(--brand); }
.flx-field:focus-within .flx-field__icon { color: var(--brand); opacity: 1; }
.flx-field:focus-within .flx-field__icon svg[fill="none"] { stroke: currentColor; }
.flx-field__marker { flex-shrink: 0; font-family: 'JetBrains Mono', monospace; font-size: 9px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: inherit; opacity: 0.45; }
.flx-field__marker.is-complete { opacity: 1; }
.flx-field__marker.is-error { opacity: 1; font-weight: 500; color: var(--debit); }
/* The amount field owns its own border state: over-balance outranks focus. */
.flx-field--amount.is-over, .flx-field--amount.is-over:focus-within { border-color: var(--debit); }
.flx-chip { /* filters, tags, date windows */
font-family: 'JetBrains Mono', monospace;
font-size: 10px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
padding: 9px 14px;
background: transparent;
border: 1px solid var(--border);
color: inherit;
cursor: pointer;
transition: background var(--flx-dur) var(--flx-ease), color var(--flx-dur) var(--flx-ease);
}
.flx-chip:hover { background: var(--tint); color: var(--tint-ink); }
.flx-chip.is-on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
/* ---------------------------------------------------------------------
8. OVERLAYS — drawer, dialog, sheet. Same header as a card.
--------------------------------------------------------------------- */
.flx-curtain {
position: absolute; inset: 0 0 0 56px; /* the rail is never curtained */
background: rgba(0, 0, 0, 0.56);
z-index: var(--flx-z-curtain);
}
.flx-drawer {
--card: var(--drawer);
--rule: var(--drawer-rule);
--hairline: var(--drawer-hairline);
--border: var(--drawer-border);
--field: var(--drawer-field);
--cell: var(--drawer-cell);
position: absolute; right: 0; bottom: 0;
width: 410px;
display: flex; flex-direction: column;
background: var(--card);
border-left: 1px solid var(--border);
z-index: var(--flx-z-overlay);
animation: flx-drawer-in var(--flx-dur) var(--flx-ease-in);
}
@keyframes flx-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.flx-dialog {
position: absolute; left: 50%; top: 50%;
width: 440px;
transform: translate(-50%, -50%);
background: var(--card);
border: 1px solid var(--border);
z-index: var(--flx-z-overlay);
animation: flx-dialog-in var(--flx-dur-overlay) var(--flx-ease);
}
@keyframes flx-dialog-in { from { transform: translate(-50%, -50%) scale(0.985); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.flx-overlay-header {
display: flex; align-items: stretch;
height: 45px; /* 44 of content + the 1px rule below — v2.5 */
flex-shrink: 0;
background: var(--field);
border-bottom: 1px solid var(--rule);
}
.flx-overlay-header__tile { /* FILLED tile — never takes --cell */
width: 44px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--ink);
color: var(--on-ink);
}
.flx-overlay-header__cell { /* the plain, unfilled variant */
width: 44px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--cell);
border-right: 1px solid var(--rule);
}
.flx-overlay-header__title {
display: flex; align-items: center; flex: 1; min-width: 0;
padding: 0 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 500;
color: var(--ink);
}
.flx-overlay-header__trail { /* the ✕ or the step count — furniture, stays at 0.62 */
width: 44px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-left: 1px solid var(--rule);
color: inherit; opacity: 0.62;
}
.flx-drawer-band { /* a list's section band inside a drawer — 34px */
display: flex; align-items: center;
height: 35px; /* 34 of content + its 1px rule — v2.5 */
background: var(--hairline);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.flx-drawer-band__cell { width: 44px; flex-shrink: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--border); }
.flx-drawer-band__name { flex: 1; padding: 0 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; }
.flx-drawer-band__count { padding-right: 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; line-height: 1; color: inherit; opacity: 0.45; }
/* A drawer's column names are 9px, not the card table's 10px. */
.flx-drawer .flx-colhead__cell { padding: 8px 16px; font-size: 9px; } /* 25px band — a drawer labels one step below a card */
.flx-popover {
background: var(--card);
border: 1px solid var(--border);
box-shadow: var(--shadow-1), var(--shadow-2);
z-index: var(--flx-z-menu);
}
.flx-popover__row {
display: flex; align-items: stretch;
min-height: 46px;
border-bottom: 1px solid var(--rule);
cursor: pointer;
transition: background var(--flx-dur) var(--flx-ease), color var(--flx-dur) var(--flx-ease);
}
.flx-popover__row:hover { background: var(--tint); color: var(--tint-ink); }
.flx-popover__row:last-child { border-bottom: none; }
.flx-popover__cell { width: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--rule); transition: background var(--flx-dur) var(--flx-ease); }
/* A row with a divided icon cell: the row tints, the CELL steps one further,
and the glyph turns Signal. One behaviour, three parts (§8 amendment v2.3). */
[data-row-icon]:hover > [data-cell],
.flx-popover__row:hover > .flx-popover__cell,
.flx-row.is-clickable:hover > .flx-card-header__cell { background: var(--tint-press); }
[data-row-icon]:hover > [data-cell] svg[fill="none"],
.flx-popover__row:hover > .flx-popover__cell svg[fill="none"] { stroke: var(--brand); opacity: 1; }
[data-row-icon]:hover > [data-cell] svg:not([fill="none"]),
.flx-popover__row:hover > .flx-popover__cell svg:not([fill="none"]) { fill: var(--brand); opacity: 1; }
[data-row-danger]:hover > [data-cell],
.flx-menu__row--danger:hover > .flx-popover__cell { background: rgba(230, 34, 0, 0.1); }
[data-row-danger]:hover > [data-cell] svg[fill="none"],
.flx-menu__row--danger:hover > .flx-popover__cell svg[fill="none"] { stroke: var(--debit); opacity: 1; }
.flx-menu { width: 240px; } /* row actions — the popover anatomy */
.flx-menu .flx-popover__row { min-height: 46px; }
.flx-menu__label { display: flex; align-items: center; padding: 0 16px; font-size: 13px; line-height: 1; }
.flx-menu__row--danger .flx-menu__label {
font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--debit); opacity: var(--gl, 0.62);
}
.flx-menu__row--danger:hover { background: rgba(230, 34, 0, 0.1); --gl: 1; }
.flx-menu__row--danger:hover .flx-menu__label { color: var(--debit); }
.flx-row__actions { /* the 44px trailing cell that opens it */
width: 44px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-left: 1px solid var(--hairline);
color: inherit; opacity: 0.62;
cursor: pointer;
transition: background var(--flx-dur) var(--flx-ease);
}
.flx-row__actions:hover { background: var(--tint-press); opacity: 1; }
/* ---------------------------------------------------------------------
9. NAVIGATION — the rail. Black bar = active destination, and nothing else.
--------------------------------------------------------------------- */
.flx-rail { width: 56px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid var(--rule); overflow: hidden; }
.flx-rail__cell {
display: flex; align-items: center;
width: 100%; height: 56px;
padding: 0;
background: none;
border: none;
border-left: 2px solid transparent; /* declare the LONGHAND in every branch */
border-left-color: transparent;
cursor: pointer;
transition: background var(--flx-dur) var(--flx-ease), color var(--flx-dur) var(--flx-ease);
}
.flx-rail__cell:hover { background: var(--tint); color: var(--tint-ink); }
.flx-rail__cell.is-active { border-left-color: var(--ink); font-weight: 500; }
.flx-rail__icon { width: 54px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.flx-rail__icon svg { width: 20px; height: 20px; stroke-width: 1.6; }
.flx-rail__cell:hover .flx-rail__icon { box-shadow: inset 0 0 0 1px currentColor; } /* the 32px square is drawn by the icon box */
/* ---------------------------------------------------------------------
10. FEEDBACK — toast, skeleton, announcement.
--------------------------------------------------------------------- */
.flx-toast { /* NEVER inverts: black surface, white ink, both themes */
position: absolute;
right: 28px;
top: 84px; /* 56px header + 28px */
width: 364px;
display: flex; align-items: stretch;
min-height: 56px;
background: #141414;
color: #ffffff;
border-radius: 2px;
box-shadow: var(--shadow-2);
animation: flx-toast-in var(--flx-dur-overlay) var(--flx-ease);
z-index: var(--flx-z-toast);
}
@keyframes flx-toast-in { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.flx-toast__tile { width: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; }
.flx-toast--success .flx-toast__tile { background: var(--brand); } /* success is BLUE here, only here */
.flx-toast--pending .flx-toast__tile { background: var(--pending); }
.flx-toast--failed .flx-toast__tile { background: var(--debit); }
.flx-toast--info .flx-toast__tile { background: var(--info); }
.flx-toast__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 0 16px; }
.flx-toast__line { font-size: 13px; line-height: 1; }
.flx-toast__detail { font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1; color: rgba(255, 255, 255, 0.55); }
.flx-toast__verb {
display: flex; align-items: center; padding: 0 16px;
border-left: 1px solid rgba(255, 255, 255, 0.16);
font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
color: #ffffff; background: none; border-top: none; border-right: none; border-bottom: none; cursor: pointer;
transition: color var(--flx-dur) var(--flx-ease);
}
.flx-toast__verb:hover { color: #a8b6ff; }
.flx-skeleton { background: var(--rule); border-radius: 0; }
.flx-skeleton--secondary { background: var(--hairline); }
.flx-skeleton-group { animation: flx-breathe 1400ms cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* on the CONTAINER, one phase */
@keyframes flx-breathe { 0% { opacity: 1; } 50% { opacity: 0.45; } 100% { opacity: 1; } }
.flx-announce { /* the dashboard's announcement slot — 169px, fixed */
position: relative;
display: flex;
height: 169px;
background: var(--tint);
color: var(--tint-ink);
overflow: hidden;
transition: height var(--flx-dur) var(--flx-ease), margin-bottom var(--flx-dur) var(--flx-ease);
}
.flx-announce.is-dismissed { height: 0; margin-bottom: -20px; } /* the gap must collapse too */
.flx-announce__close { position: absolute; right: 0; top: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; transition: background var(--flx-dur) var(--flx-ease); }
.flx-announce__close:hover { background: rgba(27, 58, 255, 0.1); }
.flx-announce__art { width: 168px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-left: 1px solid rgba(27, 58, 255, 0.14); }
/* ---------------------------------------------------------------------
11. GLASS OVER FIELD — the one exception to the tint.
--------------------------------------------------------------------- */
.flx-panel-on-field {
background: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.14);
}
.flx-glass { background: rgba(255, 255, 255, 0); transition: background var(--flx-dur) var(--flx-ease), color var(--flx-dur) var(--flx-ease); }
.flx-glass:hover { background: rgba(255, 255, 255, 0.25); color: #ffffff; }
.flx-glass:active { background: rgba(255, 255, 255, 0.34); }
.flx-glass--light:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }
.flx-glass--light:active { background: rgba(0, 0, 0, 0.09); }
/* ---------------------------------------------------------------------
12. TOUCH — no hover; the tint fires on press. 44px minimum.
--------------------------------------------------------------------- */
@media (hover: none) {
.flx-row.is-clickable:hover, .flx-chip:hover, .flx-popover__row:hover, .flx-rail__cell:hover { background: transparent; color: inherit; }
.flx-row.is-clickable:active, .flx-chip:active, .flx-popover__row:active, .flx-rail__cell:active {
background: var(--tint); color: var(--tint-ink);
transition-duration: var(--flx-dur-touch);
}
}
/* C53 COPY BUTTON — an icon, never a word. Square at its band's height (or a 44px column in a row).
JS adds .is-copied on click and removes it after 1600ms; swap the glyph to the check while it is on. No toast. */
.flx-copy { width: var(--copy-size, 44px); height: var(--copy-size, 44px); flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: none; border-left: 1px solid var(--rule); background: transparent; color: rgba(20, 20, 20, 0.62); cursor: pointer; transition: background var(--t-feedback) var(--ease), color var(--t-feedback) var(--ease); }
.flx-copy svg { width: 18px; height: 18px; stroke-width: 1.6; }
.flx-copy:hover, .flx-copy.is-hover, .flx-copy.is-copied { background: var(--tint); color: var(--brand); } /* BRAND blue, never --signal (lifts pale on dark) */
.flx-copy.is-copied svg { animation: flx-check-in 320ms var(--ease); } /* only the check animates */
@keyframes flx-check-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.flx-copy--row { height: auto; align-self: stretch; border-left-color: var(--hairline); }
.flx-copy--dark { color: rgba(255, 255, 255, 0.62); border-left-color: rgba(255, 255, 255, 0.16); }
.flx-copy--dark:hover, .flx-copy--dark.is-hover, .flx-copy--dark.is-copied { background: #eef1ff; color: #1b3aff; }