/* Cash Forecast page (accounting portal). Loaded by index.html.
   Colour rule: every text colour is a theme token with the dark-mode hex as
   its fallback — var(--ok-text,#4caf50) — so dark mode keeps its bright
   palette and light mode resolves to the dark, readable one. SVG marks use
   classes (never fill="…" attributes, which the light-mode overrides cannot
   reach). */

#page-cashfc .acc-content { max-width: 1480px; }
/* Page-local colour tokens. The portal's --dim is #5e6675 in dark mode (2.9:1
   on the panel) — too faint for the amount of secondary text on this page.
   --dim-text / --bad-text / --ok-text / --warn-text exist ONLY in light mode
   (cinti-theme.css), so in dark these resolve to the brighter fallbacks
   below and in light to the theme's dark, readable values. */
#page-cashfc {
  --cfc-dim: var(--dim-text, #a3adc0);
  --cfc-ok: var(--ok-text, #5fd068);
  --cfc-bad: var(--bad-text, #ff7a70);
  --cfc-warn: var(--warn-text, #ffc46b);
  --cfc-hist-in: #3f7a4a;
  --cfc-hist-out: #7a3b3b;
}
html[data-theme="light"] #page-cashfc {
  --cfc-hist-in: #5d8a64;
  --cfc-hist-out: #a8605a;
}

.cfc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cfc-title { font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.cfc-subtitle { font-size: 12px; color: var(--cfc-dim); margin-top: 4px; line-height: 1.5; }
.cfc-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cfc-seg { display: inline-flex; background: rgba(var(--accent-rgb, 38, 189, 214), 0.06); border: 1px solid var(--panel-border); border-radius: 8px; padding: 2px; }
.cfc-seg button { border: 0; background: none; color: var(--cfc-dim); font: inherit; font-size: 11px; padding: 5px 11px; border-radius: 6px; cursor: pointer; }
.cfc-seg button.on { background: rgba(var(--accent-rgb, 38, 189, 214), 0.16); color: var(--accent-text, var(--accent)); font-weight: 600; }
.cfc-btn { background: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text); padding: 6px 12px; border-radius: 6px; font: inherit; font-size: 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.cfc-btn:hover { border-color: var(--accent); }
.cfc-select { background: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text); padding: 5px 8px; border-radius: 6px; font: inherit; font-size: 11px; cursor: pointer; }
.cfc-select:hover, .cfc-select:focus { border-color: var(--accent); outline: none; }
.cfc-btn:disabled { opacity: .55; cursor: progress; }

/* KPI row */
.cfc-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
/* Container queries, not media queries: the agent panel beside the page eats
   ~300px, so the viewport width says nothing about the space this page has. */
#cfc-root { container: cfc / inline-size; }
@container cfc (max-width: 1040px) { .cfc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container cfc (max-width: 620px) { .cfc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cfc-kpi-value { font-size: 20px; } }
@container cfc (max-width: 380px) { .cfc-kpis { grid-template-columns: minmax(0, 1fr); } }
.cfc-kpi { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 12px; padding: 14px 16px; min-width: 0; position: relative; overflow: hidden; }
.cfc-kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cfc-kpi-bar, transparent); }
.cfc-kpi.k-in  { --cfc-kpi-bar: var(--cfc-ok); }
.cfc-kpi.k-out { --cfc-kpi-bar: var(--cfc-bad); }
.cfc-kpi.k-low { --cfc-kpi-bar: var(--accent); }
.cfc-kpi.k-risk { --cfc-kpi-bar: var(--cfc-warn); }
.cfc-kpi.k-cash { --cfc-kpi-bar: var(--accent); }
/* Drill-down: a tile that opens its own page. */
.cfc-kpi.drill { cursor: pointer; transition: border-color .15s, transform .15s; }
.cfc-kpi.drill:hover, .cfc-kpi.drill:focus-visible { border-color: var(--accent); outline: none; transform: translateY(-1px); }
.cfc-kpi-go { float: right; font-size: 14px; line-height: 1; color: var(--accent-text, var(--accent)); opacity: .55; transition: opacity .15s, transform .15s; }
.cfc-kpi.drill:hover .cfc-kpi-go, .cfc-kpi.drill:focus-visible .cfc-kpi-go { opacity: 1; transform: translateX(2px); }
.cfc-drill-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cfc-drill-title { font-size: 16px; }
.cfc-kpis.cfc-kpis-drill { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cfc-kpi-label { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cfc-dim); }
.cfc-kpi-value { font-size: 24px; font-weight: 300; color: var(--text); margin-top: 6px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.cfc-kpi-sub { font-size: 11px; color: var(--cfc-dim); margin-top: 5px; line-height: 1.4; }
.cfc-pos { color: var(--cfc-ok); }
.cfc-neg { color: var(--cfc-bad); }
.cfc-warn { color: var(--cfc-warn); }
.cfc-dim { color: var(--cfc-dim); }

/* Cards */
.cfc-card { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; min-width: 0; }
.cfc-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cfc-card-title { font-size: 13px; font-weight: 600; color: var(--text); }
.cfc-card-note { font-size: 11px; color: var(--cfc-dim); line-height: 1.5; }
.cfc-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
@container cfc (max-width: 1100px) { .cfc-two { grid-template-columns: minmax(0, 1fr); } }

/* Legend */
.cfc-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--cfc-dim); }
.cfc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cfc-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cfc-sw.in { background: var(--cfc-ok); }
.cfc-sw.exp { background: rgba(244, 67, 54, .28); box-shadow: inset 0 0 0 1px var(--cfc-bad); }
.cfc-sw.out { background: var(--cfc-bad); }
.cfc-sw.hist { background: linear-gradient(90deg, var(--cfc-hist-in) 50%, var(--cfc-hist-out) 50%); }
.cfc-sw.naive { background: var(--cfc-dim); opacity: .55; }
.cfc-sw.bal { background: var(--accent); height: 3px; border-radius: 2px; width: 14px; }

