/* Forms: stacked fields; labels are the tracked micro-caps; inputs are
   rectangles with a hairline that darkens on focus. */

.stacked-form { max-width: 640px; }

.field { margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
/* Let narrow fields (Issue #, Vol.) actually shrink: inputs otherwise keep
   their intrinsic ~20ch width and force the row to wrap. */
.field > input, .field > select, .field > textarea { min-width: 0; width: 100%; }
.field-row { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: end; }
.field-row .field { flex: 1 1 180px; }

label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.filter-toggle { text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--ink); }

input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="date"], input[type="file"], select, textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 0.55rem 0.7rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
input[type="checkbox"] { accent-color: var(--accent); width: 0.95rem; height: 0.95rem; }

.isbn-row { display: flex; gap: 0.6rem; }
.isbn-row input { flex: 1; }
.isbn-status { font-size: 0.85rem; color: var(--muted); }
.isbn-preview { max-width: 90px; }

/* The item form hides field groups per kind via the `hidden` attribute;
   .field/.field-row set display:flex, which would otherwise override it. */
.stacked-form [hidden] { display: none !important; }

/* "What is it?" — the kind select leads the form and sets its shape. */
.field-kind select { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.01em; }

.form-actions { display: flex; gap: 1.4rem; align-items: center; margin-top: 1.8rem; }

/* Buttons: rectangles. Primary is solid ink; secondary is outlined. */
.button, input[type="submit"] {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  line-height: 1.2;
}
.button:hover, input[type="submit"]:hover { background: var(--ink); color: var(--paper); text-decoration: none; }
.button-primary, input[type="submit"] { background: var(--ink); color: var(--paper); }
.button-primary:hover, input[type="submit"]:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.button-danger { color: var(--signal); border-color: var(--signal); }
.button-danger:hover { background: var(--signal); border-color: var(--signal); color: #ffffff; }
.button-small { font-size: 0.7rem; padding: 0.35rem 0.7rem; }

.form-errors {
  border-left: 3px solid var(--signal);
  background: var(--surface);
  padding: 0.8rem 1rem;
  margin-bottom: 1.4rem;
  font-size: 0.92rem;
}
.form-errors p { margin: 0 0 0.4rem; font-weight: 600; }
.form-errors ul { margin: 0; padding-left: 1.2rem; }