/* Layer: views — split from public/styles.css (P0.1). No selector/declaration edits. */

/* ===== RECONCILIATION ===== */
.reconciliation-session-banner {
    border: 1px solid var(--border-color);
    background: rgba(102, 126, 234, 0.08);
}



.reconciliation-banner-title {
    font-weight: 600;
    margin-bottom: 0.65rem;
}



.tx-recon-include-col {
    width: 2.75rem;
    text-align: center;
    vertical-align: middle;
}



.tx-recon-include-col--na .tx-recon-include-placeholder {
    opacity: 0.45;
    font-size: 0.9rem;
}



.reconciliation-banner-metrics {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.85rem;
    line-height: 1.45;
}



.reconciliation-banner-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.65rem 1.25rem;
}



.reconciliation-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}



.reconciliation-opening-adjustment-panel {
    margin-bottom: 1rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-color);
}



.reconciliation-implied-opening {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    line-height: 1.45;
}



.reconciliation-opening-adjustment-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
}



.reconciliation-opening-adjustment-error {
    font-size: 0.85rem;
    color: var(--money-negative);
    margin: 0.5rem 0 0;
}



body.reconciliation-mode #transactions-account-filter-root {
    display: none !important;
}



.reconciliation-filters-locked {
    opacity: 0.72;
    pointer-events: none;
}



/* Keep the wide transactions grid inside the viewport; scroll inside the card (grid comboboxes use fixed-position panels). */
































.reconciliation-register-card {
    padding: 0.85rem 1rem;
}



.reconciliation-register-heading {
    font-size: 0.95rem;
    margin: 0 0 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
}



.reconciliation-register-table {
    font-size: 0.8125rem;
    width: 100%;
    min-width: 44rem;
    table-layout: fixed;
}



.reconciliation-register-table thead th {
    padding: 0.4rem 0.5rem;
    font-size: 0.6875rem;
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(22, 24, 40, 0.97);
}



.reconciliation-register-table td {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
    /* Fixed layout does not clip on its own; no text-overflow, because the control
       columns would render an ellipsis beside their button. */
    overflow: hidden;
}



















.reconciliation-register-table .tx-recon-section-row td {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}



.reconcile-wizard-card {
    max-width: 520px;
}



.reconcile-context-line {
    margin: -0.25rem 0 0.75rem;
}



/* ===== TRANSACTIONS TABLE: COLUMN DRAG ===== */
#transactions-table thead th.tx-th-draggable {
    cursor: grab;
    user-select: none;
}



#transactions-table thead th.tx-th-draggable:active {
    cursor: grabbing;
}



#transactions-table thead th.tx-th-dragging {
    opacity: 0.65;
}



/* Lift entire Filters card above the transactions table card while account dropdown is open */
.card.tx-account-filter-layer-active {
    z-index: 40;
}



/* ===== PORTFOLIO ===== */
.portfolio-warning-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}



.portfolio-warning-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
}



/* Overview drift strip (Task 12): out-of-band policy chips, same wrap/spacing as the
   warning chips above but not interactive (no CTA per chip — the whole-panel CTA/"On
   policy" line take that role, see renderPortfolioDriftStrip in app.js). */
.portfolio-drift-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}



.portfolio-drift-chip {
    text-transform: none;
    letter-spacing: normal;
}



.portfolio-warning-chip:hover {
    filter: brightness(1.08);
}



/* Holdings hierarchy.
 *
 * Four nesting levels share one indent ladder, and visual weight tracks depth so the
 * structure is legible without reading a single word. Previously the ladder ran
 * backwards: institution rows were the smallest text on the page in the faintest
 * color, and position rows carried no indent at all, so leaves sat further left than
 * the account that owned them.
 *
 *   0.9rem  institution band  +  institution total
 *   1.9rem  account name      +  account subtotal
 *   3.1rem  position rows
 *
 * Each level's total closes the block that level's header opened, at the same indent,
 * so blocks read as brackets. Rules follow accounting convention: a single rule above
 * a subtotal, a double rule above the final total.
 */

.portfolio-group-row td {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.82rem;
    letter-spacing: 0.6px;
    /* Authority comes from color, weight and the filled band - not from being small.
       This row was 0.78rem in --text-secondary, quieter than the leaf rows it heads. */
    color: var(--text-primary);
    background: var(--bg-tertiary);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}



.portfolio-group-row td:first-child {
    padding-left: 0.9rem;
    /* Copper spine: marks where each institution block begins and, with the matching
       spine on its total row, brackets the block top and bottom. */
    box-shadow: inset 3px 0 0 var(--accent-primary);
}



.portfolio-subgroup-row td {
    font-weight: 600;
    color: var(--text-primary);
    padding-top: 0.4rem;
}



.portfolio-subgroup-row td:first-child {
    padding-left: 1.9rem;
}



/* Position rows: the detail. Deepest indent, lightest weight - they are scanned, not
   read first. Targeted by exclusion so no structural row picks up the leaf indent. */
#portfolio-holdings-tbody tr:not(.portfolio-group-row):not(.portfolio-subgroup-row):not(.portfolio-subtotal-row):not(.portfolio-group-total-row):not(.portfolio-grand-total-row):not(.empty-row):not(.loading-row) td:first-child {
    padding-left: 3.1rem;
    color: var(--text-secondary);
}



.portfolio-subtotal-row td {
    font-weight: 600;
    background: var(--surface-muted);
}



.portfolio-subtotal-row td:first-child {
    padding-left: 1.9rem;
}



.portfolio-group-total-row td {
    font-weight: 600;
    background: var(--bg-tertiary);
}



.portfolio-group-total-row td:first-child {
    padding-left: 0.9rem;
    box-shadow: inset 3px 0 0 var(--accent-primary);
}



.portfolio-grand-total-row td {
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--text-primary);
    background: var(--accent-soft);
    /* Double rule above a final total - the convention every financial statement uses. */
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}



.portfolio-grand-total-row td:first-child {
    padding-left: 0.9rem;
}



/* Money columns: right-aligned with tabular figures so decimals line up down the
   column and magnitudes are comparable at a glance. All six columns were left-aligned
   with proportional digits. */
#portfolio-holdings-table th:not(:first-child),
#portfolio-holdings-table td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}



/* Density and dividers.
 *
 * `.data-table td` draws a border-top on EVERY row, so the structural borders above
 * stacked on to it and read as doubled lines throughout. Drop the per-row rule here
 * and re-add a divider only where one carries meaning: between institution blocks,
 * above a subtotal that closes a list, and above the final total. Rows inside a list
 * are separated by indent and weight, which is enough.
 */
/* Size is set once, on the table, so every cell inherits the same value. Setting it on
   `td` instead left any cell carrying a utility class (the gain column) resolving
   `inherit` against <tr> - roughly 1rem - and therefore larger than its neighbours. */
#portfolio-holdings-table {
    font-size: 0.875rem;
}



#portfolio-holdings-table td {
    border-top: none;
    padding: 0.45rem 0.85rem;
}



#portfolio-holdings-table th {
    padding: 0.55rem 0.85rem;
    font-size: 0.8rem;
}



/* A new institution block starts here - the strongest break in the table. */
#portfolio-holdings-tbody .portfolio-group-row td {
    border-top: 1px solid var(--border-color);
}



/* Closes the position list it sits under. */
#portfolio-holdings-tbody .portfolio-subtotal-row td,
#portfolio-holdings-tbody .portfolio-group-total-row td {
    border-top: 1px solid var(--border-color);
}



#portfolio-holdings-tbody .portfolio-grand-total-row td {
    border-top: 3px double var(--accent-primary);
}



/* `.text-success` ships a 0.875rem font-size and `.text-danger` sets colour only, so a
   gain and a loss rendered at different sizes in the same column. Pin both to the table
   size - not `inherit`, which would resolve against <tr> and overshoot - so all five
   numeric columns match and these classes carry colour alone. */
#portfolio-holdings-table .text-success,
#portfolio-holdings-table .text-danger,
#portfolio-holdings-table .text-muted,
#portfolio-holdings-table td span {
    font-size: 0.875rem;
}



/* Transactions view — tighter spacing + smaller type so the grid fits without horizontal scroll */
#transactions-view .page-header {
    margin-bottom: 1.25rem;
}



#transactions-view .page-header h2 {
    font-size: 1.5rem;
}



#transactions-view .card {
    padding: 1rem 1.1rem;
}



#transactions-view .card h3 {
    font-size: 1.05rem;
    margin-bottom: 0.85rem;
}



#transactions-filters-card {
    padding: 0.7rem 0.85rem !important;
}



#transactions-filters-card h3 {
    margin-bottom: 0.45rem !important;
    font-size: 0.95rem !important;
}



#transactions-filters-card > div {
    gap: 0.45rem !important;
}



#transactions-filters-card .form-group label {
    margin-bottom: 0.2rem;
    font-size: 0.74rem;
}



#transactions-filters-card input[type="date"],
#transactions-filters-card input[type="text"],
#transactions-filters-card .tx-account-filter-trigger {
    min-height: 1.9rem;
    padding-top: 0.28rem;
    padding-bottom: 0.28rem;
    font-size: 0.8rem;
}



#transactions-filters-card .btn {
    padding: 0.45rem 0.8rem;
    min-height: 1.9rem;
    font-size: 0.78rem;
}



/* Filter disclosure (P2.4) — toggle + active-filter chips sit above the
   collapsible filter form; collapsed by default (class in the static markup). */
.filter-disclosure-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

#transactions-filters-card .transactions-command-bar.is-collapsed {
    display: none !important;
}



/* Reconcile context bar (P2.6) — visible when a session is active even after
   navigating away from Transactions to the Reconcile nav item. */




#transactions-table {
    font-size: 0.8125rem;
    border-collapse: separate;
    border-spacing: 0;
}



#transactions-table th,
#transactions-table td {
    padding: 0.4rem 0.5rem;
}



#transactions-table thead th {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.5rem;
    position: sticky;
    top: 0;
    z-index: 18;
    background: rgba(22, 24, 40, 0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}



#transactions-table .btn-sm {
    padding: 0.26rem 0.45rem;
    font-size: 0.6875rem;
}



#transactions-table .combobox-input {
    padding: 0.32rem 0.45rem;
    font-size: 0.8125rem;
    border-radius: 6px;
}



#transactions-table .badge {
    padding: 0.2rem 0.45rem;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
}



/* Transactions: optional Company column (toggle via #transactions-table.transactions-show-company) */
#transactions-table:not(.transactions-show-company) .tx-company-col {
    display: none;
}



#transactions-table.transactions-show-company .tx-company-col {
    display: table-cell;
}



#transactions-table .tx-amount-col {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}



#transactions-table .tx-payee-col {
    min-width: 7rem;
    max-width: 12rem;
    vertical-align: middle;
}



#transactions-table thead th.tx-select-col,
#transactions-table td.tx-select-col {
    width: 2.5rem;
    min-width: 2.5rem;
    max-width: 2.75rem;
    text-align: center;
    vertical-align: middle;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}



#transactions-table .tx-select-col input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
}



#transactions-bulk-bar .bulk-action-select {
    min-width: 12.5rem;
    height: 2rem;
    padding: 0 0.5rem;
    background: rgba(18, 20, 34, 0.92);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
}



#transactions-bulk-bar {
    background: rgba(26, 28, 46, 0.94);
    border: 1px solid rgba(102, 126, 234, 0.35);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}



#transactions-table .tx-desc-col {
    vertical-align: top;
    min-width: 8.5rem;
    max-width: min(21rem, 34vw);
}



#transactions-table .tx-desc-primary {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.35rem;
    flex-wrap: wrap;
}



#transactions-table .tx-desc-title {
    flex: 1 1 9rem;
    min-width: 0;
    word-break: break-word;
    font-size: 0.8125rem;
    font-weight: 600;
}



/* P1.2: plaid-pending uses status-chip; legacy tx-badge rule removed. */



/* Reconciled register rows: subtle tint + left stripe (data from `reconciled` on list API) */
#transactions-table tbody tr.tx-row-reconciled {
    background: rgba(118, 75, 162, 0.07);
    box-shadow: inset 3px 0 0 rgba(102, 126, 234, 0.45);
}



#transactions-table tbody tr.tx-row-reconciled:hover {
    background: rgba(118, 75, 162, 0.12);
}



#transactions-table .tx-reconciled-indicator {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: rgba(167, 139, 250, 0.95);
    opacity: 0.9;
}



#transactions-table .tx-reconciled-indicator-svg {
    display: block;
}



.reconciliation-register-table tbody tr.tx-row-reconciled {
    background: rgba(118, 75, 162, 0.07);
    box-shadow: inset 3px 0 0 rgba(102, 126, 234, 0.45);
}



.reconciliation-register-table tbody tr.tx-row-reconciled:hover {
    background: rgba(118, 75, 162, 0.12);
}











.reconciliation-register-table .tx-reconciled-indicator {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: rgba(167, 139, 250, 0.95);
    opacity: 0.9;
}



.reconciliation-register-table .tx-reconciled-indicator--compact .tx-reconciled-indicator-svg {
    width: 12px;
    height: 12px;
}



#transactions-table .tx-transfer-match {
    margin-top: 0.35rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    border: 1px solid rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.1);
    font-size: 0.75rem;
    line-height: 1.4;
}



#transactions-table .tx-transfer-match-label {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--badge-orange), var(--badge-orange));
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    margin-bottom: 0.4rem;
}



#transactions-table .tx-transfer-match-detail {
    color: var(--text-secondary);
}



#transactions-table .tx-transfer-match-detail--muted {
    font-size: 0.78rem;
}



#transactions-table .tx-transfer-match-line {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--text-primary);
}



#transactions-table .tx-transfer-match-desc {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: var(--text-secondary);
    word-break: break-word;
}



#transactions-table .tx-transfer-match-actions {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}



#transactions-table .tx-verify-col {
    min-width: 2.5rem;
    width: 2.65rem;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}



#transactions-table .tx-verify-col .tx-verify-btn {
    min-width: 2rem;
    padding: 0.26rem 0.32rem;
}



/* Design B1 -- verify toggle and receipt indicator share the status cell (td stays a
   plain table-cell; the inner span carries the flex layout). */
#transactions-table .tx-verify-col .tx-status-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
}



#transactions-table thead th.tx-th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}



#transactions-table thead th.tx-th-sortable:hover {
    color: var(--text-primary);
}



#transactions-table thead th.tx-th-sort-active {
    color: var(--accent-primary);
}



#transactions-table thead th.tx-th-sort-asc::after {
    content: ' \25B2';
    font-size: 0.65em;
    opacity: 0.9;
}



#transactions-table thead th.tx-th-sort-desc::after {
    content: ' \25BC';
    font-size: 0.65em;
    opacity: 0.9;
}



.transactions-table-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    max-height: min(68vh, 740px);
}



/* Transaction grid comboboxes: JS reparents the open menu to document.body and uses position:fixed
   (see .combobox-dropdown--txn-fixed) so coordinates match the viewport — .card backdrop-filter
   otherwise creates a fixed-position containing block. Never set overflow:visible on the table
   scrollport (breaks sticky thead / pager overlap). */

.card.transactions-table-card .pager {
    position: relative;
    z-index: 10;
}



/* Vendor Selector in Invoice Info Card */
/* Invoice Vendor 3-State Field */
.invoice-vendor-unlinked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
}



.invoice-vendor-none {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
}



.invoice-vendor-confirmed {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}



.invoice-vendor-label {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}



.invoice-vendor-none .invoice-vendor-label {
    color: var(--text-secondary);
    font-style: italic;
    font-weight: normal;
}



.invoice-vendor-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}



.invoice-vendor-actions .btn {
    flex-shrink: 0;
}



.invoice-vendor-actions-vertical {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
}



.invoice-vendor-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0;
}



.invoice-vendor-separator::before,
.invoice-vendor-separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}



.invoice-vendor-separator:not(:empty)::before {
    margin-right: 0.5rem;
}



.invoice-vendor-separator:not(:empty)::after {
    margin-left: 0.5rem;
}



/* Elevate the section containing an open combobox */
.invoice-meta-section:has(.combobox-open) {
    z-index: 50;
}



.invoice-vendor-edit-btn {
    opacity: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 0 0.25rem;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}



.invoice-vendor-confirmed:hover .invoice-vendor-edit-btn {
    opacity: 1;
}



.invoice-vendor-edit-btn:hover {
    color: var(--accent-light);
}



#transactions-table thead th.tx-actions-col,
#transactions-table td.tx-actions-col {
    min-width: 4.5rem;
    width: 4.75rem;
    max-width: 5.5rem;
    text-align: right;
    white-space: nowrap;
    vertical-align: middle;
    box-sizing: border-box;
}



#transactions-table td.tx-actions-col .btn {
    white-space: nowrap;
}



/* Transaction save feedback (fixed bubble, top center) */
.tx-save-toast {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    z-index: 10001;
    max-width: min(92vw, 26rem);
    padding: 0.65rem 1.35rem;
    border-radius: 9999px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 12px 30px rgba(60, 34, 8, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: var(--on-dark);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}



.tx-save-toast.tx-save-toast--visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}



.tx-save-toast.tx-save-toast--saving {
    color: var(--on-dark);
}



.tx-save-toast.tx-save-toast--success {
    color: var(--on-dark);
    border-color: rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, var(--badge-green), var(--badge-green));
}



.tx-save-toast.tx-save-toast--error {
    color: var(--on-dark);
    border-color: rgba(255, 255, 255, 0.35);
    background: linear-gradient(135deg, var(--badge-red), var(--badge-red));
}



.tx-recon-section-row td.tx-recon-section-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding-top: 0.85rem;
    padding-bottom: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.2);
}



/* ===== CHART OF ACCOUNTS ===== */
#accounts-table {
    table-layout: fixed;
}



#accounts-table th,
#accounts-table td {
    overflow-wrap: break-word;
    word-break: break-word;
    padding: 0.7rem 0.75rem;
}



/* Round 2 fix-up (2026-08-27) — the Balance column was 6rem, narrower than a
   full currency figure ("$12,345,678.90"), and the table-wide break-word rule
   above then split the figure mid-number ("$3,000" / ".00") to make it fit.
   Widen the column and, on this cell only, undo the forced break so a money
   token wraps only at its own natural boundaries (never inside a number). */
.coa-col-balance {
    width: 10rem;
}

.coa-balance-cell {
    overflow-wrap: normal;
    word-break: normal;
}

.coa-balance-cell > span {
    white-space: nowrap;
}



.coa-type-row td {
    font-weight: 600;
    color: var(--text-primary);
    background: linear-gradient(90deg, rgba(102, 126, 234, 0.18), rgba(118, 75, 162, 0.08));
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    letter-spacing: 0.3px;
}



.coa-group-row td {
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.18), rgba(16, 185, 129, 0.05));
    color: var(--status-success-on-dark);
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    padding-left: 2.5rem;
}



tr.coa-account-row-grouped > td {
    background-color: rgba(16, 185, 129, 0.04);
}



tr.coa-group-row > td:first-child,
tr.coa-account-row-grouped > td:first-child {
    border-left: 2px solid rgba(16, 185, 129, 0.35);
}



tr.coa-account-row-grouped--last > td {
    border-bottom: 1px solid rgba(16, 185, 129, 0.35);
}



.coa-tree-connector {
    display: inline-block;
    margin-right: 0.35rem;
    font-family: var(--font-data);
    font-size: 0.95em;
    color: var(--text-secondary);
    opacity: 0.7;
    user-select: none;
}



tr.coa-account-row-subaccount .coa-account-name-block {
    border-left: 1px dashed rgba(255, 255, 255, 0.22);
    padding-left: 0.5rem;
    margin-left: -0.5rem;
}



.coa-account-name-cell {
    min-width: 0;
}



/* Design P3.2 item 9 — collapsible type-group header row: toggle, label, subtotal. */
.coa-type-row-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}



.coa-group-toggle {
    padding: 0.2rem;
    line-height: 0;
    flex: 0 0 auto;
}



.coa-type-row-label {
    flex: 1 1 auto;
}



