/* ══════════════════════════════════════════════════════════════════════════════════════════
   THE FINANCIALS — GRAPHIC UPGRADE (CEO 2026-09-27, verbatim): "this is design slop, make it
   smarter, more animated, graphic financials" / "you need to heavily upgrade all chart and data
   design AND ensure all animations are built, it's all too static".

   Belt for pn-fin-charts.js (the on-scroll draw) + script-01.js edits (gradient area fill,
   gauge threshold bands, count-up hooks). Loaded LAST (after pn-pressure-room-20260913.css and
   pn-scroll-reveal-20260927.css) so it can win on equal-or-lower specificity where it needs to.
   Nothing here touches [data-s1-grow] styling (pn-scroll-reveal.js's own bars) — this sheet is
   the chart/gauge/death-marker graphic layer only.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── the area fill now carries its own gradient (script-01.js s1CashChart) — the flat .14
   opacity multiplier from style-01.css read as a block colour on top of the gradient; the
   gradient's own stops already encode the fade, so this chart's fill wants full opacity. ── */
html body .s1-screen .s1-chart .c-fill{ opacity:1; }

/* ── the death marker: a gentle, continuous pulse — the one dramatic, ongoing motion cue on
   this chart (everything else is disciplined, draws in once and settles). Ring pulses outward
   and fades; the solid dot underneath stays put so the marker never goes illegible mid-pulse. ── */
@media (prefers-reduced-motion: no-preference){
  html body .s1-screen .s1-chart .c-death-ring{
    transform-origin:center; transform-box:fill-box;
    animation:s1DeathPulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
  }
  @keyframes s1DeathPulse{
    0%{ transform:scale(.7); opacity:.9; }
    70%{ transform:scale(1.9); opacity:0; }
    100%{ transform:scale(1.9); opacity:0; }
  }
}

/* ── runway gauge: threshold bands (script-01.js s1CfoNoteHTML) — a translucent backdrop of
   danger/caution under the real value arc, so the gauge reads as a graded instrument rather
   than a single bar. The value arc itself keeps the existing is-good/is-warn/is-bad tone. ── */
html body .s1-cfo-gauge svg .band{ opacity:.24; }
html body .s1-cfo-gauge svg .band-warn{ stroke:var(--s1-warn); }
html body .s1-cfo-gauge svg .band-bad{ stroke:var(--s1-bad); }
/* "ok" tone (net<0 but runway > 12wk — healthy per the CEO's own band definition) had no colour
   mapping before this pass and fell through to the plain accent; it belongs with "healthy". */
html body .s1-cfo-gauge.is-ok svg .val{ stroke:var(--s1-good); }

/* the value arc draws in via stroke-dasharray/offset (pn-fin-charts.js) — round the cap so a
   short, freshly-armed arc (e.g. the 2-week danger case) still reads as a stroke, not a dot. */
html body .s1-cfo-gauge svg .val{ stroke-linecap:round; }

/* ── the money-in/out bars grow in via `width` (pn-fin-charts.js, [data-s1-w]) — the bar's own
   number label already counts up alongside it via [data-pn-count] (pn-motion.js), so give the
   label a touch of tabular-nums stability while the fill grows underneath it. ── */
html body .s1-cfo-bar b{ font-variant-numeric:tabular-nums; }
html body .s1-cfo-net{ font-variant-numeric:tabular-nums; }

/* every counted-up figure in this room lines up on tabular numerals — the payroll/accounts
   rows, the ledger, the bar values — so a growing digit count never reflows its neighbours. */
