/* ============================================================
 * tc-newsfeed / tc-news-item  (Dashboard: TownCryer-Front)
 * Auto-generierte Neuigkeiten in Ausrufer-Stimme (template-basiert;
 * spaeter optional LLM-veredelt). Vertikale Liste; Items koennen
 * per Typ-Modifier links farbakzentuiert sein. Inhalte erzeugt die
 * Dashboard-JS aus Ereignissen (Ergebnisse, Termine, Achievements).
 * Datei: css/components/news-feed.css
 * ============================================================ */

.tc-newsfeed {
  display: flex;
  flex-direction: column;
  gap: var(--tc-space-2);
}

.tc-news-item {
  display: flex;
  gap: var(--tc-space-3);
  padding: var(--tc-space-3);
  background: var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-subtle);
  border-radius: var(--tc-radius-md);
  transition: border-color var(--tc-motion-fast) var(--tc-ease-out),
              background var(--tc-motion-fast) var(--tc-ease-out);
}
/* Als Link nutzbar (fuehrt zum Ereignis) */
a.tc-news-item {
  text-decoration: none;
  color: inherit;
}
a.tc-news-item:hover,
a.tc-news-item:focus-visible {
  border-color: var(--tc-border-strong);
  background: var(--tc-bg-surface-2);
  outline: none;
}
a.tc-news-item:focus-visible { box-shadow: 0 0 0 2px var(--tc-accent); }

.tc-news-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  background: var(--tc-bg-surface-3);
  border-radius: var(--tc-radius-md);
}
.tc-news-item__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  /* Fuellt die Zeile neben dem Icon (13.08.2026). Fehlte in der Basisregel,
     obwohl die --log-Variante es sich schon selbst setzte — der Textblock
     war also immer nur so breit wie sein breitestes Kind. Das fiel nicht
     auf, solange das laengste Kind ohnehin ueber die volle Breite lief.
     Seit die Berichtsabsaetze auf 68ch begrenzt sind, zog dieses Maximum
     den ganzen Block zusammen: eine einzeilige Meldung endete 200px vor
     dem Kartenrand und sah aus wie ein Layoutfehler. */
  flex: 1;
}
.tc-news-item__text {
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  color: var(--tc-text-default);
  line-height: var(--tc-leading-snug);
}
.tc-news-item__text strong { color: var(--tc-text-strong); }
/* Weiterführender Link in einer Meldung (13.08.2026): Die Anteaser der noch
   nicht bespielten Systeme führen in ihren Hub. Ohne eigene Regel erbt der
   Link die Textfarbe und ist als Link nicht zu erkennen. */
.tc-news-item__text a {
  color: var(--tc-highlight);
  text-decoration: none;
  border-bottom: 1px solid var(--tc-border-default);
  white-space: nowrap;
}
.tc-news-item__text a:hover,
.tc-news-item__text a:focus-visible { border-bottom-color: var(--tc-highlight); }
.tc-news-item__meta {
  display: flex;
  align-items: center;
  gap: var(--tc-space-2);
  font-size: var(--tc-text-2xs);
  color: var(--tc-text-muted);
}
.tc-news-item__tag {
  padding: 1px 6px;
  border-radius: var(--tc-radius-sm);
  background: var(--tc-bg-surface-3);
  color: var(--tc-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tc-tracking-wide);
  font-weight: var(--tc-weight-semibold);
}

/* Typ-Akzent links (Datenfarbe je Ereignistyp) */
.tc-news-item--result { border-left: 3px solid var(--tc-success); }
.tc-news-item--event { border-left: 3px solid var(--tc-info); }
.tc-news-item--roster { border-left: 3px solid var(--tc-accent); }
.tc-news-item--achievement { border-left: 3px solid var(--tc-warning); }
.tc-news-item--death { border-left: 3px solid var(--tc-secondary); }   /* Oxblood - Gefallene */
.tc-news-item--bounty { border-left: 3px solid var(--tc-warning); }    /* Gold - Kopfgelder */
/* Persoenlich: keine Datenfarbe, sondern der Theme-Akzent — die Meldung
   meint den Leser, nicht ein Ereignis (13.08.2026). */
.tc-news-item--personal { border-left: 3px solid var(--tc-highlight); }

