/* 10. The queue, at /queue/. One column, the site's one type size, black on
   white. The form asks three things and takes no script to send. */

/* The site's own column, the same as the header. On a desktop the drawing
   takes the white space to the right of the choosing (Matt, 21 Sept); on a
   phone there is no right-hand space, so it falls under the button. */
.queue {
  width: min(880px, 100% - 36px);
  margin-inline: auto;
  padding-block: clamp(24px, 4vw, 54px) clamp(34px, 5vw, 74px);
}
.queue .copy { margin-bottom: 1.75em; }
.queue-art { margin: 2.5em 0 0; }
.queue-art img { display: block; width: min(100%, 420px); height: auto; }

@media (min-width: 900px) {
  /* Same column as the header, so every left edge lines up. */
  .queue:not(.queue-thanks) {
    display: grid;
    grid-template-columns: minmax(0, 26em) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 56px);
    align-items: center;
  }
  .queue:not(.queue-thanks) .copy { grid-column: 1 / -1; }
  .queue-art { grid-column: 2; margin: 0; }
  .queue-art img { width: 100%; max-width: 460px; }
}

.queue-form { font-size: var(--copy); line-height: 1.75; max-width: 34em; }

.queue-form .field { display: block; margin-top: 1.4em; }
.queue-form .field span { display: block; margin-bottom: 0.35em; }
.queue-form input[type="email"],
.queue-form input[type="number"] {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0.55em 0.75em;
}
.queue-form input[type="number"] { max-width: 8em; }

.queue-form .choices { border: 0; margin: 1.4em 0 0; padding: 0; }
.queue-form .choice { display: flex; align-items: baseline; gap: 0.6em; cursor: pointer; }
.queue-form .choice + .choice { margin-top: 0.35em; }
.queue-form .choice input { accent-color: var(--ink); margin: 0; }

/* The consent tick, just above the button (Matt, 21 Sept). Required: the
   browser will not send the form without it. */
.queue-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-top: 1.75em;
  cursor: pointer;
}
.queue-form .consent input {
  accent-color: var(--ink);
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin: 0.35em 0 0;
}

.queue-form .join {
  margin-top: 1.75em;
  font: inherit;
  font-weight: 600;
  color: var(--bg);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 0.7em 1.4em;
  cursor: pointer;
}
.queue-form .join:hover,
.queue-form .join:focus-visible { background: var(--bg); color: var(--ink); }