/* ════════════════════════════════════════════════════════════════════════
   components-patch-notes.css — Optik des patch-notes-Daten-Moduls (Block-Typ
   'patch-notes'). Das GERÜST (sticky Suchleiste · Zähler · Leerzustand · Gruppen-
   Container/-Kopf/Chevron/Collapse · mark) kommt aus components-catalog.css
   (.catalog-*); HIER nur die Patch-spezifische Eintrags-Zeile: Versions-Titel +
   Datum + „Neu"-Badge, aufklappbarer Prose-Body im Gold-Balken-Stil (wie das
   Trivia-Antwortfeld). Alle Block-internen Selektoren unter .pn-block gescoped.
   Die Sektions-Sprungliste (.pn-side-count) liegt in der Seiten-Sidebar (außerhalb
   .pn-block). Strang: .project/tasks/guides-neuaufbau.md § „Patch-Notes".
   ════════════════════════════════════════════════════════════════════════ */

@layer components {
  .pn-block {
    --pn-gap: 10px;
  }

  /* ── Patch-Eintrag (aufklappbar) ────────────────────────────────────────── */
  .pn-block .pn-item {
    border-radius: var(--radius);
    overflow: hidden;
  }

  .pn-block .pn-item-head {
    display: flex;
    align-items: center;
    gap: var(--pn-gap);
    width: 100%;
    padding: 11px var(--sp-3);
    border: none;
    background: transparent;
    color: var(--text-1);
    text-align: left;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    cursor: pointer;
  }

  .pn-block .pn-item-head:hover,
  .pn-block .pn-item.open .pn-item-head {
    background: var(--bg-card);
  }

  .pn-block .pn-version-title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
  }

  /* „Neu"-Badge: eckig + Gold-Signalfarbe (FARBKONZEPT: bedeutungstragend, keine Pille). */
  .pn-block .pn-badge-new {
    flex-shrink: 0;
    padding: 2px 7px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent-glow);
    color: var(--accent-bright);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .pn-block .pn-date {
    flex-shrink: 0;
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
  }

  .pn-block .pn-plus {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    color: var(--text-3);
    font-size: var(--fs-md);
  }

  .pn-block .pn-item.open .pn-plus {
    color: var(--accent-bright);
  }

  /* ── Body (Prose, aufgeklappt) — Gold-Balken links wie das Trivia-Antwortfeld ── */
  .pn-block .pn-body {
    display: none;
  }

  .pn-block .pn-item.open .pn-body {
    display: block;
  }

  .pn-block .pn-body-inner {
    margin: 2px var(--sp-3) 10px;
    padding: 10px 14px;
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--bg-hover);
    color: var(--text-2);
    line-height: 1.6;
  }

  .pn-block .pn-body-inner strong {
    color: var(--text-1);
  }

  /* Listen (ul/li) NICHT hier stylen: die zentrale .page-md-Listenregel (components-base.css, Akzent-●
     via li::before) greift schon — ein zweites list-style:disc gäbe einen doppelten Marker. */

  /* ── Inline-Editor (editor+): offene Patch-Zeile hervorheben ──────────────── */
  .pn-block .pn-item.jte-open {
    background: var(--bg-hover);
  }

  /* Rich-Inhaltsfeld im Inline-Editor (contenteditable, wie eine textarea gerahmt) — der EINE Rich-Editor
     (zentrale Bubble-Toolbar/„/"-Menü), nicht Roh-HTML. Generisch (auch für andere Daten-Modul-Editoren). */
  .jte-richfield {
    min-height: 4.5rem;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-1);
    line-height: 1.55;
  }

  .jte-richfield:focus {
    outline: 2px solid var(--accent);
    outline-offset: -1px;
  }

  /* ── Sektions-Sprungliste in der Seiten-Sidebar (außerhalb .pn-block) ─────── */
  .pn-side-count {
    margin-left: auto;
    color: var(--text-3);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
  }
}