/* Doppel · /join pre-registration form. Uses site.css tokens.
   v7.2.1 (4 Oct 2026, Doppel v2 file): indigo submit, lavender-dark focus and success message, light-gray inputs and code card with a hairline,
   Afacad labels; red is kept for form errors only. The four MBTI family colours are unchanged. */
.join{flex:1;padding:clamp(28px,5vh,64px) 0 96px}
.join .wrap{max-width:560px}
.join-copy{text-align:center;margin-bottom:38px}
.join h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,6vw,4rem);line-height:1.02;letter-spacing:-.015em;margin:14px 0 16px}
.join h1 em{font-style:normal;font-weight:600;color:var(--lavender-dark)}
.join .intro{font-family:var(--sans);font-size:1.0625rem;line-height:1.6;color:var(--ink-2);max-width:44ch;margin:0 auto}
/* the overprint mark, centred under the heading (overrides site.css absolute placement) */
.join-copy .overprint{--w:250px;--r:75px;position:relative;right:auto;top:auto;transform:none;margin:30px auto 0;pointer-events:none}
@media (max-width:560px){.join-copy .overprint{--w:196px;--r:60px;margin-top:26px}}

.wl{max-width:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.row{margin-bottom:16px}
.row.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.row.two{grid-template-columns:1fr}}

.field{display:block;margin-bottom:16px}
.field > span{display:block;font-family:var(--label);font-weight:500;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--smoke);margin-bottom:8px}
.field > span em{font-style:normal;color:var(--ink-2);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:.82rem;margin-left:6px}
.row.two .field{margin-bottom:0}
.row.three{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:10px;margin-bottom:0}
.field.dob{border:0;padding:0;min-width:0}
.field.dob legend{padding:0;float:left;width:100%}
.field.dob legend span{display:block;font-family:var(--label);font-weight:500;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--smoke);margin-bottom:8px}
.field.dob .row.three{clear:both}
.field.dob input{text-align:center}
.field.dob > .note{display:block;margin:10px 0 0;font-family:var(--sans);font-size:var(--fs-sm);letter-spacing:0;text-transform:none;color:var(--ink-2);line-height:1.5}

