/* The mailing-list form (/list).
   ============================================================
   Layered on css/wire-page.css, which owns the plate, the chip, the field,
   the label, the error and the ink. What is left here is this page's own
   furniture: the field grid, the two result states, and the error summary.

   The names are /sign-up's names, with the same values, because the two are
   the same form to a reader who fills in one and then the other — the class
   names are what stops them drifting into two designs for one act.

   ---- why the fields sit in a grid ----

   The site column is 78rem and every page starts at the same left edge, so
   this page does not get an inner wrapper to narrow it (docs/WIREFRAME-
   LANGUAGE.md §4). A one-line text input stretched across that column is
   still wrong, though, and the resolution the language already gives is to
   put the narrow thing inside something narrow: one column of a row. Three
   short answers therefore share a row and each gets a third of it, the note
   spans the whole width because a paragraph box wants to, and below the
   breakpoint the row becomes a stack. The plates keep the full column, so
   every right edge on the page is still the page's own. */

/* ---- the form ---- */
.wp-list .list-form { margin-bottom: 3rem; }

/* Each section of the form is one of the shared plates; only the heading
   inside it is this page's. Matches /sign-up exactly. */
.wp-list .wp-plate > h2 {
  font-family: var(--wp-mono);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--wp-strong);
  margin: 0 0 1.4rem;
  text-transform: lowercase;
}

/* auto-fit rather than a fixed count: with three items it can never make a
   fourth empty track, so the row is three across on a desktop column, two
   where only two fit, and a stack on a phone — without a media query per
   step. 16rem is the narrowest a name field can be and still show a name. */
.wp-list .list-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem 1.6rem;
  align-items: start;
}
.wp-list .form-group { min-width: 0; }
.wp-list .form-group-wide { grid-column: 1 / -1; }

/* ---- the submit plate ---- */
.wp-list .submit-area { margin-top: 1.5rem; }
.wp-list .consent-note {
  font-family: var(--wp-body);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--wp-soft);
  margin: 0 0 1.25rem;
}
.wp-list .consent-note a { color: var(--wp-accent); text-decoration: underline; }

/* The widget is 300x65 and arrives late; reserving its height stops the
   button jumping down the page under a reader's cursor when it lands.

   300px is also wider than this plate's content box on a 320px screen, and
   Cloudflare renders it at that width whatever the room — so on the narrowest
   phones it was pushing the whole document sideways, which is the one thing
   WCAG 1.4.10 asks a page not to do. It scrolls inside its own box instead:
   the page holds still, and the part that genuinely cannot reflow is the part
   that moves. `contain` so a flick at the end of it does not become a flick
   of the page behind it. */
.wp-list #turnstile-widget {
  margin-bottom: 1.25rem;
  min-height: 65px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.wp-list .submit-message {
  font-family: var(--wp-mono);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--wp-soft);
  margin: 0 0 1rem;
}
.wp-list .submit-message.error { color: var(--wp-accent); font-weight: 500; }

/* ---- the notice above the form ---- */
.wp-list .wp-list-notice { margin: 1.6rem 0 2rem; }
.wp-list .wp-list-notice p:last-child { margin-bottom: 0; }
.wp-list .wp-list-notice a { color: var(--wp-accent); text-decoration: underline; }

/* ---- what still needs doing ----
   Not on the page until there is something to put in it, so this is one of
   the boxes js/wire-page.js draws rather than places. */
.wp-list .error-summary { display: none; }
.wp-list .error-summary.visible { display: block; }
.wp-list .error-summary h2 {
  font-family: var(--wp-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp-accent);
  margin: 0 0 0.7rem;
}
.wp-list .error-summary ul {
  margin: 0;
  padding-left: 1.1rem;
  font-family: var(--wp-body);
  font-size: 0.9rem;
  line-height: 1.7;
}
.wp-list .error-summary a {
  color: var(--wp-accent);
  text-decoration: underline;
  cursor: pointer;
}

/* Everything the page scrolls somebody to clears the fixed banner. */
.wp-list #error-summary,
.wp-list .result-state { scroll-margin-top: calc(var(--banner-h, 64px) + 20px); }

/* ---- how it ended ---- */
.wp-list .result-state { display: none; }
.wp-list .result-state.visible { display: block; }
.wp-list .result-icon {
  font-family: var(--wp-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp-accent);
  margin-bottom: 0.7rem;
}
.wp-list .result-state h2 {
  font-family: var(--wp-mono);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  color: var(--wp-strong);
  margin: 0 0 0.9rem;
  text-transform: lowercase;
}
.wp-list .result-state p {
  font-family: var(--wp-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--wp-soft);
  margin: 0 0 1rem;
}
.wp-list .result-state a { color: var(--wp-accent); text-decoration: underline; }
/* The address we echo back is data, not prose — mono, like every other label
   in this language. */
.wp-list .result-email {
  font-family: var(--wp-mono);
  font-size: 0.92em;
  color: var(--wp-strong);
  text-decoration: none;
}
.wp-list .result-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  align-items: center;
}
.wp-list .result-actions a {
  color: var(--wp-accent);
  font-family: var(--wp-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}