.coa-type-row-subtotal {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}



/* Design P3.2 item 11 — ledger-balance provenance marker (coaBalanceDisplay.js
   distinguishes bank-reported from ledger; this labels the ledger figure so
   provenance never depends on hovering for a tooltip). Inline, not flex — the
   balance cell also carries a block-level "Bank: …" line beneath the ledger
   figure, and a flex wrapper here would pull that line into the same row. */
.coa-balance-marker {
    display: inline;
    margin-right: 0.3rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: default;
}



.coa-account-name-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}



.coa-account-name-line {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}



.coa-account-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.35;
}



/* Round 2 fix-up (2026-08-27) — was inline (margin-left) after the "Bank: …"
   text in the same narrow cell; at 6rem that squeezed the button's own text
   into a multi-line stack that visually overlapped the row below it (see
   evidence/design-p3-1-2/before/accounts-grouped__1280x900.png and the
   Round 2 section of the report). Block-level + its own top margin puts it on
   a line of its own beneath the provenance text, with no overlap regardless
   of column width. */
.coa-bank-reported .coa-opening-balance-btn {
    display: block;
    margin-top: 0.35rem;
    margin-left: 0;
    padding: 0.15rem 0.45rem;
    font-size: 0.72rem;
    max-width: 100%;
    white-space: normal;
}



.coa-account-type-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    display: block;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}



/* P1.2: account type colour-only dots replaced by status-chip text labels. */



.coa-linked-indicator {
    font-size: 0.82rem;
    line-height: 1;
    opacity: 0.95;
    filter: drop-shadow(0 0 4px rgba(102, 126, 234, 0.4));
}



/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .sidebar {
        width: 200px;
    }

    .main-content {
        margin-left: 200px;
        padding: 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .reports-layout,
    .reports-modal-grid {
        grid-template-columns: 1fr;
    }

    .reports-toolbar {
        align-items: stretch;
    }

    .reports-timeframe-control,
    .report-filter-summary,
    #report-open-filters-btn {
        width: 100%;
    }
}



@media (max-width: 480px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .main-content {
        margin-left: 0;
    }

    .nav {
        flex-direction: row;
        overflow-x: auto;
    }

    /* Labels are hidden by `.app-shell .nav-item .nav-item-label` further down.
       The rule that used to live here spared `.icon`, a class the nav markup no
       longer carries, so it hid the `.nav-icon` glyph too and every nav item
       collapsed to an empty box. */

    /* The sidebar becomes a horizontal strip here, so groups flow inline and
       their headings have nowhere to sit. */
    .nav-group {
        flex-direction: row;
        gap: 0.5rem;
    }

    .nav-group-label {
        display: none;
    }
}



@media (prefers-reduced-motion: reduce) {
    .entity-workspace-cash-forecast .btn,
    .entity-workspace-cash-forecast .cash-forecast-line,
    .entity-workspace-cash-forecast .cash-forecast-proposal {
        transition: none;
    }
}



#transactions-table .tx-transfer-match--confirmed {
    border-color: rgba(46, 204, 113, 0.45);
}



#transactions-table .tx-transfer-match--confirmed .tx-transfer-match-label {
    color: var(--money-positive);
}



.tx-category-combobox .combobox-dropdown,
.tx-company-combobox .combobox-dropdown,
.tx-payee-combobox .combobox-dropdown {
    right: 0;
    left: auto;
    min-width: min(32rem, calc(100vw - 2rem));
    width: max(100%, min(32rem, calc(100vw - 2rem)));
    max-width: calc(100vw - 2rem);
    max-height: min(56vh, 560px);
}



.coa-drag-cell {
    width: 1.75rem;
    text-align: center;
    vertical-align: top;
    position: relative;
}



.coa-drag-handle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    opacity: 0.55;
    user-select: none;
    font-size: 1rem;
    line-height: 1;
    z-index: 2;
}



.coa-drag-handle:active {
    cursor: grabbing;
}



tr.coa-account-row.coa-drag-over {
    outline: 2px dashed var(--accent-primary);
    outline-offset: -2px;
}



tr.coa-account-row.coa-drag-over-reparent {
    outline: 2px solid rgba(234, 179, 8, 0.75);
    outline-offset: -2px;
    background: rgba(234, 179, 8, 0.06);
}



tr.coa-type-row.coa-drag-over-root {
    outline: 2px solid rgba(96, 165, 250, 0.75);
    outline-offset: -2px;
    background: rgba(96, 165, 250, 0.08);
}



tr.coa-account-row.coa-row-dragging {
    opacity: 0.55;
}



/* ===== TRANSACTIONS ACCOUNT FILTER (compact multi-select) ===== */
.tx-account-filter {
    position: relative;
    width: 100%;
}



.tx-account-filter-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
}



.tx-account-filter-chevron {
    flex: 0 0 auto;
    opacity: 0.75;
    font-size: 0.75rem;
}



.tx-account-filter-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    z-index: 1400;
    padding: 0.35rem 0;
    background: rgba(18, 20, 34, 0.985);
    border: 1px solid rgba(102, 126, 234, 0.65);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}



.tx-account-filter-panel:not([hidden]) {
    display: block;
}



.tx-account-filter-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.85rem;
    cursor: pointer;
    font-size: 0.875rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}



.tx-account-filter-item:last-child {
    border-bottom: none;
}



.tx-account-filter-item:hover {
    background: rgba(102, 126, 234, 0.22);
}



.tx-account-filter-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}



.transactions-command-card {
    padding: 0.8rem 0.95rem !important;
}



.transactions-command-card h3 {
    display: none;
}



.transactions-command-bar {
    display: grid !important;
    grid-template-columns: minmax(9rem, 0.7fr) minmax(9rem, 0.7fr) minmax(16rem, 1.3fr) minmax(14rem, 1fr) auto auto auto;
    gap: 0.6rem !important;
    align-items: end !important;
}



.transactions-command-bar .form-group {
    min-width: 0 !important;
}



.app-shell #transactions-filters-card .form-group label {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}



.app-shell #transactions-filters-card input[type="date"],
.app-shell #transactions-filters-card input[type="text"],
.app-shell #transactions-filters-card .tx-account-filter-trigger {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
    min-height: 2.15rem;
}



.app-shell #transactions-table {
    font-size: 0.82rem;
}



.app-shell #transactions-table thead th {
    background: var(--surface-muted);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}



.app-shell #transactions-table thead th.tx-th-sortable:hover,
.app-shell #transactions-table thead th.tx-th-sort-active {
    color: var(--accent-secondary);
}



.app-shell #transactions-table td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}



.app-shell #transactions-table .tx-desc-title {
    color: var(--text-primary);
}



.app-shell #transactions-bulk-bar {
    background: var(--accent-soft);
    border-color: var(--badge-orange);
    color: var(--text-primary);
    backdrop-filter: none;
}



.app-shell #transactions-bulk-bar .bulk-action-select {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}



/* Transactions register: use the full workspace for dense review work. */
.app-shell .main-content:has(#transactions-view.active) {
    padding: 1rem 1.25rem 1.25rem;
    overflow: hidden;
}



.app-shell .main-content:has(#transactions-view.active) .main-content-inner {
    max-width: none;
    width: 100%;
    margin-inline: 0;
}



.app-shell #transactions-view.active {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 2.5rem);
    gap: 0.85rem;
}



.app-shell #transactions-view.active .page-header {
    align-items: center;
    margin-bottom: 0;
}



.app-shell #transactions-view.active .page-header h2 {
    font-size: 1.45rem;
    line-height: 1.15;
}



.app-shell #transactions-view.active .subtitle {
    font-size: 0.82rem;
}



.app-shell #transactions-view.active #transactions-filters-card {
    margin-bottom: 0;
}



.app-shell #transactions-view.active .transactions-command-card {
    padding: 0.65rem 0.75rem !important;
}



.app-shell #transactions-view.active .transactions-command-bar {
    grid-template-columns: minmax(8.5rem, 0.6fr) minmax(8.5rem, 0.6fr) minmax(16rem, 1.35fr) minmax(13rem, 1fr) auto auto auto;
    align-items: end !important;
}



.app-shell #transactions-view.active .transactions-command-bar .form-group {
    margin-bottom: 0 !important;
}



.app-shell #transactions-view.active .transactions-command-bar .btn {
    min-height: 2.15rem;
    padding: 0.45rem 0.8rem;
}



.app-shell #transactions-view.active .transactions-table-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin-top: 0 !important;
    padding: 0.75rem 0.85rem;
}



.app-shell #transactions-view.active .transactions-table-toolbar {
    margin-bottom: 0.55rem !important;
}



.app-shell #transactions-view.active .transactions-table-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: auto;
}



/* Design P3.3: the register used to force a 96rem (1536px) minimum, which is exactly
   why the page scrolled sideways at 1280 — eleven columns all competing for the same
   space. The default set is nine, only Description flexes, and the rest are narrow and
   fixed, so the table now fits its card and the horizontal scroll is gone. */
.app-shell #transactions-view.active #transactions-table {
    /* `fixed` is what actually ends the sideways scroll: under `auto`, a long
       description or a wide combobox can push a column past the width it was given, and
       `max-width` on a cell is ignored outright. Under `fixed` the declared widths are
       the widths, and Description (the only auto column) absorbs the remainder.
       `min-width: 56rem` keeps the register legible below ~1180px by letting the card
       scroll internally instead of crushing nine columns into a phone. */
    min-width: 56rem;
    width: 100%;
    table-layout: fixed;
}



.app-shell #transactions-view.active #transactions-table th,
.app-shell #transactions-view.active #transactions-table td {
    padding: 0.46rem 0.55rem;
}



.app-shell #transactions-view.active #transactions-table .tx-select-col {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}



.app-shell #transactions-view.active #transactions-table .tx-date-col {
    width: 6rem;
    min-width: 6rem;
    max-width: 6rem;
    white-space: nowrap;
}



.app-shell #transactions-view.active #transactions-table .tx-amount-col {
    width: 6.25rem;
    min-width: 6.25rem;
    max-width: 6.25rem;
}



/* The one flexing column. `width: auto` + no min-width lets it absorb whatever the
   fixed columns leave, and shrink first when the viewport does. */
.app-shell #transactions-view.active #transactions-table .tx-desc-col {
    width: auto;
    min-width: 0;
    max-width: none;
    overflow-wrap: anywhere;
}



.app-shell #transactions-view.active #transactions-table .tx-payee-col {
    width: 8rem;
    min-width: 8rem;
    max-width: 8rem;
}



.app-shell #transactions-view.active #transactions-table .tx-company-col {
    width: 8rem;
    min-width: 8rem;
    max-width: 8rem;
}



.app-shell #transactions-view.active #transactions-table .tx-source-account-col {
    width: 8rem;
    min-width: 8rem;
    max-width: 8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.app-shell #transactions-view.active #transactions-table .tx-category-col {
    width: 8.5rem;
    min-width: 8.5rem;
    max-width: 8.5rem;
}



.app-shell #transactions-view.active #transactions-table .tx-verify-col {
    width: 4.25rem;
    min-width: 4.25rem;
    max-width: 4.25rem;
}



.app-shell #transactions-view.active #transactions-table .tx-actions-col {
    width: 4.75rem;
    min-width: 4.75rem;
    max-width: 4.75rem;
}



/* An <input> carries an intrinsic preferred width (~20 characters) that would otherwise
   set the floor for every combobox column and put the horizontal scroll straight back. */
.app-shell #transactions-view.active #transactions-table .combobox-input {
    min-width: 0;
}



.app-shell #transactions-view.active .pager {
    flex-shrink: 0;
    margin-top: 0.55rem !important;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border-color);
}



/* Entity directories: CoA, Companies, Vendors, Customers. */
.entity-workspace {
    --entity-row-border: var(--border-color);
    --entity-row-hover: var(--accent-soft);
}



/* Portfolio History tab: reconstructed-history caveat + TWR "include reconstructed"
   toggle. Checked for a `.app-shell` override of these selectors (see the ~4280
   "Orange Quiet Pro" block) — none exists, so no override-order fight to account for
   here (unlike .form-checkbox-label, which the app-shell block does restyle). */
.portfolio-history-caveat {
    margin-top: 0.65rem;
}



.portfolio-twr-toggle {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}



.portfolio-twr-toggle input[type="checkbox"] {
    margin-right: 0.35rem;
}



/* Settings "History backfill" card: run status line + unpriceable-symbols list. */
.portfolio-backfill-status {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}



.portfolio-backfill-symbols {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
}



.portfolio-backfill-symbols li {
    margin-bottom: 0.2rem;
}



.app-shell .entity-table .coa-type-row td,
.app-shell .entity-table .coa-group-row td {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}



.app-shell .entity-table .coa-type-row td {
    background: linear-gradient(90deg, var(--accent-soft), var(--accent-soft));
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}



.app-shell .entity-table .coa-group-row td {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.72rem;
    padding-left: 2.5rem;
}



.app-shell .entity-table tr.coa-account-row-grouped > td {
    background-color: var(--bg-primary);
}



.app-shell .entity-table tr.coa-group-row > td:first-child,
.app-shell .entity-table tr.coa-account-row-grouped > td:first-child {
    border-left: 3px solid var(--badge-orange);
}



.app-shell .entity-table tr.coa-account-row-grouped--last > td {
    border-bottom: 1px solid var(--badge-orange);
}



.app-shell .entity-table tr.coa-account-row-subaccount .coa-account-name-block {
    border-left-color: var(--badge-orange);
}



.app-shell .entity-table .coa-tree-connector {
    color: var(--badge-orange);
    opacity: 0.85;
}



.app-shell .entity-table .coa-drag-cell {
    width: 2.25rem;
}



.app-shell .entity-table .coa-drag-handle {
    color: var(--text-secondary);
    border-color: var(--border-color);
    background: var(--accent-soft);
}



.app-shell .entity-table .coa-drag-handle:hover {
    color: var(--accent-secondary);
    border-color: var(--badge-orange);
    background: var(--accent-soft);
}



.coa-linked-indicator {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--badge-blue);
    filter: none;
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    padding: 0.1rem 0.42rem;
    text-transform: uppercase;
}



.entity-page-header-actions,
.bank-connection-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}



.entity-workspace-reports .reports-layout {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
}



/* Cash Forecast workspace: weekly operating-cash review. */
.entity-workspace-cash-forecast {
    min-width: 0;
    overflow-x: hidden;
}



.entity-workspace-cash-forecast .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}



.cash-forecast-page-header {
    gap: 1rem;
}



.cash-forecast-controls {
    align-items: flex-end;
}



.cash-forecast-company-control {
    margin: 0;
    min-width: 12rem;
}



.cash-forecast-company-control label {
    display: block;
    margin-bottom: 0.3rem;
}



.cash-forecast-status {
    min-height: 1.25rem;
    margin: 0 0 0.65rem;
    color: var(--text-secondary);
}



.cash-forecast-state {
    margin-bottom: 1rem;
}



.cash-forecast-metrics {
    margin-bottom: 1rem;
}



.cash-forecast-chart-card {
    margin-bottom: 1rem;
    min-height: 0;
}



.cash-forecast-chart-container {
    min-height: 18rem;
}



.cash-forecast-chart-fallback {
    margin-top: 0.75rem;
}



.cash-forecast-chart-table,
.cash-forecast-table-scroll {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}



.cash-forecast-fallback-table {
    min-width: 34rem;
}



.cash-forecast-breakdown-card,
.cash-forecast-proposals-card {
    margin-bottom: 1rem;
    min-width: 0;
}



.cash-forecast-breakdown-card .data-table {
    min-width: 50rem;
}



.cash-forecast-week-cell {
    white-space: nowrap;
    font-weight: 600;
}



.manual-entry-details-row > td {
    background: rgba(255, 255, 255, 0.03);
    border-top: 0;
}



.manual-entry-details {
    display: grid;
    gap: 0.75rem;
    padding: 0.5rem 0.25rem 0.75rem;
}



.manual-liability-details-card {
    display: grid;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-light, var(--bg-secondary));
    box-shadow: 0 10px 24px rgba(36, 27, 20, 0.06);
}



.manual-liability-card-header,
.manual-liability-section-heading,
.manual-liability-estimate-card,
.manual-liability-lifecycle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}



.manual-liability-card-title,
.manual-liability-details-card h5,
.manual-liability-details-card p {
    margin: 0;
}



.manual-liability-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}



.manual-liability-read-grid,
.manual-liability-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}



.manual-liability-read-grid > div {
    display: grid;
    gap: 0.35rem;
    align-content: start;
    min-width: 0;
}



.manual-liability-read-grid > div > span,
.manual-liability-edit-grid label > span,
.manual-liability-balance-form label > span {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}



.manual-liability-read-grid strong {
    min-height: 1.4rem;
    color: var(--text-primary);
    font-size: 0.96rem;
    font-variant-numeric: tabular-nums;
}



.manual-liability-read-grid strong.text-danger {
    color: var(--money-negative);
}



.manual-liability-edit-panel,
.manual-liability-subcard,
.manual-liability-lifecycle {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-muted, var(--bg-tertiary));
}



.manual-liability-edit-panel {
    display: grid;
    gap: 1rem;
    border-color: rgba(197, 93, 26, 0.35);
    box-shadow: inset 3px 0 0 var(--accent-primary);
}



.manual-liability-edit-panel[hidden],
.manual-liability-balance-form[hidden],
.form-grid[hidden] {
    display: none !important;
}



.manual-liability-edit-heading {
    display: grid;
    gap: 0.25rem;
}



.manual-liability-edit-grid label,
.manual-liability-balance-form label {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
}



.manual-liability-edit-grid input,
.manual-liability-edit-grid select,
.manual-liability-edit-grid textarea,
.manual-liability-balance-form input {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    margin: 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    line-height: 1.25;
    text-align: left;
}



.manual-liability-edit-grid textarea {
    min-height: 5.5rem;
    resize: vertical;
}



.manual-liability-edit-wide {
    grid-column: 1 / -1;
}



.manual-liability-rate-input,
.manual-liability-term-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
}



.manual-liability-rate-input > span,
.manual-liability-term-input > span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}



.manual-liability-edit-actions,
.manual-liability-balance-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}



.manual-liability-fixed-rate-note {
    font-size: 0.85rem;
}



.manual-liability-estimate-amount {
    margin: 0.2rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}



.manual-liability-history-card {
    display: grid;
    gap: 0.85rem;
}



.manual-liability-balance-form {
    margin-top: 0.25rem;
    align-items: end;
}



.manual-liability-lifecycle {
    background: transparent;
}



.manual-liability-lifecycle > div {
    display: grid;
    gap: 0.2rem;
}



.manual-liabilities-archived {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-color);
}



.manual-liabilities-archived > summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-weight: 600;
}



.manual-liabilities-archived > p {
    margin: 0.65rem 0;
}



@media (max-width: 720px) {
    .app-shell .manual-liabilities-table {
        min-width: 0;
    }

    .manual-liabilities-table thead {
        display: none;
    }

    .manual-liabilities-table tbody,
    .manual-liabilities-table tfoot {
        display: block;
    }

    .manual-liabilities-table tr[data-manual-kind="liability"] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.25rem 0.75rem;
        padding: 0.75rem 0;
    }

    .manual-liabilities-table tr[data-manual-kind="liability"] > td {
        display: block;
        padding: 0;
        border: 0;
    }

    .manual-liabilities-table tr[data-manual-kind="liability"] > td:nth-child(2) {
        grid-column: 1;
        color: var(--text-secondary);
    }

    .manual-liabilities-table tr[data-manual-kind="liability"] > td:nth-child(3),
    .manual-liabilities-table tr[data-manual-kind="liability"] > td:nth-child(4) {
        grid-column: 2;
        text-align: right;
    }

    .manual-liabilities-table tr[data-manual-kind="liability"] > td:nth-child(3) {
        grid-row: 1;
    }

    .manual-liabilities-table .manual-entry-details-row {
        display: block;
    }

    .manual-liabilities-table .manual-entry-details-row[hidden] {
        display: none !important;
    }

    .manual-liabilities-table .manual-entry-details-row > td,
    .manual-liabilities-table tfoot > tr,
    .manual-liabilities-table tfoot td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .manual-liability-read-grid,
    .manual-liability-edit-grid {
        grid-template-columns: 1fr;
    }

    .manual-liability-edit-wide {
        grid-column: auto;
    }

    .manual-liability-card-header,
    .manual-liability-section-heading,
    .manual-liability-estimate-card,
    .manual-liability-lifecycle {
        align-items: stretch;
        flex-direction: column;
    }
}



