/* ─────────────────────────────────────────────────────────────────────────────────────────────
   Branches and stock between them — branch_transfers.css v1.0.6 (spec 038, TASK-2026-110; UI lane U2)

   Every rule here is the approved mockups' (scratch/mockups/038-m1 to 038-m7, approved by the owner 2026-10-04) carried over with
   the feature's own prefixes: br- (a branch: card, bar, menu, chip), trf- and tb- (a transfer and its builder), rcv- (receiving),
   tn- (the printed transfer note), ov- (the overview), tg- (the colour by size grid) and bx- (the pieces they share: the dialog, the
   table, the panel, the notice, the status words). It lives beside offline_tills.css and is linked after app.css, because the app
   sheet's tail is guarded by hash tests and the other lanes append to it.

   Rules this file keeps: tokens only (the few brand values the mockups drew are declared once, below, per theme); logical sides for
   layout and physical ones only for a drawn shape that must point the same way in both directions; nothing toggled with the hidden
   attribute is given an explicit display; dialogs fold on their own width (container queries), never on the screen's.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

:root {
  --bx-well: var(--surface);
  --bx-tint: var(--tint);
  --bx-rule: var(--line);
  --bx-fill-hover: var(--fill-hover, var(--brand));
  --bx-muted: var(--text-muted);
  --bx-paper-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 12px 32px rgba(0, 0, 0, 0.18);
}
html[data-theme="retailpower"] {
  --bx-well: #F9F8F6; --bx-tint: #EEF7F8; --bx-rule: #C7E3E7; --bx-fill-hover: #21525C;
  --bx-paper-shadow: 0 1px 2px rgba(29, 45, 62, 0.06), 0 12px 32px rgba(29, 45, 62, 0.10);
  /* small grey text reaches 4.5:1 here (the app's muted grey measures 3.3:1 on white) */
  --bx-muted: #5B6F84;
}
html[data-theme="retailpower-dark"] {
  --bx-well: var(--surface); --bx-tint: rgba(80, 180, 191, 0.08); --bx-rule: rgba(80, 180, 191, 0.28); --bx-fill-hover: #327C8C;
  --bx-paper-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 36px rgba(0, 0, 0, 0.45);
}

/* the wrapper every view of this feature stands in: the container its own narrow-width rules ask about */
.bx-view { container-type: inline-size; container-name: bx; display: flex; flex-direction: column; gap: 22px; font-size: 14px; min-width: 0; }
.bx-view > * { flex: none; min-width: 0; }
.bx-n { font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; }
.bx-money { white-space: nowrap; }
.bx-bag { width: 28px; height: 32px; flex: none; color: var(--bx-muted); }
.bx-code { font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 600; letter-spacing: .02em; }
/* the (i) of a card stands in its top inline-end corner (info_tip.js draws the button; info_corner.css describes the rule) */
.bx-corner { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; margin: 0; z-index: 3; }

/* the sidebar: a numeric badge beside Stock Tracking and on the Stock section while it is closed */
.bx-navcount { display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px;
  background: var(--fill); color: #fff; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 11.5px; font-weight: 700; line-height: 1; margin-inline-start: auto; flex: none; }
.nav-item .bx-navcount { margin-inline-start: auto; }
.nav-section-label .bx-navcount { margin-inline-start: 6px; }


/* the branch bar at the foot of the sidebar: the active branch, a menu for Owner and Admin, plain text for everyone else */
.br-bar { position: relative; padding: 10px 14px 0; border-top: 1px solid var(--line); background: var(--sunken); }
.br-switch { display: flex; align-items: center; gap: 10px; inline-size: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 2px; background: var(--surface); color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.br-switch:hover { border-color: var(--border-active); }
.br-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.br-switch.is-static { cursor: default; background: transparent; border-color: transparent; padding-inline: 4px; }
.br-switch-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.35; }
.br-switch-label { font-size: 11px; color: var(--muted); }
.br-switch-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-switch > i { font-size: 11px; color: var(--bx-muted); flex: none; }
.br-switch .br-pin { color: var(--brand); font-size: 13px; }

/* the branch menu (shared by the sidebar bar and the header chip on a phone) */
.br-menu { position: fixed; z-index: 1200; inline-size: 264px; max-inline-size: calc(calc(100 * var(--vw)) - 24px); box-sizing: border-box; padding: 6px 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow-float); }
.br-menu-h { padding: 6px 14px 6px; font-size: 12px; color: var(--bx-muted); }
.br-menu button { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; inline-size: 100%; padding: 9px 14px; border: 0; background: none;
  font: inherit; font-size: 14px; color: var(--text); text-align: start; cursor: pointer; }
.br-menu button:hover, .br-menu button:focus-visible { background: var(--tint); outline: none; }
.br-menu button[aria-checked="true"] { font-weight: 700; }
.br-menu button i { color: var(--brand); font-size: 12px; }
.br-menu .bx-code { font-size: 12px; color: var(--bx-muted); font-weight: 600; }
.br-menu-sep { block-size: 1px; margin: 4px 0; background: var(--line); }

