/* The page shell, as the Pujo microsite UI (static/v2/shell.css). Every colour, size and font
   inside a screen is written inline in the templates, as there. */
html { background: #eeeff1; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
.screen { width: 100%; max-width: 390px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; }
.strip::-webkit-scrollbar { display: none; }
input:focus, textarea:focus { outline: none; border-color: #5B1B80 !important; }
@keyframes sweep { 0% { top: 8%; } 50% { top: 90%; } 100% { top: 8%; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .sweep, .pulse { animation: none !important; } }

/* PC: the 390 x 844 phone screen zoomed to fit the window height (fit.js sets --fit). */
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
  .screen { zoom: var(--fit, 1); min-height: calc(100vh / var(--fit, 1)); min-height: calc(100dvh / var(--fit, 1)); }
}

/* Phones: the column fills the whole width. */
@media (pointer: coarse), (max-width: 699px) {
  html { background: transparent; }
  .screen { max-width: none; }
}