/* =========================================================================
   CAPACITY TRACKING DEMO (#capacityTrackingDemo) — the "Track and re-plan
   through the year" substep on /sales-capacity-planning.
   See src/components/CapacityTrackingDemo.astro for the storyboard.
   Timeline: public/js/capacity-tracking-demo.js toggles `is-*` classes
   and positions `.ctd__cursor` at runtime.

   Two full-width scenes crossfade (actual vs. plan → the restatement) —
   same single-scene-at-a-time pattern as BudgetVarianceDemo, since it's
   the only one that scales to any width without a per-breakpoint layout
   rework. Same --xxx-* palette (product likeness) as every other demo on
   the site.
   ========================================================================= */

.ctd {
  --ctd-canvas: #FAF9F5;
  --ctd-card: #FFFFFF;
  --ctd-border: #DBDBDE;
  --ctd-line: #EAEAEA;
  --ctd-head: #F6F6F7;
  --ctd-ink: #2B2B2B;
  --ctd-ink2: #777777;
  --ctd-accent: #6A5BC6;
  --ctd-accent-soft: #ECECFF;
  --ctd-neutral: #706F6A;
}

/* 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). */
.ctd__stage {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 3 / 2; min-height: 380px; max-width: 640px; margin: 0 auto;
  background: var(--ctd-canvas);
  display: flex; flex-direction: column;
  transition: opacity .5s ease;
}
.ctd.is-out .ctd__stage { opacity: 0; }

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

.ctd__scene { position: relative; flex: 1; min-height: 0; }
.ctd__sceneStack { position: absolute; inset: 0; }

/* each scene fills the whole stage and crossfades in/out — only one is
   opaque at a time, driven by is-scene-2 on the root (scene 1 is the
   default, unmarked state). */
.ctd__scenePanel {
  position: absolute; inset: 0; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .5s ease;
}
.ctd__scenePanel--s1 { opacity: 1; }
.ctd.is-scene-2 .ctd__scenePanel--s1 { opacity: 0; }
.ctd.is-scene-2 .ctd__scenePanel--s2 { opacity: 1; }

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

/* ---------- panel header ---------- */
.ctdHead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ctdHead__title2 { font-size: 12px; font-weight: 600; color: var(--ctd-ink); }
.ctdHead__sub { font-size: 9.5px; color: var(--ctd-ink2); }

/* ---------- scene 1: card grid — same card-style table as every other
   demo. Each row's last cell carries .ctdCell--last rather than an
   nth-child rule. ---------- */
.ctdGrid {
  display: grid; grid-template-columns: 1fr 62px 62px;
  background: var(--ctd-card); border: 1px solid var(--ctd-border); border-radius: 8px;
  overflow: hidden; max-width: 100%;
}
.ctdCell {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 8px; font-size: 9.5px; color: var(--ctd-ink2);
  border-bottom: 1px solid var(--ctd-line); border-right: 1px solid var(--ctd-line);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background .3s ease, color .3s ease;
}
.ctdGrid > .ctdCell:nth-last-child(-n+3) { border-bottom: none; }
.ctdCell--last { border-right: none; }
.ctdCell--head { background: var(--ctd-head); font-weight: 500; border-bottom: 1px solid var(--ctd-border); }
.ctdCell--label { justify-content: flex-start; font-weight: 600; color: var(--ctd-ink); }
.ctdCell--val { font-variant-numeric: tabular-nums; }

/* the Actual column lands per row, so each figure arrives as a fact
   coming in rather than a number that was always there. Behind plan on
   hires/ramp reads accent; over plan on attrition reads accent too —
   both are the plan not holding, which is the point. */
.ctdCell--actual { font-weight: 700; color: var(--ctd-ink2); }
.ctdCell--actual.is-landed { color: var(--ctd-accent); background: var(--ctd-accent-soft); }

