/* Shared source artwork/copy; desktop uses a compact corner card. */
.sidebar .menu a.sidebar-app-download { gap: 8px; color: var(--ink); background: #fff5bd; font-weight: 600; }
.sidebar .menu a.sidebar-app-download:hover { background: #ffed8c; }

/* Source dimensions: 96px bottom panel, 24px close button and 32px CTA. */
.mobile-download-popup { position: fixed; inset: auto 0 0; z-index: 99; display: block; width: 100%; height: calc(96px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #262626; box-shadow: 0 -2px 4px #0004; }
.mobile-download-popup .close-btn { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.mobile-download-popup .close-btn::before, .mobile-download-popup .close-btn::after { content: ""; position: absolute; top: 4px; left: 10px; width: 4px; height: 16px; background: #fff; transform: rotate(45deg); }
.mobile-download-popup .close-btn::after { transform: rotate(-45deg); }
.mobile-popup-inner { display: flex; gap: 16px; height: 80px; margin: 16px 16px 0; }
.mobile-popup-inner .side { flex: none; width: 33%; }
.mobile-popup-inner .app-image-box { height: 112px; margin-top: -32px; overflow: hidden; border-radius: 8px 8px 0 0; background: antiquewhite; box-shadow: 0 -2px 4px #0004; }
.mobile-popup-inner .app-image-box img { display: block; width: 100%; height: auto; object-fit: contain; }
.mobile-popup-inner .main { flex: 1; min-width: 0; }
.mobile-popup-inner .label { margin-bottom: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 20px; color: #adb7be; }
.mobile-popup-inner .download-app-btn { display: block; width: 100%; height: 32px; border-radius: 4px; background: var(--yellow); color: var(--ink); font-size: 14px; line-height: 32px; text-align: center; }
body:has(.mobile-download-popup) .page { padding-bottom: calc(128px + env(safe-area-inset-bottom)); }

/* Keep phones (including touch landscape up to 960px) full-width. */
@media (min-width: 561px) and (hover: hover) and (pointer: fine), (min-width: 961px) {
    .mobile-download-popup { inset: auto 24px 24px auto; width: 360px; max-width: calc(var(--viewport-width, 100vw) - 48px); height: 112px; padding-bottom: 0; border-radius: 10px; box-shadow: 0 8px 32px #0003; }
    .mobile-popup-inner { align-items: center; }
    .mobile-popup-inner .side { width: 80px; }
    .mobile-popup-inner .app-image-box { height: 80px; margin-top: 0; border-radius: 8px; box-shadow: none; }
    body:has(.mobile-download-popup) .floating-tools { bottom: 152px; }
}