/* v4 refresh — finance screens. Tokens only (tokens/*.css): no bare hex, weights 400/500.
   Summary (p26), Invoices (p27), Procurement (p28), Bank (p29);
   docs/ui-refresh/02-relationships-finance-markup.md §0, §8–§11.

   One vocabulary for the four screens: a page head (title + inline subtitle,
   buttons right), a ruled four-figure strip, a filter row (segmented control
   left, a note or search right), then a grid register. Registers are .reg-row
   grids so the phone re-lay in styles.css (§13) applies; their phone cells are
   NAMED (.ph-ref/.ph-name/.ph-sub/.ph-state), and the .fn4-ph cells exist only
   for the phone (hidden here, shown by the generic .reg-row > .ph-* rules). */

.fn4 { padding-bottom: 40px; }
.fn4-loading { padding: 48px 0; color: var(--ink-3); font-size: var(--text-meta-r); }

/* ── Page head ───────────────────────────────────────────────────────────── */
.fn4-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--hair); }
.fn4-head.no-rule { border-bottom: 0; padding-bottom: 14px; }
.fn4-head .page-h { min-width: 0; }
.fn4-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fn4-lock { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill);
  background: var(--ok-tint); color: var(--status-ok-ui); font-size: var(--text-label); font-weight: var(--weight-medium);
  align-self: center; white-space: nowrap; }
.fn4-lock svg { width: 12px; height: 12px; display: block; }
.fn4-lock.ending { background: var(--late-tint); color: var(--late); }

/* ── Figures strip: four equal columns, hairline above and below, no dividers */
.fn4-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; padding: 18px 0 18px;
  border-bottom: 1px solid var(--hair); }
