/* V2.4.264: Shared component corrections. Desktop-only rules exclude native. */

html body [data-select-proxy="seasonSort"] .ar-select-option:is(:hover, :focus, :focus-visible, :active, .is-selected, [aria-selected="true"]):not(:disabled) {
  background: var(--ar-selected-row-bg) !important;
  color: var(--ar-selected-text) !important;
  border-color: var(--ar-accent-line) !important;
}
html body [data-select-proxy="seasonSort"] .ar-select-option:focus-visible {
  outline: 2px solid var(--ar-accent-bright);
  outline-offset: -2px;
}
html body #libraryViewButtons svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html body #view-detail #detailDescription,
html body #view-detail .detail-gm-plot {
  max-width: 75ch;
  white-space: pre-line;
  line-height: 1.7 !important;
}
html body #view-detail #detailDescription.is-expanded {
  display: block !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
}

/* The existing library row is the reference: thumbnail, quiet cells, red hover. */
html body #view-season .seasons-body.is-list .seasons-reference-grid { gap: 10px; }
html body #view-season .seasons-body.is-list .seasons-card {
  display: grid;
  /* V2.4.301: Spalte 3 und 5 sind fest. Jede Zeile ist ein eigenes Raster -
     mit auto-Spalten mass jede Zeile fuer sich, und Bewertung und Genre
     begannen je nach Anbieterzahl woanders. Gleiche Werte wie in
     material-season-list-reference-v2-4-265.css. */
  grid-template-columns: 58px minmax(0, 2fr) var(--ar-list-col-rating, 40px) minmax(90px, 1fr) var(--ar-list-col-tail, 115px) 36px;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  min-height: 0;
  padding: 12px 14px;
  border: 1px solid rgba(64, 58, 66, .74);
  border-radius: 12px;
  background: rgba(30, 28, 34, .62);
  box-shadow: none;
  transform: none;
}
html body #view-season .seasons-body.is-list .seasons-card:hover {
  border-color: rgba(255, 64, 78, .38);
  background: rgba(38, 34, 42, .72);
  box-shadow: none;
  transform: none;
}
html body #view-season .seasons-body.is-list .seasons-card-art {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 58px;
  height: 87px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
}
html body #view-season .seasons-body.is-list .seasons-card-art::after { content: none; }
html body #view-season .seasons-body.is-list .seasons-card-content { display: contents; }
html body #view-season .seasons-body.is-list .seasons-card-title {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  min-height: 0;
  display: block;
  overflow: visible;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: normal !important;
  text-overflow: clip;
}
html body #view-season .seasons-body.is-list .seasons-card-meta {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 0;
  font-size: 12.5px;
  color: #a9b0b6;
}
html body #view-season .seasons-body.is-list .seasons-card-rating { grid-column: 3; grid-row: 1 / 3; margin: 0; }
html body #view-season .seasons-body.is-list .seasons-card-genres {
  grid-column: 4;
  grid-row: 1 / 3;
  flex-wrap: wrap;
  width: auto;
  margin: 0;
  overflow: visible;
}
html body #view-season .seasons-body.is-list .seasons-card-genres > span {
  max-width: 100%;
  white-space: normal;
  font-size: 11.5px;
  line-height: 1.3;
}
html body #view-season .seasons-body.is-list .seasons-card-providers {
  grid-column: 5;
  grid-row: 1 / 3;
  margin: 0;
  padding: 0;
}
html body #view-season .seasons-body.is-list .seasons-card-save {
  position: static;
  grid-column: 6;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  width: 36px;
  height: 36px;
}

@media (max-width: 959px) {
  html body dialog#animeNewsDetailDialog.nd-2026 .nd-meta-tag {
    flex: 0 1 auto;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 28px;
    padding: 5px 17px;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
  }
  html body dialog#animeNewsDetailDialog.nd-2026 .nd-meta-tag::before {
    content: none;
  }
}

@media (max-width: 760px) {
  html body #libraryViewButtons svg { width: 17px; height: 17px; }
  html body #view-season .seasons-body.is-list .seasons-card {
    grid-template-columns: 54px minmax(0, 1fr) 36px;
    grid-template-rows: auto auto auto auto;
    gap: 10px;
    padding: 12px;
  }
  html body #view-season .seasons-body.is-list .seasons-card-art { width: 54px; height: 81px; }
  html body #view-season .seasons-body.is-list :is(.seasons-card-title, .seasons-card-meta) { grid-column: 2 / 4; }
  html body #view-season .seasons-body.is-list .seasons-card-rating { grid-column: 1 / 4; grid-row: 3; }
  html body #view-season .seasons-body.is-list .seasons-card-genres { grid-column: 1 / 4; grid-row: 4; }
  html body #view-season .seasons-body.is-list .seasons-card-providers { grid-column: 1 / 3; grid-row: 5; }
  html body #view-season .seasons-body.is-list .seasons-card-save { grid-column: 3; grid-row: 5; }
  html body #view-season .seasons-body.is-list :is(.seasons-card-rating, .seasons-card-genres) {
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
  }
}

