/* 1.39: the demo (DEMO=1): its sign-in buttons, the yellow bar on every page, the page shown while it is prepared */
.demo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 9px 14px;
  border-radius: 12px; background: #FFF4C2; color: #4A3B00; border: 1px solid #F0D774; font-size: 14px; }
.demo-bar svg { width: 18px; height: 18px; flex: none; }
.demo-bar > span:first-of-type { flex: 1 1 220px; }
.demo-bar .demo-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.demo-bar .btn { background: #FFFDF2; color: #4A3B00; border-color: #E5C95A; }
.demo-bar .btn.ghost { background: transparent; }
:root[data-theme="dark"] .demo-bar { background: #3A3210; color: #FBE9A6; border-color: #6B5A1C; }
:root[data-theme="dark"] .demo-bar .btn { background: #4A4016; color: #FBE9A6; border-color: #7A6824; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .demo-bar { background: #3A3210; color: #FBE9A6; border-color: #6B5A1C; }
  :root:not([data-theme="light"]) .demo-bar .btn { background: #4A4016; color: #FBE9A6; border-color: #7A6824; }
}
.demo-who { display: grid; gap: 8px; }
.demo-who .btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 10px; padding-bottom: 10px; }
.demo-who .btn small { font-weight: 400; opacity: .8; font-size: 12px; }
body.demo-wait { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #F3F6F7; color: #1F2A2E;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
body.demo-wait main { max-width: 420px; margin: 16px; padding: 28px; background: #fff; border-radius: 16px; border: 1px solid #DCE4E7; }
body.demo-wait h1 { font-size: 22px; margin: 0 0 8px; color: #0E5E6F; }