/* ─────────────────────────────────────────────────────────────────────────────
 * finance/finance-agent.css — layout for js/finance-agent.js (Finance → Finance Agent)
 *
 * Everything is scoped under #tab-finance-agent, so nothing here can restyle another
 * screen. Colours are --ds-* tokens; the only local colours are the three forecast
 * series steps, declared once per theme below.
 *
 * ⚠️ FORECAST SERIES — an ORDINAL one-hue ramp (0–30 / 31–60 / 61–90 days), validated
 * with the dataviz validator on 2026-10-01 against the real surfaces:
 *   light, surface #ffffff (--ds-bg1):  #104281, #2a78d6, #86b6ef  → ALL CHECKS PASS
 *   dark,  surface #161b22 (--ds-bg1):  #9ec5f4, #3987e5, #184f95  → ALL CHECKS PASS
 * The step nearest the surface clears 2:1 in both themes. Do not swap in a badge token
 * ("the DS blue"): docs/design-system.md §3.5 — --ds-blue fails the dark band as a fill.
 * The theme is OS-only in this app (prefers-color-scheme), so the dark steps follow it.
 * ──────────────────────────────────────────────────────────────────────────── */
#tab-finance-agent{
  --fa-s1:#104281;
  --fa-s2:#2a78d6;
  --fa-s3:#86b6ef;
}
@media (prefers-color-scheme: dark){
  #tab-finance-agent{
    --fa-s1:#9ec5f4;
    --fa-s2:#3987e5;
    --fa-s3:#184f95;
  }
}

/* ⚠️ THE PAGE PAINTS ITS OWN SURFACE. #content is a literal light #f4f7fb in BOTH themes, so --ds-text
   (light in dark mode) written straight onto it is invisible. Measured 2026-10-01 in headless dark mode:
   the title rendered rgb(230,232,238) on rgb(244,247,251). The page sits on --ds-bg0 instead. */
#tab-finance-agent .fa-page{display:flex;flex-direction:column;gap:var(--ds-sp3);padding:var(--ds-sp4);min-width:0;
  background:var(--ds-bg0);color:var(--ds-text);border-radius:var(--ds-radius-lg)}
#tab-finance-agent .fa-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ds-sp4);flex-wrap:wrap}
#tab-finance-agent .fa-head-text{min-width:0;flex:1 1 420px}
#tab-finance-agent .fa-title{margin:0;font-size:20px;font-weight:700;color:var(--ds-text)}
#tab-finance-agent .fa-sub{font-size:13px;color:var(--ds-text-muted);margin-top:3px;max-width:760px}
#tab-finance-agent .fa-run{font-size:12px;color:var(--ds-text-muted);margin-top:6px}
#tab-finance-agent .fa-head-actions{display:flex;gap:var(--ds-sp2);align-items:center;flex-wrap:wrap}
#tab-finance-agent .fa-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--ds-border);padding-bottom:4px}
#tab-finance-agent .fa-tab{padding:6px 12px;color:var(--ds-text-muted)}
#tab-finance-agent .fa-tab.is-on{background:var(--ds-blue-dim);color:var(--ds-blue);font-weight:600}
#tab-finance-agent .fa-view{display:flex;flex-direction:column;gap:var(--ds-sp3);min-width:0}
#tab-finance-agent .fa-gap{margin-top:var(--ds-sp2)}
#tab-finance-agent .fa-row{display:flex;gap:var(--ds-sp2);align-items:center;flex-wrap:wrap}
#tab-finance-agent .fa-small{font-size:12px;color:var(--ds-text-muted)}
#tab-finance-agent .fa-muted{color:var(--ds-text-dim)}
#tab-finance-agent .fa-warn{color:var(--ds-amber);font-weight:600}
#tab-finance-agent .fa-k{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-text-muted);margin-right:4px}
#tab-finance-agent .fa-r{text-align:right}
#tab-finance-agent .fa-h3{margin:var(--ds-sp3) 0 0;font-size:16px;color:var(--ds-text)}
#tab-finance-agent .fa-scroll{overflow-x:auto;max-width:100%}
#tab-finance-agent .fa-total td{font-weight:600;background:var(--ds-bg2)}
#tab-finance-agent .fa-ul{margin:0;padding-left:18px;font-size:13px;line-height:1.7}
#tab-finance-agent .fa-pre{margin:0;font-family:var(--ds-mono);font-size:11px;white-space:pre-wrap;word-break:break-word;color:var(--ds-text-muted);max-width:640px}
#tab-finance-agent .fa-mono{font-family:var(--ds-mono);font-size:12px}
#tab-finance-agent .fa-flags{display:inline-flex;flex-wrap:wrap;gap:4px;align-self:flex-start}

