/* =========================================================================
   SYSTEM STILL VISUAL (.stv).
   See src/components/SystemStillVisual.astro — four static (non-animated)
   snapshots for the homepage's "The System" track (Start / Capture /
   Build / Collaborate). No JS driver: these are quick still snapshots,
   not full product animations like the "Why Clive" pillar demos above
   this section. Same --xxx-* palette likeness rules as every other demo
   on the site.
   ========================================================================= */

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

.stv__stage {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 3 / 2; min-height: 300px; max-width: 560px; margin: 0 auto;
  background: var(--stv-canvas);
  display: flex; flex-direction: column;
}
.stv__topBar {
  flex: none; font-size: 11px; font-weight: 600; color: var(--stv-ink);
  padding: 12px 14px 9px; border-bottom: 1px solid var(--stv-line);
  white-space: nowrap;
}
.stv__pane { flex: 1; min-height: 0; min-width: 0; padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.stvHead { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--stv-ink); }

/* ---------- Start: onboarding checklist ---------- */
.stvChecklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.stvCheck { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--stv-ink2); }
.stvCheck.is-done { color: var(--stv-ink); }
.stvCheck__mark {
  flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--stv-border);
  display: flex; align-items: center; justify-content: center; font-size: 8.5px; font-weight: 700; color: #fff;
}
.stvCheck.is-done .stvCheck__mark { background: var(--stv-green); border-color: var(--stv-green); }
.stvProgress { height: 5px; border-radius: 999px; background: var(--stv-head); overflow: hidden; margin-top: 4px; }
.stvProgress span { display: block; height: 100%; background: var(--stv-accent); border-radius: 999px; }
.stvProgress__label { margin: 0; font-size: 9.5px; color: var(--stv-ink2); }

/* ---------- Capture: connections list ---------- */
.stvConnections { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.stvConn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--stv-card); border: 1px solid var(--stv-border); border-radius: 8px; padding: 8px 11px;
}
.stvConn__label { font-size: 11px; font-weight: 600; color: var(--stv-ink); }
.stvConn__status { display: flex; align-items: center; gap: 5px; font-size: 9.5px; color: var(--stv-green); font-weight: 600; }
.stvConn__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--stv-green); }

/* ---------- Build: modeling-block tiles ---------- */
.stvBlocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stvBlock {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--stv-accent-soft); color: var(--stv-accent); font-size: 9.5px; font-weight: 700;
  border-radius: 8px; padding: 14px 6px;
}

/* ---------- Collaborate: mini table + presence ---------- */
.stvTable {
  background: var(--stv-card); border: 1px solid var(--stv-border); border-radius: 8px; overflow: hidden;
}
.stvTable__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 11px; font-size: 10.5px; border-bottom: 1px solid var(--stv-line);
}
.stvTable__row:last-child { border-bottom: none; }
.stvTable__label { font-weight: 600; color: var(--stv-ink); }
.stvTable__val { font-variant-numeric: tabular-nums; color: var(--stv-ink2); }
.stvPresence { display: flex; align-items: center; gap: 6px; }
.stvPresence i {
  width: 18px; height: 18px; border-radius: 50%; font-style: normal;
  font-size: 7.5px; font-weight: 700; color: #fff; background: var(--pc);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  margin-left: -6px; border: 1.5px solid #fff;
}
.stvPresence i:first-child { margin-left: 0; }
.stvPresence__label { font-size: 9.5px; color: var(--stv-ink2); margin-left: 4px; }