/* Global app styles. Color via token pipeline only (docs/16 §4). */

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--s-normal);
}

.invalid {
    outline: 1px solid var(--s-alarm);
}

/* EditForm's own per-field message (MyProfile, the auth screens). Sized to match `.field-error` in
   shell.css, which is the same thing for the forms that validate in the circuit — two spellings of
   one idea should not be two sizes. */
.validation-message {
    color: var(--s-alarm);
    font-size: 0.75rem;
    line-height: 1.4;
}

.blazor-error-boundary {
    background: var(--s-alarm);
    padding: var(--sp-4);
    color: var(--c-primary-ink);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--c-border);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--c-text-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}