/*
 * Leseansicht des Wikis (docs/wiki.md): Übersicht unter /wissen und Artikelseite /wissen/:slug.
 * Beide laufen in zwei Hüllen — Rolle `user` im Layout „home“, Interviewer und Admins im
 * Backend-Layout — und tragen deshalb dieselben `.home-content`/`.home-section`-Container
 * (app/controllers/area_controller.rb). Hier steht nur, was darin liegt.
 */

/* --- Schwebender Rückweg unten links (Partial knowledge/back_button, Stimulus history-back) --- */

/* Die Seiten tragen keinen Textlink zurück mehr; der Knopf liegt fest im Bild. Unten braucht die
   Seite Luft, sonst deckt er die letzte Zeile ab (gilt in beiden Hüllen, daher hier mit der
   Spezifität von `.application-body > .home-content`). */
.home-content.wiki-page {
  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

.wiki-back {
  position: fixed;
  z-index: 5;
  left: max(var(--space-4), env(safe-area-inset-left));
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  cursor: pointer;
}

.wiki-back__chevron {
  font-size: 2rem;
  line-height: 1;
  /* Das Zeichen sitzt optisch etwas zu tief und zu weit rechts. */
  transform: translate(-1px, -2px);
}

.wiki-back:active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

@media (hover: hover) {
  .wiki-back:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
  }
}

/* --- Breite auf dem Handy ------------------------------------------------------------------- */

/* `.home-content` und `.home-section` sind Grids; Grid-Items haben `min-width: auto` und würden
   sich nach unbrechbarem Inhalt (lange URL, Tabelle, Suchfeld) richten und die Seite seitwärts
   aufweiten. Deshalb hier ausdrücklich auf die Spaltenbreite begrenzen. */
.wiki-article,
.wiki-search-section,
.wiki-article > *,
.wiki-search-section > * {
  min-width: 0;
  max-width: 100%;
}

/* --- Suche: Feld auf der Übersicht, Ergebnisliste unter /wissen/suche (Stimulus wiki-search) --- */

/* Das Feld steht direkt unter der Überschrift „Wissen“; ein eigenes Label trägt es nur für
   Screenreader (aria-label). */
.wiki-search {
  margin: 0 0 var(--space-6);
}

.wiki-search__row {
  display: flex;
  gap: var(--space-2);
}

.wiki-search__row input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
}

