/**
 * idf-service-hilfe - Optik des Hilfe-Inhalts im Service-Panel (#660 T2)
 *
 * JS: `idf-service-hilfe.js` im selben Ordner.
 * Voraussetzung: `_shared/tokens/design-tokens/idf-tokens.css` ist vorher geladen.
 *
 * Nur der Inhalt, nicht die Schiene. Breite, Zustand und `body`-Padding gehoeren
 * der Huelle (`idf-app-service-panel.css`).
 *
 * Der Kopf hat bewusst dieselbe Geometrie wie der des Agenten
 * (`.idf-toni-head`: 76 px hoch, `--space-4` Innenabstand, Trennlinie unten):
 * beide sind derselbe Balken derselben Schiene, und ein Wechsel zwischen
 * ihnen darf nicht springen. Er ist NICHT dieselbe Klasse, weil der Agent
 * einen 48-px-Avatar traegt und die Hilfe einen Zurueck-Knopf - gleiche Huelle,
 * andere Fracht.
 */

/* === Kopf ================================================================= */

.idf-hilfe-head {
  display: flex;
  align-items: center;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  border-bottom: 1px solid var(--line, #e5e5e5);
  min-height: 76px;
  flex-shrink: 0;
}

.idf-hilfe-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: var(--leading-snug, 1.2);
}
.idf-hilfe-title strong {
  font-size: var(--font-base, 1rem);
  font-weight: var(--weight-bold, 700);
  color: var(--ink, #111111);
  /* Ein langer Themen-Titel darf den Einklapp-Knopf nicht aus dem Panel
     schieben - er ist der einzige Weg wieder heraus. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.idf-hilfe-title span {
  margin-top: 2px;
  font-size: var(--font-md, 0.875rem);
  color: var(--mid, #555555);
}

.idf-hilfe-back,
.idf-hilfe-collapse {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs, 3px);
  background: transparent;
  color: var(--mid, #555555);
  cursor: pointer;
  transition: color var(--motion-base, 120ms), background var(--motion-base, 120ms);
}
/* Wie beim Agenten (.idf-toni-collapse): nur die Farbe wechselt. Ein
   Hintergrund waere hier ein zweites Hover-Vokabular im selben Balken. */
.idf-hilfe-back:hover,
.idf-hilfe-collapse:hover {
  color: var(--ink, #111111);
}
.idf-hilfe-back[hidden] { display: none; }

/* === Koerper ============================================================== */

.idf-hilfe-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-4, 16px);
}
/* Der Koerper ist per tabindex fokussierbar, damit die Tastatur nach dem
   Oeffnen im Panel landet. Ein Fokus-Ring um die ganze Flaeche waere dabei
   Laerm - die Umrandung sagt nichts, was der Inhalt nicht schon sagt. */
.idf-hilfe-body:focus { outline: none; }

/* === Inhaltsverzeichnis =================================================== */

.idf-hilfe-toc {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Untere Ebenen ruecken ein und tragen die Linie ihrer Gruppe. Zwei Ebenen
   sind hier genug: was tiefer liegt, findet man ueber das Thema darueber. */
.idf-hilfe-toc.is-sub {
  margin: 2px 0 var(--space-2, 8px) var(--space-3, 12px);
  padding-left: var(--space-3, 12px);
  border-left: 1px solid var(--line, #e5e5e5);
}

.idf-hilfe-toc-item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  width: 100%;
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 0;
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: var(--ink, #111111);
  font-size: var(--font-md, 0.875rem);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-base, 120ms), color var(--motion-base, 120ms);
}
/* Der Wirt ist weiss; --bg (#fafafa) waere darauf kaum ein Sprung. Eine Zeile,
   die man anklickt, muss beim Ueberfahren erkennbar antworten. */
.idf-hilfe-toc-item:hover {
  background: var(--neutral-bg, #f0f1f3);
}
.idf-hilfe-toc-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* „Hier" markiert das Thema, das zur gerade offenen Seite gehoert. Es ist der
   Grund, warum das Panel beim Oeffnen genau dort steht - ohne die Marke sieht
   man im Inhaltsverzeichnis nicht, wo man gerade war. */
.idf-hilfe-hier-pill {
  flex: 0 0 auto;
  padding: 1px var(--space-2, 8px);
  border-radius: var(--radius-pill, 999px);
  background: var(--tint-accent);
  color: var(--accent);
  font-size: var(--font-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
}

/* === Thema ================================================================ */

/* Der Text kommt aus IDF.markdown.renderInto und traegt dessen Klasse
   .idf-markdown-preview. Die Typografie steht dort (blocks/markdown), hier nur
   der Abstand zum Rest des Panels - Markdown-Fliesstext zweimal zu stylen
   waere genau die Doppelpflege, gegen die der Baustein antritt. */
.idf-hilfe-text {
  font-size: var(--font-md, 0.875rem);
  color: var(--ink, #111111);
}
/* Fallback, wenn marked.js nicht geladen werden konnte: der Rohtext behaelt
   wenigstens seine Absaetze. Besser eine unformatierte Hilfe als keine. */
.idf-hilfe-text.is-roh {
  white-space: pre-wrap;
}

.idf-hilfe-weiter {
  margin-top: var(--space-5, 20px);
  padding-top: var(--space-4, 16px);
  border-top: 1px solid var(--line, #e5e5e5);
}
.idf-hilfe-weiter-label {
  margin-bottom: var(--space-2, 8px);
  font-size: var(--font-xs, 0.75rem);
  font-weight: var(--weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--soft, #999999);
}
/* Direkt unter der Beschriftung braucht die erste Ebene keinen zweiten
   Einzug - sie IST hier die oberste. */
.idf-hilfe-weiter .idf-hilfe-toc.is-sub {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

/* === Zustaende ============================================================ */

.idf-hilfe-info {
  padding: var(--space-6, 24px) var(--space-4, 16px);
  text-align: center;
  color: var(--mid, #555555);
  font-size: var(--font-md, 0.875rem);
}
.idf-hilfe-info > i {
  display: block;
  margin-bottom: var(--space-3, 12px);
  font-size: var(--font-xl, 1.25rem);
  color: var(--soft, #999999);
}
.idf-hilfe-info p { margin: 0 0 var(--space-3, 12px); }
.idf-hilfe-info-sub {
  font-size: var(--font-xs, 0.75rem);
  color: var(--soft, #999999);
}
.idf-hilfe-info.is-fehler > i { color: var(--orange); }