/* =========================================================================
   BUDGET DEMO (/v2/financial-planning-v2 hero) — scene styles for
   BudgetDemo.astro. Timeline: public/js/budget-demo.js sets
   [data-scene="1..4"] plus `is-*` step classes on #budgetDemo; everything
   below just reacts to those. Storyboard: BudgetDemo.astro header comment.

   The --bd-* palette deliberately mirrors the PRODUCT (webapp_v3
   src/styles/_theme.scss), not this site's tokens — same likeness rules as
   the home hero demo (hero-demo.css).
   ========================================================================= */

.bd {
  --bd-canvas: #FAF9F5;      /* product --color-bg-canvas */
  --bd-card: #FFFFFF;
  --bd-border: #DBDBDE;      /* product --color-border-primary */
  --bd-line: #EAEAEA;        /* product --color-border-light */
  --bd-head: #F6F6F7;        /* product --color-bg-secondary (table headers) */
  --bd-ink: #2B2B2B;         /* product --color-content-primary */
  --bd-ink2: #777777;        /* product --color-content-secondary */
  --bd-accent: #6A5BC6;      /* product --color-accent */
  --bd-accent-soft: #ECECFF; /* product --color-bg-accent-soft */
  --bd-blue: #5B77C6;        /* product --color-neutral (entity pills) */
  --bd-green: #2C8E45;       /* product --color-positive */
  --bd-green-soft: #C4EECF;  /* product --color-bg-positive-soft */
  --bd-red: #D63B29;         /* product --color-negative */
}

.bd__stage {
  position: relative; overflow: hidden;
  aspect-ratio: 6 / 5; min-height: 320px;
  background: var(--bd-canvas);
  transition: opacity .5s ease;
}
.bd.is-out .bd__stage { opacity: 0; }

/* ---------- views (crossfade per scene) ---------- */
/* view 1 is visible by default so the card still reads without JS; the
   scene-1 entrance states below are gated on .is-anim (set by the JS). */
.bd__view {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity .5s ease;
}
.bd__view--target { opacity: 1; }
.bd[data-scene="2"] .bd__view--target,
.bd[data-scene="3"] .bd__view--target,
.bd[data-scene="4"] .bd__view--target { opacity: 0; }
.bd[data-scene="2"] .bd__view--owners,
.bd[data-scene="3"] .bd__view--rec,
.bd[data-scene="4"] .bd__view--final { opacity: 1; }

/* shared panel scaffolding inside a view */
.bdPanel { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 16px 18px 40px; }
.bdHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; }
.bdHead__title { font-size: 12.5px; font-weight: 600; color: var(--bd-ink); }

/* user chip (scene 1 header) */
.bdUser { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 500; color: var(--bd-ink2); }
.bdUser i {
  width: 18px; height: 18px; border-radius: 50%; font-style: normal;
  font-size: 7.5px; font-weight: 700; color: #fff; background: var(--c);
  display: inline-flex; align-items: center; justify-content: center;
}

/* white product card */
.bdCard {
  background: var(--bd-card); border: 1px solid var(--bd-border); border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .06); padding: 12px 14px;
}
.bdCard__title { font-size: 11.5px; font-weight: 600; color: var(--bd-ink); margin-bottom: 8px; }

/* =========================================================================
   SCENE 1 — top-down targets
   ========================================================================= */
/* the growth-cap variable pill drops in first */
.bdVarPill {
  align-self: flex-start; margin-bottom: 10px;
  font-size: 10px; color: var(--bd-ink); background: var(--bd-accent-soft);
  border: 1px solid rgba(106, 91, 198, .35); border-radius: 999px; padding: 4px 11px;
  transition: opacity .4s ease, transform .4s ease;
}
.bdVarPill b { font-weight: 600; color: var(--bd-accent); }
.bd.is-anim .bdVarPill { opacity: 0; transform: translateY(-6px); }
.bd.is-cap .bdVarPill { opacity: 1; transform: none; }

.bdTargets { transition: opacity .45s ease, transform .45s ease; }
.bd.is-anim .bdTargets { opacity: 0; transform: translateY(10px); }
.bd.is-t1 .bdTargets { opacity: 1; transform: none; }

