/* Cash Flow dashboard — shared styles. Grey-first, one accent, red/green only for signed net.
   Cards carry their own surface so charts stay readable in light and dark. */
.cf-page {
  --cf-surface: #ffffff; --cf-surface-2: #f7f5f2; --cf-ink: #1a1a1a; --cf-ink-2: #555; --cf-ink-3: #7a7a7a;
  --cf-grid: rgba(0,0,0,.08); --cf-axis: rgba(0,0,0,.35); --cf-border: rgba(0,0,0,.10);
  --cf-accent: #2f5d8a; --cf-accent-2: #7b93ae; --cf-grey-1: #6b6b6b; --cf-grey-2: #b5b5b5; --cf-grey-3: #d4d2cd;
  --cf-pos: #1e7a4c; --cf-neg: #b3261e;
  max-width: 1180px; margin: 0 auto; padding: 2rem 1.5rem 3rem; color: var(--cf-ink);
}
@media (prefers-color-scheme: dark) {
  .cf-page {
    --cf-surface: #1d2025; --cf-surface-2: #252a30; --cf-ink: #eceae6; --cf-ink-2: #b9b6b0; --cf-ink-3: #8f8c86;
    --cf-grid: rgba(255,255,255,.09); --cf-axis: rgba(255,255,255,.4); --cf-border: rgba(255,255,255,.12);
    --cf-accent: #6aa3dc; --cf-accent-2: #3f6a96; --cf-grey-1: #a7a49e; --cf-grey-2: #6a6862; --cf-grey-3: #4a4944;
    --cf-pos: #4fc58a; --cf-neg: #ff7a6e;
  }
}
.cf-page *, .cf-page *::before, .cf-page *::after { box-sizing: border-box; }
.cf-pills { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cf-pill { padding: .4rem 1.1rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--text-muted);
  background: var(--bg-elevated); border: 1px solid var(--border); text-decoration: none; }
