/* ---------------------------------------------------------------------------
   demo-launch.css — the "Run the guided demo" card on the configure screen.
   ---------------------------------------------------------------------------
   This is the ONE element on this app that is allowed to look like an
   invitation rather than an instrument. Everything else here is an operations
   console and is styled to stay out of the way; this card exists to be found by
   somebody who has never seen the app and does not yet know what a run does.

   It still obeys the console's rules: tokens only, no external assets, no
   gradients that would fight the surrounding cards, and the two safety claims
   it prints are rendered as ordinary status chips so they read exactly like the
   same claims made anywhere else in the app.
--------------------------------------------------------------------------- */

.demo-launch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  justify-content: space-between;
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  border: 1px solid var(--c-primary);
  background: linear-gradient(180deg, var(--c-primary-soft) 0%, var(--c-surface) 68%);
  box-shadow: var(--sh-2);
}

.demo-launch__body {
  flex: 1 1 380px;
  min-width: 0;
}

.demo-launch__eyebrow {
  margin: 0 0 var(--s-1);
  font-size: var(--t-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-primary);
}

.demo-launch__title {
  margin: 0 0 var(--s-2);
  font-size: var(--t-xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semi);
  color: var(--c-fg);
}

.demo-launch__lede {
  margin: 0 0 var(--s-3);
  max-width: 62ch;
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--c-fg-muted);
}

.demo-launch__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.demo-launch__chips:empty {
  display: none;
}

.demo-launch__status {
  margin: var(--s-3) 0 0;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
}

.demo-launch__status:empty {
  display: none;
}

.demo-launch__cta {
  flex: 0 0 auto;
}

/* Deliberately larger than the form's own Start button. The demo is the safe
   action and the form is the expensive one, so the safe one is the easier
   target rather than the other way round. */
.demo-launch__btn {
  font-size: var(--t-md);
  padding: var(--s-3) var(--s-5);
  min-height: 44px;
}

.demo-launch__btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .demo-launch {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
  }

  .demo-launch__cta,
  .demo-launch__btn {
    width: 100%;
  }
}