/* Walk of Grit forecast pages: visual layer only (no wording changes). Staged Oct 30.
   Loaded after rf.css / ff.css. Scoped to the forecast roots so other pages are untouched. */
:is(#rf-root, #ff-root, article.method) { --gain: #137a3e; --loss: #b42318; --flat: #5b6573; }

/* Gains green with an up arrow, losses red with a down arrow, exactly zero grey */
#ff-root .pos { color: var(--gain) !important; font-weight: 700; }
#ff-root .neg { color: var(--loss) !important; font-weight: 700; }
:is(#rf-root, #ff-root) .flat { color: var(--flat) !important; }
#ff-root .pos::before { content: "\25B2\00a0"; font-size: .72em; vertical-align: .08em; }
#ff-root .neg::before { content: "\25BC\00a0"; font-size: .72em; vertical-align: .08em; }
:is(#rf-root, #ff-root) .hit::before { content: none !important; } /* right/wrong ticks: colour only */

/* KPI tiles: the change sits beside the value */
:is(#rf-root, #ff-root) .kpi .v .d { font-size: .82rem; font-weight: 700; margin-left: .45rem; white-space: nowrap; }
:is(#rf-root, #ff-root) .kpis > * { min-width: 0; }

/* Tables: tabular figures, numbers right, text left, zebra rows, header stays in view while scrolling */
:is(#rf-root, #ff-root, article.method) table { font-variant-numeric: tabular-nums; }
:is(#rf-root, #ff-root, article.method) table tr:nth-child(even) > td { background: #f6f8fb; }
:is(#rf-root, #ff-root) :is(.table-scroll, .dash-scroll) { overflow: auto; max-height: 75vh; max-width: 100%; -webkit-overflow-scrolling: touch; }
article.method .dash-scroll { overflow-x: auto; max-width: 100%; }
:is(#rf-root, #ff-root) table th { position: sticky; top: 0; z-index: 1; background: #e8f1ff; color: #33404f; }

/* Contrast: muted text no lighter than #5b6573 on white (about 5.9:1) */
:is(#rf-root, #ff-root) :is(.kpi .s, .kpi .l, .note) { color: #5b6573; }

/* Charts: hand-drawn SVGs scale; Plotly sizes its own SVGs, so leave those alone */
:is(#rf-root, #ff-root) .chart { max-width: 100%; }
:is(#rf-root, #ff-root, article.method) svg[viewBox]:not(.main-svg):not(.js-plotly-plot *) { max-width: 100%; height: auto; }
:is(#rf-root, #ff-root, article.method) pre { white-space: pre-wrap; overflow-wrap: anywhere; }

/* (phone rf-pills scroller dropped: Design's one-row tab block in brand.css owns that row) */