.cf-pill:hover { color: var(--text); border-color: var(--border-strong); }
.cf-pill.active { background: var(--accent-fill); color: var(--on-accent); border-color: var(--accent-fill); }
.cf-page .cf-title { color: var(--text); font-family: var(--font-display, system-ui); font-size: 1.6rem; font-weight: 600; }
.cf-sub { font-size: .85rem; color: var(--text-subtle); margin: .15rem 0 1.25rem; }
.cf-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
.cf-tile { background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: 10px; padding: .9rem 1rem; min-width: 0; }
.cf-tile-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--cf-ink-3); }
.cf-tile-value { font-family: var(--font-display, system-ui); font-size: 1.55rem; font-weight: 600; margin-top: .2rem; color: var(--cf-ink); font-variant-numeric: tabular-nums; }
.cf-tile-value small { font-size: .75rem; font-weight: 500; color: var(--cf-ink-3); margin-left: .2rem; }
.cf-tile-value.neg, .cf-neg { color: var(--cf-neg); } .cf-tile-value.pos, .cf-pos { color: var(--cf-pos); }
.cf-tile-sub { font-size: .72rem; color: var(--cf-ink-2); margin-top: .3rem; line-height: 1.35; }
.cf-tile-delta { font-size: .72rem; margin-top: .25rem; color: var(--cf-ink-3); font-variant-numeric: tabular-nums; }
.cf-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.cf-card { background: var(--cf-surface); border: 1px solid var(--cf-border); border-radius: 10px; padding: 1rem 1.1rem 1.1rem; margin-bottom: 1rem; min-width: 0; }
.cf-card h2 { font-family: var(--font-display, system-ui); font-size: 1rem; font-weight: 600; color: var(--cf-ink); }
.cf-card .cf-card-sub { font-size: .76rem; color: var(--cf-ink-3); margin: .1rem 0 .6rem; }
.cf-panel-title { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cf-ink-2); margin: .9rem 0 .15rem; }
.cf-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .74rem; color: var(--cf-ink-2); margin: .1rem 0 .15rem; }
.cf-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.cf-legend i.line { height: 3px; border-radius: 2px; vertical-align: 3px; width: 14px; }
.cf-source { font-size: .68rem; color: var(--cf-ink-3); margin-top: .3rem; }
.cf-chart { position: relative; width: 100%; }
.cf-chart svg { display: block; width: 100%; overflow: visible; }
.cf-chart text { font-family: var(--font-body, system-ui); fill: var(--cf-ink-3); font-size: 11px; }
.cf-chart text.lbl { fill: var(--cf-ink); font-weight: 600; }
.cf-chart text.unit { fill: var(--cf-ink-3); font-size: 10.5px; }
.cf-chart .grid { stroke: var(--cf-grid); stroke-width: 1; }
.cf-chart .zero { stroke: var(--cf-axis); stroke-width: 1; }
.cf-chart .hit { fill: transparent; }
.cf-chart .cross { stroke: var(--cf-axis); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.cf-tip { position: absolute; pointer-events: none; z-index: 5; background: var(--cf-surface); color: var(--cf-ink); border: 1px solid var(--cf-border);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: .5rem .65rem; font-size: .74rem; min-width: 150px; max-width: 260px; display: none; }
.cf-tip b { display: block; margin-bottom: .25rem; font-size: .76rem; }
.cf-tip .row { display: flex; justify-content: space-between; gap: .8rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.cf-tip .row i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: .35rem; }
.cf-tip .tot { border-top: 1px solid var(--cf-border); margin-top: .25rem; padding-top: .25rem; font-weight: 700; }
.cf-knobs .grp { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--cf-ink-3); margin: 1rem 0 .4rem; }
.cf-knobs .grp:first-child { margin-top: 0; }
.cf-knob { margin-bottom: .75rem; }
.cf-knob label { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 600; color: var(--cf-ink); gap: .5rem; }
.cf-knob label span.v.sel { display: none; }
.cf-knob label span.v { font-weight: 500; color: var(--cf-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-knob .note { font-size: .68rem; color: var(--cf-ink-3); margin-top: .15rem; line-height: 1.3; }
.cf-knob select, .cf-input { width: 100%; padding: .35rem .5rem; border-radius: 6px; border: 1px solid var(--cf-border); background: var(--cf-surface-2); color: var(--cf-ink); font-size: .8rem; margin-top: .25rem; font-family: inherit; }
.cf-knob input[type=range] { width: 100%; margin-top: .3rem; accent-color: var(--cf-accent); }
.cf-switch { display: flex; align-items: center; gap: .5rem; margin-top: .3rem; font-size: .78rem; color: var(--cf-ink-2); }
.cf-switch input { accent-color: var(--cf-accent); width: 16px; height: 16px; }
.cf-btn { padding: .4rem .85rem; border-radius: 6px; font-size: .78rem; font-weight: 600; border: 1px solid var(--cf-border); background: var(--cf-surface-2); color: var(--cf-ink); cursor: pointer; font-family: inherit; }
.cf-btn:hover { border-color: var(--cf-axis); }
.cf-btn.primary { background: var(--cf-accent); border-color: var(--cf-accent); color: #fff; }
.cf-btn.danger { color: var(--cf-neg); }
.cf-btn:disabled { opacity: .5; cursor: default; }
.cf-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; align-items: center; }
.cf-badge { display: inline-block; padding: .08rem .45rem; border-radius: 8px; font-size: .66rem; font-weight: 700; background: var(--cf-surface-2); color: var(--cf-ink-2); border: 1px solid var(--cf-border); }
.cf-badge.M { color: var(--cf-pos); } .cf-badge.A { color: var(--cf-ink-3); }
.cf-badge.warn { color: var(--cf-neg); }
.cf-table-wrap { overflow-x: auto; }
.cf-table { width: 100%; border-collapse: collapse; font-size: .78rem; font-variant-numeric: tabular-nums; }
.cf-table th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cf-ink-3); padding: .45rem .5rem; border-bottom: 1px solid var(--cf-border); white-space: nowrap; }
.cf-table td { padding: .45rem .5rem; border-bottom: 1px solid var(--cf-border); color: var(--cf-ink); vertical-align: top; }
.cf-table td.n, .cf-table th.n { text-align: right; white-space: nowrap; }
.cf-table td.nw { white-space: nowrap; }
.cf-table tr.total td { font-weight: 700; border-top: 1px solid var(--cf-axis); }
.cf-table tr.grp td { background: var(--cf-surface-2); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--cf-ink-2); }
.cf-table td .sm { display: block; font-size: .68rem; color: var(--cf-ink-3); }
.cf-table input, .cf-table select { width: 100%; min-width: 60px; padding: .25rem .35rem; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--cf-ink); font-size: .78rem; font-family: inherit; font-variant-numeric: tabular-nums; }
.cf-table input:hover, .cf-table select:hover { border-color: var(--cf-border); }
.cf-table input:focus, .cf-table select:focus { border-color: var(--cf-accent); background: var(--cf-surface-2); outline: none; }
.cf-table input.n { text-align: right; }
.cf-table input.dirty, .cf-table select.dirty { border-color: var(--cf-accent); }
.cf-table input.err, .cf-table select.err { border-color: var(--cf-neg); }
.cf-rank { display: grid; grid-template-columns: 1.4rem minmax(0, 1.6fr) minmax(0, 2fr) 5.5rem; gap: .5rem; align-items: center; font-size: .78rem; padding: .3rem 0; border-bottom: 1px solid var(--cf-border); }
.cf-rank .bar { height: 10px; background: var(--cf-surface-2); border-radius: 0 4px 4px 0; position: relative; }
.cf-rank .bar > span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cf-accent); border-radius: 0 4px 4px 0; }
.cf-rank .nm small { display: block; color: var(--cf-ink-3); font-size: .66rem; }
.cf-rank .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cf-projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cf-msg { font-size: .8rem; color: var(--cf-ink-2); padding: 2rem 0; text-align: center; }
.cf-msg.err { color: var(--cf-neg); }
.cf-status { font-size: .74rem; color: var(--cf-ink-3); }
.cf-hidden { display: none !important; }
@media (max-width: 960px) {
  .cf-tiles { grid-template-columns: repeat(2, 1fr); }
  .cf-grid-2 { grid-template-columns: 1fr; }
  .cf-projects { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .cf-tiles { grid-template-columns: 1fr; } }

/* =============================================================================
   v2 pages: Cash Flow Overview, Debt, Projects, Line items (portal shell v2).
   Layout, controls, tables and states come from ds.css (ds-* classes). What is
   here: the chart internals CF.chart draws (.cf-chart, .cf-legend, .cf-tip,
   .cf-source), bound to design tokens, and a few page-level helpers (cf2-*).
   Tokens only: no literal colour, size, radius or shadow below this line.
   Everything above is the legacy v1 layer, kept only until Pathway moves to
   the v2 shell (lane L2b / L6), then it is deleted.
   ============================================================================= */
.cf2 {
  --cf-surface: var(--bg-elevated); --cf-surface-2: var(--bg-sunken);
  --cf-ink: var(--text); --cf-ink-2: var(--text-muted); --cf-ink-3: var(--text-subtle);
  --cf-grid: var(--border); --cf-axis: var(--border-strong); --cf-border: var(--border);
  --cf-accent: var(--chart-1); --cf-accent-2: var(--chart-g2);
  --cf-grey-1: var(--chart-g1); --cf-grey-2: var(--chart-g2); --cf-grey-3: var(--chart-g3);
  --cf-pos: var(--positive); --cf-neg: var(--danger);
  min-width: 0;
}
.cf2 .cf-chart text { font-family: inherit; font-size: var(--text-xs); fill: var(--text-subtle); font-variant-numeric: tabular-nums; }
.cf2 .cf-chart text.lbl { fill: var(--text); font-weight: var(--weight-semi); }
.cf2 .cf-chart text.unit { font-size: var(--text-xs); }
.cf2 .cf-chart .hit:focus { outline: none; }
.cf2 .cf-legend { gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--text-muted); }
.cf2 .cf-legend i { border-radius: var(--radius-xs); }
.cf2 .cf-source { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-subtle); }
.cf2 .cf-tip { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); box-shadow: var(--elev-2); font-size: var(--text-sm); }
.cf2 .cf-tip b { font-size: var(--text-sm); }
.cf2 .cf-tip .row i { border-radius: var(--radius-xs); }

