h1:focus {
    outline: none;
}

/* Form validation + checkbox borders on the house tokens (piece 11, 2026-10-06: the last raw colours left from the
   Blazor template). The old .blazor-error-boundary block went with Blazor (2026-09-21) - nothing renders it. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-good);
}

.invalid {
    outline: 1px solid var(--color-fault);
}

.validation-message {
    color: var(--color-fault-text);
}

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

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

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

/* ============================================================================
   Website-only element defaults.
   These live here rather than in the shared theme.css because that sheet is
   also loaded by the crew app, where a bare `input` rule would override the
   app's own deliberately-large touch targets. Tokens come from
   _content/FieldOps.UI/theme.css, which is linked ahead of this file.
   ============================================================================ */
/* Page = the house canvas (not the card), text = the house body colour, font = Inter (house style
   piece 0a, 2026-10-02; --font-sans is generated from HouseTokens.FontStack). */
body { background: var(--color-background); color: var(--color-foreground);
       font-family: var(--font-sans);
       font-size: var(--fs-body); }

input[type=text], input[type=number], input[type=date], input[type=password],
input[type=email], select, textarea {
    padding: var(--s2) var(--s3); border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm); background: var(--color-card); color: var(--color-foreground);
    font-size: var(--fs-body); font-family: inherit; }

a { color: var(--color-link); text-underline-offset: 2px; }
a:hover { color: var(--color-link-hover); }