/* app-banner.css - custom "download the app" banner for Android + non-Safari iOS.

   Companion to the native Apple Smart App Banner (the `apple-itunes-app` meta
   tag), which only renders in Safari on iOS. This styles the in-page strip that
   fills the gap everywhere the native banner cannot appear (Android, iOS Chrome,
   in-app browsers). Injected + toggled by /app-banner.js.

   Light default + `prefers-color-scheme: dark` (static + SSR pages) +
   `:root[data-theme]` overrides so the SPA's manual Daylight/Dusk toggle also
   wins. The banner is `position: fixed` so it stays out of flow on the flex-
   centered deep-link pages; /app-banner.js offsets page content to match. */

.app-banner {
  --ab-paper: #fbf7ef;
  --ab-ink: #2a2620;
  --ab-ink-soft: rgba(42, 38, 32, 0.62);
  --ab-hairline: rgba(42, 38, 32, 0.12);

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  padding: calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 12px) 8px
    calc(env(safe-area-inset-left) + 12px);
  background: var(--ab-paper);
  border-bottom: 1px solid var(--ab-hairline);
  box-shadow: 0 6px 20px -14px rgba(42, 38, 32, 0.5);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  animation: app-banner-in 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes app-banner-in {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-banner {
    animation: none;
  }
}

.app-banner__main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.app-banner__icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Always a light app-icon tile with a dark compass, in BOTH themes, so the
     mark stays visible on a dark Android/system-dark banner. */
  background: #fbf7ef;
  color: #2a2620;
  border: 1px solid rgba(42, 38, 32, 0.14);
}

.app-banner__icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

.app-banner__text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.app-banner__title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ab-ink);
}

.app-banner__sub {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ab-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-banner__cta {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: 999px;
  /* Blue store CTA (white text) - the universal "download the app" convention,
     high-contrast on both the light and dark banner. AA: ~4.8:1 on white. */
  background: #2563eb;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.app-banner__close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ab-ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 999px;
}

.app-banner__close svg {
  width: 18px;
  height: 18px;
}

.app-banner__close:active {
  background: var(--ab-hairline);
}

/* Dark - system preference (static + SSR pages) */
@media (prefers-color-scheme: dark) {
  .app-banner {
    --ab-paper: #22201c;
    --ab-ink: #f4efe3;
    --ab-ink-soft: rgba(244, 239, 227, 0.62);
    --ab-hairline: rgba(244, 239, 227, 0.14);
  }
}

/* SPA manual theme toggle wins in both directions */
:root[data-theme='dusk'] .app-banner {
  --ab-paper: #22201c;
  --ab-ink: #f4efe3;
  --ab-ink-soft: rgba(244, 239, 227, 0.62);
  --ab-hairline: rgba(244, 239, 227, 0.14);
}

:root[data-theme='daylight'] .app-banner {
  --ab-paper: #fbf7ef;
  --ab-ink: #2a2620;
  --ab-ink-soft: rgba(42, 38, 32, 0.62);
  --ab-hairline: rgba(42, 38, 32, 0.12);
}