/* ---------- scene 1: sync chip ---------- */
.ctdSync {
  display: flex; align-items: center; gap: 7px; margin-top: 10px;
  padding: 7px 10px; background: var(--ctd-card);
  border: 1px solid var(--ctd-border); border-radius: 8px;
  font-size: 9px; color: var(--ctd-ink2);
}
.ctdSync__spinner {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--ctd-accent-soft); border-top-color: var(--ctd-accent);
  animation: ctdSpin .9s linear infinite;
}
@keyframes ctdSpin { to { transform: rotate(360deg); } }
.ctd.is-synced .ctdSync__spinner { border-color: #BEE3CB; border-top-color: #2C8E45; animation: none; }
.ctdSync__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- scene 2: the assumption that moves ---------- */
.ctdAssumption {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  padding: 9px 10px; background: var(--ctd-card);
  border: 1px solid var(--ctd-border); border-radius: 8px;
  transition: background .3s ease, outline-color .3s ease;
}
.ctdAssumption__label { font-size: 9px; font-weight: 600; color: var(--ctd-ink2); text-transform: uppercase; letter-spacing: .04em; }
.ctdAssumption__val { font-size: 14px; font-weight: 700; color: var(--ctd-ink); font-variant-numeric: tabular-nums; }
.ctdAssumption__note { margin-left: auto; font-size: 8.5px; color: var(--ctd-ink2); }
.ctd.is-editing-assumption .ctdAssumption {
  outline: 1.5px solid var(--ctd-accent); outline-offset: -1.5px;
  background: var(--ctd-accent-soft);
  animation: ctdPulse .8s ease-out;
}
@keyframes ctdPulse {
  0% { box-shadow: 0 0 0 0 rgba(106, 91, 198, .45); }
  70% { box-shadow: 0 0 0 8px rgba(106, 91, 198, 0); }
  100% { box-shadow: 0 0 0 0 rgba(106, 91, 198, 0); }
}

/* ---------- scene 2: the before/after rows ---------- */
.ctdRestate { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ctdRestate__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; background: var(--ctd-card);
  border: 1px solid var(--ctd-border); border-radius: 8px;
  transition: background .3s ease, border-color .3s ease;
}
.ctdRestate__row.is-restated { background: var(--ctd-accent-soft); border-color: #CFC7EF; }
.ctdRestate__label { font-size: 9.5px; font-weight: 600; color: var(--ctd-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctdRestate__nums { display: inline-flex; align-items: baseline; gap: 6px; flex: none; }
.ctdRestate__before { font-size: 10px; color: var(--ctd-ink2); font-variant-numeric: tabular-nums; text-decoration-thickness: 1px; }
.ctdRestate__arrow, .ctdRestate__after {
  opacity: 0; transform: translateX(-3px);
  transition: opacity .3s ease, transform .3s ease;
}
.ctdRestate__row.is-restated .ctdRestate__arrow,
.ctdRestate__row.is-restated .ctdRestate__after { opacity: 1; transform: none; }
.ctdRestate__arrow { font-size: 9px; color: var(--ctd-ink2); }
.ctdRestate__after { font-size: 12px; font-weight: 700; color: var(--ctd-accent); font-variant-numeric: tabular-nums; }

/* the strike only lands once the row has actually restated — before
   that it's just the current figure. */
.ctdRestate__before { text-decoration: none; }
.ctdRestate__row.is-restated .ctdRestate__before { text-decoration: line-through; }

.ctdTrace {
  margin: 10px 0 0; font-size: 8.5px; color: var(--ctd-ink2); text-align: center;
  opacity: 0; transition: opacity .4s ease;
}
.ctd.is-traced .ctdTrace { opacity: 1; }

/* ---------- cursor — positioned at runtime (JS sets left/top in px via
   getBoundingClientRect against .ctd__sceneStack). ---------- */
.ctd__cursor {
  position: absolute; opacity: 0; pointer-events: none; z-index: 9;
  transition: left .6s cubic-bezier(.5, .05, .3, 1), top .6s cubic-bezier(.5, .05, .3, 1), opacity .3s ease;
}
.ctd.is-cursor-visible .ctd__cursor { opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 460px) {
  .ctdGrid { grid-template-columns: 1fr 50px 50px; }
  .ctdAssumption__note { display: none; }
  .ctdRestate__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .ctdRestate__label { white-space: normal; }
}