/* ---------- the signup block ----------

   The decisions cricket-desktop asks for, written down rather than left to be
   inferred:

   1. Sentences or picture. Sentences, so the words take the measure. The card
      is capped at the measure plus its own padding, which puts the prose
      inside it at the measure exactly rather than at some number that happens
      to look close.
   2. Set or list. Neither. One component, one arrangement per screen.
   3. 390, 768, 1440. Two answers on purpose. Below 640 the field and the
      button stack, because side by side leaves the field too short to read a
      long address back in. From 640 up they sit on one row, button on the
      right, and nothing changes again above that: the card has reached the
      measure and a wider screen should not make a form longer to read.
   4. Rungs. Every gap off the ladder.

   The card carries the ochre left bar the site uses to mark the start of a
   block that is doing something rather than saying something, the same as the
   diagnosis question card. A left bar is the one rule cricket-desktop's rule 2
   allows to stop at the text's own edge. */

.signup__card {
  max-width: calc(var(--measure) + var(--s4) * 2);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-left: 6px solid var(--ochre);
  border-radius: var(--radius);
  padding: var(--s4) var(--s4) var(--s3);
}

.signup__h {
  font-family: var(--font-display);
  font-size: 1.5rem; letter-spacing: -0.012em;
  margin: 0 0 var(--s2); color: var(--ink);
}

.signup__p {
  margin: 0 0 var(--s3);
  color: var(--ink-soft);
  font-size: 1.02rem; line-height: 1.5;
}

.signup__row { display: flex; flex-direction: column; gap: var(--s2); }
/* `hidden` is a UA stylesheet rule and loses to the display above, so the row
   stayed on the page after a successful signup with the button still live.
   Caught in Chromium, not by reading. */
.signup__row[hidden] { display: none; }
.signup__label { display: flex; flex-direction: column; gap: var(--s1); flex: 1 1 auto;
                 /* 1fr is minmax(auto,1fr), so an input with a long value can
                    push the button off the row. This is the fix that was
                    needed on the search cell in the top bar. */
                 min-width: 0; }

.signup__labeltext {
  font-family: var(--font-hand);
  font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint);
}

.signup__input {
  font-family: var(--font-ui); font-size: 1.05rem;
  min-height: 46px; padding: 8px 13px; width: 100%;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rope); border-radius: var(--radius);
}
.signup__input:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; border-color: var(--forest); }

.signup__btn {
  font-family: var(--font-ui); font-size: 1.05rem; font-weight: 700;
  min-height: 46px; padding: 8px 22px; white-space: nowrap;
  color: #FFFFFF; background: var(--forest);
  border: 1px solid var(--forest); border-radius: var(--radius);
  cursor: pointer;
}
/* Darkened off forest rather than reaching for finder.css's --diag-edge:
   that token belongs to the diagnosis panel and borrowing it here would
   tie this block to a file it has nothing to do with. */
.signup__btn:hover {
  background: color-mix(in srgb, var(--forest) 84%, #000000);
  border-color: color-mix(in srgb, var(--forest) 84%, #000000);
}
.signup__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.signup__btn[disabled] { opacity: 0.6; cursor: default; }

/* Empty until the form has something to say, and it must not hold a blank
   line open while it waits. `hidden` would take it out of the accessibility
   tree, and a live region the screen reader cannot see does not announce, so
   this is emptiness rather than absence. */
.signup__say { margin: var(--s2) 0 0; font-size: 1.02rem; line-height: 1.45; }
.signup__say:empty { display: none; }
.signup__say[data-said="ok"] { color: var(--forest); font-weight: 700; }
.signup__say[data-said="no"] { color: var(--crimson); }

.signup__fine {
  margin: var(--s3) 0 0;
  font-size: 0.92rem; line-height: 1.45; color: var(--ink-faint);
}

/* Not display:none, because a form filler that skips hidden fields walks
   straight past a honeypot that announces itself.

   The first version parked it at left: -9999px and _check_mobile.py failed it,
   correctly: that check exists to catch content sitting off the edge of a
   phone and it cannot tell my trap from a real overflow. Clipped to nothing in
   place is the same trick without leaving the viewport, so the checker stays
   honest and keeps its teeth. */
.signup__trap {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

@media (min-width: 640px) {
  .signup__row { flex-direction: row; align-items: flex-end; gap: var(--s3); }
}