/* Bewertung als Symbole (components/stars.html): Tabelle der Scans und Chart-Kachel, eigener
   Baustein seit dem 13.10.2026 (vorher in pages/scans.css). Die Kurzform der schmalen Kachel
   schaltet chart-tile.css per Container-Abfrage um. */

/* Filigran und überall gleich: 13 px in der Tabelle, 12 px auf der Kachel (`stars--sm`), feine
   Linie (1,5 statt 1,75 der übrigen Symbole), dicht gesetzt. Das Symbol kommt in 16 px aus dem
   Sprite; die Größe setzt erst diese Regel (`stroke-width` erbt das Sprite-Symbol vom `<svg>`). */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  vertical-align: middle;
}

.stars .star {
  width: 13px;
  height: 13px;
  stroke-width: 1.5;
}

.stars--sm {
  gap: 0;
}

.stars--sm .star {
  width: 12px;
  height: 12px;
}

.stars__up-to {
  margin-right: 4px;
  color: var(--text-2);
}

.stars--sm .stars__up-to {
  margin-right: 2px;
}

/* Voll: Bernstein gefüllt wie der Watchlist-Stern (Ä-34); leer: zarter Umriss in --text-3, dünner
   als die übrigen; möglich („bis zu“/„≤“, vorläufig): Umriss in Bernstein – Füllung und Wort bzw.
   Zeichen tragen den Unterschied, nicht nur die Farbe. */
.star--filled {
  color: var(--accent);
  fill: currentcolor;
}

.stars .star--empty {
  color: var(--text-3);
  stroke-width: 1.25;
}

.star--possible {
  color: var(--accent);
}

/* Kurzform der schmalen Chart-Kachel („★ 3/4“, „☆ ≤3“): ein Stern und die Zahl; gezeigt nur über
   die Container-Abfrage in chart-tile.css. */
.stars.stars--short {
  display: none;
  gap: 2px;
}

.stars__count {
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}