/* Forms: extremely clear. Visible labels, white fields, hairline borders. */

.form > * + * {
    margin-block-start: var(--space-6);
}

.form-section {
    padding-block: clamp(32px, 5vw, 56px);
    border-block-start: 1px solid var(--color-border);
}

.form-section > * + * {
    margin-block-start: var(--space-6);
}

.form-section__header {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    margin-block-end: var(--space-8);
}

/* Sections number themselves, so hidden (conditional) sections never leave a gap. */
form {
    counter-reset: form-section;
}

.form-section__number {
    font-size: var(--text-small);
    color: var(--color-graphite);
    font-variant-numeric: tabular-nums;
}

.form-section__number::before {
    counter-increment: form-section;
    content: counter(form-section, decimal-leading-zero);
}

:root:lang(fa) .form-section__number::before {
    content: counter(form-section, persian);
}

.form-section__title {
    font-size: var(--text-subheading);
    line-height: var(--leading-subheading);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-6);
}

@media (max-width: 640px) {
    .form-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.field__label {
    display: block;
    margin-block-end: var(--space-2);
    font-size: var(--text-small);
}

.field__optional {
    color: var(--color-graphite);
}

.field__help {
    margin-block-end: var(--space-2);
    font-size: var(--text-small);
    color: var(--color-graphite);
}

.field__help ul {
    padding-inline-start: 1.25em;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
    display: block;
    inline-size: 100%;
    min-block-size: var(--control-height);
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    color: var(--color-ink);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--transition);
}

textarea {
    resize: vertical;
    min-block-size: 8rem;
}

select {
    appearance: none;
    padding-inline-end: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23070707' stroke-width='1.5'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

[dir="rtl"] select {
    background-position: left 14px center;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--color-graphite);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: 0;
    border-color: var(--color-ink);
}

/* Fields whose content is always left-to-right keep their text aligned with the page. */
[dir="rtl"] input[dir="ltr"],
[dir="rtl"] textarea[dir="ltr"] {
    text-align: end;
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
    border-color: var(--color-error);
}

.errorlist {
    list-style: none;
    margin-block-start: var(--space-2);
    padding: 0;
    font-size: var(--text-small);
    color: var(--color-error);
}

.form-errors {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-sm);
    color: var(--color-error);
    font-size: var(--text-small);
}

.form-errors .errorlist {
    margin: 0;
}

/* Checkboxes ------------------------------------------------------------------ */

.checkbox {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    min-block-size: 44px;
    padding-block: var(--space-2);
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    inline-size: 20px;
    block-size: 20px;
    margin: 2px 0 0;
    accent-color: var(--color-ink);
}

/* Django's CheckboxSelectMultiple renders <div><div><label><input> text</label></div></div>. */
.field--choices > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 0 var(--space-6);
}

.field--choices > div label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: 44px;
    cursor: pointer;
}

.field--choices > div input {
    margin: 0;
    flex-shrink: 0;
}

/* Honeypot field: removed from view and from the accessibility tree. */
.field--trap {
    position: absolute;
    inset-inline-start: -9999px;
}

/* File upload ---------------------------------------------------------------------- */

.upload__zone {
    display: block;
    padding: clamp(24px, 4vw, 40px);
    border: 1px dashed var(--color-graphite);
    border-radius: var(--radius-sm);
    background: var(--color-paper);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
}

.upload__zone:hover,
.upload__zone.is-dragover {
    border-color: var(--color-ink);
    background: var(--color-fog);
}

.upload__zone:focus-within {
    outline: 2px solid var(--color-ink);
    outline-offset: 2px;
}

.upload__zone svg {
    inline-size: 24px;
    block-size: 24px;
    margin-inline: auto;
    margin-block-end: var(--space-3);
}

.upload__zone input[type="file"] {
    display: block;
    margin: var(--space-4) auto 0;
    max-inline-size: 100%;
    font-size: var(--text-small);
}

/* With JavaScript the native control is hidden and previews take over. */
.js .upload__zone input[type="file"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
}

.upload__hint {
    font-size: var(--text-small);
    color: var(--color-graphite);
}

.upload__previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-4);
    margin-block-start: var(--space-5);
}

.upload__preview {
    position: relative;
}

.upload__preview img {
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--color-fog);
    border: 1px solid var(--color-border);
}

.upload__preview figcaption {
    margin-block-start: var(--space-1);
    font-size: var(--text-caption);
    color: var(--color-graphite);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload__remove {
    position: absolute;
    inset-block-start: var(--space-1);
    inset-inline-end: var(--space-1);
    inline-size: 32px;
    block-size: 32px;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-paper);
    line-height: 1;
}

.upload__remove:hover {
    background: var(--color-ink);
    color: var(--color-paper);
}

/* Narrow authentication forms --------------------------------------------------------- */

.auth {
    max-inline-size: 440px;
}

.auth .button {
    inline-size: 100%;
}

.auth__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-small);
}

/* Authentication pages: title and introduction beside the form. */
.auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    column-gap: clamp(40px, 8vw, 144px);
    row-gap: var(--space-10);
    align-items: start;
}


.auth-layout__intro .eyebrow {
    margin-block-end: var(--space-6);
}

.auth-layout__title {
    font-family: var(--font-display);
    font-size: var(--text-heading);
    font-weight: 400;
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
    max-inline-size: 7em;
}

.auth-layout__lead {
    margin-block-start: var(--space-8);
    max-inline-size: 26em;
}

.auth-layout__body .form > * + * {
    margin-block-start: var(--space-5);
}

@media (max-width: 800px) {
    .auth-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .auth-layout__intro {
        padding-block-start: 0;
    }
}

/* Password visibility toggle (added by site.js). */
.password-field {
    position: relative;
}

.password-field input {
    padding-inline-end: 52px;
}

.password-field__toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: 48px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    color: var(--color-graphite);
    cursor: pointer;
}

.password-field__toggle:hover {
    color: var(--color-ink);
}

.password-field__toggle:focus-visible {
    outline: 2px solid var(--color-ink);
    outline-offset: -4px;
}

.password-field__toggle svg {
    inline-size: 20px;
    block-size: 20px;
}

/* Password requirements. Rules turn green once met and red while unmet. */
.form > .password-rules {
    margin-block-start: var(--space-3);
}

.password-rules {
    font-size: var(--text-small);
    color: var(--color-graphite);
}

.password-rules__title {
    margin-block-end: var(--space-2);
}

.password-rules__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.password-rules__list li {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding-block: 2px;
    transition: color var(--transition);
}

.password-rules__list li::before {
    content: "";
    flex-shrink: 0;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-2px);
}

.password-rules__list li.is-valid {
    color: var(--color-success);
}

.password-rules__list li.is-invalid {
    color: var(--color-error);
}

.password-rules__list li.is-valid::before,
.password-rules__list li.is-invalid::before {
    inline-size: 1em;
    block-size: auto;
    border-radius: 0;
    background: none;
    transform: none;
    text-align: center;
    font-weight: 600;
}

.password-rules__list li.is-valid::before {
    content: "\2713";
}

.password-rules__list li.is-invalid::before {
    content: "\2715";
}

.password-rules__note {
    margin-block-start: var(--space-2);
}