/* Run page: the approved mockup's stage strip, scoped away from existing views. */
.brp-page .page-head { align-items: flex-start; }
.brp-page .titles { min-width: 0; }
.brp-page .page-title { flex-wrap: wrap; }
.brp-dating { margin: 6px 0 0; font-size: 12px; color: var(--ink-500); }
.brp-stages { display: grid; gap: 10px; margin: 14px 0; }
.brp-stage { display: grid; grid-template-columns: 28px 1fr; gap: 2px 10px; align-items: center; padding: 10px 14px; border: 1px solid var(--divider); border-radius: 10px; background: var(--surface); text-align: left; color: var(--ink-700); cursor: pointer; font-family: var(--font-sans); }
.brp-stage b { color: var(--heading-900); font-size: 14px; }
.brp-stage small { grid-column: 2; color: var(--ink-500); font-size: 12px; }
.brp-stage-number { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--font-sans); border: 1.5px solid var(--divider); color: var(--ink-500); }
.brp-stage-number svg { width: 14px; height: 14px; }
.brp-done .brp-stage-number { background: #E6F4EA; border-color: #A7D7B4; color: #1E7A3C; }
.brp-active { border-color: var(--navy-800); box-shadow: 0 0 0 1px var(--navy-800) inset; }
.brp-active .brp-stage-number { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
.brp-stage:focus-visible { outline: 2px solid var(--navy-800); outline-offset: 3px; }
.brp-body { padding: 0; overflow: hidden; }
.brp-fees { padding: 18px 20px; }
.brp-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--divider); }
.brp-empty { margin: 0; padding: 20px; color: var(--ink-500); }
.brp-approved { display: grid; gap: 4px; padding: 14px 16px; background: #E6F4EA; color: #376446; border-left: 3px solid #78a885; font-size: 13px; }
.brp-approved span { font-size: 12px; }
.brp-file { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px; border-top: 1px solid var(--divider); }
.brp-file b { display: block; font-size: 14px; color: var(--heading-900); }
.brp-file small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--ink-500); }
.brp-file button { flex-shrink: 0; }
.brp-receipt { background: var(--surface-alt); }
@media (max-width: 760px) {
  .brp-page .page-head { flex-direction: column; gap: 12px; }
  /* S3: on a phone the stage strip is one compact row (number and name), so the work starts higher. */
  .brp-stages { gap: 6px; margin: 10px 0; }
  .brp-stage { grid-template-columns: 1fr; justify-items: center; gap: 4px; padding: 8px 4px; text-align: center; }
  .brp-stage b { font-size: 12px; }
  .brp-stage small { display: none; }
  .brp-stage-number { grid-row: auto; width: 24px; height: 24px; }
  .brp-dating { display: none; }
  .brp-page .page-sub { font-size: 13px; }
  .brp-page .page-head .actions .btn { padding: 6px 10px; }
  .brp-file { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* Stage 3: invoices (A5b) */
.brp-invoices { display: grid; gap: 14px; }
.brp-bar { position: sticky; top: 64px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.brp-bar-count { margin-right: 6px; font-size: 14px; color: var(--ink-2, inherit); }
.brp-bar-select { display: flex; flex-wrap: wrap; gap: 12px; margin-left: auto; }
.brp-link { padding: 0; border: 0; background: none; color: var(--accent, #234e91); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.brp-link:disabled { color: var(--muted, #8a8f98); text-decoration: none; cursor: default; }
.brp-split { position: relative; display: inline-flex; }
.brp-split .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.brp-split-arrow { padding-inline: 8px; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.brp-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 6; display: grid; min-width: 96px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px rgba(16, 24, 40, .12); }
.brp-menu button { padding: 8px 10px; border: 0; border-radius: 6px; background: none; font: inherit; text-align: left; cursor: pointer; }
.brp-menu button:hover, .brp-menu button:focus-visible { background: var(--surface-alt); }
.brp-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.brp-filters label { display: grid; gap: 4px; font-size: 12px; }
.brp-filters form { display: flex; flex: 1 1 280px; gap: 8px; }
.brp-filters input[type="search"] { flex: 1; min-width: 0; }
.brp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.brp-table th { padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.brp-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.brp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.brp-table tr.brp-selected > td { background: var(--surface-alt); }
.brp-expand { display: grid; gap: 2px; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.brp-expand small, .brp-flag { color: var(--muted, #6b7280); font-size: 12px; }
.brp-flag { display: block; color: var(--bad, #b42318); }
.brp-status { font-size: 13px; }
.brp-status-finalized { color: var(--good, #067647); }
.brp-status-skipped, .brp-status-voided { color: var(--muted, #6b7280); }
.brp-expanded { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; padding: 4px 0 8px; }
.brp-address { display: grid; gap: 2px; margin: 6px 0 0; font-size: 14px; }
.brp-address em { margin-top: 6px; color: var(--bad, #b42318); font-style: normal; font-size: 13px; }
.brp-paging { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.brp-pages { display: inline-flex; align-items: center; gap: 10px; }
.brp-outcome ul { margin: 6px 0; padding-left: 18px; }
.brp-dialog { max-width: 560px; }
.brp-dialog-warn { padding: 10px 12px; border-left: 3px solid var(--warn, #b54708); background: var(--surface-alt); }
.brp-check { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
.brp-check span { display: grid; gap: 2px; }
.brp-check small { color: var(--muted, #6b7280); }
.brp-field { display: grid; gap: 4px; margin: 10px 0; font-size: 13px; }
.brp-field textarea { min-height: 72px; }
@media (max-width: 720px) {
  .brp-bar { position: static; }
  .brp-bar-select { margin-left: 0; }
  .brp-expanded { grid-template-columns: 1fr; }
  /* The table stays a table on a phone (headers and cells keep their meaning); the invoice number moves into the expanded row. */
  .brp-table th:nth-child(3), .brp-table td:nth-child(3) { display: none; }
  .brp-table th, .brp-table td { padding: 8px 6px; }
}

/* Invoice preview panel and the billing-contact form's invoice option (A6) */
.brp-preview-cell { text-align: right; white-space: nowrap; }
.brp-preview-tabs { display: inline-flex; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.brp-preview-tabs button { padding: 6px 14px; border: 0; background: var(--surface); font: inherit; font-size: 13px; cursor: pointer; }
.brp-preview-tabs button[aria-pressed="true"] { background: var(--accent-soft, #e8eff9); color: var(--accent-ink, #1b3f77); font-weight: 600; }
.brp-draft-note { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--warn, #b54708); background: var(--surface-alt); font-size: 13px; }
.brp-doc { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.brp-doc-to { display: grid; gap: 2px; font-size: 14px; }
.brp-doc-to em { color: var(--bad, #b42318); font-style: normal; font-size: 13px; }
.brp-doc-text { margin: 0; font-size: 13px; white-space: pre-wrap; }
.brp-pdf { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.hbc-only { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.hbc-only span { display: grid; gap: 2px; }
.hbc-only small, .hbc-note { color: var(--muted, #6b7280); font-size: 13px; }
.hbc-note { margin: 14px 0 0; }
@media (max-width: 720px) {
  .brp-table td.brp-preview-cell { padding-left: 0; }
}

/* A7: the two choices inside Revise */
.brp-choice { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.brp-choice legend { margin-bottom: 6px; padding: 0; font-size: 13px; font-weight: 600; }
.brp-choice label { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.brp-choice label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, #e8eff9); }
.brp-choice span { display: grid; gap: 2px; }
.brp-choice small { color: var(--muted, #6b7280); font-size: 13px; }
/* C2: the household drawer's three tabs */
.hhd-tabs { display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--border); }
.hhd-tabs button { padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 14px; color: var(--ink-500, #56657a); cursor: pointer; }
.hhd-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--ink-900, #0e1b2e); font-weight: 600; }
.hhd-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.hhd-table { width: 100%; }
.hhd-table td, .hhd-table th { padding: 8px 10px; }

/* B5: new accounts, proposed */
.rna { display: grid; gap: 10px; margin-bottom: 20px; padding: 16px 18px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft, #e8eff9); }
.rna h2 { margin: 0; font-size: 18px; }
.rna-lead, .rna-note { margin: 0; font-size: 14px; color: var(--ink-700, #2a3950); }
.rna-note { font-size: 13px; }
.rna-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rna-table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--radius); font-size: 14px; }
.rna-table th { padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.rna-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.rna-table td small { display: block; color: var(--muted, #6b7280); font-size: 12px; }
.rna-table tr.rna-selected > td { background: var(--surface-alt); }
.rna-ok { color: var(--good, #067647); font-size: 13px; }
.rna-todo { color: var(--bad, #b42318); font-size: 13px; font-weight: 600; }
.rna-row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.rna-editor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 4px 0 8px; }
.rna-editor fieldset { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.rna-editor legend { padding: 0 4px; font-size: 12px; font-weight: 600; }
.rna-editor label { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.rna-choice { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 10px; }
.rna-choice > select, .rna-choice > input { width: 100%; min-width: 0; }
.rna-rate { display: flex; align-items: center; gap: 6px; }
.rna-rate > input { width: 110px; }
.rna-table { table-layout: fixed; }
.rna-table th:nth-child(1) { width: 36px; }
.rna-table th:nth-child(2) { width: 25%; }
.rna-table th:nth-child(3) { width: 14%; }
.rna-table th:nth-child(4) { width: 22%; }
.rna-table th:nth-child(5) { width: 18%; }
.rna-table .num { text-align: right; white-space: nowrap; }
.rna-sort { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
/* RC2-9: the list's words wrap to the panel; only the table scrolls sideways on a narrow screen. */
.rna { grid-template-columns: minmax(0, 1fr); }
.rna-scroll { overflow-x: auto; }
@media (max-width: 720px) {
  .rna-scroll .rna-table { min-width: 640px; }
}
.rna-group { display: grid; gap: 6px; }
.rna-group-title { margin: 6px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ink-700, #2a3950); }
.rna-bar small { font-weight: 400; color: var(--ink-500, #5a6478); }
.rna-editor-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
@media (max-width: 720px) {
  .rna-editor { grid-template-columns: 1fr; }
  /* The proposed rate is the point of the row: nothing is hidden on a phone; the list scrolls sideways inside its own box. */
  .rna { overflow-x: auto; }
  .rna-table { min-width: 560px; }
}

/* B5, second half: accounts that left Schwab are reported, not worked */
.rab { display: grid; gap: 10px; margin-bottom: 20px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.rab h2 { margin: 0; font-size: 16px; }

.brp-doc-footer { padding-top: 10px; border-top: 1px solid var(--border); color: var(--muted, #6b7280); font-size: 12px; }

/* A7: earlier versions of a revised invoice; the retention warning line */
.brp-versions { margin-top: 12px; font-size: 13px; }
.brp-versions ul { margin: 4px 0 0; padding-left: 18px; }
.brp-expiry { display: grid; gap: 2px; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--warn, #b54708); border-radius: var(--radius); background: var(--warn-soft, #F5F8FF); color: inherit; text-decoration: none; font-size: 14px; }
.brp-expiry span { color: var(--ink-700, #2a3950); font-size: 13px; }
.brp-expiry:hover span, .brp-expiry:focus-visible span { text-decoration: underline; }

/* Match the mockup (September 22): the stage's green all-clear line, its count line, the dialog's highlighted note */
.brp-ok { margin: 0 0 8px; padding: 12px 16px; border-radius: var(--radius); background: #E6F4EA; color: #376446; font-size: 14px; }
.brp-count-line { margin: 0 0 12px; color: var(--ink-500, #56657a); font-size: 13px; }
.app-dialog-note { margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--surface-alt, #f4f6fa); color: var(--ink-700, #2a3950); font-size: 14px; line-height: 1.5; }
.brp-next { margin-top: 12px; display: flex; justify-content: flex-end; }
.brp-pages-num { display: inline-flex; align-items: center; gap: 4px; }
.brp-pages-num button { min-width: 30px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-compact, 6px); background: var(--surface); font: inherit; cursor: pointer; }
.brp-pages-num button[aria-current="page"] { border-color: var(--accent); color: var(--ink-900, #0e1b2e); font-weight: 600; }
.brp-locked-note { margin: 0 0 8px; font-size: 13px; color: var(--ink-700, #2a3950); }
.brp-menu-title { display: block; padding: 6px 12px 2px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500, #56657a); }
.brp-period-state { display: block; color: var(--ink-500, #56657a); font-size: 12px; }
.brp-expanded-actions { margin: 0 0 10px; }
.brp-address-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-500, #56657a); }

/* A write succeeded but the refresh after it failed (Astra P2-13): said plainly, with a way to try again. */
.stale-notice { position: fixed; top: 72px; left: 24px; right: 24px; z-index: 1000; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 14px; box-shadow: 0 6px 20px rgba(0,0,0,.12); border: 1px solid var(--warn, #b54708); border-radius: var(--radius); background: var(--warn-soft, #F0F6FF); font-size: 14px; }
/* B4 (Astra RC4), review of #122: below 900 px the notice is in the page's flow under the navigation and sticks to the top
   of the screen as the page scrolls, so it is always seen and never covers the navigation, a message or the Save bar. */
@media (max-width: 900px) { .stale-notice { position: sticky; top: 0; z-index: 30; margin: 0; border-width: 0 0 1px; border-radius: 0; box-shadow: 0 4px 12px rgba(0,0,0,.08); } }

/* F14: the approval dialog's three figures, two short lines and the address warning in its own box. */
.app-dialog-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 12px; }
.app-dialog-figures > div { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--divider); border-radius: var(--radius); background: var(--surface-alt, #f4f6fa); }
.app-dialog-figures span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500, #56657a); }
.app-dialog-figures b { font-size: 18px; color: var(--heading-900); font-variant-numeric: tabular-nums; }
.app-dialog-figures small { font-size: 12px; color: var(--ink-500, #56657a); }
.app-dialog-lines { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-700, #2a3950); }
.app-dialog-warning { display: grid; gap: 4px; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--review-dot); border-radius: var(--radius); background: var(--review-bg); color: var(--review-fg); font-size: 14px; line-height: 1.5; }
.app-dialog-warning a { color: inherit; font-weight: 600; }
@media (max-width: 480px) { .app-dialog-figures { grid-template-columns: 1fr; } }

/* F15: what the approval still needs, in amber, on the page. F16: the Downloaded line turns green. */
.brp-approved-need { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 10px 16px; background: var(--review-bg); color: var(--review-fg); border-left: 3px solid var(--review-dot); font-size: 13px; }
.brp-approved-need a { color: inherit; font-weight: 600; }
.brp-receipt-done { background: var(--ready-bg); }
.brp-receipt-done b { display: inline-flex; align-items: center; gap: 6px; color: var(--ready-fg); }
.brp-receipt-done b svg { width: 14px; height: 14px; }

/* C2: the balance file as one grey line; its details one click away. */
.brp-file-line { margin: 0 0 12px; color: var(--ink-500, #56657a); font-size: 13px; }
.brp-file-line p { margin: 0; overflow-wrap: anywhere; }
.brp-file-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-alt, #f4f6fa); }
.brp-file-details dt { color: var(--ink-500, #56657a); }
.brp-file-details dd { margin: 0; color: var(--ink-700, #2a3950); overflow-wrap: anywhere; }

/* S2: the Billing Runs list fits: one line per period; at narrower widths, the period and where it stands. */
.brl-table .run-period { white-space: nowrap; }
.brl-open { color: inherit; text-decoration: none; font-weight: 600; }
.brl-open:hover, .brl-open:focus-visible { text-decoration: underline; }
.brl-table td .badge { white-space: normal; height: auto; min-height: 24px; padding: 3px 10px; line-height: 1.35; }
.brl-table td .badge .dot { flex: 0 0 7px; }
@media (max-width: 1100px) { .brl-table th:nth-child(2), .brl-table td:nth-child(2), .brl-table th:nth-child(4), .brl-table td:nth-child(4) { display: none; } }
@media (max-width: 760px) { .brl-table th:nth-child(3), .brl-table td:nth-child(3), .brl-table th:nth-child(5), .brl-table td:nth-child(5) { display: none; } }
@media (max-width: 720px) {
  .brp-fees { padding: 14px 12px; }
  .rna { padding: 12px; gap: 8px; }
  .rna h2 { font-size: 16px; }
  .rna-lead, .rna-note { font-size: 13px; }
}
@media (max-width: 560px) {
  .brp-page.cc-page { padding-top: 14px; }
  .brp-page .page-title { font-size: 26px; }
}
.brl-download { display: block; margin-top: 6px; font-size: 12px; }
/* The size guard (2026-09-24): the closed-accounts table scrolls inside its box on a phone, like the new-accounts one;
   a dialog never grows wider than the screen. */
.rab { grid-template-columns: minmax(0, 1fr); }
.confirm-dialog { max-width: calc(100vw - 24px); box-sizing: border-box; }
/* A screen-reader-only heading label is positioned; the scroller must contain it or it widens the page. */
.rna-scroll { position: relative; }
/* On a phone the new accounts' action bar comes straight under its heading, above the explanation, so the main
   button is on the first screen of a 375 × 812 phone as well (the size guard, 2026-09-24). */
@media (max-width: 560px) { .rna > h2 { order: -2; } .rna > .rna-bar { order: -1; } }