.bdTGrid { border: 1px solid var(--bd-border); border-radius: 6px; overflow: hidden; }
.bdTGrid__row {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr;
  border-bottom: 1px solid var(--bd-line); font-size: 10.5px;
}
.bdTGrid__row:last-child { border-bottom: 0; }
.bdTGrid__row > span { padding: 6px 10px; white-space: nowrap; overflow: hidden; }
.bdTGrid__row--h > span {
  font-size: 9px; font-weight: 600; color: var(--bd-ink);
  background: var(--bd-head); border-bottom: 1px solid var(--bd-border);
}
.bdTGrid__row--h > span:not(:first-child), .bdTGrid__num { text-align: right; }
.bdTGrid__name { color: var(--bd-ink); font-weight: 500; }
.bdTGrid__num { color: var(--bd-ink2); font-variant-numeric: tabular-nums; }

/* dept rows fade in with the card; FY26 targets pop one by one after */
.bdTGrid__row:not(.bdTGrid__row--h):not(.bdTGrid__row--total) {
  transition: opacity .3s ease, transform .3s ease;
  transition-delay: calc(.12s + var(--i) * 80ms);
}
.bd.is-anim .bdTGrid__row:not(.bdTGrid__row--h):not(.bdTGrid__row--total) { opacity: 0; transform: translateX(-5px); }
.bd.is-t1 .bdTGrid__row:not(.bdTGrid__row--h):not(.bdTGrid__row--total) { opacity: 1; transform: none; }
.bdTGrid__target {
  color: var(--bd-ink); font-weight: 600;
  transition: opacity .3s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1);
  transition-delay: calc(var(--i) * 190ms);
}
.bd.is-anim .bdTGrid__row .bdTGrid__target { opacity: 0; transform: scale(.8); }
.bd.is-targets .bdTGrid__row .bdTGrid__target { opacity: 1; transform: none; }

/* total row: hidden until the targets land, then highlights in accent */
.bdTGrid__row--total {
  font-weight: 600; background: var(--bd-accent-soft);
  transition: opacity .35s ease, background .45s ease;
}
.bdTGrid__row--total .bdTGrid__num { color: var(--bd-ink); font-weight: 600; }
.bdTGrid__row--total .bdTGrid__target { color: var(--bd-accent); transition-delay: 0s; }
.bd.is-anim .bdTGrid__row--total { opacity: 0; background: var(--bd-card); }
.bd.is-anim .bdTGrid__row--total .bdTGrid__target { opacity: 1; transform: none; color: var(--bd-ink); }
.bd.is-total .bdTGrid__row--total { opacity: 1; background: var(--bd-accent-soft); }
.bd.is-total .bdTGrid__row--total .bdTGrid__target { color: var(--bd-accent); }

/* =========================================================================
   SCENE 2 — bottom-up submissions
   ========================================================================= */
.bdDue {
  font-size: 9.5px; font-weight: 500; color: var(--bd-ink2);
  border: 1px solid var(--bd-border); border-radius: 999px; padding: 3px 9px; background: var(--bd-card);
}
.bdSplit { display: grid; grid-template-columns: 1.12fr 1fr; gap: 10px; align-items: start; }

.bdOwners, .bdOwnerView {
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}
.bdOwnerView { transition-delay: .15s; }
.bd.is-owners .bdOwners, .bd.is-owners .bdOwnerView { opacity: 1; transform: none; }

.bdOwner {
  display: flex; align-items: center; gap: 7px; padding: 5.5px 0;
  border-bottom: 1px solid var(--bd-line);
  opacity: 0; transform: translateX(-6px);
  transition: opacity .3s ease, transform .3s ease;
  transition-delay: calc(.15s + var(--i) * 90ms);
}
.bdOwner:last-child { border-bottom: 0; }
.bd.is-owners .bdOwner { opacity: 1; transform: none; }
.bdOwner__av {
  flex: none; width: 19px; height: 19px; border-radius: 50%; font-style: normal;
  font-size: 7.5px; font-weight: 700; color: #fff; background: var(--c);
  display: flex; align-items: center; justify-content: center;
}
.bdOwner__who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.bdOwner__who b { font-size: 9.8px; font-weight: 600; color: var(--bd-ink); white-space: nowrap; }
.bdOwner__who span { font-size: 8.5px; color: var(--bd-ink2); white-space: nowrap; }

/* status pill flips In progress → Submitted ✓, staggered per owner */
.bdStatus { position: relative; flex: none; font-size: 8.2px; font-weight: 600; }
.bdStatus__a, .bdStatus__b {
  display: inline-block; border-radius: 999px; padding: 2.5px 7px; white-space: nowrap;
  transition: opacity .35s ease; transition-delay: calc(.1s + var(--i) * 240ms);
}
.bdStatus__a { color: var(--bd-ink2); background: var(--bd-head); border: 1px solid var(--bd-line); }
.bdStatus__b {
  position: absolute; right: 0; top: 0; opacity: 0;
  color: var(--bd-green); background: var(--bd-green-soft); border: 1px solid rgba(44, 142, 69, .3);
}
.bd.is-submits .bdStatus__a { opacity: 0; }
.bd.is-submits .bdStatus__b { opacity: 1; }

