/* Grizzly Beam — full-screen "Book a call" modal.
   All colors, radii and shadows come from the tokens in core.css; there is
   not a single new brand value here. */

.bkg {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  background: var(--ink);
  color: var(--tx-l);
  font-family: var(--f-body);
}
.bkg.is-open { display: block; }
body.bkg-open { overflow: hidden; }

.bkg__inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.bkg.is-ready .bkg__inner { opacity: 1; transform: none; }

/* Beam field — cloned from the BeamField component, same as "Our services".
   Sits below the content and does not catch clicks. */
.bkg__bg { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }

/* -------------------------------- header ---------------------------------- */

.bkg__top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding: var(--s-16) var(--s-24);
  border-bottom: 1px solid rgba(236, 232, 225, 0.16);
}
.bkg__brand {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(236, 232, 225, 0.65);
}
.bkg__close {
  appearance: none;
  border: 1px solid rgba(236, 232, 225, 0.35);
  background: transparent;
  color: var(--tx-l);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-6);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.bkg__close:hover { border-color: rgba(236, 232, 225, 0.8); background: rgba(236, 232, 225, 0.06); }
.bkg__close:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* --------------------------------- body ----------------------------------- */

.bkg__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.bkg__wrap {
  max-width: 58rem;
  margin: 0 auto;
  padding: var(--s-32) var(--s-24) var(--s-48);
}
.bkg__h {
  font-family: var(--f-disp);
  font-weight: var(--w-h1);
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}
.bkg__lede {
  margin: 0 0 var(--s-24);
  color: rgba(236, 232, 225, 0.72);
  font-size: 1.05rem;
  max-width: 34rem;
}
.bkg__tznote {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(236, 232, 225, 0.55);
  margin: 0 0 var(--s-24);
}

/* ------------------------------ slot picker -------------------------------- */

.bkg__cols { display: grid; grid-template-columns: 13.5rem 1fr; gap: var(--s-32); align-items: start; }

.bkg__days {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* A three-week list would otherwise drag the whole layout down and leave the
     slots hanging in empty space. A capped height keeps the weight at the top. */
  max-height: 24rem;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 4px;
}
.bkg__day {
  appearance: none;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--r-10);
  background: transparent;
  color: var(--tx-l);
  font-family: var(--f-body);
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.bkg__day:hover { background: rgba(236, 232, 225, 0.07); }
.bkg__day:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.bkg__day.is-active { background: var(--tx-l); color: var(--ink); }
.bkg__day-n { font-weight: var(--w-body-strong); font-size: 0.98rem; }
.bkg__day-c { font-family: var(--f-mono); font-size: 11px; opacity: 0.65; }

