/* signup-1.0.0 — page-local additions on top of login.css, ported from the approved
   prototype (dzenitydesign 4457ae7, prototype/signup.html). Tokens only, no new colours. */

.lg-alert { display: flex; align-items: flex-start; gap: 9px; }
.lg-alert .icon { width: 16px; height: 16px; flex: none; margin-top: 1.5px; }
.lg-alert-ok { background: var(--ok-bg); color: var(--ok); }
.lg-alert a { color: inherit; text-decoration: underline; }

.lg-quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px;
  border-radius: 12px;
  border: 1px solid var(--line-input);
  background: var(--card); color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.lg-quiet:hover { border-color: var(--ink-3); color: var(--ink); text-decoration: none; }
.lg-quiet:disabled { opacity: 0.55; cursor: not-allowed; }
.lg-quiet:disabled:hover { border-color: var(--line-input); color: var(--ink-2); }

/* Busy primary button: idle label and spinner label swap with [hidden]. */
.lg-submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.lg-submit > span { display: inline-flex; align-items: center; gap: 9px; }
.lg-submit[aria-busy="true"] { cursor: progress; }
.spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: su-spin .8s linear infinite; }
@keyframes su-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 1.6s; } }

/* Country select, mirrors the text inputs of login.css. */
.lg-select-wrap { position: relative; }
.lg-select-wrap select {
  width: 100%; height: 46px;
  padding: 0 44px 0 16px;
  border-radius: 14px;
  border: 1px solid var(--line-input);
  background: var(--card);
  color: var(--ink);
  font: inherit; letter-spacing: inherit; font-size: 15px;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out);
}
.lg-select-wrap select:hover { border-color: var(--ink-3); }
.lg-select-wrap select:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.lg-select-wrap select[aria-invalid="true"] { border-color: var(--danger); }
.lg-select-wrap select.is-empty { color: var(--ink-3); }
.lg-select-wrap select:disabled { opacity: 0.6; cursor: not-allowed; }
.lg-select-wrap .icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3); width: 16px; height: 16px; }
.lg-field input:disabled { opacity: 0.6; cursor: not-allowed; }

/* Password strength: 4 segments plus a text label, never colour alone. */
.su-meter { margin-top: 9px; display: flex; align-items: center; gap: 10px; }
.su-segs { display: flex; gap: 4px; flex: 1; min-width: 0; }
.su-seg { flex: 1; height: 4px; border-radius: 2px; background: var(--line-card); transition: background-color var(--t-fast) var(--ease-out); }
.su-meter[data-score="1"] .su-seg:nth-child(-n+1) { background: var(--danger); }
.su-meter[data-score="2"] .su-seg:nth-child(-n+2) { background: var(--warn); }
.su-meter[data-score="3"] .su-seg:nth-child(-n+3) { background: var(--ok); }
.su-meter[data-score="4"] .su-seg:nth-child(-n+4) { background: var(--ok); }
.su-meter-label { flex: none; font-size: 12px; font-weight: 600; color: var(--ink-3); min-width: 56px; text-align: right; }
.su-meter[data-score="1"] .su-meter-label { color: var(--danger); }
.su-meter[data-score="2"] .su-meter-label { color: var(--warn); }
.su-meter[data-score="3"] .su-meter-label, .su-meter[data-score="4"] .su-meter-label { color: var(--ok); }

.lg-consent { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--ink-2); cursor: pointer; user-select: none; line-height: 1.45; }
.lg-consent input { width: 17px; height: 17px; flex: none; margin-top: 2px; accent-color: var(--flame); cursor: pointer; }
.lg-consent input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 1px; border-radius: 3px; }
.lg-consent-error { margin-top: -8px; }

.su-note { margin-top: -4px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

.su-addr { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.su-addr-line { margin-top: 20px; font-size: 14px; color: var(--ink-2); }
.su-sent-row { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.su-live { font-size: 13px; font-weight: 500; color: var(--ok); display: inline-flex; align-items: center; gap: 6px; }
.su-live .icon { width: 14px; height: 14px; }
.su-links { margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.lg-done-cta { margin-top: 24px; display: inline-flex; align-items: center; justify-content: center; width: 100%; }

.su-steps { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.su-step { display: flex; align-items: flex-start; gap: 12px; }
.su-step-n {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--line-card);
  background: var(--card-sunken); color: var(--ink);
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
}
.su-step-t { font-size: 14px; font-weight: 600; margin-top: 4px; }
.su-step-m { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

@media (max-width: 640px) {
  .su-sent-row .lg-quiet { width: 100%; }
}

[hidden] { display: none !important; }

/* The inbox shortcut is the primary action; resending stays secondary. */
.su-open-mail { width: 100%; margin-top: 24px; }
.su-mail-hint { margin-top: 10px; }
.su-mail-help { margin-top: 24px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
#su-sent > .lg-hint:last-child { margin-top: 12px; }

body[data-signup-screen]:not([data-signup-screen="form"]) .lg-shell { grid-template-columns: minmax(0, 1fr); }
body[data-signup-screen]:not([data-signup-screen="form"]) .lg-art { display: none; }
body[data-signup-screen]:not([data-signup-screen="form"]) .lg-card { max-width: 440px; }
body[data-signup-screen]:not([data-signup-screen="form"]) .lg-title { font-family: inherit; font-size: 30px; font-weight: 600; letter-spacing: 0; }
body[data-signup-screen="sent"] #su-alert-sent { background: transparent; padding: 0; color: var(--ink-2); }
body[data-signup-screen="sent"] #su-alert-sent > .icon { display: none; }