/* Pasek statycznego demo (zad. 028) - tokeny z /static/css/tokens.css. */
/* Pasek ma stala wysokosc; sidebar i topbar panelu (sticky top:0) przesuwamy o nia. */
:root { --demo-bar-h: 44px; }
body:has(.demo-bar) .sidebar { top: var(--demo-bar-h); height: calc(100vh - var(--demo-bar-h)); }
body:has(.demo-bar) .topbar { top: var(--demo-bar-h); }
.demo-bar { position: sticky; top: 0; z-index: 1000; min-height: var(--demo-bar-h); box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 8px 16px; background: var(--ink-900, #0b1220); color: #fff; font-size: 13px; }
.demo-bar-label { font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--brand-500, #0EA37A); }
.demo-bar-note { opacity: .75; }
.demo-bar-switch { display: flex; gap: 4px; margin-left: auto; }
.demo-bar-switch a { color: #fff; text-decoration: none; padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2); }
.demo-bar-switch a[aria-current] { background: rgba(255,255,255,.14); border-color: transparent; }
.demo-bar-cta { color: #fff; font-weight: 700; text-decoration: none; padding: 4px 12px; border-radius: 6px; background: var(--brand-500, #0EA37A); }
.demo-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; transition: .2s; z-index: 1001;
  max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 10px; background: var(--ink-900, #0b1220); color: #fff;
  font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.demo-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1024px) { body:has(.demo-bar) .sidebar { top: 0; height: auto; } }
@media (max-width: 640px) { .demo-bar-note { display: none; } .demo-bar-switch { margin-left: 0; } }