/* ============================================================
   forms.css: the sign-up page (join.html), quiet version (2026-11-10).
   The form sits on one plain card on the wall (quiet.css .q-panel):
   no ticket, no stub, no nail, no string, no figure beside it.
   Fields, consent, the button, the human check, the honest line and
   the stamped confirmation are unchanged. Colours: site.css tokens.
   ============================================================ */

.joinwall [hidden]{display:none !important}
.admit{--panel-w:720px}
.ticket-main{min-width:0}
/* from opening day (nav.js data-launch): the card points to the app instead of the sign-up */
.ticket-open{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 0;text-align:center}
.ticket-open-p{margin:0;max-width:30ch;font-family:var(--r-ar);font-size:1.25rem;line-height:1.7;color:var(--copy);text-wrap:balance}
:lang(en) .ticket-open-p{font-family:var(--r-en)}
.ticket-open .pill{display:inline-flex;align-items:center;min-height:48px;padding:0 30px;font-size:1.0625rem}

/* ---------- words on the object ---------- */
.piece-h{margin:0;font-family:var(--d-ar);font-weight:400;font-size:1.875rem;line-height:1.45;color:var(--magenta-text)}
:lang(en) .piece-h{font-family:var(--d-en);font-style:italic;font-feature-settings:normal;line-height:1.3;padding-bottom:.1em}

/* ---------- fields ---------- */
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;margin-top:10px}
.ff{min-width:0;padding-bottom:14px}
.ff.wide{grid-column:1/-1}
/* label, control and error share rows across a pair of fields, so a wrapped
   label or one error never knocks the two inputs out of line */
@supports (grid-template-rows:subgrid){
  .ff{display:grid;grid-template-rows:subgrid;grid-row:span 3}
  .ff > label{align-self:end}
}
.ff > label{display:block;margin-bottom:6px;font-family:var(--sm);font-weight:400;font-size:1rem;line-height:1.5;color:var(--wine)}
.ff > label small{font-size:0.875rem;opacity:.85}
.fin{display:block;width:100%;height:48px;margin:0;padding:0 14px;font-family:var(--sm);font-weight:400;font-size:1.0625rem;line-height:1.3;
  color:var(--wine);background:var(--blush);border:1.5px solid color-mix(in srgb,var(--magenta) 55%,var(--page));border-radius:14px;
  outline:0;-webkit-appearance:none;appearance:none;touch-action:manipulation;transition:border-color .15s}
.fin,.fcheck input{scroll-margin:112px 0 32px}     /* a focused field never hides under the nav bar */
/* the hint in an empty field: smaller and lighter than what she types (owner 2026-10-09), still 4.5:1 on the field */
.fin::placeholder{color:color-mix(in srgb,var(--wine) 70%,var(--blush));opacity:1;font-size:0.9375rem}
.fin:focus-visible{border-color:var(--magenta-text);outline:2px solid var(--magenta-text);outline-offset:2px}
.fin[aria-invalid="true"]{border-color:var(--magenta-text);box-shadow:inset 0 0 0 1.5px var(--magenta-text)}
.fin:-webkit-autofill{-webkit-text-fill-color:var(--wine);-webkit-box-shadow:inset 0 0 0 60px var(--blush);caret-color:var(--wine)}
/* numbers and addresses are typed left to right, but sit under their label */
[dir="rtl"] .fin[dir="ltr"]{text-align:right}

/* errors sit under their field; the element is always there so the live region is heard */
.ferr{margin:0;font-family:var(--sm);font-size:0.9375rem;line-height:1.5;color:var(--magenta-text)}
.ferr:not(:empty){margin-top:6px}

/* consent */
/* owner 2026-11-10: "make the tick buttons smaller and easier to just check and ignore".
   A 20px box (its transparent pad keeps the 44px tap target), lighter line, smaller label;
   the community row's label fills the row so a tap anywhere on the row ticks it. */
.fcheck{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:start;margin-top:0}
.fcheck input{position:relative;flex:none;width:16px;height:16px;margin:13px 0 0;padding:0;-webkit-appearance:none;appearance:none;
  background:var(--blush);border:1.5px solid var(--magenta);border-radius:5px;cursor:pointer;touch-action:manipulation}
