/* ============================================================
   DECK — every city, as a deck of tickets that folds over itself.

   The single-city page has one ticket, rolled in on the diver by roll.js.
   This page has one ticket per city, so the same moment becomes a deck:
   the head and the first ticket ride in on the diver exactly as before,
   then each following ticket scrolls up and folds over the one behind it,
   leaving its top edge showing. The last one holds, and the section hands
   over to the before-and-after band with no seam.

   The fold itself is plain sticky positioning, so it works with no JS and
   with no scroll listener: card i sticks --deck-lip lower than card i-1,
   which is what leaves the stacked edges visible. deck.js only adds the
   recede (a covered card sits back slightly and loses a little light) and
   the ride-in, and every one of those is a custom property with a resting
   value defined here, so the deck is complete and correct before deck.js
   runs and stays that way if it never does.

   Loaded after vsl.css (the ticket itself) and roll.css (the stage and the
   diver backdrop, which this page reuses).
   ============================================================ */

#the-deck.selr-deck-sec {
  position: relative;
  z-index: 2;
  display: block;
  background: transparent !important;
  --deck-lip: 22px;          /* how much of the card behind stays visible */
  --deck-gap: clamp(320px, 46vh, 560px);  /* the scroll each fold takes. Tied to
     the card as well as the viewport: on a short screen a viewport-only gap is
     less than the card is tall, and the fold starts before the card has been
     read. */
  --deck-top: max(104px, calc(50vh - 260px));
}

#the-deck .selr-deck-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 60px;
}

/* ---------- the lead: the head, held on the diver while it fades up ---- */

/* The lead used to be 165vh: a full viewport of head, then most of another
   viewport of nothing while it held, and only then could the first ticket start
   arriving. That dead beat is what made the deck feel disconnected from its own
   heading. It is 84vh now, so the head is read and the first ticket is already
   on its way up underneath it.

   The head's own box is SHORTER than the lead, and that is the whole point.
   The head is centred in its box, so the box height is what decides how far
   below the fold the words sit while the lead is still travelling. At 92vh the
   words were centred half a viewport down, which meant the request form had
   already lifted through the top and 375px of scroll passed with nothing on
   screen before the heading appeared at the very bottom edge, and by then the
   first ticket was already fading it out, so it was never read at full
   strength. At 46vh the words are only ~23vh down their own box, so they enter
   while the form is still leaving, cross the middle of the screen at full
   strength, and sit in the upper third with the ticket rising under them.

   The pair is what matters, not either number: where the heading sits when the
   form's last pixel leaves is (viewport - lead) + about half the head, so the
   two move in opposite directions. Shorten one and you have to shorten the
   other, or the heading drops back down the screen. */
.selr-deck-lead {
  height: 84vh;
  position: relative;
}
.selr-deck-head {
  position: sticky;
  top: 0;
  height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  max-width: 900px;
  /* the head clears out as the first ticket arrives, so the two never
     fight for the same middle of the screen */
  opacity: calc(1 - var(--deck-lead-out, 0));
  transform: translateY(calc(-9vh * var(--deck-lead-out, 0)));
}
.selr-deck-head .selr-section-kicker { margin: 0; }
.selr-deck-head h2 { text-align: left; margin: 0; }
.selr-deck-tone { color: #616161; }
.selr-deck-sub {
  margin: 0;
  max-width: 620px;
  font-size: 20px; line-height: 30px; letter-spacing: -0.01em;
  color: #616161;
}

/* ---------- the stack ------------------------------------------------- */

/* The stack starts BEFORE the lead has finished. Without this the head is read,
   the head leaves, and only then does the first ticket begin to rise, which
   leaves a viewport of empty field between a heading and the thing it is the
   heading for. Pulling the stack up overlaps the two, so the ticket is already
   coming up while the words are still there.

   The last 10vh of that overlap belongs to the driver, not to this file.
   Overlapping the head is only ever right while something is carrying the
   ticket up through it: with no driver the ticket does not travel, it simply
   sits where it lands, and a ticket parked over the sub-line is a heading with
   its second sentence covered. So the resting value here is the polite one that
   clears the words, and deck.js buys the extra 10vh, worth 75px of scroll, by
   also being the thing that animates through it. */
.selr-deck-stack {
  display: flex;
  flex-direction: column;
  gap: var(--deck-gap);
  margin-top: calc(-44vh - 10vh * var(--deck-live, 0));
  padding-bottom: 6vh;
}

.selr-deck-card {
  position: sticky;
  top: calc(var(--deck-top) + var(--i) * var(--deck-lip));
  display: flex;
  justify-content: center;
  /* --deck-c is how covered this card is by the one in front, 0 to 1,
     written by deck.js. --deck-in is the first card's ride-in, 1 at rest. */
  --deck-c: 0;
  --deck-in: 1;
  opacity: var(--deck-in);
  transform:
    translateY(calc(30vh * (1 - var(--deck-in)) - 10px * var(--deck-c)))
    scale(calc((.86 + .14 * var(--deck-in)) * (1 - .03 * var(--deck-c))));
  transform-origin: 50% 0%;
  transition: transform .14s linear, opacity .14s linear;
  will-change: transform, opacity;
}

/* the light goes off a card as it is covered, so the front one always reads
   first. A wash over the card, not an opacity change, because the ticket is
   masked and a half-transparent ticket would show the ground through its
   notches. */
.selr-deck-card > .selr-ticket { position: relative; }
.selr-deck-card > .selr-ticket::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  border-radius: var(--tk-r);
  background: #1B1725;
  opacity: calc(.13 * var(--deck-c));
  pointer-events: none;
  transition: opacity .14s linear;
}