.fn4-figs.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fn4-figs .fig-value { font-size: var(--figure-sm); margin-top: 8px; white-space: nowrap; }
.fn4-figs .fig-note { margin-top: 8px; }
.fn4-figs .fig-note.late { color: var(--late); font-weight: var(--weight-medium); }
@media (max-width: 1100px) { .fn4-figs, .fn4-figs.n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Filter row ──────────────────────────────────────────────────────────── */
.fn4-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 20px 0 18px; }
.fn4-bar-l { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.fn4-note { font-size: var(--text-meta-r); color: var(--ink-2); }
.fn4-search { position: relative; display: inline-flex; align-items: center; width: 280px; max-width: 100%; }
.fn4-search svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--ink-3); pointer-events: none; }
.fn4-search input { width: 100%; min-height: 36px; padding: 0 12px 0 36px; border: 1px solid var(--hair); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink); font-family: inherit; font-size: var(--text-body); }
.fn4-search input::placeholder { color: var(--ink-3); }
.fn4-search input:focus { border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.seg button .n { margin-left: 5px; }

/* ── Register ────────────────────────────────────────────────────────────── */
.fn4-reg { min-width: 0; }
.fn4-thead, .fn4-row { display: grid; gap: 0 14px; align-items: center; }
.fn4-thead { padding-bottom: 10px; border-bottom: 1px solid var(--rule-head); font-size: var(--text-table-head);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--ink-3); }
.fn4-row { min-height: 48px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: var(--text-body); color: var(--ink); }
.fn4-row.click { cursor: pointer; }
.fn4-row.click:hover { background: var(--row-hover); }
.fn4-row > * { min-width: 0; }
.fn4-r { text-align: right; justify-self: end; }
.fn4-ph { display: none; }
.fn4-num { font-family: var(--font-technical); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fn4-tech { font-family: var(--font-technical); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fn4-name { font-size: var(--text-row); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn4-sec { font-size: var(--text-meta-r); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn4-mute { font-size: var(--text-meta-r); color: var(--ink-3); }
.fn4-amt { font-size: var(--text-row); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fn4-amt.void { color: var(--ink-3); font-weight: var(--weight-regular); text-decoration: line-through; }
.fn4-amt.in { color: var(--status-ok-ui); }
.fn4-ok { color: var(--status-ok-ui); }
.fn4-late { color: var(--late); font-weight: var(--weight-medium); }
.fn4-empty { padding: 24px 0; font-size: var(--text-meta-r); color: var(--ink-3); }
.fn4-foot { margin: 16px 0 0; font-size: var(--text-label); color: var(--ink-3); line-height: 1.5; }
.fn4-group { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 40px; padding: 14px 0 8px;
  border-bottom: 1px solid var(--hair); }
.fn4-group-l { font-size: var(--text-row); font-weight: var(--weight-medium); color: var(--ink); }
.fn4-group-r { font-size: var(--text-meta-r); color: var(--ink-2); }
.fn4-group-r b { font-weight: var(--weight-medium); color: var(--ink); }

/* Status chips: 6px radius, the pill palette (ui.js PILL_CLASS tones). */
.fn4 .pill { border-radius: var(--radius-6); }
.pill.fn4-outline { background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair); }

/* Row actions: ~30px, the verb on the right. */
.fn4-next { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.fn4-next .btn { white-space: nowrap; min-height: 30px; padding: 0 12px; font-size: var(--text-meta-r); border-radius: var(--radius-6); }
.fn4-next .btn[data-armed] { box-shadow: 0 0 0 3px var(--halo); }
.fn4-dots { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: var(--radius-6);
  background: none; color: var(--ink-3); cursor: pointer; font-size: var(--text-row); line-height: 1; justify-self: end; }
.fn4-row:hover .fn4-dots, .fn4-dots:focus-visible { color: var(--link); }
.fn4-dots:hover { background: var(--segment-track); }

/* Underline tabs with attention badges (Procurement). */
.fn4-tabs { margin-top: 20px; }
.fn4-tabs .tab { white-space: nowrap; }
.fn4-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: var(--radius-sm); background: var(--late-tint); color: var(--late); font-size: var(--text-label); font-weight: var(--weight-medium); }

/* ── Invoices (p27): NO · CLIENT · JOB · DESCRIPTION · DATE · DUE/PAID · AMOUNT · STATUS · ··· */
.fn4-inv { grid-template-columns: 56px minmax(0, 2.1fr) 52px minmax(0, 2.8fr) 56px minmax(0, 1.1fr) 78px 92px 28px; }
.fn4-inv.no-desc { grid-template-columns: 56px minmax(0, 2.6fr) 52px 64px minmax(0, 1.4fr) 88px 96px 28px; }
.fn4-inv .fn4-due { font-size: var(--text-meta-r); color: var(--ink-2); line-height: 1.35; }

/* ── Procurement (p28): REF · SUPPLIER · FOR · JOB · GROSS · RAISED BY · STATUS · NEXT */
.fn4-po { grid-template-columns: 108px minmax(0, 2fr) minmax(0, 2.1fr) 48px 74px 72px 96px minmax(180px, 1.4fr); }
.fn4-po .fn4-num { overflow: hidden; text-overflow: ellipsis; }
.fn4-po .fn4-next, .fn4-ex .fn4-next { flex-wrap: nowrap; }
.fn4-po .fn4-next .fn4-mute { text-align: right; }
/* Expense claims: DATE · WHO · CATEGORY · WHAT FOR · SUPPLIER · GROSS · NEXT */
.fn4-ex { grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 1.1fr) minmax(0, 2.4fr) minmax(0, 1.3fr) 84px minmax(180px, 1.3fr); }
.fn4-period { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-meta-r); color: var(--ink-2); }
.fn4-period .btn.icon { width: 30px; min-height: 30px; }
.fn4-period-label { min-width: 150px; text-align: center; }
.fn4-flag { font-size: var(--text-label); color: var(--late); white-space: nowrap; }

/* ── Bank (p29): DATE · WHO · REFERENCE · AMOUNT · ALLOCATED TO */
.fn4-bk { grid-template-columns: 52px minmax(0, 2.4fr) minmax(0, 2.6fr) 104px minmax(0, 3.1fr); }
.fn4-alloc { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--text-meta-r); color: var(--ink); }
.fn4-alloc .fn4-alloc-t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn4-alloc.done { color: var(--ink-2); }
.fn4-alloc .btn { white-space: nowrap; flex: none; min-height: 30px; padding: 0 12px; font-size: var(--text-meta-r); border-radius: var(--radius-6); }
.fn4-alloc .btn[data-armed] { box-shadow: 0 0 0 3px var(--halo); }
.fn4-unalloc { flex: none; width: 22px; height: 22px; border: 0; border-radius: var(--radius-6); background: none; color: var(--ink-3);
  cursor: pointer; opacity: 0; font-size: var(--text-body); line-height: 1; }
.fn4-row:hover .fn4-unalloc, .fn4-unalloc:focus-visible, .fn4-unalloc[data-armed] { opacity: 1; }
.fn4-unalloc[data-armed] { width: auto; padding: 0 8px; color: var(--late); background: var(--late-tint); font-size: var(--text-label); }
/* The category reads as text ("Overhead · phone"); it is a select underneath. */
.fn4-cat { appearance: none; -webkit-appearance: none; max-width: 100%; min-height: 28px; padding: 0 4px; margin-left: -4px; border: 1px solid transparent;
  border-radius: var(--radius-6); background: none; color: var(--ink); font-family: inherit; font-size: var(--text-meta-r); cursor: pointer;
  text-overflow: ellipsis; }
.fn4-cat:hover, .fn4-cat:focus-visible { border-color: var(--hair); }
.fn4-cat.fn4-guess { color: var(--ink-3); }
.fn4-cat.none { color: var(--ink-3); border-style: dashed; border-color: var(--hair-strong); padding: 0 8px; margin-left: 0; }
.fn4-locked { margin-top: 24px; }

/* ── Summary (p26) ───────────────────────────────────────────────────────── */
.fn4-two { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 35fr); gap: 36px; margin-top: 24px; align-items: start; }
@media (max-width: 1100px) { .fn4-two { grid-template-columns: 1fr; } }
.fn4-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px;
  border-bottom: 1px solid var(--hair); }
