/* Was Expertus über das Design-System hinaus braucht.
   Alles Allgemeine — Variablen, Reset, Fokus, Formularelemente, Karten —
   kommt aus /assets/designsystem.css. */

/* Mindestens 24x24 CSS-Pixel Zielfläche (WCAG 2.2 SC 2.5.8). Das
   Design-System deckt das schon für Eingabefelder ab (input, select,
   textarea), für seine eigene .btn-Klasse und für die Vorschlagseinträge
   der Combobox (.combobox-liste .option); Expertus baut seine übrigen
   Knöpfe aber noch ohne .btn (siehe plot-list.js, plot-form.js,
   result.js), deshalb bleibt hier eine eigene Regel dafür. */
button {
  min-height: 2.75rem;
  font: inherit;
}

/* Der bisherige Name bleibt in Gebrauch; das Design-System nennt die
   Klasse .sr-only. Beide zeigen auf dasselbe, bis die Aufrufe umgestellt
   sind. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Warnender Nebentext — etwa eine verweigerte Standortfreigabe oder ein
   unaufgelöster Artname. */
.warn {
  color: var(--warning);
  font-weight: 600;
}

/* Lange Artnamen und Plot-Kennungen dürfen ihre Spalte nicht sprengen.
   overflow-wrap bricht sie am Wortende um.

   Früher stand hier zusätzlich table-layout: fixed, damit bei 200 %
   Textgröße nichts über die Breite wächst. Die Absicht war richtig, die
   Wirkung auf einem Telefon nicht: feste Spaltenbreiten teilen 361 Pixel
   unter sechs Spalten auf, und dann bricht der Umbruch mitten durchs Wort
   ("Koor/dinat/e", "ausge/werte/t") und Knöpfe wachsen aus der Karte
   heraus. Stattdessen stapeln die Tabellen sich jetzt unterhalb von 40rem
   zu Blöcken — .table-stack aus dem Design-System. */
th,
td {
  overflow-wrap: break-word;
}

/* --- Hauptnavigation --- */

/* Sitzt als eigenständiges Element neben dem Kopf, nicht darin: Kopfzeile()
   aus dem Design-System liefert ein geschlossenes <header>, in das sich
   die Navigation nicht mehr einfügen ließe. Der Abstand nach unten ersetzt
   den, den ein <header> mit Navigation als Flex-Kind sonst durch dessen
   eigenen gap bekäme. */
nav[aria-label='Hauptnavigation'] {
  margin-bottom: 1.5rem;
}

/* --- Herkunftsangabe --- */

/* Eigener Absatz statt eines Verweises in FussDaten: die Angabe ist
   Fließtext, kein Link mit echtem Ziel — siehe die Begründung bei fuss()
   in internal/server/server.go. */
.quelle {
  margin-top: 2rem;
}

/* --- Bedienleiste der Übersicht --- */

/* Suche, Filter und der Knopf zum Anlegen stehen nebeneinander, solange
   Platz ist, und untereinander, sobald nicht. */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
}

.toolbar .form-group {
  margin-bottom: 0;
}

/* --- Listen auf Telefonbreite --- */

/* .table-stack aus dem Design-System macht aus jeder Zelle eine eigene
   Zeile mit Beschriftung. Für eine Tabelle mit wenigen Zeilen ist das
   richtig; für Listen, die im Gelände lang werden, ist es zu geschwätzig:
   die Artenliste brauchte so 175 Pixel je Art, bei zwölf Arten 1155.
   Beide Listen bekommen deshalb ein eigenes, dichteres Raster. */

@media (max-width: 40rem) {
  /* Ein Kopfdatum ist zwei Zeilen: Beschriftung und Feld nebeneinander,
     die Herkunft klein darunter.

     Gestapelt stand hier je Feld vier Zeilen — "Land", "Wert", das Feld,
     "Herkunft" —, wobei "Wert" und "Herkunft" nichts sagen, was die
     Stellung nicht schon zeigt. Auf dem Desktop war das längst gelöst,
     mobil nicht. */
  .kopf-liste tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-areas:
      "feld     wert"
      "herkunft herkunft";
    align-items: center;
    gap: 0.125rem 0.75rem;
    padding: 0.5rem 0;
  }

  .kopf-liste tbody th,
  .kopf-liste tbody td {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  /* Die Vorspänne aus data-label entfallen: In dieser Anordnung ist aus
     der Stellung ablesbar, was Beschriftung, Wert und Herkunft ist. */
  .kopf-liste tbody td::before {
    content: none;
  }

  .kopf-liste tbody th[scope="row"] { grid-area: feld; }
  .kopf-liste tbody td:nth-of-type(1) { grid-area: wert; }
  .kopf-liste tbody td:nth-of-type(2) {
    grid-area: herkunft;
    font-size: 0.8125rem;
  }

  /* Eine Art ist eine Zeile: Name, Deckung, Entfernen. */
  .arten-liste tbody tr {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
  }

  /* Der Artname ist das, was man liest — eine Spur größer als der Rest
     und nicht in der Grundschriftgröße untergehend. */
  .arten-liste tbody td:first-child {
    font-size: 1.0625rem;
  }

  .arten-liste tbody td {
    display: block;
    padding: 0;
  }

  /* Die Beschriftungen aus data-label entfallen: in einer einzeiligen
     Darstellung ist die Spalte aus der Stellung ablesbar, und dreimal
     "Art / Deckung" je Zeile wäre nur Rauschen. Für Hilfsmittel bleibt
     die Tabellensemantik samt Kopfzeile erhalten. */
  .arten-liste tbody td::before {
    content: none;
  }

  /* Ein Plot ist zwei Zeilen: Kennung und Ergebnis nebeneinander, das
     Datum darunter. */
  .plot-liste tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "kennung ergebnis"
      "datum   datum";
    gap: 0.125rem 0.75rem;
    padding: 0.625rem 0;
  }

  .plot-liste tbody td {
    display: block;
    padding: 0;
  }

  .plot-liste tbody td::before {
    content: none;
  }

  .plot-liste tbody td:nth-child(1) { grid-area: kennung; }
  .plot-liste tbody td:nth-child(2) { grid-area: datum; font-size: 0.875rem; color: var(--text-muted); }
  .plot-liste tbody td:nth-child(3) { grid-area: ergebnis; }
}

