/* Bitcoin Bridge: a board in the landing board's grammar. A workspace head, one bar that picks the
   direction (BTC → RBTC, RBTC → BTC; the URL names it), that direction's three columns, then the
   transfers ledger whose selected row opens beneath itself. Loaded after board.css; segmented.css,
   which owns the bridge list's rows, loads later. */

.panel.br-page { display: block; padding: 0; min-width: 0; background: var(--ground-fill); border-radius: 0; }
.br-page[hidden], .br-page [hidden] { display: none !important; }
.br-workspace { min-width: 0; font-size: .875rem; line-height: 1.5; }
.br-page h2 { margin: 0; font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.br-page h3 { margin: 0; font-size: .875rem; font-weight: 500; line-height: 1.4; }
.br-page h4 { margin: 0 0 6px; font-size: .875rem; font-weight: 500; line-height: 1.4; }
.br-page fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.br-help { margin: 8px 0; max-width: 64ch; color: var(--text-muted); font-size: .8125rem; line-height: 1.55; }
.br-lede { margin: 0 0 8px; max-width: 52ch; color: var(--text); font-size: 1rem; line-height: 1.5; }
.br-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.br-page ::selection { color: var(--on-selection); background: var(--selection); }
.br-page a { text-underline-offset: 3px; }
.br-page button, .br-page a:not(.aera-prose-link) { transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out; }
.br-page .btn { min-height: 44px; padding-inline: 16px; font-weight: 500; white-space: normal; }
.br-page .btn:focus-visible { border-color: var(--focus); outline: none; box-shadow: none; }
.br-page a:not(.br-door-head, .aera-prose-link):focus-visible, .br-page summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.br-page .br-primary { background: var(--positive-fill); color: var(--on-positive); border-color: var(--positive-fill); font-weight: 600; }
.br-page .br-primary:hover:not(:disabled) { background: var(--positive-fill-hover); border-color: var(--positive-fill-hover); color: var(--on-positive); }
.br-page .br-primary:disabled { background: var(--terminal-control); color: var(--text-muted); border-color: var(--rule-strong); opacity: 1; }
.br-page .aera-address { font: .8125rem/1.5 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; color: var(--text-soft); overflow-wrap: anywhere; }
.br-page .aera-address:hover { color: var(--text); }

/* ---------- Shared voices ---------- */
.br-metrics { margin: 0; min-width: 0; }
.br-metrics > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--terminal-rule); }
.br-metrics dt { color: var(--text-soft); font-size: .8125rem; }
.br-metrics dd { margin: 0; max-width: 66%; text-align: right; color: var(--text); font: .8125rem/1.5 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; overflow-wrap: anywhere; }
.br-estimates { margin: 0; padding: 0; }
.br-estimates:empty { display: none; }
.br-estimates > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--terminal-rule); font-size: .8125rem; line-height: 1.5; color: var(--text-soft); }
.br-estimates dt, .br-estimates dd { margin: 0; }
.br-estimates dd { max-width: 62%; text-align: right; color: var(--text); font-family: var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; overflow-wrap: anywhere; }
.br-disclosure { border-top: 1px solid var(--terminal-rule); }
.br-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; color: var(--text); font-size: .875rem; font-weight: 500; list-style: none; }
.br-disclosure > summary::-webkit-details-marker { display: none; }
.br-disclosure > summary::after { content: ''; flex: 0 0 6px; width: 6px; height: 6px; margin-left: auto; border-right: 1px solid var(--text-muted); border-bottom: 1px solid var(--text-muted); transform: rotate(45deg) translateY(-2px); }
.br-disclosure[open] > summary::after { transform: rotate(225deg); }
.br-disclosure[open] { padding-bottom: 16px; }
.br-chip { align-self: flex-start; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid var(--rule-strong); border-radius: 3px; color: var(--text-soft); font: 500 .6875rem/1 var(--fontfam-term); letter-spacing: .04em; white-space: nowrap; }
.br-status { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font: var(--colhead); letter-spacing: .04em; text-transform: uppercase; white-space: normal; overflow-wrap: anywhere; color: var(--text-soft); }
.br-status::before { content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.br-status[data-tone="done"] { color: var(--positive); }
.br-status[data-tone="pending"] { color: var(--network-label); }
.br-status[data-tone="failed"] { color: var(--danger); }
.br-status[data-tone="idle"] { color: var(--text-muted); }
.br-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; color: var(--text-soft); font-size: .8125rem; }
.br-field > span { display: flex; justify-content: space-between; gap: 8px; }
.br-field > span > span:last-child:not(:first-child) { color: var(--text-muted); font-family: var(--fontfam-term); font-size: .75rem; }
.br-field-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.br-field-row > span { flex: 0 0 auto; }
.br-page .br-field-row select { width: auto; min-width: 140px; }
.br-field-label { color: var(--text-soft); font-size: .8125rem; }
.br-page .br-field input, .br-page .br-field select, .br-page .br-field textarea, .br-page .br-recipient-fields > input { width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid var(--rule-strong); border-radius: 4px; color: var(--text); background: var(--terminal-control); font: .875rem/1.5 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; caret-color: var(--positive); }
.br-page .br-field textarea { min-height: 96px; font-size: .75rem; resize: vertical; overflow-wrap: anywhere; }
.br-page .br-field input::placeholder, .br-page .br-amount::placeholder, .br-page textarea::placeholder { color: var(--text-muted); opacity: 1; }
/* Hover never covers focus: a focused field keeps its mint border under the pointer. */
.br-page .br-field :is(input, select, textarea):hover:not(:disabled):not([readonly]):not(:focus), .br-page .br-recipient-fields > input:hover:not(:disabled):not(:focus) { border-color: var(--rule-bright); }
.br-page .br-field :is(input, select, textarea):focus-visible, .br-page .br-recipient-fields > input:focus-visible { border-color: var(--positive); outline: none; box-shadow: none; }
.br-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.br-gate { margin: 12px 0 0; font-size: .75rem; }
.br-gate:empty { display: none; }
.br-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--text-muted); font: 500 .75rem/1.5 var(--font-sans); text-decoration: none; }
.br-back:hover { color: var(--text); }