/* ============================================================
   DER LANGE BERICHT  (13.08.2026, town-cryer-chronist.js)
   ------------------------------------------------------------
   Der Ausrufer erzaehlt Schlachten seit dem 13.08.2026 nicht mehr
   in einem Satz, sondern in Absaetzen. Im Feed liegt der Bericht
   unter dem Anriss und ist ZUGEKLAPPT: Vier aufgeschlagene
   Mehrzeiler waeren keine Neuigkeitenliste mehr, sondern eine
   Zeitungsseite, und die Buehne darueber zeigt ohnehin nur den
   Anriss.

   Kein eigener Rahmen, kein eigener Kasten — der Bericht gehoert
   sichtbar zu seinem tc-news-item. Nur die linke Haarlinie fuehrt
   das Auge, wie beim Zitat.
   ============================================================ */
.tc-news-item__bericht { margin-top: var(--tc-space-2); }

.tc-news-item__bericht-auf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Touch-Ziel: der Aufklapper ist auf dem Sofa das meistgetroffene
     Element dieser Karte (Leitplanke 10, >= 44px). */
  min-height: 44px;
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-xs);
  font-weight: var(--tc-weight-semibold);
  color: var(--tc-highlight);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.tc-news-item__bericht-auf::-webkit-details-marker { display: none; }
.tc-news-item__bericht-auf::before {
  content: '\25B8';                    /* Dreieck rechts */
  display: inline-block;
  transition: transform var(--tc-motion-fast) var(--tc-ease-out);
}
.tc-news-item__bericht[open] .tc-news-item__bericht-auf::before {
  transform: rotate(90deg);
}
.tc-news-item__bericht-auf:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tc-accent-glow);
  border-radius: var(--tc-radius-sm);
}

.tc-news-item__bericht-titel {
  font-family: var(--tc-font-display);
  font-size: var(--tc-text-sm);
  font-weight: var(--tc-weight-semibold);
  color: var(--tc-text-strong);
  margin-bottom: var(--tc-space-2);
}

.tc-news-item__bericht-absatz {
  margin: 0 0 var(--tc-space-2);
  padding-left: var(--tc-space-3);
  border-left: 1px solid var(--tc-border-subtle);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-sm);
  /* Fliesstext, nicht Meldung: mehr Zeilenabstand als .tc-news-item__text */
  line-height: var(--tc-leading-relaxed);
  color: var(--tc-text-default);
  /* Zeilenlaenge begrenzen (13.08.2026). Am 1600px-Schreibtisch kam der
     Bericht auf 107 Zeichen je Zeile — gemessen, nicht geschaetzt. Bequem
     liest sich Fliesstext zwischen 45 und 85; darueber verliert das Auge
     beim Zeilenwechsel den Anschluss. Das trifft NUR die Berichtsabsaetze:
     Eine einzeilige Meldung darf die volle Breite haben, ein vierteiliger
     Schlachtbericht nicht. */
  max-width: 68ch;
}
.tc-news-item__bericht-absatz strong { color: var(--tc-text-strong); }

/* Die Sentenz am Schluss — der Ausrufer tritt einen Schritt zurueck. */
.tc-news-item__bericht-fuss {
  margin: 0;
  padding-left: var(--tc-space-3);
  border-left: 1px solid var(--tc-border-subtle);
  font-family: var(--tc-font-body);
  font-size: var(--tc-text-xs);
  font-style: italic;
  line-height: var(--tc-leading-relaxed);
  color: var(--tc-text-muted);
  max-width: 68ch;
}

/* Endzustand behalten, Bewegung wegnehmen (CLAUDE.md §9): nicht
   `transition: none` — hier genuegt die Dauer, weil der gedrehte
   Pfeil ein Zustand und keine Einblendung ist. */
@media (prefers-reduced-motion: reduce) {
  .tc-news-item__bericht-auf::before { transition-duration: 0.01ms; }
}

/* ============================================================
   DER AUSRUFER IM SYSTEMHUB  (13.08.2026)
   ------------------------------------------------------------
   Ein Hub bekommt nicht den ganzen Feed, sondern genau eine
   Meldung: den juengsten Schlachtbericht SEINES Systems,
   aufgeschlagen. Deshalb hier kein Listenabstand und kein
   Aufklapper drumherum — die Karte steht fuer sich.
   ============================================================ */
.tc-cryer-hub .tc-newsfeed { gap: 0; }
.tc-cryer-hub .tc-news-item { background: var(--tc-bg-surface-1); }
/* Aufgeschlagen gelesen: Der Aufklapper darf sich zurueckhalten,
   er ist hier eine Zusammenklapp-Moeglichkeit, keine Einladung. */
