/* AnimeRadar v2.4.194 - Misc views: public profile, public list, app page, legal prose, loading/offline states. */
/* Extends the established Material redesign tokens to routes without a dedicated reference board. */

/* -------------------------------------------------------------------------- */
/* Public profile / public list - read-only counterpart of #view-profile      */
/* -------------------------------------------------------------------------- */

html body :where(#view-public-profile, #view-public-list) .profile-public-card {
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
  padding: 22px !important;
  margin: 0 0 16px !important;
  overflow: hidden;
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-radius-card) !important;
  background:
    radial-gradient(circle at 14% 20%, color-mix(in srgb, var(--md-primary) 26%, transparent), transparent 34%),
    linear-gradient(105deg, var(--md-surface-elevated), var(--md-surface-variant) 72%) !important;
  box-shadow: var(--md-elevation-2) !important;
}

html body :where(#view-public-profile, #view-public-list) .profile-public-card .avatar-frame {
  flex: 0 0 auto;
  width: 84px !important;
  height: 84px !important;
  margin: 0 !important;
  border: 2px solid var(--md-primary) !important;
  border-radius: 50% !important;
  background: var(--md-primary-container) !important;
  color: var(--md-on-surface) !important;
  box-shadow: var(--md-elevation-2) !important;
  font-size: 32px !important;
  overflow: hidden;
}

html body :where(#view-public-profile, #view-public-list) .profile-public-card .avatar-frame img {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  object-fit: cover !important;
}

html body :where(#view-public-profile, #view-public-list) .profile-public-card > div {
  min-width: 0;
  display: grid !important;
  gap: 5px !important;
}

html body :where(#view-public-profile, #view-public-list) .profile-public-card h2 {
  margin: 0 !important;
  color: var(--md-on-surface) !important;
  font-size: clamp(20px, 2.6vw, 26px) !important;
  font-weight: 620 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
}

html body :where(#view-public-profile, #view-public-list) .profile-public-card p {
  margin: 0 !important;
  color: var(--md-muted) !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

html body :where(#view-public-profile, #view-public-list) .profile-public-card .tag {
  margin-top: 2px;
}

html body :where(#view-public-profile, #view-public-list) .profile-public-card .small-btn {
  justify-self: start;
  margin-top: 4px !important;
}

html body :where(#view-public-profile, #view-public-list) .band-head.flush {
  margin-bottom: 14px !important;
}

html body :where(#view-public-profile, #view-public-list) .pager.compact-pager {
  color: var(--md-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

html body :where(#view-public-profile, #view-public-list) .mini-list.rated-profile-list {
  gap: 8px !important;
}

html body :where(#view-public-profile, #view-public-list) .rated-profile-list .rated-row {
  border-radius: var(--md-radius-control) !important;
}

html body :where(#view-public-profile, #view-public-list) .rated-profile-list .rated-row strong {
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--md-primary) 20%, transparent) !important;
  color: var(--md-secondary) !important;
}

html body :where(#view-public-profile, #view-public-list) .rated-profile-list .rated-row img {
  border-color: var(--md-outline) !important;
  background: var(--md-surface) !important;
}

html body :where(#view-public-profile, #view-public-list) .rated-profile-list .rated-row span {
  color: var(--md-on-surface) !important;
}

html body :where(#view-public-profile, #view-public-list) .rated-profile-list .rated-row small {
  color: var(--md-rating) !important;
}

@media (max-width: 760px) {
  html body :where(#view-public-profile, #view-public-list) .profile-public-card {
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px !important;
  }

  html body :where(#view-public-profile, #view-public-list) .profile-public-card .avatar-frame {
    width: 60px !important;
    height: 60px !important;
    font-size: 22px !important;
  }

  html body :where(#view-public-profile, #view-public-list) .profile-public-card h2 {
    font-size: 18px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* App download page (#view-app)                                              */
/* -------------------------------------------------------------------------- */

#view-app .app-platform-card h2 {
  margin: 12px 0 8px !important;
  font-size: clamp(20px, 2.6vw, 25px) !important;
}

#view-app .app-platform-badge {
  border: 1px solid color-mix(in srgb, var(--md-primary) 45%, var(--md-outline)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--md-primary) 14%, transparent) !important;
  color: var(--md-secondary) !important;
}

#view-app .app-platform-badge-icon {
  border-color: color-mix(in srgb, var(--md-primary) 50%, var(--md-outline)) !important;
  background: color-mix(in srgb, var(--md-primary) 12%, transparent) !important;
  color: var(--md-primary) !important;
}

#view-app .android-logo-fill {
  fill: var(--md-primary) !important;
}

#view-app .android-logo-line {
  stroke: var(--md-primary) !important;
}

#view-app .android-logo-eye {
  fill: var(--md-on-surface) !important;
}

#view-app dl.app-release-facts div {
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-radius-control) !important;
  background: var(--md-surface-elevated) !important;
}

#view-app dl.app-release-facts dt {
  color: var(--md-muted) !important;
  font-size: 11px !important;
  letter-spacing: .04em !important;
}

#view-app dl.app-release-facts dd {
  color: var(--md-on-surface) !important;
}

#view-app .solid-action.large.app-download-button {
  min-height: 54px !important;
  border-radius: var(--md-radius-control) !important;
  font-size: 15px !important;
}

#view-app .app-download-button.is-disabled {
  background: var(--md-surface-elevated) !important;
  color: var(--md-muted) !important;
}