.fn4-sec-h h2 { margin: 0; font-size: var(--text-section); font-weight: var(--weight-medium); letter-spacing: -0.01em; color: var(--ink); }
.fn4-sec-h .fn4-unit { margin-left: 8px; font-size: var(--text-meta-r); color: var(--ink-3); font-weight: var(--weight-regular); }
.fn4-legend { display: flex; align-items: center; gap: 16px; font-size: var(--text-label); color: var(--ink-2); }
.fn4-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fn4-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--anchor); }
.fn4-legend i.prev { border-top: 2px dashed var(--brand-ink-4); }
.fn4-chart { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.fn4-chart text { font-family: var(--font-sans); }
.fn4-chart .ax { font-size: 10px; fill: var(--ink-3); }
.fn4-chart .end { font-size: 11px; font-weight: var(--weight-medium); fill: var(--ink); }
.fn4-chart .grid { stroke: var(--grey-pill); stroke-width: 1; }
.fn4-chart .cur { fill: none; stroke: var(--anchor); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fn4-chart .prev { fill: none; stroke: var(--brand-ink-4); stroke-width: 1.5; stroke-dasharray: 4 4; }
.fn4-chart .dot { fill: var(--anchor); }
/* The shield covers what the SVG text can't wrap: hidden money axis labels. */
body.figures-hidden .fn4-chart .money { visibility: hidden; }

.fn4-tbl { width: 100%; border-collapse: collapse; font-size: var(--text-meta-r); }
.fn4-tbl th { padding: 12px 0 10px; text-align: right; font-size: var(--text-table-head); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.fn4-tbl th:first-child, .fn4-tbl td:first-child { text-align: left; }
.fn4-tbl td { padding: 0; height: 42px; border-top: 1px solid var(--hair); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.fn4-tbl tr:last-child td { border-bottom: 1px solid var(--hair); }
.fn4-tbl .lbl { font-weight: var(--weight-medium); }
.fn4-tbl .mon { text-align: left; padding-left: 12px; color: var(--ink-3); }
.fn4-tbl .prev { color: var(--ink-2); }
.fn4-tbl .up { color: var(--status-ok-ui); }
.fn4-tbl .down { color: var(--late); }
.fn4-tbl .na { color: var(--ink-3); }
.fn4-month { margin-top: 28px; }
.fn4-month .fn4-tbl th { text-align: right; font-size: var(--text-meta-r); letter-spacing: 0; text-transform: none; font-weight: var(--weight-regular); color: var(--ink-3);
  border-bottom: 1px solid var(--rule-head); }
.fn4-month .fn4-tbl th:first-child { text-align: left; }
.fn4-month .fn4-tbl td { height: 36px; }
.fn4-month .fn4-tbl tr:first-child td { border-top: 0; }
.fn4-scroll { overflow-x: auto; }

/* ── iPad widths: the long text columns step out so the rest keeps its room ── */
@media (max-width: 1100px) {
  .fn4-wide { display: none; }
  .fn4-inv, .fn4-inv.no-desc { grid-template-columns: 52px minmax(0, 2fr) 48px 50px minmax(0, 1.3fr) 80px 84px 28px; }
}

/* ── Small screens ───────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .fn4-head { align-items: flex-start; }
  .fn4-search { width: 100%; }
  .fn4-bar-l .seg { max-width: 100%; overflow-x: auto; }
  .fn4-figs .fig-value { font-size: var(--text-figure); }
  /* Only the named phone cells show (desktop cells set their own display). */
  .fn4-row.reg-row > :not(.ph-ref):not(.ph-name):not(.ph-sub):not(.ph-state) { display: none; }
  .fn4-row.reg-row > .ph-sub.fn4-alloc { display: flex; white-space: normal; flex-wrap: wrap; padding-top: 4px; font-size: var(--text-meta-r); color: var(--ink); }
  .fn4-row.reg-row .ph-state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .fn4-row.reg-row .ph-state .fn4-next { justify-content: flex-end; }
  .fn4-two { gap: 24px; }
}

/* ── Invoicing (v4.17.0; FinRaiseInvoice / FinIssueInvoice, Karan 27/10/2026) ──
   New invoice: the form (cards) beside the live preview; one column ≤1100px.
   The preview is the document itself (.doc-page, contractor.css), capped by its
   own column (W3). */
.iv-crumbs { font-size: var(--text-meta-r); color: var(--ink-3); margin-bottom: 8px; }
.iv-crumbs a { color: var(--link); text-decoration: none; }
.iv-head .page-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.iv-pno { color: var(--brand-blue); }
.iv-sub { font-size: var(--text-meta-r); color: var(--ink-3); }
.iv-under { margin: 2px 0 16px; }
.iv-muted { color: var(--ink-3); font-size: var(--text-meta-r); }
.iv-bad { color: var(--late); font-size: var(--text-meta-r); }
.iv-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--hair); border-radius: var(--radius-md);
  background: var(--blue-tint); color: var(--ink); font-size: var(--text-body); margin-bottom: 18px; }
.iv-spark { color: var(--brand-blue); }
.iv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 24px; align-items: start; }
.iv-side { position: sticky; top: 16px; min-width: 0; }
.iv-preview .doc-page { margin-bottom: 12px; box-shadow: var(--shadow-float); }
.iv-prev-cap { display: flex; justify-content: space-between; gap: 12px; font-size: var(--text-meta-r); }
.iv-prev-note { margin-top: 6px; }
@media (max-width: 1100px) { .iv-grid { grid-template-columns: minmax(0, 1fr); } .iv-side { position: static; max-width: 560px; } }
.iv-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.iv-card { border: 1px solid var(--hair); border-radius: var(--radius-md); background: var(--surface); padding: 14px 16px 16px; min-width: 0; }
.iv-onledger { margin: 18px 0 0; }
.iv-card-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--hair); margin-bottom: 12px; font-size: var(--text-body); }
.iv-card-h b { font-weight: var(--weight-medium); }
.iv-right { margin-left: auto; }
.iv-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.iv-other { margin-top: 12px; }
.iv-f { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-meta-r); color: var(--ink-2); min-width: 0; }
.iv-f.iv-wide { grid-column: 1 / -1; }
.iv-f input, .iv-f select, .iv-bthis select, .iv-num, .iv-one input, .iv-one select { min-height: 36px; padding: 0 10px; border: 1px solid var(--hair); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-body); min-width: 0; }
.iv-f input:disabled { color: var(--ink-3); background: var(--surface-sunk); }
.iv-f input:focus, .iv-f select:focus, .iv-num:focus, .iv-one input:focus { border-color: var(--link); box-shadow: 0 0 0 3px var(--halo); }
.iv-req { font-style: normal; color: var(--ink-3); margin-left: 6px; }
.iv-tick { display: flex; align-items: center; gap: 8px; font-size: var(--text-body); color: var(--ink); min-height: 44px; }
.iv-bhead, .iv-brow { display: grid; grid-template-columns: 28px minmax(0, 2.4fr) minmax(90px, 1fr) minmax(150px, 1.3fr) minmax(84px, 0.8fr); gap: 0 12px; align-items: center; }
.iv-bhead { font-size: var(--text-table-head); letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--ink-3); font-weight: var(--weight-medium); padding-bottom: 8px; border-bottom: 1px solid var(--hair); }
.iv-brow { padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: var(--text-body); }
.iv-brow.off .iv-bdesc { color: var(--ink-3); }
.iv-bdesc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iv-bdesc b { font-weight: var(--weight-medium); }
.iv-bdesc small, .iv-bso small { color: var(--ink-3); font-size: var(--text-meta-r); }
.iv-bso { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.iv-bthis { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.iv-num { width: 84px; }
.iv-bnet { font-weight: var(--weight-medium); white-space: nowrap; }
.iv-chk { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.iv-pill { margin-left: 6px; vertical-align: 1px; }
.iv-x { width: 28px; height: 28px; border: 0; background: none; color: var(--ink-3); font-size: 18px; cursor: pointer; border-radius: var(--radius-sm); }
.iv-x:hover { color: var(--late); background: var(--row-hover); }
.iv-totals { display: grid; grid-template-columns: auto auto; justify-content: end; gap: 8px 32px; padding-top: 14px; font-size: var(--text-body); }
.iv-totals b { text-align: right; font-weight: var(--weight-medium); }
.iv-totals .big { font-size: var(--text-card-title); font-weight: var(--weight-medium); padding-top: 8px; border-top: 1px solid var(--hair); }
.iv-totals p { grid-column: 1 / -1; text-align: right; margin: 0; }
.iv-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--text-body); }
.iv-checks li { display: flex; gap: 10px; align-items: flex-start; }
.iv-checks li > span { width: 16px; flex: none; text-align: center; }
.iv-checks li.ok > span { color: var(--status-ok-ui); }
.iv-checks li.warn > span { color: var(--brand-orange); }
.iv-checks li.bad { color: var(--late); }
.iv-ready { display: flex; flex-direction: column; }
.iv-rrow { display: grid; grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 2fr) minmax(110px, auto) auto; gap: 0 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: var(--text-body); }
.iv-rrow:last-child { border-bottom: 0; }
.iv-rmain { display: flex; flex-direction: column; min-width: 0; }
.iv-rmain b { font-weight: var(--weight-medium); }
.iv-rwhat { font-size: var(--text-meta-r); color: var(--ink-2); min-width: 0; }
.iv-rdue { display: flex; flex-direction: column; align-items: flex-end; font-weight: var(--weight-medium); }
.iv-plist { display: flex; flex-direction: column; }
.iv-prow { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); gap: 12px; text-align: left; padding: 10px 8px; min-height: 44px; border: 0; border-bottom: 1px solid var(--hair);
  background: none; color: var(--ink); font: inherit; font-size: var(--text-body); cursor: pointer; }
.iv-prow:hover { background: var(--row-hover); }
.iv-steps { margin: 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 14px; font-size: var(--text-body); }
.iv-steps li { padding-left: 6px; }
.iv-steps li b { display: block; font-weight: var(--weight-medium); }
.iv-steps li span { color: var(--ink-2); font-size: var(--text-meta-r); }
.iv-done li.ok::marker { color: var(--status-ok-ui); }
.iv-done li.bad span { color: var(--late); }
.iv-mail { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--radius-md); font-size: var(--text-meta-r); }
.iv-mail span { color: var(--ink-3); }
.iv-mail b { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.iv-mail p { grid-column: 1 / -1; margin: 6px 0 0; color: var(--ink); }
.iv-mail .iv-att { grid-column: 1 / -1; display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); }
.iv-seg { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; font-size: var(--text-body); }
.iv-seg label { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
.iv-cnlines { margin-bottom: 12px; }
.iv-cnhead, .iv-cnrow { display: grid; grid-template-columns: minmax(0, 1fr) 96px 104px; gap: 10px; align-items: center; }
.iv-cnhead { font-size: var(--text-table-head); text-transform: uppercase; letter-spacing: var(--tracking-table); color: var(--ink-3); padding-bottom: 6px; border-bottom: 1px solid var(--hair); }
.iv-cnrow { padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: var(--text-body); }
.iv-cnrow span { display: flex; flex-direction: column; min-width: 0; }
.iv-cnrow small { color: var(--ink-3); font-size: var(--text-meta-r); }
.iv-cn .iv-f { margin-top: 12px; }
.iv-v1row { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.iv-v1row > div { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.iv-v1t { display: block; overflow-x: auto; margin-top: 8px; border-collapse: collapse; font-size: var(--text-meta-r); }
.iv-v1t th, .iv-v1t td { border: 1px solid var(--hair); padding: 4px 8px; text-align: left; white-space: nowrap; }
.iv-v1t th { color: var(--ink-3); font-weight: var(--weight-medium); }
@media (max-width: 760px) {
  .iv-bhead { display: none; }
  .iv-brow { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-areas: 'c d n' '. s s' '. t t'; row-gap: 6px; }
  .iv-brow > .iv-chk, .iv-brow > .iv-x { grid-area: c; }
  .iv-brow > .iv-bdesc { grid-area: d; }
  .iv-brow > .iv-bnet { grid-area: n; }
  .iv-brow > .iv-bso { grid-area: s; align-items: flex-start; text-align: left; }
  .iv-brow > .iv-bthis { grid-area: t; }
  .iv-rrow { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: 'n m d' '. w w' '. b b'; row-gap: 6px; }
  .iv-rrow > :nth-child(1) { grid-area: n; } .iv-rrow > :nth-child(2) { grid-area: m; } .iv-rrow > :nth-child(3) { grid-area: w; }
  .iv-rrow > :nth-child(4) { grid-area: d; } .iv-rrow > :nth-child(5) { grid-area: b; }
  .iv-head .fn4-actions { width: 100%; }
  .iv-head .fn4-actions .btn { flex: 1 1 auto; min-height: 44px; }
  .iv-prow { grid-template-columns: 56px minmax(0, 1fr); }
  .iv-prow > :nth-child(3) { grid-column: 2; }
}

/* ── Supplier invoices, matched to orders (v4.18.0; FinBills, Karan 27/10/2026) ──
   The list (SUPPLIER INVOICE · MATCHED TO · GROSS · CHECK) beside the chosen
   invoice's card; one column ≤1100px, the card after the list. */
.sib { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr); gap: 20px; align-items: start; }
@media (max-width: 1100px) { .sib { grid-template-columns: minmax(0, 1fr); } }
.sib-row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.4fr) 84px 92px; }
.fn4-row.sib-row { padding-left: 8px; padding-right: 8px; }
.fn4-thead.sib-row { padding-left: 8px; padding-right: 8px; }
.fn4-row.sib-row.on { background: var(--row-hover); }
.sib-two { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sib-two .fn4-mute { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sib-to { font-size: var(--text-meta-r); color: var(--ink-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; }
.sib-card { border: 1px solid var(--hair); border-radius: var(--radius-md); background: var(--surface); padding: 16px 18px 18px; min-width: 0;
  display: flex; flex-direction: column; gap: 14px; }
.sib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sib-title { font-size: var(--text-row); font-weight: var(--weight-medium); color: var(--ink); overflow-wrap: anywhere; }
.sib-head .linkbtn { flex: none; font-size: var(--text-meta-r); }
.sib-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--hair); border-radius: var(--radius-md); overflow: hidden; }
.sib-box { padding: 12px 12px 12px; min-width: 0; }
.sib-box + .sib-box { border-left: 1px solid var(--hair); }
.sib-box.late { background: var(--late-tint); }
.sib-box.late .sib-v { color: var(--late); }
.sib-box.ok .sib-v { color: var(--status-ok-ui); }
.sib-k { font-size: var(--text-label); color: var(--ink-3); }
.sib-v { margin-top: 6px; font-size: var(--text-section); font-weight: var(--weight-medium); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sib-n { margin-top: 6px; font-size: var(--text-label); color: var(--ink-3); overflow-wrap: anywhere; }
.sib-quote { margin: 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--hair-strong); font-size: var(--text-meta-r); color: var(--ink); line-height: 1.45; }
.sib-quote span { display: block; margin-top: 4px; font-size: var(--text-label); color: var(--ink-3); }
.sib-what { margin-top: 2px; color: var(--ink); font-weight: var(--weight-medium); }
.sib-opts { display: flex; flex-direction: column; gap: 8px; }
.sib-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--radius-md); cursor: pointer; }
.sib-opt.on { border-color: var(--link); background: var(--row-hover); }
.sib-opt input { margin: 2px 0 0; accent-color: var(--brand-blue); flex: none; }
.sib-opt b { display: block; font-size: var(--text-meta-r); font-weight: var(--weight-medium); color: var(--ink); }
.sib-opt span span { display: block; margin-top: 3px; font-size: var(--text-label); color: var(--ink-2); line-height: 1.45; }
.sib-sel { min-height: 36px; padding: 0 10px; border: 1px solid var(--hair); border-radius: var(--radius-md); background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: var(--text-meta-r); max-width: 100%; }
.sib-say { margin: 0; font-size: var(--text-meta-r); color: var(--ink-2); line-height: 1.5; }
.sib-say.ok b { color: var(--status-ok-ui); font-weight: var(--weight-medium); }
.sib-say.late { color: var(--late); }
.sib-small { margin: 0; font-size: var(--text-label); color: var(--ink-3); line-height: 1.5; }
.sib-small b { color: var(--ink-2); font-weight: var(--weight-medium); }
.sib-foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.sib-drop { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 16px; border: 1px dashed var(--hair-strong);
  border-radius: var(--radius-md); cursor: pointer; text-align: center; font-size: var(--text-meta-r); color: var(--ink-2); }
