/* 1DOT home page: the site menu and the booking, two full-screen panels over the film (js/panels.js builds them).
   The film's language: film black, white type, one orange dot. Lines come into focus whole (opacity and blur in
   about 0.4 s) and nothing slides. The panels sit at z-index 60, above the header (50) and under the film's grain
   (70); the dot is its own element on the page's root at 81, so it stays the one clean thing on screen.
   Single look by design, so every colour is set here. */

.pnl {
  --pnl-f: 'Epilogue', 'Helvetica Neue', Arial, sans-serif;
  --pnl-bar: 56px;
  --pnl-gut: 16px;
  --pnl-dim: rgba(255, 255, 255, .6);
  --pnl-faint: rgba(255, 255, 255, .35);
  --pnl-rule: rgba(255, 255, 255, .14);
  --pnl-err: #ff9a62;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  background: #0a0a0a;
  color: #fff;
  font-family: var(--pnl-f);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  opacity: 0;
  transition: opacity .2s ease-out;
}
@media (min-width: 900px) { .pnl { --pnl-bar: 72px; } }
.pnl *, .pnl *::before, .pnl *::after { box-sizing: border-box; }
.pnl[hidden], .pnl [hidden] { display: none !important; }
.pnl.pnl-on { opacity: 1; }
/* closing: the panel's lines blur out first, then the panel fades off the film (never words over words) */
.pnl.pnl-shut { opacity: 0; transition: opacity .18s ease-in .14s; pointer-events: none; }
.pnl.pnl-shut .pnl-col, .pnl.pnl-shut .pnl-x { animation: pnl-blur .16s ease-in forwards; }
/* one panel handing over to the other: the new one lies on top, see-through, while the old one's lines let go */
.pnl.pnl-swap { z-index: 61; background: transparent; transition: none; }
.pnl.pnl-going .pnl-col { opacity: 0; transition: opacity .18s ease-in; }
.pnl.pnl-going .pnl-x { visibility: hidden; }

.pnl a, .pnl button, .pnl input, .pnl label { -webkit-tap-highlight-color: transparent; }
.pnl a, .pnl button, .pnl label { touch-action: manipulation; }
.pnl :focus:not(:focus-visible) { outline: none; }
.pnl :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* where the dot already marks focus, it is the only mark */
.pnl .pnl-item:focus-visible, .pnl .pnl-in:focus-visible, .pnl .pnl-h:focus-visible, .pnl .pnl-time > input:focus-visible { outline: none; }
.pnl-h:focus { outline: none; }

