/* ════════════════════════════════════════════════════════════════════════
   components-trivia.css — Trivia-spezifische Optik des trivia-Daten-Moduls.

   Das GERÜST (sticky Suchleiste · Zähler · Leerzustand · Bracket-Gruppen-Container/
   -Kopf/Chevron/Collapse · mark) kommt aus components-catalog.css (.catalog-*, additiv
   im Markup). HIER nur die Trivia-Spezifika: Info-Cards (NPC Luna/Yuna) · der NPC-Zusatz
   im Gruppen-Kopf · die Q&A-Zeile mit eckigem Kategorie-Badge + Gold-Balken-Antwort · der
   Inline-Editor-Zustand. Alle Block-internen Selektoren unter .trivia-block gescoped; die
   Bracket-Sidebar (.trivia-side-count) liegt außerhalb. 1:1-Portierung des UI-Mockups
   .project/mockup/trivia-ui.html. Strang: .project/tasks/guides-neuaufbau.md.
   ════════════════════════════════════════════════════════════════════════ */

@layer components {
  /* Feste Badge-Breite + Badge↔Frage-Abstand: EINE Wahrheit → alle Kategorie-Badges
     gleich breit (Fragen fluchten bündig) UND die Antwort rückt exakt unter den Fragen-
     anfang (Einzug = Fragen-Padding + Badge-Breite + Abstand). --trivia-cat-w deckt das
     längste Label ab (MECHANIK/MECHANIC). */
  .trivia-block {
    --trivia-cat-w: 5.5rem;
    --trivia-gap: 10px;
  }

  /* ── Info-Cards (NPC Luna/Yuna + Limit) ─────────────────────────────────── */
  .trivia-block .info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
  }

  .trivia-block .info-card {
    padding: 14px var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
  }

  .trivia-block .info-card .lbl {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-3);
  }

  .trivia-block .info-card .main {
    margin: 3px 0 2px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-1);
  }

  .trivia-block .info-card .main.jade {
    color: var(--jade);
  }

  .trivia-block .info-card .sub {
    font-size: var(--fs-sm);
    color: var(--text-2);
  }

  /* ── Trivia-Zusatz im geteilten Gruppen-Kopf: NPC-Name (Luna/Yuna) ───────── */
  .trivia-block .bracket-head .npc {
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-3);
  }

  /* ── Q&A-Eintrag ────────────────────────────────────────────────────────── */
  /* Flex-Zeile: im Edit-Mode sitzt der Zieh-Griff (.jt-grip) links neben dem Kopf; die Antwort (.qa-a,
     flex-basis 100%) umbricht darunter. Ohne Griff (Read-only) nimmt der Kopf die ganze Zeile — optisch
     unverändert. */
  .trivia-block .qa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: var(--radius);
    overflow: hidden;
  }

  .trivia-block .qa-head {
    display: flex;
    align-items: center;
    gap: var(--trivia-gap);
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 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;
  }

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

  /* Kategorie-Badge: eckig + ruhig einheitlich (FARBKONZEPT: keine bunten Pillen). Feste
     Breite (--trivia-cat-w) → alle Badges gleich breit, Wort zentriert → Fragen fluchten. */
  .trivia-block .qa-cat {
    flex-shrink: 0;
    width: var(--trivia-cat-w);
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-card-2);
    color: var(--text-3);
    text-align: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .trivia-block .qa-q {
    flex: 1;
  }

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

  .trivia-block .qa.open .qa-plus {
    color: var(--accent-bright);
  }

  /* Antwort-Feld: Gold-Balken links, bg-hover, rechts gerundet, gold-helles Label. Linker
     Einzug = Fragen-Padding + Badge-Breite + Abstand → Antwort beginnt bündig mit der Frage. */
  .trivia-block .qa-a {
    display: none;
    flex-basis: 100%;
    margin: 2px var(--sp-3) 10px calc(var(--sp-3) + var(--trivia-cat-w) + var(--trivia-gap));
    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;
  }

  .trivia-block .qa.open .qa-a {
    display: block;
  }

  .trivia-block .qa-a .a-lbl {
    display: block;
    margin-bottom: 3px;
    color: var(--accent-bright);
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .trivia-block .qa-a .a-val {
    color: var(--jade);
    font-weight: 600;
  }

  /* Inline-Editor (editor+): offene Q&A-Zeile hervorheben; read-only Feld (Bracket · NPC) im Formular.
     Die Formular-Bausteine selbst (.jte-form/.jte-field/.jte-select/…) kommen aus components-gear-editor.css. */
  .trivia-block .qa.jte-open {
    background: var(--bg-hover);
  }

  /* Edit-Formular in der Flex-Zeile → eigene volle Zeile unter Griff+Kopf. */
  .trivia-block .qa > .jte-form {
    flex-basis: 100%;
  }

  .trivia-block .jte-static {
    color: var(--text-2);
    font-size: var(--fs-sm);
  }

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