/* ---------- Workspace head ---------- */
.br-stats { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.br-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.br-stat-label { font: var(--colhead); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.br-stat-value { font: .875rem/1.4 var(--fontfam-term); color: var(--text); font-variant-numeric: tabular-nums slashed-zero; white-space: nowrap; }
.br-stat[data-tone="positive"] .br-stat-value { color: var(--positive); }
.br-stat[data-tone="warning"] .br-stat-value { color: var(--network-label); }
/* The estimated wait for the next block: quiet, fixed-width figures so the countdown does not jitter. */
.br-stat-sub { min-height: 1.4em; font: .75rem/1.4 var(--fontfam-term); color: var(--text-soft); font-variant-numeric: tabular-nums slashed-zero; white-space: nowrap; }
.br-stat[data-tone] .br-stat-value::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: currentColor; vertical-align: 1px; }

/* ---------- The direction bar ---------- */
/* One row, two halves, each a link to its direction with that direction's live fact. The hairline
   between them is the grid's gap, so no button border draws it (the shared button hover would
   brighten one). The current half is bright, its arrow mint, and it carries the tabs' 2px mint
   underline on the bar's bottom rule. */
.br-board { border-top: 1px solid var(--terminal-rule); }
.br-directions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1px; background: var(--terminal-rule); border-bottom: 1px solid var(--terminal-rule); }
.br-page .btn.br-door-head {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "figure fact" "sub fact"; align-items: center; column-gap: 24px; row-gap: 4px;
  min-height: clamp(80px, 9.5vh, 104px); padding: 14px var(--pane-x); color: inherit; text-decoration: none; transition: background-color 200ms ease-out;
  width: 100%; border: 0; border-radius: 0; background: var(--ground-fill); text-align: left; font-weight: 400;
}
.br-page .btn.br-door-head:hover { background: var(--terminal-control); color: inherit; text-decoration: none; }
/* The current half is where you are, not something to press: it keeps the ground under the pointer (the id outranks the shared button hover). */
#br-directions .br-door-head[aria-current="page"]:hover { background: var(--ground-fill); cursor: default; }
.br-page .btn.br-door-head:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.br-door-figure {
  grid-area: figure; display: flex; align-items: center; gap: .18em; overflow: hidden; white-space: nowrap;
  font-family: var(--font-display); font-stretch: 78%; font-weight: 600; font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: clamp(1.5rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -.015em; color: var(--text-soft);
  transition: color 200ms ease-out;
}
.br-door-arrow { flex: 0 0 auto; width: .78em; height: .78em; color: var(--text-muted); transition: color 200ms ease-out, transform 240ms cubic-bezier(.16, 1, .3, 1); }
.br-door-sub { grid-area: sub; color: var(--text-muted); font-size: .875rem; line-height: 1.45; }
.br-door-fact { grid-area: fact; justify-self: end; max-width: 34ch; text-align: right; color: var(--text-soft); font: .8125rem/1.5 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; }
.br-door-fact:empty { display: none; }
.br-door-head:not([aria-current="page"]):hover .br-door-arrow { transform: translateX(4px); }
.br-door-head[aria-current="page"] .br-door-figure { color: var(--text); }
.br-door-head[aria-current="page"] .br-door-arrow { color: var(--positive); }
.br-door-head[aria-current="page"] .br-door-sub { color: var(--text-soft); }
.br-door-head[aria-current="page"] .br-door-fact { color: var(--text); }
.br-door-head[aria-current="page"]::after { content: ''; position: absolute; left: var(--pane-x); right: var(--pane-x); bottom: -1px; height: 2px; background: var(--positive-fill); }

/* ---------- The stage: one direction, three columns ---------- */
/* Both directions stay mounted and share the stage's one cell; the direction slide tiles them by
   transform while the stage, which clips, animates its height. Each pane is three columns split by
   hairlines: what you do, the funds at your page key, and progress. */
.br-stage { display: grid; align-items: start; overflow: clip; border-bottom: 1px solid var(--terminal-rule); }
.br-help-reveal, .br-detail-reveal { overflow: clip; }
.br-pane { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(280px, .8fr); align-items: stretch; min-width: 0; padding: 0 var(--pane-x); }
.br-col, .br-side { min-width: 0; padding-bottom: 40px; }
.br-col--a { padding-right: clamp(24px, 2.4vw, 40px); }
.br-col--b { padding-inline: clamp(24px, 2.4vw, 40px); border-left: 1px solid var(--terminal-rule); }
.br-side { padding-left: clamp(24px, 2.4vw, 40px); border-left: 1px solid var(--terminal-rule); }
.br-page .br-col-title { display: flex; align-items: center; min-height: 48px; margin: 0; color: var(--text-muted); font: var(--colhead); letter-spacing: .06em; text-transform: uppercase; }
.br-page .br-col-title:focus { outline: none; }
.br-page .br-col-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.br-col-empty { margin: 4px 0 0; }
/* Each column has its own action. The direction's next step is the one filled; the others are outlined and a step lower. */
.br-page .br-action { width: 100%; min-height: 44px; margin-top: 16px; font-size: .875rem; }
.br-page .br-action.br-primary, .br-page .br-action.aera-transaction-button { min-height: 52px; font-size: .9375rem; }
.br-now:has(> #br-incoming:not(:empty), > #br-outgoing:not(:empty)) { padding-bottom: 8px; }
/* Collect sits between the swap's status and its facts, so it stays in view. */
.br-page #br-collect { margin-top: 4px; }
#br-incoming-facts:not(:empty) { margin-top: 20px; }
#br-other-orders:not(:empty) { margin-top: 16px; }
#br-other-orders > h3 { margin-bottom: 8px; font: var(--colhead); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.br-how { min-width: 0; border-top: 1px solid var(--terminal-rule); }
.br-how > summary { font: var(--colhead); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.br-how.br-disclosure { padding-bottom: 0; }
.br-help-body { display: flow-root; padding-bottom: 16px; }
.br-how > summary::after { transition: transform 240ms cubic-bezier(.16, 1, .3, 1); }
.br-how > summary[aria-expanded="false"]::after { transform: rotate(45deg) translateY(-2px); }
.br-how > summary[aria-expanded="true"]::after { transform: rotate(225deg); }
.br-plan { display: grid; gap: 14px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: plan; }
.br-plan li { position: relative; padding-left: 34px; color: var(--text-soft); font-size: .875rem; line-height: 1.5; counter-increment: plan; }
.br-plan li::before { content: counter(plan); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--positive); font: 500 .6875rem/1 var(--fontfam-term); font-variant-numeric: tabular-nums; }
.br-plan b { color: var(--text); font-weight: 500; font-family: var(--fontfam-term); font-size: .8125rem; }
.br-how .br-estimates { margin-bottom: 16px; }
.br-how .br-field-row { padding-top: 4px; }

/* The peg-out amount leads its door in Geist Mono; what arrives answers it in the door's figure voice.
   The amount boxes are shared field groups (board.css `.aera-infield`, prominent here): Max and the unit are keys. */
.br-amount-field { margin-top: 12px; }
.br-amount-box { margin-top: 8px; }
.br-page .br-amount { min-height: 62px; margin: 0; padding: 10px 8px 10px 14px; border: 0; border-radius: 0; color: var(--text); background: transparent; box-shadow: none; outline: none; font: 1.75rem/1.2 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; caret-color: var(--positive); }
/* What the picked bridge delivers, summed up in one line above the request button. */
.br-quote { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 4px 16px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--terminal-rule); }
.br-quote-label { color: var(--text-soft); font-size: .8125rem; }
.br-page .br-quote-figure { justify-self: end; font-size: 1.5rem; text-align: right; }
.br-quote-figure[data-empty] { color: var(--text-muted); }
.br-quote-note { grid-column: 1 / -1; color: var(--text-muted); font-size: .75rem; line-height: 1.5; }
.br-request .br-estimates, .br-facts { border-top: 1px solid var(--terminal-rule); }
.br-return { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--terminal-rule); }
.br-return .br-help { margin: 0 0 10px; }

