/* app.css — /app, the smart download router.
   Small and additive: seo-pages.css supplies every token and the shared
   header/footer classes; this file only lays out the states app.js reveals
   (loading, iOS, Android, desktop) and the pulse used while device
   detection runs. Same tokens, same file the rest of this page family uses
   — see seo-pages.css's own header for why the tokens live there. */

.router-shell{
  min-height:calc(100svh - 140px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--s6) var(--gutter);
}

.router-card{
  width:100%;
  max-width:440px;
  text-align:center;
}

.router-state{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.router-state[hidden]{display:none}

.router-eyebrow{
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-muted);
}

.router-title{font-family:var(--font-head);font-size:var(--t-h2);font-weight:600;line-height:1.15;text-wrap:balance}
.router-title em{font-style:normal;color:var(--text-secondary)}
.router-body{color:var(--text-secondary);font-size:var(--t-base);max-width:38ch}

.router-actions{display:flex;flex-direction:column;gap:var(--s2);width:100%;max-width:280px;margin-top:var(--s2)}

/* THE PULSE. Purely decorative, CSS-only (no JS timer to babysit), and off
   for anyone who asked for reduced motion — this is the only animation on
   the page and it exists to say "we're working on it", not to entertain. */
.router-pulse{
  width:14px;height:14px;border-radius:50%;background:var(--primary);
  animation:router-pulse 1.4s ease-in-out infinite;
}
@keyframes router-pulse{
  0%,100%{opacity:.35;transform:scale(.85)}
  50%{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion: reduce){
  .router-pulse{animation:none;opacity:.85}
}

.router-fineprint{
  margin-top:var(--s6);
  font-size:var(--t-xs);
  color:var(--text-muted);
}
.router-fineprint a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px}
.router-fineprint a:hover{color:var(--primary);opacity:1}

.router-legal{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;margin-bottom:var(--s2)}
.router-legal a{font-size:var(--t-xs);color:var(--text-muted);min-height:44px;display:inline-flex;align-items:center}
.router-legal a:hover{color:var(--white);opacity:1}

/* The printed QR lands here on a phone. The shared header's switcher and logo
   are sized for a desktop pointer; this page gives each one a full 44px
   target. app.css loads only on the /app family, so no other page changes. */
.lang-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.lang-switcher{padding:2px}
.nav-logo{min-height:44px}