/* Business (business.js): only what the shared parts do not already draw.
   Cards, heads, marks, mail rows, bands, composer rows and fact rows come
   from system.css, overview.css and fields.css. */

.bz-page .bz-wait .mo-empty { min-height: 220px; }
.bz-error { margin: 0; padding: 10px 14px; color: var(--ds-red-ink); font-size: 12.5px; }
.bz-note {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--ds-border); border-radius: var(--ds-radius); background: var(--ds-card);
  color: var(--ds-ink-3); font-size: 12.5px;
}
.bz-link { padding: 0; border: 0; background: none; color: var(--ds-blue-ink); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.bz-acts { display: flex; justify-content: flex-end; gap: 6px; }

/* Rows: the mail row with the columns each list needs. */
.bz-page .mo-mail.bz-mail,
.ex-page .mo-mail.bz-mail,
.bz-page .mo-mail.bz-gift,
.bz-page .mo-mail.bz-person,
:is(.bz-page, .ex-page) .mo-mail.bz-event { grid-template-columns: 24px minmax(0, 1fr) minmax(0, auto) minmax(72px, auto); }
.bz-page .mo-mail.bz-person { grid-template-columns: 24px minmax(0, 1fr) minmax(0, auto) 40px; }
.bz-page .mo-mail.bz-place { grid-template-columns: 24px minmax(0, 1fr) 120px 88px; cursor: default; }
.bz-page .mo-mail.bz-place:hover { background: #ffffff; }
.bz-page .mo-mail .nw-line-value { text-align: right; font-variant-numeric: tabular-nums; }
.bz-initials { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.bz-page .mo-mail-tile.bz-qpic { overflow: hidden; padding: 0; }
.bz-qpic img { width: 100%; height: 100%; object-fit: cover; }
.bz-qpic.is-doc b, .bz-thumb.is-doc b { font-size: 7.5px; font-weight: 700; color: var(--ds-ink-3); letter-spacing: .02em; }
.bz-event { cursor: default; }
.bz-event .mo-mail-subject em { white-space: nowrap; }
.bz-sent-row { cursor: default; }

/* Overview */
.bz-units { display: flex; flex-wrap: wrap; gap: 3px; max-height: 33px; overflow: hidden; }
.bz-units i { width: 9px; height: 9px; flex: none; border-radius: 2px; background: #ececec; }
.bz-units i.is-done { background: var(--ds-green); }
.bz-units i.is-check { background: var(--ds-orange); }
.bz-units i.is-failed { background: var(--ds-red); }
.bz-units i.is-reading { background: #b7b7b7; }
.bz-page .mo-month.is-now em { color: var(--ds-ink); }

.bz-months-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 14px 16px 12px; }
.bz-stack { flex: 1 1 auto; display: flex; align-items: stretch; gap: 6px; min-height: 150px; }
.bz-stack-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.bz-stack-col > b { height: 14px; color: var(--ds-ink-3); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bz-stack-bar {
  flex: 1 1 auto; width: min(30px, 70%); display: flex; flex-direction: column-reverse; gap: 1px;
  overflow: hidden; border-radius: 2px; background: var(--viz-track, #ececec);
}
.bz-stack-bar i { display: block; min-height: 0; }
.bz-stack-bar u { display: block; min-height: 0; text-decoration: none; }
.bz-stack-col > em { color: var(--ds-ink-4); font-size: 10.5px; font-style: normal; font-weight: 600; }
.bz-stack-col.is-now > em { color: var(--ds-ink); }
.bz-stack-legend { margin-top: 10px; flex-wrap: wrap; row-gap: 4px; white-space: normal; }

.bz-page .ex-cat.bz-cat { width: 100%; border-right: 0; border-bottom: 0; border-left: 0; background: transparent; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.bz-page .ex-cat.bz-cat:hover { background: var(--ds-hover); }
.bz-page .ex-cat > span:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bz-page .ex-cat em { color: var(--ds-ink-3); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.bz-page .ex-cat > b { text-align: right; font-variant-numeric: tabular-nums; }
.bz-payers-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 0 6px; }
.bz-payers-body > .mo-split { margin: 0 14px; }

/* Starting a board */
.bz-start-body { display: flex; align-items: center; gap: 22px; padding: 22px 18px; border-bottom: 1px solid var(--ds-line); }
.bz-start-mock { display: flex; align-items: center; gap: 10px; flex: none; }
.bz-start-mock .ex-mock-receipt { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--ds-line); border-radius: 4px; background: #ffffff; }
.bz-start-mock .ex-mock-receipt i { display: block; height: 3px; border-radius: 2px; background: #dcdcdc; }
.bz-start-arrow .mo-ic { width: 14px; height: 14px; color: var(--ds-ink-4); }
.bz-start-rows { display: flex; flex-direction: column; gap: 5px; width: 78px; }
.bz-start-rows i { display: block; height: 7px; border-radius: 2px; background: #ececec; }
.bz-start-rows i:first-child { background: var(--ds-red); width: 60%; }
.bz-start-text { display: flex; flex-direction: column; gap: 4px; }
.bz-start-text b { font-size: 13.5px; font-weight: 600; color: var(--ds-ink); }
.bz-start-text span { color: var(--ds-ink-3); font-size: 12.5px; }
.bz-start .mo-mail.bz-mail .mo-mail-when { color: var(--ds-blue-ink); }
.bz-start-composer { grid-template-columns: 24px minmax(0, 1fr) auto; }

/* Expenses */
.bz-table-wrap { overflow-x: auto; }
.bz-table { width: 100%; table-layout: fixed; }
.bz-table col, .bz-table th { white-space: nowrap; }
.bz-table .bz-th-pic, .bz-table .bz-td-pic { width: 44px; padding-left: 14px; padding-right: 0; }
.bz-table th:nth-child(2) { width: 108px; }
.bz-table th:nth-child(4) { width: 196px; }
.bz-table th:nth-child(5) { width: 112px; }
.bz-table th:nth-child(6) { width: 140px; }
.bz-table th:nth-child(7) { width: 96px; }
.bz-table th:nth-child(8) { width: 120px; }
.bz-table .bz-th-more, .bz-table .bz-td-more { width: 40px; }
.bz-pic-btn { display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.bz-thumb {
  width: 28px; height: 28px; display: grid; place-items: center; overflow: hidden;
  border-radius: 6px; background: var(--ds-well); color: var(--ds-ink-4);
}
.bz-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bz-thumb.is-none .mo-ic { width: 13px; height: 13px; }
.bz-what { min-width: 0; }
.bz-what .bz-merchant { font-weight: 600; }
.bz-what-line { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 18px; padding: 0 6px; }
.bz-what-line em { overflow: hidden; color: var(--ds-ink-4); font-size: 12px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.finance-page.finance-page.finance-page .bz-table td .bz-desc { height: 20px; min-height: 20px; padding: 0; color: var(--ds-ink-4); font-size: 12px; }
.bz-what-line .ds-mark { flex: none; font-size: 11.5px; }
.bz-paid { overflow: hidden; color: var(--ds-ink-3); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.bz-table td.num { white-space: nowrap; }
.finance-page.finance-page.finance-page .bz-table td .bz-share { width: 44px; text-align: right; }
.bz-pct, .bz-cur { color: var(--ds-ink-4); font-size: 12px; font-style: normal; }
.bz-band th { padding: 0 12px 0 14px !important; height: 34px; border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); background: #fafafa; text-align: left; }
.bz-band th b { font-size: 12.5px; font-weight: 600; color: var(--ds-ink); }
.bz-band th .mo-count { margin-left: 8px; }
.bz-band th.num { text-align: right; padding-right: 54px !important; }
.bz-row.is-removed td { color: var(--ds-ink-4); }
.bz-row.is-removed .bz-merchant { text-decoration: line-through; }
.bz-composer { grid-template-columns: 24px 120px minmax(0, 1fr) 190px 150px 120px auto; }
.bz-composer .ds-date { padding: 0 10px; }

/* Receipts */
.bz-drop { transition: border-color .12s, background .12s; }
.bz-drop.is-over { border-color: #2563eb; background: #fbfcff; }
.bz-drop.is-off { opacity: .85; }
.bz-drop-body { flex: 1 1 auto; display: flex; align-items: center; gap: 22px; padding: 22px 18px; }
.bz-drop-mock { display: flex; flex-direction: column; gap: 4px; flex: none; width: 52px; padding: 9px; border: 1px solid var(--ds-line); border-radius: 4px; background: #ffffff; }
.bz-drop-mock i { display: block; height: 3px; border-radius: 2px; background: #dcdcdc; }
.bz-drop-text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bz-drop-text b { color: var(--ds-ink); font-size: 13.5px; font-weight: 600; }
.bz-drop-text span { color: var(--ds-ink-3); font-size: 12.5px; }
.bz-sent { flex: none !important; border-top: 1px solid var(--ds-line); }
.bz-facts { padding: 4px 16px 8px; }
.bz-reader { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 40px; margin-top: auto; padding: 0 16px; border-top: 1px solid var(--ds-line); background: var(--ds-surface); color: var(--ds-ink-3); font-size: 12.5px; }

.bz-review { align-items: stretch; }
.bz-receipt { display: flex; flex-direction: column; }
.bz-receipt-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 16px; padding: 14px 16px; }
.bz-receipt-pic {
  display: flex; align-items: flex-start; justify-content: center; max-height: 420px; overflow: hidden;
  border-radius: 8px; background: var(--ds-well); cursor: zoom-in;
}
.bz-receipt-pic img { width: 100%; height: auto; max-height: 420px; object-fit: contain; }
.bz-receipt-pic.is-doc { flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 220px; color: var(--ds-ink-3); text-decoration: none; cursor: pointer; }
.bz-receipt-pic.is-doc b { color: var(--ds-ink-2); font-size: 15px; font-weight: 700; }
.bz-receipt-pic.is-doc span { max-width: 90%; overflow: hidden; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.bz-receipt-pic.is-doc em { color: var(--ds-blue-ink); font-size: 12px; font-style: normal; }
.bz-receipt-facts { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bz-receipt-facts .bz-facts { padding: 0; }
.bz-fact.is-unsure { color: var(--ds-orange-ink); }
.bz-fact.is-read output { justify-self: end; color: var(--ds-ink); font-size: 13px; text-align: right; }
.bz-warn { display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--ds-line-soft); }
.bz-warn > span { display: flex; align-items: center; gap: 8px; color: var(--ds-ink-2); font-size: 12.5px; }
.bz-warn .ds-mark { flex: none; }
.bz-gift-lines { display: flex; flex-direction: column; }
.bz-gift-lines span {
  display: grid; grid-template-columns: 16px minmax(0, auto) auto minmax(0, 1fr); align-items: center; gap: 8px;
  min-height: 32px; border-top: 1px solid var(--ds-line-soft); font-size: 12.5px;
}
.bz-gift-lines .mo-ic { width: 13px; height: 13px; color: var(--ds-ink-4); }
.bz-gift-lines em { color: var(--ds-ink-3); font-style: normal; }
.bz-gift-lines i { overflow: hidden; color: var(--ds-ink-3); font-style: normal; text-align: right; white-space: nowrap; text-overflow: ellipsis; }
.bz-receipt-foot { display: flex; align-items: center; gap: 6px; }
.bz-receipt-foot > span { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--ds-ink-3); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }

.bz-cards-head { display: flex; align-items: center; gap: 8px; min-height: 30px; margin-top: 2px; }
.bz-cards-head h3 { margin: 0; color: var(--ds-ink); font-size: 13.5px; font-weight: 600; }
.bz-card-band h4 { margin: 4px 0 8px; color: var(--ds-ink-3); font-size: 12px; font-weight: 500; }
.bz-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-gap); }
.bz-rcard { color: inherit; font: inherit; text-align: left; }

/* People and history */
.bz-invite { grid-template-columns: 24px minmax(0, 1fr) 140px auto; }
.bz-record-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.bz-record-fig { display: flex; align-items: baseline; gap: 8px; }
.bz-record-fig b { color: #212121; font-size: 28px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bz-record-fig span { color: var(--ds-ink-3); font-size: 13px; font-weight: 600; }
.bz-record-fig .ds-mark { margin-left: auto; }
.bz-record-body .mo-note { white-space: normal; }
.bz-record-people { margin-top: auto; }
.bz-record-people > div { grid-template-columns: 120px minmax(0, 1fr) 40px; }
.bz-history .mo-band-hd { cursor: default; }

/* The expense sheet */
.modal-overlay .modal.bz-sheet:not(.rs-sheet) { width: min(1120px, calc(100vw - 48px)); max-width: none; }
.bz-sheet-body { display: flex; gap: 22px; max-height: min(72vh, 760px); overflow: auto; }
.bz-sheet-side { flex: 0 0 250px; display: flex; flex-direction: column; gap: 8px; }
.bz-sheet-side .bz-receipt-pic { max-height: 460px; }
.bz-sheet-read { margin: 0; color: var(--ds-ink-3); font-size: 12px; line-height: 1.45; }
.bz-sheet-main { flex: 1 1 auto; min-width: 0; }
.bz-sheet-main .fs-groups { padding: 0 0 6px; }
.bz-sheet-sec { margin-top: 10px; }
.bz-sheet-sec h4 { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; color: var(--ds-ink-2); font-size: 12.5px; font-weight: 600; }
.bz-gift-row, .bz-extra-row {
  display: grid; align-items: center; min-height: 40px; border-bottom: 1px solid var(--ds-line-soft);
}
.bz-gift-row { grid-template-columns: minmax(0, 1fr) 56px 104px 96px minmax(0, 1.1fr) minmax(0, 1.1fr) 112px 28px; }
.bz-extra-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 28px; }
.finance-page.finance-page .bz-sheet :is(.bz-gift-row, .bz-extra-row) input,
.bz-sheet :is(.bz-gift-row, .bz-extra-row) input {
  width: 100%; height: 30px; min-height: 30px; margin: 0; padding: 0 8px; border: 0; border-left: 1px solid var(--ds-line-soft);
  border-radius: 0; background: transparent; box-shadow: none; color: var(--ds-ink); font: inherit; font-size: 13px;
}
.bz-sheet :is(.bz-gift-row, .bz-extra-row) input:first-child { border-left: 0; padding-left: 0; }
.bz-sheet :is(.bz-gift-row, .bz-extra-row) input:focus { outline: 0; box-shadow: inset 0 -2px 0 var(--f-focus, #2563eb); }
.bz-sheet .bz-gift-row .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.bz-gift-total { padding: 0 8px; font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bz-gift-row .ds-date { padding: 0 8px; border-left: 1px solid var(--ds-line-soft); font-size: 13px; }
.bz-line-add { width: 100%; grid-template-columns: 24px auto; gap: 10px; border: 0; border-bottom: 1px solid var(--ds-line-soft); color: var(--ds-ink-3); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.bz-line-add:hover { color: var(--ds-ink); }
.bz-items { display: flex; flex-direction: column; }
.bz-items span { display: grid; grid-template-columns: minmax(0, 1fr) 60px 100px; gap: 10px; align-items: center; min-height: 30px; border-bottom: 1px solid var(--ds-line-soft); font-size: 12.5px; }
.bz-items b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.bz-items em, .bz-items i { color: var(--ds-ink-3); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.bz-sheet .modal-actions .bz-sheet-remove { margin-right: auto; }

/* Fixes after the first look in the browser. */
/* The receipt being checked takes the whole width; the arrows in its head
   go to the others waiting. */
.bz-review { display: block; }
.bz-review-pos { color: var(--ds-ink-3); font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.finance-page.finance-page.finance-page .bz-facts > label.bz-fact.is-read { grid-template-columns: minmax(0, 1fr) auto; }
.bz-fact.is-read output { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bz-receipt-foot { flex-wrap: nowrap; }
.bz-receipt-foot > span { flex: 1 1 0; }
.bz-receipt-foot > .mo-btn { flex: none; }
.bz-drop-body { min-height: 132px; }
.finance-page.finance-page.finance-page .bz-batch .bz-facts { grid-template-columns: minmax(0, 1fr); }

/* board.html: a guest's view of one board, with no account. */
.gk-body { min-height: 100vh; margin: 0; background: var(--ds-page, #ffffff); font-family: var(--font-app, 'DM Sans', system-ui, sans-serif); color: var(--ds-ink); }
.gk-head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 24px; border-bottom: 1px solid #ebebeb; background: #ffffff; }
.gk-brand { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--ds-ink-2); }
.gk-board { font-size: 14px; font-weight: 600; color: var(--ds-ink); }
.gk-who { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--ds-ink-3); font-size: 12.5px; }
.gk-tabs { display: flex; gap: 4px; height: 42px; padding: 0 24px; border-bottom: 1px solid #ebebeb; background: #ffffff; }
.gk-tab { height: 42px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ds-ink-3); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.gk-tab.is-on { border-bottom-color: var(--ds-ink); color: var(--ds-ink); }
.gk-main { padding: 14px 24px 44px; }
.gk-page .fin-wrap { display: flex; flex-direction: column; gap: var(--ds-gap, 14px); }
.gk-gate { max-width: 560px; margin: 48px auto; }
.gk-gate-body { display: flex; flex-direction: column; gap: 12px; padding: 18px; font-size: 13px; line-height: 1.5; }
.gk-gate-body p { margin: 0; }
.gk-quiet { color: var(--ds-ink-3); }
.gk-row { display: flex; gap: 8px; }
.gk-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; border-bottom: 1px solid var(--ds-line-soft); color: var(--ds-ink-2); }
.gk-code input { width: 140px; height: 32px; border: 0; border-bottom: 1px solid var(--ds-line); font: inherit; font-size: 18px; letter-spacing: .2em; text-align: right; outline: 0; }
.gk-code input:focus { border-bottom-color: #2563eb; }
.gk-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 10px 14px; border-radius: 8px; background: #1a1a1a; color: #ffffff; font-size: 12.5px; z-index: 50; }
.gk-body .item-more-wrap { position: relative; }
.gk-body .item-more-pop { position: absolute; right: 0; top: 100%; z-index: 20; }
.gk-tabs[hidden], .gk-head [hidden] { display: none !important; }
.bz-reader .mo-btn { margin-left: auto; }

/* Accounts › Connections (finance.js accountsConnections): admins only. */
.mo-mail.ac-row.ac-conn-row { grid-template-columns: 24px 150px minmax(0, 1fr) auto auto; cursor: default; }
.mo-mail.ac-row.ac-conn-row:hover { background: #ffffff; }
.ac-conn-acts { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }

/* The tax check under a receipt's figures. */
.bz-taxcheck { display: flex; flex-direction: column; gap: 4px; padding: 10px 0 8px; border-top: 1px solid var(--ds-line-soft); font-size: 12.5px; }
.bz-taxcheck-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.bz-taxcheck-top b, .bz-taxcheck-top em { white-space: nowrap; }
.bz-taxcheck-top .ds-mark { order: 3; flex: none; margin-left: auto; max-width: none; }
.bz-taxcheck-top .ds-mark span { overflow: visible; text-overflow: clip; }
.bz-taxcheck-top b { color: var(--ds-ink); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bz-taxcheck-top em { color: var(--ds-ink-3); font-style: normal; font-variant-numeric: tabular-nums; }
.bz-taxcheck p { margin: 0; color: var(--ds-ink-2); line-height: 1.5; }
.bz-taxcheck-place { display: flex; align-items: center; gap: 10px; color: var(--ds-ink-3); font-size: 12.5px; }
.bz-taxcheck-place .fin-select { width: auto; min-width: 0; max-width: 100%; flex: 0 1 auto; }
.bz-taxcheck .bz-claim b { color: var(--ds-green-ink); }
.bz-claim-src a { color: var(--ds-ink-4); font-size: 12px; }
/* The photo keeps its own height; the category shows in full. */
.bz-receipt-pic { align-self: start; }
.finance-page.finance-page.finance-page .bz-receipt-facts .re-facts > label { grid-template-columns: minmax(0, 0.8fr) auto minmax(170px, 64%); }

/* A fact row whose value is a choice of words (Category, Bought in): its short
   label leaves the rest of the row to the choice, so the words are not cut. */
.finance-page.finance-page.finance-page :is(.bz-sheet, .bz-facts) .re-facts > label:has(> select),
.finance-page.finance-page.finance-page .bz-facts.re-facts > label:has(> select) { grid-template-columns: auto 0 minmax(0, 1fr); }

/* Receipts by email: the addresses under the drop area, the emails waiting
   for a business, where an emailed receipt came from, and the email itself. */
.bz-mailto { border-top: 1px solid var(--ds-line-soft); }
:is(.bz-page, .ex-page) .mo-mail.bz-mailto-row { grid-template-columns: 24px minmax(0, 1fr) auto; cursor: default; }
:is(.bz-page, .ex-page) .mo-mail.bz-mailto-row:first-child { border-top: 0; }
:is(.bz-page, .ex-page) .mo-mail.bz-mailto-row:hover { background: #ffffff; }
.bz-mailto-row .mo-mail-subject { flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 0; }
.bz-mailto-row .bz-address { max-width: 100%; color: var(--ds-ink-2); font-variant-numeric: tabular-nums; user-select: all; }
.bz-acts .item-more-wrap { display: inline-flex; align-items: center; }
.bz-mailto-row:is(:hover, :focus-within) .item-more { opacity: 1; }
.bz-page .mo-mail.bz-held-row { grid-template-columns: 24px minmax(0, 1fr) auto minmax(64px, auto) auto; cursor: default; }
.bz-page .mo-mail.bz-held-row:hover { background: #ffffff; }
.bz-held-row .mo-mail-tile { padding: 0; border: 0; cursor: pointer; }
.bz-held-row .bz-acts { align-items: center; }
.bz-held-row .bz-acts .fin-select { width: auto; max-width: 190px; }
.bz-source { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; color: var(--ds-ink-3); font-size: 12.5px; line-height: 1.45; }
.bz-source .mo-ic { flex: none; width: 13px; height: 13px; margin-top: 2px; }
.bz-source b { color: var(--ds-ink); font-weight: 600; }
.bz-receipt-pic.is-mail { flex-direction: column; align-items: stretch; background: #ffffff; border: 1px solid var(--ds-line-soft); cursor: default; }
.bz-receipt-pic.is-mail iframe { display: block; width: 100%; height: 380px; border: 0; background: #ffffff; }
.bz-receipt-pic.is-mail a { padding: 7px 10px; border-top: 1px solid var(--ds-line-soft); color: var(--ds-blue-ink); font-size: 12px; text-decoration: none; }
.bz-sheet-side .bz-source { margin-top: 10px; }

/* Alan's view: groups that open in place, then what is worth knowing. */
:is(.bz-page, .ex-page) .mo-mail.bz-group { grid-template-columns: 24px minmax(0, 1fr) auto minmax(72px, auto); }
:is(.bz-page, .ex-page) .mo-mail.bz-group.is-open { background: #f5f5f5; }
.bz-group .mo-mail-subject em { white-space: nowrap; }
.bz-group-items { display: flex; flex-direction: column; padding: 2px 0 6px 50px; border-top: 1px solid var(--ds-line-soft); background: #ffffff; }
.bz-group-item {
  display: grid; grid-template-columns: 86px minmax(0, 1fr) auto minmax(72px, auto); align-items: center; gap: 10px;
  min-height: 34px; padding: 0 12px 0 0; border: 0; border-bottom: 1px solid var(--ds-line-soft); background: none;
  color: inherit; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.bz-group-item:last-child { border-bottom: 0; }
.bz-group-item:hover b { text-decoration: underline; text-underline-offset: 2px; }
.bz-group-item span, .bz-group-item em { color: var(--ds-ink-3); font-style: normal; white-space: nowrap; }
.bz-group-item b { overflow: hidden; color: var(--ds-ink); font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.bz-group-item i { color: var(--ds-ink); font-style: normal; font-variant-numeric: tabular-nums; text-align: right; }
.bz-pattern { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--ds-line-soft); font-size: 12.5px; }
.bz-pattern .ds-mark { flex: none; margin-top: 1px; }
.bz-pattern p { flex: 1 1 auto; margin: 0; color: var(--ds-ink-2); line-height: 1.5; }
.bz-pattern b { color: var(--ds-ink); font-weight: 600; }
.bz-pattern .mo-btn { flex: none; }
.bz-alan .bz-warn { padding: 0 14px 12px; }

/* Every receipt: a ··· at the top right of a card, at the end of a row. */
.bz-page .mo-mail.bz-receipt-row { grid-template-columns: 24px minmax(0, 1fr) minmax(0, auto) minmax(72px, auto) 24px; }
:is(.bz-rcard, .bz-receipt-row):hover .item-more { opacity: 1; }
.bz-cards, .bz-files .mo-rows { overflow: visible; }

/* Where a receipt belongs: Alan's routing, and a purchase that may be personal. */
.bz-route { display: grid; grid-template-columns: 13px minmax(0, 1fr); align-items: start; gap: 6px 10px; margin: 0 0 10px; padding: 9px 0; border-top: 1px solid var(--ds-line-soft); border-bottom: 1px solid var(--ds-line-soft); font-size: 12.5px; }
.bz-route .mo-ic { width: 13px; height: 13px; margin-top: 2px; color: var(--ds-ink-3); }
.bz-route p { margin: 0; color: var(--ds-ink-2); line-height: 1.45; }
.bz-route .bz-acts { grid-column: 2; justify-content: flex-start; }
.bz-route b { color: var(--ds-ink); font-weight: 600; }
.bz-route + .bz-route { margin-top: -10px; border-top: 0; }
.bz-claim-why { display: block; color: var(--ds-ink-4); font-size: 11.5px; font-style: normal; }

/* At tax time: the form's lines. */
:is(.bz-page, .ex-page) .mo-mail.bz-taxline { grid-template-columns: 44px minmax(0, 1fr) 120px minmax(0, auto) minmax(84px, auto); cursor: default; }
:is(.bz-page, .ex-page) .mo-mail.bz-taxline:hover { background: #ffffff; }
.bz-line-no { width: 44px; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bz-taxline.is-capital .mo-mail-subject b { color: var(--ds-ink-2); }
.bz-taxform { width: auto; max-width: 320px; }
.bz-tax .mo-head .mo-btn, .bz-tax .mo-head .fin-select { flex: none; }
.bz-tax .bz-warn { padding: 8px 14px; border-top: 1px solid var(--ds-line-soft); }
.bz-tax-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bz-taxmap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; padding: 4px 14px 12px; border-top: 1px solid var(--ds-line-soft); }
.bz-taxmap-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 10px; min-height: 38px; border-bottom: 1px solid var(--ds-line-soft); font-size: 12.5px; color: var(--ds-ink-2); }
.bz-taxmap-row .fin-select { width: 100%; }

/* Profile: who the business is. The fact rows, tile and colour squares are the
   site's own: a 34px tile (radius 9) carries its initials in its colour, the
   colours are the main menu's 16px project squares, the fields are fact rows. */
.bz-profile-id { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--ds-line); }
.bz-profile-mark { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #ffffff; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.bz-profile-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bz-profile-name b { overflow: hidden; color: var(--ds-ink); font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.bz-profile-name em { overflow: hidden; color: var(--ds-ink-4); font-size: 12.5px; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.bz-profile-colours { flex: none; display: flex; align-items: center; gap: 8px; }
.bz-profile-colours button { width: 16px; height: 16px; padding: 0; border: 0; border-radius: 4px; cursor: pointer; }
.bz-profile-colours button.is-on { box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--ds-ink); }
.bz-profile-groups { padding-bottom: 14px; }
.bz-profile-more .mo-rows { padding: 0 14px; }
.bz-profile-more .mo-rows:empty { display: none; }
.bz-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 28px; }
.bz-seal .ds-mark { font-size: 12px; }
/* What a document was, under the expense's name; and in its sheet, how it
   repeats and what one payment is made of, on the receipt items' rows. */
.bz-what-line .bz-kind { flex: none; max-width: 55%; }
.bz-parts { display: flex; flex-direction: column; margin-top: 6px; }
.bz-parts span { display: grid; grid-template-columns: minmax(0, 1fr) 90px 100px; gap: 10px; align-items: center; min-height: 30px; border-bottom: 1px solid var(--ds-line-soft); font-size: 12.5px; }
.bz-parts b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.bz-parts em { color: var(--ds-ink-4); font-style: normal; }
.bz-parts i { font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.bz-parts .is-not b, .bz-parts .is-not i { color: var(--ds-ink-3); font-weight: 500; }

/* Across the page: the receipt on the left, what was read beside it two
   fields to a row, so the check is half as long. */
.bz-review .bz-receipt-body { grid-template-columns: minmax(0, 32%) minmax(0, 1fr); gap: 28px; padding: 14px; }
.bz-review .bz-receipt-pic, .bz-review .bz-receipt-pic img { max-height: 560px; }
.finance-page.finance-page.finance-page .bz-review .bz-receipt-facts .fin-input-grid.re-facts.bz-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.finance-page.finance-page.finance-page .bz-review .bz-receipt-facts .re-facts > label { grid-template-columns: minmax(0, 1fr) auto minmax(150px, 58%); }

/* A read-only value (the tax line, what is deductible) sits on the value
   side, wrapping rather than squeezing its label. */
.finance-page.finance-page.finance-page .bz-review .bz-receipt-facts .re-facts > label.is-read > output { grid-column: 2 / 4; min-width: 0; text-align: right; white-space: normal; line-height: 1.35; }
.finance-page.finance-page.finance-page .bz-review .bz-receipt-facts .re-facts > label > span:first-child { min-width: max-content; }
/* What to check sits at the foot of the fields, in the space under them,
   opened by a line above it. */
.bz-warn.is-foot { margin-top: auto; padding: 10px 0 0; border-top: 1px solid var(--ds-line-soft); border-bottom: 0; }

/* Your own receipts on Expenditure: the same check as a business's, under
   the ways in; the forwarding row closes the ways-in card. */
.ex-page .ex-review { display: block; }
.ex-page .ex-mailto { border-top: 1px solid var(--ds-line); }
.ex-page .ex-check .bz-sent { border-top: 1px solid var(--ds-line); }
/* A read-only fact keeps its whole label; the value takes the rest and wraps. */
.finance-page.finance-page.finance-page .ex-review .bz-receipt-facts .re-facts > label.bz-fact.is-read { grid-template-columns: max-content minmax(0, 1fr); column-gap: 16px; }
.finance-page.finance-page.finance-page .ex-review .bz-receipt-facts .re-facts > label.bz-fact.is-read > output { grid-column: 2; }

/* At tax time on Expenditure: the claims by line, the maybe-claims to
   confirm, and how each is worked out. */
.ex-page .mo-mail.ex-claim { grid-template-columns: 24px minmax(0, 1fr) 0 110px auto; cursor: default; }
.ex-page .mo-mail.ex-claim:hover { background: #ffffff; }
.ex-page .mo-mail.bz-taxline.is-how { grid-template-columns: 44px minmax(0, 1fr); }
.ex-page .bz-taxline.is-how .mo-mail-subject em { white-space: normal; line-height: 1.45; }
.ex-tax-how { border-top: 1px solid var(--ds-line-soft); }
.ex-tax-more { width: 100%; border: 0; background: transparent; color: var(--ds-blue-ink); font: inherit; text-align: left; cursor: pointer; }

/* The record on Expenditure: removed transactions to bring back, and the
   sealed history with its seal and download. */
.ex-page .mo-mail.ex-removed { grid-template-columns: 24px minmax(0, 1fr) 110px auto; cursor: default; }
.ex-page .mo-mail.ex-removed:hover { background: #ffffff; }
.ex-removed:is(:hover, :focus-within) .item-more { opacity: 1; }
.ex-removed .bz-acts { align-items: center; }
.ex-record-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ex-record-tools .bz-seal { margin-right: auto; }
.ex-event .mo-mail-subject em { overflow: hidden; text-overflow: ellipsis; }

/* A link drawn as a button is not underlined. */
a.mo-btn { text-decoration: none; }

/* Understanding your spending on Expenditure: the Receipts figure leads to
   the purchases without one; what you buy at a place; the receipt itself. */
.ex-page .mo-stat[data-ex-noreceipt] { cursor: pointer; }
.ex-page .mo-mail.ex-item { grid-template-columns: minmax(0, 1fr) auto 90px; cursor: default; }
.ex-page .mo-mail.ex-item:hover { background: #ffffff; }
.ex-place-items { border-top: 1px solid var(--ds-line); }
.ex-filter-band { display: flex; align-items: center; gap: 8px; }
.ex-filter-band .mo-btn { margin-left: auto; }
.ex-receipt-items { align-items: start; }
.ex-receipt-items .bz-items { width: 100%; }
.bz-group-item:disabled { cursor: default; }
.bz-group-item:disabled:hover b { text-decoration: none; }

/* Split across categories, both sides. Rows are drawn as the sheet's gift
   card lines: flat cells divided by hairlines, a square category swatch. */
.bz-split-bar { margin: 4px 0 6px; }
.bz-split-total { margin-left: auto; color: var(--ds-ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.bz-split-row, .bz-split-line, .bz-warranty-row {
  display: grid; align-items: center; min-height: 40px; border-bottom: 1px solid var(--ds-line-soft);
}
.bz-split-row { grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1.2fr) 104px 28px; }
.bz-split-row.has-capital { grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1.2fr) 118px 104px 28px; }
.bz-split-line { grid-template-columns: 18px minmax(0, 1fr) 56px 100px minmax(140px, 0.6fr); min-height: 34px; font-size: 12.5px; }
.bz-warranty-row { grid-template-columns: minmax(0, 1.3fr) 128px 74px 128px minmax(0, 1fr) 128px 28px; }
.bz-split-swatch { width: 10px; height: 10px; border-radius: 2px; }
.bz-split-cat { overflow: hidden; padding: 0 8px 0 0; font-size: 13px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.bz-split-note { padding: 0 8px; border-left: 1px solid var(--ds-line-soft); color: var(--ds-ink-4); font-size: 12.5px; line-height: 30px; }
.bz-split-amount { padding: 0 8px; border-left: 1px solid var(--ds-line-soft); font-size: 13px; font-weight: 600; line-height: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.bz-split-amount.is-over { color: var(--ds-red-ink); }
.bz-split-row.is-main .bz-split-note + span:empty { height: 30px; border-left: 1px solid var(--ds-line-soft); }
.bz-split-line b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.bz-split-line em, .bz-split-line i { padding: 0 8px; color: var(--ds-ink-3); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.bz-split-over { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--ds-ink-2); font-size: 12.5px; }
.finance-page.finance-page .bz-sheet :is(.bz-split-row, .bz-split-line, .bz-warranty-row) :is(input, select),
.bz-sheet :is(.bz-split-row, .bz-split-line, .bz-warranty-row) :is(input, select) {
  width: 100%; height: 30px; min-height: 30px; margin: 0; padding: 0 8px; border: 0; border-left: 1px solid var(--ds-line-soft);
  border-radius: 0; background-color: transparent; box-shadow: none; color: var(--ds-ink); font: inherit; font-size: 13px;
}
.bz-sheet .bz-split-row > select:first-of-type, .bz-sheet .bz-warranty-row > input:first-child { border-left: 0; padding-left: 0; }
.bz-sheet :is(.bz-split-row, .bz-split-line, .bz-warranty-row) :is(input, select):focus { outline: 0; box-shadow: inset 0 -2px 0 var(--f-focus, #2563eb); }
.bz-sheet :is(.bz-split-row, .bz-warranty-row) .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.bz-warranty-row .ds-date { height: 30px; padding: 0 8px; border-left: 1px solid var(--ds-line-soft); font-size: 13px; line-height: 30px; }
.bz-kept-return { --n: 4; }
/* Your own: the same sheet, for one transaction. */
.modal-overlay .modal.bz-sheet.ex-purchase-sheet { width: min(900px, calc(100vw - 48px)); }
.ex-purchase-body { max-height: min(70vh, 720px); overflow: auto; }
.ex-purchase-body > :first-child > .bz-sheet-sec:first-child, .ex-purchase-body > :first-child > .bz-sheet-sec:first-child h4 { margin-top: 0; }
/* Under a transaction's category: its other categories, opening the split. */
button.ex-split-line { width: 100%; margin: 0; padding: 0 0 0 9px; border: 0; background: none; text-align: left; cursor: pointer; }
button.ex-split-line:hover { color: var(--ds-ink-2); text-decoration: underline; text-underline-offset: 2px; }
.bz-cat-cell button.ex-split-line { padding-left: 8px; }

/* Budgets, both sides: a row per budget (its bar with today marked, where
   it stands, what it came to, and the last six periods as squares). */
.mo-mail.bz-budget-row { grid-template-columns: 18px minmax(0, 1.2fr) minmax(110px, 1fr) auto 104px 70px 28px; column-gap: 12px; }
.mo-mail.bz-budget-row[role="button"] { cursor: pointer; }
.mo-mail.bz-budget-row.is-idea { grid-template-columns: 18px minmax(0, 1fr) auto; }
.bz-budget-row:is(:hover, :focus-within) .item-more { opacity: 1; }
.bz-budget-swatch { width: 10px; height: 10px; border-radius: 2px; }
.bz-budget-bar { position: relative; height: 6px; border-radius: 2px; background: var(--viz-track, #ececec); }
.bz-budget-bar i { display: block; height: 100%; border-radius: 2px; }
.bz-budget-bar s { position: absolute; top: -4px; bottom: -4px; width: 1.5px; margin-left: -0.75px; background: var(--ds-ink-3); text-decoration: none; }
:is(.bz-budget-bar i, .bz-budget-squares i, .bz-budget-legend i).is-green { background: #6aa84f; color: #6aa84f; }
:is(.bz-budget-bar i, .bz-budget-squares i, .bz-budget-legend i).is-orange { background: #e69138; color: #e69138; }
:is(.bz-budget-bar i, .bz-budget-squares i, .bz-budget-legend i).is-red { background: #cc0000; color: #cc0000; }
.bz-budget-value { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.bz-budget-value b { font-size: 13px; font-weight: 600; }
.bz-budget-value em { color: var(--ds-ink-4); font-size: 11px; font-style: normal; }
.bz-budget-squares { display: inline-flex; gap: 3px; justify-content: flex-end; }
.bz-budget-squares i, .bz-budget-legend i { width: 8px; height: 8px; border-radius: 2px; }
.bz-budget-squares i.is-none { background: var(--viz-track, #ececec); }
.bz-budget-squares i.is-now, .bz-budget-legend i.is-now { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.bz-budget-legend i.is-now { color: var(--ds-ink-3); }
.bz-budget-legend { flex-wrap: wrap; row-gap: 4px; margin: 0; padding: 10px 14px 12px; }
.bz-budget-legend s { width: 1.5px; height: 10px; background: var(--ds-ink-3); text-decoration: none; }
/* The form: categories as square marks, filled when counted. */
.bz-budget-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; }
.bz-budget-cat {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 34px; padding: 0 4px 0 0;
  border: 0; border-bottom: 1px solid var(--ds-line-soft); border-radius: 0; background: none; color: var(--ds-ink-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.bz-budget-cat i { width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--c); }
.bz-budget-cat.is-on i { background: var(--c); }
.bz-budget-cat.is-on span { color: var(--ds-ink); font-weight: 500; }
.bz-budget-cat span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bz-budget-cat em { color: var(--ds-ink-4); font-size: 12px; font-style: normal; font-variant-numeric: tabular-nums; }
.bz-budget-cat:hover { color: var(--ds-ink); }
.bz-budget-cat:focus-visible { outline: 0; box-shadow: inset 0 -2px 0 var(--f-focus, #2563eb); }
.finance-page.finance-page.finance-page .bz-budget-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; padding: 0; }
.finance-page.finance-page.finance-page .bz-budget-facts > label.is-wide { grid-column: 1 / -1; }
.bz-budget-facts .bz-pct { color: var(--ds-ink-4); font-size: 12px; white-space: nowrap; }
.bz-budget-facts label.is-missing input { box-shadow: inset 0 -2px 0 var(--ds-red-ink, #cc0000); }
.bz-budget-chart { min-height: 150px; padding-top: 4px; }
.bz-budget-chart .bz-stack-bar { position: relative; overflow: visible; }
.bz-budget-chart .bz-stack-bar i { background: #b7b7b7; border-radius: 2px 2px 0 0; }
.bz-budget-chart .bz-stack-bar i.is-now { background: #8a8a8a; }
.bz-budget-chart .bz-stack-bar i.is-over { background: #cc0000; }
.bz-budget-chart .bz-stack-bar s { position: absolute; left: -5px; right: -5px; height: 0; border-top: 1.5px solid var(--ds-ink-2); text-decoration: none; }

/* Who paid and who it was for: the split rows' anatomy, with a share and an amount that follow each other. */
.bz-split-row.bz-people-row { grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1fr) 76px 104px 28px; }
.bz-people-row .bz-people-pct { font-weight: 500; color: var(--ds-ink-3); }
.bz-people-adds { display: flex; align-items: center; gap: 12px; }
.bz-people-adds .bz-line-add { flex: 1 1 auto; }
.bz-people-adds .mo-btn { flex: none; }
.ex-owed .bz-initials { font-size: 11px; font-weight: 600; }
.bz-sheet .bz-people-row > input:first-of-type { border-left: 0; padding-left: 0; }