/* ============================================================
   ARTEMIDA V152 — responsive composition polish.
   Scope: responsive geometry/usability only. Loaded last so older release
   rules stay intact while narrow/short viewports receive deterministic layout.
   ============================================================ */

/* Stable viewport math and shrink-safe layout primitives. */
html{overflow-x:clip!important}
body{min-width:0!important}
:where(.app-content,.page-wrap,.landing-shell,.landing-main,.landing-hero,.network-floats,
       .hero-layout,.tariff-layout,.ref-layout,.faq-hero,.legal-shell,.review-page-shell){min-width:0!important}
@supports(height:100dvh){
  .modal-layer,.review-layer,.landing-auth-layer{min-height:100dvh}
}

/* Dialogs must read as dialogs, not as transparent overlays on busy content. */
.modal-backdrop{
  background:rgba(3,3,5,.72)!important;
  -webkit-backdrop-filter:blur(16px) saturate(112%)!important;
  backdrop-filter:blur(16px) saturate(112%)!important;
}
.modal-layer>.modal{
  background:linear-gradient(145deg,rgba(27,24,29,.965),rgba(8,9,12,.955))!important;
  border-color:rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 30px 100px rgba(0,0,0,.58)!important;
}
html[data-theme="pearl"] .modal-backdrop{background:rgba(230,224,231,.76)!important}
html[data-theme="pearl"] .modal-layer>.modal{
  background:linear-gradient(145deg,rgba(252,249,252,.97),rgba(238,233,239,.96))!important;
}

/* The account dialog uses bounded fluid width instead of inheriting one fixed size. */
.modal-layer>.modal.profile-modal{
  width:min(640px,calc(100vw - 28px))!important;
  max-width:calc(100vw - 28px)!important;
  max-height:calc(100vh - 20px)!important;
  padding:clamp(14px,2vw,22px)!important;
  scrollbar-gutter:auto!important;
}
@supports(height:100dvh){
  .modal-layer>.modal.profile-modal{max-height:calc(100dvh - 20px)!important}
}

/* Short desktop/laptop windows: make the profile wider and use horizontal
   information groups. This preserves readable type instead of shrinking it. */