/* Die Herkunft einer Art — aus Vorschlag oder von Hand — als Zeichen am
   Namen statt als eigene Spalte. */
.herkunft {
  margin-left: 0.125rem;
  cursor: help;
}

/* --- Zuklappbare Abschnitte der Maske --- */

/* Standort und Kopfdaten sind einmal auszufüllen und danach selten wieder
   nötig. Als <details> treten sie zurück, ohne zu verschwinden.

   Rahmen, abgesetzte Kopfzeile und die Drehung des Chevrons kommen aus
   .akkordeon im Design-System — dasselbe Aussehen wie in Ortus. Hier steht
   nur, was Expertus zusätzlich braucht: Titel und Kurzfassung untereinander
   statt nebeneinander. */
.abschnitt-kopf {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.abschnitt-titel {
  margin: 0;
  font-size: 1rem;
}

.abschnitt-zusammenfassung {
  font-size: 0.875rem;
  font-weight: 400;
}

.abschnitt-inhalt {
  padding: 1rem 1.25rem 1.25rem;
}

/* --- Auswerten-Leiste --- */

/* Während der Erfassung wird oft ausgewertet, um zu sehen, ob schon etwas
   trifft. Bei zwanzig Arten läge der Knopf sonst jedes Mal eine halbe
   Bildschirmhöhe entfernt, also bleibt die Leiste beim Rollen stehen.

   position: sticky statt fixed: die Leiste bleibt Teil des Textflusses und
   verdeckt nichts, wenn die Seite kürzer ist als der Bildschirm. */
.auswerten-leiste {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 0;
  /* Ohne eigene Fläche scheint der Text darunter durch. */
  background: var(--card);
}

/* Der Knopf schrumpft nicht, der Ergebnistext darf umbrechen. */
.auswerten-leiste > .btn {
  flex: 0 0 auto;
}

.auswerten-leiste > p {
  margin: 0;
}

/* --- Deckungseingabe --- */

/* Minus, Zahlenfeld, Plus in einer Reihe. Die Knöpfe springen auf die
   nächste übliche Schätzstufe; das Feld bleibt frei beschreibbar. */
.deckungsspinner,
.deckungsklasse-feld {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.deckung-einheit,
.deckung-ohne-klasse {
  font-size: 0.875rem;
  white-space: nowrap;
}

.deckungsspinner .deckungsprozent {
  /* Breit genug für "37,5", schmal genug, damit Knöpfe und Feld in eine
     Zeile der Artenliste passen. */
  width: 4.5rem;
  text-align: right;
}

/* Die Klassenauswahl trägt jetzt den Prozentwert im Eintrag ("2 (~15 %)")
   und braucht dafür mehr Platz als für den bloßen Code. */
.deckungsklasse {
  min-width: 8rem;
}

@media (max-width: 40rem) {
  /* In der dichten Artenzeile hat die Deckung nur so viel Platz, wie Name
     und Entfernen-Knopf übrig lassen. */
  .deckungsklasse {
    min-width: 0;
  }

  .deckungsspinner .deckungsprozent {
    width: 3.5rem;
  }
}

/* Auf sehr schmalen Geräten bleibt neben Deckungsfeld und Entfernen-Knopf
   so wenig übrig, dass selbst "Carex arenaria" umbricht. Dann stehen Name
   und Bedienelemente untereinander: eine Zeile mehr, aber der Name in
   einem Stück und größer lesbar.

   Die Schwelle liegt bei 24rem (384 px) und trennt damit genau die beiden
   Geräte, um die es geht: ein iPhone SE misst 375 Pixel und bekommt die
   zweizeilige Form, ein iPhone 14 Pro misst 393 und behält die einzeilige,
   in der die Liste kompakter bleibt. */
@media (max-width: 24rem) {
  .arten-liste tbody tr {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name name"
      "deckung entfernen";
    gap: 0.375rem 0.5rem;
    padding: 0.5rem 0;
  }

  .arten-liste tbody td:nth-child(1) { grid-area: name; }
  .arten-liste tbody td:nth-child(2) { grid-area: deckung; }
  .arten-liste tbody td:nth-child(3) { grid-area: entfernen; justify-self: end; }

  /* Die Klassenauswahl darf die Breite nutzen, die der Name freigibt. */
  .arten-liste .deckungsklasse {
    width: 100%;
  }
}

/* --- Artensuche --- */

/* Feld und Übernehmen-Knopf. Ohne eigene Regel stapelten sie sich ohne
   Abstand: der Knopf klebte am Feld und stand links, wo er wie ein
   abgerutschter Teil davon aussah.

   Auf breiten Schirmen stehen beide nebeneinander, auf schmalen bricht
   der Knopf um — dann rechtsbündig, wo der Daumen ist und wo ein
   abschließender Knopf hingehört. */
.art-eingabe {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

/* Das Feld nimmt den Platz, der bleibt, und behält eine Mindestbreite,
   unter der ein Artname nicht mehr zu lesen wäre. */
.art-eingabe > input {
  flex: 1 1 12rem;
  min-width: 0;
}

.art-uebernehmen {
  flex: 0 0 auto;
}