/*
 * Zoeken en Zaak opschrijven (blok B punt 6 en 7).
 *
 * Alles wat gedeeld is komt uit `components.css`: `.item`, `.sec`, `.hr`,
 * `.banner`, `.dock`, `.lockrow`, `.who`. Hier staat alleen het zoekveld, de
 * markering, en de velden van het opschrijfscherm.
 */

/* ---- Het zoekveld ------------------------------------------------------- */

.zoek-veld {
  display: flex;
  align-items: center;
  gap: 9px;
  height: var(--tap-min);
  padding: 0 12px;
  border-radius: var(--r-btn);
  border: 1px solid var(--white-a10);
  background: var(--white-a04);
}
.zoek-veld > input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: max(16px, var(--fs-body));
  outline: none;
}
.zoek-veld:focus-within {
  border-color: var(--gold-a35);
}

/* ---- De resultaten ------------------------------------------------------ */

.zoek-lijst { width:100%; min-width:0; }
.zoek-regel { min-width:0; max-width:100%; }
.zoek-regel .groei-smal { overflow-wrap:anywhere; }


.zoek-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
/* Het aantal achter het kopje (§20.3), rustiger dan het kopje zelf. */
.zoek-aantal {
  color: var(--muted-2);
  font-weight: 400;
}

/*
 * Het stuk dat overeenkomt (§20.3). Geen gele markeerstift: op een donker scherm
 * is dat een schreeuw. Goud onderstreept zegt hetzelfde en blijft leesbaar.
 */
.zoek-regel mark {
  background: none;
  color: var(--gold-light);
  font-weight: 600;
}

/* Waar de pijltjes staan. Dezelfde kleur als een aangeraakte regel. */
.zoek-aan {
  background: var(--white-a04);
  border-radius: var(--r-btn);
}

/* ---- Zaak opschrijven --------------------------------------------------- */

.zaak-uitleg {
  font-size: var(--fs-support);
  color: var(--muted);
}

.zaak-label {
  display: block;
  font-size: var(--fs-meta);
  color: var(--muted-2);
  margin-bottom: 6px;
}

.zaak-veld {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 12px;
  border-radius: var(--r-btn);
  border: 1px solid var(--white-a10);
  background: var(--white-a04);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-body);
}
.zaak-veld:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.zaak-notitie {
  padding: 11px 12px;
  line-height: 1.45;
  resize: vertical;
}

/* Een zaak die er al staat: aantikbaar, want je wilt hem kunnen openen. */
.zaak-bestaand {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--r-btn);
  border: 1px solid var(--gold-a30);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-support);
  cursor: pointer;
}
.zaak-bestaand .mut { margin-left: 6px; }

.zaak-toch {
  margin-top: 9px;
  font-size: var(--fs-meta);
  color: var(--muted-2);
}

/*
 * De ingang naar zoeken boven de relatielijst (§20). Ziet eruit als het
 * zoekveld waar hij heen gaat, zodat je niet twee verschillende dingen leert.
 */
.zoek-ingang {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: var(--tap-min);
  padding: 0 12px;
  border-radius: var(--r-btn);
  border: 1px solid var(--white-a10);
  background: var(--white-a04);
  color: var(--muted-2);
  font: inherit;
  font-size: var(--fs-body);
  text-align: left;
  cursor: pointer;
}