/* Maya's filtered mini-grid */
.bdCard__scope { font-size: 8.5px; color: var(--bd-ink2); margin: -4px 0 8px; }
.bdMiniGrid { border: 1px solid var(--bd-border); border-radius: 6px; overflow: hidden; }
.bdMiniGrid__row {
  display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr;
  border-bottom: 1px solid var(--bd-line); font-size: 9.3px;
}
.bdMiniGrid__row:last-child { border-bottom: 0; }
.bdMiniGrid__row > span { padding: 5px 7px; white-space: nowrap; overflow: visible; }
.bdMiniGrid__row--h > span {
  font-size: 8px; font-weight: 600; color: var(--bd-ink);
  background: var(--bd-head); border-bottom: 1px solid var(--bd-border);
}
.bdMiniGrid__row--h > span:not(:first-child), .bdMiniGrid__num { text-align: right; }
.bdMiniGrid__name { color: var(--bd-ink); font-weight: 500; }
.bdMiniGrid__num { color: var(--bd-ink2); font-variant-numeric: tabular-nums; }

/* live multiplayer cells: value pops in inside an owner-colored outline */
.bdCellLive { position: relative; }
.bdCellLive b {
  font-weight: 500; opacity: 0; transform: scale(.75);
  display: inline-block;
  transition: opacity .3s ease, transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.bdCellLive::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1.5px solid #B090CC; opacity: 0; transition: opacity .3s ease;
}
.bdCellLive__flag {
  position: absolute; top: -11px; right: -1px; z-index: 1;
  font-style: normal; font-size: 6.5px; font-weight: 700; color: #fff;
  background: #B090CC; border-radius: 2px 2px 0 2px; padding: 1px 4px;
  opacity: 0; transition: opacity .3s ease;
}
.bd.is-cell1 .bdCellLive--1 b, .bd.is-cell2 .bdCellLive--2 b { opacity: 1; transform: none; }
/* the cursor chrome follows the active cell — only one flag shows at a time */
.bd.is-cell1:not(.is-cell2) .bdCellLive--1::after,
.bd.is-cell1:not(.is-cell2) .bdCellLive--1 .bdCellLive__flag { opacity: 1; }
.bd.is-cell2:not(.is-submits) .bdCellLive--2::after,
.bd.is-cell2:not(.is-submits) .bdCellLive--2 .bdCellLive__flag { opacity: 1; }

/* =========================================================================
   SCENE 3 — reconcile in one model
   ========================================================================= */
.bdGap {
  font-size: 9.5px; font-weight: 500; color: var(--bd-ink2);
  background: var(--bd-card); border: 1px solid var(--bd-border); border-radius: 999px; padding: 3px 10px;
  transition: color .4s ease, background .4s ease, border-color .4s ease;
}
.bdGap b { font-weight: 700; color: var(--bd-red); transition: color .4s ease; }
.bd.is-ontarget .bdGap { background: var(--bd-green-soft); border-color: rgba(44, 142, 69, .3); color: var(--bd-green); }
.bd.is-ontarget .bdGap b { color: var(--bd-green); }

.bdRec {
  display: flex; flex-direction: column; gap: 14px; padding: 18px 16px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}
.bd.is-rec .bdRec { opacity: 1; transform: none; }

.bdBar { display: grid; grid-template-columns: 96px 1fr 48px; align-items: center; gap: 9px; }
.bdBar__label { font-size: 9.8px; font-weight: 500; color: var(--bd-ink); white-space: nowrap; }
.bdBar__track { height: 20px; border-radius: 4px; background: var(--bd-head); border: 1px solid var(--bd-line); overflow: hidden; }
.bdBar__fill { display: block; height: 100%; width: 0; border-radius: 3px 0 0 3px; transition: width .9s cubic-bezier(.5, .05, .3, 1); }
.bdBar__fill--target { background: var(--bd-accent); }
.bdBar__fill--rollup { background: var(--bd-blue); }
.bdBar__val { font-size: 10px; font-weight: 600; color: var(--bd-ink); font-variant-numeric: tabular-nums; text-align: right; }

/* the bars draw on is-rec; the roll-up shrinks stepwise as cuts land */
.bd.is-rec .bdBar__fill--target { width: 80%; }
.bd.is-rec .bdBar__fill--rollup { width: 88%; }
.bd.is-cut1 .bdBar__fill--rollup { width: 85.3%; }
.bd.is-cut2 .bdBar__fill--rollup { width: 82.7%; }
.bd.is-cut3 .bdBar__fill--rollup { width: 80%; }
.bd.is-ontarget .bdBar__fill--rollup { background: var(--bd-green); }