/* One place to request, wait and finish. Forms keep their nodes while live data changes. */
/* Step track: the shared lamp track (AeraUI.journey), vertical beside the action, a row above it at 1199px and below. */
.br-journey { padding: 18px 0 26px; }
#br-outgoing h3, #br-incoming h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 600 1.5rem/1.25 var(--font-display); letter-spacing: -.015em; text-wrap: balance; }
.br-check { flex: 0 0 auto; width: 22px; height: 22px; color: var(--positive); }
#br-outgoing .br-help { margin-block: 8px 20px; }
#br-incoming .br-help { margin-block: 8px 12px; }
/* The transfer in progress sits under the step track, in one voice for both directions. */
#br-incoming:not(:empty), #br-outgoing:not(:empty) { margin-top: 4px; }
.br-ready-amount { margin: 14px 0 6px; color: var(--text); overflow-wrap: anywhere; }
.br-figure, .br-ready-amount, .br-detail-head h3 { font-family: var(--font-display); font-stretch: 78%; font-weight: 600; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.01em; font-feature-settings: "tnum" 1, "lnum" 1; }
.br-quote-figure, .br-ready-amount { font-size: 2.25rem; line-height: 1.1; }
/* What is ready at the bridge key, over the button that opens the Send Bitcoin dialog. */
.br-send-ready .br-quote { margin-top: 12px; }
#br-key-actions:not(:empty) { margin-top: 24px; }
.br-key-address { display: grid; gap: 8px; min-width: 0; margin-top: 4px; }
.br-key-address .aera-address-actions { justify-self: start; max-width: 100%; }
#br-pending-requests:not(:empty) { margin-top: 20px; }
#br-pending-requests:not(:has(> *)) { margin-top: 0; }
#br-pending-requests > h3 { margin-bottom: 8px; font: var(--colhead); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.br-request-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--terminal-rule); }
.br-request-list > li { border-bottom: 1px solid var(--terminal-rule); }
.br-page .btn.br-request-link { display: flex; justify-content: space-between; gap: 16px; width: 100%; min-height: 64px; border: 0; border-radius: 0; padding: 12px 0; background: transparent; text-align: left; font-weight: 400; }
.br-request-link > span:first-child { font-family: var(--fontfam-term); font-size: .9375rem; }
.br-request-link > span:last-child { text-align: right; }
.br-request-link small { display: block; margin-top: 4px; color: var(--text-muted); font-size: .75rem; }
.br-stale { color: var(--network-label); }
.br-how strong { font-weight: 500; color: var(--text); }

