/**
 * forms.css — field geometry, in the design system rather than in index.html.
 *
 * These rules lived inside the CDN's type="text/tailwindcss" block, marked
 * "nothing else belongs in this block". They had to live there because the
 * Tailwind forms plugin reset every input to a white square at a specificity
 * that beat artist.css, and because the CDN cloned its block after every
 * stylesheet.
 *
 * Neither is true now: the utilities are compiled ahead of time and the forms
 * plugin is not used (see tailwind.config.cjs), so there is no preflight to
 * out-rank. The rules are ordinary CSS again and belong with the component
 * styles.
 */

input, textarea, select,
[type="text"], [type="email"], [type="url"], [type="password"],
[type="number"], [type="date"], [type="datetime-local"], [type="month"],
[type="search"], [type="tel"], [type="time"], [type="week"], [multiple] {
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background-color: var(--bg-raised);
  padding-inline: 1rem;
}

textarea, [multiple] { border-radius: var(--radius); }

/* A table cell holds native controls that must stay compact and readable,
   not become capsules. */
.craft-table input, .craft-table select, .craft-table textarea {
  border-radius: var(--radius-sm);
  border-color: transparent;
  background-color: transparent;
  padding-inline: .45rem;
}

.craft-table input:hover, .craft-table select:hover { border-color: var(--line-strong); }
.craft-table input:focus, .craft-table select:focus {
  border-color: var(--accent);
  background-color: var(--bg-raised);
}

.craft-search input { border: 0; background-color: transparent; padding-inline: 0; }

/* Small themed scrollbars, once, where they are wanted. */
.scrollbar-thin::-webkit-scrollbar { width: 8px; height: 8px; }

[x-cloak] { display: none !important; }