.manual-entry-details .manual-entry-info-form {
    align-items: end;
}



.manual-entry-section-title {
    margin: 0 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}



.manual-entry-section {
    display: grid;
    gap: 0.5rem;
}



.manual-entry-deactivate {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}



.manual-loan-terms-details {
    grid-column: 1 / -1;
}



.manual-loan-terms-details > summary {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
}



.manual-liability-proj-compact {
    font-size: 0.85rem;
    margin-top: 0.15rem;
}



.manual-valuation-add-form {
    margin-top: 0.5rem;
}



.manual-valuation-curve {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
}



.manual-valuation-sparkline {
    color: var(--link-accent-bright);
    flex: 0 0 auto;
}



.manual-valuation-history {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}



.manual-valuation-history li {
    display: flex;
    gap: 0.75rem;
}



.manual-list-total td {
    font-weight: 600;
    padding-top: 0.75rem;
}



.manual-liability-total td {
    color: var(--money-negative);
}



.cash-forecast-bucket-details {
    padding: 0.35rem 0.25rem;
}



.cash-forecast-bucket-details h4 {
    margin: 0.4rem 0 0.45rem;
    color: var(--text-primary);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}



.cash-forecast-line-list {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}



.cash-forecast-line,
.cash-forecast-proposal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    min-width: 0;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-light);
}



.cash-forecast-line-label,
.cash-forecast-proposal > strong {
    min-width: 10rem;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}



.cash-forecast-line-detail,
.cash-forecast-proposal-detail,
.cash-forecast-proposal-note {
    color: var(--text-secondary);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}



.cash-forecast-line-actions,
.cash-forecast-proposal-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-left: auto;
}



.cash-forecast-proposal-list,
.cash-forecast-inline-proposals {
    display: grid;
    gap: 0.6rem;
}



.cash-forecast-proposal {
    align-items: flex-start;
    border-left: 3px solid var(--accent-primary);
}



.cash-forecast-proposal > strong {
    flex: 1 1 12rem;
}



.cash-forecast-proposal-detail,
.cash-forecast-proposal-note {
    flex: 1 1 100%;
}



.cash-forecast-proposal-actions {
    width: 100%;
    margin-left: 0;
}



.cash-forecast-line-actions .btn,
.cash-forecast-proposal-actions .btn {
    min-height: 2.35rem;
}



.cash-forecast-chart-card .card-kicker,
.cash-forecast-breakdown-card .card-kicker,
.cash-forecast-proposals-card .card-kicker {
    max-width: 42rem;
}



@media (max-width: 768px) {
    .cash-forecast-controls {
        width: 100%;
        justify-content: flex-start;
    }

    .cash-forecast-company-control {
        flex: 1 1 100%;
    }

    .cash-forecast-chart-container {
        min-height: 15rem;
    }
}



@media (max-width: 480px) {
    .entity-workspace-cash-forecast .entity-page-header-actions {
        width: 100%;
    }

    .cash-forecast-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .cash-forecast-company-control {
        grid-column: 1 / -1;
        min-width: 0;
    }

    .cash-forecast-controls .btn {
        min-height: 2.75rem;
        width: 100%;
    }

    .cash-forecast-chart-card .card-header,
    .cash-forecast-breakdown-card .card-header,
    .cash-forecast-proposals-card .card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .cash-forecast-chart-container {
        min-height: 13rem;
    }

    .cash-forecast-line,
    .cash-forecast-proposal {
        align-items: flex-start;
        flex-direction: column;
    }

    .cash-forecast-line-label,
    .cash-forecast-proposal > strong {
        min-width: 0;
    }

    .cash-forecast-line-actions,
    .cash-forecast-proposal-actions {
        margin-left: 0;
        width: 100%;
    }

    .cash-forecast-line-actions .btn,
    .cash-forecast-proposal-actions .btn {
        flex: 1 1 auto;
    }
}



.entity-workspace-reconcile .reconcile-wizard-card {
    max-width: none;
}



.entity-workspace-reconcile #reconcile-start-form {
    display: grid;
    grid-template-columns: minmax(13rem, 1fr) repeat(3, minmax(11rem, 0.75fr)) auto;
    gap: 0.75rem;
    align-items: end;
}



.entity-workspace-reconcile #reconcile-start-form .form-group,
.entity-workspace-reconcile #reconcile-start-form .modal-actions {
    margin: 0 !important;
}



.entity-workspace-reconcile #reconcile-start-form .reconcile-context-line,
.entity-workspace-reconcile #reconcile-start-form .form-error {
    grid-column: 1 / -1;
}



.app-shell .reconcile-context-line {
    color: var(--text-secondary);
}



.app-shell #profile-auth-card h3 {
    margin: 0 0 0.55rem;
}



.app-shell #profile-signed-in,
.app-shell #profile-signed-out {
    max-width: 46rem;
}



/* ===== TODAY ===== */
.today-error {
    margin: 0 0 1rem;
}



.today-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}



.today-summary-card {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.25rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}



.today-summary-card:hover,
.today-summary-card:focus-visible {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md, var(--shadow-sm));
}



.today-summary-label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}



.today-summary-value {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}



.today-summary-meta {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}



.today-attention-card {
    margin-top: 1.5rem;
}



.today-attention-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}



.today-attention-item + .today-attention-item {
    border-top: 1px solid var(--border-color);
}



.today-attention-button {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.85rem 0.25rem;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
}



.today-attention-button:hover {
    background: var(--bg-tertiary);
}



/* P1.2: colour-only attention dots replaced by status-chip text labels. */



.today-attention-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}



.today-attention-detail {
    color: var(--text-secondary);
    font-size: 0.85rem;
}



.today-attention-empty {
    margin: 0.5rem 0 0;
    color: var(--text-secondary);
}



.today-chart-row {
    margin-top: 1.5rem;
}



.today-chart-row .chart-card {
    max-width: 46rem;
}



@media (prefers-reduced-motion: reduce) {
    .today-summary-card {
        transition: none;
    }
}



@media (max-width: 640px) {
    .today-summary-value {
        font-size: 1.5rem;
    }
}



@media (prefers-reduced-motion: reduce) {
    .more-card {
        transition: none;
    }
}



.bank-connection-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}



.bank-connection-meta {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: 0.55rem;
}



/* Design P3.2 — search + inactive toggle folded into the accounts table's own
   card-header (no separate toolbar card); scoped by view like the inventory
   page's .coa-toolbar override below. */
.entity-workspace-accounts .coa-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end !important;
}



.entity-workspace-accounts .coa-toolbar input[type="search"] {
    min-height: 2.25rem;
}



/* Accounts Payable toolbar: actions on the left, filters on the right, and one
   column each once there is no room to sit side by side. */
.ap-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
}



.ap-toolbar-actions,
.ap-toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.65rem;
    min-width: 0;
}



.ap-toolbar-filters input[type="search"] {
    min-width: 16rem;
}



.bills-tab-count {
    display: inline-block;
    min-width: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--border-color);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
}



.bills-tabs .tab-btn.active .bills-tab-count {
    background: var(--accent-primary);
    color: var(--on-dark);
}



.bills-error {
    margin: 0 0 0.75rem;
    color: var(--badge-red);
}



/* Vendor and Due each stack a primary line over a quieter qualifier. */
.entity-workspace-bills .bills-table td > span,
.entity-workspace-bills .bills-table td > .bills-open-bill {
    display: block;
    text-align: left;
}



.bills-row-secondary {
    color: var(--text-secondary);
    font-size: 0.8rem;
}



.bills-due-overdue {
    color: var(--badge-red);
}



.bills-due-today,
.bills-due-soon {
    color: var(--badge-orange);
}



.bills-calendar-summary {
    padding: 1rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
}



@media (max-width: 768px) {
    .ap-toolbar-filters {
        width: 100%;
    }

    .ap-toolbar-filters > div {
        flex: 1 1 100%;
    }

    .ap-toolbar-filters input[type="search"] {
        min-width: 0;
        width: 100%;
    }
}



.bills-suggestions-banner {
    margin-bottom: 1rem;
}



.bills-suggestions-banner-inner h3 {
    margin: 0 0 0.25rem;
}



.bills-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}



.bills-suggestion-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px solid var(--border-color);
}



.bills-suggestion-item:first-child {
    border-top: none;
    padding-top: 0;
}



.bills-recurring-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}



.bills-recurring-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}



.bills-recurring-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}



.bills-calendar-url-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0 1.25rem 1.25rem;
}



.bills-calendar-url-input {
    flex: 1 1 16rem;
    min-width: 0;
}



.bills-recurring-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.75rem;
}



.bills-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}



.app-shell .combobox-dropdown,
.app-shell .tx-account-filter-panel,
.app-shell .multi-select-dropdown {
    background: var(--bg-secondary);
    border-color: var(--badge-orange);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
}



.app-shell .combobox-item:hover,
.app-shell .combobox-item.active,
.app-shell .tx-account-filter-item:hover {
    background: var(--accent-soft);
    color: var(--text-primary);
    border-left-color: var(--accent-primary);
}



@media (max-width: 980px) {
    .app-shell .grid-2,
    .entity-workspace-reports .reports-layout {
        grid-template-columns: 1fr;
    }

    .transactions-command-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .app-shell #transactions-view.active .transactions-command-bar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .entity-workspace-reconcile #reconcile-start-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}



@media (max-width: 768px) {
    .app-shell .main-content {
        padding: 1rem;
    }

    .transactions-command-bar {
        grid-template-columns: 1fr;
    }

    .app-shell .main-content:has(#transactions-view.active) {
        padding: 0.75rem;
        overflow-y: auto;
    }

    .app-shell #transactions-view.active {
        min-height: auto;
    }

    .app-shell #transactions-view.active .page-header {
        align-items: flex-start;
    }

    .app-shell #transactions-view.active .transactions-command-bar {
        grid-template-columns: 1fr;
    }

    .app-shell .entity-page-header {
        align-items: flex-start;
    }

    .app-shell .entity-table-card,
    .app-shell .entity-directory-card {
        padding: 0.75rem;
    }

    .app-shell .entity-table {
        min-width: 44rem;
    }

    .entity-workspace-reconcile #reconcile-start-form,
    .extension-card {
        grid-template-columns: 1fr;
    }

    .extension-toggle-btn {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }

    .bank-connection-header {
        flex-direction: column;
    }

    .entity-page-header-actions,
    .bank-connection-actions {
        justify-content: flex-start;
    }
}



@media (max-width: 480px) {
    body.app-shell {
        display: block;
    }

    .app-shell .sidebar {
        background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-secondary));
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .app-shell .nav {
        flex-direction: row;
        overflow-x: auto;
    }

    .app-shell .nav-item .nav-item-label {
        display: none;
    }

    .app-shell .main-content {
        width: 100%;
        margin-left: 0;
    }
}



.entity-workspace-invoice-import-detail .invoice-import-detail-attachments a {
    color: var(--accent-primary);
    text-decoration: none;
}



.entity-workspace-invoice-import-detail .invoice-import-detail-attachments a:hover {
    text-decoration: underline;
}



.invoice-import-inline-input {
    width: 100%;
    max-width: 12rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
}



#invoice-import-detail-lines-table .invoice-import-inline-input {
    max-width: none;
}



.entity-workspace-invoice-import-detail .invoice-import-detail-header-meta {
    margin-top: 0.2rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}



#invoice-import-detail-lines-table.invoice-import-detail-lines-table {
    table-layout: fixed;
    width: 100%;
    min-width: 74rem;
}



#invoice-import-detail-lines-table .invoice-import-line-col-description {
    width: 24rem;
}



#invoice-import-detail-lines-table .invoice-import-line-col-vendor-sku {
    width: 9.5rem;
}



#invoice-import-detail-lines-table .invoice-import-line-col-qty,
#invoice-import-detail-lines-table .invoice-import-line-col-uom {
    width: 4.75rem;
}



#invoice-import-detail-lines-table .invoice-import-line-col-unit-cost,
#invoice-import-detail-lines-table .invoice-import-line-col-extended {
    width: 7.5rem;
}



#invoice-import-detail-lines-table .invoice-import-line-col-item {
    width: 18rem;
}



#invoice-import-detail-lines-table .invoice-import-line-col-actions {
    width: 6rem;
}



#invoice-import-detail-lines-table .invoice-import-line-col-status {
    width: 10rem;
}



#invoice-import-detail-lines-table .invoice-import-line-col-drag {
    cursor: grab;
    display: inline-flex;
    position: absolute;
    left: 0.22rem;
    top: 50%;
    width: 0.5rem;
    justify-content: center;
    transform: translateY(-50%);
    opacity: 0.18;
    user-select: none;
    transition: opacity 0.15s ease-in-out;
}



#invoice-import-detail-lines-table tbody tr:hover .invoice-import-line-col-drag,
#invoice-import-detail-lines-table thead th:hover .invoice-import-line-col-drag {
    opacity: 0.6;
}



#invoice-import-detail-lines-table .invoice-import-line-col-drag:active {
    cursor: grabbing;
}



#invoice-import-detail-lines-table thead th.invoice-line-th-dragging {
    opacity: 0.68;
}



#invoice-import-detail-lines-table thead th.invoice-line-th-drag-over {
    box-shadow: inset 0 -3px 0 var(--accent-primary);
}



.invoice-import-extraction-error {
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 6px;
    background-color: rgba(220, 53, 69, 0.12);
    color: var(--money-negative);
    font-size: 0.9rem;
}



.entity-workspace-invoice-import-detail .entity-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}



.entity-workspace-invoice-import-detail .invoice-import-detail-meta-card {
    margin-bottom: 1rem;
    overflow: visible; /* Prevent entity-table-card's overflow from clipping comboboxes */
}



.entity-workspace-invoice-import-detail .invoice-import-meta-heading {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}



/* 4-column structured metadata layout for a cleaner dashboard profile */
.invoice-import-meta-grid-new {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin: 0;
}



@media (max-width: 1200px) {
    .invoice-import-meta-grid-new {
        grid-template-columns: repeat(2, 1fr);
    }
}



@media (max-width: 680px) {
    .invoice-import-meta-grid-new {
        grid-template-columns: 1fr;
    }
}



.invoice-meta-section {
    background: transparent;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    position: relative;
}



@media (min-width: 1201px) {
    .invoice-meta-section:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 10%;
        height: 80%;
        border-right: 1px solid rgba(217, 181, 142, 0.15);
    }
}



.invoice-meta-section-title {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    font-weight: 800;
    color: rgba(92, 75, 60, 0.8);
    margin: 0;
    border-bottom: 1px solid rgba(217, 181, 142, 0.18);
    padding-bottom: 0.45rem;
}



.invoice-meta-section dl {
    display: grid;
    grid-template-columns: minmax(4.5rem, max-content) 1fr;
    gap: 0.45rem 0.75rem;
    margin: 0;
    align-items: center;
    font-size: 0.815rem;
}



.invoice-meta-section dt {
    color: rgba(92, 75, 60, 0.78);
    font-weight: 600;
}



.invoice-meta-section dd {
    margin: 0;
    color: var(--text-primary);
    word-break: break-word;
}



/* Beautiful address cards that expand inline to prevent visual clutter */
.invoice-meta-address {
    font-size: 0.75rem;
    line-height: 1.35;
    color: rgba(43, 35, 28, 0.85) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.15s ease-in-out;
}



.invoice-meta-address:hover {
    -webkit-line-clamp: unset;
    background: var(--bg-tertiary);
    border-radius: 4px;
    padding: 0.25rem 0.38rem;
    margin: -0.25rem -0.38rem;
    box-shadow: 0 4px 10px rgba(68, 43, 24, 0.08);
    border: 1px solid rgba(217, 181, 142, 0.3);
    position: relative;
    z-index: 10;
    cursor: help;
}



/* Financial amount styling */
.invoice-meta-amount {
    font-weight: 600;
}



.invoice-meta-amount-grand {
    font-weight: 800;
    font-size: 0.98rem;
    color: var(--accent-primary) !important; /* Soft premium primary accent */
}


/* Custom inputs inside meta cards (Ghost Inputs) */
.invoice-meta-section input.invoice-import-inline-input,
.invoice-meta-section select {
    width: 100%;
    padding: 0.25rem 0.15rem;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    background: transparent;
    border: none;
    border-bottom: 1px dashed rgba(217, 181, 142, 0.4);
    border-radius: 0;
    outline: none;
    transition: all 0.15s ease-in-out;
}



.invoice-meta-section input.invoice-import-inline-input:hover,
.invoice-meta-section input.invoice-import-inline-input:focus,
.invoice-meta-section select:hover,
.invoice-meta-section select:focus {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--accent-primary);
    border-radius: 4px;
    padding: 0.25rem 0.4rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}



.entity-workspace-invoice-import-detail .invoice-import-validation-warnings {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}



.entity-workspace-invoice-import-detail .invoice-import-validation-warnings[hidden] {
    display: none !important;
}



.entity-workspace-invoice-import-detail .invoice-import-validation-warning {
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    background: rgba(199, 104, 33, 0.12);
    color: var(--accent-primary);
    border: 1px solid rgba(199, 104, 33, 0.35);
}



.entity-workspace-invoice-import-detail .invoice-import-validation-error {
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    background: rgba(220, 53, 69, 0.12);
    color: var(--money-negative);
    border: 1px solid rgba(220, 53, 69, 0.45);
}



.entity-workspace-invoice-import-detail .invoice-reconciliation-error {
    color: var(--danger-text-on-dark) !important;
}



.entity-workspace-invoice-import-detail dd.invoice-reconciliation-error,
.entity-workspace-invoice-import-detail .invoice-import-inline-input.invoice-reconciliation-error {
    background: rgba(220, 53, 69, 0.14) !important;
    border-color: rgba(248, 113, 113, 0.75) !important;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.2);
}



.entity-workspace-invoice-import-detail td.invoice-reconciliation-error {
    background: rgba(220, 53, 69, 0.12) !important;
}



.entity-workspace-invoice-import-detail .invoice-import-detail-header h2 {
    margin: 0.25rem 0;
}



.entity-workspace-invoice-import-detail .invoice-import-detail-header .subtitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}



/* P1.2: invoice status uses shared status-chip. */



.entity-workspace-invoice-import-detail .link-button,
.entity-workspace-bills .link-button {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent-primary);
    cursor: pointer;
    font: inherit;
}



.entity-workspace-invoice-import-detail .link-button:hover,
.entity-workspace-bills .link-button:hover {
    text-decoration: underline;
}



.entity-workspace-invoice-import-detail .invoice-import-llm-raw-panel {
    margin-top: 1rem;
}



.entity-workspace-invoice-import-detail .invoice-import-llm-raw-panel summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.35rem 0;
}



.entity-workspace-invoice-import-detail .invoice-import-llm-raw-json {
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    max-height: 24rem;
    overflow: auto;
    font-family: var(--font-data);
    font-size: 0.8rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    border-radius: 0.375rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}



/* Invoice import detail — wide content strip (parity with Inventory workspace) */
.app-shell .main-content:has(#invoice-import-detail-view.active) {
    padding-inline: 1.25rem;
}



.app-shell .main-content:has(#invoice-import-detail-view.active) .main-content-inner {
    max-width: min(1680px, calc(100vw - var(--sidebar-current) - 2.5rem));
}



.entity-workspace-invoice-import-detail.invoice-import-detail-wide {
    min-width: 0;
}



.entity-workspace-invoice-import-detail.invoice-import-detail-wide .invoice-import-detail-view-header.page-header {
    margin-bottom: 1rem;
}



