/*
 * Sign-up, thank-you and privacy pages: the form and its parts. Loaded after
 * site.css, which holds the shared look (type, header, footer, buttons,
 * hero, sections). Phone first; wider screens from 760px. All values come
 * from tokens.css.
 */

/* Sections */
.signup-section { background: var(--cream-deep); }
.signup-grid { display: grid; gap: 28px; align-items: start; }
/* The waiting-list line, just above the form (L-0595; style in site.css). */
.signup-section .waiting-list { margin: 0 0 16px; }

.form-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-card);
  background: var(--field-bg);
  padding: 24px 20px;
  border-top: 6px solid var(--coral);
}

/* Form */
.signup-form { display: grid; gap: 24px; margin-top: 8px; }
.form-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 24px; }

.field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label,
.field > legend { font-weight: 600; font-size: 16px; padding: 0; }
.field > legend { margin-bottom: 6px; }
.hint { color: var(--muted); font-size: 15px; margin: 0; }

input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  color: var(--navy);
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  font-size: 17px;
}
input:focus-visible { outline-offset: 2px; }

.choice { position: relative; display: flex; align-items: flex-start; }
.choice input {
  flex: none;
  width: 26px; height: 26px;
  margin: 11px 0 0 12px;
  accent-color: var(--navy);
  cursor: pointer;
}
.choice label {
  flex: 1;
  min-height: var(--tap);
  padding: 11px 12px 11px 10px;
  cursor: pointer;
}

/* Lists as tiles: the radio sits under its label; the whole tile is the tap target. */
.tiles { display: flex; flex-wrap: wrap; gap: 8px; }
.tiles-small { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
.tile { position: relative; }
.tile input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0;
  cursor: pointer;
}
.tile label {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  padding: 10px 16px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius);
  background: var(--field-bg);
  font-weight: 600; font-size: 15px; line-height: 1.3;
  text-align: center;
  cursor: pointer;
}
.tile input:checked + label {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.tile input:focus-visible + label { outline: 3px solid var(--navy); outline-offset: 3px; }

.quick-taps {
  margin: 4px 0 0; padding: 20px 0 0;
  border: 0; border-top: 1px solid var(--card-border);
  display: grid; gap: 22px; min-width: 0;
}
.quick-taps > legend {
  float: left; width: 100%; padding: 0; margin-bottom: 6px;
  font-family: var(--heading); font-weight: 800; font-size: 20px;
}
.quick-taps > legend + .hint { clear: both; }

.consent .choice { margin-left: -12px; }
.consent-ads { margin-top: -12px; }
.consent .choice label { font-size: 15px; line-height: 1.55; }

/* Errors */
.field-error { color: var(--error); font-weight: 600; font-size: 15px; margin: 0; }
.field.has-error { border-left: 4px solid var(--error); padding-left: 14px; }
.field.has-error input[type="text"],
.field.has-error input[type="email"],
.field.has-error input[type="tel"] { border: 2px solid var(--error); }

.error-summary,
.form-message {
  border: 3px solid var(--error);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 8px 0 20px;
  background: #fff;
}
.error-summary h3 { margin-bottom: 8px; }
.error-summary p { margin-bottom: 8px; }
.error-summary ul { margin: 0; padding-left: 20px; }
.error-summary li { margin-bottom: 6px; }
.error-summary a { color: var(--error); font-weight: 600; }
.form-message p { margin: 0; font-weight: 600; color: var(--error); }

/* Send button, and its stand-in while sign-up is closed */
.signup-form .button.primary { width: 100%; }

.opens-soon {
  border: 2px dashed var(--navy);
  border-radius: var(--radius);
  padding: 14px 18px;
  background: var(--cream);
}
.opens-soon p { margin: 0; }
.opens-soon-title { font-family: var(--heading); font-weight: 800; font-size: 20px; margin-bottom: 4px !important; }

.form-fields:disabled input[type="text"],
.form-fields:disabled input[type="email"],
.form-fields:disabled input[type="tel"],
.form-fields:disabled .tile label { background: var(--cream-hover); border-style: dashed; }
.form-fields:disabled .choice input,
.form-fields:disabled .choice label,
.form-fields:disabled .tile input,
.form-fields:disabled .tile label { cursor: not-allowed; }

/* Pixel notice line and the Allow / No thanks choice (shown only when the Pixel is on) */
.pixel-notice { font-size: 15px; color: var(--muted); margin: 0; }
.pixel-notice a { color: var(--navy); }
.pixel-choice { background: var(--navy); color: #fff; padding: 16px 0; }
.pixel-choice-inner { display: grid; gap: 12px; }
.pixel-choice p { margin: 0; }
.pixel-choice a { color: #fff; }
.pixel-choice :focus-visible { outline-color: var(--mustard); }
.pixel-choice-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.pixel-choice .button.primary { width: auto; }
.pixel-choice .button.secondary { color: #fff; border-color: #fff; }
.pixel-choice .button.secondary:hover { background: rgba(255, 255, 255, .12); }
.pixel-choice[hidden] { display: none; }

/* Gift picture, or its placeholder box of the same size */
.gift-placeholder {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2;
  padding: 24px;
  border: 2px dashed var(--field-border);
  background: var(--cream-deep);
  text-align: center;
  font-weight: 600; color: var(--muted);
}
.gift-placeholder p { margin: 0; }

/* Privacy summary under the form, and the privacy page */
.privacy-summary { margin-top: 24px; font-size: 15px; }
.privacy-summary p { margin-bottom: 8px; }
.privacy-card { max-width: 820px; }
.privacy-card h1 { font-size: clamp(28px, 6vw, 40px); margin-top: 8px; }
.privacy-card p { font-size: 16px; }

/* Privacy note */
.privacy-note { margin-top: 28px; font-size: 15px; }
.privacy-note h2 { font-size: 20px; }
.privacy-note p { margin-bottom: 12px; }

/* What comes next (thank-you page) */
.next-card { max-width: 760px; }
.next-card .hint { margin-bottom: 20px; }
/* One follow line with four icon links (L-0504). The icons sit after the words
   when they fit and wrap below them on a phone; -12px lines the first drawing
   up with the words, each link keeping its 48px tap area. */
.follow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 0 0 18px; }
.follow-line { margin: 0; }
.follow-icons { display: flex; gap: 4px; margin-left: -12px; }

@media (min-width: 760px) {
  .signup-grid { grid-template-columns: minmax(0, 760px); gap: 40px; }
  .form-card { padding: 36px 36px 32px; }
  .signup-form .button.primary { width: auto; min-width: 220px; justify-self: start; }
  .pixel-choice-inner { grid-template-columns: 1fr auto; align-items: center; gap: 24px; }
}

/* Pick-any lists: tick boxes shown as chips; a picked chip shows a tick too. */
.pick-any .tile label { border-radius: 999px; padding: 10px 18px; }
.pick-any .tile input:checked + label::before { content: "\2713"; margin-right: 8px; font-weight: 800; }