/* Public sign-up page. Mobile-first. Base system lives in theme.css. */

body{background:var(--bg);}

.page{
  max-width:460px;margin:0 auto;
  padding:var(--s-5) var(--s-4) var(--s-7);
}

/* ---------- organisation masthead: who is asking, before what for ---------- */
.org{text-align:center;padding:var(--s-2) 0 var(--s-5);}
.org-mark{
  width:56px;height:56px;object-fit:contain;display:block;margin:0 auto var(--s-3);
}
.org-name{
  font-size:var(--fs-16);font-weight:700;color:var(--ink);letter-spacing:-.01em;
}
.org-sub{font-size:var(--fs-13);color:var(--ink-2);margin-top:2px;}
.org-mission{
  font-size:var(--fs-13);color:var(--ink-2);line-height:1.55;
  margin:var(--s-3) auto 0;max-width:34ch;
}

/* ---------- sheet ---------- */
.sheet{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.pad{padding:var(--s-5);}
.banner{width:100%;display:block;aspect-ratio:16/7;object-fit:cover;}

.eyebrow{
  font-size:var(--fs-11);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
h1{
  font-size:var(--fs-24);font-weight:700;letter-spacing:-.025em;
  line-height:1.2;margin-top:var(--s-1);color:var(--ink);
}
.desc{
  font-size:var(--fs-14);color:var(--ink-2);line-height:1.6;margin-top:var(--s-3);
  white-space:pre-line;
}

/* ---------- event facts, payment address visible before committing ---------- */
.facts{
  margin:var(--s-4) 0 0;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.fact{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line-soft);
}
.fact:last-child{border-bottom:none;}
.fact dt{font-size:var(--fs-13);color:var(--ink-2);}
.fact dd{margin:0;font-size:var(--fs-13);font-weight:600;color:var(--ink);text-align:right;}
.fact dd.money{font-weight:700;font-variant-numeric:tabular-nums;}
.fact dd.payto{color:var(--green-text);word-break:break-all;}
.closes{font-size:var(--fs-13);color:var(--amber-ink);margin-top:var(--s-3);}

/* ---------- form ---------- */
form{margin-top:var(--s-5);}
.field{margin-bottom:var(--s-4);}
.field input,.field select,.field textarea{min-height:44px;font-size:var(--fs-16);}
.opt{font-weight:400;color:var(--ink-3);}

/* The requirement is bound to the field it governs. The joined appearance only
   applies when the green rule is actually rendered beneath the input, i.e. paid
   events. Without the class the input keeps the base field styling untouched. */
.email-field.has-payment-rule input{
  border-color:var(--green);
  border-bottom-left-radius:0;border-bottom-right-radius:0;
  border-bottom:none;
}
.email-field.has-payment-rule input:focus{box-shadow:none;border-color:var(--green);}
.email-rule{
  border:1px solid var(--green);border-top:none;
  border-radius:0 0 var(--r-md) var(--r-md);
  background:var(--green-soft);
  padding:var(--s-3) var(--s-3) var(--s-3);
}
.email-rule strong{
  display:block;font-size:var(--fs-13);font-weight:700;
  color:var(--green-ink);line-height:1.4;
}
.email-rule span{
  display:block;font-size:var(--fs-12);color:var(--green-ink);
  margin-top:3px;line-height:1.5;
}
.email-rule.standalone{
  border-radius:var(--r-md);border-top:1px solid var(--green);
  text-align:left;margin-top:var(--s-4);
}

.submit{width:100%;min-height:48px;font-size:var(--fs-16);}

/* ---------- custom questions ---------- */
.req{color:var(--red);font-weight:700;}
/* Selection rows. Same family as the admin `.pick` rows, sized for a public
   form where every row is a primary touch target. */
.pick-group{display:flex;flex-direction:column;gap:var(--s-2);}
.pick{
  display:flex;align-items:center;gap:var(--s-3);
  min-height:48px;padding:var(--s-2) var(--s-3);
  border:1px solid var(--field-line);border-radius:var(--r-md);
  background:var(--field);cursor:pointer;
  font-size:var(--fs-16);font-weight:400;color:var(--ink);margin:0;
  transition:border-color .12s ease,background .12s ease;
}
.pick input{width:auto;min-height:0;margin:0;flex:none;accent-color:var(--green);}
.pick:hover{border-color:var(--ink-3);}
.pick.is-selected{border-color:var(--green);background:var(--green-soft);}
.pick:focus-within{border-color:var(--green);}
.after{
  font-size:var(--fs-12);color:var(--ink-2);text-align:center;
  margin-top:var(--s-3);line-height:1.5;
}
.formerr{
  display:none;font-size:var(--fs-13);color:var(--red);
  background:var(--red-soft);border-radius:var(--r-md);
  padding:var(--s-3);margin-bottom:var(--s-4);
}
.formerr.show{display:block;}

/* ---------- states ---------- */
.state{padding:var(--s-6) var(--s-5);text-align:center;}
.state h2{font-size:var(--fs-20);font-weight:700;letter-spacing:-.02em;color:var(--ink);}
.state p{font-size:var(--fs-14);color:var(--ink-2);margin-top:var(--s-2);line-height:1.55;}
.state .sub{margin-bottom:var(--s-4);}
/* Restrained confirmation, matching the Cash Collection treatment.
   The mark sits inline with the heading rather than as a large centred circle. */
.ok-title{
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  font-size:var(--fs-20);font-weight:700;letter-spacing:-.02em;color:var(--ink);
}
.ok-mark{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--green-soft);color:var(--green-text);
  display:grid;place-items:center;font-size:var(--fs-12);font-weight:700;
}
.facts.pay{text-align:left;}

/* ---------- event code finder ---------- */
.finder{margin-top:var(--s-5);text-align:left;}
.finder-row{display:flex;gap:var(--s-2);}
.finder-row input{flex:1;min-width:0;min-height:44px;font-size:var(--fs-16);}
.finder-row .btn{flex:none;min-height:44px;}
.finder-msg{display:none;font-size:var(--fs-13);color:var(--red);margin-top:var(--s-2);}
.finder-msg.show{display:block;}
.finder-help{font-size:var(--fs-12);color:var(--ink-2);margin-top:var(--s-2);}

/* ---------- footer ---------- */
.foot{
  text-align:center;margin-top:var(--s-5);
  font-size:var(--fs-12);color:var(--ink-2);line-height:1.7;
}

/* ---------- wider screens: a little more room, still one column ---------- */
@media (min-width:560px){
  .page{padding:var(--s-7) var(--s-5) var(--s-8);}
  .org-mark{width:64px;height:64px;}
  .pad{padding:var(--s-6);}
  h1{font-size:var(--fs-32);}
}

/* ---------- coarse pointers: every control is a full touch target ---------- */
@media (pointer:coarse){
  .btn,.submit{min-height:48px;}
  .pick{min-height:52px;}
  .finder-row .btn,.finder-row input{min-height:48px;}
  .field input,.field select,.field textarea{min-height:48px;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .pick{transition:none;}
  .spin{animation:none;border-top-color:var(--line);}
}

/* ---------- native grouping for choice questions ----------
   fieldset/legend give screen readers the question-to-options relationship.
   Browser defaults are reset so the visual result is identical to a .field. */
fieldset.field{border:0;margin:0 0 var(--s-4);padding:0;min-width:0;}
fieldset.field legend{
  display:block;padding:0;float:none;width:100%;
  font-size:var(--fs-13);font-weight:600;color:var(--ink);margin-bottom:var(--s-1);
}

.hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* Confirmation-email notice on the success screen. Informational, not an error:
   the registration succeeded, only the email did not go out. Amber rather than
   red, and no icon, so it reads as "note this" rather than "something broke". */
.ok-notice{
  font-size:var(--fs-13);
  line-height:1.55;
  color:var(--amber-ink);
  background:var(--amber-soft);
  border-left:3px solid var(--amber);
  border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4);
  margin:0 0 var(--s-4);
  text-align:left;
}

/* Refund terms apply only when the event has a cost. `has-payment-rule` is
   already toggled on .email-field for paid events, so this needs no extra JS:
   the note is a later sibling inside the same form. Hidden by default, which
   also means it never flashes before the event loads. */
.refund-note{display:none;}
.email-field.has-payment-rule ~ .refund-note{display:block;}

/* ---------- privacy notice page ---------- */
.pv-title{font-size:var(--fs-24);font-weight:700;letter-spacing:-.02em;color:var(--ink);}
.pv-updated{font-size:var(--fs-12);color:var(--ink-3);margin-top:var(--s-1);}
.pv-lead{font-size:var(--fs-14);color:var(--ink);line-height:1.6;margin-top:var(--s-4);}
/* Scoped to the privacy page only. Bare `.sheet p` / `.sheet h2` would restyle
   existing sign-up elements (.after, .ok-title, .finder-help and others), so the
   privacy body is namespaced instead. */
.pv-body h2{
  font-size:var(--fs-16);font-weight:700;color:var(--ink);
  letter-spacing:-.01em;margin:var(--s-6) 0 var(--s-2);
}
.pv-body p{font-size:var(--fs-14);color:var(--ink-2);line-height:1.6;margin:var(--s-2) 0 0;}
.pv-body ul{margin:var(--s-2) 0 0;padding-left:var(--s-5);}
.pv-body li{
  font-size:var(--fs-14);color:var(--ink-2);line-height:1.6;margin-bottom:var(--s-2);
}
.pv-body strong{color:var(--ink);font-weight:600;}
.pv-back{margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line);}

