/* =========================================================================
   RAMP COST DEMO (#rampCostDemo) — the "Plan and cost the hiring" substep
   on /sales-capacity-planning. See src/components/RampCostDemo.astro for
   the storyboard. Timeline: public/js/ramp-cost-demo.js toggles `is-*`
   classes, animates bar geometry inline, and positions `.rcd__cursor` at
   runtime.

   A single steady scene (no crossfade — same pattern as CapacityChainDemo
   and BudgetMultiplayerDemo): the timeline stays put so a start date
   sliding right reads as a change to the same plan. Same --xxx-* palette
   (product likeness) as every other demo on the site.
   ========================================================================= */

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

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

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

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

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

/* ---------- the timeline: a month scale, then one row per cohort. The
   label column width is shared by the scale spacer and every row, so the
   month ticks line up with the tracks below them. ---------- */
.rcdChart {
  --rcd-labelw: 92px;
  background: var(--rcd-card); border: 1px solid var(--rcd-border); border-radius: 8px;
  padding: 9px 10px 11px; display: flex; flex-direction: column; gap: 9px;
}

.rcdScale { display: grid; grid-template-columns: var(--rcd-labelw) 1fr; align-items: center; gap: 8px; }
.rcdScale__months { display: grid; grid-template-columns: repeat(12, 1fr); }
.rcdScale__months i {
  font-style: normal; font-size: 8px; font-weight: 600; color: var(--rcd-ink2);
  text-align: center; letter-spacing: .02em;
}

.rcdRow {
  display: grid; grid-template-columns: var(--rcd-labelw) 1fr; align-items: center; gap: 8px;
  opacity: 0; transform: translateY(5px);
  transition: opacity .35s ease, transform .35s ease;
}
.rcdRow.is-shown { opacity: 1; transform: none; }

.rcdRow__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rcdRow__chip {
  align-self: flex-start; max-width: 100%;
  font-size: 8.5px; font-weight: 600; color: var(--rcd-ink);
  background: var(--rcd-head); border: 1px solid var(--rcd-border); border-radius: 999px;
  padding: 2px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .15s ease;
}
.rcdRow__chip.is-active { background: var(--rcd-accent-soft); border-color: #CFC7EF; color: var(--rcd-accent); }
.rcd.is-press-chip .rcdRow__chip.is-active { transform: scale(.94); }
.rcdRow__heads { font-size: 8px; color: var(--rcd-ink2); }

/* the track is the full 12-month width; a bar is positioned and sized as
   a percentage of it (JS animates left/width, so both transition). */
.rcdRow__track { position: relative; height: 15px; background: var(--rcd-head); border-radius: 4px; }
.rcdRow__bar {
  position: absolute; top: 0; bottom: 0; display: flex; overflow: hidden;
  border-radius: 4px;
  transition: left .65s cubic-bezier(.4, 0, .2, 1), width .65s cubic-bezier(.4, 0, .2, 1);
}

/* ramp portion — hatched, to read as "not yet at full productivity";
   at-quota portion — solid accent. Both labels hide themselves when the
   segment gets too narrow to hold text. */
.rcdRow__ramp, .rcdRow__full {
  display: flex; align-items: center; justify-content: center;
  font-size: 7.5px; font-weight: 600; white-space: nowrap; overflow: hidden;
  transition: width .65s cubic-bezier(.4, 0, .2, 1);
}
.rcdRow__ramp {
  flex: none; color: var(--rcd-accent);
  background-color: var(--rcd-accent-soft);
  background-image: repeating-linear-gradient(
    -45deg, rgba(106, 91, 198, .28) 0 2px, transparent 2px 5px
  );
  border-right: 1px solid rgba(106, 91, 198, .35);
}
.rcdRow__full { flex: 1 1 auto; min-width: 0; color: #fff; background: var(--rcd-accent); }

/* a segment too narrow to hold its own label drops the text rather than
   clipping it mid-word — the driver measures the real pixel width after
   every draw and on resize, so this holds at any stage width. */
.rcdRow__ramp.is-tight, .rcdRow__full.is-tight { color: transparent; }

/* ---------- stats that build alongside the timeline ---------- */
.rcdStats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.rcdStat {
  background: var(--rcd-card); border: 1px solid var(--rcd-border); border-radius: 8px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 2px;
  transition: background .3s ease, border-color .3s ease;
}
.rcd.is-restated .rcdStat { background: var(--rcd-accent-soft); border-color: #CFC7EF; }
.rcdStat__label { font-size: 8.5px; color: var(--rcd-ink2); }
.rcdStat__val { font-size: 13px; font-weight: 700; color: var(--rcd-ink); font-variant-numeric: tabular-nums; }
.rcdStat__note { font-size: 7.5px; color: var(--rcd-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- cursor — positioned at runtime (JS sets left/top in px via
   getBoundingClientRect against .rcd__stage). ---------- */
.rcd__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;
}
.rcd.is-cursor-visible .rcd__cursor { opacity: 1; }

/* ---------- responsive — narrow the label column and drop the month
   ticks to every other month so the scale stays readable. ---------- */
@media (max-width: 460px) {
  .rcd__stage { aspect-ratio: auto; min-height: 420px; }
  .rcdChart { --rcd-labelw: 68px; }
  .rcdScale__months i:nth-child(2n) { visibility: hidden; }
  .rcdStats { grid-template-columns: 1fr; }
  .rcdStat__note { display: none; }
}