/* Highlight unfinished fields; server errors and focus rings keep their own styling. */
.form-needed:not([aria-invalid='true']):not([type='checkbox']):not(
    [type='radio']
  ) {
  border-color: var(--status-warning, #ae8037) !important;
  background-color: color-mix(
    in srgb,
    var(--status-warning, #ae8037) 3%,
    var(--brand-surface, #fff)
  );
}
.form-complete:not([aria-invalid='true']):not([type='checkbox']):not(
    [type='radio']
  ) {
  border-color: color-mix(
    in srgb,
    var(--status-success, #27805a) 55%,
    var(--surface-border, #dce6e8)
  ) !important;
}
input:is([type='checkbox'], [type='radio']).form-needed:not(
    [aria-invalid='true']
  ):not(:focus-visible) {
  outline: 2px solid var(--status-warning, #ae8037);
  outline-offset: 3px;
}
input:is([type='checkbox'], [type='radio']).form-complete:not(
    [aria-invalid='true']
  ):not(:focus-visible) {
  outline: 1px solid var(--status-success, #27805a);
  outline-offset: 3px;
}
.form-readiness {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 16px 0;
  padding: 10px 12px;
  border-radius: 9px;
  background: color-mix(
    in srgb,
    var(--status-warning, #ae8037) 7%,
    var(--brand-surface, #fff)
  );
  color: var(--status-warning-ink, #78350f);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.form-readiness[data-state='complete'] {
  color: var(--status-success-ink, #216947);
  background: color-mix(
    in srgb,
    var(--status-success, #27805a) 7%,
    var(--brand-surface, #fff)
  );
}
.form-readiness[hidden] {
  display: none;
}
.form-readiness-mark {
  font-size: 16px;
  line-height: 1;
  flex: none;
}