/* The forms module's look (FORMS_FORMAT.md). It uses the app's own colours when it names them:
   --forms-bad (messages and the required mark), --forms-muted (hints), --forms-line (lists) and --forms-surface (a
   list's background). Otherwise it follows the page's colour scheme: light, or dark where the app declares
   color-scheme: dark (or light dark, on a dark computer), never the computer's alone. */
:root {
  --forms-bad-fallback: light-dark(#b42318, #ffb4a8);
  --forms-muted-fallback: light-dark(#5b6470, #b5bec9);
  --forms-line-fallback: light-dark(#d0d5dd, #475467);
  --forms-surface-fallback: light-dark(#ffffff, #1d2939);
}
[data-forms-field] { display: block; min-width: 0; }
.required-mark { display: inline; color: var(--forms-bad, var(--forms-bad-fallback)); margin-left: .2em; font-weight: 700; }
.required-note, .hint { color: var(--forms-muted, var(--forms-muted-fallback)); font-size: .875rem; }
.hint, .message { display: block; overflow-wrap: anywhere; font-weight: 400; }
.hint:empty, .message:empty, .form-error:empty { display: none; }
.message, .form-error { color: var(--forms-bad, var(--forms-bad-fallback)); }
.message:not(:empty)::before { content: "⚠ "; }
[data-forms-field] [aria-invalid="true"] { border-color: var(--forms-bad, var(--forms-bad-fallback)); outline-color: var(--forms-bad, var(--forms-bad-fallback)); }
.phone-control, .password-control { display: flex; gap: .5rem; align-items: stretch; min-width: 0; }
.phone-control input, .password-control input { flex: 1; width: 0; min-width: 0; }
.phone-control select { flex: 0 0 6.25rem; width: 6.25rem; }
.password-control button { flex: 0 0 auto; }
.typeahead-control { display: block; position: relative; min-width: 0; }
.typeahead-control input[data-input] { width: 100%; box-sizing: border-box; }
.typeahead-list {
  position: absolute; z-index: 10; top: 100%; left: 0; right: 0; max-height: 16rem; overflow: auto; margin: .25rem 0 0; padding: 0;
  list-style: none; background: var(--forms-surface, var(--forms-surface-fallback));
  border: 1px solid var(--forms-line, var(--forms-line-fallback)); border-radius: .5rem;
}
.typeahead-list[hidden] { display: none; }
.typeahead-list [role="option"] { padding: .65rem; min-height: 44px; box-sizing: border-box; cursor: pointer; overflow-wrap: anywhere; }
.typeahead-list [aria-selected="true"], .typeahead-list [role="option"]:hover { background: var(--forms-line, var(--forms-line-fallback)); }
.typeahead-status { display: block; color: var(--forms-muted, var(--forms-muted-fallback)); font-size: .875rem; }
.typeahead-status:empty { display: none; }