/* Eden Story modal viewport fix — 2026-09-30
   Keeps the entire create-story form reachable on desktop, Android and iPhone. */
.garden-modal-backdrop{
  overflow-y:auto !important;
  overflow-x:hidden;
  align-items:start !important;
  justify-items:center;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
}
.garden-story-create{
  width:min(620px, calc(100vw - 24px)) !important;
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  overflow-x:hidden;
  margin:auto;
  padding-bottom:max(24px, env(safe-area-inset-bottom));
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.garden-story-create .drawer-head{
  position:sticky;
  top:0;
  z-index:5;
  background:inherit;
  padding-top:2px;
}
.garden-story-create input,
.garden-story-create select,
.garden-story-create textarea,
.garden-story-create button{
  max-width:100%;
}
.garden-story-create input[type="file"]{
  width:100%;
  overflow:hidden;
}
.garden-story-create textarea{
  min-height:110px;
  resize:vertical;
}
.garden-story-create .story-upload-status{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.garden-story-create > .primary.wide{
  position:relative;
  width:100%;
  margin-top:8px;
  flex:0 0 auto;
}

@media (min-width:701px){
  .garden-modal-backdrop{
    padding-top:24px !important;
    padding-bottom:24px !important;
  }
  .garden-story-create{
    max-height:calc(100dvh - 48px);
  }
}

@media (max-width:700px){
  .garden-modal-backdrop{
    place-items:start center !important;
  }
  .garden-story-create{
    width:100% !important;
    max-height:calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
    border-radius:24px;
  }
}

@supports not (height: 100dvh){
  .garden-story-create{max-height:calc(100vh - 24px)}
  @media (min-width:701px){.garden-story-create{max-height:calc(100vh - 48px)}}
}


/* Desktop/Android dynamic-field refinement.
   When Image/Video is selected the extra upload row must expand the form
   without covering Audience or the submit button. */
.garden-story-create{
  scrollbar-gutter:stable;
}
.garden-story-create label{
  min-width:0;
}
.garden-story-create > label,
.garden-story-create > .story-upload-status,
.garden-story-create > .primary.wide{
  flex-shrink:0;
}
@media (min-width:701px){
  .garden-story-create{
    width:min(620px, calc(100vw - 48px)) !important;
    max-height:min(760px, calc(100dvh - 48px));
    padding:22px 24px 28px;
  }
}
@media (max-width:700px){
  .garden-story-create{
    padding-bottom:max(28px, env(safe-area-inset-bottom));
  }
}