/* Required fields */

.input.required > label::after {
    content: " *";
    color: var(--site-danger);
}

.form-validation-required-marker {
    color: var(--site-danger);
    font-weight: 800;
}

/* Server validation */

.form-error,
.form-validation-invalid {
    border-color: var(--site-danger) !important;
    background: var(--site-danger-soft);
}

.form-validation-invalid {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site-danger) 10%, transparent);
}

.has-validation-error > label {
    color: var(--site-danger-dark);
}

.form-error:focus,
.form-validation-invalid:focus {
    border-color: var(--site-danger) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--site-danger) 12%, transparent);
}

.error-message {
    margin: 6px 2px 0;

    color: var(--site-danger-dark);
    font-size: 0.85rem;
}

.error-message:not(:has(ul)) {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.error-message:not(:has(ul))::before {
    content: "\26A0";
    flex-shrink: 0;
    line-height: 1.4;
}

.error-message ul {
    display: flex;
    flex-direction: column;
    gap: 2px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.error-message ul li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.error-message ul li::before {
    content: "\26A0";
    flex-shrink: 0;
    line-height: 1.4;
}

/* Client validation */

.form-validation-error {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;

    margin: 6px 2px 0;

    color: var(--site-danger-dark);
    font-size: 0.85rem;
}

.form-validation-error__icon {
    flex: 0 0 auto;
    line-height: 1.4;
}

.form-validation-error__text {
    min-width: 0;
}

/* Character count */

.form-validation-character-count {
    margin-top: 0.35rem;

    color: var(--site-text-subtle, var(--site-text-muted));
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
}

.form-validation-character-count.is-near-limit {
    color: var(--site-danger-dark);
}

.form-validation-character-count.is-at-limit {
    color: var(--site-danger);
    font-weight: 700;
}

/* Password requirements */

.form-validation-password-requirements {
    margin-top: 0.55rem;

    color: var(--site-text-muted);
    font-size: 0.78rem;
    line-height: 1.4;
}

.form-validation-password-requirements__heading {
    display: block;
    margin-bottom: 0.3rem;

    color: var(--site-text);
    font-weight: 600;
}

.form-validation-password-requirements__list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.form-validation-password-requirement {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.form-validation-password-requirement::before {
    content: "○";
    flex: 0 0 auto;

    font-weight: 700;
    line-height: 1.35;
}

.form-validation-password-requirement.is-met {
    color: var(--site-success-dark);
}

.form-validation-password-requirement.is-met::before {
    content: "✓";
}

.form-validation-password-requirement.is-unmet {
    color: var(--site-danger-dark);
}

.form-validation-password-requirement.is-unmet::before {
    content: "×";
}