/* The onboarding overlay — app.supahumans.com/onboarding, running inside the
   site instead of a new tab.

   Loaded on EVERY public page by applyRequestEdits(), including the Webflow
   pages that never load site.css, so every value here is literal: the redesign
   tokens (--pine, --paper, …) do not exist on most of the pages this runs on.

   The z-index sits above the Webflow navbar (z 1000), the redesign's sticky
   chrome and the cookie bar, so the overlay is never half-covered. */

.sh-embed[hidden] { display: none !important; }

.sh-embed {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sh-embed-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 42, 37, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: sh-embed-fade .18s ease-out;
}

/* Sized to the booking flow's own layout. Its three-column form needs 1120px
   of frame, and at 1180px it measures 604px tall including its own 44px of
   padding — so the panel is exactly that, and the space under the card matches
   the space above it. Below 1120px of frame the flow stacks and grows past any
   sensible panel height, so the panel takes what it can get and the flow
   scrolls inside it. */
.sh-embed-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  height: 100%;
  background: #F9F9F9;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 32px 90px rgba(14, 42, 37, .38);
  animation: sh-embed-rise .24s cubic-bezier(.2, .7, .3, 1);
}

@media (min-width: 1168px) {
  .sh-embed-panel { height: min(604px, 100%); }
}

.sh-embed-frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  background: #F9F9F9;
}

/* Hidden until the frame answers, so the panel is never a blank white box. */
.sh-embed-frame[data-loading] { visibility: hidden; }

/* ONE close button, not two.
 *
 * The booking flow draws its own close control in the card's top right corner
 * — a 34px white pill, 15px inside the card, which is itself inset by the
 * page padding the flow derives from its frame width. Nothing here can hide a
 * control inside a cross-origin frame, so this button sits exactly on top of
 * it: same place, same look, 36px so it covers the 34px underneath it
 * completely. The reader sees one X, and it closes the overlay at once instead
 * of loading www.assistantly.com into the frame the way the flow's own link
 * does.
 *
 * The offsets below mirror the flow's padding — clamp(16px, 4vw, 44px) across
 * and clamp(20px, 4vw, 44px) down, measured against ITS viewport, which is the
 * panel. Container query units read the panel's width, so the two stay lined
 * up at every size without measuring anything in script. Browsers without
 * container queries fall back to the fixed desktop inset above. */
.sh-embed-x {
  position: absolute;
  top: 58px;
  right: 58px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #E7EAE8;
  border-radius: 100px;
  background: #FFFFFF;
  color: #55635C;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

@supports (container-type: inline-size) {
  .sh-embed-panel { container-type: inline-size; }
  .sh-embed-x {
    top: calc(clamp(20px, 4cqw, 44px) + 14px);
    right: calc(clamp(16px, 4cqw, 44px) + 14px);
  }
}

.sh-embed-x:hover { background: #E7EAE8; border-color: #C9D2CE; color: #10201C; }
.sh-embed-x:focus-visible { outline: 2px solid #183A33; outline-offset: 2px; }
.sh-embed-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.sh-embed-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  color: #183A33;
}

.sh-embed-spin {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(24, 58, 51, .14);
  border-top-color: #183A33;
  border-radius: 100px;
  animation: sh-embed-spin .7s linear infinite;
}

.sh-embed-msg {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
}

.sh-embed-out {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 100px;
  background: #183A33;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.sh-embed-out:hover { background: #22483F; color: #FFFFFF; }

@keyframes sh-embed-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sh-embed-rise { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }
@keyframes sh-embed-spin { to { transform: rotate(360deg) } }

/* Full bleed on phones: a booking calendar needs every pixel. The close button
   keeps tracking the flow's own one — the padding it clamps to is smaller
   there, and the container query follows it. */
@media (max-width: 760px) {
  .sh-embed { padding: 0; }
  .sh-embed-panel { width: 100%; height: 100%; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sh-embed-backdrop, .sh-embed-panel { animation: none; }
  .sh-embed-spin { animation-duration: 1.6s; }
}