/* Chat Tower Companion -- pages/glossar.css
 * P6-Kette Glied 6/8 (web-241). Reine Verschiebung aus web/public/style.css.
 * Scope: /glossar (Begriffs-Nachschlagewerk aus Glossar.md), ui-397 Glossar
 * mobil, das zweite ui-398-Mobile-Nachlese-Fragment (.glossar-anchor
 * Touch-Sichtbarkeit).
 *
 * KASKADEN-LOCK: MUSS ALS LETZTE pages/*.css-Datei laden -- #glossar-search
 * min-height wird hier nach pages/shared-mobile.css's generischem
 * 44px-Touch-Fix nochmal spezifischer gesetzt (44px-Breiten-Regel gewinnt
 * bewusst per spaeterer Datei-Position, s. web-241-Ticket Cross-File-
 * Sweep). */


/* =====================================================================
 * Glossar (/glossar) — lebt von Glossar.md im Repo-Root, server-rendered
 * via web/src/views/glossar.js. Eigene .glossar-* Klassen, weil das
 * Layout enger und text-zentriert ist als Dashboard/Help.
 * ===================================================================== */
.glossar-page {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
.glossar-header h1 {
  margin: 0 0 8px;
  color: var(--cyan);
  font-size: 28px;
  letter-spacing: 0.5px;
}
.glossar-lead {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.glossar-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 28px;
  position: sticky;
  /* ui-388 (viewport-fit=cover): sticky klebt am Viewport-Top — dort liegt
     y=0 jetzt HINTER Notch/Statusbar, deshalb um den Top-Inset versetzen.
     Desktop/Nicht-Notch: env() = 0 → wie top:0. */
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
}
.glossar-search-label {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
#glossar-search {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
#glossar-search:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 8px rgba(56, 225, 255, 0.25);
}
.glossar-search-count {
  color: var(--muted);
  font-size: 12px;
  min-width: 80px;
  text-align: right;
}
.glossar-content {
  line-height: 1.55;
}
.glossar-heading {
  position: relative;
  scroll-margin-top: 80px;
}
.glossar-h1 { color: var(--cyan); font-size: 26px; margin: 40px 0 12px; }
.glossar-h2 { color: var(--magenta); font-size: 22px; margin: 36px 0 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.glossar-h3 { color: var(--yellow); font-size: 18px; margin: 28px 0 8px; }
.glossar-h4 { color: var(--cyan); font-size: 15px; margin: 20px 0 6px; opacity: 0.85; }
.glossar-anchor {
  color: var(--muted);
  opacity: 0;
  margin-right: 6px;
  text-decoration: none;
  font-weight: normal;
  transition: opacity 0.15s;
}
.glossar-heading:hover .glossar-anchor { opacity: 1; }
.glossar-content p { margin: 8px 0 12px; }
.glossar-content strong { color: var(--text); }
.glossar-content em { color: var(--muted); font-style: italic; }
.glossar-list, .glossar-questions {
  padding-left: 22px;
  margin: 8px 0 16px;
}
.glossar-entry {
  margin: 6px 0;
  scroll-margin-top: 80px;
}
.glossar-entry strong:first-child {
  color: var(--cyan);
}
.glossar-entry-soft {
  margin: 4px 0;
  color: var(--text);
}
.glossar-question {
  margin: 10px 0;
  padding-left: 4px;
}
.glossar-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0 20px;
  font-size: 13px;
}
.glossar-table th, .glossar-table td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.glossar-table th {
  background: var(--panel);
  color: var(--cyan);
  font-weight: 600;
}
.glossar-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }
.glossar-blockquote {
  border-left: 3px solid var(--magenta);
  padding: 6px 12px;
  margin: 12px 0;
  background: rgba(255, 69, 181, 0.04);
  color: var(--text);
  border-radius: 0 4px 4px 0;
}
.glossar-content hr {
  border: 0;
  border-top: 1px dashed var(--line);
  margin: 32px 0;
}
.glossar-error {
  color: var(--red);
  padding: 12px;
  border: 1px solid var(--red);
  border-radius: 4px;
}

