/* =========================================================================
   ROSTER RECONCILE DEMO (#rosterReconcileDemo).
   See src/components/RosterReconcileDemo.astro for the storyboard.
   Timeline: public/js/roster-reconcile-demo.js toggles `is-*` classes and
   positions `.rrd__cursor` at runtime.

   A single steady scene (no crossfade — same pattern as
   QuotaReconcileDemo, which this closely follows): planned headcount
   against the actual roster at every level, with the two events behind
   the gap resolved in the model.

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

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

.rrd__stage {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 3 / 2; min-height: 380px; max-width: 640px; margin: 0 auto;
  background: var(--rrd-canvas);
  display: flex; flex-direction: column;
  transition: opacity .5s ease;
}
.rrd.is-out .rrd__stage { opacity: 0; }

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

.rrd__pane { flex: 1; min-height: 0; min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; }

.rrdHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.rrdHead__title { font-size: 11.5px; font-weight: 600; color: var(--rrd-ink); }
.rrdHead__round {
  font-size: 8.5px; font-weight: 600; color: var(--rrd-ink2);
  background: var(--rrd-head); border: 1px solid var(--rrd-border); border-radius: 999px;
  padding: 3px 8px; white-space: nowrap;
  transition: color .3s ease, background .3s ease, border-color .3s ease;
}
.rrd.is-saved .rrdHead__round { color: var(--rrd-green); background: #E3F5E9; border-color: var(--rrd-green-soft); }

.rrdTable { background: var(--rrd-card); border: 1px solid var(--rrd-border); border-radius: 8px; overflow: hidden; }
.rrdRow {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 9px; font-size: 9px; color: var(--rrd-ink2);
  border-bottom: 1px solid var(--rrd-line);
  transition: background .3s ease;
}
.rrdTable > .rrdRow:last-child { border-bottom: none; }
.rrdRow--head { background: var(--rrd-head); font-weight: 500; border-bottom: 1px solid var(--rrd-border); }
.rrdRow--co { background: #FCFCFB; font-weight: 700; color: var(--rrd-ink); }
.rrdRow--person { background: #FCFCFB; padding-left: 22px; }
.rrdRow__label {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px;
  font-weight: 600; color: var(--rrd-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rrdRow--head .rrdRow__label, .rrdRow--person .rrdRow__label { font-weight: 500; color: var(--rrd-ink2); }
.rrdRow__val { flex: none; width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--rrd-ink); }
.rrdRow--head .rrdRow__val, .rrdRow--head .rrdRow__diff { color: var(--rrd-ink2); font-weight: 500; }
.rrdRow__diff { flex: none; width: 34px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--rrd-ink2); }
.rrdRow__diff.is-short { color: var(--rrd-red); }
.rrdRow__diff.is-clear { color: var(--rrd-green); }

.rrdRow__chev { font-style: normal; flex: none; color: var(--rrd-ink2); font-size: 9px; transition: transform .3s ease; }
.rrd.is-expanded .rrdRow__chev { transform: rotate(90deg); }
.rrd.is-expanded .rrdRow__chev--person { transform: none; }
.rrd.is-press-eng .rrdRow--seg[data-el="engRow"] { background: var(--rrd-accent-soft); }

.rrdSub { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.rrd.is-expanded .rrdSub { max-height: 130px; }

.rrdRow__val.is-flash, .rrdRow__diff.is-flash {
  outline: 1.5px solid var(--rrd-accent); outline-offset: 2px; border-radius: 3px;
  color: var(--rrd-accent);
}

/* the two flagged people's notes — shown together as soon as Engineering
   opens, no further click needed. */
.rrdDetail {
  padding: 0 9px 4px 22px; background: #FCFCFB;
}
.rrdDetail__body { font-size: 8px; line-height: 1.35; color: var(--rrd-ink2); font-style: italic; }

.rrdAction {
  align-self: flex-start; margin-top: 8px;
  font-size: 9px; font-weight: 600; color: var(--rrd-accent);
  background: var(--rrd-accent-soft); border: 1px solid #CFC7EF; border-radius: 999px;
  padding: 5px 10px;
  transition: transform .15s ease, opacity .3s ease;
}
.rrd.is-press-match .rrdAction { transform: scale(.94); }
.rrd.is-saved .rrdAction { opacity: 0; pointer-events: none; }

.rrdBanner {
  margin-top: 8px; display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; background: #F4FBF6;
  border: 1px solid var(--rrd-green-soft); border-radius: 7px;
  font-size: 8.5px; color: var(--rrd-ink2);
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
}
.rrdBanner b { font-size: 9px; font-weight: 700; color: var(--rrd-green); }
.rrd.is-saved .rrdBanner { opacity: 1; transform: none; }

.rrd__cursor {
  position: absolute; opacity: 0; pointer-events: none; z-index: 11;
  transition: left .6s cubic-bezier(.5, .05, .3, 1), top .6s cubic-bezier(.5, .05, .3, 1), opacity .3s ease;
}
.rrd.is-cursor-visible .rrd__cursor { opacity: 1; }

@media (max-width: 460px) {
  .rrd__stage { aspect-ratio: auto; min-height: 460px; }
  .rrdRow { padding: 5px 7px; font-size: 8.5px; }
  .rrdRow__val { width: 38px; }
  .rrdRow__diff { width: 30px; }
  .rrdRow--person { padding-left: 16px; }
  .rrdDetail { padding-left: 16px; }
}