.entity-workspace-invoice-import-detail.invoice-import-detail-wide .invoice-import-detail-view-header h2 {
    font-size: 1.35rem;
    font-weight: 650;
    margin-bottom: 0.08rem;
}



.entity-workspace-invoice-import-detail.invoice-import-detail-wide .invoice-import-detail-view-header .subtitle {
    font-size: 0.8rem;
    line-height: 1.35;
}



.entity-workspace-invoice-import-detail.invoice-import-detail-wide .invoice-import-detail-header-meta {
    font-size: 0.78rem;
}



.entity-workspace-invoice-import-detail.invoice-import-detail-wide .invoice-import-meta-heading {
    font-size: 0.84rem;
    margin-bottom: 0.5rem;
}




.entity-workspace-invoice-import-detail .entity-table-card:has(#invoice-import-detail-lines-table) {
    padding: 0.52rem 0.55rem;
    overflow-x: auto;
}



.app-shell #invoice-import-detail-lines-table .invoice-import-line-col-resize {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: col-resize;
    z-index: 4;
    box-sizing: border-box;
}



.app-shell #invoice-import-detail-lines-table .invoice-import-line-col-resize:hover {
    background: rgba(102, 126, 234, 0.1);
}



body.invoice-import-column-resizing {
    cursor: col-resize !important;
}



/* Dense line-items table: collapse row spacing, flatten “card row” rounding */
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact thead th[data-col-id] {
    position: relative;
    box-sizing: border-box;
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact {
    border-collapse: collapse;
    border-spacing: 0;
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact thead th {
    vertical-align: bottom;
    text-align: left;
    background: linear-gradient(180deg, var(--shell-gradient-top), var(--shell-gradient-bottom));
    color: rgba(92, 75, 60, 0.9);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.615rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    padding: 0;
    padding-right: 0.75rem;
    white-space: nowrap;
    box-sizing: border-box;
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact .invoice-import-line-th-inner {
    display: flex;
    position: relative;
    align-items: center;
    min-width: 0;
    width: 100%;
    padding: 0.5rem 0.62rem;
    padding-right: 0.9rem;
    box-sizing: border-box;
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact .invoice-import-line-th-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact thead th[data-col-id='qty'],
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact thead th[data-col-id='unit-cost'],
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact thead th[data-col-id='extended'],
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody td[data-col-id='qty'],
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody td[data-col-id='unit-cost'],
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody td[data-col-id='extended'] {
    text-align: right;
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact thead th[data-col-id='qty'] .invoice-import-line-th-inner,
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact thead th[data-col-id='unit-cost'] .invoice-import-line-th-inner,
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact thead th[data-col-id='extended'] .invoice-import-line-th-inner {
    justify-content: flex-end;
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact [data-col-id='qty'],
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact [data-col-id='unit-cost'],
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact [data-col-id='extended'] {
    text-align: right;
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact [data-col-id='actions'],
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact [data-col-id='status'] {
    text-align: center;
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact [data-col-id='actions'] .invoice-import-line-th-inner,
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact [data-col-id='status'] .invoice-import-line-th-inner {
    justify-content: center;
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact .invoice-import-line-col-drag {
    opacity: 0.2;
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody td {
    font-size: 0.8125rem;
    border: 0 none;
    border-bottom: 1px solid rgba(217, 181, 142, 0.15);
    border-radius: 0 !important;
    padding: 0.45rem 0.52rem;
    background: var(--bg-primary);
    vertical-align: middle;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* Alternating row colors (zebra striping) for scanning without solid borders */
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody tr:nth-child(even) td {
    background: var(--shell-gradient-top);
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody tr.entity-record-row:hover > td {
    background: var(--accent-soft);
    border-bottom-color: rgba(217, 181, 142, 0.35);
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody tr.entity-record-row > td:first-child,
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody tr.entity-record-row > td:last-child {
    border-left-width: 0;
    border-right-width: 0;
}



/* Elegant "ghost" inputs: borderless and transparent by default to blend into the rows. */
/* Smooth border/background transitions when hovering/focusing fields or parent row. */
.entity-workspace-invoice-import-detail #invoice-import-detail-lines-table.invoice-import-detail-lines-compact .invoice-import-inline-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.2rem 0.38rem;
    font-size: 0.805rem;
    border-radius: 4px;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition: all 0.12s ease-in-out;
    color: var(--text-primary);
    text-overflow: ellipsis;
}



.entity-workspace-invoice-import-detail #invoice-import-detail-lines-table.invoice-import-detail-lines-compact [data-col-id='qty'] .invoice-import-inline-input,
.entity-workspace-invoice-import-detail #invoice-import-detail-lines-table.invoice-import-detail-lines-compact [data-col-id='unit-cost'] .invoice-import-inline-input,
.entity-workspace-invoice-import-detail #invoice-import-detail-lines-table.invoice-import-detail-lines-compact [data-col-id='extended'] .invoice-import-inline-input {
    text-align: right;
}



/* Gently reveal input bounds on row hover to show editability */
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody tr.entity-record-row:hover .invoice-import-inline-input,
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody tr.entity-record-row:hover select {
    border-color: transparent;
    border-bottom: 1px dashed rgba(217, 181, 142, 0.4);
    background: transparent;
}



/* Highlight specific hovered input */
.entity-workspace-invoice-import-detail #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody tr td:hover .invoice-import-inline-input,
.entity-workspace-invoice-import-detail #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody tr td:hover select {
    border-color: rgba(217, 181, 142, 0.4) !important;
    background: var(--bg-secondary) !important;
    border-style: solid !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}



/* Fully focus focused input */
.entity-workspace-invoice-import-detail #invoice-import-detail-lines-table.invoice-import-detail-lines-compact .invoice-import-inline-input:focus {
    border-color: var(--accent-primary) !important;
    background: var(--bg-secondary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
}



/* Matching elegant ghost select dropdown styling */
.entity-workspace-invoice-import-detail #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody select {
    font-size: 0.805rem;
    padding: 0.18rem 0.35rem;
    border-radius: 4px;
    max-width: 100%;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.12s ease-in-out;
    color: var(--text-primary);
    cursor: pointer;
}



/* Gently reveal dropdown bounds on row hover */
.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody tr.entity-record-row:hover select {
    border-color: rgba(217, 181, 142, 0.4);
    background: rgba(255, 255, 255, 0.65);
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody tr.entity-record-row:hover select:hover {
    border-color: var(--border-color);
    background: var(--bg-secondary);
}



.entity-workspace-invoice-import-detail #invoice-import-detail-lines-table.invoice-import-detail-lines-compact tbody select:focus {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}



#invoice-import-detail-lines-table.invoice-import-detail-lines-compact th[data-col-id='description'],
#invoice-import-detail-lines-table.invoice-import-detail-lines-compact td[data-col-id='description'] {
    white-space: normal;
}



@media (pointer: coarse) {
    #invoice-import-detail-lines-table .invoice-import-line-col-resize {
        display: none;
    }
}



.app-shell .main-content:has(#inventory-view.active) {
    padding-inline: 1.25rem;
}



.app-shell .main-content:has(#inventory-view.active) .main-content-inner {
    max-width: min(1680px, calc(100vw - var(--sidebar-current) - 2.5rem));
}



.entity-workspace-inventory {
    min-width: 0;
}



.entity-workspace-inventory .entity-page-header {
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 0.85rem;
}



/* `flex: 0 0 auto` refused to shrink, so the row kept its natural width and ran
   past the viewport at tablet size — measured 266px past 820px, with "Import
   supplier invoice" starting beyond the right edge entirely. Shrinking is
   allowed now, so the buttons wrap onto a second line instead of leaving. */
.inventory-header-actions {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.45rem;
    padding-top: 0.15rem;
}



.inventory-header-actions .btn {
    min-width: 7rem;
    padding: 0.72rem 1rem;
    white-space: nowrap;
}



.inventory-workspace-grid {
    display: grid;
    grid-template-columns: minmax(12rem, 15.5rem) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
    min-width: 0;
}



.inventory-workspace-grid--wide {
    width: 100%;
}



.inventory-sidebar {
    padding: 0.8rem;
    position: sticky;
    top: 0.75rem;
}



.inventory-sidebar-header,
.inventory-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}



.inventory-sidebar-header {
    align-items: center;
    margin-bottom: 0.75rem;
}



.inventory-sidebar-header h3,
.inventory-detail-header h3 {
    margin: 0;
}



.inventory-category-tree,
.inventory-main-panel,
.inventory-detail-shell,
.inventory-detail-list {
    display: grid;
    gap: 0.5rem;
}



.inventory-main-panel {
    gap: 0.75rem;
    min-width: 0;
}



.inventory-category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary);
    padding: 0.45rem 0.55rem;
    text-align: left;
    cursor: pointer;
}



.inventory-category-row:hover,
.inventory-category-row.active {
    background: rgba(199, 104, 33, 0.12);
}



.inventory-category-row small {
    color: var(--text-muted);
    font-size: 0.68rem;
}



.inventory-toolbar-card {
    padding: 0.65rem 0.75rem;
}



.entity-workspace-inventory .coa-toolbar {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) repeat(2, max-content);
    gap: 0.65rem;
    width: 100%;
}



.entity-workspace-inventory .coa-toolbar label {
    min-width: 0;
}



.entity-workspace-inventory .checkbox-row,
.inventory-form-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.25rem;
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 750;
    white-space: nowrap;
}



.entity-workspace-inventory .checkbox-row input,
.inventory-form-checkbox input {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
}



.inventory-table {
    min-width: 64rem;
}



.inventory-table th:nth-child(1) { width: 9rem; }


.inventory-table th:nth-child(2) { min-width: 13rem; }


.inventory-table th:nth-child(3) { width: 13rem; }


.inventory-table th:nth-child(4) { width: 7rem; }


.inventory-table th:nth-child(5) { width: 7rem; }


.inventory-table th:nth-child(6) { width: 8rem; }


.inventory-table th:nth-child(7) { width: 18rem; }



.inventory-table td {
    overflow-wrap: anywhere;
}



.inventory-actions-cell {
    white-space: nowrap;
}



.inventory-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    min-width: 0;
}



.app-shell .inventory-table-actions .entity-row-action {
    min-width: 3.55rem;
    padding-inline: 0.6rem;
}



.inventory-detail-modal {
    width: 100%;
}



.inventory-detail-panel {
    display: none;
}



.inventory-detail-panel.active {
    display: grid;
    gap: 0.85rem;
}



.inventory-inline-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.65rem;
    align-items: end;
}



.inventory-inline-form label {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 750;
}



.inventory-inline-form .btn {
    min-height: 2.25rem;
}



.inventory-detail-row {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(7rem, 1fr) minmax(7rem, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}



.inventory-dialog {
    border: 0;
    color: var(--text-primary);
    margin: 0;
    max-height: none;
    max-width: none;
    padding: 0;
}



.inventory-dialog::backdrop {
    background: rgba(36, 27, 20, 0.42);
    backdrop-filter: blur(5px);
}



.inventory-dialog-panel {
    display: grid;
    gap: 1rem;
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    overflow: auto;
    margin: auto;
    padding: 1.15rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}



.inventory-dialog-panel--wide {
    width: min(56rem, calc(100vw - 2rem));
}



.inventory-dialog-panel--compact {
    width: min(46rem, calc(100vw - 2rem));
}



.inventory-dialog-panel--detail {
    width: min(76rem, calc(100vw - 2rem));
}



.inventory-dialog-panel h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.08rem;
    line-height: 1.25;
}



.inventory-dialog-panel .form-error {
    margin: 0;
}




.inventory-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
    align-items: end;
}



.inventory-form-grid--single {
    grid-template-columns: 1fr;
}



.inventory-form-grid label {
    display: grid;
    gap: 0.32rem;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 750;
}



.inventory-form-grid input:not([type="checkbox"]),
.inventory-form-grid select,
.inventory-inline-form input,
.inventory-inline-form select {
    width: 100%;
    min-height: 2.35rem;
    padding: 0.48rem 0.6rem;
    font: inherit;
}



.inventory-form-grid .inventory-form-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    align-self: center;
    gap: 0.45rem;
}



.inventory-form-grid .inventory-form-checkbox input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    min-height: 0;
    padding: 0;
}



.inventory-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    margin: 0;
    padding: 0.8rem 0 0;
    border-top: 1px solid var(--border-color);
}



.inventory-form-actions .btn {
    min-width: 5.75rem;
}



@media (max-width: 820px) {
    .app-shell .main-content:has(#inventory-view.active) {
        padding-inline: 0.75rem;
    }

    .app-shell .main-content:has(#inventory-view.active) .main-content-inner {
        max-width: 100%;
    }

    .entity-workspace-inventory .entity-page-header {
        align-items: stretch;
    }

    .inventory-header-actions {
        justify-content: flex-start;
    }

    .inventory-header-actions .btn {
        flex: 1 1 9rem;
    }

    .inventory-workspace-grid {
        grid-template-columns: 1fr;
    }

    .inventory-sidebar {
        position: static;
    }

    .entity-workspace-inventory .coa-toolbar {
        grid-template-columns: 1fr;
    }

    .inventory-table-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .inventory-detail-row {
        grid-template-columns: 1fr;
    }

    .inventory-dialog-panel,
    .inventory-dialog-panel--wide,
    .inventory-dialog-panel--compact,
    .inventory-dialog-panel--detail {
        width: min(100%, calc(100vw - 1rem));
        max-height: calc(100vh - 1rem);
        padding: 0.95rem;
    }

    .inventory-form-actions {
        flex-direction: column-reverse;
    }

    .inventory-form-actions .btn {
        width: 100%;
    }
}



.invoice-line-match-cell {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}



.invoice-line-match-display {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}



.invoice-line-match-primary {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
}



.invoice-line-match-confidence {
    font-size: 0.75rem;
    color: var(--text-secondary);
}



.invoice-line-match-vendor-call {
    font-size: 0.75rem;
    color: var(--text-muted, var(--text-secondary));
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
}



.invoice-line-match-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}



.invoice-line-match-combobox-wrap {
    margin-top: 0.15rem;
}



.invoice-line-match-combobox.tx-payee-combobox {
    width: 100%;
    min-width: 12rem;
}



.invoice-line-match-change-btn:focus-visible,
.invoice-line-match-clear-btn:focus-visible,
.invoice-line-match-combobox .combobox-input:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}



.invoice-import-line-skipped td {
    opacity: 0.55;
    background: rgba(255, 255, 255, 0.02);
}



.invoice-line-skip-btn {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--text-secondary);
    opacity: 0.85;
}


.invoice-line-skip-btn--active,
.invoice-line-skip-btn[aria-pressed="true"] {
    color: var(--accent-primary);
    opacity: 1;
}


.invoice-line-skip-btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}



.invoice-line-item-combobox.tx-payee-combobox {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}



.invoice-line-item-combobox.tx-payee-combobox .combobox-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    font-size: 0.805rem;
    overflow: hidden;
    text-overflow: ellipsis;
}



.app-shell #invoice-import-detail-lines-table.invoice-import-detail-lines-compact [data-col-id='actions'] .btn-icon {
    margin-inline: auto;
}



.invoice-line-match-confidence--highest .invoice-line-item-combobox .combobox-input {
    border-color: rgba(102, 126, 234, 0.65);
}



.invoice-line-match-confidence--medium .invoice-line-item-combobox .combobox-input {
    border-color: rgba(255, 193, 7, 0.45);
}



.invoice-line-match-confidence--low .invoice-line-item-combobox .combobox-input {
    border-color: rgba(255, 255, 255, 0.12);
}



.invoice-import-line-skipped .invoice-line-item-combobox {
    pointer-events: none;
    opacity: 0.5;
}



.invoice-line-create-context {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}



.invoice-line-create-context-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1rem;
    margin: 0.5rem 0 0;
}



.invoice-line-create-context-grid dd {
    margin: 0;
    color: var(--text-primary);
}



.bills-recurring-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0;
}



.bills-recurring-header .card-kicker {
    margin: 0;
    flex: 1 1 16rem;
}



@media (max-width: 768px) {
    .bill-detail-readonly {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .bill-detail-readonly dd {
        margin-bottom: 0.5rem;
    }
}



/* ===== Inventory supplier-invoice intake (Stage 4 Task 6) =================
   One modal, two tabs, and a compact list on the Inventory page. Deliberately
   not a workspace: supplier documents belong to Accounts Payable, and this is
   only the stock-facing view of them. */

.inventory-intake-panel {
    margin-top: 1rem;
}



.inventory-intake-progress {
    margin: 0 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}



.inventory-intake-bill-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 22rem;
    overflow-y: auto;
}



.inventory-intake-bill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border-color);
}



.inventory-intake-bill-row:last-child {
    border-bottom: none;
}



.inventory-intake-bill-row > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}



.inventory-supplier-invoices-card {
    margin-top: 1rem;
}



.inventory-supplier-invoices-header {
    padding: 1rem 1.25rem 0;
}



.inventory-supplier-invoices-header h3 {
    margin: 0 0 0.25rem;
}



.inventory-supplier-invoices-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1.25rem;
}



.inventory-supplier-invoice-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}



.inventory-supplier-invoice-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}



.inventory-supplier-invoice-row .bills-row-secondary {
    margin-right: auto;
}



.inventory-supplier-invoices-status {
    margin: 0.5rem 0 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
}



.transactions-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.transactions-untagged-card {
    border-color: rgba(102, 126, 234, 0.45);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.14));
}