.sib-drop:hover, .sib-drop:focus-visible { border-color: var(--link); color: var(--ink); }
.sib-log { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: var(--text-meta-r); color: var(--ink); }
.sib-log .fn4-sec { white-space: normal; }
@media (max-width: 760px) {
  .sib-boxes { grid-template-columns: minmax(0, 1fr); }
  .sib-box + .sib-box { border-left: 0; border-top: 1px solid var(--hair); }
  .sib-foot .btn { flex: 1 1 auto; min-height: 44px; }
  .fn4-row.sib-row { padding-left: 0; padding-right: 0; }
  .fn4-row.sib-row .sib-two.ph-name .fn4-mute { display: none; }   /* the phone row's sub-line says it */
}
.sib-err:empty { display: none; }
.sib-err { margin: -4px 0 0; font-size: var(--text-label); color: var(--late); }

/* ── Payments made + remittance advice (v4.19.1; FinRemit, Karan 28/10/2026) ──
   PAID TO · WHAT IT COVERED · PAID ON · AMOUNT · REMITTANCE; the dialog's
   "It covers" ticks and the PDF card. */
.pm-row { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) 72px 96px 150px; }
.fn4-row.pm-row, .fn4-thead.pm-row { padding-left: 8px; padding-right: 8px; }
.pm-cov { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-st { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.pm-row .linkbtn { font-size: var(--text-meta-r); min-height: 0; padding: 0; border: 0; background: none; color: var(--link); cursor: pointer; }
.pm-row .pm-ask { color: var(--ink-2); }
@media (max-width: 760px) {
  .fn4-row.pm-row { padding-left: 0; padding-right: 0; }
  .fn4-row.pm-row .sib-two.ph-name .fn4-mute { display: none; }
  .pm-row .pm-sent { min-height: 44px; }
}
.rm-cov { margin-top: 18px; }
.rm-cov-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rm-src { font-size: var(--text-label); color: var(--ink-3); }
.rm-inv { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: var(--text-meta-r); color: var(--ink); cursor: pointer; }
.rm-inv input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand-blue); flex: none; }
.rm-none { margin: 0; font-size: var(--text-meta-r); color: var(--ink-3); }
.rm-file { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--radius-md); }
.rm-pdf { flex: none; width: 30px; height: 30px; border-radius: 6px; background: var(--late-tint); color: var(--late);
  font-size: 9.5px; font-weight: var(--weight-medium); display: flex; align-items: center; justify-content: center; }