html body .s1-screen [data-pn-count]{ font-variant-numeric:tabular-nums; }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   ROUND 2 — coordinator, 2026-09-27: "not yet the heavy upgrade... make the trajectory chart
   the hero, build the donut-plus-ranked-bar treatment". Panel CHROME stays flat per the
   2026-09-19 binding ruling (no glass/gradient/shadow on the room's surfaces) — every gradient
   below lives INSIDE an svg data fill, never on a card/button.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── trajectory chart, as the hero: bigger (via the taller viewBox — script-01.js s1CashChart),
   a real £ y-axis alongside the week x-axis, and an emphasised endpoint (halo + value label). ── */
html body .s1-screen .s1-chart .c-grid-h{ stroke:var(--s1-grid); stroke-width:1; }
html body .s1-screen .s1-chart .c-ax-y{ font-size:11.5px !important; }
html body .s1-screen .s1-chart .c-now-val{
  font-weight:900; font-size:13px !important; fill:var(--s1-ink) !important;
  letter-spacing:0 !important; text-transform:none !important;
}
html body .s1-screen .s1-chart .c-now-halo{
  fill:var(--s1-accent); opacity:.16;
}
@media (prefers-reduced-motion: no-preference){
  html body .s1-screen .s1-chart .c-now-halo{
    transform-origin:center; transform-box:fill-box;
    animation:s1NowPulse 2.6s cubic-bezier(.4,0,.2,1) infinite;
  }
  @keyframes s1NowPulse{
    0%{ transform:scale(.85); opacity:.22; }
    70%{ transform:scale(1.7); opacity:0; }
    100%{ transform:scale(1.7); opacity:0; }
  }
}
/* the panel that hosts the hero chart gets a touch more room to breathe than the other tall
   panel (THE DEATH WEEK) now that the chart itself is visually heavier. */
html body .s1-screen .s1-panel--accent.tall{ padding-bottom:22px; }

/* ── WHO EATS THE BURN / RETAINED ACCOUNTS — donut + ranked-bar legend ──────────────────────
   The donut's arcs are `.s1-donut-seg[data-s1-draw]` paths (script-01.js s1Donut()) — the SAME
   stroke-draw convention pn-fin-charts.js already uses for the trajectory line and the runway
   arc, just pointed at a new selector, so segments sweep in on scroll exactly like the rest of
   this room's charts. The ranked bars ARE the donut's legend: each row's swatch dot is the same
   colour as its wedge, in the same order. */
html body .s1-screen .s1-donut-row{ display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; }
html body .s1-screen .s1-donut-wrap{
  position:relative; flex:0 0 128px; width:128px; height:128px; margin-top:2px;
}
html body .s1-screen .s1-donut{ width:100%; height:100%; display:block; overflow:visible; }
html body .s1-screen .s1-donut-trk{ stroke:var(--s1-grid); stroke-width:14; opacity:.6; }
html body .s1-screen .s1-donut-seg{ fill:none; stroke-width:14; stroke-linecap:round; }
html body .s1-screen .s1-donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; pointer-events:none; gap:2px;
}
html body .s1-screen .s1-donut-total{
  font:900 17px/1.05 var(--pn-type-face,Inter,sans-serif); color:var(--s1-ink);
  font-variant-numeric:tabular-nums;
}
html body .s1-screen .s1-donut-sub{
  font:700 9.5px/1.2 var(--mono),monospace; letter-spacing:.08em; text-transform:uppercase;
  color:var(--s1-muted);
}
html body .s1-screen .s1-donut-legend{ flex:1 1 220px; min-width:0; }
html body .s1-screen .s1-rb-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px;
  flex:0 0 auto; position:relative; top:-1px;
}
@media (max-width:640px){
  html body .s1-screen .s1-donut-row{ flex-direction:column; align-items:center; }
  html body .s1-screen .s1-donut-legend{ width:100%; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   ROUND 3 — CEO evidence on the LIVE week-1/no-history state (a single dashed diagonal from a
   "NOW" callout to a "DEATH" label sitting on top of the line, raw £ values, big legend chips).
   Danger zone, confidence fan and a real TODAY hero anchor for that exact state; nice-number
   axis ticks are done in script-01.js (s1NiceAxis). Everything here stays a data encoding on
   the SVG chart itself — no glass/gradient/shadow added to the room's own panel chrome.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* the shaded region from the zero-crossing week onward — a backdrop, drawn first, never an
   obstruction. Kept faint: it is a zone, not a second data series. */
html body .s1-screen .s1-chart .c-danger-zone{ fill:var(--s1-bad); opacity:.08; }
/* thin leader tying the top-of-chart label to the actual zero-crossing point, so the two read
   as one annotation without sharing pixels with the projection line. */
html body .s1-screen .s1-chart .c-death-leader{ stroke:var(--s1-bad); stroke-width:1; stroke-dasharray:2 3; opacity:.55; }
/* the danger-zone label lives at the TOP of the chart — the one area no line/fan/area ever
   reaches — instead of at the line's own end point, which is what collided before. */
html body .s1-screen .s1-chart .c-lbl.death{ dominant-baseline:hanging; }

/* the widening confidence fan behind the dashed projection — a soft, low-opacity band whose
   growing width IS the "this gets less certain the further out it goes" cue; no second legend
   entry needed because the shape reads on its own next to a crisp solid history line. */
html body .s1-screen .s1-chart .c-fan{ fill:var(--s1-accent); opacity:.10; stroke:none; }

/* TODAY hero anchor (week-1 / no-history state): a bigger halo + bigger value than the later
   NOW marker gets, because on day one this dot is the ENTIRE chart, not one point on a line. */
html body .s1-screen .s1-chart .c-now-halo.is-hero{ fill:var(--s1-accent); opacity:.18; }
@media (prefers-reduced-motion: no-preference){
  html body .s1-screen .s1-chart .c-now-halo.is-hero{
    transform-origin:center; transform-box:fill-box;
    animation:s1NowPulse 2.6s cubic-bezier(.4,0,.2,1) infinite;
  }
}
html body .s1-screen .s1-chart .c-now-val.is-hero{ font-size:16px !important; }
html body .s1-screen .s1-chart .c-now-lbl{ font-variant-numeric:tabular-nums; }