.fcheck input::before{content:"";position:absolute;inset:-14px}
.fcheck input:checked{background:var(--magenta)}
.fcheck input:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--page);border-width:0 1.75px 1.75px 0;transform:rotate(45deg)}
/* focus and "missing" are shown inside the box, so both boxes always measure the same (owner, 2026-11-11) */
.fcheck input:focus-visible{outline:2px solid var(--wine);outline-offset:-2px}
.fcheck input:active{transform:scale(.94)}
.fcheck input[aria-invalid="true"]{border-color:var(--wine);box-shadow:inset 0 0 0 1px var(--wine)}
.fcheck-t{padding-top:8px;font-family:var(--r-ar);font-size:1rem;line-height:1.65;color:var(--wine)}
.fgroup .fcheck-t{padding-top:0}
.fgroup .fcheck-t label{display:block;min-height:44px;padding-top:8px}
:lang(en) .fcheck-t{font-family:var(--r-en)}
.fcheck-t label{cursor:pointer}
.fcheck-t a{color:var(--magenta-text);text-underline-offset:3px;white-space:nowrap;padding-block:6px}
.fcheck-t a:focus-visible{outline:2px solid var(--magenta-text);outline-offset:2px;border-radius:4px}
.fcheck-t a:active{opacity:.7}
.fcheck .ferr{grid-column:2}

/* the honeypot: off screen for people, out of the tab order, hidden from readers */
.joinwall .hp{position:absolute;left:auto;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;opacity:0;pointer-events:none}

/* the end of the form: button, the place for the human check, the honest line */
.fend{display:flex;flex-wrap:wrap;align-items:center;column-gap:18px;margin-top:10px}
.pill.fsubmit{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 34px;font-size:1.0625rem}
.pill.fsubmit:disabled{opacity:.72;cursor:progress}
.pill.fsubmit:disabled:active{transform:none}
.ts-slot{flex:1 1 300px;min-width:0;min-height:65px;display:flex;align-items:center}
.ts-slot.compact{min-height:140px}
.fstatus{flex:1 1 100%;margin:0;font-family:var(--sm);font-size:1rem;line-height:1.6;color:var(--wine)}
.fstatus:not(:empty){margin-top:6px;padding:10px 14px;border-radius:14px;background:var(--tint-rose);border:1.5px solid var(--magenta-text)}

/* ---------- the confirmation: the same object, stamped or tied ---------- */
.admit,.fdone{scroll-margin-top:84px}
.fdone{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-height:248px;padding:14px 0 8px;padding-inline-end:clamp(196px,30%,230px);text-align:start;outline:0}
.fdone:focus-visible{outline:2px solid var(--magenta-text);outline-offset:6px;border-radius:14px}
.fdone h2{margin:10px 0 0;font-family:var(--d-ar);font-weight:400;font-size:2.25rem;line-height:1.4;color:var(--wine)}
.fdone h2 .hl{color:var(--magenta)}
:lang(en) .fdone h2{font-family:var(--d-en);font-style:italic;font-feature-settings:normal;line-height:1.3;padding-bottom:.1em}
.fdone p{margin:0;max-width:34ch;font-family:var(--r-ar);font-size:1.25rem;line-height:1.7;color:var(--wine);text-wrap:balance}
:lang(en) .fdone p{font-family:var(--r-en)}
/* follow on Instagram: the card's one button (owner, 2026-11-11) */
.fdone .pill.ig{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin-top:12px;padding:10px 24px;line-height:1.35;text-align:center;white-space:normal}
.fdone .home{margin-top:10px;padding:8px 2px 2px;font-family:var(--sm);font-size:1rem;color:var(--magenta-text);text-decoration:none;border-bottom:1px solid currentColor}
.fdone .home:focus-visible{outline:2px solid var(--magenta-text);outline-offset:3px}
/* the swing tag: hangs from the card's top border, on the far side from the words (owner, 2026-11-11);
   the string starts at the border line. It tilts outward: -8deg on the right (English), 8deg on the left (Arabic). */
.fdone .swing-tag{--tilt:-8deg;--tilt-from:-14deg;position:absolute;top:0;inset-inline-end:clamp(34px,6vw,56px);width:150px;height:225px;overflow:visible;
  transform:rotate(var(--tilt));transform-origin:50% 0;pointer-events:none}