.transactions-untagged-header,
.transactions-untagged-actions,
.transactions-untagged-facets,
.transactions-untagged-counts {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.transactions-untagged-header {
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.transactions-untagged-header h3 {
    margin: 0.1rem 0 0.25rem;
}

.transactions-untagged-header .subtitle {
    margin: 0;
    color: var(--text-secondary);
}

.transactions-untagged-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.transactions-untagged-facets {
    align-items: flex-end;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.transactions-untagged-facets .form-group {
    flex: 1 1 10rem;
    min-width: 9rem;
    margin: 0;
}

.transactions-untagged-facets .transactions-untagged-search-field {
    flex-basis: 15rem;
}

.transactions-untagged-facets label {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.transactions-untagged-counts {
    flex-wrap: wrap;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tx-untagged-count,
.tx-tag-field-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.2rem 0.5rem;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
    font-size: 0.72rem;
    white-space: nowrap;
}

.tx-untagged-count strong {
    color: var(--text-primary);
    font-size: 0.85rem;
}

.tx-tag-field-status {
    margin-top: 0.25rem;
    font-weight: 700;
}

.tx-tag-field-status.is-missing {
    background: rgba(245, 158, 11, 0.16);
    color: var(--badge-orange);
}

.tx-tag-field-status.is-set {
    background: rgba(34, 197, 94, 0.14);
    color: var(--badge-green);
}

.tx-tag-proposal {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.3rem;
    color: var(--badge-purple);
    font-size: 0.75rem;
}

.tx-tag-proposal-label {
    font-weight: 700;
}

.tx-tag-proposal small {
    color: var(--text-secondary);
    text-transform: capitalize;
}

.tx-untagged-row .tx-actions-col {
    min-width: 12rem !important;
}

.tx-untagged-row .tx-actions-col .btn {
    margin: 0.12rem;
}

.tx-history-popover {
    position: absolute;
    right: 0.5rem;
    z-index: 5;
    width: min(20rem, 80vw);
    margin-top: 0.3rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.55rem;
    background: var(--surface-light);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
    text-align: left;
}

.tx-actions-col {
    position: relative;
}

.xevt-preview-heading,
.xevt-group-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;
    margin-bottom: 0.75rem;
}

.xevt-preview-heading span,
.xevt-group-summary span {
    color: var(--text-secondary);
}

.xevt-preview-entity {
    margin-top: 1rem;
}

.xevt-preview-entity h4 {
    margin-bottom: 0.4rem;
}

.xevt-preview-table .xevt-pnl-line {
    background: rgba(245, 158, 11, 0.14);
    box-shadow: inset 3px 0 0 var(--badge-orange);
}

.xevt-pnl-label {
    color: var(--badge-orange);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.xevt-settlement-list {
    display: grid;
    gap: 0.6rem;
}

.xevt-settlement-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, 10rem);
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: 0.55rem;
}

.xevt-settlement-row label {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
}

.xevt-settlement-row input[type="number"] {
    min-width: 0;
}

.xevt-group-rows {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

@media (max-width: 640px) {
    .xevt-settlement-row {
        grid-template-columns: 1fr;
    }
}

.tx-history-event {
    display: grid;
    gap: 0.15rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
}

.tx-history-event:last-child {
    border-bottom: 0;
}

.tx-history-event span {
    color: var(--text-secondary);
}

.transactions-untagged-status {
    min-height: 1.1rem;
    margin: 0.65rem 0 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.transactions-untagged-status.is-error {
    color: var(--badge-red);
}

.transactions-untagged-status.is-success {
    color: var(--badge-green);
}

@media (max-width: 820px) {
    .transactions-untagged-header {
        flex-direction: column;
    }

    .transactions-untagged-actions {
        justify-content: flex-start;
    }
}



@media (max-width: 820px) {
    .transaction-file-import-controls {
        grid-template-columns: 1fr;
    }
}



/* Capital performance page */
.entity-workspace-capital.active {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}



.capital-status {
    min-height: 1.25rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}



.capital-exclusions {
    border-left: 3px solid var(--accent-primary);
    padding: 0.75rem 1rem;
    background: rgba(42, 120, 214, 0.08);
    border-radius: 0 0.5rem 0.5rem 0;
}



.capital-exclusions-label {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}



.capital-exclusions-list {
    margin: 0;
    padding-left: 1.1rem;
}



.capital-unclassified {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: rgba(237, 161, 0, 0.12);
    border: 1px solid rgba(237, 161, 0, 0.35);
    color: var(--text-primary);
}



.capital-series-blocks {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}



.capital-series-header {
    margin-bottom: 0.75rem;
}



.capital-series-header h3 {
    margin: 0;
    font-size: 1.15rem;
}



.capital-metrics-headline .stat-value {
    font-size: 1.75rem;
}



.capital-metrics-secondary .capital-stat-secondary-value {
    font-size: 1.15rem;
}



.capital-provenance {
    font-size: 0.75rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}



.capital-chart-container {
    position: relative;
    min-height: 16rem;
    height: 18rem;
}



.capital-lineage-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}



@media (max-width: 640px) {
    .capital-chart-container {
        min-height: 13rem;
        height: 14rem;
    }

    .capital-chart-card .card-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }
}



.projection-stale-tag {
    font-size: 0.8em;
    opacity: 0.75;
    font-style: italic;
}



/* ===== Design P4 · Projection ==============================================
   The timeline is the page (design/projection-redesign.md): header + scenario
   selector, verdict sentence, plot switcher, chart, snapshot beside
   assumptions, and data entry collapsed into a setup bar at the foot. */

.projection-page-header {
    align-items: flex-start;
    gap: 1rem;
}



/* Segmented control, scoped to this view — components.md has no shared one yet,
   and inventing a global component here would front-run P2. */
.projection-segmented {
    display: inline-flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    max-width: 100%;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-muted);
}



.projection-segment {
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.2;
    padding: 0.4rem 0.75rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    flex: 0 0 auto;
    white-space: nowrap;
}



.projection-segment:hover {
    color: var(--text-primary);
}



.projection-segment.is-selected {
    background: var(--surface-light);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}



.projection-segment:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}



/* The page's one sentence of prose — the first consumer of --font-prose. */
.projection-verdict {
    font-family: var(--font-prose);
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--text-primary);
    max-width: 58ch;
    margin: 0.25rem 0 0.5rem;
}



.projection-chart-card {
    min-height: 0;
}



.projection-chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}



.projection-chart-kicker {
    margin: 0;
    flex: 1 1 14rem;
    min-width: 0;
}



.projection-chart-container {
    position: relative;
    min-height: 21rem;
    height: 24rem;
}



.projection-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}



.projection-month-picker {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1rem;
}



.projection-month-picker input[type="range"] {
    width: 100%;
    accent-color: var(--accent-primary);
}



.projection-snapshot-head {
    font-weight: 600;
    margin: 0 0 0.5rem;
}



.projection-snapshot-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.3rem 1rem;
    margin: 0 0 0.75rem;
}



.projection-snapshot-row {
    display: contents;
}



.projection-snapshot-row dt {
    color: var(--text-secondary);
    font-size: 0.88rem;
}



.projection-snapshot-row dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}



.projection-snapshot-buckets-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.5rem;
}



.projection-snapshot-horizon {
    font-size: 0.85rem;
    margin: 0;
}



.projection-assumption-group {
    margin-bottom: 1rem;
}



.projection-assumption-group h4 {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.4rem;
}



.projection-assumption-group li {
    font-size: 0.88rem;
    color: var(--text-secondary);
}



.projection-setup-card {
    padding: 0;
    overflow: hidden;
}



.projection-setup-toggle {
    display: flex;
    width: 100%;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
}



.projection-setup-toggle:hover {
    background: var(--surface-muted);
}



.projection-setup-toggle:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}



.projection-setup-title {
    font-weight: 600;
    color: var(--text-primary);
}



.projection-setup-summary {
    flex: 1 1 auto;
    min-width: 0;
    font-variant-numeric: tabular-nums;
}



.projection-setup-chevron {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg);
    transition: var(--transition);
}



.projection-setup-toggle[aria-expanded="true"] .projection-setup-chevron {
    transform: rotate(-135deg);
}



.projection-setup-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--border-color);
}



@media (max-width: 900px) {
    .projection-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .projection-page-header {
        flex-direction: column;
    }

    .projection-segmented {
        width: 100%;
        overflow-x: auto;
    }

    .projection-segment {
        text-align: center;
    }
}



@media (max-width: 640px) {
    .projection-chart-container {
        min-height: 16rem;
        height: 17rem;
    }
}



/* ===== Design P3.3 — Transactions: column picker, context bar, receipt preview ===== */

/* Column picker: one disclosure for every column control (optional columns + Reset),
   replacing a checkbox stranded in the filter panel and a button stranded in the pager. */
.tx-column-picker {
    position: relative;
    display: inline-flex;
}



.tx-column-picker-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 13rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-elevated, var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}



.tx-column-picker-panel[hidden] {
    display: none;
}



.tx-column-picker-kicker {
    margin: 0;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}



.tx-column-picker-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
}



.tx-column-picker-reset {
    align-self: flex-start;
    margin-top: 0.15rem;
    padding-left: 0;
}



/* Reconciliation-mode bar: pinned so the tie-out figure survives scrolling the register. */
.transactions-context-bar-host {
    position: sticky;
    top: 0;
    z-index: 30;
    margin-bottom: 0.75rem;
}



.transactions-context-bar-host[hidden] {
    display: none;
}



/* Read-only receipt preview — the light variant of the receipt-review presentation. */
.tx-receipt-preview-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}



.tx-receipt-preview-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* B12: the inline preview takes a full row of its own above the facts and
       Download, rather than a third column that would squeeze both. Wrapping
       does that without a second DOM level. */
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}



/* B12 — the attachment painted in the page, from GET .../:aid/content.
   Capped by viewport height rather than a fixed pixel height so a tall till
   receipt and a wide A4 invoice both fit without the modal growing a second
   scrollbar, and `max-width: 100%` keeps the 390px viewport from scrolling
   sideways. */
.tx-receipt-preview-media {
    flex: 0 0 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-tertiary);
    text-align: center;
}



.tx-receipt-preview-image {
    display: block;
    max-width: 100%;
    max-height: 40vh;
    margin: 0 auto;
    object-fit: contain;
}



.tx-receipt-preview-pdf {
    display: block;
    width: 100%;
    height: 40vh;
    border: 0;
    background: var(--bg-secondary);
}



.tx-receipt-preview-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}



.tx-receipt-preview-name {
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}



.tx-receipt-preview-facts {
    font-size: 0.8rem;
    color: var(--text-secondary);
}



/* Footer group: prev / page input / next read as one control, not three. */
.pager-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}


/* ===== Design P3.4 — Reconcile: session bar, in-place register, account context ===== */

.app-session-bar-host {
    position: sticky;
    top: 0;
    z-index: 40;
    margin-bottom: 1rem;
}

.app-session-bar-host[hidden] {
    display: none;
}

.transactions-account-context-host {
    margin-bottom: 1rem;
}

.transactions-account-context-host[hidden] {
    display: none;
}

.app-shell .nav-item.nav-item-session-active {
    box-shadow: inset 2px 0 0 var(--money-positive);
}

.app-shell .nav-item.nav-item-session-active::after {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    margin-left: auto;
    border-radius: 50%;
    background: var(--money-positive);
    flex: 0 0 auto;
}

.reconcile-resumable-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.reconcile-resumable-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--accent-soft);
}

.reconcile-resumable-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 14rem;
}

.reconcile-resumable-period {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.reconcile-resumable-actions {
    display: flex;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-left: auto;
}

.reconciliation-register-kicker {
    margin: -0.35rem 0 0.65rem;
    font-size: 0.8rem;
}

.entity-workspace-reconcile #reconciliation-session-banner,
.entity-workspace-reconcile #reconciliation-register-card {
    margin-top: 1rem;
}

.entity-workspace-reconcile .reconciliation-register-scroll {
    overflow: auto;
    max-width: 100%;
}

.reconciliation-register-table .recon-reg-rec-col,
.reconciliation-register-table .tx-recon-include-col {
    width: 3rem;
    text-align: center;
}

.reconciliation-register-table .recon-reg-date-col,
.reconciliation-register-table .tx-date-col {
    width: 6.5rem;
    white-space: nowrap;
}

.reconciliation-register-table .recon-reg-desc-col,
.reconciliation-register-table .tx-desc-col {
    width: auto;
    min-width: 8rem;
}

.reconciliation-register-table .recon-reg-payee-col,
.reconciliation-register-table .tx-payee-col {
    width: 11rem;
}

.reconciliation-register-table .recon-reg-amt-col,
.reconciliation-register-table .tx-amount-col {
    width: 7.5rem;
    text-align: right;
    white-space: nowrap;
}

.reconciliation-register-table .recon-reg-status-col,
.reconciliation-register-table .tx-verify-col {
    width: 5.5rem;
}

.reconciliation-register-table .recon-reg-actions-col,
.reconciliation-register-table .tx-actions-col {
    width: 5.5rem;
}

.reconciliation-register-table .combobox-container,
.reconciliation-register-table .combobox-input {
    min-width: 0;
    max-width: 100%;
}

.reconciliation-register-table .tx-desc-primary {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.reconciliation-register-table .tx-desc-primary strong {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.coa-col-actions {
    width: 11rem;
}

#accounts-table td:last-child .entity-row-action {
    white-space: nowrap;
}

/* ===== TODAY — DESIGN P5 (attention-first layout, provenance, Upcoming, Recent) =====
 *
 * Appended as ONE section rather than edited into the `.today-*` block above, so a
 * parallel branch touching this file conflicts on nothing that already existed.
 * Every colour resolves through a token: layer 1 owns the only hex literals (P0.3).
 */

/* The attention strip now leads the page; the rule above it still carries the
 * top margin it needed as the third block down. */
#dashboard-view .today-attention-card {
    margin-top: 0;
}

#dashboard-view .today-summary-grid {
    margin-top: 1.5rem;
}

/* Visually hidden, still in the accessibility tree. The existing copy of this rule
 * is scoped to `.entity-workspace-cash-forecast`, so Today needs its own until a
 * shared-layer promotion is in scope. */
#dashboard-view .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Provenance sits under the figure it explains, quieter than the account count so
 * the eye reads value -> scope -> source. */
.today-provenance {
    margin: 0.15rem 0 0;
    /* --text-secondary, not --text-muted: this line carries a fact the reader may
     * act on (how stale the bank figure is), so it sits at the 4.5:1 body floor
     * theme-instrument.md sets, not the 3.0:1 caption floor. */
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.today-upcoming-card {
    margin-top: 1.5rem;
}

.today-upcoming-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
    min-width: 0;
}

.today-upcoming-cell {
    min-width: 0;
}

.today-upcoming-label {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.today-upcoming-value {
    margin: 0.15rem 0 0;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.today-upcoming-meta {
    margin: 0.15rem 0 0;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

/* A projected shortfall is the one thing on this card that is not neutral
 * reporting, so it gets the negative-money token and a rule to sit against. */
.today-upcoming-shortfall {
    margin: 1rem 0 0;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--money-negative);
    background: var(--bg-tertiary);
    border-radius: 6px;
    color: var(--money-negative);
    font-size: 0.85rem;
    font-weight: 600;
}

/* The bills row: the old standalone card, demoted to one line inside Upcoming. */
.today-upcoming-bills {
    margin-top: 1rem;
    padding: 0.75rem 0.25rem 0;
    border-top: 1px solid var(--border-color);
    cursor: pointer;
    border-radius: 8px;
}

.today-upcoming-bills:hover,
.today-upcoming-bills:focus-visible {
    background: var(--bg-tertiary);
}

/* Recent activity is confirmation, not action: smallest type step on the page and
 * no chips, so it never competes with the attention strip for the same glance. */
.today-recent-card {
    margin-top: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.today-recent-heading {
    margin: 0 0 0.5rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.today-recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.today-recent-item {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

.today-recent-label {
    color: var(--text-muted);
    min-width: 7rem;
}

.today-recent-value {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Chart fallback: hidden while the canvas paints, revealed when it cannot. */
.income-expense-chart-fallback {
    margin-top: 0.75rem;
}

.income-expense-chart-table {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.income-expense-fallback-table {
    min-width: 22rem;
}

@media (max-width: 640px) {
    .today-upcoming-value {
        font-size: 1.2rem;
    }

    .today-recent-label {
        min-width: 100%;
    }
}


/* ===== Design P6+P7 — Close + Accounts Payable ===== */

/* Found by the P6 capture, not by the spec: `.btn` sets `display: inline-flex`
   (3-components.css :1101), which outranks the UA stylesheet's `[hidden] {
   display: none }`. Every `hidden` button in the app therefore still paints —
   the P6 header's Unlock rendered beside Lock on an OPEN period until this rule
   landed. Scoped to these two workspaces because a global fix reaches pages
   this branch is not allowed to touch; reported in REPORT-DESIGN-P6-P7.md. */
.entity-workspace-close .btn[hidden],
.entity-workspace-bills .btn[hidden] {
    display: none;
}

/* --- P6 Close ------------------------------------------------------------ */

/* The header's own actions sit on the baseline of the title block rather than
   dropping under it, so the chip reads as part of the same sentence. */
.entity-workspace-close .close-header-actions {
    align-items: center;
}

.close-status-chip {
    display: inline-flex;
    align-items: center;
}

/* The verdict is the page's answer in words. --text-secondary, not
   --text-muted: it is a fact the user acts on, so it sits at the theme's body
   contrast floor, not the caption floor. */
.close-verdict {
    margin: 0 0 1rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.close-verdict:empty {
    display: none;
}

/* Month / Year / Company on one inline row, mirroring the Reconcile start form
   (4-views.css :2933). `.form-group` is display:block with no override, which
   is why these three stacked full-width before P6. */
.entity-workspace-close #close-period-form {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 0.6fr) minmax(12rem, 1fr);
    gap: 0.75rem;
    align-items: end;
}

.entity-workspace-close #close-period-form .form-group {
    margin: 0 !important;
}

/* B13 — the accounts behind the RECONCILIATION count, inside the Details cell.
   A plain unstyled <ul> would inherit the document's list indent and push the
   column wide; this is a bare stack in the cell's own type size. */
.close-step-items {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* B14 — the recent-periods list: one row per period, its chip pinned right. */
.close-recent-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.close-recent-list[hidden] {
    display: none;
}

.close-recent-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-color);
}

.close-recent-item:last-child {
    border-bottom: none;
}

.close-recent-period {
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* --- P7 Accounts Payable ------------------------------------------------- */

#bills-summary-strip {
    margin-bottom: 1rem;
}

#bills-summary-strip:empty {
    display: none;
}

/* The bulk bar, modelled on #transactions-bulk-bar but as a class rather than
   that bar's inline styles. It only exists while a row is selected. */
.bills-bulk-bar {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.bills-bulk-bar[hidden] {
    display: none;
}

.bills-bulk-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.bills-bulk-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.bills-bulk-field label {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.bills-bulk-field select,
.bills-bulk-field input {
    min-width: 9rem;
}

.bills-bulk-error {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.85rem;
    color: var(--badge-red);
}

.bills-bulk-error[hidden] {
    display: none;
}

/* Selection column: as narrow as the control it holds. */
.bills-select-col {
    width: 2.25rem;
    text-align: center;
}

.bills-table .bills-select-col input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
}

@media (max-width: 720px) {
    .entity-workspace-close #close-period-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .entity-workspace-close .close-header-actions {
        justify-content: flex-start;
    }

    .bills-bulk-bar {
        align-items: stretch;
    }

    .bills-bulk-field select,
    .bills-bulk-field input {
        width: 100%;
        min-width: 0;
    }
}

/* ===== Design P8+P9 — Receipts + Reports ===== */
/*
 * Receipts had no page-specific CSS at all before this section: every row
 * ReceiptViews.buildReceiptRow builds rendered as stacked, undivided <div>s.
 * The row shape itself is .list-row (3-components.css); what lives here is this
 * page's column layout on top of it, plus the tab counts and the duplicate card.
 */

.entity-workspace-receipts .receipt-row {
    align-items: baseline;
}

/*
 * Only the merchant grows. Every other column is fixed-basis so that the same
 * column starts at the same x on every row — a receipt whose extraction failed
 * carries an extra Retry button, and a row that sized itself to its own content
 * would put its date and total somewhere else than the row above it.
 */
.entity-workspace-receipts .receipt-merchant,
#receipt-review-extracted .receipt-merchant {
    flex: 1 1 8rem;
    min-width: 0;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.entity-workspace-receipts .receipt-date,
#receipt-review-extracted .receipt-date {
    flex: 0 0 6rem;
    min-width: 0;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.entity-workspace-receipts .receipt-total,
#receipt-review-extracted .receipt-total {
    flex: 0 0 6.5rem;
    min-width: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.entity-workspace-receipts .receipt-status,
#receipt-review-extracted .receipt-status {
    flex: 0 0 11rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.entity-workspace-receipts .receipt-status-detail,
#receipt-review-extracted .receipt-status-detail {
    color: var(--text-secondary);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.entity-workspace-receipts .receipt-original,
#receipt-review-extracted .receipt-original {
    flex: 0 0 7rem;
    min-width: 0;
}

.entity-workspace-receipts .receipt-actions,
#receipt-review-extracted .receipt-actions {
    flex: 0 0 15rem;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}

.entity-workspace-receipts .receipt-candidates {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.entity-workspace-receipts .receipt-candidate,
#receipt-review-candidates .receipt-candidate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--border-color);
}

#receipt-review-candidates .receipt-candidate:first-child {
    border-top: none;
    padding-top: 0;
}

#receipt-review-candidates .candidate-description {
    flex: 2 1 12rem;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

#receipt-review-candidates .candidate-date {
    flex: 0 1 7rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

#receipt-review-candidates .candidate-amount {
    flex: 0 1 7rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

#receipt-review-candidates .candidate-reason {
    flex: 1 1 12rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

#receipt-review-candidates .receipt-candidates-empty {
    color: var(--text-secondary);
}

/* Cloned from .bills-tab-count's shape — the sibling page under the same
   "Money" nav group already answers "how many" this way. */
.entity-workspace-receipts .receipt-tab-count {
    display: inline-block;
    min-width: 1.25rem;
    margin-left: 0.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--border-color);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
}

.entity-workspace-receipts [role="tab"][aria-selected="true"] .receipt-tab-count {
    background: var(--accent-primary);
    color: var(--on-dark);
}

