(Branch 360), BEFORE this
change: `.x360-doors` computed `flex-direction: column; align-items: center`, the six
category groups stacked as six centred rows with ragged left edges, and `.x360-door`
computed `flex-direction: column` so a gated door stacked its "1 person" badge under its
label - two door heights in one row (57 px and 32 px). Identical at 61abf7b49 (deploy
#60) and 1ce84aa24 (deploy #74), so this was never a regression of a later commit.
`:has(> .x360-doors-group)` / `:has(> .x360-door-head)` keep each rule for the shape it
was written for and take it off the shape it was not; both arms are inert today, exactly
like the kept `dt`/`dd` arm above. The skin now declares `flex-flow: row wrap` itself and
`tests/x360-doors-row-owns-its-layout.test.js` fails if either half of that pair moves. */
.x360-doors:has(> .x360-doors-group) { display: flex; flex-direction: column; gap: 8px; }
.x360-doors-group { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.x360-doors-group-name { min-width: 92px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
color: var(--nv2-text-muted, #64748b); padding-top: 7px; }
.x360-doors-list { display: flex; gap: 8px; flex-wrap: wrap; }
.x360-door:has(> .x360-door-head) { display: flex; flex-direction: column; gap: 2px; }
.x360-door-head { display: inline-flex; align-items: center; gap: 6px; }
.x360-door-btn { display: inline-flex; align-items: center; padding: 6px 12px; font-size: 13px; font-weight: 600;
border-radius: 8px; border: 1px solid var(--nv2-border, #e2e8f0); background: var(--nv2-surface, #fff); cursor: pointer; }
.x360-door-btn[disabled] { cursor: not-allowed; opacity: .55; }
.x360-door-why { width: 18px; height: 18px; line-height: 1; border-radius: 999px; cursor: pointer;
border: 1px solid var(--nv2-border, #e2e8f0); background: transparent; font-size: 11px; color: var(--nv2-text-muted, #64748b); }
.x360-door-pop { margin: 2px 0 0; max-width: 380px; font-size: 12px; color: var(--nv2-text-muted, #64748b); }
.x360-door-refused { margin: 2px 0 0; max-width: 380px; font-size: 12px; color: var(--nv2-warning, #b45309); }
.x360-badge { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; }
.x360-badge--ok { color: var(--nv2-success, #15803d); }
.x360-badge--warn { color: var(--nv2-warning, #b45309); }
.x360-badge--bad { color: var(--nv2-danger, #b91c1c); }
.x360-badge--info { color: var(--nv2-info, #1d4ed8); }
.x360-doors-refused summary { cursor: pointer; font-size: 12px; color: var(--nv2-text-muted, #64748b); }
.x360-held { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--nv2-warning, #b45309);
background: var(--nv2-warning-bg, #fffbeb); }
.x360-held-line { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--nv2-warning, #b45309); }
.x360-held-list { margin: 0; padding-left: 18px; font-size: 12.5px; }
.x360-held-open { margin-left: 8px; }
.x360-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.x360-subtab { border: 1px solid var(--nv2-border, #e2e8f0); background: transparent; cursor: pointer;
padding: 4px 10px; border-radius: 999px; font-size: 12px; }
.x360-subtab.is-active { background: var(--nv2-surface-alt, #f1f5f9); font-weight: 700; }
.x360-dims { display: flex; flex-wrap: wrap; gap: 8px; }
.x360-dim { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
border: 1px solid var(--nv2-border, #e2e8f0); background: var(--nv2-surface, #fff); font-size: 12px; }
.x360-dim-label { color: var(--nv2-text-muted, #64748b); }
.x360-dim-value { font-weight: 700; color: var(--x360-tone, inherit); }
.x360-journal { border: 1px solid var(--nv2-border, #e2e8f0); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.x360-journal-head { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; font-size: 13px; font-weight: 600; }
.x360-journal-note { margin: 2px 0 6px; font-size: 12px; color: var(--nv2-text-muted, #64748b); }
.x360-blockers { display: flex; flex-direction: column; gap: 6px; }
.x360-blocker { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; font-size: 12.5px;
padding: 6px 10px; border-radius: 8px; border: 1px solid var(--nv2-danger, #b91c1c); color: var(--nv2-danger, #b91c1c); }
.x360-stack { display: flex; flex-direction: column; gap: 12px; }
/* ═══════════════════════════════════════════════════════════════════════════
BUREAU DE CHANGE — the .bdc-* block
(bureau-design/DESIGN-PLAN.md §2, S0–S12; kit branch flow/BDC-design-kit)
WHY THIS BLOCK EXISTS. The nine bureau routes are the only pages in the
console that render no nv2-* class at all: rates.jsx was written in Tailwind
class names this estate never loads (there is no Tailwind in package.json, so
the Rate Board renders as bare HTML, 5,043px tall for six currencies), and the
other eight are generic Bootstrap-admin. The cure is to rebuild the pages out
of ~/components/v2/new — which already owns the card, the table, the form, the
pill, the stat tile and the empty state. Everything below is the FOUR THINGS
THAT KIT DOES NOT HAVE, plus the page rhythm that holds them together:
- the note ladder (.bdc-ladder / .bdc-rung)
- the foreign/sterling pair (.bdc-money-pair / .bdc-rate-chip)
- the counter status ribbon (.bdc-ribbon, over nv2-stats-grid-tight)
- the sheet in the window (.bdc-sheet, over the printed board's .board-*)
and four rules the plan states in words: a sentence never lives in a table
cell (.bdc-row-detail), a regulated sentence gets one shape (.bdc-notice), a
bureau table must not scroll at 1280 (.bdc-table { min-width: 0 } — the kit's
.nv2-table carries a 1280px floor for the ledger), and a mode switch that is
not a door uses .bdc-segmented (deliberately outside the false-doors strip
regex nav-tabs|nav-pills|nv2-tab-bar|nv2-tabstrip|nv2-cphub-tabs).
THIS FILE IS MIRRORED. app/components/v2/tokens.css is the source; the browser
loads public/styles/v2-tokens.css. They must stay byte-identical
(tests/nv2-tokens-mirror-in-sync.test.js) and root.jsx#NV2_TOKENS_VERSION is
bumped once per landing.
═══════════════════════════════════════════════════════════════════════════ */
/* -- S0. Page root and rhythm --------------------------------------------
Every bureau route returns . The gap IS the
rhythm: no p-4, no container-fluid py-3, no mb-4 stacks. */
.bdc { display: flex; flex-direction: column; gap: 20px; }
.bdc h1, .bdc h2, .bdc h3, .bdc h4, .bdc h5, .bdc h6 { margin: 0; }
.bdc p { margin: 0; }
.bdc hr { display: none; }
/* The two outcome presenters (DisplayActionResponse / ActionOutcomeBanner) keep
their exact pinned JSX and render Bootstrap alerts. They sit between the lede
and the first card, so they are made to belong rather than replaced. */
.bdc .alert {
border-radius: var(--nv2-radius);
border: 1px solid var(--nv2-line);
box-shadow: var(--nv2-shadow-xs);
font-size: 13px; line-height: 1.55;
padding: 12px 14px; margin-bottom: 0;
}
.bdc .alert-danger { border-left: 4px solid var(--nv2-danger); }
.bdc .alert-warning { border-left: 4px solid var(--nv2-warn); }
.bdc .alert-success { border-left: 4px solid var(--nv2-ok); }
.bdc .alert-info,
.bdc .alert-secondary { border-left: 4px solid var(--nv2-hub-accent, var(--nv2-brand)); }
/* -- S1. The lede bar ----------------------------------------------------
One 13px sentence capped at 76ch on the left, the page-level actions on the
right. At phone width the actions wrap under the sentence. */
.bdc-lede { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 16px; flex-wrap: wrap; }
.bdc-lede-text { flex: 1 1 320px; max-width: 76ch; font-size: 13px; line-height: 1.55; color: var(--nv2-ink-2); }
.bdc-lede-actions { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.bdc-standing { flex: 1 1 100%; max-width: 76ch; font-size: 12px; line-height: 1.5; color: var(--nv2-ink-3); }
/* -- S2. Section card ----------------------------------------------------
Every block of content on every bureau page is one of these. The card's
explanatory prose is its subtitle — never a floating text-muted paragraph. */
.bdc-section { position: relative; }
.bdc-section-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
padding: 13px 16px;
background: var(--nv2-panel-2);
border-bottom: 1px solid var(--nv2-line-2);
}
.bdc-section-head h3 {
font-family: var(--nv2-font-display);
font-size: 14px; font-weight: 700; line-height: 1.3;
color: var(--nv2-ink);
}
.bdc-section-head p { margin-top: 3px; max-width: 76ch; font-size: 12.5px; line-height: 1.55; color: var(--nv2-ink-2); }
.bdc-section-head-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.bdc-section-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
/* A table, a form or a sheet brings its own edges: the body padding would draw a
second frame inside the card. */
.bdc-section-body.is-flush { padding: 0; gap: 0; }
.bdc-section.is-danger { border-left: 4px solid var(--nv2-danger); }
.bdc-section.is-warn { border-left: 4px solid var(--nv2-warn); }
.bdc-section.is-info { border-left: 4px solid var(--nv2-hub-accent, var(--nv2-brand)); }
/* -- S3. Notice — the one shape for a regulated or standing sentence ------
Words are the service's and are never reworded here; only their typography
belongs to the designer. */
.bdc-notice {
font-size: 12.5px; line-height: 1.5;
color: var(--nv2-ink-2);
padding: 8px 12px;
border-left: 3px solid var(--nv2-hub-accent, var(--nv2-brand));
background: var(--nv2-panel-2);
border-radius: 0 var(--nv2-radius-sm) var(--nv2-radius-sm) 0;
}
.bdc-notice + .bdc-notice { margin-top: 8px; }
.bdc-notice-label {
display: block;
font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--nv2-ink-3);
margin-bottom: 3px;
}
.bdc-notice p + p { margin-top: 6px; }
.bdc-notice.is-warn { border-left-color: var(--nv2-warn); background: var(--nv2-warn-soft); color: #78350f; }
.bdc-notice.is-warn .bdc-notice-label { color: #92400e; }
.bdc-notice.is-danger { border-left-color: var(--nv2-danger); background: var(--nv2-danger-soft); color: #7f1d1d; }
.bdc-notice.is-danger .bdc-notice-label { color: #991b1b; }
.bdc-notice.is-ok { border-left-color: var(--nv2-ok); background: var(--nv2-ok-soft); color: #065f46; }
.bdc-notice.is-ok .bdc-notice-label { color: #047857; }
/* -- S4. Data table ------------------------------------------------------
.nv2-table carries a 1280px floor because the remittance ledger needs one; a
six-column bureau table must not scroll on a 1280px screen.
AND THAT SCREEN IS 848px WIDE, NOT 856. The console's content column at a
1280px browser is 1280 - 72 (rail) - 296 (hub panel) - 28 - 28 (.nv2-content
padding) = 856, LESS the 8px this sheet gives .nv2-content's scrollbar:
`.nv2-scope ::-webkit-scrollbar { width: 8px }` at the top of this file, and
.nv2-content is inside .nv2-scope (shell.jsx nests .nv2-scope > .nv2-app >
.nv2-main > .nv2-content). 856 - 8 = 848, and a card inside it is 846.
STYLING ::-webkit-scrollbar IS WHAT MAKES IT TAKE SPACE. Blink answers any
::-webkit-scrollbar declaration with a CUSTOM scrollbar, and a custom scrollbar
is never an overlay - it always occupies layout width. Measured in real desktop
Chrome on Windows (--headless=new, device scale 1) at a CSS viewport of exactly
1280: grid track 912px, scrollbar 8px, content box 848px, with an unstyled
control in the same page reading the platform's own 15px.
WHY AN EARLIER ROUND READ 856. The lab's headless Chrome reports a 0px
scrollbar even for a control carrying NO scrollbar styling at all - it
suppresses scrollbars globally - so it measures 856 and every table looks like
it fits. Nine routes were signed off that way and the owner still saw a column
off the right edge. tests/bdc-content-column-848.test.js pins this arithmetic,
the 8px included, against BOTH sheets. */
.bdc-table { min-width: 0; }
.bdc-table td.is-num, .bdc-table th.is-num { font-variant-numeric: tabular-nums; }
.bdc-table td.is-wrap { white-space: normal; max-width: 28ch; }
.bdc-table td.is-top { vertical-align: top; }
/* A second fact about a cell goes UNDER it. That is how a fifteen-column
register becomes a ten-column one without losing a fact. */
.bdc-sub {
display: block; margin-top: 2px;
font-family: var(--nv2-font-body);
font-size: 11.5px; font-weight: 500; line-height: 1.4;
color: var(--nv2-ink-3);
white-space: normal;
}
.bdc-table td.is-num .bdc-sub { font-weight: 500; }
.bdc-neg { color: #b91c1c; }
.bdc-pos { color: #047857; }
/* A SENTENCE NEVER LIVES IN A CELL. The row that carries sentences gets a detail
row directly under it, inside the same slice of HTML the row tests read. */
.bdc-row-detail > td {
padding-top: 0; padding-bottom: 12px;
background: var(--nv2-panel-2);
white-space: normal;
}
.bdc-row-detail summary {
cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
color: var(--nv2-hub-accent, var(--nv2-brand));
padding: 2px 0;
}
.bdc-row-detail summary::-webkit-details-marker { display: none; }
.bdc-row-detail details > div { margin-top: 8px; }
/* NoDataTable stays where the receipts tests pin it, and reads as the empty card. */
.bdc-table tfoot td, .bdc-table td.bdc-empty-cell {
padding: 34px 16px;
text-align: center;
font-size: 13px; line-height: 1.55;
color: var(--nv2-ink-3);
background: var(--nv2-panel-2);
white-space: normal;
}
/* -- S6. Filters, and the mode switch that is not a door -----------------
A GET form of labelled fields and one Show button, in the lede's right slot or
as the first row of the card it filters. */
.bdc-filters { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.bdc-filters .nv2-field { min-width: 150px; }
.bdc-filters .nv2-field-label { font-size: 12px; }
.bdc-section-body > .bdc-filters { padding-bottom: 2px; }
/* .bdc-segmented is a MODE SWITCH, not navigation: it changes which form the one
card shows and never the URL, so it is deliberately outside the false-doors
strip regex and needs no page-tab-strips.js entry. */
.bdc-segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--nv2-bg-2); border-radius: 999px; }
.bdc-segmented button {
border: 0; background: transparent; cursor: pointer;
padding: 6px 14px; border-radius: 999px;
font-family: inherit; font-size: 12.5px; font-weight: 600;
color: var(--nv2-ink-2);
transition: all 120ms ease;
}
.bdc-segmented button:hover { color: var(--nv2-ink); }
.bdc-segmented button.is-active {
background: white; color: var(--nv2-hub-accent, var(--nv2-brand));
box-shadow: var(--nv2-shadow-xs);
}
/* -- S8. Forms -----------------------------------------------------------
One layout: FormCard > Fieldset > FieldRow > Field > input > FormFooter. */
.bdc-form-narrow { max-width: 720px; }
.bdc .nv2-form-footer { flex-wrap: wrap; gap: 10px; }
.bdc .nv2-form-footer > :first-child { max-width: 66ch; font-size: 12px; line-height: 1.5; color: var(--nv2-ink-2); }
/* A destructive press is an outline until the confirm step, where it fills. */
.bdc-btn-danger-solid {
background: var(--nv2-danger); border-color: var(--nv2-danger); color: white;
}
.bdc-btn-danger-solid:hover { background: #dc2626; border-color: #dc2626; color: white; }
/* A per-row editor (the counter register, Receive an order) is a disclosure, so
the form stays in the markup — closed — for the readers that assert on it. */
.bdc-disclosure > summary {
cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700;
color: var(--nv2-hub-accent, var(--nv2-brand));
}
.bdc-disclosure > summary::-webkit-details-marker { display: none; }
.bdc-disclosure[open] > summary { margin-bottom: 10px; }
/* The chosen customer: the read-only name the teller reads, with Clear beside it. */
.bdc-picker { display: flex; align-items: stretch; gap: 8px; }
.bdc-picker .nv2-field-input { flex: 1 1 auto; min-width: 0; }
/* Find a customer: one labelled box that takes the room the row has, then its press. */
.bdc-find .nv2-field { flex: 1 1 260px; max-width: 480px; }
/* A confirmation the ROUTE writes itself (bdc-fix-r4-till reads its name out of
the route's own source), placed by the kit: the box, then the sentence. */
.bdc-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: var(--nv2-ink-2); cursor: pointer; }
.bdc-check input { margin-top: 2px; flex-shrink: 0; }
/* -- S10a. The note ladder -----------------------------------------------
The rungs are the currency's own (bureau-note-ladder), so the tiles wrap and
the count is the only thing the teller types. */
.bdc-ladder { display: flex; flex-direction: column; gap: 10px; }
.bdc-ladder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.bdc-rung {
display: flex; flex-direction: column; gap: 5px;
padding: 10px 12px;
border: 1px solid var(--nv2-line);
border-radius: var(--nv2-radius-sm);
background: var(--nv2-panel);
}
.bdc-rung-face { font-family: var(--nv2-font-display); font-size: 18px; font-weight: 700; line-height: 1; color: var(--nv2-ink); }
.bdc-rung input { width: 100%; }
.bdc-ladder-total {
display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
padding: 9px 12px;
border-radius: var(--nv2-radius-sm);
background: var(--nv2-bg-2);
font-size: 12.5px; color: var(--nv2-ink-2);
}
.bdc-ladder-empty { font-size: 12.5px; color: var(--nv2-ink-3); }
/* -- S10b. The foreign / sterling pair -----------------------------------
Two money boxes with the rate stated between them, so what the customer hands
over and what they get back are read as one act. */
.bdc-money-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 12px; }
.bdc-rate-chip {
align-self: center; margin-top: 18px;
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px;
border: 1px solid var(--nv2-line);
background: var(--nv2-panel-2);
font-family: var(--nv2-font-mono);
font-size: 12px; font-weight: 700; white-space: nowrap;
color: var(--nv2-ink-2);
}
/* -- S10c. The counter status ribbon -------------------------------------
Facts the loader already gives — never a computed money figure. */
.bdc-ribbon .nv2-stat-card { cursor: default; }
.bdc-ribbon .bdc-notice { margin-top: 8px; }
/* Definition strips: the customer's facts, the vault's paying-in list. */
.bdc-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.bdc-fact-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nv2-ink-3); }
.bdc-fact-value { font-size: 13px; font-weight: 600; color: var(--nv2-ink); }
.bdc-dl { display: flex; flex-direction: column; gap: 8px; }
.bdc-dl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--nv2-line-2); }
.bdc-dl-row:last-child { border-bottom: 0; padding-bottom: 0; }
.bdc-dl-row .is-id { font-family: var(--nv2-font-display); font-weight: 700; }
.bdc-dl-row .is-num { font-variant-numeric: tabular-nums; font-weight: 700; }
.bdc-two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
/* -- S10d. The sheet in the window ---------------------------------------
The Rate Board's "What customers will see" renders the PRINTED BOARD's own
markup at two thirds, so the preview and the paper cannot drift: the .board-*
rules below are the printer route's, moved here for both to share. */
.bdc-sheet { background: var(--nv2-bg-2); padding: 16px; display: flex; justify-content: center; }
.bdc-sheet .board-page {
width: 100%; max-width: 640px; min-height: 0;
margin: 0; padding: 18px 20px;
box-shadow: var(--nv2-shadow-sm);
border-radius: var(--nv2-radius-sm);
}
.bdc-sheet h1.board-title { font-size: 23px; }
.bdc-sheet .board-subtitle { font-size: 11px; }
.bdc-sheet table.board-tbl td.ccy { font-size: 14px; }
.bdc-sheet table.board-tbl td.num { font-size: 15px; }
.bdc-sheet table.board-tbl td { padding: 6px 7px; }
.bdc-sheet .board-empty { padding: 20px 16px; }
.bdc-sheet .board-empty p { font-size: 12.5px; }
.bdc-sheet .board-masthead .brand img { height: 22px; }
/* -- S12. Responsive — the page is one column at phone width --------------
The shell collapses its rail at 900px. */
@media (max-width: 991px) {
.bdc-two-up { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.bdc-money-pair { grid-template-columns: 1fr; }
.bdc-rate-chip { margin-top: 0; justify-self: start; }
}
@media (max-width: 640px) {
.bdc { gap: 16px; }
.bdc .nv2-field-row, .bdc .nv2-field-row.is-thirds { grid-template-columns: 1fr; }
.bdc-lede-actions { margin-left: 0; width: 100%; }
.bdc-filters .nv2-field { min-width: 0; flex: 1 1 140px; }
.bdc-ladder-grid { grid-template-columns: 1fr 1fr; }
.bdc-section-head { flex-direction: column; }
.bdc-facts { gap: 10px 18px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
THE PRINTED RATE BOARD — .board-page / .board-* (design plan §3.10, S10)
These rules were the /printer/bureau-rate-board route's own