/* signup.html — page-only styles. Shared pieces live in components.css. */

/* ==========================================================================
   SIGN UP - Thematic Ink & Gold Glassmorphism
   Every rule is scoped under .su-page so form styles never leak into
   the header, navigation or other partials.
   ========================================================================== */
.su-page {
    max-width: 620px;
}

/* Page Header */

.su-subtitle {
    max-width: 460px;
}

/* Form Card */

.su-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px 16px;
}

.su-field {
    min-width: 0;
}

.su-field.is-wide {
    grid-column: 1 / -1;
}

/* Password input + show/hide toggle */

.su-advice {
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--ink-mountain-wash);
    background: var(--ink-gold-light);
    border: 1px dashed var(--ink-border-gold);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0;
}

/* Referral code */
.su-page .su-field input.su-referral {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 800;
}

.su-page .su-field input.su-referral::placeholder {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

.su-page .su-field input.su-input-error {
    border-color: var(--ink-cinnabar);
    background: rgba(168, 50, 38, 0.06);
    box-shadow: 0 0 0 3px rgba(168, 50, 38, 0.12);
}

.su-ref-error {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
}

.su-ref-error-text {
    color: var(--ink-cinnabar);
    font-weight: 700;
}

.su-ref-clear {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-mountain-wash);
    text-decoration: underline;
}

.su-ref-clear:hover {
    color: var(--ink-gold);
}

/* Legal consent (markup comes from _legal.html) */
.su-consent {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ink-mountain-wash);
}

.su-consent a {
    color: var(--ink-gold);
    font-weight: 700;
    text-decoration: none;
}

.su-consent a:hover {
    text-decoration: underline;
}