/* Die Auswahl im Wunschbuch - Gestaltung zu dem Teil von public/devkonsole.js,
   der entscheidet, WAS in ein Paket kommt.

   WARUM EINE EIGENE DATEI. Die Dev-Konsole hat bis heute kein devkonsole.css;
   die Klassen dk-* der beiden Wunschbuch-Fronten sind ungestaltet. Diese Datei
   zieht das NICHT nach - sie gestaltet ausschliesslich die Auswahl. Der Grund
   ist keine Bequemlichkeit: Ein Stylesheet, das die ganze Konsole uebernimmt,
   waere eine Datei, an der ab morgen drei Fronten gleichzeitig arbeiten, und
   genau daraus ist der Namensstreit dk-/dks- entstanden. Ein enger Zuschnitt
   mit einem eigenen Praefix kollidiert mit niemandem.

   Arbeitet ausschliesslich mit den Werten aus styles.css: Farben ueber
   var(--...), Groessen ueber --fs-*, Abstaende in 4/8/12/16px. Keine neuen
   Farben, keine neuen Schriften.

   DIE EINE ENTSCHEIDUNG, DIE HIER SICHTBAR WIRD

   Eine abgewaehlte Zeile wird BLASSER, nicht durchgestrichen und nicht rot.
   Durchgestrichen hiesse "erledigt", rot hiesse "Fehler" - beides waere eine
   Falschaussage ueber einen Wunsch, der unveraendert offen im Buch steht und
   im naechsten Paket mitfaehrt. Blass heisst genau das, was gemeint ist:
   diesmal nicht.

   Und die Farbe traegt die Aussage nie allein. Ob ein Wunsch mitgeht, steht
   ausserdem im Kaestchen selbst (an/aus, auch fuer eine Sprachausgabe) und in
   der Zaehlzeile darueber, die BEIDE Seiten des Schnitts nennt. Ein blasser
   Text ueberlebt weder Farbenblindheit noch einen Schwarzweissausdruck.

   Geladen in index.html nach styles.css - siehe die Patch-Anweisungen am Ende
   von public/devkonsole.js. */

/* ============================================== Der Kasten mit den Knoepfen */

.dk-auswahl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  margin-bottom: var(--luft-block, 16px);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
}

.dk-auswahl h4 {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-transform: none;
}

.dk-auswahl-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dk-auswahl-knoepfe button {
  padding: 6px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  /* Am Handy wird hier mit dem Daumen getippt: 44px ist die Groesse, unter der
     Fehlgriffe anfangen - und ein Fehlgriff auf "Keine" kostet dreissig
     Klicks. */
  min-height: 44px;
}

.dk-auswahl-knoepfe button:hover {
  border-color: var(--border-strong, var(--border));
}

.dk-auswahl-knoepfe button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Die Zaehlzeile. Sie ist der wichtigste Satz dieses Kastens und darum die
   einzige Stelle hier mit voller Textfarbe. */
.dk-auswahl-zaehler {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-primary);
}

.dk-auswahl-rest {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ================================================ Das Kaestchen in der Zeile */

.dk-auswahl-haken {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  cursor: pointer;
  /* Der Griffbereich reicht ueber die Schriftgroesse hinaus: getroffen werden
     muss das Kaestchen, nicht der Buchstabe daneben. */
  padding: 8px 4px;
}

.dk-auswahl-haken input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Ein Entwurf hat kein Kaestchen, sondern dieses Wort. Ein abgeschalteter
   Haken laedt zum Draufklicken ein und beantwortet die Frage "warum geht das
   nicht" nicht - das Wort beantwortet sie. */
.dk-auswahl-gesperrt {
  display: inline-flex;
  align-items: center;
  padding: 8px 4px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: 6px;
}

/* Abgewaehlt: blasser. Siehe die Begruendung im Kopf. */
.dk-wunschzeile[data-gewaehlt="0"] {
  opacity: 0.55;
}

.dk-wunschzeile[data-gewaehlt="0"]:hover,
.dk-wunschzeile[data-gewaehlt="0"]:focus-within {
  opacity: 1;
}

/* ================================================== Die Vorpruefung */

/* Sie steht mitten im Paketfach und laesst sich nicht wegklicken: Der Text ist
   noch NICHT hinausgegangen, und das soll man sehen. Dieselbe Bauart wie die
   Kundendatenwarnung im Gespraech. */
.dk-vorpruefung {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: var(--radius, 12px);
  font-size: var(--fs-sm);
}

.dk-vorpruefung h4 {
  margin: 0;
  font-size: var(--fs-md);
}

.dk-vorpruefung p {
  margin: 0;
}

.dk-vorpruefung-hart {
  color: var(--warning-ink, var(--text-primary));
  background: color-mix(in srgb, var(--warning) 12%, var(--surface-1));
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--border));
}

.dk-vorpruefung-liste {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dk-vorpruefung-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dk-vorpruefung-knoepfe button {
  padding: 8px 14px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
}

.dk-vorpruefung-knoepfe button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ================================================== Der Umfang ueber dem Knopf */

.dk-paket-umfang {
  margin: 0 0 8px;
  padding: 8px 12px;
  font-size: var(--fs-sm);
  color: var(--text-primary);
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}

.dk-paket-umfang span {
  color: var(--text-muted);
}