/* The lists under Sales and Purchases, their drafts, and a bill being
   written, on the language set out in home.css. Loaded after it.

   The page keeps its paper ground. What frames a list (its title, the dates,
   the views, the search) is one indigo panel in white type, made as the
   rail's own leaves (New, Search) are. Beside the rail it is joined to it: a
   band across the head of the page, so the rail and the band read as one
   frame. On a phone or a tablet, with no rail, it is a card at the head of
   the screen. The work itself is on a white sheet: the list, or the bill.

   A list: no summary card over it. What it comes to is the sheet's first
   line; the months divide it as a register is read. Rows are told apart by
   space and by what is pointed at, not by lines. How a bill stands is a bare
   icon and a few words: green is settled, amber is waiting, red is late. Red
   as a figure is said once, in the sheet's first line.

   A bill being written: one sheet, laid out as the bill is (who and when,
   what, what it comes to). What is done with it (how it is paid, sending it)
   sits beside it on the one indigo panel of that screen.

   Type: the six sizes, and no others. Space in steps of four. Corners 16 for
   a sheet, 8 for a control or a row, 4 for a mark. */

:root { --tally-on-indigo: #7fd4d0; }

/* ---------- a list: its frame ---------- */
.bills3 { display: grid; align-content: start; gap: 16px; max-width: 1360px; margin: 0 auto; font-size: var(--t-body); }
.b-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.b-mast { display: grid; gap: 12px; min-width: 0; padding: 16px; border-radius: var(--r-lg); background: var(--indigo); color: var(--on-indigo); }
.b-mast > * { min-width: 0; }
.b-mast :focus-visible { outline-color: #fff; }
.b-mast .page-head { align-items: center; gap: 8px 16px; min-height: 40px; margin-block: 0; }
.b-mast .page-head .lead { flex: 1 1 auto; }
.b-mast .page-title { gap: 8px; margin: 0; font-size: var(--t-fig); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; color: #fff; }
.b-mast .page-title .scope { color: var(--tally-on-indigo); }
.b-mast .page-sub { display: block; max-width: 72ch; margin-top: 4px; font-size: var(--t-body); line-height: 1.45; color: var(--on-indigo-dim); text-wrap: pretty; }
/* (said twice over, to outrank the rule that gives a phone's page actions a row of their own) */
.bills3 .b-mast .page-head .actions.actions { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 0; overflow: visible; }
.b-mast .h-period { flex: none; height: 40px; }
/* what is made here: the one solid thing on the panel */
.b-make { flex: none; height: 40px; gap: 8px; padding: 0 16px; border-radius: var(--r-ctl); font-size: var(--t-body); font-weight: 600; background: #fff; color: var(--ink); box-shadow: none; transition: transform 200ms var(--spring), background-color 150ms; }
.b-make:hover { background: #ecebfa; }
.b-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.b-views { display: flex; gap: 4px; min-width: 0; margin: -2px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.b-views::-webkit-scrollbar { display: none; }
.b-views button { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 32px; min-width: 44px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer; font: inherit; font-weight: 500; color: var(--on-indigo-dim); transition: background-color 150ms, color 150ms; }
.b-views button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.b-views [aria-pressed="true"], .b-views [aria-pressed="true"]:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.b-views small { font-size: var(--t-small); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--on-indigo-dim); }
.b-search { position: relative; flex: 1 1 160px; max-width: 320px; }
.b-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--on-indigo-dim); pointer-events: none; }
.b-search input { display: block; width: 100%; height: 36px; padding: 0 12px 0 36px; border: 0; border-radius: var(--r-ctl); font: inherit; color: #fff; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); transition: box-shadow 150ms, background-color 150ms; -webkit-appearance: none; appearance: none; }
.b-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.b-search input::placeholder { color: rgba(255, 255, 255, 0.62); }
.b-search input:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32); }
.b-search input:focus { outline: none; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 2px #fff; }
.bills3 .pill { height: 40px; gap: 8px; padding: 0 16px; border-radius: var(--r-ctl); font-size: var(--t-body); font-weight: 500; }
.bills3 .pill.small { height: 32px; padding: 0 12px; }
.bills3 .pill.round { width: 40px; padding: 0; }
.bills3 .tag { height: 20px; padding: 0 8px; border-radius: 4px; font-size: var(--t-small); }

/* what else can be done from the band: quiet beside the one solid thing */
.b-ghost { flex: none; height: 40px; gap: 8px; padding: 0 16px; border-radius: var(--r-ctl); font-size: var(--t-body); font-weight: 500; background: rgba(255, 255, 255, 0.1); color: #fff; box-shadow: none; transition: background-color 150ms; }
.b-ghost:hover { background: rgba(255, 255, 255, 0.18); }
.b-ghost.round { width: 40px; padding: 0; }
/* dates that hold nothing, said above a list: a bare icon, as everywhere */
.bills3 .empty-period { margin: 0; border-radius: var(--r-lg); }
.bills3 .empty-period .ico { width: auto; height: auto; background: none; color: var(--muted); }

/* ---------- what is not in the list yet ---------- */
.b-wait { padding: 12px 24px; }
.b-wait .h-rows { margin: 0 -12px; }
.b-wait .h-row.tone-ok > svg:first-child { color: var(--ok); }

/* ---------- the sheet, and the list on it ---------- */
.b-card { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
/* what the list comes to: the sheet's first line */
/* (its figures stand apart from one another: each is a thing of its own) */
.b-sum { display: flex; flex-wrap: wrap; gap: 4px 32px; padding: 24px 24px 12px; font-size: var(--t-head); line-height: 1.45; color: var(--muted); }
.b-sum b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.b-sum b.late { color: var(--bad); }
.b-rows { padding: 0 12px 12px; }
.b-table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.b-table thead th { padding: 8px 12px; border-bottom: 1px solid var(--hair); background: var(--surface); text-align: left; font-size: var(--t-small); font-weight: 500; line-height: 1.4; color: var(--muted); white-space: nowrap; }
.b-table td { padding: 12px; line-height: 20px; white-space: nowrap; vertical-align: middle; transition: background-color 150ms; }
.b-table .num { text-align: right; }
.b-table tr:is([data-go], [data-open]) { cursor: pointer; }
.b-table td:first-child { border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
.b-table td:last-child { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.b-table tr:is([data-go], [data-open]):hover td, .b-table tr:is([data-go], [data-open]):focus-within td { background-color: rgba(22, 23, 26, 0.04); }
.b-table tr:is([data-go], [data-open]):focus-visible { outline: none; }
.b-table tr:is([data-go], [data-open]):focus-visible td { background-color: rgba(22, 23, 26, 0.04); box-shadow: inset 0 2px 0 var(--ink), inset 0 -2px 0 var(--ink); }
.b-table tr:is([data-go], [data-open]):focus-visible td:first-child { box-shadow: inset 2px 2px 0 var(--ink), inset 0 -2px 0 var(--ink); }
.b-table tr:is([data-go], [data-open]):focus-visible td:last-child { box-shadow: inset 0 2px 0 var(--ink), inset -2px -2px 0 var(--ink); }
.b-table tr:is([data-go], [data-open]):focus-visible td:only-child { box-shadow: inset 0 0 0 2px var(--ink); }
/* a month, or how late: what divides the rows */
.b-div th { padding: 24px 12px 8px; text-align: left; font-weight: 400; }
.b-table tbody tr.b-div:first-child th { padding-top: 12px; }
.b-div th > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.b-div span { font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.b-div small { font-size: var(--t-small); color: var(--muted); }
.b-table .c-no a { position: relative; font-weight: 500; border-radius: 4px; }
.b-table .c-no a:hover, .b-table .c-party a:hover { text-decoration: underline; text-underline-offset: 3px; }
.b-table .c-no .tag { margin-left: 8px; vertical-align: 1px; }
.b-table .c-no .m-date { display: none; }
.b-table .c-due, .b-table .c-unpaid { white-space: nowrap; }
.b-table .c-date, .b-table .c-extra { color: var(--muted); }
/* the name takes the room there is; a long one ends in an ellipsis and is said in full when pointed at */
.b-table td.c-party { width: 99%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.b-table .c-amt { font-weight: 500; }
.b-table .quiet { font-weight: 400; color: var(--muted); }
.b-table tr.off .c-no a, .b-table tr.off .c-amt { color: var(--muted); text-decoration: line-through; }
.b-how { display: inline-flex; align-items: center; gap: 8px; }
.b-how svg { flex: none; }
.b-how .n { display: none; }
.b-how.ok { color: var(--muted); }
.b-how.ok svg { color: var(--ok); }
.b-how.due svg { color: var(--muted); }
.b-how.due.soon svg { color: var(--wait); }
.b-how.late { font-weight: 500; }
.b-how.late svg { color: var(--bad); }
/* (in the view of nothing but overdue bills the view has said it: the rows are not each an alarm) */
.all-late .b-how.late { font-weight: 400; }
.all-late .b-how.late svg { color: var(--muted); }
/* money still owed, recorded from the row: there when the row is pointed at or the keyboard is on it */
.b-table .c-how { padding-top: 4px; padding-bottom: 4px; }
.b-table .c-how > div { display: flex; align-items: center; gap: 16px; min-width: 216px; min-height: 36px; }
.b-act { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-ctl); font-size: var(--t-small); font-weight: 500; background: var(--surface); box-shadow: inset 0 0 0 1px rgba(22, 23, 26, 0.16); opacity: 0; transition: opacity 150ms, box-shadow 150ms; }
.b-act:hover { box-shadow: inset 0 0 0 1px rgba(22, 23, 26, 0.34); }
.b-table tr:hover .b-act, .b-table tr:focus-visible .b-act, .b-act:focus-visible { opacity: 1; }
.b-more { display: grid; place-items: center; padding: 4px 24px 24px; }

/* nothing to list: said once, in the middle of the sheet */
.b-none { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 320px; padding: 32px 24px; text-align: center; }
.b-none > svg { margin-bottom: 8px; color: var(--ok); }
.b-none b { font-size: var(--t-head); font-weight: 600; letter-spacing: -0.01em; }
.b-none p { max-width: 46ch; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.b-none .actions { justify-content: center; margin-top: 12px; }

/* a heading that puts the list in its order: pressed again, it turns the order round */
.b-table th button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; border-radius: 4px; background: none; cursor: pointer; font: inherit; color: inherit; }
.b-table th button:hover, .b-table th[aria-sort] button { color: var(--ink); }
.b-table th[aria-sort] button::after { content: ""; border: 4px solid transparent; }
.b-table th[aria-sort="descending"] button::after { border-top-color: var(--ink); transform: translateY(2px); }
.b-table th[aria-sort="ascending"] button::after { border-bottom-color: var(--ink); transform: translateY(-2px); }
.b-table td small { display: block; font-size: var(--t-small); font-weight: 400; line-height: 1.4; color: var(--muted); }

/* ---------- customers and suppliers: who, what was billed, what is owed ---------- */
.b-parties .c-party a, .b-dues .c-no b, .b-months .c-no b { font-weight: 500; }
.b-parties .c-party small { overflow: hidden; text-overflow: ellipsis; }
.b-parties td.c-party { width: 99%; }

/* ---------- one party: the band says who and what is owed; the account is the sheet ---------- */
.p-bal { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.p-bal span { line-height: 1.45; color: var(--on-indigo-dim); }
.p-bal b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-title); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.035em; line-height: 1.1; white-space: nowrap; }
.p-bal small { font-size: var(--t-body); line-height: 1.45; color: var(--on-indigo-dim); }
.p-bal small.late { font-weight: 500; color: #ffa497; }
.party3 .split { gap: 16px; }
.party3 .split > .stack { gap: 16px; }
.party3 .card { padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; }
.party3 .card-head { margin-bottom: 12px; }
.party3 .card h2 { font-size: var(--t-head); font-weight: 600; letter-spacing: -0.01em; }
.party3 .card .sub, .party3 .chase-note small, .party3 .bl-meta, .party3 .scope { font-size: var(--t-small); }
.party3 .kv, .party3 .chase-note b, .party3 .bl-name, .party3 .bl-val, .party3 .empty { font-size: var(--t-body); }
.party3 .kv { gap: 8px 16px; }
.party3 .kv .quiet { color: var(--muted); }
.party3 .kv dd { font-variant-numeric: tabular-nums; }
/* the account's three views, on the sheet itself */
.b-views.on-paper { margin: 0; padding: 16px 12px 8px; }
.b-views.on-paper button { color: var(--muted); }
.b-views.on-paper button:hover { background: rgba(22, 23, 26, 0.04); color: var(--ink); }
.b-views.on-paper [aria-pressed="true"], .b-views.on-paper [aria-pressed="true"]:hover { background: rgba(22, 23, 26, 0.08); color: var(--ink); }
.b-views.on-paper small { color: var(--muted); }
.b-views.on-paper + #partyTab > .b-sum { padding-top: 8px; }
.p-chart { padding: 8px 24px 16px; }
.b-dues .c-date, .b-months .c-extra { color: var(--muted); }
.b-dues td.c-no, .b-ledger td.c-no, .b-months td.c-no { width: 40%; }
@media (min-width: 1000px) {
  /* (the way back sits on the band: the band reaches up to the head of the page behind it, 22 of the page and 42 of the link) */
  #page:has(> .stage > .b-back) > .back { position: relative; z-index: 2; border-radius: var(--r-ctl); color: var(--on-indigo-dim); }
  #page:has(> .stage > .b-back) > .back:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  #page:has(> .stage > .b-back) > .back:focus-visible { outline-color: #fff; }
  #page:has(> .stage > .b-back) > .back { margin-left: max(-4px, calc((100% - 1360px) / 2 - 4px)); font-size: var(--t-body); }
  .b-back > .b-mast { margin-top: -62px; padding-top: 54px; }
  .party3 > .split { width: 100%; max-width: 1360px; margin-inline: auto; }
  .p-bal b { font-size: var(--t-lead); }
}

/* ---------- segments: those saved, and those to start from, as rows on one sheet ---------- */
.s-list { padding: 24px; }
.s-list h2 { font-size: var(--t-head); font-weight: 600; letter-spacing: -0.01em; }
.s-list h2:not(:first-child) { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--hair); }
.s-none { margin-top: 4px; line-height: 1.45; color: var(--muted); }
.s-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 16px; margin: 8px -12px -12px; }

/* one segment: its name is typed on the band; its conditions head the sheet, then who matches */
.b-mast .kicker { font-size: var(--t-small); font-weight: 500; color: var(--on-indigo-dim); }
.b-mast .kicker::before { display: none; }
.b-mast input.page-title { color: #fff; border-radius: 4px; }
.b-mast input.page-title::placeholder { color: rgba(255, 255, 255, 0.76); }
.b-mast input.page-title:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.s-build { padding: 24px 24px 8px; }
.seg3 .seg { gap: 4px; padding: 4px; border-radius: var(--r-ctl); }
.seg3 .seg button { height: 32px; padding: 0 12px; border-radius: 4px; font-size: var(--t-body); }
.seg3 .cond { gap: 8px; }
.seg3 .field, .seg3 .field.sm { height: 40px; border-radius: var(--r-ctl); font-size: var(--t-body); }
.seg3 .icon-x { width: 40px; height: 40px; border-radius: var(--r-ctl); }
.seg3 .hint, .seg3 .form-error { font-size: var(--t-small); }
.seg3 .form-error:empty { display: none; }
.s-build + .b-sum { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--hair); }
.b-members td:not(:first-child), .b-members th:not(:first-child) { text-align: right; }
.b-members td:first-child { width: 99%; font-weight: 500; }
.s-more { padding: 0 24px 24px; font-size: var(--t-small); }

/* ---------- drafts: who it is for and what is on it, then finish it or drop it ---------- */
.b-drafts td.c-party { width: 99%; }
.b-drafts .c-party a { font-weight: 500; }
.b-drafts .c-party small { display: block; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-small); color: var(--muted); }
.b-drafts .c-do { padding-top: 4px; padding-bottom: 4px; }
.b-drafts .c-do > div { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* (wide enough for the question it turns into, so asking it moves nothing) */
.b-drop { min-width: 104px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: none; cursor: pointer; font: inherit; font-size: var(--t-small); font-weight: 500; text-align: center; color: var(--muted); transition: background-color 150ms, color 150ms; }
.b-drop:hover { background: rgba(22, 23, 26, 0.06); color: var(--ink); }
.b-drop[data-sure] { background: var(--bad-bg); color: var(--bad); }

/* ---------- beside the rail: the panel is a band joined to it ---------- */
@media (min-width: 1000px) {
  .bills3 { gap: 24px; max-width: none; }
  /* (out to the edges of the page, whose padding is 22 above and 32 at the sides) */
  .b-mast { position: relative; gap: 16px; margin: -22px -32px 0; padding: 24px 32px; border-radius: 0; background: var(--indigo); }
  /* (the corner the rail and the band make is rounded, as a leaf's are: the paper sits inside one frame) */
  .b-mast::after { content: ""; position: absolute; left: 0; top: 100%; width: var(--r-lg); height: var(--r-lg); background: radial-gradient(circle at 100% 100%, transparent calc(var(--r-lg) - 0.5px), var(--indigo) var(--r-lg)); pointer-events: none; }
  .b-mast > *, .b-main { width: 100%; max-width: 1360px; margin-inline: auto; }
  .b-mast .page-title { font-size: var(--t-title); }
  .b-table thead th { position: sticky; top: 0; z-index: 1; }
}
/* (room for the longest standing and the action beside it, so the column stands still from view to view) */
@media (min-width: 1280px) and (hover: hover) { .b-table .c-how > div { min-width: 376px; } }
/* (under 1280 the action would be paid for out of the customer's name: it is left to the bill's own page) */
@media (max-width: 1279px), (hover: none) {
  .b-act { display: none; }
  .b-table .c-how > div { min-width: 0; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .b-drafts .c-date { display: none; }
}

/* ---------- on a phone: who, how much, how it stands ---------- */
@media (max-width: 699px) {
  .bills3 { gap: 12px; margin: 0 2px; }
  .b-main { gap: 12px; }
  .b-mast .h-period { height: 36px; }
  /* (the words say it; without the picture the dates sit beside the title) */
  .b-mast .h-period svg:first-child { display: none; }
  .b-mast .h-period::after { content: ""; position: absolute; inset: -4px 0; }
  .b-tools { gap: 12px; }
  .b-search { order: -1; flex: 1 1 100%; max-width: none; }
  /* (16, or an iPhone zooms the page when the box is tapped) */
  .b-search input { height: 44px; font-size: 16px; }
  .b-views { margin: -4px -16px; padding: 4px 16px; }
  .b-views button { height: 36px; background: rgba(255, 255, 255, 0.1); }
  .b-views button::after { content: ""; position: absolute; inset: -4px 0; }
  .b-views [aria-pressed="true"], .b-views [aria-pressed="true"]:hover { background: #fff; color: var(--ink); }
  .b-views [aria-pressed="true"] small { color: var(--muted); }
  .b-wait { padding: 4px 16px; }
  .b-wait .h-rows { margin: 0 -8px; }
  .b-wait .h-row { padding: 12px 8px; }
  .b-sum { padding: 16px 12px 4px; font-size: var(--t-body); }
  .b-sum { gap: 4px 24px; }
  .b-sum .w { display: none; }
  .b-rows { padding: 0 4px 4px; }
  .b-table, .b-table tbody { display: block; }
  .b-table thead { display: none; }
  .b-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "party amt" "no how"; align-items: center; gap: 4px 12px; min-height: 44px; padding: 12px 8px; border-radius: var(--r-ctl); transition: background-color 150ms; }
  .b-table tbody tr:is([data-go], [data-open]):active { background: rgba(22, 23, 26, 0.04); }
  .b-table tbody tr:is([data-go], [data-open]):focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .b-table tr:is([data-go], [data-open]):focus-visible td, .b-table tr:is([data-go], [data-open]):focus-visible td:first-child, .b-table tr:is([data-go], [data-open]):focus-visible td:last-child { box-shadow: none; }
  .b-table td, .b-table td:first-child, .b-table td:last-child { width: auto; max-width: none; padding: 0; border: 0; border-radius: 0; background: none !important; }
  .b-table tbody tr.b-div { display: block; min-height: 0; padding: 16px 8px 0; }
  .b-table tbody tr.b-div:first-child { padding-top: 8px; }
  .b-div th, .b-table tbody tr.b-div:first-child th { display: block; padding: 0; }
  .b-table td.c-party { grid-area: party; width: auto; max-width: none; font-weight: 500; }
  .b-table .c-amt { grid-area: amt; font-weight: 600; }
  .b-table .c-no { grid-area: no; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-small); color: var(--muted); }
  .b-table .c-no a { font-weight: 400; }
  .b-table .c-no .m-date { display: inline; }
  .b-table .c-how, .b-table .c-into { grid-area: how; justify-self: end; font-size: var(--t-small); }
  .b-how { gap: 4px; }
  .b-how .w { display: none; }
  .b-how .n { display: inline; }
  .b-table .c-date, .b-table .c-extra:not(.c-into) { display: none; }
  .b-table td.c-how { padding: 0; }
  .b-table .c-how > div { min-height: 0; }
  .b-none { min-height: 240px; padding: 32px 16px; }
  /* a party: the name, one line about it; what is owed at the right */
  .b-parties tbody tr { grid-template-areas: "party unpaid" "party due"; }
  .b-parties td.c-party { display: block; white-space: normal; }
  .b-parties .c-party a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .b-parties .c-party small { display: none; }
  .b-parties .c-party small.m-sub { display: block; }
  .b-parties .c-amt { display: none; }
  .b-parties .c-unpaid { grid-area: unpaid; justify-self: end; font-weight: 600; }
  .b-parties .c-due { grid-area: due; justify-self: end; font-size: var(--t-small); color: var(--muted); }
  .b-parties .c-due small { display: none; }
  /* (44 to the finger on what these screens pin, head and foot) */
  .bills3 .dock .pill { height: 48px; }
  .b-mast .b-make, .b-mast .b-ghost { height: 44px; }
  .b-mast .b-ghost.round { width: 44px; }
  .seg3 .seg button, .seg3 .pill.small, .party3 .pill.small, .party3 .pill.round { position: relative; }
  .seg3 .seg button::after, .seg3 .pill.small::after, .party3 .pill.small::after { content: ""; position: absolute; inset: -6px 0; }
  .party3 .pill.round::after { content: ""; position: absolute; inset: -2px; }
  .party3 .acct-top .page-title { font-size: var(--t-fig); }
  .party3 .acct-top .page-sub, .party3 .acct-bal span, .party3 .acct-bal small, .party3 .acct-acts a, .party3 .acct-acts button { font-size: var(--t-small); }
  .party3 .acct-bal b { font-size: var(--t-title); }
  /* (a condition's first box has the row to itself, so its words are read whole) */
  .seg3 .cond > :first-child { grid-column: 1 / -1; }
  .b-mast input.page-title { min-height: 44px; }
  /* a party's account: the bill and what is unpaid on it; an entry and its amount */
  .party3 .card { padding: 16px; }
  .s-list { padding: 16px; }
  .s-rows { margin: 8px -8px -8px; }
  .s-rows .h-row { padding: 12px 8px; }
  .p-bal b { font-size: var(--t-title); }
  .b-views.on-paper { padding: 12px 8px 4px; }
  .b-dues tbody tr { grid-template-areas: "no unpaid" "date due"; }
  .b-ledger tbody tr { grid-template-areas: "no amt" "date how"; }
  .b-dues .c-no, .b-ledger .c-no { font-size: var(--t-body); color: var(--ink); }
  .b-dues .c-no a, .b-dues .c-no b, .b-ledger .c-no a { font-weight: 500; }
  .b-dues td.c-no, .b-ledger td.c-no { width: auto; }
  .b-dues .c-date, .b-ledger .c-date { display: block; grid-area: date; font-size: var(--t-small); }
  .b-dues .c-unpaid { grid-area: unpaid; justify-self: end; font-weight: 600; }
  .b-dues .c-due { grid-area: due; justify-self: end; font-size: var(--t-small); color: var(--muted); }
  .b-dues .c-due small { display: inline; margin-left: 4px; }
  .b-dues .c-amt { display: none; }
  /* (the months stay a table: it is read down its columns) */
  .b-table:is(.b-months, .b-keep) { display: table; font-size: var(--t-small); }
  .b-table:is(.b-months, .b-keep) thead { display: table-header-group; }
  .b-table:is(.b-months, .b-keep) tbody { display: table-row-group; }
  .b-table:is(.b-months, .b-keep) tbody tr { display: table-row; min-height: 0; padding: 0; }
  .b-table:is(.b-months, .b-keep) th, .b-table:is(.b-months, .b-keep) td, .b-table:is(.b-months, .b-keep) td:first-child, .b-table:is(.b-months, .b-keep) td:last-child { display: table-cell; width: auto; padding: 8px 4px; }
  .b-table:is(.b-months, .b-keep) .c-extra, .b-table.b-keep .wide { display: none; }
  .b-table.b-keep { font-size: var(--t-body); }
  .b-table.b-keep td:first-child { white-space: normal; }
  .s-build { padding: 16px 12px 4px; }
  .s-more { padding: 0 12px 16px; }
  .seg3 .field, .seg3 .field.sm { height: 44px; font-size: 16px; }
  .seg3 .icon-x { width: 44px; height: 44px; }
  .p-chart { padding: 8px 12px 12px; }
  /* a draft: who and how much, what is on it, then the two things to do with it */
  .b-drafts tbody tr { grid-template-areas: "party amt" "do do"; gap: 8px 12px; padding: 12px 8px; }
  .b-drafts td.c-party { white-space: normal; }
  .b-drafts .c-party a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .b-drafts .c-party small { white-space: normal; }
  .b-drafts .c-amt { align-self: start; }
  .b-drafts .c-do { grid-area: do; }
  /* (36 to the eye, 44 to the finger) */
  .b-drafts .c-do .pill, .b-drafts .c-do .b-drop { position: relative; height: 36px; }
  .b-drafts .c-do .pill::after, .b-drafts .c-do .b-drop::after { content: ""; position: absolute; inset: -4px 0; }
  .b-drafts .c-do .pill { padding: 0 16px; }
}

/* ---------- a bill being written: the sheet, and what is done with it ---------- */
.bill3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 1360px; margin: 0 auto; font-size: var(--t-body); }
.bill3 .page-title .scope { font-size: var(--t-small); }
.bill3 > .banner { margin: 0; }
.bill3 > .page-head { align-items: center; gap: 12px 24px; margin: 0 0 8px; }
.bill3 .page-title { font-size: var(--t-fig); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.bill3 .page-sub { margin-top: 4px; font-size: var(--t-body); line-height: 1.45; }
.bill3 .seg { gap: 4px; padding: 4px; border-radius: var(--r-ctl); }
.bill3 .seg button { height: 32px; padding: 0 12px; border-radius: 4px; font-size: var(--t-body); }
.bill3 .editor { gap: 16px; }
.b-paper { gap: 0 !important; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.b-paper .card { min-width: 0; padding: 24px; border: 0; border-radius: 0; background: none; box-shadow: none; }
/* (one sheet: a hairline where the subject changes, from who to what to what it comes to) */
.b-paper > * + .card, .b-top > .card + .card { border-top: 1px solid var(--hair); }
.b-top { display: grid; min-width: 0; }
.b-top:empty { display: none; }
.bill3 .card-head { margin-bottom: 12px; }
.bill3 .card h2 { font-size: var(--t-head); font-weight: 600; letter-spacing: -0.01em; }
.bill3 .card .sub { font-size: var(--t-small); }
.bill3 .fld { gap: 4px; }
.bill3 .fld > span, .bill3 .line-nums label, .bill3 .hint, .bill3 .note, .bill3 .setting small, .bill3 .choice button small, .bill3 details.more-options summary small { font-size: var(--t-small); }
.bill3 .line-nums label { gap: 4px; color: var(--muted); }
.bill3 .field, .bill3 .field.sm { height: 40px; padding: 0 12px; border-radius: var(--r-ctl); font-size: var(--t-body); }
.bill3 select.field, .bill3 select.field.sm { padding-right: 32px; }
/* (a line's own lists carry no arrow, and need the room for their words) */
.bill3 .bill-line select.field, .bill3 .bill-line select.field.sm { padding-right: 12px; }
.bill3 .pill { border-radius: var(--r-ctl); font-size: var(--t-body); }
.bill3 .pill.small { height: 32px; padding: 0 12px; }
.bill3 .chips { gap: 8px; }
.bill3 .chip { height: 32px; padding: 0 12px; border-radius: var(--r-ctl); font-size: var(--t-body); }
.bill3 .choice { gap: 8px; }
.bill3 .choice button { padding: 12px; border-radius: var(--r-ctl); }
.bill3 .choice button b, .bill3 .setting b, .bill3 details.more-options summary { font-size: var(--t-body); }
.bill3 .choice button small { margin-top: 4px; }
.bill3 .note { padding: 8px 12px; border-radius: var(--r-ctl); }
/* what is on the bill: a line each, with the names of the columns said once */
.bill3 .bill-lines { gap: 8px; }
.bill3 .bill-line { gap: 8px; padding: 0; border: 0; }
.bill3 .line-nums { gap: 8px; }
.bill3 .line-foot { min-height: 20px; }
.bill3 .line-amt { font-family: inherit; font-size: var(--t-body); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.bill3 .linkish { font-size: var(--t-small); }
/* what it comes to: at the foot of the sheet, as on the printed bill */
.b-tax { display: grid; align-content: start; gap: 12px; min-width: 0; margin-top: 16px; }
.bill3 #billTotals .line { padding: 8px 0; border: 0; font-size: var(--t-body); }
.bill3 .line > span:last-child { font-family: inherit; font-size: var(--t-body); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.bill3 #billTotals .line.total { align-items: baseline; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--hair); font-weight: 600; }
.bill3 #billTotals .line.total > span:last-child { font-size: var(--t-fig); font-weight: 600; letter-spacing: -0.025em; }
.bill3 details.more-options { margin-top: 16px; padding-top: 4px; }
.bill3 details.more-options > div { gap: 12px; }
.bill3 .send-sum b { font-size: var(--t-fig); font-weight: 600; letter-spacing: -0.025em; }
.bill3 .send-sum span { font-size: var(--t-small); }
.b-desk .card { padding: 24px; border-radius: var(--r-lg); }
.bill3 .pay-card .choice { margin-bottom: 12px; }
@media (min-width: 700px) {
  .b-top:has(> .card + .card) { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); }
  .b-top > .card + .card { border-top: 0; border-left: 1px solid var(--hair); }
  /* (an item under an item: the columns were named on the line above) */
  /* (the numbers are the row before a line's foot, its second child from the end) */
  .bill3 .bill-line:has(> .pick):has(> .line-nums:nth-last-child(2) > label:nth-child(3)) + .bill-line:has(> .pick) > .line-nums:nth-last-child(2):has(> label:nth-child(3)) label { gap: 0; font-size: 0; }
  /* (and the first column has its name as the others do) */
  .bill3 .bill-line:first-child > .pick::before { content: "Item"; display: block; margin-bottom: 4px; font-size: var(--t-small); line-height: 1.4; color: var(--muted); }
  .bill3 .line-nums label { line-height: 1.4; }
  .b-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); column-gap: 32px; align-items: start; }
  .b-foot > .card-head { grid-column: 1 / -1; }
  .b-foot > .b-sums { grid-column: 2; grid-row: 2 / span 2; }
  .b-foot > .b-tax { grid-column: 1; grid-row: 2; margin-top: 0; }
  .b-foot > details.more-options { grid-column: 1; grid-row: 3; }
}
@media (min-width: 1000px) {
  .bill3 .editor { grid-template-columns: minmax(0, 1fr) 376px; }
  .bill3 .page-title { font-size: var(--t-title); }
  /* what is done with the bill: the one indigo panel, in white type, and in reach however long the bill grows */
  /* (never taller than the window: the sending is always in reach) */
  .b-desk { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-y: auto; scrollbar-width: thin; }
  .b-desk.on { gap: 0; border-radius: var(--r-lg); background: var(--indigo); scrollbar-color: rgba(255, 255, 255, 0.3) transparent; }
  .b-desk.on .card { border: 0; border-radius: 0; background: none; box-shadow: none; color: #fff; }
  .b-desk.on .card + .card { border-top: 1px solid var(--on-indigo-line); }
  .b-desk.on :focus-visible { outline-color: #fff; }
  .b-desk.on .card h2 { color: #fff; }
  .b-desk.on .fld > span, .b-desk.on .hint, .b-desk.on .send-sum span { color: var(--on-indigo-dim); }
  .b-desk.on .hint.warn { color: #f6d77d; }
  .b-desk.on .form-error { color: #ffa497; }
  .b-desk.on .choice button { background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #fff; transition: background-color 150ms, box-shadow 150ms; }
  .b-desk.on .choice button:hover { background: rgba(255, 255, 255, 0.12); }
  .b-desk.on .choice button small { color: var(--on-indigo-dim); }
  /* (what is chosen is ringed in white, not filled: the one solid thing on the panel is the sending) */
  .b-desk.on .choice button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 2px #fff; }
  .b-desk.on .choice button[aria-pressed="true"] b::after { border-color: #fff; }
  .b-desk.on .chip { background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); color: #fff; }
  .b-desk.on .chip:hover { background: rgba(255, 255, 255, 0.16); }
  .b-desk.on .chip[aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 2px #fff; color: #fff; }
  .b-desk.on .field { box-shadow: none; }
  .b-desk.on .field:focus { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px #fff; }
  .b-desk.on .send-sum b { color: #fff; }
  .b-desk.on #sendBtn { background: #fff; color: var(--ink); font-weight: 600; }
  .b-desk.on #sendBtn:hover { background: #ecebfa; }
  .b-desk.on #draftBtn { background: rgba(255, 255, 255, 0.1); box-shadow: none; color: #fff; }
  .b-desk.on #draftBtn:hover { background: rgba(255, 255, 255, 0.18); }
}
@media (max-width: 699px) {
  .bill3 { gap: 12px; margin: 0 2px; }
  .bill3 > .page-head { margin: 0; }
  .b-paper .card, .b-desk .card { padding: 16px; }
  /* (16, or an iPhone zooms the page when a box is tapped) */
  .bill3 .field, .bill3 .field.sm { height: 44px; font-size: 16px; }
  .bill3 .chip { height: 36px; }
  .bill3 .seg { max-width: 100%; }
  .bill3 .seg button { padding: 0 8px; }
  /* (44 to the finger, whatever the eye sees) */
  .bill3 .seg button, .bill3 .chip, .bill3 .pill.small, .bill3 .switch { position: relative; }
  .bill3 .chip::after { content: ""; position: absolute; inset: -4px 0; }
  .bill3 .seg button::after, .bill3 .pill.small::after { content: ""; position: absolute; inset: -6px 0; }
  .bill3 .switch::before { content: ""; position: absolute; inset: -8px 0; }
  .bill3 .line-foot .linkish { position: relative; }
  .bill3 .line-foot .linkish::after { content: ""; position: absolute; inset: -12px -8px; }
}

/* ---------- arriving, another view, other dates: all of it over within a second ---------- */
@keyframes b-swap { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: no-preference) {
  .b-in > .b-mast > *, .b-in > .b-main > * { animation: h-rise 480ms var(--spring) both; }
  .b-in > .b-main > :nth-child(1) { animation-delay: 40ms; }
  .b-in > .b-main > :nth-child(n + 2) { animation-delay: 80ms; }
  .b-in .b-none.clear circle, .b-in .b-none.clear path { stroke-dasharray: 140; stroke-dashoffset: 140; animation: h-draw 420ms var(--spring) 280ms forwards; }
  .b-in .b-none.clear path { animation-duration: 280ms; animation-delay: 620ms; }
  .b-swap { animation: b-swap 200ms ease-out both; }
  /* other dates were chosen: the list waits where it is while its rows are on the way */
  .b-busy #indexBody { animation: h-wait 1s ease-in-out 200ms infinite; }
}

/* ---------- while a list loads: its own outline, block for block ---------- */
.skb { display: grid; align-content: start; gap: 16px; }
.skb i { display: block; border-radius: var(--r-ctl); background: rgba(255, 255, 255, 0.14); }
.skb .m { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--indigo) 22%, transparent); }
.skb .t { width: 160px; height: 40px; }
.skb .o { height: 36px; }
.skb.d .m { gap: 4px; }
.skb.d .t { height: 32px; }
.skb.d .o { width: min(100%, 520px); height: 20px; }
.skb .c { height: 640px; border-radius: var(--r-lg); background: rgba(22, 23, 26, 0.07); }
.skb.d .c { height: 320px; }
.skb.p .m { min-height: 240px; align-content: start; }
.skb.p .c { height: 640px; }
@media (min-width: 1000px) {
  .skb { gap: 24px; }
  .skb .m { gap: 16px; margin: -22px -32px 0; padding: 24px 32px; border-radius: 0; background: color-mix(in srgb, var(--indigo) 30%, transparent); }
  .skb .m > *, .skb .c { max-width: 1360px; margin-inline: auto; }
  .skb .m > .o, .skb .c { width: 100%; }
  .skb .m > .t { margin-left: max(0px, calc((100% - 1360px) / 2)); }
  .skb.d .m > .o { margin-left: max(0px, calc((100% - 1360px) / 2)); }
  .skb.p .m { min-height: 243px; padding-top: 56px; }
  .skb.g .m { min-height: 125px; }
  .skb.s .m { min-height: 155px; padding-top: 56px; }
}
/* (with no rail: a screen opened from a list has the way back above it, and a party's head is a white card) */
@media (max-width: 999px) {
  .skb.p, .skb.s { padding-top: 38px; }
  .skb.s .m { min-height: 155px; }
  .skb.p .m { min-height: 278px; background: rgba(22, 23, 26, 0.07); }
}
@media (max-width: 699px) {
  .skb { gap: 12px; margin: 0 2px; }
  .skb .o { height: 92px; }
  .skb.d .t { height: 25px; }
  .skb.d .o { height: 41px; }
}
@media (prefers-reduced-motion: no-preference) {
  .skb i { animation: h-wait 1.4s ease-in-out infinite; }
  .skb .c { animation-delay: 120ms; }
}