/* The A.7 pack's stylesheet, scoped to the site's forecast view (P1.4A batch 1, 12 Oct 2026). Moved from Project Forecast/template.html and prefixed with #view-forecast by a one-off script, so none of it can reach the report or the Projects page, and none of theirs outranks it here. The topbar is the site's, so the pack's is gone. The block at the end replaces the pack's inline style attributes, which the site's content security policy drops, and adds the operator's notes: the month hover, negative margin in red, the baseline lines. THIS FILE IS PUBLIC (ADR 0014). */ /* ============================================================================ Pirrpala Visual Style Guide v1.1 - pirrpala-tools/standards/VISUAL_STYLE_GUIDE.md Light surface, deep teal primary, system UI, dense. This pack previously carried 24M-Cashflow-FC's dark palette; the standard has no dark mode, so the standard wins and the divergence is now the cashflow pack's, not this one's. ============================================================================ */ #view-forecast{ /* primary - teal */ --teal:#1D9E75; --teal-dark:#0F6E56; --teal-darkest:#085041; --teal-tint:#E1F5EE; --teal-lightest:#F0FAF5; /* secondary - blue */ --blue:#185FA5; --blue-dark:#0C447C; --blue-mid:#B5D4F4; --blue-tint:#E6F1FB; /* HEADER BANDS. One rule, carried across all three header rows of Table 2 and 3: blue is actual, green is forecast, and nothing in a header is left untinted. Deliberately deeper than the page tints above - these have to read at a glance across a wide table, where the page tints washed out to white. The band row takes the strong pair, the year and month rows the soft pair, so the three rows still separate. */ --hdr-blue:#C8DEF5; --hdr-blue-soft:#D3E4F8; --hdr-green:#C6E9D9; --hdr-green-soft:#D5EFE3; /* THE CUT. Two tints this close cannot carry a boundary on their own - the FY27 band read as one flat colour. This is the divider between what happened and what is forecast, and it runs the full height of both tables, through the middle of a straddling year's band. */ --cutline:#22262B; /* semantic - amber */ --amber:#BA7517; --amber-dark:#854F0B; --amber-text:#8B6200; --amber-tint:#FAEEDA; --amber-lightest:#FDF3DC; /* semantic - red */ --red:#A32D2D; --red-dark:#791F1F; --red-vivid:#E24B4A; --red-tint:#FCEBEB; --red-lightest:#FEF4F4; /* neutral */ --text:#1a1a1a; --text-secondary:#444; --text-muted:#666; --text-dim:#888; --text-ghost:#aaa; --border:#e5e5e5; --border-light:#f0f0f0; --app-bg:#f5f5f5; --surface-subtle:#fafafa; --surface:#fff; } #view-forecast, #view-forecast *{box-sizing:border-box} /* A CLASS DISPLAY RULE BEATS THE USER-AGENT [hidden]{display:none}. `.flags{display:flex}` did exactly that, so pressing the collapse button set el.hidden and changed nothing on screen - and the harness passed, because it asserted the PROPERTY rather than the computed style. Global, and !important, so no future rule can quietly win this argument again. */ [hidden]{display:none!important} #view-forecast{margin:0;background:var(--app-bg);color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased} /* ---- topbar: full bleed, 48px, sticky. The single most distinctive element. ---- */ #view-forecast .pfmain{max-width:1400px;margin:0 auto;padding:20px} /* ---- page header: title left, context right. No eyebrow, no subtitle. ---- */ #view-forecast .pghead{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap} #view-forecast .pghead h1{font-size:16px;font-weight:500;margin:0;letter-spacing:-.01em} #view-forecast .pghead .ctx{margin-left:auto;font-size:11px;color:var(--text-dim);text-align:right;line-height:1.5} #view-forecast .pghead .acts{display:flex;gap:8px;align-items:center} #view-forecast button.btn{font-family:inherit;font-size:13px;font-weight:500;padding:7px 14px;border-radius:8px; border:1px solid transparent;cursor:pointer;white-space:nowrap} #view-forecast button.btn.primary{background:var(--teal);color:#fff} #view-forecast button.btn.primary:hover{background:var(--teal-dark)} #view-forecast button.btn.tert{background:var(--surface);color:#555;border-color:#d0d0d0} #view-forecast button.btn.tert:hover{border-color:var(--text-muted)} #view-forecast .msg{font-size:11px;color:var(--text-dim)} #view-forecast .msg.ok{color:var(--teal-dark)} #view-forecast .msg.warn{color:var(--amber-dark)} /* ---- KPI cards: 8px radius, 14px padding, grid gap 10px ---- */ #view-forecast .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin-bottom:16px} #view-forecast .kpis>div{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:14px} #view-forecast .kpis span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.4px; color:var(--text-muted);margin-bottom:4px} #view-forecast .kpis strong{display:block;font-size:24px;font-weight:500;color:var(--text); font-variant-numeric:tabular-nums;letter-spacing:-.01em} #view-forecast .kpis strong.a{color:var(--red)} #view-forecast .kpis strong.w{color:var(--amber-dark)} #view-forecast .kpis strong.b{color:var(--blue)} #view-forecast .kpis strong.g{color:var(--teal-dark)} #view-forecast .kpis em{font-style:normal;display:block;font-size:11px;color:var(--text-dim);margin-top:2px} /* ---- findings: tint bg, 3px left border, bold heading then body. THE WHOLE SET LIVES IN A COLLAPSED SECTION and opens as one - see #flagSect. It is not `display:flex` here, because a class display rule out-specifies [hidden] and that is exactly the bug that made the toggle do nothing in A.4; the flex comes from the section body instead. ---- */ #view-forecast .flag{border-left:3px solid var(--amber);background:var(--amber-tint);padding:10px 14px; border-radius:0 8px 8px 0;font-size:12px;color:var(--text-secondary);line-height:1.55} #view-forecast .flag b{color:var(--text);font-weight:600} #view-forecast .flag.bad{border-left-color:var(--red);background:var(--red-tint)} #view-forecast .flag.ok{border-left-color:var(--teal);background:var(--teal-lightest)} #view-forecast .flag.info{border-left-color:var(--blue);background:var(--blue-tint)} #view-forecast .flag .tg{display:block;font-size:11px;font-weight:600;color:var(--amber-dark);margin-bottom:2px} #view-forecast .flag.bad .tg{color:var(--red-dark)} #view-forecast .flag.ok .tg{color:var(--teal-darkest)} #view-forecast .flag.info .tg{color:var(--blue-dark)} /* ---- Figure 1: the S-curve. Inline SVG, no library, scales with the page ---- */ #view-forecast .fig{background:var(--surface);border:1px solid var(--border);border-radius:12px; padding:10px 12px 4px} #view-forecast .fig svg{display:block;width:100%;height:auto} #view-forecast .fig .gl{stroke:var(--border-light);stroke-width:1} #view-forecast .fig .axl{fill:var(--text-dim);font-size:10px} #view-forecast .fig .axl.r{text-anchor:end} #view-forecast .fig .axl.c{text-anchor:middle} #view-forecast .fig .fyl{fill:var(--text-muted);font-size:9px;letter-spacing:.06em;text-anchor:middle} #view-forecast .fig .mgn{fill:var(--teal);opacity:.10} #view-forecast .fig .ln{fill:none;stroke-linejoin:round;stroke-linecap:round} #view-forecast .fig .ln.inv{stroke-width:2.6} #view-forecast .fig .ln.cst{stroke-width:2.2;stroke-dasharray:6 3} #view-forecast .fig .ln.a{stroke:var(--blue)} #view-forecast .fig .ln.f{stroke:var(--teal-dark)} #view-forecast .fig .bud{fill:none;stroke:var(--text-muted);stroke-width:1;stroke-dasharray:2 3} #view-forecast .fig .budl{fill:var(--text-muted);font-size:9px;letter-spacing:.04em} #view-forecast .fig .cut{stroke:var(--cutline);stroke-width:3} #view-forecast .fig .cutl{fill:var(--cutline);font-size:9px;font-weight:600;letter-spacing:.06em;text-anchor:middle} #view-forecast .fig .riser{stroke:var(--amber);stroke-width:2;stroke-dasharray:3 2} #view-forecast .fig .dot{stroke:#fff;stroke-width:1.5} #view-forecast .fig .endl{font-size:10px;font-weight:600} #view-forecast .fig .endl.inv{fill:var(--blue-dark)} #view-forecast .fig .endl.cst{fill:var(--amber-dark)} #view-forecast .figkey{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:11px; color:var(--text-secondary);padding:8px 2px 6px} #view-forecast .figkey span{display:inline-flex;align-items:center;gap:6px} #view-forecast .figkey i{display:inline-block;width:20px;height:0;border-top-width:2px;border-top-style:solid} #view-forecast .figkey i.inv{border-top-color:var(--text-secondary);border-top-width:3px} #view-forecast .figkey i.cst{border-top-style:dashed;border-top-color:var(--text-secondary)} #view-forecast .figkey i.sw{height:10px;border:none;border-radius:2px;width:14px} /* ---- section headings ---- */ #view-forecast h3.tsec{font-size:13px;font-weight:500;color:var(--text);margin:24px 0 8px; display:flex;align-items:center;gap:10px;flex-wrap:wrap} #view-forecast h3.tsec:first-of-type{margin-top:0} #view-forecast h3.tsec .tno{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; color:var(--teal-darkest);background:var(--teal-tint);border-radius:4px;padding:2px 7px;white-space:nowrap} #view-forecast h3.tsec .r{margin-left:auto;font-size:11px;color:var(--text-dim);font-weight:400} #view-forecast p.tlead{font-size:12px;color:var(--text-muted);max-width:110ch;margin:0 0 12px;line-height:1.55} #view-forecast p.tlead b{color:var(--text-secondary);font-weight:500} /* ---- inline segmented filters: pill row, active solid teal ---- */ #view-forecast .seg{display:inline-flex;gap:4px} #view-forecast .seg button{background:transparent;border:1px solid var(--border);color:var(--text-muted); font-family:inherit;font-size:12px;padding:5px 12px;border-radius:4px;cursor:pointer;min-width:32px} #view-forecast .seg button:hover:not(:disabled){border-color:var(--blue-mid);color:var(--text)} #view-forecast .seg button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:500} #view-forecast .seg button:disabled{color:var(--text-ghost);cursor:default;background:var(--surface-subtle)} #view-forecast .win{display:inline-flex;align-items:center;gap:6px} #view-forecast .win .lb{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-muted)} #view-forecast .win .rng{font-size:11px;color:var(--text-dim);font-variant-numeric:tabular-nums} #view-forecast select.pfsel{background:var(--surface);border:1px solid #d0d0d0;border-radius:8px;color:var(--text); font-family:inherit;font-size:12px;padding:5px 8px;height:32px} #view-forecast select.pfsel:focus{border-color:var(--blue-mid);outline:none} /* ---- tables ---- */ #view-forecast .tbl-wrap{background:var(--surface);border:1px solid var(--border);border-radius:12px; overflow:auto;max-height:78vh} #view-forecast table.pw{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%; font-size:12px;font-variant-numeric:tabular-nums;background:var(--surface)} #view-forecast table.pw th,#view-forecast table.pw td{padding:7px 10px;white-space:nowrap;border-bottom:1px solid var(--border-light)} #view-forecast table.pw thead th{position:sticky;top:0;z-index:5;background:var(--surface-subtle); color:var(--text-dim);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em; text-align:right;border-bottom:1px solid var(--border)} #view-forecast table.pw thead tr:nth-child(2) th{top:28px} /* THREE ROWS NOW, AND NONE OF THEM MAY SCROLL AWAY. Each offset is the exact sum of the row heights above it, and each row's height is pinned rather than left to font metrics - the same arithmetic that once left a 2.175px gap and painted over the rule below it. */ #view-forecast table.pw thead th.fyh{position:sticky;top:28px;z-index:6;height:24px;line-height:12px; text-align:center;font-size:10px;letter-spacing:.06em; background:var(--surface-subtle);color:var(--text-secondary); border-bottom:1px solid var(--border);border-right:1px solid var(--border)} /* THE BAR IS NOT THE BUTTON (ask 4). Clicking anywhere on a wide header cell to fold a year was a click you could not see coming and could not avoid; the fold now has its own control inside the cell, so the bar is inert and the pointer says so. */ #view-forecast table.pw thead th.fyh.b{background:var(--hdr-blue-soft);color:var(--blue-dark)} #view-forecast table.pw thead th.fyh.g{background:var(--hdr-green-soft);color:var(--teal-darkest)} #view-forecast table.pw thead th.fyh.folded{color:var(--text-muted)} #view-forecast button.fyfold{margin-left:6px;width:15px;height:15px;line-height:1;padding:0; border:1px solid var(--border);border-radius:3px;background:var(--surface);cursor:pointer; font-family:inherit;font-size:11px;color:var(--text-secondary);vertical-align:middle} #view-forecast button.fyfold:hover{border-color:var(--blue-mid);color:var(--blue-dark);background:#fff} #view-forecast table.pw thead tr:nth-child(3) th{top:52px} #view-forecast table.pw thead th.l{text-align:left} #view-forecast table.pw thead th.grp{text-align:center;font-size:10px;letter-spacing:.06em; line-height:13px;height:28px;white-space:normal;color:var(--text-muted)} #view-forecast table.pw thead th.grp.g{color:var(--teal-darkest);background:var(--hdr-green)} #view-forecast table.pw thead th.grp.b{color:var(--blue-dark);background:var(--hdr-blue)} #view-forecast table.pw thead th.grp.q{color:var(--text-dim)} #view-forecast table.pw td.num{text-align:right} #view-forecast table.pw td.l{text-align:left} #view-forecast table.pw td.k{color:var(--text);font-weight:500} #view-forecast table.pw tbody tr:hover td{background:var(--surface-subtle)} #view-forecast table.pw tr.tot td{background:var(--surface-subtle);color:var(--text);font-weight:500; border-top:1px solid var(--border)} #view-forecast table.pw tr.grand td{background:#f4f7f6;color:var(--text);font-weight:600;border-top:2px solid var(--teal)} #view-forecast table.pw td.pos,#view-forecast table.pw tr.tot td.pos,#view-forecast table.pw tr.grand td.pos,#view-forecast table.mf td.mth.pos{color:var(--teal-dark)} #view-forecast table.pw td.neg,#view-forecast table.pw tr.tot td.neg,#view-forecast table.pw tr.grand td.neg,#view-forecast table.mf td.mth.neg{color:var(--red)} #view-forecast table.pw td.zero,#view-forecast table.pw tr.tot td.zero,#view-forecast table.pw tr.grand td.zero{color:var(--text-ghost)} #view-forecast table.pw td.dim,#view-forecast .dim{color:var(--text-ghost)} #view-forecast table.pw td.part{color:var(--amber-dark)} /* status pills: 11px/500, 2px 8px, 10px radius, tint bg + semantic text */ #view-forecast .tag{display:inline-block;font-size:11px;font-weight:500;padding:2px 8px;border-radius:10px; background:var(--surface-subtle);color:var(--text-muted);margin-left:6px;white-space:nowrap} #view-forecast .tag.a{background:var(--red-tint);color:var(--red-dark)} #view-forecast .tag.w{background:var(--amber-tint);color:var(--amber-dark)} #view-forecast .tag.g{background:var(--teal-tint);color:var(--teal-darkest)} #view-forecast .tag.b{background:var(--blue-tint);color:var(--blue-dark)} #view-forecast .pf{display:inline-block;font-size:10px;font-weight:500;padding:1px 5px;border-radius:10px; background:var(--amber-tint);color:var(--amber-dark);margin-left:5px;cursor:help} /* ---- Monthly Forecast: four frozen columns left, two right, months gridded between ---- */ #view-forecast table.mf .s1,#view-forecast table.mf .s2,#view-forecast table.mf .s3,#view-forecast table.mf .s4,#view-forecast table.mf .r1,#view-forecast table.mf .r2{position:sticky;z-index:3;background:var(--surface)} #view-forecast table.mf thead .s1,#view-forecast table.mf thead .s2,#view-forecast table.mf thead .s3,#view-forecast table.mf thead .s4,#view-forecast table.mf thead .r1,#view-forecast table.mf thead .r2{z-index:7;background:var(--surface-subtle)} #view-forecast table.mf tbody tr:hover .s1,#view-forecast table.mf tbody tr:hover .s2,#view-forecast table.mf tbody tr:hover .s3,#view-forecast table.mf tbody tr:hover .s4,#view-forecast table.mf tbody tr:hover .r1,#view-forecast table.mf tbody tr:hover .r2{background:var(--surface-subtle)} #view-forecast table.mf tr.tot .s1,#view-forecast table.mf tr.tot .s2,#view-forecast table.mf tr.tot .s3,#view-forecast table.mf tr.tot .s4,#view-forecast table.mf tr.tot .r1,#view-forecast table.mf tr.tot .r2{background:var(--surface-subtle)} #view-forecast table.mf tr.grand .s1,#view-forecast table.mf tr.grand .s2,#view-forecast table.mf tr.grand .s3,#view-forecast table.mf tr.grand .s4,#view-forecast table.mf tr.grand .r1,#view-forecast table.mf tr.grand .r2{background:#f4f7f6} #view-forecast table.mf .s1{left:0; width:168px;min-width:168px;max-width:168px} #view-forecast table.mf .s2{left:168px;width:92px; min-width:92px} #view-forecast table.mf .s3{left:260px;width:94px; min-width:94px} #view-forecast table.mf .s4{left:354px;width:98px; min-width:98px;border-right:1px solid var(--border)} #view-forecast table.mf .r1{right:66px;width:100px;min-width:100px;border-left:1px solid var(--border)} #view-forecast table.mf .r2{right:0; width:66px; min-width:66px} /* THE MONTHS ARE DRAWN AS A GRID. Every month cell carries its own right-hand rule, which is what separates one month from the next - so the blue and green vertical accent lines that used to mark the actual/forecast cut and the FAC block are gone. They were doing a job the gridlines now do, and three coloured verticals in one table competed with each other. The cut is still legible: the header groups are labelled and tinted, blue for Actual and teal for Forecast to Complete. */ /* ONE COLUMN WIDTH, AND JAVASCRIPT OWNS IT. The literal used to live here as 92px AND in `var COLW` as 92, and the CSS one was a suggestion the browser overrode: a forecast cell has to hold a dollar input and a percent input, which need more than 92px, so every open column quietly stretched and every closed one did not. Two consequences, both of them bugs the operator saw - the FY band's percentage break landed in the wrong place, and a scroll offset of `colStart * COLW` only snapped while the columns scrolled past happened to be closed ones. COLW is set on :root at startup and read from here, so the two cannot disagree. */ #view-forecast table.mf td.mth,#view-forecast table.mf th.mth{width:var(--colw);min-width:var(--colw);text-align:right; border-right:1px solid var(--border-light);padding:4px 6px;vertical-align:middle} #view-forecast table.mf th.mth{padding:5px 6px;border-right:1px solid var(--border)} #view-forecast table.mf th.mth.hist{color:var(--blue-dark);background:var(--hdr-blue-soft)} #view-forecast table.mf th.mth.fut{color:var(--teal-darkest);background:var(--hdr-green-soft)} #view-forecast table.mf td.mth.hist{background:#fbfdff} #view-forecast table.mf td.mth.fut{background:#fbfefc} #view-forecast table.mf tbody tr:hover td.mth.hist{background:var(--blue-tint)} #view-forecast table.mf tbody tr:hover td.mth.fut{background:var(--teal-lightest)} /* A FULL-WIDTH STICKY CELL CANNOT MOVE. Sticky never shifts an element beyond its own containing block, and these cells span the whole row - so any rightward shift would push their right edge past the row and the browser clamps it to zero. The cell stays put and the label scrolls out of sight, which is exactly what the screenshots showed: "Forecast to Complete" gone, and the WBS banners reading "abour". The LABEL is what has to stick, inside the cell, where it has room to slide. */ #view-forecast table.mf tr.wbshead td{z-index:4;background:var(--surface-subtle); color:var(--text);font-weight:500;font-size:12px;border-top:1px solid var(--border)} #view-forecast table.mf tr.wbshead td>.stk{position:sticky;left:10px;display:inline-flex; align-items:baseline;gap:6px;flex-wrap:wrap} /* the two header bands pin just clear of the frozen block (168+92+94+98 = 452) rather than at the viewport edge, where the frozen header cells would paint over them. AND THEY ARE LEFT-ALIGNED, WHICH IS THE OTHER HALF OF THE SAME BUG. A sticky `left` can only push a label RIGHT, never pull it left - so a centred label in a band far wider than the viewport sits at a centre that is off-screen, and no amount of sticking brings it back. That is why the Forecast to Complete band read as an empty green strip. Anchored at the band's left edge it is either visible where the band starts, or pinned at 460. */ #view-forecast table.mf thead th.grp,#view-forecast table.mf thead th.fyh{text-align:left;padding-left:8px} #view-forecast table.mf thead th.grp>.stk,#view-forecast table.mf thead th.fyh>.stk{position:sticky;left:460px; display:inline-block;white-space:nowrap} #view-forecast .rowlab{display:flex;align-items:baseline;gap:6px} #view-forecast .rowlab .nm{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.4px} #view-forecast table.mf tr.inv .rowlab .nm{color:var(--blue-dark)} #view-forecast table.mf tr.cst .rowlab .nm{color:var(--amber-dark)} #view-forecast .wbsid{display:block;font-size:10px;color:var(--text-dim);white-space:nowrap; overflow:hidden;text-overflow:ellipsis;max-width:160px} /* ---- the paired inputs: $ and % SIDE BY SIDE, bunched up ---- */ #view-forecast .cellin{display:flex;align-items:center;justify-content:flex-end;gap:3px} #view-forecast input.pfin{background:transparent;border:1px solid transparent;border-radius:4px; font-family:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:2px 3px; color:var(--text);font-size:12px} #view-forecast input.pfin.d{width:58px} #view-forecast input.pfin.p{width:40px;color:var(--text-muted);font-size:11px} #view-forecast input.pfin:hover:not(:disabled){border-color:var(--border);background:var(--surface)} #view-forecast input.pfin:focus{border-color:var(--blue-mid);background:var(--surface);outline:none; color:var(--text);text-align:right} #view-forecast input.pfin:disabled{color:var(--text-ghost)} #view-forecast .ro{display:flex;align-items:center;justify-content:flex-end;gap:4px} #view-forecast .ro .d{font-size:12px;color:var(--blue-dark)} #view-forecast .ro .p{font-size:11px;color:var(--text-dim)} #view-forecast .nosrc{color:var(--text-ghost);font-size:13px;cursor:help} #view-forecast input.rate{width:44px;color:var(--amber-dark);font-size:12px;border-color:var(--border)} #view-forecast select.meth{background:var(--surface);border:1px solid #d0d0d0;color:var(--text); font-family:inherit;font-size:11px;padding:2px 4px;border-radius:4px} /* ---- baseline comparison, second line inside a month cell ---- */ #view-forecast .cmp{display:flex;align-items:center;justify-content:flex-end;gap:4px; font-size:10px;margin-top:2px;padding-top:2px;border-top:1px dotted var(--border)} #view-forecast .cmp .bv{color:var(--text-dim);font-variant-numeric:tabular-nums} #view-forecast .cmp .dv{font-weight:500;font-variant-numeric:tabular-nums} #view-forecast .cmp .dv.up{color:var(--red)} #view-forecast .cmp .dv.dn{color:var(--teal-dark)} #view-forecast .cmp .dv.flat{color:var(--text-ghost)} #view-forecast .cmp .dv.acc{color:var(--blue-dark)} #view-forecast .cmp.none{color:var(--text-ghost);justify-content:flex-end} /* ---- bars inside a cell, for the margin bridge ---- */ #view-forecast .bar{position:relative;height:12px;background:var(--surface-subtle);border:1px solid var(--border); border-radius:4px;min-width:140px;overflow:hidden} #view-forecast .bar i{position:absolute;top:0;bottom:0;left:0;display:block} #view-forecast .bar i.p{background:var(--teal)} #view-forecast .bar i.n{background:var(--red-vivid)} #view-forecast .bar i.b{background:var(--blue)} /* ---- commentary: collapsed by default ---- */ #view-forecast table.cm td{vertical-align:top} #view-forecast button.cmtog{background:transparent;border:1px solid var(--blue-mid);color:var(--blue); font-family:inherit;font-size:11px;padding:3px 9px;border-radius:5px;cursor:pointer;white-space:nowrap} #view-forecast button.cmtog:hover{background:var(--blue-tint)} #view-forecast button.cmtog[aria-expanded="true"]{background:var(--blue);border-color:var(--blue);color:#fff} #view-forecast .cmbody[hidden]{display:none} #view-forecast .cmbody{padding-top:8px} #view-forecast table.cm textarea{width:100%;min-width:420px;background:var(--surface);border:1px solid #d0d0d0; border-radius:8px;color:var(--text);font-family:inherit;font-size:12px;padding:7px 9px; line-height:1.5;resize:vertical;min-height:56px} #view-forecast table.cm textarea:focus{border-color:var(--blue-mid);outline:none} #view-forecast table.cm tr.req td{background:var(--amber-lightest)} #view-forecast table.cm tr.done td{background:var(--teal-lightest)} #view-forecast .cmprev{font-size:11px;color:var(--text-dim);max-width:52ch;overflow:hidden; text-overflow:ellipsis;white-space:nowrap;display:block} #view-forecast .note{border-left:3px solid var(--blue);background:var(--blue-tint);padding:10px 14px; border-radius:0 8px 8px 0;font-size:12px;color:var(--text-secondary);line-height:1.55; margin:12px 0 0;max-width:none} #view-forecast .note b{color:var(--text);font-weight:600} #view-forecast details.spc{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:8px} #view-forecast details.spc summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;gap:12px; align-items:center;font-size:13px;font-weight:500;color:var(--text)} #view-forecast details.spc summary::-webkit-details-marker{display:none} #view-forecast details.spc .more{margin-left:auto;font-size:12px;font-weight:400;color:var(--blue); border:1px solid var(--blue-mid);border-radius:5px;padding:3px 9px;white-space:nowrap} #view-forecast details.spc summary:hover .more{background:var(--blue-tint)} #view-forecast details.spc[open] .more::after{content:" \2212"} #view-forecast details.spc:not([open]) .more::after{content:" +"} #view-forecast details.spc .body{border-top:1px solid var(--border-light);padding:16px} #view-forecast details.spc .body p{margin:0 0 10px;font-size:12px;color:var(--text-secondary);line-height:1.6} #view-forecast details.spc .body p:last-child{margin-bottom:0} #view-forecast details.spc .body p b{color:var(--text);font-weight:600} #view-forecast details.spc .body code{color:var(--teal-darkest);background:var(--teal-lightest); border-radius:4px;padding:1px 4px;font-family:inherit;font-weight:500} #view-forecast table.spt{width:100%;border-collapse:collapse;font-size:12px} #view-forecast table.spt th{text-align:left;font-size:10px;font-weight:700;text-transform:uppercase; letter-spacing:.06em;color:var(--text-dim);padding:6px 14px 6px 0;border-bottom:1px solid var(--border)} #view-forecast table.spt td{padding:6px 14px 6px 0;border-bottom:1px solid var(--border-light); color:var(--text-secondary);line-height:1.55;vertical-align:top} #view-forecast table.spt td b{color:var(--text);font-weight:600} #view-forecast table.spt code{color:var(--teal-darkest);background:var(--teal-lightest);border-radius:4px; padding:1px 4px;font-family:inherit;font-weight:500} #view-forecast table.spt tr:last-child td{border-bottom:none} /* ---- the controls bar: FY chips left, snapped arrows right, immediately above the table ---- */ #view-forecast .mfbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px} #view-forecast .mfbar-r{margin-left:auto;display:flex;align-items:center;gap:6px} #view-forecast .fystrip{display:inline-flex;gap:4px;flex-wrap:wrap} #view-forecast button.fychip{background:var(--surface);border:1px solid var(--border);border-radius:4px; color:var(--text-muted);font-family:inherit;font-size:11px;padding:3px 8px;cursor:pointer; display:inline-flex;align-items:baseline;gap:5px} #view-forecast button.fychip:hover{border-color:var(--blue-mid);color:var(--text)} #view-forecast button.fychip.live{color:var(--text);border-color:#d0d0d0} #view-forecast button.fychip[aria-pressed="true"]{background:var(--teal-lightest);border-color:var(--teal); color:var(--teal-darkest);font-weight:500} #view-forecast button.fychip .st{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)} #view-forecast button.fychip.act{border-color:#d0d0d0;color:var(--text)} #view-forecast button.fychip.act[aria-pressed="true"]{background:var(--blue-tint);border-color:var(--blue-mid); color:var(--blue-dark)} #view-forecast button.fychip.act[aria-pressed="true"] .st{color:var(--blue)} #view-forecast button.fychip[aria-pressed="true"] .st{color:var(--teal-dark)} /* A FOLDED YEAR IS STILL AN ACTUAL OR A FORECAST, so its header keeps the band colour - only the body cell greys, to say the figure is a total rather than a month. */ #view-forecast table.mf td.mth.fyc{background:#f2f5f4;font-style:normal} /* the second line of a folded straddling year's label - ACTUAL or FORECAST, spelled out */ #view-forecast table.mf th.mth .half{display:block;font-size:8px;font-weight:600;letter-spacing:.08em; opacity:.85;margin-top:1px} /* THE CUT LINE, on every row of both tables. 3px on the first forecast column's left edge; box-sizing keeps the column at 92px so the snapping arithmetic does not drift. */ #view-forecast table.pw th.cutline,#view-forecast table.pw td.cutline{border-left:3px solid var(--cutline)} #view-forecast table.pw thead th.grp.cutline{border-left:3px solid var(--cutline)} #view-forecast .fsclose{display:none} /* ---- full screen (ask 2.6): a CSS mode, so the arrows and the selector come with it ---- */ body.mffull{overflow:hidden} body.mffull #view-forecast #mfsect{position:fixed;inset:0;z-index:80;background:var(--app-bg); padding:14px 20px 20px;overflow:auto;margin:0} body.mffull #view-forecast #mfsect .tbl-wrap{max-height:calc(100vh - 190px)} body.mffull #view-forecast #mfsect #t2lead{display:none} body.mffull #view-forecast #fsTog{display:none} body.mffull #view-forecast .fsclose{display:inline-block} body.mffull #view-forecast .pfmain>*:not(#mfsect){filter:none} /* ---- collapsible sections: every coloured box starts closed (ask 3) ---- */ #view-forecast .sect{margin-bottom:16px} #view-forecast button.secthead{width:100%;display:flex;align-items:center;gap:10px;background:var(--surface); border:1px solid var(--border);border-radius:8px;padding:9px 14px;cursor:pointer; font-family:inherit;font-size:12px;color:var(--text);text-align:left} #view-forecast button.secthead:hover{border-color:var(--blue-mid)} #view-forecast button.secthead .ttl{font-weight:500} #view-forecast button.secthead .cnt{color:var(--text-dim);font-size:11px} #view-forecast button.secthead .chev{margin-left:auto;color:var(--text-muted);font-size:14px;line-height:1} #view-forecast button.secthead[aria-expanded="true"]{border-bottom-left-radius:0;border-bottom-right-radius:0} #view-forecast .sect #wbsEdit{border:1px solid var(--border);border-top:none; border-radius:0 0 8px 8px;padding:14px} /* the section BODY carries the flex, not the .flags class - so [hidden] on this element is competing with nothing and the collapse actually collapses */ #view-forecast .sect #flags:not([hidden]){display:flex;flex-direction:column;gap:8px; border:1px solid var(--border);border-top:none;border-radius:0 0 8px 8px;padding:12px} #view-forecast button.notetog{width:100%;display:flex;align-items:center;gap:8px;background:var(--blue-tint); border:none;border-left:3px solid var(--blue);border-radius:0 8px 8px 0;padding:8px 14px; cursor:pointer;font-family:inherit;font-size:12px;color:var(--text-secondary);text-align:left; margin-top:12px} #view-forecast button.notetog:hover{background:#dceafd} #view-forecast button.notetog .chev{margin-left:auto;font-size:14px;line-height:1} #view-forecast .notebody[hidden]{display:none} /* ---- WBS edit panel ---- */ #view-forecast table.pw tbody tr.off td{background:#f7f7f7;color:var(--text-ghost)} #view-forecast table.pw tbody tr.off td.k,#view-forecast table.pw tbody tr.off .tag{color:var(--text-muted)} #view-forecast input.wbsname{background:var(--surface);border:1px solid #d0d0d0;border-radius:4px; font-family:inherit;font-size:12px;padding:3px 6px;width:200px;color:var(--text)} #view-forecast input.wbsname:focus{border-color:var(--blue-mid);outline:none} #view-forecast button.cmtog.del{border-color:#e0b4b4;color:var(--red)} #view-forecast button.cmtog.del:hover{background:var(--red-tint)} #view-forecast .wbsadd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px; padding-top:12px;border-top:1px solid var(--border-light)} #view-forecast .wbsadd input[type=text]{background:var(--surface);border:1px solid #d0d0d0;border-radius:8px; font-family:inherit;font-size:12px;padding:6px 9px;height:32px;color:var(--text)} #view-forecast #wbsNew{width:220px} #view-forecast #wbsNewRate{width:56px;text-align:right} /* ---- compare to forecast: the baseline reads in a darker teal so it cannot be mistaken for the live figure above it (ask 7) ---- */ #view-forecast .cmp .bv{color:var(--teal-darkest);font-weight:500} #view-forecast .cmp.act .bv{color:var(--blue-dark)} #view-forecast .cmp{border-top:1px dotted var(--blue-mid)} #view-forecast .cmp.none{border-top-style:dotted;color:var(--text-ghost)} #view-forecast footer{margin-top:32px;padding-top:12px;border-top:1px solid var(--border); font-size:11px;color:var(--text-dim);line-height:1.6} #view-forecast :focus-visible{outline:2px solid var(--blue-mid);outline-offset:1px} /* Desktop-first per the guide. The two frozen blocks need 480px + 176px before a month column exists; below that the right pair un-pins rather than superimposing on the left. */ @media (max-width:900px){ #view-forecast table.mf .r1,#view-forecast table.mf .r2,#view-forecast table.mf thead .r1,#view-forecast table.mf thead .r2{position:static} } @media (prefers-reduced-motion:reduce){#view-forecast, #view-forecast *{transition:none!important;animation:none!important}} /* ---- added on the site ---- */ #view-forecast .nomax{max-height:none} #view-forecast .ml-auto{margin-left:auto} #view-forecast .fs105{font-size:10.5px} #view-forecast .tc{text-align:center} #view-forecast .mw170{min-width:170px} #view-forecast .w230{width:230px} #view-forecast .fig{position:relative} #view-forecast .fig .mgn.neg{fill:var(--red);opacity:.16} #view-forecast .fig .base{fill:none;stroke:var(--text-dim);stroke-width:1.5;stroke-dasharray:2 3} #view-forecast .fig .hl{stroke:var(--text-secondary);stroke-width:1} #view-forecast .fig .hov{fill:transparent;cursor:crosshair} #view-forecast .figtip{position:absolute;top:10px;width:230px;background:var(--surface);border:1px solid var(--border); border-radius:8px;padding:8px 10px;box-shadow:0 2px 12px rgba(0,0,0,.12);font-size:12px;pointer-events:none;z-index:5} #view-forecast .figtip table{margin-top:6px;border-collapse:collapse;width:100%} #view-forecast .figtip td{padding:2px 0;border:0;background:none} #view-forecast .figtip td.num{text-align:right;padding-left:10px;font-variant-numeric:tabular-nums} #view-forecast .figtip td.neg{color:var(--red);font-weight:600} #view-forecast .figkey i.sw-blue{background:var(--blue)} #view-forecast .figkey i.sw-fut{background:var(--teal-dark)} #view-forecast .figkey i.sw-mgn{background:var(--teal);opacity:.25} #view-forecast .figkey i.sw-neg{background:var(--red);opacity:.3} #view-forecast .figkey i.sw-amber{background:var(--amber)} #view-forecast .figkey i.sw-base{height:0;border-top:1.5px dotted var(--text-dim);border-radius:0} #view-forecast table.pw tr.unm td{color:var(--red);background:var(--red-lightest)} #view-forecast table.pw td.neg{color:var(--red)} /* The site's own table rules (www/report/report.css) are element selectors and reach in here; these put back what the pack's tables assume. */ #view-forecast table.pw tbody tr:hover td{background:inherit} /* Inside the report since 12 Oct 2026: the A.7 page is a tab, so the report's header and padding are the page's, and the pack's own title would only repeat the report's. */ #view-forecast .pfmain{max-width:none;margin:0;padding:0} #view-forecast .pghead h1{display:none}