/* ============================================================
   Die KI-Werkzeuge in der Verwaltung eines Datenraums
   (views/admin/room.ejs, Karte „#ki")

   Die Einzelschalter hängen vom übergeordneten Schalter ab. Diese Abhängigkeit
   steht zuerst im Text — die Einrückung und das Ausgrauen sind nur die
   optische Zugabe. Ohne Javascript bleibt alles bedienbar und lesbar.
   ============================================================ */

/* Abhängige Gruppe: eingerückt, mit durchgehender Linie am linken Rand. */
.ki-group {
  margin: 6px 0 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--soft);
}

.ki-group > h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--grey);
  font-weight: 600;
  margin: 14px 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Erläuterung der Abhängigkeit und Hinweis bei abgeschalteter Freigabe. */
.ki-group > .ki-depends {
  margin: 0 0 4px;
}

/* Javascript graut die Gruppe zusätzlich aus, wenn die Freigabe oben aus ist.
   Die Schalter bleiben bedienbar und werden weiterhin mitgespeichert — sonst
   ginge die Einstellung beim Speichern verloren. */
.ki-group.ki-dim {
  opacity: .55;
}

/* Der Werkzeugname bleibt fett, die Erläuterung darunter tritt zurück. */
.ki-group .toggle .toggle-label b {
  font-weight: 600;
}

/* Warnhinweis unmittelbar am Schalter (Webrecherche der Umfeldanalyse).
   Er steht als dritte Zeile unter der Erläuterung, farblich abgesetzt und mit
   einer Leiste links — derselbe Wortlaut wie auf der Werkzeugseite. Kein
   eigener Kasten: Der Hinweis gehört zu genau diesem einen Schalter. */
.ki-group .toggle .toggle-label small.ki-warn {
  display: block;
  margin-top: 6px;
  padding-left: 9px;
  border-left: 3px solid var(--red-soft);
  color: var(--ink);
  max-width: 68ch;
}

/* Kopfzeile der Karte: Titel und Zustandsmerker dürfen umbrechen, damit auf
   schmalen Geräten nichts seitlich hinausläuft. */
.ki-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

/* Auf schmalen Geräten steht der Schalter unter der Beschriftung; nebeneinander
   bliebe für den Text keine lesbare Breite. */
@media (max-width: 560px) {
  .ki-group {
    padding-left: 10px;
  }
  .ki-group .toggle {
    flex-wrap: wrap;
    gap: 10px;
  }
  .ki-group .toggle .toggle-label {
    flex: 1 1 100%;
  }
}