/* One warm, attached focus treatment across enquiry, account and studio forms. */
:root {
  --field-fill: #fcf9f6;
  --field-active: #fffaf6;
  --field-ring: rgba(114, 86, 67, .14);
  --field-wash: rgba(229, 203, 192, .22);
}

::selection { background: var(--selected-surface); color: var(--selected-ink); }
input, textarea, select {
  caret-color: var(--accent);
  accent-color: var(--accent);
  color-scheme: light;
}

/* Keep each form's layout and field shape; share its surface and interaction. */
body :is(.platform-form, .owner-filters, .studio-section-heading)
  :is(input:where(:not([type=checkbox], [type=radio], [type=file], [type=hidden], [type=range], [type=color], [type=button], [type=submit])), textarea, select) {
  --field-halo: 0 0 0 0 transparent;
  background-color: var(--field-fill);
  border-color: var(--border-soft);
  color: var(--ink);
  transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
body :is(.platform-form, .owner-filters, .studio-section-heading)
  :is(input:where(:not([type=checkbox], [type=radio], [type=file], [type=hidden], [type=range], [type=color], [type=button], [type=submit])), textarea, select):hover:where(:not(:disabled)) {
  border-color: var(--border-strong);
}
body :is(.platform-form, .owner-filters, .studio-section-heading)
  :is(input:where(:not([type=checkbox], [type=radio], [type=file], [type=hidden], [type=range], [type=color], [type=button], [type=submit])), textarea, select):focus {
  --field-halo: 0 0 0 3px var(--field-ring);
  outline: none;
  border-color: var(--accent);
  background-color: var(--field-active);
  box-shadow: var(--field-halo);
}

/* Underlined enquiries: a quiet colour wash and a stronger baseline, no box. */
body .email-form :is(input:where(:not([type=checkbox], [type=radio], [type=file], [type=hidden])), textarea) {
  --field-fill: var(--surface-soft);
  --field-halo: 0 0 0 0 transparent;
  padding-inline: 10px;
  background-color: transparent;
  transition: border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
}
body .email-form label { color: var(--muted); letter-spacing: .015em; }
body .email-form label:focus-within { color: var(--accent); }
body .email-form :is(input:where(:not([type=checkbox], [type=radio], [type=file], [type=hidden])), textarea):hover:where(:not(:disabled)) {
  border-color: var(--border-strong);
}
body .email-form :is(input:where(:not([type=checkbox], [type=radio], [type=file], [type=hidden])), textarea):focus {
  --field-halo: 0 1px 0 var(--accent);
  outline: none;
  border-color: var(--accent);
  background-color: var(--field-wash);
  box-shadow: var(--field-halo);
}
body .email-form select:focus {
  --field-halo: 0 0 0 3px var(--field-ring);
  outline: none;
  border-color: var(--accent);
  background-color: var(--field-active);
  box-shadow: var(--field-halo);
}

/* Search focus follows the whole search line rather than outlining its input. */
body .piece-search { transition: border-color .22s ease, box-shadow .22s ease; }
body .piece-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 1px 0 var(--accent);
}
body .piece-search input:focus { outline: none; box-shadow: none; }
body input::placeholder, body textarea::placeholder { color: var(--muted); opacity: .72; }

/* Browser-filled text keeps the same colours, including when it has focus. */
body input:-webkit-autofill, body textarea:-webkit-autofill, body select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--accent);
  -webkit-box-shadow: inset 0 0 0 1000px var(--field-fill), var(--field-halo, 0 0 0 0 transparent) !important;
}
body input:autofill, body textarea:autofill, body select:autofill {
  box-shadow: inset 0 0 0 1000px var(--field-fill), var(--field-halo, 0 0 0 0 transparent) !important;
}
body input:is([type=checkbox], [type=radio]) { accent-color: var(--accent); }
body input:is([type=checkbox], [type=radio]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
body :is(input, textarea, select):disabled { cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
  body :is(input, textarea, select), body .piece-search { transition: none; }
}