/* Chart (SVG) */
.cfc-chart { position: relative; width: 100%; }
.cfc-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.cfc-chart .grid { stroke: var(--panel-border); stroke-width: 1; }
.cfc-chart .zero { stroke: var(--cfc-dim); stroke-width: 1; opacity: .6; }
.cfc-chart .axis { fill: var(--cfc-dim); font-size: 10px; font-family: inherit; }
.cfc-chart .axis.today { fill: var(--accent-text, var(--accent)); font-weight: 700; }
.cfc-chart .b-in { fill: var(--cfc-ok); }
.cfc-chart .b-exp { fill: var(--cfc-bad); opacity: .28; stroke: var(--cfc-bad); stroke-width: 1; stroke-dasharray: 2 2; }
.cfc-chart .b-out { fill: var(--cfc-bad); opacity: .9; }
.cfc-chart .b-hin { fill: var(--cfc-hist-in); }
.cfc-chart .b-hout { fill: var(--cfc-hist-out); }
.cfc-chart .bal-line { fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.cfc-chart .bal-area { fill: var(--accent); opacity: .09; }
.cfc-chart .bal-dot { fill: var(--panel-bg, #121c34); stroke: var(--accent); stroke-width: 2; }
.cfc-chart .low-dot { fill: var(--accent); }
.cfc-chart .low-label { fill: var(--text); font-size: 11px; font-weight: 600; }
.cfc-chart .today-line { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.cfc-chart .forecast-bg { fill: rgba(var(--accent-rgb, 38, 189, 214), 0.035); }
.cfc-chart .hit { fill: transparent; cursor: pointer; }
.cfc-chart .hl { fill: rgba(var(--accent-rgb, 38, 189, 214), 0.08); }
.cfc-chart .neg-zone { fill: var(--cfc-bad); opacity: .06; }
.cfc-tip { position: absolute; pointer-events: none; z-index: 20; min-width: 190px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; padding: 10px 12px; font-size: 11px; color: var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, .28); opacity: 0; transition: opacity .12s; }
.cfc-tip.on { opacity: 1; }
.cfc-tip b { font-weight: 600; }
.cfc-tip .r { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; font-variant-numeric: tabular-nums; }
.cfc-tip .h { font-weight: 600; margin-bottom: 5px; }
.cfc-tip .sep { border-top: 1px solid var(--panel-border); margin: 5px 0; }

/* Tables */
.cfc-scroll { overflow-x: auto; border-radius: 8px; }
.cfc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.cfc-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cfc-dim); padding: 8px 10px; border-bottom: 1px solid var(--panel-border); white-space: nowrap; background: var(--panel-bg); position: sticky; top: 0; z-index: 2; }
.cfc-table td { padding: 8px 10px; border-bottom: 1px solid var(--panel-border); color: var(--text); white-space: nowrap; }
.cfc-table tr:last-child td { border-bottom: 0; }
.cfc-table .r { text-align: right; }
.cfc-table tbody tr:hover td { background: rgba(var(--accent-rgb, 38, 189, 214), 0.04); }
.cfc-table tr.low td { background: rgba(var(--accent-rgb, 38, 189, 214), 0.08); }
.cfc-table tr.total td { font-weight: 600; border-top: 1px solid var(--panel-border); }
.cfc-table .sub { font-size: 10.5px; color: var(--cfc-dim); }
.cfc-table td.sticky, .cfc-table th.sticky { position: sticky; left: 0; z-index: 3; background: var(--panel-bg); }
.cfc-table th.sticky { z-index: 4; }

/* Heat grid */
.cfc-grid td.cell { text-align: right; min-width: 64px; padding: 7px 8px; font-size: 11.5px; }
.cfc-grid td.cell.z { color: var(--cfc-dim); }
.cfc-grid tr.clickable { cursor: pointer; }
.cfc-grid tr.expanded td { background: rgba(var(--accent-rgb, 38, 189, 214), 0.05); }
.cfc-grid tr.detail td { background: rgba(var(--accent-rgb, 38, 189, 214), 0.03); padding: 0; }
.cfc-detail { padding: 10px 14px 12px 28px; }
.cfc-detail table { width: auto; min-width: 520px; font-size: 11.5px; }
.cfc-detail td, .cfc-detail th { padding: 5px 22px 5px 0; border: 0; background: none !important; position: static; }
.cfc-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
.cfc-caret { display: inline-block; width: 10px; color: var(--cfc-dim); transition: transform .15s; }
tr.expanded .cfc-caret { transform: rotate(90deg); }

/* Chips + badges */
.cfc-chip { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--panel-border); color: var(--cfc-dim); white-space: nowrap; }
.cfc-chip.ok { color: var(--cfc-ok); border-color: rgba(76, 175, 80, .35); background: rgba(76, 175, 80, .08); }
.cfc-chip.bad { color: var(--cfc-bad); border-color: rgba(244, 67, 54, .35); background: rgba(244, 67, 54, .08); }
.cfc-chip.warn { color: var(--cfc-warn); border-color: rgba(255, 152, 0, .35); background: rgba(255, 152, 0, .08); }
.cfc-chip.acc { color: var(--accent-text, var(--accent)); border-color: rgba(var(--accent-rgb, 38, 189, 214), .35); background: rgba(var(--accent-rgb, 38, 189, 214), .08); }

