/* Sign up to hear about apps and games (user, 2026-10-27; Netlify Forms). The "Tell me when it's out" button opens it
   in place: the picks (one per upcoming app, then Anything new, Updates, All of it), the email, "Keep me posted".
   Each pick is a pocket cut in a paper chip: empty, a neutral cut; picked, a piece drops in over its green floor.
   signup.js runs it; without scripts the button stays an email link and the form never shows. */
.signup { display: grid; gap: var(--space-4); width: 100%; max-width: 560px; margin-top: var(--space-4); text-align: left; color: var(--ink); }
.signup[hidden] { display: none; }
/* where it opens: under the empty slot's words (homepage shelf, Apps & games "?" row) and under an upcoming app's head */
.card__hole > .signup, .set__next > .signup, .app-head > .signup, .app-head > .app-head__signup { grid-column: 1 / -1; align-self: stretch; }
.card__hole > .signup { justify-self: center; }
/* the homepage shelf while it's open: the app cards keep their own height (no stretching to the taller slot), and the
   slot keeps room above the "?" so it never rides over the slot's top edge */
.shelf:has(.signup:not([hidden])) > .card[data-card] { align-self: start; }
.shelf .card--empty .card__hole:has(> .signup:not([hidden])) { padding-top: max(var(--space-7), 64px); }   /* (beats the wide-slot rules) */
.app-head > .app-head__signup { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* "Become a tester" (an app in a closed test; user, 2026-10-28): its two steps open in place under the buttons, numbered
   in the label face like the legal text's numbered lists */
.tester { width: 100%; max-width: 560px; margin-top: var(--space-4); text-align: left; color: var(--ink); }
.tester[hidden] { display: none; }
.app-head > .tester { grid-column: 1 / -1; align-self: stretch; }
.tester__steps { margin: 0; padding: 0; list-style: none; counter-reset: tester; display: grid; gap: var(--space-3); }
.tester__steps li { counter-increment: tester; position: relative; padding-left: 2.1em; font-size: var(--text-md); line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.tester__steps li::before {
  content: counter(tester); position: absolute; left: 0; top: 0;
  font-family: var(--font-label); font-variation-settings: "MONO" 1, "CASL" 0; font-weight: 700; color: var(--ink);
}
.tester__steps a { color: var(--ink); }
.signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* the spam honeypot */
/* (inside a page head, the page head's own paragraph sizes must not reach the form's small lines) */

.signup__picks { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.signup__picks legend { padding: 0; margin-bottom: var(--space-3); font-weight: 640; font-size: var(--text-md); color: var(--ink); }
.pick {
  display: inline-flex; align-items: center; gap: .55em; min-height: 40px; padding: .4em .95em .4em .55em;
  border-radius: var(--radius-pill); background: var(--piece); box-shadow: inset 0 0 0 1.5px var(--line), var(--z-flush);
  font-size: var(--text-sm); line-height: 1.2; color: var(--ink); cursor: pointer; user-select: none;
  transition: transform var(--dur-hover) var(--ease-spring), box-shadow var(--dur-hover) var(--ease-settle);
}
@media (hover: hover) and (pointer: fine) { .pick:hover { transform: translateY(var(--lift-1-y)); box-shadow: inset 0 0 0 1.5px var(--line), var(--z-lift-1); } }
.pick input {
  appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; margin: 0;
  width: 20px; height: 20px; border-radius: 6px; cursor: pointer;
  background: linear-gradient(var(--cut-floor-top), var(--cut-floor-bot)); box-shadow: var(--z-sunk-1), inset 0 0 0 1px var(--line);
}
.pick input::after {
  content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--piece); box-shadow: var(--z-flush);
  transform: translateY(-6px) scale(.6); opacity: 0;
  transition: transform .22s var(--ease-spring), opacity .12s linear;
}
.pick input:checked { background: linear-gradient(var(--floor-top), var(--floor-bot)); box-shadow: var(--z-sunk-1); }
.pick input:checked::after { transform: none; opacity: 1; }
.pick input:focus-visible { outline: var(--ring-width) solid var(--ring); outline-offset: 3px; }
/* nothing picked: the picks shake (with motion) and stay ringed until one is picked (always, so it never looks dead) */
.signup__picks.is-refused { animation: signup-no .42s var(--ease-settle); outline: var(--ring-width) solid var(--ring); outline-offset: 6px; border-radius: var(--radius-md); }
@keyframes signup-no { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-3px); } 100% { transform: none; } }

.signup__row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); }
.signup__field { display: grid; gap: 6px; flex: 1 1 220px; min-width: 0; }
.signup__label { font-size: var(--text-sm); color: var(--ink-2); }
.signup__field input {
  width: 100%; min-height: 46px; padding: .7em 1em; border: 0; border-radius: var(--radius-md);
  font: inherit; font-size: var(--text-md); color: var(--ink);
  background: linear-gradient(var(--cut-floor-top), var(--cut-floor-bot)); box-shadow: var(--z-cut-1), inset 0 0 0 1px var(--line);
}
.signup__field input::placeholder { color: var(--ink-3); }
.signup__field input[aria-invalid="true"] { box-shadow: var(--z-cut-1), inset 0 0 0 2px var(--slot-clay, #B4582F); }
.signup__row .btn .btn__piece { min-height: 46px; }
.signup .signup__note { margin: 0; max-width: none; font-size: var(--text-xs); line-height: 1.5; color: var(--ink-2); }
.signup__note a { color: inherit; }
.signup .signup__error { margin: 0; max-width: none; font-size: var(--text-sm); line-height: 1.5; color: var(--ink); }
.signup__error[hidden], .signup__done[hidden] { display: none; }
.signup .signup__done { margin: 0; max-width: none; font-size: var(--text-md); line-height: 1.5; font-weight: 640; color: var(--ink); }
.signup.is-done .signup__picks, .signup.is-done .signup__row, .signup.is-done .signup__note, .signup.is-done .signup__error { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pick, .pick input::after { transition: none; }
  .signup__picks.is-refused { animation: none; }
}
@media (forced-colors: active) {
  .pick { border: 1px solid CanvasText; }
  .pick input { border: 1px solid CanvasText; }
  .pick input:checked { background: Highlight; }
  .signup__field input { border: 1px solid CanvasText; }
}