/* Demo mode only (DEMO_MODE=1, app-go/internal/app/demo.go): the sticky sample-data strip and the one-click demo
   sign-in. Tokens from style.css; nothing here is linked outside the demo. */
.demo-banner { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  gap: var(--s2); min-height: 32px; padding: 6px var(--s4); background: var(--warn-bg); color: var(--warn-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--warn-dot) 35%, transparent); font-size: var(--fs-sm); line-height: 18px;
  text-align: center; }
.demo-banner strong { font-weight: 600; letter-spacing: .02em; text-transform: uppercase; font-size: var(--fs-xs); }
.demo-banner strong::after { content: "·"; margin-left: var(--s2); color: var(--warn-dot); font-weight: 400; }
/* the sidebar and the mobile bar sit below the strip */
@media (min-width: 901px) { body:has(> .demo-banner) .side { top: 32px; height: calc(100vh - 32px); } }
body:has(> .demo-banner) .mbar { top: 32px; }
body:has(> .demo-banner) .auth { min-height: calc(100vh - 32px); }
.demo-login { display: flex; flex-direction: column; gap: var(--s3); }
.demo-login form { gap: 0; }
.demo-login .hint { margin: var(--s1) 0 0; }
.login .demo-login + details.local { margin-top: var(--s5); }
.demo-off { max-width: 72ch; }
.demo-off p:last-child { margin: var(--s4) 0 0; }