/* ==========================================================================
   Virtual Hotelier template kit: vh-landscape.css  (touch devices held sideways + framed views)
   Ported from artifact/index.live.html: vh-gold-shine 52-54 (--vh-hide consumers), vh-landscape-foot 249-254,
   vh-landscape-merge 267-280, vh-framed-foot 394-412, vh-askvh-bottom 425-442, vh-root-bottom 459-470.

   The host's selectors come from VH.landscape, so vh-landscape.js tags the matching elements with marker
   classes and writes the numbers to CSS custom properties; every rule here is static.
     .vh-l-foot        VH.landscape.footerBar       the footer's gold bar (last thing on the page)
     .vh-l-lift        VH.landscape.footerLift      optional: block above the bar that a floating pill would cover when framed
     .vh-l-util        VH.landscape.utilityBar      the utility / promo bar folded into the header (only when mergeHeader)
     .vh-l-util-icon   VH.landscape.iconSelector    its icons (28 px when merged)
     .vh-l-sep         VH.landscape.separators      its separators (hidden when merged)
     .vh-l-hide        VH.landscape.mergeHide       anything else inside it that must go while merged (e.g. link labels)
     .vh-l-header      VH.landscape.header          the site header (pinned to top:0 while merged, unless headerTop:false)
     .vh-l-btt         VH.landscape.backToTop       the host's back-to-top button
     .vh-l-nudge       VH.landscape.backToTopNudge  optional pill next to it
     .vh-l-chat        VH.landscape.chatButton      the floating chat button (#ask-vh-trigger from vh-chat)
     .vh-l-sheet       VH.landscape.chatSheet       the chat sheet (#concierge-sheet from vh-chat)
   html state classes: .vh-framed (inside another page's frame), .vh-near-end (scrolled to the page end),
     .vh-btt-on (chat button may show: scrollY > 200 and bottom reached), .vh-l-haschat (a chat button exists),
     .vh-l-stack (desktop: the host's back-to-top button overlapped the chat button and is lifted above it).
   Custom properties: --vh-hide (px hidden below a frame, from the IntersectionObserver probe), --vh-vis (visible
     height when framed), --vh-foot-color, --vh-merge-h/-l/-r/-z/-color/-icon, --vh-l-chat-off, --vh-l-btt-off,
     --vh-l-btt-off-tab, --vh-l-btt-bottom-tab, --vh-l-nudge-bottom-tab, --vh-l-foot-pr, --vh-l-foot-pr-land,
     --vh-l-btt-desk / --vh-l-btt-desk-right (desktop stacking).
   Nothing here applies to a desktop page unless an html state class says so (.vh-framed, .vh-l-stack, .vh-l-haschat).
   "html body <marker> ... !important" beats the host stylesheet whatever the load order (pitfall P11).
   Media queries use 640px / 641px; vh-core.js rewrites them when VH.breakpoint != 640.
   ========================================================================== */

/* ---------- --vh-hide contract (vh-gold-shine 52-54): the strip of this page a frame runs below the screen ---------- */
html { --vh-hide: 0px; }
/* only a framed page can have a hidden strip, so only there does the page grow by it and the floating buttons lift over it
   (scoped so that a desktop host's own body padding-bottom / button translate are never touched) */
html.vh-framed body { padding-bottom: var(--vh-hide); }
html.vh-framed .vh-l-chat, html.vh-framed .vh-l-btt, html.vh-framed .vh-l-nudge { translate: 0 calc(-1 * var(--vh-hide)); }

/* ---------- P9: the page ends on the footer's gold bar (vh-root-bottom 463-464) ----------
   The home-indicator safe area is added inside that bar (and to every fixed button), so the root must not add
   its own strip: in dark mode that strip showed the page colour under the gold. Scoped to touch devices. */
