/* The top navigation: Still at the top left, the waiting list at the top centre. Fixed over
   everything (the intro is z 30, the library's frame z 10), on the page's own paper, for the whole
   visit. The library's frame starts below it (index.html: #frame top), and so does the film. */
.wl {
  position: fixed; inset: 0; z-index: 50;
  pointer-events: none;
  font: 13px/1 -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif; color: #111;
  -webkit-font-smoothing: antialiased;
}
.wl * { box-sizing: border-box; }
.wl .sr, .wl label.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0;
}
.wl button { appearance: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.wl button:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

/* bottom centre: the waiting list (one white capsule, the field and a round send button inside)
   and, beside it, the film's sound button */
.wl-bar { position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.wl-act { position: relative; }
.wl-act[hidden] { display: none; }
.wl-form {
  position: relative; display: flex; align-items: center; gap: 4px; margin: 0; height: 40px; padding: 4px 4px 4px 0;
  background: #fff; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .03), 0 6px 20px rgba(0, 0, 0, .05);
  transition: box-shadow 160ms ease, opacity 380ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1);
}
.wl-form:focus-within { box-shadow: 0 0 0 1px rgba(0, 0, 0, .28), 0 1px 2px rgba(0, 0, 0, .03), 0 6px 20px rgba(0, 0, 0, .06); }
.wl input {
  appearance: none; -webkit-appearance: none; min-width: 0; width: 262px; height: 32px; padding: 0 8px 0 16px;
  border: 0; border-radius: 999px; background: transparent; outline: none;
  font: inherit; color: #111; transition: opacity 200ms ease;
}
.wl input::placeholder { color: #9a9a9a; }
.wl input[aria-invalid="true"] { color: #c2410c; }
.wl .go {
  width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #111; color: #fff; transition: opacity 160ms ease, transform 160ms ease;
}
.wl .go svg { display: block; }
.wl .go:hover { opacity: .86; }
.wl .go:active { transform: scale(.94); }
.wl .go[disabled] { opacity: .45; cursor: default; }
.wl-x, .wl-open { display: none; }

/* joined: the message takes the field's place for a moment, then the capsule goes */
.wl-done {
  position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; background: #fff; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 220ms ease;
}
.wl-done .check {
  width: 18px; height: 18px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; flex: none;
}
.wl-done .check svg { display: block; }
.wl.is-done .wl-done { opacity: 1; }
.wl.is-done .wl-done .check path { stroke-dasharray: 12; stroke-dashoffset: 12; animation: wl-draw 380ms 120ms ease forwards; }
.wl.is-done input, .wl.is-done .go, .wl.is-done .wl-x { opacity: 0; pointer-events: none; }
.wl.is-leaving .wl-form { opacity: 0; transform: translateY(-4px) scale(.98); }
@keyframes wl-draw { to { stroke-dashoffset: 0; } }

/* the hint under the field (invalid / network), and the mark's calm note */
.wl .hint, .wl-toast {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: 8px 13px; border-radius: 999px; white-space: nowrap; margin: 0;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07), 0 4px 14px rgba(0, 0, 0, .06); font-size: 12px;
}
.wl .hint { color: #c2410c; }
.wl .hint:empty { display: none; }
.wl-toast {
  top: auto; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translate(-50%, 4px); color: #111; opacity: 0; pointer-events: none;
  transition: opacity 220ms ease, transform 320ms cubic-bezier(.2, .8, .2, 1);
}
.wl-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* the film's sound. Muted (it wants a tap): white speaker with a small slash on a dark circle.
   On: just the light line speaker with its waves, frameless, in a 40px hit area. */
.wl-snd { position: relative; width: 38px; height: 38px; margin: 1px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #111 !important; color: #fff !important;
  transition: color 160ms ease, background-color 200ms ease, opacity 420ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1); }
.wl-snd svg { display: block; }
.wl-snd .w { opacity: 0; transition: opacity 200ms ease; }
.wl-snd .x { opacity: 1; transition: opacity 200ms ease; }
.wl-snd:hover { opacity: .88; }
.wl-snd.is-on { background: transparent !important; color: #6b6b6b !important; }
.wl-snd.is-on:hover { color: #111 !important; opacity: 1; }
.wl-snd.is-on .w { opacity: 1; }
.wl-snd.is-on .x { opacity: 0; }
.wl-snd:active { transform: scale(.94); }
/* once, early, while it is muted: the waves breathe in and out, twice, softly */
.wl-snd.is-hint .w { animation: wl-breathe 2.4s ease-in-out both; }
.wl-snd.is-hint .x { animation: wl-breathe-x 2.4s ease-in-out both; }
@keyframes wl-breathe { 0%, 100% { opacity: 0; } 25%, 70% { opacity: .55; } 48% { opacity: .2; } }
@keyframes wl-breathe-x { 0%, 100% { opacity: 1; } 25%, 70% { opacity: .15; } 48% { opacity: .5; } }
.wl-snd.is-over { opacity: 0; transform: scale(.9); pointer-events: none; }

/* phones: the mark, and one button at the centre that opens into the field */
@media (max-width: 640px) {
  /* no transform here: the opened field is fixed to the viewport, full width */
  .wl-bar { left: 0; right: 0; transform: none; justify-content: center; pointer-events: none; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .wl-bar > * { pointer-events: auto; }
  .wl-open {
    display: block; height: 34px; padding: 0 15px; border-radius: 999px;
    background: #111; color: #fff !important; font-weight: 500; white-space: nowrap; letter-spacing: -.005em;
  }
  .wl-form {
    position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--kb, 0px)); height: 44px;
    opacity: 0; visibility: hidden; transform: scale(.98);
    transition: opacity 200ms ease, transform 260ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 260ms;
  }
  .wl input { flex: 1; width: auto; font-size: 16px; padding-left: 14px; }       /* no iOS focus zoom */
  .wl-x { display: grid; place-items: center; width: 30px; height: 32px; border-radius: 999px; background: transparent; color: #a3a3a3; flex: none; }
  .wl.is-open .wl-form { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 260ms cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .wl.is-leaving .wl-form { opacity: 0; transform: translateY(-4px) scale(.98); }
  .wl.is-open .wl-open { opacity: 0; pointer-events: none; }
  .wl-open { transition: opacity 160ms ease, background-color 160ms ease; }
  .wl .hint { position: fixed; top: auto; bottom: calc(60px + env(safe-area-inset-bottom, 0px) + var(--kb, 0px)); }
  .wl-toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px) + var(--kb, 0px)); }
  .wl.is-open .wl-snd { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wl-form, .wl-toast { transition: none !important; }
  .wl.is-done .wl-done .check path { animation: none; stroke-dashoffset: 0; }
}

/* after the film: the library's own bar holds the waiting list, so the floating one fades away */
.wl-act { transition: opacity 450ms ease; }
.wl.is-handed .wl-act { opacity: 0; pointer-events: none; }

/* the waiting list is not part of the film any more (the library's own bar carries it): the floating
   field stays in the markup for the brand note and the joined state, but is never shown */
.wl-act { display: none !important; }