/* Wishlist signup: the in-place field on the first screen and the form in #wishlist.
   Colours and type come from the :root tokens in site.css. */

.wl-form[hidden], #wishlist-open[hidden] { display: none; } /* .btn sets display, which would beat the hidden attribute */

.wl-form { display: flex; flex-direction: column; width: min(100%, 360px); }
.wl-row { display: flex; gap: 8px; }

/* the label is for assistive tech; the placeholder is what people see */
.wl-label {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wl-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  font: 400 16px/1.2 var(--serif); /* 16px keeps iOS from zooming on focus */
  letter-spacing: .03em;
  color: var(--bone);
  background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(243, 201, 139, .6);
  border-radius: 2px;
}
.wl-input::placeholder { color: rgba(232, 220, 200, .55); }
.wl-input:hover { border-color: var(--gold); }
.wl-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-color: var(--gold); }
.wl-input[aria-invalid='true'] { border-color: var(--ember); }

.wl-row .btn { flex: 0 0 auto; white-space: nowrap; }
.wl-row .btn:disabled { cursor: progress; filter: saturate(.5) brightness(.8); }

/* Out of sight and out of reach, but still rendered: some bots skip display:none fields. */
.wl-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.wl-msg {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: .04em;
  color: var(--bone);
}
.wl-msg:focus { outline: none; } /* focused by script after a success, never a tab stop */
.wl-msg[data-state='ok'] { color: var(--gold); }

/* On the first screen the form sits where the button was and the answer hangs under it without
   taking any room, so nothing above it moves and the trailer button keeps its height. */
.actions { align-items: flex-start; }
.wl-inline { position: relative; }
.wl-inline .wl-msg {
  position: absolute;
  left: 0; right: 0; top: 100%;
  margin-top: 10px;
  text-align: right;
}

/* The section at the bottom. */
#wishlist {
  padding: clamp(72px, 14vh, 140px) 24px clamp(88px, 16vh, 160px);
}
.wl-bottom {
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wl-bottom .wl-form { width: 100%; }
/* two lines held back so the promise line below does not jump when an answer arrives */
.wl-bottom .wl-msg { min-height: 3.1em; margin-top: 12px; }
.wl-title {
  margin: 0 0 28px;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: .5em;
  margin-right: -.5em;
  color: var(--gold);
  text-shadow: 0 0 22px rgba(255, 106, 16, .3);
}
.wl-promise {
  margin: 22px 0 0;
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(232, 220, 200, .72);
}

@media (max-width: 700px), (orientation: portrait) {
  .actions { align-items: stretch; } /* the stacked layout stretches its buttons to one width */
  .wl-inline { width: 100%; }
  /* the block is anchored to the bottom, so here the answer gets its own two lines in the flow:
     reserved when the field opens, so an answer arriving later moves nothing */
  .wl-inline .wl-msg { position: static; min-height: 3.1em; margin-top: 12px; text-align: center; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .actions { align-items: flex-start; }
  .wl-inline { width: 300px; }
  .wl-inline .wl-msg { position: absolute; min-height: 0; margin-top: 10px; text-align: right; font-size: 12px; }
}