/* The demo's furniture (1.105.0, docs/demo.md; 1.105.3). The host's own look: the
   colours, radius, shadow, type and buttons of the shared theme (lib/ui/pa.css,
   whose .pa-btn and .pa-btn-pri the buttons are), light and dark. */
.pa-demo-band {
  position: sticky; top: 0; z-index: 2147482990; box-sizing: border-box; width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px 16px; background: #1c1917; color: #fafaf9;
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.pa-demo-band-words { margin: 0; font-weight: 600; }
.pa-demo-band .pa-btn { border-color: rgba(250, 250, 249, .45); color: #fafaf9; }
.pa-demo-band .pa-btn-pri { background: #fafaf9; border-color: #fafaf9; color: #1c1917; }
.pa-demo-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pa-demo a.pa-btn { text-decoration: none; display: inline-block; }

.pa-demo-tour, .pa-demo-said, .pa-demo-also {
  box-sizing: border-box; border-radius: 12px; border: 1px solid rgba(120, 113, 108, .35);
  background: #ffffff; color: #1c1917; box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.pa-demo-tour {
  position: fixed; right: 16px; bottom: 16px; z-index: 2147482995;
  width: min(400px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.pa-demo-count { margin: 0; font-size: 12.5px; opacity: .8; }
.pa-demo-title { margin: 0; font-size: 16px; line-height: 1.3; }
.pa-demo-words { margin: 0; }
.pa-demo-end { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pa-demo-also-h { margin: 6px 0 0; font-weight: 600; }
.pa-demo-others { margin: 0; padding-left: 18px; }
.pa-demo-others li { margin: 2px 0; }
.pa-demo-others a { color: inherit; font-weight: 600; }
.pa-demo-sale { opacity: .75; font-size: 12.5px; }
.pa-demo-target { outline: 3px solid #b45309 !important; outline-offset: 3px; border-radius: 4px; }
.pa-demo-said {
  position: fixed; left: 16px; bottom: 16px; z-index: 2147482996; margin: 0; padding: 10px 14px;
  max-width: min(420px, calc(100vw - 32px)); font-weight: 600;
}
.pa-demo-said[hidden], .pa-demo-tour [hidden] { display: none; }
.pa-demo-also { margin: 32px 16px 96px; padding: 14px 16px; }
.pa-demo-also h2 { margin: 0 0 6px; font-size: 15px; }

.pa-demo-gate {
  position: fixed; inset: 0; z-index: 2147483002; display: grid; place-items: center; padding: 16px;
  background: rgba(28, 25, 23, .55);
}
.pa-demo-gate form, .pa-demo-gate .pa-demo-gate-card {
  box-sizing: border-box; width: min(480px, 100%); padding: 18px; border-radius: 12px; background: #ffffff; color: #1c1917;
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex; flex-direction: column; gap: 10px;
}
.pa-demo-gate h2 { margin: 0; font-size: 18px; }
.pa-demo-gate p { margin: 0; }
.pa-demo-gate label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 0; }
.pa-demo-gate label span { flex: 1 1 auto; font-weight: 400; text-align: left; }
.pa-demo-gate input[type="checkbox"] { flex: none; width: auto; margin: 3px 0 0; }
.pa-demo-gate input[type="email"] { font: inherit; padding: 8px; border-radius: 8px; border: 1px solid rgba(120, 113, 108, .45); }
.pa-demo-gate .pa-demo-gate-error { color: #b91c1c; }

:root[data-theme="dark"] .pa-demo-tour, :root[data-theme="dark"] .pa-demo-said, :root[data-theme="dark"] .pa-demo-also,
:root[data-theme="dark"] .pa-demo-gate form, :root[data-theme="dark"] .pa-demo-gate .pa-demo-gate-card { background: #1c1917; color: #f5f5f4; border-color: rgba(214, 211, 209, .25); }
:root[data-theme="dark"] .pa-demo-tour .pa-btn-pri, :root[data-theme="dark"] .pa-demo-tour .pa-btn-pri:hover { background: #f5f5f4 !important; border-color: #f5f5f4 !important; color: #1c1917 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pa-demo-tour, :root:not([data-theme="light"]) .pa-demo-said, :root:not([data-theme="light"]) .pa-demo-also,
  :root:not([data-theme="light"]) .pa-demo-gate form, :root:not([data-theme="light"]) .pa-demo-gate .pa-demo-gate-card { background: #1c1917; color: #f5f5f4; border-color: rgba(214, 211, 209, .25); }
  :root:not([data-theme="light"]) .pa-demo-tour .pa-btn-pri, :root:not([data-theme="light"]) .pa-demo-tour .pa-btn-pri:hover { background: #f5f5f4 !important; border-color: #f5f5f4 !important; color: #1c1917 !important; }
}
/* The buttons keep their own look whatever the page's own button rules say,
   on hover too (1.105.3: a page's button:hover turned Next dark on dark). */
.pa-demo-band .pa-btn, .pa-demo-tour .pa-btn {
  font: 600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; padding: 10px 14px; border-radius: 8px;
  cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: normal; width: auto; margin: 0;
}
.pa-demo-tour .pa-btn, .pa-demo-tour .pa-btn:hover, .pa-demo-tour .pa-btn:focus, .pa-demo-tour .pa-btn:active {
  background: transparent !important; color: inherit !important; border: 1px solid rgba(120, 113, 108, .45) !important;
}
.pa-demo-tour .pa-btn-pri, .pa-demo-tour .pa-btn-pri:hover, .pa-demo-tour .pa-btn-pri:focus, .pa-demo-tour .pa-btn-pri:active {
  background: #1c1917 !important; border-color: #1c1917 !important; color: #fafaf9 !important;
}
.pa-demo-band .pa-btn, .pa-demo-band .pa-btn:hover, .pa-demo-band .pa-btn:focus, .pa-demo-band .pa-btn:active {
  background: transparent !important; color: #fafaf9 !important; border: 1px solid rgba(250, 250, 249, .45) !important;
}
.pa-demo-band .pa-btn-pri, .pa-demo-band .pa-btn-pri:hover, .pa-demo-band .pa-btn-pri:focus, .pa-demo-band .pa-btn-pri:active {
  background: #fafaf9 !important; border-color: #fafaf9 !important; color: #1c1917 !important;
}
/* Hover is shown by the colour alone, never an underline (1.106.4: after a
   click the pointer stays over Next, and screenshots showed it underlined),
   whatever the page's own button or link rules say. Focus keeps a ring. */
.pa-demo-band .pa-btn, .pa-demo-tour .pa-btn, .pa-demo-band .pa-btn:hover, .pa-demo-tour .pa-btn:hover,
.pa-demo-band .pa-btn:focus, .pa-demo-tour .pa-btn:focus, .pa-demo-band .pa-btn:active, .pa-demo-tour .pa-btn:active { text-decoration: none !important; }
.pa-demo-band .pa-btn:hover, .pa-demo-tour .pa-btn:hover { opacity: .88; }
.pa-demo-band .pa-btn:focus-visible, .pa-demo-tour .pa-btn:focus-visible { outline: 2px solid #b45309; outline-offset: 2px; }

/* The panel at the top, under the band, when at the bottom it would cover
   what it points at (1.105.3). */
/* At the top it needs no lifting above the cookie notice, which is at the
   bottom (1.106.3: lifted, it stretched to its tallest). */
.pa-demo-tour.pa-demo-top { top: calc(var(--pa-demo-band-h, 0px) + 12px); bottom: auto !important; }
/* Below everything pinned to the top, measured (1.106.5): the band and a
   page's own sticky or fixed header. The band alone until it is measured. */
.pa-demo-target { scroll-margin-top: calc(var(--pa-demo-cover-h, var(--pa-demo-band-h, 0px)) + 16px); scroll-margin-bottom: 16px; }

@media (max-width: 640px) {
  .pa-demo-tour { left: 16px; right: 16px; width: auto; max-height: 42vh; padding: 12px 14px; gap: 8px; }
  /* Compact on a phone: the words on one line, the buttons in a row that
     scrolls sideways, about 76px in all. */
  .pa-demo-band { padding: 6px 10px; gap: 4px 8px; font-size: 13px; line-height: 1.3; }
  .pa-demo-band-words { flex: 1 1 100%; font-size: 12.5px; }
  .pa-demo-band .pa-demo-acts { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; gap: 6px; scrollbar-width: none; }
  .pa-demo-band .pa-btn { padding: 6px 10px; font-size: 13px; white-space: nowrap; flex: none; }
}
/* A moment in another demo a step links (1.106.3). */
.pa-demo-moment { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.pa-demo-moment a { color: inherit; font-weight: 600; }