/* Demo-only chrome: the "Demo data" banner. Everything else comes from the design system. */
.demo-banner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: 8px var(--gut); background: var(--color-text); color: var(--color-bg); font-size: 12px; letter-spacing: 0.02em;
}
.demo-banner p { margin: 0; }
.demo-banner a { color: var(--color-bg); font-weight: 600; }
.demo-banner a:hover { color: var(--color-accent-300); }
.demo-banner-wide { display: none; }
@media (min-width: 760px) { .demo-banner-wide { display: inline; } }
.demo-noscript { padding: var(--space-6) var(--gut); }