/* Der vorhandene Detail-Token entspricht dem AniList-Stern in der Uebersicht. */
html body #view-detail .detail-gm-chip.is-score .detail-gm-icon {
  color: var(--detail-rating);
}

/* Ein gemeinsamer Innenabstand am gesamten Banner, wie bei Seasons.
   --ar-page-banner-padding enthaelt bereits Desktop/Mobil/Native-Werte. */
@layer ar-banner-inset {
  html body :is(.ar-page-hero, .collection-hero, .news-hero, .tl-hero,
    .socialhub-hero, .gw-hero, .vt-hero, .rm-hero, .pm-hero, .ap-hero) {
    padding-inline: var(--ar-page-banner-padding) !important;
  }
  html body .ar-standard-banner-copy {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    text-align: left !important;
  }
  html body .socialhub-hero-copy { align-self: flex-start !important; }
  html body #view-app .ap-hero-copy { padding-inline: 0 !important; }
  @media (max-width: 959px) {
    html body #view-app .ap-hero-copy { padding-inline: var(--ar-page-banner-padding) !important; }
  }
}

/* Bestehende Sterneingabe: zehn Sterne in einer Zeile mit Halb-Stern-Hover.
   Der erste Stern bleibt der vorhandene Mindestwert 1. */
@layer ar-rating-input {
  html body #view-detail .rating-ten {
    display: inline-block !important;
    width: max-content !important;
    max-width: 100%;
    height: 44px !important;
    box-sizing: border-box;
    padding: 4px 0 !important;
    font-size: 23px !important;
    line-height: 36px !important;
    letter-spacing: 0 !important;
    background: none !important;
    transform: none !important;
  }
  html body #view-detail .rating-ten .star-hit-grid {
    grid-template-columns: repeat(20, minmax(0, 1fr)) !important;
  }
  html body #view-detail .rating-ten .star-hit:first-child { grid-column: span 2; }
  html body #view-detail .rating-ten .star-hit {
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  html body #view-detail .rating-ten .star-hit:focus-visible {
    outline: 2px solid var(--detail-rating) !important;
    outline-offset: 2px;
  }
}
html body #view-detail .detail-ar-stars { flex-wrap: wrap; }
html body #view-detail .detail-gm-facts dd { overflow-wrap: anywhere; white-space: normal; }