/* the branch chip in the header: which branch this page is reading */
.br-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-inline-size: 260px; padding: 3px 10px; border: 1px solid var(--bx-rule);
  border-radius: 2px; background: var(--bx-tint); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; flex: 0 1 auto; }
.br-chip > i { font-size: 11px; color: var(--brand); flex: none; }
.br-chip > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
button.br-chip { cursor: pointer; }
.br-phone-chip { display: none; }
/* On a phone the fixed header has no room for the chip, so it stands on its own row under the header; the page's own top margin (which clears the fixed header) moves to the row. */
@media (max-width: 768px) {
  .top-header .br-chip { display: none; }
  .br-phone-chip { display: flex; margin-top: var(--header-height); padding: 8px 16px 0; }
  .br-phone-chip .br-chip { max-inline-size: 100%; }
  .br-phone-chip + .main-content { margin-top: 0; }
}
button.br-chip:hover { border-color: var(--border-active); }
.br-chip.is-all { border-color: var(--border-active); }
/* in a shop with several branches the chip stands in the header where the store badge stood; the store's name stays in the sidebar footer */
html.has-branch-chip #company-store-badge { display: none; }
.br-bar + .sidebar-footer { border-top: 0; }
.sidebar.collapsed .br-bar { padding-inline: 8px; }
.sidebar.collapsed .br-switch-text, .sidebar.collapsed .br-switch > i:not(.br-pin) { display: none; }
.sidebar.collapsed .br-switch { justify-content: center; padding-inline: 4px; }


/* ─────────────── dialogs, quieter ─────────────── */
.modal-card.bx-dlg { background: var(--surface); container-type: inline-size; --bx-field: 44px; box-shadow: var(--shadow-float); }
.bx-dlg.is-sm { max-width: 460px; }
.bx-dlg.is-md { max-width: 720px; }
.bx-dlg.is-lg { max-width: 1040px; }
.bx-dlg .modal-header { padding: 18px 24px; gap: 12px; }
.bx-dlg .modal-header h3 { font-size: 17px; font-weight: 700; }
.bx-dlg .modal-header .bx-head-end { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.bx-dlg .modal-body { padding: 20px 24px; font-size: 14px; display: flex; flex-direction: column; gap: 18px; }
.bx-dlg .modal-footer { padding: 16px 24px; gap: 12px; flex-wrap: wrap; }
.bx-dlg label.bx-lab, .bx-lab { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; text-transform: none; letter-spacing: normal; }
.bx-lab .bx-opt { font-weight: 400; color: var(--bx-muted); }
.bx-dlg select, .bx-dlg input:not([type="checkbox"]):not([type="radio"]), .bx-dlg textarea, .bx-field-ctl {
  block-size: var(--bx-field, 44px); min-height: var(--bx-field, 44px); inline-size: 100%; box-sizing: border-box;
  font: inherit; font-size: 14px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--text); }
.bx-dlg textarea { padding: 10px 12px; resize: none; line-height: 1.6; }
.bx-dlg input:focus-visible, .bx-dlg select:focus-visible, .bx-dlg textarea:focus-visible, .bx-field-ctl:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--border-active); }
.bx-dlg input[aria-invalid="true"] { border-color: var(--danger); }
.bx-field-err { margin: 6px 0 0; font-size: 13px; color: var(--danger); display: flex; gap: 8px; align-items: baseline; }
.bx-field-err:empty { display: none; }
.bx-for { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.75; }
.bx-for b { color: var(--text); }
/* a two-column field grid of the dialog's own, folding on the dialog's width (never .form-row) */
.bx-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.bx-fgrid .is-wide { grid-column: 1 / -1; }
@container (max-width: 520px) { .bx-fgrid { grid-template-columns: minmax(0, 1fr); } .bx-dlg .modal-body, .bx-dlg .modal-header, .bx-dlg .modal-footer { padding-inline: 18px; } }

/* a notice: the rule a screen enforces, or a refusal */
.bx-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 14px 16px; border: 1px solid var(--line);
  border-inline-start: 3px solid var(--brand); border-radius: 2px; background: var(--bx-well); }