/* B12 — the receipt painted in the review modal.

   The bytes come from GET /api/receipts/:id/content, this app's own origin, so
   `img-src 'self'` / `frame-src 'self'` already cover them; nothing in the CSP
   changed for this. Capped by viewport height rather than a fixed pixel height
   so a tall till receipt and a wide A4 invoice both fit without the modal
   growing a second scrollbar, and `max-width: 100%` keeps the 390px viewport
   from scrolling sideways. */
#receipt-review-preview .receipt-preview {
    margin: 0 0 0.75rem;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-tertiary);
    text-align: center;
}

#receipt-review-preview .receipt-preview-image {
    display: block;
    max-width: 100%;
    max-height: 45vh;
    margin: 0 auto;
    object-fit: contain;
}

#receipt-review-preview .receipt-preview-pdf {
    display: block;
    width: 100%;
    height: 45vh;
    border: 0;
    background: var(--bg-secondary);
}

#receipt-review-duplicate .receipt-duplicate-card {
    margin: 0.75rem 0;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--badge-orange);
    border-radius: 6px;
    background: var(--bg-tertiary);
}

#receipt-review-duplicate .receipt-duplicate-title {
    font-weight: 600;
    color: var(--text-primary);
}

#receipt-review-duplicate .receipt-duplicate-body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 0.35rem;
    color: var(--text-secondary);
}

#receipt-review-duplicate .receipt-duplicate-merchant {
    font-weight: 600;
    color: var(--text-primary);
}

#receipt-review-duplicate .receipt-duplicate-date,
#receipt-review-duplicate .receipt-duplicate-total {
    font-variant-numeric: tabular-nums;
}

#receipt-review-duplicate .receipt-duplicate-actions {
    margin-top: 0.5rem;
}

/* P6/P7 found that .btn's inline-flex outranks the UA [hidden] rule, so a
   hidden button still paints. Fixed here for the two workspaces this branch
   owns, the same scoped way. */
.entity-workspace-receipts .btn[hidden],
.entity-workspace-reports .btn[hidden] {
    display: none;
}

@media (max-width: 720px) {
    /* Below the wrap point there are no columns to line up, so every cell sizes
       to its own content and the row reads as a stacked record. */
    .entity-workspace-receipts .receipt-date,
    .entity-workspace-receipts .receipt-total,
    .entity-workspace-receipts .receipt-status,
    .entity-workspace-receipts .receipt-original,
    .entity-workspace-receipts .receipt-actions,
    #receipt-review-extracted .receipt-date,
    #receipt-review-extracted .receipt-total,
    #receipt-review-extracted .receipt-status,
    #receipt-review-extracted .receipt-original,
    #receipt-review-extracted .receipt-actions {
        flex: 1 1 auto;
    }

    .entity-workspace-receipts .receipt-total,
    #receipt-review-extracted .receipt-total,
    #receipt-review-candidates .candidate-amount {
        text-align: left;
    }

    .entity-workspace-receipts .receipt-actions,
    #receipt-review-extracted .receipt-actions {
        justify-content: flex-start;
    }
}

/*
 * Reports (P9). The two shapes that are genuinely this page's own: the named
 * section groups Balance Sheet and Cash Flow return, and the AR Aging panel —
 * no other page groups a table into subtotalled sections, and no other page has
 * a single-date/single-company report. Both stay under this page's selectors,
 * which components.md allows while a pattern lives on exactly one page.
 */

.entity-workspace-reports .report-section {
    margin: 0 0 1.25rem;
}

.entity-workspace-reports .report-section:last-child {
    margin-bottom: 0;
}

.entity-workspace-reports .report-section-title {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/*
 * One statement, not three tables. Each group is its own <table> so its rows and
 * subtotal stay together, but the reader should see one set of column headings
 * and one set of column positions: a fixed layout with the trailing columns
 * pinned makes every group line up, and the repeated headings are dropped.
 */
.entity-workspace-reports .report-section .report-table {
    table-layout: fixed;
}

.entity-workspace-reports .report-section .report-table th:last-child,
.entity-workspace-reports .report-section .report-table td:last-child {
    width: 22%;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.entity-workspace-reports .report-section .report-table th:nth-last-child(2),
.entity-workspace-reports .report-section .report-table td:nth-last-child(2) {
    width: 20%;
}

.entity-workspace-reports .report-section:not(:first-of-type) .report-table thead {
    display: none;
}

/* The line a Balance Sheet needs between Assets and Liabilities. */
.entity-workspace-reports .report-section-subtotal td {
    border-top: 2px solid var(--border-color);
    font-weight: 700;
    color: var(--text-primary);
}

.entity-workspace-reports .report-section-subtotal td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.entity-workspace-reports .ar-aging-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.entity-workspace-reports .ar-aging-controls .form-group {
    margin: 0;
    min-width: 12rem;
}

.entity-workspace-reports .xevt-register-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.entity-workspace-reports .xevt-register-controls .form-group {
    margin: 0;
    min-width: 10rem;
}

.entity-workspace-reports .xevt-tie-block {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.entity-workspace-reports .xevt-tie-line {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid transparent;
}

.entity-workspace-reports .xevt-tie-ok {
    color: var(--status-success-on-dark);
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.35);
}

.entity-workspace-reports .xevt-tie-bad {
    color: var(--danger-text-on-dark);
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
}

.entity-workspace-reports .ar-aging-asof-line {
    margin: 0 0 0.75rem;
}

/*
 * Seven columns in a two-pane shell. Fixed layout so the five buckets share the
 * space evenly and the Total column — the one figure a reader is here for —
 * cannot be the one pushed off the edge.
 */
.entity-workspace-reports .ar-aging-table {
    table-layout: fixed;
    width: 100%;
}

.entity-workspace-reports .ar-aging-table th,
.entity-workspace-reports .ar-aging-table td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.entity-workspace-reports .ar-aging-table th:first-child,
.entity-workspace-reports .ar-aging-table td:first-child {
    width: 20%;
    overflow-wrap: anywhere;
}

.entity-workspace-reports .ar-aging-table td:not(:first-child),
.entity-workspace-reports .ar-aging-table th:not(:first-child) {
    width: 12.5%;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.entity-workspace-reports .ar-aging-table tfoot td {
    border-top: 2px solid var(--border-color);
    font-weight: 700;
    color: var(--text-primary);
}

@media (max-width: 720px) {
    .entity-workspace-reports .ar-aging-controls .form-group {
        min-width: 0;
        flex: 1 1 100%;
    }
}

/* ===== Design P10 — Portfolio family ===== */

/* P10.1 · Overview attention block.
   The warning chips and the drift strip now sit ABOVE the five headline figures, so the
   two elements that name a decision are read before the numbers they qualify. They keep
   their own wrap/spacing rules (above); the wrapper exists so the pair reads as one
   region and collapses to nothing when neither has anything to say. */
.portfolio-attention:empty {
    display: none;
}

.portfolio-attention > :last-child {
    margin-bottom: 1.5rem;
}

/* The migrated net-worth strip. `summaryStrip()` already emits `.stats-grid`, so this
   only owns the space under it that the removed hand-written block used to occupy. */
.portfolio-summary-strip {
    display: block;
    margin-bottom: 1.5rem;
}

.portfolio-summary-strip .summary-strip {
    margin-bottom: 0;
}

/* P10.1 · the allocation breakdown's own total. Accounting convention: a single rule
   above a subtotal, and the total set in the page's own emphasis rather than a colour. */
.portfolio-allocation-total-row td {
    border-top: 2px solid var(--border-color);
    font-weight: 700;
    color: var(--text-primary);
}

/* P10.1 · Holdings price basis (B19's frozen slot). A derived price is not marked by
   colour alone — the cell carries `title` and `data-price-basis`, and the dotted rule
   under the figure is the visible hint that there is something to hover. */
.entity-workspace-portfolio td[data-price-basis='derived'] {
    text-decoration: underline dotted var(--border-color);
    text-underline-offset: 0.25em;
    cursor: help;
}

/* P10.2 · Capital metric cards are summaryStrip() output now, so the two grids are the
   component's own `.summary-strip.stats-grid` wrapped by the size modifiers below. The
   secondary grid's smaller value used to hang off `.capital-stat-secondary-value`, a
   class the hand-written markup owned; the size belongs to the grid, not to the card. */
.capital-metrics-headline .summary-strip,
.capital-metrics-secondary .summary-strip {
    margin-bottom: 0;
}

.capital-metrics-secondary .stat-value {
    font-size: 1.15rem;
}

/* The provenance caption under every capital metric. It leads with who produced the
   number (SN-relayed input vs TF-derived) and carries the full sampling stamp on hover,
   so it is deliberately allowed to wrap rather than truncate. */
.capital-metrics-headline .stat-meta,
.capital-metrics-secondary .stat-meta {
    font-size: 0.75rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* P10.3 · Exposure. The NAV card's new source line sits directly under the figure it
   qualifies, in the same muted caption treatment Capital's provenance uses — the
   micro-pattern design/portfolio.md names as a promotion candidate. */
.exposure-provenance {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* The de-risking calculator's empty-state hint. It is a reason, not an error: the tool
   below it still works, so it reads as a caption rather than as an alert. */
.exposure-derisk-hint {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    line-height: 1.45;
}


/* P10.1 · Settings tab — the inline `style="…"` declarations this tab carried, moved
   into this section (it is the Portfolio family's stylesheet home; no second header).
   Only three inline styles remain in the markup and all three are JS-managed display
   channels, not presentation: `#portfolio-panel-settings` (switchPortfolioTab writes
   panel.style.display), `#portfolio-household-form-wrapper` (its toggle READS
   wrapper.style.display back), and `#portfolio-backfill-symbols` (re-shown with
   `style.display = ''`). Turning those into classes would invert the control. */

/* The tab is a stack of cards; the gap belongs between them, not on each one. */
#portfolio-panel-settings > .card + .card {
    margin-top: 1.5rem;
}

/* Every Settings error banner. `portfolioSettingsError()` writes an inline
   display on show/hide, which still overrides this default. */
.portfolio-settings-error {
    display: none;
    margin-top: 0.75rem;
}

#portfolio-household-form-wrapper {
    margin-top: 0.75rem;
}

/* A table or list set a rem below the form or header above it. */
.portfolio-settings-spaced {
    margin-top: 1rem;
}

/* A hint or secondary grid tucked under the control it qualifies. */
.portfolio-settings-hint {
    margin-top: 0.5rem;
}

/* A row of actions separated from the table it acts on. */
.portfolio-settings-block {
    margin-top: 0.75rem;
}

/* Caption-scale prose: the real-estate ⓟ footnote and the backfill explainer. */
.portfolio-settings-footnote {
    font-size: 0.85rem;
}

/* A note that spans the whole form-grid rather than sitting in one column. */
.portfolio-settings-fullrow {
    grid-column: 1 / -1;
}

/* A second-level heading inside a card ("Version history"). */
.portfolio-settings-subheading {
    margin-top: 1.5rem;
}

/* A stacked label above a narrow numeric input (single-name concentration limit). */
.portfolio-settings-field-label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

/* The real-estate mortgage chooser: a full-width, chrome-free fieldset whose radio
   options sit on one line each with their label. */
.real-estate-mortgage-fieldset {
    grid-column: 1 / -1;
    border: none;
    padding: 0;
    margin: 0;
}

.real-estate-mortgage-fieldset legend {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.real-estate-mortgage-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 1rem;
}

/* P10.1 · the household card's destructive action is an overflowMenu() now (P2.3),
   so the trailing-edge placement that `.household-delete-btn` owned belongs to the
   menu. The old rule in 3-components.css was retargeted, not duplicated here. This
   is the card the households list paints per household. */
.portfolio-household-card {
    margin-top: 1rem;
    padding: 1rem;
}

/* 12.4a-wire — the brokerage reconciliation screen (public/brokerageReconcileViews.js).
   View-scoped, so it lives here rather than in 3-components.css, which owns the
   cross-view components (including .recon-metric, which belongs to BANK
   reconciliation and is unrelated to these rules). Appended as whole rules: this
   file has lost closing braces to a hunk-level merge before. */

.recon-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recon-list__row {
    display: grid;
    grid-template-columns: minmax(7rem, 0.8fr) minmax(11rem, 1.2fr) 6rem minmax(12rem, 1.4fr) 7rem minmax(7rem, 0.8fr);
    gap: 0.75rem;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1rem;
    text-align: left;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.recon-list__row:hover,
.recon-list__row:focus-visible {
    border-color: var(--accent-primary);
}

.recon-list__account { font-weight: 600; }
/* The account's own name leads; the masked id and the ledger account it posts
   to are context, not the label. */
.recon-list__account-id,
.recon-list__ledger {
    margin-left: 0.4rem;
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.85rem;
}
.recon-list__period,
.recon-list__comparison,
.recon-list__status { color: var(--text-secondary); }
.recon-list__mode { text-transform: capitalize; }
.recon-list__difference { text-align: right; font-variant-numeric: tabular-nums; }

.recon-empty h3 { margin: 0 0 0.35rem; }
.recon-empty p { margin: 0; color: var(--text-secondary); max-width: 46rem; }

.recon-session { display: flex; flex-direction: column; gap: 1rem; }

.recon-session__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.recon-session__account { font-weight: 600; }
.recon-session__account-id,
.recon-session__ledger {
    margin-left: 0.4rem;
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 0.85rem;
}
.recon-session__period,
.recon-session__mode,
.recon-session__status { color: var(--text-secondary); }

/* The comparison basis is a claim about WHAT the statement is being measured
   against. A rollforward reading as a live feed is how an account gets
   reconciled against itself, so it is styled to be noticed, not to blend in. */
.recon-session__comparison {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: var(--surface-muted);
    font-size: 0.85rem;
}

.recon-session__comparison[data-live-feed="false"] {
    background: var(--warning-bg);
    color: var(--warning-text);
}

/* T1.49: Void and Reopen moved out of the header and into the anchored action
   bar below it, beside Reconcile. Parent spec §8 kept them apart so a void
   could never be a mis-aimed completion click; the `margin-left: auto` here is
   what still does that — Reconcile sits at the left of the bar, the two undo
   controls are pushed to its right. */
.recon-session__void { margin-left: 0.5rem; }
.recon-session__reopen { margin-left: auto; }
.recon-session__transfer-status {
    flex-basis: 100%;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Every warning in ONE block. Stacked full-width panels used to push the
   figures the screen exists to show below the fold. */
.recon-session__warnings {
    margin: 0;
    padding: 0.4rem 0.75rem 0.4rem 1.6rem;
    border-left: 3px solid var(--warning-text);
    background: var(--warning-bg);
    list-style: disc;
}

.recon-session__warning {
    margin: 0;
    font-size: 0.85rem;
}

.recon-panel {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
}

.recon-panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--surface-muted);
}

.recon-panel__title { margin: 0; font-size: 1rem; }
.recon-panel__counts { font-weight: 600; }
/* The composition beside the count: an aggregate is a gate, not a diagnosis. */
.recon-panel__composition { color: var(--text-secondary); font-size: 0.85rem; }
/* ONE grid per PANEL, not per row. A row that owns its template sizes its own
   max-content tracks: every row lands on different column edges and the figures
   zigzag down the screen (the 2026-09-02 screenshot). The panel body holds the
   tracks; every row in it — header, pending, and the decided fold — is a
   subgrid of them, so a column is a column for the whole panel. */
.recon-panel__body {
    display: grid;
    align-items: center;
    column-gap: 0.75rem;
}

/* The three row kinds carry different columns, so the panel says which
   template it is on. */

/* symbol | description | qty stmt | qty feed | value stmt | value feed | rule | actions */
.recon-panel__body--position {
    grid-template-columns:
        minmax(4rem, max-content)
        minmax(12rem, 1fr)
        max-content
        max-content
        max-content
        max-content
        minmax(14rem, 1.2fr)
        max-content;
}

/* date | description | symbol | amount | rule | actions */
.recon-panel__body--transaction {
    grid-template-columns:
        max-content
        minmax(18rem, 1.4fr)
        minmax(4rem, max-content)
        max-content
        minmax(14rem, 1.2fr)
        max-content;
}

/* value stmt | value feed | difference | rule | as-of | actions */
.recon-panel__body--cash {
    grid-template-columns:
        max-content
        max-content
        max-content
        minmax(14rem, 1.2fr)
        max-content
        max-content;
}

/* SP2c: symbol | question | engine figure | statement figure | raised by |
   corporate-action input | actions.
   The two figure columns are deliberately NOT the position panel's
   statement/feed pair: this panel compares what the ENGINE computed against
   what the STATEMENT printed, which is a different question.
   The corporate-action input has a track of its OWN (fix round 1, item 9),
   empty on a basis-mismatch row, so Confirm/Reject sit in the last column on
   every row instead of being pushed sideways by the controls above them. */
.recon-panel__body--lot-line {
    grid-template-columns:
        minmax(4rem, max-content)
        minmax(16rem, 1.3fr)
        max-content
        max-content
        minmax(10rem, 1fr)
        max-content
        max-content;
}

/* The already-decided fold contributes its rows straight to the panel grid
   (display: contents) so they sit on the panel's columns; only the toggle is a
   box of its own, spanning the row. (A <details> cannot do this: its content
   lives in an internal slot that no subgrid reaches.) */
.recon-panel__decided {
    display: contents;
}

.recon-panel__decided-toggle {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 0.5rem 1rem;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.recon-panel__decided-toggle::before { content: '\25B8\00a0'; }
.recon-panel__decided-toggle[aria-expanded="true"]::before { content: '\25BE\00a0'; }

/* A reconciliation row is a TABLE ROW: figures in one column belong under each
   other. It spans the panel and subgrids the panel's tracks; the column gap
   comes from the panel so every row measures the same gutters. */
.recon-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
    row-gap: 0.35rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--border-color);
}

/* `.recon-row` sets `display: grid`, and an AUTHOR rule outranks the
   user-agent's `[hidden] { display: none }` — so without this a folded row
   (the already-decided fold, the SP2b feed note) stays on screen with its
   `hidden` attribute set, which jsdom cannot see and a browser shows. */
.recon-row[hidden] {
    display: none;
}

.recon-row--position,
.recon-row--transaction {
    border-left: 3px solid transparent;
}

/* An open lot-engine question is a QUESTION, not a discrepancy report: it
   carries the warning edge while it is pending, and loses it once answered. */
.recon-row--lot-line {
    border-left: 3px solid transparent;
}

.recon-row--lot-line[data-decision="pending"] {
    border-left-color: var(--warning-text);
}

.recon-row--cash {
    border-left: 3px solid var(--accent-primary);
}

/* The column labels. Quiet by construction: they name the grid, they are not
   data, and nothing here should compete with a figure for attention. */
.recon-row--head {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    border-top: 0;
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.recon-row--head .recon-row__symbol { font-weight: inherit; }

.recon-row[data-decision="pending"] { background: var(--bg-primary); }
.recon-row[data-decision="rejected"] { color: var(--text-secondary); }
.recon-row__symbol { font-weight: 600; }
.recon-row__description {
    overflow-wrap: anywhere;
}
/* Numbers align on their right edge or they do not align at all. */
.recon-row__qty-statement,
.recon-row__qty-feed,
.recon-row__value-statement,
.recon-row__value-feed,
.recon-row__value-computed,
.recon-row__value-printed,
.recon-row__amount,
.recon-row__difference {
    font-variant-numeric: tabular-nums;
    text-align: right;
    justify-self: end;
}
.recon-row__reason,
.recon-row__as-of { color: var(--text-secondary); font-size: 0.85rem; }
.recon-row__date { font-variant-numeric: tabular-nums; }
.recon-row__actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 0.25rem;
}
.recon-row__action { margin-left: 0; }

/* Where a decided line stands, beside the ONE button that flips it. Quiet:
   the verdict is context for the button, not a figure. */
.recon-row__decision-badge {
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* What the line will POST AS. It sits INSIDE the description cell, on its own
   line, so it never takes a column track of its own. */
.recon-row__classification {
    display: inline;
    margin-left: 0.5rem;
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
}

/* A CONFIRMED line with no posting rule: the finalize will refuse it, so the
   row carries the warning colour the refusal will be printed in. */
.recon-row--unmapped {
    border-left: 3px solid var(--warning-text);
    background: var(--warning-bg);
}

.recon-row__rule-picker {
    max-width: 16rem;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.8rem;
}

/* SP2c: the corporate-action answer, entered on the row it is about. Three
   controls on one line so the actions cell keeps its single column track. */
.recon-row__ca-input {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 0.25rem;
}

.recon-row__ca-type,
.recon-row__ca-date,
.recon-row__ca-symbol {
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.8rem;
}

.recon-row__ca-type { max-width: 14rem; }
/* Wide enough for the placeholder to read as a whole word, not 'RESULTING SYMB('. */
.recon-row__ca-symbol { max-width: 11rem; text-transform: uppercase; }

/* The specific-lot override on a sale. Quiet: it is an OPTION on a line that
   is already decided, never a question the owner owes an answer to. */
.recon-row__lot-election {
    white-space: nowrap;
}

/* The owner's own note on a decided lot line, under the figures. */
.recon-badge--lot-note {
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-style: italic;
}

/* SP2b: unmatched feed rows are EVIDENCE, not decisions. Same display:contents
   trick as the decided fold so the rows keep the panel's columns; quieter than
   the fold, because nothing in here is work. */
.recon-panel__feed-note {
    display: contents;
}

.recon-panel__feed-note-toggle {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 0.5rem 1rem;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.85rem;
    font-style: italic;
    cursor: pointer;
}

.recon-panel__feed-note-toggle::before { content: '\25B8\00a0'; }
.recon-panel__feed-note-toggle[aria-expanded="true"]::before { content: '\25BE\00a0'; }

.recon-row--feed-note {
    color: var(--text-secondary);
}

/* A row the PROPOSAL confirmed: present, readable, and visibly not a question.
   The tinted left edge is the WHOLE marker — a background tint would put it in
   the same visual register as a pending row, which is the one thing it is not.
   (No `background` here on purpose: the panel's own is already what this row
   should sit on, and a declaration that repaints white on white is a rule that
   reads as if it did something.) */
.recon-row--defaulted {
    border-left: 3px solid var(--accent-soft);
}

/* Who confirmed it. Quieter than the decision badge beside a person's verdict,
   because it names a default rather than a judgement. */
.recon-row__default-badge {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
    white-space: nowrap;
}

/* The cash panel's statement of fact, where its buttons would have been. */
.recon-row__fact {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.35rem 1rem 0.75rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.recon-badge {
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: var(--warning-bg);
    color: var(--warning-text);
    font-size: 0.8rem;
}

/* A badge is an annotation ON a row, never a column of it: it takes its own
   full-width line under the figures so no track is widened to hold prose.
   (The kind modifiers themselves carry the grid templates, above.) */
.recon-row .recon-badge { grid-column: 1 / -1; justify-self: start; }
.recon-badge--cusip { font-variant-numeric: tabular-nums; }
.recon-badge--ambiguous { font-weight: 600; }

.recon-session__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.recon-session__difference { font-variant-numeric: tabular-nums; font-weight: 600; }
.recon-session__reconcile { margin-left: auto; }
.recon-session__blocked { flex-basis: 100%; color: var(--text-secondary); }

@media (max-width: 60rem) {
    .recon-list__row { grid-template-columns: 1fr 1fr; }
    .recon-session__reconcile { margin-left: 0; }
}

/* Below this the fixed tracks stop fitting; two columns that wrap beat a row
   that scrolls sideways, so the screen stays usable rather than staying
   perfectly aligned and unreadable. */
@media (max-width: 900px) {
    .recon-panel__body--position,
    .recon-panel__body--transaction,
    .recon-panel__body--lot-line,
    .recon-panel__body--cash {
        grid-template-columns: 1fr 1fr;
    }

    .recon-row__ca-input { flex-wrap: wrap; }

    .recon-row__description { grid-column: 1 / -1; }
    .recon-row__reason { grid-column: 1 / -1; }
    .recon-row__actions { grid-column: 1 / -1; justify-self: start; }

    .recon-row--head { display: none; }

    .stmt-inbox__list { grid-template-columns: 1fr 1fr; }

    .stmt-row__ending-value,
    .stmt-row__ending-cash { text-align: left; justify-self: start; }
    .stmt-row__actions { grid-column: 1 / -1; justify-self: start; }

    .stmt-row--head { display: none; }
}

#brokerage-reconcile-view .form-error {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--badge-red);
    background: color-mix(in srgb, var(--badge-red) 8%, var(--bg-primary));
    color: var(--badge-red);
}

/* 12.4b — Statement inbox, Schwab re-auth banner
   (public/statementInboxViews.js, public/brokerageAuthBanner.js).
   View-scoped; appended as whole rules. The retired public/brokerageAccountViews.js
   (bacct-* rules) was folded into Bank Connections; its CSS is gone too. */

.stmt-inbox__upload {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.stmt-inbox__file-input {
    max-width: 28rem;
}

.stmt-inbox__outcome {
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-primary));
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* ONE grid for the whole list: the tracks live here and every row is a subgrid
   of them. Per-row templates sized each row's own max-content columns, so the
   figures zigzagged and the header labelled nothing.
   account | linked account | period | ending value | ending cash | status | actions */
.stmt-inbox__list {
    display: grid;
    grid-template-columns:
        minmax(9rem, 1fr)
        minmax(8rem, 1fr)
        minmax(11rem, 1.2fr)
        max-content
        max-content
        6rem
        max-content;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
    align-items: center;
}

.stmt-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    row-gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.stmt-row[data-status="rejected"] {
    color: var(--text-secondary);
    border-left: 3px solid var(--badge-red);
}

/* The column labels, on the same grid as the data rows — quiet by
   construction: they name the grid, they are not data. Mirrors
   .recon-row--head. */
.stmt-row--head {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    border: 0;
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.stmt-row--head .stmt-row__account { font-weight: inherit; }
.stmt-row--head .stmt-row__status { text-transform: uppercase; }

.stmt-row__account { font-weight: 600; }
.stmt-row__linked-account { color: var(--text-secondary); font-size: 0.85rem; }
.stmt-row__status { color: var(--text-secondary); text-transform: capitalize; }
.stmt-reparse-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.1rem 0.35rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 55%, var(--border-color));
    border-radius: 999px;
    color: var(--accent-primary);
    font-size: 0.7rem;
    text-transform: none;
    white-space: nowrap;
}
/* Two dates and a dash are ONE token to a reader; breaking mid-date is worse
   than a wider track. */
.stmt-row__period { color: var(--text-secondary); white-space: nowrap; }
/* Numbers align on their right edge or they do not align at all. */
.stmt-row__ending-value,
.stmt-row__ending-cash {
    font-variant-numeric: tabular-nums;
    text-align: right;
    justify-self: end;
}
.stmt-row__reject-reason,
.stmt-row__blocked,
.stmt-row__warning,
.stmt-row__self-check {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.85rem;
}
.stmt-row__reject-reason { color: var(--badge-red); }
.stmt-row__blocked { color: var(--text-secondary); }
.stmt-row__blocked-link { color: var(--accent-primary); font-weight: 600; }
.stmt-row__warning { color: var(--warning-text); }
.stmt-row__self-check { color: var(--warning-text); }
.stmt-row__actions { display: flex; gap: 0.25rem; justify-self: end; }
.stmt-row__action { justify-self: start; }

.stmt-inbox__reparse-account,
.stmt-reparse-preview {
    grid-column: 1 / -1;
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface-muted);
}

.stmt-reparse-preview__title,
.stmt-reparse-diff__heading { margin: 0; font-size: 0.9rem; }
.stmt-reparse-preview__meta { margin: 0; color: var(--text-secondary); font-size: 0.8rem; }
.stmt-reparse-preview__actions { display: flex; gap: 0.5rem; }
.stmt-reparse-diff {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
.stmt-reparse-diff__section { min-width: 0; }
.stmt-reparse-diff__list {
    max-height: 8rem;
    overflow: auto;
    margin: 0.25rem 0 0;
    padding-left: 1.2rem;
    color: var(--text-secondary);
    font-size: 0.78rem;
}
.stmt-reparse-diff__list--additions { color: var(--badge-green); }
.stmt-reparse-diff__list--removals { color: var(--badge-red); }
.stmt-reparse-diff__list--changes { color: var(--warning-text); }
.stmt-reparse-diff__empty,
.stmt-reparse-diff__more { color: var(--text-secondary); }

.stmt-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.stmt-detail__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.stmt-detail__title { margin: 0; font-size: 1.1rem; }
.stmt-detail__period { color: var(--text-secondary); }

.stmt-detail__meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.stmt-detail__ending-value,
.stmt-detail__ending-cash,
.stmt-detail__linked-account,
.stmt-detail__layout,
.stmt-detail__parser { font-variant-numeric: tabular-nums; margin: 0; }

.stmt-detail__reject-reason {
    margin: 0;
    color: var(--badge-red);
    font-size: 0.9rem;
}

.stmt-detail__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.stmt-detail > .stmt-reparse-badge { align-self: flex-start; }

.auth-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.65rem 1rem;
    border-left: 3px solid var(--warning-text);
    background: var(--warning-bg);
    color: var(--warning-text);
    border-radius: 4px;
}

.auth-banner[role="alert"] {
    border-left-color: var(--badge-red);
    background: color-mix(in srgb, var(--badge-red) 10%, var(--bg-primary));
    color: var(--badge-red);
}

.auth-banner__message { flex: 1 1 12rem; }
.auth-banner__action {
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
}



/* Bank Connections Scope 1 (public/bankConnectionsViews.js). View-scoped;
   appended as a whole rule-level section (fix round 2, second pass, finding
   6 — there was no CSS at all for any .bconn-* class before this). Mirrors
   the retired .bacct-* / .stmt-row conventions: card sections, a responsive
   grid row that stacks at the same 60rem breakpoint, and dialog-style flow
   panels that reuse the existing .form-group field styling. */

.bconn-host {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bconn-provider {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
}

.bconn-provider__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.bconn-provider__toggle {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    gap: 0.5rem;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.bconn-provider__label { font-weight: 600; }

.bconn-provider__status {
    color: var(--text-secondary);
    text-transform: capitalize;
    font-size: 0.85rem;
}

.bconn-provider__mode-note {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.bconn-provider__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 1rem 1rem;
}

.bconn-institution {
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.bconn-institution__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.bconn-institution__heading {
    margin: 0;
    flex: 1 1 auto;
    font-size: 0.95rem;
    font-weight: 600;
}

.bconn-institution__toggle {
    display: flex;
    width: 100%;
    align-items: baseline;
    gap: 0.5rem;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    color: var(--text-primary);
    cursor: pointer;
}

.bconn-institution__body {
    display: flex;
    flex-direction: column;
}

.bconn-institution__label { margin: 0; font-size: 0.95rem; font-weight: 600; }
.bconn-institution__toggle .bconn-institution__label { font: inherit; }
.bconn-institution__status {
    color: var(--text-secondary);
    text-transform: capitalize;
    font-size: 0.8rem;
}

.bconn-institution__ignored {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border-color);
}
.bconn-institution__ignored summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Scope 1.1: the provider's collapsed archive of dead connections (expired
   Plaid items with no accounts left). Same visual weight as the ignored-feeds
   group above — context, not work. */
.bconn-provider__expired {
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}
.bconn-provider__expired summary {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.bconn-expired {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.4rem 0;
    border-top: 1px solid var(--border-color);
}
.bconn-expired__label { font-weight: 600; }
.bconn-expired__status,
.bconn-expired__synced { color: var(--text-muted); font-size: 0.8rem; }

.bconn-feed {
    display: grid;
    grid-template-columns: minmax(8rem, 1.2fr) 5rem 6rem minmax(8rem, 1fr) auto;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--border-color);
}
.bconn-feed:first-child { border-top: none; }

.bconn-feed__name { font-weight: 600; }
.bconn-feed__mask,
.bconn-feed__kind,
.bconn-feed__status { color: var(--text-secondary); font-size: 0.85rem; }
.bconn-feed__status { text-transform: capitalize; }
.bconn-feed__linked { color: var(--text-secondary); font-size: 0.85rem; }
.bconn-feed__error { color: var(--badge-red); font-size: 0.8rem; grid-column: 1 / -1; margin: 0; }
.bconn-feed__synced { color: var(--text-muted); font-size: 0.78rem; grid-column: 1 / -1; }
.bconn-feed__open-session { color: var(--warning-text); font-size: 0.8rem; grid-column: 1 / -1; margin: 0; }

.bconn-feed__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.bconn-manual {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.75rem 1rem;
}
.bconn-manual__title { margin: 0 0 0.5rem; font-size: 0.95rem; }
.bconn-manual__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-color);
}
.bconn-manual__row:first-of-type { border-top: none; }
.bconn-manual__name { font-weight: 600; }
.bconn-manual__subtype { color: var(--text-secondary); font-size: 0.85rem; text-transform: capitalize; }
.bconn-manual__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.bconn-manual__note {
    color: var(--text-secondary);
    font-size: 0.85rem;
    max-width: 42ch;
}

