/* ==========================================================================
   SOLVO — Components
   Covers every class app.js emits. Grouped by what the thing IS, not by the
   screen it happens to appear on, so a new product type inherits the whole
   visual language for free.
   ========================================================================== */

/* ==========================================================================
   1 · Surfaces — panels & cards
   ========================================================================== */
.panel, .mini-card, .metric-card, .debt-card, .split-card, .alert-card, .biz-card,
.settings-create-card, .financial-product-card, .admin-product-card, .investor-card,
.product-template-card, .taxonomy-type-card, .taxonomy-category-card, .debt-action-card,
.personal-debt-card, .personal-debt-global-card, .person-ledger-card, .household-kpi-card,
.ui-domain-card, .ui-product-card, .subview-panel, .capability-box, .credit-promo-panel,
.tmobile-calculator, .debt-summary-account, .personal-debt-split-card, .admin-product-shell,
.household-element-card, .household-share-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  min-width: 0;
}

.panel { padding: var(--s-4); }
.panel.compact, .compact { padding: var(--s-3); }
.mini-card, .metric-card { padding: var(--s-4); }

.panel-head, .compact-head, .card-list-head, .admin-product-card-head,
.capability-box-head, .credit-promo-head, .taxonomy-type-head, .taxonomy-category-head,
.person-ledger-head, .personal-debt-split-head, .tmobile-builder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.panel-head h3, .panel h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.panel-head h4, .panel h4 { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-semi); }
.panel-head p, .panel-head span.muted { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--muted); }

.card-list, .alert-list, .financial-product-list, .admin-product-list,
.promo-card-list, .personal-debt-entry-list, .personal-debt-history-list,
.tmobile-history-list, .advanced-type-list, .service-list, .ui-person-list {
  display: grid;
  gap: var(--s-2);
}

.mini-card span, .metric-card span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.mini-card strong, .metric-card strong {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-num);
  font-variant-numeric: tabular-nums;
}
.mini-card small, .metric-card small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); }
.mini-card.needs-attention { border-color: var(--warn); background: var(--warn-soft); }

/* ==========================================================================
   2 · Notices, banners, empty states
   ========================================================================== */
.seed-banner, .data-load-notice, .guide-card, .field-help, .locked-source-note,
.ui-detail-notice, .ui-inventory-note, .business-branch-note, .personal-debt-explain,
.shared-repayment-note, .workspace-empty, .ui-branch-empty, .taxonomy-empty-pill,
.personal-debt-empty, .personal-debt-history-empty, .personal-debt-history-intro,
.business-workspace-intro, .personal-workspace-intro, .debt-summary-source,
.household-detail-subtitle, .field-hint, .payoff-meta {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.seed-banner, .data-load-notice, .guide-card, .locked-source-note,
.ui-detail-notice, .ui-inventory-note, .business-branch-note,
.personal-debt-explain, .shared-repayment-note, .personal-debt-history-intro,
.business-workspace-intro, .personal-workspace-intro { padding: var(--s-3) var(--s-4); }
.field-help, .field-hint, .debt-summary-source, .household-detail-subtitle,
.payoff-meta { padding: var(--s-2) var(--s-3); margin: 0; }

.seed-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  border-color: var(--warn);
  background: var(--warn-soft);
  color: var(--ink);
}
.seed-banner strong { color: var(--ink); }
.seed-banner p { margin: 2px 0 0; color: var(--ink-2); }

.data-load-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.ui-detail-notice { border-color: var(--warn); background: var(--warn-soft); }
.ui-detail-notice.ok { border-color: var(--pos); background: var(--pos-soft); }
.ui-detail-notice strong, .ui-inventory-note strong { display: block; margin-bottom: 2px; color: var(--ink); }

.empty, .workspace-empty, .ui-branch-empty, .personal-debt-empty,
.personal-debt-history-empty, .taxonomy-empty-pill {
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  padding: var(--s-7) var(--s-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
  background: var(--surface-soft);
  color: var(--muted);
  text-align: center;
  font-size: var(--fs-sm);
}
.ui-branch-empty { justify-items: start; text-align: left; }
.empty strong, .workspace-empty strong, .ui-branch-empty strong { color: var(--ink); font-size: var(--fs-md); }

.brand-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--brand-line);
  border-radius: var(--r);
  background: var(--brand-soft);
}
.brand-strip strong { font-size: var(--fs-md); }
.brand-strip span { display: block; color: var(--muted); font-size: var(--fs-sm); }