/* Deposit address: the QR over the address, in the column's width. */
.br-deposit { display: grid; gap: 14px; margin-top: 18px; }
.br-deposit:empty { display: none; }
.br-deposit-code { display: grid; gap: 14px; justify-items: start; }
.br-qr { box-sizing: border-box; width: 144px; height: 144px; padding: 9px; border-radius: 4px; background: #fff; color: #000; }
.br-qr:empty { display: none; }
.br-qr svg { display: block; width: 100%; height: 100%; }
.br-deposit-address { display: grid; gap: 8px; min-width: 0; max-width: 100%; }
.br-deposit-address .aera-address-actions { justify-self: start; max-width: 100%; }
.br-deposit .br-help { margin: 0; }
/* What has arrived at the deposit address, then forwarding and the action over it. */
.br-deposit-state { display: grid; gap: 0; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--terminal-rule); }
.br-page .br-deposit-state .br-action { margin-top: 10px; }
#br-deposit-funds:has(> .br-col-empty) + #br-pegin-submit[hidden] + .br-deposit-state { margin-top: 16px; }
.br-deposit-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--terminal-rule); }
.br-deposit-list li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; border-bottom: 1px solid var(--terminal-rule); font-size: .8125rem; }
.br-deposit-amount { flex: 1 1 auto; color: var(--text); font: .875rem/1.5 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; }
.br-deposit-link { color: var(--text-soft); font-size: .75rem; }
.br-deposit-note { margin-block: 12px 0; color: var(--network-label); }
#br-deposit-sweep:not(:empty) { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--terminal-rule); }
/* The way back to a wallet when the deposit could still be bridged: a quiet, closed line. */
/* The quiet way out of the deposit column: it opens the Send Bitcoin dialog for the deposit address. */
.br-page .br-send-instead { margin-top: 12px; color: var(--text-soft); font-size: .8125rem; font-weight: 400; }
.br-page .br-send-instead:hover:not(:disabled) { color: var(--text); }