/* ---------- shared form renderer (Phase 4) ----------
   Styles for the element types the renderer can produce beyond the original
   text/choice pair. Everything reuses the existing tokens and the established
   .field / .pick families, so a v1 form looks exactly as it did before: none
   of the rules below match any element a v1 form renders. */

/* Section headings and standalone information text: display-only content that
   an organiser can place between questions. */
.fr-heading{
  font-size:var(--fs-16);font-weight:700;color:var(--ink);
  letter-spacing:-.01em;margin:var(--s-6) 0 var(--s-2);
}
.fr-heading:first-child{margin-top:0;}
.fr-note{font-size:var(--fs-14);color:var(--ink-2);line-height:1.6;margin:var(--s-2) 0 var(--s-4);}

/* Per-question help text. Same size and colour as .finder-help so the page
   keeps one voice for secondary guidance. */
.fr-help{font-size:var(--fs-12);color:var(--ink-2);margin-top:var(--s-2);line-height:1.5;}
fieldset.field .fr-help{margin-bottom:var(--s-2);}

/* Paragraph answers. Sized for a few lines, resizable vertically only so the
   layout cannot be dragged sideways out of the sheet. */
.field textarea{min-height:96px;resize:vertical;line-height:1.5;}

/* An acknowledgement is a single .pick row rather than a group, so it needs
   the group's bottom spacing itself. */
.field > .pick{margin-bottom:0;}

/* Validation state. The message text remains the primary signal; this is the
   visual pairing for it. */
.field [aria-invalid="true"]{border-color:var(--red);}
.field [aria-invalid="true"]:focus{border-color:var(--red);}