/* ---------- ticket variants this page adds ---------------------------- */

/* No photograph of that room. A typographic panel rather than another
   city's room passed off as this one. */
/* A venue's own photograph of a room we have booked is theirs, so the ticket
   says so. Small, bottom-left, over the image, never in the way of the room. */
.selr-ticket-photo { position: relative; }
.selr-ticket-credit {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
  font-size: 10px; font-weight: 600; letter-spacing: .04em; line-height: 1.3;
  color: rgba(255,255,250,.92);
  text-shadow: 0 1px 3px rgba(20,18,28,.65);
  pointer-events: none;
}
@media (max-width: 809.98px) { .selr-ticket-credit { bottom: 10px; font-size: 9px; } }

.selr-ticket-photo.is-blank {
  display: flex; align-items: flex-end;
  background: linear-gradient(160deg, #EEE8FF 0%, #DCCFFF 100%);
  padding: 28px;
}
.selr-ticket-photo.is-blank span {
  font-size: 46px; font-weight: 600; letter-spacing: -0.045em; line-height: .95;
  color: #6736E2;
  opacity: .55;
  text-wrap: balance;
}

/* A city with no date yet. Same ticket, ink stub instead of purple, so it
   reads as the same product without pretending to be on sale. */
.selr-ticket.is-waitlist { --tk-stub: #2A2438; }
.selr-ticket.is-waitlist .selr-ticket-stub-label { color: #B9AFD6; }
.selr-ticket.is-waitlist .selr-ticket-date {
  font-size: 24px;
  color: #FFFFFA;
}
.selr-deck-region { font-size: 15px; line-height: 1.5; color: #616161; }

/* the small print row under the stub CTA on a scheduled ticket */
/* Two actions, both of them a button. Somebody who already knows they want the
   day should be able to ask for a place without leaving, and somebody who wants
   to see what the day is should not have to find a text link to do it. See the
   day sits second and reads as the quieter of the two, but it is the same size
   and the same shape, so neither is hiding. */
.selr-ticket-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 24px; }
.selr-ticket-cta { margin-top: 0; }
.selr-ticket-see {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,250,.45);
  background: transparent;
  color: #FFFFFA;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2;
  text-decoration: none;
  transition: background .3s cubic-bezier(.4,0,.2,1), border-color .3s cubic-bezier(.4,0,.2,1);
}
.selr-ticket-see:hover { background: rgba(255,255,250,.14); border-color: rgba(255,255,250,.9); }
.selr-ticket-see::after { content: "\2192"; }

/* ---------- the tail: the last ticket holds, then the seam ------------- */

.selr-deck-tail { height: 22vh; }

/* ---------- the hero city pills --------------------------------------- */

.selr-hub-cities {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 2px 0 0;
  padding: 0; list-style: none;
}
.selr-hub-city {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(103,54,226,.20);
  background: rgba(255,255,250,.7);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
  color: #242424;
  text-decoration: none;
  transition: border-color .3s cubic-bezier(.4,0,.2,1), background .3s cubic-bezier(.4,0,.2,1);
}
.selr-hub-city:hover { border-color: rgba(103,54,226,.45); background: #FFFFFA; }
.selr-hub-city::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #6736E2; flex: none;
}
.selr-hub-city.is-soon { color: #616161; }
.selr-hub-city.is-soon::before { background: #B9AFD6; }
.selr-hub-city-when { color: #616161; font-weight: 500; }

/* ---------- the cities menu in the nav -------------------------------- */

.selr-navcities { position: relative; display: inline-flex; }
.selr-navcities-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border: 0; border-radius: 999px;
  background: #6736E2;
  color: #FFFFFA;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
  cursor: pointer;
}
.selr-navcities-btn::after {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid rgba(255,255,250,.85);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.selr-navcities[data-open="true"] .selr-navcities-btn::after { transform: rotate(180deg); }
/* Moved out to <body> at boot by the deck script, because the harvested nav
   bar is overflow:clip and a panel inside it is cut off at the bar's own 60px.
   Fixed, and placed under the button from its measured box. */
.selr-navcities-panel {
  position: fixed; top: 0; left: 0; z-index: 60;
  min-width: 268px;
  padding: 10px;
  border-radius: 22px;
  background: #FFFFFA;
  border: 1px solid #ECE8DF;
  box-shadow: 0 1px 1px rgba(36,36,36,.06), 0 18px 44px rgba(36,36,36,.14);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1), visibility .22s;
}
.selr-navcities-panel[data-open="true"] {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.selr-navcities-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  transition: background .25s cubic-bezier(.4,0,.2,1);
}
.selr-navcities-item:hover { background: #F4F1FF; }
.selr-navcities-item b {
  font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #242424;
}
.selr-navcities-item span { font-size: 13px; color: #616161; }
.selr-navcities-item.is-soon b { color: #616161; }
/* the city you are already on, and the way back to all of them */
.selr-navcities-item.is-here { background: #F4F1FF; }
.selr-navcities-item.is-here b { color: #6736E2; }
.selr-navcities-all { margin-top: 4px; border-top: 1px solid #ECE8DF; border-radius: 0 0 14px 14px; padding-top: 12px; }
.selr-navcities-all b { color: #6736E2; }

/* ---------- the request chip in the phone bar ------------------------- */
/* Wider screens keep the floating Request a place at the top right
   (vsl.css). The phone hid that pill in favour of the traveller, which
   left the top corner with no way to request at all: this chip puts one
   inside the bar, next to the cities menu, in the bar's own chip language
   and the ink of the desktop pill. Every register of the same control
   opens the same panel (cta.js). */
.selr-nav-cta {
  display: none;
  align-items: center;
  padding: 8px 13px;
  border-radius: 999px;
  background: #292929;
  color: #FFFFFA;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2;
  text-decoration: none; white-space: nowrap; flex: none;
  transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
.selr-nav-cta:hover { background: #6736E2; }
@media (max-width: 809.98px) {
  .selr-nav-cta { display: inline-flex; }
}
/* Below 410px the bar cannot hold the logo, both chips and the hamburger.
   The request chip wins the seat: the hero pills, the deck and the form's
   own first step still name every city. */
@media (max-width: 409.98px) {
  .selr-navcities { display: none; }
}

/* ---------- narrow ---------------------------------------------------- */

@media (max-width: 1099.98px) {
  #the-deck.selr-deck-sec { --deck-top: max(96px, calc(50vh - 240px)); }
}

/* On a phone the ticket is nearly a viewport tall on its own, so a stack of
   them has nothing to stack into. The deck becomes what it always was
   underneath: a list of tickets, one after another. */
@media (max-width: 809.98px) {
  #the-deck .selr-deck-inner { padding: 0 20px; }
  .selr-deck-lead { height: auto; }
  .selr-deck-head {
    position: static; height: auto;
    padding: 70px 0 30px;
    opacity: 1; transform: none;
  }
  .selr-deck-sub { font-size: 17px; line-height: 26px; }
  .selr-deck-stack { gap: 26px; margin-top: 0; padding-bottom: 0; }
  .selr-deck-card {
    position: static;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .selr-deck-card > .selr-ticket::after { opacity: 0; }
  .selr-deck-tail { height: 70px; }
  /* A venue's own photograph of a room we have booked is theirs, so the ticket
   says so. Small, bottom-left, over the image, never in the way of the room. */
.selr-ticket-photo { position: relative; }
.selr-ticket-credit {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
  font-size: 10px; font-weight: 600; letter-spacing: .04em; line-height: 1.3;
  color: rgba(255,255,250,.92);
  text-shadow: 0 1px 3px rgba(20,18,28,.65);
  pointer-events: none;
}
@media (max-width: 809.98px) { .selr-ticket-credit { bottom: 10px; font-size: 9px; } }

.selr-ticket-photo.is-blank { height: 150px; padding: 22px; }
  .selr-ticket-photo.is-blank span { font-size: 36px; }
  .selr-navcities-panel { min-width: 232px; }
}

@media (prefers-reduced-motion: reduce) {
  .selr-deck-lead { height: auto; }
  .selr-deck-head {
    position: static; height: auto; padding: 90px 0 40px;
    opacity: 1; transform: none;
  }
  .selr-deck-stack { gap: 34px; margin-top: 0; }
  .selr-deck-card {
    position: static; opacity: 1; transform: none; transition: none;
  }
  .selr-deck-card > .selr-ticket::after { opacity: 0; }
  .selr-deck-tail { height: 80px; }
}

/* The hub shows the shape of the day, not a clock. The cities on it do not all
   start at the same hour, and one clock on a page listing five days is wrong
   for at least one of them. Each ticket carries its own hours. */
.selr-schedule.is-multi .selr-slot-time { display: none; }
.selr-schedule.is-multi .selr-slot { grid-template-columns: 1fr; }

/* ---------- the page after paying ----------
   Same card, same fields, same type as the request form elsewhere on the site,
   because somebody who has just paid should land somewhere that looks like the
   page they paid from. The old version of this page was its own island. */

.selr-ob-sec .selr-sec-inner { max-width: 980px; align-items: stretch; }
.selr-ob-mark {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: #EEE8FF;
  color: #6736E2;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
}
.selr-ob-mark::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: #6736E2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23FFFFFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.selr-ob-head h1 { margin: 18px 0 10px; text-align: left; }
.selr-ob-sub { margin: 0; font-size: 20px; line-height: 30px; color: #616161; max-width: 620px; }

.selr-ob-card {
  margin-top: 40px;
  background: #FFFFFA;
  border: 1px solid #ECE8DF;
  border-radius: 30px;
  padding: 40px;
}
.selr-ob-card-head { margin-bottom: 26px; }
.selr-ob-card-head p:first-child {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #616161; margin: 0 0 8px;
}
.selr-ob-card-head h2 { margin: 0 0 8px; font-size: 28px; letter-spacing: -.03em; text-align: left; }
.selr-ob-card-head p:last-child { margin: 0; color: #616161; font-size: 16px; line-height: 24px; }

.selr-ob-fields { display: flex; flex-direction: column; gap: 18px; }
.selr-ob-fields label { display: flex; flex-direction: column; gap: 7px; }
.selr-ob-fields .lab { font-size: 14px; font-weight: 600; letter-spacing: -.01em; color: #242424; }
.selr-ob-fields .hint { font-size: 13px; color: #8A8A8A; }
.sef-field { position: relative; }
.sef-field input, .sef-field textarea, .sef-field select {
  width: 100%;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid #ECE8DF;
  background: #FAFAF7;
  font-family: "Manrope Variable", Manrope, sans-serif;
  font-size: 16px; line-height: 1.4; color: #242424;
  transition: border-color .3s cubic-bezier(.4,0,.2,1), background .3s cubic-bezier(.4,0,.2,1);
}
.sef-field textarea { min-height: 96px; resize: vertical; }
.sef-field input:focus, .sef-field textarea:focus, .sef-field select:focus {
  outline: none; border-color: #6736E2; background: #FFFFFA;
}
.sef-field.invalid input, .sef-field.invalid textarea, .sef-field.invalid select { border-color: #C25D5D; }
.selr-ob-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.selr-ob-actions { margin-top: 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.selr-ob-error { margin: 0; color: #C25D5D; font-size: 14px; opacity: 0; transition: opacity .25s; }
.selr-ob-error.show { opacity: 1; }
.selr-ob-done { display: none; }
[data-selr-onboarding].sent .selr-ob-fields,
[data-selr-onboarding].sent .selr-ob-actions,
[data-selr-onboarding].sent .selr-ob-card-head { display: none; }
[data-selr-onboarding].sent .selr-ob-done {
  display: block; text-align: center; padding: 26px 0;
}
[data-selr-onboarding].sent .selr-ob-done h2 { margin: 0 0 8px; font-size: 28px; letter-spacing: -.03em; }
[data-selr-onboarding].sent .selr-ob-done p { margin: 0; color: #616161; }

@media (max-width: 809.98px) {
  .selr-ob-card { padding: 26px 20px; border-radius: 26px; margin-top: 28px; }
  .selr-ob-sub { font-size: 17px; line-height: 26px; }
  .selr-ob-card-head h2 { font-size: 24px; }
}

/* Nothing on the page after paying should ask for the thing already paid for. */
.selr-ob-page .selr-cta-float, .selr-ob-page [data-selr-cta-float] { display: none !important; }