/* ── DEMO BANNER (shared by Polaris and Olympus) — W17 ──────────────────────
   A fixed strip at the very top. Its height is written to --demo-h by
   demo-banner.js, and each app moves its own fixed header down by that much. */
.demo-banner {
  position: fixed; z-index: 1000; top: 0; left: 0; right: 0;
  padding: 6px 12px; padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
  background: #2a2208; color: #ffe7a3; border-bottom: 1px solid #6b5514;
  font: 500 13px/1.35 Inter, Manrope, system-ui, sans-serif; text-align: center;
  box-sizing: border-box; max-width: 100vw;
}
.demo-banner * { box-sizing: border-box; }
.demo-banner .db-row { display: flex; align-items: center; justify-content: center; gap: 4px 14px; flex-wrap: wrap; }
.demo-banner .db-acts { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.demo-banner a, .demo-banner .db-link { color: #ffd04a; text-decoration: underline; text-underline-offset: 2px; }
.demo-banner .db-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.demo-banner .db-btn {
  font: 600 12px/1 Inter, Manrope, system-ui, sans-serif; color: #ffe7a3; background: transparent;
  border: 1px solid #8a6d1c; border-radius: 999px; padding: 6px 11px; cursor: pointer; white-space: nowrap;
}
.demo-banner .db-btn.db-primary { color: #2a2208; background: #ffd04a; border-color: #ffd04a; }
.demo-banner .db-btn:hover { filter: brightness(1.1); }
.demo-banner .db-connect, .demo-banner .db-first {
  max-width: 880px; margin: 5px auto 0; padding-top: 5px; border-top: 1px solid #4a3c10;
  font-size: 12.5px; line-height: 1.4; color: #f3e2b0;
}
.demo-banner .db-connect b, .demo-banner .db-first b { color: #ffd04a; }
.demo-banner .db-first { color: #fff1c9; border-top-color: #6b5514; }
.demo-banner .db-x { background: none; border: 0; color: #c9b27a; font: 600 11.5px/1 inherit; text-decoration: underline; cursor: pointer; padding: 0 0 0 4px; }
.demo-banner [hidden] { display: none !important; }
@media (max-width: 600px) {
  .demo-banner { font-size: 12px; padding-left: 10px; padding-right: 10px; }
  .demo-banner .db-connect, .demo-banner .db-first { font-size: 12px; }
}

/* W39a (12 Nov 2026): on a PC the banner is ONE quiet line (what this is · how the two
   connect · About · Reset), so the app starts right under it, as it does on his own copy. */
@media (min-width: 1000px) {
  .demo-banner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 18px; padding-top: 7px; padding-bottom: 7px; }
  .demo-banner { font-size: 12.5px; }
  .demo-banner .db-connect { margin: 0; padding: 0; border: 0; max-width: none; font-size: 12.5px; }
  .demo-banner .db-first { flex-basis: 100%; }
}

/* W39b: the tour buttons are links styled as buttons, so no underline */
.demo-banner a.db-btn { text-decoration: none; display: inline-block; }
/* W39b: the example's banner gained "Take the tour"; tighter spacing keeps it ONE line on a PC (measured at 1097 px) */
@media (min-width: 1000px) {
  .demo-banner { gap: 2px 12px; }
  .demo-banner .db-row { gap: 4px 10px; }
  .demo-banner .db-acts { gap: 6px; }
}