/* Screens B (Money, Reports, Marketing, Ad connections), design review 5 Oct 2026. Screen-only rules on top of premium-solar.css. */
/* Money: forecast is its own flat colour (ramp-2), no dashes; ageing bars sit on the ramp, never red */
body.sol-app .mny-bar.mny-in, body.sol-app .mny-sw.mny-in { fill: var(--good); background: var(--good); }
body.sol-app .mny-bar.mny-out { fill: var(--bad); fill-opacity: .45; } body.sol-app .mny-sw.mny-out { background: var(--bad); opacity: .45; }
body.sol-app .mny-bar.mny-ghost.mny-in, body.sol-app .mny-bar.mny-ghost.mny-out { fill: var(--ramp-3); fill-opacity: 1; stroke: none; }
body.sol-app .mny-sw.mny-ghost-sw { background: var(--ramp-3); opacity: 1; border: 0; }
.sol-app .mny-val { fill: var(--ink-1); font-weight: 500; font-variant-numeric: tabular-nums; }
.sol-app .mny-strip { margin-bottom: 16px; }
.sol-app .mny-amt, .sol-app .mny-age-v, .sol-app .kv dd, .sol-app .tbl td.r { font-variant-numeric: tabular-nums; }
/* Reports: one colour, value sits at the end of the bar */
.sol-app .rp-bars-v li { grid-template-columns: minmax(96px, 160px) minmax(0, 1fr); }
.sol-app .rp-bars-v .rp-bar-t { display: flex; align-items: center; gap: 8px; height: 20px; background: none; border-radius: 0; overflow: visible; }
.sol-app .rp-bars-v .rp-bar-t > span { height: 14px; border-radius: 2px; background: var(--chart-1); flex: none; }
.sol-app .rp-bars-v .rp-bn { min-width: 0; text-align: left; font-weight: 500; color: var(--ink-1); white-space: nowrap; }
@media (max-width: 640px) { .sol-app .rp-bars-v li { grid-template-columns: minmax(0, 1fr); gap: 4px; } .sol-app .rp-bars-v li .rp-bar-t { grid-column: 1; grid-row: 2; } }
.sol-app .rp-kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; margin: 0; }
.sol-app .rp-kv dt { color: var(--ink-2); } .sol-app .rp-kv dd { margin: 0; text-align: right; display: flex; flex-direction: column; }
.sol-app .rp-kvn { font-weight: 500; color: var(--ink-1); } .sol-app .rp-kvs { font-size: 12px; color: var(--meta); }
/* Marketing: numbers line up in their columns */
.sol-app .mk-num td.r, .sol-app .mk-num th.r { text-align: right; font-variant-numeric: tabular-nums; }
.sol-app .mk-num td:first-child .row-s { display: block; }
/* Ad connections: one row per platform */
.sol-app .trk-rows { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r); }
.sol-app .trk-row { display: grid; grid-template-columns: 140px 150px minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 14px 16px; }
.sol-app .trk-row + .trk-row { border-top: 1px solid var(--hairline); }
.sol-app .trk-name { font-weight: 600; } .sol-app .trk-why { color: var(--ink-2); } .sol-app .trk-why .row-s { color: var(--meta); }
.sol-app .trk-how { grid-column: 1 / -1; font-size: 13px; color: var(--ink-2); } .sol-app .trk-how summary { cursor: pointer; color: var(--meta); width: max-content; }
.sol-app .trk-how p { margin: 6px 0 0; max-width: 70ch; }
@media (max-width: 640px) { .sol-app .trk-row { grid-template-columns: minmax(0, 1fr) auto; } .sol-app .trk-why { grid-column: 1 / -1; } .sol-app .trk-act { grid-column: 2; grid-row: 1; } .sol-app .trk-row .badge { grid-column: 1; justify-self: start; } }
/* 5 Oct mix: tabs sit on their own line; Who owes us table; ageing on the ramp in order */
.sol-app .mny-tabs, .sol-app .rp-tabs, .sol-app .mk-tabs, .sol-app .bk .tabs-u { margin: 0 0 16px; }
body.sol-app .mny-tabs > a { position: relative; text-decoration: none; white-space: nowrap; }
body.sol-app .mny-tabs > a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink-1); }
.sol-app .mny-owe { margin-top: 12px; } .sol-app .mny-owe td, .sol-app .mny-owe th { white-space: nowrap; }
.sol-app .fig .fc-d { font-variant-numeric: tabular-nums; }
/* Reports: where enquiries come from (one stacked bar, stage palette, legend) */
.sol-app .rp-stack { display: flex; gap: 2px; height: 14px; margin: 4px 0 14px; border-radius: 3px; overflow: hidden; }
.sol-app .rp-stack > span { min-width: 3px; }
.sol-app .rp-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sol-app .rp-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 40px; align-items: center; gap: 10px; }
.sol-app .rp-legend i { width: 10px; height: 10px; border-radius: 2px; } .sol-app .rp-legend b { font-weight: 500; font-variant-numeric: tabular-nums; }
.sol-app .rp-legend small { color: var(--meta); text-align: right; font-variant-numeric: tabular-nums; }
.sol-app .rp-bars:not(.rp-bars-v) .rp-bar-t > span { background: var(--chart-1); }
/* Marketing: period chips, sortable headers */
.sol-app .mk-period { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sol-app .mk-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.sol-app .mk-sort:hover, .sol-app .mk-sort.on { color: var(--ink-1); } .sol-app .mk-sort:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sol-app .mk-arr { color: var(--meta); font-size: 11px; } .sol-app .mk-sort.on .mk-arr { color: var(--ink-1); }
.sol-app th.r .mk-sort { flex-direction: row; }
/* Billing / Bookings: amounts line up */
.sol-app .bill-table td, .sol-app .bill-value { font-variant-numeric: tabular-nums; }
/* the strip's neutral default outranks [data-tone]: restate the tones at strip strength (screen-side, shared block untouched) */
.sol-app .figures-strip .fig[data-tone=info] { --fc: var(--info); } .sol-app .figures-strip .fig[data-tone=good] { --fc: var(--good); } .sol-app .figures-strip .fig[data-tone=warn] { --fc: var(--warn); } .sol-app .figures-strip .fig[data-tone=bad] { --fc: var(--bad); }
.sol-app .figures-strip .fig[data-tone=s1] { --fc: var(--stage-1); } .sol-app .figures-strip .fig[data-tone=s4] { --fc: var(--stage-4); } .sol-app .figures-strip .fig[data-tone=s5] { --fc: var(--stage-5); }
.sol-app .bill-summary { align-items: stretch; } .sol-app .bill-summary > .card { margin: 0; }