/* 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; }
}