.bdCuts { border-top: 1px solid var(--bd-line); padding-top: 11px; }
.bdCuts__label {
  font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bd-ink2); margin-bottom: 8px;
}
.bdCuts__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bdCut {
  font-size: 9.3px; color: var(--bd-ink); background: var(--bd-head);
  border: 1px solid var(--bd-line); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
  opacity: 0; transform: translateY(6px) scale(.9);
  transition: opacity .3s ease, transform .3s cubic-bezier(.3, 1.3, .5, 1);
}
.bdCut b { font-weight: 600; color: var(--bd-red); }
.bd.is-cut1 .bdCut:nth-child(1), .bd.is-cut2 .bdCut:nth-child(2), .bd.is-cut3 .bdCut:nth-child(3) { opacity: 1; transform: none; }

/* =========================================================================
   SCENE 4 — approved
   ========================================================================= */
.bdPanel--final { justify-content: center; padding: 16px 26px 46px; }
.bdFinal {
  position: relative; padding: 20px 22px 16px;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease;
}
.bd.is-final .bdFinal { opacity: 1; transform: none; }
.bdFinal__eyebrow {
  font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bd-ink2); margin-bottom: 7px;
}
.bdFinal__title {
  /* product page titles are set in Newsreader (serif display) */
  font-family: 'Newsreader', serif; font-size: 22px; font-weight: 500; color: var(--bd-ink);
  letter-spacing: -.01em; margin-bottom: 14px;
}
.bdFinal__rows { border-top: 1px solid var(--bd-line); margin-bottom: 14px; }
.bdFinal__row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; padding: 7px 0; border-bottom: 1px solid var(--bd-line);
}
.bdFinal__row i { font-style: normal; color: var(--bd-ink); font-weight: 500; }
.bdFinal__row b { font-weight: 400; color: var(--bd-ink2); font-variant-numeric: tabular-nums; }
.bdFinal__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bdFinal__avs { display: flex; }
.bdFinal__avs i {
  width: 18px; height: 18px; border-radius: 50%; font-style: normal;
  font-size: 7px; font-weight: 700; color: #fff; background: var(--c);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--bd-card); margin-left: -5px;
}
.bdFinal__avs i:first-child { margin-left: 0; }
.bdFinal__meta {
  font-size: 9px; font-weight: 500; color: var(--bd-ink2);
  opacity: 0; transition: opacity .4s ease;
}
.bd.is-locked .bdFinal__meta { opacity: 1; }

/* the green stamp lands with a scale-down "thunk" */
.bdStamp {
  position: absolute; top: 14px; right: 16px;
  font-size: 12.5px; font-weight: 700; color: var(--bd-green);
  border: 2px solid var(--bd-green); border-radius: 6px; padding: 4px 11px;
  background: rgba(196, 238, 207, .35);
  opacity: 0; transform: rotate(-6deg) scale(1.7);
  transition: opacity .3s ease, transform .3s cubic-bezier(.4, 1.6, .6, 1);
}
.bd.is-stamp .bdStamp { opacity: 1; transform: rotate(-6deg) scale(1); }

/* =========================================================================
   STORYLINE INDICATOR (persistent, bottom-left)
   ========================================================================= */
.bdStep {
  position: absolute; left: 14px; bottom: 10px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bd-card); border: 1px solid var(--bd-line); border-radius: 999px;
  padding: 4px 11px 4px 9px; box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}
.bdStep__dots { display: flex; gap: 4px; }
.bdStep__dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bd-border); transition: background .3s ease;
}
.bd[data-scene="1"] .bdStep__dots i:nth-child(1),
.bd[data-scene="2"] .bdStep__dots i:nth-child(2),
.bd[data-scene="3"] .bdStep__dots i:nth-child(3),
.bd[data-scene="4"] .bdStep__dots i:nth-child(4) { background: var(--bd-accent); }
.bdStep__label {
  font-size: 9px; font-weight: 600; color: var(--bd-ink);
  transition: opacity .25s ease;
}
.bd.is-stepfade .bdStep__label { opacity: 0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .bdSplit { grid-template-columns: 1fr; }
  .bdOwnerView { display: none; }
}
@media (max-width: 560px) {
  .bd__stage { aspect-ratio: 1 / 1.05; }
  .bdPanel { padding: 12px 12px 38px; }
  .bdBar { grid-template-columns: 76px 1fr 44px; }
}