input[type=text],input[type=email],select{
  width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--bone-2);border:1px solid var(--bone-3);border-radius:12px;
  padding:14px 16px;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;
}
input::placeholder{color:var(--ink-2)}
input:focus,select:focus{outline:none;border-color:var(--lavender-dark);box-shadow:0 0 0 3px rgba(110,58,176,.16)}
select{cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23272445' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}

/* MBTI collapsible */
.mbti{border:1px solid var(--bone-3);border-radius:20px;background:var(--bone-2);overflow:hidden;margin-bottom:20px}
.mbti > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px}
.mbti > summary::-webkit-details-marker{display:none}
.mbti > summary > span{font-family:var(--label);font-weight:500;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--smoke)}
.mbti > summary > span em{font-style:normal;color:var(--ink-2);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:.82rem;margin-left:6px}
.mbti > summary .chev{color:var(--smoke);transition:transform .2s;flex-shrink:0}
.mbti[open] > summary{border-bottom:1px solid var(--bone-3)}
.mbti[open] > summary .chev{transform:rotate(180deg)}
.mbti-body{padding:16px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:520px){.grid{grid-template-columns:repeat(2,1fr)}}
.card{
  display:flex;flex-direction:column;gap:1px;cursor:pointer;text-align:left;font-family:var(--sans);
  background:#fff;border:1px solid var(--bone-3);border-top:2px solid var(--fam,var(--bone-3));border-radius:9px;padding:9px 11px 10px;
  transition:border-color .14s,background .14s,transform .14s;
}
.card b{font-family:var(--serif);font-size:1.05rem;letter-spacing:.01em;color:var(--fam,var(--ink));line-height:1.1}
.card span{font-size:.72rem;color:var(--ink-2)}
.card:hover{border-color:var(--fam,var(--ink-2));transform:translateY(-1px)}
.card[aria-pressed=true]{background:var(--fam,var(--lavender-dark));border-color:var(--fam,var(--lavender-dark))}
.card[aria-pressed=true] b,.card[aria-pressed=true] span{color:var(--bone)}
.fam-a{--fam:#6E3AB0}
.fam-d{--fam:#366563}
.fam-s{--fam:#272445}
.fam-e{--fam:#24504E}
.hint{min-height:1.3em;margin-top:14px;font-size:.95rem;color:var(--ink-2);text-align:center}
.hint b{font-family:var(--serif);font-weight:500;font-style:normal;color:var(--lavender-dark)}
.hint.fam-a b{color:#6E3AB0}
.hint.fam-d b{color:#366563}
.hint.fam-s b{color:#272445}
.hint.fam-e b{color:#24504E}

/* submit + messaging */
.submit{
  width:100%;font-family:var(--sans);font-weight:600;font-size:1rem;cursor:pointer;
  background:var(--ink);color:var(--bone);border:0;border-radius:999px;padding:16px 20px;
  transition:background .15s;margin-top:4px;
}
.submit:hover{background:var(--lavender-dark)}
.submit:disabled{opacity:.6;cursor:default}
.msg{min-height:1.3em;margin:16px 0 0;font-size:.95rem;font-weight:500;text-align:center;color:var(--ink-2)}
.msg.ok{color:var(--lavender-dark)}
.msg.err{color:var(--thread-deep)}
.consent{margin-top:14px;font-size:var(--fs-sm);color:var(--ink-2);text-align:center;line-height:1.6}
.consent a{text-decoration-color:var(--lavender-dark)}

@media (prefers-reduced-motion:reduce){.card,.submit,.chev{transition:none}}

/* v7.1.0 (30 Sep 2026): required-field highlighting, friend's code, /joined */
.field.invalid > span,.field.dob.invalid legend span{color:var(--red-text)}
input.invalid,select.invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(232,50,42,.14)}
input.invalid:focus,select.invalid:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(232,50,42,.22)}
.field.ref input{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase}
.field.ref input::placeholder{font-family:var(--sans);letter-spacing:0;text-transform:none}
.field.ref > .note{display:block;margin:8px 0 0;font-family:var(--sans);font-size:var(--fs-sm);letter-spacing:0;text-transform:none;color:var(--ink-2);line-height:1.5}

.joined .code-card{background:var(--card);border:1px solid var(--hair);border-radius:20px;padding:26px 24px 22px;text-align:center}
.joined .code{display:block;font-family:var(--mono);font-size:2.4rem;letter-spacing:.22em;color:var(--ink);margin:10px 0 16px;padding-left:.22em;font-variant-numeric:tabular-nums}
.joined .give{font-size:var(--fs-body);color:var(--ink);max-width:36ch;margin:0 auto 18px;line-height:1.55}
.joined .give b{color:var(--lavender-dark)}
.joined .share{display:flex;flex-direction:column;gap:10px}
.joined .share .submit{margin:0}
.joined .btn-alt{display:block;font-family:var(--sans);font-weight:600;font-size:1rem;cursor:pointer;text-decoration:none;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:999px;padding:14px 20px;transition:background .15s,color .15s}
.joined .btn-alt:hover{background:var(--ink);color:var(--paper)}
.joined .link{margin:16px 0 0;text-transform:none;letter-spacing:.04em;word-break:break-all}
.joined .consent{margin-top:12px}
.joined .nocode .give{margin-top:10px}
@media (prefers-reduced-motion:reduce){.joined .btn-alt{transition:none}}

/* v7.2.0 (12 Oct 2026): MBTI 'Not sure' card spans the full grid row */
.card.unsure{grid-column:1/-1;flex-direction:row;gap:.5rem;justify-content:center;align-items:baseline}