/* FINANCE — the screen (js/finance/finance.js). DESIGN SCAFFOLD for review.

   The design system is the CRM's (css/page-crm.css): .fin-root and .fin-scrim
   are granted its --crm-* tokens there, beside Prowl's — their own entries,
   not Prowl's, so nothing Prowl is allowed reaches Finance by accident. The
   screen reuses the CRM's parts (.crm-tab, .crm-title, .crm-btn,
   .crm-btn-primary, .crm-pop, .crm-toast, .crm-controls, .crm-view-chip,
   .crm-toolbar, .crm-tbtn, .crm-group-head, .crm-tablewrap, table.crm-table,
   the project card .crm-drawer), Prowl's shell parts (.prowl-head and its
   tabs and search, .prowl-page, .prowl-titlebar, the skeleton, the error
   card, .prowl-dialog) and Prowl's group and empty parts (.pw-ghead,
   .pw-gtoggle, .pw-table, .pw-empty, .pw-notice), and the portal's KPI bar
   (.ds-kpi-bar). This file adds only what those lack, in tokens: never a raw
   colour. Gold TEXT is --gold-ink; the focus ring is 2px of it. State is a
   word plus a mark — a dot for due (gold: your move), a tick for paid or
   cleared (green), a diamond for blocked or cancelled (red), a clock or a
   question mark for waiting on review or policy (amber). Motion is the CRM's
   and Prowl's own (opacity and a few pixels, 140–200ms) and none of it
   survives prefers-reduced-motion. The phone is ≤640px. */

/* ── The screen and its frame ─────────────────────────────────────────────── */
#financeScreen { overflow: hidden; }
.fin-root {
  /* The token grant brings the board's frame along; Finance draws its own. */
  max-width: none; margin: 0; padding: 0;
  height: 100%;
  display: flex; flex-direction: column;
  overflow-x: clip;
  font-family: var(--font-sans);
  caret-color: var(--gold-ink);
  /* Ask Leo's summon floats over the bottom right: a page ends far enough
     below its last line to scroll clear of it (as .prowl-root does). */
  --prowl-end-room: 140px;
}
@media (max-width: 720px) { .fin-root { --prowl-end-room: calc(144px + env(safe-area-inset-bottom)); } }
.fin-root, .fin-scrim { color-scheme: light; }
[data-theme="dark"] .fin-root, [data-theme="dark"] .fin-scrim { color-scheme: dark; }
.fin-root ::selection { background: var(--crm-gold-pale); color: var(--crm-head); }
.fin-root, .fin-root * { scrollbar-width: thin; scrollbar-color: var(--crm-rule-firm) transparent; }
/* …except the tab strip, which scrolls with no bar, as Prowl's does. */
.fin-root .prowl-tabs { scrollbar-width: none; }

/* Navy is the dark theme's ground: the "on" control, the active view and the
   one filled button restate themselves there, as they do for the board and
   Prowl. */
[data-theme="dark"] .fin-root .crm-tbtn-on,
[data-theme="dark"] .fin-root .crm-view-active,
[data-theme="dark"] .fin-root .crm-view-active:hover { color: var(--crm-ink); }
[data-theme="dark"] .fin-root .crm-btn-primary,
[data-theme="dark"] .fin-scrim .crm-btn-primary { background: var(--crm-gold); border-color: var(--crm-gold); color: var(--crm-navy); }
[data-theme="dark"] .fin-root .crm-btn-primary:hover,
[data-theme="dark"] .fin-scrim .crm-btn-primary:hover { background: var(--gold-soft); border-color: var(--gold-soft); color: var(--crm-navy); }
/* The CRM's outline hover inks the words gold, under AA as text: here the
   edge turns gold and the words stay ink (as in Prowl). */
.fin-root .crm-btn:not(.crm-btn-primary):not([aria-disabled="true"]):hover,
.fin-scrim .crm-btn:not(.crm-btn-primary):not([aria-disabled="true"]):hover {
  border-color: var(--crm-gold); background: var(--crm-gold-faint); color: var(--crm-head);
}
.fin-root .crm-btn:not(.crm-btn-primary):not([disabled]):active,
.fin-scrim .crm-btn:not(.crm-btn-primary):not([disabled]):active { background: var(--crm-panel); }
.fin-scrim .crm-btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }

/* ── Focus: 2px of gold ink, at once, on everything you can reach ─────────── */
.fin-root :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.fin-scrim :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.fin-defpop :is(button):focus-visible,
.fin-menu .crm-pop-opt:focus-visible {
  outline: 2px solid var(--gold-ink); outline-offset: 2px; box-shadow: none;
}
.fin-menu .crm-pop-opt:focus-visible { outline-offset: -2px; background: var(--crm-panel); }
.fin-root .crm-tab2:focus-visible { outline-offset: -3px; }
/* A heading that takes focus to start a card or a page is not a control. */
.fin-root :is(.fin-dtitle, .crm-title)[tabindex]:is(:focus, :focus-visible) { outline: none; }
.fin-root .fin-table :is(.fin-open, .fin-ptoggle):focus-visible { outline-offset: 1px; border-radius: 3px; }

/* ── Notices above the title ──────────────────────────────────────────────── */
.fin-sample > svg:first-child { color: var(--crm-ink-2); }
.fin-stale > svg:first-child { color: var(--amber-ink); }
.fin-stale { border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.fin-filternote {
  margin: -4px 2px 0; display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; line-height: 1.45; color: var(--crm-ink-2);
}
.fin-filternote > svg { flex: none; margin-top: 2px; }

/* ── The title bar: two buttons, one of them filled ──────────────────────── */
.fin-titleacts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px 0 10px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--crm-head); white-space: nowrap;
}
.fin-btn > svg { flex: none; color: var(--crm-ink-2); }

