/* Public event sign-up form (/signup/<token>). Everything shared with the
   claim form comes from styles.css; this file only lays out the questions,
   which are not known until the server describes them, for a phone first. */

/* A column of questions reads better a little narrower than the claim form;
   on a phone the shared .claim-main gutter applies and this is full width. */
.signup-main { max-width: 640px; }

.signup-event-date { color: var(--muted); margin: 4px 0 0; font-size: 0.95rem; }

/* Amber so it cannot be mistaken for part of the form, dark text so it
   still reads in sunlight. Shown to the team previewing a draft only. */
.signup-preview {
  background: #fff4c2; border: 1px solid #e3c24a; color: #5c4300;
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px;
  font-weight: 700; text-align: center;
}
.signup-is-preview .btn[disabled] { cursor: not-allowed; }

.signup-loading { text-align: center; }

/* The team writes the introduction and the thank-you over several lines, and
   their line breaks are kept rather than run into one paragraph. */
.signup-intro, .signup-confirmation { white-space: pre-line; line-height: 1.5; }
.signup-intro { margin-top: 0; }

.signup-required-note { margin: 0 0 18px; }
.signup-required-mark { color: var(--danger); font-weight: 700; }

/* For screen readers only: the word "required" beside the red star. */
.signup-sr-only, .signup-hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* One question per block, with the label, then the help, then the control,
   so the eye runs straight down the page. The scroll margin keeps a question
   the page has jumped to after a failed check clear of the top edge. */
.signup-question { margin: 0 0 20px; min-width: 0; scroll-margin-top: 16px; }
.signup-question > label, .signup-choice legend { font-weight: 700; color: var(--ink); display: block; margin: 0 0 6px; }
.signup-help { display: block; margin: -2px 0 8px; line-height: 1.45; }
.signup-choice-hint { display: block; margin: -2px 0 8px; }
/* The live word count under a long answer with a limit, red once over. */
.signup-words { display: block; margin: 6px 0 0; text-align: right; font-variant-numeric: tabular-nums; }
.signup-words.is-over { color: var(--danger); font-weight: 700; }

/* The question's own copy of the error sits just above its control, and the
   control's border turns red, so the problem is found without reading the
   line beside Submit. */
.signup-question-error { margin: 0 0 8px; font-size: 0.95rem; line-height: 1.45; }
.signup-question.is-invalid input:not([type="radio"]):not([type="checkbox"]),
.signup-question.is-invalid textarea,
.signup-question.is-invalid select { border-color: var(--danger); }
.signup-question.is-invalid .signup-option { border-color: var(--danger); }

/* Thumb-sized controls, full width. 16px or more also stops iOS Safari
   zooming the page when a box is tapped, which would leave the Submit
   button off screen. */
.signup-question input:not([type="radio"]):not([type="checkbox"]),
.signup-question textarea,
.signup-question select {
  width: 100%; min-height: 48px; font-size: 1rem;
}
.signup-question input:not([type="radio"]):not([type="checkbox"]),
.signup-question textarea { padding: 12px 14px; }
.signup-question select { padding-block: 12px; padding-left: 14px; }
.signup-question textarea { resize: vertical; line-height: 1.45; }
/* A date box on iOS has a narrow intrinsic width; this keeps it the width of
   the other fields with the picker still reachable, and its text at the left
   like every other field rather than centred as iOS has it. */
.signup-question input[type="date"] { -webkit-appearance: none; appearance: none; }
.signup-question input[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* Choice groups: the fieldset border and padding go, the legend sits as an
   ordinary label, and each option is a card wide enough to tap anywhere. */
.signup-choice { border: 0; padding: 0; margin: 0 0 20px; }
.signup-choice legend { float: left; width: 100%; padding: 0; }
.signup-options { display: flex; flex-direction: column; gap: 8px; clear: both; }
.signup-option {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
}
.signup-option:hover { background: var(--blue-wash); }
.signup-option input { width: 20px; height: 20px; flex-shrink: 0; margin: 0; accent-color: var(--blue); }
.signup-option input:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.signup-option span { line-height: 1.4; }
.signup-option small { color: var(--muted); font-weight: 400; }
/* A full option stays visible, greyed, so people see it existed and is gone,
   and a box switched off by the "pick up to N" cap looks the same. */
.signup-option.is-full, .signup-option.is-capped { color: var(--muted); background: var(--blue-wash); cursor: not-allowed; }
.signup-option.is-full:hover, .signup-option.is-capped:hover { background: var(--blue-wash); }

/* Centred confirmation, like the claim form's, with the tick in the middle
   rather than against the left edge. */
.signup-done .done-tick { margin-left: auto; margin-right: auto; }
.signup-done h2 { margin-bottom: 8px; }
.signup-done .reference-box { text-align: left; }

/* Details filled in from a member's GROW account (opened from the member
   portal): said once above the questions, and each answer filled in is
   tinted until it is changed. */
.signup-prefill {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--blue-wash); border: 1px solid var(--blue-pale); color: var(--ink);
}
.signup-prefill p { margin: 0; line-height: 1.45; flex: 1 1 260px; }
.signup-prefill .btn { flex: none; min-height: 44px; }
.signup-question .is-prefilled { background: var(--blue-wash); border-color: var(--blue-pale); }
.signup-back { margin: 22px 0 0; }

/* A mentee's or mentor's GROW account, offered under the reference once
   they have signed up: a pale card of its own so it reads as the next
   step, not as part of the confirmation. */
.signup-account {
  text-align: left; margin-top: 22px; padding: 20px 22px; border-radius: var(--radius);
  background: var(--blue-wash); border: 1px solid var(--blue-pale);
}
.signup-account h3 { font-size: 1.35rem; margin: 0 0 6px; }
.signup-account p { line-height: 1.5; margin: 0 0 12px; }
.signup-account .signup-account-optin { margin: 0 0 14px; font-weight: 400; }
.signup-account .google-btn-holder { justify-content: flex-start; }
.signup-account .signup-account-privacy { margin: 14px 0 0; }

/* Tighter on a phone: the mark and heading take less of the first screen so
   the first question is visible without scrolling. */
@media (max-width: 480px) {
  .signup-body .claim-header { padding-top: 22px; }
  .signup-body .claim-header h1 { font-size: 1.7rem; }
  .signup-body .panel { padding: 20px 16px; }
  .signup-preview { font-size: 0.95rem; padding: 10px 14px; }
  .signup-done .reference-code { font-size: 1.6rem; }
  .signup-account { padding: 16px 14px; }
}
/* A box to tick to agree (mentor sign-up links): the option's own layout,
   not a question label's. */
.signup-question.signup-consent > .signup-option { display: flex; margin: 0; font-weight: 600; }