/* Forms: fields, filters, and the centered auth card. */

.form { display: grid; gap: 1.1rem; }

.field { display: grid; gap: .35rem; }
.field label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.field__hint { font-size: .78rem; color: var(--ink-faint); margin: 0; }

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.1rem; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="date"],
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .6rem .8rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { resize: vertical; line-height: 1.6; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

input[type="file"] { font-size: .85rem; color: var(--ink-soft); }
input[type="file"]::file-selector-button {
  font: inherit;
  font-size: .82rem;
  margin-right: .75rem;
  padding: .45rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  cursor: pointer;
}

.field_with_errors { display: contents; }
.field_with_errors input, .field_with_errors textarea, .field_with_errors select { border-color: var(--danger); }

.form__errors {
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  background: var(--danger-tint);
  border-radius: var(--radius);
  padding: .9rem 1.1rem;
  color: var(--danger);
  font-size: .9rem;
}
.form__errors h2 { font-size: .95rem; margin-bottom: .35rem; }
.form__errors ul { margin: 0; padding-left: 1.1rem; }

.form__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.form__actions input[type="submit"] { width: auto; }

.attachments { display: flex; flex-wrap: wrap; gap: .75rem; }
.attachment { display: grid; gap: .35rem; justify-items: start; }
.attachment__preview { width: 140px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

/* Filters */

.filters { display: grid; gap: .9rem; margin-bottom: 1.75rem; }

.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: .4rem .95rem;
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface);
  text-decoration: none;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip--on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip--on:hover { color: #fff; }

.filters__form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filters__search { flex: 1 1 260px; }
.filters__select { flex: 0 1 190px; width: auto; }
.filters__form input[type="submit"] { width: auto; }

/* Auth card */

.card-form {
  max-width: 440px;
  margin: 2rem auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
}
.card-form__title { font-family: var(--serif); font-size: 2rem; font-weight: 400; margin-bottom: .35rem; }
.card-form__lede { color: var(--ink-soft); font-size: .92rem; margin-bottom: 1.5rem; }
.card-form__foot { margin-top: 1.25rem; font-size: .85rem; }

/* Checkbox */

.checkbox { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; }
.checkbox input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin-top: .15rem; accent-color: var(--accent); flex: none; }
.checkbox__text { display: grid; gap: .15rem; font-weight: 500; }