/*
 * Asia2TV mobile foundation v426.
 * Shared responsive contracts: shell spacing, popovers, touch targets and dialogs.
 */
@media (max-width:820px){
  body.studio-theme{
    --studio-mobile-header-popover-top:76px;
    --studio-mobile-overlay-gutter:12px;
    --studio-mobile-overlay-radius:18px;
    --studio-mobile-overlay-z:10080;
  }

  body.studio-theme .studio-tools-popover,
  body.studio-theme .studio-notification-popover,
  body.studio-theme .studio-account-popover,
  body.studio-theme .studio-account-popover.is-member{
    position:fixed!important;
    top:var(--studio-mobile-header-popover-top)!important;
    right:var(--studio-mobile-overlay-gutter)!important;
    left:var(--studio-mobile-overlay-gutter)!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - var(--studio-mobile-header-popover-top) - var(--studio-mobile-overlay-gutter))!important;
    margin:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }

  body.studio-theme .studio-notification-preview{
    max-height:calc(100dvh - var(--studio-mobile-header-popover-top) - 148px)!important;
  }
}

/* Mobile navigation submenus have one state owner: `.is-open`. */
@media (max-width:1120px){
  body.studio-theme .studio-nav-parent>.studio-nav-dropdown,
  body.studio-theme .studio-nav-parent:hover>.studio-nav-dropdown,
  body.studio-theme .studio-nav-parent:focus-within>.studio-nav-dropdown{
    display:none!important;
    animation:none!important;
  }

  body.studio-theme .studio-nav-parent.is-open>.studio-nav-dropdown{
    display:grid!important;
    animation:studio-menu-in .15s ease-out both!important;
  }

  body.studio-theme .studio-nav-dropdown a{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
}

@media (max-width:520px){
  body.studio-theme{
    --studio-mobile-overlay-gutter:10px;
  }
}

/* 510.1.8: keep the visible slider bars, enlarge only their touch target.
   No horizontal expansion: adjacent slide targets keep separate hit areas. */
@media(max-width:1024px){
  body.studio-theme .studio-page :is(.studio-cine-dots,.studio-exact-dots) button{
    position:relative;
    overflow:visible!important;
    touch-action:manipulation;
  }
  body.studio-theme .studio-page :is(.studio-cine-dots,.studio-exact-dots) button::before{
    content:"";
    position:absolute;
    inset-block:-20px;
    inset-inline:0;
  }
}
@media(max-width:680px){
  /* The old 18px bottom offset clips 2px of the 44px touch target. */
  body.studio-theme .studio-page .studio-cine-dots{bottom:20px!important}
  /* Complete the 620px flex reset up to the mobile layout's 680px edge. */
  body.studio-theme .studio-page .studio-cine-actions>:is(a,button){
    min-width:0;
    flex:1 1 0%;
  }
}

/* Reaction menus align with their trigger in both reading directions.
   Replaces the physical left/right anchors in studio-community-compact-v192.css. */
body.studio-theme [data-community] .comment-reaction-control .comment-reactions{
  left:auto;
  right:auto;
  inset-inline-start:0;
  inset-inline-end:auto;
}

/* Keep all report fields and the submit button reachable when the usable
   viewport shrinks. Existing desktop/phone form layout stays unchanged. */
body.studio-theme [data-community] .community-report-modal{
  box-sizing:border-box;
  padding-block-start:max(20px,env(safe-area-inset-top,0px));
  padding-block-end:max(20px,env(safe-area-inset-bottom,0px));
}
body.studio-theme [data-community] .community-report-modal>div{
  box-sizing:border-box;
  min-width:0;
  max-height:calc(100vh - 40px);
  max-height:calc(100dvh - max(20px,env(safe-area-inset-top,0px)) - max(20px,env(safe-area-inset-bottom,0px)));
  overflow-y:auto;
  overscroll-behavior:contain;
}

/* V510.1.8: header layout and a shared viewport anchor. */
/* Compact tools retain two columns where the available width supports them. */
@media(min-width:821px){
  html body.studio-theme .studio-site-header .studio-tools-popover{
    width:min(420px,calc(100vw - 24px));
  }
}
body.studio-theme .studio-site-header .studio-tools-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
body.studio-theme .studio-site-header .studio-tools-grid>a{
  grid-template-columns:30px minmax(0,1fr);
  gap:8px;
  min-width:0;
  min-height:80px;
}
body.studio-theme .studio-site-header .studio-tools-grid>a>i{
  width:30px;
  height:30px;
}
@media(max-width:520px){
  body.studio-theme .studio-site-header .studio-tools-grid{grid-template-columns:minmax(0,1fr)}
}

/* Tablet navigation uses the same explicit open state as phone navigation.
   Keep viewport-positioned children out of a filtered containing block. */
@media(max-width:1120px){
  body.studio-theme .studio-site-header{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  body.studio-theme .studio-site-header .studio-header-nav-group>nav[data-studio-exact-nav]{
    display:none!important;
    position:fixed!important;
    top:var(--studio-mobile-header-popover-top,118px)!important;
    right:var(--studio-mobile-overlay-gutter,12px)!important;
    left:var(--studio-mobile-overlay-gutter,12px)!important;
    width:auto!important;
    height:auto!important;
    min-width:0;
    max-height:calc(100dvh - var(--studio-mobile-header-popover-top,118px) - 12px)!important;
    margin:0;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
  }
  body.studio-theme .studio-site-header .studio-header-nav-group>nav[data-studio-exact-nav].is-open{
    display:grid!important;
  }
  body.studio-theme .studio-site-header .studio-header-nav-group>nav[data-studio-exact-nav]>a,
  body.studio-theme .studio-site-header .studio-header-nav-group>nav[data-studio-exact-nav]>.studio-nav-parent>button{
    min-height:44px;
    height:auto;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

/* Membership formerly stayed anchored to a small button between 521–820px. */
@media(max-width:820px){
  body.studio-theme .studio-site-header .studio-membership-popover{
    position:fixed!important;
    top:var(--studio-mobile-header-popover-top,76px)!important;
    right:var(--studio-mobile-overlay-gutter,12px)!important;
    left:var(--studio-mobile-overlay-gutter,12px)!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    overflow-x:hidden!important;
  }
}

/* Six member actions need 294px: six 44px targets plus five 6px gaps.
   A dedicated row fits a 320px viewport with 10px gutters on each side. */
@media(max-width:420px){
  body.studio-theme .studio-site-header,
  body.studio-theme .studio-site-header.is-scrolled{
    height:auto!important;
    min-height:98px;
  }
  body.studio-theme .studio-site-header .studio-exact-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto;
    width:calc(100% - 20px)!important;
    height:auto!important;
    gap:6px!important;
    padding-block:8px;
  }
  body.studio-theme .studio-site-header .studio-header-nav-group{
    width:100%;
    min-height:32px;
  }
  body.studio-theme .studio-site-header .studio-exact-logo img{
    width:102px;
    height:32px;
  }
  body.studio-theme .studio-site-header .studio-exact-actions{
    width:100%;
    min-width:0!important;
    margin-inline:0!important;
    gap:6px!important;
    justify-content:space-between;
  }
  body.studio-theme .studio-site-header :is(
    .studio-tools-trigger,.studio-notification-trigger,.studio-exact-square,
    .studio-account-button.studio-account-initial,.studio-membership-card>button
  ){
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
  }
}