/* Phone corrections for the booking flow, plus the boot splash.
 *
 * The export is a fixed 430px-wide artboard with mouse-shaped affordances. On a
 * real iPhone that needs: a viewport unit that survives the collapsing URL bar,
 * safe-area room under the sticky summary bar, tap targets that clear 44px, and
 * inputs at 16px so focusing one doesn't zoom the page.
 *
 * React re-serializes every inline style attribute, so these rules reach the
 * export through the data-m tokens build-booking.py stamps on, and need
 * !important to beat the inline declaration. If a hook stops matching, the
 * build fails rather than letting a rule here silently do nothing.
 */

/* ---------- page shell ---------- */

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg3, #E7E7E3);
}

body {
  /* Rubber-band overscroll shows through to the page background, not white. */
  background: var(--bg3, #E7E7E3);
  overscroll-behavior-y: none;
}

/* 100vh on iOS is the *tallest* viewport, so the layout runs under the URL bar
   and the sticky footer sits off-screen until you scroll. dvh tracks it. */
[data-m="shell"] { min-height: 100dvh !important; }

[data-m="phone"] {
  min-height: 100dvh !important;
  /* Keeps the phone column visible against the page backdrop on wide screens. */
  box-shadow: 0 0 0 1px var(--line1, rgba(22, 21, 19, .09));
}

@media (min-width: 500px) {
  [data-m="phone"] { box-shadow: 0 12px 40px -18px rgba(23, 18, 15, .3); }
}

/* Notch clearance when launched from the home screen. */
[data-m="topbar"] { padding-top: max(16px, env(safe-area-inset-top)) !important; }

/* ---------- touch behaviour ---------- */

button, a, input, [role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* no 300ms double-tap-to-zoom delay */
}

button { user-select: none; -webkit-user-select: none; }

/* Anything under 16px zooms the page on focus in iOS Safari. */
input, textarea, select { font-size: 16px !important; }

/* ---------- tap targets ---------- */

/* Time slots: the export's 11px padding lands around 35px tall. */
[data-m="slotgrid"] > button {
  min-height: 46px !important;
  font-size: 14px !important;
}

/* Day strip: seven cells across a 320px screen leaves ~34px each, which is
   under the target size and visually cramped. Tighten the gutters instead. */
[data-m="daystrip"] { gap: 5px !important; }

[data-m="daystrip"] > button {
  min-height: 62px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 360px) {
  [data-m="daystrip"] { gap: 3px !important; }
  [data-m="content"] { padding-left: 14px !important; padding-right: 14px !important; }
  [data-m="topbar"] { padding-left: 14px !important; padding-right: 14px !important; }
  [data-m="sumbar"] { padding-left: 14px !important; padding-right: 14px !important; }
}

/* ---------- sticky summary bar ---------- */

[data-m="sumbar"] {
  padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
}

/* ---------- hover, on devices that have none ---------- */

/* support.js applies style-hover inline on mouseenter. After a tap iOS emits a
   synthetic mouseover, so the pressed card can keep its hover shadow until you
   touch elsewhere. Flattening the shadow is enough to hide the artefact. */
@media (hover: none) {
  [data-m="content"] button:hover { box-shadow: none !important; }
}

/* ---------- boot splash ---------- */

/* The export renders on the first frame; the book arrives a fetch later. This
   covers the gap so the shop never flashes as fully booked. */
#salua-boot {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg2, #FAFAF8);
  transition: opacity .3s ease;
}

#salua-boot.gone { opacity: 0; pointer-events: none; }

.salua-boot-inner { text-align: center; padding: 0 24px; }

.salua-boot-mark {
  font: 600 26px/1.1 var(--font-display, 'Bricolage Grotesque'), system-ui, sans-serif;
  letter-spacing: -.03em;
  color: var(--ink, #161513);
}

.salua-boot-sub {
  margin-top: 8px;
  font: 400 9.5px/1 var(--font-mono, 'IBM Plex Mono'), ui-monospace, monospace;
  letter-spacing: .16em;
  color: var(--tx3, #8E9095);
}

.salua-boot-bar {
  margin: 18px auto 0;
  width: 120px;
  height: 2px;
  border-radius: 99px;
  background: var(--line2, rgba(22, 21, 19, .14));
  overflow: hidden;
}

.salua-boot-bar i {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 99px;
  background: var(--pos, #1E8A6A);
  animation: salua-boot-slide 1.1s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes salua-boot-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.salua-boot-err {
  letter-spacing: .04em;
  line-height: 1.6;
  max-width: 26em;
  margin-left: auto;
  margin-right: auto;
}

.salua-boot-retry {
  margin-top: 18px;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  background: var(--pos, #1E8A6A);
  color: #fff;
  font: 600 13px/1 var(--font-body, Figtree), system-ui, sans-serif;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .salua-boot-bar i { animation: none; }
  #salua-boot { transition: none; }
}