/* "Download APK" badge: sign-in page and the bottom of the signed-in sidebar. */
.apk-badge {
  position: relative; display: block; width: 100%; max-width: 240px; line-height: 0; text-decoration: none; border-radius: 16px;
}
.apk-badge img { display: block; width: 100%; height: auto; border-radius: inherit; }
/* Hover/click: download-apk-hover.webp REPLACES the normal picture (which fades out), with a quick soft fade and a tiny settle. The button itself never moves. */
.apk-badge img:not(.apk-hover) { transition: opacity 0.18s ease; }
.apk-badge .apk-hover {
  position: absolute; inset: 0; height: 100%; opacity: 0; transform: scale(0.97); pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.apk-badge:hover:has(.apk-hover) img:not(.apk-hover),
.apk-badge:active:has(.apk-hover) img:not(.apk-hover),
.apk-badge:focus-visible:has(.apk-hover) img:not(.apk-hover) { opacity: 0; }
.apk-badge:hover .apk-hover,
.apk-badge:active .apk-hover,
.apk-badge:focus-visible .apk-hover { opacity: 1; transform: scale(1); }
.apk-badge:focus-visible { outline: 3px solid #3ddc84; outline-offset: 3px; }

/* Shown only if /brand/download-apk.webp is missing, so the link never disappears. */
.apk-badge.is-text {
  display: flex; flex-direction: column; gap: 2px; line-height: 1.15; padding: 12px 18px;
  background: #0a3347; color: #fff; font-weight: 800; font-size: 1rem; text-align: left;
}
.apk-badge.is-text small { font-size: 0.75rem; font-weight: 600; color: #bfe9d6; }

/* "Available on App Store" picture (/brand/available-app-store.webp): same size as the APK badge, not clickable, no hover. */
.appstore-badge {
  display: block; width: 100%; max-width: 240px; height: auto; border-radius: 16px;
  cursor: default; user-select: none; -webkit-user-select: none; pointer-events: none;
}

/* Sign-in page: its own row under the card (and the left column on wide screens). The two buttons sit side by side. */
.auth-apk { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; gap: 12px; justify-content: center; }
.auth-apk .apk-badge, .auth-apk .appstore-badge { flex: 1 1 0; min-width: 0; max-width: 260px; width: auto; }
@media (min-width: 52.01em) { .auth-apk { justify-content: flex-start; } }

/* Sidebar: just above Sign out, App Store button directly below the APK one. */
.sb-foot .apk-badge { width: 100%; max-width: none; margin: 2px 0 0; }
.sb-foot .appstore-badge { width: 100%; max-width: none; margin: 8px 0 0; }