/* Flow panels (link picker, create form, unlink confirm, reconcile chooser,
   error) — inline dialogs appended to .bconn-flow-host, not <dialog>/.modal.
   Form fields inside them reuse the existing .form-group styling as-is. */
.bconn-flow-host { margin-top: 0.75rem; }

.bconn-held {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--badge-orange) 8%, var(--bg-primary));
    border: 1px solid color-mix(in srgb, var(--badge-orange) 45%, var(--border-color));
    border-radius: 6px;
}
.bconn-held__title,
.bconn-held__account-name { margin: 0; font-size: 1rem; }
.bconn-held__account { display: flex; flex-direction: column; gap: 0.4rem; }
.bconn-held__alert { margin: 0; color: var(--badge-orange); font-size: 0.85rem; }
.bconn-held__row {
    display: grid;
    grid-template-columns: auto minmax(10rem, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-color);
}
.bconn-held__date,
.bconn-held__amount { color: var(--text-secondary); font-size: 0.85rem; }
.bconn-held__name { font-weight: 600; }
.bconn-held__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.bconn-picker,
.bconn-create,
.bconn-backfill-status,
.bconn-unlink,
.bconn-remove-item,
.bconn-reconcile,
.bconn-error {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.bconn-picker__title,
.bconn-create__title,
.bconn-reconcile__title { margin: 0; font-size: 1rem; }

.bconn-picker__candidate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
}
.bconn-picker__candidate:has(input:checked) {
    border-color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-primary));
}
.bconn-picker__candidate:has(input:disabled) {
    color: var(--text-muted);
    cursor: not-allowed;
}
.bconn-picker__name { font-weight: 600; }
.bconn-picker__subtype,
.bconn-picker__reason { color: var(--text-secondary); font-size: 0.82rem; }
.bconn-picker__blocked { color: var(--badge-red); font-size: 0.82rem; }
.bconn-picker__empty { color: var(--text-secondary); margin: 0; }

/* T1.47: the tax classification the owner picks at link time. Rendered as a
   fieldset, not a row of candidates, so it reads as a SECOND question rather
   than another account to link. */
