/* Shared text fields. Components own layout; density is configured with tokens.
   Native toggles, sliders, uploads and the transparent language hit area stay native. */
.studio :is(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [name="locale"])) {
  min-width: 0;
  min-height: var(--field-height);
  padding: var(--field-padding-block) 10px;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background-color: var(--input);
  color: var(--text);
  font: 400 var(--field-font-size)/20px var(--font-ui);
  box-shadow: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.studio select:where(:not([multiple], [name="locale"])) {
  padding-right: 28px;
  background-position: calc(100% - 13px) center, calc(100% - 9px) center;
}
.studio textarea { width: 100%; min-height: 80px; resize: vertical; }
.studio :is(input, textarea)::placeholder { color: var(--muted); opacity: .8; font-weight: 400; }
.studio :is(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [name="locale"])):hover:not(:disabled):not(:focus) { border-color: var(--field-hover); }
.studio :is(input, select, textarea):where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"], [name="locale"])):focus {
  border-color: var(--field-focus);
  outline: none;
  box-shadow: 0 0 0 2px var(--field-ring);
}
.studio :is(input, select, textarea):disabled { color: var(--muted); cursor: not-allowed; }
.studio :is(input, select, textarea):where([aria-invalid="true"], :user-invalid) {
  --field-focus: var(--error);
  --field-hover: var(--error);
  --field-ring: color-mix(in srgb, var(--error) 15%, transparent);
  border-color: var(--error);
}
/* Search and tag fields have one shared outline around icon, input and actions. */
.studio .studio-field-shell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: var(--field-height);
  padding: 0 10px;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  background: var(--input);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.studio .studio-field-shell:hover { border-color: var(--field-hover); }
.studio .studio-field-shell:focus-within { border-color: var(--field-focus); box-shadow: 0 0 0 2px var(--field-ring); }
.studio .studio-field-shell input,
.studio .studio-field-shell input:is(:hover, :focus, :focus-visible) {
  width: 100%;
  min-height: calc(var(--field-height) - 2px);
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
}
.studio .studio-field-shell:has(input[aria-invalid="true"]) { border-color: var(--error); --field-focus: var(--error); --field-ring: color-mix(in srgb, var(--error) 15%, transparent); }
/* The command palette already is the field surface; it must not acquire a box. */
.studio .studio-command-search input:is(:hover, :focus, :focus-visible) { border: 0; outline: none; box-shadow: none; }
.studio .studio-language-picker:focus-within { outline: 2px solid var(--field-focus); outline-offset: 2px; }