/* All invoices (#invoices/all, 14 Nov 2026), in TODAY'S HQ LOOK: board.css's tokens, sections, rows, buttons, toast and skeletons, and
   money.css's page head. Every rule here is under .bd and prefixed ia- (the other stylesheets are untouched). Sizes: board.css's six
   per width; weights 400 and 500. Colour only for a state that needs him: overdue (and a draft whose email isn't made) in coral; the
   rest says its state in plain words. */
.bd .ia-back{margin:-6px 0 -8px}
/* the way in from the Invoices tab's first screen, under its three figures (the card's own link is the tab's .iv-all) */
.bd .ia-top{display:inline-flex;align-items:center;gap:4px;width:max-content;max-width:100%;justify-self:start;align-self:flex-start;min-height:44px;margin:-8px 0 6px;font-size:var(--t-body);font-weight:500;color:var(--accent)}
.bd .ia-top .mn-chev{color:var(--accent)}
.bd .ia-page .mn-head{margin-bottom:8px}

/* the three figures: on a phone three short lines (the list is what he came for), from 760 px a strip of three big numbers */
.bd .ia-figs{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--sep);border-bottom:1px solid var(--sep);margin:0 0 8px;min-width:0}
.bd .ia-fig{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k v" "s v";align-items:center;gap:1px 12px;padding:7px 0;min-width:0}
.bd .ia-fig + .ia-fig{border-top:1px solid var(--sep)}
.bd .ia-fk{grid-area:k;font-size:var(--t-sub);color:var(--label)}
.bd .ia-fv{grid-area:v;font-family:var(--serif);font-size:var(--t-sec);line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.bd .ia-fs{grid-area:s;font-size:var(--t-meta);line-height:1.4;color:var(--label-2);overflow-wrap:anywhere}
.bd .ia-fs.t-red{color:var(--late)}
.bd .ia-fig .sk{grid-area:v;height:22px;width:96px}
@media (min-width:760px){
  .bd .ia-figs{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px}
  .bd .ia-fig{display:block;padding:18px 24px;border-left:1px solid var(--sep)}
  .bd .ia-fig + .ia-fig{border-top:0}
  .bd .ia-fig:first-child{padding-left:0;border-left:0}
  .bd .ia-fig:last-child{padding-right:0}
  .bd .ia-fk{font-size:var(--t-meta);color:var(--label-3)}
  .bd .ia-fv{margin-top:6px;font-size:var(--t-title);white-space:normal;overflow-wrap:anywhere}
  .bd .ia-fs{margin-top:8px}
  .bd .ia-fig .sk{height:28px;width:60%;margin-top:6px}
}
@media (min-width:1200px){ .bd .ia-fv{font-size:var(--t-hero)} .bd .ia-fig{padding-block:20px} }   /* the biggest size only where six figures and cents fit a third of the page */

/* the filter: one tap, each with its count; the one that is on is filled (and says so to a screen reader: aria-pressed) */
.bd .ia-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 12px;min-width:0}
.bd .ia-filter{display:flex;flex-wrap:wrap;gap:2px 4px;min-width:0}
.bd .ia-pill{display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 11px;border-radius:99px;font-size:var(--t-sub);font-weight:500;color:var(--label-2);white-space:nowrap;transition:background-color .15s ease-out,color .15s ease-out}
.bd .ia-pill:hover{color:var(--label)}
.bd .ia-pill.on{background:var(--raise);color:var(--label)}
.bd .ia-n{font-weight:400;color:var(--label-3);font-variant-numeric:tabular-nums}
.bd .ia-pill.on .ia-n{color:var(--label-2)}

/* search, Group by, Sort, Download as CSV */
.bd .ia-tools{flex:1 1 420px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;min-width:0}
.bd .ia-search{flex:1 1 220px;display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border-radius:99px;border:1px solid var(--line-2);color:var(--label-3);min-width:0}
.bd .ia-search:focus-within{border-color:var(--line-4)}
.bd .ia-search:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.bd .ia-ico{width:17px;height:17px;flex:none}
.bd .ia-search input{flex:1;min-width:0;height:44px;border:0;background:none;font-size:var(--t-body);color:var(--label);-webkit-appearance:none;appearance:none}
.bd .ia-search input::placeholder{color:var(--label-3)}
.bd .ia-search input:focus-visible{outline:none}
.bd .ia-pick{position:relative;flex:1 1 150px;display:block;min-height:48px;min-width:0;border:1px solid var(--line-2);border-radius:14px}
.bd .ia-pick:has(select:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.bd .ia-pk{position:absolute;top:6px;left:14px;font-size:var(--t-meta);line-height:1.2;color:var(--label-3);pointer-events:none}
.bd .ia-sel{display:block;width:100%;height:48px;min-width:0;padding:19px 34px 4px 14px;border:0;border-radius:14px;background-color:transparent;color:var(--label);font:inherit;font-size:var(--t-body);cursor:pointer;
  -webkit-appearance:none;appearance:none;text-overflow:ellipsis;
  background-image:linear-gradient(45deg,transparent 50%,var(--label-3) 50%),linear-gradient(135deg,var(--label-3) 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.bd .ia-sel:focus-visible{outline:none}
.bd .ia-sel option{background:var(--surface-2);color:var(--label)}
.bd .ia-csv{min-height:44px}
.bd .ia-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 0;font-size:var(--t-sub);color:var(--label-2)}
@media (max-width:479px){ .bd .ia-pill{padding:0 9px;gap:4px} .bd .ia-filter{gap:2px} }
@media (min-width:1024px){ .bd .ia-pick{flex:0 1 200px} .bd .ia-csv{min-height:40px} .bd .ia-bar{gap:10px 16px;margin-bottom:16px} .bd .ia-sec .sec-h{padding-top:18px;padding-bottom:10px} .bd .ia-back{margin:0 0 -4px} }

/* the list's card */
.bd .ia-sec{padding-bottom:6px}
.bd .ia-sec .sec-h{padding-top:14px;padding-bottom:8px}
.bd .ia-empty{display:grid;gap:12px;justify-items:start;padding:4px var(--pad) 18px;color:var(--label-2);font-size:var(--t-body);max-width:60ch}
.bd .ia-none{color:var(--label-3)}
.bd .ia-st{color:var(--label-2);overflow-wrap:anywhere}
.bd .ia-st.ia-late{color:var(--late)}
.bd .ia-st.ia-quiet{color:var(--label-3)}

/* a group's heading: its name, how many, the total and what is still owed; a press folds it */
.bd .ia-gh3{margin:0;font:inherit;border-top:1px solid var(--sep)}
.bd .ia-gh{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n c" "s c";align-items:center;gap:2px 12px;width:100%;min-height:56px;padding:10px var(--pad);text-align:left}
.bd .ia-gn{grid-area:n;font-size:var(--t-body);font-weight:500;color:var(--label);overflow-wrap:anywhere}
.bd .ia-gs{grid-area:s;font-size:var(--t-sub);line-height:1.4;color:var(--label-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.bd .ia-chev{grid-area:c;width:18px;height:18px;flex:none;color:var(--label-3);transition:transform .18s ease-out}
.bd .ia-gh[aria-expanded="true"] .ia-chev{transform:rotate(180deg)}
@media (hover:hover){.bd .ia-gh:hover{background:var(--surface-2)}}
.bd .ia-mr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:2px var(--pad) 4px;border-top:1px solid var(--sep)}
.bd .ia-more{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);font-size:var(--t-sub);font-weight:500}
.bd .ia-more:hover{text-decoration:underline;text-underline-offset:3px}
.bd .ia-left{font-size:var(--t-sub);color:var(--label-3)}

/* a phone: two-line rows. Who and what it's for runs to the amount; its number and days share the second line with its state */
.bd .ia-ul{list-style:none;margin:0;padding:0}
.bd .ia-ul li + li{border-top:1px solid var(--sep)}
.bd .ia-gh3 + .ia-ul{border-top:1px solid var(--sep)}
.bd .ia-row{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:3px;width:100%;min-height:60px;padding:10px var(--pad);text-align:left;color:var(--label)}
.bd .ia-l1,.bd .ia-l2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0}
.bd .ia-l1 .row-title{flex:1 1 auto;min-width:0}
.bd .ia-l1 .mn-val{flex:none}
/* (review) when the facts and the state don't fit one line together ("INV-0031 · 29 Oct, due 12 Nov" beside "Overdue 12 days"), the state
   goes whole to a line of its own under the amount; never the two broken mid-phrase side by side */
.bd .ia-l2{flex-wrap:wrap;gap:1px 12px}
.bd .ia-l2 .row-sub{flex:1 1 auto;min-width:0;font-variant-numeric:tabular-nums}
.bd .ia-l2 .ia-st{flex:0 1 auto;max-width:100%;margin-left:auto;text-align:right;font-size:var(--t-sub);line-height:1.4}
@media (hover:hover){.bd .ia-row:hover{background:var(--surface-2)}}

/* a laptop: one table; its column headers sort (the arrow and aria-sort say which way) */
.bd .ia-table{width:100%;border-collapse:collapse;font-size:var(--t-body)}
.bd .ia-table th,.bd .ia-table td{padding:12px 10px;text-align:left;vertical-align:baseline;font-weight:400;line-height:1.38}
.bd .ia-table tr > :first-child{padding-left:var(--pad)}
.bd .ia-table tr > :last-child{padding-right:var(--pad)}
.bd .ia-table thead th{padding-top:0;padding-bottom:2px;font-size:var(--t-meta);color:var(--label-3);white-space:nowrap;vertical-align:middle}
.bd .ia-sort{display:inline-flex;align-items:center;gap:4px;min-height:36px;min-width:36px;color:var(--label-3);font-size:var(--t-meta)}
.bd .ia-sort:hover,.bd .ia-sort.on{color:var(--label)}
.bd .ia-arrow{width:14px;height:14px;flex:none}
.bd .ia-table .ia-camt{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.bd .ia-table thead .ia-camt .ia-sort{flex-direction:row-reverse}
.bd .ia-r{cursor:pointer}
.bd .ia-r > *{border-top:1px solid var(--sep)}
@media (hover:hover){.bd .ia-r:hover{background:var(--surface-2)}}
.bd .ia-cnum{white-space:nowrap;font-variant-numeric:tabular-nums}
.bd .ia-open{display:inline-flex;align-items:center;min-height:32px;margin:-6px 0;color:var(--label);font-variant-numeric:tabular-nums}
@media (hover:hover){.bd .ia-r:hover .ia-open{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-4)}}
.bd .ia-cclient{overflow-wrap:anywhere;max-width:280px}
.bd .ia-cwhat{color:var(--label-2);overflow-wrap:anywhere}
.bd .ia-cday{white-space:nowrap;color:var(--label-2);font-variant-numeric:tabular-nums}
.bd .ia-table .ia-st{white-space:nowrap}
.bd .ia-table .ia-ghr > th{padding:0;border-top:1px solid var(--sep)}
.bd .ia-table .ia-mr{display:table-row}
.bd .ia-table .ia-mr > td{padding:2px var(--pad) 4px;border-top:1px solid var(--sep)}
.bd .ia-table .ia-more{margin-right:14px}
@media (min-width:1024px){
  .bd .ia-gh{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"n s c";gap:0 16px;min-height:52px;padding-top:16px}
}
@media (pointer:coarse){ .bd .ia-sort{min-height:44px} .bd .ia-open{min-height:44px;margin:-12px 0} }
@media (prefers-reduced-motion:reduce){ .bd .ia-pill,.bd .ia-chev{transition:none} }