.rm-file-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-meta-r); color: var(--ink); }
.rm-file-t b { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.rm-file-t span { font-size: var(--text-label); color: var(--ink-3); }
.rm-prev, .rm-asked { flex: none; font-size: var(--text-meta-r); min-height: 0; padding: 0; border: 0; background: none; color: var(--link); cursor: pointer; text-decoration: none; }
.rm-asked { margin-top: 12px; }
@media (max-width: 760px) {
  .rm-card .tf-foot { flex-wrap: wrap; row-gap: 10px; }
  .rm-card .tf-foot .tf-note { flex: 1 0 100%; order: -1; }
  .rm-card .tf-foot .tf-spacer { display: none; }
  .rm-card .tf-foot .tf-btn { flex: 1 1 auto; min-height: 44px; }
}

/* ── Invoices › Overdue (v4.19.1; design FinOverdue) ─────────────────────────
   The figures, the cadence strip, then the list by client beside the panel
   (history + the charge). Done warnings are ink dots, the next is the late
   colour, the rest hollow. On a phone the panel drops under the list. */
.ch { display: flex; flex-direction: column; gap: 0; }
.ch-cad { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--hair); }
.ch-cad li { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; border-left: 1px solid var(--hair); min-width: 0;
  font-size: var(--text-meta-r); color: var(--ink-3); }
