/* ─── Shared by every website page ─── */
/* no browser default margin: it showed as a white border around the desktop pages */
html, body { margin: 0; padding: 0; }

/* iPad and other tablets get the mobile design (js/device.js): let it fill the screen
   instead of a phone-width column in the middle */
@media (min-width: 600px) {
  html.is-mobile .mobile-shell .app,
  html.is-mobile .mobile-shell .tabin,
  html.is-mobile .mobile-shell .dockin { max-width: none; }
}

/* ─── AMAI page transitions (mobile website) ───
   Moving between pages crossfades instead of flashing blank: the browser keeps the
   old page until the new one is ready (View Transitions; iPhone iOS 18.2+, Chrome).
   The header and the bottom tab bar stay perfectly still — only the content changes.
   Same device rule as js/device.js (phones, and touch tablets up to 1366px). */
@media (max-width: 860px), (pointer: coarse) and (max-width: 1366px) {
  @view-transition { navigation: auto; }
}

html.is-mobile .mobile-shell .top  { view-transition-name: amai-top; }
html.is-mobile .mobile-shell .tabs { view-transition-name: amai-tabs; }

/* header and tab bar: no movement (the tab highlight just crossfades in place) */
::view-transition-group(amai-top),
::view-transition-group(amai-tabs) { animation-duration: 0s; }
::view-transition-old(amai-tabs),
::view-transition-new(amai-tabs) { animation-duration: .18s; }

/* the page itself: a quick, soft crossfade */
::view-transition-old(root) { animation: amai-out .16s ease both; }
::view-transition-new(root) { animation: amai-in .24s ease both; }
@keyframes amai-out { to { opacity: 0; } }
@keyframes amai-in  { from { opacity: 0; } }

/* arrived by crossfade: skip the page's own entrance fade (two fades flicker) — js/transitions.js */
html.vt-arrive .mobile-shell .fade { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}