.bx-notice > i { margin-top: 5px; color: var(--brand); }
.bx-notice b { font-size: 14px; color: var(--text); }
.bx-notice p { grid-column: 2; margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--muted); }
.bx-notice ul { grid-column: 2; margin: 2px 0 0; padding-inline-start: 18px; font-size: 13.5px; line-height: 1.85; color: var(--text); }
.bx-notice .bx-notice-act { grid-column: 2; display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.bx-notice.is-bad { border-inline-start-color: var(--danger); background: var(--danger-tint); }
.bx-notice.is-bad > i { color: var(--danger); }
.bx-notice.is-warn { border-inline-start-color: var(--warning); background: var(--warning-tint); }
.bx-notice.is-warn > i { color: var(--warning); }
.bx-notice.is-ok { border-inline-start-color: var(--success); background: var(--success-tint); }
.bx-notice.is-ok > i { color: var(--success); }

/* ─────────────── tables ─────────────── */
.bx-tablewrap { overflow-x: auto; min-width: 0; }
.bx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bx-table caption { text-align: start; padding: 0 0 8px; font-size: 13px; color: var(--bx-muted); caption-side: top; }
.bx-table thead { position: static; background: transparent; }
.bx-table thead th { position: static !important; background: transparent !important; box-shadow: none; }
.bx-table th { text-transform: none; letter-spacing: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 10px 14px;
  border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; }
.bx-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--text); vertical-align: middle; white-space: nowrap; }
.bx-table tbody tr:last-child td { border-bottom: 0; }
.bx-table tbody tr:hover { background: var(--tint); }
.bx-table .is-end { text-align: end; }
.bx-table tfoot td { font-weight: 700; border-top: 1px solid var(--line); border-bottom: 0; background: var(--bx-well); }
.bx-ref { font-family: 'Outfit', 'Cairo', sans-serif; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text); }
.bx-muted { color: var(--bx-muted); }
.bx-sub { color: var(--muted); }
.bx-cell-2 { display: flex; flex-direction: column; gap: 1px; line-height: 1.45; }
.bx-cell-2 small { font-size: 12.5px; color: var(--bx-muted); }
.bx-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--line); }
.bx-pager .bank-ledger-count { font-size: 13px; color: var(--muted); }
.bx-pager .bank-ledger-pager { display: inline-flex; align-items: center; gap: 10px; }
.bx-pager .bx-page-of { font-size: 13px; color: var(--muted); min-width: 44px; text-align: center; }

/* status: shape, colour and word together */
.bx-st { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.bx-st::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; flex: none; }
.bx-st.is-ok { color: var(--success); }
.bx-st.is-road { color: var(--info); }
.bx-st.is-warn { color: var(--warning); }
.bx-st.is-warn::before { border-radius: 1px; }
.bx-st.is-bad { color: var(--danger); }
.bx-st.is-bad::before { border-radius: 1px; transform: rotate(45deg); }
.bx-st.is-off { color: var(--bx-muted); }
.bx-st.is-off::before { background: transparent; border: 1.5px solid currentColor; box-sizing: border-box; }

/* a mark: Stuck, Difference — a word with a frame, never colour alone */
.bx-mark { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 2px; font-size: 12.5px; font-weight: 700; white-space: nowrap; line-height: 1.7;
  border: 1px solid currentColor; }
.bx-mark i { font-size: 10.5px; }
.bx-mark.is-bad { color: var(--danger); background: var(--danger-tint); }
.bx-mark.is-warn { color: var(--warning); background: var(--warning-tint); }
.bx-mark.is-quiet { color: var(--muted); background: transparent; border-color: var(--line); font-weight: 600; }

/* percent received: the fill grows from the start edge in both directions */
.bx-prog { display: flex; align-items: center; gap: 10px; min-inline-size: 140px; }
.bx-prog-bar { flex: 1 1 auto; block-size: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; display: flex; min-inline-size: 60px; }
.bx-prog-bar > span { display: block; block-size: 100%; background: var(--fill); }
.bx-prog-bar.is-bad > span { background: var(--danger); }
.bx-prog b { font-family: 'Outfit', 'Cairo', sans-serif; font-size: 13px; font-weight: 600; min-inline-size: 38px; text-align: end; }

/* a panel: a list on a white card */
.bx-panel { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; min-width: 0; }
.bx-panel-h { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bx-panel-h h2 { margin: 0; font-size: 15px; font-weight: 700; }
.bx-panel-h .bx-panel-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bx-panel-b { padding: 18px; }
.bx-empty { display: flex; align-items: center; gap: 16px; padding: 34px 22px; font-size: 14.5px; color: var(--muted); flex-wrap: wrap; }
.bx-empty .bx-bag { width: 34px; height: 38px; }
.bx-empty-text { flex: 1 1 260px; min-width: 0; line-height: 1.7; }
.bx-empty .btn { flex: none; }

/* the page's own toolbar */
.bx-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.bx-toolbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bx-h1 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.4; }
.bx-h1-row { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.bx-back { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.bx-back:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.bx-back i { font-size: 12px; }

/* segmented sub-views inside a tab (Incoming / Outgoing / On the road) */
.bx-subtabs { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); overflow: hidden; max-width: 100%; }
.bx-subtabs button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 8px 16px; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.bx-subtabs button + button { border-inline-start: 1px solid var(--line); }
.bx-subtabs button[aria-selected="true"] { background: var(--tint); color: var(--brand); font-weight: 700; }
.bx-subtabs button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.bx-subtabs .bx-tab-n { font-family: 'Outfit', 'Cairo', sans-serif; font-size: 12.5px; font-weight: 700; color: inherit; opacity: .85; }

/* Stock Tracking: the strip gains a fifth tab (Between branches) only in a shop with two or more branches */
.inventory-tabs.has-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.inventory-tab-btn .bx-navcount { margin-inline-start: 6px; }
@media (max-width: 900px) {
  .inventory-tabs.has-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; }
  .inventory-tabs.has-5 .inventory-tab-btn { min-height: 42px; }
}