.tc-cryer-hub .tc-news-item__bericht[open] .tc-news-item__bericht-auf {
  color: var(--tc-text-muted);
  font-weight: var(--tc-weight-normal);
}

/* ============================================================
   VARIANTE --log  (10.08.2026, Taskwerk #129)
   ------------------------------------------------------------
   Dichter Ereignis-Feed fuer Live-Spielscreens. Gleiche Struktur
   wie der Newsfeed (vertikale Liste, Typ-Akzent links, Tag+Text),
   aber fuer 40+ Eintraege waehrend eines laufenden Spiels:
   kein Icon-Kasten, kompaktes Padding, Monospace-Tag, scrollbar.

   Heuristik 3: Varianten-Modifier statt neuer Komponente. Der
   Newsfeed (Dashboard, Ausrufer-Stimme) und das Match-Log (BB,
   technische Ereignisse) sind dasselbe Muster in zwei Dichten --
   nicht zwei Komponenten.

   Vorlage/erster Konsument: Blood-Bowl-Match-Log (.bb-mtch-log-*).
   ============================================================ */

.tc-newsfeed--log {
  gap: var(--tc-space-1);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--tc-bg-surface-2);
  border-radius: var(--tc-radius-md);
  padding: var(--tc-space-2);
}

.tc-newsfeed--log .tc-news-item {
  gap: var(--tc-space-2);
  padding: 4px 6px;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  border-left: 3px solid transparent;
  border-radius: var(--tc-radius-sm);
  align-items: baseline;
}

/* Im Log traegt der Text das Emoji -- der Icon-Kasten wuerde die
   Zeilenhoehe verdoppeln und ist deshalb bewusst ausgeblendet. */
.tc-newsfeed--log .tc-news-item__icon { display: none; }

.tc-newsfeed--log .tc-news-item__body {
  flex-direction: row;
  gap: var(--tc-space-2);
  flex: 1;
}

/* Runden-Marke (H1D2-M3/O2): Monospace, damit die Spalte steht. */
.tc-newsfeed--log .tc-news-item__tag {
  background: transparent;
  padding: 0;
  min-width: 100px;
  flex-shrink: 0;
  font-family: var(--tc-font-mono, monospace);
  font-size: var(--tc-text-2xs);
  text-transform: none;
  letter-spacing: 0;
}

.tc-newsfeed--log .tc-news-item__text {
  flex: 1;
  word-break: break-word;
}

.tc-newsfeed--log .tc-newsfeed__empty {
  text-align: center;
  padding: var(--tc-space-5);
  color: var(--tc-text-muted);
}

/* --- Ereignistypen des Spielscreens (Datenfarben, siehe Abschnitt 9) ---
   Der Typ sagt etwas ueber das Ereignis aus, nicht ueber die
   Stimmung -- deshalb feste Rollen-Tokens statt Theme-Akzent. */
.tc-news-item--score     { border-left-color: var(--tc-success); }
.tc-news-item--score     .tc-news-item__text { color: var(--tc-success); font-weight: var(--tc-weight-semibold); }
.tc-news-item--casualty  { border-left-color: var(--tc-danger); }
.tc-news-item--casualty  .tc-news-item__text { color: var(--tc-danger); }
.tc-news-item--phase     { border-left-color: var(--tc-warning); font-weight: var(--tc-weight-semibold); }
.tc-news-item--kickoff   { border-left-color: var(--tc-accent); }
.tc-news-item--kickoff   .tc-news-item__text { color: var(--tc-highlight); }
.tc-news-item--weather   { border-left-color: var(--tc-info); }
.tc-news-item--weather   .tc-news-item__text { color: var(--tc-info); }
.tc-news-item--resource  { border-left-color: var(--tc-attention); }
.tc-news-item--resource  .tc-news-item__text { color: var(--tc-attention); }
.tc-news-item--recovery  { border-left-color: var(--tc-success); }
.tc-news-item--status    { border-left-color: var(--tc-text-muted); }
.tc-news-item--turn      .tc-news-item__text { color: var(--tc-text-muted); }
.tc-news-item--note      .tc-news-item__text { color: var(--tc-text-muted); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .tc-newsfeed--log .tc-news-item { transition: none; }
}