/* ==========================================================================
   3 · Summary grids — the KPI row
   One shared component. Any new product page gets the same rhythm.
   ========================================================================== */
.ui-summary-grid, .workspace-kpis, .business-kpis, .audit-kpis, .inventory-kpis,
.investor-kpis, .personal-debt-global-grid, .pnl-grid, .debt-usage-stats,
.household-detail-stats, .person-ledger-metrics, .admin-product-metrics,
.personal-net-summary, .financial-summary-line, .balance-audit-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.ui-summary-cell, .workspace-kpis > .mini-card, .business-kpis > div,
.audit-kpis > div, .inventory-kpis > div, .investor-kpis > div,
.personal-debt-global-grid > div, .pnl-grid > div, .debt-usage-stats > div,
.household-detail-stats > div, .person-ledger-metrics > div,
.admin-product-metrics > div, .personal-net-summary > div,
.financial-summary-line > div, .balance-audit-strip > div {
  display: grid;
  align-content: start;
  gap: var(--s-1);
  min-height: 92px;
  padding: var(--s-4);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none;
  border-radius: 0;
}
.ui-summary-cell span, .workspace-kpis .mini-card span, .business-kpis > div span,
.audit-kpis > div span, .inventory-kpis > div span, .investor-kpis > div span,
.personal-debt-global-grid > div span, .pnl-grid > div span,
.debt-usage-stats > div span, .household-detail-stats > div span,
.person-ledger-metrics > div span, .admin-product-metrics > div span {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.ui-summary-cell strong, .workspace-kpis .mini-card strong, .business-kpis > div strong,
.audit-kpis > div strong, .inventory-kpis > div strong, .investor-kpis > div strong,
.personal-debt-global-grid > div strong, .pnl-grid > div strong,
.debt-usage-stats > div strong, .household-detail-stats > div strong,
.person-ledger-metrics > div strong, .admin-product-metrics > div strong {
  font-size: var(--fs-hero);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-num);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}
.ui-summary-cell small, .workspace-kpis .mini-card small { color: var(--muted); font-size: var(--fs-xs); }
.ui-summary-cell .positive { color: var(--pos); }
.ui-summary-cell .negative { color: var(--neg); }

/* ==========================================================================
   4 · Product cards — accounts, cards, loans, leases, anything new
   The scalable unit: a type label, a name, a figure, and actions.
   A new product type needs no new CSS.
   ========================================================================== */
.ui-product-section { display: grid; gap: var(--s-3); }
.ui-product-section .panel-head { margin: 0; }
.ui-product-grid, .product-template-grid, .settings-create-grid, .investor-grid,
.product-button-grid, .dashboard-action-grid, .taxonomy-category-grid,
.household-share-grid, .capability-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-3);
}

/* Fixed rows, not auto rows: the money figure sits on the same baseline in
   every card of a row, which is what makes a grid of balances scannable. */