/* ── The four headlines: the portal's KPI bar, four across ───────────────── */
.fin-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}
.fin-kpi { padding: 16px 22px 18px; }
.fin-kpi-head { display: flex; align-items: center; gap: 4px; min-height: 24px; }
/* The KPI label's tracking is for capitals; these labels are words. */
.fin-kpi-label { letter-spacing: 0.01em; font-size: 12px; color: var(--crm-ink-2); }
.fin-info {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--crm-ink-2); cursor: pointer;
}
.fin-info:hover, .fin-info[aria-expanded="true"] { background: var(--crm-panel-2); color: var(--crm-head); }
.fin-kpi-num {
  font-size: clamp(24px, 2.3vw, 32px); margin: 10px 0 8px;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fin-kpi-num .fin-unknown { font-size: 0.72em; font-weight: 600; color: var(--crm-ink-2); }
.fin-kpi-note { flex-wrap: wrap; gap: 4px 6px; font-size: 12px; }
.fin-kpi-prov { color: var(--amber-ink); font-weight: 500; }
@media (max-width: 1180px) {
  .fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-kpi:nth-child(odd) { padding-left: 0; border-left: none; }
  .fin-kpi:nth-child(even) { padding-right: 0; }
  .fin-kpi:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
}

/* ── The definition panel under a headline's ⓘ ───────────────────────────── */
.fin-defpop { width: min(360px, calc(100vw - 16px)); max-width: none; box-sizing: border-box; padding: 14px 16px; }
.fin-defpop-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.fin-defpop-title { font-family: var(--font-serif); font-size: 16px; font-weight: 500; color: var(--crm-head); }
.fin-defpop-text { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--crm-ink-mid); }
.fin-defpop-sec { margin-top: 10px; }
.fin-defpop-k { font-size: 12px; font-weight: 600; color: var(--crm-ink-2); }
.fin-defpop-sec ul { margin: 4px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: var(--crm-ink); }
.fin-defpop-dl { margin: 10px 0 0; }
.fin-defpop-dl > div, .fin-kv > div {
  display: flex; gap: 12px; padding: 5px 0; border-top: 1px solid var(--crm-rule);
  font-size: 12.5px; line-height: 1.45;
}
.fin-defpop-dl dt, .fin-kv dt { flex: 0 0 92px; color: var(--crm-ink-2); }
.fin-defpop-dl dd, .fin-kv dd { margin: 0; min-width: 0; color: var(--crm-ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fin-defpop-close { margin-top: 12px; }
.fin-menu-note { margin: 0; padding: 4px 8px 6px; max-width: 260px; font-size: 12px; line-height: 1.45; color: var(--crm-ink-2); }

/* ── The controls card ───────────────────────────────────────────────────── */
.fin-page .fin-controls { margin: 0; }
.fin-tool-sep { flex: none; width: 1px; height: 18px; margin: 0 4px; background: var(--crm-rule-firm); }
.fin-toolbar .crm-tbtn { white-space: nowrap; }

/* ── Groups ──────────────────────────────────────────────────────────────── */
.fin-groups { display: flex; flex-direction: column; gap: 26px; }
.fin-group { display: flex; flex-direction: column; gap: 9px; }
.fin-ghead { column-gap: 10px; }
.fin-gtotals {
  margin-left: auto; display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px;
  font-size: 12.5px; color: var(--crm-ink-2); font-variant-numeric: tabular-nums;
}
.fin-gt b { font-weight: 600; color: var(--crm-head); }
.fin-gt-u { color: var(--amber-ink); }
/* On hold: an ordinary group, last, in the quieter ink. */
.fin-agentbtn { flex: none; }
.fin-gmark-blocked { color: var(--crm-blocked); }
.fin-gmark-quiet { color: var(--amber-ink); }
.fin-gnote { margin: -3px 0 0 32px; max-width: 72ch; font-size: 12.5px; line-height: 1.45; color: var(--crm-ink-2); }
.fin-empty-inline { padding: 13px 16px; }
.fin-group-hold .crm-group-name { color: var(--crm-ink-mid); }

/* ── The tables: fixed columns so every group lines up ───────────────────── */
.fin-table { min-width: 1120px; }
.fin-table col.fin-c-tech { width: 86px; }
/* .pw-table td turns cell clipping off (prowl-work.css loads after this sheet in
   the portal), so the Type word is held inside its own column: "Unknown" fits,
   and anything longer ends in an ellipsis instead of painting over Utility. */
.fin-table td.fin-c-tech { overflow: hidden; }
.fin-table col.fin-c-util { width: 150px; }
.fin-table col.fin-c-stage { width: 204px; }
.fin-table col.fin-c-money { width: 116px; }
.fin-table col.fin-c-rec { width: 118px; }
.fin-ctable col.fin-c-pay { width: 168px; }
.fin-ctable col.fin-c-tu { width: 160px; }
.fin-ctable col.fin-c-ev { width: 92px; }
.fin-ctable col.fin-c-review { width: 156px; }
/* Recorded paid: the 103px header and a seven-figure amount (98px) fit inside
   12px padding each side; an unknown history says why on its clipped second line. */
.fin-ctable col.fin-c-money { width: 132px; }
.fin-ctable { min-width: 1080px; }
.fin-rtable { min-width: 560px; }
.fin-table th.crm-num { text-align: right; }
.fin-table tbody tr.fin-row { cursor: pointer; }
.fin-table td { line-height: 1.35; }
.fin-rtable td { height: 42px; }
.fin-namecell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fin-open {
  display: block; max-width: 100%; padding: 0; border: 0; background: transparent;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.35; text-align: left;
  color: var(--crm-head); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fin-open:hover, tr.fin-row:hover .fin-open { text-decoration: underline; text-decoration-color: var(--crm-rule-firm); text-underline-offset: 3px; }
.fin-sub, .fin-clip { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-sub { font-size: 11.5px; line-height: 1.4; color: var(--crm-ink-2); }
.fin-sub-unknown { color: var(--amber-ink); }
.fin-clip { font-size: 13px; }

/* Money: right-aligned, tabular, one figure a cell — or the word for why not. */
.fin-c-money { text-align: right; }
.fin-amt { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: 13.5px; font-weight: 500; color: var(--crm-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-total { font-weight: 600; }
.fin-unknown, .fin-none { color: var(--crm-ink-2); font-weight: 400; }
.fin-amt.fin-unknown, .fin-amt.fin-none { font-size: 13px; }
.fin-pending { color: var(--amber-ink); }
.fin-ovr { display: inline-flex; color: var(--gold-ink); }

/* State words: a mark and a word, the mark never alone. */
.fin-mark { flex: none; }
.fin-pstate, .fin-stage, .fin-rec { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; white-space: nowrap; }
.fin-pstate > span, .fin-stage > span, .fin-rec > span { overflow: hidden; text-overflow: ellipsis; }
.fin-pstate, .fin-stage { font-size: 13px; font-weight: 500; }
.fin-rec { font-size: 12.5px; }
.fin-tone-gold { color: var(--gold-ink); }
.fin-tone-clear { color: var(--crm-clear); }
.fin-tone-blocked { color: var(--crm-blocked); }
.fin-tone-amber { color: var(--amber-ink); }
.fin-tone-quiet { color: var(--crm-ink-2); }
.fin-tone-head { color: var(--crm-head); }
.fin-rec-ok { color: var(--crm-ink-2); }
.fin-rec-gap, .fin-rec-back { color: var(--amber-ink); font-weight: 500; }
.fin-ev { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.fin-tierword { color: var(--crm-ink-mid); }

/* A property: the parent row sums its sites once; it is not a payment. */
.fin-table tbody tr.fin-prow td { background: var(--crm-panel); }
.fin-table tbody tr.fin-prow:hover td { background: var(--crm-panel-2); }
.fin-table tbody tr.fin-prow { cursor: default; }
.fin-ptoggle {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  margin-left: -4px; padding: 2px 4px; border: 0; border-radius: 6px; background: transparent;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--crm-head); cursor: pointer; text-align: left;
}
.fin-ptoggle:hover { background: var(--crm-panel-2); }
.fin-ptoggle .pw-caret { flex: none; color: var(--crm-ink-2); }
.fin-ptitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-pname .fin-sub { padding-left: 19px; }
.fin-pstages { font-size: 12.5px; color: var(--crm-ink-mid); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fin-crow .fin-namecell { margin-left: 9px; padding-left: 14px; border-left: 2px solid var(--crm-rule-firm); }
.fin-row-hold .fin-open { color: var(--crm-ink-mid); }

/* The site column stays put when a narrow table scrolls sideways (as the
   CRM's name column does). */
.fin-table th.fin-c-name, .fin-table td.fin-c-name { position: sticky; left: 0; }
.fin-table td.fin-c-name { z-index: 2; background: var(--crm-paper); box-shadow: 1px 0 0 var(--crm-grid); }
.fin-table th.fin-c-name { z-index: 4; box-shadow: 1px 0 0 var(--crm-grid); }
[data-theme="dark"] .fin-table td.fin-c-name {
  --crm-gold-faint: color-mix(in srgb, var(--crm-gold) 9%, var(--crm-paper));
}

/* ── The phone's list ─────────────────────────────────────────────────────── */
.fin-plist {
  margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--crm-grid-strong); border-radius: 12px; background: var(--crm-paper);
  box-shadow: var(--crm-shadow-card); overflow: hidden;
}
.fin-pitem { padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--crm-grid); }
.fin-pitem:last-child { border-bottom: 0; }
.fin-prow1 { display: flex; align-items: flex-start; gap: 8px; }
.fin-popen, .fin-pptoggle {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  display: flex;  align-items: flex-start; gap: 4px;
  padding: 0; border: 0; border-radius: 6px; background: transparent;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.fin-popen { flex-direction: column; }
.fin-pptoggle { flex-direction: row; gap: 8px; width: 100%; }
.fin-pptoggle .pw-caret { flex: none; margin-top: 4px; color: var(--crm-ink-2); }
.fin-pmain { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fin-popen:active, .fin-pptoggle:active { background: var(--crm-gold-faint); }
.fin-pitem .fin-ptitle { white-space: normal; font-size: 15.5px; line-height: 1.35; font-weight: 500; color: var(--crm-head); overflow-wrap: anywhere; }
.fin-pprop > .fin-pptoggle .fin-ptitle { font-weight: 600; }
.fin-pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: 13px; line-height: 1.4; color: var(--crm-ink-2); }
.fin-pmoney { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; line-height: 1.45; color: var(--crm-ink-2); }
.fin-pm b { font-weight: 600; color: var(--crm-head); font-variant-numeric: tabular-nums; }
.fin-pm b.fin-unknown, .fin-pm b.fin-none { font-weight: 500; color: var(--crm-ink-2); }
.fin-pdet {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; padding: 0 10px; border: 1px solid var(--crm-rule-firm); border-radius: 8px;
  background: var(--crm-paper); font: inherit; font-size: 13.5px; color: var(--crm-ink-mid); cursor: pointer;
}
.fin-pdl { margin: 8px 0 2px; }
.fin-pdl-row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid var(--crm-rule); font-size: 13.5px; line-height: 1.45; }
.fin-pdl dt { flex: none; color: var(--crm-ink-2); }
.fin-pdl dd { margin: 0; min-width: 0; text-align: right; color: var(--crm-head); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fin-plist-kids { margin: 8px 0 2px 6px; border-radius: 10px; box-shadow: none; }
.fin-pkid { padding-left: 12px; }

/* ── The card (the CRM's project card): only its inside is drawn here ───── */
.fin-card-host { display: contents; }
.fin-card-host[hidden] { display: none; }
.fin-drawer { font-variant-numeric: tabular-nums; }
.fin-dtitle { outline: none; }
.fin-hpill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; box-sizing: border-box;
  padding: 3px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
}
.fin-hpill.fin-tone-gold { background: var(--crm-gold-pale); color: var(--crm-head); }
.fin-hpill.fin-tone-gold .fin-mark { color: var(--gold-ink); }
.fin-hpill.fin-tone-clear { background: var(--crm-clear-bg); color: var(--crm-clear); }
.fin-hpill.fin-tone-blocked { background: var(--crm-blocked-bg); color: var(--crm-blocked); }
.fin-hpill.fin-tone-amber { background: var(--amber-bg); color: var(--amber-ink); }
.fin-hpill.fin-tone-quiet { background: var(--crm-panel-2); color: var(--crm-ink); }
.fin-x { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; }
.fin-rail > * + * { margin-top: 6px; }
.fin-rail > .crm-rail-sec { margin-top: 18px; }
.fin-rail-t { margin-bottom: 8px; }
.fin-missing { padding: 3px 0; font-size: 12.5px; }
.fin-missing ul { margin: 4px 0 0; padding-left: 18px; color: var(--crm-ink); line-height: 1.45; }
.fin-railnote { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--crm-ink-2); }
.fin-qlist { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--crm-ink); }
.fin-tabn { font-size: 11px; font-weight: 600; color: var(--crm-ink-2); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.fin-lede { margin: 0 0 14px; max-width: 72ch; font-size: 13px; line-height: 1.5; color: var(--crm-ink-mid); }
.fin-ro {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 8px 12px;
  border: 1px solid var(--crm-rule); border-radius: 8px; background: var(--crm-panel);
  font-size: 12.5px; line-height: 1.45; color: var(--crm-ink-mid);
}
.fin-ro > svg { flex: none; margin-top: 1px; }

/* Expected, Approved, Paid: three boxes, never one figure. Each is a row:
   the figure and what it means on the left, where it came from on the right. */
.fin-amtgrid { display: flex; flex-direction: column; gap: 12px; }
.fin-amtblock {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 24px;
  padding: 14px 16px; border: 1px solid var(--crm-grid-strong); border-radius: 10px; background: var(--crm-paper); min-width: 0;
}
.fin-amtblock > .fin-amthead, .fin-amtblock > .fin-amtval, .fin-amtblock > .fin-amtwhat { grid-column: 1; }
.fin-amtblock > .fin-kv { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
.fin-amtblock > .fin-ovrline { grid-column: 1 / -1; }
.fin-amthead { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; }
.fin-amttitle { margin: 0; font-family: var(--font-serif); font-size: 16px; font-weight: 500; color: var(--crm-head); }
.fin-amtval { margin: 4px 0 4px; font-family: var(--font-serif); font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--crm-head); font-variant-numeric: tabular-nums; }
.fin-amtval.fin-unknown, .fin-amtval.fin-none { font-size: 20px; color: var(--crm-ink-2); }
.fin-amtwhat { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--crm-ink-mid); }
.fin-kv { margin: 0; }
.fin-amtblock > .fin-kv > div:first-child { border-top: 0; }
.fin-ovrline { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--crm-ink-mid); }
.fin-ovrline > svg { flex: none; margin-top: 2px; color: var(--gold-ink); }
@media (max-width: 1180px) {
  .fin-amtblock { grid-template-columns: minmax(0, 1fr); }
  .fin-amtblock > .fin-kv { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .fin-amtblock > .fin-kv > div:first-child { border-top: 1px solid var(--crm-rule); }
}

/* The audit history: who, when, from what, to what, why. */
.fin-audit { margin: 0; padding: 0; list-style: none; }
.fin-audit-item { padding: 12px 0; border-bottom: 1px solid var(--crm-rule); }
.fin-audit-item:first-child { padding-top: 0; }
.fin-audit-top { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--crm-ink-2); }
.fin-audit-top b { font-weight: 600; color: var(--crm-head); }
.fin-audit-change { margin-top: 4px; font-size: 13.5px; color: var(--crm-head); font-variant-numeric: tabular-nums; }
.fin-audit-from { color: var(--crm-ink-2); text-decoration: line-through; }
.fin-audit-why { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--crm-ink-mid); }

/* An agent's site: Payment 1, Payment 2, true-ups, each with its evidence. */
.fin-asite { margin: 0 0 14px; padding: 4px 16px 6px; border: 1px solid var(--crm-grid-strong); border-radius: 10px; background: var(--crm-paper); scroll-margin-top: 12px; }
.fin-target { box-shadow: 0 0 0 2px var(--crm-gold); }
.fin-asite-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 10px 0 8px; }
.fin-asite-head .fin-sub { width: auto; }
.fin-asite-title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: var(--crm-head); }
.fin-goto { margin-left: auto; }
.fin-pay { padding: 10px 0; border-top: 1px solid var(--crm-rule); }
.fin-pay-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.fin-pay-title { min-width: 84px; font-size: 13px; font-weight: 600; color: var(--crm-head); }
.fin-pay-amt { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--crm-head); font-variant-numeric: tabular-nums; }
.fin-pay-amt.fin-unknown { font-size: 13px; font-weight: 500; color: var(--amber-ink); }
.fin-pay-basis { margin: 3px 0 6px; font-size: 12px; line-height: 1.45; color: var(--crm-ink-2); }
.fin-pay-none { margin: 0; padding: 10px 0; border-top: 1px solid var(--crm-rule); font-size: 12.5px; color: var(--crm-ink-2); }
.fin-evlist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.fin-evitem { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; font-size: 13px; line-height: 1.4; }
.fin-ev-label { color: var(--crm-ink); }
.fin-ev-when { font-size: 12px; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; }
.fin-ev-src { grid-column: 2 / -1; font-size: 11.5px; color: var(--crm-ink-2); }
.fin-ev-met .fin-mark { color: var(--crm-clear); }
.fin-ev-not .fin-mark { color: var(--crm-ink-2); }
.fin-ev-unk .fin-mark, .fin-ev-unk .fin-ev-when { color: var(--amber-ink); }
.fin-flags { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.fin-flag {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: 8px;
  background: var(--amber-bg); font-size: 12.5px; line-height: 1.45; color: var(--crm-ink-mid);
}
.fin-flag > .fin-mark { margin-top: 2px; color: var(--amber-ink); }
.fin-flag b { font-weight: 600; color: var(--crm-head); }
.fin-policy { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--crm-grid-strong); border-radius: 10px; background: var(--crm-paper); }
.fin-policy .fin-asite-title .fin-mark { color: var(--amber-ink); }
.fin-policy p { margin: 6px 0 10px; max-width: 72ch; font-size: 13px; line-height: 1.5; color: var(--crm-ink-mid); }
.fin-policy ul { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; color: var(--crm-ink); }

