/* One look for every field on the site.
 *
 * There are two form systems here and they drew boxes differently. The design
 * system's Input is a bare 21px-tall <input> inside a wrapper div that carries
 * the box — 40px tall, its own background and ring. Its Textarea is the box
 * itself. The authored pages (onboarding, pre-call) use .ob-input, which is the
 * box, at 44px on a solid black ground. So three heights and two backgrounds
 * across pages that sit one click apart.
 *
 * This file settles all of it: 44px, one radius, one ground, one ring, and one
 * blue on focus. It loads on every page, after both systems, so it wins without
 * either of them having to be rewritten.
 *
 * The wrapper is matched with :has() because it carries no class of its own —
 * it is a design-system export, and adding a hook would mean editing every
 * artboard that ever imports a Field.
 */

:root {
  --field-height: 44px;
  --field-ring: inset 0 0 0 1px var(--border-control, rgba(255, 255, 255, 0.14));
  --field-ring-focus: inset 0 0 0 1px var(--accent, #0099ff);
  --field-glow: 0 0 0 3px var(--accent-ring, rgba(0, 153, 255, 0.28));
}

/* --- the design system's field wrapper ---------------------------------- */

div:has(> input:is([type="text"], [type="email"], [type="tel"], [type="url"],
                   [type="number"], [type="search"], [type="password"], [type="date"]):not(.ob-input)) {
  min-height: var(--field-height);
  border-radius: var(--radius-field, 10px);
  transition: box-shadow 140ms ease;
}

/* !important, in both places, and not casually: the wrapper carries its ring as
   an inline style straight out of the design-system export, and an inline style
   outranks any stylesheet rule without it. The alternative is a script that
   rewrites the attribute on every focus, which is worse. */
div:has(> input:is([type="text"], [type="email"], [type="tel"], [type="url"],
                   [type="number"], [type="search"], [type="password"], [type="date"]):not(.ob-input):focus) {
  box-shadow: var(--field-ring-focus), var(--field-glow) !important;
}

/* The input inside it never draws its own ring; the wrapper is the box. */
div:has(> input) > input:focus,
div:has(> input) > input:focus-visible { outline: none; }

/* --- boxes that are the field itself ------------------------------------ */

textarea,
.ob-input,
select.ob-input {
  border-radius: var(--radius-field, 10px);
  transition: box-shadow 140ms ease;
}

.ob-input {
  min-height: var(--field-height);
  /* Was solid black while the canvas fields were a translucent white wash, so
     the same form looked like two forms depending on which page it opened on. */
  background: var(--bg-field, rgba(255, 255, 255, 0.07));
  box-shadow: var(--field-ring);
}

textarea.ob-input,
textarea { min-height: 96px; }

/* focus-visible alone left a click-focused field unmarked in some browsers, and
   a click is how a form is actually filled in. */
textarea:focus,
.ob-input:focus,
.ob-input:focus-visible {
  outline: none;
  box-shadow: var(--field-ring-focus), var(--field-glow) !important;
}

/* --- radios and checkboxes ---------------------------------------------- */

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--accent, #0099ff);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent, #0099ff);
  outline-offset: 2px;
}