/* plant-id.css – „Art erkennen" im Formular und Bildcheck (S145, Backlog #58 b)
   Die Werte des Bildchecks stammen aus Fassung A des Mockups „Soaria Bildcheck"
   (S144), das mit dem unveränderten base.css im 375-px-Rahmen gebaut war. */

/* Knopf und Statuszeile unter dem Foto. */
/* Seit S162 (#212, Heiko nach dem Gerätegang) steht der Hinweis „Dafür zuerst
   ein Foto wählen." rechts neben dem Knopf statt darunter. Gemessen: auf 375 px
   eine Zeile mit 23 px Luft, auf 320 px bricht er wie zuvor unter den Knopf um
   (deutsch; englisch passt auch dort). Die Statuszeile behält ihre eigene
   Zeile. */
.plant-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
}

.plant-id__status {
  flex-basis: 100%;
}

/* ─── Bildcheck ─────────────────────────────────────────────────────────── */

/* Scrollt im Dialog, die Knöpfe bleiben stehen (sticky unten): auf dem SE sind
   drei Vorschläge mit Bildleiste höher als der Schirm (Mockup: 92–413 px
   Scrollweg je nach Fall). */
.dialog.species-check {
  max-height: calc(100dvh - 2 * var(--space-md));
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Titelgröße wie jeder Dialog (18 px). Neben dem 64-px-Foto stehen auf 375 px
   239 px; „Welche sieht aus wie deine?" brauchte fett 250 und brach um. S146
   zuerst mit 16 px gelöst — Heiko am Gerät: der Titel trug dann zu wenig. Jetzt
   ist der Satz kürzer („Welche ist deine?") und die Größe wieder die übliche.
   balance, damit ein Umbruch auf noch schmaleren Schirmen nicht ein Wort allein
   stehen lässt. */
.species-check .dialog__title {
  margin: 0;
  text-wrap: balance;
}

.species-check__head {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.species-check__own {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

/* Zoom-Knöpfe um das eigene Foto und die Vergleichsbilder (S146, Schnitt 4):
   exakt in den Maßen des Bildes, ohne Polster — die aktive Fläche deckt sich
   mit der sichtbaren (UI-Konventionen → Foto-Großansicht). */
.species-check__zoom {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
}

.species-check__own-zoom { flex-shrink: 0; }

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

.species-check__lead {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.species-check__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Seit S146 ein Behälter und kein Knopf mehr: darin der Auswahlknopf
   (.species-check__pick) und die Zoom-Knöpfe der Bilder. Ein Tipp auf die
   übrige Fläche wählt über den Klick-Listener am Behälter aus. */
.species-check__cand {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.species-check__cand--selected {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  background: var(--color-primary-bg);
}

/* Der Auswahlknopf trägt Name, botanischen Namen und Status und sonst nichts —
   flach, die Fläche gehört dem Behälter. */
.species-check__pick {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

/* Fokusring um die ganze Karte, wo der Browser :has() kennt; sonst am Knopf
   selbst — schmaler, aber nie unsichtbar. */
.species-check__pick:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@supports selector(:has(*)) {
  .species-check__pick:focus-visible { outline: none; }
  .species-check__cand:has(> .species-check__pick:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

.species-check__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
  align-items: baseline;
}

.species-check__name { font-weight: 600; }

.species-check__botanical {
  font-style: italic;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.species-check__chip {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-warning-bg);
  color: var(--color-warning);
  white-space: nowrap;
}

.species-check__status { font-size: var(--font-size-sm); }
.species-check__status--listed { color: var(--color-primary); }
.species-check__status--free { color: var(--color-warning); }

.species-check__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.species-check__thumbs img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
  background: var(--color-surface-alt);
}

.species-check__note {
  font-size: var(--font-size-sm);
  color: var(--color-warning);
}

/* 11 px, eine Zeile je Vorschlag — am Mockup für lesbar genug befunden (S144). */
.species-check__credit {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.3;
}

/* Linie über den Knöpfen, über die volle Dialogbreite (S146, Heiko): ohne sie
   schnitt die klebende Leiste den Bildnachweis darunter einfach ab, und das sah
   nach Fehler aus statt nach „scrollt weiter". Abstand Linie–Knöpfe gleich
   Knöpfe–Dialogrand (beide --space-md), so Heikos Vorgabe. Die negativen
   Seitenränder ziehen die Linie in das Polster des Dialogs, das Polster hier
   holt die Knöpfe auf ihre alte Breite zurück. */
.species-check__actions {
  position: sticky;
  bottom: calc(-1 * var(--space-md));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-md);
  margin: 0 calc(-1 * var(--space-md)) calc(-1 * var(--space-md));
}