/* ── Dialogs: Prowl's dialog, in Finance's own scrim ─────────────────────── */
.fin-scrim {
  position: fixed; inset: 0; z-index: var(--crm-z-modal);
  max-width: none; margin: 0; box-sizing: border-box; padding: 24px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--crm-navy) 36%, transparent);
  animation: prowl-fade 0.16s ease-out;
}
[data-theme="dark"] .fin-scrim { background: color-mix(in srgb, var(--sidebar-deep) 72%, transparent); }
.fin-setup {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent); border-radius: 10px;
  background: var(--amber-bg); font-size: 13.5px; line-height: 1.5; color: var(--crm-ink-mid);
}
.fin-setup b { font-weight: 600; color: var(--crm-head); }
.fin-setup-mark, .fin-setup > svg { flex: none; display: inline-flex; margin-top: 1px; color: var(--amber-ink); }
.fin-setup-quiet { margin: 14px 0 0; border-color: var(--crm-rule); background: var(--crm-panel); font-size: 12.5px; }
.fin-setup-quiet > svg { color: var(--crm-ink-2); }
.fin-ovr-kv { margin: 8px 0 4px; }
.fin-field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.fin-field-k { font-size: 12.5px; font-weight: 600; color: var(--crm-head); }
.fin-field-hint { font-size: 12px; line-height: 1.45; color: var(--crm-ink-2); }
.fin-money-in { display: inline-flex; align-items: center; gap: 6px; color: var(--crm-ink-2); }
.fin-money-in .pt-input { width: 200px; font-variant-numeric: tabular-nums; }
.fin-field .pt-area { width: 100%; }