@media(min-width:700px) and (max-height:760px){
  .modal-layer>.modal.profile-modal{
    width:min(760px,calc(100vw - 28px))!important;
    max-width:calc(100vw - 28px)!important;
    padding:14px 16px!important;
    border-radius:20px!important;
  }
  .profile-modal .modal-head{margin-bottom:9px!important}
  .profile-modal .modal-head h3{margin-top:4px!important;font-size:1.08rem!important}
  .profile-modal .close-btn{width:36px!important;height:36px!important;flex-basis:36px!important}
  .profile-modal .profile-identity-card{min-height:52px!important;margin-top:4px!important;padding:7px 9px!important}
  .profile-modal .profile-avatar{width:38px!important;height:38px!important;flex-basis:38px!important}

  .profile-modal .profile-summary{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    margin:8px 0!important;
    overflow:hidden!important;
  }
  .profile-modal .profile-summary-row{
    min-height:54px!important;
    grid-template-columns:1fr!important;
    align-content:center!important;
    align-items:start!important;
    gap:3px!important;
    padding:8px 10px!important;
    border-top:0!important;
  }
  .profile-modal .profile-summary-row+.profile-summary-row{border-left:1px solid rgba(255,255,255,.065)!important}
  .profile-modal .profile-summary-label{font-size:.59rem!important;gap:6px!important}
  .profile-modal .profile-summary-value{
    justify-self:start!important;
    max-width:100%!important;
    padding-left:21px!important;
    font-size:.68rem!important;
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .profile-modal .profile-setting-card{min-height:50px!important;padding:7px 9px!important}
  .profile-modal .telegram-profile-toggle{height:48px!important;min-height:48px!important;max-height:48px!important}
  .profile-modal .telegram-profile-content .telegram-profile-actions,
  .profile-modal .telegram-profile-content .telegram-profile-actions.is-linked{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .profile-modal .profile-action{
    min-height:58px!important;
    grid-template-columns:28px minmax(0,1fr)!important;
    align-items:center!important;
    gap:7px!important;
    padding:7px 8px!important;
  }
  .profile-modal .profile-action::after{display:none!important}
  .profile-modal .profile-action b{font-size:.58rem!important}
  .profile-modal .profile-action small{font-size:.48rem!important;line-height:1.22!important}
  .profile-modal .telegram-unlink{margin-top:6px!important}
  .profile-modal .profile-logout{min-height:42px!important;margin-top:7px!important}
}

/* Phone profile: keep touch sizes and readable hierarchy. Scrolling inside a
   dialog is preferable to crushing labels into unreadably small text. */
@media(max-width:640px){
  .modal-layer{padding:6px!important}
  .modal-layer>.modal.profile-modal{
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    max-height:calc(100vh - 12px)!important;
    padding:10px!important;
  }
  @supports(height:100dvh){.modal-layer>.modal.profile-modal{max-height:calc(100dvh - 12px)!important}}
  .profile-modal .modal-head .overline{font-size:.52rem!important}
  .profile-modal .profile-identity-card b{font-size:.70rem!important}
  .profile-modal .profile-identity-card span:not(.profile-avatar){font-size:.54rem!important}
  .profile-modal .profile-summary-label{font-size:.58rem!important}
  .profile-modal .profile-summary-value{font-size:.62rem!important}
  .profile-modal .profile-setting-copy b{font-size:.63rem!important}
  .profile-modal .profile-setting-copy small{font-size:.50rem!important}
  .profile-modal .telegram-profile-copy b{font-size:.64rem!important}
  .profile-modal .telegram-profile-copy>span{font-size:.50rem!important}
  .profile-modal .profile-action b{font-size:.58rem!important}
  .profile-modal .profile-action small{font-size:.47rem!important}
}

/* Landscape phones have useful horizontal room but almost no vertical room. */
@media(min-width:480px) and (max-width:699px) and (max-height:500px){
  .modal-layer>.modal.profile-modal{width:calc(100vw - 12px)!important;padding:9px 10px!important}
  .profile-modal .profile-summary{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;margin:6px 0!important}
  .profile-modal .profile-summary-row{grid-template-columns:1fr!important;gap:2px!important;min-height:46px!important;padding:5px 7px!important;border-top:0!important}
  .profile-modal .profile-summary-row+.profile-summary-row{border-left:1px solid rgba(255,255,255,.06)!important}
  .profile-modal .profile-summary-value{justify-self:start!important;max-width:100%!important;padding-left:19px!important;text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .profile-modal .telegram-profile-content .telegram-profile-actions,
  .profile-modal .telegram-profile-content .telegram-profile-actions.is-linked{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .profile-modal .profile-action{grid-template-columns:25px minmax(0,1fr)!important;min-height:52px!important;padding:5px 6px!important}
  .profile-modal .profile-action::after{display:none!important}
}

/* Tablet/phone cabinet dock: the service button gets its own slot instead of
   floating on top of page cards. Safe-area insets cover notches/home bars. */
@media(max-width:1080px){
  body:not(.landing-page):has(.mobile-nav) .mobile-nav{
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(70px,calc(62px + env(safe-area-inset-right)))!important;
    bottom:max(6px,env(safe-area-inset-bottom))!important;
    height:64px!important;
    padding:5px!important;
    gap:4px!important;
    border-radius:20px!important;
  }
  body:not(.landing-page):has(.mobile-nav) .legal-hub{
    right:max(8px,env(safe-area-inset-right))!important;
    bottom:max(6px,env(safe-area-inset-bottom))!important;
  }
  body:not(.landing-page):has(.mobile-nav) .legal-hub summary{
    width:56px!important;
    min-width:56px!important;
    height:64px!important;
    border-radius:20px!important;
  }
  body:not(.landing-page):has(.mobile-nav) .legal-hub nav{
    right:0!important;
    bottom:calc(100% + 8px)!important;
    width:min(320px,calc(100vw - 16px))!important;
    max-height:calc(100vh - 92px)!important;
  }
  @supports(height:100dvh){
    body:not(.landing-page):has(.mobile-nav) .legal-hub nav{max-height:calc(100dvh - 92px)!important}
  }
  body:not(.landing-page):has(.mobile-nav) .page-wrap{
    padding-bottom:max(94px,calc(86px + env(safe-area-inset-bottom)))!important;
  }
}

@media(max-width:370px){
  body:not(.landing-page):has(.mobile-nav) .mobile-nav{right:max(66px,calc(58px + env(safe-area-inset-right)))!important}
  body:not(.landing-page):has(.mobile-nav) .legal-hub summary{width:52px!important;min-width:52px!important;height:60px!important;border-radius:18px!important}
  body:not(.landing-page):has(.mobile-nav) .mobile-nav{height:60px!important}
  .mobile-link,button.mobile-link{min-width:68px!important;flex-basis:68px!important}
}

/* Main landing page: below tablet width the promo becomes normal document
   content. A draggable/fixed ad should never cover the hero on a small screen. */
@media(max-width:1080px){
  .landing-page{overflow-x:hidden!important;overflow-y:auto!important}
  .landing-page .own-vpn-float:not([hidden]){
    position:relative!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;
    width:min(560px,calc(100% - 20px))!important;
    margin:12px auto max(92px,calc(84px + env(safe-area-inset-bottom)))!important;
    cursor:default!important;
    touch-action:auto!important;
  }
  .landing-page .own-vpn-float-head{cursor:default!important;touch-action:auto!important}
  .landing-page .own-vpn-float-handle{cursor:default!important}
}

/* Portrait phones: the landing hero breathes, buttons remain full-sized and
   network cards stay in normal flow. */
@media(max-width:520px){
  .landing-page .landing-shell{min-height:auto!important;padding:8px 8px 12px!important}
  .landing-page .landing-main{padding:18px 2px 12px!important}
  .landing-page .landing-hero>.landing-constellation{height:132px!important;width:min(430px,92vw)!important;margin:0 auto 2px!important}
  .landing-page .landing-hero h1 span{font-size:clamp(3.1rem,16vw,4.25rem)!important}
  .landing-page .landing-hero h1 em{font-size:.58rem!important}
  .landing-page .landing-hero-actions{width:min(340px,100%)!important;margin-top:14px!important;gap:8px!important}
  .landing-page .landing-hero-actions>.btn{min-height:46px!important}
  .landing-page .network-floats{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;margin:18px auto 0!important;gap:8px!important}
  .landing-page .network-float summary{min-height:60px!important}
}

/* Short landscape composition: deliberately choose what belongs in the first
   viewport instead of shrinking everything until it technically fits. */
@media(max-width:1024px) and (max-height:600px){
  .landing-page .landing-shell{min-height:auto!important;padding:6px 8px 12px!important}
  .landing-page .landing-main{padding:8px 2px 12px!important;justify-content:flex-start!important}
  .landing-page .landing-hero>.landing-constellation{
    width:min(360px,62vw)!important;
    height:72px!important;
    margin:0 auto 4px!important;
  }
  .landing-page .guardian-shield{width:58px!important;height:66px!important}
  .landing-page .guardian-logo{width:29px!important;height:34px!important}
  .landing-page .landing-hero h1{margin-bottom:0!important}
  .landing-page .landing-hero h1 span{font-size:clamp(2.45rem,8.4vw,3.8rem)!important}
  .landing-page .landing-hero h1 em{font-size:.52rem!important}
  .landing-page .landing-hero-actions{margin-top:7px!important;gap:7px!important}
  .landing-page .landing-hero-actions>.btn{min-height:42px!important;padding-inline:15px!important}
  .landing-page .network-floats{
    position:relative!important;
    left:auto!important;right:auto!important;bottom:auto!important;
    width:min(760px,calc(100% - 4px))!important;
    margin:10px auto 0!important;
    gap:7px!important;
  }
  .landing-page .network-float summary{min-height:54px!important;padding:8px 10px!important}
  .landing-page .own-vpn-float:not([hidden]){margin-top:10px!important;margin-bottom:18px!important}
  .landing-page .legal-hub{right:8px!important;bottom:8px!important}
  .landing-page .legal-hub summary{width:46px!important;min-width:46px!important;height:46px!important;border-radius:15px!important}
}
@media(min-width:520px) and (max-width:1024px) and (max-height:600px){
  .landing-page .network-floats{grid-template-columns:repeat(2,minmax(0,1fr))!important;justify-content:stretch!important}
}

/* The ordinary app hero should keep readable copy on very small phones. */
@media(max-width:360px){
  .hero-card{padding:22px 16px!important}
  .hero-card h1{font-size:clamp(2.25rem,12vw,3.15rem)!important;line-height:.93!important}
  .hero-card p{font-size:.73rem!important;line-height:1.48!important}
  .hero-actions .btn{min-height:44px!important}
}

/* Very wide screens: cap line lengths/composition instead of stretching cards. */
@media(min-width:1800px){
  .landing-nav{width:min(1280px,100%)!important}
  .landing-page .landing-hero{width:min(1120px,100%)!important}
  .page-wrap{max-width:1480px!important}
  .legal-shell,.review-page-shell{max-width:1080px!important}
}

/* Touch ergonomics without affecting pointer-driven desktop density. */
@media(pointer:coarse){
  :where(.close-btn,.review-close,.theme-trigger,.site-login-button,.account-button,.legal-hub summary){min-width:44px;min-height:44px}
}

@media(prefers-reduced-motion:reduce){
  .landing-page .network-float,.legal-hub summary{animation:none!important}
}

/* V152.1 — laptop/desktop collision guard.
   The draggable promo only floats when the viewport has enough side gutter.
   On narrower desktops it becomes real document content instead of covering
   the centered hero/network cards. */
@media(max-width:1579px){
  .landing-page{overflow-x:hidden!important;overflow-y:auto!important}
  .landing-page .own-vpn-float:not([hidden]){
    position:relative!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;
    width:min(560px,calc(100% - 20px))!important;
    margin:14px auto max(92px,calc(84px + env(safe-area-inset-bottom)))!important;
    cursor:default!important;
    touch-action:auto!important;
  }
  .landing-page .own-vpn-float-head{cursor:default!important;touch-action:auto!important}
  .landing-page .own-vpn-float-handle{cursor:default!important}
}

/* Only one auxiliary surface should compete for attention at a time. */
.landing-page:has(.legal-hub[open]) .own-vpn-float{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.landing-page .legal-hub[open] nav{
  background:linear-gradient(145deg,rgba(24,24,29,.985),rgba(10,11,14,.985))!important;
  border-color:rgba(255,255,255,.13)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 28px 80px rgba(0,0,0,.62)!important;
  -webkit-backdrop-filter:blur(24px) saturate(112%)!important;
  backdrop-filter:blur(24px) saturate(112%)!important;
  max-height:min(620px,calc(100vh - 88px))!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
@supports(height:100dvh){
  .landing-page .legal-hub[open] nav{max-height:min(620px,calc(100dvh - 88px))!important}
}
html[data-theme="pearl"] .landing-page .legal-hub[open] nav{
  background:linear-gradient(145deg,rgba(255,255,255,.985),rgba(241,237,243,.985))!important;
}

/* Keep fixed hubs inside very narrow / very short viewports. */
@media(max-width:520px){
  .landing-page .legal-hub{right:max(8px,env(safe-area-inset-right))!important;bottom:max(8px,env(safe-area-inset-bottom))!important}
  .landing-page .legal-hub nav{right:0!important;width:min(320px,calc(100vw - 16px))!important}
}
@media(max-height:430px){
  .landing-page .legal-hub[open] nav{max-height:calc(100vh - 64px)!important}
  @supports(height:100dvh){.landing-page .legal-hub[open] nav{max-height:calc(100dvh - 64px)!important}}
}

/* Account/payment dialogs must sit above the mobile top bar and bottom dock.
   Older mobile layers use z-index 640/720, which otherwise paints through the
   dialog and hides its title/close control on phones and landscape devices. */
.modal-layer{z-index:1200!important}