.bconn-picker__taxstatus {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0.25rem 0 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
.bconn-picker__taxstatus-title {
    padding: 0;
    font-weight: 600;
    font-size: 0.85rem;
}
.bconn-picker__taxstatus-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.bconn-picker__taxstatus-label { font-size: 0.85rem; }

.bconn-remove-item__question { margin: 0; font-weight: 600; }
.bconn-remove-item__note { margin: 0; color: var(--text-secondary); font-size: 0.85rem; }

.bconn-picker__actions,
.bconn-create__actions,
.bconn-unlink__actions,
.bconn-remove-item__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* A16: the one-line result of the staged Plaid backlog sweep. */
.bconn-backfill-status__message { margin: 0; font-weight: 600; }

.bconn-unlink__question { margin: 0; font-weight: 600; }
.bconn-unlink__note { margin: 0; color: var(--text-secondary); font-size: 0.85rem; }
.bconn-unlink__blocked { color: var(--badge-red); margin: 0; }
.bconn-unlink__session { color: var(--accent-primary); font-weight: 600; }

.bconn-reconcile__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.bconn-reconcile__card { flex: 1 1 12rem; }
.bconn-reconcile__hint,
.bconn-reconcile__note { margin: 0; color: var(--text-secondary); font-size: 0.85rem; }
.bconn-reconcile__reason { margin: 0.25rem 0 0; color: var(--badge-red); font-size: 0.85rem; }
.bconn-reconcile__form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.bconn-reconcile__form-error { margin: 0; }
.bconn-reconcile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.bconn-error__message { margin: 0; color: var(--badge-red); }

/* Schwab OAuth callback banner (fix round 1: buildSchwabCallbackBanner). */
.bconn-callback-banner {
    margin: 0;
    padding: 0.65rem 1rem;
    border-left: 3px solid var(--badge-green);
    background: color-mix(in srgb, var(--badge-green) 10%, var(--bg-primary));
    border-radius: 4px;
}
.bconn-callback-banner--success { color: var(--badge-green); }
.bconn-callback-banner--error {
    border-left-color: var(--badge-red);
    background: color-mix(in srgb, var(--badge-red) 10%, var(--bg-primary));
    color: var(--badge-red);
}

@media (max-width: 60rem) {
    .bconn-held__row { grid-template-columns: 1fr auto; }
    .bconn-held__actions { grid-column: 1 / -1; }
    .bconn-feed {
        grid-template-columns: 1fr 1fr;
    }
    .bconn-feed__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
    .bconn-institution__header {
        flex-wrap: wrap;
    }
}

/* Scope 2 SP2d §4: the pre-filled opening-lot answer, entered on the row it is
   about. Its own column track, like the corporate-action inputs beside it, so
   Confirm/Reject stay at one x down the panel. */
.recon-row__opening-input {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 0.35rem;
}

.recon-row__opening-date {
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.8rem;
}

/* A cost is a figure: right-aligned, tabular, and wide enough for a real one. */
.recon-row__opening-cost {
    width: 7rem;
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.8rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Scope 2 SP2d §4: the inbox's two views. The active tab is marked by
   aria-pressed, so the styling follows the state the assistive tree already
   reports rather than a second class that could disagree with it. */
.stmt-inbox__filters {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.stmt-inbox__filter {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
}

.stmt-inbox__filter[aria-pressed='true'] {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
    border-bottom-color: var(--accent-primary);
}

/* The "Needs decision" queue has its OWN four tracks — account, period,
   reason, actions — because an exception row carries no figures at all and
   would otherwise be a subgrid of seven statement columns, five of them
   permanently empty. */
.stmt-inbox__list--exceptions {
    grid-template-columns:
        minmax(9rem, 1fr)
        minmax(13rem, auto)
        minmax(16rem, 2fr)
        max-content;
}

.stmt-row--exception {
    align-items: baseline;
}

.stmt-row__reason {
    color: var(--text-primary);
    font-size: 0.85rem;
}

/* The machine's own words about the stop (a count of pending lines, a parser
   failure) — secondary to the sentence above it, never a heading. */
.stmt-row__detail {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.stmt-inbox__empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* SP2d fix round 1, item 9: a decided opening lot still shows the date and
   basis it was seeded at, in the same column its inputs occupied. */
.recon-row__opening-decided {
    display: inline-flex;
    align-items: baseline;
    justify-self: end;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.recon-row__opening-decided-date {
    font-variant-numeric: tabular-nums;
}

.recon-row__opening-decided-cost {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* SP2d fix round 1, item 7: the row "Open statement" sent the owner to. */
.stmt-row[data-highlight='true'] {
    border-left: 3px solid var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 6%, var(--bg-primary));
}

/* SP2d fix round 1, item 12: two inputs plus two buttons do not fit one line
   on a narrow screen; wrapping keeps them on the row instead of overflowing
   the grid. */
@media (max-width: 900px) {
    .recon-row__opening-input { flex-wrap: wrap; }
    /* Four tracks do not fit 880px: the nickname wrapped to three lines and
       the reason prose was squeezed to a third of its column while the period
       column kept its width. Two tracks put the nickname and period on one
       line and give the reason and its actions the rest. Verified by a
       headless render at 880px (fix round 2, item 3). */
    .stmt-inbox__list--exceptions { grid-template-columns: 1fr 1fr; }
}


/* ── T1.48/T1.44b · the subledger views ──────────────────────────────────── */

/* The pager under a server-side page. It is a row, not a block of buttons:
   the label between the two controls is the part that says a page is not the
   whole set. */
.lots-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.6rem;
}

/* The TOTAL and DIFFERENCE lines of the tie-out. They are the two rows a
   reader looks for, so they carry weight the per-bucket lines do not. */
.tax-row-emphasis > td {
    font-weight: 600;
    border-top: 1px solid var(--border-color);
}

/* The verdict chip sits at the far right of the card header, level with the
   account name it judges. */
.tax-account-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* A wash-sale line where the two sides DISAGREE is a finding; it is coloured
   rather than left to be spotted in a sentence. */
.tax-wash[data-agree="false"] {
    color: var(--money-negative);
}

/* A disposal row under a closed lot is subordinate to the lot above it. */
.lots-disposal-row > td {
    padding-left: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9em;
}

/* The filter row on each subledger view. Two selectors side by side, the way
   Close lays its period form out — a filter that stacks full-width reads as a
   form to fill in rather than as a control strip above a table. */
#tax-filter-form,
#lots-filter-form,
#realized-filter-form,
#gl-reconciliation-filter-form {
    display: grid;
    grid-template-columns: minmax(10rem, 0.6fr) minmax(12rem, 1fr);
    gap: 0.75rem;
    align-items: end;
}

#tax-filter-form .form-group,
#lots-filter-form .form-group,
#realized-filter-form .form-group,
#gl-reconciliation-filter-form .form-group {
    margin: 0 !important;
}

@media (max-width: 900px) {
    #tax-filter-form,
    #lots-filter-form,
    #realized-filter-form,
    #gl-reconciliation-filter-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

.gl-reconciliation-page-header {
    align-items: flex-end;
}

.gl-reconciliation-page-header .btn {
    flex: 0 0 auto;
}

.gl-reconciliation-convention {
    margin: 0 0 0.85rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

.gl-reconciliation-convention a {
    color: var(--link-accent-bright);
}

.gl-reconciliation-card {
    margin-top: 1rem;
}

.gl-reconciliation-card .card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.gl-reconciliation-verdict {
    flex: 0 0 auto;
}

.gl-reconciliation-table-scroll {
    overflow-x: auto;
}

.gl-reconciliation-summary-table,
.gl-reconciliation-bucket-table {
    min-width: 34rem;
}

.gl-reconciliation-bucket-table {
    margin-top: 1rem;
}

.gl-reconciliation-bucket-table th:first-child,
.gl-reconciliation-bucket-table td:first-child {
    width: 62%;
}

.gl-reconciliation-residual {
    font-weight: 600;
}

.gl-reconciliation-finding {
    color: var(--money-negative);
}

.gl-reconciliation-reason {
    margin: 0.75rem 0 0;
    color: var(--text-secondary);
    line-height: 1.45;
}

@media (max-width: 700px) {
    .gl-reconciliation-page-header {
        align-items: stretch;
    }

    .gl-reconciliation-page-header .btn {
        width: 100%;
    }
}


/* ------------------------------------------------------------------------ */
/* T1.49 — anchored session actions, and paged/filtered brokerage lists.     */
/* ------------------------------------------------------------------------ */

/* The session panel is its OWN scrollport, so the bar below can stick inside it.

   `position: sticky` binds to the nearest ancestor with a scrolling box, and
   in this app that is `.main-content` (3-components.css: `overflow-x: hidden`
   makes it one whatever `overflow-y` says). But `.main-content` never actually
   scrolls — the sidebar is `position: fixed` and the DOCUMENT scrolls — so a
   bar sticking to it simply scrolled away with the page. The T1.49 CDP drive
   caught exactly that: the bar measured at top: -301 after a scroll to the
   foot of the session.

   Bounding the panel's height gives the bar a scrollport that really scrolls,
   which is what the brief asked for — sticky WITHIN the panel — and changes no
   other screen's layout. */
.recon-session-host {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    /* Room for the sticky bar's shadow, which a clipped scrollport would cut. */
    padding-right: 0.25rem;
}

/* The anchored action bar.

   The 2026-09-08 click-drive measured a SMALL reconciliation session at
   1,889 px tall against a 1,000 px viewport: Reconcile, in the footer under
   every panel, was below the fold before the owner scrolled once. The bar now
   sits directly under the session header and sticks to the top of the panel's
   scrollport, so the action is reachable at every scroll position rather than
   at exactly one of them.

   It needs an opaque background and a z-index as well as `top: 0`, or the
   panel rows scroll through it. */
.recon-session__actions {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

/* Filter controls, shared shape across the reconcile list and the inbox. */
.recon-list-controls,
.stmt-inbox__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.recon-list-controls__field,
.stmt-inbox__filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
}

.recon-list-controls__label,
.stmt-inbox__filter-label {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.recon-list-controls__select,
.stmt-inbox__filter-select {
    min-width: 10rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.85rem;
}

/* The pager. The label carries the TOTAL, not the rows on screen: the count
   this list used to render in one response is exactly what tells the owner a
   filter is worth setting. */
.recon-list-pager,
.stmt-inbox__pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.recon-list-pager__label,
.stmt-inbox__pager-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.recon-list-pager__prev,
.recon-list-pager__next,
.stmt-inbox__pager-prev,
.stmt-inbox__pager-next {
    min-width: 6rem;
}

/* Schwab is not configured on this deployment. A statement of fact, not a
   warning: the amber `.auth-banner` treatment would read as something the
   owner has to fix, and there is nothing here to fix. */
.auth-banner--not-configured {
    border-left-color: var(--border-color);
    background: var(--surface-muted);
    color: var(--text-secondary);
}
#transactions-brokerage-hidden-note {
  margin: -0.5rem 0 1.25rem;
  color: var(--text-muted);
  font-size: 0.86rem;
}

/* Brokerage rebuild upload: the next action and the server-held corpus stay
   in the first viewport, so a large archive never becomes an unexplained
   number at the bottom of the page. */
.rebuild-warning-card {
    border-left: 4px solid var(--badge-red);
}

.rebuild-warning-card h2 {
    margin-top: 0;
}

.rebuild-warning-ack {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 1rem 0;
    color: var(--text-primary);
    font-weight: 600;
}

.rebuild-warning-ack input {
    margin: 0;
}

.rebuild-owner-only {
    color: var(--text-secondary);
}

.rebuild-flow-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.rebuild-flow-nav .btn {
    min-height: 3.6rem;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    white-space: normal;
}

.rebuild-flow-nav .btn.is-active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.rebuild-step-label {
    display: block;
}

.rebuild-step-reason {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 400;
}

.rebuild-flow-nav .btn.is-disabled,
.rebuild-flow-nav .btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.rebuild-flow-nav .btn.is-finished {
    border-color: var(--badge-green);
    color: var(--badge-green);
}

.rebuild-upload-progress-panel,
.rebuild-staged-contents,
.rebuild-upload-results,
.rebuild-host-directory-panel {
    margin: 0.85rem 0;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-secondary);
}

.rebuild-upload-progress-panel h3,
.rebuild-staged-contents h3,
.rebuild-upload-results h3,
.rebuild-host-directory-panel h3 {
    margin: 0 0 0.55rem;
    font-size: 0.95rem;
}

.rebuild-upload-progress {
    min-height: 1.3rem;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-data);
    font-size: 0.86rem;
}

.rebuild-upload-progress-panel progress {
    display: block;
    width: 100%;
    height: 0.8rem;
    margin: 0.65rem 0 0;
    accent-color: var(--accent-primary);
}

.rebuild-upload-error {
    margin-top: 0.65rem;
}

.rebuild-choose-folder {
    margin: 0.25rem 0 0.75rem;
}

.rebuild-folder-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rebuild-drop-zone {
    display: flex;
    min-height: 5rem;
    margin: 0.5rem 0 1rem;
    padding: 1rem;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--accent-primary);
    border-radius: 10px;
    color: var(--text-primary);
    text-align: center;
    line-height: 1.45;
    cursor: copy;
}

.rebuild-drop-zone.is-dragover {
    background: var(--accent-soft);
}

.rebuild-drop-zone.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.rebuild-stats {
    margin: 0.35rem 0;
    color: var(--text-primary);
    font-weight: 600;
}

.rebuild-source,
.rebuild-expiry,
.rebuild-keep-consequence,
.rebuild-empty-state {
    color: var(--text-secondary);
}

.rebuild-expiry {
    font-size: 0.86rem;
}

.rebuild-keep-encrypted {
    display: block;
    margin-top: 1rem;
    color: var(--text-primary);
}

.rebuild-keep-encrypted input {
    margin-right: 0.35rem;
}

.rebuild-staged-folder {
    padding: 0.55rem 0;
    border-top: 1px solid var(--border-color);
}

.rebuild-staged-folder summary {
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 600;
}

.rebuild-staged-file-list,
.rebuild-refused-file-list {
    margin: 0.5rem 0 0;
    padding-left: 1.2rem;
    color: var(--text-secondary);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.rebuild-upload-result {
    padding: 0.55rem 0;
    border-top: 1px solid var(--border-color);
    color: var(--text-primary);
}

.rebuild-clear-staged {
    margin-top: 0.4rem;
}

.rebuild-run-warning {
    margin: 0.9rem 0 0.45rem;
    color: var(--badge-red);
    font-weight: 700;
    line-height: 1.45;
}

.rebuild-structure-note {
    margin: 0 0 0.85rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
    line-height: 1.45;
}

.rebuild-confirm-box {
    width: 100%;
    box-sizing: border-box;
    margin: 0.9rem 0;
    padding: 1rem;
    border: 2px solid var(--accent-primary);
    border-radius: 10px;
    background: var(--accent-soft);
}

.rebuild-confirm-label {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--text-primary);
    font-weight: 750;
    line-height: 1.4;
}

.rebuild-confirm-label strong {
    color: var(--accent-secondary);
}

.rebuild-confirm-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 3.35rem;
    padding: 0.7rem 0.8rem;
    border: 2px solid var(--accent-primary);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font: inherit;
    font-size: 1rem;
}

.rebuild-confirm-input:focus {
    border-color: var(--accent-secondary);
    outline: 3px solid color-mix(in srgb, var(--accent-primary) 30%, transparent);
    outline-offset: 1px;
}

.rebuild-run-status {
    margin: 1rem 0 0.45rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.45;
}

.rebuild-run-status[data-state='running'] {
    border-color: var(--accent-primary);
}

.rebuild-run-status[data-state='done'] {
    border-color: var(--badge-green);
}

.rebuild-run-status[data-state='failed'] {
    border-color: var(--badge-red);
}

.rebuild-run-details {
    margin: 0.35rem 0 0.8rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.rebuild-run-details summary {
    display: inline-block;
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 650;
}

.rebuild-run-details-content {
    max-width: 100%;
    margin: 0.55rem 0 0;
    padding: 0.65rem;
    overflow: auto;
    background: var(--bg-tertiary);
    font-size: 0.78rem;
}

.rebuild-step5 {
    width: 100%;
}

.rebuild-step5 h2 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}

.rebuild-step5-lede,
.rebuild-step5-count,
.rebuild-step5-section-count,
.rebuild-step5-empty,
.rebuild-finish-reason {
    color: var(--text-secondary);
}

.rebuild-step5-lede {
    margin: 0 0 0.55rem;
    font-size: 0.86rem;
}

.rebuild-step5-count {
    margin: 0 0 0.9rem;
    font-family: var(--font-data);
    font-size: 0.78rem;
}

.rebuild-step5-section {
    width: 100%;
    margin: 0 0 1rem;
}

.rebuild-step5-section h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.rebuild-step5-section-count {
    margin: 0.15rem 0 0.35rem;
    font-size: 0.72rem;
}

.rebuild-step5-empty {
    margin: 0;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--border-color);
    background: var(--surface-muted);
    font-size: 0.8rem;
}

.rebuild-step5-table {
    width: 100%;
    max-width: none;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.rebuild-step5-table th,
.rebuild-step5-table td {
    min-width: 0;
    border: 1px solid var(--border-color);
    overflow-wrap: anywhere;
}

.rebuild-step5-table th {
    padding: 0.4rem 0.5rem;
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-align: left;
    text-transform: uppercase;
}

.rebuild-step5-table td {
    padding: 0.38rem 0.5rem;
    color: var(--text-primary);
    line-height: 1.25;
    vertical-align: middle;
}

.rebuild-step5-table tbody tr:nth-child(odd) td {
    background: var(--bg-secondary);
}

.rebuild-step5-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--bg-secondary) 82%, var(--accent-primary));
}

.rebuild-step5-table tbody tr:hover td {
    background: var(--accent-soft);
}

.rebuild-holding-table th:nth-child(1),
.rebuild-holding-table td:nth-child(1) {
    width: 10%;
}

.rebuild-holding-table th:nth-child(2),
.rebuild-holding-table td:nth-child(2) {
    width: 22%;
}

.rebuild-holding-table th:nth-child(3),
.rebuild-holding-table td:nth-child(3) {
    width: 10%;
}

.rebuild-holding-table th:nth-child(4),
.rebuild-holding-table td:nth-child(4) {
    width: 14%;
}

.rebuild-holding-table th:nth-child(5),
.rebuild-holding-table td:nth-child(5) {
    width: 19%;
}

.rebuild-holding-table th:nth-child(6),
.rebuild-holding-table td:nth-child(6) {
    width: 17%;
}

.rebuild-holding-table th:nth-child(7),
.rebuild-holding-table td:nth-child(7) {
    width: 8%;
}

.rebuild-step5-date,
.rebuild-step5-amount {
    white-space: nowrap;
}

.rebuild-step5-suggestions {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.rebuild-step5-select,
.rebuild-step5-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 1.9rem;
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.72rem;
}

.rebuild-step5-select:focus,
.rebuild-step5-input:focus {
    border-color: var(--accent-primary);
    outline: 2px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
    outline-offset: 1px;
}

.rebuild-lots-table th:nth-child(1),
.rebuild-lots-table td:nth-child(1) {
    width: 20%;
}

.rebuild-lots-table th:nth-child(2),
.rebuild-lots-table td:nth-child(2) {
    width: 12%;
}

.rebuild-lots-table th:nth-child(3),
.rebuild-lots-table td:nth-child(3) {
    width: 14%;
}

.rebuild-lots-table th:nth-child(4),
.rebuild-lots-table td:nth-child(4),
.rebuild-lots-table th:nth-child(5),
.rebuild-lots-table td:nth-child(5) {
    width: 19%;
}

.rebuild-lots-table th:nth-child(6),
.rebuild-lots-table td:nth-child(6) {
    width: 12%;
}

.rebuild-finish-reason {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
}

.rebuild-finish-reason[hidden],
.rebuild-finish-summary[hidden] {
    display: none;
}

.rebuild-finish {
    margin-top: 0.2rem;
}

.rebuild-finish-summary {
    margin: 0.75rem 0 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--badge-green);
    background: var(--surface-muted);
    color: var(--text-primary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.rebuild-finish-summary a {
    color: var(--accent-secondary);
    font-weight: 700;
}

/* Rebuild assignment: keep the discovery evidence compact and give the five
   decisions the space they need. The table deliberately fits its parent so a
   1280px screen never turns the form into a sideways reading exercise. */
.rebuild-assign-intro {
    margin: 0 0 0.9rem;
}

.rebuild-assign-intro h2 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}

.rebuild-assign-lede {
    margin: 0 0 0.65rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.rebuild-assign-definitions {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem 0.8rem;
    border-left: 3px solid var(--accent-primary);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.rebuild-assign-definition {
    margin: 0;
}

.rebuild-assign-definition strong {
    color: var(--text-primary);
}

.rebuild-discovery-details {
    margin: 0 0 0.75rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.rebuild-discovery-details summary {
    display: inline-block;
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 650;
}

.rebuild-discovery-details .rebuild-pipeline-text {
    max-height: 16rem;
    margin: 0.55rem 0 0;
    overflow: auto;
}

.rebuild-assign-table {
    width: 100%;
    max-width: none;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.rebuild-assign-table th,
.rebuild-assign-table td {
    border: 1px solid var(--border-color);
}

.rebuild-assign-table th {
    padding: 0.55rem 0.7rem;
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
}

.rebuild-assign-table th:nth-child(1) {
    width: 24%;
}

.rebuild-assign-table th:nth-child(2) {
    width: 15%;
}

/* Wide enough for the humanized type labels to read without truncation. */
.rebuild-assign-table th:nth-child(3) {
    width: 15%;
}

.rebuild-assign-table th:nth-child(4) {
    width: 19%;
}

.rebuild-assign-table th:nth-child(5),
.rebuild-assign-table th:nth-child(6) {
    width: 13.5%;
}

.rebuild-assign-table tbody tr:nth-child(odd) td {
    background: var(--bg-secondary);
}

.rebuild-assign-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--bg-secondary) 82%, var(--accent-primary));
}

.rebuild-assign-table tbody tr:hover td {
    background: var(--accent-soft);
}

.rebuild-assign-table td {
    min-width: 0;
    height: 5.35rem;
    padding: 0.65rem 0.7rem;
    vertical-align: top;
}

.rebuild-assign-identity-top,
.rebuild-assign-identity-meta,
.rebuild-assign-folder {
    overflow-wrap: anywhere;
}

.rebuild-assign-identity-top {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
}

.rebuild-assign-identity-meta {
    margin-top: 0.18rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}

.rebuild-assign-folder {
    margin-top: 0.22rem;
    color: var(--text-muted);
    font-size: 0.73rem;
    line-height: 1.3;
}

.rebuild-assign-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.28rem;
}

.rebuild-assign-input,
.rebuild-assign-select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
    padding: 0.42rem 0.48rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.875rem;
}

.rebuild-assign-input:focus,
.rebuild-assign-select:focus {
    border-color: var(--accent-primary);
    outline: 2px solid color-mix(in srgb, var(--accent-primary) 35%, transparent);
    outline-offset: 1px;
}

.rebuild-assign-input[aria-invalid='true'],
.rebuild-assign-select[aria-invalid='true'] {
    border-color: var(--badge-red);
}

.rebuild-assign-field-error {
    display: block;
    min-height: 1.1em;
    color: var(--badge-red);
    font-size: 0.72rem;
    line-height: 1.35;
}

.rebuild-same-account-badge {
    display: inline-block;
    align-self: flex-start;
    max-width: 100%;
    padding: 0.15rem 0.35rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--text-secondary);
    font-size: 0.7rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.rebuild-assign-server-reasons {
    margin-top: 0.4rem;
    color: var(--badge-red);
    font-size: 0.72rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.rebuild-assign-server-reason + .rebuild-assign-server-reason {
    margin-top: 0.2rem;
}

.rebuild-assign-errors {
    margin-top: 0.7rem;
    display: grid;
    gap: 0.2rem;
}

.rebuild-assign-save {
    margin-top: 0.75rem;
}

@media (max-width: 800px) {
    .rebuild-flow-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rebuild-assign-table {
        display: block;
        overflow-x: auto;
    }

    .rebuild-assign-table th,
    .rebuild-assign-table td {
        min-width: 9rem;
    }

    .rebuild-assign-table th:first-child,
    .rebuild-assign-table td:first-child {
        min-width: 18rem;
    }

    .rebuild-step5-table {
        display: block;
        overflow-x: auto;
    }

    .rebuild-step5-table th,
    .rebuild-step5-table td {
        min-width: 7rem;
    }

    .rebuild-holding-table th:nth-child(2),
    .rebuild-holding-table td:nth-child(2) {
        min-width: 13rem;
    }

    .rebuild-holding-table th:nth-child(5),
    .rebuild-holding-table td:nth-child(5) {
        min-width: 12rem;
    }
}