/* a refusal page: the server said no (403) */
.bx-refuse { max-inline-size: 620px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; padding: 28px 28px; background: var(--surface);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--danger); border-radius: 2px; }
.bx-refuse > i { grid-row: span 3; font-size: 20px; color: var(--danger); margin-top: 3px; }
.bx-refuse h2 { margin: 0; font-size: 17px; font-weight: 700; }
.bx-refuse p { margin: 0; color: var(--muted); line-height: 1.75; }
.bx-refuse .bx-code { color: var(--bx-muted); font-size: 12.5px; }

/* figures in a row: a label above a number, separated by space, not boxes */
.bx-figs { display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 0; }
.bx-figs > div { min-width: 0; }
.bx-figs dt { font-size: 12.5px; color: var(--bx-muted); margin: 0 0 2px; }
.bx-figs dd { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; }
.bx-figs dd.is-text { font-family: 'Cairo', sans-serif; font-size: 15px; }
.bx-figs dd small { font-size: 12.5px; font-weight: 400; color: var(--bx-muted); margin-inline-start: 4px; }

/* a definition list of facts in a dialog */
.bx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.bx-facts dt { font-size: 12.5px; color: var(--bx-muted); }
.bx-facts dd { margin: 2px 0 0; font-weight: 600; }
@container (max-width: 520px) {
  .bx-facts { grid-template-columns: minmax(0, 1fr); }
  .bx-dlg .bx-table td { white-space: normal; padding: 11px 8px; }
}

/* steppers: minus, number, plus — one field height */
.bx-step { display: inline-grid; grid-template-columns: 36px 64px 36px; block-size: 40px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); }
.bx-step button { border: 0; background: none; color: var(--muted); font: inherit; font-size: 15px; cursor: pointer; display: grid; place-items: center; }
.bx-step button:hover:not(:disabled) { background: var(--tint); color: var(--text); }
.bx-step button:disabled { opacity: .35; cursor: default; }
.bx-step button:focus-visible, .bx-step input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.bx-step input { border: 0; border-inline: 1px solid var(--line); background: none; text-align: center; font: inherit; font-family: 'Outfit', 'Cairo', sans-serif;
  font-size: 15px; font-weight: 600; color: var(--text); inline-size: 100%; box-sizing: border-box; padding: 0; -moz-appearance: textfield; }
.bx-step input::-webkit-outer-spin-button, .bx-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bx-step.is-bad { border-color: var(--danger); }
.bx-step.is-bad input { color: var(--danger); }

/* a segmented choice (Missing / Damaged; Found / Return / Write off) */
.bx-choice { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--surface); max-width: 100%; flex-wrap: wrap; }
.bx-choice label { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13.5px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.bx-choice label + label { border-inline-start: 1px solid var(--line); }
.bx-choice input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.bx-choice label:has(input:checked) { background: var(--tint); color: var(--brand); font-weight: 700; }
.bx-choice label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.bx-choice.is-need { border-color: var(--danger); }

/* ─────────────── branches (Settings › Branches) ─────────────── */
.br-plan { position: relative; display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; padding: 18px 20px; padding-inline-end: 52px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px; }
.br-plan-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.br-plan-text b { font-size: 15px; }
.br-plan-text span { font-size: 13px; color: var(--muted); }
.br-plan-meter { display: flex; gap: 4px; align-items: center; }
.br-plan-meter span { inline-size: 22px; block-size: 8px; border-radius: 2px; background: var(--sunken); }
.br-plan-meter span.is-used { background: var(--fill); }
.br-plan-meter span.is-over { background: var(--warning); }
.br-plan-act { margin-inline-start: auto; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; justify-content: flex-end; }
.br-plan-why { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--muted); max-inline-size: 380px; line-height: 1.6; }
.br-plan-why i { color: var(--warning); font-size: 12px; }
.br-plan.is-full { border-inline-start: 3px solid var(--warning); }

.br-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.br-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 2px; min-width: 0; }
.br-card.is-new { border-color: var(--border-active); box-shadow: inset 0 0 0 1px var(--border-active); }
.br-card.is-archived { background: var(--bx-well); }
.br-card-h { display: flex; align-items: flex-start; gap: 12px; padding-inline-end: 34px; }
.br-arch { flex: none; color: var(--brand); margin-top: 3px; }
.br-arch svg { inline-size: 22px; block-size: 24px; display: block; }
.br-card-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.br-card-name h3 { margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.br-card-name .br-other { font-size: 13px; color: var(--muted); }
.br-tags { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.br-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 7px; border: 1px solid var(--line);
  border-radius: 2px; line-height: 1.8; }
.br-tag.is-primary { color: var(--brand); border-color: var(--border-active); background: var(--tint); }
.br-contact { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.br-contact > span { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
.br-contact i { inline-size: 14px; font-size: 12px; color: var(--bx-muted); flex: none; }
.br-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.br-facts dt { font-size: 12px; color: var(--bx-muted); }
.br-facts dd { margin: 2px 0 0; font-size: 17px; font-weight: 700; font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; }
.br-facts dd.is-road { color: var(--info); }
.br-facts dd.is-zero { color: var(--bx-muted); font-weight: 600; }
/* TASK-2026-129: the branch's own logo and brand name, inside its card (the (i) sits in this section's own top inline-end corner; the card's corner is the menu's) */
.br-brand { position: relative; display: flex; flex-direction: column; gap: 12px; padding-block-start: 14px; border-block-start: 1px solid var(--line); --br-field: 36px; }
.br-brand-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text); }
.br-brand-logo { display: flex; align-items: center; gap: 14px; min-width: 0; }
.br-logo-slot { flex: none; display: grid; place-items: center; inline-size: 72px; block-size: 56px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface);
  color: var(--bx-muted); font-size: 18px; overflow: hidden; }