@media (pointer: coarse) {
  :root { padding-bottom: 0 !important; }
  html body .vh-l-foot { padding-bottom: calc(clamp(12px, 1.4svh, 20px) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Touch devices held sideways (vh-landscape-foot 251-254, vh-root-bottom 467-469, vh-askvh-bottom 434-437) ---------- */
@media (pointer: coarse) and (orientation: landscape) {
  /* stretch the gold bar down past anything the screen or app frame hides */
  html body { padding-bottom: 0 !important; }
  html body .vh-l-foot { padding-bottom: calc(12px + max(var(--vh-hide, 0px), env(safe-area-inset-bottom, 0px), 14px)) !important; }
  /* at the page end anything beyond it (elastic over-scroll, a home-indicator gap) is painted the bar colour */
  html.vh-near-end { background-color: var(--vh-foot-color, #c19e4a) !important; }
  /* the chat button stays hidden until the visitor reaches the page end (vh-landscape.js toggles html.vh-btt-on) */
  html body .vh-l-chat { opacity: 0 !important; pointer-events: none !important; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
  html.vh-btt-on body .vh-l-chat { opacity: 1 !important; pointer-events: auto !important; visibility: visible; transition: opacity .3s ease, visibility 0s; }
}

/* ---------- Framed (e.g. the Claude app): the frame can run below the screen (vh-framed-foot 397-405) ----------
   Floating buttons are anchored from the visible height (--vh-vis), not the frame height; the bar keeps extra
   scroll room; the chat sheet is 75% tall so its message box stays on screen. Offsets are measured by
   vh-landscape.js (inset + button heights + 10 px gap); the fallbacks are the source's 72/52 px buttons. */
@media (pointer: coarse) and (orientation: landscape) {
  html.vh-framed body { padding-bottom: 0 !important; }
  html.vh-framed body .vh-l-chat { top: calc(var(--vh-vis, 100vh) - var(--vh-l-chat-off, 84px)) !important; bottom: auto !important; translate: none !important; }
  html.vh-framed body .vh-l-btt, html.vh-framed body .vh-l-nudge { top: calc(var(--vh-vis, 100vh) - var(--vh-l-btt-off, 131.6px)) !important; bottom: auto !important; translate: none !important; }
  html.vh-framed body .vh-l-sheet { top: 0 !important; bottom: auto !important; height: 75vh !important; height: 75dvh !important; max-height: 75dvh !important; padding-bottom: 0 !important; }
  html.vh-framed body .vh-l-foot { padding-bottom: calc(12px + max(var(--vh-hide, 0px), env(safe-area-inset-bottom, 0px), 50px)) !important; }
  /* a floating pill at the page end sits level with the last footer links: lift them clear of it */
  html.vh-framed body .vh-l-lift { padding-bottom: 70px !important; }
}
/* Tablets held sideways keep the full-size chat button (phones scale it to 80%), so back-to-top and its pill sit
   higher to keep the same 10 px gap (vh-framed-foot 407-411) */
@media (pointer: coarse) and (orientation: landscape) and (min-height: 541px) and (max-width: 1180px) {
  html body .vh-l-btt { bottom: calc(var(--vh-l-btt-bottom-tab, 94px) + env(safe-area-inset-bottom, 0px)) !important; }
  html body .vh-l-nudge { bottom: calc(var(--vh-l-nudge-bottom-tab, 100px) + env(safe-area-inset-bottom, 0px)) !important; }
  html.vh-framed body .vh-l-btt, html.vh-framed body .vh-l-nudge { top: calc(var(--vh-vis, 100vh) - var(--vh-l-btt-off-tab, 146px)) !important; }
}

/* ---------- 641-1180 px wide: the round chat button floats over the gold bar at the page end, keep the
   right-aligned copyright line clear of it (vh-askvh-bottom 428-433; only while a chat button exists) ---------- */
@media (min-width: 641px) and (max-width: 1180px) {
  html.vh-l-haschat body .vh-l-foot { padding-right: var(--vh-l-foot-pr, 108px) !important; }
}
@media (pointer: coarse) and (orientation: landscape) and (min-width: 641px) and (max-width: 1180px) {
  html.vh-l-haschat body .vh-l-foot { padding-right: var(--vh-l-foot-pr-land, 96px) !important; }
}

/* ---------- Desktop and portrait tablets: a host back-to-top button that would sit under the round chat button
   (72px, 24px in from the bottom-right corner; 12px up to 1180px wide) is lifted above it with the usual 10px gap
   and centred on it. vh-landscape.js adds html.vh-l-stack only when the two boxes overlap (measured with the host's
   own position), or always when VH.landscape.offsets.backToTopDesktop is set; VH.landscape.stackDesktop:false turns
   it off. Never on phones (the button is hidden there) nor on touch devices held sideways (anchored above). ---------- */
html.vh-l-stack body .vh-l-btt { bottom: calc(var(--vh-l-btt-desk, 106px) + env(safe-area-inset-bottom, 0px)) !important; right: var(--vh-l-btt-desk-right, 34px) !important; left: auto !important; }
html.vh-l-stack body .vh-l-nudge { bottom: calc(var(--vh-l-btt-desk, 106px) + 6px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---------- Short touch landscape (phones sideways): fold the utility bar into the header so there are only
   two bars (vh-landscape-merge 269-279). Icons 28 px, separators hidden, bar centred between logo and menu. ---------- */
@media (pointer: coarse) and (orientation: landscape) and (min-width: 641px) and (max-height: 540px) {
  html body .vh-l-util { position: absolute !important; top: 0; left: var(--vh-merge-l, 96px) !important; right: var(--vh-merge-r, 64px) !important; height: var(--vh-merge-h, 83px) !important; background: none !important; background-image: none !important; border: 0 !important; box-shadow: none !important; z-index: var(--vh-merge-z, 30); display: flex; align-items: center; justify-content: center; gap: 10px; }
  html body .vh-l-util::after, html body .vh-l-util::before { display: none !important; }
  html body .vh-l-util, html body .vh-l-util * { color: var(--vh-merge-color, #f4ead2) !important; background-image: none; }
  html body .vh-l-util svg { stroke: currentColor; }
  html body .vh-l-util .vh-l-util-icon { width: var(--vh-merge-icon, 28px) !important; height: var(--vh-merge-icon, 28px) !important; stroke-width: 1.8; }
  html body .vh-l-util * { flex-shrink: 0; }
  html body .vh-l-util .vh-l-sep, html body .vh-l-sep, html body .vh-l-util .vh-l-hide { display: none !important; }
  /* a fixed / sticky header that sat under the bar moves up to the top edge (set VH.landscape.headerTop:false to keep the host's offset) */
  html.vh-l-header-top body .vh-l-header { top: 0 !important; }
  /* the source bar is absolute (it scrolls away with the page); VH.landscape.mergeFixed:true keeps it on a fixed header */
  html.vh-l-merge-fixed body .vh-l-util { position: fixed !important; }
}

/* ---------- Phone view: while the launcher or a section screen hides the chat button it also leaves the Tab
   order (vh-askvh-bottom 439-441); vh-chat.css fades it, this only removes it from focus ---------- */
@media (max-width: 640px) {
  html.launch-active .vh-l-chat, html.nf-open .vh-l-chat { visibility: hidden; transition: opacity 260ms ease, transform 300ms ease, visibility 0s linear 260ms; }
}