#view-app .app-install-note {
  margin-top: 14px !important;
  color: var(--md-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

#view-app .app-update-cadence-note {
  margin-top: 10px !important;
  padding: 11px 13px !important;
  border: 1px solid var(--md-outline) !important;
  border-left: 3px solid var(--md-secondary) !important;
  border-radius: var(--md-radius-control) !important;
  background: var(--md-surface-elevated) !important;
  color: var(--md-muted) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

#view-app .app-update-cadence-note strong {
  color: var(--md-on-surface) !important;
}

#view-app .app-update-notes-list li {
  border-color: var(--md-outline) !important;
  border-left-color: var(--md-secondary) !important;
  border-radius: 0 var(--md-radius-control) var(--md-radius-control) 0 !important;
  background: var(--md-surface-elevated) !important;
  color: var(--md-muted) !important;
}

#view-app .app-update-notes-list strong {
  color: var(--md-on-surface) !important;
}

@media (max-width: 760px) {
  #view-app dl.app-release-facts {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #view-app .solid-action.large.app-download-button {
    min-height: 48px !important;
    font-size: 14px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Legal prose: Datenschutz / Impressum / Nutzungsbedingungen                 */
/* -------------------------------------------------------------------------- */

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc {
  max-width: 820px;
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-radius-card) !important;
  background: var(--md-surface-variant) !important;
  box-shadow: var(--md-elevation-1) !important;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc.compact-doc {
  max-width: 760px;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc section {
  padding: 22px 26px !important;
  border-bottom-color: var(--md-outline) !important;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc h2 {
  position: relative;
  margin: 0 0 14px !important;
  padding-bottom: 10px;
  color: var(--md-on-surface) !important;
  font-size: 19px !important;
  line-height: 1.3 !important;
  letter-spacing: -.005em !important;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 2px;
  border-radius: 2px;
  background: var(--md-primary);
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc p {
  max-width: 74ch;
  color: var(--md-muted) !important;
  line-height: 1.7 !important;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc p + p {
  margin-top: 10px;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc :where(ul, ol) {
  margin: 10px 0 0;
  padding-left: 20px;
  color: var(--md-muted) !important;
  line-height: 1.7;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc li {
  margin-block: 6px;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc strong {
  color: var(--md-on-surface) !important;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc a {
  color: var(--md-secondary) !important;
  text-decoration: none;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc a:hover,
html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc a:focus-visible {
  text-decoration: underline;
}

html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc code {
  padding: 1px 6px;
  border: 1px solid var(--md-outline) !important;
  border-radius: 4px;
  background: var(--md-surface-elevated) !important;
  color: var(--md-on-surface) !important;
  font-size: 12px;
}

@media (max-width: 760px) {
  html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc section {
    padding: 16px !important;
  }

  html body :where(#view-privacy, #view-imprint, #view-terms) .legal-doc h2 {
    font-size: 17px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Loading / empty / offline states                                           */
/* -------------------------------------------------------------------------- */

html body .anime-news-banner-skeleton span {
  border-radius: var(--md-radius-control) !important;
  background: linear-gradient(
    90deg,
    var(--md-surface-elevated),
    color-mix(in srgb, var(--md-surface-elevated) 45%, var(--md-outline)),
    var(--md-surface-elevated)
  ) !important;
  background-size: 220% 100% !important;
  animation: md-misc-skeleton-sweep 1.4s linear infinite !important;
}

@keyframes md-misc-skeleton-sweep {
  to {
    background-position: -220% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .anime-news-banner-skeleton span {
    animation: none !important;
  }
}

html body #view-detail :where(.streaming-provider-loading, .streaming-provider-empty) {
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-radius-card) !important;
  background: var(--md-surface) !important;
  box-shadow: none !important;
}

html body #view-detail :where(.streaming-provider-loading, .streaming-provider-empty) strong {
  color: var(--md-on-surface) !important;
}

html body #view-detail .streaming-provider-loading span,
html body #view-detail .streaming-provider-empty p {
  color: var(--md-muted) !important;
}

html body #view-detail :where(.streaming-provider-radar, .streaming-provider-empty-icon) {
  border-color: color-mix(in srgb, var(--md-primary) 45%, var(--md-outline)) !important;
  background: color-mix(in srgb, var(--md-primary) 14%, var(--md-surface)) !important;
  color: var(--md-secondary) !important;
  box-shadow: none !important;
}

html body #view-detail .streaming-provider-radar::before {
  border-color: color-mix(in srgb, var(--md-primary) 35%, transparent) !important;
}

html body #view-detail .streaming-provider-radar::after {
  background: conic-gradient(from 0deg, transparent 0 78%, var(--md-secondary) 92%, transparent 100%) !important;
}

html body .network-status-banner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--md-error) 55%, var(--md-outline-strong)) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--md-error) 20%, var(--md-surface)) !important;
  color: var(--md-on-surface) !important;
  box-shadow: var(--md-elevation-2) !important;
}

html body .network-status-banner strong {
  color: var(--md-on-surface) !important;
  font-size: 13px !important;
}

html body .network-status-banner span {
  color: var(--md-muted) !important;
  font-size: 12px !important;
}

html body .network-status-banner .small-btn {
  flex: 0 0 auto !important;
}

@media (max-width: 760px) {
  html body .network-status-banner {
    padding: 9px 12px !important;
    flex-wrap: wrap !important;
  }
}