/* ---------- the frame ---------- */
.pnl-scroll { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.pnl-col {
  position: relative;
  width: 100%;
  max-width: calc(720px + 2 * var(--pnl-gut));
  min-height: 100%;
  margin: 0 auto;
  padding: env(safe-area-inset-top, 0px) var(--pnl-gut) calc(48px + env(safe-area-inset-bottom, 0px));
  padding-left: max(var(--pnl-gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pnl-gut), env(safe-area-inset-right, 0px));
}
.pnl-top { display: flex; align-items: center; height: var(--pnl-bar); }

/* the close control, where the header's menu button sits (the script lays it over the button when there is one) */
.pnl-x {
  position: absolute;
  z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + (var(--pnl-bar) - 44px) / 2);
  right: max(4px, calc(var(--gut, 16px) - 11px));
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.pnl-x > i { position: absolute; left: 11px; top: 21px; width: 22px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
.pnl-x > i:first-child { transform: rotate(45deg); }
.pnl-x > i:last-child { transform: rotate(-45deg); }

/* ---------- the dot ---------- */
.pnl-dot { position: fixed; z-index: 81; left: 0; top: 0; width: 24px; height: 24px; margin: 0; padding: 0; pointer-events: none; transform-origin: 0 0; transform: translate3d(-100px, -100px, 0) scale(0); opacity: 0; transition: opacity .18s ease-out; }
.pnl-dot[hidden] { display: none; }
.pnl-dot.pnl-dot-on { opacity: 1; }
.pnl-dot > i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: #ff6300; }
@supports (color: color(display-p3 1 0 0)) { .pnl-dot > i { background: color(display-p3 1 0.4 0.02); } }
/* waiting on the calendar: the full stop breathes */
.pnl-dot.pnl-dot-busy > i { animation: pnl-breathe 1.2s ease-in-out infinite; }
@keyframes pnl-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }

/* ---------- type and controls shared by both ---------- */
.pnl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  max-width: 100%;
  margin: 0;
  padding: 8px 24px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #0e0e0e;
  font-family: var(--pnl-f);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .2s ease-out, color .2s ease-out;
}
@media (hover: hover) { .pnl-btn:hover { background: #e6e6e6; } }
.pnl-btn:active { background: #d9d9d9; }
.pnl-btn[aria-disabled="true"] { cursor: default; }
.pnl-go { min-width: 64px; padding: 0 20px; }
.pnl-go svg { display: block; width: 22px; height: 22px; }

.pnl-link, .pnl-more, .pnl-again {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--pnl-faint);
  cursor: pointer;
  transition: text-decoration-color .2s ease-out;
}
@media (hover: hover) { .pnl-link:hover, .pnl-more:hover, .pnl-again:hover { text-decoration-color: #fff; } }

.pnl-probe { display: inline-block; width: 0; height: 0; margin: 0; padding: 0; vertical-align: baseline; }
.pnl-meas { position: absolute; top: 0; left: 0; visibility: hidden; white-space: pre; pointer-events: none; }
.pnl-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- the menu ---------- */
.pnl-menu .pnl-col { padding-top: calc(env(safe-area-inset-top, 0px) + var(--pnl-bar) + 3vh); }
.pnl-menu .pnl-col { padding-top: calc(env(safe-area-inset-top, 0px) + var(--pnl-bar) + 3svh); }
.pnl-list { margin: 0; padding: 0; list-style: none; }
.pnl-list > li { margin: 0; padding: 0; }
.pnl-item {
  display: block;
  padding: .06em 0 .12em;
  color: var(--pnl-dim);
  font-size: clamp(40px, 11vw, 96px);
  font-size: clamp(40px, min(11vw, 9.4vh), 96px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -0.042em;
  text-decoration: none;
  text-wrap: balance;
  transition: color .2s ease-out;
}
@supports (height: 1svh) { .pnl-item { font-size: clamp(40px, min(11vw, 9.4svh), 96px); } }
.pnl-item.pnl-act { color: #fff; }
.pnl-menu .pnl-btn { margin-top: 36px; }

/* ---------- the booking ---------- */
.pnl-step { position: relative; }
.pnl-step > .pnl-top + * { margin-top: 2vh; }
.pnl-step > .pnl-top + * { margin-top: 2svh; }
/* on a wide screen every step's first line starts at the same height, a little lower */
@media (min-width: 900px) {
  .pnl-step > .pnl-top + * { margin-top: 10vh; }
  .pnl-menu .pnl-col { padding-top: calc(env(safe-area-inset-top, 0px) + var(--pnl-bar) + 7vh); }
}
/* a step letting go, held where it was while it goes out of focus */
.pnl-step.pnl-leave { position: absolute; z-index: 0; pointer-events: none; animation: pnl-blur .18s ease-in forwards; }

.pnl-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  margin: 0 0 0 -6px;
  padding: 0 12px 0 2px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--pnl-dim);
  font-family: var(--pnl-f);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: color .2s ease-out;
}
.pnl-back svg { display: block; flex: none; width: 18px; height: 18px; }
@media (hover: hover) { .pnl-back:hover { color: #fff; } }
.pnl-back:focus-visible { color: #fff; }
.pnl-back[aria-disabled="true"] { cursor: default; }

.pnl-q, .pnl-h {
  display: block;
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 10.4vw, 76px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.pnl-q2 { font-size: clamp(30px, 8.4vw, 56px); }
.pnl-booked { font-size: clamp(64px, 19vw, 150px); }
.pnl-stop { color: transparent; }

.pnl-field { margin: 22px 0 0; }
.pnl-q2 + .pnl-field { margin-top: 12px; }
.pnl-err + .pnl-q2 { margin-top: 16px; }
.pnl-in {
  display: block;
  width: 100%;
  height: calc(1.3em + 22px);
  margin: 0;
  padding: 8px .4em 12px 0;
  border: 0;
  border-bottom: 2px solid var(--pnl-faint);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-family: var(--pnl-f);
  font-size: clamp(22px, 6.8vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  caret-color: #fff;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  transition: border-color .2s ease-out;
}
.pnl-in:focus { border-bottom-color: #fff; }
.pnl-in[aria-invalid="true"] { border-bottom-color: var(--pnl-err); }
.pnl-in::placeholder { color: var(--pnl-faint); opacity: 1; }
/* empty, the dot sits where the words will start, so the placeholder and the caret wait just after it */
.pnl-in.pnl-empty { text-indent: .36em; }
.pnl-in:-webkit-autofill, .pnl-in:-webkit-autofill:hover, .pnl-in:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset;
  caret-color: #fff;
  transition: background-color 600000s 0s, border-color .2s ease-out;
}
.pnl-err { min-height: 20px; margin: 8px 0 0; color: var(--pnl-err); font-size: 14px; font-weight: 500; line-height: 1.4; }
.pnl-row { margin: 18px 0 0; }

/* step 3: the times */
.pnl-zone { margin: 12px 0 0; color: var(--pnl-dim); font-size: 15px; font-weight: 500; line-height: 1.4; }
.pnl-status { margin: 26px 0 0; color: var(--pnl-dim); font-size: 15px; font-weight: 500; line-height: 1.45; }
.pnl-status.pnl-bad { color: var(--pnl-err); font-size: 14px; }
.pnl-times { margin: 22px 0 0; }
.pnl-time {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0 18px;
  min-height: 60px;
  margin: 0;
  padding: 16px 0 15px;
  border-top: 1px solid var(--pnl-rule);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.pnl-time:last-child { border-bottom: 1px solid var(--pnl-rule); }
.pnl-time > input { position: absolute; top: 50%; left: 0; width: 1px; height: 1px; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.pnl-day { flex: none; min-width: var(--pnl-dayw, 6.2em); color: var(--pnl-dim); }
/* the times are set right in their column, so every one ends where the dot sits and a hop never crosses a digit */
.pnl-clock { display: inline-block; min-width: var(--pnl-clockw, 0); font-variant-numeric: tabular-nums; text-align: right; transition: color .2s ease-out; }
.pnl-when .pnl-clock { min-width: 0; }
/* once a time is chosen the others step back; the one under the thumb or focus comes forward */
.pnl-times.pnl-has .pnl-clock { color: var(--pnl-dim); }
.pnl-times.pnl-has .pnl-sel .pnl-clock, .pnl-times .pnl-act .pnl-clock { color: #fff; }
.pnl-times.pnl-lock .pnl-time { cursor: default; }
.pnl-more { display: inline-flex; align-items: center; min-height: 44px; margin: 8px 0 0; font-size: 16px; letter-spacing: -0.01em; }
.pnl-more[aria-disabled="true"] { opacity: .5; cursor: default; }
.pnl-retry { margin: 18px 0 0; }
.pnl-confirm[aria-disabled="true"]:not(.pnl-busy) { background: rgba(255, 255, 255, .1); color: var(--pnl-dim); }
@media (hover: hover) {
  .pnl-confirm[aria-disabled="true"]:not(.pnl-busy):hover { background: rgba(255, 255, 255, .1); }
  .pnl-confirm.pnl-busy:hover { background: #fff; }
}
.pnl-busy { cursor: progress; }
.pnl-bookerr { min-height: 0; margin-top: 14px; }
.pnl-bookerr:empty { display: none; }
.pnl-cal { display: flex; align-items: center; width: max-content; max-width: 100%; min-height: 44px; margin: 6px 0 0; font-size: 16px; letter-spacing: -0.01em; }

/* step 4: booked */
.pnl-when { display: flex; align-items: baseline; gap: 0 18px; margin: 30px 0 0; font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.pnl-when .pnl-day { min-width: 0; }
.pnl-when + .pnl-zone { margin-top: 8px; }
.pnl-p { max-width: 34em; margin: 26px 0 0; font-size: 17px; font-weight: 500; line-height: 1.45; }
.pnl-p b { font-weight: 700; word-break: break-word; overflow-wrap: anywhere; }
.pnl-p + .pnl-p { margin-top: 10px; color: var(--pnl-dim); }
.pnl-note { margin: 34px 0 0; color: var(--pnl-dim); font-size: 12px; line-height: 1.4; }

/* ---------- motion: out of focus into focus, as one piece ---------- */
@keyframes pnl-focus { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes pnl-blur { from { opacity: 1; filter: blur(0); } to { opacity: 0; filter: blur(8px); } }
.pnl-play .pnl-a { animation: pnl-focus .4s cubic-bezier(.22, .61, .36, 1) backwards; }

@media (prefers-reduced-motion: reduce) {
  .pnl, .pnl *, .pnl-dot, .pnl-dot > i { animation: none !important; transition: none !important; }
}