/* line-list: Zeilen wie auf Papier — je Eintrag eine Zeile, eine Zutat oder
   ein Produkt. Kein Kartenpolster: Neun Zutaten sollen wie neun Zeilen
   aussehen, nicht wie neun Karten, durch die man scrollt.

   Getrennt durch dünne Linien, damit die Zeilen auch am Handy
   auseinanderzuhalten sind — Weißraum allein reicht nicht. Alles einspaltig:
   Ein antippbarer Eintrag ist als Ganzes der Knopf, statt einen Knopf neben
   dem Text zu tragen. Siehe project-rules.md. */
.line-list {
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
  border-block-start: var(--border-width) solid var(--color-border);
}

/* Die Linie steht unter jedem Eintrag, nicht zwischen zweien: So bleibt die
   Trennung richtig, auch wenn ein Filter einzelne Einträge ausblendet. */
.line-list__item {
  min-width: 0;
  padding-block: var(--space-2);
  border-block-end: var(--border-width) solid var(--color-border);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* Ein Eintrag, der etwas auslöst: Die Polsterung trägt dann der Knopf, damit
   die ganze Zeile trifft. */
.line-list__item--action {
  padding-block: 0;
}

.line-list__button {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  margin: 0;
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

/* Beim Antippen ändert sich die Fläche — ein Rand von einem Pixel sähe man
   unter dem Finger nicht. */
@media (hover: hover) {
  .line-list__button:hover { background: var(--color-surface-muted); }
}

.line-list__button:active { background: var(--color-surface-muted); }

.line-list__button:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: calc(var(--focus-offset) * -1);
}