/* ==========================================================================\n   Histriphy 21.2.1 · Universal Viewport Stabilization\n   Final cascade layer loaded after desktop/tablet/mobile/typography sheets.\n   Goals: no viewport escape, height-aware modals, safe flex/grid shrinkage, and\n   consistent behavior from small notebooks through tablets and phones.\n   ========================================================================== */

:root{
  --hv-safe-x: max(12px, env(safe-area-inset-left));
  --hv-safe-r: max(12px, env(safe-area-inset-right));
  --hv-safe-y: max(12px, env(safe-area-inset-top));
  --hv-safe-b: max(12px, env(safe-area-inset-bottom));
}

html,body,.site-shell{max-width:100%;overflow-x:clip}
@supports not (overflow:clip){html,body,.site-shell{overflow-x:hidden}}

/* Flex/grid descendants should be allowed to shrink rather than force the page
   wider than the viewport. This is intentionally scoped to app/page shells. */
.site-shell :where(main,section,article,aside,header,footer,nav,form,fieldset),
.site-shell :where(.section-inner,.header-inner,.footer-inner,.map-library-wide,.map-library-page,.map-library-hero,.map-library-results,.map-detail-page,.map-body-v20,.map-hero-v19,.country-compare-page,.country-compare-content,.account-dashboard-page,.simple-page-shell,.simple-submit-shell,.legal-reading-shell,.editorial-shell){
  min-width:0;
  max-width:100%;
}

.site-shell :where(img,svg,video,canvas,iframe){max-width:100%}
.site-shell :where(input,select,textarea,button){max-width:100%}

/* Prevent long metadata/file names from pushing cards or sidebars out. */
.site-shell :where(.map-card-library,.map-related-card-v41,.map-overview-panel-v20,.map-access-panel-v20,.map-technical-details,.account-content,.account-map-card,.license-credit-box,.license-benefit-item){min-width:0}
.site-shell :where(.map-card-library h3,.map-related-copy,.license-credit-box strong,.account-map-card-body,.map-meta-groups-v20){overflow-wrap:anywhere}

/* --------------------------------------------------------------------------
   UNIVERSAL MODAL CONTRACT
   Every full-screen modal must fit inside the *actual* dynamic viewport.
   The overlay owns scrolling fallback; the dialog never exceeds the viewport.
   -------------------------------------------------------------------------- */
.license-modal-overlay,.guest-limit-modal-overlay{
  box-sizing:border-box!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  padding:
    max(14px,env(safe-area-inset-top))
    max(14px,env(safe-area-inset-right))
    max(14px,env(safe-area-inset-bottom))
    max(14px,env(safe-area-inset-left))!important;
}

.license-modal-box,.guest-limit-modal{
  box-sizing:border-box!important;
  width:min(640px,calc(100vw - 28px))!important;
  max-width:640px!important;
  max-height:calc(100dvh - 28px)!important;
  margin:auto!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable;
}

/* Download dialog: compact by default without sacrificing information. */
.license-modal-box{padding:28px!important}
.license-modal-intro{margin:18px 0 19px!important;gap:15px!important}
.license-modal-icon{width:52px!important;height:52px!important;border-radius:15px!important}
.license-modal-icon svg{width:27px!important;height:27px!important}
.license-modal-box h3{font-size:clamp(1.55rem,2.6vw,1.9rem)!important}
.license-modal-intro p{margin-top:6px!important;font-size:.86rem!important;line-height:1.5!important}
.license-modal-benefits{gap:9px!important;margin-bottom:12px!important}
.license-benefit-item{min-height:92px!important;padding:13px!important;gap:11px!important}
.license-benefit-item.is-restricted{min-height:auto!important}
.license-benefit-item strong{font-size:.82rem!important;margin-bottom:3px!important}
.license-benefit-item span:not(.license-benefit-icon){font-size:.7rem!important;line-height:1.42!important}
.license-format-picker{margin-bottom:12px!important;padding:12px!important}
.license-format-heading{margin-bottom:8px!important}
.license-format-grid{gap:7px!important}
.license-format-grid label>span{min-height:50px!important;padding:8px 9px!important}
.license-credit-box{margin-bottom:12px!important;padding:11px 13px!important}
.license-modal-meta-row{padding:1px 1px 12px!important}
.license-modal-actions{padding-top:13px!important;gap:9px!important}
.license-modal-actions .button{min-height:44px!important}
.license-confirm-button{min-width:205px!important}

