/* =========================================================================
   CAPTURE HERO DEMO (#captureHeroDemo).
   See src/components/CaptureHeroDemo.astro for the storyboard.
   Timeline: public/js/capture-hero-demo.js toggles `is-*` classes.

   A single steady scene, no crossfade — four sources flip from
   "Not connected" to "Connected" one at a time, a rows-synced counter
   climbs alongside. Same --xxx-* palette likeness rules as every other
   demo on the site.
   ========================================================================= */

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

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

.chd__topBar {
  flex: none; font-size: 11px; font-weight: 600; color: var(--chd-ink);
  padding: 12px 14px 9px; border-bottom: 1px solid var(--chd-line);
  white-space: nowrap;
}
.chd__pane { flex: 1; min-height: 0; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.chdHead { margin: 0; font-size: 12px; font-weight: 600; color: var(--chd-ink); }

.chd__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.chdSource {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--chd-card); border: 1px solid var(--chd-border); border-radius: 8px; padding: 9px 12px;
  transition: border-color .3s ease;
}
.chdSource.is-connected { border-color: var(--chd-green-soft); }
.chdSource__label { font-size: 11px; font-weight: 600; color: var(--chd-ink); }
.chdSource__status { display: flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--chd-ink2); font-weight: 600; }
.chdSource__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--chd-border); transition: background .3s ease; }
.chdSource.is-connected .chdSource__status { color: var(--chd-green); }
.chdSource.is-connected .chdSource__status i { background: var(--chd-green); }

/* the moment a source lands — briefly outlined, the same "just changed"
   language every other demo on the site uses. */
.chdSource.is-flash { box-shadow: 0 0 0 3px var(--chd-green-soft); }

.chdSynced {
  margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--chd-line); padding-top: 10px;
}
.chdSynced__count { font-size: 11px; font-weight: 700; color: var(--chd-ink); font-variant-numeric: tabular-nums; }
.chdSynced__time {
  font-size: 9.5px; color: var(--chd-ink2);
  opacity: 0; transition: opacity .4s ease;
}
.chd.is-synced .chdSynced__time { opacity: 1; }

@media (max-width: 420px) {
  .chd__stage { aspect-ratio: auto; min-height: 380px; }
}