/* species.css – Arten-Katalog und Artkarte (S93, Backlog #122 und #74) */

.species-view {
  padding: var(--space-md);
}

/* Wie im Bestand-Hub (S91): die Überschrift steht nur im Accessibility-Tree,
   weil sie sichtbar wortgleich unter der Tab-Beschriftung „Arten" stünde. Die
   46 px, die sie kostet, sind hier zusätzlich spürbar — die Liste ist mit 50
   Einträgen die längste der App. */
.species-view__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

/* ─── Filterzeile ──────────────────────────────────────────────────────────── */
/* Style-Tokens identisch zu .month-chip (plants.css) und .weekday-chip
   (spaces.css). Das ist die DRITTE Kopie derselben sechs Deklarationen, und der
   TODO an .month-chip nennt ein generisches .chip in base.css bereits als den
   richtigen Ort. Er wird hier bewusst NICHT eingelöst: das wäre ein
   Refactoring an zwei Dateien, die diese Session nicht anfasst. Als
   Aufräumpunkt geflaggt — mit der dritten Kopie ist der Fall entschieden, nur
   nicht in dieser Session.

   Gemessen auf 375 px: die drei Chips belegen 290,2 von 343 px und stehen
   einzeilig; die Zeile kostet 34 px Höhe. */
.species-filter {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin: var(--space-sm) 0 var(--space-md);
}

.species-filter__chip {
  padding: 7px var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  font-weight: 500;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
  transition:
    background var(--duration-fast),
    color var(--duration-fast),
    border-color var(--duration-fast);
}

.species-filter__chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.species-filter__chip[aria-pressed="true"] {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

/* ─── Liste ────────────────────────────────────────────────────────────────── */
/* Trennlinien-Liste statt Kartenliste, und das ist die eine gemessene
   Entscheidung dieser Ansicht (S93). Gegeneinander gehalten wurden auf
   375 × 667 px:

     zweizeilig (Name + botanisch) als Karte   76 px/Zeile  4548 px  5,0 Zeilen/Bild
     einzeilig als Karte                       56 px/Zeile  3548 px  8,7 Zeilen/Bild
     einzeilig mit Trennlinie                  48 px/Zeile  2714 px 11,6 Zeilen/Bild

   Der botanische Name ist das teuerste Element der Liste — er verdoppelt die
   Zeilenhöhe und ist beim Blättern das, was niemand liest. Auf der Artkarte
   ist er eine Identifikation, hier wäre er Ballast; deshalb steht er dort und
   nicht hier. */
.species-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.species-list__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  background: none;
  border: 0;
  text-align: left;
}

.species-list li + li .species-list__row {
  border-top: 1px solid var(--color-border);
}

/* `ellipsis` statt Umbruch: eine umbrechende Zeile macht aus der gleichmäßigen
   Liste einen Stolperstein, und der einzige Name, der überhaupt in die Nähe
   kommt, ist „Madagaskar-Kranzschlinge" (24 Zeichen). Mit dem Bestands-Zeichen
   daneben bleiben ihm 253 px, gebraucht werden rund 200 — gemessen schneidet
   keiner der 50 Namen ab. Die Regel steht trotzdem, weil das Set wächst. */
.species-list__label {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bestands-Zeichen. Bauform aus .plant-card__badge--fertilize übernommen
   (runde Fläche in --color-primary-bg, 12-px-Zeichen in --color-primary), damit
   „ich habe das schon" in der App eine Gestalt hat und nicht zwei.

   Es steht NEBEN der Filterzeile und nicht statt ihrer: der Filter beantwortet
   „zeig mir nur, was mir fehlt", das Zeichen beantwortet „habe ich die hier
   schon?" beim Blättern durch alle. Heikos Entscheidung, gegen meine Messung —
   die galt der Textpille „im Bestand", die bei 26 von 50 Arten auf jeder
   zweiten Zeile stand und dem längsten Namen sein Ende nahm. Das Zeichen kostet
   30 statt 93 px und schneidet nichts ab.

   Keine Legende, und das ist dieselbe Begründung wie beim ⏸ in S54/S68: der
   Filter-Chip „Im Bestand" steht im Klartext unmittelbar über der Liste. Ein
   Legenden-Eintrag wäre die zweite Nennung derselben Sache. */
.species-list__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-bg);
  color: var(--color-primary);
  flex-shrink: 0;
}

.species-list__badge-icon {
  width: 12px;
  height: 12px;
  display: block;
}

.species-list__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* Trefferzahl über der Liste. Tabellenziffern aus demselben Grund wie bei
   .species-search__count: die Zeile darf beim Tippen nicht flattern. */
.species-list__count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-sm);
}

/* Leerlauf eines Filters — kein Fehler, nur nichts drin. Deshalb die gedämpfte
   Fläche von .species-empty und nicht die Bauform von .plants-empty: der
   Katalog ist nie leer, es ist immer nur die gewählte Sicht. */
.species-list__none {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* ─── Artkarte (#74) ───────────────────────────────────────────────────────── */
/* Gemessen an den drei Randfällen des Sets (längster Name, Art ohne Dünger und
   ohne Umtopf-Rhythmus, längste careNote): die Karte trägt in allen dreien auf
   375 × 667 px ohne Scrollen. */
.species-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Kopfzeile wie in jeder anderen Sub-View der App (.legal-view__header,
   .space-detail__header): Zurück-Knopf links, Titel daneben. Der Titel ist hier
   zweizeilig — Volksname über botanischem Namen —, deshalb `align-items:
   flex-start` statt `center`: bei zentrierter Ausrichtung säße der Knopf auf
   Höhe der Lücke zwischen den beiden Zeilen. */
.species-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

/* --font-size-lg und nicht -xl wie in der Pflanzenliste: neben dem Zurück-Knopf
   bleiben auf 375 px noch 237 px, und der längste Name des Sets
   („Madagaskar-Kranzschlinge", 24 Zeichen) bräuchte bei 22 px drei Zeilen. */
.species-card__name {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Der Pflegewerte-Kasten. Schlüssel links gedämpft, Wert rechts gewichtet —
   dieselbe Leserichtung wie die Kennzahlen im Auswertung-Tab. Der Wert darf
   umbrechen (Gießen trägt zwei Angaben), der Schlüssel nicht. */
.species-facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.species-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  font-size: var(--font-size-sm);
}

.species-fact__key {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.species-fact__value {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}