/* Flow status beneath the button: the current step, in words. */
.br-flow { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--terminal-rule); border-radius: 4px; background: var(--terminal-inset); }
.br-flow h3 { font-size: .875rem; }
.br-flow[data-status="error"] h3 { color: var(--danger); }
.br-flow .br-help { margin: 4px 0 0; }
.br-flow .br-help:empty { display: none; }

/* Send-to-wallet forms, wherever BTC waits at a page key. */
/* Send Bitcoin: the site's entry dialog (aeraCore's .aera-entry shell) for BTC leaving the bridge key or the
   deposit address. A head, the form scrolling beneath it, then the status and the two actions held in view. */
.br-page .br-send-overlay { align-items: center; padding: 16px; z-index: 12000; }
.br-page .modal.br-send-dialog { text-align: left; }
.br-send-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.br-send-head > div { min-width: 0; }
.br-page #br-send-title { font-family: var(--font-display); font-weight: 650; font-size: 1.125rem; line-height: 1.4; letter-spacing: -.012em; }
#br-send-title:focus { outline: none; }
.br-page #br-send-from { margin: 4px 0 0; color: var(--text-muted); font: 400 .75rem/1.4 var(--fontfam-term); }
.br-page .br-send-close { flex: none; width: 44px; min-height: 44px; padding: 10px; }
.br-send-body { padding-top: 8px; padding-bottom: 20px; scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
.br-send-foot { border-top: 1px solid var(--terminal-rule); background: var(--panel-fill); }
.br-send-foot > .br-gate { max-width: none; margin: 12px var(--review-inset) 0; }
.br-send-foot > .br-gate:empty { display: none; }
.br-send-foot > .aera-review-actions { border-top: 0; }
.br-page .br-send-foot .aera-review-actions .btn { min-height: 44px; }
@media (max-width: 480px) { .br-page .br-send-overlay { padding: 12px; } .br-page .modal.br-send-dialog { max-height: calc(100dvh - 24px); } }
/* A numbered row is narrow on a phone: its unit keeps its three letters and the amount gives way. */
body:not(.is-home) .br-amount-box--compact.aera-infield > span.input-suffix-unit { flex-shrink: 0; }
.br-sweep { display: grid; gap: 18px; }
/* The bridge-key send leads with the peg-out request's amount field. */
.br-send-amount .br-amount-field { margin-top: 0; }
/* Several addresses: ruled rows in the board grammar, a sequence circle, the amount (a compact
   amount box) over its address, and the shared neutral Remove at the end. */
.br-recipients { display: grid; gap: 8px; min-width: 0; }
.br-recipient-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--terminal-rule); }
.br-recipient-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--terminal-rule); }
.br-recipient-index { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 13px; border: 1px solid var(--rule-bright); border-radius: 50%; color: var(--text-soft); font: 500 .6875rem/1 var(--fontfam-term); font-variant-numeric: tabular-nums; }
.br-recipient-fields { display: grid; gap: 8px; min-width: 0; }
.br-recipient-remove { margin-top: 6px; }
.br-amount-box--compact { margin-top: 0; }
.br-page .br-amount-box--compact .br-amount { min-height: 46px; padding: 10px 8px 10px 12px; font-size: 1rem; }
/* Row addresses run to 62 characters (Taproot); one step smaller keeps them whole in the column. */
.br-page .br-recipient-fields > input { font-size: .8125rem; }
.br-recipients-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.br-remaining { color: var(--text-soft); font-size: .8125rem; }
.br-remaining > b { margin-left: 6px; color: var(--text); font: 400 .8125rem/1.5 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; }
/* The fee label says where the fee comes from, in the field-hint voice beside it. */
.br-fee > legend { display: flex; justify-content: space-between; gap: 8px; }
.br-fee-source { color: var(--text-muted); font: .75rem/1.5 var(--fontfam-term); }
.br-page .br-add-recipient { display: inline-flex; align-items: center; gap: 8px; padding-inline: 12px 14px; }
.br-add-recipient > svg { flex: none; }
/* A new address settles in: the page's short reveal, without moving the rows around it. */
@keyframes br-recipient-enter { from { opacity: 0; transform: translateY(-6px); } }
.br-recipient-row--enter { animation: br-recipient-enter 240ms cubic-bezier(.16, 1, .3, 1); }
@media (max-width: 760px), (pointer: coarse) { .br-recipient-remove { margin-top: 2px; } }
.br-fee { display: grid; gap: 8px; }
.br-fee > legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; }
/* The bridge list: the shared ruled list (segmented.css) under one head row, which names the
   amount the list is priced for, or holds the small example field before a deposit exists. */