@media (min-width: 960px) {
  html:not(.capacitor-shell) body #view-app .ap-hero-copy {
    background: none !important;
  }
  html:not(.capacitor-shell) body #view-profile .profile-gm-hero {
    align-content: end;
  }
  html:not(.capacitor-shell) body #view-profile :is(.profile-gm-avatar-block, .profile-gm-identity) {
    align-self: end;
  }
  html:not(.capacitor-shell) body #view-profile .profile-gm-datenschutz-card .profile-gm-settings-footer {
    justify-content: flex-start;
    margin-top: 0;
  }
  html:not(.capacitor-shell) body dialog#authDialog.ag-2026 .ag-artwork {
    justify-content: space-between;
  }
  html:not(.capacitor-shell) body dialog#authDialog.ag-2026 .ag-artwork-media {
    position: relative;
    inset: auto;
    flex: 1 1 230px;
    min-height: 150px;
    margin: 24px 24px 8px;
    /* PV-069: dasselbe Motiv auf derselben 1:1-Flaeche wie das 1254-px-PNG,
       nur in Anzeigegroesse als WebP mit Alphakanal (Pillow LANCZOS, Q92).
       Die Flaeche ist hier bis 371 px breit: 480 px fuer einfache, 768 px
       fuer doppelte Pixeldichte. Ohne image-set() gilt die 768er-Fassung. */
    background: url("assets/splash/animeradar-radar-transparent-v1-768.webp") center / contain no-repeat;
    background-image: image-set(url("assets/splash/animeradar-radar-transparent-v1-480.webp") 1x, url("assets/splash/animeradar-radar-transparent-v1-768.webp") 2x);
  }
  html:not(.capacitor-shell) body dialog#authDialog.ag-2026 .ag-artwork-media::after {
    content: none;
  }
}

/* Standard page banners. Home, app showcase and personal/media heads keep
   their own geometry. The shared height accommodates the existing roadmap. */
html { --ar-page-banner-height: 234px; --ar-page-banner-padding: 24px; }
html body :is(
  #view-search .ar-page-hero, #view-calendar .ar-page-hero,
  #view-season .seasons-reference-hero, #view-lists .collection-hero,
  #view-planner .collection-hero, #view-news .news-hero,
  #view-toplists .tl-hero, #view-socials .socialhub-hero,
  #view-giveaway .gw-hero, #view-voting .vt-hero,
  #view-roadmap .rm-hero, #view-premium .pm-hero
) {
  box-sizing: border-box;
  width: 100%;
  height: var(--ar-page-banner-height) !important;
  min-height: var(--ar-page-banner-height) !important;
  padding: var(--ar-page-banner-padding) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
}

html body #view-roadmap.rm-2026 :is(.rm-hero-copy, .rm-hero-sub) { max-width: 100%; }
html body #view-roadmap.rm-2026 .rm-hero-copy { width: min(560px, 100%); }
@media (max-width: 959px) {
  html { --ar-page-banner-height: 197px; --ar-page-banner-padding: 14px; }
}
html.capacitor-shell { --ar-page-banner-height: 197px; --ar-page-banner-padding: 14px; }

/* Compensate only the legacy banner inset, without moving page content. */
@media (min-width: 761px) {
  html body #view-planner .collection-hero { width: calc(100% + 2px) !important; max-width: none !important; margin-inline: -1px; }
}
@media (min-width: 960px) {
  html:not(.capacitor-shell) body #view-profile .profile-gm-hero {
    min-height: 212px;
    grid-template-areas: "avatar identity aktionen" "stats stats stats";
    align-content: end;
  }
  html:not(.capacitor-shell) body #view-profile .profile-actions.profile-gm-hero-actions {
    align-self: end;
    margin: 0 !important;
    padding-top: 0;
    border-top: 0;
  }
}
@media (max-width: 760px) {
  html body #view-season .seasons-reference-hero { width: 100% !important; margin-inline: 0; }
}

/* These two legacy pages cap their content independently of the shell.
   Let only their banners reach the same shell content edges. */
html body .shell:has(> :is(#view-giveaway.active, #view-voting.active)) { container-type: inline-size; }
html body :is(#view-giveaway .gw-hero, #view-voting .vt-hero) {
  width: 100cqw !important;
  max-width: none !important;
  margin-inline: calc((100% - 100cqw) / 2) !important;
}
html body #view-roadmap.rm-2026 .rm-page-roadmap > .rm-filters { margin-top: 0; }
@media (min-width: 761px) {
  html.capacitor-shell body #view-season .seasons-body.is-list .seasons-card-save { grid-row: 3; }
}

/* Align the banner top edge despite route-specific legacy shell offsets. */
@media (min-width: 960px) {
  html:not(.native-app) body:is([data-active-view="search"], [data-active-view="calendar"], [data-active-view="giveaway"], [data-active-view="voting"]) .content-topbar {
    display: flex !important;
    margin-bottom: 3px !important;
  }
  html:not(.native-app) body :is(#view-giveaway, #view-voting, #view-roadmap) { padding-top: 0 !important; }
}
@media (min-width: 761px) {
  html body #view-planner .collection-hero { margin-top: -1px; }
}
@media (max-width: 760px) {
  html body #view-season .seasons-reference-hero { margin-top: 0; }
}