/* =========================================================================
   FINANCE RIGOR DEMO (#financeRigorDemo).
   See src/components/FinanceRigorDemo.astro for the storyboard.
   Timeline: public/js/finance-rigor-demo.js toggles `is-*` classes.

   A single steady scene (no crossfade — same pattern as CapacityChainDemo /
   QuotaChainDemo): a left-to-right chain of stages, ending in a resolve
   pill instead of a two-number reconcile.

   The --frd-* palette mirrors the PRODUCT (webapp_v3 src/styles/_theme.scss),
   same likeness rules and exact values as every other demo on the site.
   ========================================================================= */

.frd {
  --frd-canvas: #FAF9F5;
  --frd-card: #FFFFFF;
  --frd-border: #DBDBDE;
  --frd-line: #EAEAEA;
  --frd-head: #F6F6F7;
  --frd-ink: #2B2B2B;
  --frd-ink2: #777777;
  --frd-accent: #6A5BC6;
  --frd-accent-soft: #ECECFF;
  --frd-green: #2C8E45;
  --frd-green-soft: #C4EECF;
}

/* standard product-demo dimensions (matches every other demo's stage —
   width:100% keeps aspect-ratio from computing width off the min-height
   floor in a narrow container, the bug this pattern has hit before). */
.frd__stage {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 3 / 2; min-height: 380px; max-width: 640px; margin: 0 auto;
  background: var(--frd-canvas);
  display: flex; flex-direction: column;
  transition: opacity .5s ease;
}
.frd.is-out .frd__stage { opacity: 0; }

.frd__topBar {
  flex: none; font-size: 11px; font-weight: 600; color: var(--frd-ink);
  padding: 12px 14px 9px; border-bottom: 1px solid var(--frd-line);
  white-space: nowrap;
}

.frd__pane {
  flex: 1; min-height: 0; min-width: 0; padding: 12px 14px;
  display: flex; flex-direction: column; justify-content: center;
}

.frdHead { margin: 0 0 16px; font-size: 12px; font-weight: 600; color: var(--frd-ink); text-align: center; }

/* ---------- the chain — four stage cards joined by arrows, each dark until
   the timeline reaches it. ---------- */
.frd__chain {
  display: flex; align-items: stretch; justify-content: center;
  flex-wrap: nowrap; gap: 6px;
}
.frdStage {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; padding: 11px 6px;
  background: var(--frd-card); border: 1px solid var(--frd-border); border-radius: 9px;
  opacity: .32; transform: translateY(var(--motion-rise));
  transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease-enter), border-color .3s ease, box-shadow .3s ease;
}
.frdStage__n {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: var(--frd-head); color: var(--frd-ink2);
  font-size: 7.5px; font-weight: 700; line-height: 14px;
  transition: background .3s ease, color .3s ease;
}
.frdStage__label { font-size: 8px; font-weight: 600; color: var(--frd-ink2); text-transform: uppercase; letter-spacing: .04em; }
.frdStage__val {
  font-size: 15px; font-weight: 700; color: var(--frd-ink);
  font-variant-numeric: tabular-nums; min-height: 20px;
}
.frdStage__sub { font-size: 8px; color: var(--frd-ink2); line-height: 1.3; }

/* the modeling-blocks stage: block-name chips landing one at a time in
   place of a single value — echoes the real block vocabulary used on
   build-models-and-reports.astro. */
.frdStage__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; min-height: 20px; align-items: center; }
.frdStage__chips i {
  font-style: normal; font-size: 6.5px; font-weight: 700; color: var(--frd-accent);
  background: var(--frd-accent-soft); border-radius: 999px; padding: 2px 5px;
  opacity: 0; transform: scale(.7);
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) var(--ease-pop);
}
.frd.is-chip-1 .frdStage__chips i:nth-child(1),
.frd.is-chip-2 .frdStage__chips i:nth-child(-n+2),
.frd.is-chip-3 .frdStage__chips i:nth-child(-n+3),
.frd.is-chip-4 .frdStage__chips i:nth-child(-n+4),
.frd.is-chip-5 .frdStage__chips i:nth-child(-n+5) { opacity: 1; transform: none; }

/* a stage the timeline has reached. */
.frd.is-step-sources .frdStage[data-stage="sources"],
.frd.is-step-detail  .frdStage[data-stage="detail"],
.frd.is-step-blocks  .frdStage[data-stage="blocks"],
.frd.is-step-model   .frdStage[data-stage="model"] { opacity: 1; transform: none; }

/* the stage that just landed — briefly outlined, the same "this number just
   moved" language the other demos use. */
.frdStage.is-flash {
  border-color: var(--frd-accent); box-shadow: 0 0 0 3px var(--frd-accent-soft);
}
.frdStage.is-flash .frdStage__n { background: var(--frd-accent); color: #fff; }

/* the arrows between stages, revealed with the stage they point into. */
.frdArrow {
  flex: none; align-self: center; font-size: 11px; color: var(--frd-ink2);
  opacity: 0; transition: opacity .3s ease;
}
.frd.is-step-detail .frdArrow[data-arrow="detail"],
.frd.is-step-blocks .frdArrow[data-arrow="blocks"],
.frd.is-step-model  .frdArrow[data-arrow="model"] { opacity: 1; }

/* ---------- the resolve pill — a single guarantee, not a comparison. ---------- */
.frdResolve {
  margin-top: 14px; display: flex; justify-content: center;
  opacity: 0; transform: translateY(var(--motion-rise));
  transition: opacity var(--motion-base) ease, transform var(--motion-base) var(--ease-enter);
}
.frd.is-resolved .frdResolve { opacity: 1; transform: none; }
.frdResolve__flag {
  font-size: 9.5px; font-weight: 700; color: var(--frd-green);
  background: #E3F5E9; border: 1px solid var(--frd-green-soft); border-radius: 999px;
  padding: 5px 12px; white-space: nowrap;
}

/* ---------- responsive — below the point four cards in a row get too
   cramped, read the chain top-to-bottom instead: same stages, stacked. */
@media (max-width: 520px) {
  .frd__stage { aspect-ratio: auto; min-height: 560px; }
  .frd__chain { flex-direction: column; }
  .frdStage { width: 100%; max-width: 230px; margin: 0 auto; }
  .frdArrow { transform: rotate(90deg); }
}