/* DEMO badge + landing-page Try Demo CTA. Used by:
 *   - public/index.html         (landing CTA card under shows list)
 *   - public/svhs/index.html    (in-show chrome pill + show-switcher badges)
 */

.demo-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ff8c00;
  color: white;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

.demo-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-top: 16px;
  border: 1px solid var(--color-border, #d0d0d0);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: var(--color-surface, transparent);
  transition: border-color 120ms ease, background 120ms ease;
}
.demo-cta:hover {
  border-color: #ff8c00;
}
.demo-cta__title {
  font-weight: 600;
  display: block;
}
.demo-cta__sub {
  font-size: 13px;
  color: var(--color-text-secondary, #666);
  margin-top: 2px;
  display: block;
}

/* In-show chrome banner */
.demo-chrome-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 140, 0, 0.08);
  border-bottom: 1px solid rgba(255, 140, 0, 0.3);
  font-size: 13px;
  color: var(--color-text-secondary, #555);
}
/* The class rule above sets `display: flex`, which has equal specificity
 * to the user-agent's `[hidden] { display: none }` and — being loaded
 * later — wins. Without this override the banner shows on every show
 * regardless of isDemo / isPersonalSandbox. Forced !important so any
 * future helper class can't accidentally re-flip it. */
.demo-chrome-banner[hidden] {
  display: none !important;
}

/* Show switcher badges */
.show-switcher-badge--demo,
.show-switcher-badge--sandbox {
  background: #ff8c00 !important;
  color: white !important;
}