.ch-cad li:first-child { border-left: 0; padding-left: 0; }
.ch-cad b { font-weight: var(--weight-medium); color: var(--ink); font-size: var(--text-body); }
.ch-cad-k { font-size: var(--text-table-head); letter-spacing: var(--tracking-table); text-transform: uppercase; font-weight: var(--weight-medium); }
.ch-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 24px; align-items: start; padding-top: 14px; }
.ch-list { min-width: 0; }
.ch-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 76px 76px 64px minmax(132px, auto); gap: 0 12px;
  align-items: center; min-height: 56px; padding: 8px 8px; border-bottom: 1px solid var(--hair); font-size: var(--text-body); color: var(--ink); }
.ch-row[data-client] { cursor: pointer; }
.ch-row[data-client]:hover, .ch-row.on { background: var(--row-hover); }
.ch-row:focus-visible { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.ch-head { min-height: 0; padding-top: 10px; padding-bottom: 8px; font-size: var(--text-table-head); letter-spacing: var(--tracking-table);
  text-transform: uppercase; color: var(--ink-3); font-weight: var(--weight-medium); }
.ch-r { text-align: right; justify-self: end; }
.ch-name { display: flex; flex-direction: column; min-width: 0; }
.ch-name b { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-name small, .ch-nums { color: var(--ink-3); font-size: var(--text-meta-r); }
.ch-owed { font-weight: var(--weight-medium); white-space: nowrap; }
.ch-next .btn { white-space: nowrap; }
.ch-dots { display: inline-flex; gap: 5px; align-items: center; }
.ch-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-3); box-sizing: border-box; }
.ch-dots i.done { background: var(--ink); border-color: var(--ink); }
.ch-dots i.next { background: var(--late); border-color: var(--late); }
.ch-dots.paused i.next { background: transparent; border-color: var(--ink-3); }
.ch-note { margin: 12px 8px 0; font-size: var(--text-meta-r); color: var(--ink-3); max-width: 72ch; }
.ch-panel { border: 1px solid var(--hair); border-radius: var(--radius-md); background: var(--surface); padding: 14px 16px 16px; min-width: 0;
  position: sticky; top: 16px; }
.ch-ph { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.ch-ph b { font-weight: var(--weight-medium); }
.ch-chips { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; }
.ch-chip { min-height: 32px; padding: 0 10px; border: 1px solid var(--hair); border-radius: var(--radius-pill); background: none; color: var(--ink-2);
  font: inherit; font-size: var(--text-meta-r); cursor: pointer; }
.ch-chip.on { border-color: var(--ink); color: var(--ink); }
.ch-tl { list-style: none; margin: 0; padding: 6px 0 0; }
.ch-tl li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--hair);
  font-size: var(--text-body); }
.ch-tl li:last-child { border-bottom: 0; }
.ch-tl li > i { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; border: 1.5px solid var(--ink-3); box-sizing: border-box; }
.ch-tl li.done > i { background: var(--ink); border-color: var(--ink); }
.ch-tl li.now > i { border-color: var(--late); }
.ch-tl li.paused > i { background: var(--late); border-color: var(--late); }
.ch-tl li > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ch-tl b { font-weight: var(--weight-medium); }
.ch-tl small { color: var(--ink-3); font-size: var(--text-meta-r); }
.ch-tl li.todo b { color: var(--ink-3); font-weight: var(--weight-regular); }
.ch-tl em { font-style: normal; color: var(--ink-3); font-size: var(--text-meta-r); }
.ch-charge { margin-top: 10px; border: 1px solid var(--hair); border-radius: var(--radius-md); padding: 10px 12px; }
.ch-cl { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: var(--text-meta-r); color: var(--ink-2); }
.ch-cl b { font-weight: var(--weight-medium); color: var(--ink); white-space: nowrap; }
.ch-cl.ch-big { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--hair); font-size: var(--text-body); color: var(--ink); }
.ch-small { margin: 2px 0 4px; font-size: var(--text-meta-r); color: var(--ink-3); }
.ch-words { margin: 10px 0 0; font-size: var(--text-meta-r); color: var(--ink-2); line-height: 1.45; }
.ch-words b { font-weight: var(--weight-medium); }
.ch-acts { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ch-acts .iv-muted { margin-right: auto; max-width: 22ch; }
.ch-v1 { margin-top: 24px; }
.ch-v1row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 90px 80px; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: var(--text-body); }
.ch-rate { margin: 14px 0 0; align-items: center; flex-wrap: wrap; }
.ch-rate .iv-right { display: flex; gap: 8px; }
.ch-pick { display: flex; flex-direction: column; max-height: 320px; overflow: auto; margin-top: 10px; }
.ch-pickrow { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px; padding: 0 8px; border: 0; border-bottom: 1px solid var(--hair);
  background: none; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.ch-pickrow:hover { background: var(--row-hover); }
.ch-pickrow b { font-weight: var(--weight-medium); }
.ch-log { display: flex; flex-direction: column; }
.ch-logrow { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: var(--text-meta-r); }
.ch-logwould { padding: 6px 0 10px 182px; font-size: var(--text-meta-r); color: var(--ink-3); border-bottom: 1px solid var(--hair); }
@media (max-width: 1100px) {
  .ch-grid { grid-template-columns: minmax(0, 1fr); }
  .ch-panel { position: static; }
  .ch-cad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ch-cad li:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  .ch-cad { grid-template-columns: minmax(0, 1fr); }
  .ch-cad li { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); flex-direction: row; flex-wrap: wrap; gap: 4px 8px; padding-top: 8px; padding-bottom: 8px; }
  .ch-cad li:first-child { border-top: 0; }
  .ch-head { display: none; }
  .ch-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name owed" "nums late" "dots next"; gap: 4px 12px; padding: 12px 4px; }
  .ch-row > :nth-child(1) { grid-area: name; } .ch-row > :nth-child(2) { grid-area: nums; } .ch-row > :nth-child(3) { grid-area: owed; }
  .ch-row > :nth-child(4) { grid-area: late; justify-self: end; } .ch-row > :nth-child(5) { grid-area: dots; } .ch-row > :nth-child(6) { grid-area: next; }
  .ch-next .btn { min-height: 44px; }
  .ch-v1row { grid-template-columns: minmax(0, 1fr) auto; }
  .ch-logrow { grid-template-columns: minmax(0, 1fr); }
  .ch-logwould { padding-left: 0; }
  .ch-rate .iv-right { width: 100%; }
}
.ch-next .btn.sm { min-height: 34px; padding: 0 12px; }