/* Short desktop/notebook screens are a separate responsive axis from width.
   Use a denser 3-column license summary so the modal fits without forcing the
   user to scroll just to reach the action buttons. */
@media (min-width:641px) and (max-height:820px){
  .license-modal-overlay,.guest-limit-modal-overlay{padding:10px!important}
  .license-modal-box,.guest-limit-modal{max-height:calc(100dvh - 20px)!important}
  .license-modal-box{width:min(620px,calc(100vw - 20px))!important;max-width:620px!important;padding:20px!important}
  .license-modal-close{top:12px!important;right:12px!important;width:34px!important;height:34px!important}
  .license-modal-kicker{font-size:.61rem!important}
  .license-modal-intro{grid-template-columns:44px 1fr!important;gap:12px!important;margin:12px 0 13px!important;padding-right:32px!important}
  .license-modal-icon{width:44px!important;height:44px!important;border-radius:12px!important}
  .license-modal-icon svg{width:23px!important;height:23px!important}
  .license-modal-box h3{font-size:1.55rem!important}
  .license-modal-intro p{font-size:.78rem!important;line-height:1.4!important;margin-top:4px!important}
  .license-modal-benefits{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;margin-bottom:9px!important}
  .license-benefit-item,.license-benefit-item.is-restricted{grid-column:auto!important;min-height:76px!important;padding:10px!important;gap:8px!important}
  .license-benefit-icon{width:28px!important;height:28px!important;border-radius:8px!important}
  .license-benefit-icon svg{width:14px!important;height:14px!important}
  .license-benefit-item strong{font-size:.73rem!important}
  .license-benefit-item span:not(.license-benefit-icon){font-size:.62rem!important;line-height:1.32!important}
  .license-format-picker{padding:9px!important;margin-bottom:8px!important}
  .license-format-heading{margin-bottom:6px!important}
  .license-format-grid{gap:5px!important}
  .license-format-grid label>span{min-height:42px!important;padding:6px 8px!important}
  .license-format-grid strong{font-size:.66rem!important}
  .license-format-grid small{font-size:.55rem!important}
  .license-credit-box{padding:8px 10px!important;margin-bottom:7px!important}
  .license-credit-box strong{font-size:.78rem!important}
  .license-credit-copy{padding:7px 9px!important}
  .license-modal-meta-row{padding:0 1px 7px!important}
  .license-modal-actions{padding-top:8px!important}
  .license-modal-actions .button{min-height:40px!important}
}

@media (min-width:641px) and (max-height:680px){
  .license-modal-box{max-width:600px!important;padding:14px 16px!important}
  .license-modal-kicker{font-size:.57rem!important}
  .license-modal-intro{margin:8px 0 9px!important}
  .license-modal-box h3{font-size:1.38rem!important}
  .license-modal-intro p{font-size:.72rem!important}
  .license-benefit-item,.license-benefit-item.is-restricted{min-height:66px!important;padding:8px!important}
  .license-benefit-item span:not(.license-benefit-icon){display:none!important}
  .license-format-grid label>span{min-height:38px!important}
  .license-credit-box{margin-bottom:5px!important}
  .license-modal-meta-row{padding-bottom:5px!important}
  .license-modal-link{font-size:.68rem!important}
  .license-modal-actions{position:sticky!important;bottom:-14px!important;z-index:4!important;margin:0 -16px -14px!important;padding:8px 16px 14px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--n2) 82%,transparent),var(--n2) 28%)!important}
}

/* Tablets and compact browser windows: the dialog remains centered when there
   is room and becomes a safe-area-aware sheet only when width is genuinely
   phone-sized. */
@media (min-width:641px) and (max-width:1100px){
  .license-modal-box,.guest-limit-modal{width:min(620px,calc(100vw - 32px))!important;max-width:620px!important}
}

