/* Signup page layout and validation styling */
.signup-card {
    padding: var(--size-20) var(--size-22);
}

.signup-title {
    margin: var(--size-6) 0 var(--size-12) 0;
}

.signup-flash {
    margin: var(--size-10) 0 var(--size-12) 0;
}

.signup-form {
    margin-top: var(--size-6);
}

.signup-grid {
    margin-left: 0;
}

.signup-row {
    display: grid;
    grid-template-columns: var(--size-180) 1fr;
    gap: var(--size-12);
    align-items: center;
}

.signup-row-tight {
    margin-top: 0;
}

.signup-label {
    font-weight: 600;
    white-space: nowrap;
}

.signup-label-blank {
    visibility: hidden;
}

.signup-control {
    min-width: 0;
}

.signup-input {
    width: 100%;
    background: var(--cream);
    border: var(--size-1) solid var(--ink-border);
    border-radius: var(--size-12);
    padding: var(--size-10) var(--size-12);
    font-size: var(--size-18);
    line-height: 1.2;
    color: var(--ink);
    -webkit-appearance: none;
}

/*
  Prevent browser autofill from overriding the cream design-system background.

  Safari/Chrome may paint autofilled fields yellow. We force the background back to
  var(--cream) by drawing an inset box-shadow over the field.
*/
input.signup-input:-webkit-autofill,
input.signup-input:-webkit-autofill:hover,
input.signup-input:-webkit-autofill:focus,
input.signup-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--ink);
    transition: background-color 9999s ease-in-out 0s;
    box-shadow: 0 0 0px 1000px var(--cream) inset;
    -webkit-box-shadow: 0 0 0px 1000px var(--cream) inset;
    caret-color: var(--ink);
}

/* Standardized autofill hook for browsers that support it */
input.signup-input:autofill {
    box-shadow: 0 0 0px 1000px var(--cream) inset;
}

.signup-input:focus {
    outline: none;
    border-color: var(--accent-outline-strong);
    box-shadow: 0 0 0 var(--size-3) var(--accent-glow);
}

.signup-input-lg {
    font-size: var(--size-20);
}

.signup-input-lot {
    max-width: var(--size-120);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.signup-error {
    margin-top: var(--size-3);
    min-height: var(--size-18);
    font-size: var(--size-14);
    color: var(--error-strong);
}

.signup-input.is-invalid,
select.signup-input.is-invalid {
    border-color: var(--error-border);
    box-shadow: 0 0 0 var(--size-3) var(--error-glow);
}

/*
  Normalize <select> styling so the State dropdown matches the other text entry boxes.

  Notes:
  - Removes native platform styling where possible.
  - Adds right-side padding to make room for a subtle dropdown indicator.
  - Uses an inline SVG chevron so no external assets are required.
*/
select.signup-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: var(--size-44);
    min-height: var(--size-44);
    padding-right: var(--size-40);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='rgba(16,32,21,0.65)' d='M5.5 7.5 10 12l4.5-4.5 1.4 1.4L10 14.8 4.1 8.9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--size-12) center;
    background-size: var(--size-18) var(--size-18);
}

.signup-row-split .signup-control {
    align-items: end;
}

.signup-split {
    display: grid;
    grid-template-columns: 1fr var(--size-260);
    gap: var(--size-12);
    align-items: end;
}

.signup-split-col {
    min-width: 0;
}

.signup-label-inline {
    display: block;
    font-weight: 600;
}

.signup-input-nick {
    font-size: var(--size-18);
}

.signup-triplet {
    display: grid;
    grid-template-columns: 1fr var(--size-240) var(--size-200);
    align-items: center;
}

.signup-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--size-10);
    margin-top: var(--size-12);
}

.signup-btn {
    text-decoration: none;
}

@media (max-width: var(--bp-md)) {
    .signup-row {
        grid-template-columns: 1fr;
        align-items: start;
        gap: var(--size-8);
        margin: var(--size-12) 0;
    }
    .signup-grid {
        margin-left: 0;
    }
    .signup-triplet {
        grid-template-columns: 1fr;
    }
    .signup-split {
        grid-template-columns: 1fr;
    }
}