/* V7.2.3 — Mobile usability and workspace compatibility */

/* Reliable icons for the four home tools. */
.v600-tools i svg{
  width:25px;
  height:25px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (max-width:900px){
  html,body{
    min-height:100%;
    overscroll-behavior-y:auto;
  }

  /* Direct feature routes must use normal page scrolling on phones. */
  body:not([data-initial-view="home"]){
    overflow-y:auto!important;
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
  }
  body:not([data-initial-view="home"]) .main-content,
  body:not([data-initial-view="home"]) .direct-tool-page{
    min-height:100dvh;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body:not([data-initial-view="home"]) #featureModal,
  body:not([data-initial-view="home"]) #featureModal.open{
    position:static!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
    overflow:visible!important;
    touch-action:auto!important;
  }
  body:not([data-initial-view="home"]) #featureModal .modal-dialog,
  body:not([data-initial-view="home"]) #featureModal .grammar-studio-dialog,
  body:not([data-initial-view="home"]) #featureModal .exercise-studio-dialog,
  body:not([data-initial-view="home"]) #featureModal .community-studio-dialog{
    position:static!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    overflow:visible!important;
    transform:none!important;
  }
  body:not([data-initial-view="home"]) #featureModal .modal-body,
  body:not([data-initial-view="home"]) #featureModal .exercise-studio-dialog>.modal-body.exercise-studio-root,
  body:not([data-initial-view="home"]) #featureModal .community-studio-dialog .modal-body{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding-bottom:max(20px,env(safe-area-inset-bottom))!important;
    overflow:visible!important;
    -webkit-overflow-scrolling:touch;
  }

  /* Avoid content-visibility hiding sections or illustrations after route changes. */
  body:not([data-initial-view="home"]) #featureModal,
  body:not([data-initial-view="home"]) .grammar-studio,
  body:not([data-initial-view="home"]) .exercise-studio-root,
  body:not([data-initial-view="home"]) .community-studio-root,
  body:not([data-initial-view="home"]) .number-converter-v2515{
    content-visibility:visible!important;
    contain:none!important;
  }

  /* Media and diagrams must never collapse or overflow. */
  body:not([data-initial-view="home"]) #featureModal img,
  body:not([data-initial-view="home"]) #featureModal svg,
  body:not([data-initial-view="home"]) #featureModal canvas,
  body:not([data-initial-view="home"]) #featureModal video{
    max-width:100%!important;
    height:auto;
  }
  body:not([data-initial-view="home"]) #featureModal img{
    display:block;
    object-fit:contain;
  }

  /* Long horizontal controls remain swipeable instead of being clipped. */
  .gs-level-strip,.gs-overview,.gs-review-list,
  .exs-levels,.exs-stat-strip,.exs-count-picker,
  .cms26-tabs,.cms26-compose-types,.cms26-prompt-row,
  .number-example-row{
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    overscroll-behavior-inline:contain;
  }
}

@media (max-width:640px){
  /* The four home tools become a large, touch-friendly swipe carousel. */
  .v600-tools{
    display:flex!important;
    grid-template-columns:none!important;
    gap:12px!important;
    width:auto;
    margin-right:-11px;
    padding:2px 11px 14px 1px;
    overflow-x:auto!important;
    overflow-y:visible!important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:1px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    overscroll-behavior-inline:contain;
  }
  .v600-tools::-webkit-scrollbar{display:none}
  .v600-tools::after{
    content:"";
    flex:0 0 1px;
  }
  .v600-tools a{
    flex:0 0 min(82vw,330px)!important;
    min-width:270px;
    min-height:126px!important;
    padding:18px!important;
    grid-template-columns:54px minmax(0,1fr) 38px!important;
    grid-template-rows:1fr!important;
    align-items:center!important;
    gap:13px!important;
    border-radius:19px!important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    box-shadow:0 10px 26px rgba(28,67,119,.10)!important;
  }
  .v600-tools a:active{transform:scale(.985)}
  .v600-tools i{
    flex:0 0 54px!important;
    width:54px!important;
    height:54px!important;
    border-radius:16px!important;
    font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  }
  .v600-tools i svg{width:29px;height:29px}
  .v600-tools a>div{min-width:0}
  .v600-tools b{
    font-size:17px!important;
    line-height:1.25;
  }
  .v600-tools small{
    display:block!important;
    margin-top:6px!important;
    font-size:12px!important;
    line-height:1.48!important;
    color:#65758b!important;
  }
  .v600-tools span{
    align-self:center!important;
    width:38px!important;
    height:38px!important;
    font-size:18px;
  }

  /* Larger readable controls inside all four mobile workspaces. */
  body:not([data-initial-view="home"]) .main-content{padding:8px 8px 28px!important}
  .direct-tool-header{
    min-height:62px!important;
    padding:9px 10px!important;
  }
  .direct-tool-copy h1{font-size:18px!important}
  .direct-tool-copy p{
    display:block!important;
    white-space:normal!important;
    line-height:1.35;
    font-size:11px!important;
  }

  .grammar-studio,.exercise-studio-root,.community-studio-root,.number-converter-v2515{
    font-size:14px;
  }
  .grammar-studio button,.exercise-studio-root button,.community-studio-root button,
  .number-converter-v2515 button,.number-converter-v2515 input,
  .number-converter-v2515 textarea,.number-converter-v2515 select{
    min-height:44px;
  }

  /* Do not hide useful descriptions merely because the screen is narrow. */
  .gs-card-body small,.gs-card-title-row em,.exs-mode-copy small{
    display:block!important;
  }
  .gs-card-main{min-height:82px!important}
  .gs-card-title-row strong{font-size:16px!important}
  .gs-card-body small,.exs-mode-copy small{font-size:11.5px!important;line-height:1.45}

  .cms26-post-body,.cms26-comment p,.gs-prose,.gs-detail-paragraph,
  .exs-question-card,.number-converter-note{
    overflow-wrap:anywhere;
    word-break:normal;
  }
}

@media (max-width:380px){
  .v600-tools a{
    flex-basis:86vw!important;
    min-width:255px;
    padding:16px!important;
    grid-template-columns:50px minmax(0,1fr) 34px!important;
  }
  .v600-tools i{width:50px!important;height:50px!important}
  .v600-tools b{font-size:16px!important}
  .v600-tools small{font-size:11.5px!important}
}

/* V7.3.1 — prevent direct learning routes from widening the document. */
html,body{max-width:100%}
body[data-initial-view="exercises"],body[data-initial-view="community"]{overflow-x:hidden!important}
body[data-initial-view="exercises"] #featureModal,
body[data-initial-view="community"] #featureModal,
body[data-initial-view="exercises"] #featureModal .modal-dialog,
body[data-initial-view="community"] #featureModal .modal-dialog,
body[data-initial-view="exercises"] #featureModal .modal-body,
body[data-initial-view="community"] #featureModal .modal-body{max-width:100%!important;overflow-x:hidden!important}