.br-bridges { display: grid; gap: 8px; }
.br-request .br-bridges, .br-request #br-out-to-field { margin-top: 18px; }
#br-in-bridges > .br-bridges { margin-top: 2px; }
.br-bridges > .br-help { margin: 0; }
.br-bridges-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.br-example { display: grid; grid-template-columns: auto 148px; align-items: center; gap: 0 10px; min-width: 0; }
.br-example > .br-input-usd { grid-column: 2; }
.br-input-usd { display: block; text-align: right; }
.br-input-usd:not(:empty) { margin-top: 4px; }
#br-amount-hint { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; text-align: right; }
.br-primary .aera-usd { color: inherit; }
.br-example-box { flex: 0 0 148px; min-width: 0; }
.br-page .br-example-box > input { min-height: 40px; padding: 8px 10px; color: var(--text); font: .875rem/1.4 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; text-align: right; caret-color: var(--positive); }
.br-page .br-example-box > input::placeholder { color: var(--text-muted); opacity: 1; }
#br-airlift-cancel { margin-top: 16px; }

/* ---------- Transfers ledger ---------- */
.br-ledger { padding: 12px var(--pane-x) 32px; }
.br-ledger-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; }
.br-ledger-head h2 { font-size: 1rem; }
#br-list-state { font: var(--colhead); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.br-columns, .br-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) 20px; gap: 12px; align-items: center; }
.br-columns { padding: 10px 12px 10px; border-bottom: 1px solid var(--rule-strong); font: var(--colhead); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.br-columns > span:nth-child(2) { text-align: right; }
.br-ledger:has(.br-empty) .br-columns, .br-ledger:has(.br-skeleton) .br-columns { display: none; }
.br-rows { list-style: none; margin: 0; padding: 0; }
.br-rows > li { margin: 0; padding: 0; border-bottom: 1px solid var(--terminal-rule); }
.br-row { min-height: 56px; padding: 10px 12px; color: var(--text); text-decoration: none; transition: background-color 150ms ease-out, box-shadow 150ms ease-out; }
.br-row:hover { background: var(--terminal-control); box-shadow: inset 2px 0 0 var(--rule-bright); }
.br-row[aria-current="page"] { background: var(--terminal-selected); box-shadow: inset 2px 0 0 var(--positive-fill); }
.br-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.br-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.br-numeric { align-items: flex-end; text-align: right; font: .875rem/1.4 var(--fontfam-term); font-variant-numeric: tabular-nums slashed-zero; }
.br-mono { font: .75rem/1.4 var(--fontfam-term); color: var(--text-soft); overflow-wrap: anywhere; }
.br-sub { color: var(--text-muted); font-size: .6875rem; line-height: 1.4; }
.br-cell-label { display: none; }
.br-chevron { justify-self: end; width: 8px; height: 8px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 240ms cubic-bezier(.16, 1, .3, 1); }
.br-row[aria-current="page"] .br-chevron { transform: rotate(225deg) translate(-2px, -2px); border-color: var(--positive); }
.br-empty { padding: 48px 20px; text-align: center; }
.br-empty h3 { margin: 0; font-size: 1rem; font-weight: 500; }
.br-empty .br-help { max-width: 44ch; margin: 10px auto 20px; }
.br-skeleton { height: 56px; margin-top: 12px; border-radius: 4px; background: var(--terminal-control); }
.br-detail { padding: 16px 14px 28px; }
.br-detail-missing { padding-top: 0; }
.br-detail-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 16px; }
.br-detail-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; }
.br-detail-head h3:focus { outline: none; }
.br-steps { max-width: 640px; }
.br-reason { color: var(--text-soft); }
.br-detail .br-metrics { max-width: 640px; margin-top: 16px; }
.br-ready { max-width: 640px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--terminal-rule); }
.br-ready .br-help { margin: 0 0 16px; }

