/* The preview bar on demo.quireink.com. Not part of Quire Ink; see demo.js.
 *
 * Glass as a MATERIAL, not as decoration. Quire Ink itself is flat: hairline rules, no
 * shadow, no gradient. A bar that arrived lit up in colour would read as the product's
 * taste, which it is not. So: one blur, one hairline, one radius, and the type is the
 * interface face the product already uses.
 *
 * It is deliberately the only thing on the page that floats. That is how a visitor knows it
 * is not part of the blog they are looking at. */

.qi-demo {
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 999px;
  /* Two layers, because backdrop-filter alone over a white page is invisible and over a
     dark one is muddy. The tint carries the contrast; the blur carries the depth. */
  background: rgba(252, 252, 252, 0.82);
  border: 2px solid rgba(16, 24, 40, 0.16);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  /* One soft, tinted shadow. Not a stack: the bar has to lift off the page and stop there. */
  box-shadow: 0 8px 28px rgba(16, 24, 40, 0.14);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1;
}

.qi-demo::-webkit-scrollbar { display: none; }

.qi-demo-btn {
  flex: 0 0 auto;
  /* 44px tall including the bar padding: the minimum a touch target may be. */
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #3c4149;
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  /* Colour and transform only, so nothing here can cause layout work on a scroll. */
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.qi-demo-btn:hover { background: rgba(0, 0, 0, 0.05); color: #0b0d0f; }
.qi-demo-btn:active { transform: translateY(1px); }
.qi-demo-btn:focus-visible { outline: 2px solid #3b5bdb; outline-offset: 1px; }



.qi-demo-btn[aria-current] {
  background: #16181c;
  color: #fafafa;
}

/* The word that stops anyone mistaking this for the product's own chrome. */
.qi-demo-tag {
  flex: 0 0 auto;
  margin: 0 10px 0 6px;
  padding-left: 10px;
  border-left: 1px solid rgba(0, 0, 0, 0.10);
  color: #8a9099;
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* Dark palette. The product sets `.dark` on the root, so the bar follows the page it is
   sitting on rather than the OS. */
.dark .qi-demo {
  background: rgba(24, 26, 29, 0.82);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}
.dark .qi-demo-btn { color: #c8ccd2; }
.dark .qi-demo-btn:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.dark .qi-demo-btn[aria-current] { background: #f2f3f5; color: #16181c; }
.dark .qi-demo-tag { border-left-color: rgba(255, 255, 255, 0.12); color: #7d838b; }

/* A phone has less width than the bar wants, so it scrolls sideways and the labels shrink
   rather than the bar wrapping to two rows. */
@media (max-width: 560px) {
  .qi-demo { font-size: 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .qi-demo-btn { padding: 11px 13px; }
  .qi-demo-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .qi-demo-btn { transition: none; }
}

/* Inside book mode the bar is moved INTO the dialog (see demo.js): a modal dialog makes
   everything behind it inert, so a bar left on the body cannot be clicked at all and Escape
   is the only way out. `position: fixed` inside the top layer still positions against the
   viewport, so nothing about the placement changes.
   Book mode is paper and ink whatever the site theme is, so the bar matches the paper rather
   than following `.dark`. */
.book-overlay .qi-demo {
  background: rgba(249, 244, 236, 0.86);
  border-color: rgba(70, 62, 45, 0.28);
}
.book-overlay .qi-demo-btn { color: #46413a; }
/* Light and Dark do nothing on paper, so in here they read as unavailable. A descendant
   selector on a static attribute, so there is no moment where the button is live-looking
   and dead. demo.js refuses the click for the same reason. */
.book-overlay .qi-demo-btn[data-theme-only] { opacity: 0.32; cursor: default; }
.book-overlay .qi-demo-btn[data-theme-only]:hover { background: transparent; color: #46413a; }
.book-overlay .qi-demo-btn[data-theme-only]:active { transform: none; }
.book-overlay .qi-demo-btn:hover { background: rgba(70, 62, 45, 0.08); color: #16130d; }
.book-overlay .qi-demo-btn[aria-current] { background: #2f2c25; color: #f9f4ec; }
.book-overlay .qi-demo-tag { border-left-color: rgba(70, 62, 45, 0.18); color: #6f6a5c; }