/* Demo banner and toast. The banner is fixed; the page is pushed down by its
   height and the app's own sticky/fixed top elements are shifted with it. */
:root { --demo-banner-height: 2rem; }

.demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--demo-banner-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0 1rem;
  background: #1f7a74;
  color: #fff;
  font: 600 0.8125rem/1 "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0.01em;
}

.demo-banner__link {
  color: inherit;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.demo-banner__link:hover { opacity: 0.85; }

html { scroll-padding-top: var(--demo-banner-height); }
body { padding-top: var(--demo-banner-height) !important; }

/* Marketing header, panel top bar on mobile, flash toasts. */
.sticky.top-0 { top: var(--demo-banner-height) !important; }
.toast.toast-top { top: calc(var(--demo-banner-height) + 0.25rem) !important; }

/* The DaisyUI drawer side panel is fixed to the viewport on small screens. */
.drawer-side { top: var(--demo-banner-height) !important; height: calc(100vh - var(--demo-banner-height)) !important; }
@media (min-width: 64rem) {
  .drawer-side { top: auto !important; height: auto !important; }
}

/* Fallback in case the app stylesheet lacks the toast utilities. */
.demo-toast { position: fixed; right: 1rem; }

/* The guided tour (one step per film chapter). Styled
   here rather than with app classes: the app stylesheet only carries the
   utilities the app itself uses. Above the panel's mobile dock on phones. */
.demo-tour {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  font: 400 0.9375rem/1.45 "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1c2b2a;
}
@media (min-width: 64rem) { .demo-tour { bottom: 1.25rem; } }

.demo-tour__pill,
.demo-tour__watch,
.demo-tour__next,
.demo-tour__done {
  background: #1f7a74;
  color: #fff;
  border: 0;
  border-radius: 999px;
  font: 600 0.875rem/1 "Source Sans 3", system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
}
.demo-tour__pill { padding: 0.75rem 1.1rem; box-shadow: 0 8px 24px rgb(28 43 42 / 0.25); }

.demo-tour__card {
  width: min(22rem, calc(100vw - 2rem));
  background: #fffdf9;
  border: 1px solid #e4ddd2;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgb(28 43 42 / 0.18);
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.demo-tour__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.demo-tour__step { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #1f7a74; }
.demo-tour__hide { border: 0; background: transparent; font-size: 1.4rem; line-height: 1; color: #4b5b59; cursor: pointer; padding: 0 0.25rem; }
.demo-tour__title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.demo-tour__text { margin: 0; color: #4b5b59; }
.demo-tour__open { color: #1f7a74; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.demo-tour__watch { align-self: flex-start; padding: 0.65rem 1rem; margin-top: 0.25rem; }
.demo-tour__nav { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.demo-tour__prev { border: 0; background: transparent; color: #1f7a74; font: 600 0.875rem/1 "Source Sans 3", system-ui, sans-serif; cursor: pointer; padding: 0.6rem 0; }
.demo-tour__prev:disabled { color: #9aa5a3; cursor: default; }
.demo-tour__next, .demo-tour__done { padding: 0.6rem 1rem; }
.demo-tour button:focus-visible, .demo-tour a:focus-visible { outline: 3px solid rgb(31 122 116 / 0.45); outline-offset: 2px; }

.demo-banner__film { font-weight: 600; }

/* Inside the film-synced demo (film.html): the page is a frame, the shell
   has the banner. */
html.demo-embedded { --demo-banner-height: 0px; }
html.demo-embedded .demo-banner { display: none; }

/* The film's ring and subtitle (drawn by demo.js for film.js). Neither takes
   clicks; the dim around the ring is a shadow, not a layer. */
.film-ring {
  position: fixed;
  z-index: 2147483000;
  border: 3px solid #e07a3f;
  border-radius: 12px;
  box-shadow: 0 0 0 5px rgb(224 122 63 / 0.2), 0 0 0 9999px rgb(18 24 28 / 0.14);
  pointer-events: none;
  transition: left 0.35s ease, top 0.35s ease, width 0.35s ease, height 0.35s ease;
}
.film-ring[hidden], .film-bubble[hidden] { display: none; }
.film-bubble {
  position: fixed;
  z-index: 2147483001;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  box-sizing: border-box;
  padding: 0.6rem 0.8rem 0.7rem;
  border-radius: 0.75rem;
  background: #1c2b2a;
  color: #fff;
  box-shadow: 0 10px 28px rgb(18 24 28 / 0.3);
  font: 500 0.95rem/1.4 "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  pointer-events: none;
  transition: top 0.3s ease, left 0.3s ease;
}
.film-bubble__label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #f3b48c; }
.film-bubble--floating { left: 50% !important; top: auto !important; bottom: 1rem; transform: translateX(-50%); width: min(32rem, calc(100vw - 2rem)) !important; }
@media (max-width: 63.99rem) { .film-bubble--floating { bottom: 5rem; } }
/* On a phone the player right under the demo shows the subtitle; a bubble
   over the small screen only covered the page, sentence after sentence. */
@media (max-width: 39.99rem) { html.demo-embedded .film-bubble { display: none; } }