/* ---------- Footer ---------- */
.br-footer { padding: 4px var(--pane-x) 24px; border-top: 1px solid var(--terminal-rule); font-size: .8125rem; color: var(--text-muted); }
.br-footer .br-disclosure { max-width: 720px; }
.br-footer .br-disclosure:first-child { border-top: 0; }
.br-footer .br-metrics { margin-top: 8px; }

/* ---------- Responsive ---------- */
/* Two columns: the step track becomes a row of lamps across the top with the transfer in progress
   under it, and What happens spans the bottom. The progress column's box dissolves so its parts
   take their places in the pane's grid. */
@media (max-width: 1199px) {
  .br-pane { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .br-col { padding-bottom: 28px; }
  .br-side { display: contents; }
  .br-page .br-side-title { display: none; }
  .br-door-sub { display: none; }
  .br-journey { order: -2; grid-column: 1 / -1; padding: 20px 0 4px; }
  .br-now { order: -1; grid-column: 1 / -1; max-width: 640px; }
  .br-how { order: 1; grid-column: 1 / -1; margin-bottom: 24px; }
  .br-door-fact { max-width: 30ch; }
}
@media (max-width: 760px) {
  /* One column. The bar stays two halves and works as two tabs: figure, then the fact beneath it. */
  .br-page .btn.br-door-head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "figure" "fact"; align-content: center; gap: 6px; min-height: 76px; padding-block: 14px; }
  .br-door-fact { justify-self: start; max-width: none; text-align: left; font-size: .75rem; line-height: 1.4; }
  .br-pane { grid-template-columns: minmax(0, 1fr); }
  .br-col--a { padding-right: 0; }
  .br-col--b { padding-inline: 0; border-left: 0; border-top: 1px solid var(--terminal-rule); }
  .br-columns { display: none; }
  .br-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px 8px; align-items: start; }
  .br-numeric { align-items: flex-start; text-align: left; }
  .br-cell-label { display: block; font: var(--colhead); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
  .br-chevron { display: none; }
  .br-detail { padding-inline: 8px; }
  .br-detail-head h3 { font-size: 1.5rem; }
}
@media (max-width: 440px) {
  .br-metrics > div { flex-wrap: wrap; gap: 4px 12px; }
  .br-metrics dd { max-width: 100%; }
  .br-stats { width: 100%; }
  .br-stat { align-items: flex-start; }
  .br-page .br-amount { font-size: 1.5rem; }
  .br-quote-figure, .br-ready-amount { font-size: 1.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  .br-recipient-row--enter { animation: none; }
  .br-page button, .br-page a, .br-row, .br-door-head, .br-door-figure, .br-door-arrow, .br-chevron, .br-how > summary::after { transition: none; }
  .br-status[data-tone="pending"]::before { animation: none; }
}