/* Finance page (owner only). Builds on sales.css (sp-*) and shared GOLDLEAF tokens. Ledger feel: ink, brass, ruled lines. */
.fi-page { --fi-brass: #94700f; --fi-ink: #2a2414; --fi-teal: #1f4d5c; --fi-rust: #a2361f; --fi-sage: #2f6b45; --fi-line: rgba(120,100,60,.25); --fi-paper: rgba(255,250,235,.6);
  display: grid; gap: 14px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.fi-page * { box-sizing: border-box; }
.fi-head { display: grid; gap: 8px; align-content: start; border-bottom: 3px double var(--fi-line); padding-bottom: 10px; }
.fi-head p { margin: 0; }
/* Keep the empty live region mounted, without an empty paragraph/grid row.
   Nonempty status text keeps its existing visible layout and announcements. */
.fi-status:empty { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); }
.fi-kicker { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fi-brass); font-weight: 700; }
.fi-title { margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.01em; }
.fi-title:focus { outline: none; }
.fi-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 12px 14px; border: 1px solid var(--fi-line); border-radius: 12px; background: var(--panel, var(--fi-paper)); }
.fi-field { display: grid; gap: 4px; min-width: 0; flex: 1 1 180px; }
.fi-field label { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.fi-field select, .fi-field input { min-height: 40px; width: 100%; font: inherit; }
.fi-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.fi-banner { display: flex; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--fi-line); border-left: 4px solid var(--fi-sage); background: var(--fi-paper); }
.fi-banner h2 { margin: 0; font-size: 1rem; } .fi-banner p { margin: 2px 0 0; }
.fi-banner-stale, .fi-banner-partial, .fi-banner-unknown { border-left-color: var(--fi-brass); }
.fi-banner-missing { border-left-color: var(--fi-rust); }
.fi-banner-mark { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: currentColor; opacity: .5; flex: none; }
.fi-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.fi-kpi { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--fi-line); border-radius: 12px; background: var(--panel, var(--fi-paper)); align-content: start; }
.fi-kpi-l { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fi-brass); font-weight: 700; }
.fi-kpi-n { font-size: 1.5rem; font-variant-numeric: tabular-nums; font-weight: 650; }
.fi-card { min-width: 0; }
.fi-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.fi-table-wrap { overflow-x: auto; max-width: 100%; }
.fi-table-wrap:focus-visible { outline: 2px solid var(--fi-brass); outline-offset: 2px; }
.fi-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9rem; }
.fi-table th, .fi-table td { padding: 8px 10px; border-bottom: 1px solid var(--fi-line); text-align: left; vertical-align: top; }
.fi-table thead th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.fi-num { text-align: right !important; }
.fi-sel { background: rgba(196,150,40,.12); }
.fi-month-btn { font: inherit; font-weight: 650; background: none; border: 0; padding: 4px 0; color: var(--fi-teal); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; text-align: left; }
.fi-month-btn[aria-pressed="true"] { color: var(--fi-ink); text-decoration-thickness: 2px; }
.fi-month-btn:focus-visible, .fi-page button:focus-visible, .fi-page input:focus-visible, .fi-page select:focus-visible, .fi-summary:focus-visible { outline: 2px solid var(--fi-brass); outline-offset: 2px; }
.fi-unav { color: var(--muted, #6b6150); font-style: italic; }
.fi-band, .fi-comp, .fi-src, .fi-sev { display: inline-block; font-size: .7rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--fi-line); white-space: nowrap; font-style: normal; }
.fi-band-within { color: var(--fi-sage); border-color: currentColor; }
.fi-band-above, .fi-band-below { color: var(--fi-rust); border-color: currentColor; }
.fi-band-none, .fi-band-na { color: var(--muted, #6b6150); }
.fi-comp-ok { color: var(--fi-sage); } .fi-comp-partial { color: var(--fi-brass); border-color: currentColor; }
.fi-srcs { display: flex; flex-wrap: wrap; gap: 4px; }
.fi-src { color: var(--fi-teal); } .fi-src-est { color: var(--fi-brass); border-style: dashed; }
.fi-chart-wrap { width: 100%; max-width: 100%; }
.fi-chart { width: 100%; height: auto; display: block; }
.fi-bar { fill: var(--fi-teal); } .fi-bar-partial { fill: var(--fi-teal); opacity: .4; }
.fi-line { fill: none; stroke: var(--fi-rust); stroke-width: 2; } .fi-dot { fill: var(--fi-rust); }
.fi-band-zone { fill: rgba(47,107,69,.1); }
.fi-grid { stroke: var(--fi-line); stroke-dasharray: 3 4; } .fi-axis { stroke: var(--fi-ink); opacity: .5; }
.fi-tick { font-size: 11px; fill: currentColor; opacity: .75; } .fi-unk { font-size: 12px; fill: var(--fi-brass); }
.fi-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; margin: 8px 0; list-style: none; font-size: .8rem; }
.fi-legend li { display: flex; align-items: center; gap: 6px; }
.fi-sw { width: 14px; height: 10px; display: inline-block; border-radius: 2px; }
.fi-sw-bar { background: var(--fi-teal); } .fi-sw-bar.fi-bar-partial { opacity: .4; }
.fi-sw-line { height: 2px; background: var(--fi-rust); } .fi-sw-zone { background: rgba(47,107,69,.25); }
.fi-summary { margin: 6px 0; }
.fi-details summary { cursor: pointer; padding: 6px 0; font-weight: 600; min-height: 32px; }
.fi-anoms { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fi-anom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--fi-line); border-left: 4px solid var(--fi-brass); border-radius: 10px; }
.fi-anom-main { display: grid; gap: 3px; min-width: 0; flex: 1 1 200px; }
.fi-sev-high, .fi-sev-critical { border-left-color: var(--fi-rust); }
.fi-sev { justify-self: start; }
.fi-dl { display: grid; gap: 6px; margin: 0 0 10px; }
.fi-dl div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; border-bottom: 1px dotted var(--fi-line); padding-bottom: 4px; }
.fi-dl dt { font-weight: 600; } .fi-dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.fi-bands-form { display: grid; gap: 10px; }
.fi-bands-form fieldset { border: 1px solid var(--fi-line); border-radius: 10px; padding: 8px 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.fi-bands-form legend { font-weight: 650; padding: 0 4px; }
.fi-bands-form .fi-field { flex: 1 1 120px; }
.fi-nohigh { align-self: end; margin: 0 0 10px; }
.fi-xero-off { font-weight: 650; color: var(--fi-brass); }
.fi-run { display: flex; flex-wrap: wrap; gap: 8px; }
.fi-run .btn, .fi-anom .btn { min-height: 40px; }
.fi-neutral h2 { margin-top: 0; }
@media (max-width: 720px) {
  .fi-table-wrap { overflow-x: visible; }
  .fi-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fi-table, .fi-table tbody, .fi-table tr, .fi-table th, .fi-table td { display: block; width: 100%; }
  .fi-table tr { border: 1px solid var(--fi-line); border-radius: 10px; margin-bottom: 10px; padding: 4px 0; }
  .fi-table td { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; border-bottom: 1px dotted var(--fi-line); text-align: right; }
  .fi-table td::before { content: attr(data-label); font-weight: 600; text-align: left; }
  .fi-table tr td:last-child { border-bottom: 0; }
  .fi-kpi-n { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .fi-page * { transition: none !important; animation: none !important; } }