/* Stat row sub-line (dt label, dd number, then one 12px line). */
.cf2-stat-sub { margin: var(--space-1) 0 0; font-size: var(--text-xs); font-weight: var(--weight-normal); line-height: var(--leading-snug); color: var(--text-subtle); }
.cf2-skel-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); padding: var(--space-3) 0; margin-bottom: var(--space-4); }
@media (min-width: 768px) { .cf2-skel-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }

/* Page blocks. */
.cf2-stack > * + * { margin-top: var(--space-6); }
.cf2-block-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3); }
.cf2-block-head h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semi); color: var(--text); }
.cf2-block-head p { margin: 0; font-size: var(--text-xs); color: var(--text-subtle); }
.cf2-tbl-link { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--text-sm); }
.cf2 .ds-chart-unit { margin-bottom: 0; }
.cf2 .ds-chart-plot { margin-top: var(--space-2); }

/* Scenario panel: a sticky side panel from 1024, a sheet below. */
.cf2-side { display: none; }
@media (min-width: 1024px) {
  .cf2-side {
    display: block; align-self: start;
    position: sticky; top: calc(var(--nav-height) + var(--space-4));
    max-height: calc(100vh - var(--nav-height) - var(--space-6)); overflow-y: auto;
  }
  .cf2-scn-open { display: none; }
}
.cf2-knob-grp { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.cf2-knob-grp:first-child { margin-top: 0; }
.cf2-knob { margin-bottom: var(--space-3); }
.cf2-knob-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--text); }
.cf2-knob-top output { font-weight: var(--weight-medium); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf2-knob-note { margin: var(--space-1) 0 0; font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--text-subtle); }
.cf2-knob input[type="range"] { display: block; width: 100%; min-height: var(--control-h); margin: 0; accent-color: var(--accent); }
.cf2-knob .ds-select { margin-top: var(--space-1); }
.cf2-knob .ds-seg { margin-top: var(--space-1); }
.cf2 .ds-seg-item, #cf-scn-sheet .ds-seg-item { min-height: var(--control-h); min-width: var(--tap-min); }
#cf-scn-sheet .ds-iconbtn { min-width: var(--tap-min); min-height: var(--tap-min); }
body[data-section="cashflow"] main .ds-btn, #cf-scn-sheet .ds-btn { font-size: var(--text-sm); }
.cf2-scn-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.cf2-scn-actions .ds-btn { flex: 1 1 auto; }
.cf2-scn-status { margin: var(--space-2) 0 0; min-height: 1em; }