@media (max-width:640px){
  .license-modal-overlay,.guest-limit-modal-overlay{
    align-items:flex-end!important;
    padding:0!important;
  }
  .license-modal-box,.guest-limit-modal{
    width:100%!important;
    max-width:none!important;
    max-height:calc(100dvh - max(8px,env(safe-area-inset-top)))!important;
    margin-top:max(8px,env(safe-area-inset-top))!important;
    margin-bottom:0!important;
    border-radius:18px 18px 0 0!important;
    padding:18px 16px calc(14px + env(safe-area-inset-bottom))!important;
    scrollbar-gutter:auto;
  }
  .license-modal-close{top:12px!important;right:12px!important}
  .license-modal-intro{grid-template-columns:44px minmax(0,1fr)!important;align-items:start!important;gap:12px!important;margin:12px 0 14px!important;padding-right:34px!important}
  .license-modal-icon{width:44px!important;height:44px!important}
  .license-modal-box h3{font-size:1.45rem!important}
  .license-modal-intro p{font-size:.78rem!important;line-height:1.42!important}
  .license-modal-benefits{grid-template-columns:1fr!important;gap:7px!important;margin-bottom:9px!important}
  .license-benefit-item,.license-benefit-item.is-restricted{min-height:auto!important;padding:10px!important;grid-template-columns:30px minmax(0,1fr)!important}
  .license-format-picker{padding:10px!important}
  .license-format-heading{align-items:flex-start!important;flex-direction:column!important;gap:2px!important}
  .license-format-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
  .license-format-grid label>span{min-height:46px!important}
  .license-credit-box{align-items:center!important;gap:9px!important;padding:10px!important}
  .license-credit-copy{padding:7px 8px!important}
  .license-modal-actions{
    position:sticky!important;
    z-index:5!important;
    bottom:calc(-14px - env(safe-area-inset-bottom))!important;
    display:grid!important;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr)!important;
    gap:8px!important;
    margin:10px -16px calc(-14px - env(safe-area-inset-bottom))!important;
    padding:10px 16px calc(14px + env(safe-area-inset-bottom))!important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--n2) 80%,transparent),var(--n2) 26%)!important;
  }
  .license-modal-actions .button,.license-confirm-button{width:100%!important;min-width:0!important}
}

@media (max-width:390px){
  .license-modal-box{padding-left:13px!important;padding-right:13px!important}
  .license-modal-kicker{font-size:.56rem!important;letter-spacing:.11em!important}
  .license-modal-intro{grid-template-columns:38px minmax(0,1fr)!important;gap:9px!important;padding-right:31px!important}
  .license-modal-icon{width:38px!important;height:38px!important;border-radius:11px!important}
  .license-modal-box h3{font-size:1.3rem!important}
  .license-modal-intro p{font-size:.72rem!important}
  .license-format-grid label>span{padding:7px!important}
  .license-credit-box{align-items:flex-start!important;flex-direction:column!important}
  .license-credit-copy{width:100%!important;justify-content:center!important}
  .license-modal-actions{grid-template-columns:1fr!important;margin-left:-13px!important;margin-right:-13px!important;padding-left:13px!important;padding-right:13px!important}
  .license-modal-actions .button-outline{order:2}
}

/* --------------------------------------------------------------------------
   Short-view-height page hardening. Long pages should scroll naturally rather
   than force oversized one-screen sections on notebooks/split-screen windows.
   -------------------------------------------------------------------------- */
@media (max-height:760px) and (min-width:700px){
  .auth-compact-layout{min-height:min(520px,calc(100dvh - 120px))!important}
  .auth-layout{min-height:0!important}
  .home-roadmap,.home-roadmap-stage,.hs-showcase-shell .hs-panels,.hs-panels{min-height:0!important}
  .home-roadmap-stage{height:auto!important}
  .map-hero-preview{min-height:min(430px,62dvh)!important}
}

/* Very wide content must never create a page-level horizontal scrollbar. */
@media (max-width:1100px){
  .site-shell :where(.map-hero-layout-v19,.map-overview-grid-v20,.map-meta-groups-v20,.country-map-grid,.country-map-grid-v41,.account-layout,.account-layout-v2,.editorial-hero-grid,.auth-layout){min-width:0!important;max-width:100%!important}
}