.ui-product-card {
  display: grid;
  grid-template-rows: 52px 1fr auto;
  gap: var(--s-3);
  padding: var(--s-4);
  border-left: 3px solid var(--line-strong);
}
.ui-product-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.ui-product-card header > div { min-width: 0; }
.ui-product-type {
  display: block;
  color: var(--muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Product names run long ("Capital One 360 Performance Savings · 4994").
   Two lines with a clamp beats a single truncated line — the account's last
   four digits are how you tell two cards from the same bank apart, so losing
   the tail to an ellipsis loses the identifying part. */
.ui-product-card h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 2px 0 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  line-height: 1.25;
  overflow: hidden;
}
.ui-product-money, .product-money {
  align-self: center;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-num);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ui-product-card footer { display: flex; gap: var(--s-1); align-items: center; flex-wrap: wrap; }
.ui-shared-note { font-size: var(--fs-xs); color: var(--muted); }

/* Product family is carried by the left edge, not by a loud fill. */
.ui-product-card--debt { border-left-color: var(--chart-2); }
.ui-product-card--business { border-left-color: var(--chart-7); }

/* Only the first action in a card is primary; the rest recede. */
.ui-product-card footer button,
.financial-product-actions button,
.admin-product-card .financial-product-actions button { height: var(--ctrl-h-sm); padding: 0 9px; font-size: var(--fs-xs); }
.ui-product-card footer button.primary { background: transparent; border-color: var(--brand); color: var(--brand); }
.ui-product-card footer button.primary:hover { background: var(--brand); color: var(--on-brand); }

/* --- admin / settings product rows --------------------------------------- */
.financial-product-section, .settings-product-groups, .admin-product-group,
.product-template-panel, .category-tree-admin, .v77-settings-products,
.ui-detail-workspace, .tool-workspace, .embedded-workspace, .account-workspace,
.household-detail-view, .personal-debt-history-screen {
  display: grid;
  gap: var(--s-4);
}
.settings-product-groups > section, .admin-product-group { display: grid; gap: var(--s-2); }

.financial-product-card, .admin-product-card, .admin-product-line, .promo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  min-height: 68px;
}
.financial-product-main, .admin-product-card-head { min-width: 0; }
.financial-product-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(84px, auto);
  align-items: center;
  gap: var(--s-3);
}
.financial-product-main b { justify-self: end; font-variant-numeric: tabular-nums; }
.financial-product-main strong, .admin-product-card-head strong { display: block; font-size: var(--fs-base); font-weight: var(--fw-semi); }
.financial-product-main span, .admin-product-card-head span { display: block; margin-top: 1px; color: var(--muted); font-size: var(--fs-xs); }
.financial-product-actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(92px, max-content);
  justify-content: end;
  align-items: center;
  gap: var(--s-2);
}
.financial-product-card.settings-product-row {
  grid-template-columns: minmax(0, 1fr) 184px;
}
.settings-product-actions {
  grid-template-columns: repeat(2, minmax(0, 88px));
  grid-auto-flow: initial;
  grid-auto-columns: initial;
}
.settings-product-actions button { width: 100%; justify-content: center; }
.admin-product-metric { display: grid; gap: 1px; }
.admin-product-metric span { color: var(--muted); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--track-label); }
.admin-product-metric strong { font-variant-numeric: tabular-nums; }

.settings-create-card, .product-template-card, .taxonomy-type-card {
  display: grid;
  align-content: start;
  gap: var(--s-1);
  padding: var(--s-4);
  min-height: 88px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.settings-create-card:hover, .product-template-card:hover, .taxonomy-type-card:hover {
  border-color: var(--brand);
  background: var(--surface-soft);
}
.settings-create-card strong, .product-template-card strong { font-size: var(--fs-base); font-weight: var(--fw-semi); }
.settings-create-card span, .product-template-card span { color: var(--muted); font-size: var(--fs-sm); }
.settings-advanced-types { margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); display: grid; gap: var(--s-2); }
.template-kind { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--track-label); }

/* --- capability boxes ---------------------------------------------------- */
.capability-box { padding: var(--s-4); display: grid; gap: var(--s-3); }
.product-capabilities, .capability-check-grid { display: grid; gap: var(--s-2); }
.product-capability, .capability-check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   5 · Tables
   ========================================================================== */
.table-shell {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.ui-table-panel { padding: 0; overflow: hidden; }
.ui-table-panel .table-shell { border: 0; border-radius: 0; }
.ui-table-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 48px;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--line);
}
.ui-table-heading strong { font-size: var(--fs-base); font-weight: var(--fw-semi); }

table { width: 100%; border-collapse: collapse; min-width: 720px; }
th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 36px;
  padding: 0 var(--s-4);
  text-align: left;
  vertical-align: middle;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
td {
  height: 48px;
  padding: var(--s-2) var(--s-4);
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-soft); }
td strong, td b { color: var(--ink); font-weight: var(--fw-semi); }
td .muted { font-size: var(--fs-xs); }

.clickable-row, .transaction-table tbody tr, .sortable-table tbody tr { cursor: pointer; }
.transaction-table tr.transaction-focus {
  background: var(--brand-soft);
  box-shadow: inset 2px 0 0 var(--brand);
}
.transaction-table td:last-child, .source-review-table td:last-child,
#peopleDirectory td:last-child, #businessCapitalTable td:last-child { white-space: nowrap; }

.th-sort {
  all: unset;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
th[data-sort-dir="asc"] .th-sort span::after { content: " ↑"; color: var(--brand); }
th[data-sort-dir="desc"] .th-sort span::after { content: " ↓"; color: var(--brand); }

.muted-row td { color: var(--muted); }
.is-closed { opacity: .58; }

/* ==========================================================================
   6 · Badges, pills, meters
   ========================================================================== */
.badge, .taxonomy-item-pill, .usage-tier, .allocation-chips span, .delta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: 22px;
  padding: 0 var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface-soft);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  white-space: nowrap;
}
.badge.ok, .usage-tier.low, .delta.down { background: var(--pos-soft); color: var(--pos); border-color: transparent; }
.badge.warn, .usage-tier.elevated, .usage-tier.moderate { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge.danger, .usage-tier.high, .delta.up { background: var(--neg-soft); color: var(--neg); border-color: transparent; }
.badge-line, .allocation-chips, .taxonomy-item-cloud, .product-capabilities {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
}

.debt-color-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--group-color, var(--chart-rest));
}

.progress, .usage-bar, .personal-debt-amortization, .debt-mini-usage {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  overflow: hidden;
}
.progress > span, .usage-bar > span, .personal-debt-amortization > span, .debt-mini-usage > span {
  display: block;
  height: 100%;
  width: var(--pct, 0%);
  border-radius: inherit;
  background: var(--brand);
  transition: width var(--t);
}
.usage-bar.low > span { background: var(--pos); }
.usage-bar.moderate > span, .usage-bar.elevated > span { background: var(--warn); }
.usage-bar.high > span { background: var(--neg); }
.payoff-progress > span { background: var(--pos); }

.dashboard-shortcuts .badge { cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.dashboard-shortcuts .badge:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }

/* ==========================================================================
   7 · Tabs & selectors
   ========================================================================== */
.section-tabs, .product-tabs, .product-scope-tabs, .ui-business-selector,
.business-branch-selector, .personal-debt-directions, .category-command-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 2px;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  width: 100%;
  max-width: 100%;
}
.product-tabs, .product-scope-tabs { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.business-branch-selector { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.section-tabs button, .product-tabs button, .product-scope-tabs button,
.ui-business-selector button, .business-branch-selector button,
.personal-debt-directions button {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  height: 100%;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  justify-content: center;
  text-align: center;
}
.product-tabs button, .product-scope-tabs button { min-height: 52px; display: grid; align-content: center; gap: 1px; }
.product-tabs button strong, .product-scope-tabs button strong { line-height: 1.1; }
.product-tabs button span, .product-scope-tabs button span {
  color: inherit;
  font-size: var(--fs-xs);
  line-height: 1.2;
  opacity: .78;
}
.section-tabs button:hover, .product-tabs button:hover, .product-scope-tabs button:hover,
.ui-business-selector button:hover, .business-branch-selector button:hover,
.personal-debt-directions button:hover { background: transparent; color: var(--ink); }
.section-tabs button.active, .product-tabs button.active, .product-scope-tabs button.active,
.ui-business-selector button.active, .business-branch-selector button.active,
.personal-debt-directions button.active, .personal-debt-direction.selected {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}
.ui-business-selector > span {
  align-self: center;
  padding: 0 var(--s-2);
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
#adminTabs {
  position: sticky;
  top: calc(var(--topbar-h) + var(--s-2));
  z-index: 4;
}
.admin-tab-panel { display: grid; gap: var(--s-4); }
.admin-tab-panel:not(.hidden) { min-height: calc(100vh - var(--topbar-h) - 128px); }
.admin-tab-panel[hidden], .admin-tab-panel.hidden { display: none; }

/* ==========================================================================
   8 · List rows — the shared "row with a figure on the right"
   ========================================================================== */
.ui-decision-list, .ui-recent-list, .ui-category-list, .service-list,
.personal-balance-list, .person-ledger-list, .household-detail-list,
.tmobile-calc-list, .tmobile-person-balances, .personal-debt-transaction-list,
.personal-debt-history-cycle-list { display: grid; }

.ui-decision-row, .ui-recent-row, .ui-service-row, .service-row,
.personal-balance-row, .side-row, .ui-category-list > div,
.tmobile-month-row, .tmobile-calc-item, .tmobile-person-balance,
.household-detail-list > div, .financial-summary-line > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 52px;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
}
.ui-decision-row:last-child, .ui-recent-row:last-child, .ui-service-row:last-child,
.service-row:last-child, .personal-balance-row:last-child, .side-row:last-child,
.ui-category-list > div:last-child, .tmobile-month-row:last-child { border-bottom: 0; }

.ui-recent-row { grid-template-columns: 78px minmax(0, 1fr) auto; }
.ui-service-row { grid-template-columns: minmax(0, 1fr) 140px auto; }

.ui-decision-row strong, .ui-recent-row strong, .ui-service-row strong,
.service-row strong, .personal-balance-row strong { display: block; font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--ink); }
.ui-decision-row small, .ui-recent-row small, .ui-service-row small,
.service-row small, .personal-balance-row small { display: block; margin-top: 1px; color: var(--muted); font-size: var(--fs-sm); }
.ui-decision-row b, .ui-recent-row b, .ui-service-row b, .service-row b,
.personal-balance-row b, .ui-category-list strong {
  font-size: var(--fs-base);
  font-weight: var(--fw-semi);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ui-recent-row time, .ui-recent-row small { color: var(--muted); font-size: var(--fs-xs); }

/* --- expandable person / ledger rows ------------------------------------- */
.ui-person-row, .personal-debt-card, .person-ledger-card,
.personal-debt-history-cycle, .debt-category-card, .debt-summary-account {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
}
.ui-person-row > summary, .personal-debt-card > summary, .person-ledger-head,
.personal-debt-history-cycle-head, .debt-category-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 58px;
  padding: 0 var(--s-4);
  cursor: pointer;
  list-style: none;
}
.ui-person-row > summary::-webkit-details-marker,
.personal-debt-card > summary::-webkit-details-marker,
.debt-category-summary::-webkit-details-marker,
.debt-summary-toggle::-webkit-details-marker,
.smart-branches summary::-webkit-details-marker,
.ui-dashboard-fold > summary::-webkit-details-marker { display: none; }

.ui-person-row > summary span strong, .ui-person-row > summary span small { display: block; }
.ui-person-row > summary span small { margin-top: 1px; color: var(--muted); font-size: var(--fs-sm); }
.ui-person-row > summary > b, .debt-category-total, .personal-debt-card-total {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ui-person-row[open] > summary, .personal-debt-card[open] > summary,
.debt-category-card[open] > .debt-category-summary {
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.ui-person-breakdown, .personal-balance-breakdown, .personal-debt-card-body,
.personal-debt-history-columns, .pnl-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.ui-person-breakdown > div, .personal-balance-breakdown > div, .pnl-breakdown > div {
  min-height: 70px;
  padding: var(--s-3) var(--s-4);
  border-right: 1px solid var(--line);
}
.ui-person-breakdown > div:last-child, .personal-balance-breakdown > div:last-child { border-right: 0; }
.ui-person-breakdown span, .personal-balance-breakdown span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.ui-person-breakdown strong, .personal-balance-breakdown strong {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.ui-person-details, .personal-debt-inline-details, .personal-balance-details,
.person-ledger-details, .personal-debt-grouped-children, .debt-category-accounts {
  padding: var(--s-4);
  display: grid;
  gap: var(--s-3);
}
.ui-person-summary { display: grid; gap: 2px; max-width: 70ch; }
.ui-person-summary strong { font-size: var(--fs-hero); font-weight: var(--fw-bold); letter-spacing: var(--track-num); }
.ui-person-summary span { color: var(--muted); font-size: var(--fs-sm); }

/* chevrons on every disclosure */
.debt-summary-chev {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  color: var(--muted);
  transition: transform var(--t-fast);
}
details[open] > summary .debt-summary-chev { transform: rotate(225deg); }

/* ==========================================================================
   9 · Dashboard composition
   ========================================================================== */
.ui-dashboard-grid, .ui-business-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
  gap: var(--s-4);
  align-items: start;
}
.ui-dashboard-column { display: grid; gap: var(--s-4); align-content: start; }
.ui-domain-grid, .business-activity-grid, .personal-debt-history-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
}
.ui-domain-card { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-4); min-height: 150px; }
.ui-domain-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2); }
.ui-domain-card h3 { margin: 0; font-size: var(--fs-md); }
.ui-domain-card p { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-sm); }
.ui-domain-money { font-size: var(--fs-hero); font-weight: var(--fw-bold); letter-spacing: var(--track-num); line-height: 1; }
.ui-domain-card footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.ui-domain-card footer span { color: var(--muted); font-size: var(--fs-sm); }