/* Debt: ranking list in the side panel. */
.cf2-rank { list-style: none; margin: 0; padding: 0; }
.cf2-rank li { display: grid; grid-template-columns: var(--space-5) minmax(0, 1fr) auto; column-gap: var(--space-2); padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); }
.cf2-rank-n { font-size: var(--text-sm); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.cf2-rank-name { min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--text); }
.cf2-rank-sub { display: block; font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-subtle); }
.cf2-rank-val { font-size: var(--text-sm); font-weight: var(--weight-semi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf2-rank-bar { grid-column: 2 / 4; height: var(--space-2); margin-top: var(--space-2); border-radius: var(--radius-xs); background: rgba(var(--ink), 0.08); }
.cf2-rank-bar > span { display: block; height: 100%; border-radius: var(--radius-xs); background: var(--chart-1); }

/* Debt: expandable loan rows. */
.cf2-exp { display: inline-flex; align-items: flex-start; gap: var(--space-2); min-height: var(--tap-min); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cf2-exp svg { flex: none; margin-top: var(--space-1); color: var(--text-subtle); transition: transform var(--dur-fast) var(--ease-out); }
.cf2-exp[aria-expanded="true"] svg { transform: rotate(90deg); }
.cf2-exp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cf2-detail[hidden] { display: none !important; }
.cf2-detail td { background: rgba(var(--ink), 0.03); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
@media (max-width: 767px) { .ds-table-data tr.cf2-detail { padding: var(--space-3); background: rgba(var(--ink), 0.03); } .cf2-detail td { background: transparent; padding: 0; } }
.cf2-ph { display: none; }
@media (max-width: 767px) { .cf2-ph { display: inline; } .ds-table-data td.cf2-quiet-status, .ds-table-data td.cf2-hide-phone { display: none; } }
.cf2-basis { margin-left: var(--space-2); cursor: help; vertical-align: 1px; }

/* Projects: three cards. */
.cf2-projects { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
@media (min-width: 1280px) { .cf2-projects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cf2-card-sec { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--hairline); }
.cf2-card-sec > h4 { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); }
.cf2-mini { padding: var(--space-3) 0 0; gap: var(--space-3) var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cf2-mini dd { font-size: var(--text-xl); }
.cf2-facts .cf2-fact-note { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--text-subtle); }

/* Line items: inline-edit grid. */
.cf2-impact { position: sticky; top: var(--nav-height); z-index: var(--z-sticky); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: var(--space-2) 0; margin-bottom: var(--space-4); background: var(--bg); border-bottom: 1px solid var(--hairline); font-size: var(--text-sm); color: var(--text-muted); }
.cf2-impact b { color: var(--text); font-weight: var(--weight-semi); font-variant-numeric: tabular-nums; }
.cf2-grid { font-size: var(--text-sm); }
.cf2-grid th { position: sticky; top: 0; z-index: var(--z-base); background: var(--bg-sunken); font-size: var(--text-sm); font-weight: var(--weight-semi); letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.cf2-grid td { padding: var(--space-1); vertical-align: middle; white-space: nowrap; }
.cf2-grid th { padding-inline: var(--space-1); }
.cf2-grid td:first-child, .cf2-grid th:first-child { padding-left: var(--space-2); }
.cf2-grid tr.is-off td > * { opacity: 0.55; }
.cf2-grid .ds-inline { display: flex; }
.cf2-grid .ds-inline-input { min-height: calc(var(--control-h-sm) - 2px); }
.cf2-grid select.ds-select-quiet { min-width: 7.5rem; min-height: var(--control-h-sm); }
.cf2-grid .cf2-w-entity { min-width: 9.5rem; } .cf2-grid .cf2-w-name { min-width: 16rem; } .cf2-grid .cf2-w-num { min-width: 7.5rem; } .cf2-grid .cf2-w-mon { width: 6.5rem; min-width: 6.5rem; }
.cf2-grid .cf2-w-knob { min-width: 10rem; } .cf2-grid .cf2-w-note { min-width: 12rem; } .cf2-grid .cf2-w-act { min-width: 5.5rem; }
.cf2-grid input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }
.cf2-grid .ds-error { margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .cf2-grid .ds-row-act { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
  .cf2-grid tr:hover .ds-row-act, .cf2-grid tr:focus-within .ds-row-act { opacity: 1; }
}
@media (min-width: 768px) { .cf2-grid-wrap { max-height: 70vh; } }
.cf2-confirm { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text); }
.cf2-details > summary { min-height: var(--tap-min); display: flex; align-items: center; cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--text-muted); }
.cf2-details-body { max-width: var(--measure); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); }

.cf2-skel-tall { height: calc(var(--space-8) * 6); }
.cf2-exp .ds-cell-sub { display: block; }
.cf2-grid th { white-space: normal; vertical-align: bottom; }
.cf2-add { margin-top: var(--space-3); }
#cf-scn-body > .ds-hint { margin: 0 0 var(--space-3); }

/* Sortable headers on the scrolling grids (ds-table-data has its own). */
.cf2-grid th[aria-sort] > button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: inherit; }
.cf2-grid th[aria-sort]:hover, .cf2-grid th[aria-sort="ascending"], .cf2-grid th[aria-sort="descending"] { color: var(--text); }
.cf2-grid th[aria-sort="ascending"]::after { content: " ↑"; }
.cf2-grid th[aria-sort="descending"]::after { content: " ↓"; }
.cf2-grid th[aria-sort] > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Line items: Name is pinned as the first column; an edge fade shows there is more to the right. */
.cf2-grid td:first-child { position: sticky; left: 0; z-index: var(--z-base); background: var(--bg); }
.cf2-grid th:first-child { left: 0; z-index: calc(var(--z-base) + 1); }
.cf2-scroll.has-more { -webkit-mask-image: linear-gradient(to right, rgba(var(--ink), 1) calc(100% - 40px), transparent); mask-image: linear-gradient(to right, rgba(var(--ink), 1) calc(100% - 40px), transparent); }
@media (max-width: 767px) { .cf2-grid .cf2-w-name { min-width: 9rem; } }
.cf2-grid .ds-inline-input::placeholder { color: var(--text-subtle); opacity: 1; }

/* Debt and Weygand loans on a phone: one combined meta line, no dangling separators; a sort select replaces the header row. */
.cf2-sort-phone { margin-bottom: var(--space-3); }
@media (min-width: 768px) { .cf2-phone-only, .cf2-sort-phone { display: none; } }
@media (max-width: 767px) { .cf2-hide-phone { display: none; } .ds-table-data td.cf2-phone-only:empty { display: none; } }

/* Scenario sliders: filled part in the data accent, a muted track in both themes. */
.cf2-knob input[type="range"], #cf-scn-body input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; accent-color: var(--chart-1); --pct: 50%; }
#cf-scn-body input[type="range"]::-webkit-slider-runnable-track { height: var(--space-2); border-radius: var(--radius-pill); background: linear-gradient(to right, var(--chart-1) var(--pct), rgba(var(--ink), 0.18) var(--pct)); }
#cf-scn-body input[type="range"]::-moz-range-track { height: var(--space-2); border-radius: var(--radius-pill); background: rgba(var(--ink), 0.18); }
#cf-scn-body input[type="range"]::-moz-range-progress { height: var(--space-2); border-radius: var(--radius-pill); background: var(--chart-1); }
#cf-scn-body input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: var(--space-5); height: var(--space-5); margin-top: calc((var(--space-2) - var(--space-5)) / 2); border-radius: 50%; border: 2px solid var(--bg-elevated); background: var(--chart-1); box-shadow: var(--elev-1); }
#cf-scn-body input[type="range"]::-moz-range-thumb { width: var(--space-5); height: var(--space-5); border-radius: 50%; border: 2px solid var(--bg-elevated); background: var(--chart-1); box-shadow: var(--elev-1); }
#cf-scn-body input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }