/* =================================================================
   Marcel Schreyer – Skill-Seiten
   Wird auf jeder Seite unter tools/ geladen, die einen Skill zum
   Herunterladen anbietet. Farben, Schriften, Knöpfe, Fließtext und
   Fuß kommen aus styles.css, hier steht nur, was der Downloadknopf
   und der Dateibrowser zusätzlich brauchen.
   A Downloadkasten · B Dateibrowser · C Dateiinhalt · D Responsive
   ================================================================= */

/* --- A Downloadkasten --------------------------------------------- */
/* Der Kasten selbst ist .cta-box aus styles.css - Kopf, ein bis zwei
   Sätze, Knopf. Er steht als erster Block unter dem Lead, damit auf den
   ersten Blick zu sehen ist, dass es auf dieser Seite etwas zu holen
   gibt und nicht nur etwas zu lesen. Deshalb hier kein Abstand nach
   oben: den setzt schon der Kopf der Seite. Dieselbe Regel gibt es in
   styles.css für ein Bild als ersten Block im Fließtext. */
.prose > .cta-box:first-child{margin-top:0}

/* Der Knopf ist .btn aus styles.css. Nur die Richtung stimmt dort nicht:
   .btn schiebt seinen Pfeil beim Überfahren nach rechts, weil er sonst
   auf eine andere Seite führt. Hier lädt er eine Datei herunter, der
   Pfeil zeigt nach unten und wandert auch dorthin. */
.btn-laden:hover svg,
.btn-laden:active svg{transform:translateY(3px)}      /* 3px nach unten, so weit wie .btn nach rechts */

/* Die Zeile unter dem Knopf: Format, Größe, Name des entpackten Ordners.
   Kleinschrift, weil sie erst gelesen wird, wenn der Knopf schon
   gefunden ist. 13px ist die Untergrenze für Text. Der Selektor nennt
   .cta-box mit, weil .prose .cta-box > p in styles.css sonst stärker
   wäre und die Zeile auf 15px zurücksetzen würde. */
.prose .cta-box > .skill-datei{
  margin:12px 0 0;max-width:none;                     /* 12px Abstand zum Knopf darüber */
  font-size:.8125rem;line-height:1.5;color:var(--ink-faint);   /* Schriftgröße 13px */
}

/* Der Hinweis auf die Einbau-Anleitung. Sie gilt für jeden Skill und
   steht deshalb einmal auf /tools/ki-skills; hier nur der Link dorthin.
   Abgesetzt durch eine Linie, weil er erst nach dem Herunterladen
   gebraucht wird. Selektor mit .cta-box aus demselben Grund wie oben. */
.prose .cta-box > .skill-hinweis{
  margin:18px 0 0;padding-top:14px;max-width:none;    /* 18px Abstand zur Zeile darüber, 14px von der Linie zum Text */
  border-top:1px solid var(--line);
  font-size:.8125rem;line-height:1.5;color:var(--ink-soft);   /* Schriftgröße 13px */
}

/* --- B Dateibrowser ---------------------------------------------- */
/* Links die Dateien des Pakets, rechts der Inhalt der ausgewählten –
   wie die Skill-Ansicht in Claude. Umgeschaltet wird ausschließlich
   über Radiofelder und :has(), so wie der Modus-Umschalter auf der
   UTM-Seite. Es läuft kein Skript auf dieser Seite.

   Jede Datei steht vollständig im HTML. Greift :has() nicht, stehen
   alle Dateien untereinander in der rechten Spalte und sind
   vollständig lesbar; greift gar kein CSS, stehen sie untereinander
   mit ihren Radiofeldern davor. Beides ist unschön und beides bleibt
   vollständig – das ist die Regel „nichts per JavaScript erzeugen“
   an ihrer empfindlichsten Stelle: der Seiteninhalt darf nicht davon
   abhängen, dass ein Umschalter funktioniert. */
.paket-karte{
  display:grid;
  /* 150px für die Dateiliste, der Rest für den Inhalt. minmax(0,1fr)
     statt 1fr: ohne die Null als Mindestbreite schiebt eine lange
     Zeile im Dateiinhalt die Spalte auf, statt in ihr zu scrollen. */
  grid-template-columns:150px minmax(0,1fr);

  /* Die Karte ist breiter als die Lesespalte. Rechts steht kein Fließtext,
     sondern Code, und der bricht mitten in der Zeile um: Auf der Lesespalte
     von 600px blieben 48 Zeichen je Zeile, auf 760px sind es 66 – so viel wie
     vor der Umstellung der Lesebreite. Auf dieser Seite kostet das nichts,
     hier hängt kein Inhaltsverzeichnis im Rand.
     Die Karte tritt nach beiden Seiten gleich weit heraus. Der negative Rand
     rechnet mit 100%, also mit der Breite der Lesespalte; auf schmalen
     Fenstern wird --paket-w kleiner als sie und der Rand damit null. */
  --paket-w:min(760px, calc(100vw - 2 * var(--gutter)));   /* Breite der Karte */
  width:var(--paket-w);
  margin:24px calc((100% - var(--paket-w)) / 2) 22px;  /* 24px Abstand nach oben, 22px nach unten */

  border:1px solid var(--line);border-radius:var(--radius-l);
  background:var(--surface);
  overflow:hidden;                                    /* hält die Trennlinie in den runden Ecken */
}

.paket-wahl{
  position:relative;                                  /* Bezug für die versteckten Radiofelder */
  grid-column:1;grid-row:1;
  margin:0;padding:12px 0;                            /* 12px oben und unten, seitlich keiner: die Zeilen laufen bis an die Kante */
  border:0;border-right:1px solid var(--line);
}
.paket-wahl input{position:absolute;opacity:0;width:1px;height:1px}

/* Eine Zeile der Dateiliste. Die 2px breite Marke am linken Rand ist
   im Ruhezustand durchsichtig und steht trotzdem schon da – sonst
   rückte der Dateiname beim Auswählen um 2px nach rechts. */
.paket-name{
  display:block;
  padding:8px 14px;                                   /* 8px oben und unten, 14px seitlich */
  border-left:2px solid transparent;                  /* Marke der ausgewählten Zeile, 2px breit */
  font-family:var(--mono);font-size:.8125rem;line-height:1.4;   /* Schriftgröße 13px */
  color:var(--ink-soft);cursor:pointer;
  word-break:break-all;
  transition:color .16s var(--ease), background-color .16s var(--ease);
}
.paket-name:hover{color:var(--ink);background:var(--code-bg)}
.paket-wahl input:checked + .paket-name{
  color:var(--ink);background:var(--code-bg);border-left-color:var(--accent);
}
/* Der Fokusrahmen wandert vom versteckten Radiofeld auf die sichtbare
   Zeile. Nach innen versetzt, weil overflow:hidden an der Karte einen
   Rahmen außerhalb der Zeile abschneiden würde. */
.paket-wahl input:focus-visible + .paket-name{
  outline:2px solid var(--accent);outline-offset:-2px;    /* Rahmen 2px breit, 2px nach innen versetzt */
}

.paket-datei{
  grid-column:2;min-width:0;
  padding:14px 18px 18px;                             /* 14px oben, 18px seitlich und unten */
}
/* Kopfzeile über dem Inhalt: links der Pfad aus .bereich-titel, rechts
   die Zeilenzahl. Gebaut wie die Kopfzeile der Merkliste auf der
   UTM-Seite. Der Pfad sagt in der Fallback-Ansicht, welche Datei man
   gerade vor sich hat; die Zeilenzahl sagt, dass im Kasten darunter
   mehr steht, als hineinpasst. */
.paket-kopf{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;                                           /* 16px zwischen Pfad und Zeilenzahl */
  margin-bottom:10px;                                 /* 10px Abstand zum Dateiinhalt */
}
/* Der Pfad bricht an den Schrägstrichen um - dort stehen <wbr> im HTML.
   break-all wie in der Dateiliste waere hier falsch: der Pfad steht ueber
   der ganzen Spaltenbreite und wuerde mitten im Dateinamen umbrechen. */
.paket-kopf .bereich-titel{margin:0;word-break:normal;overflow-wrap:break-word}
.paket-zeilen{
  flex:none;
  font-family:var(--mono);font-size:.75rem;color:var(--ink-faint);   /* Schriftgröße 12px - Untergrenze */
}

/* Sichtbar ist immer genau eine Datei. Ohne :has() bleiben alle
   sichtbar, siehe Kommentar oben. */
.paket:has(#dateiSkill:checked) .paket-datei,
.paket:has(#dateiAuftraege:checked) .paket-datei,
.paket:has(#dateiReadme:checked) .paket-datei,
.paket:has(#dateiLizenz:checked) .paket-datei{display:none}
.paket:has(#dateiSkill:checked) .paket-datei[data-datei="skill"],
.paket:has(#dateiAuftraege:checked) .paket-datei[data-datei="auftraege"],
.paket:has(#dateiReadme:checked) .paket-datei[data-datei="readme"],
.paket:has(#dateiLizenz:checked) .paket-datei[data-datei="lizenz"]{display:block}

/* --- C Dateiinhalt ----------------------------------------------- */
/* 13px statt der 15px aus .prose pre: hier steht kein Beispiel von
   fünf Zeilen, sondern eine ganze Datei, und die soll als Block
   überschaubar bleiben. 13px ist die Untergrenze für Text, der
   gelesen wird.
   Umbruch statt seitlichem Scrollen: der Kasten ist rund 400px breit,
   die Zeilen im Skill sind länger. Seitlich scrollen hieße, jede
   zweite Zeile zweimal anzufassen. */
.prose .paket-inhalt{
  margin:0;
  max-height:560px;overflow:auto;                     /* Höhe des Kastens höchstens 560px, darin wird gescrollt */
  padding:14px 16px;                                  /* 14px oben und unten, 16px seitlich */
  border-radius:var(--radius-m);background:var(--code-bg);
  font-family:var(--mono);font-size:.8125rem;line-height:1.6;   /* Schriftgröße 13px */
  white-space:pre-wrap;overflow-wrap:break-word;
  color:var(--ink);
}
/* Die Bildlaufleiste steht dauerhaft da, auch auf macOS, wo der Browser
   sie sonst erst beim Scrollen einblendet. Ohne sie sieht der Kasten aus,
   als endete die Datei an seiner Unterkante. */
.prose .paket-inhalt{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.prose .paket-inhalt::-webkit-scrollbar{width:11px}      /* Breite der Bildlaufleiste */
.prose .paket-inhalt::-webkit-scrollbar-track{background:transparent}
.prose .paket-inhalt::-webkit-scrollbar-thumb{
  background:var(--line-strong);border-radius:var(--radius-pill);
  border:3px solid var(--code-bg);                       /* 3px Luft ringsum, in der Farbe des Kastens */
}

/* Ein Kasten, in dem gescrollt wird, muss mit der Tastatur erreichbar
   sein – sonst kommt niemand ohne Maus an das untere Ende der Datei.
   Deshalb tabindex am Element und ein sichtbarer Rahmen dafür. */
.prose .paket-inhalt:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;    /* Rahmen 2px breit, 2px Abstand zum Kasten */
}

/* --- D Responsive ------------------------------------------------ */
@media (max-width:640px){
  /* Aus den beiden Spalten wird eine: die Dateiliste legt sich als
     Reihe über den Inhalt. Die Marke am linken Rand ergibt dort keinen
     Sinn mehr, ausgewählt wird über Fläche und Schriftfarbe. */
  .paket-karte{grid-template-columns:minmax(0,1fr)}
  .paket-wahl{
    grid-column:1;
    display:flex;flex-wrap:wrap;gap:6px;              /* 6px zwischen den Dateinamen */
    padding:12px;                                     /* 12px ringsum */
    border-right:0;border-bottom:1px solid var(--line);
  }
  .paket-name{
    padding:6px 11px;                                 /* 6px oben und unten, 11px seitlich */
    border:1px solid var(--line);border-radius:var(--radius-pill);
    word-break:normal;
  }
  .paket-wahl input:checked + .paket-name{border-color:var(--ink-faint)}
  .paket-datei{grid-column:1;padding:14px 14px 16px}  /* 14px oben und seitlich, 16px unten */
  /* Nebeneinander reicht der Platz nicht: der Pfad bekaeme drei Zeichen je
     Zeile. Die Zeilenzahl rutscht deshalb unter den Pfad. */
  .paket-kopf{display:block}
  .paket-zeilen{display:block;margin-top:3px}         /* 3px Abstand zum Pfad darüber */
  .prose .paket-inhalt{max-height:420px}              /* Höhe des Kastens höchstens 420px */
}