/* 9:16 phone frame for every Wounderland page. On a phone the page fills the screen; on a wider screen the page sits in a
   centred phone-shaped column so the cafe staff and desktop visitors see exactly what a phone shows. Add class="phone" to <html>. */
html.phone {
  min-height: 100%;
  background: var(--sulu-ink) radial-gradient(circle at 50% 20%, rgba(234, 1, 138, .28), transparent 60%);
}
html.phone body {
  width: min(100vw, calc(100dvh * 9 / 16), 540px);
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  box-sizing: border-box;
}
@media (min-width: 600px) {
  html.phone body { box-shadow: 0 0 0 3px var(--sulu-ink), 0 30px 90px rgba(0, 0, 0, .55); }
}
/* Width of the phone column, for fixed bars that must stay inside it. */
html.phone { --phone-w: min(100vw, calc(100dvh * 9 / 16), 540px); }

/* Components with their own display (e.g. .chip) must still obey the hidden attribute. */
html.phone [hidden] { display: none !important; }