/* The reference title-loading indicator is a softly pulsing disc. */
.route-placeholder[role="status"] .route-loading {
  width:32px;
  height:32px;
  border:0;
  border-radius:50%;
  background:#ffffff1a;
  transform:none;
  animation:detail-loading-pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes detail-loading-pulse {
  0%,100% { opacity:1; }
  50% { opacity:.5; }
}
#detail-dialog .detail-art {
  mask-image:linear-gradient(to bottom,#000 40%,transparent 98%);
  -webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 98%);
}
.detail-facts {
  border:1px solid #ffffff0f;
  border-radius:12px;
  background:#ffffff0a;
  box-shadow:none;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.detail-facts>div { border-color:#ffffff0f;padding:10px 16px; }
.detail-facts dt { color:#fff6;font-weight:400; }
.detail-facts dd { color:#fffc;font-weight:400; }
@media(max-width:1023px) {
  #detail-dialog .detail-genres { justify-content:center;text-align:center;font-size:14px; }
  .detail-facts { backdrop-filter:none;-webkit-backdrop-filter:none; }
  .detail-facts>div { padding:10px 14px; }
}

/* Recovery stays out of the picture until the player reports a problem. */
#provider-dialog .provider-bottom {
  position:absolute;inset:auto auto max(88px,env(safe-area-inset-bottom)) 50%;
  transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:12px;
  width:max-content;max-width:min(620px,calc(100vw - 32px));margin:0;padding:8px 10px 8px 14px;
  border:1px solid #ffffff1a;border-radius:12px;background:#10101085;
  color:var(--af-text-secondary,#ffffffe0);box-shadow:0 8px 28px #0004;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);pointer-events:none;
}
#provider-dialog .provider-bottom[hidden] { display:none; }
#provider-dialog #provider-status {
  position:static;inset:auto;transform:none;min-width:0;max-width:none;margin:0;padding:0;
  opacity:1;background:transparent;border-radius:0;backdrop-filter:none;
  font-size:12px;line-height:1.5;text-align:left;color:inherit;
}
#provider-dialog .provider-reload {
  flex:none;min-height:32px;padding:6px 10px;border:1px solid #ffffff26;border-radius:8px;
  background:#ffffff12;color:#ffffffe6;font-size:12px;line-height:18px;pointer-events:auto;
  transition:background-color .15s,color .15s;
}
#provider-dialog .provider-reload:hover { background:#ffffff26;color:#fff; }
#provider-dialog .provider-reload:focus-visible { outline:2px solid #fff;outline-offset:2px; }
#provider-dialog .provider-reload[hidden] { display:none; }
@media(prefers-reduced-motion:reduce) {
  :where(html:not([data-motion=full])) .route-placeholder[role="status"] .route-loading { animation:none; }
  :where(html:not([data-motion=full])) #provider-dialog .provider-reload { transition:none; }
}
:where(html[data-motion=reduced]) .route-placeholder[role="status"] .route-loading { animation:none; }
:where(html[data-motion=reduced]) #provider-dialog .provider-reload { transition:none; }