/* Native dialog behavior; the card and actions reuse each tool's route-modal styles. */
.album-route {
  position: fixed; inset: 0; margin: 0; padding: 18px;
  width: 100%; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  box-sizing: border-box; border: 0; background: transparent; color: var(--text-main);
  font: inherit; overflow: auto;
}
.album-route[open] { display: grid; place-items: center; }
.album-route:not([open]) { display: none; }
.album-route::backdrop { background: rgba(8, 8, 11, 0.68); backdrop-filter: blur(8px); }
body.dl-modal-open:has(.album-route[open]) { overflow: hidden; }

/* Low-specificity fallbacks for the cover, bulk and lyric-timing tools, whose
   pages do not define the existing downloader/inspector/profile modal classes. */
:where(.album-route .dl-modal-card) {
  position: relative; width: min(100%, 440px); padding: 28px;
  max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px); overflow-y: auto;
  border: 1px solid rgba(255, 168, 77, 0.45); border-radius: 20px;
  background: var(--card-bg); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}
:where(.album-route .dl-modal-kicker) {
  margin: 0 0 10px; color: var(--warning-text); font: 700 0.7rem/1.4 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase;
}
:where(.album-route h2) {
  margin: 0 34px 10px 0; color: var(--heading); font-size: clamp(1.35rem, 4vw, 1.75rem);
  letter-spacing: -0.03em; line-height: 1.12;
}
:where(.album-route p:not(.dl-modal-kicker)) { margin: 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.65; }
:where(.album-route .dl-modal-close) {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center;
  width: 38px; height: 38px; border: 1px solid rgba(var(--overlay-rgb), 0.14);
  border-radius: 50%; background: rgba(var(--overlay-rgb), 0.04); color: var(--text-muted);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
:where(.album-route .dl-modal-close:hover) { background: rgba(var(--overlay-rgb), 0.1); color: var(--text-main); }
:where(.album-route .dl-modal-actions) { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
:where(.album-route .dl-btn-primary) {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 10px 20px; border: 1px solid rgba(var(--overlay-rgb), 0.12);
  border-radius: 999px; background: #fafafa; color: #09090b;
  font: inherit; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
:where(.album-route .dl-btn-secondary) {
  min-height: 42px; padding: 10px 16px; border: 1px solid rgba(var(--overlay-rgb), 0.14);
  border-radius: 999px; background: transparent; color: var(--text-main);
  font: 700 0.86rem/1 var(--font); text-decoration: none; cursor: pointer;
}
:where(.album-route .dl-btn-secondary:hover) { background: rgba(var(--overlay-rgb), 0.07); }
:where(.album-route :focus-visible) { outline: 3px solid rgba(255, 168, 77, 0.42); outline-offset: 3px; }
@media (max-width: 560px) {
  :where(.album-route .dl-modal-card) { padding: 24px 20px 20px; }
  :where(.album-route .dl-modal-actions) { flex-direction: column; }
  :where(.album-route .dl-btn-primary, .album-route .dl-btn-secondary) { width: 100%; box-sizing: border-box; }
}