/* ── Loading, denied ─────────────────────────────────────────────────────── */
.fin-skel-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 14px 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); }
.fin-skel-kpi { display: flex; flex-direction: column; gap: 10px; }
.fin-bar-num { width: 70%; height: 26px; border-radius: 6px; }
.fin-denied-card { position: relative; padding-left: 52px; }
.fin-denied-mark { position: absolute; left: 20px; top: 20px; color: var(--crm-ink-2); }
.fin-denied .fin-head .prowl-tabs { visibility: hidden; }

/* ── Tablets ─────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  .fin-info::after, .fin-ptoggle::after { content: ""; position: absolute; inset: -10px; }
  .fin-ptoggle { position: relative; }
}
@media (min-width: 641px) and (max-width: 820px) {
  .fin-root :is(.fin-open, .fin-ptoggle, .fin-info) { min-height: 0; }
}

/* ── On a phone ─────────────────────────────────────────────────────────────
   No tables: each site is a list item whose Details open every column in
   place. Headlines two by two; the title's buttons under it, full width;
   every target at least 44px, every field 16px. */
@media (max-width: 640px) {
  .fin-kpi { padding: 12px 12px 14px; }
  .fin-kpi:nth-child(odd) { padding-left: 0; }
  .fin-kpi-num { font-size: 23px; }
  .fin-info { width: 36px; height: 36px; }
  .fin-titlebar .fin-titleacts { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  .fin-titleacts > .crm-btn { flex: 1 1 0; justify-content: center; height: 44px; }
  .fin-toolbar .crm-tbtn, .fin-controls .crm-view-chip, .fin-controls .crm-view-reset { min-height: 44px; }
  .fin-tool-sep { display: none; }
  .fin-gtotals { margin-left: 32px; width: 100%; }
  .fin-agentbtn { height: 44px; margin-left: 32px; }
  .fin-gnote { margin-left: 0; }
  .fin-root .pw-gtoggle { width: 44px; height: 44px; margin: -11px -10px -11px -11px; }
  .fin-skel-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-x { width: 44px; height: 44px; }
  .fin-scrim { padding: 0; place-items: stretch; }
  .fin-scrim :is(input, select, textarea) { font-size: 16px; }
  .fin-money-in .pt-input { width: 100%; height: 44px; }
  .fin-defpop-close { min-height: 44px; }
  .fin-menu .crm-pop-opt { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .fin-scrim { animation: none; }
  .fin-root .pw-caret { transition: none; }
}