[dir="rtl"] .fdone .swing-tag{--tilt:8deg;--tilt-from:14deg}
.swing-tag .tag-a{font-family:var(--d-en)}
.swing-tag .tag-r{font-family:var(--d-ar)}
.swing-tag .tag-s{font-family:var(--sm);font-weight:600}
:lang(en) .swing-tag .tag-ar,:lang(ar) .swing-tag .tag-en{display:none}
/* a return visit from a device that already signed up (forms.js): the same stamped object, a
   shorter line, and a quiet link-styled button that brings the form back. The page's head marks
   <html data-signed> before first paint, so the form never shows and then jumps away. */
html[data-signed] form[data-known]{display:none !important}
html[data-signed] .fknown[hidden]{display:flex !important}
.fknown h2{max-width:22ch;font-size:1.875rem;text-wrap:balance}
.fdone .again{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:4px 0 0;padding:0 8px;
  font-family:var(--sm);font-weight:400;font-size:1rem;line-height:1.4;color:var(--magenta-text);background:none;border:0;border-radius:10px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.fdone .again:focus-visible{outline:2px solid var(--magenta-text);outline-offset:2px}
.fdone .again:active{opacity:.7}
/* one swing as the card appears */
@keyframes tagswing{from{transform:rotate(var(--tilt-from))}to{transform:rotate(var(--tilt))}}
.is-done .swing-tag{animation:tagswing .6s ease-out both}

/* ============ phone ============ */
@media (max-width:760px){
  .piece-h{font-size:1.75rem}
  /* phone: button, the honest line, then the place for the human check. It takes no
     room until a challenge is needed (the widget is "interaction-only"): nothing but
     the bottom of the form moves then, and only while the challenge is on screen. */
  .fend{display:grid;grid-template-columns:minmax(0,1fr);margin-top:4px}
  .pill.fsubmit{grid-row:1;padding:0 34px;font-size:1.0625rem;width:100%}
  .fstatus{grid-row:2}
  .ts-slot,.ts-slot.compact{grid-row:3;grid-column:1;justify-content:center;min-height:0;pointer-events:none}
  .fend.checking .ts-slot{min-height:65px;margin-top:10px;pointer-events:auto}
  .fend.checking .ts-slot.compact{min-height:140px}
  .fdone h2{font-size:2rem}
  .fknown h2{font-size:1.625rem}
  .fdone p{font-size:1.1875rem}
}
@media (max-width:560px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .fdone{min-height:196px;padding-inline-end:132px}
  .fdone .swing-tag{inset-inline-end:28px;width:112px;height:168px}
}
@media (prefers-reduced-motion:reduce){
  .is-done .swing-tag{animation:none}
  .fin{transition:none}
}
/* more contrast asked for: full-strength 2px lines round every field */
@media (prefers-contrast:more){
  .fin,.fcheck input{border:2px solid var(--wine)}
  .fin::placeholder{color:var(--wine)}
  .fstatus:not(:empty){border-width:2px}
}

.fdone .fgroup-note{font-weight:600}

/* the phone with its fixed +965 (owner 2026-11-10): the code sits at the start of the digits, left to right
   on both pages; .telcc is the slot a country list could take later */
.telwrap{display:flex;align-items:center;height:48px;background:var(--blush);direction:ltr;
  border:1.5px solid color-mix(in srgb,var(--magenta) 55%,var(--page));border-radius:14px;transition:border-color .15s}
.telcc{flex:none;padding:0 4px 0 14px;font-family:var(--sm);font-weight:600;font-size:1.0625rem;line-height:1;color:var(--magenta-text);-webkit-user-select:none;user-select:none}
.telwrap .fin.fin{flex:1;min-width:0;height:100%;padding:0 14px 0 4px;border:0;border-radius:0 12px 12px 0;background:transparent;box-shadow:none;outline:0;text-align:left}
.telwrap:focus-within{border-color:var(--magenta-text);outline:2px solid var(--magenta-text);outline-offset:2px}
.ff.bad .telwrap{border-color:var(--magenta-text);box-shadow:inset 0 0 0 1.5px var(--magenta-text)}

/* the WhatsApp community opt-in (owner 2026-11-10): the same tick box and row as the terms consent under it */
.fgroup{margin-bottom:4px;min-height:44px}   /* a 44px row even when the label fits one line */
#join-form{scroll-margin-top:96px}   /* the bar never covers the form when the pill jumps to it (audit M4) */
/* without JavaScript the button stays disabled and says why (audit M7) */
.fnojs{flex:1 1 100%;margin:8px 0 0;font-family:var(--sm);font-size:.9375rem;line-height:1.6;color:var(--magenta-text)}