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

.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. Solid orange so the marker is unambiguous
 * — the prior tinted-translucent treatment was too subtle and
 * operators were missing it on quick glances. Pairs with the
 * body.is-demo-mode rules in webapp/css/styles.css so the entire
 * chrome (primary nav border, accents) shifts toward orange. */
.demo-chrome-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #ff8c00;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}
/* Make the inner DEMO pill stand out against the orange band — the
 * default pill is also orange, so without this override they'd
 * collapse into one solid block. Switch to a darker brown text on
 * white pill against the orange background. */
.demo-chrome-banner .demo-badge {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
/* 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;
}