/* =========================================================================
   QUOTA CHAIN DEMO (#quotaChainDemo).
   See src/components/QuotaChainDemo.astro for the storyboard.
   Timeline: public/js/quota-chain-demo.js toggles `is-*` classes.

   A single steady scene (no crossfade — same pattern as CapacityChainDemo on
   the sibling Sales Capacity page): a literal left-to-right chain of stages
   with a return leg underneath, not a territory map.

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

.qcd {
  --qcd-canvas: #FAF9F5;
  --qcd-card: #FFFFFF;
  --qcd-border: #DBDBDE;
  --qcd-line: #EAEAEA;
  --qcd-head: #F6F6F7;
  --qcd-ink: #2B2B2B;
  --qcd-ink2: #777777;
  --qcd-accent: #6A5BC6;
  --qcd-accent-soft: #ECECFF;
  --qcd-green: #2C8E45;
  --qcd-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). */
.qcd__stage {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 3 / 2; min-height: 380px; max-width: 640px; margin: 0 auto;
  background: var(--qcd-canvas);
  display: flex; flex-direction: column;
  transition: opacity .5s ease;
}
.qcd.is-out .qcd__stage { opacity: 0; }

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

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

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

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

/* the two reviewing leaders, in place of a value on the review stage. */
.qcdStage__avatars { display: inline-flex; gap: 3px; min-height: 20px; align-items: center; }
.qcdStage__avatars i {
  width: 17px; height: 17px; border-radius: 50%; font-style: normal;
  font-size: 6.5px; font-weight: 700; color: #fff; background: var(--c);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.7); transition: opacity .3s ease, transform .3s ease;
}
.qcd.is-step-review .qcdStage__avatars i { opacity: 1; transform: none; }
.qcd.is-step-review .qcdStage__avatars i:nth-child(2) { transition-delay: .18s; }

/* a stage the timeline has reached. */
.qcd.is-step-plan   .qcdStage[data-stage="plan"],
.qcd.is-step-load   .qcdStage[data-stage="load"],
.qcd.is-step-split  .qcdStage[data-stage="split"],
.qcd.is-step-review .qcdStage[data-stage="review"] { opacity: 1; transform: none; }

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

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

/* ---------- the return leg — a line drawn right-to-left under the chain,
   carrying the assigned total back to the approved number. ---------- */
.qcd__return { margin-top: 14px; }
.qcdReturn__track { position: relative; height: 9px; }
.qcdReturn__line {
  position: absolute; left: 10px; right: 10px; top: 4px; height: 0;
  border-top: 1px dashed var(--qcd-border);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
}
.qcd.is-returned .qcdReturn__line { transform: scaleX(1); }
.qcdReturn__head {
  position: absolute; left: 8px; top: 0;
  width: 0; height: 0; border-style: solid;
  border-width: 4.5px 6px 4.5px 0; border-color: transparent var(--qcd-border) transparent transparent;
  opacity: 0; transition: opacity .3s ease .55s;
}
.qcd.is-returned .qcdReturn__head { opacity: 1; }

/* the comparison itself. */
.qcdReconcile {
  margin-top: 10px; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 10px;
  background: var(--qcd-card); border: 1px solid var(--qcd-border); border-radius: 8px;
  padding: 9px 12px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s ease, transform .4s ease, border-color .3s ease, background .3s ease;
}
.qcd.is-reconciled .qcdReconcile {
  opacity: 1; transform: none;
  border-color: var(--qcd-green-soft); background: #F4FBF6;
}
.qcdReconcile__pair { font-size: 10px; color: var(--qcd-ink2); }
.qcdReconcile__pair b { font-size: 11.5px; font-weight: 700; color: var(--qcd-ink); font-variant-numeric: tabular-nums; }
.qcdReconcile__op { margin: 0 4px; color: var(--qcd-ink2); }
.qcdReconcile__flag {
  font-size: 9.5px; font-weight: 700; color: var(--qcd-green);
  background: #E3F5E9; border: 1px solid var(--qcd-green-soft); border-radius: 999px;
  padding: 3px 8px; 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) {
  .qcd__stage { aspect-ratio: auto; min-height: 560px; }
  .qcd__chain { flex-direction: column; }
  .qcdStage { width: 100%; max-width: 230px; margin: 0 auto; }
  .qcdArrow { transform: rotate(90deg); }
}