/* Mobile full-screen modals & map inspector (≤760px) */
@media(max-width:760px){
  dialog[open]:is(
    #log-dialog,
    #photo-dialog,
    #location-dialog,
    #auth-dialog,
    #site-media-library,
    .reach-out-dialog,
    .bug-report-dialog,
    .legal-contact-dialog
  ){
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    max-height:none!important;
    min-height:100dvh;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    background:var(--panel);
  }
  [data-theme=light] dialog[open]:is(#log-dialog,#photo-dialog,#location-dialog,#auth-dialog,#site-media-library,.reach-out-dialog,.bug-report-dialog,.legal-contact-dialog){
    background:#fff;
  }
  dialog[open]::backdrop{
    background:#00131cd9;
    backdrop-filter:blur(4px);
  }

  /* Sticky header + scroll body */
  dialog[open] .dialog-top,
  dialog[open] .species-dialog-heading,
  dialog[open] .site-media-library-top{
    flex:0 0 auto;
    position:sticky;
    top:0;
    z-index:6;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin:0;
    padding:max(10px,env(safe-area-inset-top)) 16px 12px!important;
    background:inherit;
    border-bottom:1px solid var(--line);
  }
  dialog[open] .species-dialog-heading h2{
    flex:1;
    min-width:0;
    margin:0;
    padding-right:8px;
    font-size:clamp(18px,5vw,22px);
    line-height:1.25;
  }
  dialog[open] .dialog-top .eyebrow{
    flex:1;
    min-width:0;
    margin:0;
    padding-top:4px;
  }
  dialog[open]#log-dialog{
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  dialog[open]#log-dialog #log-form{
    padding:0 0 max(16px,env(safe-area-inset-bottom));
  }
  dialog[open]#log-dialog #log-form > :not(.dialog-top){
    padding-left:16px;
    padding-right:16px;
  }
  dialog[open] #species-profile,
  dialog[open] #location-profile,
  dialog[open] .site-media-library-body{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:max(16px,env(safe-area-inset-bottom));
  }
  dialog[open].auth-dialog > :not(.dialog-top){
    padding-left:20px;
    padding-right:20px;
    padding-bottom:max(20px,env(safe-area-inset-bottom));
  }
  dialog[open].auth-dialog{
    overflow-y:auto;
  }
  dialog[open]:is(.reach-out-dialog,.bug-report-dialog,.legal-contact-dialog){
    overflow-y:auto;
    padding:0 20px max(20px,env(safe-area-inset-bottom))!important;
  }
  dialog[open]:is(.reach-out-dialog,.bug-report-dialog,.legal-contact-dialog) .dialog-top{
    margin:0 -20px 12px;
    width:calc(100% + 40px);
  }

  /* Top-right close control */
  .dialog-top > button[id^="close-"],
  .species-dialog-heading > button[id^="close-"],
  #site-media-library-close,
  .map-inspector #close-inspector{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    width:42px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
    margin:0 0 0 auto!important;
    flex:0 0 42px;
    border-radius:11px!important;
    border:1px solid var(--line)!important;
    background:var(--bg)!important;
    color:var(--muted)!important;
    box-shadow:0 2px 8px #00131c18;
  }
  .dialog-top > button[id^="close-"] .icon,
  .species-dialog-heading > button[id^="close-"] .icon,
  #site-media-library-close .icon,
  .map-inspector #close-inspector .icon{
    width:20px!important;
    height:20px!important;
    margin:0!important;
  }
  [data-theme=light] .dialog-top > button[id^="close-"],
  [data-theme=light] .species-dialog-heading > button[id^="close-"],
  [data-theme=light] #site-media-library-close,
  [data-theme=light] .map-inspector #close-inspector{
    background:#f4faff!important;
    border-color:#c5e0f2!important;
    color:#5a849c!important;
  }

  /* Map destination / wildlife — full viewport */
  .map-inspector:not([hidden]){
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    max-height:none!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    z-index:9500;
    display:flex!important;
    flex-direction:column;
    overflow:hidden;
    background:var(--panel);
    backdrop-filter:none;
  }
  [data-theme=light] .map-inspector:not([hidden]){background:#fff}
  .map-inspector:not([hidden]) .inspector-top{
    flex:0 0 auto;
    padding:max(10px,env(safe-area-inset-top)) 16px 10px!important;
    border-bottom:1px solid var(--line);
    background:inherit;
  }
  .map-inspector:not([hidden]) .inspector-tabs{
    flex:0 0 auto;
    margin:10px 16px 12px!important;
  }
  .map-inspector:not([hidden]) #inspector-overview,
  .map-inspector:not([hidden]) #inspector-wildlife{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:max(12px,env(safe-area-inset-bottom));
  }
  .map-inspector:not([hidden]) .wildlife{
    padding:0 16px 8px;
  }
  .map-inspector:not([hidden]) .detail-body{
    padding:16px 18px 20px!important;
  }
  .map-inspector:not([hidden]) #detail .site-photo,
  .map-inspector:not([hidden]) .site-photo--interactive{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    aspect-ratio:16/10;
    margin:0;
    border-radius:0;
  }

  /* Profile / species modals — full-width images (no vw-capped shrink) */
  .profile-visual{
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    position:static!important;
    align-self:stretch!important;
  }
  #photo-dialog .profile-layout,
  #location-profile .profile-layout{
    display:flex!important;
    flex-direction:column;
    width:100%;
  }
  #photo-dialog .profile-photo-col,
  #location-profile .profile-photo-col{
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    box-sizing:border-box;
  }
  #photo-dialog .profile-photo-col .profile-visual-ref,
  #location-profile .profile-photo-col .profile-visual-ref,
  #photo-dialog .profile-photo-col > .text-button,
  #location-profile .profile-photo-col > .text-button{
    display:inline-flex;
    margin:10px 16px 4px;
  }
  #photo-dialog .profile-about-head,
  #photo-dialog .profile-facts-col,
  #photo-dialog .profile-context-col,
  #photo-dialog .profile-places,
  #location-profile .profile-about-head,
  #location-profile .profile-facts-col,
  #location-profile .profile-context-col,
  #location-profile .location-profile-actions{
    width:100%!important;
    max-width:100%!important;
    padding-left:16px!important;
    padding-right:16px!important;
    box-sizing:border-box;
  }
  .species-dialog .profile-photo-frame.species-image-frame,
  .profile-photo-frame.species-image-frame,
  .profile-visual .profile-photo-frame{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    aspect-ratio:16/10;
    border-radius:0;
    margin:0;
    box-sizing:border-box;
  }
  .species-dialog .profile-photo-frame.species-image-frame > .profile-photo,
  .profile-photo-frame .profile-photo,
  .profile-photo{
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    min-height:0!important;
    height:100%!important;
    object-fit:cover;
    display:block;
  }
  .wildlife-grid .animal-card .species-image-frame,
  .map-inspector .animal-card .species-image-frame{
    width:100%;
    max-width:100%;
  }
  .wildlife-grid .animal-card .species-image-frame img,
  .map-inspector .animal-card .species-image-frame img{
    width:100%!important;
    display:block;
  }

  #log-dialog{
    width:100%!important;
    max-width:100%!important;
  }
  #photo-dialog.species-dialog,
  #location-dialog.species-dialog{
    width:100%!important;
    max-width:100%!important;
  }

  /* Account profile crop dialog */
  dialog[open]#account-crop-dialog{
    position:fixed!important;
    inset:0!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    overflow-y:auto;
  }
}