/* Finance tab runway board (#340). Loaded after app.css; every class is
   prefixed fr- so nothing here can reach another tile, and every colour is a
   token from app.css so both themes and the LFG-green-only wall hold. No inline
   grid overrides anywhere: the KPI rows use the existing .kpis.k3/.k4 modifiers,
   which already carry the phone breakpoints. */

.fr-root{display:flex;flex-direction:column;gap:14px}
.fr-root > .card{margin:0}

/* The monthly cash path. Width follows the card; the viewBox scales. */
.fr-chart{margin:14px 0 4px}
.fr-svg{display:block;width:100%;height:auto;max-height:220px}
.fr-line{fill:none;stroke:var(--green);stroke-width:2.2;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.fr-dot{fill:var(--green-d)}
.fr-dot.neg{fill:var(--down)}
.fr-zero{stroke:var(--down);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.fr-floor{stroke:var(--amber);stroke-width:1;stroke-dasharray:2 4;opacity:.8}
.fr-tx{font-size:10.5px;fill:var(--dim);font-family:inherit}

/* Levers: two across on desktop, one on a phone. Label, slider, value. */
.fr-levers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;
  margin-top:14px;padding:14px;border-radius:10px;background:var(--panel2);
  border:1px solid var(--line)}
.fr-lever{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:4px 10px;font-size:12px;color:var(--muted)}
.fr-lever input{grid-column:1 / -1;width:100%;accent-color:var(--green);margin:0}
.fr-lever input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.fr-lv{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.fr-presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* Ledger: scrolls inside itself, capped so 60 days does not push the page. */
.fr-ledscroll{max-height:420px;overflow-y:auto;margin-top:10px}
.fr-led td{white-space:nowrap}
.fr-led td:nth-child(2){white-space:normal;min-width:14ch}
.fr-in{color:var(--up)}
.fr-out{color:var(--down)}
.fr-anchorrow td{font-weight:700;background:var(--panel2)}
/* Day-summary row: the day's net and end-of-day FSB, set apart from its line items. */
.fr-daysum td{font-weight:700;background:var(--panel2)}
.fr-daysum-l{font-style:italic;font-weight:600;color:var(--muted)}
/* Daily ledger is one scrolling timeline (past above today, forward below), so
   the column header sticks to the top of the scroll box and stays in view when
   the user scrolls up into posted history or down into the projection. */
.fr-led thead th{position:sticky;top:0;z-index:1;background:var(--card)}
/* Posted rows (QuickBooks, above today) read as settled history: muted, so the
   eye lands on today's balance and what is coming, not on what already cleared. */
.fr-past td{color:var(--muted)}
.fr-past td.mono{color:var(--dim)}
.fr-kind{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.03em;
  padding:1px 6px;border-radius:99px;background:var(--track);color:var(--muted);vertical-align:1px}
.fr-assumed{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.03em;
  padding:1px 6px;border-radius:99px;background:var(--track);color:var(--muted);
  vertical-align:1px}
/* Source tag on a forward ledger line: QB run-rate (derived) vs plan (config). */
.fr-tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.03em;
  padding:1px 6px;border-radius:99px;vertical-align:1px}
.fr-tag.qb{background:var(--green-bg);color:var(--green-d)}
.fr-tag.plan{background:var(--track);color:var(--muted)}
/* On a POSTED row, not a forward one: this payment is why a projected row for
   the same month is absent (#340 follow-up). Green, because it marks a plan
   already satisfied rather than a caveat about where a number came from. */
.fr-tag.covers{background:var(--green-bg);color:var(--green-d)}

/* Pull bar: top of the Finance page. The stamp answers "how fresh is this"
   before anything else is read; the status bar answers "did my click work",
   in colour, and stays up through the reload. */
.fr-pullbar{margin:0 0 18px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;background:var(--card)}
.fr-pb-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fr-pb-stamp{font-size:13px;color:var(--muted)}
.fr-pb-stamp b{color:var(--ink)}
.fr-pb-ago{color:var(--dim)}
.fr-pb-btn{border:none;border-radius:9px;padding:9px 16px;font:inherit;font-size:13px;
  font-weight:700;cursor:pointer;background:var(--green);color:#14181c}
.fr-pb-btn:hover{filter:brightness(1.06)}
.fr-pb-btn:disabled{opacity:.6;cursor:default}
.fr-pb-btn:focus-visible{outline:2px solid var(--green-d);outline-offset:2px}
.fr-pb-status{margin-top:10px;padding:11px 13px;border-radius:9px;font-size:13px;
  line-height:1.45;display:flex;align-items:center;gap:9px}
.fr-pb-status.run{background:var(--amber-bg);color:var(--amber)}
.fr-pb-status.ok{background:var(--green-bg);color:var(--green-d)}
.fr-pb-status.bad{background:var(--red-bg);color:var(--red)}
.fr-pb-status b{color:inherit}
.fr-pb-spin{width:14px;height:14px;flex:none;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:frspin .8s linear infinite}
@keyframes frspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.fr-pb-spin{animation:none}}

@media(max-width:640px){
  .fr-pull{margin-left:0}
  .fr-levers{grid-template-columns:1fr}
  .fr-ledscroll{max-height:360px}
}

/* ---------- cadence strip (spec section 7): the "am I okay" bands ---------- */
/* Pinned at the top of the page, above cash. Both slots collapse when empty so
   there is no stray gap before the module fills them (or when nothing alerts). */
#fi-cadence{display:flex;flex-direction:column;gap:14px;margin:0 0 18px}
#fi-cadence > .card{margin:0}
#fi-cadence:empty,#fi-alerts:empty,#fi-ledger:empty{display:none}
/* Daily ledger sits directly below the cadence bands. */
#fi-ledger{margin:0 0 18px}
#fi-ledger > .card{margin:0}
.fr-cadence .fi-hd{margin-bottom:12px}

/* TODAY hero: bigger numbers than a normal kpi so the top answers in one second. */
.fr-hero .kpi{padding:16px 17px}
.fr-hero .kpi .n{font-size:30px}
.fr-hero .kpi .n .s{font-size:13px}
@media(max-width:640px){.fr-hero .kpi .n{font-size:25px}}

/* Gap-trend word on the break-even tile. */
.fr-tr{font-weight:700}
.fr-tr.closing{color:var(--up)}
.fr-tr.widening{color:var(--down)}
.fr-tr.flat{color:var(--muted)}

/* Retention watch carries extra weight: it gates the growth spend. */
.fr-week .fr-watch{border-color:var(--amber);background:var(--amber-bg)}
.fr-week .fr-watch .l{color:var(--ink)}
.fr-watch .pill{font-size:14px;padding:3px 12px}

/* Alert banner: thin, rendered only when something crosses a line. */
.fr-alerts{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;padding:11px 14px;
  border-radius:12px;background:var(--amber-bg);border:1px solid var(--amber)}
.fr-alerts-tag{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--amber);padding-top:2px}
.fr-alerts ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.fr-alerts li{font-size:13px;color:var(--ink);line-height:1.4}
.fr-alerts li b{color:var(--red)}

