/* Sign-up page. Builds on login.css (title, input look, button, status line). */

.signup { max-width: 640px; }

.signup-lead {
    margin: -18px auto 30px;
    max-width: 520px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-dim);
}

.signup-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 32px 36px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
}

.signup-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.signup-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.signup-field > span { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }
.signup-field > span em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.signup-field small { font-size: 12px; color: var(--text-muted); }

/* the inputs are the login page's, a little lower so a form of seven fits */
.signup .field-input { height: 50px; font-size: 15px; }
.signup select.field-input { padding-right: 12px; color-scheme: dark; }
.signup .field-input:disabled { opacity: 0.5; cursor: not-allowed; }

.signup-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.signup-foot { margin-top: 26px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.signup-foot a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
    .signup-card { padding: 24px 18px; gap: 18px; }
    .signup-row { grid-template-columns: minmax(0, 1fr); }
    .signup-lead { margin-top: -10px; }
}