.wiki-search__status {
  margin: var(--space-2) 0 0;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.wiki-results {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

.wiki-result {
  min-width: 0; /* Grid-Item, siehe „Breite auf dem Handy“ */
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.wiki-result__topic {
  margin: 0 0 var(--space-1);
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.wiki-result__title {
  margin: 0 0 var(--space-2);
  font-size: 1.05rem;
}

.wiki-result__snippet {
  margin: 0;
  font-size: 0.95rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.wiki-result__snippet mark {
  background: transparent;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* --- Übersicht: Artikel nach Thema ---------------------------------------------------------- */

.wiki-topics {
  display: grid;
  gap: var(--space-6);
}

.wiki-topic {
  display: grid;
  gap: var(--space-3);
}

.wiki-topic__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.wiki-topic__heading h3 {
  margin: 0;
  font-size: 1.05rem;
}

.wiki-topic__count {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.wiki-topic__list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: var(--space-2);
  list-style: none;
}

/* Auf dem Handy wird mit dem Daumen getippt: die ganze Zeile ist die Trefferfläche. */
.wiki-topic__link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
  background: var(--surface);
}

@media (hover: hover) {
  .wiki-topic__link:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
  }
}

/* --- Artikelseite --------------------------------------------------------------------------- */

/* Die Titelzeile (Titel, bei Tab-Leiste die Knöpfe rechts daneben, beides vertikal mittig) klebt
   beim Lesen oben: in der mobilen Hülle direkt unter der Kopfzeile, im Backend am oberen Rand.
   Ihre Höhe misst der Stimulus-Controller wiki-layout (`--wiki-head-height`), damit Anker-Sprünge
   das Ziel darunter freihalten; ohne Messung gilt eine Zeile als Schätzung. */
.wiki-article {
  --wiki-sticky-top: 0px;
  --wiki-head-height: 3.5rem;
}

.home-page .wiki-article {
  --wiki-sticky-top: var(--home-header-height);
}

.wiki-article__head {
  position: sticky;
  top: var(--wiki-sticky-top);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.wiki-article__head h2 {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.wiki-article__meta {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.wiki-article__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-self: start;
}

.wiki-toc {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.wiki-toc > summary {
  color: var(--ink-muted);
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
}

.wiki-toc__list {
  display: grid;
  margin: var(--space-3) 0 0;
  padding: 0;
  gap: var(--space-2);
  list-style: none;
}

.wiki-toc__item--level-3 {
  padding-left: var(--space-4);
}

.wiki-toc__item--level-4,
.wiki-toc__item--level-5,
.wiki-toc__item--level-6 {
  padding-left: var(--space-6);
}

/* --- Artikeltext (Ausgabe von Wiki::Renderer) ----------------------------------------------- */

.wiki-body {
  /* Lesbare Zeilenlänge; der Container ist breiter, damit Tabellen und Code Luft haben. */
  max-width: 70ch;
  /* `anywhere` statt `break-word`: zählt auch bei der Mindestbreite, sonst sprengt eine lange
     URL die Spalte. */
  overflow-wrap: anywhere;
  line-height: 1.65;
}

.wiki-body > :first-child {
  margin-top: 0;
}

.wiki-body > :last-child {
  margin-bottom: 0;
}

/* Der Artikeltitel steht als h2 über dem Text; die Überschriften im Text ordnen sich darunter
   ein. Ein h1 aus dem Markdown wird deshalb wie ein h2 gesetzt. Beim Sprung über einen Anker
   (Inhaltsverzeichnis, `[[#Überschrift]]`) hält der Scroll-Abstand das Ziel unter der klebenden
   Kopfzeile der mobilen Hülle und der klebenden Titelzeile frei (Variablen siehe Artikelseite;
   in der Vorschau des Backends ohne beides nur ein kleiner Abstand). */
.wiki-body :is(h1, h2, h3, h4, h5, h6),
.wiki-rubric,
.wiki-tab {
  scroll-margin-top: calc(var(--wiki-sticky-top, 0px) + var(--wiki-head-height, 0px) + var(--space-3));
}

.wiki-body :is(h1, h2) {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 1.2rem;
}

.wiki-body h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-size: 1.05rem;
}

.wiki-body :is(h4, h5, h6) {
  margin: var(--space-4) 0 var(--space-2);
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.wiki-body p {
  margin: 0 0 var(--space-4);
}

.wiki-body :is(ul, ol) {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.wiki-body li {
  margin-bottom: var(--space-1);
}

.wiki-body li > :is(ul, ol) {
  margin-top: var(--space-1);
}

/* Aufgabenlisten: Das Kästchen ersetzt den Listenpunkt (Klasse setzt Wiki::Renderer). */
.wiki-body li.wiki-task {
  list-style: none;
  margin-left: calc(-1 * var(--space-5));
  padding-left: var(--space-1);
}

.wiki-body input[type="checkbox"] {
  margin-right: var(--space-1);
}

.wiki-body blockquote {
  margin: 0 0 var(--space-4);
  padding: var(--space-1) var(--space-4);
  border-left: 3px solid var(--accent);
  color: var(--ink-muted);
}

.wiki-body :is(code, kbd, samp) {
  padding: 0.1em 0.3em;
  border-radius: var(--radius-s);
  font-size: 0.9em;
  background: var(--accent-soft);
}

.wiki-body pre {
  max-width: 100%;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.wiki-body pre code {
  padding: 0;
  font-size: 0.85rem;
  background: none;
}

/* Breite Tabellen scrollen für sich, damit die Seite auf dem Handy nicht seitwärts läuft. */
.wiki-body table {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 0 var(--space-4);
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.wiki-body :is(th, td) {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  /* In Zellen nur an Leerzeichen umbrechen; zu breite Tabellen scrollen statt Wörter zu zerlegen. */
  overflow-wrap: normal;
}

.wiki-body th {
  background: var(--surface);
}

.wiki-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-m);
}

.wiki-body hr {
  margin: var(--space-6) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Verweis auf einen Artikel, den es (noch) nicht veröffentlicht gibt: sichtbar, aber kein Link. */
.wiki-link--missing {
  color: var(--ink-muted);
  text-decoration: underline dashed;
  text-underline-offset: 0.2em;
  cursor: help;
}

/* Fußnoten stehen am Ende des Textes und sind Beiwerk. */
.wiki-body .footnotes {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.wiki-body .footnotes p {
  margin-bottom: var(--space-2);
}

.wiki-body .footnote-ref a {
  text-decoration: none;
}

/* --- Rückverweise --------------------------------------------------------------------------- */

.wiki-backlinks {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.wiki-backlinks h3 {
  margin: 0 0 var(--space-2);
  color: var(--ink-muted);
  font-size: 0.9rem;
}

.wiki-backlinks ul {
  display: grid;
  margin: 0;
  padding-left: var(--space-5);
  gap: var(--space-1);
}

/* --- Rubriken (Wiki::Page, docs/wiki.md „Seitentypen“) -------------------------------------- */

/* Fließende Darstellung: je Rubrik eine <section> mit der Überschrift als h2 (ID = Schlüssel);
   den Scroll-Abstand beim Sprung dorthin teilt sie mit den Überschriften (siehe Artikeltext). */
.wiki-rubrics > .wiki-rubric:first-child > :first-child {
  margin-top: 0;
}

/* Rubriken, die der Seitentyp nicht (mehr) kennt, stehen am Ende mit dem Schlüssel als Überschrift. */
.wiki-body .wiki-rubric--orphan > .wiki-rubric__heading {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 1rem;
}

/* Aufklapper (`aufklapper` des Seitentyps, h3 oder h4): die Überschrift sitzt in der <summary>, der
   Rest im Body. Nur einer ist offen (`name`). */
.wiki-fold {
  margin: 0 0 var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.wiki-fold__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wiki-fold__summary::-webkit-details-marker {
  display: none;
}

/* Winkel rechts, zeigt zu, nach oben bei offenem Aufklapper. */
.wiki-fold__summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform 120ms ease;
}

.wiki-fold[open] > .wiki-fold__summary::after {
  transform: translateY(0.15rem) rotate(-135deg);
}

.wiki-body .wiki-fold__summary :is(h3, h4) {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.wiki-fold__body {
  padding: 0 var(--space-4) var(--space-3);
}

.wiki-fold__body > :first-child {
  margin-top: 0;
}

.wiki-fold__body > :last-child {
  margin-bottom: 0;
}

/* --- Darstellung Tab-Leiste (Wiki::Page, Partial knowledge/tabbar, Stimulus wiki-layout) ---- */

/* Die Leiste steht in der klebenden Titelzeile rechts neben dem Titel (siehe Artikelseite);
   ein langer Titel bricht in seiner Spalte um, die Leiste bleibt daneben. */
.wiki-tabbar {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-2);
}

/* Quadratische Icon-Knöpfe ohne Beschriftung; die gewählte Rubrik ist hervorgehoben, eine
   Rubrik ohne Text ausgegraut. */
.wiki-tabbar__button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  color: var(--ink);
  cursor: pointer;
  background: var(--surface);
  -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.wiki-tabbar__button svg {
  width: 1.6rem;
  height: 1.6rem;
}

.wiki-tabbar__button[aria-expanded="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.wiki-tabbar__button:disabled {
  color: var(--ink-muted);
  opacity: 0.4;
  cursor: default;
}

.wiki-tabbar__button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

@media (hover: hover) {
  .wiki-tabbar__button:not(:disabled):hover {
    border-color: var(--accent);
  }
}

/* In der Vorschau des Backends steht die Leiste über dem Text statt neben dem Titel. */
.wiki-preview > .wiki-tabbar {
  margin: 0 0 var(--space-4);
}

/* Eine Tafel erscheint erst, wenn ihr Knopf gewählt ist (Stimulus nimmt `hidden` weg); ihren
   Scroll-Abstand teilt sie mit den Überschriften (siehe Artikeltext). Sie beginnt mit der
   Rubrik-Überschrift (h2 wie bei der fließenden Darstellung), damit auch ohne Beschriftung der
   Knöpfe zu sehen ist, welche Rubrik offen ist. */
.wiki-tab[hidden] {
  display: none;
}

.wiki-tab > :first-child {
  margin-top: 0;
}

/* Zwischenüberschriften (h3) in einer Tafel: unterstrichen und mit deutlich Luft zum vorigen Block,
   damit sie zwischen den Aufklappern nicht untergehen. Direkt unter der Rubrik-Überschrift gilt
   der normale Abstand wie bei der fließenden Darstellung. */
.wiki-body .wiki-tab h3 {
  margin-top: var(--space-7);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.wiki-body .wiki-tab > .wiki-rubric__heading + h3 {
  margin-top: var(--space-5);
}

/* Stand-Datum: bei allen Seitentypen ganz unten rechts, läuft mit dem Text. */
.wiki-article__meta--bottom {
  margin: 0;
  text-align: right;
}