/* Extras for demo.html only — the demo ribbon, subscribe nudge, save toast,
   and the compact layout used when the demo is embedded in the landing page's
   browser frame (?embed=1). Everything else is style.css, unchanged. */
.demo-ribbon {
  display: flex; align-items: center; justify-content: center; gap: 6px 18px; flex-wrap: wrap;
  background: var(--yellow); color: #221D1A; padding: 8px 16px;
  font-size: 13px; text-align: center; line-height: 1.35;
}
.demo-ribbon a { color: #221D1A; font-weight: 700; text-underline-offset: 2px; white-space: nowrap; }
.demo-ribbon a:hover { color: var(--rust-dim); }

.rail-end a.demo-subscribe {
  background: var(--rust); color: var(--card); font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
}
.rail-end a.demo-subscribe:hover { background: var(--rust-dim); color: var(--card); }

.demo-toast {
  position: fixed; left: 50%; bottom: 18px; z-index: 200; max-width: min(92vw, 420px);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--cream); border-radius: 14px; padding: 12px 16px;
  font-size: 13px; line-height: 1.45; box-shadow: var(--shadow-3);
  transition: opacity .2s ease, transform .2s ease;
}
:root[data-theme="dark"] .demo-toast { background: var(--card); color: var(--ink); border: 1px solid var(--border); }
.demo-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.demo-toast a { color: var(--yellow); font-weight: 700; }
:root[data-theme="dark"] .demo-toast a { color: var(--rust); }

/* Embedded in the landing page: the page around it already has a hero and
   CTAs, so the demo opens straight onto the filters and events. */
.demo-embed .demo-ribbon { display: none; }
.demo-embed .hero-banner { min-height: 0; }
.demo-embed .hero-content { padding: 34px 20px 30px; gap: 8px; }
.demo-embed .hero-content h1 { font-size: clamp(28px, 5vw, 44px); }
.demo-embed .scroll-cue { display: none; }
.demo-embed .app-footer { display: none; }
.demo-embed .rail { position: sticky; }
@media (max-width: 560px) {
  .demo-embed .rail-end .ig-link { display: none; }
}

/* Demo hero: the count covers one sample weekend, with a second line saying so. */
.hero-updated-note { display: block; margin-top: 6px; font-size: 13.5px; opacity: .85; }