/* =====================================================================
   ui-397: Glossar mobil (web-221 P3.4) — Vorspann eindampfen (DL-2),
   Suche als erstes Bedienelement (DL-3), lange Inline-Codes brechen (DL-4).

   KEIN Overflow-Fix: horizontaler Overflow wurde live gemessen und
   existiert nicht (scrollWidth 390 = Viewport 390, Ticket-Messtabelle) —
   der Screenshot-„Beweis" war ein Aufnahme-Artefakt ohne Mobile-Emulation.

   Markup-Gegenstücke (views/glossar.js): .glossar-lead--desktop/--mobile
   (zwei Leads, mobil nur der Ein-Satz-Lead), .glossar-intro (Renderer
   wrappt den Glossar.md-Vorspann vor der ersten H2 — Markdown-H1 +
   Intro-Blockquote + hr), #glossar-no-results („Kein Begriff gefunden.",
   vom Filter-Script über das hidden-Attribut geschaltet — deshalb setzt
   die Klassen-Regel hier bewusst KEIN display, sonst stäche sie das
   UA-[hidden] aus).

   Position am DATEIENDE (nach ui-394/395/396): definiert neue Klassen
   plus Mobile-Overrides der .glossar-*-Basis (oben in dieser Datei — die
   hatte bis ui-397 keinerlei Media-Query-Behandlung). Die ui-388-Safe-Area-
   Regel der Sticky-Bar (top: env(safe-area-inset-top), oben in dieser
   Datei) bleibt unberührt; das 44px-Suchfeld auf Touch-Geräten kommt
   weiter aus dem ui-394-Block (pages/shared-mobile.css, hover:none/coarse)
   — hier zusätzlich breiten-basiert, damit auch schmale Fine-Pointer-
   Fenster das volle Feld bekommen. Keine Überschneidung mit ui-395-
   Tooltips oder den ui-396-Karten (Scopes .hs-* und .hall — Achtung,
   „Stern-Slash" in Kommentaren beendet sie vorzeitig und frisst die
   Folge-Regel). */

/* --- Basis (alle Viewports): Mobile-only-Lead versteckt, Leerlauf-Hinweis
   gestylt. Desktop bleibt visuell unverändert (nur neue Klassen; der
   Hinweis ist initial hidden). */
.glossar-lead--mobile { display: none; }
.glossar-no-results {
  margin: 4px 0 24px;
  padding: 22px 12px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  border: 1px dashed var(--line);
  border-radius: 6px;
}

@media (max-width: 600px) {
  /* --- DL-2: Vorspann eindampfen — Titel + EIN Erklärsatz, dann sofort
     die Suche. Der aus Glossar.md gerenderte Vorspann (H1 „Chat Tower —
     Glossar (Player)" + Intro-Blockquote + hr) und die redundante
     Zwischen-Überschrift „Glossar (alphabetisch)" entfallen mobil;
     der Drei-Satz-Desktop-Lead weicht dem Ein-Satz-Lead. --- */
  .glossar-page { padding-top: 14px; }
  .glossar-header h1 { font-size: 22px; margin-bottom: 4px; }
  .glossar-lead--desktop { display: none; }
  .glossar-lead--mobile {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
  }
  .glossar-intro { display: none; }
  .glossar-intro + .glossar-h2 { display: none; }
  .glossar-search-bar { margin-bottom: 14px; }

  /* --- DL-3: Suchfeld ≥44px auch breiten-basiert (Touch-Geräte haben es
     schon über den ui-394-Block). Das „Filter"-Label wird nur visuell
     versteckt (Screenreader behalten die Beschriftung — Clip-Muster statt
     display:none); der Treffer-Zähler verliert seine 80px-Mindestbreite
     und bekommt Tabellenziffern (DL-3). --- */
  #glossar-search { min-height: 44px; }
  .glossar-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .glossar-search-count {
    min-width: 0;
    font-variant-numeric: tabular-nums;
  }

  /* --- DL-4: lange Inline-Codes (Deploy-Tags wie deploy-20260601-2212,
     Feldnamen) dürfen in den Erklärungen überall brechen. --- */
  .glossar-content code { overflow-wrap: anywhere; }
}


/* --- Defekt 3: Glossar-„#"-Anker auf Touch ---
   Basis ist opacity:0 + :hover-Reveal (.glossar-anchor, oben in dieser
   Datei) — auf Touch gibt es kein
   Hover: 27 Anker (gemessen 11x24px) waren unsichtbar, aber fokussier- und
   antippbar (Tap auf „nichts" springt + aendert die URL). Entscheid (Ticket
   ui-398 AK 3): auf Touch SICHTBAR statt entfernt — die Anker sind mobil
   die einzige Moeglichkeit, einen Sektions-Deep-Link zu erzeugen
   (URL-Fragment fuer Adressleiste/Share-Sheet); die ui-397-Suche ersetzt
   das nicht (Ticket-Kriterium). Layout-neutral: opacity:0 hat den Platz
   schon immer reserviert. 0.55 statt 1: dauerhafte Neben-Affordanz, kein
   Content (Opacity-Praezedenz Herz-Wasserzeichen ui-112). Trefferflaeche
   via zentrierter 44x44-::after-Hitbox (ui-214-Kanon wie .tip-i; feste
   Groesse statt inset-Offsets, weil die Anker-Box mit der Heading-Stufe
   variiert, 15-26px). Der Hitbox-Ueberhang (~16px) reicht in den nicht
   interaktiven Heading-Text — unkritisch. Desktop (hover+fine) byte-
   gleich; der :hover-Reveal auf 1 bleibt bestehen. */
@media (hover: none), (pointer: coarse) {
  .glossar-anchor {
    opacity: 0.55;
    position: relative;
  }
  .glossar-anchor::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}