/* "Get the Android app" bar for plain-HTML pages (the blog) — loaded with
   _fluttergo-android-prompt.js. Copy of the bar rules in
   src/components/app-install/android-app-prompt.css; keep the two in sync. */
:root {
  --fg-app-bar-h: 60px;
  --fg-aap-ink: #04060c;
  --fg-aap-panel: #0d1220;
  --fg-aap-line: #ffffff1f;
  --fg-aap-text: #f4f6fb;
  --fg-aap-muted: #a7b0c2;
  --fg-aap-accent: #50c6fd;
  --fg-aap-on-accent: #04060c;
  --fg-aap-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Bar ---------- */
/* !important: the Nightfall skin forces `position: relative; z-index: 1` on
   every direct child of <body> (html.nf-page body > :not(...)), which would
   drop the bar into the flow underneath the fixed site header. */
.fg-aap-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 1000 !important;
  height: var(--fg-app-bar-h);
  padding: 0 8px 0 12px;
  padding-top: env(safe-area-inset-top, 0px);
  box-sizing: content-box;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--fg-aap-ink);
  border-bottom: 1px solid var(--fg-aap-line);
  color: var(--fg-aap-text);
  font: 500 13px/1.25 Inter, system-ui, sans-serif;
  animation: fg-aap-slide-down 260ms var(--fg-aap-ease) both;
}

/* Push the page and the fixed site header below the bar. */
/* margin, not padding: pages set their own body padding-top to clear the
   header (the blog uses 84px) and must keep it. */
html.fg-app-bar body { margin-top: calc(var(--fg-app-bar-h) + env(safe-area-inset-top, 0px)) !important; }
html.fg-app-bar .site-chrome { top: calc(var(--fg-app-bar-h) + env(safe-area-inset-top, 0px)) !important; }

.fg-aap-icon { flex: none; border-radius: 9px; }
.fg-aap-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fg-aap-copy strong { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-aap-copy span { color: var(--fg-aap-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fg-aap-install {
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--fg-aap-accent);
  color: var(--fg-aap-on-accent);
  font-weight: 650;
  text-decoration: none;
  transition: transform 120ms ease-out;
}
.fg-aap-install:active { transform: scale(0.96); }
.fg-aap-install:focus-visible,
.fg-aap-close:focus-visible,
.fg-aap-continue:focus-visible { outline: 2px solid var(--fg-aap-accent); outline-offset: 2px; }

.fg-aap-close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-aap-muted);
  cursor: pointer;
}

@keyframes fg-aap-slide-down { from { transform: translateY(-100%); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .fg-aap-bar { animation: none; }
  .fg-aap-install { transition: none; }
}