/* ======================================================================
   BOOKING SHEET — a floating layer that frames the HubSpot meetings page.
   Loaded AFTER preview-system.css, by any page with a "Book a demo" or
   "Talk to us" CTA.

   Deliberately a separate file rather than part of preview-system.css,
   following the nav-mono.css precedent: it is new and unsettled. Fold it
   into the system once it has survived a few weeks on three pages.

   BOOKKEEPING: /preview/knowledge/ already has its own dialog, .veil +
   .modal in knowledge-page.css, for the "review your Skyscape" step. That
   is a second dialog pattern and one of the two should go. .veil/.modal is
   the more generic shell of the two; the right end state is that shell in
   preview-system.css with Knowledge's .m-head/.surf/.m-body content
   classes staying page-local, and this file deleted. Not doing it now,
   because knowledge-page.css shipped hours ago and a refactor of it is
   not what "wire up the demo button" asked for. Do it the next time that
   file is open for its own reasons.

   ----------------------------------------------------------------------
   WHY A PLAIN IFRAME AND NO HUBSPOT SCRIPT

   HubSpot's supplied embed is a div plus MeetingsEmbedCode.js, which
   builds the iframe for you. We frame the URL directly instead and load
   no third-party JavaScript. On a healthcare site that sits two bands
   below "No advertising. No sponsored answers. Ever.", a tracking script
   on every page view is the wrong trade.

   WHAT THAT COSTS, so nobody rediscovers it as a bug:
     1. No auto-resize. Their script measures the iframe content and grows
        it. We give the frame a preferred height instead (--book-h) and
        flex it to the height the panel actually has, so on a short window
        the frame shrinks to fit and the form's own scroll always reaches
        its submit button. If HubSpot changes its layout and the calendar
        starts clipping, --book-h is the knob.
     2. Thinner attribution. The script hands HubSpot the visitor's
        hubspotutk cookie, tying the booking to their existing contact
        record and original source. A bare iframe does not. The booking
        still works and still creates the contact — but source attribution
        comes from URL parameters, not the cookie. If campaign attribution
        on these bookings matters, put UTM parameters on the URL in the
        page's BOOKING_URL constant rather than reintroducing the script.

   The iframe src is set on FIRST OPEN, never in the markup. Nothing is
   requested from HubSpot until someone actually clicks. Do not move the
   URL into a src attribute "to make it simpler" — that sends every
   visitor to HubSpot on page load and throws away the one real privacy
   property this approach has.

   ON PHONES THE SHEET DOES NOT OPEN. The CTA is an ordinary link whose
   href is the real booking URL, and the script only intercepts the click
   above 900px. A scheduler squeezed into a phone-width iframe is worse
   than its own mobile layout. This also means the whole thing degrades to
   a working link with JavaScript off.

   FOCUS: the close button takes focus on open, Escape closes, and focus
   returns to the CTA that opened it. There is deliberately NO focus trap.
   Tab moves into the cross-origin iframe and script on this side cannot
   see or manage focus in there, so a trap would be a fiction. Escape is
   the documented way out and the close button is the first thing focused.
   ====================================================================== */

:root{
  /* Tall enough for the HubSpot calendar step without an inner scrollbar.
     See cost (1) above — this is the knob if the calendar starts clipping. */
  --book-h:640px;
}

/* THE CTA LABEL. [data-book] marks exactly the booking CTAs and nothing
   else, so the all-caps lives here rather than in the markup: the HTML
   keeps reading "Book a demo", a screen reader announces it normally, and
   one rule covers every page that loads this file.
   .btn in preview-system.css sets no letter-spacing of its own, and Nunito
   caps at weight 800 need tracking that lowercase does not. .06em is the
   value nav-mono.css already uses for the uppercased Log in chip that the
   bar CTA sits beside, so the two read as one system.
   The second selector exists only to outrank .navmid .m-only.btn in
   preview-system.css, which resets text-transform and letter-spacing on
   the menu twin of a bar button. It deliberately does NOT reach a menu
   twin that is a plain link rather than a button: the home page's twin is
   mono uppercase from nav-mono.css and stays as it is. */
[data-book],
.navmid .m-only.btn[data-book]{text-transform:uppercase;letter-spacing:.06em}

.sheet{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  padding:4vh 16px;
  background:rgba(18,32,46,.60);
}
.sheet.open{display:flex}

.sheet-panel{
  background:var(--card);
  border:1px solid var(--cline);
  border-radius:var(--r-card);
  width:100%;max-width:780px;max-height:92vh;
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  box-shadow:0 30px 90px rgba(18,32,46,.42);
  animation:sheet-rise .2s cubic-bezier(.2,0,.2,1);
}
@keyframes sheet-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sheet-panel{animation:none}}

.sheet-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:20px 24px 15px;
  border-bottom:1px solid var(--cline);
}
.sheet-head h3{margin:0;font-size:1.25rem}
.sheet-head p{font-size:.88rem;color:var(--muted);margin-top:4px}

.sheet-x{
  flex:none;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--cline);background:var(--card);color:var(--ink);
  font-family:var(--body);font-size:19px;line-height:1;cursor:pointer;
}
.sheet-x:hover{border-color:var(--sky);color:var(--sky)}

/* The frame itself. min-height:0 on the flex parent chain is what stops
   the iframe from pushing the panel past max-height. */
.sheet-body{flex:1;min-height:0;display:flex;flex-direction:column}
.bookframe{display:block;width:100%;flex:1 1 var(--book-h);min-height:0;border:0}

.sheet-foot{
  padding:12px 24px 15px;
  border-top:1px solid var(--cline);
  font-size:.84rem;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
}

/* The escape hatch. If HubSpot ever starts refusing to be framed, the
   iframe goes blank and — being cross-origin — nothing on this side can
   detect it. This link is the only thing standing between that and a
   dead end, so do not remove it to tidy up the footer. */
.sheet-foot a{color:var(--sky-ink);font-weight:700}

@media (max-width:900px){
  /* Belt and braces: the script already declines to open the sheet at
     this width, but if it ever fails to load, this keeps a half-rendered
     layer off the screen rather than trapping someone in it. */
  .sheet{display:none !important}
}