/**
 * hilfe.css — Modul-CSS der App-Hilfe (#681)
 *
 * Additiv nach §7: Spaltenbreiten des Listen-Grids, Baum-Einrückung, die
 * Pillen-Farben pro `[data-*]` und die Subline-Marker. Alle Werte über Tokens.
 *
 * Die ANZEIGE der Hilfe stylt diese Datei NICHT. Die wohnt im Service-Panel
 * (`_shared/blocks/app-service-panel/idf-service-hilfe.css`) und lädt auf jeder
 * Seite; hier geht es allein um die Redaktionsliste.
 *
 * Lag bis #681 als Block in `guide/guide.css`, als die Hilfe noch ein
 * Guide-Reiter war. Beim Umzug haben die Klassen ihren `guide-`-Prefix
 * verloren — ein Modul, dessen CSS nach einem anderen Modul heißt, ist genau
 * die Sorte Rest, die später niemand mehr zuordnet.
 */

/* ================================================================== */
/* Listen-Grid                                                        */
/* ================================================================== */

/* Griff · Thema · App · Status · Reihenfolge · Löschen.
   Breiten aus der CSS-Variable (col-resize-Baustein); Fallback = Defaults.
   Sechs Spuren, weil die Zeile sechs sichtbare Zellen hat — die Zahl muss an
   drei Stellen zusammenpassen: hier, im `thead` und in `colResizeColumns`. */
.hilfe-grid {
  display: grid;
  grid-template-columns: var(--hilfe-cols, 28px minmax(260px, 1fr) 170px 130px 110px 44px);
}

/* Die App als neutrale Pille, der Status in der Lebenszyklus-Rampe. Gleiche
   Werte wie Konventionen und Design-Regeln im Guide: derselbe Lebenszyklus
   verdient dieselben Farben, auch über Modulgrenzen hinweg. */
.hilfe-modul-pill { background: var(--tint-neutral); color: var(--neutral-mid); }
.hilfe-status-pill[data-status="aktiv"]    { background: var(--tint-green);   color: var(--green-text); }
.hilfe-status-pill[data-status="entwurf"]  { background: var(--tint-yellow);  color: var(--yellow-text); }
.hilfe-status-pill[data-status="veraltet"] { background: var(--tint-neutral); color: var(--neutral-mid); }

/* ================================================================== */
/* Titel-Zelle (der Baum selbst kommt aus dem Shared-Baustein)         */
/* ================================================================== */

/* Die LINIEN stehen in `_shared/functions/list-view/tree/idf-list-tree.css`
   und nirgends sonst (#701). Dieses Modul steuert nur bei, was seine Zelle
   ausmacht: sie ist eine ZEILE aus Connector und Titel-Stapel, der Stapel
   trägt die zwei Textzeilen. Muster `al-cell-titel` / `al-titel-stack`.

   Bewusst NICHT die Shared-Klasse `idf-list-cell-two-line`: die macht die
   ganze Zelle zur Spalte. Ein Connector darin steht entweder über dem Titel
   oder — wie bis v0.2.0 — eine Ebene tiefer in der ersten Textzeile. Dann
   spannt `align-self: stretch` nur über diese eine Zeile, der Überstand
   erreicht den Zeilenrand nicht mehr, sobald eine Subline dazukommt, und die
   Gruppen-Linie zerfällt in einzelne Häkchen. Gemessen am 23.08.2026:
   Connector 44 px hoch in einer 88 px hohen Zeile, Linienende 19 px vor der
   Zeilenkante. */
.hilfe-cell-titel {
  display: flex;
  align-items: center;
  min-width: 0;
}
.hilfe-titel-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

/* ================================================================== */
/* Subline + Formular                                                 */
/* ================================================================== */

/* Wohin das Thema zeigt (Seite, Anker) und ob es schon Text hat. „Ohne Text"
   ist der eine Zustand, der eine Farbe verdient — er ist der Grund, warum man
   diese Liste überhaupt durchgeht. */
.hilfe-marker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: var(--space-3, 12px);
  font-variant-numeric: tabular-nums;
}
.hilfe-marker.is-leer { color: var(--orange); }

/* Beschriftung über einem Mount-Punkt im Modal: der Markdown-Editor ist ein
   Widget, kein <input>, und hängt deshalb nicht in einem <label> — ein label
   um eine Toolbar herum finge jeden Button-Klick als Feld-Fokus ab. */
.hilfe-inhalt-label {
  display: block;
  margin-bottom: var(--space-2, 8px);
}

/* ================================================================== */
/* Responsive — Kanon 1100                                            */
/* ================================================================== */

@media (max-width: 1100px) {
  /* Es bleiben Thema, Status und Löschen. Die App steht als Filter in der
     Leiste, die Reihenfolge ist Redaktions-Detail — und Ziehen ist eine
     Geste für Maus und Tastatur, nicht für 375 px. Drei SICHTBARE Zellen,
     also drei Spuren, nicht sechs. */
  .hilfe-grid { grid-template-columns: minmax(200px, 1fr) 130px 44px; }
  .hilfe-grid > .hilfe-cell-drag,
  .hilfe-grid > .hilfe-cell-modul,
  .hilfe-grid > .hilfe-cell-sort,
  #hilfe-thead .hilfe-grid > div:nth-child(1),
  #hilfe-thead .hilfe-grid > div:nth-child(3),
  #hilfe-thead .hilfe-grid > div:nth-child(5) { display: none; }
  /* Die Baum-Linien blendet der Shared-Baustein selbst aus (idf-list-tree.css,
     derselbe Breakpoint) — hier steht dazu nichts mehr. */
  /* col-resize im Schmal-Layout inaktiv (das Modul-Grid gewinnt hier):
     Griffe weg, Scroll-Modus neutralisieren. */
  #hilfe-thead .idf-colresize-layer { display: none; }
  .idf-colresize-scroll #hilfe-thead,
  .idf-colresize-scroll #hilfe-rows { width: auto; min-width: 0; }
}