/* css/spec-builder.css — Spec Builder tool (BRI-4995). Scoped + additive; loaded only
 * by /tools/spec-builder/. Does NOT modify the shared css/lite-form.css.
 *
 * Sole purpose: give <textarea> fields the IDENTICAL look as .lite-field input/select.
 * The teardown form (App #1/#2) never used a textarea, so css/lite-form.css styles only
 * `input`/`select`, leaving the Spec Builder idea + paste textareas as bare default
 * boxes. Every property below is copied verbatim from `.lite-field input, .lite-field
 * select` in css/lite-form.css — this introduces NO new visual style, it adopts the
 * existing one. The only additions are textarea-specifics (multi-row height + vertical
 * resize).
 *
 * This file is loaded ONLY by tools/spec-builder/ — nothing else links it — so every
 * override below is scoped to this page and cannot touch the teardown / positioning-audit
 * forms.
 */

.lite-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  /* textarea-specifics: ~2 rows tall, and the user may grow it vertically only
     (horizontal resize would break the card layout). */
  min-height: 4.5rem;
  resize: vertical;
}

.lite-field textarea::placeholder {
  color: var(--color-text-muted);
}

.lite-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 18%, transparent);
}

.lite-field textarea[aria-invalid="true"] {
  border-color: var(--color-amber);
}

/* ─── The page must not accuse the user of an error before they have typed anything ───
 *
 * Found in visual QA, not by reading the code. On first paint the two REQUIRED fields
 * (idea, email) rendered with a RED error halo, and the blank OPTIONAL field (url) rendered
 * with a GREEN success halo — on a form the user had not touched. Exactly backwards, and the
 * first thing anyone sees.
 *
 * Mechanism (subtle — worth writing down):
 *   css/animations.css has a site-wide `input:invalid, textarea:invalid { border-color; box-shadow }`.
 *   An empty `required` field matches `:invalid` immediately at load; an empty OPTIONAL field
 *   matches `:valid`. `.lite-field input/select` (lite-form.css) and `.lite-field textarea`
 *   (above) both re-declare `border-color` at equal specificity but LATER in the cascade, so
 *   they win the border — which is why this was never noticed. They do NOT declare
 *   `box-shadow`, so the coloured GLOW leaked through. Half-overridden is worse than either:
 *   a neutral border wearing a red halo reads as a rendering bug.
 *
 * Fix: drop the automatic halo inside .lite-field. This form already has a DELIBERATE,
 * JS-driven error affordance — `aria-invalid="true"` (set on submit by js/spec-builder.js,
 * styled amber by lite-form.css + the textarea rule above, and paired with the visible
 * .lite-field-error text). That is the single source of truth for "this field is wrong", and
 * it fires on submit, not on arrival (ux-structure: validate-on-exit, never ambush).
 *
 * NOT fixed with `:user-invalid`, the obvious candidate: this form is `novalidate`, so the
 * user-validity flag is never set and `:user-invalid` NEVER matches. Verified in-browser —
 * it would have been a silent no-op that looked like a fix. */
.lite-field input:invalid,
.lite-field input:valid,
.lite-field select:invalid,
.lite-field select:valid,
.lite-field textarea:invalid,
.lite-field textarea:valid {
  box-shadow: none;
}

/* …but keep the focus ring. The rules above would otherwise flatten it: a focused field is
 * also :valid/:invalid, and these selectors outrank the plain :focus-visible ones. */
.lite-field input:focus-visible,
.lite-field select:focus-visible,
.lite-field textarea:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 18%, transparent);
}

/* `.lite-optional` — the "(optional)" hint inside a <label>. It had NO rule anywhere in css/:
 * it inherited the label's bold weight and full-contrast colour, so "Product URL (optional)"
 * read as one emphatic label and the hint carried no less weight than the thing it qualifies.
 * De-emphasize it: this is the existing muted-text token, not a new style. */
.lite-optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

/* A11y — prefers-reduced-motion (SPEC-BUILDER-CONTRACT §3).
 * lite-form.css has a reduced-motion block, but it names only `.lite-field input`,
 * `.lite-field select` and `.btn` — textareas did not exist there. Copying the input's
 * `transition` without copying its reduced-motion counterpart would leave this the one
 * animated field on the page for a reduced-motion user. */
@media (prefers-reduced-motion: reduce) {
  .lite-field textarea {
    transition: none;
  }
}

/* The CTA helper text overlapped the button — found in visual QA, on the DEFAULT page load.
 *
 * `.lite-microcopy` (lite-form.css) carries `margin-top: calc(-1 * var(--space-sm))` — a pull-up
 * tuned for microcopy sitting under a text field, where a little negative space reads as "this
 * belongs to the field above". I reused that class for the CTA's disabled-state helper
 * (#btn-build-help), which sits under a 50px-tall button — so the -8px yanked the helper UP into
 * the button and clipped its top edge. The helper is shown whenever the CTA is disabled, i.e.
 * the moment the page loads, so this was the first impression.
 *
 * Reset the pull-up to a small positive gap for THIS one instance. Scoped by id, so the shared
 * .lite-microcopy under every field is untouched. */
#btn-build-help {
  margin-top: var(--space-xs);
}

/* A11y — touch target (SPEC-BUILDER-CONTRACT §3: >=44px; mobile is P0).
 * The paste-escape is a text-style button (`.lite-back`) and rendered only ~17px tall — far
 * under the 44px minimum. Pad it to a 44px hit area WITHOUT changing its type size, and scope
 * it by id: `.lite-back` is shared with the teardown's "Back" control, which we must not restyle. */
#btn-show-paste {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}