/* Form fields – one consistent look across the whole app (loaded after app.css) */
:root {
  --fld-h: 2.6rem;
  --fld-r: 10px;
  --fld-border: color-mix(in srgb, var(--ink) 16%, transparent);
  --fld-border-hover: color-mix(in srgb, var(--accent) 50%, var(--line));
  --fld-bg: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
}
:is(input:is(:not([type]), [type="text"], [type="search"], [type="password"], [type="number"], [type="email"], [type="url"], [type="tel"], [type="date"], [type="time"], [type="datetime-local"], [type="month"]), select, textarea):not(.topsearch *, .kb-search-field *, .access-search *) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: var(--fld-h);
  padding: .55rem .85rem;
  border: 1px solid var(--fld-border);
  border-radius: var(--fld-r);
  background-color: var(--fld-bg);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
  font: inherit;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
:is(input, select, textarea):not(.topsearch *, .kb-search-field *, .access-search *, [type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]):hover:not(:disabled, :focus) {
  border-color: var(--fld-border-hover);
  background-color: var(--surface);
}
:is(input, select, textarea):not(.topsearch *, .kb-search-field *, .access-search *, [type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]):focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
:is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="file"]):user-invalid {
  border-color: var(--bad, #dc2626);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad, #dc2626) 14%, transparent);
}
:is(input, select, textarea):disabled { opacity: .65; background: var(--surface-soft); cursor: not-allowed; box-shadow: none; }
:is(input, textarea)::placeholder { color: color-mix(in srgb, var(--muted) 62%, transparent); }
textarea:not(.topsearch *) { min-height: 5.5rem; resize: vertical; line-height: 1.55; }

select:not(.topsearch *) {
  appearance: none;
  cursor: pointer;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
}
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { cursor: text; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; border-radius: 4px; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; flex: none; cursor: pointer; }
input[type="file"]::file-selector-button { border-radius: var(--fld-r); border: 1px solid var(--fld-border); padding: .45rem .9rem; font-weight: 600; background: var(--surface); }
input[type="file"]::file-selector-button:hover { border-color: var(--accent); color: var(--accent); }

.field { gap: .4rem; margin-bottom: 1rem; }
.field > span { font-size: .78rem; font-weight: 650; letter-spacing: .01em; color: color-mix(in srgb, var(--ink) 82%, var(--muted)); }
.field small, .field .hint, .field-hint { font-size: .74rem; color: var(--muted); }
.field input, .field select, .field textarea { border-radius: var(--fld-r); background-color: var(--fld-bg); border-color: var(--fld-border); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background-color: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }

.account-form-grid { gap: .25rem .9rem; }
.account-form-grid .field { margin-bottom: .6rem; }
.access-toolbar select { min-height: 2.35rem; padding-block: .4rem; }
.access-search { border-radius: var(--fld-r); min-height: 2.35rem; background: var(--fld-bg); }
.access-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.key-actions input { min-height: 2.35rem; }