.br-logo-slot img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; display: block; }
.br-logo-slot.is-shop { background: var(--bx-well); border-style: dashed; }
.br-logo-side { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.br-logo-state { font-size: 12.5px; color: var(--bx-muted); }
.br-brand-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* TASK-2026-145: the upload button with its reason beside it, and the one storage meter above the cards */
.br-brand-up { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-width: 0; }
.br-brand-up .pus-note { flex: 1 1 240px; }
.br-brand-up .btn { min-block-size: var(--br-field); }
.br-storage { padding: 14px 18px; margin-block-end: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; }
.br-logo-slot img[src$="logo.svg?v=1.0.0"] { opacity: .85; }
.br-brand-acts .btn { min-block-size: var(--br-field); }
.br-brand-lab { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-block-end: 6px; }
.br-brand-ro { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.br-brand-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; min-width: 0; }
.br-brand-input { flex: 1 1 200px; min-inline-size: 0; block-size: var(--br-field); box-sizing: border-box; font: inherit; font-size: 14px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 2px; background: var(--surface); color: var(--text); }
.br-brand-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--border-active); }
.br-brand-edit .btn { flex: none; min-block-size: var(--br-field); }
.br-more { position: absolute; top: 14px; inset-inline-end: 12px; inline-size: 32px; block-size: 32px; padding: 0; border: 0; border-radius: 2px; background: none;
  color: var(--bx-muted); cursor: pointer; display: grid; place-items: center; font-size: 14px; }
.br-more:hover, .br-more[aria-expanded="true"] { background: var(--tint); color: var(--text); }
.br-more:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.bx-menu { position: absolute; top: 48px; inset-inline-end: 12px; z-index: 40; min-inline-size: 210px; padding: 4px 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: 2px; box-shadow: none; }
.bx-menu button { display: flex; align-items: center; gap: 10px; inline-size: 100%; padding: 9px 14px; border: 0; background: none; font: inherit; font-size: 13.5px;
  color: var(--text); text-align: start; cursor: pointer; }
.bx-menu button i { inline-size: 14px; color: var(--bx-muted); font-size: 12px; }
.bx-menu button:hover, .bx-menu button:focus-visible { background: var(--tint); outline: none; }
.bx-menu button.is-danger, .bx-menu button.is-danger i { color: var(--danger); }
.bx-menu-sep { display: block; block-size: 1px; margin: 4px 0; background: var(--line); }
.br-one-line { display: flex; align-items: center; gap: 14px; padding: 4px 2px; color: var(--muted); font-size: 14px; }

/* settings tabs as settings.js draws them */

/* ─────────────── transfers ─────────────── */
.trf-route { display: inline-flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.trf-route .trf-arrow { font-size: 11px; color: var(--bx-muted); }
html[dir="rtl"] .trf-route .trf-arrow { transform: scaleX(-1); }
.trf-days { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trf-acts { display: flex; gap: 8px; justify-content: flex-end; }

/* the builder: lines on the start side, stock in other branches on the end side */
.tb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.tb-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tb-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; padding: 20px; padding-inline-end: 52px; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; position: relative; }
.tb-route.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-fixed { display: flex; flex-direction: column; justify-content: center; block-size: 44px; padding: 0 2px; font-weight: 700; font-size: 15px; }
.tb-add { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.tb-search { position: relative; flex: 1 1 320px; min-width: 0; }
.tb-search i { position: absolute; top: 50%; inset-inline-start: 14px; translate: 0 -50%; color: var(--bx-muted); font-size: 13px; }
.tb-search input { inline-size: 100%; block-size: 44px; box-sizing: border-box; padding-inline: 40px 12px; font: inherit; font-size: 14px; border: 1px solid var(--line);
  border-radius: 2px; background: var(--surface); color: var(--text); }
.tb-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; }
.tb-results { position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; box-shadow: none; padding: 4px 0; }
.tb-results button { display: flex; justify-content: space-between; gap: 12px; inline-size: 100%; padding: 9px 14px; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--text); text-align: start; cursor: pointer; }
.tb-results button:hover, .tb-results button:focus-visible { background: var(--tint); outline: none; }
.tb-results button span:last-child { color: var(--bx-muted); white-space: nowrap; }
.tb-lines td.c-qty { inline-size: 150px; }
.tb-lines tbody tr { cursor: pointer; }
.tb-lines tbody tr.is-sel { background: var(--tint); }
.tb-lines tbody tr.is-sel td:first-child { box-shadow: inset 0 0 0 0 transparent; border-inline-start: 3px solid var(--brand); }
.tb-lines th, .tb-lines td { padding-inline: 10px; }
.tb-lines td:first-child { white-space: normal; min-inline-size: 140px; }
.tb-lines th { white-space: normal; }
.tb-lines td.c-rm { inline-size: 44px; }
.tb-rm { inline-size: 32px; block-size: 32px; border: 0; background: none; border-radius: 2px; color: var(--bx-muted); cursor: pointer; display: grid; place-items: center; }
.tb-rm:hover { background: var(--danger-tint); color: var(--danger); }
.tb-avail { font-family: 'Outfit', 'Cairo', sans-serif; font-variant-numeric: tabular-nums; }
.tb-over { display: block; margin-top: 4px; font-size: 12.5px; color: var(--danger); white-space: normal; }
.tb-foot { position: sticky; inset-block-end: 0; z-index: 5; display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 14px 18px;
  background: var(--surface); border-top: 1px solid var(--line); }