/* Chips rendered as <button class="ds-btn ds-chip">: the chip shape wins over the button's. */
#tab-finance-agent .ds-btn.ds-chip{padding:4px 12px;border-radius:var(--ds-radius-full);font-size:12px}

/* Tiles */
#tab-finance-agent .fa-tiles{display:flex;gap:var(--ds-sp2);flex-wrap:wrap}
#tab-finance-agent .fa-tiles .ds-tile{flex:1 1 150px}

/* Queue items, drafts */
#tab-finance-agent .fa-list{display:flex;flex-direction:column;gap:var(--ds-sp2)}
#tab-finance-agent .fa-item{gap:var(--ds-sp2)}
#tab-finance-agent .fa-item-head{display:flex;align-items:baseline;gap:var(--ds-sp2);flex-wrap:wrap}
#tab-finance-agent .fa-rank{font-family:var(--ds-mono);font-weight:700;color:var(--ds-text-muted);min-width:34px}
#tab-finance-agent .fa-type{font-weight:600;color:var(--ds-text);text-transform:capitalize}
#tab-finance-agent .fa-dollars{font-family:var(--ds-mono);font-weight:700;font-size:15px;color:var(--ds-text)}
#tab-finance-agent .fa-meta{font-size:12px;color:var(--ds-text-dim)}
#tab-finance-agent .fa-reason{font-size:13px;line-height:1.5;color:var(--ds-text)}
#tab-finance-agent .fa-evid,#tab-finance-agent .fa-prop{font-size:12px;line-height:1.6}
#tab-finance-agent .fa-actions{display:flex;gap:var(--ds-sp2);flex-wrap:wrap;align-items:center}
#tab-finance-agent .fa-panel{display:flex;flex-direction:column;gap:6px;padding:var(--ds-sp3);border:1px solid var(--ds-border);
  border-left:3px solid var(--ds-blue);border-radius:var(--ds-radius-sm);background:var(--ds-bg2)}
#tab-finance-agent .fa-panel-title{font-weight:600;font-size:14px;color:var(--ds-text)}
#tab-finance-agent .fa-fields{display:flex;flex-direction:column;gap:6px}
#tab-finance-agent .fa-lbl{font-size:11px;color:var(--ds-text-dim);display:block;margin-top:4px}
#tab-finance-agent .fa-wide{width:100%;max-width:720px}
#tab-finance-agent .fa-textarea{resize:vertical;line-height:1.5}
#tab-finance-agent .fa-radios{display:flex;flex-direction:column;gap:4px}
#tab-finance-agent .fa-radio{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ds-text);cursor:pointer}
#tab-finance-agent .fa-subject{font-weight:600;font-size:14px;color:var(--ds-text)}
#tab-finance-agent .fa-body{font-size:13px;line-height:1.55;white-space:pre-wrap;color:var(--ds-text);
  padding:var(--ds-sp2) var(--ds-sp3);background:var(--ds-bg2);border-radius:var(--ds-radius-sm);max-height:280px;overflow:auto}

/* Close checklist rows keep the row tint loud (status colour stays LOUD). */
#tab-finance-agent .fa-close-blocked td{background:var(--ds-row-red)}
#tab-finance-agent .fa-close-attention td{background:var(--ds-row-amber)}
#tab-finance-agent .fa-close-not_loaded td{background:var(--ds-row-gray)}

/* Key/value record table */
#tab-finance-agent .fa-kv th{width:220px;text-transform:none;letter-spacing:0;font-size:12px;vertical-align:top}

/* Bills & bank */
#tab-finance-agent .fa-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--ds-sp3)}
#tab-finance-agent .fa-intake{gap:var(--ds-sp2)}
#tab-finance-agent .fa-drop{position:relative;display:flex;align-items:center;justify-content:center;min-height:96px;padding:var(--ds-sp4);
  border:2px dashed var(--ds-border-strong);border-radius:var(--ds-radius);color:var(--ds-text-muted);font-size:13px;
  text-align:center;cursor:pointer;background:var(--ds-bg2)}