.bkg__slots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.bkg__slot {
  appearance: none;
  border: 1px solid rgba(236, 232, 225, 0.18);
  border-radius: var(--r-10);
  background: rgba(236, 232, 225, 0.05);
  color: var(--tx-l);
  padding: 0.9rem 1rem;
  cursor: pointer;
  text-align: left;
  font-family: var(--f-body);
  box-shadow: var(--el-sm);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.bkg__slot:hover { border-color: var(--amber); background: rgba(236, 232, 225, 0.09); transform: translateY(-1px); box-shadow: var(--el-md); }
.bkg__slot:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.bkg__slot-t {
  display: block;
  font-family: var(--f-mono);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.bkg__slot-l { display: block; margin-top: 3px; font-size: 12px; color: rgba(236, 232, 225, 0.6); }

.bkg__panel-h {
  font-family: var(--f-body);
  font-weight: var(--w-body-strong);
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(236, 232, 225, 0.16);
}

/* --------------------------------- form ----------------------------------- */

.bkg__form { max-width: 34rem; }
/* The bar with the selected slot must share its right edge with the fields
   below — otherwise it reads as if it belonged to another block. */
.bkg__chosen { max-width: 34rem; }
.bkg__chosen {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(236, 232, 225, 0.18);
  /* Amber left edge at 2px — the same weight as .ck__gpc in consent.css, which
     already carries that role on the site (a highlighted note). .bkg__msg goes
     to 3px because it mirrors .fm-status from components.css, the form status
     message. */
  border-left: 2px solid var(--amber);
  border-radius: var(--r-10);
  background: rgba(236, 232, 225, 0.05);
  padding: 0.85rem 1rem;
  margin: 0 0 var(--s-24);
}
.bkg__chosen-t { font-family: var(--f-mono); font-size: 0.98rem; }
.bkg__chosen-s { display: block; font-size: 12px; color: rgba(236, 232, 225, 0.6); margin-top: 2px; }
.bkg__change {
  margin-left: auto;
  appearance: none;
  border: 0;
  background: none;
  color: var(--tx-l);
  font-family: var(--f-body);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bkg__change:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.bkg__field { margin-bottom: var(--s-16); }
.bkg__label {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(236, 232, 225, 0.65);
  margin-bottom: 0.35rem;
}
.bkg__opt { text-transform: none; letter-spacing: 0; opacity: 0.75; }
.bkg__in {
  width: 100%;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--tx-l);
  background: rgba(236, 232, 225, 0.05);
  border: 1px solid rgba(236, 232, 225, 0.22);
  border-radius: var(--r-6);
  padding: 0.75rem 0.85rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.bkg__in:focus {
  outline: none;
  border-color: var(--amber);
  background: rgba(236, 232, 225, 0.08);
  box-shadow: 0 0 0 3px rgba(210, 149, 46, 0.25);
}
.bkg__in[aria-invalid='true'] { border-color: #E5765E; }
.bkg__in::placeholder { color: rgba(236, 232, 225, 0.38); }
textarea.bkg__in { min-height: 6.5rem; resize: vertical; }
.bkg__err { display: none; margin: 0.35rem 0 0; font-size: 13px; color: #E5765E; }
.bkg__err.is-on { display: block; }

/* Bot trap — hidden from people, visible to scripts. */
.bkg__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The button is the site's ordinary .pill .pill--solid — amber background, the
   same transition, the same press to 0.97 and the same layered text. Only the
   page body size (§07) and the "in progress" state are added here. */
.bkg__submit {
  border: 0;
  cursor: pointer;
  padding: var(--s-16) var(--s-32);
  height: auto;
  font-size: 1.25rem;
  line-height: 1.25;
}
.bkg__submit:disabled { opacity: 0.55; cursor: default; }
.bkg__submit:focus-visible { outline: 2px solid var(--tx-l); outline-offset: 3px; }
.bkg__note { margin: var(--s-16) 0 0; font-size: 13px; color: rgba(236, 232, 225, 0.55); }

/* -------------------------------- outcomes -------------------------------- */

.bkg__msg {
  border: 1px solid rgba(236, 232, 225, 0.18);
  border-left: 3px solid #E5765E;
  border-radius: var(--r-10);
  background: rgba(236, 232, 225, 0.05);
  padding: 0.9rem 1rem;
  margin: 0 0 var(--s-16);
  font-size: 0.95rem;
}
.bkg__ok-mark {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--success);
  color: var(--white);
  display: grid; place-items: center;
  font-size: 1.5rem;
  margin-bottom: var(--s-16);
}
.bkg__ok-when {
  font-family: var(--f-mono);
  font-size: 1.15rem;
  margin: 0 0 0.2rem;
}
.bkg__ok-sub { color: rgba(236, 232, 225, 0.72); margin: 0 0 var(--s-24); }
.bkg__ics {
  display: inline-block;
  border: 1px solid rgba(236, 232, 225, 0.35);
  border-radius: var(--r-6);
  padding: 0.7rem 1.1rem;
  color: var(--tx-l);
  text-decoration: none;
  font-size: 0.95rem;
  transition: border-color 0.18s ease;
}
.bkg__ics:hover { border-color: rgba(236, 232, 225, 0.8); }

.bkg__skel {
  height: 4.6rem;
  border-radius: var(--r-10);
  background: linear-gradient(90deg, rgba(236,232,225,0.05) 25%, rgba(236,232,225,0.12) 50%, rgba(236,232,225,0.05) 75%);
  background-size: 200% 100%;
  animation: bkg-shine 1.3s ease-in-out infinite;
}
@keyframes bkg-shine { to { background-position: -200% 0; } }

/* ------------------------------- responsive -------------------------------- */

/* iOS Safari zooms the VISUAL viewport whenever a focused text-entry field computes
   to less than 16px. The root size here is clamp(11px, 3.125vw, 13.4px) on phones and
   12px at tablet width, and .bkg__in is 1rem, so every field in this form sat between
   11px and 13.4px — under the threshold at every mobile size.

   That alone would be survivable, but booking.js focuses the first field the moment the
   form step renders, so the zoom fired on slot selection without the visitor tapping
   anything. And because .bkg is position:fixed inset:0 with body scroll locked, a zoomed
   overlay is larger than the visual viewport and cannot be scrolled back: the form read
   as oversized and spilling off screen. That is the bug this rule closes.

   Condition is an OR: width catches phones and small tablets, pointer:coarse catches
   large touch screens (iPad Pro in landscape is past any sane width breakpoint but still
   zooms). max() rather than a flat 16px so the rule can never shrink the field if the
   root scale is ever raised. */
@media (pointer: coarse), (max-width: 860px) {
  .bkg__in { font-size: max(16px, 1rem); }
}

@media (max-width: 860px) {
  .bkg__cols { grid-template-columns: 1fr; gap: var(--s-16); }
  .bkg__days {
    flex-direction: row;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.4rem;
    scrollbar-width: thin;
  }
  .bkg__day {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    border: 1px solid var(--stone3);
    min-width: 6.5rem;
  }
  .bkg__slots { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
  .bkg__panel-h { display: none; }
  .bkg__wrap { padding: var(--s-24) var(--s-16) var(--s-32); }
}

@media (prefers-reduced-motion: reduce) {
  .bkg__inner { transition: none; }
  .bkg__slot { transition: none; }
  .bkg__skel { animation: none; }
}