/* Demo build only (demo/build.py): the banner above the toolbar and the note
   that replaces the Run view's Real mode option. Uses the tokens in styles.css. */
.demo-banner {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-1) var(--sp-3);
  background: var(--accent-softer); color: var(--text);
  border-bottom: 1px solid var(--accent-soft);
  font-size: var(--fs-base);
}
.demo-banner strong {
  padding: 1px var(--sp-2); border-radius: var(--radius-pill);
  background: var(--accent); color: #fff; font-size: var(--fs-sm); letter-spacing: 0.5px; text-transform: uppercase;
}
.demo-banner .demo-build { background: var(--warning-tint); color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning-border); }
.demo-banner button {
  margin-left: auto; padding: 2px 10px; border: 1px solid var(--border-input); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font-size: var(--fs-base); cursor: pointer;
}
.demo-banner button:hover { background: var(--bg-hover); }
.demo-banner button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.demo-mode-note { margin-left: var(--sp-2); color: var(--text-muted); font-style: italic; }