/* BriefDrop – Create account (Figma node 251:5334, 402 × 874 mobile). Builds on signin.css. */

.signup .head { margin-top: 42px; }
.signup .title { line-height: 46px; }
.signup .form { margin-top: 56px; flex: 1; }
.fields { display: flex; flex-direction: column; gap: 16px; }
.fields .field, .fields .field:nth-child(2) { margin-bottom: 0; }
.signup .cta { margin-top: 36px; }
.signup .create { margin-top: 16px; }
.signup .create a { text-decoration: none; }

/* password strength: the underline fills + recolours, a word sits at the right of the label row */
.field--pw .field__bar { transform: scaleX(var(--s, 0)); background: var(--sc, var(--primary)); transition: transform .45s cubic-bezier(.2,.8,.2,1), background-color .3s; }
.field--pw:focus-within .field__bar { transform: scaleX(max(var(--s, 0), .0001)); }
.field--pw.is-invalid .field__bar { background: var(--error); transform: scaleX(1); }
.field__meter { position: absolute; right: 52px; top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--sc, var(--muted)); opacity: 0; transition: opacity .25s, color .3s; pointer-events: none; }
.field--pw.has-value .field__meter { opacity: 1; }

/* confirm: a tick pops in when both match */
.field__ok { position: absolute; right: 16px; top: 50%; margin-top: -10px; color: #3ecf8e; opacity: 0; transform: scale(.4) rotate(-20deg); pointer-events: none; transition: opacity .2s, transform .45s cubic-bezier(.3,1.6,.5,1); }
.field--confirm.is-match .field__ok { opacity: 1; transform: none; }
.field--confirm.is-match .field__bar { background: #3ecf8e; transform: scaleX(1); }
.field--confirm input { padding-right: 48px; }

/* terms checkbox (Figma: 24px ink square + check icon) */
.terms { position: relative; margin-top: auto; padding-top: 36px; display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; cursor: pointer; font-size: 14px; line-height: 19px; color: var(--muted); }
.signup .form > .terms { margin-top: auto; }
.terms input { position: absolute; opacity: 0; width: 24px; height: 24px; left: 0; bottom: 0; margin: 0; }
.terms__box { flex: none; width: 24px; height: 24px; display: grid; place-items: center; background: var(--ink); color: transparent; border-radius: 0; transition: background-color .2s, color .2s, transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .2s; }
.terms__box svg { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s ease .05s; }
.terms:hover .terms__box { box-shadow: 0 0 0 2px rgba(24,90,219,.5); }
.terms input:focus-visible + .terms__box { outline: 2px solid var(--cream); outline-offset: 3px; }
.terms input:checked + .terms__box { background: var(--primary); color: var(--white); transform: scale(1.08); }
.terms input:checked + .terms__box svg { stroke-dashoffset: 0; }
.terms a { color: var(--white); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s; }
.terms a:hover { background-size: 100% 1px; }
.terms.is-invalid .terms__box { box-shadow: 0 0 0 2px var(--error); }
.terms__err { height: 0; margin: 0; padding-left: 32px; font-size: 12px; line-height: 14px; color: var(--error); opacity: 0; transition: opacity .2s; }
.terms.is-invalid + .terms__err { opacity: 1; height: auto; margin-top: 6px; }

@media (min-width: 640px) {
  .signup .head { margin-top: 30px; }
  .signup .form { margin-top: 26px; flex: none; }
  .terms, .signup .form > .terms { margin-top: 0; padding-top: 24px; }
}
@media (min-width: 640px) and (max-height: 900px) {
  .signup .head { margin-top: 18px; }
  .signup .form { margin-top: 18px; }
  .fields { gap: 6px; }
  .signup .field input { height: 48px; }
  .signup .cta { margin-top: 22px; }
  .signup .create { margin-top: 12px; }
  .terms, .signup .form > .terms { padding-top: 16px; }
  .panel { padding-block: 28px 24px; }
}