/* ---------- forward-ledger overrides (#340 part 2) ------------------------
   The edit control is deliberately quiet: it sits on a row of money and must
   not compete with the figures. It only exists for seats the server said may
   write, so it never appears as a button that cannot do anything. */
.fr-ovr-btn{font:inherit;font-size:10px;line-height:1;margin-left:6px;padding:2px 7px;
  border:1px solid var(--line);border-radius:99px;background:var(--panel2);
  color:var(--muted);cursor:pointer}
.fr-ovr-btn:hover,.fr-ovr-btn:focus-visible{color:var(--ink);border-color:var(--dim)}
/* The OUT amount is a second way into the editor, but ONLY when the server said
   can_write: the span carries this class solely in that case, so the pointer and
   the hover underline appear exactly when a click will do something. */
.fr-ovr-amt-click{cursor:pointer;text-underline-offset:2px}
.fr-ovr-amt-click:hover,.fr-ovr-amt-click:focus-visible{text-decoration:underline;color:var(--ink)}
/* Account tag on a posted row (#435 combined cash ledger): which LFG checking
   account it posted to (FSB / AMX), muted so it does not compete with the payee. */
.fr-acct{font-size:9px;font-weight:600;letter-spacing:.04em;color:var(--muted);
  border:1px solid var(--line);border-radius:4px;padding:0 4px;margin-left:5px;vertical-align:middle}
/* A card statement row (#435-B2) expands to the vendor lines it rolled up. */
.fr-stmt{display:inline-block;margin-left:6px;vertical-align:baseline}
.fr-stmt>summary{cursor:pointer;color:var(--muted);font-size:11px;list-style:none}
.fr-stmt>summary:hover{color:var(--ink)}
.fr-stmt-list{margin:4px 0 2px;padding:0 0 0 2px;list-style:none;font-size:11px}
.fr-stmt-list li{display:flex;gap:8px;align-items:center;padding:1px 0;color:var(--muted)}
.fr-stmt-l{flex:1 1 auto}
.fr-stmt-a{flex:0 0 auto;color:var(--ink)}
/* A hand-set number has to be visibly hand-set, next to the source tags that
   mean "derived" and "config". */
.fr-tag.ovr{background:var(--amber-bg,var(--track));color:var(--amber-d,var(--ink))}

/* The panel opens INSIDE the row's label cell, so the line it edits stays on
   screen. Wraps on a phone rather than scrolling sideways: this is a decision
   about money and every option should be visible at once. */
.fr-ovr-panel{display:block;margin:6px 0 2px;padding:8px;border:1px solid var(--line);
  border-radius:8px;background:var(--panel2);white-space:normal;max-width:420px}
.fr-ovr-h{font-size:11px;font-weight:700;color:var(--ink);margin-bottom:6px}
.fr-ovr-actions{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.fr-ovr-panel button{font:inherit;font-size:11px;padding:3px 8px;border:1px solid var(--line);
  border-radius:6px;background:var(--card);color:var(--ink);cursor:pointer}
.fr-ovr-panel button:hover{border-color:var(--dim)}
.fr-ovr-reset{margin-left:auto;color:var(--muted)}
.fr-ovr-panel input{font:inherit;font-size:11px;padding:3px 6px;border:1px solid var(--line);
  border-radius:6px;background:var(--card);color:var(--ink);min-width:0}
.fr-ovr-date{width:9.5em}
.fr-ovr-amt{width:7em}
.fr-ovr-note{width:100%;margin-top:6px}
.fr-ovr-msg{font-size:10.5px;color:var(--muted);margin-top:5px;min-height:1em}

/*
  #367-F13. PROVENANCE, NOT FRESHNESS.

  These labels say where a figure came from and as of when ("FSB as of Oct 2",
  "stack from Financial's config"). That is worth keeping on a money page. What
  is not worth keeping is the DOT: they rendered as .pz-fresh pills, the same
  green/amber light the pipeline freshness uses, so a Finance card could show a
  green dot while its own footer was amber. Two lights, one tile, different
  questions.

  No <i> dot at all, so it reads as a note. .warn keeps the cautionary ones
  (hand-placed anchor, posted rows unavailable) distinguishable without
  borrowing the freshness vocabulary to do it.
*/
.fr-prov{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;
  padding:2px 8px;border-radius:99px;letter-spacing:.02em;
  background:var(--track);color:var(--muted)}
.fr-prov.warn{color:var(--amber)}