/* Shared screen frame for every page.
   The screens were drawn as a fixed 390x844 phone mock-up. On a real phone that
   left a gutter on wider screens and cut the bottom off shorter ones. This file
   makes each screen fill the phone it is on, and keeps a centred phone-width
   column on a desktop. It changes size only: no colors, text or behaviour. */

html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; }

/* Pages that wrap the screen in a .page column */
.page { width: 100%; max-width: 430px; margin: 0 auto; }

/* The screen itself (class="screen" on the outer container of each page).
   !important is needed because the page's own inline style still carries the
   original layout (flex, colors, padding); only the size is taken over here. */
.screen {
  width: 100% !important;
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
  height: 100vh !important;   /* older browsers */
  height: 100dvh !important;  /* the visible screen, between the browser bars */
  padding-top: env(safe-area-inset-top, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  /* If a screen's content is taller than the phone, scroll it rather than cut it off. */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Pieces inside a screen that were sized to the 390px mock-up */
.screen-wide { width: 100% !important; max-width: 100%; }
.screen img, .screen iframe { max-width: 100%; }

/* "Beta" sign on every page while the site is being tested with guests (owner, 2026-10-01).
   CSS only, so it reaches every screen without touching any page; delete this block to remove it. */
body::after {
  content: "Beta";
  position: fixed;
  z-index: 1000;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: max(12px, calc((100vw - 430px) / 2 + 12px));
  padding: 3px 9px;
  border: 1px solid #161513;
  border-radius: 999px;
  background: #ffffff;
  color: #161513;
  font-family: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.08em;
  pointer-events: none;
}

/* Bottom menu on a phone: Home, Book, Shop. My Profile moved to the profile icon at the top right of
   Home (owner, 2026-10-01); on a computer the top bar keeps a Profile link (desktop.css). */
.dk-tabs > a.dk-tab-shop, .dk-top-profile { display: none !important; } /* nav is Home, Booking, Profile (owner, 2026-10-02) */

/* Home has the profile icon at the top right, so the Beta sign moves to the top left there. */
body.dk-home::after { right: auto; left: max(12px, calc((100vw - 430px) / 2 + 12px)); }