.ui-dashboard-fold { padding: 0; }
.ui-dashboard-fold > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 54px;
  padding: 0 var(--s-4);
  cursor: pointer;
  list-style: none;
}
.ui-dashboard-fold > summary strong { display: block; font-size: var(--fs-base); font-weight: var(--fw-semi); }
.ui-dashboard-fold > summary small { display: block; margin-top: 1px; color: var(--muted); font-size: var(--fs-sm); }
.ui-dashboard-fold[open] > summary { border-bottom: 1px solid var(--line); }
.ui-dashboard-fold-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-5); padding: var(--s-4); }
.ui-dashboard-fold-body h3 { margin: 0 0 var(--s-2); font-size: var(--fs-md); }

.overview-band { display: grid; gap: var(--s-3); }
.ui-detail-toolbar, .workspace-toolbar, .personal-debt-toolbar,
.tmobile-calc-toolbar, .category-command-bar, .compact-summary {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.ui-detail-search { width: min(320px, 100%); }
.ui-transaction-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 170px 170px auto;
  gap: var(--s-2);
  padding: var(--s-3);
}
.ui-transaction-toolbar input, .ui-transaction-toolbar select { max-width: none; }

/* Dates are the anchor of every ledger row. Wrapping "Aug 01, 2026" onto two
   lines made every row a different height and broke the scan down the column. */
#transactionsTable td:first-child,
.transaction-table td:first-child,
.source-review-table td:first-child { white-space: nowrap; }
.toolbar input, .toolbar select { max-width: 280px; }

/* --- alerts -------------------------------------------------------------- */
.alert-card {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4);
  border-left: 3px solid var(--line-strong);
}
.alert-card strong { display: block; font-size: var(--fs-base); }
.alert-card.warn { border-left-color: var(--warn); }
.alert-card.danger { border-left-color: var(--neg); }
.alert-card.ok { border-left-color: var(--pos); }

/* ==========================================================================
   10 · Business, inventory, investors
   ========================================================================== */
.business-hero, .household-hero, .people-debt-summary, .business-workspace-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}
.business-hero h3, .household-hero h3 { margin: 0; font-size: var(--fs-hero); }
.household-hero p, .business-hero p { max-width: 62ch; margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--fs-sm); }

.ui-capital-card, .investor-card, .taxonomy-category-card { display: grid; gap: var(--s-3); padding: var(--s-4); }
.investor-amount { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.ui-category-list > div { min-height: 44px; }
.ui-category-list span { color: var(--ink-2); font-size: var(--fs-sm); }
.ui-inventory-note { display: grid; gap: var(--s-1); }

/* ==========================================================================
   11 · Forms in modals & inline
   ========================================================================== */
.form-grid, .transaction-form, .debt-payment-form, .product-template-form,
.tmobile-bill-form, .tmobile-builder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}
.form-grid .wide, .transaction-form .wide { grid-column: 1 / -1; }
.transaction-form .is-disabled { opacity: .45; }
.transaction-form .is-disabled input,
.transaction-form .is-disabled select,
.transaction-form .is-disabled textarea { cursor: not-allowed; }

.tx-taxonomy-row, .mini-form-row, .allocation-line, .split-line,
.tmobile-builder-line, .tm-split-line, .personal-debt-split-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-2);
  align-items: end;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}
.allocation-lines, .split-lines, .tm-splits, .tmobile-builder-lines,
.tmobile-calc-people, .personal-debt-direction-detail { display: grid; gap: var(--s-2); }
.allocation-line label, .split-line label { display: grid; gap: var(--s-1); min-width: 0; }
.allocation-line label span, .split-line label span {
  color: var(--muted);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.allocation-line [data-remove-allocation] { grid-column: 1 / -1; justify-self: start; }
.mini-form-row .field-help { grid-column: 1 / -1; }

.smart-branches {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}
.smart-branches summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-semi);
  color: var(--ink);
}
.smart-branches summary span { display: flex; align-items: center; gap: var(--s-2); }
.smart-branches summary span::before {
  content: "";
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  color: var(--muted);
  transition: transform var(--t-fast);
}
.smart-branches[open] summary span::before { transform: rotate(45deg); }
.smart-branches .allocation-lines { margin-top: var(--s-3); }

.source-locked select { border-color: var(--brand); box-shadow: var(--ring); }
.locked-source-note { border-style: dashed; border-color: var(--brand-line); background: var(--brand-soft); }

