/* signup — the card, fields and button are the theme's .lx-auth family (the sign-in's own,
   from the --login-* tokens); what is here is only what this form alone carries. */

/* the phone blueprint wears the form's own field shape */
[data-cmp="signup"] .lx-auth-field able-phone-input .apin-row, [data-cmp="signup"].lx-auth-field able-phone-input .apin-row { border-radius: var(--login-input-radius); }
[data-cmp="signup"] able-phone-input[data-invalid="true"] .apin-row, able-phone-input[data-cmp="signup"][data-invalid="true"] .apin-row { border-color: var(--login-error-color); }

/* ── date of birth: three pickers on one row ────────────────────────────────
   The month is the wide one (its words are); day and year hold digits. The reader's own
   order comes from [data-order], set by the script from the page's language. */
[data-cmp="signup"] .sux-dob, [data-cmp="signup"].sux-dob { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 8px; }
[data-cmp="signup"] .sux-dob[data-order="dmy"], [data-cmp="signup"].sux-dob[data-order="dmy"] { grid-template-columns: 1fr 1.6fr 1.2fr; }
[data-cmp="signup"] .sux-dob[data-order="dmy"] [data-part="d"], [data-cmp="signup"].sux-dob[data-order="dmy"] [data-part="d"] { order: 1; }
[data-cmp="signup"] .sux-dob[data-order="dmy"] [data-part="m"], [data-cmp="signup"].sux-dob[data-order="dmy"] [data-part="m"] { order: 2; }
[data-cmp="signup"] .sux-dob[data-order="dmy"] [data-part="y"], [data-cmp="signup"].sux-dob[data-order="dmy"] [data-part="y"] { order: 3; }
[data-cmp="signup"] .sux-sel, [data-cmp="signup"].sux-sel { padding-right: 8px; cursor: pointer; text-overflow: ellipsis; }
/* an unpicked picker reads as a placeholder, like the text fields beside it */
[data-cmp="signup"] .sux-sel:invalid, [data-cmp="signup"].sux-sel:invalid, [data-cmp="signup"] .sux-sel:has(option[value=""]:checked), [data-cmp="signup"].sux-sel:has(option[value=""]:checked) { color: var(--text-muted); }

/* the guardian capture — revealed for a 13-17 signup: one grouped ask, not a fourth loose field */
[data-cmp="signup"] .sux-guardian, [data-cmp="signup"].sux-guardian {
  display: grid; gap: 10px; padding: 14px;
  border: 1px solid var(--border-subtle); border-radius: var(--login-input-radius);
  background: var(--surface-subtle);
}
[data-cmp="signup"] .sux-guardian[hidden], [data-cmp="signup"].sux-guardian[hidden] { display: none; }
[data-cmp="signup"] .sux-guardian-head, [data-cmp="signup"].sux-guardian-head { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-primary); }

/* ── the provider doors: one row of equal logo-only buttons, the sign-in's outline ── */
[data-cmp="signup"] .sux-prov, [data-cmp="signup"].sux-prov { margin-top: 14px; }
[data-cmp="signup"] .sux-prov[hidden], [data-cmp="signup"].sux-prov[hidden] { display: none; }
[data-cmp="signup"] .sux-cap, [data-cmp="signup"].sux-cap { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
[data-cmp="signup"] .sux-prov-row, [data-cmp="signup"].sux-prov-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }
[data-cmp="signup"] .sux-door, [data-cmp="signup"].sux-door {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  border: 1px solid var(--border-default); border-radius: var(--login-input-radius);
  background: var(--surface-card); color: var(--text-primary); text-decoration: none;
  transition: border-color 120ms, background-color 120ms;
}
[data-cmp="signup"] .sux-door[hidden], [data-cmp="signup"].sux-door[hidden] { display: none; }
[data-cmp="signup"] .sux-door .ic, [data-cmp="signup"].sux-door .ic { width: 22px; height: 22px; font-size: 22px; }
[data-cmp="signup"] .sux-door-apple, [data-cmp="signup"].sux-door-apple { background: var(--grey-1000, #000); border-color: var(--grey-1000, #000); color: var(--grey-0, #fff); }
@media (hover: hover) and (pointer: fine) {
  [data-cmp="signup"] .sux-door:hover, [data-cmp="signup"].sux-door:hover { border-color: var(--text-primary); }}
[data-cmp="signup"] .sux-door:focus-visible, [data-cmp="signup"].sux-door:focus-visible { outline: 2px solid var(--login-link-color); outline-offset: 2px; }
[data-cmp="signup"] .sux-or, [data-cmp="signup"].sux-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 12.5px; color: var(--text-secondary); }
[data-cmp="signup"] .sux-or::before, [data-cmp="signup"].sux-or::before, [data-cmp="signup"] .sux-or::after, [data-cmp="signup"].sux-or::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

/* provider mode: the identity a provider verified, above the fields it prefills */
[data-cmp="signup"] .sux-provhead, [data-cmp="signup"].sux-provhead {
  margin: 18px 0 0; padding: 12px 14px;
  border: 1px solid var(--border-subtle); border-radius: var(--login-input-radius);
  background: var(--surface-subtle);
}
[data-cmp="signup"] .sux-provhead[hidden], [data-cmp="signup"].sux-provhead[hidden] { display: none; }
[data-cmp="signup"] .sux-provhead-h, [data-cmp="signup"].sux-provhead-h { margin: 0; font-size: 13px; font-weight: 700; color: var(--text-primary); }
[data-cmp="signup"] .sux-provhead-via, [data-cmp="signup"].sux-provhead-via { margin: 4px 0 0; font-size: 12.5px; color: var(--text-secondary); overflow-wrap: anywhere; }