#tab-finance-agent .fa-drop:hover,#tab-finance-agent .fa-drop.is-over{border-color:var(--ds-blue);color:var(--ds-blue);background:var(--ds-blue-dim)}
#tab-finance-agent .fa-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}

/* Forecast chart */
#tab-finance-agent .fa-chart-card{gap:var(--ds-sp2)}
#tab-finance-agent .fa-legend{display:flex;gap:var(--ds-sp4);flex-wrap:wrap;font-size:12px;color:var(--ds-text-muted)}
#tab-finance-agent .fa-key{display:inline-flex;align-items:center;gap:6px}
#tab-finance-agent .fa-sw{display:inline-block;width:12px;height:12px;border-radius:3px}
#tab-finance-agent .fa-sw--1{background:var(--fa-s1)}
#tab-finance-agent .fa-sw--2{background:var(--fa-s2)}
#tab-finance-agent .fa-sw--3{background:var(--fa-s3)}
#tab-finance-agent .fa-svg{width:100%;height:auto;display:block}
#tab-finance-agent .fa-seg--1{fill:var(--fa-s1)}
#tab-finance-agent .fa-seg--2{fill:var(--fa-s2)}
#tab-finance-agent .fa-seg--3{fill:var(--fa-s3)}
#tab-finance-agent .fa-seg:hover{stroke:var(--ds-text);stroke-width:1}
#tab-finance-agent .fa-grid{stroke:var(--ds-border);stroke-width:1}
#tab-finance-agent .fa-base{stroke:var(--ds-border-strong);stroke-width:1}
#tab-finance-agent .fa-axis{fill:var(--ds-text-dim);font-size:10px;font-variant-numeric:tabular-nums}
#tab-finance-agent .fa-lab{fill:var(--ds-text-muted);font-size:11px}
#tab-finance-agent .fa-val{fill:var(--ds-text);font-size:11px;font-variant-numeric:tabular-nums}

/* Ask */
#tab-finance-agent .fa-ask{gap:var(--ds-sp2)}
#tab-finance-agent .fa-chat-log{display:flex;flex-direction:column;gap:var(--ds-sp2);max-height:520px;overflow:auto}
#tab-finance-agent .fa-msg{padding:var(--ds-sp2) var(--ds-sp3);border:1px solid var(--ds-border);border-radius:var(--ds-radius-sm);background:var(--ds-bg1);font-size:13px}
#tab-finance-agent .fa-msg--user{background:var(--ds-bg2)}
#tab-finance-agent .fa-msg--err{border-color:var(--ds-amber);background:var(--ds-amber-dim)}
#tab-finance-agent .fa-answer{white-space:pre-wrap;line-height:1.55;color:var(--ds-text);margin-top:4px}
#tab-finance-agent .fa-cites{margin-top:6px;font-size:12px;line-height:1.7}

@media (max-width:640px){
  #tab-finance-agent .fa-kv th{width:120px}
  #tab-finance-agent .fa-two{grid-template-columns:1fr}
}
#tab-finance-agent .fa-fields .ds-input{max-width:720px}

/* In-screen links are <button class="ds-btn ds-link fa-link"> (keyboard-focusable, announced
   as buttons). Strip the button chrome so they read inline as .ds-link text, and keep a
   visible focus ring for keyboard users. */
#tab-finance-agent .ds-btn.fa-link{display:inline;padding:0;margin:0;border:0;background:none;box-shadow:none;
  min-height:0;height:auto;font:inherit;font-weight:600;line-height:inherit;color:var(--ds-blue);
  text-align:left;vertical-align:baseline;cursor:pointer;white-space:normal}
#tab-finance-agent .ds-btn.fa-link:hover{text-decoration:underline;background:none}
#tab-finance-agent .ds-btn.fa-link:focus-visible{outline:2px solid var(--ds-blue);outline-offset:2px;border-radius:2px}
/* A Close row's way out: the records and steps behind a verdict that is not OK. */
#tab-finance-agent .fa-wayout{margin-top:3px;line-height:1.6}