/*
 * Intake form: required fields are outlined red until they hold a valid value, then green.
 * The state comes from the browser's own :invalid / :valid, so it works without JavaScript
 * and is correct the instant a draft is restored. Color is never the only cue: every
 * required field also carries a "Required" tag that becomes "Done" with a check mark, and
 * server-side errors keep aria-invalid="true" (which stays red).
 * Text colors below are all >= 4.5:1 on their backgrounds; outlines are >= 3:1 on white.
 */
.intake-form {
  --req-red: #b3423d;        /* outline, 5.4:1 on white */
  --req-red-text: #8e2926;   /* tag text, 8:1 on --req-red-bg */
  --req-red-bg: #fdf0ee;
  --req-green: #2e7d4f;      /* outline, 5.2:1 on white */
  --req-green-text: #1f5c38; /* tag text, 7:1 on --req-green-bg */
  --req-green-bg: #eaf5ee;
}

.intake-form .field-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .6rem; }
.intake-form .field:has(> label .req-tag) > label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .6rem; }

/* Required / Done tag */
.req-tag { display: inline-flex; align-items: center; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1.4; letter-spacing: .02em; white-space: nowrap; background: var(--req-red-bg, #fdf0ee); color: var(--req-red-text, #8e2926); border: 1px solid currentColor; }
.req-tag .req-done { display: none; }
.req-legend { padding: .05rem .4rem; border-radius: 999px; font-size: .8em; font-weight: 700; background: #fdf0ee; color: #8e2926; border: 1px solid currentColor; }

/* Required controls: red while empty/invalid ... */
.intake-form input:required:invalid:not([type="checkbox"]):not([type="radio"]),
.intake-form select:required:invalid,
.intake-form textarea:required:invalid {
  border-color: var(--req-red); box-shadow: inset 0 0 0 1px var(--req-red); background-color: #fffafa;
}
/* ... green once they hold a valid value. */
.intake-form input:required:valid:not([type="checkbox"]):not([type="radio"]),
.intake-form select:required:valid,
.intake-form textarea:required:valid {
  border-color: var(--req-green); box-shadow: inset 0 0 0 1px var(--req-green); background-color: #fff;
}
/* A server-side or post-blur error always wins and stays red. */
.intake-form input[aria-invalid="true"],
.intake-form select[aria-invalid="true"],
.intake-form textarea[aria-invalid="true"] {
  border-color: var(--req-red); box-shadow: inset 0 0 0 1px var(--req-red); background-color: #fffafa;
}

/* Checkbox / radio rows (the confirmations and the occasion) */
.intake-form .choice:has(input:required:invalid) { border-color: var(--req-red); box-shadow: inset 0 0 0 1px var(--req-red); background: #fffafa; }
.intake-form .choice:has(input:required:valid) { border-color: var(--req-green); box-shadow: inset 0 0 0 1px var(--req-green); background: #fff; }
.intake-form .choice:has(input[aria-invalid="true"]) { border-color: var(--req-red); box-shadow: inset 0 0 0 1px var(--req-red); }
.intake-form .choice input:required { accent-color: var(--req-green); }
/* Radio group: if none is chosen every option is :invalid; outline the whole group once. */
.intake-form fieldset:has(input[type="radio"]:required:invalid) .choice { border-color: var(--req-red); box-shadow: inset 0 0 0 1px var(--req-red); }
.intake-form fieldset:has(input[type="radio"]:required:valid) .choice { border-color: var(--line); box-shadow: none; }
.intake-form fieldset:has(input[type="radio"]:required:valid) .choice:has(input:checked) { border-color: var(--req-green); box-shadow: inset 0 0 0 1px var(--req-green); }

/* Tags turn green with a check mark when their field is valid. */
.intake-form .field:has(:required:valid) .req-tag,
.intake-form fieldset:has(input[type="radio"]:required:valid) > legend .req-tag,
.intake-form fieldset:not(:has(:required:invalid)) > legend .req-tag {
  background: var(--req-green-bg); color: var(--req-green-text);
}
.intake-form .field:has(:required:valid) .req-tag .req-text,
.intake-form fieldset:not(:has(:required:invalid)) > legend .req-tag .req-text { display: none; }
.intake-form .field:has(:required:valid) .req-tag .req-done,
.intake-form fieldset:not(:has(:required:invalid)) > legend .req-tag .req-done { display: inline; }
/* Server/post-blur errors keep the red tag. */
.intake-form .field:has([aria-invalid="true"]) .req-tag { background: var(--req-red-bg); color: var(--req-red-text); }
.intake-form .field:has([aria-invalid="true"]) .req-tag .req-text { display: inline; }
.intake-form .field:has([aria-invalid="true"]) .req-tag .req-done { display: none; }

/* Optional controls stay neutral, whatever their content. */
.intake-form .intake-details input:not(:required),
.intake-form .intake-details select:not(:required),
.intake-form .intake-details textarea:not(:required) { background-color: #fff; }

/* Keep keyboard focus clearly visible on top of the state colors. */
.intake-form input:focus-visible, .intake-form select:focus-visible, .intake-form textarea:focus-visible { outline: .2rem solid var(--rose, #a96968); outline-offset: .15rem; }

.intake-form .intake-details > summary { font-size: 1.02rem; }
.intake-form .choice { min-height: 3rem; }

@media (prefers-reduced-motion: no-preference) {
  .intake-form input, .intake-form select, .intake-form textarea, .intake-form .choice, .req-tag { transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
}
@media (max-width: 30rem) {
  .intake-form .field-head, .intake-form .field:has(> label .req-tag) > label { align-items: flex-start; }
}