.tb-total { display: flex; gap: 22px; align-items: baseline; flex-wrap: wrap; margin-inline-end: auto; font-size: 14px; color: var(--muted); }
.tb-total b { font-size: 18px; color: var(--text); font-family: 'Outfit', 'Cairo', sans-serif; margin-inline-end: 6px; }
.tb-foot-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.tb-saved { font-size: 13px; color: var(--bx-muted); }
.tb-side { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; }
.tb-side-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; padding-inline-end: 50px; border-bottom: 1px solid var(--line); }
.tb-side-h h2 { margin: 0; font-size: 14.5px; font-weight: 700; }
.tb-side-item { padding: 14px 16px 6px; font-size: 13.5px; font-weight: 600; }
.tb-side-item small { display: block; font-weight: 400; color: var(--bx-muted); font-size: 12.5px; }
.tb-side-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 16px; border-top: 1px solid var(--line); align-items: baseline; }
.tb-side-row b { font-size: 13.5px; }
.tb-side-row small { grid-column: 1; font-size: 12.5px; color: var(--bx-muted); }
.tb-side-row .bx-n { font-size: 16px; font-weight: 700; grid-row: span 2; }
.tb-side-row.is-zero .bx-n { color: var(--bx-muted); font-weight: 600; }
.tb-side-empty { padding: 16px; font-size: 13.5px; color: var(--muted); }
@container bx (max-width: 980px) { .tb-layout { grid-template-columns: minmax(0, 1fr); } .tb-route { grid-template-columns: minmax(0, 1fr); } .tb-route.is-two { grid-template-columns: minmax(0, 1fr); } }

/* the colour × size grid in transfer mode (variant_grid.js order mode, the source's pieces in each cell) */
.tg-wrap { overflow-x: auto; }
.tg { border-collapse: collapse; font-size: 14px; min-inline-size: 100%; }
.tg th, .tg td { border: 1px solid var(--line); padding: 8px 10px; text-align: center; }
.tg thead th { font-size: 12.5px; color: var(--muted); font-weight: 600; background: var(--bx-well); }
.tg th.tg-colour { text-align: start; font-weight: 600; white-space: nowrap; background: var(--bx-well); }
.tg td { min-inline-size: 86px; }
.tg-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tg-cell input { inline-size: 60px; block-size: 36px; text-align: center; border: 1px solid var(--line); border-radius: 2px; font: inherit; font-family: 'Outfit', 'Cairo', sans-serif;
  font-size: 15px; background: var(--surface); color: var(--text); box-sizing: border-box; }
.tg-cell input:disabled { background: var(--sunken); color: var(--bx-muted); }
.tg-cell small { font-size: 11.5px; color: var(--bx-muted); white-space: nowrap; }
.tg-cell.is-zero small { color: var(--bx-muted); opacity: .8; }
@container (max-width: 520px) {
  .tg { min-inline-size: 0; inline-size: 100%; table-layout: fixed; }
  .tg th, .tg td { padding: 6px 3px; min-inline-size: 0; }
  .tg th.tg-colour { white-space: normal; inline-size: 64px; font-size: 12.5px; }
  .tg-cell input { inline-size: 100%; max-inline-size: 48px; }
  .tg-cell small { white-space: normal; font-size: 10.5px; line-height: 1.3; text-align: center; }
}