/* Payment-habit range bar */
.cfc-range { position: relative; height: 16px; min-width: 150px; }
.cfc-range .track { position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--panel-border); border-radius: 2px; }
.cfc-range .band { position: absolute; top: 4px; height: 8px; border-radius: 4px; background: rgba(var(--accent-rgb, 38, 189, 214), .35); }
.cfc-range .mid { position: absolute; top: 1px; width: 3px; height: 14px; border-radius: 2px; background: var(--accent); margin-left: -1px; }
.cfc-range .due { position: absolute; top: 0; width: 1px; height: 16px; background: var(--cfc-dim); opacity: .5; }

/* Accuracy card */
.cfc-acc-grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 18px; align-items: center; }
@container cfc (max-width: 620px) { .cfc-acc-grid { grid-template-columns: minmax(0, 1fr); } }
.cfc-acc-big { font-size: 36px; font-weight: 300; color: var(--text); line-height: 1; }
.cfc-bt .p { fill: var(--accent); opacity: .85; }
.cfc-bt .a { fill: var(--cfc-ok); }

/* States */
.cfc-empty { padding: 40px 20px; text-align: center; color: var(--cfc-dim); font-size: 13px; }
.cfc-banner { border-radius: 10px; padding: 10px 14px; font-size: 12px; margin-bottom: 14px; border: 1px solid var(--panel-border); color: var(--text); background: rgba(var(--accent-rgb, 38, 189, 214), .05); line-height: 1.5; }
.cfc-banner.warn { border-color: rgba(255, 152, 0, .4); background: rgba(255, 152, 0, .07); }
.cfc-banner.bad { border-color: rgba(244, 67, 54, .4); background: rgba(244, 67, 54, .07); }
.cfc-banner.info { border-color: rgba(var(--accent-rgb, 38, 189, 214), .35); background: rgba(var(--accent-rgb, 38, 189, 214), .06); }
/* Month · week · day table */
.cfc-periods tr.lvl-m td { font-weight: 600; background: rgba(var(--accent-rgb, 38, 189, 214), .04); }
.cfc-periods tr.lvl-m td.sticky { background: var(--panel-bg); }
.cfc-periods tr.lvl-d td { font-size: 11.5px; }
.cfc-periods tr.clickable { cursor: pointer; }
.cfc-periods th .sub { font-size: 9.5px; text-transform: none; letter-spacing: 0; font-weight: 500; }
.cfc-periods td.cmpcell { min-width: 150px; }
.cfc-cmp { display: flex; flex-direction: column; gap: 2px; width: 150px; }
.cfc-cmp i { display: block; height: 5px; border-radius: 3px; min-width: 0; }
.cfc-cmp i.in { background: var(--cfc-ok); }
.cfc-cmp i.out { background: var(--cfc-bad); }
.cfc-cmp i.exp { background: rgba(244, 67, 54, .3); box-shadow: inset 0 0 0 1px rgba(244, 67, 54, .6); }
.cfc-table tr.sub-total td { font-weight: 500; color: var(--cfc-dim); border-top: 0; }
.cfc-skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, rgba(var(--accent-rgb, 38, 189, 214), .05), rgba(var(--accent-rgb, 38, 189, 214), .12), rgba(var(--accent-rgb, 38, 189, 214), .05)); background-size: 200% 100%; animation: cfc-sh 1.4s linear infinite; }
@keyframes cfc-sh { to { background-position: -200% 0; } }
.cfc-method { font-size: 11.5px; color: var(--cfc-dim); line-height: 1.65; }
.cfc-method b { color: var(--text); font-weight: 600; }
.cfc-method p { margin: 0 0 8px; }
.cfc-method p:last-child { margin: 10px 0 0; }
.cfc-more { margin-top: 8px; }