/* ── Invoices › Fees missing (v4.20.0): the fee backfill's dry run, tick to apply. ── */
.ffm-intro { margin: 0 0 12px; max-width: 96ch; font-size: var(--text-meta-r); line-height: 1.55; color: var(--ink-2); }
.ffm-empty { margin-top: 20px; }
.ffm-run { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.ffm-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-body); color: var(--ink); }
.ffm-meta { margin: 6px 0 16px; font-size: var(--text-meta-r); color: var(--ink-3); }
.ffm-meta b { font-weight: var(--weight-medium); color: var(--ink); }
.ffm-how { margin: 16px 0 0; }
.ffm-how summary { cursor: pointer; font-size: var(--text-meta-r); color: var(--link); padding: 6px 0; }
.ffm-how[open] summary { margin-bottom: 8px; }
.ffm-applybar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.ffm-applybar .f-select { width: auto; min-width: 84px; }
.ffm-sp { flex: 1; }
.ffm-row { display: grid; grid-template-columns: 28px minmax(110px, 1fr) minmax(0, 2fr) 110px minmax(0, 2.4fr) 92px; gap: 0 14px; align-items: start;
  padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: var(--text-body); color: var(--ink); }
.ffm-row.ffm-h { padding: 0 0 8px; border-bottom: 1px solid var(--rule-head); font-size: var(--text-table-head); letter-spacing: var(--tracking-table); text-transform: uppercase; color: var(--ink-3); }
.ffm-row .r, .ffm-fee, .ffm-conf { text-align: right; }
.ffm-row.is-done { color: var(--ink-3); }
.ffm-proj, .ffm-src { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ffm-proj .linkbtn { text-align: left; font-variant-numeric: tabular-nums; }
.ffm-ins b { font-weight: var(--weight-medium); color: var(--anchor); }
.ffm-fee { font-variant-numeric: tabular-nums; }
.ffm-src a { color: var(--link); font-size: var(--text-meta-r); overflow-wrap: anywhere; }
.ffm-note { font-size: var(--text-label); color: var(--ink-3); }
.ffm-note.is-conflict { color: var(--status-overdue-ink); }
.ffm-c { display: inline-block; min-width: 46px; padding: 2px 8px; border-radius: 999px; font-size: var(--text-label); font-variant-numeric: tabular-nums; text-align: center;
  border: 1px solid var(--hair-strong); color: var(--ink-2); }
.ffm-c-high { border-color: var(--status-ok-ui); color: var(--status-ok-ui); }
.ffm-c-low { color: var(--ink-3); }
.ffm-tick { width: 18px; height: 18px; margin: 2px 0 0; }
/* v4.21.3: what the proposal says besides the fee — hours, description, lines */
.ffm-view { margin: 4px 0 10px; }
.ffm-scope { font-size: var(--text-meta-r); color: var(--ink-2); overflow-wrap: anywhere; }
.ffm-scope b, .ffm-note b { font-weight: var(--weight-medium); color: var(--ink); }
.ffm-fee .ffm-note { display: block; text-align: right; }
.ffm-more { display: flex; flex-direction: column; gap: 2px; }
.ffm-more summary { cursor: pointer; font-size: var(--text-label); color: var(--link); }
@media (max-width: 760px) {
  .ffm-row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: 't p f' '. i c' '. s s'; row-gap: 6px; }
  .ffm-row > :nth-child(1) { grid-area: t; } .ffm-row > :nth-child(2) { grid-area: p; } .ffm-row > :nth-child(3) { grid-area: i; }
  .ffm-row > :nth-child(4) { grid-area: f; } .ffm-row > :nth-child(5) { grid-area: s; } .ffm-row > :nth-child(6) { grid-area: c; }
  .ffm-row.ffm-h { display: none; }
  .ffm-tick { width: 24px; height: 24px; margin: 10px; }
  .ffm-applybar .btn { min-height: 44px; }
  .ffm-more summary { min-height: 44px; display: flex; align-items: center; }
  .ffm-fee .ffm-note { text-align: left; }
}