/* ─────────────── receiving ─────────────── */
.rcv-head { position: relative; display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: flex-start; padding: 20px; padding-inline-end: 52px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 2px; }
.rcv-scan { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.rcv-scan .tb-search { flex: 1 1 280px; max-inline-size: 460px; }
.rcv-scan-last { font-size: 13px; color: var(--muted); }
.rcv-scan-note { font-size: 13px; color: var(--danger); }
.rcv-scan-note:empty { display: none; }
.trf-back-arrow { display: inline-flex; font-size: 12px; }
.rcv-table td.c-diff { font-family: 'Outfit', 'Cairo', sans-serif; font-weight: 700; }
.rcv-table td.c-diff.is-bad { color: var(--danger); }
.rcv-table td.c-diff.is-zero { color: var(--bx-muted); font-weight: 600; }
.rcv-table td.c-why { white-space: normal; min-inline-size: 260px; }
.rcv-why { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rcv-why input { inline-size: 100%; max-inline-size: 280px; block-size: 36px; box-sizing: border-box; padding: 0 10px; font: inherit; font-size: 13.5px; border: 1px solid var(--line);
  border-radius: 2px; background: var(--surface); color: var(--text); }
.rcv-surplus { display: flex; gap: 8px; align-items: baseline; margin-top: 6px; font-size: 13px; color: var(--danger); white-space: normal; max-inline-size: 300px; line-height: 1.6; }
.rcv-sum { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 16px 18px; border-top: 1px solid var(--line); background: var(--bx-well); }
.rcv-sum-text { margin-inline-end: auto; font-size: 15px; font-weight: 600; line-height: 1.7; }
.rcv-sum-text.is-bad { color: var(--danger); }
.rcv-sum .btn { flex: none; }
.rcv-why-need { font-size: 12.5px; color: var(--danger); }

/* the owner's problem notice on the dashboard (owner_notices.js markup) */

/* ─────────────── the printed transfer note: white paper in both themes, drawn on the page ─────────────── */
.tn-stage { display: flex; justify-content: center; padding: 8px 0 24px; overflow-x: auto; }
.tn-paper { inline-size: 794px; max-inline-size: 100%; box-sizing: border-box; padding: 44px 48px 52px; background: #fff; color: #111; box-shadow: var(--bx-paper-shadow);
  font-size: 13px; line-height: 1.6; }
.tn-top { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding-bottom: 18px; border-bottom: 2px solid #111; }
.tn-top h1 { margin: 0; font-size: 22px; font-weight: 700; color: #111; }
.tn-top .tn-shop { font-size: 13px; color: #333; margin-top: 2px; }
.tn-ref { text-align: end; }
.tn-ref b { display: block; font-family: 'Outfit', 'Cairo', sans-serif; font-size: 16px; letter-spacing: .02em; }
.tn-ref span { font-size: 12.5px; color: #333; }
.tn-bars { display: block; margin-top: 6px; margin-inline-start: auto; block-size: 34px; inline-size: 190px; }
.tn-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 20px 0; }
.tn-party { border: 1px solid #999; padding: 12px 14px; }
.tn-party h2 { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; color: #444; }
.tn-party b { display: block; font-size: 15px; }
.tn-party span { display: block; font-size: 12.5px; color: #222; }
.tn-table { inline-size: 100%; border-collapse: collapse; font-size: 13px; }
.tn-table th, .tn-table td { border: 1px solid #999; padding: 7px 10px; text-align: start; color: #111; }
.tn-table th { background: #f1f1f1; font-weight: 700; font-size: 12px; }
.tn-table .is-end { text-align: end; }
.tn-table tfoot td { font-weight: 700; }
.tn-meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: #222; }
.tn-signs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 46px; }
.tn-sign { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: #222; }
.tn-sign .tn-line { block-size: 40px; border-bottom: 1px solid #111; }
.tn-sign small { color: #555; }
.tn-foot { margin-top: 30px; padding-top: 10px; border-top: 1px solid #bbb; font-size: 11.5px; color: #555; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@container bx (max-width: 620px) {
  .tn-paper { padding: 22px 18px 28px; font-size: 12px; }
  .tn-top { flex-direction: column; }
  .tn-ref { text-align: start; }
  .tn-bars { margin-inline-start: 0; }
  .tn-parties, .tn-signs { grid-template-columns: minmax(0, 1fr); }
  .tn-signs { gap: 18px; margin-top: 26px; }
}

/* ─────────────── overview and reports ─────────────── */
.ov-range { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ov-chip { border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 6px 14px; border-radius: 2px; font: inherit; font-size: 13.5px; cursor: pointer; }
.ov-chip[aria-pressed="true"] { border-color: var(--border-active); background: var(--tint); color: var(--brand); font-weight: 700; }
.ov-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.ov-asof { font-size: 13px; color: var(--bx-muted); }
.ov-table tbody tr { cursor: pointer; }
.ov-table th, .ov-table td { padding-inline: 10px; }
.ov-table th { white-space: normal; vertical-align: bottom; }
.ov-table tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ov-table .ov-name { display: flex; flex-direction: column; line-height: 1.45; }
.ov-table .ov-name small { font-size: 12px; color: var(--bx-muted); }
.ov-table .ov-open { color: var(--bx-muted); font-size: 12px; }
html[dir="rtl"] .ov-table .ov-open { transform: scaleX(-1); }
.ov-road { position: relative; display: flex; align-items: center; gap: 14px 40px; flex-wrap: wrap; padding: 18px 20px; padding-inline-end: 52px; background: var(--surface);
  border: 1px solid var(--line); border-inline-start: 3px solid var(--info); border-radius: 2px; }
.ov-road h2 { margin: 0; font-size: 15px; font-weight: 700; }
.ov-road .bx-figs dd { font-size: 17px; }
.ov-road .btn { margin-inline-start: auto; }
.bx-select-row { display: flex; align-items: center; gap: 10px; }
.bx-select-row label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.bx-select-row select { font: inherit; font-size: 14px; block-size: 40px; padding: 0 10px; min-inline-size: 200px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--surface); color: var(--text); max-inline-size: 100%; }
.bx-select-row select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }


/* ─────────────── phone and narrow containers ─────────────── */
@container bx (max-width: 700px) {
  .bx-h1 { font-size: 18px; }
  .br-plan { padding: 16px; padding-inline-end: 48px; }
  .br-plan-act { margin-inline-start: 0; inline-size: 100%; justify-content: flex-start; }
  .br-plan-act .btn { flex: 0 0 auto; }
  .br-card { padding: 18px 16px 16px; }
  .bx-panel-h { padding: 14px 16px; }
  .bx-panel-b { padding: 16px; }
  .bx-empty { padding: 26px 16px; }
  .tb-foot { padding: 12px 14px; }
  .tb-foot-acts { inline-size: 100%; }
  .tb-foot-acts .btn { flex: 1 1 auto; }
  .rcv-sum .btn { flex: 1 1 auto; }
  .ov-road .btn { margin-inline-start: 0; }
  .bx-refuse { padding: 20px 18px; }
  /* a list table becomes stacked rows on a phone: each cell carries its own label */
  .bx-table.is-stack thead { display: none; }
  .bx-table.is-stack, .bx-table.is-stack tbody, .bx-table.is-stack tr, .bx-table.is-stack td { display: block; inline-size: 100%; box-sizing: border-box; }
  .bx-table.is-stack tr { padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .bx-table.is-stack tbody tr:last-child { border-bottom: 0; }
  .bx-table.is-stack td { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; border: 0; white-space: normal; text-align: end; }
  .bx-table.is-stack td::before { content: attr(data-label); color: var(--bx-muted); font-size: 12.5px; text-align: start; flex: none; }
  .bx-table.is-stack td.is-plain::before { content: none; }
  .bx-table.is-stack td.is-plain { justify-content: flex-start; }
  .bx-table.is-stack td.c-act { justify-content: flex-end; padding-top: 10px; }
  .bx-table.is-stack td.c-act::before { content: none; }
  .bx-table.is-stack tfoot, .bx-table.is-stack tfoot tr, .bx-table.is-stack tfoot td { display: block; }
  .bx-table.is-stack tfoot tr { padding: 12px 16px; background: var(--bx-well); }
  .bx-table.is-stack tfoot td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; background: none; border: 0; }
  .bx-table.is-stack tfoot td::before { content: attr(data-label); color: var(--bx-muted); font-size: 12.5px; font-weight: 400; }
  .bx-table.is-stack tfoot td.is-plain::before { content: none; }
  .bx-table.is-stack .bx-st, .bx-table.is-stack .bx-cell-2 { white-space: normal; text-align: end; }
  .rcv-table.is-stack td.c-why { min-inline-size: 0; flex-direction: column; align-items: stretch; text-align: start; }
  .rcv-table.is-stack td.c-why::before { margin-bottom: 4px; }
  .rcv-table.is-stack .rcv-why input { max-inline-size: none; }
  .bx-figs { gap: 12px 28px; }
  .bx-subtabs { inline-size: 100%; }
  .bx-subtabs button { flex: 1 1 0; justify-content: center; padding: 8px 8px; font-size: 13.5px; }
}

/* ─────────────── spec 049 S9: the blind count and the decision (mockup 049-m4) ─────────────── */
.trf-fine { margin: 6px 0 0; font-size: 13px; }
.trf-cm-note { margin-top: 12px; }
.trf-gap { color: var(--danger); font-weight: 700; }
.trf-cause { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-inline-size: 220px; }
.trf-cause select { block-size: 38px; font: inherit; font-size: 13.5px; padding: 0 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); color: var(--text); inline-size: 100%; box-sizing: border-box; }
.trf-cause select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.trf-cause small { font-size: 12.5px; color: var(--bx-muted); line-height: 1.6; }
.bx-table td.c-cause { white-space: normal; min-inline-size: 220px; }
.tn-ref .tn-blind { display: inline-block; margin-block: 4px; padding: 1px 8px; border: 1px solid #111; font-size: 12px; font-weight: 700; color: #111; }
@container bx (max-width: 700px) {
  .bx-table.is-stack td.is-none { display: none; }
  .bx-table.is-stack td.c-cause { min-inline-size: 0; flex-direction: column; align-items: stretch; text-align: start; }
  .trf-cause { min-inline-size: 0; }
}