.cfc-chart .panel-label { fill: var(--cfc-dim); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cfc-grid td.cell.z { opacity: 1; }
.cfc-bt .n { fill: var(--cfc-dim); opacity: .55; }

/* ── Planned items (2026-09-28) ─────────────────────────────────────────── */
.cfc-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.cfc-btn-primary:hover { filter: brightness(1.08); border-color: var(--accent); }
html[data-theme="light"] .cfc-btn-primary { color: #fff; }
.cfc-link { background: none; border: 0; padding: 0 2px; font: inherit; font-size: 11px; color: var(--accent-text, var(--accent)); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cfc-link:hover { filter: brightness(1.15); }
.cfc-link.danger { color: var(--cfc-bad); }
.cfc-chip.plan { color: var(--accent-text, var(--accent)); border-color: rgba(var(--accent-rgb, 38, 189, 214), .5); background: rgba(var(--accent-rgb, 38, 189, 214), .12); }
.cfc-pctbar { display: inline-block; vertical-align: middle; width: 90px; height: 6px; border-radius: 3px; background: rgba(var(--accent-rgb, 38, 189, 214), .10); overflow: hidden; }
.cfc-pctbar i { display: block; height: 100%; background: var(--cfc-bad); }
.cfc-modal { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cfc-modal-card { background: var(--panel-bg, #121c34); border: 1px solid var(--panel-border); border-radius: 14px; padding: 18px 20px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
html[data-theme="light"] .cfc-modal-card { background: #fff; }
.cfc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.cfc-form .full, .cfc-form .cfc-type { grid-column: 1 / -1; }
.cfc-form .cfc-type { justify-self: start; }
.cfc-form label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 600; color: var(--cfc-dim); }
.cfc-form input, .cfc-form select { background: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text); border-radius: 7px; padding: 8px 10px; font: inherit; font-size: 13px; font-weight: 400; }
.cfc-form input:focus, .cfc-form select:focus { outline: none; border-color: var(--accent); }
.cfc-form-err { color: var(--cfc-bad); font-size: 12px; min-height: 1em; }
.cfc-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 520px) { .cfc-form { grid-template-columns: 1fr; } }
/* Weekly report (Anand's sheet, from QuickBooks) */
.cfc-weeknav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.cfc-weeknav .cfc-btn:disabled { opacity: .45; cursor: default; }
.cfc-table tr.gone td { opacity: .55; }
.cfc-table tr.exp-row td { color: var(--cfc-dim); }
.cfc-ctl-label { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cfc-dim); margin-left: 4px; }
.cfc-chart .era { fill: var(--cfc-dim); font-size: 10.5px; font-weight: 600; letter-spacing: .03em; }
.cfc-chart .era.fut { fill: var(--accent-text, var(--accent)); }
.cfc-num { color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; text-decoration-color: currentColor; }
.cfc-num:hover, .cfc-num:focus-visible { text-decoration-style: solid; outline: none; filter: brightness(1.15); }
.cfc-dated tr.date-row td { background: rgba(var(--accent-rgb, 38, 189, 214), .06); border-top: 1px solid var(--panel-border); }
.cfc-chip.est { color: var(--cfc-warn); border-color: rgba(255, 152, 0, .45); background: rgba(255, 152, 0, .10); border-style: dashed; }
.cfc-scen button.on { background: var(--accent); color: #fff; }
.cfc-compare th.grp { text-align: center; border-bottom: 1px solid var(--panel-border); }
.cfc-compare th.cur { color: var(--accent-text, var(--accent)); }
.cfc-input { background: var(--input-bg); border: 1px solid var(--panel-border); color: var(--text); padding: 5px 9px; border-radius: 6px; font: inherit; font-size: 11.5px; min-width: 170px; }
.cfc-input:focus { outline: none; border-color: var(--accent); }
.cfc-tags { flex-wrap: wrap; }
.cfc-tags .cnt { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 3px; border-radius: 8px; background: rgba(var(--accent-rgb, 38, 189, 214), .15); font-size: 10px; }
.cfc-table th.sortable { cursor: pointer; user-select: none; }
.cfc-table th.sortable:hover, .cfc-table th.sortable.on { color: var(--accent-text, var(--accent)); }
.cfc-pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.cfc-pager .cfc-btn:disabled { opacity: .45; cursor: default; }
/* Header: title + description, then one toolbar in a fixed order. The
   description changes length with the view, so it gets its own row and a
   reserved height; the toolbar never shares a row with it (2026-09-28). */
.cfc-head { display: block; margin-bottom: 10px; }
.cfc-head .cfc-subtitle { min-height: 3em; max-width: 1100px; }
.cfc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 16px; padding: 8px 10px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--panel-bg); }
.cfc-tgroup { display: flex; align-items: center; gap: 6px; }
.cfc-tgroup .cfc-ctl-label { margin-left: 0; }
.cfc-actions { margin-left: auto; }
@container cfc (max-width: 700px) { .cfc-actions { margin-left: 0; } }

/* ── Cash position chart (v2.1, 2026-09-28) ──────────────────────────────────
   Mark colours validated with the dataviz palette checker (colour-blind
   separation, lightness band, contrast) against each theme's surface:
   dark  #6378f2 balance · #16a585 in · #dc6a26 out   (all checks pass)
   light #4a5fd6 balance · #0f8f7a in · #e3702a out   (all checks pass)
   Teal/orange, not green/red: green↔red failed deutan separation (ΔE 4.7). */
#page-cashfc { --cf2-bal: #6378f2; --cf2-in: #16a585; --cf2-out: #dc6a26; --cf2-act: #aab4c8; --cf2-ctx: #7a8499; --cf2-surface: var(--panel-bg, #121c34); }
html[data-theme="light"] #page-cashfc { --cf2-bal: #4a5fd6; --cf2-in: #0f8f7a; --cf2-out: #e3702a; --cf2-act: #33415c; --cf2-ctx: #8a93a6; --cf2-surface: #ffffff; }
.cf2-card { padding-bottom: 8px; }
.cf2-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.cf2-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cf2-chip { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; background: var(--input-bg); border: 1px solid var(--panel-border); border-radius: 10px; padding: 7px 12px 6px; cursor: pointer; color: var(--text); font: inherit; min-width: 128px; transition: border-color .15s, box-shadow .15s; }
.cf2-chip:hover { border-color: var(--cf2-bal); }
.cf2-chip.on { border-color: var(--cf2-bal); box-shadow: 0 0 0 1px var(--cf2-bal) inset; }
.cf2-chip .key { grid-row: 1 / span 2; width: 16px; height: 3px; border-radius: 2px; background: var(--cf2-ctx); }
.cf2-chip .key.sel { background: var(--cf2-bal); height: 3px; }
.cf2-chip .nm { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cfc-dim); }
.cf2-chip b { grid-column: 2; font-size: 18px; font-weight: 600; line-height: 1.15; }
.cf2-chip .lo { grid-column: 2; font-size: 10.5px; color: var(--cfc-dim); }
.cf2-chip .nm { grid-column: 2; grid-row: 1; }
.cf2-chip b { grid-row: 2; }
.cf2-chip .lo { grid-row: 3; }
.cf2-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 11px; color: var(--cfc-dim); margin: 2px 0 8px; }
.cf2-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cf2-legend .sp { flex: 0 0 8px; }
.cf2-legend .lk { width: 18px; height: 0; border-top: 2px solid var(--cf2-bal); }
.cf2-legend .lk.act { border-top-color: var(--cf2-act); }
.cf2-legend .lk.ctx { border-top: 1.5px solid var(--cf2-ctx); }
.cf2-legend .sw { width: 10px; height: 10px; border-radius: 3px 3px 0 0; background: var(--cf2-in); }
.cf2-legend .sw.out { background: var(--cf2-out); }
.cf2-legend .sw.est { opacity: .4; }
.cf2-legend .sw.past { background: var(--cf2-ctx); opacity: .45; }
/* marks */
.cf2 svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.cf2 .grid { stroke: var(--panel-border); stroke-width: 1; }
.cf2 .zero, .cf2 .base { stroke: var(--cfc-dim); stroke-width: 1; opacity: .7; }
.cf2 .neg { fill: var(--cf2-out); opacity: .06; }
.cf2 .fc-region { fill: var(--cf2-bal); opacity: .045; }
.cf2 .axis { fill: var(--cfc-dim); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.cf2 .axis.now { fill: var(--text); font-weight: 700; }
.cf2 .cap { fill: var(--cfc-dim); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.cf2 .cap.fut { fill: var(--cf2-bal); }
.cf2 .ln { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.cf2 .ln.act { stroke: var(--cf2-act); stroke-width: 2; }
.cf2 .ln.sel { stroke: var(--cf2-bal); stroke-width: 2.5; }
.cf2 .ln.ctx { stroke: var(--cf2-ctx); stroke-width: 1.5; opacity: .75; }
.cf2 .area { fill: var(--cf2-bal); opacity: .10; }
.cf2 .today { stroke: var(--cf2-bal); stroke-width: 1; opacity: .55; }
.cf2 .today-lbl { fill: var(--text); font-size: 11px; font-weight: 700; }
.cf2 .dot { stroke: var(--cf2-surface); stroke-width: 2; }
.cf2 .dot.sel { fill: var(--cf2-bal); }
.cf2 .dot.low { fill: var(--cf2-out); }
.cf2 .lbl-bg { fill: var(--cf2-surface); opacity: .92; }
.cf2 .low-lbl { fill: var(--text); font-size: 11px; font-weight: 600; }
.cf2 .leader { stroke: var(--cf2-ctx); stroke-width: 1; fill: none; }
.cf2 .end-lbl { fill: var(--cfc-dim); font-size: 11px; }
.cf2 .end-lbl .v { fill: var(--text); font-weight: 600; }
.cf2 .end-lbl.sel { fill: var(--text); font-weight: 600; }
.cf2 .end-lbl.sel .v { font-weight: 700; }
.cf2 .bin.k, .cf2 .bin.est { fill: var(--cf2-in); }
.cf2 .bout.k, .cf2 .bout.est { fill: var(--cf2-out); }
.cf2 .bin.est, .cf2 .bout.est { opacity: .4; }
.cf2 .bin.past, .cf2 .bout.past { fill: var(--cf2-ctx); opacity: .45; }
.cf2 .bout.past { opacity: .28; }
.cf2 .xhair { stroke: var(--text); stroke-width: 1; opacity: .35; pointer-events: none; }
.cf2 .hit { fill: transparent; outline: none; }
.cf2 .hit:focus-visible { fill: var(--cf2-bal); fill-opacity: .06; }
/* tooltip: values lead, keys are line strokes */
.cf2-tip { min-width: 250px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.cf2-tip .h { display: flex; justify-content: space-between; gap: 10px; font-weight: 600; }
.cf2-tip .tag { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cfc-dim); }
.cf2-tip .r { align-items: center; }
.cf2-tip .r span { flex: 1; color: var(--cfc-dim); }
.cf2-tip .tk { width: 12px; height: 0; border-top: 2px solid var(--cf2-bal); margin-right: 6px; }
.cf2-tip .tk.ctx { border-top: 1.5px solid var(--cf2-ctx); }
.cf2-tip .tk.act { border-top-color: var(--cf2-act); }
.cf2-tip b.strong { font-weight: 700; }
.cf2-tip b.dim { color: var(--cfc-dim); font-weight: 500; }
.cf2-tip .hint { margin-top: 6px; font-size: 10px; color: var(--cfc-dim); }