.credit-promo-panel { display: grid; gap: var(--s-2); padding: var(--s-3); }
.promo-card { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-soft); }
.promo-card.inactive { opacity: .62; }
.promo-card span { display: block; color: var(--muted); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--track-label); }
.promo-card strong { display: block; }

.impact-preview { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-soft); }
.impact-preview-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.impact-preview-table table { min-width: 0; }
.impact-warning-list { display: grid; gap: var(--s-1); margin: 0; padding-left: var(--s-5); color: var(--warn); font-size: var(--fs-sm); }
.debt-payment-preview { display: grid; gap: var(--s-2); }

.debt-responsibility-panel, .shared-savings-liability-panel {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}

/* ==========================================================================
   12 · Taxonomy / categories admin
   ========================================================================== */
.taxonomy-category-grid { gap: var(--s-3); }
.taxonomy-type-head, .taxonomy-category-head { align-items: center; }
.taxonomy-item-pill {
  height: 26px;
  padding: 0 var(--s-2);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.taxonomy-item-pill:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.taxonomy-action { height: var(--ctrl-h-sm); padding: 0 var(--s-2); font-size: var(--fs-xs); }
.category-catalog-summary { display: flex; gap: var(--s-3); flex-wrap: wrap; color: var(--muted); font-size: var(--fs-sm); }

/* ==========================================================================
   13 · T-Mobile / shared bill tool
   ========================================================================== */
.tmobile-calculator { padding: var(--s-4); display: grid; gap: var(--s-3); }
.tmobile-calc-title, .tmobile-calc-person { font-weight: var(--fw-semi); }
.tmobile-calc-item, .tmobile-person-balance { min-height: 44px; }
.tm-amount, .tm-person-amount, .split-amount, .alloc-amount, .investor-amount,
.remainder, .unassigned { font-variant-numeric: tabular-nums; }
.tm-person, .split-person, .alloc-person, .alloc-label, .split-role, .alloc-type,
.alloc-category, .alloc-purpose, .alloc-effect, .alloc-debt-mode { min-width: 0; }
.tmobile-unassigned-bill, .unassigned { color: var(--warn); }
.tmobile-bill-summary, .tm-line-summary, .service-month-summary {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  color: var(--muted);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   14 · Modal, drawer, toast
   ========================================================================== */
.modal {
  width: min(880px, calc(100vw - var(--s-6)));
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overscroll-behavior: contain;
}
.modal::backdrop { background: var(--overlay); backdrop-filter: blur(3px); }
.modal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(86vh, 880px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-high);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-size: var(--fs-md); }
.modal-body { padding: var(--s-5); display: grid; gap: var(--s-4); overflow-y: auto; overscroll-behavior: contain; }
.modal-actions { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-soft); }
html.modal-open, body.modal-open { overflow: hidden; overscroll-behavior: none; }
.modal .allocation-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.detail-drawer {
  position: fixed;
  top: 0; right: 0;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(520px, 100vw);
  height: 100vh;
  background: var(--surface-high);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-3);
}
.detail-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}
.detail-drawer-head h3 { margin: 0; font-size: var(--fs-md); }
.detail-drawer-body { padding: var(--s-5); display: grid; gap: var(--s-4); overflow-y: auto; align-content: start; }
.detail-drawer-actions { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); background: var(--surface-soft); display: flex; gap: var(--s-2); justify-content: flex-end; }

.toast {
  position: fixed;
  right: var(--s-5);
  bottom: var(--s-5);
  z-index: var(--z-toast);
  max-width: 400px;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-sm);
  background: var(--surface-high);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  font-size: var(--fs-sm);
}
.toast.error { border-left-color: var(--neg); }

/* ==========================================================================
   15 · Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .ui-dashboard-grid, .ui-business-layout { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .form-grid, .transaction-form, .tx-taxonomy-row, .allocation-line, .split-line,
  .mini-form-row, .modal .allocation-line { grid-template-columns: 1fr; }
  .ui-transaction-toolbar { grid-template-columns: 1fr; }
  .ui-recent-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-recent-row time { display: none; }
  .ui-service-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ui-person-breakdown > div, .personal-balance-breakdown > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .seed-banner, .data-load-notice, .business-hero, .household-hero { flex-direction: column; align-items: flex-start; }
  table { min-width: 640px; }
  .detail-drawer { width: 100vw; }
}